agmp_wpr_vue/src/views/dataReport/waterConsumption.vue

<template>
  <el-row class="el-row-container" v-loading="loading">
    <el-col :span="4" style="height:100%;padding-bottom:32px;">
      <el-card style="margin:16px;height: 100%; overflow-y: auto">
        <data-report-left @setCurrentData="setCurrentData" :treeData="treeData"></data-report-left>
      </el-card>
    </el-col>
    <el-col :span="20" style="padding: 16px 16px 16px 0; height: 100%;">
      <el-card style="height: 100%; overflow-y: auto">
        <el-col :span="24" class="elrow-main__col-top">
          <div style="display:flex;width:100%;justify-content:space-between;align-items:center">
            <div>
              <el-date-picker
                v-model="dateValue"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 300px; margin-right: 20px"
              >
              </el-date-picker>
              <el-input style="width: 250px;margin-right: 16px;" placeholder="请输入机井名称" v-model="keyword" />
              <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
            </div>
            <i
              class="el-icon-download"
              @click="downloadHandler"
            ></i>
          </div>
        </el-col>
        <el-col :span="24" class="elrow-main__col-bottom">
          <b-table ref="tableRef" :args="{ 'highlight-current-row': true }" :data="loadData" :columns="columns"
            isShowIndex>
          </b-table>
        </el-col>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getWaterList } from '@/api/statistics/index.js'
import { getTree } from '@/api/tree.js'
import BTable from '@/components/Table/index.vue';
import DataReportLeft from '@/components/DataReportLeft/index.vue'
import { assign, omit } from 'lodash-es';

export default {
  name: "waterConsumption",
  components: { BTable, DataReportLeft },
  data() {
    return {
      currentYear: '',
      keyword: '',
      loading: false,
      treeData: [],
      currentClickId: '',
      dateValue: [],
      areaId: '',
      queryParams: {},
      columns: [
        {
          label: '机井名称',
          prop: 'waterName',
          customRender: '',
          align: 'center'
        }, {
          label: '终端编号',
          prop: 'waterNum',
          customRender: '',
          align: 'center'
        },
        {
          label: '累计用水量（m³）',
          prop: 'waterNumTotal',
          customRender: '',
          align: 'center'
        },
        {
          label: '灌溉次数',
          prop: 'count',
          customRender: '',
          align: 'center'
        },
        {
          label: '累计用电量（度）',
          prop: 'elecNumTotal',
          customRender: '',
          align: 'center'
        }
      ]
    };
  },
  methods: {
    handleSearch() {
      this.$refs.tableRef.refresh(true);
    },
    downloadHandler() {
      const [startTime, endTime] = this.dateValue ??= []
      const params = {
        areaId: this.currentClickId,
        startTime,
        endTime,
        keyword: this.keyword
      }
      this.download(
        'wpr/stat/water/export',
        {
          ...params
        },
        `FmsCrop_${new Date().getTime()}.xlsx`
      );
    },
    async loadData(parameter) {
      if (!this.currentClickId) {
        const treeList = this.$store.state.tree.treeList
        let res = []
        if (treeList.code === '000000') {
          res = treeList
        } else {
          res = await getTree()
          this.$store.dispatch('tree/setTree', res)
        }
        this.treeData = res?.data
        this.currentClick = res?.data[0]
        this.currentClickId = this.currentClick?.cusareaId
      }
      
      const [startTime, endTime] = this.dateValue ??= []
       const params = {
        areaId: this.currentClickId,
        startTime,
        endTime,
        keyword: this.keyword
      }
      const payload = omit(assign({}, parameter, params), []);
      return getWaterList(payload);
    },
    setCurrentData(areaId) {
      this.currentClickId = areaId
      this.$refs.tableRef.refresh(false);
    },
  }
};
</script>

<style lang="scss" scoped>
.el-row-container {
  height: 100%;
}

.elrow-main__col-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;

  .top-left {
    height: 100%;
    display: flex;
    align-items: center;

    i {
      background-color: #40d5ec;
      height: 45%;
      width: 5px;
      margin-right: 5px;
    }
  }
  .el-icon-download{
    font-size:26px;
    color:#14A478;
    cursor: pointer;
  }
}
</style>