update code

.env.production

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

src/api/device/index.js

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

src/api/info/index.js

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

src/utils/request.ts

@@ -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;

src/views/dashboard/index.vue

@@ -1,5 +1,5 @@
 <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-col :span="4" v-for="(it, idx) in topInfos" :key="idx">
@@ -8,105 +8,108 @@
           <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;">
+      <div style="flex-grow: 1;">
-    <el-card shadow="never" class="top-row2">
+        <el-card shadow="never" class="top-row2">
-      <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 class="div-more" v-if="false">更多</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>
+      <div style="" class="right-panel">
-      <el-scrollbar max-height="504px">        
+        <el-card shadow="never" class="top-row2 notice-card">
-      <el-row :gutter="20">
+          <template #header>
-        <el-col :span="isSmallScreen?8:6" v-for="it in devInfos" :key="it.id" class="dev-item" style="margin-bottom: 20px;">
+            <div class="row2-top">
-          <el-card shadow="hover">
+              <div style="color:#333;font-weight: bold;font-size:15px;">通知中心</div>
-            <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>
-            <div class="dev-row3">
+          </template>
-              <div class="device-state">
+          <el-scrollbar height="484px">
+            <IndexNotice />
+          </el-scrollbar>
+        </el-card>
 
-                <img style="position: relative;top: -10px;left:-10px;" :src="'images/state/'+it.state+'.png'"/>
+        <el-card shadow="never" class="proc-card server-status">
-                <div style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;" >{{getState(it.state) }}</div>
+          <template #header>
-              </div>
+            <div class="row2-top">
-              <div class="dev-chart">
+              <div style="color:#333;font-weight: bold;font-size:15px;">服务器运行状态</div>
-                <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>
-
-                <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>
             </div>
-          </el-card>
+          </template>
-        </el-col>
+          <ServiceStatus :val="svTemp" width="200px" height="200px"></ServiceStatus>
-      </el-row>
+        </el-card>
-    </el-scrollbar>
+      </div>
-    </el-card>
+    </div>
-
-    <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>
   </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)
+import InfoApi from '@/api/info'
-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" },
-]);
 
-let devInfos = reactive([
+let svTemp = ref(55.5)
-  { id: 1001, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'offline', temperature:rd() , memory: rd(), cpu:rd() },
+let rd = () => { return +("" + Math.random()).substring(3, 5) };
-  { id: 1002, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'compile', temperature:rd() , memory: rd(), cpu:rd() },
+let rd2 = () => { return +("" + Math.random()).substring(3, 4) };
-  { id: 1003, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'free', temperature:rd() , memory: rd(), cpu:rd() },
+let topInfos = ref<any>(null);
-  { 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() },
+let devInfos = ref<any>(null)
-  { 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: 1001, name: '设备名称1', 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: 1002, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'compile', temperature: rd(), memory: rd(), cpu: rd() },
-  { id: 1011, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'training', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1003, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'free', temperature: rd(), memory: rd(), cpu: rd() },
-  { id: 1012, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'training', 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() },
-const winWidth=ref(0)
+  { id: 1006, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'publish', temperature: rd(), memory: rd(), cpu: rd() },
-const isSmallScreen=computed(()=>{
+  { id: 1007, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'training', temperature: rd(), memory: rd(), cpu: rd() },
-  return winWidth.value<1440;
+  { 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)=>{
+const getState = (e: any) => {
-  if(e=="offline"){
+  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 "升级中";
 }
-onMounted(()=>{
+onMounted(() => {
-  winWidth.value=window.outerWidth;
+  winWidth.value = window.outerWidth;
-  window.onresize=()=>{
+  window.onresize = () => {
-    setTimeout(()=>{
+    setTimeout(() => {
-      winWidth.value=window.outerWidth;
+      winWidth.value = window.outerWidth;
-    },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>
 
 <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;
+      padding: 0px !important;
-      .device-state{
+
-        width:80px !important;
+      .device-state {
+        width: 80px !important;
       }
     }
-    .right-panel{
+
+    .right-panel {
       min-width: 240px;
-      padding-left:8px;
+      padding-left: 8px;
     }
+
     .model-flow {
-      .card-item{
+      .card-item {
-        width:100px;
+        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{
+        .card-center {
-            width:100px;
+          .card-center-item {
-            &:first-child{
+            width: 100px;
-              &::after{
+
-                left:50px;
+            &:first-child {
+              &::after {
+                left: 50px;
               }
-              &::before{
+
-                left:50px;
+              &::before {
+                left: 50px;
               }
             }
-            &:last-child{
+
-              &::after{
+            &:last-child {
-                left:-20px;
+              &::after {
+                left: -20px;
               }
-              &::before{
+
-                left:51px;
+              &::before {
+                left: 51px;
               }
             }
           }
         }
-        .card-item{
+
-            &.line-top{
+        .card-item {
-              &::after{
+          &.line-top {
-                left:50px; 
+            &::after {
-              }              
+              left: 50px;
-              &::before{
+            }
-                left:48px;
+
-              }
+            &::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{
+    &.notice-card {
-      .el-card__header{
+      .el-card__header {
         border-bottom: 1px solid #ebeef5;
       }
+
       .el-card__body {
-        .el-scrollbar{
+        .el-scrollbar {
-          padding:10px;
+          padding: 10px;
         }
       }
     }
-    .el-card__header{
+
+    .el-card__header {
       padding: 8px;
-      border:none;
+      border: none;
-    .row2-top {
+
-      position: relative;
+      .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{
+    .el-card__body {
-      padding:0px;
+      padding: 0px;
-      .el-scrollbar{
+
-        padding:0px 10px;
+      .el-scrollbar {
-        .el-scrollbar__bar.is-horizontal{
+        padding: 0px 10px;
+
+        .el-scrollbar__bar.is-horizontal {
           display: none;
         }
       }
@@ -396,54 +429,65 @@ 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;
+            .state-text {
-              &.state0{
+              font-size: 16px;
-                color:var(--el-color-primary);
+
+              &.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;
+                height: 8px;
-                border-radius:4px; 
+                border-radius: 4px;
-                .chart-line-inline{
+
+                .chart-line-inline {
                   background-color: var(--el-color-primary);
-                  height:8px;
+                  height: 8px;
-                  border-radius:4px; 
+                  border-radius: 4px;
                 }
               }
             }
@@ -453,26 +497,31 @@ onMounted(()=>{
       }
     }
   }
-  .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;
+        background: #fff;
-          box-shadow: var(--el-box-shadow-light);
+        box-shadow: var(--el-box-shadow-light);
       }
     }
   }

tsconfig.json

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