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

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

@ -1,11 +1,142 @@
<script setup lang="ts">
</script>
<template>
<div>第三层路由 单站监控=>设备监控=>PCS</div>
<div class="pcs-ems-dashboard-editor-container">
<real-time-base-info/>
<el-container class="pcs-container">
<el-header class="pcs-header">
<div class="pcs-title">PCS</div>
<div class="pcs-status">
<div>通信中断</div>
<div>数据更新时间：2024-10-11 12:00:00</div>
</div>
<div class="pcs-btns">
<el-button type="warning" size="small">警告按钮</el-button>
<el-button size="small">默认按钮</el-button>
</div>
</el-header>
<el-main class="info-main">
<el-descriptions direction="vertical" :column="4" :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="4" :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>
<el-descriptions direction="vertical" :column="4" :colon="false" border>
<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>
</el-main>
</el-container>
</div>
</template>
<style scoped lang="scss">
<script>
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
export default {
components:{RealTimeBaseInfo},
data() {
return {
statusData:[
{label:'工作状态',value:'',attr:''},
{label:'并网状态',value:'',attr:''},
{label:'设备状态',value:'',attr:''},
{label:'控制模式',value:'',attr:''},
],
infoData:[
{label:'总交流有功电率',value:'',attr:'',unit:'kW'},
{label:'当天交流充电量',value:'',attr:'',unit:'kWh'},
{label:'A相电压',value:'',attr:'',unit:'V'},
{label:'A相电流',value:'',attr:'',unit:'A'},
{label:'总交流无功电率',value:'',attr:'',unit:'kVar'},
{label:'当天交流放电量',value:'',attr:'',unit:'kWh'},
{label:'B相电压',value:'',attr:'',unit:'V'},
{label:'B相电流',value:'',attr:'',unit:'A'},
{label:'总交流视在功率',value:'',attr:'',unit:'kVA'},
{label:'PCS模块温度',value:'',attr:'',unit:'&#8451;'},
{label:'C相电压',value:'',attr:'',unit:'V'},
{label:'C相电流',value:'',attr:'',unit:'A'},
{label:'总交流功率因数',value:'',attr:'',unit:''},
{label:'PCS环境温度',value:'',attr:'',unit:'&#8451;'},
{label:'交流频率',value:'',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'},
]
}
},
}
</script>
<style scoped lang="scss">
.pcs-container{
margin-top: 25px;
//红色标题
.pcs-header{
background: #FC6B69;
display: flex;
position: relative;
justify-content: flex-start;
align-items: center;
padding: 0;
height: 60px;
border-radius: 6px 6px 0 0;
.pcs-title{
color: #ffffff;
font-size: 20px;
font-weight: 500;
line-height: 20px;
padding: 0 50px 0 25px;
}
.pcs-status{
color: #ffffff;
font-size: 12px;
line-height: 20px;
}
.pcs-btns{
position: absolute;
right: 25px;
top: 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>