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: [
                {
                    label: '全部',
                    value: '0'
                }
            ],
            coreData: [
                {
                    title: "碳配额存量",
                    num: 0,
                    unit: '%',
                    historyDesc: "同比",
                    historyNum: 0,
                },
                {
                    title: "碳排放总量(tCO₂e)",
                    num: 0,
                    historyDesc: "同比",
                    historyNum: 0,
                },
                {
                    title: "单位面积碳排放(tCO₂e/m²)",
                    num: 0,
                    historyDesc: "同比",
                    historyNum: 0,
                },
                {
                    title: "人均碳排放(tCO₂e/人)",
                    num: 0,
                    historyDesc: "同比",
                    historyNum: 0,
                },
                {
                    title: "新能源减排(tCO₂e)",
                    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;
            });
        },
        callBackCompanyOption(options) {
            this.companyOptions = [
                {
                    label: '全部',
                    value: '0'
                }
            ]
            if (options) {
                options.forEach(item => {
                    this.companyOptions.push(item);
                })
            }
            this.$forceUpdate()
        },
    },
};
</script>

<template>
    <div class="doubleCarbon-overview">
        <div class="page-query-core">
            <Query
                    :show="['company', 'time']"
                    :query-data.sync="queryData"
                    :reset="reset"
                    :search="search"
                    :company-options="companyOptions"
            ></Query>
        </div>
        <div class="page-query-core">
            <Card title="核心指标">
                <CoreData :data-list="coreData"></CoreData>
            </Card>
        </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"
                                        :callBackCompanyOption="callBackCompanyOption"
                                        :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>