预警中心

2025-05-19 14:34:17 +08:00 · 2025-05-19 14:34:17 +08:00 · 87f3179698
parent cd9f471b43
commit 87f3179698
4 changed files with 424 additions and 12 deletions
--- a/src/components/icon/src/icons/NoMessage.vue
+++ b/src/components/icon/src/icons/NoMessage.vue
@ -0,0 +1,23 @@
+<template>
+  <svg
+    viewBox="0 0 28 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M26 7.5C26 11.0899 23.0899 14 19.5 14C15.9101 14 13 11.0899 13 7.5C13 3.91015 15.9101 1 19.5 1C23.0899 1 26 3.91015 26 7.5ZM16.8536 4.14645C16.6583 3.95118 16.3417 3.95118 16.1464 4.14645C15.9512 4.34171 15.9512 4.65829 16.1464 4.85355L18.7929 7.5L16.1464 10.1464C15.9512 10.3417 15.9512 10.6583 16.1464 10.8536C16.3417 11.0488 16.6583 11.0488 16.8536 10.8536L19.5 8.20711L22.1464 10.8536C22.3417 11.0488 22.6583 11.0488 22.8536 10.8536C23.0488 10.6583 23.0488 10.3417 22.8536 10.1464L20.2071 7.5L22.8536 4.85355C23.0488 4.65829 23.0488 4.34171 22.8536 4.14645C22.6583 3.95118 22.3417 3.95118 22.1464 4.14645L19.5 6.79289L16.8536 4.14645Z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M25 22.75V12.5991C24.5572 13.0765 24.053 13.4961 23.5 13.8454V16H17.5L17.3982 16.0068C17.0322 16.0565 16.75 16.3703 16.75 16.75C16.75 18.2688 15.5188 19.5 14 19.5C12.4812 19.5 11.25 18.2688 11.25 16.75L11.2432 16.6482C11.1935 16.2822 10.8797 16 10.5 16H4.5V7.25C4.5 6.2835 5.2835 5.5 6.25 5.5H12.2696C12.4146 4.97463 12.6153 4.47237 12.865 4H6.25C4.45507 4 3 5.45507 3 7.25V22.75C3 24.5449 4.45507 26 6.25 26H21.75C23.5449 26 25 24.5449 25 22.75ZM4.5 22.75V17.5H9.81597L9.85751 17.7041C10.2905 19.5919 11.9808 21 14 21L14.215 20.9947C16.2095 20.8953 17.842 19.4209 18.184 17.5H23.5V22.75C23.5 23.7165 22.7165 24.5 21.75 24.5H6.25C5.2835 24.5 4.5 23.7165 4.5 22.75Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
+
+<script lang="ts">
+  export default {
+    name: "NoMessage",
+    title: "无信息",
+  };
+</script>
--- a/src/components/tablePro/src/TablePro.tsx
+++ b/src/components/tablePro/src/TablePro.tsx
@ -1,25 +1,29 @@
-import { dataTableProps } from 'naive-ui'
-import { type PropType } from 'vue'
-import type { SearchFormProps } from './interface'
-import { type FormItemOptions } from '@/components/formPro'
+import { dataTableProps } from "naive-ui";
+import { type PropType } from "vue";
+import type { SearchFormProps } from "./interface";
+import { type FormItemOptions } from "@/components/formPro";

 export const tableProProps = {
  ...dataTableProps,
+  empty: {
+    type: String as PropType<string>,
+    default: "",
+  },
  rowKey: {
    type: String as PropType<string>,
-    default: 'snowFlakeId',
+    default: "snowFlakeId",
  },
  tableTitle: {
    type: String as PropType<string>,
-    default: '数据列表',
+    default: "数据列表",
  },
  searchFormProps: {
    type: Object as PropType<SearchFormProps<any>>,
    default: {
      gridProps: {
-        cols: '640:1 768:2 1024:4 1280:6 1536:6',
+        cols: "640:1 768:2 1024:4 1280:6 1536:6",
        xGap: 8,
-        responsive: 'self',
+        responsive: "self",
        itemResponsive: true,
      },
    },
@ -49,4 +53,4 @@ export const tableProProps = {
    type: Boolean as PropType<boolean>,
    default: true,
  },
-}
+};
--- a/src/components/tablePro/src/TablePro.vue
+++ b/src/components/tablePro/src/TablePro.vue
@ -98,7 +98,21 @@
        :loading="loading"
        :checkedRowKeys="selectKeys"
        @update:checked-row-keys="onSelectRowKeysChange"
-      ></n-data-table>
+      >
+        <template
+          v-if="props.empty"
+          #empty
+        >
+          <div style="display: flex; flex-direction: column; color: #c2c2c2">
+            <Icon
+              :color="'#c2c2c2'"
+              size="40"
+              name="NoMessage"
+            />
+            <div>{{ props.empty }}</div>
+          </div>
+        </template>
+      </n-data-table>
    </n-card>
  </div>
 </template>
--- a/src/views/IntelligentEarlyWarningCenter/index.vue
+++ b/src/views/IntelligentEarlyWarningCenter/index.vue
@ -1,4 +1,375 @@
+<!-- 智能预警中心 -->
 <template>
-  <div>智能预警中心</div>
+  <div>
+    <n-card style="margin-bottom: 16px">
+      <n-tabs
+        type="line"
+        animated
+      >
+        <n-tab-pane
+          name="食品安全预警"
+          tab="食品安全预警"
+        >
+          <TablePro
+            ref="tableRef"
+            :request-api="reqApi"
+            :columns="columns"
+            :isPageTable="true"
+            :single-line="false"
+          ></TablePro>
+        </n-tab-pane>
+        <n-tab-pane
+          name="库存数据预警"
+          tab="库存数据预警"
+        >
+          <TablePro
+            ref="tableRef"
+            :request-api="reqApiElectronicScale"
+            :columns="columnsElectronicScale"
+            :isPageTable="true"
+            :single-line="false"
+          ></TablePro>
+        </n-tab-pane>
+        <n-tab-pane
+          name="采购复称预警"
+          tab="采购复称预警"
+        >
+          <TablePro
+            ref="tableRef"
+            :request-api="reqApiCameraDate"
+            :columns="columnsCameraDate"
+            :isPageTable="true"
+            :single-line="false"
+          ></TablePro>
+        </n-tab-pane>
+
+        <n-tab-pane
+          name="员工健康预警"
+          tab="员工健康预警"
+        >
+          <TablePro
+            ref="tableRef"
+            :request-api="reqApi_1"
+            :columns="columns_1"
+            :isPageTable="true"
+            :single-line="false"
+            :empty="'暂无员工健康异常信息'"
+          ></TablePro>
+        </n-tab-pane>
+        <n-tab-pane
+          name="着装预警"
+          tab="着装预警"
+        >
+          <TablePro
+            ref="tableRef"
+            :request-api="reqApi_2"
+            :columns="columns_2"
+            :isPageTable="true"
+            :single-line="false"
+          ></TablePro>
+        </n-tab-pane>
+
+        <n-tab-pane
+          name="设备监控"
+          tab="设备监控"
+        >
+          <div>设备监控</div>
+        </n-tab-pane>
+      </n-tabs>
+    </n-card>
+  </div>
 </template>
-<script setup></script>
+<script setup lang="tsx">
+  import {
+    TablePro,
+    type TableProProps,
+    FormPro,
+    type FormItemOptions,
+    type TableProInst,
+    Icon,
+  } from "@/components";
+  import {
+    type FormInst,
+    NPerformantEllipsis,
+    NPopconfirm,
+    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) => {
+      resolve({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [],
+          size: "10",
+          total: "0",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+  const columns_1 = ref<TableType["columns"]>([
+    {
+      key: "name",
+      title: "菜谱名称",
+    },
+    {
+      key: "status",
+      title: "食品搭配状态",
+      render: ({ status }) => {
+        return (
+          <NTag type={status ? "success" : "error"}>
+            {status ? "正常" : "不正常"}
+          </NTag>
+        );
+      },
+    },
+  ]);
+
+  const reqApi_2: TableType["requestApi"] = (params) => {
+    return new Promise((resolve) => {
+      resolve({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [],
+          size: "10",
+          total: "0",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+  const columns_2 = 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({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [
+            {
+              name: "菜谱1",
+              status: true,
+            },
+          ],
+          size: "10",
+          total: "12",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+  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",
+      title: "菜谱名称",
+    },
+    {
+      key: "status",
+      title: "食品搭配状态",
+      render: ({ status }) => {
+        return (
+          <NTag type={status ? "success" : "error"}>
+            {status ? "正常" : "不正常"}
+          </NTag>
+        );
+      },
+    },
+  ]);
+  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) => {
+      resolve({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [
+            {
+              name: "味精",
+              status: true,
+            },
+            {
+              name: "海盐",
+              status: true,
+            },
+            {
+              name: "牛肉",
+              status: true,
+            },
+          ],
+          size: "10",
+          total: "12",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+
+  const searchFormOptionsElectronicScale = reactive<
+    TableType["searchFormOptions"]
+  >({
+    time: {
+      type: "datePicker",
+      label: "时间",
+    },
+    userName: {
+      type: "input",
+      label: "负责人",
+    },
+  });
+  const columnsElectronicScale = ref<TableType["columns"]>([
+    {
+      key: "name",
+      title: "食材名称",
+    },
+    {
+      key: "status",
+      title: "食材库存状态",
+      render: ({ status }) => {
+        return (
+          <NTag type={status ? "success" : "error"}>
+            {status ? "正常" : "不正常"}
+          </NTag>
+        );
+      },
+    },
+  ]);
+
+  const reqApiCameraDate: TableType["requestApi"] = (params) => {
+    return new Promise((resolve) => {
+      resolve({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [
+            {
+              name: "味精",
+              status: true,
+            },
+            {
+              name: "白菜",
+              status: false,
+            },
+          ],
+          size: "10",
+          total: "12",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+
+  const searchFormOptionsCameraDate = reactive<TableType["searchFormOptions"]>({
+    time: {
+      type: "datePicker",
+      label: "时间",
+    },
+    userName: {
+      type: "input",
+      label: "摄像头名称",
+    },
+  });
+  const columnsCameraDate = ref<TableType["columns"]>([
+    {
+      key: "name",
+      title: "食材名称",
+    },
+    {
+      key: "status",
+      title: "是否缺斤少两",
+      render: ({ status }) => {
+        return (
+          <NTag type={status ? "success" : "error"}>
+            {status ? "正常" : "少称"}
+          </NTag>
+        );
+      },
+    },
+  ]);
+</script>
+<style scoped lang="scss"></style>