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">{{index+1}}#{{ item.deviceName }}</span>
         <div class="info">
           <div>
             {{
               $store.state.ems.communicationStatusOptions[
                   item.emsCommunicationStatus
                   ]
             }}
           </div>
           <div>数据更新时间：{{ item.dataUpdateTime }}</div>
         </div>
       </div>
       <el-row>
         <el-col v-for="(tempDataItem,tempDataIndex) in deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'" :span="8">
            <span class="pointer" @click="showChart(tempDataItem.pointName,item.deviceId)">
              {{tempDataItem.name}}：{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></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"/>
  </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,
      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: {
    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;
  }
  .el-row{
    background-color: #ffffff;
    border:1px solid #eeeeee;
    font-size: 14px;
    line-height: 16px;
    color: #333333;
    .el-col{
      padding:12px 0;
      text-align: center;
      position: relative;
    }
    .el-col{
      border-bottom: 1px solid #eeeeee;
    }
    .el-col:not(:nth-child(3n)){
      border-right: 1px solid #eeeeee;
    }
  }
}

</style>