cpp/cpp-ui/src/views/regulation/dqRegulationRecord/index.vue

<template>
  <div class="app-container">
    <div class="dark-el-input dark-el-button">
      <el-form ref="queryForm" size="small" :inline="true" popper-class="cpp-popper">
        <el-form-item label="调控日期">
          <el-date-picker
            :picker-options="expireDateOption"
            :clearable="false"
            v-model="dateTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          popper-class="cpp-popper"
          />
        </el-form-item>
        <el-form-item label="场站名称">
          <el-select v-model="stationCode" placeholder="请选择" popper-class="cpp-popper">
            <el-option
              v-for="item in stationList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 5px" icon="el-icon-search" @click="beforeQuery">查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding-top: 10px">
      <vxe-table
        ref="xTable"
        align="center"
        class="mytable-style"
        auto-resize
        border
        resizable
        export-config
        highlight-current-row
        show-overflow
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
        <vxe-table-column field="tkDate" title="调控日期"></vxe-table-column>
        <vxe-table-column field="stationCode" title="调控场站" :formatter="stationCodeFormat"></vxe-table-column>
        <vxe-table-column field="forecastDate" title="上报预测日期"></vxe-table-column>
        <vxe-table-column field="regulationStatusEnum" title="调控下发状态"></vxe-table-column>
        <vxe-table-column field="uploadStatusEnum" title="上报状态"></vxe-table-column>
        <vxe-table-column field="createBy" title="调控人"></vxe-table-column>
        <vxe-table-column field="voltage" title="策略查看">
          <template slot-scope="scope">
            <img src="@/assets/images/camera.png" style="width: 25px;cursor:pointer;" @click="jumpCamera(scope.row)">
          </template>
        </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>

<script>
export default {
  name: 'inverterinfo',
  data() {
    return {
      expireDateOption: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime()],
      total: 0,
      sortOrder: 'asc',
      pageSize: 10,
      currentPage: 1,
      stationList: [],
      stationCode: [],
      searchForm: {},
      tableData: [],
      nameList:[],
      loading: false,
      modId: '',//备用id
    }
  },
  created(){
    // 获取场站下拉列表
    this.getStationCode()
  },
  mounted() {

  },
  computed: {},
  methods: {
    jumpCamera(row){
      console.log(row)
    },
    beforeQuery(){
      // 判断日期间隔最多不能超出30天
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])

      if(endTime-startTime> 60 * 60 * 24 * 1000*29){
        this.$message.error("最多只能查询30天的数据！")
        return
      }

      this.dataQuery()
    },
    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 : ''
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
    },
    dataQuery() {
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      if (startTime>endTime) {
        this.$message.error("开始时间不能大于结束时间")
        return
      }

      this.loading = true
      let queryParams = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
      }

      this.$axios.get('/dqRegulationController/getDqRegulationRecordList', {params: queryParams}).then(response => {
        this.tableData = response.data
        console.log(this.tableData)
        this.total = response.data.length
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    async getStationCode() {
      await this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
        if (this.stationList.length > 0) {
          this.stationCode = this.stationList[0].value
          // this.dataQuery()
        }
      })
    },
  }
}
</script>