687 lines
16 KiB
Vue
687 lines
16 KiB
Vue
<template>
|
|
<div class="dashboard-container" :class="isSmallScreen ? 'is-small' : ''">
|
|
<!-- github角标 -->
|
|
<el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
|
|
<el-col :span="4" v-for="(it, idx) in topInfos" :key="idx">
|
|
<el-card shadow="always" class="top-row1">
|
|
<img :src="it.icon" class="top-icon" />
|
|
<div class="top-row">
|
|
<div class="div-title">{{ it.title }}</div>
|
|
<div class="div-num">
|
|
<span style="color:dodgerblue;">{{ it.ucnt }}</span>/
|
|
<span style="font-size:14px;">{{ it.count }}</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<div style="display: flex;">
|
|
<div style="flex-grow: 1;">
|
|
<el-card shadow="never" class="top-row2">
|
|
<template #header>
|
|
<div class="row2-top">
|
|
<div style="font-weight: bold;font-size:15px;">设备运行状态</div>
|
|
<div class="div-more" v-if="false">更多</div>
|
|
</div>
|
|
</template>
|
|
<el-scrollbar max-height="504px">
|
|
<el-row :gutter="20">
|
|
<el-col :span="isSmallScreen ? 8 : 6" v-for="it in devInfos" :key="it.id" class="dev-item" style="margin-bottom: 20px;">
|
|
<el-card shadow="hover">
|
|
<template #header>
|
|
<div class="dev-title">
|
|
{{ it.name }}
|
|
<svg-icon icon-class="enlarge" color="#666" />
|
|
</div>
|
|
</template>
|
|
<div class="dev-row2">
|
|
<div>
|
|
任务类型:
|
|
<span>{{ it.modelName }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="dev-row3">
|
|
<div class="device-state">
|
|
<img :src="'images/run_circle.png'" v-if="it.state == 'infer'" class="img-loading" />
|
|
<img style="position: relative;top: -10px;left:-10px;" :src="'images/state/' + it.state + '.png'" />
|
|
<div style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">{{ getState(it.state) }}</div>
|
|
</div>
|
|
<div class="dev-chart">
|
|
<div class="chart-item-title">
|
|
<span>温度</span>
|
|
<span>{{ it.temperature }}℃</span>
|
|
</div>
|
|
<div class="chart-line">
|
|
<div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div>
|
|
</div>
|
|
|
|
<div class="chart-item-title">
|
|
<span>内存</span>
|
|
<span>{{ it.memory }}%</span>
|
|
</div>
|
|
<div class="chart-line">
|
|
<div class="chart-line-inline" :style="'width:' + it.memory + '%'"></div>
|
|
</div>
|
|
|
|
<div class="chart-item-title">
|
|
<span>效率</span>
|
|
<span>{{ it.cpu }}%</span>
|
|
</div>
|
|
<div class="chart-line">
|
|
<div class="chart-line-inline" :style="'width:' + it.cpu + '%'"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-scrollbar>
|
|
</el-card>
|
|
|
|
<el-card shadow="never" class="proc-card model-proc">
|
|
<template #header>
|
|
<div class="row2-top">
|
|
<div style="color:#333;font-weight: bold;font-size:15px;">超异构任务部署流程</div>
|
|
</div>
|
|
</template>
|
|
<ModelFlow />
|
|
</el-card>
|
|
</div>
|
|
<div style class="right-panel">
|
|
<el-card shadow="never" class="top-row2 notice-card">
|
|
<template #header>
|
|
<div class="row2-top">
|
|
<div style="color:#333;font-weight: bold;font-size:15px;">通知中心</div>
|
|
</div>
|
|
</template>
|
|
<el-scrollbar height="484px">
|
|
<IndexNotice />
|
|
</el-scrollbar>
|
|
</el-card>
|
|
|
|
<el-card shadow="never" class="proc-card server-status">
|
|
<template #header>
|
|
<div class="row2-top">
|
|
<div style="color:#333;font-weight: bold;font-size:15px;">服务器运行状态</div>
|
|
</div>
|
|
</template>
|
|
<ServiceStatus :val="svTemp" width="200px" height="200px"></ServiceStatus>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from "vue";
|
|
import ModelFlow from "./components/ModelFlow2.vue";
|
|
import IndexNotice from "./components/IndexNotice.vue";
|
|
import ServiceStatus from "./components/ServiceStatus.vue";
|
|
import DeviceAPI from "@/api/device";
|
|
let svTemp = ref(55.5);
|
|
let rd = () => {
|
|
return +("" + Math.random()).substring(3, 6);
|
|
};
|
|
let rd2 = () => {
|
|
return +("" + Math.random()).substring(3, 4);
|
|
};
|
|
let rd3 = () => {
|
|
return +("" + Math.random()).substring(3, 5);
|
|
};
|
|
let topInfos = reactive([
|
|
{
|
|
title: "模型总数",
|
|
count: rd(),
|
|
ucnt: rd2(),
|
|
clsName: "c1",
|
|
icon: "images/nav/nav1.png",
|
|
},
|
|
{
|
|
title: "算子总数",
|
|
count: rd(),
|
|
ucnt: rd2(),
|
|
clsName: "c1",
|
|
icon: "images/nav/nav2.png",
|
|
},
|
|
{
|
|
title: "数据集总数",
|
|
count: rd(),
|
|
ucnt: rd2(),
|
|
clsName: "c1",
|
|
icon: "images/nav/nav3.png",
|
|
},
|
|
{
|
|
title: "评估报告总数",
|
|
count: rd(),
|
|
ucnt: rd2(),
|
|
clsName: "c1",
|
|
icon: "images/nav/nav4.png",
|
|
},
|
|
{
|
|
title: "互联总数",
|
|
count: rd(),
|
|
ucnt: rd2(),
|
|
clsName: "c1",
|
|
icon: "images/nav/nav5.png",
|
|
},
|
|
{
|
|
title: "总访问量",
|
|
count: rd(),
|
|
ucnt: rd2(),
|
|
clsName: "c1",
|
|
icon: "images/nav/nav1.png",
|
|
},
|
|
]);
|
|
|
|
let devInfos = reactive([
|
|
{
|
|
id: 1001,
|
|
name: "NPU-TC-01",
|
|
netType: "network001",
|
|
modelName: "N/A",
|
|
state: "offline",
|
|
temperature: "31",
|
|
memory: rd3(),
|
|
cpu: rd3(),
|
|
},
|
|
{
|
|
id: 1002,
|
|
name: "GPU-B101",
|
|
netType: "network001",
|
|
modelName: "N/A",
|
|
state: "compile",
|
|
temperature: "46",
|
|
memory: rd3(),
|
|
cpu: rd3(),
|
|
},
|
|
{
|
|
id: 1003,
|
|
name: "CPU-SW-02",
|
|
netType: "network001",
|
|
modelName: "N/A",
|
|
state: "idle",
|
|
temperature: "37",
|
|
memory: rd3(),
|
|
cpu: rd3(),
|
|
},
|
|
{
|
|
id: 1004,
|
|
name: "CPU-SW-01",
|
|
netType: "network001",
|
|
modelName: "pagerank_01",
|
|
state: "infer",
|
|
temperature: "34",
|
|
memory: rd3(),
|
|
cpu: rd3(),
|
|
},
|
|
{
|
|
id: 1005,
|
|
name: "FPGA-FD-01",
|
|
netType: "network001",
|
|
modelName: "Obj_detect_01",
|
|
state: "unregist",
|
|
temperature: "42",
|
|
memory: rd3(),
|
|
cpu: rd3(),
|
|
},
|
|
{
|
|
id: 1006,
|
|
name: "GPU-MR-01",
|
|
netType: "network001",
|
|
modelName: "llm_01",
|
|
state: "download",
|
|
temperature: "40",
|
|
memory: rd3(),
|
|
cpu: rd3(),
|
|
},
|
|
{
|
|
id: 1007,
|
|
name: "FPGA-FD-02",
|
|
netType: "network001",
|
|
modelName: "Obj_detect_01",
|
|
state: "train",
|
|
temperature: "39",
|
|
memory: rd3(),
|
|
cpu: rd3(),
|
|
},
|
|
{
|
|
id: 1008,
|
|
name: "CPU-SW-03",
|
|
netType: "network001",
|
|
modelName: "pagerank_01",
|
|
state: "upgrade",
|
|
temperature: "38",
|
|
memory: rd3(),
|
|
cpu: rd3(),
|
|
},
|
|
]);
|
|
const winWidth = ref(0);
|
|
const isSmallScreen = computed(() => {
|
|
return winWidth.value < 1440;
|
|
});
|
|
const getState = (e) => {
|
|
if (e == "offline") {
|
|
return "离线";
|
|
}
|
|
if (e == "compile") {
|
|
return "编译中";
|
|
}
|
|
if (e == "idle") {
|
|
return "空闲";
|
|
}
|
|
if (e == "infer") {
|
|
return "推理中";
|
|
}
|
|
if (e == "unregist") {
|
|
return "未注册";
|
|
}
|
|
if (e == "download") {
|
|
return "部署中";
|
|
}
|
|
if (e == "train") {
|
|
return "训练中";
|
|
}
|
|
|
|
return "升级中";
|
|
};
|
|
onUnmounted(() => {
|
|
if (window.indexTimer2) {
|
|
window.clearInterval(window.indexTimer2);
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
winWidth.value = window.outerWidth;
|
|
window.onresize = () => {
|
|
setTimeout(() => {
|
|
winWidth.value = window.outerWidth;
|
|
}, 100);
|
|
};
|
|
DeviceAPI.getStatus().then((d) => {});
|
|
window.indexTimer2 = window.setInterval(() => {
|
|
DeviceAPI.getStatus();
|
|
}, 3000);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dashboard-container {
|
|
position: relative;
|
|
min-width: 960px;
|
|
padding: 0px 24px;
|
|
|
|
&.is-small {
|
|
padding: 0px 12px;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.github-corner {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
border: 0;
|
|
}
|
|
|
|
.data-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20px;
|
|
font-weight: bold;
|
|
color: var(--el-text-color-regular);
|
|
background: var(--el-bg-color-overlay);
|
|
border-color: var(--el-border-color);
|
|
box-shadow: var(--el-box-shadow-dark);
|
|
}
|
|
|
|
.svg-icon {
|
|
fill: currentcolor !important;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.dashboard-container {
|
|
&.is-small {
|
|
.dev-row3 {
|
|
padding: 0px !important;
|
|
|
|
.device-state {
|
|
width: 80px !important;
|
|
}
|
|
}
|
|
|
|
.right-panel {
|
|
min-width: 240px;
|
|
max-width: 240px;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.model-flow {
|
|
.card-item {
|
|
width: 100px;
|
|
}
|
|
|
|
.row-1 {
|
|
.line {
|
|
width: calc(20% - 100px);
|
|
top: 10px;
|
|
}
|
|
}
|
|
|
|
.row-3 {
|
|
.line {
|
|
width: calc(20% - 100px);
|
|
}
|
|
|
|
.card-center {
|
|
.card-center-item {
|
|
width: 100px;
|
|
|
|
&:first-child {
|
|
&::after {
|
|
left: 50px;
|
|
}
|
|
|
|
&::before {
|
|
left: 50px;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
&::after {
|
|
left: -20px;
|
|
}
|
|
|
|
&::before {
|
|
left: 51px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-item {
|
|
&.line-top {
|
|
&::after {
|
|
left: 50px;
|
|
}
|
|
|
|
&::before {
|
|
left: 48px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-panel {
|
|
min-width: 300px;
|
|
max-width: 300px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.el-card__body {
|
|
padding: 10px 10px;
|
|
}
|
|
|
|
.top-row1 {
|
|
position: relative;
|
|
|
|
.top-icon {
|
|
top: 20px;
|
|
position: absolute;
|
|
background: #409eff2b;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
* {
|
|
fill: #3399ff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-row {
|
|
padding-left: 40px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
|
|
.div-title {
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.div-num {
|
|
font-size: 20px;
|
|
font-weight: bolder;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-row2 {
|
|
&.notice-card {
|
|
.el-card__header {
|
|
border-bottom: 1px solid #ebeef5;
|
|
}
|
|
|
|
.el-card__body {
|
|
.el-scrollbar {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-card__header {
|
|
padding: 8px;
|
|
border: none;
|
|
|
|
.row2-top {
|
|
position: relative;
|
|
|
|
.div-more {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 0px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-card__body {
|
|
padding: 0px;
|
|
|
|
.el-scrollbar {
|
|
padding: 0px 10px;
|
|
|
|
.el-scrollbar__bar.is-horizontal {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dev-item {
|
|
.el-card {
|
|
background: #eef7fe;
|
|
padding: 8px;
|
|
|
|
.el-card__header {
|
|
padding: 4px;
|
|
border: none;
|
|
|
|
.dev-title {
|
|
color: var(--el-color-primary);
|
|
position: relative;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
|
|
.svg-icon {
|
|
position: absolute;
|
|
right: 0px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-card__body {
|
|
background: #fff;
|
|
box-shadow: var(--el-box-shadow-light);
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
|
|
.dev-row3 {
|
|
display: flex;
|
|
padding: 12px;
|
|
align-items: center;
|
|
|
|
.device-state {
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
|
|
.state-text {
|
|
font-size: 16px;
|
|
|
|
&.state0 {
|
|
color: var(--el-color-primary);
|
|
}
|
|
|
|
&.state1 {
|
|
color: var(--el-color-warning);
|
|
}
|
|
|
|
&.state2 {
|
|
color: var(--el-color-danger);
|
|
}
|
|
}
|
|
|
|
.dev-chart {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
top: -10px;
|
|
|
|
.chart-item-title {
|
|
margin: 12px 0px 0px;
|
|
font-size: 12px;
|
|
position: relative;
|
|
|
|
span {
|
|
&:first-child {
|
|
font-weight: bold;
|
|
}
|
|
|
|
&:last-child {
|
|
position: absolute;
|
|
right: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart-line {
|
|
background-color: #ccc;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
|
|
.chart-line-inline {
|
|
background-color: var(--el-color-primary);
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.img-loading {
|
|
position: absolute;
|
|
width: 70px;
|
|
height: 70px;
|
|
margin-top: -10px;
|
|
margin-left: -10px;
|
|
}
|
|
.img-loading {
|
|
-webkit-transition-property: -webkit-transform;
|
|
-webkit-transition-duration: 1s;
|
|
-moz-transition-property: -moz-transform;
|
|
-moz-transition-duration: 1s;
|
|
-webkit-animation: rotate 3s linear infinite;
|
|
-moz-animation: rotate 3s linear infinite;
|
|
-o-animation: rotate 3s linear infinite;
|
|
animation: rotate 3s linear infinite;
|
|
}
|
|
@-webkit-keyframes rotate {
|
|
from {
|
|
-webkit-transform: rotate(360deg);
|
|
}
|
|
to {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
}
|
|
@-moz-keyframes rotate {
|
|
from {
|
|
-moz-transform: rotate(359deg);
|
|
}
|
|
to {
|
|
-moz-transform: rotate(0deg);
|
|
}
|
|
}
|
|
@-o-keyframes rotate {
|
|
from {
|
|
-o-transform: rotate(359deg);
|
|
}
|
|
to {
|
|
-o-transform: rotate(0deg);
|
|
}
|
|
}
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(359deg);
|
|
}
|
|
to {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.proc-card {
|
|
margin-top: 20px;
|
|
padding: 8px;
|
|
|
|
.el-card__header {
|
|
padding: 8px;
|
|
border: none;
|
|
}
|
|
|
|
.el-card__body {
|
|
background: #eef7fe;
|
|
border-radius: 8px;
|
|
height: 300px;
|
|
}
|
|
|
|
&.server-status {
|
|
background: #eef7fe;
|
|
padding: 8px;
|
|
|
|
.el-card__header {
|
|
}
|
|
|
|
.el-card__body {
|
|
background: #fff;
|
|
box-shadow: var(--el-box-shadow-light);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|