From 6961ba64394b3bc9e6bb52762bc3a17cd92f9502 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E7=90=B3?= <1911390090@qq.com>
Date: Mon, 18 Nov 2024 16:28:56 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=AB=AF=20=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E5=9C=A8=E7=BA=BF=E7=9B=91=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/api/deviceManage/deviceOnline.js |  2 +-
 .../views/deviceManage/deviceOnline/index.vue | 66 +++++++++++++++----
 2 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/ruoyi-ui/src/api/deviceManage/deviceOnline.js b/ruoyi-ui/src/api/deviceManage/deviceOnline.js
index 0f7191b5..9880d5a1 100644
--- a/ruoyi-ui/src/api/deviceManage/deviceOnline.js
+++ b/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
   })
diff --git a/ruoyi-ui/src/views/deviceManage/deviceOnline/index.vue b/ruoyi-ui/src/views/deviceManage/deviceOnline/index.vue
index 7d70ea82..6b565801 100644
--- a/ruoyi-ui/src/views/deviceManage/deviceOnline/index.vue
+++ b/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 = [];
-          if(Object.keys(data).length !== 0){
-            xData =Object.keys(data[Object.keys(data)[0]]);
-            for(const type in data){
-              let yItem = {}
-              yItem.name = this.findType(type).label;
-              yItem.unit = '%';
-              yItem.data = [];
-              let lineObj = data[type];
-              for(const time in lineObj){
-                yItem.data.push(lineObj[time].replace('%',''));
+          let xData = [], yData = [];
+
+          if (Object.keys(data).length !== 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 = {
+                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;
         })
       }