update code
|
@ -1,3 +1,3 @@
|
||||||
# 代理前缀
|
# 代理前缀
|
||||||
VITE_APP_BASE_API = '/dev-api'
|
VITE_APP_BASE_API = '/mk/ai/api/'
|
||||||
|
|
||||||
|
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 6.0 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
@ -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'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
import request from "@/utils/request";
|
||||||
|
const statistics=()=>{
|
||||||
|
return request({
|
||||||
|
url: "/info/statistics",
|
||||||
|
method: "get"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
statistics
|
||||||
|
}
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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",
|
||||||
|
|