终极版（盒须图）

cpp-admin/src/main/java/com/cpp/web/service/accuracy/impl/ShortTermSinglePointDeviationServiceImpl.java

@@ -9,9 +9,7 @@ import com.cpp.web.domain.station.ElectricField;
 import com.cpp.web.mapper.accuracy.ShortTermSinglePointDeviationMapper;
 import com.cpp.web.service.accuracy.ShortTermSinglePointDeviationService;
 import com.cpp.web.service.station.ElectricFieldService;
-import com.cpp.web.utils.DateTimeUtil;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.security.core.parameters.P;
 import org.springframework.stereotype.Service;
 
 import java.math.BigDecimal;
@@ -58,18 +56,18 @@ public class ShortTermSinglePointDeviationServiceImpl extends ServiceImpl<ShortT
         List timeList = new ArrayList<>();
         List abnormalList = new ArrayList<>();
 
-        Map<String,List<List>> deviationMap = new HashMap<>();
+        Map<String, List<List>> deviationMap = new HashMap<>();
         for (String s : dateList) {
             timeList.add(s);
             if (groupedByDate.get(s) != null) {
                 double[] array = groupedByDate.get(s).stream().map(ShortTermSinglePointDeviation::getDeviation).mapToDouble(m -> m.doubleValue()).toArray();
                 // 所需盒须值
-                Object[] result = plot(array,s);
+                Object[] result = plot(array, s);
                 dataList.add(result);
-                if (StrUtil.isBlankIfStr(stationCode)){
+                if (StrUtil.isBlankIfStr(stationCode)) {
                     List<ElectricField> electricFieldList = electricFieldService.list();
                     double min = (Double) result[0];
-                    double max = (Double)result[4];
+                    double max = (Double) result[4];
                     // 每天的获取异常值
                     List<ShortTermSinglePointDeviation> shortTermSinglePointDeviationList = groupedByDate.get(s).stream()
                             .filter(f -> f.getDeviation().doubleValue() < min || f.getDeviation().doubleValue() > max).collect(Collectors.toList());
@@ -77,39 +75,25 @@ public class ShortTermSinglePointDeviationServiceImpl extends ServiceImpl<ShortT
                     // 遍历异常
                     for (ShortTermSinglePointDeviation shortTermSinglePointDeviation : shortTermSinglePointDeviationList) {
                         List<Object> ycDataList = new ArrayList<>();
-                        ycDataList.add(DateUtil.format(shortTermSinglePointDeviation.getTime(),"yyyy-MM-dd"));
+                        ycDataList.add(DateUtil.format(shortTermSinglePointDeviation.getTime(), "yyyy-MM-dd"));
                         ycDataList.add(shortTermSinglePointDeviation.getDeviation());
                         shortTermSinglePointDeviation.getStationCode();
                         ElectricField electricField = electricFieldList.stream().filter(e -> e.getStationCode().equals(shortTermSinglePointDeviation.getStationCode())).findFirst().get();
 
-                        if (deviationMap.get(electricField.getName())!=null){
+                        if (deviationMap.get(electricField.getName()) != null) {
                             List<List> deviationList = deviationMap.get(electricField.getName());
                             deviationList.add(ycDataList);
-                        }
-                        else{
+                        } else {
                             List<List> deviationList = new ArrayList<>();
                             deviationList.add(ycDataList);
-                            deviationMap.put(electricField.getName(),deviationList);
+                            deviationMap.put(electricField.getName(), deviationList);
                         }
                     }
                     map.put("abnormal", deviationMap);
-                }else {
+                } else {
                     double q3 = (Double) result[3];
-                    double q1 = (Double)result[1];
-                    // 获取异常值
-                    List<Double> doubleList = groupedByDate.get(s).stream()
-                            .filter(f -> f.getDeviation().doubleValue() < q1 || f.getDeviation().doubleValue() > q3)
-                            .map(f -> f.getDeviation().doubleValue()).collect(Collectors.toList());
-
-                    if (doubleList.size() > 0) {
-                        for (Double v : doubleList) {
-                            List ycDataList = new ArrayList<>();
-                            ycDataList.add(s);
-                            ycDataList.add(v);
-                            abnormalList.add(ycDataList);
-                        }
-                    }
-                     map.put("abnormal", abnormalList);
+                    double q1 = (Double) result[1];
+                    abnormalList.addAll(accuracyPlotAbnormal(groupedByDate, s, q1, q3));
                 }
             } else {
                 dataList.add("");
@@ -117,10 +101,40 @@ public class ShortTermSinglePointDeviationServiceImpl extends ServiceImpl<ShortT
         }
         map.put("result", dataList);
         map.put("time", timeList);
+        map.put("abnormalList", abnormalList);
         return map;
     }
 
-    public static Object[] plot(double[] data,String date) {
+    /**
+     * 获取准确率盒须图异常值
+     * @param groupedByDate
+     * @param dateStr
+     * @param q1
+     * @param q3
+     * @return
+     */
+    private List accuracyPlotAbnormal(Map<String, List<ShortTermSinglePointDeviation>> groupedByDate, String dateStr, double q1, double q3) {
+
+        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("HH:mm");
+
+        List abnormalList = new ArrayList<>();
+
+        if (groupedByDate.size() > 0) {
+            for (ShortTermSinglePointDeviation shortTermSinglePointDeviation : groupedByDate.get(dateStr)) {
+                if (shortTermSinglePointDeviation.getDeviation().doubleValue() < q1 || shortTermSinglePointDeviation.getDeviation().doubleValue() > q3) {
+                    List ycDataList = new ArrayList<>();
+                    ycDataList.add(dateStr);
+                    ycDataList.add(shortTermSinglePointDeviation.getDeviation());
+                    ycDataList.add(simpleDateFormat.format(shortTermSinglePointDeviation.getTime()));
+                    abnormalList.add(ycDataList);
+                }
+            }
+        }
+
+        return abnormalList;
+    }
+
+    public static Object[] plot(double[] data, String date) {
         Arrays.sort(data);
         // 1/4
         double q1 = calculateQuantile(data, 0.25);
@@ -137,7 +151,7 @@ public class ShortTermSinglePointDeviationServiceImpl extends ServiceImpl<ShortT
                 BigDecimal.valueOf(q1).setScale(2, RoundingMode.HALF_UP).doubleValue(),
                 BigDecimal.valueOf(q2).setScale(2, RoundingMode.HALF_UP).doubleValue(),
                 BigDecimal.valueOf(q3).setScale(2, RoundingMode.HALF_UP).doubleValue(),
-                BigDecimal.valueOf(maxInRegion).setScale(2, RoundingMode.HALF_UP).doubleValue(),date};
+                BigDecimal.valueOf(maxInRegion).setScale(2, RoundingMode.HALF_UP).doubleValue(), date};
     }
 
     private static double calculateQuantile(double[] data, double percentile) {
@@ -153,6 +167,7 @@ public class ShortTermSinglePointDeviationServiceImpl extends ServiceImpl<ShortT
             return lowerValue + upperValue;
         }
     }
+
     public List<String> getDatesInRange(Date startTime, Date endTime) {
         List<String> dateList = new ArrayList<>();
         SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");

cpp-ui/src/views/statistics/stationAccuracy/index.vue

@@ -101,10 +101,7 @@
           </el-row>
           <el-row>
             <div style="float:left;width: 100%;height: 425px" id="pcCharts"></div>
-
           </el-row>
-
-
         </el-col>
       </el-row>
     </div>
@@ -172,10 +169,6 @@ export default {
         boxplotData:[],
         scatterData:[],
         xData:[],
-        q1:null,
-        q3:null,
-        min:null,
-        max:null
       }
     }
   },
@@ -284,14 +277,9 @@ export default {
       }
       this.$axios.get('/shortTermSinglePointDeviation/getBoxNeed', {params: queryParams}).then(response => {
         this.chartData.boxplotData = response.data.result
-        this.chartData.scatterData = response.data.abnormal
+        this.chartData.scatterData = response.data.abnormalList
         this.chartData.xData = response.data.time
-        this.chartData.q1 = response.data.q1
-        this.chartData.q3 = response.data.q3
-        this.chartData.min = response.data.min
-        this.chartData.max = response.data.max
         this.pcChart = echarts.init(document.getElementById('pcCharts'), 'dark')
-        console.log(this.chartData.boxplotData)
         this.setOptions(this.chartData)
         this.loading = false
       })
@@ -320,6 +308,9 @@ export default {
         },
         tooltip: {
           trigger: 'axis',
+          backgroundColor:'rgba(77, 109, 144, 0.87)',
+          borderColor:'#89BFE5',
+          textStyle:{color:'#fff', fontFamily:'Microsoft YaHei'},
           axisPointer: {
             lineStyle: {
               color: '#57617B'
@@ -337,7 +328,6 @@ export default {
           right: '4%',
           textStyle: {
             fontSize: 12,
-            // //color: this.lineColor
           },
           selected: {}
         },
@@ -354,32 +344,19 @@ export default {
         xAxis: [{
           type: 'category',
           boundaryGap: false,
-          axisLine: {
-            lineStyle: {
-              //color: this.lineColor
-            }
-          },
           data: times
         }],
         yAxis: [{
           type: 'value',
-          // name: '%',
           max: 100,
           min: 0,
           axisTick: {
             show: false
           },
-          axisLine: {
-            lineStyle: {
-              //color: this.lineColor
-            }
-          },
-
           axisLabel: {
             margin: 10,
             textStyle: {
               fontSize: 14,
-              //color: this.lineColor
             },
             formatter: '{value}',
           },
@@ -389,7 +366,6 @@ export default {
             }
           }
         }],
-
       }
       if (standLine != "" || standLine != undefined) {
         option.series = [
@@ -471,7 +447,7 @@ export default {
         _this.zqlChart.resize();
       });
     },
-    setOptions({xData, boxplotData,scatterData,q1,q3,min,max} = {}) {
+    setOptions({xData, boxplotData,scatterData} = {}) {
       const _this = this
       let option = {
         title: [
@@ -481,7 +457,6 @@ export default {
             textStyle: {
               fontWeight: 'normal',
               fontSize: 16,
-              //color: this.lineColor
             },
             left: '1%'
           }
@@ -496,17 +471,20 @@ export default {
         animation: false,
         tooltip: {
           trigger: 'axis',
+          backgroundColor:'rgba(77, 109, 144, 0.87)',
+          borderColor:'#89BFE5',
+          textStyle:{color:'#fff', fontFamily:'Microsoft YaHei'},
           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>'
+                str = str + '<div class="flex justify-between"><div>'+param.marker+param.value[2]+'异常值</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[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[4]+'</div></div>'+
                   '<div class="flex justify-between"><div>'+param.marker+'最大值</div><div>'+param.value[5]+'</div></div>'
               }
             }
@@ -518,9 +496,6 @@ export default {
           axisTick: {show: true},
           axisLine: {
             onZero: false,
-            // lineStyle: {
-            //   color: '#5fbbeb'
-            // }
           },
           data: xData
         },