emsfront/src/views/ems/zddt/index.vue

<template>
  <div class="ems-dashboard-editor-container">
    <zd-info></zd-info>
    <div class="ems-content-container ">
      <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>
.ems-content-container{
  display: flex;
  padding:24px;
  padding-right: 0;
  .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>