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

修改交大AI

main
haha 2025-04-02 23:48:28 +08:00
parent d0a6b21456
commit f5b2049ba1
7 changed files with 202 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/loading-icon.gif 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 289 KiB

35
src/views/dashboard/components/ModelFlow.vue
View File

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

31
src/views/dashboard/components/ModelFlow2.vue
View File

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

56
src/views/dashboard/components/ServiceStatus.vue
View File

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

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

@ -74,7 +74,7 @@
</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
@ -119,7 +119,7 @@
<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 style="color:#333;font-weight: bold;font-size:15px;">模型评估流程</div>
</div>
</template>
<ModelFlow2 v-if="isV2" />
@ -211,41 +211,64 @@ const loadDevice = () => {
const loadInfo = () => {
InfoApi.statistics().then(res => {
let d = res.data
let isDark=settingsStore.theme === ThemeEnum.DARK
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_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_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" },
{
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_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_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) {
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_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_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_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_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");
if (window.indexTimer) {
window.clearInterval(window.indexTimer);
}
});
onMounted(() => {
eventBus.on("changeTheme",d=>{
eventBus.on("changeTheme", d => {
loadInfo();
});
winWidth.value = window.outerWidth;
@ -256,6 +279,10 @@ onMounted(() => {
}
loadDevice();
loadInfo();
window.indexTimer = window.setInterval(() => {
loadDevice();
loadInfo();
}, 3000);
});
</script>
@ -601,6 +628,12 @@ onMounted(() => {
}
}
.img-loading {
position: absolute;
width: 100px;
height: 100px;
}
.proc-card {
margin-top: 20px;
padding: 8px;
@ -690,18 +723,21 @@ html.dark {
}
}
.proc-card{
.el-card__header{
.row2-top{
div{
color:#fff !important;
.proc-card {
.el-card__header {
.row2-top {
div {
color: #fff !important;
}
}
}
.el-card__body{
.el-card__body {
background: transparent;
color:#aaa;
.el-badge__content--danger{
color: #aaa;
.el-badge__content--danger {
background: #6F89A6;
width: 24px;
height: 24px;
@ -711,12 +747,14 @@ html.dark {
}
}
}
.proc-card.server-status{
.proc-card.server-status {
background: #242B43;
.el-card__header{
.row2-top{
div{
color:#fff !important;
.el-card__header {
.row2-top {
div {
color: #fff !important;
}
}
}

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

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

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

@ -53,8 +53,16 @@
<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="加权F1-Scroe" align="left" prop="weight_f1" />
<el-table-column label="平均推理时间" align="left" prop="inference_time" />
<el-table-column label="系统延迟时间" align="left" prop="system_delay" />
<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="系统延迟时间" align="left" prop="system_delay">
<template #default="scope">
{{ scope.row.system_delay }} ms
</template>
</el-table-column>
</el-table>
<div class="print-page" v-if="false"></div>
<el-row class="report-chart1" style="margin-top:20px;" :key="info.elPrint" v-if="false"
@ -240,8 +248,8 @@ const info = reactive({
horizontal_comparison: [],
isPrint: false,
elPrint: 0,
theme:settingsStore.theme,
chartKey:0,
theme: settingsStore.theme,
chartKey: 0,
})
const loading = ref(false)
const calcChartHeight = it => {
@ -364,8 +372,8 @@ function renderChar4() {
let opt = {
title: {
text: '硬件横向对比测试图',
textStyle:{
color:isDark.value? "#fff":"#333"
textStyle: {
color: isDark.value ? "#fff" : "#333"
}
},
legend: {
@ -373,8 +381,8 @@ function renderChar4() {
top: 40,
orient: 'vertical',
data: datas.map((d, idx) => idx + 1 + "-" + d.device_name),
textStyle:{
color:isDark.value? "#fff":"#333"
textStyle: {
color: isDark.value ? "#fff" : "#333"
}
},
tooltip: {
@ -472,8 +480,8 @@ function renderChar3() {
let opt = {
title: {
text: '推理结果比对图',
textStyle:{
color:isDark.value? "#fff":"#333"
textStyle: {
color: isDark.value ? "#fff" : "#333"
}
},
legend: {
@ -481,8 +489,8 @@ function renderChar3() {
top: 40,
orient: 'vertical',
data: legendDatas,
textStyle:{
color:isDark.value? "#fff":"#333"
textStyle: {
color: isDark.value ? "#fff" : "#333"
}
},
tooltip: {
@ -521,23 +529,23 @@ function renderChart1(data, type) {
legend: {
left: '10%', right: '20%',
data: chartInfo.names,
textStyle:{
color:isDark.value? "#fff":"#333"
textStyle: {
color: isDark.value ? "#fff" : "#333"
}
},
grid: { top: gridTop, },
xAxis: [{
type: 'category', // 还有其他的type，可以去官网喵两眼哦
data: chartInfo.labels, // x轴数据
textStyle:{
color:isDark.value? "#fff":"#333"
textStyle: {
color: isDark.value ? "#fff" : "#333"
}
}],
yAxis: [{
type: 'value',
name: type == 'roc' ? "ROC曲线" : "RP曲线",
textStyle:{
color:isDark.value? "#fff":"#333"
textStyle: {
color: isDark.value ? "#fff" : "#333"
}
}],
tooltip: {
@ -577,14 +585,14 @@ function initTaskChart(it) {
rocs, rps, names, labels
}
}
onUnmounted(()=>{
onUnmounted(() => {
eventBus.off("changeTheme");
});
function loadData() {
eventBus.on("changeTheme",d=>{
info.theme=d;
eventBus.on("changeTheme", d => {
info.theme = d;
info.chartKey++;
isDark.value=d== ThemeEnum.DARK;
isDark.value = d == ThemeEnum.DARK;
});