agmp_wpr_vue/src/views/dataReport/intakeWaterAnalysis.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>
          <el-select
            v-model="currentYear"
            style="width: 250px;margin-right: 16px;"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button
            type="primary"
            size="small"
            @click="handleSearch"
            >查询</el-button
          > 
        </div>
        <i
          class="el-icon-download"
          @click="downloadHandler"
        ></i>
      </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 { getAreaList } 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:"waterManage",
  components: { BTable,DataReportLeft},
  data() {
    return {
      activeName:'first',
      currentYear: '',
      loading: false,
      associationManageShow: false,
      treeData: [],
      currentClickId: '',
      options: [],
      queryParams: {},
      columns: [
        {
          label: '区域名称',
          prop: 'cusareaName',
          customRender: '',
          align: 'center'
        },
        {
          label: '实际用水量（m³）',
          prop: 'waterNumTotal',
          customRender: '',
          align: 'center'
        },
        {
          label: '额定用水量（m³）',
          prop: 'waterrightAmount',
          customRender: '',
          align: 'center'
        },
        {
          label: '面积',
          prop: 'waterrightAreasize',
          customRender: '',
          align: 'center'
        },
        {
          label: '实际亩均用水量（m³）',
          prop: 'actualPerMuWater',
          customRender: '',
          align: 'center'
        },
        {
          label: '额定亩均水量（m³）',
          prop: 'ratedPerMuWater',
          customRender: '',
          align: 'center'
        },
        {
          label: '使用占计划比（%）',
          prop: 'proportion',
          customRender: '',
          align: 'center'
        }
      ]
    };
  },
  methods: {
    handleSearch() {
      this.$refs.tableRef.refresh(true);
    },
    async loadData(parameter) {
      this.setYear()
      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 params = {
        areaId: this.currentClickId,
        year: this.currentYear
      }
      const payload = omit(assign({}, parameter, params), []);
      return getAreaList(payload);
    },
    downloadHandler() {
      this.download(
        'wpr/stat/area/export',
        {
          ...this.queryParams
        },
        `FmsCrop_${new Date().getTime()}.xlsx`
      );
    },
    setYear() {
      let date = new Date
      let currentYear = date.getFullYear()
      this.currentYear = currentYear
      for (let i = 0; i < 5; i++) {
        this.options.push({
          label: currentYear - i,
          value: currentYear - i
        })  
      }
    },
   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>