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

<template>
  <div v-loading="loading">
    <el-card
      shadow="always"
      class="common-card-container"
      :class="{
        'zb-common-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
        'cnb-common-card-container':zbInfo.emsCommunicationStatus === '0'
      }"
    >
      <div slot="header">
        <span class="large-title">1#{{ zbInfo.deviceName }}</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.loadDataDetailInfo"
        @cell-click="(row,col)=>{handlerCell(zbInfo.deviceId,row,col)}"
        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="peakKwh" label="尖/kWh"> </el-table-column>
        <el-table-column prop="highKwh" 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"
      style="margin-top: 20px"
      :class="{
        'zb-common-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
        'cnb-common-card-container':zbInfo.emsCommunicationStatus === '0'
      }"
    >
      <div slot="header">
        <span class="large-title">2#{{ cnbInfo.deviceName }}</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.meteDataDetailInfo"
        @cell-click="(row,col)=>{handlerCellCN(cnbInfo.deviceId,row,col)}"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="category" label="类别"> </el-table-column>
        <el-table-column prop="activePower" label="有功功率"> </el-table-column>
        <el-table-column prop="reactivePower" label="无功功率">
        </el-table-column>
      </el-table>
    </el-card>
    <point-chart ref="pointChart" :site-id="siteId"/>
  </div>
</template>

<script>
import pointChart from "./../PointChart.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getAmmeterDataList } from "@/api/ems/dzjk";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
  name: "DzjkSbjkDb",
  mixins: [getQuerySiteId,intervalUpdate],
  components:{pointChart},
  data() {
    return {
      loading: false,
      zbInfo: {},
      cnbInfo: {},
    };
  },
  methods: {
    handlerCell(id,row,column){
      if(column.label !== '类别'){
        const arr = row.category.split('')
        arr.splice(6,0,column.label[0])
        this.showChart(arr.join(''),'电表',id)
      }
    },
    handlerCellCN(id,row,column){
      if(column.label !== '类别'){
        const arr = row.category.split('')
        arr.splice(2,arr.length-2,column.label)
        this.showChart(arr.join(''),'电表',id)
      }
    },
    showChart(pointName,categoryName,deviceId){
      console.log('点击查询图表',pointName,categoryName,deviceId)
      pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
    },
    updateData(){
      this.loading = true;
      getAmmeterDataList(this.siteId)
          .then((response) => {
            this.zbInfo = JSON.parse(
                JSON.stringify(response?.data?.ammeterLoadData || {})
            );
            this.cnbInfo = JSON.parse(
                JSON.stringify(response?.data?.ammeterMeteData || {})
            );
          })
          .finally(() => {
            this.loading = false;
          });
    },
    init() {
      this.updateData()
      this.updateInterval(this.updateData)
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.common-card-container {
  ::v-deep {
    .el-card__header {
      background-color: transparent;
      padding: 10px 14px;
      color: #ffffff;
      position: relative;
    }
    .el-table__row td{
      &:not(:first-child){
        .cell{
          cursor: pointer;
        }
      }
    }
  }
}
.zb-common-card-container{
  ::v-deep {
    .el-card__header {
      background-color: #fc6b69;
    }
  }
}
.cnb-common-card-container {
  ::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>