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

12
src/router/ems.js
View File

@ -61,6 +61,18 @@ export const dzjk=[
component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'),
name: 'DjzkSbjkPcs',
meta: { title: 'Pcs',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
},
{
path: 'bmszl',
component: () => import('@/views/ems/dzjk/sbjk/bmszl/index.vue'),
name: 'DjzkSbjkBmszl',
meta: { title: 'BMS总览',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
},
{
path: 'bmsdcc',
component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'),
name: 'DjzkSbjkBmsdcc',
meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
}
]
}

54
src/views/ems/dzjk/sbjk/RealTimeBaseInfo.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<!-- 6个方块-->
<el-row :gutter="10">
<el-col :xs="12" :sm="8" :lg="4" class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
<single-square-box :data="item"></single-square-box>
</el-col>
</el-row>
</template>
<script>
import SingleSquareBox from "@/components/Ems/SingleSquareBox/index.vue";
export default {
components:{SingleSquareBox},
data() {
return {
// 单个电站 四个方块数据
singleZdSqaure:[{
title:'实时有功功率（kW）',
value:'22.74',
bgColor:'#FFF2CB'
},{
title:'实时无功功率（kVar）',
value:'22.74',
bgColor:'#CBD6FF'
},{
title:'电池催SOC',
value:'22.74',
bgColor:'#DCCBFF'
},{
title:'电池堆SOH',
value:'22.74',
bgColor:'#FFD4CB'
},{
title:'今日充电量（kWh）',
value:'22.74',
bgColor:'#FFD6F8'
},{
title:'今日放电量（kWh）',
value:'22.74',
bgColor:'#E1FFCA'
}]
}
},
}
</script>
<style scoped lang="scss">
</style>

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>

188
src/views/ems/dzjk/sbjk/bmszl/index.vue Normal file
View File

@ -0,0 +1,188 @@
<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">电池堆一</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
style="width: 100%;">
<el-table-column
prop=""
label="名称">
<template slot-scope="scope">
<span v-html="scope.row.name"></span>
</template>
</el-table-column>
<el-table-column
prop="average"
label="单体平均值"
>
</el-table-column>
<el-table-column
prop="min"
label="单体最小值">
</el-table-column>
<el-table-column
prop="minID"
label="单体最小值ID">
</el-table-column>
<el-table-column
prop="max"
label="单体最大值">
</el-table-column>
<el-table-column
prop="maxID"
label="单体最大值ID">
</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:'电压（V）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
{name:'温度（&#8451;）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
{name:'SOC（%）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
]
}
},
}
</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: #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{
margin-top:25px;
::v-deep{
.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
border-bottom: none;
}
.table-head{
color:#515a6e;
}
}
}
</style>

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>

36
src/views/ems/dzjk/sbjk/ssyx/index.vue
View File

@ -2,11 +2,7 @@
<template>
<div class="ssyx-ems-dashboard-editor-container">
<!-- 6个方块-->
<el-row :gutter="10">
<el-col :xs="12" :sm="8" :lg="4" class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
<single-square-box :data="item"></single-square-box>
</el-col>
</el-row>
<real-time-base-info/>
<!-- echart图表-->
<el-row :gutter="32" style="background:#fff;margin:30px 0;">
<el-col :xs="24" :sm="12" :lg="12">
@ -31,42 +27,16 @@
</style>
<script>
import SingleSquareBox from "@/components/Ems/SingleSquareBox/index.vue";
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
import CnglqxChart from './CnglqxChart.vue'
import PocpjwdChart from './PocpjwdChart.vue'
import DcpjwdChart from './DcpjwdChart.vue'
import DcpjsocChart from './DcpjsocChart.vue'
export default {
components:{SingleSquareBox,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
data() {
return {
// 单个电站 四个方块数据
singleZdSqaure:[{
title:'实时有功功率（kW）',
value:'22.74',
bgColor:'#FFF2CB'
},{
title:'实时无功功率（kVar）',
value:'22.74',
bgColor:'#CBD6FF'
},{
title:'电池催SOC',
value:'22.74',
bgColor:'#DCCBFF'
},{
title:'电池堆SOH',
value:'22.74',
bgColor:'#FFD4CB'
},{
title:'今日充电量（kWh）',
value:'22.74',
bgColor:'#FFD6F8'
},{
title:'今日放电量（kWh）',
value:'22.74',
bgColor:'#E1FFCA'
}]
}
},