feat: 服务器模块开发

src/router/modules/server.ts

@@ -0,0 +1,12 @@
+export default {
+  path: "/server",
+  meta: {
+    title: "服务器",
+    icon: "homeFilled",
+    // showLink: false,
+    rank: 3,
+    roles: ["admin", "common"]
+  },
+  component: () => import("@/views/serverModule/index.vue"),
+  name: "ServerList"
+} as RouteConfigsTable;

src/views/device/components/DeviceCard.vue

@@ -79,6 +79,7 @@ const isEnabledClass = computed(() => [
   // background-color: skyblue;
   border: 1.5px solid #52c41a;
   border-radius: 8px;
+  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
 
   &_fault {
     border: 1.5px solid #e80d0d;

src/views/serverModule/components/ServerCard.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+import serverIcon from "@/assets/svg/server/server.svg?component";
+defineOptions({
+  name: "DeviceCard"
+});
+
+interface CardProductType {
+  isEnabled: boolean;
+  state: string;
+  description: string;
+  deviceSort: string;
+}
+
+const props = defineProps({
+  device: {
+    type: Object as PropType<CardProductType>
+  }
+});
+
+const cardClass = computed(() => [
+  "server-card",
+  { "server-card_offline": props.device?.state === "离线" }
+]);
+
+const stateClass = computed(() => [
+  "server-state",
+  { "server-state_offline": props.device?.state === "离线" }
+]);
+</script>
+
+<template>
+  <div :class="cardClass">
+    <div class="server-header">
+      <div class="server-name">{{ device?.deviceSort }}</div>
+      <div :class="stateClass">{{ device?.state }}</div>
+    </div>
+    <div class="server-content">
+      <div class="server-content-left">
+        <serverIcon />
+      </div>
+      <div class="server-content-right">进度条</div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.server-card {
+  box-sizing: border-box;
+  height: 182px;
+  // background-color: skyblue;
+  // border: 1.5px solid #52c41a
+  border-radius: 12px;
+  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
+
+  &_offline {
+    background-color: #f5f5f5;
+    // border: 1.5px solid #dcdcdc;
+  }
+
+  .server-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 54px;
+    padding: 16px;
+    border-bottom: 1px solid #e0e0e0;
+
+    .server-state {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 48px;
+      height: 24px;
+      color: #fff;
+      text-align: center;
+      background-color: #52c41a;
+      border-radius: 0 12px;
+
+      &_offline {
+        background-color: #dcdcdc;
+      }
+    }
+  }
+
+  .server-content {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 128px;
+    padding: 16px;
+
+    .server-content-left {
+      width: 80px;
+    }
+
+    .server-content-right {
+      flex: 1;
+    }
+  }
+}
+</style>

src/views/serverModule/index.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import ServerCard from "./components/ServerCard.vue";
+import { getCardList } from "@/api/list";
+import { onMounted, ref } from "vue";
+defineOptions({
+  name: "ServerList"
+});
+
+const svg = `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `;
+
+const pagination = ref({ current: 1, pageSize: 12, total: 0 });
+
+const deviceList = ref([]);
+
+const searchValue = ref("");
+const dataLoading = ref(true);
+// const onSubmit = () => {
+//   console.log("submit!");
+// };
+const onPageSizeChange = (size: number) => {
+  pagination.value.pageSize = size;
+  pagination.value.current = 1;
+};
+const onCurrentChange = (current: number) => {
+  pagination.value.current = current;
+};
+const getCardListData = async () => {
+  try {
+    const { data } = await getCardList();
+    deviceList.value = data.list;
+    console.log(data.list);
+    pagination.value = {
+      ...pagination.value,
+      total: data.list.length
+    };
+  } catch (e) {
+    console.log(e);
+  } finally {
+    setTimeout(() => {
+      dataLoading.value = false;
+    }, 500);
+  }
+};
+onMounted(() => {
+  getCardListData();
+});
+</script>
+
+<template>
+  <div class="main p-4">
+    <div class="mt-4 mb-5">
+      <el-button> {{ `全部状态(${90})` }} </el-button>
+      <el-button> {{ `在线(${80})` }}</el-button>
+      <el-button>{{ `离线(${10})` }}</el-button>
+    </div>
+    <div
+      v-loading="dataLoading"
+      :element-loading-svg="svg"
+      element-loading-svg-view-box="-10, -10, 50, 50"
+    >
+      <el-empty
+        v-show="
+          deviceList
+            .slice(
+              pagination.pageSize * (pagination.current - 1),
+              pagination.pageSize * pagination.current
+            )
+            .filter(v =>
+              v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
+            ).length === 0
+        "
+        :description="`${searchValue} 产品不存在`"
+      />
+      <template v-if="pagination.total > 0">
+        <el-row :gutter="16">
+          <el-col
+            class="mb-4 w-[100%]"
+            v-for="(device, index) in deviceList
+              .slice(
+                pagination.pageSize * (pagination.current - 1),
+                pagination.pageSize * pagination.current
+              )
+              .filter(v =>
+                v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
+              )"
+            :key="index"
+            :xs="6"
+            :sm="6"
+            :md="6"
+            :lg="6"
+            :xl="4"
+          >
+            <ServerCard :device="device" />
+          </el-col>
+        </el-row>
+        <el-pagination
+          v-model:currentPage="pagination.current"
+          class="float-right"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[12, 24, 36]"
+          :background="false"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="onPageSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </template>
+    </div>
+  </div>
+</template>