Update index.vue

src/views/IntelligentEarlyWarningCenter/index.vue

@@ -73,7 +73,13 @@
           name="设备监控"
           tab="设备监控"
         >
-          <div>设备监控</div>
+          <TablePro
+            ref="tableRef"
+            :request-api="reqApi_3"
+            :columns="columns_3"
+            :isPageTable="true"
+            :single-line="false"
+          ></TablePro>
         </n-tab-pane>
       </n-tabs>
     </n-card>
@@ -95,16 +101,10 @@
     NTag,
     useModal,
   } from "naive-ui";
-  import {
-    type HardwareData,
-    type ElectronicScale,
-  } from "@/views/hardwareData/index.ts";
-  import hardwareData from "@/views/hardwareData/index.ts";
+
   import { ref, reactive } from "vue";
 
   const tableRef = useTemplateRef<TableProInst>("tableRef");
-  const modal = useModal();
-  const forms = ref<FormInst | null>(null);
 
   const reqApi_1: TableType["requestApi"] = (params) => {
     return new Promise((resolve) => {
@@ -114,7 +114,16 @@
           current: "1",
           // @ts-ignore
           pages: "2",
-          records: [],
+          records: [
+            // {
+            //   name: "张三",
+            //   status: false,
+            // },
+            // {
+            //   name: "李四",
+            //   status: false,
+            // },
+          ],
           size: "10",
           total: "0",
         },
@@ -125,11 +134,11 @@
   const columns_1 = ref<TableType["columns"]>([
     {
       key: "name",
-      title: "菜谱名称",
+      title: "员工姓名",
     },
     {
       key: "status",
-      title: "食品搭配状态",
+      title: "员工健康状态",
       render: ({ status }) => {
         return (
           <NTag type={status ? "success" : "error"}>
@@ -174,6 +183,53 @@
     },
   ]);
 
+  const reqApi_3: TableType["requestApi"] = (params) => {
+    return new Promise((resolve) => {
+      resolve({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [
+            {
+              name: "晨检仪",
+              status: true,
+            },
+            {
+              name: "摄像头",
+              status: true,
+            },
+            {
+              name: "电子秤",
+              status: false,
+            },
+          ],
+          size: "10",
+          total: "0",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+  const columns_3 = ref<TableType["columns"]>([
+    {
+      key: "name",
+      title: "设备名称",
+    },
+    {
+      key: "status",
+      title: "设备状态",
+      render: ({ status }) => {
+        return (
+          <NTag type={status ? "success" : "error"}>
+            {status ? "在线" : "离线"}
+          </NTag>
+        );
+      },
+    },
+  ]);
+
   const reqApi: TableType["requestApi"] = (params) => {
     return new Promise((resolve) => {
       resolve({
@@ -196,16 +252,7 @@
     });
   };
   type TableType = TableProProps<any, any>;
-  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
-    time: {
-      type: "datePicker",
-      label: "时间",
-    },
-    userName: {
-      type: "input",
-      label: "员工姓名",
-    },
-  });
+
   const columns = ref<TableType["columns"]>([
     {
       key: "name",
@@ -223,40 +270,6 @@
       },
     },
   ]);
-  const workAccountsValueList = {
-    bodyImage: "",
-    bodyImageUrl: "",
-    checkResultStr: "",
-    checkStatusStr: "",
-    createTime: "",
-    createTimeStr: "",
-    diseases: "",
-    handImageUrl: "",
-    handbackImageUrl: "",
-    headImageUrl: "",
-    isDefault: true,
-    sexStr: "",
-    temperature: "",
-    updateTime: "",
-    userName: "",
-  };
-  const userValue = ref<HardwareData>({
-    ...workAccountsValueList,
-  });
-  const resetModelValue = () => {
-    userValue.value = { ...workAccountsValueList };
-    title.value = "添加晨检记录";
-  };
-  const addUserOrUpdate = () => {
-    forms.value?.validate().then(() => {
-      // loading.value = true
-    });
-  };
-  const loading = ref<boolean>(false);
-  const modalRef = ref();
-  const title = ref("添加晨检记录");
-
-  //   电子秤
 
   const reqApiElectronicScale: TableType["requestApi"] = (params) => {
     return new Promise((resolve) => {
@@ -372,4 +385,3 @@
     },
   ]);
 </script>
-<style scoped lang="scss"></style>