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

src/router/ems.js

@@ -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'},
               }
             ]
           }

src/views/ems/dzjk/sbjk/RealTimeBaseInfo.vue

@@ -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>

src/views/ems/dzjk/sbjk/bmsdcc/index.vue

@@ -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>

src/views/ems/dzjk/sbjk/bmszl/index.vue

@@ -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>

src/views/ems/dzjk/sbjk/pcs/index.vue

@@ -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>

src/views/ems/dzjk/sbjk/ssyx/index.vue

@@ -2,11 +2,7 @@
 <template>
 <div class="ssyx-ems-dashboard-editor-container">
 <!--  6个方块-->
-  <el-row :gutter="10">
+  <real-time-base-info/>
-    <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>
 <!--  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'
-      }]
     }
   },