From 1fe240406526b9b6256664559d3d2bec9250135c Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期五, 21 十月 2022 18:38:53 +0800
Subject: [PATCH] 设备管理小样
---
src/views/equipmentManagement/equipmentList/components/InfoCard.vue | 339 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 224 insertions(+), 115 deletions(-)
diff --git a/src/views/equipmentManagement/equipmentList/components/InfoCard.vue b/src/views/equipmentManagement/equipmentList/components/InfoCard.vue
index 0e6582a..d3a205d 100644
--- a/src/views/equipmentManagement/equipmentList/components/InfoCard.vue
+++ b/src/views/equipmentManagement/equipmentList/components/InfoCard.vue
@@ -1,8 +1,12 @@
<template>
<div class="InfoCard">
- <span class="close iconfont" @click="close"></span>
+ <div class="header">
+ <div class="name">{{ node.devName }}</div>
+ <div class="close" @click="close">
+ <span class="iconfont"></span>
+ </div>
+ </div>
- <div class="name">{{ node.devName }}</div>
<div class="info">
<div class="head">
<div class="title">璁惧淇℃伅</div>
@@ -10,6 +14,7 @@
鏌ョ湅璇︽儏 >
</div>
</div>
+ <div class="line"></div>
<div class="item">
<div class="label">璁惧鍨嬪彿:</div>
<div class="data">{{ node.devMode }}</div>
@@ -25,7 +30,7 @@
<div class="data">{{ node.channelCount }}</div>
</div>
- <div class="item">
+ <div class="item" style="margin-bottom: 0px;">
<div class="label">鍐呭瓨:</div>
<div class="data">{{ node.mem }}</div>
</div>
@@ -35,12 +40,16 @@
<div class="head">
<div class="title">绯荤粺鎬ц兘</div>
</div>
+
+ <div class="line"></div>
+
<div class="propertyList" v-if="devicePerformance.length > 0">
<div class="property">
<el-progress
type="circle"
:percentage="devicePerformance[0].data"
- :stroke-width="25"
+ :stroke-width="10"
+ width="45"
color="#0065FF"
></el-progress>
<div class="num">{{ devicePerformance[0].data }}%</div>
@@ -51,7 +60,8 @@
<el-progress
type="circle"
:percentage="devicePerformance[1].data"
- :stroke-width="25"
+ :stroke-width="10"
+ width="45"
color="rgb(64, 182, 58)"
></el-progress>
<div class="num">{{ devicePerformance[1].data }}%</div>
@@ -62,7 +72,8 @@
<el-progress
type="circle"
:percentage="devicePerformance[2].data"
- :stroke-width="25"
+ :stroke-width="10"
+ width="45"
color="rgb(255, 186, 74)"
></el-progress>
<div class="num">{{ devicePerformance[2].data }}%</div>
@@ -73,7 +84,8 @@
<el-progress
type="circle"
:percentage="devicePerformance[3].data"
- :stroke-width="25"
+ :stroke-width="10"
+ width="45"
color="rgb(197, 35, 223)"
></el-progress>
<div class="num">{{ devicePerformance[3].data }}%</div>
@@ -89,13 +101,13 @@
鏌ョ湅璇︽儏 >
</div>
</div>
-
+ <div class="line"></div>
<div class="item">
<div class="label">绠楁硶鏁伴噺:</div>
<div class="data">{{ algAll }}</div>
</div>
- <div class="item">
+ <div class="item" style="margin-bottom: 0px;">
<div class="label">寰呭崌绾х畻娉曟暟閲�:</div>
<div class="data">{{ algUpgrade }}</div>
</div>
@@ -104,202 +116,299 @@
</template>
<script>
-import { findAllSdk, showSystemStates } from "@/api/device";
+import { findAllSdk, showSystemStates } from "@/api/device"
export default {
props: {
node: {
- type: Object,
- },
+ type: Object
+ }
},
created() {
- this.getAlg();
- this.getDevicePerformance();
+ this.getAlg()
+ this.getDevicePerformance()
},
data() {
return {
algAll: 0, //鎵�鏈夌畻娉�
algUpgrade: 0, //寰呭崌绾х殑绠楁硶
- devicePerformance: [], //绯荤粺鎬ц兘
- };
+ devicePerformance: [] //绯荤粺鎬ц兘
+ }
},
methods: {
//鑾峰彇绠楁硶淇℃伅
async getAlg() {
- const res = await findAllSdk({ userId: "", nodeId: this.node.devId });
+ const res = await findAllSdk({ userId: "", nodeId: this.node.devId })
res.data.forEach((item) => {
//璁＄畻绠楁硶鎬绘暟
if (item.installed) {
- this.algAll++;
+ this.algAll++
}
//璁＄畻寰呭崌绾х畻娉�
if (item.installed && item.isUpgrade) {
- this.algUpgrade++;
+ this.algUpgrade++
}
- });
+ })
},
//鑾峰彇璁惧鎬ц兘
async getDevicePerformance() {
const res = await showSystemStates({
userId: "",
- nodeId: this.node.devId,
- });
+ nodeId: this.node.devId
+ })
this.devicePerformance.push({
data: +res.data.mem.usedPercent.toString().split(".")[0],
name: "鍐呭瓨",
- type: "mem",
- });
+ type: "mem"
+ })
this.devicePerformance.push({
data: +res.data.gpu.toString().split(".")[0],
name: "绠楀姏",
- type: "gpu",
- });
+ type: "gpu"
+ })
this.devicePerformance.push({
data: +res.data.cpu.toString().split(".")[0],
name: "cpu",
- type: "cpu",
- });
+ type: "cpu"
+ })
- let distData = 0;
+ let distData = 0
res.data.disk.forEach((item) => {
- let distItem = +item.info.usedPercent.toString().split(".")[0];
- distData = distData + distItem;
- });
+ let distItem = +item.info.usedPercent.toString().split(".")[0]
+ distData = distData + distItem
+ })
this.devicePerformance.push({
data: distData,
name: `纭洏`,
- type: "dist",
- });
+ type: "dist"
+ })
- console.log(this.devicePerformance);
+ console.log(this.devicePerformance)
},
//鍏抽棴
close() {
- this.$emit("close");
+ this.$emit("close")
},
// 璺宠浆璇︽儏椤�
checkDetail(type) {
this.$router.push({
path: `/${type}`,
query: {
- id: this.node.devId,
- },
- });
- },
- },
-};
+ id: this.node.devId
+ }
+ })
+ }
+ }
+}
</script>
<style lang="scss" scoped>
.InfoCard {
+ border-radius: 3px;
box-sizing: border-box;
- padding: 20px 20px 10px 20px;
+ padding: 10px;
width: 270px;
height: 488px;
background-color: #fff;
- filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
-
- .name {
- font-weight: bold;
- font-size: 18px;
+ // background-color: red;
+ // filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
+ .header {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ .name {
+ font-family: PingFangSC-Bold;
+ font-size: 16px;
+ font-weight: normal;
+ line-height: 24px;
+ letter-spacing: 0px;
+ color: #3d3d3d;
+ }
+ .close {
+ width: 16px;
+ height: 16px;
+ }
}
-
.info {
- position: relative;
- box-sizing: border-box;
- padding: 10px;
- margin-top: 10px;
- background: rgba(233, 235, 238, 0.4);
- font-size: 14px;
-
+ border-radius: 3px;
+ opacity: 0.75;
+ background: #f3f3f3;
+ padding: 10px 16px 8px;
+ margin-bottom: 10px;
.head {
display: flex;
justify-content: space-between;
-
+ margin-bottom: 8px;
.title {
- font-weight: bold;
+ font-family: PingFangSC-Bold;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 22px;
+ display: flex;
+ align-items: center;
+ letter-spacing: 0px;
color: #666666;
}
-
.link {
+ font-family: PingFang SC Regular;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 22px;
+ letter-spacing: 0px;
color: #0065ff;
- cursor: pointer;
-
- &:hover {
- color: #0033ff;
- }
}
}
-
.item {
display: flex;
justify-content: space-between;
- margin-top: 10px;
-
+ margin-bottom: 8px;
.label {
+ font-family: PingFang SC Regular;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 20px;
+ letter-spacing: 0px;
color: #999999;
}
+ .data {
+ font-family: PingFangSC-Bold;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 20px;
+ text-align: right;
+ letter-spacing: 0px;
+ color: #666666;
+ }
}
-
.propertyList {
display: flex;
- margin-top: 10px;
- margin-bottom: 4px;
- width: 100%;
-
+ justify-content: space-between;
.property {
- flex: 1;
- text-align: center;
-
- .el-progress ::v-deep {
- .el-progress-circle,
- svg {
- height: 45px !important;
- width: 45px !important;
- }
-
- .el-progress__text {
- display: none;
- }
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .num {
+ margin: 6px 0 1px;
+ font-family: PingFangSC-Bold;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 22px;
+ letter-spacing: 0px;
+ color: #666666;
}
-
.des {
- color: #666;
+ font-family: PingFang SC Regular;
font-size: 12px;
- }
-
- &:nth-child(1) ::v-deep .el-progress-circle__track {
- stroke: rgb(212, 227, 250);
- }
-
- &:nth-child(2) ::v-deep .el-progress-circle__track {
- stroke: rgb(196, 242, 194);
- }
-
- &:nth-child(3) ::v-deep .el-progress-circle__track {
- stroke: rgb(250, 231, 200);
- }
-
- &:nth-child(4) ::v-deep .el-progress-circle__track {
- stroke: rgb(241, 215, 245);
+ font-weight: normal;
+ line-height: 20px;
+ letter-spacing: 0px;
+ color: #666666;
}
}
}
-
- &.propertyInfo {
- height: 137px;
- }
}
- .close {
- position: absolute;
- top: 16px;
- right: 16px;
- font-size: 12px;
- color: rgb(187, 187, 187);
- cursor: pointer;
+ // .info {
+ // position: relative;
+ // box-sizing: border-box;
+ // padding: 10px;
+ // margin-top: 10px;
+ // background: rgba(233, 235, 238, 0.4);
+ // font-size: 14px;
+
+ // .head {
+ // display: flex;
+ // justify-content: space-between;
+
+ // .title {
+ // font-weight: bold;
+ // color: #666666;
+ // }
+
+ // .link {
+ // color: #0065ff;
+ // cursor: pointer;
+
+ // &:hover {
+ // color: #0033ff;
+ // }
+ // }
+ // }
+
+ // .item {
+ // display: flex;
+ // justify-content: space-between;
+ // margin-top: 10px;
+
+ // .label {
+ // color: #999999;
+ // }
+ // }
+
+ // .propertyList {
+ // display: flex;
+ // margin-top: 10px;
+ // margin-bottom: 4px;
+ // width: 100%;
+
+ // .property {
+ // flex: 1;
+ // text-align: center;
+
+ // .el-progress ::v-deep {
+ // .el-progress-circle,
+ // svg {
+ // height: 45px !important;
+ // width: 45px !important;
+ // }
+
+ // .el-progress__text {
+ // display: none;
+ // }
+ // }
+
+ // .des {
+ // color: #666;
+ // font-size: 12px;
+ // }
+
+ // &:nth-child(1) ::v-deep .el-progress-circle__track {
+ // stroke: rgb(212, 227, 250);
+ // }
+
+ // &:nth-child(2) ::v-deep .el-progress-circle__track {
+ // stroke: rgb(196, 242, 194);
+ // }
+
+ // &:nth-child(3) ::v-deep .el-progress-circle__track {
+ // stroke: rgb(250, 231, 200);
+ // }
+
+ // &:nth-child(4) ::v-deep .el-progress-circle__track {
+ // stroke: rgb(241, 215, 245);
+ // }
+ // }
+ // }
+
+ // &.propertyInfo {
+ // height: 137px;
+ // }
+ // }
+
+ // .close {
+ // position: absolute;
+ // top: 16px;
+ // right: 16px;
+ // font-size: 12px;
+ // color: rgb(187, 187, 187);
+ // cursor: pointer;
+ // }
+ .line {
+ height: 0;
+ border: 1px solid #e4e3e8;
+ margin-bottom: 8px;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0