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

<template>
      <div v-loading="loading">
        <el-card shadow="always" class="common-card-container" :class="zbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
          <div slot="header">
              <span class="large-title">1#总表</span>
              <div class="status">
                <div>{{$store.state.ems.communicationStatusOptions[zbInfo.emsCommunicationStatus]}}</div>
                <div>数据更新时间：{{zbInfo.dataUpdateTime}}</div>
              </div>
          </div>
          <el-table
            class="common-table"
            :data="zbInfo.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" :class="cnbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
          <div slot="header">
            <span class="large-title">2#储能表</span>
            <div class="status">
              <div>{{$store.state.ems.communicationStatusOptions[cnbInfo.emsCommunicationStatus]}}</div>
              <div>数据更新时间：{{cnbInfo.dataUpdateTime}}</div>
            </div>
          </div>
          <el-table
            class="common-table"
            :data="cnbInfo.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>
      </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,
      zbInfo:{},
      cnbInfo:{},
    }
  },
  methods:{
    init(){
      this.loading = true
      getAmmeterDataList(this.siteId).then(response => {
        this.zbInfo =JSON.parse(JSON.stringify(response?.data[0] || {}));
        this.cnbInfo =JSON.parse(JSON.stringify(response?.data[1] || {}));
      }).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>