90 lines
1.9 KiB
Vue
90 lines
1.9 KiB
Vue
|
||
<!--首页、地图站点页面顶部信息方块-->
|
||
<template>
|
||
<el-row type="flex" >
|
||
<el-card shadow="hover" class="card common-card-container-body-no-padding" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
|
||
<div class="info">{{ item.title }}</div>
|
||
<div class="num">{{item.num | formatNumber}}</div>
|
||
</el-card>
|
||
</el-row>
|
||
</template>
|
||
|
||
<script>
|
||
import { getSiteTotalInfo } from "@/api/ems/home"
|
||
export default {
|
||
data() {
|
||
return {
|
||
data:[{
|
||
title:'站点总数（座）',
|
||
num:'',
|
||
color:'#FFBD00',
|
||
attr:'siteNum'
|
||
},{
|
||
title:'装机功率（MW）',
|
||
num:'',
|
||
color:'#3C81FF',
|
||
attr:'installPower'
|
||
|
||
},{
|
||
title:'装机容量（MW）',
|
||
num:'',
|
||
color:'#5AC7C0',
|
||
attr:'installCapacity'
|
||
|
||
},{
|
||
title:'总充电量（MWh）',
|
||
num:'',
|
||
color:'#A696FF',
|
||
attr:'totalChargedCap'
|
||
|
||
},{
|
||
title:'总放电量（MWh）',
|
||
num:'',
|
||
color:'#A696FF',
|
||
attr:'totalDischargedCap'
|
||
|
||
}]
|
||
}
|
||
},
|
||
methods: {
|
||
setData(res = {}){
|
||
this.data.forEach((item)=>{
|
||
item.num =res[item.attr]
|
||
})
|
||
}
|
||
},
|
||
mounted() {
|
||
getSiteTotalInfo().then(response => {
|
||
console.log('单个站点基本信息返回数据',response)
|
||
this.setData(response?.data || {})
|
||
}).catch(()=>{
|
||
this.setData({})
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.card{
|
||
min-width: 150px;
|
||
height: 96px;
|
||
margin-right: 27px;
|
||
border-bottom: 4px solid transparent;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
padding:0 10px;
|
||
.info{
|
||
color: #666666;
|
||
line-height: 14px;
|
||
padding-top: 18px;
|
||
}
|
||
.num{
|
||
color: rgba(51,51,51,1);
|
||
font-size: 26px;
|
||
line-height: 26px;
|
||
font-weight: 500;
|
||
margin-top: 14px;
|
||
}
|
||
}
|
||
|
||
</style>
|