cpp/cpp-ui/src/views/maintenancerelated/overhaulplanrecords/index.vue

<template>
  <div class="app-container">
    <el-form :inline="true" size="small" class="dark-el-input dark-el-button">
      <el-form-item label="场站名称">
        <el-select v-model="stationCode" placeholder="请选择" style="width: 255px" 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" size="mini" style="margin-left: 5px" icon="el-icon-search"
                   @click="queryByStationCode">查询
        </el-button>
      </el-form-item>
    </el-form>

    <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
        max-height="700"
        :data="tableData">
        <vxe-table-column field="stationCode" title="场站名称" :formatter="codeChangeName"></vxe-table-column>
        <vxe-table-column field="startTime" :formatter="formatDateTime" title="检修开始时间"></vxe-table-column>
        <vxe-table-column field="endTime" :formatter="formatDateTime" title="检修结束时间"></vxe-table-column>
        <vxe-table-column field="overhaulCapacity" title="检修容量（MW）"></vxe-table-column>
        <vxe-table-column field="forecastModel" title="预测模型"></vxe-table-column>
        <vxe-table-column field="useNum" title="使用次数"></vxe-table-column>
        <vxe-table-column field="updateTime" :formatter="formatDateTime" title="最近一次使用时间"></vxe-table-column>
      </vxe-table>
      <vxe-pager
        background
        :loading="loading"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :total="total"
        @page-change="handlePageChange"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
      </vxe-pager>
    </div>
  </div>
</template>


<script>
export default {
  name: 'overhaulPlanRecords',
  data() {
    return {
      title: "",
      // 是否显示弹出层
      open: false,
      edit: false,
      total: 0,
      sortOrder: 'asc',
      pageSize: 10,
      currentPage: 1,
      stationList: [],
      stationCode: '',
      stationName: undefined,
      searchForm: {},
      tableData: [],
      loading: false,
      modId: '',
      checkSign: '',
      capacity: null,
    }
  },
  created() {
    this.getStationCode()
  },
  mounted() {

  },
  computed: {},
  methods: {
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.queryByStationCode();
    },
    //日期转换器
    formatDateTime(cellValue) {
      if (cellValue.cellValue == null) {
        return ''
      }
      const date = new Date(cellValue.cellValue)
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
      const h = " " + (date.getHours() < 10 ? '0' : '') + date.getHours() + ':'
      const m = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes() + ':'
      const s = (date.getSeconds() < 10 ? '0' : '') + date.getSeconds()
      return Y + M + D + h + m + s
    },
    getStationCode() {
      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.queryByStationCode()
        } else {
          this.queryByStationCode()
        }
      })
    },
    queryByStationCode() {
      this.loading = true
      const param = {
        "currentPage": this.currentPage,
        "pageSize": this.pageSize,
        "stationCode": this.stationCode,
      }
      this.$axios.get('/overhaulPlanRecords/findByStationCode', {params: param}).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    codeChangeName(row){
      var codeList = this.stationList
      for (let i = 0; i < codeList.length; i++) {
        if (row.cellValue == codeList[i].value){
          return codeList[i].label
        }
      }
    }
  }
}
</script>