盒须图提示框内容更改

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

@@ -49,6 +49,510 @@ export default {
       // immediate: true,// 第一次立即监听
       handler(value) {
         this.chartData = value
+
+        this.chartData ={
+          boxplotData: [
+            "",
+            "",
+            "",
+            "",
+            [
+              -3.21,
+              16.67,
+              27.45,
+              29.92,
+              49.79,
+              "2024-11-16"
+            ],
+            "",
+            [
+              -44.91,
+              0,
+              20.72,
+              29.94,
+              74.85,
+              "2024-11-18"
+            ],
+            [
+              -44.91,
+              0,
+              20.01,
+              29.94,
+              74.85,
+              "2024-11-19"
+            ],
+            "",
+            ""
+          ],
+          scatterData: {
+            '新疆':[
+
+              [
+                "2024-11-18",
+                66.05
+              ],
+              [
+                "2024-11-18",
+                64.36
+              ],
+              [
+                "2024-11-18",
+                61.69
+              ],
+              [
+                "2024-11-18",
+                62.36
+              ],
+              [
+                "2024-11-18",
+                59.36
+              ],
+              [
+                "2024-11-18",
+                56.78
+              ],
+              [
+                "2024-11-18",
+                52.71
+              ],
+              [
+                "2024-11-18",
+                51.35
+              ],
+              [
+                "2024-11-18",
+                47.27
+              ],
+              [
+                "2024-11-18",
+                42.71
+              ],
+              [
+                "2024-11-18",
+                39.06
+              ],
+              [
+                "2024-11-18",
+                37.26
+              ],
+              [
+                "2024-11-18",
+                33.24
+              ],
+              [
+                "2024-11-19",
+                30.26
+              ],
+              [
+                "2024-11-19",
+                37.42
+              ],
+              [
+                "2024-11-19",
+                42.62
+              ],
+              [
+                "2024-11-19",
+                48.44
+              ],
+              [
+                "2024-11-19",
+                53.13
+              ],
+              [
+                "2024-11-19",
+                57.83
+              ],
+              [
+                "2024-11-19",
+                62.51
+              ],
+              [
+                "2024-11-19",
+                65.03
+              ],
+              [
+                "2024-11-19",
+                66.94
+              ],
+              [
+                "2024-11-19",
+                68.39
+              ],
+              [
+                "2024-11-19",
+                69.76
+              ],
+              [
+                "2024-11-19",
+                69.89
+              ],
+              [
+                "2024-11-19",
+                70.99
+              ],
+              [
+                "2024-11-19",
+                71.14
+              ],
+              [
+                "2024-11-19",
+                69.78
+              ],
+              [
+                "2024-11-19",
+                70.37
+              ],
+              [
+                "2024-11-19",
+                68.55
+              ],
+              [
+                "2024-11-19",
+                67.91
+              ],
+              [
+                "2024-11-19",
+                66.05
+              ],
+              [
+                "2024-11-19",
+                63.71
+              ],
+              [
+                "2024-11-19",
+                62.32
+              ],
+              [
+                "2024-11-19",
+                63.01
+              ],
+              [
+                "2024-11-19",
+                59.97
+              ],
+              [
+                "2024-11-19",
+                56.78
+              ],
+              [
+                "2024-11-19",
+                53.25
+              ],
+              [
+                "2024-11-19",
+                51.87
+              ],
+              [
+                "2024-11-19",
+                46.79
+              ],
+              [
+                "2024-11-19",
+                42.71
+              ],
+              [
+                "2024-11-19",
+                39.45
+              ],
+              [
+                "2024-11-19",
+                36.88
+              ],
+              [
+                "2024-11-19",
+                33.24
+              ]
+            ],
+            '风电':[
+              [
+              "2024-11-16",
+              16.31
+            ],
+              [
+                "2024-11-16",
+                16.14
+              ],
+              [
+                "2024-11-16",
+                16.06
+              ],
+              [
+                "2024-11-16",
+                15.97
+              ],
+              [
+                "2024-11-16",
+                15.49
+              ],
+              [
+                "2024-11-16",
+                15.62
+              ],
+              [
+                "2024-11-16",
+                15.19
+              ],
+              [
+                "2024-11-16",
+                15.23
+              ],
+              [
+                "2024-11-16",
+                15.13
+              ],
+              [
+                "2024-11-16",
+                14.89
+              ],
+              [
+                "2024-11-16",
+                14.96
+              ],
+              [
+                "2024-11-16",
+                14.74
+              ],
+              [
+                "2024-11-16",
+                14.83
+              ],
+              [
+                "2024-11-16",
+                14.94
+              ],
+              [
+                "2024-11-16",
+                14.74
+              ],
+              [
+                "2024-11-16",
+                14.89
+              ],
+              [
+                "2024-11-16",
+                14.9
+              ],
+              [
+                "2024-11-16",
+                14.64
+              ],
+              [
+                "2024-11-16",
+                14.89
+              ],
+              [
+                "2024-11-16",
+                15.06
+              ],
+              [
+                "2024-11-16",
+                15.45
+              ],
+              [
+                "2024-11-16",
+                15.59
+              ],
+              [
+                "2024-11-16",
+                16.11
+              ],
+              [
+                "2024-11-16",
+                16.53
+              ],
+              [
+                "2024-11-16",
+                29.93
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.93
+              ],
+              [
+                "2024-11-16",
+                29.93
+              ],
+              [
+                "2024-11-16",
+                29.93
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.93
+              ],
+              [
+                "2024-11-16",
+                29.93
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.94
+              ],
+              [
+                "2024-11-16",
+                29.93
+              ],
+              [
+                "2024-11-18",
+                -71
+              ],
+              [
+                "2024-11-18",
+                130
+              ],
+              [
+                "2024-11-18",
+                30.56
+              ],
+              [
+                "2024-11-18",
+                37.05
+              ],
+              [
+                "2024-11-18",
+                42.62
+              ],
+              [
+                "2024-11-18",
+                48.93
+              ],
+              [
+                "2024-11-18",
+                53.67
+              ],
+              [
+                "2024-11-18",
+                58.42
+              ],
+              [
+                "2024-11-18",
+                61.87
+              ],
+              [
+                "2024-11-18",
+                65.03
+              ],
+              [
+                "2024-11-18",
+                68.31
+              ],
+              [
+                "2024-11-18",
+                68.39
+              ],
+              [
+                "2024-11-18",
+                69.05
+              ],
+              [
+                "2024-11-18",
+                70.61
+              ],
+              [
+                "2024-11-18",
+                70.99
+              ],
+              [
+                "2024-11-18",
+                70.42
+              ],
+              [
+                "2024-11-18",
+                69.07
+              ],
+              [
+                "2024-11-18",
+                70.37
+              ],
+              [
+                "2024-11-18",
+                67.85
+              ],
+              [
+                "2024-11-18",
+                68.6
+              ]]
+          }
+            ,
+          xData: [
+            "2024-11-12",
+            "2024-11-13",
+            "2024-11-14",
+            "2024-11-15",
+            "2024-11-16",
+            "2024-11-17",
+            "2024-11-18",
+            "2024-11-19",
+            "2024-11-20",
+            "2024-11-21"
+          ]
+        }
+
         this.setOptions(this.chartData)
       }
     }
@@ -79,23 +583,23 @@ export default {
   },
   methods: {
     initChart() {
-      this.option = JSON.parse(JSON.stringify(dqTickOptions))
-      this.option.tooltip.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+'min</div><div >'+param.value[1]+'</div></div>'+
-              '<div class="flex justify-between"><div>'+param.marker+'Q1</div><div>'+param.value[2]+'</div></div>'+
-              '<div class="flex justify-between"><div>'+param.marker+'median</div><div>'+param.value[3]+'</div></div>'+
-              '<div class="flex justify-between"><div>'+param.marker+'Q3</div><div>'+param.value[4]+'</div></div>'+
-              '<div class="flex justify-between"><div>'+param.marker+'max</div><div>'+param.value[5]+'</div></div>'
-          }
-        }
-        return str
-      }
+      // this.option = JSON.parse(JSON.stringify(dqTickOptions))
+      // this.option.tooltip.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+'min</div><div >'+param.value[1]+'</div></div>'+
+      //         '<div class="flex justify-between"><div>'+param.marker+'Q1</div><div>'+param.value[2]+'</div></div>'+
+      //         '<div class="flex justify-between"><div>'+param.marker+'median</div><div>'+param.value[3]+'</div></div>'+
+      //         '<div class="flex justify-between"><div>'+param.marker+'Q3</div><div>'+param.value[4]+'</div></div>'+
+      //         '<div class="flex justify-between"><div>'+param.marker+'max</div><div>'+param.value[5]+'</div></div>'
+      //     }
+      //   }
+      //   return str
+      // }
       this.tickChart = this.$echarts.init(document.getElementById('tickChart'));
       this.setOptions(this.chartData)
     },
@@ -109,9 +613,46 @@ export default {
         }
       })
     },
-    setOptions({xData, boxplotData,scatterData,q1,q3,min,max} = {}) {
+    setOptions({xData, boxplotData,scatterData} = {}) {
       const _this = this
-      let option = {
+      let series = [
+        {
+          name: '',
+          type: 'boxplot',
+          itemStyle: {
+            color: 'rgba(126,199,250,0.86)',
+            // 边线颜色
+            borderColor: '#89BFE5',
+            // 边线宽度
+            borderWidth: 2
+          },
+          data: boxplotData
+        }]
+      for (let key in scatterData){
+        series.push({
+          name:key,
+          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[key]
+        })
+      }
+      this.option = {
         dataZoom: [{
           type: 'inside'
         }],
@@ -125,12 +666,30 @@ export default {
         animation: false,
         tooltip: {
           trigger: 'axis',
+          backgroundColor:'rgba(77, 109, 144, 0.87)',
+          borderColor:'#89BFE5',
+          textStyle:{color:'#fff', fontFamily:'Microsoft YaHei'},
+          // enterable:true,
+          position: function (point, params, dom, rect, size) {
+            // 固定在顶部
+            return [point[0], '-50%'];
+          },
           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>'
+            let str = '<div style="max-height: 50vh;overflow-y: auto">'+params[0].axisValue +'<br/>'
+            let scatterStr = '<div class="flex"><div>异常点</div><div class="ml-0">'
+            for(let key in scatterData){
+              let tempStr = '<div class="flex"><div>'+key+':</div><div class="flex" style="flex-wrap: wrap;">'
+              let data = params.filter(_=>_.seriesName === key)
+              for(let param of params){
+                if(param.componentSubType === 'scatter') {
+                  tempStr = tempStr + '<span class="ml-0" style="color: ' + param.color + '">' + param.value[1] + '</span>,'
+                }
               }
+              tempStr = tempStr + '</div></div>'
+              scatterStr = scatterStr+tempStr
+            }
+            scatterStr = scatterStr+'</div></div>'
+            for(let param of params){
               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>'+
@@ -139,6 +698,7 @@ export default {
                   '<div class="flex justify-between"><div>'+param.marker+'最大值</div><div>'+param.value[5]+'</div></div>'
               }
             }
+            str = str + scatterStr+'</div>'
             return str
           }
         },
@@ -171,43 +731,44 @@ export default {
             },
           },
         },
-        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
-          }
-        ]
+        series:series
+        // 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)
+      this.tickChart.setOption(this.option, true)
       window.addEventListener("resize", function () {
         _this.tickChart.resize();
       });
@@ -220,9 +781,74 @@ export default {
     setFullOptions({xData, boxplotData,scatterData} = {}) {
       this.fullChart = this.$echarts.init(document.getElementById('main'));
       let option = JSON.parse(JSON.stringify(dqTickOptions))
+      let series = [
+        {
+          name: '',
+          type: 'boxplot',
+          itemStyle: {
+            color: 'rgba(126,199,250,0.86)',
+            // 边线颜色
+            borderColor: '#89BFE5',
+            // 边线宽度
+            borderWidth: 2
+          },
+          data: boxplotData
+        }]
+      for (let key in scatterData){
+        series.push({
+          name:key,
+          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[key]
+        })
+      }
+      option.tooltip.formatter = function (params){
+        let str = '<div style="max-height: 50vh;overflow-y: auto">'+params[0].axisValue +'<br/>'
+        let scatterStr = '<div class="flex"><div>异常点</div><div class="ml-0">'
+        for(let key in scatterData){
+          let tempStr = '<div class="flex"><div>'+key+':</div><div class="flex" style="max-width:30vw;flex-wrap: wrap;">'
+          let data = params.filter(_=>_.seriesName === key)
+          for(let param of params){
+            if(param.componentSubType === 'scatter') {
+              tempStr = tempStr + '<span class="ml-0" style="color: ' + param.color + '">' + param.value[1] + '</span>,'
+            }
+          }
+          tempStr = tempStr + '</div></div>'
+          scatterStr = scatterStr+tempStr
+        }
+        scatterStr = scatterStr+'</div></div>'
+        for(let param of params){
+          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>'
+          }
+        }
+        str = str + scatterStr+'</div>'
+        return str
+      }
       option.xAxis.data = xData
-      option.series[0].data = boxplotData
-      option.series[1].data = scatterData
+      option.series = series
+      // option.series[0].data = boxplotData
+      // option.series[1].data = scatterData
       this.fullChart.setOption(option, true)
     }
   }

cpp-ui/src/views/largeScreen/echarts-data.js

@@ -553,6 +553,9 @@ export const dqTickOptions= {
   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){

cpp-ui/src/views/stationDataQuery/windtowerstatusdata/index.vue

@@ -32,13 +32,13 @@
         </el-form-item>
       </el-form>
     </div>
-    <div style="padding-top: 10px">
+    <div >
       <div style="display: flex">
         <div style="float:left;width: 65%;height: 350px" id="wscharts"></div>
         <div style="float:left;width: 35%;height: 350px" id="wdcharts"></div>
       </div>
 
-      <div class="vxe-max-height-65vh">
+      <div class="vxe-max-height">
 <!--        <div>-->
         <vxe-table
           highlight-hover-row
@@ -1051,3 +1051,14 @@ export default {
   },
 }
 </script>
+<style>
+.vxe-max-height{
+  .vxe-table--render-default .vxe-table--body-wrapper, .vxe-table--render-default .vxe-table--footer-wrapper {
+    max-height: 38vh !important;
+    overflow-y: auto;
+  }
+  .vxe-table--render-default .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper {
+    max-height: calc(38vh - 6px) !important;
+  }
+}
+</style>