xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备监控标题样式统一

Browse Source
This commit is contained in:
白菜
2025-09-17 14:52:08 +08:00
parent 902e9a0a03
commit 36b1e19120
6 changed files with 158 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/ems/dzjk/sbjk/bmszl/index.vue
View File

@ -2,20 +2,24 @@
<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">
<el-card :class="{
'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
'running-card-container':baseInfo.workStatus === '0'
}" 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">{{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 :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>
</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">
<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>
@ -24,20 +28,20 @@
<!-- 进度-->
<div class="process-container">
<div class="process-line-bg">
<div class="process-line" :style="{height:baseInfo.stackSoc+'%'}"></div>
<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
class="common-table"
:data="baseInfo.batteryDataList"
stripe
class="common-table"
max-height="500"
stripe
style="width: 100%;margin-top:25px;">
<el-table-column
prop="clusterId"
label="簇号">
label="簇号"
prop="clusterId">
</el-table-column>
<el-table-column
label="簇电压"
@ -59,26 +63,26 @@
</template>
</el-table-column>
<el-table-column
prop="maxVoltage"
label="单体最高电压">
label="单体最高电压"
prop="maxVoltage">
<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="电池号码">
label="电池号码"
prop="maxCellVoltageId">
</el-table-column>
<el-table-column
prop="minVoltage"
label="单体最低电压">
label="单体最低电压"
prop="minVoltage">
<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="电池号码">
label="电池号码"
prop="minCellVoltageId">
</el-table-column>
<el-table-column
label="单体最高温度">
@ -87,19 +91,19 @@
</template>
</el-table-column>
<el-table-column
prop="maxCellTempId"
label="电池号码">
label="电池号码"
prop="maxCellTempId">
</el-table-column>
<el-table-column
prop="minTemperature"
label="单体最低温度">
label="单体最低温度"
prop="minTemperature">
<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="电池号码">
label="电池号码"
prop="minCellTempId">
</el-table-column>
</el-table>
@ -137,7 +141,6 @@ export default {
}
},
methods:{
//todo 后续需要新增设备id
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
@ -157,7 +160,7 @@ export default {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
::v-deep {
//描述列表样式
.descriptions-main {