update code

main
haha 2024-07-05 01:08:49 +08:00
parent 0fa455ff4e
commit 707b181c17
12 changed files with 294 additions and 230 deletions

View File

@ -1,3 +1,3 @@
# 代理前缀 # 代理前缀
VITE_APP_BASE_API = '/dev-api' VITE_APP_BASE_API = '/mk/ai/api/'

View File

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

@ -2,7 +2,7 @@ import request from "@/utils/request";
const getStatus=()=>{ const getStatus=()=>{
return request({ return request({
url:'/devices/status', url:'/devices/status/detail',
method:'get' method:'get'
}) })
} }

View File

@ -0,0 +1,11 @@
import request from "@/utils/request";
const statistics=()=>{
return request({
url: "/info/statistics",
method: "get"
});
}
export default {
statistics
}

View File

@ -35,6 +35,9 @@ service.interceptors.response.use(
return response; return response;
} }
if(true){
return response;
}
const { code, data, msg } = response.data; const { code, data, msg } = response.data;
if (code === ResultEnum.SUCCESS) { if (code === ResultEnum.SUCCESS) {
return data; return data;

View File

@ -25,28 +25,31 @@
</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" style="margin-bottom: 20px;"> <el-col :span="isSmallScreen ? 8 : 6" v-for="it in devInfos" :key="it.id" class="dev-item"
style="margin-bottom: 20px;">
<el-card shadow="hover"> <el-card shadow="hover">
<template #header> <template #header>
<div class="dev-title">{{ it.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.netType }}</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 style="position: relative;top: -10px;left:-10px;" :src="'images/state/'+it.state+'.png'"/> <img style="position: relative;top: -10px;left:-10px;" :src="'images/state/' + it.working_state + '.png'" />
<div style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;" >{{getState(it.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">
<span>温度</span> <span>温度</span>
<span>{{ it.temperature }}</span> <span>{{ (it.tempurature/10.0).toFixed() }}</span>
</div> </div>
<div class="chart-line"> <div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div> <div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div>
@ -54,18 +57,18 @@
<div class="chart-item-title"> <div class="chart-item-title">
<span>内存</span> <span>内存</span>
<span>{{ it.memory }}%</span> <span>{{ it.memory_usage}}MB</span>
</div> </div>
<div class="chart-line"> <div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.memory + '%'"></div> <div class="chart-line-inline" :style="'width:' + (it.memory_usage/64/1024.0) + '%'"></div>
</div> </div>
<div class="chart-item-title"> <div class="chart-item-title">
<span>CPU</span> <span>CPU</span>
<span>{{ it.cpu }}%</span> <span>{{ it.cpu_usage }}%</span>
</div> </div>
<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_usage + '%'"></div>
</div> </div>
</div> </div>
@ -116,19 +119,17 @@ import ModelFlow from './components/ModelFlow.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";
import InfoApi from '@/api/info'
let svTemp = ref(55.5) let svTemp = ref(55.5)
let rd = () => { return +("" + Math.random()).substring(3, 5) }; let rd = () => { return +("" + Math.random()).substring(3, 5) };
let rd2 = () => { return +("" + Math.random()).substring(3, 4) }; let rd2 = () => { return +("" + Math.random()).substring(3, 4) };
let topInfos = reactive([ let topInfos = ref<any>(null);
{ title: '模型总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
{ title: '算子总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav2.png" },
{ title: '数据集总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav3.png" },
{ title: '评估报告总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav4.png" },
{ title: '互联总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav5.png" },
{ title: '总访问量', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav1.png" },
]);
let devInfos = reactive([
let devInfos = ref<any>(null)
/*
[
{ id: 1001, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'offline', temperature: rd(), memory: rd(), cpu: rd() }, { id: 1001, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'offline', temperature: rd(), memory: rd(), cpu: rd() },
{ id: 1002, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'compile', temperature: rd(), memory: rd(), cpu: rd() }, { id: 1002, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'compile', temperature: rd(), memory: rd(), cpu: rd() },
{ id: 1003, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'free', temperature: rd(), memory: rd(), cpu: rd() }, { id: 1003, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'free', temperature: rd(), memory: rd(), cpu: rd() },
@ -141,7 +142,7 @@ let devInfos = reactive([
{ id: 1010, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'training', temperature: rd(), memory: rd(), cpu: rd() }, { id: 1010, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'training', temperature: rd(), memory: rd(), cpu: rd() },
{ id: 1011, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'training', temperature: rd(), memory: rd(), cpu: rd() }, { id: 1011, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'training', temperature: rd(), memory: rd(), cpu: rd() },
{ id: 1012, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'training', temperature: rd(), memory: rd(), cpu: rd() }, { id: 1012, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'training', temperature: rd(), memory: rd(), cpu: rd() },
]) ]*/
const winWidth = ref(0) const winWidth = ref(0)
const isSmallScreen = computed(() => { const isSmallScreen = computed(() => {
return winWidth.value < 1440; return winWidth.value < 1440;
@ -153,19 +154,19 @@ const getState=(e:any)=>{
if (e == "compile") { if (e == "compile") {
return "编译中"; return "编译中";
} }
if(e=="free"){ if (e == "idle") {
return "空闲"; return "空闲";
} }
if(e=="inferencing"){ if (e == "infer") {
return "推理中"; return "推理中";
} }
if(e=="noreg"){ if (e == "unregist") {
return "未注册"; return "未注册";
} }
if(e=="publish"){ if (e == "download") {
return "部署中"; return "部署中";
} }
if(e=="training"){ if (e == "train") {
return "训练中"; return "训练中";
} }
@ -179,8 +180,19 @@ onMounted(()=>{
}, 100); }, 100);
} }
DeviceAPI.getStatus().then(d => { DeviceAPI.getStatus().then(d => {
debugger; devInfos.value=d.data.data.device_status_list||[];
}); });
InfoApi.statistics().then(d => {
topInfos.value = [
{ title: '模型总数', count: d.data.total_model_count, ucnt: d.data.user_model_count, clsName: 'c1', icon: "images/nav/nav1.png" },
{ title: '算子总数', count: d.data.total_operator_count, ucnt: d.data.user_operator_count, clsName: 'c1', icon: "images/nav/nav2.png" },
{ title: '数据集总数', count: d.data.total_dataset_count, ucnt: d.data.user_dataset_count, clsName: 'c1', icon: "images/nav/nav3.png" },
{ title: '评估报告总数', count: d.data.total_connection_count, ucnt: d.data.user_connection_count, clsName: 'c1', icon: "images/nav/nav4.png" },
{ title: '互联总数', count: d.data.total_task_count, ucnt: d.data.user_task_count, clsName: 'c1', icon: "images/nav/nav5.png" },
{ title: '总访问量', count: d.data.total_visit_count, ucnt: d.data.user_visit_count, clsName: 'c1', icon: "images/nav/nav1.png" },
];
})
}); });
</script> </script>
@ -189,6 +201,7 @@ onMounted(()=>{
position: relative; position: relative;
min-width: 960px; min-width: 960px;
padding: 0px 24px; padding: 0px 24px;
&.is-small { &.is-small {
padding: 0px 12px; padding: 0px 12px;
} }
@ -228,54 +241,66 @@ onMounted(()=>{
&.is-small { &.is-small {
.dev-row3 { .dev-row3 {
padding: 0px !important; padding: 0px !important;
.device-state { .device-state {
width: 80px !important; width: 80px !important;
} }
} }
.right-panel { .right-panel {
min-width: 240px; min-width: 240px;
padding-left: 8px; padding-left: 8px;
} }
.model-flow { .model-flow {
.card-item { .card-item {
width: 100px; width: 100px;
} }
.row-1 { .row-1 {
.line { .line {
width: calc(20% - 100px); width: calc(20% - 100px);
top: 10px; top: 10px;
} }
} }
.row-3 { .row-3 {
.line { .line {
width: calc(20% - 100px); width: calc(20% - 100px);
} }
.card-center { .card-center {
.card-center-item { .card-center-item {
width: 100px; width: 100px;
&:first-child { &:first-child {
&::after { &::after {
left: 50px; left: 50px;
} }
&::before { &::before {
left: 50px; left: 50px;
} }
} }
&:last-child { &:last-child {
&::after { &::after {
left: -20px; left: -20px;
} }
&::before { &::before {
left: 51px; left: 51px;
} }
} }
} }
} }
.card-item { .card-item {
&.line-top { &.line-top {
&::after { &::after {
left: 50px; left: 50px;
} }
&::before { &::before {
left: 48px; left: 48px;
} }
@ -284,10 +309,12 @@ onMounted(()=>{
} }
} }
} }
.right-panel { .right-panel {
min-width: 300px; min-width: 300px;
padding-left: 12px; padding-left: 12px;
} }
.el-card__body { .el-card__body {
padding: 10px 10px; padding: 10px 10px;
} }
@ -338,15 +365,18 @@ onMounted(()=>{
.el-card__header { .el-card__header {
border-bottom: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;
} }
.el-card__body { .el-card__body {
.el-scrollbar { .el-scrollbar {
padding: 10px; padding: 10px;
} }
} }
} }
.el-card__header { .el-card__header {
padding: 8px; padding: 8px;
border: none; border: none;
.row2-top { .row2-top {
position: relative; position: relative;
@ -359,10 +389,13 @@ onMounted(()=>{
} }
} }
.el-card__body { .el-card__body {
padding: 0px; padding: 0px;
.el-scrollbar { .el-scrollbar {
padding: 0px 10px; padding: 0px 10px;
.el-scrollbar__bar.is-horizontal { .el-scrollbar__bar.is-horizontal {
display: none; display: none;
} }
@ -397,22 +430,28 @@ onMounted(()=>{
box-shadow: var(--el-box-shadow-light); box-shadow: var(--el-box-shadow-light);
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
.dev-row3 { .dev-row3 {
display: flex; display: flex;
padding: 12px; padding: 12px;
align-items: center; align-items: center;
.device-state { .device-state {
width: 100px; width: 100px;
text-align: center; text-align: center;
} }
.state-text { .state-text {
font-size: 16px; font-size: 16px;
&.state0 { &.state0 {
color: var(--el-color-primary); color: var(--el-color-primary);
} }
&.state1 { &.state1 {
color: var(--el-color-warning); color: var(--el-color-warning);
} }
&.state2 { &.state2 {
color: var(--el-color-danger); color: var(--el-color-danger);
} }
@ -422,24 +461,29 @@ onMounted(()=>{
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
top: -10px; top: -10px;
.chart-item-title { .chart-item-title {
margin: 12px 0px 0px; margin: 12px 0px 0px;
font-size: 12px; font-size: 12px;
position: relative; position: relative;
span { span {
&:first-child { &:first-child {
font-weight: bold; font-weight: bold;
} }
&:last-child { &:last-child {
position: absolute; position: absolute;
right: 0px; right: 0px;
} }
} }
} }
.chart-line { .chart-line {
background-color: #ccc; background-color: #ccc;
height: 8px; height: 8px;
border-radius: 4px; border-radius: 4px;
.chart-line-inline { .chart-line-inline {
background-color: var(--el-color-primary); background-color: var(--el-color-primary);
height: 8px; height: 8px;
@ -453,23 +497,28 @@ onMounted(()=>{
} }
} }
} }
.proc-card { .proc-card {
margin-top: 20px; margin-top: 20px;
padding: 8px; padding: 8px;
.el-card__header { .el-card__header {
padding: 8px; padding: 8px;
border: none; border: none;
} }
.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;
box-shadow: var(--el-box-shadow-light); box-shadow: var(--el-box-shadow-light);

View File

@ -26,6 +26,7 @@
}, },
"include": [ "include": [
"src/**/*.ts", "src/**/*.ts",
"src/**/*.js",
"src/**/*.vue", "src/**/*.vue",
"src/typings/**/*.d.ts", "src/typings/**/*.d.ts",
"mock/**/*.ts", "mock/**/*.ts",