优化
This commit is contained in:
白菜
@ -1,4 +1,3 @@
|
||||
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
|
||||
@ -8,12 +7,14 @@
|
||||
}" 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>
|
||||
<span class="large-title">{{ baseInfo.deviceName }}</span>
|
||||
<div class="info">
|
||||
<div>数据更新时间：{{ baseInfo.dataUpdateTime || '-'}}</div>
|
||||
<div>数据更新时间：{{ baseInfo.dataUpdateTime || '-' }}</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(baseInfo,'point')">详细</el-button>
|
||||
<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"
|
||||
@ -24,16 +25,28 @@
|
||||
</div>
|
||||
<div class="descriptions-main">
|
||||
<el-descriptions :colon="false" :column="3" direction="vertical">
|
||||
<el-descriptions-item :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label" >{{$store.state.ems.workStatusOptions[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-item
|
||||
:contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1"
|
||||
label="工作状态" labelClassName="descriptions-label">
|
||||
{{ $store.state.ems.workStatusOptions[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>
|
||||
<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>
|
||||
@ -42,80 +55,89 @@
|
||||
<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 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;">
|
||||
:data="baseInfo.batteryDataList"
|
||||
class="common-table"
|
||||
max-height="500"
|
||||
stripe
|
||||
style="width: 100%;margin-top:25px;">
|
||||
<el-table-column
|
||||
label="簇号"
|
||||
prop="clusterId">
|
||||
label="簇号"
|
||||
prop="clusterId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="簇电压"
|
||||
label="簇电压"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('簇电压',scope.row.clusterId,'CLUSTER')">{{scope.row.clusterVoltage}} V</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('簇电压',scope.row.clusterId,'CLUSTER')">{{ scope.row.clusterVoltage }} V</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="簇电流">
|
||||
label="簇电流">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('簇电流',scope.row.clusterId,'CLUSTER')">{{scope.row.clusterCurrent}} A</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('簇电流',scope.row.clusterId,'CLUSTER')">{{ scope.row.clusterCurrent }} A</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="簇SOC">
|
||||
label="簇SOC">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('当前SOC',scope.row.clusterId,'CLUSTER')">{{scope.row.currentSoc}} %</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('当前SOC',scope.row.clusterId,'CLUSTER')">{{ scope.row.currentSoc }} %</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="单体最高电压"
|
||||
prop="maxVoltage">
|
||||
label="单体最高电压"
|
||||
prop="maxVoltage">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('最高单体电压',scope.row.clusterId,'CLUSTER')">{{scope.row.maxCellVoltage}} V</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('最高单体电压',scope.row.clusterId,'CLUSTER')">{{ scope.row.maxCellVoltage }} V</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="电池号码"
|
||||
prop="maxCellVoltageId">
|
||||
label="电池号码"
|
||||
prop="maxCellVoltageId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="单体最低电压"
|
||||
prop="minVoltage">
|
||||
label="单体最低电压"
|
||||
prop="minVoltage">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('最低单体电压',scope.row.clusterId,'CLUSTER')">{{scope.row.minCellVoltage}} V</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('最低单体电压',scope.row.clusterId,'CLUSTER')">{{ scope.row.minCellVoltage }} V</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="电池号码"
|
||||
prop="minCellVoltageId">
|
||||
label="电池号码"
|
||||
prop="minCellVoltageId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="单体最高温度">
|
||||
label="单体最高温度">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('最高单体温度',scope.row.clusterId,'CLUSTER')">{{scope.row.maxCellTemp}} ℃</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('最高单体温度',scope.row.clusterId,'CLUSTER')">{{ scope.row.maxCellTemp }} ℃</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="电池号码"
|
||||
prop="maxCellTempId">
|
||||
label="电池号码"
|
||||
prop="maxCellTempId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="单体最低温度"
|
||||
prop="minTemperature">
|
||||
label="单体最低温度"
|
||||
prop="minTemperature">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('最低单体温度',scope.row.clusterId,'CLUSTER')">{{scope.row.minCellTemp}} ℃</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('最低单体温度',scope.row.clusterId,'CLUSTER')">{{ scope.row.minCellTemp }} ℃</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="电池号码"
|
||||
prop="minCellTempId">
|
||||
label="电池号码"
|
||||
prop="minCellTempId">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
@ -133,43 +155,46 @@ 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";
|
||||
|
||||
export default {
|
||||
name:'DzjkSbjkBmszl',
|
||||
components: {pointChart,PointTable},
|
||||
mixins:[getQuerySiteId,intervalUpdate],
|
||||
name: 'DzjkSbjkBmszl',
|
||||
components: {pointChart, PointTable},
|
||||
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:'℃',pointName:'平均温度'},
|
||||
{label:'绝缘电阻',attr:'stackInsulationResistance',unit:'Ω',pointName:'绝缘电阻'},
|
||||
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: '℃', pointName: '平均温度'},
|
||||
{label: '绝缘电阻', attr: 'stackInsulationResistance', unit: 'Ω', pointName: '绝缘电阻'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row,dataType){
|
||||
const {siteId,deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId,deviceId,deviceCategory:'STACK'},dataType)
|
||||
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})
|
||||
showChart(pointName, deviceId, deviceCategory = 'STACK') {
|
||||
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory, deviceId})
|
||||
},
|
||||
updateData(){
|
||||
updateData() {
|
||||
this.loading = true
|
||||
getBMSOverView(this.siteId).then(response => {
|
||||
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {this.loading = false})
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
init(){
|
||||
init() {
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
@ -189,21 +214,24 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条样式
|
||||
.process-container{
|
||||
width:100px;
|
||||
.process-container {
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
right:70px;
|
||||
top:50%;
|
||||
right: 70px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.process-line-bg{
|
||||
|
||||
.process-line-bg {
|
||||
position: relative;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
background-color:#fff2cb ;
|
||||
background-color: #fff2cb;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
|
||||
.process-line{
|
||||
|
||||
.process-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@ -214,9 +242,10 @@ export default {
|
||||
box-shadow: 0 0 10px rgb(252 108 108), 0 0 0 rgba(252, 108, 108, 0.5);
|
||||
}
|
||||
}
|
||||
.process{
|
||||
margin-top:15px;
|
||||
color:#666666;
|
||||
|
||||
.process {
|
||||
margin-top: 15px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user