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

<template>
  <div v-loading="loading">
    <div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
      <el-card
          :class="handleCardClass(baseInfo)"
          class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
          shadow="always">
        <div slot="header">
          <span class="large-title">{{ baseInfo.deviceName }}</span>
          <div class="info">
            <div>数据更新时间：{{ baseInfo.dataUpdateTime || '-' }}</div>
          </div>
          <div class="alarm">
            <el-button type="primary" round size="small" style="margin-right:20px;"
                       @click="pointDetail(baseInfo,'point')">详细
            </el-button>
            <el-badge :value="baseInfo.alarmNum || 0" class="item">
              <i
                  class="el-icon-message-solid alarm-icon"
                  @click="pointDetail(baseInfo,'alarmPoint')"
              ></i>
            </el-badge>
          </div>
        </div>
        <div class="descriptions-main">
          <el-descriptions :colon="false" :column="3" direction="vertical">
            <el-descriptions-item
                contentClassName="descriptions-direction work-status"
                label="工作状态" labelClassName="descriptions-label">
              {{ STACKWorkStatusOptions[baseInfo.workStatus] }}
            </el-descriptions-item>
            <el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与PCS通信"
                                  labelClassName="descriptions-label">
              {{ $store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus] }}
            </el-descriptions-item>
            <el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与EMS通信"
                                  labelClassName="descriptions-label">
              {{ $store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus] }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="descriptions-main descriptions-main-bg-color">
          <el-descriptions :colon="false" :column="3" direction="vertical">
            <el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label"
                                  :span="1" contentClassName="descriptions-direction"
                                  labelClassName="descriptions-label">
              <span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
                {{ baseInfo[item.attr] | formatNumber }}<span v-if="item.unit" v-html="item.unit"></span>
              </span>
            </el-descriptions-item>
          </el-descriptions>
          <!--        进度-->
          <div class="process-container">
            <div class="process-line-bg">
              <div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
            </div>
            <div class="process pointer" @click="showChart('当前SOC',baseInfo.deviceId)">当前SOC :
              {{ baseInfo.stackSoc }}%
            </div>
          </div>
        </div>
        <el-table
            :data="baseInfo.batteryDataList"
            class="common-table"
            max-height="500"
            stripe
            style="width: 100%;margin-top:25px;">
          <el-table-column
              label="簇号"
              prop="clusterId">
          </el-table-column>
          <el-table-column
              label="簇电压"
          >
            <template slot-scope="scope">
              <span class="pointer"
                    @click="showChart('簇电压',scope.row.clusterId,'CLUSTER')">{{ scope.row.clusterVoltage }} V</span>
            </template>
          </el-table-column>
          <el-table-column
              label="簇电流">
            <template slot-scope="scope">
              <span class="pointer"
                    @click="showChart('簇电流',scope.row.clusterId,'CLUSTER')">{{ scope.row.clusterCurrent }} A</span>
            </template>
          </el-table-column>
          <el-table-column
              label="簇SOC">
            <template slot-scope="scope">
              <span class="pointer"
                    @click="showChart('当前SOC',scope.row.clusterId,'CLUSTER')">{{ scope.row.currentSoc }} %</span>
            </template>
          </el-table-column>
          <el-table-column
              label="单体最高电压"
              prop="maxVoltage">
            <template slot-scope="scope">
              <span class="pointer"
                    @click="showChart('最高单体电压',scope.row.clusterId,'CLUSTER')">{{
                  scope.row.maxCellVoltage
                }} V</span>
            </template>
          </el-table-column>
          <el-table-column
              label="电池号码"
              prop="maxCellVoltageId">
          </el-table-column>
          <el-table-column
              label="单体最低电压"
              prop="minVoltage">
            <template slot-scope="scope">
              <span class="pointer"
                    @click="showChart('最低单体电压',scope.row.clusterId,'CLUSTER')">{{
                  scope.row.minCellVoltage
                }} V</span>
            </template>
          </el-table-column>
          <el-table-column
              label="电池号码"
              prop="minCellVoltageId">
          </el-table-column>
          <el-table-column
              label="单体最高温度">
            <template slot-scope="scope">
              <span class="pointer"
                    @click="showChart('最高单体温度',scope.row.clusterId,'CLUSTER')">{{
                  scope.row.maxCellTemp
                }} &#8451;</span>
            </template>
          </el-table-column>
          <el-table-column
              label="电池号码"
              prop="maxCellTempId">
          </el-table-column>
          <el-table-column
              label="单体最低温度"
              prop="minTemperature">
            <template slot-scope="scope">
              <span class="pointer"
                    @click="showChart('最低单体温度',scope.row.clusterId,'CLUSTER')">{{
                  scope.row.minCellTemp
                }} &#8451;</span>
            </template>
          </el-table-column>
          <el-table-column
              label="电池号码"
              prop="minCellTempId">
          </el-table-column>

        </el-table>
      </el-card>
    </div>
    <el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
    <point-chart ref="pointChart" :site-id="siteId"/>
    <point-table ref="pointTable"/>
  </div>
</template>

<script>
import {getBMSOverView} from '@/api/ems/dzjk'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
import {mapState} from "vuex";

export default {
  name: 'DzjkSbjkBmszl',
  components: {pointChart, PointTable},
  mixins: [getQuerySiteId, intervalUpdate],
  computed: {
    ...mapState({
      STACKWorkStatusOptions: state => state?.ems?.STACKWorkStatusOptions || {},
    })
  },
  data() {
    return {
      loading: false,
      baseInfoList: [],
      infoData: [
        {label: '电池堆总电压', attr: 'stackVoltage', unit: 'V', pointName: '电池堆电压'},
        {label: '可充电量', attr: 'availableChargeCapacity', unit: 'kWh', pointName: '可充电量'},
        {label: '累计充电量', attr: 'totalChargeCapacity', unit: 'kWh', pointName: '累计充电量'},
        {label: '电池堆总电流', attr: 'stackCurrent', unit: 'A', pointName: '电池堆总电流'},
        {label: '可放电量', attr: 'availableDischargeCapacity', unit: 'kWh', pointName: '可放电量'},
        {label: '累计放电量', attr: 'totalDischargeCapacity', unit: 'kWh', pointName: '累计放电量'},
        {label: 'SOH', attr: 'stackSoh', unit: '%', pointName: 'SOH'},
        {label: '平均温度', attr: 'operatingTemp', unit: '&#8451;', pointName: '平均温度'},
        {label: '绝缘电阻', attr: 'stackInsulationResistance', unit: '&Omega;', pointName: '绝缘电阻'},
      ]
    }
  },
  methods: {
    handleCardClass(item) {
      const {workStatus = ''} = item
      return !Object.keys(this.STACKWorkStatusOptions).find(i => i === workStatus) ? "timing-card-container" : workStatus === '9' ? 'warning-card-container' : 'running-card-container'
    },

    // 查看设备电位表格
    pointDetail(row, dataType) {
      const {siteId, deviceId} = row
      this.$refs.pointTable.showTable({siteId, deviceId, deviceCategory: 'STACK'}, dataType)
    },
    showChart(pointName, deviceId, deviceCategory = 'STACK') {
      pointName && this.$refs.pointChart.showChart({pointName, deviceCategory, deviceId})
    },
    updateData() {
      this.loading = true
      getBMSOverView(this.siteId).then(response => {
        this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
      }).finally(() => {
        this.loading = false
      })
    },
    init() {
      this.updateData()
      this.updateInterval(this.updateData)
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  //描述列表样式
  .descriptions-main {
    padding: 24px 300px 24px 24px;

    .descriptions-main-bg-color {
      padding: 14px 300px 14px 24px;
    }
  }
}

//  进度条样式
.process-container {
  width: 100px;
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);

  .process-line-bg {
    position: relative;
    width: 100%;
    height: 110px;
    background-color: #fff2cb;
    border-radius: 6px;
    box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);

    .process-line {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0;
      background-color: #fc6c6c;
      border-radius: 0 0 6px 6px;
      box-shadow: 0 0 10px rgb(252 108 108), 0 0 0 rgba(252, 108, 108, 0.5);
    }
  }

  .process {
    margin-top: 15px;
    color: #666666;
  }
}

</style>