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

feat: 动效图片样式修改

Browse Source
dev-deviceSetting
JINGYJ 1 year ago
parent 426e7f789b
commit bf7cf55855
12 changed files with 2686 additions and 54 deletions
Show Stats Download Patch File Download Diff File

96
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: "SSL证书",
deviceSort: "控制设备",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -24,7 +24,7 @@ export default [
isEnabled: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "人脸识别",
deviceSort: "监控1",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -34,7 +34,7 @@ export default [
isEnabled: false,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "CVM",
deviceSort: "监控1",
state: "故障",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -44,7 +44,7 @@ export default [
isEnabled: false,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "SSL证书",
deviceSort: "控制设备",
state: "离线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
@ -55,7 +55,7 @@ export default [
type: 3,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "SSL证书",
deviceSort: "控制设备",
state: "在线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
@ -65,7 +65,7 @@ export default [
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "T-Sec 云防火墙",
deviceSort: "控制设备",
state: "在线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -75,7 +75,7 @@ export default [
isEnabled: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "CVM",
deviceSort: "监控1",
state: "离线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -85,7 +85,7 @@ export default [
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "SSL证书",
deviceSort: "控制设备",
state: "故障",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -95,7 +95,7 @@ export default [
isEnabled: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "SSL证书",
deviceSort: "监控1",
state: "离线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -105,7 +105,7 @@ export default [
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "CVM",
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证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -125,7 +125,7 @@ export default [
isEnabled: true,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "SSL证书",
deviceSort: "监控1",
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: "SSL证书",
deviceSort: "控制设备",
state: "故障",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
@ -155,7 +155,7 @@ export default [
isEnabled: true,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "云数据库",
deviceSort: "监控1",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -165,7 +165,7 @@ export default [
isEnabled: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "CVM",
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证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -187,7 +187,7 @@ export default [
type: 4,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "云数据库",
deviceSort: "监控1",
state: "离线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -197,7 +197,7 @@ export default [
isEnabled: true,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "CVM",
deviceSort: "控制设备",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -208,7 +208,7 @@ export default [
type: 4,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "SSL证书",
deviceSort: "控制设备",
state: "故障",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -218,7 +218,7 @@ export default [
isEnabled: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "云数据库",
deviceSort: "监控1",
state: "在线",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -228,7 +228,7 @@ export default [
isEnabled: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
deviceSort: "CVM",
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:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
@ -248,7 +248,7 @@ export default [
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "人脸识别",
deviceSort: "监控1",
state: "在线",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
@ -259,7 +259,7 @@ export default [
type: 5,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "CVM",
deviceSort: "控制设备",
state: "在线",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -269,7 +269,7 @@ export default [
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "SSL证书",
deviceSort: "监控1",
state: "在线",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -279,7 +279,7 @@ export default [
isEnabled: true,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "CVM",
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:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
@ -299,7 +299,7 @@ export default [
isEnabled: false,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
deviceSort: "CVM",
deviceSort: "监控1",
state: "故障",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -309,7 +309,7 @@ export default [
isEnabled: true,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "CVM",
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: "CVM",
deviceSort: "控制设备",
state: "故障",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
@ -329,7 +329,7 @@ export default [
isEnabled: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "T-Sec 云防火墙",
deviceSort: "监控1",
state: "在线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -339,7 +339,7 @@ export default [
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "CVM",
deviceSort: "控制设备",
state: "在线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
@ -349,7 +349,7 @@ export default [
isEnabled: false,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "SSL证书",
deviceSort: "控制设备",
state: "在线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -359,7 +359,7 @@ export default [
isEnabled: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "云数据库",
deviceSort: "监控1",
state: "在线",
description:
"基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
@ -370,7 +370,7 @@ export default [
type: 4,
banner:
"https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "SSL证书",
deviceSort: "监控1",
state: "在线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -380,7 +380,7 @@ export default [
isEnabled: true,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "CVM",
deviceSort: "控制设备",
state: "离线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
@ -390,7 +390,7 @@ export default [
isEnabled: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "云数据库",
deviceSort: "监控1",
state: "故障",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -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的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -410,7 +410,7 @@ export default [
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "CVM",
deviceSort: "监控1",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -420,7 +420,7 @@ export default [
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "T-Sec 云防火墙",
deviceSort: "控制设备",
state: "在线",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -430,7 +430,7 @@ export default [
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "T-Sec 云防火墙",
deviceSort: "监控1",
state: "在线",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -440,7 +440,7 @@ export default [
isEnabled: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
deviceSort: "SSL证书",
deviceSort: "控制设备",
state: "故障",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -450,7 +450,7 @@ export default [
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "SSL证书",
deviceSort: "监控1",
state: "在线",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
@ -460,7 +460,7 @@ export default [
isEnabled: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "T-Sec 云防火墙",
deviceSort: "监控1",
state: "离线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -470,7 +470,7 @@ export default [
isEnabled: true,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "SSL证书",
deviceSort: "监控1",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
@ -480,7 +480,7 @@ export default [
isEnabled: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "SSL证书",
deviceSort: "控制设备",
state: "在线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
@ -490,7 +490,7 @@ export default [
isEnabled: false,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "T-Sec 云防火墙",
deviceSort: "监控1",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"

300
src/assets/animate/device/controlEquipmentMalfunction.json
View File

File diff suppressed because one or more lines are too long

300
src/assets/animate/device/controlEquipmentOnline.json
View File

File diff suppressed because one or more lines are too long

300
src/assets/animate/device/distributedDeviceGreen.json
View File

File diff suppressed because one or more lines are too long

306
src/assets/animate/device/distributedDeviceRed.json
View File

File diff suppressed because one or more lines are too long

278
src/assets/animate/device/monitoringFaults.json
View File

File diff suppressed because one or more lines are too long

278
src/assets/animate/device/monitoringOnline.json
View File

File diff suppressed because one or more lines are too long

810
src/assets/animate/device/server.json
View File

File diff suppressed because one or more lines are too long

32
src/components/AnimationCard/animation.tsx
Unescape Escape View File

@ -0,0 +1,32 @@
import { defineComponent, onMounted, ref } from "vue";
import lottie from "lottie-web"; //引入动效库
export default defineComponent({
name: "AnimationPic",
props: {
value: {
type: undefined,
default: ""
}
},
setup(props) {
const animationPic = ref(null); //获取dom
function initAnimate() {
console.log(props.value, "lottie");
lottie.loadAnimation({
container: animationPic.value, //选择渲染dom
renderer: "svg", //渲染格式
loop: true, //循环播放
autoplay: true, //是否i自动播放,
animationData: props.value //渲染动效json
});
}
onMounted(() => {
initAnimate();
});
return () => {
// if (!props.value) return null;
return <div ref={animationPic} />;
};
}
});

5
src/components/AnimationCard/index.ts
Unescape Escape View File

@ -0,0 +1,5 @@
import animationPic from "./animation";
const AnimationPic = animationPic;
export { AnimationPic };

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

@ -3,7 +3,13 @@ import { computed, PropType } from "vue";
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 { AnimateDevice } from "@/components/Animate";
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"
});
@ -37,6 +43,22 @@ const isEnabledClass = computed(() => [
"device-tag",
{ "device-tag_off": !props.device?.isEnabled }
]);
const deviceClassify = device => {
if (device?.deviceSort === "控制设备") {
if (device?.state === "在线") {
return controlEquipmentOnline;
} else {
return controlEquipmentMalfunction;
}
} else {
if (device?.state === "在线") {
return monitoringOnline;
} else {
return monitoringFaults;
}
}
};
</script>
<template>
@ -69,7 +91,7 @@ const isEnabledClass = computed(() => [
<div>创建时间：<span>DEVICE00002</span></div>
</div>
<div class="device-icon">
<AnimateDevice /><img src="@/assets/control.png" />
<AnimationPic class="device-icon-box" :value="deviceClassify(device)" />
</div>
</div>
</div>
@ -139,7 +161,7 @@ const isEnabledClass = computed(() => [
justify-content: space-between;
width: 100%;
height: 156px;
padding: 16px 0 16px 16px;
padding: 16px 12px 16px 16px;
.device-info {
display: flex;
@ -165,7 +187,7 @@ const isEnabledClass = computed(() => [
display: flex;
align-items: flex-end;
img {
.device-icon-box {
width: 100px;
height: 100px;
}

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

@ -1,6 +1,7 @@
<script setup lang="ts">
import { computed, PropType } from "vue";
import serverIcon from "@/assets/svg/server/server.svg?component";
import { AnimationPic } from "@/components/AnimationCard";
import serverIcon from "@/assets/animate/device/server.json";
defineOptions({
name: "DeviceCard"
});
@ -37,7 +38,7 @@ const stateClass = computed(() => [
</div>
<div class="server-content">
<div class="server-content-left">
<serverIcon />
<AnimationPic :value="serverIcon" />
</div>
<div class="server-content-right">进度条</div>
</div>

Write Preview
Loading…
Cancel
Save