设备在线分析

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/statisticalAnalysis/analysis/components/deviceSummary/index.vue

@@ -124,12 +124,12 @@
                   {{ item.pctOffl }}
                 </div>
               </div>
-              <div class="list-text">
+<!--              <div class="list-text">
                 <span class="title">丢包：</span>
                 <div class="value value3">
                   {{ item.pctLose }}
                 </div>
-              </div>
+              </div>-->
             </div>
           </div>
         </div>

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/statisticalAnalysis/query/index.vue

@@ -206,38 +206,75 @@ export default {
         params.direction = this.direction
       }
       request({
-        url: "/system/status/list",
+        url: "/system/status/listHourSystem",
         method: "get",
         params
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          const _chartsOption = _.cloneDeep(chartsOption)
+          const _chartsOption = _.cloneDeep(chartsOption);
           this.setStatus("01", "finish");
+
           let x = [];
           let serie = [];
-          for(let i in res.data){
+
+          // 遍历外层的分类
+          Object.keys(res.data).forEach(i => {
             const s = _.cloneDeep(chartsOption.series[0]);
-            if(x.length === 0){
-              for(let j in res.data[i]){
-                x.push(j)
+
+            // 获取对应分类的设备信息
+            const _deviceType = _.find(deviceType, { value: i });
+            s.name = _deviceType.label;
+            s.itemStyle.color = _deviceType.color;
+
+            // 遍历该分类下的日期
+            Object.values(res.data[i]).forEach(dateData => {
+              // 遍历每个日期下的时间点
+              Object.keys(dateData).forEach(timeStr => {
+                // 如果X轴数据还未初始化，则添加时间点
+                if (!x.includes(timeStr)) {
+                  x.push(timeStr);
                 }
+
+                // 添加数据点到series
+                s.data.push(parseFloat(dateData[timeStr].replace(/%|W/, '')));
+              });
+            });
+
+            serie.push(s);
+          });
+
+          // 对X轴数据进行排序
+          x.sort((a, b) => moment(a).diff(moment(b)));
+
+          // 更新图表选项
+          _chartsOption.xAxis = {
+            data: x,
+            axisLabel: {
+              formatter: function (value, index) {
+                const date = moment(value);
+                const isSameDay = index > 0 && moment(x[index - 1]).isSame(date, 'day');
+                return  date.format('YYYY-MM-DD');
               }
-            const _deviceType = _.find(deviceType,{value:i})
-            s.name = _deviceType.label
-            s.itemStyle.color = _deviceType.color
-            s.data = [];
-            for(let j in res.data[i]){
-              const p = res.data[i][j];
-              s.data.push(parseFloat(p.substr(0,p.length-1)));
             }
-            serie.push(s);
+          };
+          // 更新 tooltip 选项，以显示完整的时间格式
+          _chartsOption.tooltip = {
+            trigger: 'axis',
+            formatter: function (params) {
+              let tooltip = '';
+              params.forEach(param => {
+                const date = moment(param.name);
+                tooltip += `${date.format('YYYY-MM-DD HH:mm')}<br>${param.seriesName}: ${param.value}%<br>`;
+              });
+              return tooltip;
             }
-          x.sort(function(a,b){return moment(a).diff(moment(b))})
-          _chartsOption.xAxis.data = x;
-          _chartsOption.series= serie;
+          };
+
+          _chartsOption.series = serie;
+
+          // 初始化并设置ECharts图表
           this.queryChart = echarts.init(this.$refs["queryChart"]);
           this.queryChart.setOption(_chartsOption);
-
         }
       });
     },