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

新增单站监控=>设备监控=>PCS、BMS总览、BMS电池簇页面

Browse Source
This commit is contained in:
白菜
2025-06-21 23:59:01 +08:00
parent 48c93b3efd
commit 5ae09461be
6 changed files with 609 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
src/views/ems/dzjk/sbjk/bmsdcc/index.vue Normal file
View File

@ -0,0 +1,216 @@
<template>
<div>
<el-card shadow="always" class="bmszl-common-card-container common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="card-title bmszl-title">1#电池簇</span>
</div>
<div class="info-main">
<el-descriptions direction="vertical" :column="3" :colon="false" border>
<el-descriptions-item v-for="(item,index) in statusData" :key="index+'pcsStatusData'" :span="1" :label="item.label">{{item.value}}</el-descriptions-item>
</el-descriptions>
<el-descriptions direction="vertical" :column="3" :colon="false" border>
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{item.value}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
</el-descriptions>
<!-- 进度-->
<div class="process-container">
<div class="process-line-bg">
<div class="process-line"></div>
</div>
<div class="process">当前SOC : 25%</div>
</div>
</div>
</el-card>
<div class="table-container">
<el-table
:data="tableData"
stripe
max-height="500"
style="width: 100%">
<el-table-column
prop="name"
label="簇号">
</el-table-column>
<el-table-column
label="簇电压"
>
<template slot-scope="scope">
<span>{{scope.row.voltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="簇电流">
<template slot-scope="scope">
<span>{{scope.row.electric}} A</span>
</template>
</el-table-column>
<el-table-column
label="簇SOC">
<template slot-scope="scope">
<span>{{scope.row.soc}} %</span>
</template>
</el-table-column>
<el-table-column
prop="maxVoltage"
label="单体最高电压">
<template slot-scope="scope">
<span>{{scope.row.maxVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
prop="minVoltage"
label="单体最低电压">
<template slot-scope="scope">
<span>{{scope.row.minVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="单体最高温度">
<template slot-scope="scope">
<span>{{scope.row.maxTemperature}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
prop="minTemperature"
label="单体最低温度">
<template slot-scope="scope">
<span>{{scope.row.minTemperature}} &#8451;</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
components:{},
data() {
return {
statusData:[
{label:'工作状态',value:'',attr:''},
{label:'与PCS通信',value:'',attr:''},
{label:'与EMS通信',value:'',attr:''},
],
infoData:[
{label:'簇电压',value:'',attr:'',unit:'V'},
{label:'可充电量',value:'',attr:'',unit:'kWh'},
{label:'累计充电量',value:'',attr:'',unit:'kWh'},
{label:'簇电流',value:'',attr:'',unit:'A'},
{label:'可放电量',value:'',attr:'',unit:'kWh'},
{label:'累计放电量',value:'',attr:'',unit:'kWh'},
{label:'SOH',value:'',attr:'',unit:'%'},
{label:'平均温度',value:'',attr:'',unit:'&#8451;'},
{label:'绝缘电阻',value:'',attr:'',unit:'&Omega;'},
],
tableData:[
{name:'1#电池堆-1#电池簇',voltage:'742.8',electric:'-4.4',soc:'98',maxVoltage:'3.301',minVoltage:'3.102',maxTemperature:'12.8',minTemperature:'11.3'},
{name:'1#电池堆-2#电池簇',voltage:'790.1',electric:'-4.2',soc:'90',maxVoltage:'3.391',minVoltage:'3.192',maxTemperature:'13.5',minTemperature:'11.4'},
{name:'1#电池堆-3#电池簇',voltage:'740.3',electric:'-4.5',soc:'94',maxVoltage:'3.101',minVoltage:'3.198',maxTemperature:'10.9',minTemperature:'11.5'},
{name:'1#电池堆-4#电池簇',voltage:'744.9',electric:'-4.5',soc:'99',maxVoltage:'3.221',minVoltage:'3.234',maxTemperature:'11.4',minTemperature:'11.6'},
]
}
},
}
</script>
<style scoped lang="scss">
.bmszl-common-card-container{
::v-deep{
.el-card__header{
background-color: transparent;
.bmszl-title{
font-size: 20px;
font-weight: 500;
line-height: 40px;
}
}
}
}
//描述列表样式
.info-main{
padding:14px;
padding-right:300px;
position:relative;
::v-deep {
.el-descriptions{
margin-bottom: 25px;
}
.el-descriptions-item__cell[colspan='1']{
width:25%
}
.el-descriptions-item__label{
line-height: 14px;
color: #666666;
font-size: 12px;
}
.el-descriptions-item__content{
line-height: 19px;
color: #666666;
font-size: 16px;
font-weight: 500;
}
.danger{
color:#FC6B69;
}
.save{
color:#09ADA3;
}
.keep{
color:#3C81FF;
}
}
// 进度条样式
.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;
}
}
}
//表格样式
.table-container{
margin-top:25px;
::v-deep{
.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
border-bottom: none;
}
.el-table .el-table__header-wrapper th{
background-color: #f1f5fc;
}
.table-head{
color:#515a6e;
}
}
}
</style>