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 shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
        <div slot="header">
          <span class="large-title">{{index+1}}#{{baseInfo.deviceName}}</span>
        </div>
        <div class="descriptions-main">
          <el-descriptions direction="vertical" :column="3" :colon="false">
            <el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="descriptions-main descriptions-main-bg-color">
          <el-descriptions direction="vertical" :column="3" :colon="false">
            <el-descriptions-item  labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.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 class="process-line" :style="{height:baseInfo.stackSoc+'%'}"></div>
            </div>
            <div class="process pointer" @click="showChart('当前SOC','电池堆',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
          </div>
        </div>
        <el-table
          class="common-table"
          :data="baseInfo.batteryDataList"
          stripe
          max-height="500"
          style="width: 100%;margin-top:25px;">
          <el-table-column
            prop="clusterId"
            label="簇号">
          </el-table-column>
          <el-table-column
            label="簇电压"
          >
            <template slot-scope="scope">
              <span class="pointer" @click="showChart('簇电压','电池簇',scope.row.clusterId)">{{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)">{{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)">{{scope.row.currentSoc}} %</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="maxVoltage"
            label="单体最高电压">
            <template slot-scope="scope">
              <span class="pointer" @click="showChart('最高单体电压','电池簇',scope.row.clusterId)">{{scope.row.maxCellVoltage}} V</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="maxCellVoltageId"
            label="电池号码">
          </el-table-column>
          <el-table-column
            prop="minVoltage"
            label="单体最低电压">
            <template slot-scope="scope">
              <span class="pointer" @click="showChart('最低单体电压','电池簇',scope.row.clusterId)">{{scope.row.minCellVoltage}} V</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="minCellVoltageId"
            label="电池号码">
          </el-table-column>
          <el-table-column
            label="单体最高温度">
            <template slot-scope="scope">
              <span class="pointer" @click="showChart('最高单体温度','电池簇',scope.row.clusterId)">{{scope.row.maxCellTemp}} &#8451;</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="maxCellTempId"
            label="电池号码">
          </el-table-column>
          <el-table-column
            prop="minTemperature"
            label="单体最低温度">
            <template slot-scope="scope">
              <span class="pointer" @click="showChart('最低单体温度','电池簇',scope.row.clusterId)">{{scope.row.minCellTemp}} &#8451;</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="minCellTempId"
            label="电池号码">
          </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"/>
  </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";
export default {
  name:'DzjkSbjkBmszl',
  components: {pointChart,},
  mixins:[getQuerySiteId,intervalUpdate],
  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:{
    //todo 后续需要新增设备id
    showChart(pointName,categoryName,deviceId){
      console.log('点击查询图表',pointName,categoryName,deviceId)
      pointName && this.$refs.pointChart.showChart({pointName,categoryName,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 scoped lang="scss">
::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>