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

<template>
  <div v-loading="loading">
     <el-card
         v-for="(item,index) in list"
         :key="index+'dbList'"
         shadow="always"
         class="sbjk-card-container list"
         :class="{
        'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
        'running-card-container':item.emsCommunicationStatus === '0'
      }"
     >
       <div slot="header">
         <span class="large-title">{{ item.deviceName }}</span>
         <div class="info">
           <div>
             {{
               $store.state.ems.communicationStatusOptions[
                   item.emsCommunicationStatus
                   ]
             }}
           </div>
           <div>数据更新时间：{{ item.dataUpdateTime }}</div>
         </div>
         <div class="alarm">
           <el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">详细</el-button>
           <el-badge :value="item.alarmNum || 0" class="item">
             <i
                 class="el-icon-message-solid alarm-icon"
                 @click="pointDetail(item,'alarmPoint')"
             ></i>
           </el-badge>
         </div>
       </div>
       <el-row class="device-info-row">
         <el-col v-for="(tempDataItem,tempDataIndex) in deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'" :span="8" class="device-info-col">
            <span class="pointer" @click="showChart(tempDataItem.pointName,item.deviceId)">
              <span class="left">{{tempDataItem.name}}</span> <span class="right">{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span></span>
            </span>
         </el-col>
       </el-row>
     </el-card>
    <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
    <point-chart ref="pointChart" :site-id="siteId"/>
    <point-table ref="pointTable"/>
  </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";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
export default {
  name: "DzjkSbjkDb",
  mixins: [getQuerySiteId,intervalUpdate],
  components:{PointTable, pointChart},
  data() {
    return {
      loading: false,
      list:[],
      deviceIdTypeMsg:{
        'LOAD':[
          {
            name:'正向有功电能',
            attr:'forwardActive',
            pointName:'正向有功电能'
          },
          {
            name:'反向有功电能',
            attr:'reverseActive',
            pointName:'反向有功电能'
          },
          {
            name:'正向无功电能',
            attr:'forwardReactive',
            pointName:'正向无功电能'
          },
          {
            name:'反向无功电能',
            attr:'reverseReactive',
            pointName:'反向无功电能'
          },
          {
            name:'有功功率',
            attr:'activePower',
            pointName:'总有功功率'
          },
          {
            name:'无功功率',
            attr:'reactivePower',
            pointName:'总无功功率'
          }
        ],
        'METE':[
          {
            name:'正向有功电能',
            attr:'forwardActive',
            pointName:'正向有功电能'
          },
          {
            name:'反向有功电能',
            attr:'reverseActive',
            pointName:'反向有功电能'
          },
          {
            name:'正向无功电能',
            attr:'forwardReactive',
            pointName:'正向无功电能'
          },
          {
            name:'反向无功电能',
            attr:'reverseReactive',
            pointName:'反向无功电能'
          },
          {
            name:'有功功率',
            attr:'activePower',
            pointName:'总有功功率'
          },
          {
            name:'无功功率',
            attr:'reactivePower',
            pointName:'总无功功率'
          }
        ],
        'METEGF':[
          {
            name:'有功电能',
            attr:'activeEnergy',
            pointName:'有功电能'
          },
          {
            name:'无功电能',
            attr:'reactiveEnergy',
            pointName:'无功电能'
          },
          {
            name:'有功功率',
            attr:'activePower',
            pointName:'总有功功率'
          },
          {
            name:'无功功率',
            attr:'reactivePower',
            pointName:'总无功功率'
          }
        ]
      }
    };
  },
  methods: {
    // 查看设备电位表格
    pointDetail(row,dataType){
      const {deviceId} = row
      this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'AMMETER'},dataType)
    },
    showChart(pointName,deviceId){
      pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'AMMETER',deviceId})
    },
    updateData(){
      this.loading = true;
      getAmmeterDataList(this.siteId)
          .then((response) => {
            this.list = response?.data || []
          })
          .finally(() => {
            this.loading = false;
          });
    },
    init() {
      this.updateData()
      this.updateInterval(this.updateData)
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.sbjk-card-container {
  &.list:not(:last-child){
    margin-bottom: 25px;
  }
}

</style>