canteen_system/src/views/IntelligentEarlyWarningCenter/index.vue

<!-- 智能预警中心 -->
<template>
  <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="设备监控"
        >
          <TablePro
            ref="tableRef"
            :request-api="reqApi_3"
            :columns="columns_3"
            :isPageTable="true"
            :single-line="false"
          ></TablePro>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>
</template>
<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 { ref, reactive } from "vue";

  const tableRef = useTemplateRef<TableProInst>("tableRef");

  const reqApi_1: TableType["requestApi"] = (params) => {
    return new Promise((resolve) => {
      resolve({
        code: 200,
        data: {
          current: "1",
          // @ts-ignore
          pages: "2",
          records: [
            // {
            //   name: "张三",
            //   status: false,
            // },
            // {
            //   name: "李四",
            //   status: false,
            // },
          ],
          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_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({
        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 columns = ref<TableType["columns"]>([
    {
      key: "name",
      title: "菜谱名称",
    },
    {
      key: "status",
      title: "食品搭配状态",
      render: ({ status }) => {
        return (
          <NTag type={status ? "success" : "error"}>
            {status ? "正常" : "不正常"}
          </NTag>
        );
      },
    },
  ]);

  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>