190 lines
7.7 KiB
Vue
190 lines
7.7 KiB
Vue
|
||
<template>
|
||
<div v-loading="loading">
|
||
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
|
||
<el-card shadow="always" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||
:class="{
|
||
'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
|
||
'running-card-container':baseInfo.workStatus === '0'
|
||
}">
|
||
<div slot="header">
|
||
<span class="large-title">{{index+1}}#{{baseInfo.parentDeviceName?`${baseInfo.parentDeviceName} —> ` : ''}}{{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.currentSoc+'%'}"></div>
|
||
</div>
|
||
<div class="process pointer" @click="showChart( '当前SOC','电池簇',baseInfo.deviceId)">当前SOC : {{baseInfo.currentSoc}}%</div>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
class="common-table"
|
||
:data="baseInfo.batteryDataList"
|
||
stripe
|
||
style="width: 100%;margin-top:25px;">
|
||
<el-table-column
|
||
prop="dataName"
|
||
label="名称">
|
||
<template slot-scope="scope">
|
||
<span v-html="scope.row.dataName+'（'+unitObj[scope.row.dataName]+'）'"></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="avgData"
|
||
label="单体平均值"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.avgData}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="minData"
|
||
label="单体最小值">
|
||
<template slot-scope="scope">
|
||
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.minData}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="minDataID"
|
||
label="单体最小值ID">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="maxData"
|
||
label="单体最大值">
|
||
<template slot-scope="scope">
|
||
<span class="pointer " @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.maxData}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="maxDataID"
|
||
label="单体最大值ID">
|
||
</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 pointChart from "./../PointChart.vue";
|
||
import {getBMSBatteryCluster} from '@/api/ems/dzjk'
|
||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||
export default {
|
||
name:'DzjkSbjkBmsdcc',
|
||
mixins:[getQuerySiteId,intervalUpdate],
|
||
components:{pointChart},
|
||
data() {
|
||
return {
|
||
loading:false,
|
||
unitObj:{
|
||
'电压':'V',
|
||
'温度':'℃',
|
||
'SOC':'%'
|
||
},
|
||
tablePointNameMap:{
|
||
'电压单体最小值':'最低单体电压',
|
||
'电压单体平均值':'电压平均值',
|
||
'电压单体最大值':'最高单体电压',
|
||
'温度单体最小值':'最低单体温度',
|
||
'温度单体平均值':'平均单体温度',
|
||
'温度单体最大值':'最高单体温度',
|
||
'SOC单体最小值':'最低单体SOC',
|
||
'SOC单体平均值':'当前SOC',
|
||
'SOC单体最大值':'最高单体SOC',
|
||
},
|
||
baseInfoList:[],
|
||
infoData:[
|
||
{label:'簇电压',attr:'clusterVoltage',unit:'V',pointName:'簇电压'},
|
||
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh',pointName:'可充电量'},
|
||
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh',pointName:'累计充电量'},
|
||
{label:'簇电流',attr:'clusterCurrent',unit:'A',pointName:'簇电流'},
|
||
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh',pointName:'可放电量'},
|
||
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh',pointName:'累计放电量'},
|
||
{label:'SOH',attr:'soh',unit:'%',pointName:'SOH'},
|
||
{label:'平均温度',attr:'averageTemperature',unit:'℃',pointName:'平均温度'},
|
||
{label:'绝缘电阻',attr:'insulationResistance',unit:'Ω',pointName:'绝缘电阻'},
|
||
],
|
||
}
|
||
},
|
||
methods:{
|
||
showChart(pointName,categoryName,deviceId){
|
||
console.log('点击查询图表',pointName,categoryName,deviceId)
|
||
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
|
||
},
|
||
updateData(){
|
||
this.loading = true
|
||
getBMSBatteryCluster(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-bottom{
|
||
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: 25%;
|
||
background-color: #ffbf14;
|
||
border-radius: 0 0 6px 6px;
|
||
box-shadow: 0 0 10px #ffbf14, 0 0 0 rgba(255, 191, 20, 0.5);
|
||
}
|
||
}
|
||
.process{
|
||
margin-top:15px;
|
||
color:#666666;
|
||
}
|
||
}
|
||
|
||
</style>
|