首页盒须图初始

cpp-admin/src/main/java/com/cpp/web/controller/largeScreen/LargeScreenController.java

@@ -19,6 +19,8 @@ import com.cpp.web.domain.station.enums.DashboardElectricStatusEnum;
 import com.cpp.web.domain.station.enums.ElectricFieldTypeEnum;
 import com.cpp.web.dto.largeScreen.*;
 import com.cpp.web.service.accuracy.AccuracyPassRateService;
+import com.cpp.web.service.accuracy.ShortTermSinglePointDeviationService;
+import com.cpp.web.service.accuracy.impl.CalculateForecastPowerShortTermRegulationImpl;
 import com.cpp.web.service.cloud.NwpCloudService;
 import com.cpp.web.service.powerGeneation.DayPowerGenerationService;
 import com.cpp.web.service.station.*;
@@ -72,6 +74,8 @@ public class LargeScreenController {
     NwpCloudService nwpCloudService;
     @Autowired
     AccuracyPassRateService accuracyPassRateService;
+    @Autowired
+    ShortTermSinglePointDeviationService shortTermSinglePointDeviationService;
 
     @GetMapping("/electricFieldDataTotal")
     public R electricFieldDataTotal() {
@@ -899,4 +903,20 @@ public class LargeScreenController {
 
         return R.ok(returnMap);
     }
+
+
+    /**
+     * 首页短期偏差数据展示
+     *
+     * @return
+     */
+    @GetMapping("/dqDeviationData")
+    public R dqDeviationData() {
+        Date startTime = DateTimeUtil.getDayStartTime(DateUtil.offsetDay(new Date(),-10).getTime());
+        Date endTime = DateTimeUtil.getDayLastTime(DateUtil.yesterday().getTime());
+        // 获取短期上报
+        String dqHowLongAgo = configService.selectConfigByKey("dqHowLongAgo");
+        Map<String,Object> map = shortTermSinglePointDeviationService.findByTimeBetweenAndHowLongAgoAndStationCode(startTime,endTime,Integer.parseInt(dqHowLongAgo),null);
+        return R.ok(map);
+    }
 }

cpp-ui/src/views/largeScreen/components/left-bottom.vue

@@ -29,7 +29,15 @@ export default {
       screenHeight: window.innerHeight,
       tickChart: null,
       fullChart: null,
-      chartData: {},
+      chartData: {
+        boxplotData:[],
+        scatterData:[],
+        xData:[],
+        q1:null,
+        q3:null,
+        min:null,
+        max:null
+      },
       option:{}
     }
   },
@@ -101,12 +109,108 @@ export default {
         }
       })
     },
-    setOptions({xData, boxplotData,scatterData} = {}) {
-      this.option.xAxis.data = xData
-      this.option.series[0].data = boxplotData
-      this.option.series[1].data = scatterData
-      this.tickChart.setOption(this.option, true)
-      window.addEventListener("resize", this.chartsResize);
+    setOptions({xData, boxplotData,scatterData,q1,q3,min,max} = {}) {
+      const _this = this
+      let option = {
+        dataZoom: [{
+          type: 'inside'
+        }],
+        grid: {
+          top: 50,
+          left: '4%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        animation: false,
+        tooltip: {
+          trigger: 'axis',
+          formatter: function (params){
+            let str = params[0].axisValue +'<br/>'
+            for(let param of params){
+              if(param.componentSubType === 'scatter'){
+                str = str + '<div class="flex justify-between"><div>'+param.marker+param.value[0]+'异常值</div><div class="ml-0">'+param.value[1]+'</div></div>'
+              }
+              if(param.componentSubType === 'boxplot'){
+                str = str + '<div class="flex justify-between"><div>'+param.marker+'最小值</div><div >'+param.value[1]+'</div></div>'+
+                  '<div class="flex justify-between"><div>'+param.marker+'第一四分位数</div><div>'+param.value[2]+'</div></div>'+
+                  '<div class="flex justify-between"><div>'+param.marker+'中位数</div><div>'+param.value[3]+'</div></div>'+
+                  '<div class="flex justify-between"><div>'+param.marker+'第三四分位数</div><div>'+param.value[4]+'</div></div>'+
+                  '<div class="flex justify-between"><div>'+param.marker+'最大值</div><div>'+param.value[5]+'</div></div>'
+              }
+            }
+            return str
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {show: true},
+          axisLine: {
+            onZero: false,
+            // lineStyle: {
+            //   color: '#5fbbeb'
+            // }
+          },
+          data: xData
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            padding: [3, 0, 0, 0],
+            formatter: '{value}',
+            textStyle: {
+              fontSize: 14,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+            },
+          },
+        },
+        series: [
+          {
+            name: '',
+            type: 'boxplot',
+            itemStyle: {
+              color: 'rgba(126,199,250,0.86)',
+              // 边线颜色
+              borderColor: '#89BFE5',
+              // 边线宽度
+              borderWidth: 2
+            },
+            data: boxplotData
+          },
+          {
+            type: 'scatter',
+            symbolSize: 8,
+            itemStyle: {
+              color: function (params) {
+                for (let i = 0; i < boxplotData.length; i++) {
+                  if (boxplotData[i].length>0&&boxplotData[i][5] == params.value[0]){
+                    var value = params.value[1];
+                    if ((value < boxplotData[i][1] && value > boxplotData[i][0] )|| (value >boxplotData[i][3] && value < boxplotData[i][4])) {
+                      return 'orange';
+                    }
+                    if (value  <boxplotData[i][0] || value > boxplotData[i][4]) {
+                      return 'red';
+                    }
+                  }
+                }
+
+              }
+            },
+            data: scatterData
+          }
+        ]
+      }
+      this.tickChart.setOption(option, true)
+      window.addEventListener("resize", function () {
+        _this.tickChart.resize();
+      });
     },
     chartsResize(){
       if(this.tickChart !== null && this.tickChart !== undefined){

cpp-ui/src/views/largeScreen/index.vue

@@ -558,6 +558,24 @@ export default {
         return nums[0];
       }
     },
+    dqDeviationData(){
+      this.$axios({
+        url: '/largeScreenController/dqDeviationData',
+        method: 'get'
+      }).then(response => {
+        // 短期偏差盒须图
+        this.leftBottomParams = {
+          boxplotData: response.data.result,
+          scatterData: response.data.abnormal,
+          xData: response.data.time,
+          q1: response.data.q1,
+          q3: response.data.q3,
+          min: response.data.min,
+          max: response.data.max,
+        }
+      }).catch(err => {
+      })
+    },
     electricFieldDataTotal(){
       this.$axios({
         url: '/largeScreenController/electricFieldDataTotal',
@@ -666,6 +684,7 @@ export default {
       })
     },
     getBizData() {
+      this.dqDeviationData()
       this.electricFieldDataTotal()
       this.calGenerating()
       this.calForecastGenerating()