<template>
|
<div class="InfoCard">
|
<span class="close iconfont" @click="close"></span>
|
|
<div class="name">{{ node.devName }}</div>
|
<div class="info">
|
<div class="head">
|
<div class="title">设备信息</div>
|
<div class="link" @click="checkDetail('equipmentDetail')">
|
查看详情 >
|
</div>
|
</div>
|
<div class="item">
|
<div class="label">设备型号:</div>
|
<div class="data">{{ node.devMode }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">设备类型:</div>
|
<div class="data">{{ node.devType }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">通道个数:</div>
|
<div class="data">{{ node.channelCount }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">内存:</div>
|
<div class="data">{{ node.mem }}</div>
|
</div>
|
</div>
|
|
<div class="info propertyInfo">
|
<div class="head">
|
<div class="title">系统性能</div>
|
</div>
|
<div class="propertyList" v-if="devicePerformance.length > 0">
|
<div class="property">
|
<el-progress
|
type="circle"
|
:percentage="devicePerformance[0].data"
|
:stroke-width="25"
|
color="#0065FF"
|
></el-progress>
|
<div class="num">{{ devicePerformance[0].data }}%</div>
|
<div class="des">内存</div>
|
</div>
|
|
<div class="property">
|
<el-progress
|
type="circle"
|
:percentage="devicePerformance[1].data"
|
:stroke-width="25"
|
color="rgb(64, 182, 58)"
|
></el-progress>
|
<div class="num">{{ devicePerformance[1].data }}%</div>
|
<div class="des">算力</div>
|
</div>
|
|
<div class="property">
|
<el-progress
|
type="circle"
|
:percentage="devicePerformance[2].data"
|
:stroke-width="25"
|
color="rgb(255, 186, 74)"
|
></el-progress>
|
<div class="num">{{ devicePerformance[2].data }}%</div>
|
<div class="des">CPU</div>
|
</div>
|
|
<div class="property">
|
<el-progress
|
type="circle"
|
:percentage="devicePerformance[3].data"
|
:stroke-width="25"
|
color="rgb(197, 35, 223)"
|
></el-progress>
|
<div class="num">{{ devicePerformance[3].data }}%</div>
|
<div class="des">硬盘</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="algorithm info">
|
<div class="head">
|
<div class="title">算法信息</div>
|
<div class="link" @click="checkDetail('algorithmDetail')">
|
查看详情 >
|
</div>
|
</div>
|
|
<div class="item">
|
<div class="label">算法数量:</div>
|
<div class="data">{{ algAll }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">待升级算法数量:</div>
|
<div class="data">{{ algUpgrade }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { findAllSdk, showSystemStates } from "@/api/device";
|
export default {
|
props: {
|
node: {
|
type: Object,
|
},
|
},
|
created() {
|
this.getAlg();
|
this.getDevicePerformance();
|
},
|
data() {
|
return {
|
algAll: 0, //所有算法
|
algUpgrade: 0, //待升级的算法
|
devicePerformance: [], //系统性能
|
};
|
},
|
methods: {
|
//获取算法信息
|
async getAlg() {
|
const res = await findAllSdk({
|
ip: this.node.devIp,
|
port: this.node.serverPort,
|
});
|
|
res.data.data.forEach((item) => {
|
//计算算法总数
|
if (item.installed) {
|
this.algAll++;
|
}
|
//计算待升级算法
|
if (item.installed && item.isUpgrade) {
|
this.algUpgrade++;
|
}
|
});
|
},
|
//获取设备性能
|
async getDevicePerformance() {
|
const res = await showSystemStates({
|
ip: this.node.devIp,
|
port: this.node.serverPort,
|
});
|
this.devicePerformance.push({
|
data: +res.data.mem.usedPercent.toString().split(".")[0],
|
name: "内存",
|
type: "mem",
|
});
|
this.devicePerformance.push({
|
data: +res.data.gpu.toString().split(".")[0],
|
name: "算力",
|
type: "gpu",
|
});
|
this.devicePerformance.push({
|
data: +res.data.cpu.toString().split(".")[0],
|
name: "cpu",
|
type: "cpu",
|
});
|
|
let distData = 0;
|
|
res.data.disk.forEach((item) => {
|
let distItem = +item.info.usedPercent.toString().split(".")[0];
|
distData = distData + distItem;
|
});
|
|
this.devicePerformance.push({
|
data: distData,
|
name: `硬盘`,
|
type: "dist",
|
});
|
|
console.log(this.devicePerformance);
|
},
|
//关闭
|
close() {
|
this.$emit("close");
|
},
|
// 跳转详情页
|
checkDetail(type) {
|
this.$router.push({
|
path: `/${type}`,
|
query: {
|
id: this.node.devId,
|
ip: this.node.devIp,
|
port: this.node.serverPort,
|
ndid: this.node.id,
|
},
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.InfoCard {
|
box-sizing: border-box;
|
padding: 20px 20px 10px 20px;
|
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;
|
}
|
|
.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;
|
}
|
}
|
</style>
|
