139 lines
3.4 KiB
Vue
139 lines
3.4 KiB
Vue
<template>
|
|
<div class="left-bottom-warp">
|
|
<item title="节能减排">
|
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
|
<div v-else class="top-all-box">
|
|
<div class="top-con-box">
|
|
<div class="top-item-box">
|
|
<div class="data">{{ info.treePlanting }}<span class="unit">棵</span></div>
|
|
<div class="title">等效植树量</div>
|
|
<img :src="screenItemBg" class="item-bg-img">
|
|
</div>
|
|
<div class="top-item-box">
|
|
<div class="data">{{ info.reductionCO2 | kgFormat }}<span class="unit">{{ info.reductionCO2 | KgUnitFormat }}</span></div>
|
|
<div class="title">等效CO2减排</div>
|
|
<img :src="screenItemBg" class="item-bg-img">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="top-con-box">
|
|
<div class="top-item-box">
|
|
<div class="data">{{ info.equivalentCoal | kgFormat }}<span class="unit">{{ info.equivalentCoal | KgUnitFormat }}</span></div>
|
|
<div class="title">等效节约煤</div>
|
|
<img :src="screenItemBg" class="item-bg-img">
|
|
</div>
|
|
<div class="top-item-box">
|
|
<div class="data">{{ info.income | moneyFormat }}<span class="unit">{{ info.income | moneyUnitFormat }}</span></div>
|
|
<div class="title">等效经济收入</div>
|
|
<img :src="screenItemBg" class="item-bg-img">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</item>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import item from './item-warp.vue'
|
|
import screenItemBg from '@/assets/new-screen/screen-item-bg.png'
|
|
import { GetEnergySaving } from '@/api/screen/zzScreen'
|
|
export default {
|
|
components: { item },
|
|
data() {
|
|
return {
|
|
screenItemBg,
|
|
loading: true,
|
|
info: {
|
|
treePlanting: null,
|
|
reductionCO2: null,
|
|
equivalentCoal: null,
|
|
income: null
|
|
}
|
|
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
},
|
|
|
|
methods: {
|
|
|
|
async getData(deptId) {
|
|
try {
|
|
this.loading = true
|
|
const { data } = await GetEnergySaving({
|
|
deptId: deptId
|
|
})
|
|
this.info = data
|
|
} catch (error) {
|
|
// console.log(error);
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.left-bottom-warp {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.top-all-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px 0;
|
|
.top-con-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
|
|
.top-item-box {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 110px;
|
|
|
|
.data {
|
|
color: #F5FAFF;
|
|
font-family: DIN;
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.unit {
|
|
color: #F5FAFF;
|
|
font-family: DIN;
|
|
font-size: 12px;
|
|
line-height: normal;
|
|
}
|
|
|
|
.title {
|
|
color: #B7C1C9;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.item-bg-img {
|
|
width: 90px;
|
|
height: auto;
|
|
position: absolute;
|
|
top: 38px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}</style>
|