修改交大AI

main
haha 2025-04-02 23:48:28 +08:00
parent d0a6b21456
commit f5b2049ba1
7 changed files with 202 additions and 106 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 KiB

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="model-flow"> <div class="model-flow">
<el-row class="row-1"> <el-row class="row-1">
<div class="card-item"> <div class="card-item" @click="toUrl('#/modelMgr/uploadModel')">
<div class="title-text">算法上传</div> <div class="title-text">算法上传</div>
<el-badge :value="0" class="item"> <el-badge :value="0" class="item">
<div class="div-img"> <div class="div-img">
@ -11,7 +11,7 @@
</div> </div>
<div class="line line-right"> <div class="line line-right">
</div> </div>
<div class="card-item "> <div class="card-item " @click="toUrl('#/connection/index')">
<div class="title-text">算子互联</div> <div class="title-text">算子互联</div>
<el-badge :value="0" class="item"> <el-badge :value="0" class="item">
<div class="div-img"> <div class="div-img">
@ -24,7 +24,7 @@
<div class="line line-right"> <div class="line line-right">
</div> </div>
<div class="card-item" :class="info.cnt1 > 0 ? 'is-active' : ''"> <div class="card-item" :class="info.cnt1 > 0 ? 'is-active' : ''" @click="toUrl('#/simulationEvaluation/addTask')">
<div class="title-text">编译部署</div> <div class="title-text">编译部署</div>
<el-badge :value="info.cnt1" class="item"> <el-badge :value="info.cnt1" class="item">
<div class="div-img"> <div class="div-img">
@ -34,7 +34,7 @@
</div> </div>
<div class="line line-right"> <div class="line line-right">
</div> </div>
<div class="card-item" :class="info.cnt2 > 0 ? 'is-active' : ''"> <div class="card-item" :class="info.cnt2 > 0 ? 'is-active' : ''" @click="toUrl('#/simulationEvaluation/addTask')">
<div class="title-text">推理评估</div> <div class="title-text">推理评估</div>
<el-badge :value="info.cnt2" class="item"> <el-badge :value="info.cnt2" class="item">
<div class="div-img"> <div class="div-img">
@ -46,7 +46,8 @@
<div class="line line-right"> <div class="line line-right">
</div> </div>
<div class="card-item" :class="info.cnt3 > 0 ? 'is-active' : ''"> <div class="card-item" :class="info.cnt3 > 0 ? 'is-active' : ''"
@click="toUrl('#/simulationEvaluation/reportList')">
<div class="title-text">评估报告</div> <div class="title-text">评估报告</div>
<el-badge :value="info.cnt3" class="item"> <el-badge :value="info.cnt3" class="item">
<div class="div-img"> <div class="div-img">
@ -58,7 +59,7 @@
</el-row> </el-row>
<el-row class="row-3"> <el-row class="row-3">
<div class="card-item line-top"> <div class="card-item line-top" @click="toUrl('#/operatorLibrary/calculate')">
<el-badge :value="0" class="item"> <el-badge :value="0" class="item">
<div class="div-img"> <div class="div-img">
<img class="img-120" src="./flow/szgl.png" /> <img class="img-120" src="./flow/szgl.png" />
@ -73,7 +74,7 @@
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="card-item card-center"> <div class="card-item card-center">
<div class="card-center-item"> <div class="card-center-item" @click="toUrl('#/tester/equipment')">
<el-badge :value="0" class="item"> <el-badge :value="0" class="item">
<div class="div-img"> <div class="div-img">
<img class="img-120" src="./flow/sbgl.png" /> <img class="img-120" src="./flow/sbgl.png" />
@ -81,7 +82,7 @@
</el-badge> </el-badge>
<div class="title-text">设备管理</div> <div class="title-text">设备管理</div>
</div> </div>
<div class="card-center-item"> <div class="card-center-item" @click="toUrl('#/tester/otherTool')">
<el-badge :value="0" class="item"> <el-badge :value="0" class="item">
<div class="div-img"> <div class="div-img">
<img class="img-120" src="./flow/gjgl.png" /> <img class="img-120" src="./flow/gjgl.png" />
@ -91,9 +92,7 @@
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="card-item"></div> <div class="card-item line-top" @click="toUrl('#/dataMgr/datas')">
<div class="line"></div>
<div class="card-item line-top">
<el-badge :value="0" class="item"> <el-badge :value="0" class="item">
<div class="div-img"> <div class="div-img">
<img class="img-120" src="./flow/sjjgl.png" /> <img class="img-120" src="./flow/sjjgl.png" />
@ -102,6 +101,9 @@
<div class="title-text">数据管理</div> <div class="title-text">数据管理</div>
</div> </div>
<div class="line"></div>
<div class="card-item"></div>
</el-row> </el-row>
@ -127,8 +129,19 @@ const loadData = () => {
info.cnt3 = findCnt("model_report"); info.cnt3 = findCnt("model_report");
}); });
} }
function toUrl(url) {
location.href = url;
}
onUnmounted(() => {
if (window.modelFlowTimer) {
clearInterval(window.modelFlowTimer);
}
});
onMounted(() => { onMounted(() => {
loadData(); loadData();
window.modelFlowTimer = setInterval(() => {
loadData();
}, 3000);
}); });
</script> </script>
<style lang='scss'> <style lang='scss'>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="model-flow2" style="margin-left: 40px;"> <div class="model-flow2" style="margin-left: 40px;">
<el-row class="row-1"> <el-row class="row-1">
<div class="card-item" :class="info.cnt1 > 0 ? 'is-active' : ''"> <div class="card-item" :class="info.cnt1 > 0 ? 'is-active' : ''" @click="toUrl('#/simulationEvaluation/addTask')">
<div class="title-text">编译部署</div> <div class="title-text">编译部署</div>
<el-badge :value="info.cnt1" class="item"> <el-badge :value="info.cnt1" class="item">
<div class="div-img"> <div class="div-img">
@ -11,7 +11,7 @@
</div> </div>
<div class="line line-right"> <div class="line line-right">
</div> </div>
<div class="card-item" :class="info.cnt2 > 0 ? 'is-active' : ''"> <div class="card-item" :class="info.cnt2 > 0 ? 'is-active' : ''" @click="toUrl('#/simulationEvaluation/addTask')">
<div class="title-text">推理评估</div> <div class="title-text">推理评估</div>
<el-badge :value="info.cnt2" class="item"> <el-badge :value="info.cnt2" class="item">
<div class="div-img"> <div class="div-img">
@ -23,7 +23,8 @@
<div class="line line-right"> <div class="line line-right">
</div> </div>
<div class="card-item" :class="info.cnt3 > 0 ? 'is-active' : ''"> <div class="card-item" :class="info.cnt3 > 0 ? 'is-active' : ''"
@click="toUrl('#/simulationEvaluation/reportList')">
<div class="title-text">评估报告</div> <div class="title-text">评估报告</div>
<el-badge :value="info.cnt3" class="item"> <el-badge :value="info.cnt3" class="item">
<div class="div-img"> <div class="div-img">
@ -33,9 +34,9 @@
</div> </div>
</el-row> </el-row>
<el-row class="row-3"> <el-row class="row-3">
<div class="card-item card-center"> <div class="card-item card-center">
<div class="card-center-item"> <div class="card-center-item" @click="toUrl('#/tester/equipment')">
<el-badge :value="0" class="item"> <el-badge :value="0" class="item">
<div class="div-img"> <div class="div-img">
<img class="img-120" src="./flow/sbgl.png" /> <img class="img-120" src="./flow/sbgl.png" />
@ -43,7 +44,7 @@
</el-badge> </el-badge>
<div class="title-text">设备管理</div> <div class="title-text">设备管理</div>
</div> </div>
<div class="card-center-item"> <div class="card-center-item" @click="toUrl('#/tester/otherTool')">
<el-badge :value="0" class="item"> <el-badge :value="0" class="item">
<div class="div-img"> <div class="div-img">
<img class="img-120" src="./flow/gjgl.png" /> <img class="img-120" src="./flow/gjgl.png" />
@ -53,9 +54,7 @@
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="card-item"></div> <div class="card-item line-top" @click="toUrl('#/dataMgr/datas')">
<div class="line"></div>
<div class="card-item line-top">
<el-badge :value="0" class="item"> <el-badge :value="0" class="item">
<div class="div-img"> <div class="div-img">
<img class="img-120" src="./flow/sjjgl.png" /> <img class="img-120" src="./flow/sjjgl.png" />
@ -65,6 +64,9 @@
</div> </div>
<div class="line"></div>
<div class="card-item"></div>
</el-row> </el-row>
</div> </div>
@ -77,6 +79,9 @@ let info = reactive({
cnt2: 0, cnt2: 0,
cnt3: 0 cnt3: 0
}) })
function toUrl(url) {
location.href = url;
}
const loadData = () => { const loadData = () => {
LogApi.userRunning().then(d => { LogApi.userRunning().then(d => {
let tmps = d.data?.data?.running_operation_list || []; let tmps = d.data?.data?.running_operation_list || [];
@ -89,8 +94,16 @@ const loadData = () => {
info.cnt3 = findCnt("model_report"); info.cnt3 = findCnt("model_report");
}); });
} }
onUnmounted(() => {
if (window.modelFlow2Timer) {
clearInterval(window.modelFlow2Timer);
}
});
onMounted(() => { onMounted(() => {
loadData(); loadData();
window.modelFlow2Timer = setInterval(() => {
loadData();
}, 3000);
}); });
</script> </script>
<style lang='scss'> <style lang='scss'>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="service-status"> <div class="service-status">
<div class="sv-chart" > <div class="sv-chart">
<div :id="id" :class="className" :style="{ height, width }"> <div :id="id" :class="className" :style="{ height, width }">
</div> </div>
</div> </div>
@ -9,33 +9,34 @@
<div class="chart-bar"> <div class="chart-bar">
<div class="bar-title">内存</div> <div class="bar-title">内存</div>
<div class="chart-line"> <div class="chart-line">
<div class="chart-line-inner" :style="'width:'+serverInfo.memory_usage*100.0/serverInfo.memory_total+'%'"></div> <div class="chart-line-inner"
:style="'width:' + serverInfo.memory_usage * 100.0 / serverInfo.memory_total + '%'"></div>
</div> </div>
<div class="bar-title">{{serverInfo.memory_usage*100.0/serverInfo.memory_total}}%</div> <div class="bar-title">{{ serverInfo.memory_usage * 100.0 / serverInfo.memory_total }}%</div>
</div> </div>
<div class="chart-bar"> <div class="chart-bar">
<div class="bar-title">CPU</div> <div class="bar-title">CPU</div>
<div class="chart-line"> <div class="chart-line">
<div class="chart-line-inner" :style="'width:'+serverInfo.cpu_usage+'%'"></div> <div class="chart-line-inner" :style="'width:' + serverInfo.cpu_usage + '%'"></div>
</div> </div>
<div class="bar-title"> {{serverInfo.cpu_usage}}% </div> <div class="bar-title"> {{ serverInfo.cpu_usage }}% </div>
</div> </div>
<div class="chart-bar"> <div class="chart-bar">
<div class="bar-title">硬盘</div> <div class="bar-title">硬盘</div>
<div class="chart-line"> <div class="chart-line">
<div class="chart-line-inner" :style="'width:'+serverInfo.storage_usage+'%'"></div> <div class="chart-line-inner" :style="'width:' + serverInfo.storage_usage + '%'"></div>
</div> </div>
<div class="bar-title">{{serverInfo.storage_usage}}%</div> <div class="bar-title">{{ serverInfo.storage_usage }}%</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang='ts' setup> <script setup>
import * as echarts from "echarts"; import * as echarts from "echarts";
import LogApi from '@/api/log' import LogApi from '@/api/log'
let tempurature=ref<any>(0); let tempurature = ref(0);
let serverInfo=ref<any>(null); let serverInfo = ref(null);
const props = defineProps({ const props = defineProps({
id: { id: {
type: String, type: String,
@ -54,10 +55,10 @@ const props = defineProps({
type: String, type: String,
default: "200px", default: "200px",
required: true, required: true,
} }
}); });
let options = reactive( { let options = reactive({
grid: { grid: {
left: "20%", left: "20%",
right: "20%", right: "20%",
@ -134,19 +135,24 @@ let options = reactive( {
} }
] ]
}); });
const loadLog=()=>{ const loadLog = () => {
LogApi.serverState().then(d=>{ LogApi.serverState().then(d => {
serverInfo.value=d.data.data serverInfo.value = d.data.data
tempurature.value=serverInfo.value.tempurature/10.0; tempurature.value = serverInfo.value.tempurature / 10.0;
options.series[0].data[0].value=tempurature.value; options.series[0].data[0].value = tempurature.value;
chart.value.setOption(options); chart.value.setOption(options);
}); });
} }
const chart = ref<any>(""); const chart = ref("");
onUnmounted(() => {
if (window.serviceStatusTimer) {
window.clearInterval(window.serviceStatusTimer);
}
});
onMounted(() => { onMounted(() => {
// //
chart.value = markRaw( chart.value = markRaw(
echarts.init(document.getElementById(props.id) as HTMLDivElement) echarts.init(document.getElementById(props.id))
); );
chart.value.setOption(options); chart.value.setOption(options);
@ -155,7 +161,10 @@ onMounted(() => {
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
chart.value.resize(); chart.value.resize();
}); });
loadLog(); loadLog();
window.serviceStatusTimer = setInterval(() => {
loadLog();
}, 3000);
}); });
onActivated(() => { onActivated(() => {
@ -188,7 +197,8 @@ onActivated(() => {
.chart-bars { .chart-bars {
position: relative; position: relative;
text-align: center; text-align: center;
top:-30px; top: -30px;
.chart-bar { .chart-bar {
display: flex; display: flex;
padding: 0px 15%; padding: 0px 15%;

View File

@ -74,7 +74,7 @@
</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 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 <div
@ -119,7 +119,7 @@
<el-card shadow="never" class="proc-card model-proc"> <el-card shadow="never" class="proc-card model-proc">
<template #header> <template #header>
<div class="row2-top"> <div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">模型仿真评估流程</div> <div style="color:#333;font-weight: bold;font-size:15px;">模型评估流程</div>
</div> </div>
</template> </template>
<ModelFlow2 v-if="isV2" /> <ModelFlow2 v-if="isV2" />
@ -211,41 +211,64 @@ const loadDevice = () => {
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', {
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',
{ title: '算子总数', count: d.data.total_operator_count, ucnt: d.data.user_operator_count, clsName: 'c1', icon: isDark ? "images/nav/nav12.png" : "images/nav/nav1.png"
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_operator_count, ucnt: d.data.user_operator_count, clsName: 'c1',
{ title: '评估报告总数', count: d.data.total_connection_count, ucnt: d.data.user_connection_count, clsName: 'c1', icon: isDark ? "images/nav/nav22.png" : "images/nav/nav2.png"
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_dataset_count, ucnt: d.data.user_dataset_count, clsName: 'c1',
{ title: '总访问量', count: d.data.total_visit_count, ucnt: d.data.user_visit_count, clsName: 'c1', icon: isDark ? "images/nav/nav32.png" : "images/nav/nav3.png"
icon: isDark?"images/nav/nav62.png":"images/nav/nav6.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_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', {
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',
{ title: '数据集总数', count: d.data.total_dataset_count, ucnt: d.data.user_dataset_count, clsName: 'c1', icon: isDark ? "images/nav/nav12.png" : "images/nav/nav1.png"
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_dataset_count, ucnt: d.data.user_dataset_count, clsName: 'c1',
{ title: '总访问量', count: d.data.total_visit_count, ucnt: d.data.user_visit_count, clsName: 'c1', icon: isDark ? "images/nav/nav32.png" : "images/nav/nav3.png"
icon: isDark?"images/nav/nav62.png":"images/nav/nav6.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"
},
]; ];
} }
}) })
} }
onUnmounted(()=>{ onUnmounted(() => {
eventBus.off("changeTheme"); eventBus.off("changeTheme");
if (window.indexTimer) {
window.clearInterval(window.indexTimer);
}
}); });
onMounted(() => { onMounted(() => {
eventBus.on("changeTheme",d=>{ eventBus.on("changeTheme", d => {
loadInfo(); loadInfo();
}); });
winWidth.value = window.outerWidth; winWidth.value = window.outerWidth;
@ -256,6 +279,10 @@ onMounted(() => {
} }
loadDevice(); loadDevice();
loadInfo(); loadInfo();
window.indexTimer = window.setInterval(() => {
loadDevice();
loadInfo();
}, 3000);
}); });
</script> </script>
@ -601,6 +628,12 @@ onMounted(() => {
} }
} }
.img-loading {
position: absolute;
width: 100px;
height: 100px;
}
.proc-card { .proc-card {
margin-top: 20px; margin-top: 20px;
padding: 8px; padding: 8px;
@ -690,18 +723,21 @@ html.dark {
} }
} }
.proc-card{
.el-card__header{ .proc-card {
.row2-top{ .el-card__header {
div{ .row2-top {
color:#fff !important; div {
color: #fff !important;
} }
} }
} }
.el-card__body{
.el-card__body {
background: transparent; background: transparent;
color:#aaa; color: #aaa;
.el-badge__content--danger{
.el-badge__content--danger {
background: #6F89A6; background: #6F89A6;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -711,12 +747,14 @@ html.dark {
} }
} }
} }
.proc-card.server-status{
.proc-card.server-status {
background: #242B43; background: #242B43;
.el-card__header{
.row2-top{ .el-card__header {
div{ .row2-top {
color:#fff !important; div {
color: #fff !important;
} }
} }
} }

View File

@ -40,7 +40,7 @@
</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 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 <div
@ -114,7 +114,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <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'
@ -147,7 +147,7 @@ const winWidth = ref(0)
const isSmallScreen = computed(() => { const isSmallScreen = computed(() => {
return winWidth.value < 1440; return winWidth.value < 1440;
}); });
const getState = (e: any) => { const getState = (e) => {
if (e == "offline") { if (e == "offline") {
return "离线"; return "离线";
} }
@ -172,6 +172,11 @@ const getState = (e: any) => {
return "升级中"; return "升级中";
} }
onUnmounted(() => {
if (window.indexTimer2) {
window.clearInterval(window.indexTimer2);
}
});
onMounted(() => { onMounted(() => {
winWidth.value = window.outerWidth; winWidth.value = window.outerWidth;
window.onresize = () => { window.onresize = () => {
@ -182,6 +187,9 @@ onMounted(() => {
DeviceAPI.getStatus().then(d => { DeviceAPI.getStatus().then(d => {
}); });
window.indexTimer2 = window.setInterval(() => {
DeviceAPI.getStatus()
}, 3000);
}); });
</script> </script>
@ -489,6 +497,12 @@ onMounted(() => {
} }
} }
.img-loading {
position: absolute;
width: 100px;
height: 100px;
}
.proc-card { .proc-card {
margin-top: 20px; margin-top: 20px;
padding: 8px; padding: 8px;

View File

@ -53,8 +53,16 @@
<el-table-column label="Micro F1" align="left" prop="micro_f1" /> <el-table-column label="Micro F1" align="left" prop="micro_f1" />
<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">
<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 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"
@ -240,8 +248,8 @@ const info = reactive({
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 => {
@ -364,8 +372,8 @@ function renderChar4() {
let opt = { let opt = {
title: { title: {
text: '硬件横向对比测试图', text: '硬件横向对比测试图',
textStyle:{ textStyle: {
color:isDark.value? "#fff":"#333" color: isDark.value ? "#fff" : "#333"
} }
}, },
legend: { legend: {
@ -373,8 +381,8 @@ function renderChar4() {
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: {
@ -472,8 +480,8 @@ function renderChar3() {
let opt = { let opt = {
title: { title: {
text: '推理结果比对图', text: '推理结果比对图',
textStyle:{ textStyle: {
color:isDark.value? "#fff":"#333" color: isDark.value ? "#fff" : "#333"
} }
}, },
legend: { legend: {
@ -481,8 +489,8 @@ function renderChar3() {
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: {
@ -521,23 +529,23 @@ function renderChart1(data, type) {
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, }, grid: { top: gridTop, },
xAxis: [{ xAxis: [{
type: 'category', // type type: 'category', // type
data: chartInfo.labels, // x data: chartInfo.labels, // x
textStyle:{ textStyle: {
color:isDark.value? "#fff":"#333" color: isDark.value ? "#fff" : "#333"
} }
}], }],
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
name: type == 'roc' ? "ROC曲线" : "RP曲线", name: type == 'roc' ? "ROC曲线" : "RP曲线",
textStyle:{ textStyle: {
color:isDark.value? "#fff":"#333" color: isDark.value ? "#fff" : "#333"
} }
}], }],
tooltip: { tooltip: {
@ -577,14 +585,14 @@ function initTaskChart(it) {
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;
}); });