agmp_wpr_vue/src/views/home/index.vue

<template>
  <div style="padding: 20px">
    <el-card>
      <div style="display:flex">
       <select-tree 
          :placeholder="'年份'" 
          style="width:200px"
          :treeData="treeData"
          @handlerClick="handlerClick"
          :checkVal="cusareaName"
        ></select-tree>
        <el-select
          style="width: 200px;margin-left:16px;"
          laceholder="请选择您的年份"
          v-model="waterrightYear"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      <el-button
        style="margin-left: 16px;"
        type="primary"
        size="small"
        @click="handleSearch"
        >查询</el-button
      >
      </div>
    </el-card>
    <div
      v-loading="loading"
    >
      <el-card style="margin: 16px 0">
          <el-skeleton  v-if="isSkeleton"/>
        <el-row v-else :gutter="20"
          v-for="(item,index) in list"
          :key="index"
        >
        <el-col :span="4"
          v-for="(i,index) in item"
          :key="index"
        >
          <div class="card">
            <img :src="i.imageSrc"/>
            <div class="card_content_right">
              <span>{{i.title}}</span>
              <div>{{i.number}}</div>
            </div>
          </div>
        </el-col>
        </el-row>
      </el-card>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-card class="pie-container">
            <echartsPieVue 
              :useWaterNumTotal="useWaterNumTotal"
              :waterNum="waterNum"
            />
            <div class="pie-right">
              <div class="pie-item">
                <span>额定水量：</span>
                <span>{{ waterNum || 0 }} m³</span>
              </div>
              <div class="pie-item">
                <span>剩余水量：</span>
                <span>{{ waterBalance || 0 }} m³</span>
              </div>
              <div class="pie-item last-year">
                <span>去年同期节水：</span>
                <span>{{ waterSave || 0 }} m³</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  fill="none"
                >
                  <path
                    d="M6.66797 9.33335V3.16668C6.66797 2.79668 6.96931 2.50002 7.34131 2.50002H8.66131C8.74941 2.49914 8.83682 2.51573 8.91848 2.54884C9.00013 2.58195 9.07441 2.63091 9.13703 2.69291C9.19964 2.7549 9.24934 2.82869 9.28326 2.91001C9.31718 2.99133 9.33464 3.07857 9.33464 3.16668V9.33335H10.662C11.4 9.33335 11.6433 9.81068 11.202 10.4L8.80131 13.6C8.35597 14.1934 7.64331 14.1894 7.20131 13.6L4.80131 10.4C4.35597 9.80668 4.60131 9.33335 5.34064 9.33335H6.66797Z"
                    fill="#14A478"
                  />
                </svg>
              </div>
              <div class="pie-item">
                <span>节水率：</span>
                <span>{{ waterSaveProportion || 0}} m³</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-card>
            <echartsGradient
              :byMonthList="byMonthList"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getTree } from '@/api/tree.js'
import SelectTree from '@/components/SelectTree';
import { getHomeList } from '@/api/home/index.js'
import numberWells from './assets/number_wells.svg'
import electricity from './assets/electricity.svg'
import moneyIcon from './assets/money_icon.svg'
import waterYield from './assets/water_yield.svg'
import person from './assets/person.svg'
import area from './assets/area.svg'
import water from './assets/water.svg'
import time from './assets/time.svg'
import echartsPieVue from './components/echartsPie.vue'
import echartsGradient from './components/echartsGradient.vue'
export default {
  name: "Home",
  props: {},
  components:{
    echartsPieVue,
    echartsGradient,
    SelectTree,
  },
  data() {
    return {
      loading: true,
      options: [],
      byMonthList: [],
      treeData:[],
      cusareaName:'',
      areaId: '',
      area: '',
      isSkeleton: true,
      areaSelect: '',
      elecNumTotal: 0,
      farmerNum: 0,
      rechargeAmountTotal: 0,
      useMoneyPerMu: 0,
      useMoneyTotal: 0,
      useTimeTotal: 0,
      useWaterNumTotal: 0,
      useWaterPerMu: 0,
      waterBalance: 0,
      waterNum: 0,
      waterNumTotal: 0,
      waterSave: 0,
      waterSaveProportion: 0,
      waterrightYear: new Date().getFullYear(),
      list: [[{
        imageSrc: electricity,
        title: '水井数目(口)',
        number: 551
      },{
        imageSrc: numberWells,
        title: '使用电量(度)',
        number: 551 
      },{
        imageSrc: waterYield,
        title: '使用水量(方)',
        number: 551 
      },{
        imageSrc: moneyIcon,
        title: '使用金额(元)',
        number: 551 
      },{
        imageSrc: person,
        title: '用户数量(人)',
        number: 551 
      }],[{
        imageSrc: moneyIcon,
        title: '充值金额(元)',
        number: 551 
      },{
        imageSrc: area,
        title: '灌溉面积(亩)',
        number: 551 
      },{
        imageSrc: water,
        title: '亩均用水量(方)',
        number: 551 
      },{
        imageSrc: moneyIcon,
        title: '亩均用金额(元)',
        number: 551 
      },{
        imageSrc: time,
        title: '累计使用时间(H)',
        number: 551 
      }]]
    }
  },
  methods: {
    setYear() {
      this.options = []
      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
        })
      }
    },
    handlerClick(value) {
      this.areaId = value?.cusareaId
    },
    handleSearch() {
      this.getHomeListHandler()
     },
    async getArea() {
      this.setYear()
      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
      let tflag = true
      this.treeData.forEach(t => {
        if (t?.cusareaName == '全部') {
          tflag = false
        }
      })
      if (tflag) {
        this.treeData.unshift({
          id: '',
          cusareaId: '',
          cusareaName: '全部'
        })
      }
      this.cusareaName ||= this.treeData[0].cusareaName
      this.areaId = this.treeData[0].cusareaId
      this.getHomeListHandler()
    },
    async getHomeListHandler() { 
      const params = {
        areaId: this.areaId,
        year: this.waterrightYear
      }
      this.loading = true
      const res = await getHomeList(params)
      this.loading = false
      this.isSkeleton = false
      this.requestData = res?.data
      this.elecNumTotal = this.requestData.elecNumTotal
      this.farmerNum = this.requestData.farmerNum
      this.rechargeAmountTotal = this.requestData.rechargeAmountTotal
      this.useMoneyPerMu = this.requestData.useMoneyPerMu
      this.useMoneyTotal = this.requestData.useMoneyTotal
      this.useTimeTotal = this.requestData.useTimeTotal
      this.useWaterNumTotal = this.requestData.useWaterNumTotal
      this.useWaterPerMu = this.requestData.useWaterPerMu
      this.waterBalance = this.requestData.waterBalance
      this.waterNum = this.requestData.waterNum
      this.waterNumTotal = this.requestData.waterNumTotal
      this.waterSave = this.requestData.waterSave
      this.waterSaveProportion = this.requestData.waterSaveProportion
      this.byMonthList = this.requestData.byMonthList
      this.list = [[{
        imageSrc: numberWells,
        title: '水井数目(口)',
        number: this.waterNumTotal || 0
      }, {
        imageSrc: electricity,
        title: '使用电量(度)',
        number: this.elecNumTotal || 0
      }, {
        imageSrc: waterYield,
        title: '使用水量(m³)',
        number: this.useWaterNumTotal || 0
      }, {
        imageSrc: moneyIcon,
        title: '使用金额(元)',
        number: this.useMoneyTotal || 0
      }, {
        imageSrc: person,
        title: '用户数量(人)',
        number: this.farmerNum || 0
      }], [{
        imageSrc: moneyIcon,
        title: '充值金额(元)',
        number: this.rechargeAmountTotal || 0
      }, {
        imageSrc: area,
        title: '灌溉面积(亩)',
        number: this.areaSize || 0
      }, {
        imageSrc: water,
        title: '亩均用水量(m³)',
        number: this.useWaterPerMu || 0
      }, {
        imageSrc: moneyIcon,
        title: '亩均用金额(元)',
        number: this.useMoneyPerMu || 0
      }, {
        imageSrc: time,
        title: '累计使用时间(H)',
        number: this.useTimeTotal || 0
      }]]
    }
  },
  mounted() { 
    this.getArea()
  }
};
</script>

<style lang="scss" scoped>
@import './assets/home.scss'
</style>