From 4218776b77abd342b43e35460cbc50789a949a08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Wed, 18 Jun 2025 01:01:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E7=AB=99=E7=9B=91=E6=8E=A7=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppMain.vue             |   5 +-
 src/router/ems.js                             |  71 +++++++-
 src/router/index.js                           |   5 +-
 src/views/ems/dzjk/gzgj/index.vue             |  14 ++
 src/views/ems/dzjk/home/NllzChart.vue         | 152 ++++++++++++++++++
 src/views/ems/dzjk/home/index.vue             | 118 ++++++++++++++
 src/views/ems/dzjk/index.vue                  |  63 ++++++++
 src/views/ems/dzjk/sbjk/index.vue             |  74 +++++++++
 src/views/ems/dzjk/sbjk/pcs/index.vue         |  11 ++
 src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue  |  81 ++++++++++
 src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue |  81 ++++++++++
 src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue  |  81 ++++++++++
 src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue |  81 ++++++++++
 src/views/ems/dzjk/sbjk/ssyx/index.vue        |  74 +++++++++
 src/views/ems/dzjk/tjbb/gltj/index.vue        |  11 ++
 src/views/ems/dzjk/tjbb/index.vue             |  15 ++
 16 files changed, 926 insertions(+), 11 deletions(-)
 create mode 100644 src/views/ems/dzjk/gzgj/index.vue
 create mode 100644 src/views/ems/dzjk/home/NllzChart.vue
 create mode 100644 src/views/ems/dzjk/home/index.vue
 create mode 100644 src/views/ems/dzjk/index.vue
 create mode 100644 src/views/ems/dzjk/sbjk/index.vue
 create mode 100644 src/views/ems/dzjk/sbjk/pcs/index.vue
 create mode 100644 src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
 create mode 100644 src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue
 create mode 100644 src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue
 create mode 100644 src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
 create mode 100644 src/views/ems/dzjk/sbjk/ssyx/index.vue
 create mode 100644 src/views/ems/dzjk/tjbb/gltj/index.vue
 create mode 100644 src/views/ems/dzjk/tjbb/index.vue

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 9209165..5dbab99 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,10 +1,11 @@
 <template>
   <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
+<!--    todo 单站监控页面中二级路由选择时不需要切换页面的动态效果-->
+<!--    <transition name="fade-transform" mode="out-in">-->
       <keep-alive :include="cachedViews">
         <router-view v-if="!$route.meta.link" :key="key" />
       </keep-alive>
-    </transition>
+<!--    </transition>-->
     <iframe-toggle />
     <copyright />
   </section>
diff --git a/src/router/ems.js b/src/router/ems.js
index 52aa845..99b9513 100644
--- a/src/router/ems.js
+++ b/src/router/ems.js
@@ -1,19 +1,74 @@
 import Layout from "@/layout/index.vue";
 
-const ems = [
+//todo delete 删除动态路由页面的定义 接口会传递进来
+// const ems = [
+//   {
+//     path: '',
+//     component: Layout,
+//     redirect: 'noRedirect',
+//     children: [
+//       {
+//         path: 'zddt',
+//         component: () => import('@/views/ems/zddt/index'),
+//         name: 'zddt',
+//         meta: { title: '站点地图', icon: 'guide' }
+//       }
+//     ]
+//   }
+// ]
+// export default ems
+
+//单站监控
+// todo 本地设置了 hidden:true,不会显示在侧边栏，需要在系统管理、菜单管理中手动添加菜单后才会展示在侧边栏
+export const dzjk=[
   {
-    path: '',
+    path: '/dzjk',
     component: Layout,
-    redirect: 'noRedirect',
+    redirect: '/dzjk/home',
+    meta: { title: '单站监控', icon: 'dashboard',},
+    alwaysShow: false,
+    name:'Dzjk',
+    hidden:true,
     children: [
       {
-        path: 'zddt',
-        component: () => import('@/views/ems/zddt/index'),
-        name: 'zddt',
-        meta: { title: '站点地图', icon: 'guide' }
+        path: '',
+        component: () => import('@/views/ems/dzjk/index'),
+        name: 'Dzjk',
+        redirect: '/dzjk/home',
+        hidden: true,
+        children: [
+            {
+              path: '/dzjk/home',
+              component: () => import('@/views/ems/dzjk/home/index.vue'),
+              name: 'DjzkHome',
+              meta: { title: '首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkHome' }
+            },
+          {
+            path: '/dzjk/sbjk',
+            component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
+            name: 'DjzkSbjk',
+            meta: { title: '设备监控',breadcrumb: false,activeMenu: '/dzjk'},
+            redirect: '/dzjk/sbjk/ssyx',
+            children: [
+              {
+                path: 'ssyx',
+                component: () => import('@/views/ems/dzjk/sbjk/ssyx/index.vue'),
+                name: 'DjzkSbjkSsyx',
+                meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+              },
+              {
+                path: 'pcs',
+                component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'),
+                name: 'DjzkSbjkPcs',
+                meta: { title: 'Pcs',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+              }
+            ]
+          }
+        ]
       }
     ]
   }
 ]
 
-export default ems
+
+
diff --git a/src/router/index.js b/src/router/index.js
index 8ea2d50..b080178 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+// todo delete
 import ems from './ems'//EMS管理系统routers引用
+import {dzjk} from '@/router/ems'
 
 Vue.use(Router)
 
@@ -90,7 +92,8 @@ export const constantRoutes = [
     ]
   },
   // EMS管理系统routers
-  ...ems
+  // ...ems
+  ...dzjk
 ]
 
 // 动态路由，基于用户权限动态去加载
diff --git a/src/views/ems/dzjk/gzgj/index.vue b/src/views/ems/dzjk/gzgj/index.vue
new file mode 100644
index 0000000..95e0327
--- /dev/null
+++ b/src/views/ems/dzjk/gzgj/index.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>第二层路由 单站监控=>故障告警
+  <div>没有下级路由 页面直接展示</div>
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/ems/dzjk/home/NllzChart.vue b/src/views/ems/dzjk/home/NllzChart.vue
new file mode 100644
index 0000000..5d0f657
--- /dev/null
+++ b/src/views/ems/dzjk/home/NllzChart.vue
@@ -0,0 +1,152 @@
+
+<template>
+  <el-row style="background:#fff;margin-top:30px;">
+    <el-col :xs="24" :sm="24" :lg="24">
+      <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+        <div slot="header">
+          <span class="card-title">能量流转</span>
+        </div>
+        <div style="height: 310px" id="nllzChart"></div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#nllzChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        title: [
+          // 右上角
+          {
+            text: '电网 实时功率：15kW',
+            top: 10,
+            right: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 右下角
+          {
+            text: '负载 实时功率：15kW',
+            bottom: 10,
+            right: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第一行
+          {
+            text: '储能',
+            bottom: 56,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第二行
+          {
+            text: '实时功率：12kW',
+            bottom: 40,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第三行
+          {
+            text: 'SOC:75%',
+            bottom: 26,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第四行
+          {
+            text: '可用电量：12kWh',
+            bottom: 10,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          }
+        ],
+        grid:{
+          left:200
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        series: [
+          {
+            name:'充电量',
+            data: [80,92,1,34,90,130,320,80,9,91,34,90],
+            type: 'line',
+          },{
+            name:'放电量',
+            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
+            type: 'line',
+          }]
+      })
+    }
+  }
+}
+
+</script>
+
diff --git a/src/views/ems/dzjk/home/index.vue b/src/views/ems/dzjk/home/index.vue
new file mode 100644
index 0000000..cb712a0
--- /dev/null
+++ b/src/views/ems/dzjk/home/index.vue
@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-row :gutter="32" style="background:#fff;">
+      <el-col :xs="24" :sm="24" :lg="10">
+        <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+          <div slot="header">
+            <span class="card-title">数据概览</span>
+          </div>
+          <div style="height: 310px" >
+            <el-row :gutter="20">
+              <el-col :span="12" v-for="(item,index) in sjglData" :key="index+'sjglData'" class="sjgl-data">
+                  <div class="sjgl-title">{{item.title}}</div>
+                  <div class="sjgl-value">{{item.value}}</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="14">
+        <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+          <div slot="header">
+            <span class="card-title">实时告警</span>
+            <el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态：<span style="color:red">超时</span></el-button>
+          </div>
+          <div class="ssgj-container">
+            <el-table
+              :data="tableData"
+              height="100%"
+              stripe
+              style="width: 100%">
+              <el-table-column
+                prop="name"
+                label="名称">
+              </el-table-column>
+              <el-table-column
+                prop="status"
+                label="状态"
+                class-name="warning-status"
+                label-class-name="table-head">
+              </el-table-column>
+              <el-table-column
+                prop="value"
+                label="告警内容">
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <nllz-chart/>
+  </div>
+</template>
+
+<script>
+import NllzChart from "./NllzChart.vue";
+export default {
+  components: {NllzChart},
+  data() {
+    return {
+      // todo 没有数据时 显示-？
+      sjglData:[{
+        title:'今日充电量（MWh）',
+        value:'1234'
+      },{
+        title:'今日放电量（MWh）',
+        value:'1234'
+      },{
+        title:'总充电量（MWh）',
+        value:'1234'
+      },{
+        title:'总放电量（MWh）',
+        value:'1234'
+      }],
+      // todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
+      tableData:[{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'}]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+//数据概览
+  .sjgl-data{
+    text-align: center;
+    margin-top:20px;
+    .sjgl-title{
+      color: #666666;
+      line-height: 14px;
+      padding-top: 18px;
+    }
+    .sjgl-value{
+      color: rgba(51,51,51,1);
+      font-size: 26px;
+      line-height: 26px;
+      font-weight: 500;
+      margin-top: 14px;
+    }
+  }
+  //实时告警
+  .ssgj-container{
+    padding:20px;
+    height: 310px;
+    box-sizing: border-box;
+    ::v-deep{
+      .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
+        background:#FFF2CB ;
+        border-bottom: none;
+      }
+      .warning-status{
+        color:red;
+      }
+      .table-head{
+        color:#515a6e;
+      }
+    }
+  }
+</style>
+
diff --git a/src/views/ems/dzjk/index.vue b/src/views/ems/dzjk/index.vue
new file mode 100644
index 0000000..9d15004
--- /dev/null
+++ b/src/views/ems/dzjk/index.vue
@@ -0,0 +1,63 @@
+
+
+<template>
+  <div class="ems-dashboard-editor-container">
+  <zd-select/>
+<!--  这里是单站监控的二级菜单栏 需要循环拿到数据 显示在页面上-->
+    <div class="router-container">
+      <div class="route-link" :class="{'active':item.name === $route.meta.activeSecondMenuName}" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
+        <router-link  style="height: 100%;width: 100%;display: block" :to="item.path">
+        {{item.meta.title}}
+        </router-link>
+      </div>
+    </div>
+  <div class="ems-content-container ems-content-container-padding dzjk-ems-content-container">
+    <keep-alive>
+      <router-view></router-view>
+    </keep-alive>
+  </div>
+</div>
+</template>
+
+<script>
+import { dzjk } from '@/router/ems'
+const childrenRoute = dzjk[0].children[0].children//获取到单站监控下面的字路由
+console.log('childrenRoute',childrenRoute)
+import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
+export default {
+  components:{ZdSelect},
+  data(){
+    return {
+      childrenRoute,
+      activeMenu:''
+    }
+  },
+  mounted() {
+    console.log('当前页面路由',this.$route)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+  .router-container{
+    display: flex;
+    .route-link{
+      width: 104px;
+      height: 40px;
+      line-height: 40px;
+      background-color: #FFBE29 ;
+      color: #666666;
+      font-size: 14px;
+      text-align: center;
+    }
+    .route-link.active{
+      background-color: #ffffff;
+      color: #333333;
+      font-weight: 500;
+    }
+  }
+  .dzjk-ems-content-container{
+    margin-top:0;
+  }
+</style>
diff --git a/src/views/ems/dzjk/sbjk/index.vue b/src/views/ems/dzjk/sbjk/index.vue
new file mode 100644
index 0000000..4b8cf84
--- /dev/null
+++ b/src/views/ems/dzjk/sbjk/index.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="ems-dashboard-editor-container sbjk-ems-dashboard-editor-container">
+    <div class="router-container">
+      <div>
+        <div class="route-link" :class="{'active':item.name === $route.name}" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
+          <router-link  style="height: 100%;width: 100%;display: block" :to="item.path">
+            {{item.meta.title}}
+          </router-link>
+      </div>
+      </div>
+    </div>
+    <div class="ems-content-container ems-content-container-padding sbjk-ems-content-container">
+      <keep-alive>
+        <router-view></router-view>
+      </keep-alive>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { dzjk } from '@/router/ems'
+const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkSbjk').children//获取到单站监控-设备监控下面的字路由
+console.log('设备监控子路由',childrenRoute)
+export default {
+  data(){
+    return {
+      childrenRoute,
+      activeMenu:''
+    }
+  },
+  mounted() {
+    console.log('当前设备监控页面路由',this.$route)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.sbjk-ems-dashboard-editor-container{
+  display: flex;
+  padding:0;
+  background: #FFFFFF;
+}
+.router-container{
+  &>div{
+    border: 1px solid #dcdfe6;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+    display: flex;
+    flex-direction: column;
+  }
+  .route-link{
+    width: 104px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #ffffff;
+    color: #666666;
+    font-size: 14px;
+    text-align: center;
+  }
+  .route-link.active{
+    background-color: #FFBE29 ;
+    color: #333333;
+    font-weight: 500;
+  }
+}
+.sbjk-ems-content-container{
+  margin-top:0;
+  padding-top:0;
+  padding-right: 0;
+  flex: 1;
+}
+</style>
+
diff --git a/src/views/ems/dzjk/sbjk/pcs/index.vue b/src/views/ems/dzjk/sbjk/pcs/index.vue
new file mode 100644
index 0000000..2d3bd7e
--- /dev/null
+++ b/src/views/ems/dzjk/sbjk/pcs/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div>第三层路由 单站监控=>设备监控=>PCS</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue b/src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
new file mode 100644
index 0000000..bdd08d6
--- /dev/null
+++ b/src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
@@ -0,0 +1,81 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+    <div slot="header">
+      <span class="card-title">储能功率曲线</span>
+    </div>
+    <div style="height: 360px" id="cnglqxChart"/>
+  </el-card>
+</template>
+
+<style scoped lang="scss"></style>
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#cnglqxChart'))
+      this.setOptions()
+    },
+    setOptions() {
+
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        // POC昨日有功功率、POC昨日无功功率
+        series: [
+          {
+            name:'POC实时有功功率',
+            data: [80,92,1,34,90,130,320,80,9,91,34,90],
+            type: 'line',
+
+          },{
+            name:'POC实时无功功率',
+            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
+            type: 'line',
+          }]
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue b/src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue
new file mode 100644
index 0000000..60a3ae7
--- /dev/null
+++ b/src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue
@@ -0,0 +1,81 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+    <div slot="header">
+      <span class="card-title">电池平均SOC</span>
+    </div>
+    <div style="height: 360px" id="dcpjsocChart"/>
+  </el-card>
+</template>
+
+<style scoped lang="scss"></style>
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
+      this.setOptions()
+    },
+    setOptions() {
+
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        // POC昨日有功功率、POC昨日无功功率
+        series: [
+          {
+            name:'昨日同时段电池平均SOC',
+            data: [80,92,1,34,90,130,320,80,9,91,34,90],
+            type: 'scatter',
+
+          },{
+            name:'实时电池平均SOC',
+            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
+            type: 'scatter',
+          }]
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue b/src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue
new file mode 100644
index 0000000..ecf2c9e
--- /dev/null
+++ b/src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue
@@ -0,0 +1,81 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+    <div slot="header">
+      <span class="card-title">电池平均温度</span>
+    </div>
+    <div style="height: 360px" id="dcpjwdChart"/>
+  </el-card>
+</template>
+
+<style scoped lang="scss"></style>
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#dcpjwdChart'))
+      this.setOptions()
+    },
+    setOptions() {
+
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        // POC昨日有功功率、POC昨日无功功率
+        series: [
+          {
+            name:'昨日同时段温度',
+            data: [80,92,1,34,90,130,320,80,9,91,34,90],
+            type: 'line',
+
+          },{
+            name:'实时温度',
+            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
+            type: 'line',
+          }]
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue b/src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
new file mode 100644
index 0000000..d781879
--- /dev/null
+++ b/src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
@@ -0,0 +1,81 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+    <div slot="header">
+      <span class="card-title">Poc平均温度</span>
+    </div>
+    <div style="height: 360px" id="pocpjwdChart"/>
+  </el-card>
+</template>
+
+<style scoped lang="scss"></style>
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#pocpjwdChart'))
+      this.setOptions()
+    },
+    setOptions() {
+
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        // POC昨日有功功率、POC昨日无功功率
+        series: [
+          {
+            name:'昨日同时段温度',
+            data: [80,92,1,34,90,130,320,80,9,91,34,90],
+            type: 'bar',
+
+          },{
+            name:'实时温度',
+            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
+            type: 'bar',
+          }]
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/ems/dzjk/sbjk/ssyx/index.vue b/src/views/ems/dzjk/sbjk/ssyx/index.vue
new file mode 100644
index 0000000..ca751c4
--- /dev/null
+++ b/src/views/ems/dzjk/sbjk/ssyx/index.vue
@@ -0,0 +1,74 @@
+
+<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>
+<!--  echart图表-->
+  <el-row :gutter="32" style="background:#fff;margin:30px 0;">
+    <el-col :xs="24" :sm="12" :lg="12">
+      <cnglqx-chart/>
+    </el-col>
+    <el-col :xs="24" :sm="12" :lg="12">
+      <pocpjwd-chart/>
+    </el-col>
+  </el-row>
+  <el-row :gutter="32" style="margin:30px 0;">
+    <el-col :xs="24" :sm="12" :lg="12">
+      <dcpjsoc-chart/>
+    </el-col>
+    <el-col :xs="24" :sm="12" :lg="12">
+      <dcpjwd-chart/>
+    </el-col>
+  </el-row>
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+<script>
+import SingleSquareBox from "@/components/Ems/SingleSquareBox/index.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},
+  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>
diff --git a/src/views/ems/dzjk/tjbb/gltj/index.vue b/src/views/ems/dzjk/tjbb/gltj/index.vue
new file mode 100644
index 0000000..742fb79
--- /dev/null
+++ b/src/views/ems/dzjk/tjbb/gltj/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>第三层路由 单站监控=>统计报表=>概览统计</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/ems/dzjk/tjbb/index.vue b/src/views/ems/dzjk/tjbb/index.vue
new file mode 100644
index 0000000..c31a510
--- /dev/null
+++ b/src/views/ems/dzjk/tjbb/index.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    <div>第二层路由 单站监控=>统计报表</div>
+    有三级路由 页面使用router-view组件
+    <router-view></router-view>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>