iot-front-ui/src/components/business/analysis/pv/BusinessPvDetail.vue

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

export default {
  props: {
    queryData: Object
  },
  components: {
    businessPvMoneyChart
  },
  data() {
    return {
      running: 0,
      total: 0,
      tableData: [
        {
          icon: 'business/energy/pv.png',
          title: '总发电量',
          num: 0,
          unit: 'kWh'
        },{
          icon: 'business/energy/pv.png',
          title: '发电时间',
          num: 0,
          unit: 'h'
        },{
          icon: 'business/energy/pv.png',
          title: '总收益',
          num: 0,
          unit: '元'
        }

      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    requireImg,
    init() {
      this.getData()
    },
    refresh() {
      this.$util.asyncPromise(
          this.getData(),
          this.$refs.BusinessHotDistributeChart.getData()
      )
    },
    getData() {
      return apiOperationAnalysis.getEnergyAnalysisCpv(this.queryData).then(res=>{
        let data = this.$util.dataUtil.circleChartArrToObj(res)
        this.running = data['function']
        this.total = data['whole']
        this.tableData[0].num = data['electricTotal']
        this.tableData[1].num = data['electricDate']
        this.tableData[2].num = data['profitTotal']
      })
    }
  },
}
</script>

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

      <div class="businessEnergyDetail-top">
        <a-row>
          <a-col :span="11">
            <div style="margin: 10% 0 0 30%">
              <a-avatar :size="28" :src="requireImg('business/energy/device-pv.png')"></a-avatar>
              <span style="font-size: 20px;display: inline-block;margin-left: 20%">{{ running }}</span>
            </div>
            <div style="margin: 10% 0 0 30%;color: #B2B2B2;font-size: 14px">正在运行(台)</div>
          </a-col>
          <a-col :span="2">
            <div style="text-align: center;width: 100%;line-height: 60px;font-size: 20px">/</div>
          </a-col>
          <a-col :span="11">
            <div style="margin: 10% 0 0 30%">
              <a-avatar :size="28" :src="requireImg('business/energy/device-pv.png')"></a-avatar>
              <span style="font-size: 20px;display: inline-block;margin-left: 20%">{{ total }}</span>
            </div>
            <div style="margin: 10% 0 0 30%;color: #B2B2B2;font-size: 14px">总数量(台)</div>
          </a-col>
        </a-row>
      </div>

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

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

<style lang="less" scoped>
.businessEnergyDetail {
  width: 100%;
  height: 100%;
  .businessEnergyDetail-top {
    background-color: #f7fbff;
    width: 85%;
    margin: 0 auto 8px;
    height: 100px;
  }
  .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 {
    width: 100%;
    margin: 30px auto 12px;
    padding: 0 15px;
  }
}
</style>