图表提示框超出边界问题及历史数据图表和列表一个页面展示

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

@@ -30,46 +30,46 @@
         </el-form-item>
       </el-form>
     </div>
-    <div style="padding-top: 10px">
-      <el-tabs type="card" v-model="activeName" @tab-click="tabClick">
-        <el-tab-pane label="列表" name="first">
-          <div>差值颜色说明：<span style="color: #FF0000">红色</span>代表短期调控与上报不相符，<span style="color: #FFFF00">黄色</span>代表未接收到短期上报数据</div>
-          <vxe-table
-            align="center"
-            :loading="loading"
-            ref="xTable"
-            auto-resize
-            border
-            resizable
-            highlight-current-row
-            show-overflow
-            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
-            :cell-class-name="cellClassName"
-          >
+    <div style="padding-top: 8px">
+      <div style="display: flex">
+        <div style="float:left;width: 100%;height: 350px" id="zhCharts"></div>
+      </div>
+      <div>
+        <div>差值颜色说明：<span style="color: #FF0000">红色</span>代表短期调控与上报不相符，<span
+          style="color: #FFFF00">黄色</span>代表未接收到短期上报数据
+        </div>
+        <vxe-table
+          align="center"
+          :loading="loading"
+          ref="xTable"
+          auto-resize
+          border
+          resizable
+          highlight-current-row
+          show-overflow
+          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+          :cell-class-name="cellClassName"
+        >
 
-            <vxe-table-column
-              v-for="(item, index) in fromHead"
-              :key="index"
-              align="center"
-              :title="item.label"
-              :field="item.field"
-            ></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"
-          >
-          </vxe-pager>
-        </el-tab-pane>
-        <el-tab-pane label="图表" name="second">
-          <div style="float:left;width: 95%;height: 550px" id="zhCharts"></div>
-        </el-tab-pane>
-      </el-tabs>
+          <vxe-table-column
+            v-for="(item, index) in fromHead"
+            :key="index"
+            align="center"
+            :title="item.label"
+            :field="item.field"
+          ></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"
+        >
+        </vxe-pager>
+      </div>
     </div>
   </div>
 </template>
@@ -84,11 +84,10 @@ export default {
       fromHead: [],
       zhChart: null,
       wdChart: null,
-      activeName: 'first',
       dateTime: [],
       total: 0,
       sortOrder: 'asc',
-      pageSize: 10,
+      pageSize: 7,
       currentPage: 1,
       stationList: [],
       stationCode: [],
@@ -101,7 +100,7 @@ export default {
       day30: 30 * 24 * 3600 * 1000,
       // 日期使用
       pickerOptions: {
-        onPick: ({ maxDate, minDate }) => {
+        onPick: ({maxDate, minDate}) => {
           if (minDate && this.pickerMinDate) {
             this.pickerMinDate = null;
           } else if (minDate) {
@@ -445,9 +444,9 @@ export default {
       ],
       colorArr: [
         {
-        start: "rgba(155, 101, 229,",
-        end: "rgba(219,44,44,0.5)"
-      },
+          start: "rgba(155, 101, 229,",
+          end: "rgba(219,44,44,0.5)"
+        },
         {
           start: "rgba(71, 173, 245,",
           end: "rgba(231,132,46,0.5)"
@@ -700,7 +699,7 @@ export default {
   computed: {},
   methods: {
     cellClassName({row, rowIndex, column, columnIndex}) {
-      if (columnIndex == 10){
+      if (columnIndex == 10) {
         if (row.cz === '—') {
           return "class-style-yellow"
         }
@@ -709,13 +708,6 @@ export default {
         }
       }
     },
-    tabClick(tab) {
-      if (this.activeName == 'second') {
-        this.$nextTick(function () {
-          this.zhChart.resize();
-        })
-      }
-    },
     nameFormat({cellValue, row, column}) {
       const item = this.nameList.find(item => item.value === cellValue)
       return item ? item.label : ''
@@ -754,7 +746,7 @@ export default {
         let stationType = response.data.stationType
         let timeList = response.data.timeList
         let zhMap = response.data.zhMap
-        this.zhDraw(timeList,zhMap,stationType)
+        this.zhDraw(timeList, zhMap, stationType)
 
         this.loading = false
       }).catch(() => {
@@ -763,11 +755,11 @@ export default {
     },
 
     async getQueryDays() {
-        // 获取查询D+N天参数值
+      // 获取查询D+N天参数值
       await this.$axios({url: '/powerstationstatusdata/queryDays', method: 'get'}).then(response => {
-          let queryDays = response.data
-          this.dateTime = [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + (60 * 60 * 24 * 1000) + parseInt(queryDays) * 60 * 60 * 24 * 1000 - 1]
-        })
+        let queryDays = response.data
+        this.dateTime = [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + (60 * 60 * 24 * 1000) + parseInt(queryDays) * 60 * 60 * 24 * 1000 - 1]
+      })
       this.getStationCode()
     },
     async getStationCode() {
@@ -779,12 +771,12 @@ export default {
         }
       })
     },
-    zhDraw(wsTime, zhMap,stationType) {
-      this.zhChart = echarts.init(document.getElementById('zhCharts'),'dark')
+    zhDraw(wsTime, zhMap, stationType) {
+      this.zhChart = echarts.init(document.getElementById('zhCharts'), 'dark')
       let option = {
         backgroundColor: 'transparent',
         title: {
-          top: 20,
+          top: 6,
           text: '综合对比',
           textStyle: {
             fontWeight: 'normal',
@@ -794,6 +786,7 @@ export default {
           left: '1%'
         },
         tooltip: {
+          confine: true,
           trigger: 'axis',
           axisPointer: {
             lineStyle: {
@@ -802,7 +795,8 @@ export default {
           }
         },
         legend: {
-          top: 20,
+          left: 'center',
+          top: 6,
           width: '70%',
           icon: 'rect',
           itemWidth: 14,
@@ -817,20 +811,15 @@ export default {
           selected: {}
         },
         dataZoom: [{
-          show: true,
+          show: false,
           realtime: true,
-          start: 0,
-          end: 100,
           left: "15%",
           right: "15%",
-          // textStyle: {
-            // color: this.lineColor
-          // }
         }, {
           type: 'inside'
         }],
         grid: {
-          top: 100,
+          top: 60,
           left: '2%',
           right: '2%',
           bottom: '10%',
@@ -870,7 +859,7 @@ export default {
               color: '#57617B'
             }
           }
-        },{
+        }, {
           type: 'value',
           name: '',
           axisTick: {
@@ -899,10 +888,9 @@ export default {
         series: []
       }
       option.xAxis[0].data = wsTime
-      if (stationType=='E1'){
+      if (stationType == 'E1') {
         option.yAxis[1].name = 'W/㎡'
-      }
-      else{
+      } else {
         option.yAxis[1].name = 'm/s'
       }
 
@@ -914,22 +902,22 @@ export default {
         option.legend.data.push(key)
 
         let sValue = {
-                name: key,
-                type: 'line',
-          yAxisIndex:0,
-                smooth: false,
-                symbol: 'circle',
-                symbolSize: 5,
-                showSymbol: false,
-                lineStyle: {
-                  normal: {
-                    width: 2
-                  }
-                },
-                itemStyle: this.lineStyle[index].itemStyle,
-                data: zhMap[key]
-              }
-        if (key=='气象站总辐射' || key=='测风塔轮毂风速') {
+          name: key,
+          type: 'line',
+          yAxisIndex: 0,
+          smooth: false,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 2
+            }
+          },
+          itemStyle: this.lineStyle[index].itemStyle,
+          data: zhMap[key]
+        }
+        if (key == '气象站总辐射' || key == '测风塔轮毂风速') {
           sValue.yAxisIndex = 1
         }
         option.series.push(sValue)
@@ -946,13 +934,14 @@ export default {
 </script>
 
 <style scoped>
-   /* //然后给对应的单元格样式 */
- >>>.vxe-table .vxe-body--row .vxe-body--column.class-style-yellow{
+/* //然后给对应的单元格样式 */
+>>> .vxe-table .vxe-body--row .vxe-body--column.class-style-yellow {
+
+  color: #FFFF00;
+}
 
-   color: #FFFF00;
- }
-   >>>.vxe-table .vxe-body--row .vxe-body--column.class-style-red{
-     color: #FF0000;
-   }
+>>> .vxe-table .vxe-body--row .vxe-body--column.class-style-red {
+  color: #FF0000;
+}
 </style>
 <!--&gt;>>.vxe-table .vxe-body&#45;&#45;row .vxe-body&#45;&#45;column.class-style .vxe-cell .vxe-cell&#45;&#45;label{-->

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

@@ -773,6 +773,7 @@ export default {
           left: '1%'
         },
         tooltip: {
+          confine: true,
           trigger: 'axis',
           axisPointer: {
             lineStyle: {
@@ -939,6 +940,7 @@ export default {
           left: '1%'
         },
         tooltip: {
+          confine: true,
           trigger: 'axis',
           axisPointer: {
             lineStyle: {

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

@@ -222,6 +222,7 @@ export default {
           left: '1%'
         },
         tooltip: {
+          confine: true,
           trigger: 'axis',
           axisPointer: {
             lineStyle: {
@@ -394,6 +395,7 @@ export default {
           left: '1%'
         },
         tooltip: {
+          confine: true,
           trigger: 'axis',
           axisPointer: {
             lineStyle: {

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

@@ -785,6 +785,7 @@ export default {
           left: '1%'
         },
         tooltip: {
+          confine: true,
           trigger: 'axis',
           axisPointer: {
             lineStyle: {