emsfront/src/views/ems/dzjk/sbjk/db/index.vue

<template>
      <div>
        <el-card shadow="always" class="common-card-container zb-common-card-container">
          <div slot="header">
              <span class="large-title">1#总表</span>
              <div class="status">
                <div>通信中断</div>
                <div>数据更新时间：2024-10-11 12:00:00</div>
              </div>
          </div>
          <el-table
            class="common-table"
            :data="zbTableData"
              stripe
              style="width: 100%;">
              <el-table-column
                prop="name"
                label="类别">
              </el-table-column>
              <el-table-column
                prop="zong"
                label="总/kWh"
              >
              </el-table-column>
              <el-table-column
                prop="jian"
                label="尖/kWh">
              </el-table-column>
              <el-table-column
                prop="feng"
                label="峰/kWh">
              </el-table-column>
              <el-table-column
                prop="ping"
                label="平/kWh">
              </el-table-column>
              <el-table-column
                prop="gu"
                label="谷/kWh">
              </el-table-column>
            </el-table>
        </el-card>
        <el-card shadow="always" class="common-card-container cnb-common-card-container">
          <div slot="header">
            <span class="large-title">2#储能表</span>
            <div class="status">
              <div>通信正常</div>
              <div>数据更新时间：2024-10-11 12:00:00</div>
            </div>
          </div>
          <el-table
            class="common-table"
            :data="cnbTableData"
            stripe
            style="width: 100%;">
            <el-table-column
              prop="name"
              label="类别">
            </el-table-column>
            <el-table-column
              prop="zong"
              label="总/kWh"
            >
            </el-table-column>
            <el-table-column
              prop="jian"
              label="尖/kWh">
            </el-table-column>
            <el-table-column
              prop="feng"
              label="峰/kWh">
            </el-table-column>
            <el-table-column
              prop="ping"
              label="平/kWh">
            </el-table-column>
            <el-table-column
              prop="gu"
              label="谷/kWh">
            </el-table-column>
          </el-table>
        </el-card>
      </div>
</template>


<script>
export default {
  name:'DzjkSbjkDb',
  data() {
    return {
      zbTableData:[
        {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
        {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
        {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
        {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
      ],
      cnbTableData:[
        {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
        {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
        {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
        {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
      ]
    }
  },
  methods:{

  },
  mounted(){

  }
}
</script>

<style scoped lang="scss">
.zb-common-card-container,.cnb-common-card-container{
  ::v-deep{
    .el-card__header{
      padding:10px 14px;
      background-color: #FC6B69;
      color:#ffffff;
      position: relative;
    }
  }
}
.cnb-common-card-container{
  margin-top:25px;
  ::v-deep{
    .el-card__header{
      background-color: #05AEA3;
    }
  }
}
.status{
  position: absolute;
  right:14px;
  top:50%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 12px;
  line-height: 20px;
}


</style>