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

<template>
      <div v-loading="loading">
        <el-card shadow="always" class="common-card-container" :class="info.emsCommunicationStatus === '0' ? 'cnb-common-card-container' : 'zb-common-card-container'">
          <div slot="header">
              <span class="large-title">1#总表</span>
              <div class="status">
                <div>{{$store.state.ems.communicationStatusOptions[info.emsCommunicationStatus]}}</div>
                <div>数据更新时间：{{info.dataUpdateTime}}</div>
              </div>
          </div>
          <el-table
            class="common-table"
            :data="info.ammeterDataDetailInfos"
              stripe
              style="width: 100%;">
              <el-table-column
                prop="category"
                label="类别">
              </el-table-column>
              <el-table-column
                prop="totalKwh"
                label="总/kWh"
              >
              </el-table-column>
              <el-table-column
                prop="sharpKwh"
                label="尖/kWh">
              </el-table-column>
              <el-table-column
                prop="peakKwh"
                label="峰/kWh">
              </el-table-column>
              <el-table-column
                prop="flatKwh"
                label="平/kWh">
              </el-table-column>
              <el-table-column
                prop="valleyKwh"
                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>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getAmmeterDataList} from '@/api/ems/dzjk'
export default {
  name:'DzjkSbjkDb',
  mixins:[getQuerySiteId],
  data() {
    return {
      loading:false,
      info:{},
      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:{
    init(){
      this.loading = true
      getAmmeterDataList(this.siteId).then(response => {
        // todo 返回数据等待确认，是数组吗?
        this.info =JSON.parse(JSON.stringify(response?.data[0] || {}));
      }).finally(() => {this.loading = false})
    }
  },
  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>