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

<script>
import query from "@/components/common/query.vue";
import card from "@/components/common/card.vue";
import BusinessEnergyChart from "@/components/business/analysis/all/businessEnergyChart.vue";
import BusinessElectricChart from "@/components/business/analysis/electric/BusinessElectricChart.vue";
import BusinessWaterChart from "@/components/business/analysis/water/BusinessWaterChart.vue";
import BusinessHotChart from "@/components/business/analysis/hot/BusinessHotChart.vue";
import BusinessColdChart from "@/components/business/analysis/cold/BusinessColdChart.vue";
import BusinessPvChart from "@/components/business/analysis/pv/BusinessPvChart.vue";

import BusinessEnergyDetail from "@/components/business/analysis/all/businessEnergyDetail.vue";
import BusinessElectricDetail from "@/components/business/analysis/electric/BusinessElectricDetail.vue";
import BusinessWaterDetail from "@/components/business/analysis/water/BusinessWaterDetail.vue";
import BusinessHotDetail from "@/components/business/analysis/hot/BusinessHotDetail.vue";
import BusinessColdDetail from "@/components/business/analysis/cold/BusinessColdDetail.vue";
import BusinessPvDetail from "@/components/business/analysis/pv/BusinessPvDetail.vue";

import apiOperationAnalysis from "@/api/operation/apiOperationAnalysis";

export default {
  components: {
    query,
    card,

    BusinessEnergyChart,
    BusinessElectricChart,
    BusinessWaterChart,
    BusinessHotChart,
    BusinessColdChart,
    BusinessPvChart,

    BusinessEnergyDetail,
    BusinessElectricDetail,
    BusinessWaterDetail,
    BusinessHotDetail,
    BusinessColdDetail,
    BusinessPvDetail,
  },
  data() {
    return {
      queryData: {
        companyId: "0",
        floorId: "0",
        energy: "0",
        timeRange: this.$util.dateUtil.getNearlyMonthRange(),
      },
      oriCoreData: [],
      coreData: [
        {
          title: "总用电量(kWh)",
          num: 0,
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "总用水量(㎡)",
          num: 0,
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "总能耗成本(元)",
          num: 0,
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "人均能耗成本(元/人)",
          num: 0,
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          type: 1,
          title: "值得关注",
          showStar: true,
          content: "",
        },
      ],
    };
  },
  watch: {
    "queryData.energy": function (val) {
      this.handleTypeChange(val);
    },
  },
  created() {
    this.oriCoreData = JSON.parse(JSON.stringify(this.coreData));
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$store.loadingStore().loadingWithApi(this.getCoreData(), 2000);
    },
    handleTypeChange(type) {
      this.coreData = JSON.parse(JSON.stringify(this.oriCoreData));
      if ("electric" == type) {
        // 用电
        this.coreData[0].title = "总用电量(kWh)";
        this.coreData[1].title = "人均用电量(kWh/人)";
      } else if ("water" == type) {
        // 用水
        this.coreData[0].title = "总用水量(m³)";
        this.coreData[1].title = "人均用水量(m³/人)";
      } else if ("hot" == type) {
        // 用热
        this.coreData[0].title = "总用热量(焦)";
        this.coreData[1].title = "人均用热量(焦)";
      } else if ("cold" == type) {
        // 用冷
        this.coreData[0].title = "总用冷量(kWh)";
        this.coreData[1].title = "人均用冷量(kWh/人)";
      } else if ("pv" == type) {
        // 光伏
        this.coreData[0].title = "总发电量(kWh)";
        this.coreData[1].title = "平均发电量量(kWh/台)";
      } else {
        // 全部
        this.coreData[0].title = "总用量(kWh)";
        this.coreData[1].title = "总用量m³)";
      }

      if ("pv" == type) {
        this.coreData[2].title = "总盈利(元)";
        this.coreData[2].title = "平均盈利(元/台)";
      } else {
        this.coreData[2].title = "总能耗成本(元)";
        this.coreData[2].title = "平均能耗成本(元/人)";
      }
      this.getCoreData();
    },
    reset() {},
    search() {
      this.$util.asyncPromise(
        this.getCoreData(),
        this.$refs.anaChart.getData()
      );
      this.$refs.anaDetail.refresh();
    },
    getCoreData() {
      return apiOperationAnalysis.getCoreData(this.queryData).then((res) => {
        this.coreData[0].num = res.list[0].value;
        this.coreData[0].historyNum = res.list[0].compare;
        this.coreData[1].num = res.list[1].value;
        this.coreData[1].historyNum = res.list[1].compare;
        this.coreData[2].num = res.list[2].value;
        this.coreData[2].historyNum = res.list[2].compare;
        this.coreData[3].num = res.list[3].value;
        this.coreData[3].historyNum = res.list[3].compare;
        this.coreData[4].content = res.worthAttention;
      });
    },
  },
};
</script>

<template>
  <div>
    <div class="page-query-core">
      <query
        :show="['company', 'energy', 'time']"
        :query-data.sync="queryData"
        :reset="reset"
        :search="search"
        style="
          background: #fff;
          height: 60px;
          padding: 10px;
          border-radius: 5px;
          margin-bottom: 10px;
        "
      ></query>
      <card :title="'核心指标'">
        <CoreData :data-list="coreData"></CoreData>
      </card>
    </div>

    <div class="analysis-energy-body">
      <a-row :gutter="[12, 12]">
        <a-col :span="18">
          <div class="ioc-card-content">
            <card :title="'用电趋势'" v-if="queryData.energy == 'electric'">
              <div class="analysis-energy-body-left">
                <BusinessElectricChart
                  ref="anaChart"
                  :query-data="queryData"
                  :height="430"
                ></BusinessElectricChart>
              </div>
            </card>
            <card :title="'用水趋势'" v-else-if="queryData.energy == 'water'">
              <div class="analysis-energy-body-left">
                <BusinessWaterChart
                  ref="anaChart"
                  :query-data="queryData"
                  :height="430"
                ></BusinessWaterChart>
              </div>
            </card>
            <card :title="'用热趋势'" v-else-if="queryData.energy == 'hot'">
              <div class="analysis-energy-body-left">
                <div style="margin-top: 15px">
                  <BusinessHotChart
                    ref="anaChart"
                    :query-data="queryData"
                    :height="450"
                  ></BusinessHotChart>
                </div>
              </div>
            </card>
            <card :title="'用冷趋势'" v-else-if="queryData.energy == 'cold'">
              <div class="analysis-energy-body-left">
                <div style="margin-top: 15px">
                  <BusinessColdChart
                    ref="anaChart"
                    :query-data="queryData"
                    :height="450"
                  ></BusinessColdChart>
                </div>
              </div>
            </card>
            <card :title="'光伏趋势'" v-else-if="queryData.energy == 'pv'">
              <div class="analysis-energy-body-left">
                <div style="margin-top: 15px">
                  <BusinessPvChart
                    ref="anaChart"
                    :query-data="queryData"
                    :height="450"
                  ></BusinessPvChart>
                </div>
              </div>
            </card>
            <card :title="'能源趋势'" v-else-if="queryData.energy == '0'">
              <div class="analysis-energy-body-left">
                <div style="margin-top: 15px">
                  <BusinessEnergyChart
                    ref="anaChart"
                    :query-data="queryData"
                    :height="450"
                  ></BusinessEnergyChart>
                </div>
              </div>
            </card>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="ioc-card-content">
            <card :title="'用电分析'" v-if="queryData.energy == 'electric'">
              <div class="analysis-energy-body-right">
                <BusinessElectricDetail
                  ref="anaDetail"
                  :query-data="queryData"
                />
              </div>
            </card>
            <card :title="'用水分析'" v-else-if="queryData.energy == 'water'">
              <div class="analysis-energy-body-right">
                <BusinessWaterDetail ref="anaDetail" :query-data="queryData" />
              </div>
            </card>
            <card :title="'用热分析'" v-else-if="queryData.energy == 'hot'">
              <div class="analysis-energy-body-right">
                <div style="margin-top: 15px">
                  <BusinessHotDetail ref="anaDetail" :query-data="queryData" />
                </div>
              </div>
            </card>
            <card :title="'用冷分析'" v-else-if="queryData.energy == 'cold'">
              <div class="analysis-energy-body-right">
                <div style="margin-top: 15px">
                  <BusinessColdDetail ref="anaDetail" :query-data="queryData" />
                </div>
              </div>
            </card>
            <card :title="'光伏分析'" v-else-if="queryData.energy == 'pv'">
              <div class="analysis-energy-body-right">
                <div style="margin-top: 15px">
                  <BusinessPvDetail ref="anaDetail" :query-data="queryData" />
                </div>
              </div>
            </card>
            <card :title="'能源分析'" v-else-if="queryData.energy == '0'">
              <div class="analysis-energy-body-right">
                <div style="margin-top: 15px">
                  <BusinessEnergyDetail
                    ref="anaDetail"
                    :query-data="queryData"
                  />
                </div>
              </div>
            </card>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style lang="less" scoped>
.analysis-energy-body {
  margin-top: 12px;
  .analysis-energy-body-left {
    height: 480px;
    overflow: hidden;
  }
  .analysis-energy-body-right {
    height: 480px;
    overflow: hidden;
  }
}
</style>