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="{
        'timing-card-container':!['0','2'].includes(item.emsCommunicationStatus),
        'warning-card-container':item.emsCommunicationStatus === '2',
        'running-card-container':item.emsCommunicationStatus === '0'
      }"
    >
      <div slot="header">
        <span class="large-title">{{ item.deviceName }}</span>
        <div class="info">
          <div>
            {{
              communicationStatusOptions[item.emsCommunicationStatus] || '-'
            }}
          </div>
          <div>数据更新时间：{{ item.dataUpdateTime || '-' }}</div>
        </div>
        <div class="alarm">
          <el-button type="primary" round 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] || otherTypeMsg)"
                :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";
import {mapState} from "vuex";

export default {
  name: "DzjkSbjkDb",
  mixins: [getQuerySiteId, intervalUpdate],
  components: {PointTable, pointChart},
  computed: {

    ...mapState({
      communicationStatusOptions: state => state?.ems?.communicationStatusOptions || {},
    })
  },
  data() {
    return {
      loading: false,
      list: [],
      deviceIdTypeMsg: {
        'LOAD': [
          {
            name: '正向有功电能',
            attr: 'forwardActive',
            pointName: '正向有功电能',
            unit: 'kWh'
          },
          {
            name: '反向有功电能',
            attr: 'reverseActive',
            pointName: '反向有功电能',
            unit: 'kWh'
          },
          {
            name: '正向无功电能',
            attr: 'forwardReactive',
            pointName: '正向无功电能',
            unit: 'kvarh'
          },
          {
            name: '反向无功电能',
            attr: 'reverseReactive',
            pointName: '反向无功电能',
            unit: 'kvarh'
          },
          {
            name: '有功功率',
            attr: 'activePower',
            pointName: '总有功功率',
            unit: 'kW'
          },
          {
            name: '无功功率',
            attr: 'reactivePower',
            pointName: '总无功功率',
            unit: 'kvar'
          }
        ],
        'METE': [
          {
            name: '正向有功电能',
            attr: 'forwardActive',
            pointName: '正向有功电能',
            unit: 'kWh'
          },
          {
            name: '反向有功电能',
            attr: 'reverseActive',
            pointName: '反向有功电能',
            unit: 'kWh'
          },
          {
            name: '正向无功电能',
            attr: 'forwardReactive',
            pointName: '正向无功电能',
            unit: 'kvarh'
          },
          {
            name: '反向无功电能',
            attr: 'reverseReactive',
            pointName: '反向无功电能',
            unit: 'kvarh'
          },
          {
            name: '有功功率',
            attr: 'activePower',
            pointName: '总有功功率',
            unit: 'kW'
          },
          {
            name: '无功功率',
            attr: 'reactivePower',
            pointName: '总无功功率',
            unit: 'kvar'
          }
        ],
        'METEGF': [
          {
            name: '有功电能',
            attr: 'activeEnergy',
            pointName: '有功电能',
            unit: 'kWh'
          },
          {
            name: '无功电能',
            attr: 'reactiveEnergy',
            pointName: '无功电能',
            unit: 'kvarh'
          },
          {
            name: '有功功率',
            attr: 'activePower',
            pointName: '总有功功率',
            unit: 'kW'
          },
          {
            name: '无功功率',
            attr: 'reactivePower',
            pointName: '总无功功率',
            unit: 'kvar'
          }
        ]
      },
      otherTypeMsg: [
        {
          name: '正向有功电能',
          attr: 'forwardActive',
          pointName: '正向有功电能',
          unit: 'kWh'
        },
        {
          name: '反向有功电能',
          attr: 'reverseActive',
          pointName: '反向有功电能',
          unit: 'kWh'
        },
        {
          name: '有功功率',
          attr: 'activePower',
          pointName: '总有功功率',
          unit: 'kW'
        },
      ]
    };
  },
  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>