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-22 21:01:34 +08:00
parent 201587e13e
commit dea617d853
5 changed files with 205 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,12 +5,16 @@
<div slot="header">
<span class="large-title">电池堆一</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>
<div class="descriptions-main">
<el-descriptions direction="vertical" :column="3" :colon="false">
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep" :span="1" label="工作状态" >放电</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与PCS通信">正常</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与EMS通信">正常</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>
</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">{{item.value}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
</el-descriptions>
<!-- 进度-->
<div class="process-container">
@ -71,15 +75,15 @@ export default {
{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;'},
{label:'电池堆总电压',value:'742',attr:'',unit:'V'},
{label:'可充电量',value:'100',attr:'',unit:'kWh'},
{label:'累计充电量',value:'100',attr:'',unit:'kWh'},
{label:'电池堆总电流',value:'-12.7',attr:'',unit:'A'},
{label:'可放电量',value:'300',attr:'',unit:'kWh'},
{label:'累计放电量',value:'300',attr:'',unit:'kWh'},
{label:'SOH',value:'99',attr:'',unit:'%'},
{label:'平均温度',value:'20',attr:'',unit:'&#8451;'},
{label:'绝缘电阻',value:'1000',attr:'',unit:'&Omega;'},
],
tableData:[
{name:'电压（V）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
@ -93,71 +97,46 @@ export default {
</script>
<style scoped lang="scss">
//描述列表样式
.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: #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;
::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: 25%;
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;
}
}
//表格样式
.table-container{