sxyanzhu
/
AIManage
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏问题修改

main
haha 2025-04-07 23:56:29 +08:00
parent f5b2049ba1
commit 9ae516e9d5
4 changed files with 973 additions and 740 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/run_circle.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

211
src/views/dashboard/index.vue
View File

@ -8,7 +8,8 @@
<div class="top-row"> <div class="top-row">
<div class="div-title">{{ it.title }}</div> <div class="div-title">{{ it.title }}</div>
<div class="div-num"> <div class="div-num">
<span style="color:dodgerblue;">{{ it.ucnt }} </span>/ <span style="font-size:14px;">{{ it.count }}</span> <span style="color:dodgerblue;">{{ it.ucnt }}</span>/
<span style="font-size:14px;">{{ it.count }}</span>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -21,7 +22,8 @@
<div class="top-row"> <div class="top-row">
<div class="div-title">{{ it.title }}</div> <div class="div-title">{{ it.title }}</div>
<div class="div-num"> <div class="div-num">
<span style="color:dodgerblue;">{{ it.ucnt }} </span>/ <span style="font-size:14px;">{{ it.count }}</span> <span style="color:dodgerblue;">{{ it.ucnt }}</span>/
<span style="font-size:14px;">{{ it.count }}</span>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -38,48 +40,42 @@
</template> </template>
<el-scrollbar max-height="504px"> <el-scrollbar max-height="504px">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="isSmallScreen ? 8 : 6" v-for="it in devInfos" :key="it.id" class="dev-item" <el-col :span="isSmallScreen ? 8 : 6" v-for="it in devInfos" :key="it.id" class="dev-item" style="margin-bottom: 20px;">
style="margin-bottom: 20px;">
<el-card shadow="hover" v-if="isV2"> <el-card shadow="hover" v-if="isV2">
<template #header> <template #header>
<div class="dev-title">{{ it.device_name }} <div class="dev-title">{{ it.device_name }}</div>
</div>
</template> </template>
<div class="dev-row2"> <div class="dev-row2">
<div> <div>
网络类型:<span>{{ it.modl_net_type }}</span> 网络类型:
<span>{{ it.modl_net_type }}</span>
</div> </div>
</div> </div>
<div class="dev-row3 is-v2"> <div class="dev-row3 is-v2">
<div class="device-state"> <div class="device-state">
<img style="position: relative;top: -10px;left:-10px;" :src="'images/state/' + it.working_state + '.png'" />
<img style="position: relative;top: -10px;left:-10px;" <div style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">{{ getState(it.working_state) }}</div>
: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>
</div> </div>
</el-card> </el-card>
<el-card shadow="hover" v-else> <el-card shadow="hover" v-else>
<template #header> <template #header>
<div class="dev-title">{{ it.device_name }} <div class="dev-title">
{{ it.device_name }}
<svg-icon icon-class="enlarge" color="#666" /> <svg-icon icon-class="enlarge" color="#666" />
</div> </div>
</template> </template>
<div class="dev-row2"> <div class="dev-row2">
<div> <div>
网络类型:<span>{{ it.modl_net_type }}</span> 网络类型:
<span>{{ it.modl_net_type }}</span>
</div> </div>
</div> </div>
<div class="dev-row3"> <div class="dev-row3">
<div class="device-state"> <div class="device-state">
<img :src="'images/loading-icon.gif'" v-if="it.working_state == 'infer'" class="img-loading"> <img :src="'images/run_circle.png'" v-if="it.working_state == 'infer'" class="img-loading" />
<img style="position: relative;top: -10px;left:-10px;" <img style="position: relative;top: -10px;left:-10px;" :src="'images/state/' + it.working_state + '.png'" />
: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
style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">
{{ getState(it.working_state) }}</div>
</div> </div>
<div class="dev-chart"> <div class="dev-chart">
<div class="chart-item-title"> <div class="chart-item-title">
@ -95,9 +91,7 @@
<span>{{ it.memory_usage }}MB</span> <span>{{ it.memory_usage }}MB</span>
</div> </div>
<div class="chart-line"> <div class="chart-line">
<div class="chart-line-inline" <div class="chart-line-inline" :style="'width:' + (it.memory_usage * 100.0 / it.memory_total) + '%'"></div>
:style="'width:' + (it.memory_usage * 100.0 / it.memory_total) + '%'">
</div>
</div> </div>
<div class="chart-item-title"> <div class="chart-item-title">
@ -107,7 +101,6 @@
<div class="chart-line"> <div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.cpu_usage + '%'"></div> <div class="chart-line-inline" :style="'width:' + it.cpu_usage + '%'"></div>
</div> </div>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -126,7 +119,7 @@
<ModelFlow v-else /> <ModelFlow v-else />
</el-card> </el-card>
</div> </div>
<div style="" class="right-panel"> <div style class="right-panel">
<el-card shadow="never" class="top-row2 notice-card"> <el-card shadow="never" class="top-row2 notice-card">
<template #header> <template #header>
<div class="row2-top"> <div class="row2-top">
@ -152,27 +145,29 @@
</template> </template>
<script setup> <script setup>
import { import { useSettingsStore } from "@/store";
useSettingsStore, import ModelFlow from "./components/ModelFlow.vue";
} from "@/store"; import ModelFlow2 from "./components/ModelFlow2.vue";
import ModelFlow from './components/ModelFlow.vue' import IndexNotice from "./components/IndexNotice.vue";
import ModelFlow2 from './components/ModelFlow2.vue' import ServiceStatus from "./components/ServiceStatus.vue";
import IndexNotice from './components/IndexNotice.vue'
import ServiceStatus from './components/ServiceStatus.vue'
import DeviceAPI from "@/api/device"; import DeviceAPI from "@/api/device";
import InfoApi from '@/api/info' import InfoApi from "@/api/info";
import { ThemeEnum } from "@/enums/ThemeEnum"; import { ThemeEnum } from "@/enums/ThemeEnum";
import eventBus from '@/utils/eventBus.js' import eventBus from "@/utils/eventBus.js";
const isV2 = window.isV2; const isV2 = window.isV2;
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
let svTemp = ref(55.5) let svTemp = ref(55.5);
let rd = () => { return +("" + Math.random()).substring(3, 5) }; let rd = () => {
let rd2 = () => { return +("" + Math.random()).substring(3, 4) }; return +("" + Math.random()).substring(3, 5);
};
let rd2 = () => {
return +("" + Math.random()).substring(3, 4);
};
let topInfos = ref(null); let topInfos = ref(null);
let devInfos = ref(null); let devInfos = ref(null);
const winWidth = ref(0) const winWidth = ref(0);
const isSmallScreen = computed(() => { const isSmallScreen = computed(() => {
return winWidth.value < 1440; return winWidth.value < 1440;
}); });
@ -202,65 +197,94 @@ const getState = (e) => {
return "启动算子"; return "启动算子";
} }
return "升级中"; return "升级中";
} };
const loadDevice = () => { const loadDevice = () => {
DeviceAPI.getStatus().then(d => { DeviceAPI.getStatus().then((d) => {
devInfos.value = d.data.data.device_status_list || []; devInfos.value = d.data.data.device_status_list || [];
}); });
} };
const loadInfo = () => { const loadInfo = () => {
InfoApi.statistics().then(res => { InfoApi.statistics().then((res) => {
let d = res.data let d = res.data;
let isDark = settingsStore.theme === ThemeEnum.DARK let isDark = settingsStore.theme === ThemeEnum.DARK;
topInfos.value = [ topInfos.value = [
{ {
title: '模型总数', count: d.data.total_model_count, ucnt: d.data.user_model_count, clsName: 'c1', title: "模型总数",
icon: isDark ? "images/nav/nav12.png" : "images/nav/nav1.png" 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', title: "算子总数",
icon: isDark ? "images/nav/nav22.png" : "images/nav/nav2.png" 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', title: "数据集总数",
icon: isDark ? "images/nav/nav32.png" : "images/nav/nav3.png" 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', title: "评估报告总数",
icon: isDark ? "images/nav/nav42.png" : "images/nav/nav4.png" 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', title: "互联总数",
icon: isDark ? "images/nav/nav52.png" : "images/nav/nav5.png" 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', title: "总访问量",
icon: isDark ? "images/nav/nav62.png" : "images/nav/nav6.png" 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) { if (isV2) {
topInfos.value = [ topInfos.value = [
{ {
title: '模型总数', count: d.data.total_model_count, ucnt: d.data.user_model_count, clsName: 'c1', title: "模型总数",
icon: isDark ? "images/nav/nav12.png" : "images/nav/nav1.png" 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', title: "数据集总数",
icon: isDark ? "images/nav/nav32.png" : "images/nav/nav3.png" 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', title: "评估报告总数",
icon: isDark ? "images/nav/nav42.png" : "images/nav/nav4.png" 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', title: "总访问量",
icon: isDark ? "images/nav/nav62.png" : "images/nav/nav6.png" 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(() => { onUnmounted(() => {
eventBus.off("changeTheme"); eventBus.off("changeTheme");
if (window.indexTimer) { if (window.indexTimer) {
@ -268,7 +292,7 @@ onUnmounted(() => {
} }
}); });
onMounted(() => { onMounted(() => {
eventBus.on("changeTheme", d => { eventBus.on("changeTheme", (d) => {
loadInfo(); loadInfo();
}); });
winWidth.value = window.outerWidth; winWidth.value = window.outerWidth;
@ -276,14 +300,13 @@ onMounted(() => {
setTimeout(() => { setTimeout(() => {
winWidth.value = window.outerWidth; winWidth.value = window.outerWidth;
}, 100); }, 100);
} };
loadDevice(); loadDevice();
loadInfo(); loadInfo();
window.indexTimer = window.setInterval(() => { window.indexTimer = window.setInterval(() => {
loadDevice(); loadDevice();
loadInfo(); loadInfo();
}, 3000); }, 3000);
}); });
</script> </script>
@ -420,7 +443,7 @@ onMounted(() => {
position: relative; position: relative;
&.is-v2 { &.is-v2 {
background-color: #6FADF5; background-color: #6fadf5;
.el-card__body { .el-card__body {
display: flex; display: flex;
@ -442,7 +465,7 @@ onMounted(() => {
} }
.div-num { .div-num {
color: #816CB2; color: #816cb2;
} }
} }
} }
@ -462,7 +485,6 @@ onMounted(() => {
* { * {
fill: #3399ff; fill: #3399ff;
;
} }
} }
} }
@ -512,7 +534,6 @@ onMounted(() => {
top: 0px; top: 0px;
font-size: 12px; font-size: 12px;
} }
} }
} }
@ -530,7 +551,7 @@ onMounted(() => {
.dev-item { .dev-item {
.el-card { .el-card {
background: #EEF7FE; background: #eef7fe;
padding: 8px; padding: 8px;
.el-card__header { .el-card__header {
@ -621,7 +642,6 @@ onMounted(() => {
} }
} }
} }
} }
} }
} }
@ -630,10 +650,21 @@ onMounted(() => {
.img-loading { .img-loading {
position: absolute; position: absolute;
width: 100px; width: 70px;
height: 100px; 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 { .proc-card {
margin-top: 20px; margin-top: 20px;
padding: 8px; padding: 8px;
@ -644,16 +675,17 @@ onMounted(() => {
} }
.el-card__body { .el-card__body {
background: #EEF7FE; background: #eef7fe;
border-radius: 8px; border-radius: 8px;
height: 300px; height: 300px;
} }
&.server-status { &.server-status {
background: #EEF7FE; background: #eef7fe;
padding: 8px; padding: 8px;
.el-card__header {} .el-card__header {
}
.el-card__body { .el-card__body {
background: #fff; background: #fff;
@ -674,16 +706,15 @@ html.dark {
} }
.div-num { .div-num {
color: #aaa color: #aaa;
} }
} }
} }
.top-row2 { .top-row2 {
.dev-item { .dev-item {
.el-card { .el-card {
background: #2B3553; background: #2b3553;
.dev-title { .dev-title {
svg * { svg * {
@ -692,13 +723,12 @@ html.dark {
} }
.el-card__body { .el-card__body {
background: #2B3553; background: #2b3553;
box-shadow: none; box-shadow: none;
color: #aaa; color: #aaa;
} }
} }
} }
} }
.right-panel { .right-panel {
@ -721,7 +751,6 @@ html.dark {
} }
} }
} }
} }
.proc-card { .proc-card {
@ -738,7 +767,7 @@ html.dark {
color: #aaa; color: #aaa;
.el-badge__content--danger { .el-badge__content--danger {
background: #6F89A6; background: #6f89a6;
width: 24px; width: 24px;
height: 24px; height: 24px;
text-align: center; text-align: center;
@ -749,7 +778,7 @@ html.dark {
} }
.proc-card.server-status { .proc-card.server-status {
background: #242B43; background: #242b43;
.el-card__header { .el-card__header {
.row2-top { .row2-top {

256
src/views/dashboard/index2.vue
View File

@ -8,7 +8,8 @@
<div class="top-row"> <div class="top-row">
<div class="div-title">{{ it.title }}</div> <div class="div-title">{{ it.title }}</div>
<div class="div-num"> <div class="div-num">
<span style="color:dodgerblue;">{{ it.ucnt }} </span>/ <span style="font-size:14px;">{{ it.count }}</span> <span style="color:dodgerblue;">{{ it.ucnt }}</span>/
<span style="font-size:14px;">{{ it.count }}</span>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -25,27 +26,25 @@
</template> </template>
<el-scrollbar max-height="504px"> <el-scrollbar max-height="504px">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="isSmallScreen ? 8 : 6" v-for="it in devInfos" :key="it.id" class="dev-item" <el-col :span="isSmallScreen ? 8 : 6" v-for="it in devInfos" :key="it.id" class="dev-item" style="margin-bottom: 20px;">
style="margin-bottom: 20px;">
<el-card shadow="hover"> <el-card shadow="hover">
<template #header> <template #header>
<div class="dev-title">{{ it.name }} <div class="dev-title">
{{ it.name }}
<svg-icon icon-class="enlarge" color="#666" /> <svg-icon icon-class="enlarge" color="#666" />
</div> </div>
</template> </template>
<div class="dev-row2"> <div class="dev-row2">
<div> <div>
任务类型:<span>{{ it.modelName }}</span> 任务类型:
<span>{{ it.modelName }}</span>
</div> </div>
</div> </div>
<div class="dev-row3"> <div class="dev-row3">
<div class="device-state"> <div class="device-state">
<img :src="'images/loading-icon.gif'" v-if="it.state == 'infer'" class="img-loading"> <img :src="'images/run_circle.png'" v-if="it.state == 'infer'" class="img-loading" />
<img style="position: relative;top: -10px;left:-10px;" <img style="position: relative;top: -10px;left:-10px;" :src="'images/state/' + it.state + '.png'" />
: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
style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">
{{ getState(it.state) }}</div>
</div> </div>
<div class="dev-chart"> <div class="dev-chart">
<div class="chart-item-title"> <div class="chart-item-title">
@ -71,7 +70,6 @@
<div class="chart-line"> <div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.cpu + '%'"></div> <div class="chart-line-inline" :style="'width:' + it.cpu + '%'"></div>
</div> </div>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -89,7 +87,7 @@
<ModelFlow /> <ModelFlow />
</el-card> </el-card>
</div> </div>
<div style="" class="right-panel"> <div style class="right-panel">
<el-card shadow="never" class="top-row2 notice-card"> <el-card shadow="never" class="top-row2 notice-card">
<template #header> <template #header>
<div class="row2-top"> <div class="row2-top">
@ -115,35 +113,149 @@
</template> </template>
<script setup> <script setup>
import { reactive } from 'vue' import { reactive } from "vue";
import ModelFlow from './components/ModelFlow2.vue' import ModelFlow from "./components/ModelFlow2.vue";
import IndexNotice from './components/IndexNotice.vue' import IndexNotice from "./components/IndexNotice.vue";
import ServiceStatus from './components/ServiceStatus.vue' import ServiceStatus from "./components/ServiceStatus.vue";
import DeviceAPI from "@/api/device"; import DeviceAPI from "@/api/device";
let svTemp = ref(55.5) let svTemp = ref(55.5);
let rd = () => { return +("" + Math.random()).substring(3, 6) }; let rd = () => {
let rd2 = () => { return +("" + Math.random()).substring(3, 4) }; return +("" + Math.random()).substring(3, 6);
let rd3 = () => { return +("" + Math.random()).substring(3, 5) }; };
let rd2 = () => {
return +("" + Math.random()).substring(3, 4);
};
let rd3 = () => {
return +("" + Math.random()).substring(3, 5);
};
let topInfos = reactive([ 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: "模型总数",
{ title: '数据集总数', count: rd(), ucnt: rd2(), clsName: 'c1', icon: "images/nav/nav3.png" }, count: rd(),
{ title: '评估报告总数', count: rd(), ucnt: rd2(), clsName: 'c1', icon: "images/nav/nav4.png" }, ucnt: rd2(),
{ title: '互联总数', count: rd(), ucnt: rd2(), clsName: 'c1', icon: "images/nav/nav5.png" }, clsName: "c1",
{ title: '总访问量', count: rd(), ucnt: rd2(), clsName: 'c1', icon: "images/nav/nav1.png" }, 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([ 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: 1001,
{ id: 1003, name: 'CPU-SW-02', netType: 'network001', modelName: 'N/A', state: 'idle', temperature: '37', memory: rd3(), cpu: rd3(), }, name: "NPU-TC-01",
{ id: 1004, name: 'CPU-SW-01', netType: 'network001', modelName: 'pagerank_01', state: 'infer', temperature: '34', memory: rd3(), cpu: rd3(), }, netType: "network001",
{ id: 1005, name: 'FPGA-FD-01', netType: 'network001', modelName: 'Obj_detect_01', state: 'unregist', temperature: '42', memory: rd3(), cpu: rd3(), }, modelName: "N/A",
{ id: 1006, name: 'GPU-MR-01', netType: 'network001', modelName: 'llm_01', state: 'download', temperature: '40', memory: rd3(), cpu: rd3(), }, state: "offline",
{ id: 1007, name: 'FPGA-FD-02', netType: 'network001', modelName: 'Obj_detect_01', state: 'train', temperature: '39', memory: rd3(), cpu: rd3(), }, temperature: "31",
{ id: 1008, name: 'CPU-SW-03', netType: 'network001', modelName: 'pagerank_01', state: 'upgrade', temperature: '38', memory: rd3(), cpu: rd3(), }, memory: rd3(),
]) cpu: rd3(),
const winWidth = ref(0) },
{
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(() => { const isSmallScreen = computed(() => {
return winWidth.value < 1440; return winWidth.value < 1440;
}); });
@ -171,7 +283,7 @@ const getState = (e) => {
} }
return "升级中"; return "升级中";
} };
onUnmounted(() => { onUnmounted(() => {
if (window.indexTimer2) { if (window.indexTimer2) {
window.clearInterval(window.indexTimer2); window.clearInterval(window.indexTimer2);
@ -183,12 +295,10 @@ onMounted(() => {
setTimeout(() => { setTimeout(() => {
winWidth.value = window.outerWidth; winWidth.value = window.outerWidth;
}, 100); }, 100);
} };
DeviceAPI.getStatus().then(d => { DeviceAPI.getStatus().then((d) => {});
});
window.indexTimer2 = window.setInterval(() => { window.indexTimer2 = window.setInterval(() => {
DeviceAPI.getStatus() DeviceAPI.getStatus();
}, 3000); }, 3000);
}); });
</script> </script>
@ -335,7 +445,6 @@ onMounted(() => {
* { * {
fill: #3399ff; fill: #3399ff;
;
} }
} }
} }
@ -385,7 +494,6 @@ onMounted(() => {
top: 0px; top: 0px;
font-size: 12px; font-size: 12px;
} }
} }
} }
@ -403,7 +511,7 @@ onMounted(() => {
.dev-item { .dev-item {
.el-card { .el-card {
background: #EEF7FE; background: #eef7fe;
padding: 8px; padding: 8px;
.el-card__header { .el-card__header {
@ -490,7 +598,6 @@ onMounted(() => {
} }
} }
} }
} }
} }
} }
@ -499,8 +606,52 @@ onMounted(() => {
.img-loading { .img-loading {
position: absolute; position: absolute;
width: 100px; width: 70px;
height: 100px; 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 { .proc-card {
@ -513,16 +664,17 @@ onMounted(() => {
} }
.el-card__body { .el-card__body {
background: #EEF7FE; background: #eef7fe;
border-radius: 8px; border-radius: 8px;
height: 300px; height: 300px;
} }
&.server-status { &.server-status {
background: #EEF7FE; background: #eef7fe;
padding: 8px; padding: 8px;
.el-card__header {} .el-card__header {
}
.el-card__body { .el-card__body {
background: #fff; background: #fff;

472
src/views/simulationEvaluation/reportDesc.vue
View File

@ -4,16 +4,10 @@
<div class="report-name">{{ info.report.report_name }}</div> <div class="report-name">{{ info.report.report_name }}</div>
<div class="report-info"> <div class="report-info">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">报告生成时间:{{ info.report.create_time }}</el-col>
报告生成时间:{{ info.report.create_time }} <el-col :span="12" style="text-align: right;" v-if="info.report.user_name">报告创建人:{{ info.report.user_name }}</el-col>
</el-col>
<el-col :span="12" style="text-align: right;" v-if="info.report.user_name">
报告创建人:{{ info.report.user_name }}
</el-col>
</el-row> </el-row>
<div v-if="info.report.report_desc"> <div v-if="info.report.report_desc">{{ info.report.report_desc }}</div>
{{ info.report.report_desc }}
</div>
</div> </div>
<div class="div-line"></div> <div class="div-line"></div>
@ -54,22 +48,16 @@
<el-table-column label="Macro F1" align="left" prop="macro_f1" /> <el-table-column label="Macro F1" align="left" prop="macro_f1" />
<el-table-column label="加权F1-Scroe" align="left" prop="weight_f1" /> <el-table-column label="加权F1-Scroe" align="left" prop="weight_f1" />
<el-table-column label="平均推理时间" align="left" prop="inference_time"> <el-table-column label="平均推理时间" align="left" prop="inference_time">
<template #default="scope"> <template #default="scope">{{ scope.row.inference_time }} ms</template>
{{ scope.row.inference_time }} ms
</template>
</el-table-column> </el-table-column>
<el-table-column label="系统延迟时间" align="left" prop="system_delay"> <el-table-column label="系统延迟时间" align="left" prop="system_delay">
<template #default="scope"> <template #default="scope">{{ scope.row.system_delay }} ms</template>
{{ scope.row.system_delay }} ms
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="print-page" v-if="false"></div> <div class="print-page" v-if="false"></div>
<el-row class="report-chart1" style="margin-top:20px;" :key="info.elPrint" v-if="false" <el-row class="report-chart1" style="margin-top:20px;" :key="info.elPrint" v-if="false" :style="info.isPrint ? 'width:18cm;' : ''">
:style="info.isPrint ? 'width:18cm;' : ''">
<el-col :span="info.isPrint || it.classes.length > 20 ? 24 : 24"> <el-col :span="info.isPrint || it.classes.length > 20 ? 24 : 24">
<charts :id="'reportChart2-' + idx" width="100%" :height="calcChartHeight(it)" <charts :id="'reportChart2-' + idx" width="100%" :height="calcChartHeight(it)" :render="opt => renderChart1(it, 'rp')"></charts>
:render="opt => renderChart1(it, 'rp')"></charts>
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
@ -82,13 +70,16 @@
<el-table-column label="FM(打断次数)" align="left" prop="fm" /> <el-table-column label="FM(打断次数)" align="left" prop="fm" />
</el-table> </el-table>
<div class="info-thresholds" style="margin-top: 10px;line-height: 24px;"> <div class="info-thresholds" style="margin-top: 10px;line-height: 24px;">
<div> <span>MOTA（跟踪准确度）</span> <div>
<span>MOTA（跟踪准确度）</span>
<span>{{ it.mota }}</span> <span>{{ it.mota }}</span>
</div> </div>
<div> <span>平均推理时间:</span> <div>
<span>平均推理时间:</span>
<span>{{ it.inference_time }}ms</span> <span>{{ it.inference_time }}ms</span>
</div> </div>
<div><span>系统延迟时间:</span> <div>
<span>系统延迟时间:</span>
<span>{{ it.system_delay }}ms</span> <span>{{ it.system_delay }}ms</span>
</div> </div>
</div> </div>
@ -107,16 +98,15 @@
<el-table-column label="Macro F1" align="left" prop="macro_f1" /> <el-table-column label="Macro F1" align="left" prop="macro_f1" />
<el-table-column label="加权F1-Score" align="left" prop="weight_f1" /> <el-table-column label="加权F1-Score" align="left" prop="weight_f1" />
<el-table-column label="mAP" align="left" prop="map" /> <el-table-column label="mAP" align="left" prop="map" />
<el-table-column label="平均推理时间" align="left" prop="inference_time" /> <el-table-column label="平均推理时间" align="left" prop="inference_time">
<template #default="scope">{{ scope.row.inference_time }} ms</template>
</el-table-column>
<el-table-column label="mAP变化率" align="left"> <el-table-column label="mAP变化率" align="left">
<template #default="scope"> <template #default="scope">{{ scope.$index == 0 ? '----' : info.robustnessMapDecrease + '%' }}</template>
{{ scope.$index == 0 ? '----' : info.robustnessMapDecrease + '%' }}
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div style="margin-top:20px;" :key="info.chartKey"> <div style="margin-top:20px;" :key="info.chartKey">
<charts :key="info.chartKey" id="reportChart3-robustness" width="100%" height="400px" :render="renderChar3"> <charts :key="info.chartKey" id="reportChart3-robustness" width="100%" height="400px" :render="renderChar3"></charts>
</charts>
</div> </div>
</template> </template>
<template v-if="info.horizontal_comparison && info.horizontal_comparison.length > 0"> <template v-if="info.horizontal_comparison && info.horizontal_comparison.length > 0">
@ -130,17 +120,18 @@
<el-table-column label="Macro F1" align="left" prop="macro_f1" /> <el-table-column label="Macro F1" align="left" prop="macro_f1" />
<el-table-column label="加权F1-Score" align="left" prop="weight_f1" /> <el-table-column label="加权F1-Score" align="left" prop="weight_f1" />
<el-table-column label="mAP" align="left" prop="mAP" /> <el-table-column label="mAP" align="left" prop="mAP" />
<el-table-column label="平均推理时间" align="left" prop="inference_time" /> <el-table-column label="平均推理时间" align="left" prop="inference_time">
<el-table-column label="系统延迟时间" align="left" prop="system_delay" /> <template #default="scope">{{ scope.row.inference_time }} ms</template>
</el-table-column>
<el-table-column label="系统延迟时间" align="left" prop="system_delay">
<template #default="scope">{{ scope.row.system_delay }} ms</template>
</el-table-column>
<el-table-column label="mAP变化率" align="left"> <el-table-column label="mAP变化率" align="left">
<template #default="scope"> <template #default="scope">{{ scope.row.map_ratio + "%" }}</template>
{{ scope.row.map_ratio + "%" }}
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div style="margin-top:20px;"> <div style="margin-top:20px;">
<charts id="reportChart3-comparison" width="100%" height="400px" :render="renderChar4"> <charts id="reportChart3-comparison" width="100%" height="400px" :render="renderChar4"></charts>
</charts>
</div> </div>
</template> </template>
</template> </template>
@ -154,8 +145,12 @@
<el-table-column label="ML（丢失轨迹）" align="left" prop="ml" /> <el-table-column label="ML（丢失轨迹）" align="left" prop="ml" />
<el-table-column label="FM（打断次数）" align="left" prop="fm" /> <el-table-column label="FM（打断次数）" align="left" prop="fm" />
<el-table-column label="MOTA" align="left" prop="mota" /> <el-table-column label="MOTA" align="left" prop="mota" />
<el-table-column label="平均推理时间" align="left" prop="inference_time" /> <el-table-column label="平均推理时间" align="left" prop="inference_time">
<el-table-column label="系统延迟时间" align="left" prop="system_delay" /> <template #default="scope">{{ scope.row.inference_time }} ms</template>
</el-table-column>
<el-table-column label="系统延迟时间" align="left" prop="system_delay">
<template #default="scope">{{ scope.row.system_delay }} ms</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
@ -172,14 +167,11 @@
<el-table-column label="FM（打断次数）" align="left" prop="fm" /> <el-table-column label="FM（打断次数）" align="left" prop="fm" />
<el-table-column label="MOTA" align="left" prop="mota" /> <el-table-column label="MOTA" align="left" prop="mota" />
<el-table-column label="mAP变化率" align="left"> <el-table-column label="mAP变化率" align="left">
<template #default="scope"> <template #default="scope">{{ scope.$index == 0 ? '----' : info.robustnessMapDecrease + '%' }}</template>
{{ scope.$index == 0 ? '----' : info.robustnessMapDecrease + '%' }}
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div style="margin-top:20px;"> <div style="margin-top:20px;">
<charts id="reportChart3-robustness" width="100%" height="400px" :render="renderChar3"> <charts id="reportChart3-robustness" width="100%" height="400px" :render="renderChar3"></charts>
</charts>
</div> </div>
</template> </template>
@ -195,20 +187,20 @@
<el-table-column label="ML（丢失轨迹）" align="left" prop="ml" /> <el-table-column label="ML（丢失轨迹）" align="left" prop="ml" />
<el-table-column label="FM（打断次数）" align="left" prop="fm" /> <el-table-column label="FM（打断次数）" align="left" prop="fm" />
<el-table-column label="MOTA" align="left" prop="mota" /> <el-table-column label="MOTA" align="left" prop="mota" />
<el-table-column label="平均推理时间" align="left" prop="inference_time" /> <el-table-column label="平均推理时间" align="left" prop="inference_time">
<el-table-column label="系统延迟时间" align="left" prop="system_delay" /> <template #default="scope">{{ scope.row.inference_time }} ms</template>
</el-table-column>
<el-table-column label="系统延迟时间" align="left" prop="system_delay">
<template #default="scope">{{ scope.row.system_delay }} ms</template>
</el-table-column>
<el-table-column label="mAP变化率" align="left"> <el-table-column label="mAP变化率" align="left">
<template #default="scope"> <template #default="scope">{{ scope.row.mota_ratio + "%" }}</template>
{{ scope.row.mota_ratio + "%" }}
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div style="margin-top:20px;"> <div style="margin-top:20px;">
<charts id="reportChart3-comparison" width="100%" height="400px" :render="renderChar4"> <charts id="reportChart3-comparison" width="100%" height="400px" :render="renderChar4"></charts>
</charts>
</div> </div>
</template> </template>
</template> </template>
</div> </div>
@ -222,43 +214,47 @@
</template> </template>
<script setup> <script setup>
import { import { useSettingsStore } from "@/store";
useSettingsStore, import ReportApi from "@/api/report";
} from "@/store"; import charts from "./components/charts.vue";
import ReportApi from '@/api/report' import html2canvas from "html2canvas";
import charts from './components/charts.vue'
import html2canvas from 'html2canvas';
import { useDateFormat } from "@vueuse/core"; import { useDateFormat } from "@vueuse/core";
import { ThemeEnum } from "@/enums/ThemeEnum"; import { ThemeEnum } from "@/enums/ThemeEnum";
import eventBus from '@/utils/eventBus.js' import eventBus from "@/utils/eventBus.js";
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
const isDark = ref(settingsStore.theme === ThemeEnum.DARK); const isDark = ref(settingsStore.theme === ThemeEnum.DARK);
const route = useRoute() const route = useRoute();
const router = useRouter(); const router = useRouter();
const info = reactive({ const info = reactive({
report: {}, report: {},
taskList: [], taskList: [],
thresholds: null, thresholds: null,
extra_evaluation_type: '', extra_evaluation_type: "",
tasks: [], tasks: [],
reportType: '', reportType: "",
robustness: [], robustness: [],
robustnessMapDecrease: '', robustnessMapDecrease: "",
horizontal_comparison: [], horizontal_comparison: [],
isPrint: false, isPrint: false,
elPrint: 0, elPrint: 0,
theme: settingsStore.theme, theme: settingsStore.theme,
chartKey: 0, chartKey: 0,
}) });
const loading = ref(false) const loading = ref(false);
const calcChartHeight = it => { const calcChartHeight = (it) => {
let tmp = it.classes.length <= 20 ? '400px' : ((it.classes.length / 10 - 2) * 40 + 400 + 'px'); let tmp =
it.classes.length <= 20
? "400px"
: (it.classes.length / 10 - 2) * 40 + 400 + "px";
if (info.isPrint) { if (info.isPrint) {
tmp = it.classes.length <= 20 ? '400px' : ((it.classes.length / 5 - 2) * 30 + 400 + 'px'); tmp =
it.classes.length <= 20
? "400px"
: (it.classes.length / 5 - 2) * 30 + 400 + "px";
} }
return tmp; return tmp;
} };
const doExport = async () => { const doExport = async () => {
try { try {
let dom = document.querySelector("#print_simulation_report_desc"); let dom = document.querySelector("#print_simulation_report_desc");
@ -266,16 +262,21 @@ const doExport = async () => {
allowTaint: true, allowTaint: true,
useCORS: true, useCORS: true,
}); });
const img = canvas.toDataURL('image/png'); const img = canvas.toDataURL("image/png");
const link = document.createElement('a'); const link = document.createElement("a");
link.href = img; link.href = img;
link.setAttribute('download', info.report.report_name + useDateFormat(new Date(), "YYYYMMDDHHmmss").value + '.png'); link.setAttribute(
"download",
info.report.report_name +
useDateFormat(new Date(), "YYYYMMDDHHmmss").value +
".png"
);
link.click(); link.click();
} catch (e) { } catch (e) {
ElMessage.error("导出图片失败!"); ElMessage.error("导出图片失败!");
console.error("导出图片失败!", e); console.error("导出图片失败!", e);
} }
} };
function goBack() { function goBack() {
router.push({ path: "/simulationEvaluation/reportList" }); router.push({ path: "/simulationEvaluation/reportList" });
} }
@ -302,7 +303,7 @@ const doDelete = () => {
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
}).then(function () { }).then(function () {
ReportApi.deleteReport(id).then(d => { ReportApi.deleteReport(id).then((d) => {
if (d.data.code == 0) { if (d.data.code == 0) {
ElMessage.success("删除成功!"); ElMessage.success("删除成功!");
goBack(); goBack();
@ -310,9 +311,8 @@ const doDelete = () => {
ElMessage.error("删除失败!"); ElMessage.error("删除失败!");
} }
}); });
}); });
} };
//硬件横向对比测试图 //硬件横向对比测试图
function renderChar4() { function renderChar4() {
let datas = info.horizontal_comparison; let datas = info.horizontal_comparison;
@ -338,65 +338,81 @@ function renderChar4() {
if (d.fm > maxFm) { if (d.fm > maxFm) {
maxFm = d.fm; maxFm = d.fm;
} }
if (info.reportType != 'tracking') { if (info.reportType != "tracking") {
seriesData.push({ seriesData.push({
name: idx + 1 + "-" + d.device_name, name: idx + 1 + "-" + d.device_name,
value: [d.micro_f1, d.macro_f1, d.weight_f1, d.mAP, d.inference_time, d.system_delay] value: [
}) d.micro_f1,
d.macro_f1,
d.weight_f1,
d.mAP,
d.inference_time,
d.system_delay,
],
});
} else { } else {
seriesData.push({ seriesData.push({
name: idx + 1 + "-" + d.device_name, name: idx + 1 + "-" + d.device_name,
value: [d.idsw, d.mt, d.ml, d.fm, d.mota, d.inference_time, d.system_delay] value: [
}) d.idsw,
d.mt,
d.ml,
d.fm,
d.mota,
d.inference_time,
d.system_delay,
],
});
} }
}); });
let indicators = [ let indicators = [
{ text: 'Micro F1', max: micro_f1 }, { text: "Micro F1", max: micro_f1 },
{ text: 'Macro F1', max: 1 }, { text: "Macro F1", max: 1 },
{ text: '加权F1-Score', max: 1 }, { text: "加权F1-Score", max: 1 },
{ text: 'mAP', max: 1 }, { text: "mAP", max: 1 },
{ text: '平均推理时间', max: maxTime1 }, { text: "平均推理时间", max: maxTime1 },
{ text: '系统延迟时间', max: maxTime2 } { text: "系统延迟时间", max: maxTime2 },
]; ];
if (info.reportType == 'tracking') { if (info.reportType == "tracking") {
indicators = [ indicators = [
{ text: 'IDSW', max: maxIdsw }, { text: "IDSW", max: maxIdsw },
{ text: 'MT（跟踪轨迹）', max: 1 }, { text: "MT（跟踪轨迹）", max: 1 },
{ text: 'ML（丢失轨迹）', max: 1 }, { text: "ML（丢失轨迹）", max: 1 },
{ text: 'FM（打断次数）', max: maxFm }, { text: "FM（打断次数）", max: maxFm },
{ text: 'MOTA', max: 1 }, { text: "MOTA", max: 1 },
{ text: '平均推理时间', max: maxTime1 }, { text: "平均推理时间", max: maxTime1 },
{ text: '系统延迟时间', max: maxTime2 } { text: "系统延迟时间", max: maxTime2 },
]; ];
} }
let opt = { let opt = {
title: { title: {
text: '硬件横向对比测试图', text: "硬件横向对比测试图",
textStyle: { textStyle: {
color: isDark.value ? "#fff" : "#333" color: isDark.value ? "#fff" : "#333",
} },
}, },
legend: { legend: {
x: 'left', x: "left",
top: 40, top: 40,
orient: 'vertical', orient: "vertical",
data: datas.map((d, idx) => idx + 1 + "-" + d.device_name), data: datas.map((d, idx) => idx + 1 + "-" + d.device_name),
textStyle: { textStyle: {
color: isDark.value ? "#fff" : "#333" color: isDark.value ? "#fff" : "#333",
} },
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
calculable: true, calculable: true,
radar: { radar: {
indicator: indicators, indicator: indicators,
radius: 130 radius: 130,
}, },
series: [{ series: [
type: 'radar', {
type: "radar",
tooltip: { tooltip: {
trigger: 'item' trigger: "item",
}, },
label: { label: {
show: true, show: true,
@ -404,13 +420,14 @@ function renderChar4() {
itemStyle: { itemStyle: {
normal: { normal: {
areaStyle: { areaStyle: {
type: 'default' type: "default",
}
}
}, },
data: seriesData },
}] },
} data: seriesData,
},
],
};
return opt; return opt;
} }
//鲁棒性测试图 //鲁棒性测试图
@ -439,72 +456,77 @@ function renderChar3() {
datas.forEach((d, idx) => { datas.forEach((d, idx) => {
if (info.reportType == "tracking") { if (info.reportType == "tracking") {
seriesData.push({ seriesData.push({
name: idx + 1 + '-' + d.database_name, name: idx + 1 + "-" + d.database_name,
value: [d.idsw, d.mt, d.ml, d.fm, d.mota] value: [d.idsw, d.mt, d.ml, d.fm, d.mota],
}) });
} else { } else {
seriesData.push({ seriesData.push({
name: idx + 1 + '-' + d.database_name, name: idx + 1 + "-" + d.database_name,
value: [d.micro_f1, d.macro_f1, d.weight_f1, d.map, d.inference_time] value: [d.micro_f1, d.macro_f1, d.weight_f1, d.map, d.inference_time],
}) });
} }
}); });
let indicators = [ let indicators = [
{ text: 'Micro F1', max: micro_f1 }, { text: "Micro F1", max: micro_f1 },
{ text: 'Macro F1', max: 1 }, { text: "Macro F1", max: 1 },
{ text: '加权F1-Score', max: 1 }, { text: "加权F1-Score", max: 1 },
{ text: 'mAP', max: 1 }, { text: "mAP", max: 1 },
{ text: '平均推理时间', max: maxTime } { text: "平均推理时间", max: maxTime },
]; ];
if (info.reportType == "tracking") { if (info.reportType == "tracking") {
indicators = [ indicators = [
{ text: 'IDSW', max: maxIdsw }, { text: "IDSW", max: maxIdsw },
{ text: 'MT（跟踪轨迹）', max: 1 }, { text: "MT（跟踪轨迹）", max: 1 },
{ text: 'ML（丢失轨迹）', max: 1 }, { text: "ML（丢失轨迹）", max: 1 },
{ text: 'FM（打断次数）', max: maxFm }, { text: "FM（打断次数）", max: maxFm },
{ text: 'MOTA', max: 1 } { text: "MOTA", max: 1 },
]; ];
} }
let legendDatas = datas.map((d, idx) => idx + 1 + '-' + d.database_name); let legendDatas = datas.map((d, idx) => idx + 1 + "-" + d.database_name);
if (info.reportType == "tracking") { if (info.reportType == "tracking") {
legendDatas = datas.map((d, idx) => idx + 1 + '-' + d.database_name); legendDatas = datas.map((d, idx) => idx + 1 + "-" + d.database_name);
} }
let toolTipFun = (p) => { let toolTipFun = (p) => {
let val = p.value; let val = p.value;
if (info.reportType == "tracking") { if (info.reportType == "tracking") {
return `<b>${p.name}<b/><br/>IDSW:${maxIdsw - val[0]}<br>MT（跟踪轨迹）:${val[1]}<br/>ML（丢失轨迹）:${val[2]}<br/>FM（打断次数）:${maxFm - val[3]}<br/>MOTA:${val[4]}` return `<b>${p.name}<b/><br/>IDSW:${maxIdsw - val[0]}<br>MT（跟踪轨迹）:${
val[1]
}<br/>ML（丢失轨迹）:${val[2]}<br/>FM（打断次数）:${
maxFm - val[3]
}<br/>MOTA:${val[4]}`;
} else { } else {
return `${p.name}<br/>` return `${p.name}<br/>`;
}
} }
};
let opt = { let opt = {
title: { title: {
text: '推理结果比对图', text: "推理结果比对图",
textStyle: { textStyle: {
color: isDark.value ? "#fff" : "#333" color: isDark.value ? "#fff" : "#333",
} },
}, },
legend: { legend: {
x: 'left', x: "left",
top: 40, top: 40,
orient: 'vertical', orient: "vertical",
data: legendDatas, data: legendDatas,
textStyle: { textStyle: {
color: isDark.value ? "#fff" : "#333" color: isDark.value ? "#fff" : "#333",
} },
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
calculable: true, calculable: true,
radar: { radar: {
indicator: indicators, indicator: indicators,
radius: 130 radius: 130,
}, },
series: [{ series: [
type: 'radar', {
type: "radar",
tooltip: { tooltip: {
trigger: 'item' trigger: "item",
}, },
label: { label: {
show: true, show: true,
@ -512,57 +534,65 @@ function renderChar3() {
itemStyle: { itemStyle: {
normal: { normal: {
areaStyle: { areaStyle: {
type: 'default' type: "default",
}
}
}, },
data: seriesData },
}] },
} data: seriesData,
},
],
};
return opt; return opt;
} }
function renderChart1(data, type) { function renderChart1(data, type) {
let chartInfo = data.chartsInfo let chartInfo = data.chartsInfo;
let gridTop = info.isPrint ? 20 * (data.classes.length / 5) : 20 * (data.classes.length / 10); let gridTop = info.isPrint
? 20 * (data.classes.length / 5)
: 20 * (data.classes.length / 10);
let opt = { let opt = {
legend: { legend: {
left: '10%', right: '20%', left: "10%",
right: "20%",
data: chartInfo.names, data: chartInfo.names,
textStyle: { textStyle: {
color: isDark.value ? "#fff" : "#333" color: isDark.value ? "#fff" : "#333",
}
}, },
grid: { top: gridTop, }, },
xAxis: [{ grid: { top: gridTop },
type: 'category', // 还有其他的type，可以去官网喵两眼哦 xAxis: [
{
type: "category", // 还有其他的type，可以去官网喵两眼哦
data: chartInfo.labels, // x轴数据 data: chartInfo.labels, // x轴数据
textStyle: { textStyle: {
color: isDark.value ? "#fff" : "#333" color: isDark.value ? "#fff" : "#333",
}
}],
yAxis: [{
type: 'value',
name: type == 'roc' ? "ROC曲线" : "RP曲线",
textStyle: {
color: isDark.value ? "#fff" : "#333"
}
}],
tooltip: {
trigger: 'axis'
}, },
series: (type == "roc" ? chartInfo.rocs : chartInfo.rps).map(it => { },
],
yAxis: [
{
type: "value",
name: type == "roc" ? "ROC曲线" : "RP曲线",
textStyle: {
color: isDark.value ? "#fff" : "#333",
},
},
],
tooltip: {
trigger: "axis",
},
series: (type == "roc" ? chartInfo.rocs : chartInfo.rps).map((it) => {
return { return {
name: it.name, name: it.name,
type: it.type, type: it.type,
data: it.data, data: it.data,
label: { label: {
show: false, show: false,
position: 'top' position: "top",
} },
} };
}) }),
} };
return opt; return opt;
} }
function initTaskChart(it) { function initTaskChart(it) {
@ -571,66 +601,90 @@ function initTaskChart(it) {
let names = []; let names = [];
let labels = []; let labels = [];
let classes = it.classes || []; let classes = it.classes || [];
labels = classes.length > 0 ? classes[0].pr.map(it => it[0]) : []; labels = classes.length > 0 ? classes[0].pr.map((it) => it[0]) : [];
classes.forEach(d => { classes.forEach((d) => {
rocs.push({ rocs.push({
name: d.class_name, data: d.roc, type: 'line' name: d.class_name,
data: d.roc,
type: "line",
}); });
rps.push({ rps.push({
name: d.class_name, data: d.pr.map(it => it[1]), type: 'line' name: d.class_name,
data: d.pr.map((it) => it[1]),
type: "line",
}); });
names.push(d.class_name) names.push(d.class_name);
}); });
return { return {
rocs, rps, names, labels rocs,
} rps,
names,
labels,
};
} }
onUnmounted(() => { onUnmounted(() => {
eventBus.off("changeTheme"); eventBus.off("changeTheme");
}); });
function loadData() { function loadData() {
eventBus.on("changeTheme", d => { eventBus.on("changeTheme", (d) => {
info.theme = d; info.theme = d;
info.chartKey++; info.chartKey++;
isDark.value = d == ThemeEnum.DARK; isDark.value = d == ThemeEnum.DARK;
}); });
let id = route.query.id; let id = route.query.id;
ReportApi.getReport(id).then(d => { ReportApi.getReport(id).then((d) => {
info.report = d.data.data || {}; info.report = d.data.data || {};
info.taskList = info.report.task_list || [] info.taskList = info.report.task_list || [];
info.thresholds = info.report.report_parameters?.report_parameters?.thresholds || null info.thresholds =
info.extra_evaluation_type = info.report.report_parameters?.report_parameters?.extra_evaluation_type || ''; info.report.report_parameters?.report_parameters?.thresholds || null;
info.tasks = (info.report.report_data?.tasks || info.report.report_data?.report_data?.tasks || []).map(it => { info.extra_evaluation_type =
it.datas = [{ info.report.report_parameters?.report_parameters?.extra_evaluation_type ||
inference_time: it.inference_time, macro_f1: it.macro_f1, map: it.map, micro_f1: it.micro_f1, "";
system_delay: it.system_delay, task_id: it.task_id, weight_f1: it.weight_f1 info.tasks = (
}]; info.report.report_data?.tasks ||
info.report.report_data?.report_data?.tasks ||
[]
).map((it) => {
it.datas = [
{
inference_time: it.inference_time,
macro_f1: it.macro_f1,
map: it.map,
micro_f1: it.micro_f1,
system_delay: it.system_delay,
task_id: it.task_id,
weight_f1: it.weight_f1,
},
];
it.chartsInfo = initTaskChart(it); it.chartsInfo = initTaskChart(it);
let tmps = info.taskList.filter(task => task.task_id == it.task_id); let tmps = info.taskList.filter((task) => task.task_id == it.task_id);
it.taskName = tmps.length > 0 ? tmps[0].task_name || "" : ""; it.taskName = tmps.length > 0 ? tmps[0].task_name || "" : "";
return it; return it;
}); });
let obj = info.report?.report_data?.robustness?.tasks || null let obj = info.report?.report_data?.robustness?.tasks || null;
info.robustness = (obj ? obj : []); info.robustness = obj ? obj : [];
info.robustnessMapDecrease = info.report?.report_data?.robustness?.map_decrease; info.robustnessMapDecrease =
info.horizontal_comparison = info.report?.report_data?.horizontal_comparison info.report?.report_data?.robustness?.map_decrease;
info.horizontal_comparison =
info.report?.report_data?.horizontal_comparison;
if (info.report.report_data.Tasks) { if (info.report.report_data.Tasks) {
info.reportType = "tracking"; info.reportType = "tracking";
info.tasks = (info.report?.report_data?.Tasks || []).map(it => { info.tasks = (info.report?.report_data?.Tasks || []).map((it) => {
let tasks = info.taskList.filter(item => item.task_id == it.task_id); let tasks = info.taskList.filter((item) => item.task_id == it.task_id);
let task = tasks.length > 0 ? tasks[0] : {}; let task = tasks.length > 0 ? tasks[0] : {};
it.task_name = task.task_name || '' it.task_name = task.task_name || "";
it.task = task; it.task = task;
return it; return it;
}); });
obj = info.report?.report_data?.Robustness?.Tasks || null obj = info.report?.report_data?.Robustness?.Tasks || null;
info.robustness = (obj ? obj : []); info.robustness = obj ? obj : [];
info.robustnessMapDecrease = info.report?.report_data?.Robustness?.mota_decrease; info.robustnessMapDecrease =
info.horizontal_comparison = info.report?.report_data?.HorizontalComparison info.report?.report_data?.Robustness?.mota_decrease;
info.horizontal_comparison =
info.report?.report_data?.HorizontalComparison;
} else { } else {
info.reportType = "other" info.reportType = "other";
} }
}); });
} }
@ -638,7 +692,6 @@ onMounted(loadData);
</script> </script>
<style lang='scss'> <style lang='scss'>
.simulation-report-desc { .simulation-report-desc {
font-size: 12px; font-size: 12px;
#print_simulation_report_desc { #print_simulation_report_desc {
@ -715,7 +768,6 @@ html.report-print {
height: unset !important; height: unset !important;
.simulation-report-desc { .simulation-report-desc {
.el-scrollbar__view { .el-scrollbar__view {
vertical-align: unset !important; vertical-align: unset !important;
} }
@ -756,7 +808,7 @@ html.report-print {
html.dark { html.dark {
.simulation-report-desc { .simulation-report-desc {
#print_simulation_report_desc { #print_simulation_report_desc {
background: #191E32; background: #191e32;
} }
} }
} }