测风塔数据查询列表与图在一个页面内

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

@@ -31,67 +31,60 @@
       </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 class="vxe-max-height-65vh">
-            <vxe-table
-              highlight-hover-row
-              :keep-source="true"
-              align="center"
-              :loading="loading"
-              ref="xTable"
-              auto-resize
-              highlight-current-row
-              border
-              resizable
-              show-overflow
-              :data="tableData.slice((currentPage-1) * pageSize,currentPage * pageSize)">
-              <vxe-table-column field="stationCode" title="场站名称" :formatter="stationCodeFormat" width="200px"
-                                fixed="left"></vxe-table-column>
-              <vxe-table-column field="time" title="时间" width="180px" fixed="left"></vxe-table-column>
-              <vxe-table-column field="t" title="温度(℃)" width="180px"></vxe-table-column>
-              <vxe-table-column field="rh" title="湿度(RH%)" width="180px"></vxe-table-column>
-              <vxe-table-column field="pa" title="气压(kPa)" width="180px"></vxe-table-column>
-              <vxe-table-column field="wsHubHeight" title="轮毂风速(m/s)" width="180px"></vxe-table-column>
-              <vxe-table-column field="wdHubHeight" title="轮毂风向(°)" width="180px"></vxe-table-column>
-              <vxe-table-column field="ws10" title="10米风速(m/s)" width="180px"></vxe-table-column>
-              <vxe-table-column field="wd10" title="10米风向(°)" width="180px"></vxe-table-column>
-              <vxe-table-column field="ws30" title="30米风速(m/s)" width="180px"></vxe-table-column>
-              <vxe-table-column field="wd30" title="30米风向(°)" width="180px"></vxe-table-column>
-              <vxe-table-column field="ws50" title="50米风速(m/s)" width="180px"></vxe-table-column>
-              <vxe-table-column field="wd50" title="50米风向(°)" width="180px"></vxe-table-column>
-              <vxe-table-column field="ws60" title="60米风速(m/s)" width="180px"></vxe-table-column>
-              <vxe-table-column field="wd60" title="60米风向(°)" width="180px"></vxe-table-column>
-              <vxe-table-column field="ws70" title="70米风速(m/s)" width="180px"></vxe-table-column>
-              <vxe-table-column field="wd70" title="70米风向(°)" width="180px"></vxe-table-column>
-              <vxe-table-column field="ws80" title="80米风速(m/s)" width="180px"></vxe-table-column>
-              <vxe-table-column field="wd80" title="80米风向(°)" width="180px"></vxe-table-column>
-              <vxe-table-column field="ws90" title="90米风速(m/s)" width="180px"></vxe-table-column>
-              <vxe-table-column field="wd90" title="90米风向(°)" width="180px"></vxe-table-column>
-              <vxe-table-column field="ws100" title="100米风速(m/s)" width="180px"></vxe-table-column>
-              <vxe-table-column field="wd100" title="100米风向(°)" width="180px"></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 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>
 
-
-        </el-tab-pane>
-        <el-tab-pane label="风速曲线图" name="second">
-          <div style="float:left;width: 95%;height: 550px" id="wscharts"></div>
-        </el-tab-pane>
-        <el-tab-pane label="风向玫瑰图" name="three">
-          <div style="float:left;width: 95%;height: 550px" id="wdcharts"></div>
-        </el-tab-pane>
-      </el-tabs>
+      <div class="vxe-max-height-65vh">
+        <vxe-table
+          highlight-hover-row
+          :keep-source="true"
+          align="center"
+          :loading="loading"
+          ref="xTable"
+          auto-resize
+          highlight-current-row
+          border
+          resizable
+          show-overflow
+          :data="tableData.slice((currentPage-1) * pageSize,currentPage * pageSize)">
+          <vxe-table-column field="stationCode" title="场站名称" :formatter="stationCodeFormat" width="200px"
+                            fixed="left"></vxe-table-column>
+          <vxe-table-column field="time" title="时间" width="180px" fixed="left"></vxe-table-column>
+          <vxe-table-column field="t" title="温度(℃)" width="180px"></vxe-table-column>
+          <vxe-table-column field="rh" title="湿度(RH%)" width="180px"></vxe-table-column>
+          <vxe-table-column field="pa" title="气压(kPa)" width="180px"></vxe-table-column>
+          <vxe-table-column field="wsHubHeight" title="轮毂风速(m/s)" width="180px"></vxe-table-column>
+          <vxe-table-column field="wdHubHeight" title="轮毂风向(°)" width="180px"></vxe-table-column>
+          <vxe-table-column field="ws10" title="10米风速(m/s)" width="180px"></vxe-table-column>
+          <vxe-table-column field="wd10" title="10米风向(°)" width="180px"></vxe-table-column>
+          <vxe-table-column field="ws30" title="30米风速(m/s)" width="180px"></vxe-table-column>
+          <vxe-table-column field="wd30" title="30米风向(°)" width="180px"></vxe-table-column>
+          <vxe-table-column field="ws50" title="50米风速(m/s)" width="180px"></vxe-table-column>
+          <vxe-table-column field="wd50" title="50米风向(°)" width="180px"></vxe-table-column>
+          <vxe-table-column field="ws60" title="60米风速(m/s)" width="180px"></vxe-table-column>
+          <vxe-table-column field="wd60" title="60米风向(°)" width="180px"></vxe-table-column>
+          <vxe-table-column field="ws70" title="70米风速(m/s)" width="180px"></vxe-table-column>
+          <vxe-table-column field="wd70" title="70米风向(°)" width="180px"></vxe-table-column>
+          <vxe-table-column field="ws80" title="80米风速(m/s)" width="180px"></vxe-table-column>
+          <vxe-table-column field="wd80" title="80米风向(°)" width="180px"></vxe-table-column>
+          <vxe-table-column field="ws90" title="90米风速(m/s)" width="180px"></vxe-table-column>
+          <vxe-table-column field="wd90" title="90米风向(°)" width="180px"></vxe-table-column>
+          <vxe-table-column field="ws100" title="100米风速(m/s)" width="180px"></vxe-table-column>
+          <vxe-table-column field="wd100" title="100米风向(°)" width="180px"></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>
@@ -105,11 +98,10 @@ export default {
     return {
       wsChart: null,
       wdChart: null,
-      activeName: 'first',
       dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 5 * 1000 * 60],
       total: 0,
       sortOrder: 'asc',
-      pageSize: 10,
+      pageSize: 7,
       currentPage: 1,
       stationList: [],
       stationCode: [],
@@ -447,9 +439,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)"
@@ -689,7 +681,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) {
@@ -725,18 +717,6 @@ export default {
   },
   computed: {},
   methods: {
-    tabClick(tab) {
-      if (this.activeName == 'second') {
-        this.$nextTick(function () {
-          this.wsChart.resize();
-        })
-      }
-      if (this.activeName == 'three') {
-        this.$nextTick(function () {
-          this.wdChart.resize();
-        })
-      }
-    },
     nameFormat({cellValue, row, column}) {
       const item = this.nameList.find(item => item.value === cellValue)
       return item ? item.label : ''
@@ -782,7 +762,7 @@ export default {
       const param = {
         "type": 'E2',
       }
-      this.$axios.get('/electricfield/findByType',{params: param}).then(response => {
+      this.$axios.get('/electricfield/findByType', {params: param}).then(response => {
         this.stationList = response.data
         if (this.stationList.length > 0) {
           this.stationCode = this.stationList[0].value
@@ -796,7 +776,7 @@ export default {
         backgroundColor: 'transparent',
         title: {
           top: 20,
-          text: '测风塔风速',
+          text: '风速图',
           textStyle: {
             fontWeight: 'normal',
             fontSize: 16,
@@ -814,7 +794,7 @@ export default {
         },
         legend: {
           top: 20,
-          width: '70%',
+          width: '100%',
           icon: 'rect',
           itemWidth: 14,
           itemHeight: 5,
@@ -828,15 +808,12 @@ export default {
           selected: {}
         },
         dataZoom: [{
-          show: true,
+          show: false,
           realtime: true,
-          start: 0,
-          end: 100,
+          showDetail: false,
           left: "15%",
           right: "15%",
-          // textStyle: {
-          // color: this.lineColor
-          // }
+          handleSize: 0,
         }, {
           type: 'inside'
         }],
@@ -946,6 +923,16 @@ export default {
           },
           selected: {}
         },
+        title: {
+          top: 20,
+          text: '风向玫瑰图',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            // color: this.lineColor
+          },
+          left: '15%'
+        },
         tooltip: {
           confine: true,
           trigger: 'axis',