From 22d285d8edaef9b179d723f0741a199a98b040f1 Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Mon, 12 May 2025 15:25:50 +0800
Subject: [PATCH] Update index.vue

---
 src/views/foodSafetyEducation/index.vue | 854 +++++++++++++++++++++++-
 1 file changed, 847 insertions(+), 7 deletions(-)

diff --git a/src/views/foodSafetyEducation/index.vue b/src/views/foodSafetyEducation/index.vue
index f9c33c2..e7232f8 100644
--- a/src/views/foodSafetyEducation/index.vue
+++ b/src/views/foodSafetyEducation/index.vue
@@ -1,11 +1,851 @@
-<script setup lang="ts">
-
-</script>
-
+<!-- 食安教育 -->
 <template>
-<div>食安教育</div>
+  <div>
+    <n-card style="margin-bottom: 50px">
+      <n-tabs
+        type="line"
+        animated
+        default-value="食堂电子资料柜"
+      >
+        <n-tab-pane
+          name="食品安全教育资料共享"
+          tab="食品安全教育资料共享"
+        >
+          <TablePro
+            ref="tableRef"
+            :request-api="reqApi"
+            :search-form-options="searchFormOptions"
+            :columns="columns"
+            :isPageTable="true"
+            :single-line="false"
+          >
+            <template #headerExtra>
+              <n-button
+                strong
+                secondary
+                type="primary"
+              >
+                上传文件
+              </n-button>
+            </template>
+          </TablePro>
+        </n-tab-pane>
+        <n-tab-pane
+          name="食堂电子资料柜"
+          tab="食堂电子资料柜"
+        >
+          <n-card>
+            <n-tabs
+              type="line"
+              animated
+              default-value="健康体检信息"
+            >
+              <!-- 基本信息 -->
+              <!-- <n-tab-pane
+                name="基本信息"
+                tab="基本信息"
+              >
+                基本信息
+              </n-tab-pane> -->
+              <!-- 证件资料信息 -->
+              <!-- <n-tab-pane
+                name="证件资料信息"
+                tab="证件资料信息"
+              >
+                证件资料信息
+              </n-tab-pane> -->
+              <!-- 工作人员信息 -->
+              <!-- <n-tab-pane
+                name="工作人员信息"
+                tab="工作人员信息"
+              >
+                工作人员信息
+              </n-tab-pane> -->
+              <!-- 健康体检信息 -->
+              <n-tab-pane
+                name="健康体检信息"
+                tab="健康体检信息"
+              >
+                <TablePro
+                  :request-api="reqApi_8"
+                  :columns="columns_8"
+                  :isPageTable="true"
+                  :single-line="false"
+                >
+                  <template #headerExtra>
+                    <n-button
+                      strong
+                      secondary
+                      type="primary"
+                    >
+                      添加
+                    </n-button>
+                  </template>
+                </TablePro>
+              </n-tab-pane>
+              <!-- 管理制图信息 -->
+              <!-- <n-tab-pane
+                name="管理制图信息"
+                tab="管理制图信息"
+              >
+                管理制图信息
+              </n-tab-pane> -->
+              <!-- 食谱信息 -->
+              <!-- <n-tab-pane
+                name="食谱信息"
+                tab="食谱信息"
+              >
+                食谱信息
+              </n-tab-pane> -->
+              <!-- 采购供应链信息 -->
+              <n-tab-pane
+                name="采购供应链信息"
+                tab="采购供应链信息"
+              >
+                <TablePro
+                  :request-api="reqApi_9"
+                  :columns="columns_9"
+                  :isPageTable="true"
+                  :single-line="false"
+                >
+                  <template #headerExtra>
+                    <n-button
+                      strong
+                      secondary
+                      type="primary"
+                    >
+                      添加
+                    </n-button>
+                  </template>
+                </TablePro>
+              </n-tab-pane>
+              <!-- 台账信息 -->
+              <n-tab-pane
+                name="台账信息"
+                tab="台账信息"
+              >
+                <TablePro
+                  :request-api="reqApi_10"
+                  :columns="columns_10"
+                  :isPageTable="true"
+                  :single-line="false"
+                >
+                  <template #headerExtra>
+                    <n-button
+                      strong
+                      secondary
+                      type="primary"
+                    >
+                      添加
+                    </n-button>
+                  </template>
+                </TablePro>
+              </n-tab-pane>
+            </n-tabs>
+          </n-card>
+        </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 { NPerformantEllipsis, NPopconfirm, NTag } from "naive-ui";
+  const tableRef = useTemplateRef<TableProInst>("tableRef");
+  const reqApi: TableType["requestApi"] = (params) => {
+    return new Promise((resolve) => {
+      resolve({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [
+            {
+              fileName: "餐饮服务食品安全操作规范",
+              sampleNumber: "LYG00008",
+              name: "肉沫水蒸蛋",
+              date: "2025-05-08",
+              type: "午餐",
+              remark: "餐饮服务食品安全操作规范GB-1976768965989",
+              createTime: "2025-05-07",
+              updateTime: "2025-05-07 13:20:42",
+            },
 
-<style scoped lang="scss">
+            {
+              fileName: "餐饮服务食品安全操作规范",
+              sampleNumber: "LYG00008",
+              name: "蒜条炒肉丝",
+              date: "2025-05-08",
+              type: "午餐",
+              remark: "餐饮服务食品安全操作规范GB-1976768965989",
+              createTime: "2025-05-07",
+              updateTime: "2025-05-07 13:20:42",
+            },
+          ],
+          size: "10",
+          total: "12",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+  const reqApi_8: TableType["requestApi"] = (params) => {
+    return new Promise((resolve) => {
+      resolve({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [
+            {
+              name: "张三",
+              //   健康证状态
+              HealthStatus: 1,
+              bodyTemperature: 36.5,
+              Status: "无不适",
+              bodyResult: 1,
+            },
 
-</style>
\ No newline at end of file
+            {
+              name: "李四",
+              HealthStatus: 1,
+              bodyTemperature: 38.5,
+              Status: "发烧",
+              bodyResult: 0,
+            },
+
+            {
+              name: "李四",
+              HealthStatus: 0,
+              bodyTemperature: 36.5,
+              Status: "无不适",
+              bodyResult: 1,
+            },
+          ],
+          size: "10",
+          total: "12",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+  const reqApi_9: TableType["requestApi"] = (params) => {
+    return new Promise((resolve) => {
+      resolve({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [
+            {
+              conpanyName: "江南市场",
+              conpanyCode: "12313123541361352",
+              name: "张三",
+              phoneNumber: "18570083522",
+              BusinessLicense:
+                "https://ts1.tc.mm.bing.net/th/id/R-C.ffa9f8644398f3765146771d141e86ec?rik=W3sS971aWggZnQ&riu=http%3a%2f%2fwww.hgcnc.net%2fimages%2fup_images%2fhgcnc_yyzz.jpg&ehk=x6cRs7jFVqOL8xC%2bwJjuLNv8Naqrbe2ypcfdFRd0pp4%3d&risl=&pid=ImgRaw&r=0",
+            },
+
+            {
+              conpanyName: "xxx食品有限公司",
+              conpanyCode: "12313123541361352",
+              name: "李四",
+              phoneNumber: "18570083522",
+              BusinessLicense:
+                "https://ts1.tc.mm.bing.net/th/id/R-C.ffa9f8644398f3765146771d141e86ec?rik=W3sS971aWggZnQ&riu=http%3a%2f%2fwww.hgcnc.net%2fimages%2fup_images%2fhgcnc_yyzz.jpg&ehk=x6cRs7jFVqOL8xC%2bwJjuLNv8Naqrbe2ypcfdFRd0pp4%3d&risl=&pid=ImgRaw&r=0",
+            },
+          ],
+          size: "10",
+          total: "12",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+
+  const reqApi_10: TableType["requestApi"] = (params) => {
+    return new Promise((resolve) => {
+      resolve({
+        code: 200,
+        data: {
+          current: "1",
+          // @ts-ignore
+          pages: "2",
+          records: [
+            {
+              dealTime: "",
+              dealTimeStr: "",
+              dealUser: "",
+              dealUserName: "",
+              deptId: "27",
+              deptName: "\u6280\u672F\u90E8",
+              id: "1912470042822361090",
+              imagePath: "\/img\/safe\/aiMonitor\/20250416193553875.png",
+              imagePathHttp:
+                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193553875.png",
+              placeId: "1912469809077993474",
+              placeName: "仓库",
+              status: 0,
+              statusName: "\u672A\u5904\u7406",
+              videoChannelId: "",
+              videoChannelName: "该部门未配置摄像头",
+              warningTime: "2025-04-16 19:36:05",
+              warningTimeStr: "2025-04-16 19:36:05",
+              warningType: 4,
+              warningTypeName: "抽烟",
+            },
+            {
+              dealTime: "",
+              dealTimeStr: "",
+              dealUser: "",
+              dealUserName: "",
+              deptId: "27",
+              deptName: "\u6280\u672F\u90E8",
+              id: "1912470190474444801",
+              imagePath: "\/img\/safe\/aiMonitor\/20250416193616657.png",
+              imagePathHttp:
+                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193616657.png",
+              placeId: "1912469862391791617",
+              placeName: "厨房",
+              status: 0,
+              statusName: "\u672A\u5904\u7406",
+              videoChannelId: "",
+              videoChannelName: "该部门未配置摄像头",
+              warningTime: "2025-04-16 19:36:40",
+              warningTimeStr: "2025-04-16 19:36:40",
+              warningType: 1,
+              warningTypeName: "未佩戴口罩",
+            },
+            {
+              dealTime: "",
+              dealTimeStr: "",
+              dealUser: "",
+              dealUserName: "",
+              deptId: "27",
+              deptName: "\u6280\u672F\u90E8",
+              id: "1912470292547026945",
+              imagePath: "\/img\/safe\/aiMonitor\/20250416193647253.png",
+              imagePathHttp:
+                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193647253.png",
+              placeId: "1912469862391791617",
+              placeName: "厨房",
+              status: 0,
+              statusName: "\u672A\u5904\u7406",
+              videoChannelId: "",
+              videoChannelName: "该部门未配置摄像头",
+              warningTime: "2025-04-16 19:37:04",
+              warningTimeStr: "2025-04-16 19:37:04",
+              warningType: 6,
+              warningTypeName: "玩手机",
+            },
+            {
+              dealTime: "",
+              dealTimeStr: "",
+              dealUser: "",
+              dealUserName: "",
+              deptId: "27",
+              deptName: "\u6280\u672F\u90E8",
+              id: "1912470387787087874",
+              imagePath: "\/img\/safe\/aiMonitor\/20250416193713094.png",
+              imagePathHttp:
+                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193647253.png",
+              placeId: "1912469809077993474",
+              placeName: "仓库",
+              status: 0,
+              statusName: "\u672A\u5904\u7406",
+              videoChannelId: "",
+              videoChannelName: "该部门未配置摄像头",
+              warningTime: "2025-04-16 19:37:27",
+              warningTimeStr: "2025-04-16 19:37:27",
+              warningType: 6,
+              warningTypeName: "玩手机",
+            },
+            {
+              dealTime: "",
+              dealTimeStr: "",
+              dealUser: "",
+              dealUserName: "",
+              deptId: "27",
+              deptName: "\u6280\u672F\u90E8",
+              id: "1912470518141861890",
+              imagePath: "\/img\/safe\/aiMonitor\/20250416193740589.jpeg",
+              imagePathHttp:
+                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193740589.jpeg",
+              placeId: "1912469862391791617",
+              placeName: "厨房",
+              status: 0,
+              statusName: "\u672A\u5904\u7406",
+              videoChannelId: "",
+              videoChannelName: "该部门未配置摄像头",
+              warningTime: "2025-04-16 19:37:58",
+              warningTimeStr: "2025-04-16 19:37:58",
+              warningType: 5,
+              warningTypeName: "老鼠",
+            },
+            {
+              dealTime: "",
+              dealTimeStr: "",
+              dealUser: "",
+              dealUserName: "",
+              deptId: "27",
+              deptName: "\u6280\u672F\u90E8",
+              id: "1912470632222736386",
+              imagePath: "\/img\/safe\/aiMonitor\/20250416193815619.png",
+              imagePathHttp:
+                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193740589.jpeg",
+              placeId: "1912469809077993474",
+              placeName: "仓库",
+              status: 0,
+              statusName: "\u672A\u5904\u7406",
+              videoChannelId: "",
+              videoChannelName: "该部门未配置摄像头",
+              warningTime: "2025-04-16 19:38:25",
+              warningTimeStr: "2025-04-16 19:38:25",
+              warningType: 5,
+              warningTypeName: "老鼠",
+            },
+            {
+              dealTime: "",
+              dealTimeStr: "",
+              dealUser: "",
+              dealUserName: "",
+              deptId: "27",
+              deptName: "\u6280\u672F\u90E8",
+              id: "1912470837542305793",
+              imagePath: "\/img\/safe\/aiMonitor\/20250416193901486.png",
+              imagePathHttp:
+                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193901486.png",
+              placeId: "1912469862391791617",
+              placeName: "厨房",
+              status: 0,
+              statusName: "\u672A\u5904\u7406",
+              videoChannelId: "",
+              videoChannelName: "该部门未配置摄像头",
+              warningTime: "2025-04-16 19:39:14",
+              warningTimeStr: "2025-04-16 19:39:14",
+              warningType: 2,
+              warningTypeName: "未佩戴厨师帽",
+            },
+            {
+              dealTime: "",
+              dealTimeStr: "",
+              dealUser: "",
+              dealUserName: "",
+              deptId: "27",
+              deptName: "\u6280\u672F\u90E8",
+              id: "1912471152651976706",
+              imagePath: "\/img\/safe\/aiMonitor\/20250416194019640.png",
+              imagePathHttp:
+                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193901486.png",
+              placeId: "1912469862391791617",
+              placeName: "厨房",
+              status: 0,
+              statusName: "\u672A\u5904\u7406",
+              videoChannelId: "",
+              videoChannelName: "该部门未配置摄像头",
+              warningTime: "2025-04-16 19:40:29",
+              warningTimeStr: "2025-04-16 19:40:29",
+              warningType: 2,
+              warningTypeName: "未佩戴厨师帽",
+            },
+            {
+              dealTime: "",
+              dealTimeStr: "",
+              dealUser: "",
+              dealUserName: "",
+              deptId: "27",
+              deptName: "\u6280\u672F\u90E8",
+              id: "1912471244918276097",
+              imagePath: "\/img\/safe\/aiMonitor\/20250416194036255.png",
+              imagePathHttp:
+                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193901486.png",
+              placeId: "1912469862391791617",
+              placeName: "厨房",
+              status: 0,
+              statusName: "\u672A\u5904\u7406",
+              videoChannelId: "",
+              videoChannelName: "该部门未配置摄像头",
+              warningTime: "2025-04-16 19:40:51",
+              warningTimeStr: "2025-04-16 19:40:51",
+              warningType: 2,
+              warningTypeName: "未佩戴厨师帽",
+            },
+          ],
+          size: "10",
+          total: "12",
+        },
+        message: "操作成功！",
+      });
+    });
+  };
+
+  type TableType = TableProProps<any, any>;
+  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
+    fileName: {
+      type: "input",
+      label: "资料名",
+    },
+  });
+
+  const columns = ref<TableType["columns"]>([
+    {
+      key: "fileName",
+      title: "资料名",
+      width: 200,
+      render: ({ fileName }) => {
+        return (
+          <NPerformantEllipsis style={{ maxWidth: "200px" }}>
+            {fileName}
+          </NPerformantEllipsis>
+        );
+      },
+    },
+
+    {
+      key: "remark",
+      title: "描述",
+      width: 300,
+      render: ({ remark }) => {
+        return (
+          <NPerformantEllipsis style={{ maxWidth: "300px" }}>
+            {remark}
+          </NPerformantEllipsis>
+        );
+      },
+    },
+
+    {
+      key: "",
+      title: "操作",
+      width: 200,
+      render: (value) => {
+        return (
+          <div style={{ display: "flex" }}>
+            <n-button
+              strong
+              secondary
+              style={{ marginLeft: "10px" }}
+              type="success"
+              onClick={() => {}}
+            >
+              查看
+            </n-button>
+
+            <NPopconfirm
+              onPositiveClick={async () => {}}
+              onNegativeClick={() => {}}
+              showIcon={false}
+            >
+              {{
+                trigger: () => (
+                  <n-button
+                    strong
+                    secondary
+                    style={{ marginLeft: "10px" }}
+                    type="error"
+                  >
+                    删除
+                  </n-button>
+                ),
+                default: () => "确认要除么？",
+              }}
+            </NPopconfirm>
+          </div>
+        );
+      },
+    },
+  ]);
+
+  const columns_8 = ref<TableType["columns"]>([
+    // HealthStatus
+    // bodyTemperature
+    // Status
+    // bodyResult
+    {
+      key: "name",
+      title: "检查人",
+    },
+    {
+      key: "HealthStatus",
+      title: "健康证状态",
+      render({ HealthStatus }) {
+        return (
+          <NTag
+            bordered={false}
+            type={HealthStatus ? "success" : "error"}
+          >
+            {HealthStatus ? "正常" : "已过期"}
+          </NTag>
+        );
+      },
+    },
+
+    {
+      key: "Status",
+      title: "健康状况",
+    },
+    {
+      key: "bodyTemperature",
+      title: "今日晨检体温",
+      render({ bodyTemperature }) {
+        return (
+          <NTag
+            bordered={false}
+            type={bodyTemperature > 37 ? "error" : "success"}
+          >
+            {bodyTemperature}
+          </NTag>
+        );
+      },
+    },
+    {
+      key: "bodyResult",
+      title: "晨检结果",
+      render({ bodyResult }) {
+        return (
+          <NTag
+            bordered={false}
+            type={bodyResult ? "success" : "error"}
+          >
+            {bodyResult ? "合格" : "不合格"}
+          </NTag>
+        );
+      },
+    },
+
+    {
+      key: "",
+      title: "操作",
+      width: 200,
+      render: (value) => {
+        return (
+          <div style={{ display: "flex" }}>
+            <n-button
+              strong
+              secondary
+              style={{ marginLeft: "10px" }}
+              type="success"
+              onClick={() => {}}
+            >
+              详情
+            </n-button>
+            <n-button
+              strong
+              secondary
+              style={{ marginLeft: "10px" }}
+              type="warning"
+              onClick={() => {}}
+            >
+              编辑
+            </n-button>
+
+            <NPopconfirm
+              onPositiveClick={async () => {}}
+              onNegativeClick={() => {}}
+              showIcon={false}
+            >
+              {{
+                trigger: () => (
+                  <n-button
+                    strong
+                    secondary
+                    style={{ marginLeft: "10px" }}
+                    type="error"
+                  >
+                    删除
+                  </n-button>
+                ),
+                default: () => "确认要除么？",
+              }}
+            </NPopconfirm>
+          </div>
+        );
+      },
+    },
+  ]);
+
+  const columns_9 = ref<TableType["columns"]>([
+    {
+      key: "conpanyName",
+      title: "公司名称",
+    },
+    {
+      key: "conpanyCode",
+      title: "统一社会信用代码",
+    },
+    {
+      key: "name",
+      title: "负责人",
+    },
+    {
+      key: "phoneNumber",
+      title: "联系电话",
+    },
+
+    {
+      key: "BusinessLicense",
+      title: "营业执照",
+      render({ BusinessLicense }) {
+        return (
+          <n-image
+            object-fit="cover"
+            style={{ borderRadius: "2px" }}
+            height={36}
+            width={36}
+            src={BusinessLicense}
+          />
+        );
+      },
+    },
+
+    {
+      key: "",
+      title: "操作",
+      width: 200,
+      render: (value) => {
+        return (
+          <div style={{ display: "flex" }}>
+            <n-button
+              strong
+              secondary
+              style={{ marginLeft: "10px" }}
+              type="warning"
+              onClick={() => {}}
+            >
+              编辑
+            </n-button>
+
+            <NPopconfirm
+              onPositiveClick={async () => {}}
+              onNegativeClick={() => {}}
+              showIcon={false}
+            >
+              {{
+                trigger: () => (
+                  <n-button
+                    strong
+                    secondary
+                    style={{ marginLeft: "10px" }}
+                    type="error"
+                  >
+                    删除
+                  </n-button>
+                ),
+                default: () => "确认要除么？",
+              }}
+            </NPopconfirm>
+          </div>
+        );
+      },
+    },
+  ]);
+
+  const columns_10 = ref<TableType["columns"]>([
+    {
+      key: "placeName",
+      title: "区域",
+    },
+    {
+      key: "videoChannelName",
+      title: "摄像头名称",
+    },
+    {
+      key: "warningTypeName",
+      title: "异常事件类型",
+    },
+    {
+      key: "warningTime",
+      title: "预警事件",
+    },
+
+    {
+      key: "imagePathHttp",
+      title: "异常图片",
+      render({ imagePathHttp }) {
+        return (
+          <n-image
+            object-fit="cover"
+            style={{ borderRadius: "2px" }}
+            height={36}
+            width={36}
+            src={imagePathHttp}
+          />
+        );
+      },
+    },
+    {
+      key: "status",
+      title: "状态",
+      render({ status }) {
+        return (
+          <NTag
+            bordered={false}
+            type={!status ? "error" : "success"}
+          >
+            {!status ? "未处理" : "已处理"}
+          </NTag>
+        );
+      },
+    },
+    {
+      key: "dealTime",
+      title: "处理时间",
+    },
+    {
+      key: "dealUser",
+      title: "处理人",
+    },
+
+    {
+      key: "",
+      title: "操作",
+      width: 200,
+      render: (value) => {
+        return (
+          <div style={{ display: "flex" }}>
+            <n-button
+              strong
+              secondary
+              style={{ marginLeft: "10px" }}
+              type="warning"
+              onClick={() => {}}
+            >
+              修改
+            </n-button>
+
+            <NPopconfirm
+              onPositiveClick={async () => {}}
+              onNegativeClick={() => {}}
+              showIcon={false}
+            >
+              {{
+                trigger: () => (
+                  <n-button
+                    strong
+                    secondary
+                    style={{ marginLeft: "10px" }}
+                    type="error"
+                  >
+                    删除
+                  </n-button>
+                ),
+                default: () => "确认要除么？",
+              }}
+            </NPopconfirm>
+          </div>
+        );
+      },
+    },
+  ]);
+</script>
+<style scoped lang="scss"></style>