短期历史对比调整偏差曲线图

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

@@ -73,7 +73,6 @@ public class DqHistoryContrastController {
         List<DqHistoryContrastDto> tableList = new ArrayList();
         // 定义x轴底部时间
         List<String> xAxisBottomList = new ArrayList<>();
-        LinkedHashSet xAxisTopList = new LinkedHashSet();
         // 定义短期偏差曲线数组
         List<Object> dqpcLineList = new ArrayList<>();
         // 定义短期偏差比曲线数组
@@ -81,8 +80,7 @@ public class DqHistoryContrastController {
 
 
         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)));
+            xAxisBottomList.add(DateUtils.parseDateToStr("MM-dd HH:mm",new Date(tempTime)));
             DqHistoryContrastDto dqHistoryContrastDto = new DqHistoryContrastDto();
             dqHistoryContrastDto.setStationName(stationName);
             // 设置时间
@@ -128,7 +126,6 @@ public class DqHistoryContrastController {
         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

@@ -4,23 +4,23 @@
       <el-form ref="queryForm" size="small" :inline="true">
         <el-form-item label="时间">
           <el-date-picker
-              :picker-options="expireDateOption"
-              :clearable="false"
-              v-model="dateTime"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              popper-class="cpp-popper"
+            :picker-options="expireDateOption"
+            :clearable="false"
+            v-model="dateTime"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            popper-class="cpp-popper"
           />
         </el-form-item>
         <el-form-item label="场站名称">
           <el-select v-model="stationCode" placeholder="请选择" popper-class="cpp-popper">
             <el-option
-                v-for="item in stationList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
+              v-for="item in stationList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
@@ -35,17 +35,17 @@
     </div>
     <div style="padding-top: 50px">
       <vxe-table
-          highlight-hover-row
-          :keep-source="true"
-          align="center"
-          :loading="loading"
-          ref="xTable"
-          auto-resize
-          highlight-current-row
-          border
-          resizable
-          show-overflow
-          :data="tableData.slice((currentPage-1) * pageSize,currentPage * pageSize)">
+        highlight-hover-row
+        :keep-source="true"
+        align="center"
+        :loading="loading"
+        ref="xTable"
+        auto-resize
+        highlight-current-row
+        border
+        resizable
+        show-overflow
+        :data="tableData.slice((currentPage-1) * pageSize,currentPage * pageSize)">
         <vxe-table-column field="time" title="时间" width="180px" fixed="left"></vxe-table-column>
         <vxe-table-column field="stationName" title="场站名称"></vxe-table-column>
         <vxe-table-column field="openCapacity" title="开机容量(MW)"></vxe-table-column>
@@ -55,13 +55,13 @@
         <vxe-table-column field="dqDeviationRatio" title="短期预测偏差比(%)"></vxe-table-column>
       </vxe-table>
       <vxe-pager
-          perfect
-          :current-page.sync="currentPage"
-          :page-size.sync="pageSize"
-          :total="total"
-          :page-sizes=[10,50,100]
-          :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
-          @page-change="handlePageChange"
+        perfect
+        :current-page.sync="currentPage"
+        :page-size.sync="pageSize"
+        :total="total"
+        :page-sizes=[10,50,100]
+        :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
+        @page-change="handlePageChange"
       >
       </vxe-pager>
     </div>
@@ -121,7 +121,7 @@ export default {
           itemWidth: 14,
           itemHeight: 5,
           itemGap: 13,
-          data: ['短期预测偏差','偏差比'],
+          data: ['短期预测偏差', '偏差比'],
           right: '4%',
           textStyle: {
             fontSize: 12,
@@ -155,118 +155,121 @@ export default {
             type: 'category',
             boundaryGap: false,
             axisLine: {onZero: false},
+            splitLine: {show: true, lineStyle: {color: '#cbcbcb'}, interval: 95},
+            axisLabel: {
+              formatter: function (value) {
+                return value.split(' ')[1]
+              }
+            },
+            axisTick:{show:false}
           },
           {
             type: 'category',
-            axisLine: {
-              onZero: false,
-              show:true,
-            },
+            boundaryGap: false,
+            axisLine: {onZero: false},
             position: 'top',
-
-            axisTick: {
-              interval:0,
-              show: true,
-              length: 265, // 延长刻度线做分组线
-              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
-              lineStyle: {color: '#ff9800'},// 非必须，仅为了演示，明显标示出分组刻度线
-
+            axisLabel: {
+              padding: [0, 0, 0, 110],
+              interval: 95,
+              formatter: function (value) {
+                return value.split(' ')[0]
+              }
             },
           }
         ],
-    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)'
+        yAxis: [{
+          type: 'value',
+          name: 'MW',
+          axisTick: {
+            show: false
           },
-          {
-            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
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
           }
-        },
-        itemStyle: {
-          normal: {
-            color: 'rgb(255,68,68)',
+        }, {
+          type: 'value',
+          name: '%',
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
           }
-        },
-        data: []
-      },
-    ]
-  }
-  }
+        }],
+        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()
@@ -315,7 +318,8 @@ export default {
         this.total = response.data.tableList.length
 
         this.chartOption.xAxis[0].data = response.data.xAxisBottomList
-        this.chartOption.xAxis[1].data = response.data.xAxisTopList
+        this.chartOption.xAxis[1].data = response.data.xAxisBottomList
+        console.log(response.data)
         // 偏差曲线
         this.chartOption.series[0].data = response.data.dqpcLineList
         // 偏差比曲线