emsfront/src/views/ems/dzjk/sbjk/RealTimeBaseInfo.vue

<template>
  <!--  6个方块-->
  <el-row :gutter="10">
    <el-col :xs="12" :sm="8" :lg="4"  class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
      <single-square-box :data="{...item,value:Object.values(data).length ? data[item.attr] || '-' : '-'}" ></single-square-box>
    </el-col>
  </el-row>
</template>


<script>
import SingleSquareBox from "@/components/Ems/SingleSquareBox/index.vue";

export default {
  components:{SingleSquareBox},
  props:{
    data:{
      type:Object,
      required:false,
      default:()=>{return {}}
    },
  },
  data() {
    return {
      // 单个电站 四个方块数据
      singleZdSqaure:[{
        title:'实时有功功率（kW）',
        value:'',
        bgColor:'#FFF2CB',
        attr:'totalActivePower'
      },{
        title:'实时无功功率（kVar）',
        value:'',
        bgColor:'#CBD6FF',
        attr:'totalReactivePower'
      },{
        title:'电池催SOC',
        value:'',
        bgColor:'#DCCBFF',
        attr:'soc'
      },{
        title:'电池堆SOH',
        value:'',
        bgColor:'#FFD4CB',
        attr:'soh'
      },{
        title:'今日充电量（kWh）',
        value:'',
        bgColor:'#FFD6F8',
        attr:'dayChargedCap'
      },{
        title:'今日放电量（kWh）',
        value:'',
        bgColor:'#E1FFCA',
        attr:'dayDisChargedCap'
      }]
    }
  },

}
</script>


<style scoped lang="scss">

</style>