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="设备监控"
        >
          <div>设备监控</div>
        </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 {
    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>