管理端 设备在线监测

ruoyi-ui/src/api/deviceManage/deviceOnline.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export function deviceOnlineChart(query) {
   return request({
-    url: '/system/status/list',
+    url: '/system/status/listHourSystem',
     method: 'get',
     params: query
   })

ruoyi-ui/src/views/deviceManage/deviceOnline/index.vue

@@ -222,7 +222,8 @@ export default {
       logTotal:0
     }
   },
-  created() {
+
+created() {
     let rangeDate = getDaysRange(-30);
     this.dateRange[0] = rangeDate.start;
     this.dateRange[1] = rangeDate.end;
@@ -244,29 +245,66 @@ export default {
         this.total = response.total;
       })
     },
+    formatDate(isoString) {
+      const date = new Date(isoString);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+
+      return `${year}-${month}-${day} ${hours}:${minutes}`;
+    },
     deviceOnlineChart(){
       if(this.dateRange.length > 0){
         this.queryParams.startTime = this.dateRange[0];
         this.queryParams.time = this.dateRange[1];
         deviceOnlineChart(this.queryParams).then(response => {
+          console.log("*******************************")
           let data = response.data;
-          let xData ,yData = [];
+          let xData = [], yData = [];
-          if(Object.keys(data).length !== 0){
+
-            xData =Object.keys(data[Object.keys(data)[0]]);
+          if (Object.keys(data).length !== 0) {
-            for(const type in data){
+            // 初始化 xData
-              let yItem = {}
+            Object.keys(data[Object.keys(data)[0]]).forEach(date => {
-              yItem.name = this.findType(type).label;
+              Object.keys(data[Object.keys(data)[0]][date]).forEach(time => {
-              yItem.unit = '%';
+                const formattedTime = this.formatDate(time)
-              yItem.data = [];
+                console.log("***************************")
-              let lineObj = data[type];
+                console.log(formattedTime)
-              for(const time in lineObj){
+                if (!xData.includes(formattedTime )) {
-                yItem.data.push(lineObj[time].replace('%',''));
+
+                  xData.push(formattedTime );
+                }
+              });
+            });
+
+            // 遍历外层的分类
+            for (const type in data) {
+              let yItem = {
+                name: this.findType(type).label,
+                unit: '%',
+                data: []
+              };
+
+              // 遍历该分类下的日期
+              for (const date in data[type]) {
+                // 遍历每个日期下的时间点
+                for (const time in data[type][date]) {
+                  yItem.data.push(parseFloat(data[type][date][time].replace('%', '')));
+                }
               }
+
               yData.push(yItem);
             }
+
+            // 对 xData 进行排序
+/*
+            xData.sort((a, b) => moment(a).diff(moment(b)));
+*/
+
+            this.chartData.xData = xData;
+            this.chartData.yData = yData;
           }
-          this.chartData.xData = xData;
-          this.chartData.yData = yData;
         })
       }