管理端 设备在线监测

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,6 +222,7 @@ export default {
       logTotal:0
     }
   },
+
 created() {
     let rangeDate = getDaysRange(-30);
     this.dateRange[0] = rangeDate.start;
@@ -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]]);
+            // 初始化 xData
+            Object.keys(data[Object.keys(data)[0]]).forEach(date => {
+              Object.keys(data[Object.keys(data)[0]][date]).forEach(time => {
+                const formattedTime = this.formatDate(time)
+                console.log("***************************")
+                console.log(formattedTime)
+                if (!xData.includes(formattedTime )) {
+
+                  xData.push(formattedTime );
+                }
+              });
+            });
+
+            // 遍历外层的分类
             for (const type in data) {
-              let yItem = {}
+              let yItem = {
-              yItem.name = this.findType(type).label;
+                name: this.findType(type).label,
-              yItem.unit = '%';
+                unit: '%',
-              yItem.data = [];
+                data: []
-              let lineObj = data[type];
+              };
-              for(const time in lineObj){
+
-                yItem.data.push(lineObj[time].replace('%',''));
+              // 遍历该分类下的日期
+              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);
               }
+
+              yData.push(yItem);
             }
+
+            // 对 xData 进行排序
+/*
+            xData.sort((a, b) => moment(a).diff(moment(b)));
+*/
+
             this.chartData.xData = xData;
             this.chartData.yData = yData;
+          }
         })
       }