iot-front-ui/src/components/doubleCarbon/car/doubleCarbonCar.vue

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

import CarbonCarEmissionChart from "@/components/doubleCarbon/car/charts/carbonCarEmissionChart.vue";
import CarbonCarQuotaChart from "@/components/doubleCarbon/car/charts/carbonCarQuotaChart.vue";
import apiCarbonCar from "@/api/carbon/apiCarbonCar";

export default {
  components: {
    Card,
    CoreData,
    Query,
    CarbonCarEmissionChart,
    CarbonCarQuotaChart,
  },
  data() {
    return {
      queryData: {
        companyId: '0',
        timeRange: this.$util.dateUtil.getNearlyMonthRange()
      },
      companyOptions: [
        {
          label: '全部',
          value: '0'
        }
      ],
      coreData: [
        {
          title: '车辆累计排放(tCO₂e)',
          num: 0,
          historyDesc: '同比',
          historyNum: 0
        },
        {
          title: '车辆总里程(km)',
          num: 0,
          historyDesc: '同比',
          historyNum: 0
        },
        {
          title: '车辆平均里程(km/天)',
          num: 0,
          historyDesc: '同比',
          historyNum: 0
        },
        {
          title: '车辆平均碳排放(tCO₂e/辆/天)',
          num: 0,
          historyDesc: '同比',
          historyNum: 0
        },
        {
          type: 1,
          title: '值得关注',
          showStar: true,
          content: ''
        },
      ],
      newsData: [
        {
          title: 'xxxxxxxxxx',
          tag: '双碳小知识',
          author: '张峰',
          time: '2022-02-02 15:00:00'
        }
      ]
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$store.loadingStore().loadingWithApi(this.getCoreData(), 2000)
    },
    reset() {
    },
    search(data) {
      this.$util.asyncPromise(
          this.getCoreData(),
          this.$refs.CarbonCarEmissionChart.getData(),
          this.$refs.CarbonCarQuotaChart.getData(),
      )
    },
    getCoreData() {
      return apiCarbonCar.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
      })
    },
    callBackCompanyOption(options) {
      this.companyOptions = [
        {
          label: '全部',
          value: '0'
        }
      ]
      if (options) {
        options.forEach(item=>{
          this.companyOptions.push(item);
        })
      }
      this.$forceUpdate()
    },
  }
}
</script>

<template>
  <div class="doubleCarbon-car">

    <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" :company-options="companyOptions" :reset="reset" :search="search"></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-car-analyse">
                <CarbonCarEmissionChart :call-back-company-option="callBackCompanyOption" ref="CarbonCarEmissionChart" :query-data="queryData" :height="450"/>
              </div>
            </Card>
          </div>

        </a-col>
        <a-col :span="6">
          <div class="ioc-card-content">
            <Card title="碳排放分析">
              <div class="doubleCarbon-car-quota">
                <CarbonCarQuotaChart ref="CarbonCarQuotaChart" :query-data="queryData" :height="450"/>
              </div>
            </Card>
          </div>

        </a-col>
      </a-row>
    </div>
  </div>
</template>

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

  .doubleCarbon-car-analyse {
    padding: 12px;
  }

  .doubleCarbon-car-quota {
    padding: 12px;
  }

  .doubleCarbon-car-news {
    padding: 0 12px;
    height: 300px;
  }

  .doubleCarbon-car-percent {
    padding: 0 12px;
    height: 300px;
  }
}
</style>