大屏问题修改
parent
f5b2049ba1
commit
9ae516e9d5
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
|
|
@ -1,178 +1,173 @@
|
|||
<template>
|
||||
<div class="dashboard-container" :class="isSmallScreen ? 'is-small' : ''">
|
||||
<!-- github角标 -->
|
||||
<el-row :gutter="100" class="mt-3 row-header is-v2" style="margin-bottom: 12px;" v-if="isV2">
|
||||
<el-col :span="6" v-for="(it, idx) in topInfos" :key="idx">
|
||||
<el-card shadow="always" class="top-row1 is-v2">
|
||||
<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>
|
||||
<el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;" v-else>
|
||||
<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" v-if="isV2">
|
||||
<template #header>
|
||||
<div class="dev-title">{{ it.device_name }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="dev-row2">
|
||||
<div>
|
||||
网络类型:<span>{{ it.modl_net_type }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-row3 is-v2">
|
||||
<div class="device-state">
|
||||
|
||||
<img style="position: relative;top: -10px;left:-10px;"
|
||||
:src="'images/state/' + it.working_state + '.png'" />
|
||||
<div
|
||||
style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">
|
||||
{{ getState(it.working_state) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" v-else>
|
||||
<template #header>
|
||||
<div class="dev-title">{{ it.device_name }}
|
||||
<svg-icon icon-class="enlarge" color="#666" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="dev-row2">
|
||||
<div>
|
||||
网络类型:<span>{{ it.modl_net_type }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-row3">
|
||||
<div class="device-state">
|
||||
<img :src="'images/loading-icon.gif'" v-if="it.working_state == 'infer'" class="img-loading">
|
||||
<img style="position: relative;top: -10px;left:-10px;"
|
||||
:src="'images/state/' + it.working_state + '.png'" />
|
||||
<div
|
||||
style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">
|
||||
{{ getState(it.working_state) }}</div>
|
||||
</div>
|
||||
<div class="dev-chart">
|
||||
<div class="chart-item-title">
|
||||
<span>温度</span>
|
||||
<span>{{ (it.tempurature / 10.0).toFixed() }}℃</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_usage }}MB</span>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inline"
|
||||
:style="'width:' + (it.memory_usage * 100.0 / it.memory_total) + '%'">
|
||||
<div class="dashboard-container" :class="isSmallScreen ? 'is-small' : ''">
|
||||
<!-- github角标 -->
|
||||
<el-row :gutter="100" class="mt-3 row-header is-v2" style="margin-bottom: 12px;" v-if="isV2">
|
||||
<el-col :span="6" v-for="(it, idx) in topInfos" :key="idx">
|
||||
<el-card shadow="always" class="top-row1 is-v2">
|
||||
<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>
|
||||
|
||||
<div class="chart-item-title">
|
||||
<span>CPU</span>
|
||||
<span>{{ it.cpu_usage }}%</span>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inline" :style="'width:' + it.cpu_usage + '%'"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;" v-else>
|
||||
<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" v-if="isV2">
|
||||
<template #header>
|
||||
<div class="dev-title">{{ it.device_name }}</div>
|
||||
</template>
|
||||
<div class="dev-row2">
|
||||
<div>
|
||||
网络类型:
|
||||
<span>{{ it.modl_net_type }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-row3 is-v2">
|
||||
<div class="device-state">
|
||||
<img style="position: relative;top: -10px;left:-10px;" :src="'images/state/' + it.working_state + '.png'" />
|
||||
<div style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">{{ getState(it.working_state) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" v-else>
|
||||
<template #header>
|
||||
<div class="dev-title">
|
||||
{{ it.device_name }}
|
||||
<svg-icon icon-class="enlarge" color="#666" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="dev-row2">
|
||||
<div>
|
||||
网络类型:
|
||||
<span>{{ it.modl_net_type }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-row3">
|
||||
<div class="device-state">
|
||||
<img :src="'images/run_circle.png'" v-if="it.working_state == 'infer'" class="img-loading" />
|
||||
<img style="position: relative;top: -10px;left:-10px;" :src="'images/state/' + it.working_state + '.png'" />
|
||||
<div style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">{{ getState(it.working_state) }}</div>
|
||||
</div>
|
||||
<div class="dev-chart">
|
||||
<div class="chart-item-title">
|
||||
<span>温度</span>
|
||||
<span>{{ (it.tempurature / 10.0).toFixed() }}℃</span>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<ModelFlow2 v-if="isV2" />
|
||||
<ModelFlow v-else />
|
||||
</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>
|
||||
<div class="chart-item-title">
|
||||
<span>内存</span>
|
||||
<span>{{ it.memory_usage }}MB</span>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inline" :style="'width:' + (it.memory_usage * 100.0 / it.memory_total) + '%'"></div>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never" class="proc-card server-status" v-if="!isV2">
|
||||
<template #header>
|
||||
<div class="row2-top">
|
||||
<div style="color:#333;font-weight: bold;font-size:15px;">服务器运行状态</div>
|
||||
<div class="chart-item-title">
|
||||
<span>CPU</span>
|
||||
<span>{{ it.cpu_usage }}%</span>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inline" :style="'width:' + it.cpu_usage + '%'"></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>
|
||||
<ModelFlow2 v-if="isV2" />
|
||||
<ModelFlow v-else />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<ServiceStatus :val="svTemp" width="200px" height="200px"></ServiceStatus>
|
||||
</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" v-if="!isV2">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
useSettingsStore,
|
||||
} from "@/store";
|
||||
import ModelFlow from './components/ModelFlow.vue'
|
||||
import ModelFlow2 from './components/ModelFlow2.vue'
|
||||
import IndexNotice from './components/IndexNotice.vue'
|
||||
import ServiceStatus from './components/ServiceStatus.vue'
|
||||
import { useSettingsStore } from "@/store";
|
||||
import ModelFlow from "./components/ModelFlow.vue";
|
||||
import ModelFlow2 from "./components/ModelFlow2.vue";
|
||||
import IndexNotice from "./components/IndexNotice.vue";
|
||||
import ServiceStatus from "./components/ServiceStatus.vue";
|
||||
import DeviceAPI from "@/api/device";
|
||||
import InfoApi from '@/api/info'
|
||||
import InfoApi from "@/api/info";
|
||||
import { ThemeEnum } from "@/enums/ThemeEnum";
|
||||
import eventBus from '@/utils/eventBus.js'
|
||||
import eventBus from "@/utils/eventBus.js";
|
||||
|
||||
const isV2 = window.isV2;
|
||||
const settingsStore = useSettingsStore();
|
||||
let svTemp = ref(55.5)
|
||||
let rd = () => { return +("" + Math.random()).substring(3, 5) };
|
||||
let rd2 = () => { return +("" + Math.random()).substring(3, 4) };
|
||||
let svTemp = ref(55.5);
|
||||
let rd = () => {
|
||||
return +("" + Math.random()).substring(3, 5);
|
||||
};
|
||||
let rd2 = () => {
|
||||
return +("" + Math.random()).substring(3, 4);
|
||||
};
|
||||
let topInfos = ref(null);
|
||||
let devInfos = ref(null);
|
||||
|
||||
const winWidth = ref(0)
|
||||
const winWidth = ref(0);
|
||||
const isSmallScreen = computed(() => {
|
||||
return winWidth.value < 1440;
|
||||
});
|
||||
|
|
@ -202,65 +197,94 @@ const getState = (e) => {
|
|||
return "启动算子";
|
||||
}
|
||||
return "升级中";
|
||||
}
|
||||
};
|
||||
const loadDevice = () => {
|
||||
DeviceAPI.getStatus().then(d => {
|
||||
DeviceAPI.getStatus().then((d) => {
|
||||
devInfos.value = d.data.data.device_status_list || [];
|
||||
});
|
||||
}
|
||||
};
|
||||
const loadInfo = () => {
|
||||
InfoApi.statistics().then(res => {
|
||||
let d = res.data
|
||||
let isDark = settingsStore.theme === ThemeEnum.DARK
|
||||
InfoApi.statistics().then((res) => {
|
||||
let d = res.data;
|
||||
let isDark = settingsStore.theme === ThemeEnum.DARK;
|
||||
topInfos.value = [
|
||||
{
|
||||
title: '模型总数', count: d.data.total_model_count, ucnt: d.data.user_model_count, clsName: 'c1',
|
||||
icon: isDark ? "images/nav/nav12.png" : "images/nav/nav1.png"
|
||||
title: "模型总数",
|
||||
count: d.data.total_model_count,
|
||||
ucnt: d.data.user_model_count,
|
||||
clsName: "c1",
|
||||
icon: isDark ? "images/nav/nav12.png" : "images/nav/nav1.png",
|
||||
},
|
||||
{
|
||||
title: '算子总数', count: d.data.total_operator_count, ucnt: d.data.user_operator_count, clsName: 'c1',
|
||||
icon: isDark ? "images/nav/nav22.png" : "images/nav/nav2.png"
|
||||
title: "算子总数",
|
||||
count: d.data.total_operator_count,
|
||||
ucnt: d.data.user_operator_count,
|
||||
clsName: "c1",
|
||||
icon: isDark ? "images/nav/nav22.png" : "images/nav/nav2.png",
|
||||
},
|
||||
{
|
||||
title: '数据集总数', count: d.data.total_dataset_count, ucnt: d.data.user_dataset_count, clsName: 'c1',
|
||||
icon: isDark ? "images/nav/nav32.png" : "images/nav/nav3.png"
|
||||
title: "数据集总数",
|
||||
count: d.data.total_dataset_count,
|
||||
ucnt: d.data.user_dataset_count,
|
||||
clsName: "c1",
|
||||
icon: isDark ? "images/nav/nav32.png" : "images/nav/nav3.png",
|
||||
},
|
||||
{
|
||||
title: '评估报告总数', count: d.data.total_connection_count, ucnt: d.data.user_connection_count, clsName: 'c1',
|
||||
icon: isDark ? "images/nav/nav42.png" : "images/nav/nav4.png"
|
||||
title: "评估报告总数",
|
||||
count: d.data.total_connection_count,
|
||||
ucnt: d.data.user_connection_count,
|
||||
clsName: "c1",
|
||||
icon: isDark ? "images/nav/nav42.png" : "images/nav/nav4.png",
|
||||
},
|
||||
{
|
||||
title: '互联总数', count: d.data.total_task_count, ucnt: d.data.user_task_count, clsName: 'c1',
|
||||
icon: isDark ? "images/nav/nav52.png" : "images/nav/nav5.png"
|
||||
title: "互联总数",
|
||||
count: d.data.total_task_count,
|
||||
ucnt: d.data.user_task_count,
|
||||
clsName: "c1",
|
||||
icon: isDark ? "images/nav/nav52.png" : "images/nav/nav5.png",
|
||||
},
|
||||
{
|
||||
title: '总访问量', count: d.data.total_visit_count, ucnt: d.data.user_visit_count, clsName: 'c1',
|
||||
icon: isDark ? "images/nav/nav62.png" : "images/nav/nav6.png"
|
||||
title: "总访问量",
|
||||
count: d.data.total_visit_count,
|
||||
ucnt: d.data.user_visit_count,
|
||||
clsName: "c1",
|
||||
icon: isDark ? "images/nav/nav62.png" : "images/nav/nav6.png",
|
||||
},
|
||||
];
|
||||
if (isV2) {
|
||||
topInfos.value = [
|
||||
{
|
||||
title: '模型总数', count: d.data.total_model_count, ucnt: d.data.user_model_count, clsName: 'c1',
|
||||
icon: isDark ? "images/nav/nav12.png" : "images/nav/nav1.png"
|
||||
title: "模型总数",
|
||||
count: d.data.total_model_count,
|
||||
ucnt: d.data.user_model_count,
|
||||
clsName: "c1",
|
||||
icon: isDark ? "images/nav/nav12.png" : "images/nav/nav1.png",
|
||||
},
|
||||
{
|
||||
title: '数据集总数', count: d.data.total_dataset_count, ucnt: d.data.user_dataset_count, clsName: 'c1',
|
||||
icon: isDark ? "images/nav/nav32.png" : "images/nav/nav3.png"
|
||||
title: "数据集总数",
|
||||
count: d.data.total_dataset_count,
|
||||
ucnt: d.data.user_dataset_count,
|
||||
clsName: "c1",
|
||||
icon: isDark ? "images/nav/nav32.png" : "images/nav/nav3.png",
|
||||
},
|
||||
{
|
||||
title: '评估报告总数', count: d.data.total_connection_count, ucnt: d.data.user_connection_count, clsName: 'c1',
|
||||
icon: isDark ? "images/nav/nav42.png" : "images/nav/nav4.png"
|
||||
title: "评估报告总数",
|
||||
count: d.data.total_connection_count,
|
||||
ucnt: d.data.user_connection_count,
|
||||
clsName: "c1",
|
||||
icon: isDark ? "images/nav/nav42.png" : "images/nav/nav4.png",
|
||||
},
|
||||
{
|
||||
title: '总访问量', count: d.data.total_visit_count, ucnt: d.data.user_visit_count, clsName: 'c1',
|
||||
icon: isDark ? "images/nav/nav62.png" : "images/nav/nav6.png"
|
||||
title: "总访问量",
|
||||
count: d.data.total_visit_count,
|
||||
ucnt: d.data.user_visit_count,
|
||||
clsName: "c1",
|
||||
icon: isDark ? "images/nav/nav62.png" : "images/nav/nav6.png",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
onUnmounted(() => {
|
||||
eventBus.off("changeTheme");
|
||||
if (window.indexTimer) {
|
||||
|
|
@ -268,7 +292,7 @@ onUnmounted(() => {
|
|||
}
|
||||
});
|
||||
onMounted(() => {
|
||||
eventBus.on("changeTheme", d => {
|
||||
eventBus.on("changeTheme", (d) => {
|
||||
loadInfo();
|
||||
});
|
||||
winWidth.value = window.outerWidth;
|
||||
|
|
@ -276,14 +300,13 @@ onMounted(() => {
|
|||
setTimeout(() => {
|
||||
winWidth.value = window.outerWidth;
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
loadDevice();
|
||||
loadInfo();
|
||||
window.indexTimer = window.setInterval(() => {
|
||||
loadDevice();
|
||||
loadInfo();
|
||||
}, 3000);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -420,7 +443,7 @@ onMounted(() => {
|
|||
position: relative;
|
||||
|
||||
&.is-v2 {
|
||||
background-color: #6FADF5;
|
||||
background-color: #6fadf5;
|
||||
|
||||
.el-card__body {
|
||||
display: flex;
|
||||
|
|
@ -442,7 +465,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.div-num {
|
||||
color: #816CB2;
|
||||
color: #816cb2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -462,7 +485,6 @@ onMounted(() => {
|
|||
|
||||
* {
|
||||
fill: #3399ff;
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -512,7 +534,6 @@ onMounted(() => {
|
|||
top: 0px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -530,7 +551,7 @@ onMounted(() => {
|
|||
|
||||
.dev-item {
|
||||
.el-card {
|
||||
background: #EEF7FE;
|
||||
background: #eef7fe;
|
||||
padding: 8px;
|
||||
|
||||
.el-card__header {
|
||||
|
|
@ -621,7 +642,6 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -630,10 +650,21 @@ onMounted(() => {
|
|||
|
||||
.img-loading {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
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;
|
||||
}
|
||||
|
||||
.proc-card {
|
||||
margin-top: 20px;
|
||||
padding: 8px;
|
||||
|
|
@ -644,16 +675,17 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.el-card__body {
|
||||
background: #EEF7FE;
|
||||
background: #eef7fe;
|
||||
border-radius: 8px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
&.server-status {
|
||||
background: #EEF7FE;
|
||||
background: #eef7fe;
|
||||
padding: 8px;
|
||||
|
||||
.el-card__header {}
|
||||
.el-card__header {
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
background: #fff;
|
||||
|
|
@ -674,16 +706,15 @@ html.dark {
|
|||
}
|
||||
|
||||
.div-num {
|
||||
color: #aaa
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.top-row2 {
|
||||
.dev-item {
|
||||
.el-card {
|
||||
background: #2B3553;
|
||||
background: #2b3553;
|
||||
|
||||
.dev-title {
|
||||
svg * {
|
||||
|
|
@ -692,13 +723,12 @@ html.dark {
|
|||
}
|
||||
|
||||
.el-card__body {
|
||||
background: #2B3553;
|
||||
background: #2b3553;
|
||||
box-shadow: none;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
|
|
@ -721,7 +751,6 @@ html.dark {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.proc-card {
|
||||
|
|
@ -738,7 +767,7 @@ html.dark {
|
|||
color: #aaa;
|
||||
|
||||
.el-badge__content--danger {
|
||||
background: #6F89A6;
|
||||
background: #6f89a6;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
|
|
@ -749,7 +778,7 @@ html.dark {
|
|||
}
|
||||
|
||||
.proc-card.server-status {
|
||||
background: #242B43;
|
||||
background: #242b43;
|
||||
|
||||
.el-card__header {
|
||||
.row2-top {
|
||||
|
|
|
|||
|
|
@ -1,149 +1,261 @@
|
|||
<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 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>
|
||||
</template>
|
||||
<div class="dev-row2">
|
||||
<div>
|
||||
任务类型:<span>{{ it.modelName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-row3">
|
||||
<div class="device-state">
|
||||
<img :src="'images/loading-icon.gif'" 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-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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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 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>
|
||||
</template>
|
||||
<ServiceStatus :val="svTemp" width="200px" height="200px"></ServiceStatus>
|
||||
</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>
|
||||
</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 { 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 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" },
|
||||
{
|
||||
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)
|
||||
{
|
||||
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;
|
||||
});
|
||||
|
|
@ -171,7 +283,7 @@ const getState = (e) => {
|
|||
}
|
||||
|
||||
return "升级中";
|
||||
}
|
||||
};
|
||||
onUnmounted(() => {
|
||||
if (window.indexTimer2) {
|
||||
window.clearInterval(window.indexTimer2);
|
||||
|
|
@ -183,12 +295,10 @@ onMounted(() => {
|
|||
setTimeout(() => {
|
||||
winWidth.value = window.outerWidth;
|
||||
}, 100);
|
||||
}
|
||||
DeviceAPI.getStatus().then(d => {
|
||||
|
||||
});
|
||||
};
|
||||
DeviceAPI.getStatus().then((d) => {});
|
||||
window.indexTimer2 = window.setInterval(() => {
|
||||
DeviceAPI.getStatus()
|
||||
DeviceAPI.getStatus();
|
||||
}, 3000);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -335,7 +445,6 @@ onMounted(() => {
|
|||
|
||||
* {
|
||||
fill: #3399ff;
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -385,7 +494,6 @@ onMounted(() => {
|
|||
top: 0px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -403,7 +511,7 @@ onMounted(() => {
|
|||
|
||||
.dev-item {
|
||||
.el-card {
|
||||
background: #EEF7FE;
|
||||
background: #eef7fe;
|
||||
padding: 8px;
|
||||
|
||||
.el-card__header {
|
||||
|
|
@ -490,7 +598,6 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -499,8 +606,52 @@ onMounted(() => {
|
|||
|
||||
.img-loading {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
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 {
|
||||
|
|
@ -513,16 +664,17 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.el-card__body {
|
||||
background: #EEF7FE;
|
||||
background: #eef7fe;
|
||||
border-radius: 8px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
&.server-status {
|
||||
background: #EEF7FE;
|
||||
background: #eef7fe;
|
||||
padding: 8px;
|
||||
|
||||
.el-card__header {}
|
||||
.el-card__header {
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
background: #fff;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue