短期历史对比列表查询及偏差曲线展示

cpp-admin/src/main/java/com/cpp/web/controller/regulation/DqHistoryContrastController.java

@@ -71,7 +71,18 @@ public class DqHistoryContrastController {
         // 整合页面列表字段
         Long momentTime = 15 * 60 * 1000L;
         List<DqHistoryContrastDto> tableList = new ArrayList();
+        // 定义x轴底部时间
+        List<String> xAxisBottomList = new ArrayList<>();
+        LinkedHashSet xAxisTopList = new LinkedHashSet();
+        // 定义短期偏差曲线数组
+        List<Object> dqpcLineList = new ArrayList<>();
+        // 定义短期偏差比曲线数组
+        List<Object> ratioLineList = new ArrayList<>();
+
+
         for (Long tempTime = startTime; tempTime <= endTime; tempTime = tempTime + momentTime) {
+            xAxisTopList.add(DateUtils.parseDateToStr("MM/dd",new Date(tempTime)));
+            xAxisBottomList.add(DateUtils.parseDateToStr("HH:mm",new Date(tempTime)));
             DqHistoryContrastDto dqHistoryContrastDto = new DqHistoryContrastDto();
             dqHistoryContrastDto.setStationName(stationName);
             // 设置时间
@@ -101,10 +112,23 @@ public class DqHistoryContrastController {
                     ratioStr = ratio.toPlainString() + "%";
                 }
                 dqHistoryContrastDto.setDqDeviationRatio(ratioStr);
+
+                dqpcLineList.add(dqHistoryContrastDto.getDqDeviation());
+                ratioLineList.add(ratio);
+            }
+            else{
+                dqpcLineList.add("");
+                ratioLineList.add("");
+                dqHistoryContrastDto.setDqDeviation("");
+                dqHistoryContrastDto.setDqDeviationRatio("");
             }
             tableList.add(dqHistoryContrastDto);
         }
         map.put("tableList",tableList);
+        map.put("dqpcLineList",dqpcLineList);
+        map.put("ratioLineList",ratioLineList);
+        map.put("xAxisBottomList",xAxisBottomList);
+        map.put("xAxisTopList",xAxisTopList);
 
         return R.ok(map);
 

cpp-ui/src/views/regulation/dqHistoryContrast/index.vue

@@ -31,7 +31,7 @@
       </el-form>
     </div>
     <div style="padding-top: 10px">
-      <div style="width: 95%;height: 350px" id="fscharts"></div>
+      <div style="width: 95%;height: 450px" id="czChartsId"></div>
     </div>
     <div style="padding-top: 50px">
       <vxe-table
@@ -80,9 +80,8 @@ export default {
           return time.getTime() >= new Date(new Date().toLocaleDateString()).getTime()
         }
       },
-      fsChart: null,
-      sdChart: null,
-      activeName: 'first',
+      hoursArray: [],
+      czChart: null,
       dateTime: [new Date(new Date().toLocaleDateString()).getTime() - 1000 * 60 * 60 * 24, new Date(new Date().toLocaleDateString()).getTime() - 1000 * 60 * 60 * 24],
       total: 0,
       sortOrder: 'asc',
@@ -94,31 +93,200 @@ export default {
       tableData: [],
       nameList: [],
       loading: false,
-      modId: '',//备用id
       lineColor: '#3b3b3b',
-    }
+      xAxisBottomList: [],
+      xAxisTopList: [],
+      chartOption: {
+        backgroundColor: 'transparent',
+        title: {
+          top: 20,
+          text: '偏差图',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+          },
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+        legend: {
+          top: 20,
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['短期预测偏差','偏差比'],
+          right: '4%',
+          textStyle: {
+            fontSize: 12,
+            // color: this.lineColor
+          },
+          selected: {
+            '短期预测偏差': true,
+            '偏差比': true,
+          }
+        },
+        dataZoom: [{
+          show: true,
+          realtime: true,
+          start: 0,
+          end: 100,
+          left: "15%",
+          right: "15%",
+          throttle: 50
+        }, {
+          type: 'inside'
+        }],
+        grid: {
+          top: 100,
+          left: '2%',
+          right: '2%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {onZero: false},
+          },
+          {
+            type: 'category',
+            axisLine: {
+              onZero: false,
+              show:true,
+            },
+            position: 'top',
+
+            axisTick: {
+              interval:0,
+              show: true,
+              length: 265, // 延长刻度线做分组线
+              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
+              lineStyle: {color: '#ff9800'},// 非必须，仅为了演示，明显标示出分组刻度线
+
+            },
+          }
+        ],
+    yAxis: [{
+      type: 'value',
+      name: 'MW',
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        margin: 10,
+        textStyle: {
+          fontSize: 14
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#57617B'
+        }
+      }
+    },{
+      type: 'value',
+      name: '%',
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        margin: 10,
+        textStyle: {
+          fontSize: 14
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#57617B'
+        }
+      }
+    }],
+    series:
+    [{
+      name: '短期预测偏差',
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 5,
+      showSymbol: false,
+      connectNulls: true,
+      lineStyle: {
+        normal: {
+          width: 2
+        }
+      },
+      itemStyle: {
+        normal: {
+          color: 'rgb(121,255,68)',
+
+        }
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgb(121,255,68)'
+          },
+          {
+            offset: 1,
+            color: 'rgb(121,255,68)'
+          }
+        ])
+      },
+      data: []
+    },
+      {
+        yAxisIndex: 1,
+        name: '偏差比',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        showSymbol: false,
+        connectNulls: true,
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: 'rgb(255,68,68)',
+          }
+        },
+        data: []
+      },
+    ]
+  }
+  }
   },
   created() {
     this.getStationCode()
   },
   mounted() {
-
+    this.initChart()
   },
   beforeDestroy() {
-    if (!this.sdChart) {
+    if (!this.czChart) {
       return
     }
-    this.sdChart.dispose()
-    this.sdChart = null
-    if (!this.fsChart) {
-      return
-    }
-    this.fsChart.dispose()
-    this.fsChart = null
+    this.czChart.dispose()
+    this.czChart = null
   },
   computed: {},
   methods: {
-
+    initChart() {
+      this.czChart = echarts.init(document.getElementById('czChartsId'), 'dark')
+      this.czChart.setOption(this.chartOption)
+    },
     nameFormat({cellValue, row, column}) {
       const item = this.nameList.find(item => item.value === cellValue)
       return item ? item.label : ''
@@ -129,9 +297,9 @@ export default {
     },
     async dataQuery() {
       let startTime = Math.round(this.dateTime[0])
-      let endTime = Math.round(this.dateTime[1]) + 1000 * 60 * 60 * 24-1
+      let endTime = Math.round(this.dateTime[1]) + 1000 * 60 * 60 * 24 - 1
 
-      if (endTime - startTime > 60 * 60 * 24 * 1000 * 29) {
+      if (endTime - startTime > 60 * 60 * 24 * 1000 * 30) {
         this.$message.warning("最多只能查询30天的数据！")
         return
       }
@@ -145,6 +313,17 @@ export default {
       this.$axios.get('/dqHistoryContrastController/queryTableData', {params: queryParams}).then(response => {
         this.tableData = response.data.tableList
         this.total = response.data.tableList.length
+
+        this.chartOption.xAxis[0].data = response.data.xAxisBottomList
+        this.chartOption.xAxis[1].data = response.data.xAxisTopList
+        // 偏差曲线
+        this.chartOption.series[0].data = response.data.dqpcLineList
+        // 偏差比曲线
+        this.chartOption.series[1].data = response.data.ratioLineList
+        // this.chartOption.series[1].data = this.tkData
+        this.czChart.setOption(this.chartOption)
+
+
         this.loading = false
       }).catch(() => {
         this.loading = false
@@ -155,7 +334,7 @@ export default {
         this.stationList = response.data
         if (this.stationList.length > 0) {
           this.stationCode = this.stationList[0].value
-          // this.dataQuery()
+          this.dataQuery()
         }
       })
     },