iot-front-ui/src/components/doubleCarbon/overview/doubleCarbonOverview.vue

<script>
import Card from "@/components/common/card.vue";
import CoreData from "@/components/common/coreData.vue";
import Query from "@/components/common/query.vue";

import CarbonEmissionCharts from "@/components/doubleCarbon/overview/charts/carbonEmissionChart.vue";
import CarbonQuotaChart from "@/components/doubleCarbon/overview/charts/carbonQuotaChart.vue";
import DoubleCarbonNews from "@/components/doubleCarbon/overview/charts/doubleCarbonNews.vue";
import CarbonOverviewPercent from "@/components/doubleCarbon/overview/charts/carbonOverviewPercent.vue";
import apiCarbonOverview from "@/api/carbon/apiCarbonOverview";

export default {
  components: {
    Card,
    CoreData,
    Query,
    CarbonEmissionCharts,
    CarbonQuotaChart,
    DoubleCarbonNews,
    CarbonOverviewPercent,
  },
  data() {
    return {
      queryData: {
        companyId: "0",
        timeRange: this.$util.dateUtil.getNearlyMonthRange(),
      },
      companyOptions: [],
      coreData: [
        {
          title: "碳配额存量",
          num: 0,
          unit: '%',
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "碳排放总量(tco2e)",
          num: 0,
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "单位面积碳排放(tco2e/m²)",
          num: 0,
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "人均碳排放(tco2e/人)",
          num: 0,
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "光伏减排(tco2e)",
          num: 0,
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          type: 1,
          title: "值得关注",
          showStar: true,
          content: "",
        },
      ],
      newsData: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$util.asyncPromise(this.getCoreData(), this.getNewsData());
    },
    reset() {},
    search(data) {
      this.$util.asyncPromise(
        this.getCoreData(),
        this.getNewsData(),
        this.$refs.CarbonEmissionCharts.getData(),
        this.$refs.CarbonQuotaChart.getData(),
        this.$refs.CarbonOverviewPercent.getData()
      );
    },
    getCoreData() {
      return apiCarbonOverview.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].num = res.list[4].value;
        this.coreData[4].historyNum = res.list[4].compare;
        this.coreData[5].content = res.worthAttention;
      });
    },
    getNewsData() {
      let params = {
        timeRange: {
          startDate: '2022/04/25',
          endDate: '2022/06/07'
        }
      }
      return apiCarbonOverview.getCarbonNews(params).then((res) => {
        this.newsData = res;
      });
    },
  },
};
</script>

<template>
  <div class="doubleCarbon-overview">
    <div class="page-query-core">
      <a-row>
        <a-col
          style="
            background: #fff;
            height: 60px;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
          "
        >
          <div style="width: 100%">
            <Query
              :show="['company', 'time']"
              :query-data.sync="queryData"
              :reset="reset"
              :search="search"
              :company-options="companyOptions"
            ></Query>
          </div>
        </a-col>
        <a-col>
          <div style="width: 100%">
            <Card title="核心指标">
              <CoreData :data-list="coreData"></CoreData>
            </Card>
          </div>
        </a-col>
      </a-row>
    </div>

    <div style="margin-top: 12px">
      <a-row :gutter="[12, 12]">
        <a-col :span="18">
          <div class="ioc-card-content">
            <Card title="碳排放分析">
              <div class="doubleCarbon-overview-analyse">
                <CarbonEmissionCharts
                  ref="CarbonEmissionCharts"
                  :query-data="queryData"
                  :height="450"
                />
              </div>
            </Card>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="ioc-card-content">
            <Card title="碳配额构成">
              <div class="doubleCarbon-overview-quota">
                <CarbonQuotaChart
                  ref="CarbonQuotaChart"
                  :query-data="queryData"
                  :height="450"
                />
              </div>
            </Card>
          </div>
        </a-col>
        <a-col :span="18">
          <div class="ioc-card-content">
            <Card title="双碳新闻">
              <div style="width: 97%; margin: 0 auto">
                <a-divider style="margin: 0; padding: 0"></a-divider>
              </div>
              <div class="doubleCarbon-overview-news">
                <div style="height: 280px;overflow-y: auto">
                  <DoubleCarbonNews :data="newsData" />
                </div>
              </div>
            </Card>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="ioc-card-content">
            <Card title="碳排放占比">
              <div class="doubleCarbon-overview-percent">
                <CarbonOverviewPercent
                  ref="CarbonOverviewPercent"
                  :query-data="queryData"
                  :height="300"
                />
              </div>
            </Card>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style lang="less" scoped>
.doubleCarbon-overview {
  width: 100%;
  height: auto;
  padding-bottom: 15px;
  vertical-align: top;

  .doubleCarbon-overview-analyse {
    padding: 12px;
  }
  .doubleCarbon-overview-quota {
    padding: 12px;
  }
  .doubleCarbon-overview-news {
    padding: 0 12px;
    height: 300px;
  }
  .doubleCarbon-overview-percent {
    padding: 0 12px;
    height: 300px;
  }
}
</style>