|
@@ -2,7 +2,7 @@
|
|
<div class="date-over-wrap">
|
|
<div class="date-over-wrap">
|
|
<Label label="数据总览" :icon="icon" />
|
|
<Label label="数据总览" :icon="icon" />
|
|
<div class="list-wrap">
|
|
<div class="list-wrap">
|
|
- <div class="list-item-wrap" :style="{background : `${item.background}`}" v-for="(item, index) in list" :key="index">
|
|
|
|
|
|
+ <div class="list-item-wrap" :style="{ background: `${item.background}` }" v-for="(item, index) in list" :key="index">
|
|
<div class="list-item-value">
|
|
<div class="list-item-value">
|
|
{{ item.value }}
|
|
{{ item.value }}
|
|
<div class="list-item-unit">{{ item.unit }}</div>
|
|
<div class="list-item-unit">{{ item.unit }}</div>
|
|
@@ -27,66 +27,75 @@ export default {
|
|
{
|
|
{
|
|
label: '年度累积用电量',
|
|
label: '年度累积用电量',
|
|
value: '50.52',
|
|
value: '50.52',
|
|
- unit : '万kw.h',
|
|
|
|
|
|
+ unit: 'kw.h',
|
|
icon: require('@assets/img/energyIcon/icon_cop.png'),
|
|
icon: require('@assets/img/energyIcon/icon_cop.png'),
|
|
- background : 'linear-gradient(270deg, #04bce9 0%, #52c1de 100%)'
|
|
|
|
|
|
+ background: 'linear-gradient(270deg, #04bce9 0%, #52c1de 100%)'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: '年度累计冷量',
|
|
label: '年度累计冷量',
|
|
value: '232.88',
|
|
value: '232.88',
|
|
- unit : '万kwh',
|
|
|
|
|
|
+ unit: 'kwh',
|
|
icon: require('@assets/img/energyIcon/icon_ratio2.png'),
|
|
icon: require('@assets/img/energyIcon/icon_ratio2.png'),
|
|
- background : 'linear-gradient(270deg, #44B6FB 100%, #4D9BFF 0%)'
|
|
|
|
|
|
+ background: 'linear-gradient(270deg, #44B6FB 100%, #4D9BFF 0%)'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: '年度累计节电量',
|
|
label: '年度累计节电量',
|
|
value: '27.13',
|
|
value: '27.13',
|
|
- unit : '万kw.h',
|
|
|
|
|
|
+ unit: 'kw.h',
|
|
icon: require('@assets/img/energyIcon/icon_cop.png'),
|
|
icon: require('@assets/img/energyIcon/icon_cop.png'),
|
|
- background : 'linear-gradient(270deg, #F49153 100%, #F27762 0%)'
|
|
|
|
|
|
+ background: 'linear-gradient(270deg, #F49153 100%, #F27762 0%)'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: '年度累计节碳量',
|
|
label: '年度累计节碳量',
|
|
value: '73.78',
|
|
value: '73.78',
|
|
- unit : '吨',
|
|
|
|
|
|
+ unit: '吨',
|
|
icon: require('@assets/img/energyIcon/icon_ratio2.png'),
|
|
icon: require('@assets/img/energyIcon/icon_ratio2.png'),
|
|
- background : 'linear-gradient(270deg, #44B6FB 100%, #4D9BFF 0%)'
|
|
|
|
|
|
+ background: 'linear-gradient(270deg, #44B6FB 100%, #4D9BFF 0%)'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: '年度累计节电费',
|
|
label: '年度累计节电费',
|
|
value: '32.56',
|
|
value: '32.56',
|
|
- unit : '万元',
|
|
|
|
|
|
+ unit: '元',
|
|
icon: require('@assets/img/energyIcon/icon_ratio2.png'),
|
|
icon: require('@assets/img/energyIcon/icon_ratio2.png'),
|
|
- background : 'linear-gradient(270deg, #D260CD 100%, #914FD1 0%)'
|
|
|
|
|
|
+ background: 'linear-gradient(270deg, #D260CD 100%, #914FD1 0%)'
|
|
}
|
|
}
|
|
]
|
|
]
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
|
|
- mounted() {this.getdata()},
|
|
|
|
|
|
+ mounted() {
|
|
|
|
+ this.getdata();
|
|
|
|
+ },
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
- getdata(){
|
|
|
|
- this.$http.get('/sc-energy/board/getProjectDataInfo').then(({data})=>{
|
|
|
|
- this.list[0].value = data.powerConsumption;
|
|
|
|
- this.list[1].value = data.refrigerationCapacity;
|
|
|
|
- this.list[2].value = data.powerSaving;
|
|
|
|
- this.list[3].value = data.carbonSaving;
|
|
|
|
- this.list[4].value = data.utilities;
|
|
|
|
- })
|
|
|
|
|
|
+ formatNum: (str, sun) => {
|
|
|
|
+ return str
|
|
|
|
+ .split('')
|
|
|
|
+ .reverse()
|
|
|
|
+ .reduce((cur, next, index) => {
|
|
|
|
+ return (index % sun ? next : next + ',') + cur;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ getdata() {
|
|
|
|
+ this.$http.get('/sc-energy/board/getProjectDataInfo').then(({ data }) => {
|
|
|
|
+ this.list[0].value = this.formatNum(Math.ceil(data.powerConsumption)+'',3);
|
|
|
|
+ this.list[1].value = this.formatNum(Math.ceil(data.refrigerationCapacity)+'',3);
|
|
|
|
+ this.list[2].value = this.formatNum(Math.ceil(data.powerSaving)+'',3);
|
|
|
|
+ this.list[3].value = this.formatNum(Math.ceil(data.carbonSaving)+'',3);
|
|
|
|
+ this.list[4].value = this.formatNum(Math.ceil(data.utilities)+'',3);
|
|
|
|
+ });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-
|
|
|
|
.date-over-wrap {
|
|
.date-over-wrap {
|
|
height: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
- margin : 0 20px 0 20px
|
|
|
|
|
|
+ margin: 0 20px 0 20px;
|
|
}
|
|
}
|
|
.list-wrap {
|
|
.list-wrap {
|
|
margin-top: 2%;
|
|
margin-top: 2%;
|
|
@@ -113,8 +122,7 @@ export default {
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
|
|
|
|
display: flex;
|
|
display: flex;
|
|
- align-items:baseline;
|
|
|
|
-
|
|
|
|
|
|
+ align-items: baseline;
|
|
}
|
|
}
|
|
|
|
|
|
.list-item-unit {
|
|
.list-item-unit {
|