SaaS-lib/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/index.vue

<template>
  <div class="mainContant" v-if="homePage">
    <a-card class="card" v-if="nationwide" style="margin-right: 1%; margin-bottom: 1%">
      <div class="top" style="background: rgba(252, 139, 78, 0.05)">
        <div class="moneyImg"><img width="68" height="68" src="../../../../src/icon/carbonAssetsMoney-1.svg" /></div>
        <div class="moneyTitle">全国碳账户估值（CNY）</div>
        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{
          nationwide.valuation
        }}</div>
        <div class="moneyDetail">
          <div
            class="detailClick"
            @click="viewDetail(1)"
            style="border: 1px solid rgba(229, 102, 22, 1)">
            <img
              width="20"
              height="20"
              src="../../../../src/icon/carbonAssetsToDetail-1.svg"
              alt="" />
            <span style="color: rgba(229, 102, 22, 1)">交易明细</span>
          </div>
        </div>
      </div>
      <div class="title">
        <img width="24" height="24" src="../../../../src/icon/carbonAssetsTitle-1.svg" />
        <span>全国碳账户余额</span>
      </div>
      <div class="bottom">
        <div class="calculation TLCard">
          <div class="money">{{ nationwide.opening }}</div>
          <div class="moneyType">期初余额（tCO2）</div>
        </div>
        <img width="17" height="17" src="../../../../src/icon/carbonAssetsAdd.svg" />
        <div class="calculation TLCard">
          <div class="money">{{ nationwide.income }}</div>
          <div class="moneyType">
            <img width="20" height="17" src="../../../../src/icon/carbonAssetsIncrease.svg" />
            增加（tCO2）
          </div>
        </div>
        <img width="17" height="17" src="../../../../src/icon/carbonAssetsReduce.svg" />
        <div class="calculation TLCard">
          <div class="money">{{ nationwide.expenditure }}</div>
          <div class="moneyType">
            <img width="20" height="17" src="../../../../src/icon/carbonAssetsLower.svg" />
            减少（tCO2）
          </div>
        </div>
        <img width="17" height="17" src="../../../../src/icon/carbonAssetsEqual.svg" />
        <div class="calculation TLCard">
          <div class="money">{{ nationwide.period }}</div>
          <div class="moneyType">期末余额（tCO2）</div>
        </div>
      </div>
    </a-card>
    <a-card class="card" v-if="place" style="margin-bottom: 1%">
      <div class="top" style="background: rgba(234, 71, 54, 0.05)">
        <div class="moneyImg"
          ><img width="68" height="68" src="../../../../src/icon/carbonAssetsMoney-2.svg"
        /></div>
        <div class="moneyTitle">地方碳账户估值（CNY）</div>
        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{ place.valuation }}</div>
        <div class="moneyDetail">
          <div
            class="detailClick"
            @click="viewDetail(2)"
            style="border: 1px solid rgba(230, 51, 44, 1)">
            <img
              width="20"
              height="20"
              src="../../../../src/icon/carbonAssetsToDetail-2.svg"
              alt="" />
            <span style="color: rgba(230, 51, 44, 1)">交易明细</span>
          </div>
        </div>
      </div>
      <div class="title">
        <img width="24" height="24" src="../../../../src/icon/carbonAssetsTitle-2.svg" />
        <span>地方碳账户余额</span>
      </div>
      <div class="bottom">
        <div class="calculation TRCard">
          <div class="money">{{ place.opening }}</div>
          <div class="moneyType">期初余额（tCO2）</div>
        </div>
        <img width="17" height="17" src="../../../../src/icon/carbonAssetsAdd.svg" />
        <div class="calculation TRCard">
          <div class="money">{{ place.income }}</div>
          <div class="moneyType">
            <img width="20" height="17" src="../../../../src/icon/carbonAssetsIncrease.svg" />
            增加（tCO2）
          </div>
        </div>
        <img width="17" height="17" src="../../../../src/icon/carbonAssetsReduce.svg" />
        <div class="calculation TRCard">
          <div class="money">{{ place.expenditure }}</div>
          <div class="moneyType">
            <img width="20" height="17" src="../../../../src/icon/carbonAssetsLower.svg" />
            减少（tCO2）
          </div>
        </div>
        <img width="17" height="17" src="../../../../src/icon/carbonAssetsEqual.svg" />
        <div class="calculation TRCard">
          <div class="money">{{ place.period }}</div>
          <div class="moneyType">期末余额（tCO2）</div>
        </div>
      </div>
    </a-card>
    <a-card class="card" v-if="ccer" style="margin-right: 1%">
      <div class="top" style="background: rgba(65, 163, 224, 0.05)">
        <div class="moneyImg"
          ><img width="68" height="68" src="../../../../src/icon/carbonAssetsMoney-3.svg"
        /></div>
        <div class="moneyTitle">CCER资产估值（CNY）</div>
        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{ ccer.valuation }}</div>
        <div class="moneyDetail">
          <div
            class="detailClick"
            @click="viewDetail(3)"
            style="border: 1px solid rgba(56, 157, 220, 1)">
            <img
              width="20"
              height="20"
              src="../../../../src/icon/carbonAssetsToDetail-3.svg"
              alt="" />
            <span style="color: rgba(56, 157, 220, 1)">交易明细</span>
          </div>
        </div>
      </div>
      <div class="title">
        <img width="24" height="24" src="../../../../src/icon/carbonAssetsTitle-3.svg" />
        <span>CCER账户余额</span>
      </div>
      <div class="bottom">
        <div class="calculation BLCard">
          <div class="money">{{ ccer.opening }}</div>
          <div class="moneyType">期初余额（tCO2）</div>
        </div>
        <img width="17" height="17" src="../../../../src/icon/carbonAssetsAdd.svg" />
        <div class="calculation BLCard">
          <div class="money">{{ ccer.income }}</div>
          <div class="moneyType">
            <img width="20" height="17" src="../../../../src/icon/carbonAssetsIncrease.svg" />
            增加（tCO2）
          </div>
        </div>
        <img width="17" height="17" src="../../../../src/icon/carbonAssetsReduce.svg" />
        <div class="calculation BLCard">
          <div class="money">{{ ccer.expenditure }}</div>
          <div class="moneyType">
            <img width="20" height="17" src="../../../../src/icon/carbonAssetsLower.svg" />
            减少（tCO2）
          </div>
        </div>
        <img width="17" height="17" src="../../../../src/icon/carbonAssetsEqual.svg" />
        <div class="calculation BLCard">
          <div class="money">{{ ccer.period }}</div>
          <div class="moneyType">期末余额（tCO2）</div>
        </div>
      </div>
    </a-card>
    <a-card class="card" v-if="whole">
      <div class="top" style="background: rgba(37, 192, 150, 0.05)">
        <div class="moneyImg"
          ><img width="68" height="68" src="../../../../src/icon/carbonAssetsMoney-4.svg"
        /></div>
        <div class="moneyTitle">碳资产总估值（CNY）</div>
        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{ whole.whole }}</div>
      </div>
      <div class="title" style="justify-content: center">
        <img
          width="17"
          height="17"
          style="transform: rotate(90deg)"
          src="../../../../src/icon/carbonAssetsEqual.svg" />
      </div>
      <div class="bottom">
        <div class="BRCard">
          <div class="money">{{ whole.nationwide }}</div>
          <div class="moneyType">全国碳账户资产估值</div>
        </div>
        <img width="17" height="17" src="../../../../src/icon/carbonAssetsAdd.svg" />
        <div class="BRCard">
          <div class="money">{{ whole.place }}</div>
          <div class="moneyType">地方碳账户资产估值</div>
        </div>
        <img width="17" height="17" src="../../../../src/icon/carbonAssetsAdd.svg" />
        <div class="BRCard">
          <div class="money">{{ whole.ccer }}</div>
          <div class="moneyType">CCER碳资产估值</div>
        </div>
      </div>
    </a-card>
  </div>
  <div class="detail" v-else>
    <carbonAssetsDetail @change-data="updateData" :parentId="parentId" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import carbonAssetsDetail from './carbonAssetsDetail/index.vue';
  import { http } from '/nerv-lib/util/http';
  import { carbonAssets } from '/@/api/carbonEmissionFactorLibrary';
  defineOptions({
    energyType: 'carbonAssets', // 与页面路由name一致缓存才可生效
  });
  const orgId = ref('');
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;
  const fetch = (api, params = { orgId }) => {
    return http.post(api, params);
  };
  const homePage = ref(true);
  // 点击跳转详情
  const parentId = ref(1);
  const viewDetail = (data) => {
    homePage.value = false;
    parentId.value = data;
  };
  const queryParams = ref({
    orgId: orgId.value,
    year: new Date().getFullYear(),
  });
  const nationwide = ref();
  const place = ref();
  const ccer = ref();
  const whole = ref();
  const getData = () => {
    fetch(carbonAssets.carbonAssets, queryParams.value).then((res) => {
      console.log(res);
      nationwide.value = res.data.nationwide;
      place.value = res.data.place;
      ccer.value = res.data.ccer;
      whole.value = res.data.whole;
    });
  };
  getData();
  // 填报页点击返回
  const updateData = (type) => {
    homePage.value = type;
    getData();
  };
</script>

<style lang="less" scoped>
  .mainContant {
    background: #f1f2f6;
    display: flex;
    flex-wrap: wrap;
    .card {
      width: 49%;
      height: 49%;
      .TLCard {
        background: linear-gradient(180deg, rgba(255, 249, 246, 1) 0%, rgba(255, 255, 255, 1) 100%);
        border: 1px solid rgba(252, 139, 78, 0.3);
      }
      .TRCard {
        background: linear-gradient(180deg, rgba(254, 245, 244, 1) 0%, rgba(255, 255, 255, 1) 100%);
        border: 1px solid rgba(241, 100, 69, 0.2);
      }
      .BLCard {
        background: linear-gradient(180deg, rgba(245, 250, 254, 1) 0%, rgba(255, 255, 255, 1) 100%);
        border: 1px solid rgba(72, 168, 228, 0.3);
      }
    }
  }
  :deep(.ant-card-body) {
    height: 100%;
  }
  .top {
    height: 40%;
    width: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    .moneyImg {
      width: 18%;
      display: flex;
      justify-content: center;
    }
    .moneyTitle {
      width: 35%;
      display: flex;
      justify-content: center;
      opacity: 1;
      font-size: 20px;
      font-weight: 700;
      color: rgba(0, 0, 0, 1);
      text-align: left;
      vertical-align: top;
    }
    .moneyTotal {
      width: 33%;
      display: flex;
      justify-content: center;
      opacity: 1;
      font-size: 40px;
      font-weight: 400;
      line-height: 52px;
      text-align: left;
    }
    .moneyDetail {
      width: 14%;
      display: flex;
      justify-content: center;
      cursor: pointer;
      .detailClick {
        border-radius: 4px;
        padding: 3px;
        > span {
          font-size: 12px;
        }
      }
    }
  }
  .title {
    height: 20%;
    width: 100%;
    display: flex;
    align-items: center;
    > span {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 1.2px;
      line-height: 26px;
      color: rgba(0, 0, 0, 1);
      text-align: left;
      vertical-align: top;
      margin-left: 10px;
    }
  }
  .bottom {
    height: 40%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .calculation {
      width: 22%;
      height: 100%;
      opacity: 1;
      border-radius: 8px;
      padding: 10px;
      .money {
        opacity: 1;
        font-size: 28px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 50px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        vertical-align: top;
      }
      .moneyType {
        opacity: 1;
        font-size: 14px;
        font-weight: 700;
        line-height: 45px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        vertical-align: top;
      }
    }
    .BRCard {
      width: 30%;
      height: 100%;
      opacity: 1;
      background: linear-gradient(180deg, rgba(244, 252, 250, 1) 0%, rgba(255, 255, 255, 1) 100%);
      border: 1px solid rgba(42, 197, 155, 0.3);
      padding: 10px;
      .money {
        opacity: 1;
        font-size: 28px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 50px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        vertical-align: top;
      }
      .moneyType {
        opacity: 1;
        font-size: 14px;
        font-weight: 700;
        line-height: 45px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        vertical-align: top;
      }
    }
  }
  .detail {
    height: 100%;
    background: #f0f1f5;
  }
</style>