123 lines
3.2 KiB
Vue
123 lines
3.2 KiB
Vue
<template>
|
||
<div class="ems-dashboard-editor-container">
|
||
<zd-info></zd-info>
|
||
<div class="content ems-content-conatiner ">
|
||
<div class="map-container"></div>
|
||
<div class="zd-msg-container">
|
||
<div class="zd-msg-top">
|
||
<zd-select></zd-select>
|
||
<el-card class="single-zd-detail-container">
|
||
<div slot="header">
|
||
<span class="header-title">基本信息</span>
|
||
<el-button style="float: right; padding: 3px 0" type="text" size="small">查看详情</el-button>
|
||
</div>
|
||
<div class="single-zd-name">上海电动工具所站</div>
|
||
<!-- 四个方块-->
|
||
<el-row :gutter="14">
|
||
<el-col :span="12" class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
|
||
<single-square-box :data="item"></single-square-box>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 基本信息 -->
|
||
<el-descriptions class="single-zd-info-container" :column="1" >
|
||
<el-descriptions-item v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{item.value}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
<!-- echarts柱状图-->
|
||
<bar-chart></bar-chart>
|
||
|
||
</el-card>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ZdInfo from '@/components/Ems/ZdBaseInfo/index.vue'
|
||
import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
|
||
import SingleSquareBox from '@/components/Ems/SingleSquareBox/index.vue'
|
||
import BarChart from './BarChart.vue'
|
||
export default {
|
||
components:{ZdSelect,ZdInfo,SingleSquareBox,BarChart},
|
||
data() {
|
||
return {
|
||
// 单个电站 四个方块数据
|
||
singleZdSqaure:[{
|
||
title:'今日充电（kWh）',
|
||
value:'22.74',
|
||
bgColor:'#FFE5E5'
|
||
},{
|
||
title:'累计充电（kWh）',
|
||
value:'22.74',
|
||
bgColor:'#FFE5E5'
|
||
},{
|
||
title:'今日放电（kWh）',
|
||
value:'22.74',
|
||
bgColor:'#EEEBFF'
|
||
},{
|
||
title:'累计放电（kWh）',
|
||
value:'22.74',
|
||
bgColor:'#EEEBFF'
|
||
}],
|
||
// 单个电站 基本信息
|
||
singleZdInfo:[{
|
||
title:'电站位置',
|
||
value:'安徽省合肥市高新区中国声谷站',
|
||
},{
|
||
title:'投运时间',
|
||
value:'2024-10-11',
|
||
},{
|
||
title:'装机功率',
|
||
value:'215kW',
|
||
},{
|
||
title:'装机容量',
|
||
value:'430',
|
||
}]
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content{
|
||
display: flex;
|
||
padding:24px;
|
||
padding-right: 0;
|
||
margin-top:24px;
|
||
.map-container{
|
||
background: black;
|
||
flex:auto;
|
||
}
|
||
.zd-msg-container{
|
||
width: 500px;
|
||
padding: 24px;
|
||
::v-deep .el-card__header{
|
||
background: #F1F5FB;
|
||
border-bottom: none;
|
||
.header-title{
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.single-zd-name{
|
||
font-weight: 500;
|
||
line-height: 23px;
|
||
color: #FFBD00;
|
||
font-size: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.single-square-box-container{
|
||
height: 78px;
|
||
box-sizing: border-box;
|
||
margin-bottom: 10px;
|
||
}
|
||
.single-zd-info-container{
|
||
font-size: 12px;
|
||
margin-top: 10px;
|
||
color:#666666;
|
||
}
|
||
}
|
||
}
|
||
</style>
|