From ba7e9a24ae18615f869b2b4497d4466102deb3a0 Mon Sep 17 00:00:00 2001 From: JINGYJ <1458671527@qq.com> Date: Mon, 15 Jan 2024 14:38:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=20=E8=AE=BE=E5=A4=87=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/list.ts | 503 ++++++++++++++++++ src/api/list.ts | 14 + src/assets/control.png | Bin 0 -> 8677 bytes src/assets/svg/device/control.svg | 4 + src/assets/svg/device/monitor1.svg | 7 + src/assets/svg/device/monitor2.svg | 7 + src/router/modules/device.ts | 20 + src/views/device/components/DeviceCard.vue | 169 ++++++ src/views/device/components/TreeCard.vue | 17 + src/views/device/index.vue | 162 ++++++ .../workbench/components/chart/pie3D.vue | 5 +- 11 files changed, 907 insertions(+), 1 deletion(-) create mode 100644 mock/list.ts create mode 100644 src/api/list.ts create mode 100644 src/assets/control.png create mode 100644 src/assets/svg/device/control.svg create mode 100644 src/assets/svg/device/monitor1.svg create mode 100644 src/assets/svg/device/monitor2.svg create mode 100644 src/router/modules/device.ts create mode 100644 src/views/device/components/DeviceCard.vue create mode 100644 src/views/device/components/TreeCard.vue create mode 100644 src/views/device/index.vue diff --git a/mock/list.ts b/mock/list.ts new file mode 100644 index 0000000..bbaf394 --- /dev/null +++ b/mock/list.ts @@ -0,0 +1,503 @@ +import { MockMethod } from "vite-plugin-mock"; + +export default [ + { + url: "/getCardList", + 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: "SSL证书", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 2, + isEnabled: false, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg", + deviceSort: "人脸识别", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 3, + isEnabled: false, + type: 5, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "CVM", + state: "故障", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 4, + isEnabled: false, + type: 2, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "SSL证书", + state: "离线", + description: + "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。" + }, + { + index: 5, + isEnabled: true, + type: 3, + banner: + "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg", + deviceSort: "SSL证书", + state: "在线", + description: + "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。" + }, + { + index: 6, + isEnabled: true, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "T-Sec 云防火墙", + state: "在线", + description: + "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客" + }, + { + index: 7, + isEnabled: false, + type: 1, + banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg", + deviceSort: "CVM", + state: "离线", + description: + "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客" + }, + { + index: 8, + isEnabled: true, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg", + deviceSort: "SSL证书", + state: "故障", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 9, + isEnabled: false, + type: 1, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg", + deviceSort: "SSL证书", + state: "离线", + description: + "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客" + }, + { + index: 10, + isEnabled: true, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "CVM", + state: "在线", + description: + "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。" + }, + { + index: 11, + isEnabled: true, + type: 5, + banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg", + deviceSort: "云数据库", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 12, + isEnabled: true, + type: 2, + banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg", + deviceSort: "SSL证书", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 13, + isEnabled: true, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg", + deviceSort: "云数据库", + state: "故障", + description: + "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客" + }, + { + index: 14, + isEnabled: false, + type: 5, + banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg", + deviceSort: "SSL证书", + state: "故障", + description: + "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸" + }, + { + index: 15, + isEnabled: true, + type: 2, + banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg", + deviceSort: "云数据库", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 16, + isEnabled: false, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg", + deviceSort: "CVM", + state: "离线", + description: + "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸" + }, + { + index: 17, + isEnabled: false, + type: 5, + banner: + "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg", + deviceSort: "云数据库", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 18, + isEnabled: false, + type: 4, + banner: + "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg", + deviceSort: "云数据库", + state: "离线", + description: + "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客" + }, + { + index: 19, + isEnabled: true, + type: 2, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "CVM", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 20, + isEnabled: true, + type: 4, + banner: + "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg", + deviceSort: "SSL证书", + state: "故障", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 21, + isEnabled: false, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg", + deviceSort: "云数据库", + state: "在线", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 22, + isEnabled: false, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg", + deviceSort: "CVM", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 23, + isEnabled: true, + type: 1, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "人脸识别", + state: "在线", + description: + "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸" + }, + { + index: 24, + isEnabled: true, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "人脸识别", + state: "在线", + description: + "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸" + }, + { + index: 25, + isEnabled: false, + type: 5, + banner: + "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg", + deviceSort: "CVM", + state: "在线", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 26, + isEnabled: true, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg", + deviceSort: "SSL证书", + state: "在线", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 27, + isEnabled: true, + type: 5, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "CVM", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 28, + isEnabled: false, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "云数据库", + state: "在线", + description: + "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸" + }, + { + index: 29, + isEnabled: false, + type: 5, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg", + deviceSort: "CVM", + state: "故障", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 30, + isEnabled: true, + type: 1, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "CVM", + state: "离线", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 31, + isEnabled: true, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg", + deviceSort: "CVM", + state: "故障", + description: + "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸" + }, + { + index: 32, + isEnabled: false, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg", + deviceSort: "T-Sec 云防火墙", + state: "在线", + description: + "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客" + }, + { + index: 33, + isEnabled: true, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg", + deviceSort: "CVM", + state: "在线", + description: + "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。" + }, + { + index: 34, + isEnabled: false, + type: 2, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "SSL证书", + state: "在线", + description: + "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客" + }, + { + index: 35, + isEnabled: false, + type: 1, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg", + deviceSort: "云数据库", + state: "在线", + description: + "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸" + }, + { + index: 36, + isEnabled: false, + type: 4, + banner: + "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg", + deviceSort: "SSL证书", + state: "在线", + description: + "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客" + }, + { + index: 37, + isEnabled: true, + type: 5, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg", + deviceSort: "CVM", + state: "离线", + description: + "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。" + }, + { + index: 38, + isEnabled: false, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "云数据库", + state: "故障", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 39, + isEnabled: false, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg", + deviceSort: "人脸识别", + state: "故障", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 40, + isEnabled: true, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "CVM", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 41, + isEnabled: true, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "T-Sec 云防火墙", + state: "在线", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 42, + isEnabled: true, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg", + deviceSort: "T-Sec 云防火墙", + state: "在线", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 43, + isEnabled: false, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg", + deviceSort: "SSL证书", + state: "故障", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 44, + isEnabled: true, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg", + deviceSort: "SSL证书", + state: "在线", + description: + "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗" + }, + { + index: 45, + isEnabled: false, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "T-Sec 云防火墙", + state: "离线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 46, + isEnabled: true, + type: 2, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg", + deviceSort: "SSL证书", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + }, + { + index: 47, + isEnabled: false, + type: 4, + banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg", + deviceSort: "SSL证书", + state: "在线", + description: + "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客" + }, + { + index: 48, + isEnabled: false, + type: 3, + banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg", + deviceSort: "T-Sec 云防火墙", + state: "在线", + description: + "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部" + } + ] + } + }; + } + } +] as MockMethod[]; diff --git a/src/api/list.ts b/src/api/list.ts new file mode 100644 index 0000000..5787148 --- /dev/null +++ b/src/api/list.ts @@ -0,0 +1,14 @@ +import { http } from "@/utils/http"; + +type Result = { + success: boolean; + data?: { + /** 列表数据 */ + list: Array; + }; +}; + +/** 卡片列表 */ +export const getCardList = (data?: object) => { + return http.request("post", "/getCardList", { data }); +}; diff --git a/src/assets/control.png b/src/assets/control.png new file mode 100644 index 0000000000000000000000000000000000000000..58d983f5687216fbc69922f336007b6103af9acb GIT binary patch literal 8677 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 + + + diff --git a/src/assets/svg/device/monitor1.svg b/src/assets/svg/device/monitor1.svg new file mode 100644 index 0000000..3d5f6fb --- /dev/null +++ b/src/assets/svg/device/monitor1.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/svg/device/monitor2.svg b/src/assets/svg/device/monitor2.svg new file mode 100644 index 0000000..2047a64 --- /dev/null +++ b/src/assets/svg/device/monitor2.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/router/modules/device.ts b/src/router/modules/device.ts new file mode 100644 index 0000000..13bccc3 --- /dev/null +++ b/src/router/modules/device.ts @@ -0,0 +1,20 @@ +export default { + path: "/device", + meta: { + title: "设备列表", + icon: "homeFilled", + // showLink: false, + rank: 2 + }, + children: [ + { + path: "/device", + name: "DeviceList", + component: () => import("@/views/device/index.vue"), + meta: { + title: "设备列表", + roles: ["admin", "common"] + } + } + ] +} as RouteConfigsTable; diff --git a/src/views/device/components/DeviceCard.vue b/src/views/device/components/DeviceCard.vue new file mode 100644 index 0000000..74791d0 --- /dev/null +++ b/src/views/device/components/DeviceCard.vue @@ -0,0 +1,169 @@ + + + + + diff --git a/src/views/device/components/TreeCard.vue b/src/views/device/components/TreeCard.vue new file mode 100644 index 0000000..0910260 --- /dev/null +++ b/src/views/device/components/TreeCard.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/src/views/device/index.vue b/src/views/device/index.vue new file mode 100644 index 0000000..1bb1950 --- /dev/null +++ b/src/views/device/index.vue @@ -0,0 +1,162 @@ + + + diff --git a/src/views/workbench/components/chart/pie3D.vue b/src/views/workbench/components/chart/pie3D.vue index 962630f..ee2a9bc 100644 --- a/src/views/workbench/components/chart/pie3D.vue +++ b/src/views/workbench/components/chart/pie3D.vue @@ -184,7 +184,7 @@ function getPie3D(pieData, internalDiameterRatio) { false, k, // 我这里做了一个处理，使除了第一个之外的值都是10 - series[i].pieData.value + series[i].pieData.value === series[0].pieData.value ? 15 : 15 ); startValue = endValue; @@ -222,6 +222,9 @@ function getPie3D(pieData, internalDiameterRatio) { color: "#fff" // 设置标示线的颜色 } }, + tooltip: { + show: false + }, startAngle: 0, //起始角度，支持范围[0, 360]。 clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式 radius: ["20%", "50%"],