424 lines
14 KiB
Vue
424 lines
14 KiB
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)">
|
||
<span
|
||
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
|
||
:title="nationwide.valuation">
|
||
{{ nationwide.valuation }}
|
||
</span>
|
||
</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)">
|
||
<span
|
||
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
|
||
:title="place.valuation">
|
||
{{ place.valuation }}
|
||
</span>
|
||
</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)">
|
||
<span
|
||
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
|
||
:title="ccer.valuation">
|
||
{{ ccer.valuation }}
|
||
</span>
|
||
</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)">
|
||
<span
|
||
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
|
||
:title="whole.whole">
|
||
{{ whole.whole }}
|
||
</span>
|
||
</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: 15%;
|
||
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: left;
|
||
opacity: 1;
|
||
font-size: 40px;
|
||
font-weight: 500;
|
||
line-height: 52px;
|
||
text-align: left;
|
||
}
|
||
.moneyDetail {
|
||
width: 17%;
|
||
display: flex;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
.detailClick {
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
> span {
|
||
font-size: 12px;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
border-radius: 8px;
|
||
.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>
|