Update index.vue

This commit is contained in:
TimSpan 2025-05-12 15:25:50 +08:00
parent e0f0851a43
commit 22d285d8ed
1 changed files with 847 additions and 7 deletions

View File

@ -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>
{
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>