Yaxin
/
General-AI-Platform-Web-Client
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: mock

Browse Source
dev-deviceSetting
chunquansang 1 year ago
parent 9a57f78974
commit 2ee6ee4a41
12 changed files with 1971 additions and 1882 deletions
Show Stats Download Patch File Download Diff File

32
mock/alarm.ts
Unescape Escape View File

@ -7,6 +7,30 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { MockMethod } from "vite-plugin-mock";
function generateRandomDateTime(year) {
// 生成随机月份（1-12）
const month = Math.floor(Math.random() * 12) + 1;
// 生成随机日期（1-31）
const day = Math.floor(Math.random() * 31) + 1;
// 生成随机小时（0-23）
const hour = Math.floor(Math.random() * 24);
// 生成随机分钟（0-59）
const minute = Math.floor(Math.random() * 60);
// 生成随机秒钟（0-59）
const second = Math.floor(Math.random() * 60);
// 返回随机日期和时间的字符串
return `${year}-${month < 10 ? "0" : ""}${month}-${
day < 10 ? "0" : ""
}${day} ${hour < 10 ? "0" : ""}${hour}:${minute < 10 ? "0" : ""}${minute}:${
second < 10 ? "0" : ""
}${second}`;
}
function fetchList(): Record<string, any>[] {
const currList: Record<string, any>[] = [];
// const nameArr = ["玩手机监测", "控制器", "视频监控"];
@ -14,12 +38,12 @@ function fetchList(): Record<string, any>[] {
for (let i = 0; i < 10; i++) {
currList.push({
id: 1,
createTime: "2023-10-21 11:17:11",
createTime: generateRandomDateTime(2023),
updateTime: "2023-10-17T02:35:41.14308Z",
name: "玩手机监测",
code: "DC0000" + (i + 1),
name: "表面缺陷",
code: "DC00001",
level: "1",
deviceGroup: "设备组" + (i + 1),
deviceGroup: "设备组" + parseInt(Math.random() * 10) + 1,
remark: ""
});
}

312
mock/list.ts
Unescape Escape View File

@ -14,7 +14,7 @@ export default [
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -44,7 +44,7 @@ export default [
isEnabled: false,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "离线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
@ -55,7 +55,7 @@ export default [
type: 3,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
@ -65,7 +65,7 @@ export default [
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -85,7 +85,7 @@ export default [
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "故障",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -105,7 +105,7 @@ export default [
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
@ -115,7 +115,7 @@ export default [
isEnabled: true,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -135,7 +135,7 @@ export default [
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "故障",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -145,7 +145,7 @@ export default [
isEnabled: false,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "故障",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
@ -165,7 +165,7 @@ export default [
isEnabled: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "离线",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
@ -176,7 +176,7 @@ export default [
type: 5,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -197,7 +197,7 @@ export default [
isEnabled: true,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -208,7 +208,7 @@ export default [
type: 4,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "故障",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -228,7 +228,7 @@ export default [
isEnabled: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -238,7 +238,7 @@ export default [
isEnabled: true,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
@ -259,7 +259,7 @@ export default [
type: 5,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -279,7 +279,7 @@ export default [
isEnabled: true,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -289,7 +289,7 @@ export default [
isEnabled: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
@ -309,7 +309,7 @@ export default [
isEnabled: true,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "离线",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -319,7 +319,7 @@ export default [
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "故障",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
@ -339,7 +339,7 @@ export default [
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
@ -349,7 +349,7 @@ export default [
isEnabled: false,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -380,7 +380,7 @@ export default [
isEnabled: true,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "离线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
@ -400,7 +400,7 @@ export default [
isEnabled: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "故障",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -420,7 +420,7 @@ export default [
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -440,7 +440,7 @@ export default [
isEnabled: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "故障",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -480,7 +480,7 @@ export default [
isEnabled: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "控制设备",
deviceSort: "分析设备",
state: "在线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -499,5 +499,263 @@ export default [
}
};
}
},
{
url: "/getServerList",
method: "post",
response: () => {
return {
success: true,
data: {
list: [
{
index: 1,
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "服务器1",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 2,
isEnabled: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "服务器2",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 3,
isEnabled: false,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "服务器3",
state: "故障",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 4,
isEnabled: false,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "服务器4",
state: "离线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
},
{
index: 5,
isEnabled: true,
type: 3,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "服务器4",
state: "在线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
},
{
index: 6,
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "服务器5",
state: "在线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 7,
isEnabled: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "服务器6",
state: "离线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 8,
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "服务器7",
state: "故障",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 9,
isEnabled: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "服务器8",
state: "离线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 10,
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "服务器9",
state: "在线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
},
{
index: 11,
isEnabled: true,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "服务器10",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 12,
isEnabled: true,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "服务器11",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 13,
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
deviceSort: "服务器12",
state: "故障",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
}
]
}
};
}
},
{
url: "/getModelList",
method: "post",
response: () => {
return {
success: true,
data: {
list: [
{
index: 1,
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "划痕检测",
state: "在线",
description:
"划痕检测技术：高效识别产品表面划痕，提升制造质量和外观完整性，广泛应用于汽车、电子等行业"
},
{
index: 2,
isEnabled: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "喷码ocr识别",
state: "在线",
description:
"喷码OCR技术：高效光学字符识别，实现快速、准确解读产品喷码，提升生产流程智能化和质量管控。"
},
{
index: 3,
isEnabled: false,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "烟火检测",
state: "故障",
description:
"应用先进传感器和图像分析，精准识别烟花火焰，提高安全性，广泛用于活动监控和消防系统。"
},
{
index: 4,
isEnabled: false,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "抽烟检测",
state: "离线",
description:
"采用智能传感器和图像分析，精准识别抽烟行为，广泛应用于公共场所，强化禁烟管理与安全监测。。"
},
{
index: 5,
isEnabled: true,
type: 3,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "工件表面缺陷",
state: "在线",
description:
"高效图像处理技术，准确识别工件表面瑕疵，提升生产质量与品牌形象，广泛应用于制造业。"
},
{
index: 6,
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "车辆图像识别",
state: "在线",
description:
"基于先进算法，实现快速车辆识别，广泛应用于智能交通管理、停车场自动化等领域，提升效率与安全。"
},
{
index: 7,
isEnabled: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "推搡检测",
state: "离线",
description:
"利用先进传感器和智能分析，及时捕捉人群推搡行为，强化公共场所安全监控，提高突发事件响应效率。"
},
{
index: 8,
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "玩手机检测",
state: "故障",
description:
"借助智能传感器和图像分析，准确识别人们是否在生产中使用手机，提高工厂内安全和管理效能。"
},
{
index: 9,
isEnabled: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "瞌睡检测",
state: "离线",
description:
"借助智能传感器和图像分析，准确识别人们是否在生产中打瞌睡，提高工厂内安全和管理效能。"
},
{
index: 10,
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "工件表面缺陷",
state: "在线",
description:
"高效图像处理技术，准确识别工件表面瑕疵，提升生产质量与品牌形象，广泛应用于制造业"
}
]
}
};
}
}
] as MockMethod[];

3380
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

8
src/api/list.ts
Unescape Escape View File

@ -21,6 +21,14 @@ export const getCardList = (data?: object) => {
return http.request<Result>("post", "/getCardList", { data });
};
export const getServerList = (data?: object) => {
return http.request<Result>("post", "/getServerList", { data });
};
export const getModelList = (data?: object) => {
return http.request<Result>("post", "/getModelList", { data });
};
/** 告警列表 */
export const getAlarmList = (data?: object) => {
return http.request<Result>("post", "/getAlarmList", { data });

44
src/views/device/components/DeviceCard.vue
Unescape Escape View File

@ -4,12 +4,13 @@ import control from "@/assets/svg/device/control.svg?component";
import monitor1 from "@/assets/svg/device/monitor1.svg?component";
import monitor2 from "@/assets/svg/device/monitor2.svg?component";
import { AnimationPic } from "@/components/AnimationCard";
// 控制设备
// 分析设备
import controlEquipmentMalfunction from "@/assets/animate/device/controlEquipmentMalfunction.json";
import controlEquipmentOnline from "@/assets/animate/device/controlEquipmentOnline.json";
// 监控设备
import monitoringFaults from "@/assets/animate/device/monitoringFaults.json";
import monitoringOnline from "@/assets/animate/device/monitoringOnline.json";
defineOptions({
name: "DeviceCard"
});
@ -45,7 +46,7 @@ const isEnabledClass = computed(() => [
]);
const deviceClassify = device => {
if (device?.deviceSort === "控制设备") {
if (device?.deviceSort === "分析设备") {
if (device?.state === "在线") {
return controlEquipmentOnline;
} else {
@ -59,6 +60,33 @@ const deviceClassify = device => {
}
}
};
const generateRandomNumber = () => {
// 生成一个 0 到 99999 之间的随机整数
const randomNumber = Math.floor(Math.random() * 100000);
// 将随机数转换为字符串，并在前面补零，确保总长度为 5 位
return randomNumber.toString().padStart(5, "0");
};
const generateRandomDate = () => {
// 生成一个2023年1月1日到12月31日之间的随机日期
const startDate = new Date("2023-01-01");
const endDate = new Date("2023-12-31");
const randomTimestamp =
startDate.getTime() +
Math.random() * (endDate.getTime() - startDate.getTime());
const randomDate = new Date(randomTimestamp);
// 获取年、月、日
const year = randomDate.getFullYear();
// 月份需要加 1，因为月份是从 0 到 11 表示的
const month = (randomDate.getMonth() + 1).toString().padStart(2, "0");
const day = randomDate.getDate().toString().padStart(2, "0");
// 将日期格式化为 "YYYY-MM-DD" 的形式
return `${year}-${month}-${day}`;
};
</script>
<template>
@ -74,8 +102,12 @@ const deviceClassify = device => {
</div>
<div class="device-content">
<div class="device-info">
<div>设备代码：<span>DEVICE00002</span></div>
<div>设备分类：<span>DEVICE00002</span></div>
<div>
设备代码：<span>DEVICE{{ generateRandomNumber() }}</span>
</div>
<div>
设备分类：<span>FL{{ generateRandomNumber() }}</span>
</div>
<div>
是否启用：
<el-tag
@ -88,7 +120,9 @@ const deviceClassify = device => {
>{{ device?.isEnabled ? "已启用" : "未启用" }}</el-tag
>
</div>
<div>创建时间：<span>DEVICE00002</span></div>
<div>
创建时间：<span>{{ generateRandomDate() }}</span>
</div>
</div>
<div class="device-icon">
<AnimationPic class="device-icon-box" :value="deviceClassify(device)" />

6
src/views/modelList/components/ModelCard.vue
Unescape Escape View File

@ -44,7 +44,7 @@ const cardClass = computed(() => [
<div class="model-content">
<div class="model-version">
<i class="iconfont icon-banben model-content-icon" />
版本: <span>{{ "V1.6.25" }}</span>
版本: <span>{{ "V1.0.0" }}</span>
</div>
<div class="model-provider">
<i class="iconfont icon-tigongfang model-content-icon" />
@ -56,9 +56,7 @@ const cardClass = computed(() => [
</div>
<div class="model-introduction">
模型简介:
<span>{{
"针对企业人员是否有违章违规的问题，首先采用高性能的深度学习目标检测算法对图像中的人员进行定位等。"
}}</span>
<span>{{ device?.description }}</span>
</div>
</div>
</div>

4
src/views/modelList/index.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import ModelCard from "./components/ModelCard.vue";
import { getCardList } from "@/api/list";
import { getModelList } from "@/api/list";
import { onMounted, ref } from "vue";
defineOptions({
name: "ServerList"
@ -35,7 +35,7 @@ const onCurrentChange = (current: number) => {
};
const getCardListData = async () => {
try {
const { data } = await getCardList();
const { data } = await getModelList();
deviceList.value = data.list;
console.log(data.list);
pagination.value = {

20
src/views/serverModule/components/ServerCard.vue
Unescape Escape View File

@ -2,6 +2,7 @@
import { computed, PropType, ref } from "vue";
import { AnimationPic } from "@/components/AnimationCard";
import serverIcon from "@/assets/animate/device/server.json";
defineOptions({
name: "ServerCard"
});
@ -29,25 +30,36 @@ const stateClass = computed(() => [
{ "server-state_offline": props.device?.state === "离线" }
]);
const generateRandomTwoDecimal = () => {
// 生成一个在 [0, 1) 范围内的随机数
const randomFraction = Math.random();
// 乘以一个倍数，例如 100，以增加小数位数
const multipliedValue = randomFraction * 100;
// 使用 Math.round() 进行四舍五入，并将结果除以倍数，得到两位小数
return Math.round(multipliedValue) / 100;
};
const progressData = ref([
{
label: "CPU",
percent: 0.79,
percent: generateRandomTwoDecimal(),
strokeColor: "rgb(243,48,5)"
},
{
label: "内存",
percent: 0.18,
percent: generateRandomTwoDecimal(),
strokeColor: "rgb(33,169,122)"
},
{
label: "存储",
percent: 0.79,
percent: generateRandomTwoDecimal(),
strokeColor: "rgb(33,169,122)"
},
{
label: "GPU",
percent: 0.18,
percent: generateRandomTwoDecimal(),
strokeColor: "rgb(250,173,20)"
}
]);

10
src/views/serverModule/index.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import ServerCard from "./components/ServerCard.vue";
import { getCardList } from "@/api/list";
import { getServerList } from "@/api/list";
import { onMounted, ref } from "vue";
defineOptions({
name: "ServerList"
@ -35,7 +35,7 @@ const onCurrentChange = (current: number) => {
};
const getCardListData = async () => {
try {
const { data } = await getCardList();
const { data } = await getServerList();
deviceList.value = data.list;
console.log(data.list);
pagination.value = {
@ -58,9 +58,9 @@ onMounted(() => {
<template>
<div class="py-4 main">
<div class="mt-4 mb-5">
<el-button> {{ `全部状态(${90})` }} </el-button>
<el-button> {{ `在线(${80})` }}</el-button>
<el-button>{{ `离线(${10})` }}</el-button>
<el-button> {{ `全部状态(${14})` }} </el-button>
<el-button> {{ `在线(${9})` }}</el-button>
<el-button>{{ `离线(${3})` }}</el-button>
</div>
<div
v-loading="dataLoading"

4
src/views/workbench/components/DeviceStatus.vue
Unescape Escape View File

@ -18,9 +18,9 @@ defineOptions({
const deviceStatusData = ref<Record<string, any>>({
onlineCount: 618,
errorCount: 55,
errorCount: 2,
processCount: 118,
outlineCount: 195
outlineCount: 20
});
const deviceStatusOptions = ref<Record<string, any>[]>([

29
src/views/workbench/components/Notify.vue
Unescape Escape View File

@ -39,15 +39,28 @@ const urgencyStatus = [
function fetchNoticeList(readStatus = 1) {
const arr = [];
for (let i = 0; i < 2; i++) {
arr.push({
title: "系统消息" + (readStatus + i),
dateTime: "今天10:03:00",
content: "您的产品使用期限即将截止，如需继续使用产品请前请去买",
status: Math.floor(Math.random(0, 2.9) * 3)
});
}
arr.push({
title: "系统消息" + (readStatus + 1),
dateTime: "今天10:03:00",
content: "A3号车间B01产线出现产品缺陷异常，请及时查看",
status: 0
});
arr.push({
title: "系统消息" + (readStatus + 1),
dateTime: "今天11:22:00",
content: "B1号车间监测有人员吸烟，请及时查看",
status: 1
});
return arr;
// for (let i = 0; i < 2; i++) {
// arr.push({
// title: "系统消息" + (readStatus + i),
// dateTime: "今天10:03:00",
// content: "A3号车间B01产线出现产品缺陷异常，请及时查看",
// status: Math.floor(Math.random(0, 2.9) * 3)
// });
// }
// return arr;
}
const activeName = ref("1");

4
src/views/workbench/index.vue
Unescape Escape View File

@ -48,8 +48,8 @@ const dataViewList = [
icon: "icon-suanlipeizhi"
},
{
label: "覆盖网点",
value: "304800",
label: "覆盖车间",
value: "40",
color: "#5024FE",
bgColor: "#DDD5FD",
icon: "icon-suanlipeizhi"

Write Preview
Loading…
Cancel
Save