focus/ipfcst-console/src/main/frontend/views/dataquery/nwp/index.vue

<template>
  <div class="chart-container">
    <br/>
    <div class="filter">
      <div class="startTime" style="display: inline-block">
        <span class="timeText" style="font-weight: bold;font-size: 14px">&#12288;起始时间：</span>
        <el-date-picker
          v-model="startTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="endTime" style="display: inline-block">
        <span class="timeText" style="font-weight: bold;font-size: 14px">&#12288;截止时间：</span>
        <el-date-picker
          v-model="endTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>
    <br/>
    <div class="filter">
      <div style="display: inline-block">
        <span style="font-weight: bold;font-size: 14px">场站名称：</span>
        <el-select style="width:250px" clearable v-model="stationCode" size="small">
          <el-option
            v-for="item in stationList"
            :key="item.stationCode"
            :label="item.name"
            :value="item.stationCode">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6;font-size: 13px">{{ item.stationCode }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="timeQuery" style="display: inline-block">
        <el-button size="small" :loading="loading" @click="dateQuery">&#12288;查询</el-button>
      </div>


    </div>

    <div class="content">
      <el-tabs type="card" v-model="activeName" @tab-click="Byresize">
        <el-tab-pane label="图表" name="first">
          <chart :drawData=this.drawData :resizeKey=this.resizeKey
          />
        </el-tab-pane>
        <el-tab-pane label="表格" name="second">
          <div class="tableContent">
            <vxe-grid
              id="nwpTable"
              ref="nwpRef"
              border
              export-config
              :loading="loading"
              @sort-change="sortChangeEvent"
              :custom-config="{storage: true, checkMethod: checkColumnMethod}"
              :auto-resize="true"
              highlight-hover-row
              max-height="90%"
              :cell-style="{background:'white',color:'black',border:'black'}"
              align="center"
              :columns="tableColumn"
              :data="tableData">
            </vxe-grid>
            <div class="rtPageturning">
              <vxe-pager
                background
                :loading="loading"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                :total="total"
                @page-change="handlePageChange"
                :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
              </vxe-pager>
            </div>
          </div>
          <!-- <Table height="100%" width="100%" :queryTime=this.queryTime @sendLoading="getLoadingFormTable"></Table>-->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Chart from './charts'
import resize from '../../../components/Charts/mixins/resize'

export default {
  name: 'nwp',
  components: {Chart},
  mixins: [resize],
  data() {
    return {
      stationCode: '',
      stationList: [],
      tableColumn: [],
      chart: null,
      queryStartTime: new Date(new Date().toLocaleDateString()).getTime() - 60 * 60 * 24 * 1000 * 10,
      queryEndTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 * 10,
      startTime: new Date(new Date().toLocaleDateString()).getTime() - 60 * 60 * 24 * 1000 * 10,
      endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 * 10,
      loading: true,
      drawLoading: true,
      tableLoading: true,
      resizeKey: 1,
      activeName: 'first',
      drawData: {datas: [], times: []},
      tableData: [],
      statisticsData: [],
      total: 0,
      sortOrder: 'asc',
      pageSize: 10,
      currentPage: 1,
      showToolBar: false

    }
  },
  created() {
    this.$nextTick(() => {
      // 手动将表格和工具栏进行关联
      this.$refs.nwpRef.connect(this.$refs.nwpToolBar)
    })
  },
  mounted() {
    this.getStationList()
  },
  methods: {
    getStationList() {
      this.$axios.get('/electricField/getElectricField').then((res) => {
        this.stationList = res.data
      }).catch((error) => {
        this.$message.error('获取场站下拉框出错' + error)
      })
      this.loading = false
    },
    getDraw(startTime, endTime, stationCode) {
      this.drawLoading = true
      this.$axios.get('/nwp/' + startTime + '/' + endTime + '/' + stationCode).then((res) => {
        this.drawData = res.data
        this.drawLoading = false
        if (!this.drawLoading && !this.tableLoading) {
          this.loading = false
        }
      }).catch((error) => {
        this.drawLoading = false
        if (!this.drawLoading && !this.tableLoading) {
          this.loading = false
        }
        this.$message.error('查询实时预测短期echarts出错' + error)
      })

    },
    getTable() {
      this.tableLoading = true
      this.$axios.get('/nwp/' + this.queryStartTime + '/' + this.queryEndTime + '/' + this.stationCode + '/' + this.currentPage + '/' + this.pageSize + '?sortOrder=' + this.sortOrder).then((res) => {
        this.tableData = res.data.content
        // 表分页格数据总条数
        this.total = res.data.count
        this.statisticsData = res.data.statistics
        const cName = res.data.cName

        this.tableColumn = [
          {field: 'preTime', title: cName.preTime, formatter: this.dateFormat, minWidth: "150", width: "180"},
          {field: 'scTime', title: cName.scTime, minWidth: "150"},
          {field: 't', title: cName.t, minWidth: "90"},
          {field: 'rh', title: cName.rh, minWidth: "90"},
          {field: 'pressure', title: cName.pressure, minWidth: "90"},
          {field: 'swr', title: cName.swr, minWidth: "90"},
          {field: 'directRadiation', title: cName.directRadiation, minWidth: "90"},
          {field: 'diffuseRadiation', title: cName.diffuseRadiation, minWidth: "90"},
          {field: 'ws10', title: cName.ws10, minWidth: "90"},
          {field: 'ws30', title: cName.ws30, minWidth: "90"},
          {field: 'ws50', title: cName.ws50, minWidth: "90"},
          {field: 'ws70', title: cName.ws70, minWidth: "90"},
          {field: 'ws80', title: cName.ws80, minWidth: "90"},
          {field: 'ws90', title: cName.ws90, minWidth: "90"},
          {field: 'ws100', title: cName.ws100, minWidth: "90"},
          {field: 'ws170', title: cName.ws170, minWidth: "90"},
          {field: 'wd10', title: cName.wd10, minWidth: "90"},
          {field: 'wd30', title: cName.wd30, minWidth: "90"},
          {field: 'wd50', title: cName.wd50, minWidth: "90"},
          {field: 'wd70', title: cName.wd70, minWidth: "90"},
          {field: 'wd80', title: cName.wd80, minWidth: "90"},
          {field: 'wd90', title: cName.wd90, minWidth: "90"},
          {field: 'wd100', title: cName.wd100, minWidth: "90"},
          {field: 'wd170', title: cName.wd170, minWidth: "90"},
        ]
        this.tableLoading = false
        if (!this.drawLoading && !this.tableLoading) {
          this.loading = false
        }
      }).catch((error) => {
        this.tableLoading = false
        if (!this.drawLoading && !this.tableLoading) {
          this.loading = false
        }
        this.$message.error('查询table出错' + error)
      })
      this.tableLoading = false
      this.loading = false
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage

      if (this.pageSize != pageSize) {
        this.currentPage =1
      }
      this.pageSize = pageSize
      this.startTime = this.queryStartTime
      this.endTime = this.queryEndTime
      this.loading = true
      this.getTable();
    },
    dateFormat({cellValue, row, column}) {
      return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
    },
    sortChangeEvent({column, property, order}) {
      if (order == null) {
        order = 'asc'
      }
      this.currentPage = 1
      this.sortOrder = order
      this.loading = true
      this.getTable()
    },

    checkColumnMethod({column}) {
      if (column.property === 'preTime') {
        return false
      }
      return true
    },
    dateQuery() {
      this.loading = true
      if (this.endTime <= this.startTime) {
        this.$message.error("开始时间不能小于结束时间")
        this.startTime = this.queryStartTime
        this.endTime = this.queryEndTime
        this.loading = false
        return
      }
      if (this.endTime - this.startTime > 60 * 60 * 24 * 1000 * 31) {
        this.startTime = this.queryStartTime
        this.endTime = this.queryEndTime
        this.$message.error("只能最多查询31天的数据哦")
        this.loading = false
        return
      }
      this.queryStartTime = this.startTime
      this.queryEndTime = this.endTime
      if (this.stationCode == '') {
        this.$message.error("场站编码不能为空")
        this.loading = false
        return
      }

      this.getDraw(this.queryStartTime, this.queryEndTime, this.stationCode)
      this.getTable()
    },
    Byresize(tab) {
      if (tab.name == 'first') {
        this.resizeKey++
        this.showToolBar = false
      } else {
        this.showToolBar = true
      }

    },
  }
}
</script>

<style scoped>

</style>