站端气象站数据查询图标和列表在同一页面展示

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

@@ -31,51 +31,45 @@
       </el-form>
     </div>
     <div style="padding-top: 10px">
-      <el-tabs type="card" v-model="activeName" @tab-click="tabClick">
-        <el-tab-pane label="列表" name="first">
-          <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="150px" fixed="left"></vxe-table-column>
-            <vxe-table-column field="globalR" title="总辐射(W/㎡)" ></vxe-table-column>
-            <vxe-table-column field="directR" title="直接辐射(W/㎡)" ></vxe-table-column>
-            <vxe-table-column field="diffuseR" title="散射辐射(W/㎡)" ></vxe-table-column>
-            <vxe-table-column field="airT" title="温度(℃)" ></vxe-table-column>
-            <vxe-table-column field="rh" title="湿度(%)" ></vxe-table-column>
-            <vxe-table-column field="p" title="气压(kPa)" ></vxe-table-column>
-            <vxe-table-column field="cellT" title="电池板温度(℃)" ></vxe-table-column>
-            <vxe-table-column field="ws" title="风速(m/s)" ></vxe-table-column>
-            <vxe-table-column field="wd" title="风向(°)" ></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="fscharts"></div>
-        </el-tab-pane>
-        <el-tab-pane label="湿度、压强图" name="three">
-          <div style="float:left;width: 95%;height: 550px" id="sdcharts"></div>
-        </el-tab-pane>
-      </el-tabs>
+      <div style="display: flex">
+        <div style="float:left;width: 50%;height: 350px" id="fscharts"></div>
+        <div style="float:left;width: 50%;height: 350px" id="sdcharts"></div>
+      </div>
+      <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="150px" fixed="left"></vxe-table-column>
+        <vxe-table-column field="globalR" title="总辐射(W/㎡)"></vxe-table-column>
+        <vxe-table-column field="directR" title="直接辐射(W/㎡)"></vxe-table-column>
+        <vxe-table-column field="diffuseR" title="散射辐射(W/㎡)"></vxe-table-column>
+        <vxe-table-column field="airT" title="温度(℃)"></vxe-table-column>
+        <vxe-table-column field="rh" title="湿度(%)"></vxe-table-column>
+        <vxe-table-column field="p" title="气压(kPa)"></vxe-table-column>
+        <vxe-table-column field="cellT" title="电池板温度(℃)"></vxe-table-column>
+        <vxe-table-column field="ws" title="风速(m/s)"></vxe-table-column>
+        <vxe-table-column field="wd" title="风向(°)"></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>
 </template>
@@ -89,11 +83,10 @@ export default {
     return {
       fsChart: null,
       sdChart: 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: [],
@@ -108,7 +101,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) {
@@ -144,18 +137,6 @@ export default {
   },
   computed: {},
   methods: {
-    tabClick(tab) {
-      if (this.activeName == 'second') {
-        this.$nextTick(function () {
-          this.fsChart.resize();
-        })
-      }
-      if (this.activeName == 'three') {
-        this.$nextTick(function () {
-          this.sdChart.resize();
-        })
-      }
-    },
     nameFormat({cellValue, row, column}) {
       const item = this.nameList.find(item => item.value === cellValue)
       return item ? item.label : ''
@@ -201,7 +182,7 @@ export default {
       const param = {
         "type": 'E1',
       }
-      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
@@ -226,13 +207,13 @@ export default {
         }
       }
 
-      this.fsChart = echarts.init(document.getElementById('fscharts'),'dark')
+      this.fsChart = echarts.init(document.getElementById('fscharts'), 'dark')
 
       this.fsChart.setOption({
         backgroundColor: 'transparent',
         title: {
           top: 20,
-          text: '气象站辐射',
+          text: '辐照图',
           textStyle: {
             fontWeight: 'normal',
             fontSize: 16,
@@ -249,6 +230,7 @@ export default {
           }
         },
         legend: {
+          left:'center',
           top: 20,
           icon: 'rect',
           itemWidth: 14,
@@ -267,10 +249,8 @@ export default {
           }
         },
         dataZoom: [{
-          show: true,
+          show: false,
           realtime: true,
-          start: 0,
-          end: 100,
           left: "15%",
           right: "15%",
           // textStyle: {
@@ -391,21 +371,21 @@ export default {
     sddraw(timeaxis, sdData) {
       var p = []
       var rh = []
-      if(sdData!=null){
-        if(sdData.ps !=null){
+      if (sdData != null) {
+        if (sdData.ps != null) {
           p = sdData.ps
         }
-        if(sdData.rhs !=null){
+        if (sdData.rhs != null) {
           rh = sdData.rhs
         }
       }
-      this.sdChart = echarts.init(document.getElementById('sdcharts'),'dark')
+      this.sdChart = echarts.init(document.getElementById('sdcharts'), 'dark')
 
       this.sdChart.setOption({
         backgroundColor: 'transparent',
         title: {
           top: 20,
-          text: '气象站湿度、压强',
+          text: '气湿度、压强图',
           textStyle: {
             fontWeight: 'normal',
             fontSize: 16,
@@ -422,6 +402,7 @@ export default {
           }
         },
         legend: {
+          left:'center',
           top: 20,
           icon: 'rect',
           itemWidth: 14,
@@ -433,16 +414,14 @@ export default {
             fontSize: 12,
             // color: this.lineColor
           },
-          selected:{
-            '压强':true,
-            '湿度':true
+          selected: {
+            '压强': true,
+            '湿度': true
           }
         },
         dataZoom: [{
-          show: true,
+          show: false,
           realtime: true,
-          start: 0,
-          end: 100,
           left: "15%",
           right: "15%",
           // textStyle: {