中心功率预测页面调整

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

@@ -42,45 +42,41 @@
         </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  style="float:left;width: 100%;height:740px" id="zhxCharts"></div>
-        </el-tab-pane>
-        <el-tab-pane label="列表" name="second">
-          <vxe-table
+    <div style="margin-top: 10px" v-loading="loading">
+      <div style="float:left;width: 100%;height:475px" ref="zhxCharts"></div>
+      <div style="float:left;width: 92.5%;margin-left: 58px">
+        <vxe-table
+          align="center"
+          ref="xTable"
+          auto-resize
+          border
+          resizable
+          height="288px"
+          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"
-            :loading="loading"
-            ref="xTable"
-            auto-resize
-            border
-            resizable
-            height="770px"
-            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.title"
-              :field="item.field"
-            ></vxe-table-column>
-          </vxe-table>
-          <vxe-pager
-            perfect
-            :current-page.sync="currentPage"
-            :page-size.sync="pageSize"
-            :total="total"
-            :page-sizes=[15,50,100]
-            :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
-            @page-change="handlePageChange"
-          >
-          </vxe-pager>
-        </el-tab-pane>
-      </el-tabs>
+            :title="item.title"
+            :field="item.field"
+          ></vxe-table-column>
+        </vxe-table>
+        <vxe-pager
+          perfect
+          :current-page.sync="currentPage"
+          :page-size.sync="pageSize"
+          :total="total"
+          :page-sizes=[5,15,50,100]
+          :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
+          @page-change="handlePageChange"
+        >
+        </vxe-pager>
+      </div>
+
     </div>
   </div>
 </template>
@@ -89,17 +85,16 @@
 import * as echarts from "echarts";
 
 export default {
-  name: 'inverterinfo',
+  name: 'cloudData',
   data() {
     return {
       fromHead: [],
       zhxChart: null,
       wdChart: null,
-      activeName: 'first',
       dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + (60 * 60 * 24 * 1000) - 1],
       total: 0,
       sortOrder: 'asc',
-      pageSize: 15,
+      pageSize: 5,
       currentPage: 1,
       stationList: [],
       stationCode: [],
@@ -686,13 +681,8 @@ export default {
     this.getStationCode()
   },
   mounted() {
-  },
-  beforeDestroy() {
-    if (!this.zhxChart) {
-      return
-    }
-    this.zhxChart.dispose()
-    this.zhxChart = null
+    window.addEventListener("resize", this.handleResize);
+    window.addEventListener("transitionend", this.handleResize);
   },
   destroyed() {
     // 清空缓存中首页地图跳转的参数
@@ -700,6 +690,12 @@ export default {
   },
   computed: {},
   methods: {
+    // 图表自适应浏览器窗口大小
+    handleResize(){
+      if(this.zhxChart!=null && this.zhxChart!=undefined){
+        this.zhxChart.resize();
+      }
+    },
     cellClassName({row, rowIndex, column, columnIndex}) {
       if (columnIndex == 10) {
         if (row.cz === '—') {
@@ -710,17 +706,17 @@ export default {
         }
       }
     },
-    tabClick(tab) {
-      if (this.activeName == 'first') {
-        this.$nextTick(function () {
-          this.zhxChart.resize();
-        })
-      }
-    },
-    nameFormat({cellValue, row, column}) {
-      const item = this.nameList.find(item => item.value === cellValue)
-      return item ? item.label : ''
-    },
+    // tabClick(tab) {
+    //   if (this.activeName == 'first') {
+    //     this.$nextTick(function () {
+    //       this.zhxChart.resize();
+    //     })
+    //   }
+    // },
+    // nameFormat({cellValue, row, column}) {
+    //   const item = this.nameList.find(item => item.value === cellValue)
+    //   return item ? item.label : ''
+    // },
     stationCodeFormat({cellValue, row, column}) {
       const item = this.stationList.find(item => item.value === cellValue)
       return item ? item.label : ''
@@ -778,9 +774,9 @@ export default {
             }
           });
         });
-        this.$nextTick(function () {
-          this.zhxChart.resize();
-        })
+        // this.$nextTick(function () {
+        //   this.zhxChart.resize();
+        // })
         this.zhDraw(timeList, zhMap, stationType)
         this.loading = false
       }).catch(() => {
@@ -830,14 +826,8 @@ export default {
       })
     },
     zhDraw(timeList, zhMap, stationType) {
-      this.zhxChart = echarts.init(document.getElementById('zhxCharts'), 'dark', {renderer: 'svg'})
-      // 显示加载动画
-      this.zhxChart.showLoading('default', {
-        textColor: '#000',
-        maskColor: 'rgba(0, 0, 0, 0)'
-      });
-      setTimeout(() => {
-          let option = {
+      this.zhxChart = echarts.init(this.$refs.zhxCharts, 'dark', {renderer: 'svg'})
+      let option = {
         backgroundColor: 'transparent',
         title: {
           top: 20,
@@ -873,20 +863,20 @@ export default {
           selected: {}
         },
         dataZoom: [
-        //   {
-        //   show: true,
-        //   realtime: true,
-        //   start: 0,
-        //   end: 100,
-        //   left: "15%",
-        //   right: "15%",
-        //   // textStyle: {
-        //   // color: this.lineColor
-        //   // }
-        // },
+          //   {
+          //   show: true,
+          //   realtime: true,
+          //   start: 0,
+          //   end: 100,
+          //   left: "15%",
+          //   right: "15%",
+          //   // textStyle: {
+          //   // color: this.lineColor
+          //   // }
+          // },
           {
-          type: 'inside'
-        }],
+            type: 'inside'
+          }],
         grid: {
           top: 100,
           left: '2%',
@@ -992,14 +982,10 @@ export default {
         option.series.push(sValue)
         index++;
       }
-
       this.zhxChart.setOption(option, true)
-      this.zhxChart.hideLoading()
-      }, 1000);
-      var _this = this
-      window.addEventListener("resize", function () {
-        _this.zhxChart.resize();
-      });
+      // window.addEventListener("resize", () => {
+      //   this.zhxChart.resize();
+      // });
     },
     points() {
       let points = []