iot-front-ui/src/components/business/analysis/water/BusinessWaterDetail.vue

<script>
import {requireImg} from "@/utils/requireImg";
import BusinessWaterDistributeChart from "@/components/business/analysis/water/BusinessWaterDistributeChart.vue";
import apiOperationAnalysis from "@/api/operation/apiOperationAnalysis";

export default {
  props: {
    queryData: Object
  },
  components: {
    BusinessWaterDistributeChart
  },
  data() {
    return {
      currCheck: '',
      tagCheck: {
        all: false,
        F15: false,
        F20: false,
      },
      tableData: [
        {
          icon: 'business/energy/water.png',
          title: '总用水量',
          num: 0,
          unit: 'm³'
        },{
          icon: 'business/energy/water.png',
          title: '人均成本',
          num: 0,
          unit: '元/人/年'
        }

      ]
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    requireImg,
    init() {
      this.handleTagSelect('all');
      this.getData();
    },
    refresh() {
      this.$util.asyncPromise(
          this.getData(),
          this.$refs.BusinessWaterDistributeChart.getData()
      )
    },
    handleTagSelect(item) {
      for (const key in this.tagCheck) {
        this.tagCheck[key] = false;
      }
      this.currCheck = item;
      this.tagCheck[item] = true;
    },
    getData() {
      return apiOperationAnalysis.getEnergyAnalysisWaterInfo(this.queryData).then(res=>{
        let data = this.$util.dataUtil.circleChartArrToObj(res);
        this.tableData[0].num = data['waterConsumptionTotal']
        this.tableData[1].num = data['perCapitaCost']
      })
    }

  },
}
</script>

<template>
  <div class="businessEnergyDetail">
    <div>

      <div class="dashboardPortrait-select">
        <a-checkable-tag v-model="tagCheck.all" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('all')">
          <span class="dashboardPortrait-select-text">总体用水</span>
        </a-checkable-tag>
        <a-checkable-tag v-model="tagCheck.F15" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('F15')">
          <span class="dashboardPortrait-select-text">15F</span>
        </a-checkable-tag>
        <a-checkable-tag v-model="tagCheck.F20" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('F20')">
          <span class="dashboardPortrait-select-text">20F</span>
        </a-checkable-tag>
      </div>

      <div>
        <BusinessEnergySummaryTbl :data="tableData" :title-width="100" :unit-width="80"/>
      </div>

      <div class="businessEnergyDetail-chart">
        <BusinessWaterDistributeChart ref="BusinessWaterDistributeChart" :query-data="queryData" :height="300"></BusinessWaterDistributeChart>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.businessEnergyDetail {
  width: 100%;
  height: 100%;
  .businessEnergyDetail-icon {
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
  }
  .businessEnergyDetail-num {
    display: inline-block;
    padding: 0 20px;
    color: #4D4D4D;
    background-color: #f7fbff;
  }
  .businessEnergyDetail-chart {
    margin-top: 50px;
  }
}
</style>