<template>
|
<div class="equipmentDetail">
|
<IndexHeader :opacity="false"></IndexHeader>
|
<!-- 面包屑 -->
|
<div class="heart">
|
<el-breadcrumb separator=">">
|
<el-breadcrumb-item :to="{ path: '/manageCenter' }"
|
>管理中心</el-breadcrumb-item
|
>
|
<el-breadcrumb-item :to="{ path: '/equipmentList' }"
|
>设备管理</el-breadcrumb-item
|
>
|
<el-breadcrumb-item>设备详情</el-breadcrumb-item>
|
</el-breadcrumb>
|
|
<!-- 第一行 -->
|
<div class="control">
|
<div class="left">
|
<div class="name">{{ detailData.devName }}</div>
|
<div class="time">设备当前时间: {{ time }}</div>
|
</div>
|
|
<div class="right">
|
<div class="button resetDevice" @click="reStart">
|
<span class="iconfont"></span>重启设备
|
</div>
|
<div class="button resetSet" @click="showSettingBox = true">
|
<span class="iconfont"></span>重启设置
|
</div>
|
<div class="button reset unBind" @click="showUnbindBox = true">
|
<span class="iconfont"></span>解绑设备
|
</div>
|
</div>
|
</div>
|
|
<!-- 第二行 -->
|
<div class="second">
|
<div class="property row">
|
<div class="title">设备性能</div>
|
<el-carousel
|
trigger="click"
|
height="130px"
|
:loop="false"
|
:autoplay="false"
|
>
|
<el-carousel-item
|
v-for="(arr, index) in devicePerformance"
|
:key="index"
|
>
|
<div class="content">
|
<div
|
class="contentItem"
|
v-for="(item, index) in arr"
|
:key="index"
|
>
|
<el-progress
|
v-if="item.type == 'mem'"
|
:percentage="+item.data"
|
:color="customColors1"
|
type="circle"
|
:width="100"
|
:stroke-width="25"
|
stroke-linecap="butt"
|
class="type1"
|
:class="{ warn: item.data >= 85 }"
|
></el-progress>
|
|
<el-progress
|
v-if="item.type == 'gpu'"
|
:percentage="+item.data"
|
:color="customColors2"
|
type="circle"
|
:width="100"
|
:stroke-width="25"
|
stroke-linecap="butt"
|
class="type2"
|
:class="{ warn: item.data >= 85 }"
|
></el-progress>
|
|
<el-progress
|
v-if="item.type == 'cpu'"
|
:percentage="+item.data"
|
:color="customColors3"
|
type="circle"
|
:width="100"
|
:stroke-width="25"
|
stroke-linecap="butt"
|
class="type3"
|
:class="{ warn: item.data >= 85 }"
|
></el-progress>
|
|
<el-progress
|
v-if="item.type == 'dist'"
|
:percentage="+item.data"
|
:color="customColors4"
|
type="circle"
|
:width="100"
|
:stroke-width="25"
|
stroke-linecap="butt"
|
class="type4"
|
:class="{ warn: item.data >= 85 }"
|
></el-progress>
|
<div class="label">{{ item.name }}</div>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
<div class="info row">
|
<div class="title">设备版本信息</div>
|
<div class="version">当前版本: V{{ versionInfo.curVersion }}</div>
|
<div class="newVersion" v-if="versionInfo.hasNewVersion">
|
检测到有最新版本: V{{ versionInfo.newVersion }}
|
</div>
|
<div
|
class="button upset"
|
v-if="versionInfo.hasNewVersion"
|
@click="showUpdateBox = true"
|
>
|
更新
|
</div>
|
</div>
|
</div>
|
|
<!-- 第三行 -->
|
<div class="deviceInfo row">
|
<div class="title">设备信息</div>
|
<div class="deviceInfo_row">
|
<div class="item">
|
<div class="label">设备名称</div>
|
<div class="data">{{ detailData.devName }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">设备ID</div>
|
<div class="data">{{ detailData.devId }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">使用激活码</div>
|
<div class="data">{{ detailData.activateCode }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">安装时间</div>
|
<div class="data">{{ detailData.installTime }}</div>
|
</div>
|
</div>
|
|
<div class="deviceInfo_row">
|
<div class="item">
|
<div class="label">绑定用户</div>
|
<div class="data">{{ detailData.username }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">IP地址</div>
|
<div class="data">{{ detailData.devIp }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">设备位置</div>
|
<div class="data">{{ detailData.address }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">首次使用时间</div>
|
<div class="data">{{ detailData.firstUseTime }}</div>
|
</div>
|
</div>
|
|
<div class="deviceInfo_row">
|
<div class="item">
|
<div class="label">端口</div>
|
<div class="data">{{ detailData.serverPort }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">子网隐码</div>
|
<div class="data">{{ detailData.subMask }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">网关</div>
|
<div class="data">{{ detailData.gateway }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">DNS</div>
|
<div class="data">{{ detailData.dns }}</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 第四行 -->
|
<div class="hardWare row">
|
<div class="title">硬件信息</div>
|
<div class="hardWare_row">
|
<div class="item">
|
<div class="label">设备型号</div>
|
<div class="data">{{ detailData.devMode }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">设备类型</div>
|
<div class="data">{{ detailData.devDesc }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">通道个数</div>
|
<div class="data">{{ detailData.channelCount }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">主控版本</div>
|
<div class="data">{{ detailData.masterVersion }}</div>
|
</div>
|
</div>
|
|
<div class="hardWare_row">
|
<div class="item">
|
<div class="label">web版本</div>
|
<!-- <div class="data">{{ detailData.webVersion }}</div> -->
|
<div class="data">2.0.0</div>
|
</div>
|
|
<div class="item">
|
<div class="label">硬盘信息</div>
|
<div class="data">{{ detailData.disk }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">内存</div>
|
<div class="data">{{ detailData.mem }}</div>
|
</div>
|
|
<div class="item">
|
<div class="label">CPU</div>
|
<div class="data">{{ detailData.devCpu }}</div>
|
</div>
|
</div>
|
|
<div class="hardWare_row">
|
<div class="item">
|
<div class="label">运行时间</div>
|
<div class="data">{{ detailData.runtime }}</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 表格区域 -->
|
<FormArea :data="deviceProcesses"></FormArea>
|
</div>
|
|
<!-- 解绑弹窗 -->
|
<UnbindBox
|
v-if="showUnbindBox"
|
:id="id"
|
@close="showUnbindBox = false"
|
></UnbindBox>
|
|
<!-- 重启设置弹窗 -->
|
<SettingBox
|
v-if="showSettingBox"
|
@close="showSettingBox = false"
|
:id="id"
|
></SettingBox>
|
|
<!-- 更新弹窗 -->
|
<UpdateBox
|
v-if="showUpdateBox"
|
@close="closeUpdateBox"
|
:id="id"
|
></UpdateBox>
|
|
<Footer :isBlack="true"></Footer>
|
</div>
|
</template>
|
|
<script>
|
import {
|
findDevDetail,
|
restart,
|
checkVersion,
|
showSystemStates,
|
showProcesses,
|
clockInfo,
|
} from "@/api/device";
|
import IndexHeader from "@/components/IndexHeader";
|
import Footer from "@/components/Footer";
|
import FormArea from "@/views/equipmentManagement/equipmentDetail/components/FormArea";
|
import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox";
|
import SettingBox from "@/views/equipmentManagement/equipmentDetail/components/SettingBox";
|
import UpdateBox from "@/views/equipmentManagement/equipmentDetail/components/UpdateBox";
|
export default {
|
components: {
|
IndexHeader,
|
FormArea,
|
Footer,
|
UnbindBox,
|
SettingBox,
|
UpdateBox,
|
},
|
created() {
|
this.findDetail();
|
this.getVersion();
|
this.getDevicePerformance();
|
this.showProcesses();
|
this.getTime();
|
},
|
data() {
|
return {
|
userId: null,
|
id: null,
|
time: "",
|
detailData: {},
|
//四个环形进度条颜色
|
customColors1: [
|
{ color: "#363CE7", percentage: 85 },
|
{ color: "#FF4B33", percentage: 100 },
|
],
|
customColors2: [
|
{ color: "#40B63A", percentage: 85 },
|
{ color: "#FF4B33", percentage: 100 },
|
],
|
customColors3: [
|
{ color: "#F9AE22", percentage: 85 },
|
{ color: "#FF4B33", percentage: 100 },
|
],
|
customColors4: [
|
{ color: "#DF23B6", percentage: 85 },
|
{ color: "#FF4B33", percentage: 100 },
|
],
|
showUnbindBox: false, //解绑弹出框
|
showSettingBox: false, //设置弹出框
|
showUpdateBox: false, //重启弹出框
|
versionInfo: {}, //版本信息
|
devicePerformance: [], //设备性能
|
deviceProcesses: {}, //算法所占资源
|
};
|
},
|
methods: {
|
//获取设备详情
|
async findDetail() {
|
this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
|
this.id = this.$route.query.id;
|
const res = await findDevDetail({ devId: this.id });
|
this.detailData = res.data;
|
},
|
//获取版本信息
|
async getVersion() {
|
const res = await checkVersion({ nodeId: this.id });
|
this.versionInfo = res.data;
|
},
|
//获取设备性能
|
async getDevicePerformance() {
|
const res = await showSystemStates({
|
userId: this.userId,
|
nodeId: this.id,
|
});
|
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",
|
});
|
res.data.disk.forEach((item, index) => {
|
this.devicePerformance.push({
|
data: item.info.usedPercent.toString().split(".")[0],
|
name: `硬盘${index + 1}`,
|
type: "dist",
|
});
|
});
|
const arr = [];
|
this.devicePerformance.forEach((item, index) => {
|
let i = index / 5 + "";
|
if (i.indexOf(".") != -1) {
|
i = i.split(".")[0];
|
}
|
if (!arr[i]) {
|
arr[i] = [];
|
}
|
arr[i].push(item);
|
});
|
this.devicePerformance = arr;
|
},
|
//获取算法所占资源
|
async showProcesses() {
|
const res = await showProcesses({ userId: this.userId, nodeId: this.id });
|
this.deviceProcesses = res.data;
|
if (!this.deviceProcesses.algos) {
|
this.deviceProcesses.algos = [];
|
}
|
if (!this.deviceProcesses.apps) {
|
this.deviceProcesses.apps = [];
|
}
|
},
|
//获取设备时间戳
|
async getTime() {
|
const res = await clockInfo({ userId: this.userId, nodeId: this.id });
|
if (res && res.success) {
|
// const timezone = res.data.time_zone;
|
let timestamp = res.data.local_time;
|
this.time = this.formatTime(++timestamp * 1000, "Y-M-D h:m:s");
|
}
|
},
|
//格式化时间戳
|
formatTime(timestamp, format) {
|
const formatNumber = (n) => {
|
n = n + "";
|
return n[1] ? n : "0" + n;
|
};
|
var formateArr = ["Y", "M", "D", "h", "m", "s"];
|
var returnArr = [];
|
var date = new Date(timestamp);
|
returnArr.push(date.getFullYear());
|
returnArr.push(formatNumber(date.getMonth() + 1));
|
returnArr.push(formatNumber(date.getDate()));
|
returnArr.push(formatNumber(date.getHours()));
|
returnArr.push(formatNumber(date.getMinutes()));
|
returnArr.push(formatNumber(date.getSeconds()));
|
for (var i in returnArr) {
|
format = format.replace(formateArr[i], returnArr[i]);
|
}
|
return format;
|
},
|
//重启
|
reStart() {
|
this.$confirm("确定要重启吗?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(async () => {
|
const res = await restart({ userId: this.userId, nodeId: this.id });
|
if (res.success) {
|
this.$notify({
|
title: "成功",
|
message: res.data,
|
type: "success",
|
});
|
} else {
|
this.$notify.error({
|
title: "错误",
|
message: "重启失败",
|
});
|
}
|
})
|
.catch(() => {});
|
},
|
closeUpdateBox() {
|
this.showUpdateBox = false;
|
this.getVersion();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.equipmentDetail {
|
background-color: rgb(243, 245, 248);
|
|
.el-breadcrumb {
|
margin-top: 48px;
|
margin-bottom: 24px;
|
|
::v-deep span {
|
color: #666;
|
}
|
}
|
|
.control {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
box-sizing: border-box;
|
padding: 0 20px;
|
margin-top: 20px;
|
width: 1280px;
|
height: 80px;
|
background: #ffffff;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.name {
|
margin-right: 20px;
|
font-weight: bold;
|
font-size: 18px;
|
}
|
|
.time {
|
color: #666666;
|
font-size: 14px;
|
}
|
}
|
|
.right {
|
display: flex;
|
.button {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-left: 20px;
|
width: 140px;
|
height: 40px;
|
color: #0065ff;
|
border: 1px solid #0065ff;
|
box-sizing: border-box;
|
|
&.resetDevice {
|
background: #0065ff;
|
font-size: 14px;
|
color: #fff;
|
}
|
}
|
|
.iconfont {
|
margin-right: 10px;
|
font-size: 18px;
|
}
|
}
|
}
|
|
.row {
|
box-sizing: border-box;
|
padding: 20px;
|
margin-top: 24px;
|
|
.title {
|
padding-left: 10px;
|
margin-bottom: 30px;
|
height: 20px;
|
line-height: 20px;
|
font-size: 16px;
|
font-weight: 700;
|
border-left: 4px solid #0065ff;
|
}
|
}
|
|
.second {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.property {
|
width: 737px;
|
height: 229px;
|
background: #ffffff;
|
|
.el-carousel ::v-deep {
|
.el-carousel__indicators {
|
display: none;
|
}
|
|
.content {
|
display: flex;
|
padding: 0 54px;
|
|
.contentItem {
|
margin-right: 22px;
|
|
.label {
|
margin-top: 5px;
|
text-align: center;
|
}
|
|
&:nth-child(5) {
|
margin-right: 0;
|
}
|
}
|
}
|
|
.el-carousel__arrow--left {
|
width: 32px;
|
height: 32px;
|
left: 0;
|
}
|
|
.el-carousel__arrow--right {
|
width: 32px;
|
height: 32px;
|
right: 0;
|
}
|
}
|
|
.type1 ::v-deep .el-progress-circle__track {
|
stroke: rgb(212, 227, 250);
|
}
|
.type2 ::v-deep .el-progress-circle__track {
|
stroke: rgb(196, 242, 194);
|
}
|
.type3 ::v-deep .el-progress-circle__track {
|
stroke: rgb(250, 231, 200);
|
}
|
.type4 ::v-deep .el-progress-circle__track {
|
stroke: rgb(241, 215, 245);
|
}
|
.warn ::v-deep .el-progress-circle__track {
|
stroke: rgb(250, 215, 210) !important;
|
}
|
}
|
|
.info {
|
position: relative;
|
width: 519px;
|
height: 229px;
|
background: #ffffff;
|
|
.version {
|
margin-bottom: 10px;
|
font-size: 14px;
|
font-weight: 700;
|
}
|
|
.newVersion {
|
font-size: 14px;
|
color: #666666;
|
}
|
|
.upset {
|
position: absolute;
|
right: 20px;
|
bottom: 30px;
|
width: 140px;
|
height: 40px;
|
background: #0065ff;
|
color: #fff;
|
font-size: 14px;
|
text-align: center;
|
line-height: 40px;
|
}
|
}
|
}
|
|
.deviceInfo {
|
margin-bottom: 24px;
|
height: 222px;
|
background-color: #fff;
|
|
.deviceInfo_row {
|
margin-bottom: 30px;
|
display: flex;
|
position: relative;
|
height: 20px;
|
|
.item {
|
position: absolute;
|
display: flex;
|
top: 0;
|
|
.label {
|
font-size: 14px;
|
color: #666666;
|
margin-right: 20px;
|
height: 84px;
|
}
|
|
.data {
|
font-size: 14px;
|
font-weight: 700;
|
}
|
|
&:nth-child(1) {
|
left: 0;
|
}
|
|
&:nth-child(2) {
|
left: 246px;
|
}
|
|
&:nth-child(3) {
|
left: 561px;
|
}
|
|
&:nth-child(4) {
|
left: 992px;
|
}
|
}
|
}
|
}
|
|
.hardWare {
|
margin-bottom: 24px;
|
height: 222px;
|
background-color: #fff;
|
|
.hardWare_row {
|
margin-bottom: 30px;
|
display: flex;
|
position: relative;
|
height: 20px;
|
|
.item {
|
position: absolute;
|
display: flex;
|
top: 0;
|
|
.label {
|
font-size: 14px;
|
color: #666666;
|
margin-right: 20px;
|
height: 84px;
|
}
|
|
.data {
|
font-size: 14px;
|
font-weight: 700;
|
}
|
|
&:nth-child(1) {
|
left: 0;
|
}
|
|
&:nth-child(2) {
|
left: 258px;
|
}
|
|
&:nth-child(3) {
|
left: 579px;
|
}
|
|
&:nth-child(4) {
|
left: 803px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
