feat: 模型列表模块开发

index.html

@@ -18,10 +18,10 @@
     />
     <title>pure-admin-thin</title>
     <link rel="icon" href="/favicon.ico" />
-    <!-- update 2024-01-17 10:21 -->
+    <!-- update 2024-01-17 13:23 -->
     <link
       rel="stylesheet"
-      href="//at.alicdn.com/t/c/font_4412653_ngfc2cgeuc.css"
+      href="//at.alicdn.com/t/c/font_4412653_abhopwxjly.css"
     />
     <script>
       window.process = {};

src/router/modules/model.ts

@@ -0,0 +1,12 @@
+export default {
+  path: "/model",
+  meta: {
+    title: "模型列表",
+    icon: "icon-moxingliebiao-weixuan",
+    // showLink: false,
+    rank: 4,
+    roles: ["admin", "common"]
+  },
+  component: () => import("@/views/modelList/index.vue"),
+  name: "ModelList"
+} as RouteConfigsTable;

src/views/device/index.vue

@@ -18,7 +18,7 @@ const svg = `
         " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
       `;
 
-const pagination = ref({ current: 1, pageSize: 9, total: 0 });
+const pagination = ref({ current: 1, pageSize: 12, total: 0 });
 
 const deviceList = ref([]);
 
@@ -135,9 +135,9 @@ onMounted(() => {
                   v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
                 )"
               :key="index"
-              :xs="6"
+              :xs="24"
-              :sm="6"
+              :sm="24"
-              :md="8"
+              :md="12"
               :lg="8"
               :xl="6"
             >
@@ -146,10 +146,10 @@ onMounted(() => {
           </el-row>
           <el-pagination
             v-model:currentPage="pagination.current"
-            class="float-right"
+            class="absolute right-4 bottom-0"
             :page-size="pagination.pageSize"
             :total="pagination.total"
-            :page-sizes="[9, 18, 36]"
+            :page-sizes="[12, 18, 36]"
             :background="false"
             layout="total, sizes, prev, pager, next, jumper"
             @size-change="onPageSizeChange"

src/views/modelList/components/ModelCard.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+import { model_OCR, model_mark, model_colour } from "./static";
+
+defineOptions({
+  name: "ModelCard"
+});
+
+interface CardProductType {
+  isEnabled: boolean;
+  state: string;
+  description: string;
+  deviceSort: string;
+  type: number;
+}
+
+const props = defineProps({
+  device: {
+    type: Object as PropType<CardProductType>
+  }
+});
+
+const cardClass = computed(() => [
+  "model-card",
+  { "model-card_offline": props.device?.state === "离线" }
+]);
+
+// const stateClass = computed(() => [
+//   "model-state",
+//   { "model-state_offline": props.device?.state === "离线" }
+// ]);
+</script>
+
+<template>
+  <div :class="cardClass">
+    <div class="model-header">
+      <div class="model-name">{{ device?.deviceSort }}</div>
+      <div class="model-icon">
+        <img :src="model_OCR" alt="" v-if="device?.type === 1" />
+        <img :src="model_mark" alt="" v-else-if="device?.type === 2" />
+        <img :src="model_colour" alt="" v-else />
+      </div>
+    </div>
+    <div class="model-content">
+      <div class="model-version">
+        <i class="iconfont icon-banben model-content-icon" />
+        版本: <span>{{ "V1.6.25" }}</span>
+      </div>
+      <div class="model-provider">
+        <i class="iconfont icon-tigongfang model-content-icon" />
+        提供方: <span>{{ "苏胜天" }}</span>
+      </div>
+      <div class="model-updateTime">
+        <i class="iconfont icon-shijian model-content-icon" />
+        更新时间: <span>{{ "2023.09.10" }}</span>
+      </div>
+      <div class="model-introduction">
+        模型简介:
+        <span>{{
+          "针对企业人员是否有违章违规的问题，首先采用高性能的深度学习目标检测算法对图像中的人员进行定位等。"
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.model-card {
+  box-sizing: border-box;
+  width: 100%;
+  height: 278px;
+  border-radius: 8px;
+  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
+
+  .model-header {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 88px;
+    padding: 16px;
+    font-size: 16px;
+    font-weight: 700;
+    color: #154ddd;
+    background-image: url("../../../assets/model_header.png");
+    background-repeat: no-repeat;
+    background-position: 100% 100%;
+    background-size: cover;
+    border-radius: 8px 8px 0 0;
+
+    .model-icon {
+      position: absolute;
+      top: 8px;
+      right: 16px;
+    }
+  }
+
+  .model-content {
+    box-sizing: border-box;
+    width: 100%;
+    height: 190px;
+    padding: 16px;
+
+    .model-version,
+    .model-provider,
+    .model-updateTime {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #666;
+
+      .model-content-icon {
+        margin-right: 8px;
+        color: #154ddd;
+      }
+
+      span {
+        color: #333;
+      }
+    }
+
+    .model-introduction {
+      font-size: 14px;
+      font-weight: 400;
+      color: #666;
+
+      span {
+        color: #333;
+      }
+    }
+  }
+}
+</style>

src/views/modelList/components/static.ts

@@ -0,0 +1,5 @@
+import model_OCR from "@/assets/svg/model/model_OCR.png";
+import model_mark from "@/assets/svg/model/model_mark.png";
+import model_colour from "@/assets/svg/model/model_colour.png";
+
+export { model_OCR, model_mark, model_colour };

src/views/modelList/index.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import ModelCard from "./components/ModelCard.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
+      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="24"
+            :sm="24"
+            :md="12"
+            :lg="8"
+            :xl="6"
+          >
+            <ModelCard :device="device" />
+          </el-col>
+        </el-row>
+        <el-pagination
+          v-model:currentPage="pagination.current"
+          class="absolute right-4 bottom-0"
+          :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>

src/views/serverModule/components/ServerCard.vue

@@ -3,7 +3,7 @@ import { computed, PropType, ref } from "vue";
 import { AnimationPic } from "@/components/AnimationCard";
 import serverIcon from "@/assets/animate/device/server.json";
 defineOptions({
-  name: "DeviceCard"
+  name: "ServerCard"
 });
 
 interface CardProductType {

src/views/serverModule/index.vue

@@ -93,10 +93,10 @@ onMounted(() => {
                 v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
               )"
             :key="index"
-            :xs="6"
+            :xs="24"
-            :sm="6"
+            :sm="24"
-            :md="6"
+            :md="12"
-            :lg="6"
+            :lg="8"
             :xl="4"
           >
             <ServerCard :device="device" />
@@ -104,7 +104,7 @@ onMounted(() => {
         </el-row>
         <el-pagination
           v-model:currentPage="pagination.current"
-          class="float-right"
+          class="absolute right-4 bottom-0"
           :page-size="pagination.pageSize"
           :total="pagination.total"
           :page-sizes="[12, 24, 36]"