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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.production
View File

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

0
public/images/state/publish.png → public/images/state/download.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

0
public/images/state/free.png → public/images/state/idle.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

0
public/images/state/inferencing.png → public/images/state/infer.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

0
public/images/state/training.png → public/images/state/train.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

0
public/images/state/noreg.png → public/images/state/unregist.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

0
public/images/state/updating.png → public/images/state/upgrade.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

2
src/api/device/index.js
View File

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

11
src/api/info/index.js 100644
View File

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

3
src/utils/request.ts
View File

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

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

@ -1,112 +1,115 @@
<template>
<div class="dashboard-container" :class="isSmallScreen?'is-small':''">
<div class="dashboard-container" :class="isSmallScreen ? 'is-small' : ''">
<!-- github角标 -->
<el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
<el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
<el-col :span="4" v-for="(it, idx) in topInfos" :key="idx">
<el-card shadow="always" class="top-row1">
<img :src="it.icon" class="top-icon" />
<div class="top-row">
<div class="div-title">{{ it.title }}</div>
<div class="div-num">
<span style="color:dodgerblue;">{{ it.ucnt }} </span>/ <span style="font-size:14px;">{{it.count }}</span>
<span style="color:dodgerblue;">{{ it.ucnt }} </span>/ <span style="font-size:14px;">{{ it.count }}</span>
</div>
</div>
</el-card>
</el-col>
</el-row>
<div style="display: flex;">
<div style="flex-grow: 1;">
<el-card shadow="never" class="top-row2">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">设备运行状态</div>
<div class="div-more" v-if="false">更多</div>
<div style="flex-grow: 1;">
<el-card shadow="never" class="top-row2">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">设备运行状态</div>
<div class="div-more" v-if="false">更多</div>
</div>
</template>
<el-scrollbar max-height="504px">
<el-row :gutter="20">
<el-col :span="isSmallScreen ? 8 : 6" v-for="it in devInfos" :key="it.id" class="dev-item"
style="margin-bottom: 20px;">
<el-card shadow="hover">
<template #header>
<div class="dev-title">{{ it.device_name }}
<svg-icon icon-class="enlarge" color="#666" />
</div>
</template>
<div class="dev-row2">
<div>
网络类型:<span>{{ it.modl_net_type }}</span>
</div>
</div>
<div class="dev-row3">
<div class="device-state">
<img style="position: relative;top: -10px;left:-10px;" :src="'images/state/' + it.working_state + '.png'" />
<div
style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">
{{ getState(it.working_state) }}</div>
</div>
<div class="dev-chart">
<div class="chart-item-title">
<span>温度</span>
<span>{{ (it.tempurature/10.0).toFixed() }}℃</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div>
</div>
<div class="chart-item-title">
<span>内存</span>
<span>{{ it.memory_usage}}MB</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + (it.memory_usage/64/1024.0) + '%'"></div>
</div>
<div class="chart-item-title">
<span>CPU</span>
<span>{{ it.cpu_usage }}%</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.cpu_usage + '%'"></div>
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
</el-scrollbar>
</el-card>
<el-card shadow="never" class="proc-card">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">模型仿真评估流程</div>
</div>
</template>
<ModelFlow />
</el-card>
</div>
</template>
<el-scrollbar max-height="504px">
<el-row :gutter="20">
<el-col :span="isSmallScreen?8:6" v-for="it in devInfos" :key="it.id" class="dev-item" style="margin-bottom: 20px;">
<el-card shadow="hover">
<template #header>
<div class="dev-title">{{ it.name }}
<svg-icon icon-class="enlarge" color="#666" />
</div>
</template>
<div class="dev-row2">
<div>
网络类型:<span>{{ it.netType }}</span>
</div>
<div style="" class="right-panel">
<el-card shadow="never" class="top-row2 notice-card">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">通知中心</div>
</div>
<div class="dev-row3">
<div class="device-state">
<img style="position: relative;top: -10px;left:-10px;" :src="'images/state/'+it.state+'.png'"/>
<div style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;" >{{getState(it.state) }}</div>
</div>
<div class="dev-chart">
<div class="chart-item-title">
<span>温度</span>
<span>{{ it.temperature }}℃</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div>
</div>
</template>
<el-scrollbar height="484px">
<IndexNotice />
</el-scrollbar>
</el-card>
<div class="chart-item-title">
<span>内存</span>
<span>{{ it.memory }}%</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.memory + '%'"></div>
</div>
<div class="chart-item-title">
<span>CPU</span>
<span>{{ it.cpu }}%</span>
</div>
<div class="chart-line">
<div class="chart-line-inline" :style="'width:' + it.cpu + '%'"></div>
</div>
</div>
<el-card shadow="never" class="proc-card server-status">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">服务器运行状态</div>
</div>
</el-card>
</el-col>
</el-row>
</el-scrollbar>
</el-card>
<el-card shadow="never" class="proc-card">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">模型仿真评估流程</div>
</div>
</template>
<ModelFlow/>
</el-card>
</div>
<div style="" class="right-panel">
<el-card shadow="never" class="top-row2 notice-card">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">通知中心</div>
</div>
</template>
<el-scrollbar height="484px">
<IndexNotice/>
</el-scrollbar>
</el-card>
<el-card shadow="never" class="proc-card server-status">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">服务器运行状态</div>
</div>
</template>
<ServiceStatus :val="svTemp" width="200px" height="200px"></ServiceStatus>
</el-card>
</div>
</div>
</template>
<ServiceStatus :val="svTemp" width="200px" height="200px"></ServiceStatus>
</el-card>
</div>
</div>
</div>
</template>
@ -116,80 +119,90 @@ import ModelFlow from './components/ModelFlow.vue'
import IndexNotice from './components/IndexNotice.vue'
import ServiceStatus from './components/ServiceStatus.vue'
import DeviceAPI from "@/api/device";
let svTemp=ref(55.5)
let rd=()=>{ return +(""+Math.random()).substring(3,5)};
let rd2=()=>{ return +(""+Math.random()).substring(3,4)};
let topInfos = reactive([
{ title: '模型总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
{ title: '算子总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav2.png" },
{ title: '数据集总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav3.png" },
{ title: '评估报告总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav4.png" },
{ title: '互联总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav5.png" },
{ title: '总访问量', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav1.png" },
]);
import InfoApi from '@/api/info'
let devInfos = reactive([
{ 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: 1003, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'free', temperature:rd() , memory: rd(), cpu:rd() },
{ id: 1004, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'inferencing', temperature:rd() , memory: rd(), cpu:rd() },
{ id: 1005, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'noreg', temperature:rd() , memory: rd(), cpu:rd() },
{ id: 1006, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'publish', temperature:rd() , memory: rd(), cpu:rd() },
{ id: 1007, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'training', temperature:rd() , memory: rd(), cpu:rd() },
{ id: 1008, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'updating', temperature:rd() , memory: rd(), cpu:rd() },
{ id: 1009, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'offline', 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: 1012, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'training', temperature:rd() , memory: rd(), cpu:rd() },
])
const winWidth=ref(0)
const isSmallScreen=computed(()=>{
return winWidth.value<1440;
let svTemp = ref(55.5)
let rd = () => { return +("" + Math.random()).substring(3, 5) };
let rd2 = () => { return +("" + Math.random()).substring(3, 4) };
let topInfos = ref<any>(null);
let devInfos = ref<any>(null)
/*
[
{ 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: 1003, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'free', temperature: rd(), memory: rd(), cpu: rd() },
{ id: 1004, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'inferencing', temperature: rd(), memory: rd(), cpu: rd() },
{ id: 1005, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'noreg', temperature: rd(), memory: rd(), cpu: rd() },
{ id: 1006, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'publish', temperature: rd(), memory: rd(), cpu: rd() },
{ id: 1007, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'training', temperature: rd(), memory: rd(), cpu: rd() },
{ id: 1008, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'updating', temperature: rd(), memory: rd(), cpu: rd() },
{ id: 1009, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'offline', 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: 1012, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'training', temperature: rd(), memory: rd(), cpu: rd() },
]*/
const winWidth = ref(0)
const isSmallScreen = computed(() => {
return winWidth.value < 1440;
});
const getState=(e:any)=>{
if(e=="offline"){
const getState = (e: any) => {
if (e == "offline") {
return "离线";
}
if(e=="compile"){
if (e == "compile") {
return "编译中";
}
if(e=="free"){
if (e == "idle") {
return "空闲";
}
if(e=="inferencing"){
if (e == "infer") {
return "推理中";
}
if(e=="noreg"){
if (e == "unregist") {
return "未注册";
}
if(e=="publish"){
if (e == "download") {
return "部署中";
}
if(e=="training"){
if (e == "train") {
return "训练中";
}
return "升级中";
return "升级中";
}
onMounted(()=>{
winWidth.value=window.outerWidth;
window.onresize=()=>{
setTimeout(()=>{
winWidth.value=window.outerWidth;
},100);
onMounted(() => {
winWidth.value = window.outerWidth;
window.onresize = () => {
setTimeout(() => {
winWidth.value = window.outerWidth;
}, 100);
}
DeviceAPI.getStatus().then(d=>{
debugger;
DeviceAPI.getStatus().then(d => {
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>
<style lang="scss" scoped>
.dashboard-container {
position: relative;
min-width:960px;
min-width: 960px;
padding: 0px 24px;
&.is-small{
&.is-small {
padding: 0px 12px;
}
@ -225,69 +238,83 @@ onMounted(()=>{
</style>
<style lang="scss">
.dashboard-container {
&.is-small{
&.is-small {
.dev-row3 {
padding:0px !important;
.device-state{
width:80px !important;
padding: 0px !important;
.device-state {
width: 80px !important;
}
}
.right-panel{
.right-panel {
min-width: 240px;
padding-left:8px;
padding-left: 8px;
}
.model-flow {
.card-item{
width:100px;
.card-item {
width: 100px;
}
.row-1 {
.line{
.line {
width: calc(20% - 100px);
top:10px;
top: 10px;
}
}
.row-3 {
.line{
.line {
width: calc(20% - 100px);
}
.card-center{
.card-center-item{
width:100px;
&:first-child{
&::after{
left:50px;
.card-center {
.card-center-item {
width: 100px;
&:first-child {
&::after {
left: 50px;
}
&::before{
left:50px;
&::before {
left: 50px;
}
}
&:last-child{
&::after{
left:-20px;
&:last-child {
&::after {
left: -20px;
}
&::before{
left:51px;
&::before {
left: 51px;
}
}
}
}
.card-item{
&.line-top{
&::after{
left:50px;
}
&::before{
left:48px;
}
.card-item {
&.line-top {
&::after {
left: 50px;
}
&::before {
left: 48px;
}
}
}
}
}
}
.right-panel{
.right-panel {
min-width: 300px;
padding-left:12px;
padding-left: 12px;
}
.el-card__body {
padding: 10px 10px;
}
@ -334,36 +361,42 @@ onMounted(()=>{
}
.top-row2 {
&.notice-card{
.el-card__header{
&.notice-card {
.el-card__header {
border-bottom: 1px solid #ebeef5;
}
}
.el-card__body {
.el-scrollbar{
padding:10px;
.el-scrollbar {
padding: 10px;
}
}
}
.el-card__header{
.el-card__header {
padding: 8px;
border:none;
.row2-top {
position: relative;
border: none;
.row2-top {
position: relative;
.div-more {
position: absolute;
right: 12px;
top: 0px;
font-size: 12px;
}
.div-more {
position: absolute;
right: 12px;
top: 0px;
font-size: 12px;
}
}
}
.el-card__body{
padding:0px;
.el-scrollbar{
padding:0px 10px;
.el-scrollbar__bar.is-horizontal{
.el-card__body {
padding: 0px;
.el-scrollbar {
padding: 0px 10px;
.el-scrollbar__bar.is-horizontal {
display: none;
}
}
@ -396,83 +429,99 @@ onMounted(()=>{
background: #fff;
box-shadow: var(--el-box-shadow-light);
border-radius: 8px;
padding:10px;
padding: 10px;
.dev-row3 {
display: flex;
padding:12px;
padding: 12px;
align-items: center;
.device-state {
width: 100px;
text-align: center;
}
.state-text{
font-size:16px;
&.state0{
color:var(--el-color-primary);
.state-text {
font-size: 16px;
&.state0 {
color: var(--el-color-primary);
}
&.state1{
color:var(--el-color-warning);
&.state1 {
color: var(--el-color-warning);
}
&.state2{
color:var(--el-color-danger);
&.state2 {
color: var(--el-color-danger);
}
}
.dev-chart{
.dev-chart {
flex-grow: 1;
position: relative;
top: -10px;
.chart-item-title{
.chart-item-title {
margin: 12px 0px 0px;
font-size:12px;
font-size: 12px;
position: relative;
span{
&:first-child{
span {
&:first-child {
font-weight: bold;
}
&:last-child{
&:last-child {
position: absolute;
right: 0px;
}
}
}
.chart-line{
.chart-line {
background-color: #ccc;
height:8px;
border-radius:4px;
.chart-line-inline{
height: 8px;
border-radius: 4px;
.chart-line-inline {
background-color: var(--el-color-primary);
height:8px;
border-radius:4px;
height: 8px;
border-radius: 4px;
}
}
}
}
}
}
}
}
.proc-card{
margin-top:20px;
.proc-card {
margin-top: 20px;
padding: 8px;
.el-card__header{
.el-card__header {
padding: 8px;
border:none;
border: none;
}
.el-card__body{
.el-card__body {
background: #EEF7FE;
border-radius: 8px;
height:300px;
height: 300px;
}
&.server-status{
&.server-status {
background: #EEF7FE;
padding: 8px;
.el-card__header{
}
.el-card__header {}
.el-card__body {
background: #fff;
box-shadow: var(--el-box-shadow-light);
background: #fff;
box-shadow: var(--el-box-shadow-light);
}
}
}

1
tsconfig.json
View File

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