agmp_wpr_vue/src/views/dataReport/saveWaterAnalysis.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">
            <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-input style="width: 250px;margin-right: 16px;"
              placeholder="请输入农户编号/姓名/电话"
              v-model="keyword"
            />
            <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
          </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 { getFarmerList } 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: '',
      keyword: '',
      loading: false,
      associationManageShow: false,
      treeData: [],
      currentClickId: '',
      options: [],
      columns: [
        {
          label: '年度',
          prop: 'year',
          customRender: '',
          align: 'center'
        },
        {
          label: '区域',
          prop: 'cusareaName',
          customRender: '',
          align: 'center'
        },
        {
          label: '农户',
          prop: 'farmerName',
          customRender: '',
          align: 'center'
        },
        {
          label: '额定水权',
          prop: 'farmerWramount',
          customRender: '',
          align: 'center'
        },
        {
          label: '已用水权',
          prop: 'waterNumTotal',
          customRender: '',
          align: 'center'
        },
        {
          label: '去年同期节水比率',
          prop: 'proportion',
          customRender: '',
          align: 'center'
        },
        {
          label: '土地面积（亩）',
          prop: 'farmerAreasize',
          customRender: '',
          align: 'center'
        }, {
          label: '剩余水权（立方）',
          prop: 'farmerWrbalance',
          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,
        keyword: this.keyword
      }
      const payload = omit(assign({}, parameter, params), []);
      return getFarmerList(payload);
    },
    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;
    }
  }
}
</style>