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

36
src/assets/styles/common.scss
View File

@ -50,3 +50,39 @@
background-color: transparent; background-color: transparent;
} }
} }
//描述样式 PCS、BMS总览、BMS电池簇页面公共样式
.descriptions-main{
padding:24px;
position: relative;
&.descriptions-main-bg-color{
background-color:#f1f5fc ;
.el-descriptions__body{
background-color:#f1f5fc ;
}
}
.el-descriptions-item__cell[colspan='1']{
width:25%
}
.el-descriptions__body .el-descriptions__table{
.descriptions-direction{
line-height: 19px;
color: #666666;
font-size: 16px;
font-weight: 500;
}
.descriptions-label{
line-height: 14px;
color: #666666;
font-size: 12px;
}
.danger{
color:#FC6B69;
}
.save{
color:#09ADA3;
}
.keep{
color:#3C81FF;
}
}
}

15
src/views/ems/dzjk/home/index.vue
View File

@ -40,6 +40,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
class-name="alarm-content"
prop="alarmContent" prop="alarmContent"
label="告警内容"> label="告警内容">
</el-table-column> </el-table-column>
@ -137,11 +138,23 @@ export default {
border-bottom: none; border-bottom: none;
} }
.warning-status{ .warning-status{
color:red; color:#FC6B69;
&::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #FC6B69;
margin-right: 8px;
}
} }
.table-head{ .table-head{
color:#515a6e; color:#515a6e;
} }
.alarm-content{
color:#333333;
}
} }
} }
</style> </style>

151
src/views/ems/dzjk/sbjk/bmsdcc/index.vue
View File

@ -5,21 +5,25 @@
<div slot="header"> <div slot="header">
<span class="large-title">1#电池簇</span> <span class="large-title">1#电池簇</span>
</div> </div>
<div class="info-main"> <div class="descriptions-main">
<el-descriptions direction="vertical" :column="3" :colon="false" border> <el-descriptions direction="vertical" :column="3" :colon="false">
<el-descriptions-item v-for="(item,index) in statusData" :key="index+'pcsStatusData'" :span="1" :label="item.label">{{item.value}}</el-descriptions-item> <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep" :span="1" label="工作状态" >放电</el-descriptions-item>
</el-descriptions> <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与PCS通信">正常</el-descriptions-item>
<el-descriptions direction="vertical" :column="3" :colon="false" border> <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与EMS通信">正常</el-descriptions-item>
<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>
</el-descriptions> </div>
<!-- 进度--> <div class="descriptions-main descriptions-main-bg-color">
<div class="process-container"> <el-descriptions direction="vertical" :column="3" :colon="false">
<div class="process-line-bg"> <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>
<div class="process-line"></div> </el-descriptions>
</div> <!-- 进度-->
<div class="process">当前SOC : 25%</div> <div class="process-container">
<div class="process-line-bg">
<div class="process-line"></div>
</div>
<div class="process">当前SOC : 25%</div>
</div>
</div> </div>
</div>
</el-card> </el-card>
<div class="table-container"> <div class="table-container">
<el-table <el-table
@ -29,6 +33,7 @@
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
prop="name" prop="name"
width="190"
label="簇号"> label="簇号">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -89,21 +94,16 @@ export default {
components:{}, components:{},
data() { data() {
return { return {
statusData:[
{label:'工作状态',value:'',attr:''},
{label:'与PCS通信',value:'',attr:''},
{label:'与EMS通信',value:'',attr:''},
],
infoData:[ infoData:[
{label:'簇电压',value:'',attr:'',unit:'V'}, {label:'簇电压',value:'742',attr:'',unit:'V'},
{label:'可充电量',value:'',attr:'',unit:'kWh'}, {label:'可充电量',value:'100',attr:'',unit:'kWh'},
{label:'累计充电量',value:'',attr:'',unit:'kWh'}, {label:'累计充电量',value:'100',attr:'',unit:'kWh'},
{label:'簇电流',value:'',attr:'',unit:'A'}, {label:'簇电流',value:'12.7',attr:'',unit:'A'},
{label:'可放电量',value:'',attr:'',unit:'kWh'}, {label:'可放电量',value:'300',attr:'',unit:'kWh'},
{label:'累计放电量',value:'',attr:'',unit:'kWh'}, {label:'累计放电量',value:'300',attr:'',unit:'kWh'},
{label:'SOH',value:'',attr:'',unit:'%'}, {label:'SOH',value:'98',attr:'',unit:'%'},
{label:'平均温度',value:'',attr:'',unit:'&#8451;'}, {label:'平均温度',value:'11',attr:'',unit:'&#8451;'},
{label:'绝缘电阻',value:'',attr:'',unit:'&Omega;'}, {label:'绝缘电阻',value:'2000',attr:'',unit:'&Omega;'},
], ],
tableData:[ 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#电池堆-1#电池簇',voltage:'742.8',electric:'-4.4',soc:'98',maxVoltage:'3.301',minVoltage:'3.102',maxTemperature:'12.8',minTemperature:'11.3'},
@ -118,68 +118,43 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
//描述列表样式 ::v-deep {
.info-main{ //描述列表样式
padding:14px; .descriptions-main{
padding-right:300px; padding:24px 300px 24px 24px;
position:relative; }
::v-deep { .descriptions-main-bottom{
.el-descriptions{ padding:14px 300px 14px 24px;
margin-bottom: 25px; }
} }
.el-descriptions-item__cell[colspan='1']{ // 进度条样式
width:25% .process-container{
} width:100px;
.el-descriptions-item__label{ position: absolute;
line-height: 14px; right:70px;
color: #666666; top:50%;
font-size: 12px; transform: translateY(-50%);
} .process-line-bg{
.el-descriptions-item__content{ position: relative;
line-height: 19px; width:100%;
color: #666666; height: 110px;
font-size: 16px; background-color:#fff2cb ;
font-weight: 500; border-radius: 6px;
} box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
.danger{ .process-line{
color:#FC6B69; position: absolute;
} left: 0;
.save{ bottom: 0;
color:#09ADA3; width: 100%;
} height: 25%;
.keep{ background-color: #ffbf14;
color:#3C81FF; border-radius: 0 0 6px 6px;
box-shadow: 0 0 10px #ffbf14, 0 0 0 rgba(255, 191, 20, 0.5);
} }
} }
// 进度条样式 .process{
.process-container{ margin-top:15px;
width:100px; color:#666666;
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;
}
} }
} }

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

@ -5,12 +5,16 @@
<div slot="header"> <div slot="header">
<span class="large-title">电池堆一</span> <span class="large-title">电池堆一</span>
</div> </div>
<div class="info-main"> <div class="descriptions-main">
<el-descriptions direction="vertical" :column="3" :colon="false" border> <el-descriptions direction="vertical" :column="3" :colon="false">
<el-descriptions-item v-for="(item,index) in statusData" :key="index+'pcsStatusData'" :span="1" :label="item.label">{{item.value}}</el-descriptions-item> <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>
<el-descriptions direction="vertical" :column="3" :colon="false" border> </div>
<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 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> </el-descriptions>
<!-- 进度--> <!-- 进度-->
<div class="process-container"> <div class="process-container">
@ -71,15 +75,15 @@ export default {
{label:'与EMS通信',value:'',attr:''}, {label:'与EMS通信',value:'',attr:''},
], ],
infoData:[ infoData:[
{label:'电池堆总电压',value:'',attr:'',unit:'V'}, {label:'电池堆总电压',value:'742',attr:'',unit:'V'},
{label:'可充电量',value:'',attr:'',unit:'kWh'}, {label:'可充电量',value:'100',attr:'',unit:'kWh'},
{label:'累计充电量',value:'',attr:'',unit:'kWh'}, {label:'累计充电量',value:'100',attr:'',unit:'kWh'},
{label:'电池堆总电流',value:'',attr:'',unit:'A'}, {label:'电池堆总电流',value:'-12.7',attr:'',unit:'A'},
{label:'可放电量',value:'',attr:'',unit:'kWh'}, {label:'可放电量',value:'300',attr:'',unit:'kWh'},
{label:'累计放电量',value:'',attr:'',unit:'kWh'}, {label:'累计放电量',value:'300',attr:'',unit:'kWh'},
{label:'SOH',value:'',attr:'',unit:'%'}, {label:'SOH',value:'99',attr:'',unit:'%'},
{label:'平均温度',value:'',attr:'',unit:'&#8451;'}, {label:'平均温度',value:'20',attr:'',unit:'&#8451;'},
{label:'绝缘电阻',value:'',attr:'',unit:'&Omega;'}, {label:'绝缘电阻',value:'1000',attr:'',unit:'&Omega;'},
], ],
tableData:[ tableData:[
{name:'电压（V）',average:'20',min:10,minID:'1',max:'30',maxID:'2'}, {name:'电压（V）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
@ -93,71 +97,46 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
//描述列表样式 ::v-deep {
.info-main{ //描述列表样式
padding:14px; .descriptions-main {
padding-right:300px; padding: 24px 300px 24px 24px;
position:relative;
::v-deep { .descriptions-main-bg-color {
.el-descriptions{ padding: 14px 300px 14px 24px;
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;
} }
} }
} }
// 进度条样式
.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{ .table-container{

109
src/views/ems/dzjk/sbjk/pcs/index.vue
View File

@ -14,19 +14,28 @@
<el-button size="small">默认按钮</el-button> <el-button size="small">默认按钮</el-button>
</div> </div>
</el-header> </el-header>
<el-main class="info-main"> <el-main style="padding: 0">
<el-descriptions direction="vertical" :column="4" :colon="false" border> <div class="descriptions-main">
<el-descriptions-item v-for="(item,index) in statusData" :key="index+'pcsStatusData'" :span="1" :label="item.label">{{item.value}}</el-descriptions-item> <el-descriptions direction="vertical" :column="4" :colon="false">
</el-descriptions> <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction danger" :span="1" label="工作状态">停止</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="并网状态">并网</el-descriptions-item>
<el-descriptions direction="vertical" :column="4" :colon="false" border> <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction save" :span="1" label="设备状态">在线</el-descriptions-item>
<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-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="控制模式">远程</el-descriptions-item>
</el-descriptions> </el-descriptions>
</div>
<el-descriptions direction="vertical" :column="4" :colon="false" border> <div class="descriptions-main descriptions-main-bg-color">
<el-descriptions-item v-for="(item,index) in zhiluData" :key="index+'pcsZhiluData'" :span="item.span || 1" :label="item.label">{{item.value}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item> <el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction" direction="vertical" :column="4" :colon="false">
</el-descriptions> <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>
<div class="descriptions-main">
<el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction keep" direction="vertical" :column="4" :colon="false">
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep" :span="4" label="支路一">放电中</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流功率">-9.8kW</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电压">720.4V</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电流">-13.1A</el-descriptions-item>
</el-descriptions>
</div>
</el-main> </el-main>
</el-container> </el-container>
</div> </div>
@ -39,35 +48,23 @@ export default {
components:{RealTimeBaseInfo}, components:{RealTimeBaseInfo},
data() { data() {
return { return {
statusData:[
{label:'工作状态',value:'',attr:''},
{label:'并网状态',value:'',attr:''},
{label:'设备状态',value:'',attr:''},
{label:'控制模式',value:'',attr:''},
],
infoData:[ infoData:[
{label:'总交流有功电率',value:'',attr:'',unit:'kW'}, {label:'总交流有功电率',value:'-7.2',attr:'',unit:'kW'},
{label:'当天交流充电量',value:'',attr:'',unit:'kWh'}, {label:'当天交流充电量',value:'0',attr:'',unit:'kWh'},
{label:'A相电压',value:'',attr:'',unit:'V'}, {label:'A相电压',value:'12',attr:'',unit:'V'},
{label:'A相电流',value:'',attr:'',unit:'A'}, {label:'A相电流',value:'20',attr:'',unit:'A'},
{label:'总交流无功电率',value:'',attr:'',unit:'kVar'}, {label:'总交流无功电率',value:'-0.1',attr:'',unit:'kVar'},
{label:'当天交流放电量',value:'',attr:'',unit:'kWh'}, {label:'当天交流放电量',value:'145',attr:'',unit:'kWh'},
{label:'B相电压',value:'',attr:'',unit:'V'}, {label:'B相电压',value:'12',attr:'',unit:'V'},
{label:'B相电流',value:'',attr:'',unit:'A'}, {label:'B相电流',value:'20',attr:'',unit:'A'},
{label:'总交流视在功率',value:'',attr:'',unit:'kVA'}, {label:'总交流视在功率',value:'8',attr:'',unit:'kVA'},
{label:'PCS模块温度',value:'',attr:'',unit:'&#8451;'}, {label:'PCS模块温度',value:'40',attr:'',unit:'&#8451;'},
{label:'C相电压',value:'',attr:'',unit:'V'}, {label:'C相电压',value:'12',attr:'',unit:'V'},
{label:'C相电流',value:'',attr:'',unit:'A'}, {label:'C相电流',value:'20',attr:'',unit:'A'},
{label:'总交流功率因数',value:'',attr:'',unit:''}, {label:'总交流功率因数',value:'-0.9',attr:'',unit:''},
{label:'PCS环境温度',value:'',attr:'',unit:'&#8451;'}, {label:'PCS环境温度',value:'12',attr:'',unit:'&#8451;'},
{label:'交流频率',value:'',attr:'',unit:'Hz'} {label:'交流频率',value:'102',attr:'',unit:'Hz'}
], ],
zhiluData:[
{label:'支路一',value:'',attr:'',unit:'kW',span:4},
{label:'直流功率',value:'',attr:'',unit:'kW'},
{label:'直流电压',value:'',attr:'',unit:'V'},
{label:'直流电流',value:'',attr:'',unit:'A'},
]
} }
}, },
@ -106,37 +103,5 @@ export default {
transform: translateY(-50%); transform: translateY(-50%);
} }
} }
.info-main{
::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;
}
}
}
} }
</style> </style>