站点选择下拉框的数据获取、存储处理逻辑更新，解决因为多层router-view嵌套，二级路由以上页面不会被缓存的而导致单站监控页面站点选择下拉框闪烁的问题

src/api/ems/dzjk.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+//获取单个站点的信息
+export function getDzjkHomeView(siteId) {
+  return request({
+    url: `/ems/siteMonitor/homeView?siteId=${siteId}`,
+    method: 'get'
+  })
+}

src/api/ems/home.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+// 首页、站点地图页面页面顶部 所有站点信息
+export function getSiteTotalInfo() {
+  return request({
+    url: '/ems/homePage/getSiteTotalInfo',
+    method: 'get'
+  })
+}

src/api/ems/zddt.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+// 查询缓存名称列表
+export function getAllSites() {
+  return request({
+    url: '/ems/homePage/getAllSites',
+    method: 'get'
+  })
+}
+//获取单个站点的基本信息
+export function getSingleSiteBaseInfo(siteId) {
+  return request({
+    url: `/ems/siteMap/getSingleSiteBaseInfo?siteId=${siteId}`,
+    method: 'get'
+  })
+}

src/assets/styles/common.scss

@@ -0,0 +1,88 @@
+/*
+  ems管理平台公共css样式
+*/
+
+//右侧内容区域
+//父元素
+.ems-dashboard-editor-container{
+  background-color: #F1F5FC;
+  padding: 24px;
+  font-size: 12px;
+}
+//除去顶部信息(如搜索栏、站点基本信息等)外的 白色背景内容区域
+.ems-content-container{
+  background-color: #ffffff;
+  margin-top: 24px;
+}
+//需要设置内padding的白色背景区域
+.ems-content-container-padding{
+  padding: 24px;
+}
+
+//card通用样式 标题、body
+.common-card-container{
+    .el-card__header{
+      padding:14px;
+      border-bottom: none;
+      font-size: 12px;
+      background: #F1F5FB ;
+      .card-title{
+        font-weight: 500;
+        color:#333333;
+      }
+      .large-title{
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 40px;
+      }
+      .el-button--text{
+        color: #666666;
+      }
+    }
+}
+.common-card-container-body-no-padding{
+   .el-card__body{
+      padding:0;
+    }
+}
+.common-card-container-no-title-bg {
+    .el-card__header{
+      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;
+    }
+  }
+}

src/assets/styles/index.scss

@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+@import './common.scss';
 
 body {
   height: 100%;

src/components/Ems/SingleSquareBox/index.vue

@@ -0,0 +1,35 @@
+<!--单独的背景颜色渐变、宽高100%的内容展示方块组件-->
+<template>
+  <el-card shadow="always" class="single-square-box" :style="{background: 'linear-gradient(180deg, '+data.bgColor+' 0%,rgba(255,255,255,0) 100%)'}">
+    <div class="single-square-box-title">{{ data.title }}</div>
+    <div class="single-square-box-value">{{ data.value }}</div>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+  .single-square-box{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    color:#666666;
+    text-align: left;
+    .single-square-box-title{
+      font-size: 12px;
+      line-height: 12px;
+      padding-bottom: 12px;
+    }
+    .single-square-box-value{
+      font-size: 26px;
+      line-height: 26px;
+      font-weight: 500;
+    }
+    ::v-deep .el-card__body{
+      padding: 12px 16px;
+    }
+  }
+</style>
+<script>
+  export default {
+    props: ['data'],
+  }
+</script>

src/components/Ems/ZdBaseInfo/index.vue

@@ -0,0 +1,87 @@
+
+<!--首页、地图站点页面顶部信息方块-->
+<template>
+  <el-row type="flex" >
+    <el-card shadow="hover" class="card common-card-container-body-no-padding" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
+      <div class="info">{{ item.title }}</div>
+      <div class="num">{{item.num}}</div>
+    </el-card>
+  </el-row>
+</template>
+
+<script>
+import { getSiteTotalInfo } from "@/api/ems/home"
+export default {
+  data() {
+    return {
+      data:[{
+        title:'站点总数（座）',
+        num:'',
+        color:'#FFBD00',
+        attr:'siteNum'
+      },{
+        title:'装机功率（MW）',
+        num:'',
+        color:'#3C81FF',
+        attr:'installedPower'
+
+      },{
+        title:'装机容量（MW）',
+        num:'',
+        color:'#5AC7C0',
+        attr:'installedCap'
+
+      },{
+        title:'总充电量（MWh）',
+        num:'',
+        color:'#A696FF',
+        attr:'totalChargedCap'
+
+      },{
+        title:'总放电量（MWh）',
+        num:'',
+        color:'#A696FF',
+        attr:'totalDischargedCap'
+
+      }]
+    }
+  },
+  methods: {
+    setData(res = {}){
+      this.data.forEach((item)=>{
+        item.num =(res[item.attr] || res[item.attr] === 0) ? res[item.attr] : '—'
+      })
+    }
+  },
+  mounted() {
+    getSiteTotalInfo().then(response => {
+      console.log('单个站点基本信息返回数据',response)
+      this.setData(response.data || {})
+    }).catch(()=>{
+      this.setData({})
+    })
+  }
+}
+</script>
+<style scoped lang="scss">
+.card{
+  width: 150px;
+  height: 96px;
+  margin-right: 27px;
+  border-bottom: 4px solid transparent;
+  text-align: center;
+  .info{
+    color: #666666;
+    line-height: 14px;
+    padding-top: 18px;
+  }
+  .num{
+    color: rgba(51,51,51,1);
+    font-size: 26px;
+    line-height: 26px;
+    font-weight: 500;
+    margin-top: 14px;
+  }
+}
+
+</style>

src/components/Ems/ZdSelect/index.vue

@@ -0,0 +1,91 @@
+<!--站点选择组件-->
+<template>
+  <div class="zd-select-container">
+    <el-form :inline="true">
+      <el-form-item label="站点选择">
+        <el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="change">
+          <el-option :label="item.siteName" :value="item.id" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="warning" @click="onSubmit">搜索</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+<script>
+import {getAllSites} from '@/api/ems/zddt'
+import {mapGetters} from "vuex"
+  export default {
+    props:{
+      getListByStore:{
+        type:Boolean,
+        default:false,
+        required:false
+      },
+      defaultSiteId:{//默认展示的站点ID
+        type:String|Number,
+        default:'',
+        required:false
+      }
+    },
+    data() {
+      return {
+        id:'',
+        loading:false,
+        siteList:[],
+      }
+    },
+    computed:{
+      ...mapGetters(["zdList"]),
+    },
+    methods:{
+      onSubmit(){
+        this.$emit('submitSite',this.id)
+      },
+      change(id){
+        this.$emit('changeSite',id)
+      },
+      setDefaultSite(){
+        const defaultSite = parseInt(this.defaultSiteId)
+        if(defaultSite && this.siteList.find(item=>item.id === defaultSite)){
+          this.id = defaultSite
+        }else if(!defaultSite && this.siteList.length>0){
+          this.id = this.siteList[0].id
+        }
+        this.$emit('submitSite',this.id)
+      },
+      getList(){
+       return getAllSites().then(response => {
+          this.siteList = response.data || []
+          console.log("获取站点列表返回数据",response,this.siteList)
+          this.setDefaultSite()
+        }).finally(() => {this.loading=false})
+      }
+    },
+    mounted(){
+      this.loading=true
+      this.$nextTick(()=>{
+        if(this.getListByStore){
+          if(this.zdList.length === 0){
+            this.getList().then(()=>{
+              this.$store.commit('SET_ZD_LIST', this.siteList)
+              console.log("从store中获取站点列表数据,但是store中的zdList=[]，所以从接口获取数据",this.zdList,this.siteList)
+            })
+          }else{
+            this.siteList = this.zdList
+            this.loading=false
+            console.log("从store中获取站点列表数据",this.zdList,this.siteList)
+            this.setDefaultSite()
+          }
+        }else{
+          this.getList()
+        }
+      })
+    }
+  }
+</script>

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>

src/mixins/ems/resize.js

@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}

src/router/ems.js

@@ -0,0 +1,104 @@
+import Layout from "@/layout/index.vue";
+
+//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: '/dzjk',
+    component: Layout,
+    redirect: '/dzjk/home',
+    meta: { title: '单站监控', icon: 'dashboard',},
+    alwaysShow: false,
+    name:'Dzjk',
+    hidden:true,
+    children: [
+      {
+        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'},
+              },
+              {
+                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'},
+              },
+              {
+                path: 'dtdc',
+                component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'),
+                name: 'DjzkSbjkDtdc',
+                meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+              },
+              {
+                path: 'db',
+                component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'),
+                name: 'DjzkSbjkDb',
+                meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+              },
+              {
+                path: 'yl',
+                component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'),
+                name: 'DjzkSbjkYl',
+                meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
+
+
+

src/router/index.js

@@ -1,5 +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)
 
@@ -68,7 +71,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'index',
-        component: () => import('@/views/index'),
+        component: () => import('@/views/ems/home/index'),
         name: 'Index',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       }
@@ -87,7 +90,10 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
-  }
+  },
+  // EMS管理系统routers
+  // ...ems
+  ...dzjk
 ]
 
 // 动态路由，基于用户权限动态去加载

src/store/getters.js

@@ -16,6 +16,7 @@ const getters = {
   permission_routes: state => state.permission.routes,
   topbarRouters: state => state.permission.topbarRouters,
   defaultRoutes: state => state.permission.defaultRoutes,
-  sidebarRouters: state => state.permission.sidebarRouters
+  sidebarRouters: state => state.permission.sidebarRouters,
+  zdList:state=>state.ems.zdList
 }
 export default getters

src/store/index.js

@@ -6,6 +6,7 @@ import user from './modules/user'
 import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
+import ems from './modules/ems'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -17,7 +18,8 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    settings
+    settings,
+    ems
   },
   getters
 })

src/store/modules/ems.js

@@ -0,0 +1,12 @@
+const ems = {
+  state: {
+    zdList:[]
+  },
+  mutations: {
+    SET_ZD_LIST(state, list) {
+      state.zdList = list || []
+    }
+  },
+}
+
+export default ems

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>

src/views/ems/dzjk/home/NllzChart.vue

@@ -0,0 +1,147 @@
+
+<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'
+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(data) {
+      this.chart = echarts.init(document.querySelector('#nllzChart'))
+    },
+    setOption(data) {
+      const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
+      const source = [['日期','充电量','放电量']]
+      siteMonitorDataVo.forEach(item=>{
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+      })
+      const filterValue=(num)=>{return num || num === 0 ? num : '-'}
+      this.chart.setOption({
+        title: [
+          // 右上角
+          {
+            text: `电网 实时功率：${filterValue(gridNrtPower)} kW`,
+            top: 10,
+            right: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 右下角
+          {
+            text: `负载 实时功率：${filterValue(loadNrtPower)} kW`,
+            bottom: 10,
+            right: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第一行
+          {
+            text: '储能',
+            bottom: 40,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第二行
+          {
+            text: `实时功率：${filterValue(energyStorageNrtPower)} kW`,
+            bottom: 26,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第三行
+          {
+            text: `可用电量：${filterValue(energyStorageAvailElec)} kWh`,
+            bottom: 10,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          }
+        ],
+        grid:{
+          left:200
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        dataset:{
+          source
+        },
+        series: [
+          {
+            name:'充电量',
+            type: 'line',
+          },{
+            name:'放电量',
+            type: 'line',
+          }]
+      })
+    }
+  }
+}
+
+</script>
+

src/views/ems/dzjk/home/index.vue

@@ -0,0 +1,161 @@
+<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="deviceName"
+                label="名称">
+              </el-table-column>
+              <el-table-column
+                label="状态"
+                >
+                  <template slot-scope="scope">
+                    <span class="warning-status">{{ scope.row.status === 0 ? '中断':'todo不是0是什么告警'}}</span>
+                  </template>
+              </el-table-column>
+              <el-table-column
+                class-name="alarm-content"
+                prop="alarmContent"
+                label="告警内容">
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <nllz-chart ref="nllzChart"/>
+  </div>
+</template>
+
+<script>
+import {getDzjkHomeView} from '@/api/ems/dzjk'
+import NllzChart from "./NllzChart.vue";
+export default {
+  components: {NllzChart},
+  watch: {
+    '$route.query':{
+      handler (newQuery,oldQuery) {
+          // 参数变化处理
+          console.log('单站监控=>首页=>页面地址发生变化',newQuery,oldQuery)
+          this.$nextTick(() => {
+            const {siteId} =newQuery
+              siteId && this.getData(newQuery.siteId)
+          })
+      },
+      immediate: true,
+    }
+  },
+  data() {
+    return {
+      sjglData:[{
+        title:'今日充电量（MWh）',
+        value:'',
+        attr:'dayChargedCap'
+      },{
+        title:'今日放电量（MWh）',
+        value:'',
+        attr:'dayDisChargedCap'
+      },{
+        title:'总充电量（MWh）',
+        value:'',
+        attr:'totalChargedCap'
+      },{
+        title:'总放电量（MWh）',
+        value:'',
+        attr:'totalDischargedCap'
+      }],
+      // todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
+      tableData:[]
+    }
+  },
+  methods:{
+    getData(siteId){
+      getDzjkHomeView(siteId).then(response => {
+        const data = response.data || {}
+        this.sjglData.forEach(item=>{
+          item.value = (data[item.attr] || data[item.attr] === 0) ? data[item.attr] : '-'
+        })
+        this.tableData = data?.siteMonitorHomeAlarmVo || []
+        this.$refs.nllzChart.setOption(data)
+      })
+    }
+  },
+}
+</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:#FC6B69;
+        &::before {
+          content: "";
+          display: inline-block;
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          background-color: #FC6B69;
+          margin-right: 8px;
+        }
+      }
+      .table-head{
+        color:#515a6e;
+      }
+      .alarm-content{
+        color:#333333;
+      }
+    }
+  }
+</style>
+

src/views/ems/dzjk/index.vue

@@ -0,0 +1,79 @@
+
+
+<template>
+  <div class="ems-dashboard-editor-container">
+  <zd-select :get-list-by-store="true" :default-site-id="$route.query.siteId" @submitSite="submitSite"/>
+<!--  这里是单站监控的二级菜单栏 需要循环拿到数据 显示在页面上-->
+    <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="{path:item.path,query:$route.query}">
+        {{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:''
+    }
+  },
+  methods:{
+    submitSite(id){
+      if(id != this.$route.query.siteId){
+        console.log('单站监控选择了其他的站点id=',id,'并更新页面地址参数')
+        this.$router.push({query:{...this.$route.query,siteId:id}})
+      }else{
+        console.log('单站监控选择了相同的其他的站点id=',id,'页面地址不发生改变')
+      }
+    }
+  },
+  beforeRouteLeave(to,from, next){
+    //从单站监控下面的所有子页面跳出时会触发
+    // 清空store中的zdList 保障下次进入到单站监控会重新调用接口获取数据
+    this.$store.commit('SET_ZD_LIST',[])
+    next()
+  },
+  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>

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,177 @@
+
+<template>
+  <div>
+    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
+      <div slot="header">
+        <span class="large-title">1#电池簇</span>
+      </div>
+        <div class="descriptions-main">
+          <el-descriptions direction="vertical" :column="3" :colon="false">
+            <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>
+        </div>
+        <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>
+          <!--        进度-->
+          <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"
+          width="190"
+          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 {
+      infoData:[
+        {label:'簇电压',value:'742',attr:'',unit:'V'},
+        {label:'可充电量',value:'100',attr:'',unit:'kWh'},
+        {label:'累计充电量',value:'100',attr:'',unit:'kWh'},
+        {label:'簇电流',value:'12.7',attr:'',unit:'A'},
+        {label:'可放电量',value:'300',attr:'',unit:'kWh'},
+        {label:'累计放电量',value:'300',attr:'',unit:'kWh'},
+        {label:'SOH',value:'98',attr:'',unit:'%'},
+        {label:'平均温度',value:'11',attr:'',unit:'&#8451;'},
+        {label:'绝缘电阻',value:'2000',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">
+::v-deep {
+  //描述列表样式
+  .descriptions-main{
+    padding:24px 300px 24px 24px;
+  }
+  .descriptions-main-bottom{
+    padding:14px 300px 14px 24px;
+  }
+}
+//  进度条样式
+.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,153 @@
+
+<template>
+  <div>
+    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
+      <div slot="header">
+        <span class="large-title">电池堆一</span>
+      </div>
+      <div class="descriptions-main">
+        <el-descriptions direction="vertical" :column="3" :colon="false">
+          <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>
+      </div>
+      <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>
+        <!--        进度-->
+        <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:'742',attr:'',unit:'V'},
+        {label:'可充电量',value:'100',attr:'',unit:'kWh'},
+        {label:'累计充电量',value:'100',attr:'',unit:'kWh'},
+        {label:'电池堆总电流',value:'-12.7',attr:'',unit:'A'},
+        {label:'可放电量',value:'300',attr:'',unit:'kWh'},
+        {label:'累计放电量',value:'300',attr:'',unit:'kWh'},
+        {label:'SOH',value:'99',attr:'',unit:'%'},
+        {label:'平均温度',value:'20',attr:'',unit:'&#8451;'},
+        {label:'绝缘电阻',value:'1000',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">
+::v-deep {
+  //描述列表样式
+  .descriptions-main {
+    padding: 24px 300px 24px 24px;
+
+    .descriptions-main-bg-color {
+      padding: 14px 300px 14px 24px;
+    }
+  }
+}
+//  进度条样式
+.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/db/index.vue

@@ -0,0 +1,144 @@
+
+<template>
+      <div>
+        <el-card shadow="always" class="common-card-container zb-common-card-container">
+          <div slot="header">
+              <span class="large-title">1#总表</span>
+              <div class="status">
+                <div>通信中断</div>
+                <div>数据更新时间：2024-10-11 12:00:00</div>
+              </div>
+          </div>
+          <el-table
+              :data="zbTableData"
+              stripe
+              style="width: 100%;">
+              <el-table-column
+                prop="name"
+                label="类别">
+              </el-table-column>
+              <el-table-column
+                prop="zong"
+                label="总/kWh"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="jian"
+                label="尖/kWh">
+              </el-table-column>
+              <el-table-column
+                prop="feng"
+                label="峰/kWh">
+              </el-table-column>
+              <el-table-column
+                prop="ping"
+                label="平/kWh">
+              </el-table-column>
+              <el-table-column
+                prop="gu"
+                label="谷/kWh">
+              </el-table-column>
+            </el-table>
+        </el-card>
+        <el-card shadow="always" class="common-card-container cnb-common-card-container">
+          <div slot="header">
+            <span class="large-title">2#储能表</span>
+            <div class="status">
+              <div>通信正常</div>
+              <div>数据更新时间：2024-10-11 12:00:00</div>
+            </div>
+          </div>
+          <el-table
+            :data="cnbTableData"
+            stripe
+            style="width: 100%;">
+            <el-table-column
+              prop="name"
+              label="类别">
+            </el-table-column>
+            <el-table-column
+              prop="zong"
+              label="总/kWh"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="jian"
+              label="尖/kWh">
+            </el-table-column>
+            <el-table-column
+              prop="feng"
+              label="峰/kWh">
+            </el-table-column>
+            <el-table-column
+              prop="ping"
+              label="平/kWh">
+            </el-table-column>
+            <el-table-column
+              prop="gu"
+              label="谷/kWh">
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </div>
+</template>
+
+
+<script>
+export default {
+  name:'DzjkSbjkDb',
+  data() {
+    return {
+      zbTableData:[
+        {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+      ],
+      cnbTableData:[
+        {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+      ]
+    }
+  },
+  methods:{
+
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.zb-common-card-container,.cnb-common-card-container{
+  ::v-deep{
+    .el-card__header{
+      padding:10px 14px;
+      background-color: #FC6B69;
+      color:#ffffff;
+      position: relative;
+    }
+  }
+}
+.cnb-common-card-container{
+  margin-top:25px;
+  ::v-deep{
+    .el-card__header{
+      background-color: #05AEA3;
+    }
+  }
+}
+.status{
+  position: absolute;
+  right:14px;
+  top:50%;
+  transform: translateY(-50%);
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+
+</style>

src/views/ems/dzjk/sbjk/dtdc/BarChart.vue

@@ -0,0 +1,69 @@
+
+<template>
+  <div style="height: 360px" id="dtdcChart"/>
+</template>
+
+<style scoped lang="scss"></style>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#dtdcChart'))
+    },
+    setOption() {
+      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',
+        },
+        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',
+          }]
+      })
+      this.chart.hideLoading()
+
+    }
+  }
+}
+
+</script>

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

@@ -0,0 +1,120 @@
+
+<template>
+      <el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
+        <div slot="header">
+          <span class="large-title">单体电池实时数据</span>
+        </div>
+      <!--    搜索栏-->
+      <div class="select-container">
+        <el-form :inline="true">
+          <el-form-item label="电池堆">
+            <el-select v-model="search.dcd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+              <el-option :label="item.name" :value="item.id" v-for="(item,index) in dcdOptions" :key="index+'dcdOptions'"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="电池簇">
+            <el-select v-model="search.dcc" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+              <el-option :label="item.name" :value="item.id" v-for="(item,index) in dccOptions" :key="index+'dccOptions'"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="onReset" native-type="button">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="margin:30px 0;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
+        <!--        四个选择按钮-->
+        <el-row style="">
+          <el-col :xs="24" :sm="24" :lg="24">
+            <el-button-group>
+              <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+            </el-button-group>
+          </el-col>
+        </el-row>
+        <!--    图表-->
+        <el-row style="background:#fff;margin:30px 0;">
+          <el-col :xs="24" :sm="24" :lg="24">
+            <bar-chart ref="barChart"/>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+</template>
+
+
+<script>
+import BarChart from './BarChart'
+export default {
+  name:'DzjkSbjkDtdc',
+  components:{BarChart},
+  data() {
+    return {
+      btnList:[
+        {name:'电压',id:'dy'},
+        {name:'温度',id:'wd'},
+        {name:'SOC',id:'soc'},
+        {name:'SOH',id:'soh'},
+      ],
+      activeBtn:'dy',
+      loading:false,
+      search:{dcd:'',dcc:''},
+      dcdOptions:[
+        {name:'电池堆1',id:1},
+        {name:'电池堆2',id:2},
+        {name:'电池堆3',id:3},
+      ],
+      dccOptions:[
+        {name:'电池簇1',id:1},
+        {name:'电池簇2',id:2},
+      ]
+    }
+  },
+  methods:{
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.search.dcd=''
+      this.search.dcc=''
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.$refs.barChart.chart.showLoading()
+      //获取完成后 传入data todo传参
+      this.$refs.barChart.setOption()
+    },
+    changeDataType(id){
+      if(id !== this.activeBtn){
+        console.log('点击了不同的菜单，更新数据')
+        this.activeBtn=id;
+      }
+    },
+
+  },
+  mounted(){
+    this.$refs.barChart.initChart()
+    this.getData()
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.select-container{
+  .el-form--inline .el-form-item{
+    margin-right: 20px;
+  }
+}
+.activeBtn{
+  background-color: #FFF2CB;
+  border-color: #FFF2CB;
+  color: #666666;
+  font-weight: 600;
+}
+</style>

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="{path:item.path,query:$route.query}">
+            {{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>
+

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

@@ -0,0 +1,107 @@
+
+<template>
+  <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 style="padding: 0">
+        <div class="descriptions-main">
+          <el-descriptions direction="vertical" :column="4" :colon="false">
+            <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-item labelClassName="descriptions-label" contentClassName="descriptions-direction save"  :span="1" label="设备状态">在线</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="控制模式">远程</el-descriptions-item>
+          </el-descriptions>
+        </div>
+        <div class="descriptions-main descriptions-main-bg-color">
+          <el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction" direction="vertical" :column="4" :colon="false">
+            <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-container>
+  </div>
+</template>
+
+<script>
+import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
+
+export default {
+  components:{RealTimeBaseInfo},
+  data() {
+    return {
+      infoData:[
+        {label:'总交流有功电率',value:'-7.2',attr:'',unit:'kW'},
+        {label:'当天交流充电量',value:'0',attr:'',unit:'kWh'},
+        {label:'A相电压',value:'12',attr:'',unit:'V'},
+        {label:'A相电流',value:'20',attr:'',unit:'A'},
+        {label:'总交流无功电率',value:'-0.1',attr:'',unit:'kVar'},
+        {label:'当天交流放电量',value:'145',attr:'',unit:'kWh'},
+        {label:'B相电压',value:'12',attr:'',unit:'V'},
+        {label:'B相电流',value:'20',attr:'',unit:'A'},
+        {label:'总交流视在功率',value:'8',attr:'',unit:'kVA'},
+        {label:'PCS模块温度',value:'40',attr:'',unit:'&#8451;'},
+        {label:'C相电压',value:'12',attr:'',unit:'V'},
+        {label:'C相电流',value:'20',attr:'',unit:'A'},
+        {label:'总交流功率因数',value:'-0.9',attr:'',unit:''},
+        {label:'PCS环境温度',value:'12',attr:'',unit:'&#8451;'},
+        {label:'交流频率',value:'102',attr:'',unit:'Hz'}
+      ],
+    }
+  },
+
+}
+</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%);
+    }
+  }
+}
+</style>

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>

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>

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>

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>

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

@@ -0,0 +1,44 @@
+
+<template>
+<div class="ssyx-ems-dashboard-editor-container">
+<!--  6个方块-->
+  <real-time-base-info/>
+<!--  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 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:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
+  data() {
+    return {
+    }
+  },
+
+}
+</script>

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

@@ -0,0 +1,144 @@
+
+<template>
+    <div>
+      <div class="yl-item-container">
+        <div class="header">
+          <div class="header-title">1#液冷</div>
+          <div>工作模式：<span class="header-values">运行</span></div>
+          <div>当前温度：<span class="header-values">12&#8451;</span></div>
+        </div>
+        <div class="content">
+          <el-row>
+            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div class="yl-item-container yl-warn-item-container">
+        <div class="header">
+          <div class="header-title">1#液冷</div>
+          <div>工作模式：<span class="header-values">运行</span></div>
+          <div>当前温度：<span class="header-values">12&#8451;</span></div>
+        </div>
+        <div class="content">
+          <el-row>
+            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="yl-item-container">
+        <div class="header">
+          <div class="header-title">1#液冷</div>
+          <div>工作模式：<span class="header-values">运行</span></div>
+          <div>当前温度：<span class="header-values">12&#8451;</span></div>
+        </div>
+        <div class="content">
+          <el-row>
+            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div class="yl-item-container yl-warn-item-container">
+        <div class="header">
+          <div class="header-title">1#液冷</div>
+          <div>工作模式：<span class="header-values">运行</span></div>
+          <div>当前温度：<span class="header-values">12&#8451;</span></div>
+        </div>
+        <div class="content">
+          <el-row>
+            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
+          </el-row>
+        </div>
+      </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name:'DzjkSbjkYl',
+  data() {
+    return {
+      tempData:[
+        {title:'制热开启点',value:12,attr:''},
+        {title:'制冷开启点',value:23,attr:''},
+        {title:'高温告警点',value:30,attr:''},
+        {title:'制热停止点',value:24,attr:''},
+        {title:'制冷停止点',value:21,attr:''},
+        {title:'低温告警点',value:10,attr:''},
+
+      ]
+    }
+  },
+  methods:{
+
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.yl-item-container{
+  border-radius: 5px;
+  background-color: #EBF6F6;
+  &:not(:last-child){
+    margin-bottom: 25px;
+  }
+  .header{
+    line-height: 40px;
+    font-size: 14px;
+    >div{
+      display: inline-block;
+      margin-right: 40px;
+    }
+    .header-title{
+      border-radius:  5px 0 5px 0;
+      color:#ffffff;
+      width: 120px;
+      height: 40px;
+      font-size: 16px;
+      background-color: #05AEA3;
+      text-align: center;
+    }
+    .header-values{
+      color: #05AEA3;
+      font-weight: 500;
+    }
+  }
+  .content{
+    padding:25px;
+    .el-row{
+      background-color: #ffffff;
+      border:1px solid #eeeeee;
+      line-height: 14px;
+      color: #333333;
+      font-size: 12px;
+      .el-col{
+        padding:10px 0;
+        text-align: center;
+      }
+      .el-col:nth-child(-n+3){
+        border-bottom: 1px solid #eeeeee;
+      }
+      .el-col:not(:nth-child(3n)){
+        border-right: 1px solid #eeeeee;
+      }
+    }
+  }
+}
+.yl-warn-item-container{
+  background-color: #FFF1F0;
+  .header{
+    .header-title{
+      background-color: #FC6B69;
+    }
+    .header-values{
+      color: #FC6B69;
+    }
+  }
+}
+
+</style>

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>

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>

src/views/ems/home/DlzbChart.vue

@@ -0,0 +1,104 @@
+
+<template>
+  <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">按年</el-button>
+    </div>
+    <div style="height: 360px" id="dlzbChart"/>
+  </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('#dlzbChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        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月'],
+          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',
+          itemStyle: {
+            color: '#F86F70',
+            opacity: 0.5
+          },
+          areaStyle: {
+            color: '#F86F70',
+            opacity: 0.5
+          }
+        },{
+            name:'放电量',
+            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
+            type: 'line',
+            itemStyle: {
+              color: '#488AFF',
+              opacity: 0.5
+            },
+            areaStyle: {
+              color: '#488AFF',
+              opacity: 0.5
+            }
+          }]
+      })
+    }
+  }
+}
+
+</script>

src/views/ems/home/GjdjfbChart.vue

@@ -0,0 +1,101 @@
+
+<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="gjdjfbChart"/>
+  </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('#gjdjfbChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        color:['#3C81FF','#FFBE29'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['A级','B级','C级','D级','E级','F级'],
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: [{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        },{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        }],
+        series: [
+        {
+          name:'数据一',
+          yAxisIndex:0,
+          data: [80,92,1,34,90,130,320],
+          type: 'line',
+        },
+        {
+          name:'数据二',
+          yAxisIndex:1,
+          data: [89,9,80,4,100,30,30],
+          type: 'bar',
+        }
+          ]
+      })
+    }
+  }
+}
+
+</script>

src/views/ems/home/GjqsChart.vue

@@ -0,0 +1,85 @@
+
+<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="gjqsChart"/>
+  </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('#gjqsChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        color:['#F86F70'],
+        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月'],
+          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',
+          areaStyle: {}
+        }]
+      })
+    }
+  }
+}
+
+</script>

src/views/ems/home/SbgjzbChart.vue

@@ -0,0 +1,77 @@
+
+<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="sbgjzbChart"/>
+  </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('#sbgjzbChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        color:['#FFBE29','#3C81FF','#A796FF','#FC6B69','#58F3AA'],
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          left: 'center',
+          bottom:'10'
+        },
+        series: [
+          {
+            name: '设备告警占比',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 1048, name: '数据一' },
+              { value: 735, name: '数据二' },
+              { value: 580, name: '数据三' },
+              { value: 484, name: '数据四' },
+              { value: 300, name: '数据五' }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+
+</script>

src/views/ems/home/XtxlChart.vue

@@ -0,0 +1,84 @@
+
+<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="xtxlChart"/>
+  </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('#xtxlChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        color:['#FFBE01'],
+        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月'],
+          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',
+        }]
+      })
+    }
+  }
+}
+
+</script>

src/views/ems/home/index.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="ems-dashboard-editor-container">
+     <zd-info></zd-info>
+      <div class="ems-content-container ems-content-container-padding">
+        <div class="content-title">数据概览</div>
+        <el-row :gutter="32" style="background:#fff;margin:30px 0;">
+          <el-col :xs="24" :sm="12" :lg="12">
+              <dlzb-chart/>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="12">
+              <xtxl-chart/>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="32" style="background:#fff;margin:0;">
+          <el-col :xs="24" :sm="8" :lg="8">
+              <gjqs-chart/>
+          </el-col>
+          <el-col :xs="24" :sm="8" :lg="8">
+              <sbgjzb-chart/>
+          </el-col>
+          <el-col :xs="24" :sm="8" :lg="8">
+              <gjdjfb-chart/>
+          </el-col>
+        </el-row>
+      </div>
+
+
+
+  </div>
+</template>
+
+<script>
+import ZdInfo from '@/components/Ems/ZdBaseInfo/index.vue'
+import DlzbChart from './DlzbChart.vue'
+import XtxlChart from './XtxlChart.vue'
+import GjqsChart from './GjqsChart.vue'
+import SbgjzbChart from './SbgjzbChart.vue'
+import GjdjfbChart from './GjdjfbChart.vue'
+export default {
+  name: 'Index',
+  components: {
+    ZdInfo,
+    DlzbChart,
+    XtxlChart,
+    GjqsChart,
+    SbgjzbChart,
+    GjdjfbChart
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ems-dashboard-editor-container {
+  position: relative;
+  .content-title{
+    line-height: 16px;
+    color: #333333;
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+}
+</style>

src/views/ems/zddt/BarChart.vue

@@ -0,0 +1,75 @@
+<!--站点地图页面柱状图组件-->
+<template>
+  <div class="bar-chart-container"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+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: {
+    setOption(data){
+      const source = [['日期','充电量','放电量']]
+      data.forEach(item=>{
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+      })
+      this.chart.setOption({
+        color:['#A796FF','#FFBE01'],
+        legend: {
+          left: 'right',
+          bottom: '10',
+        },
+        tooltip: {},
+        xAxis: { type: 'category' },
+        yAxis: { },
+        grid:{top:30},
+        dataset:{
+          source
+          // source:[//格式
+          //   ['product','充电量','放电量'],
+          //   ['第一天',10,20],
+          //   ['第二天',20,30],
+          // ]
+        },
+        series: [
+          {
+            type: 'bar',//柱状图
+          },
+          {
+            type: 'bar',//柱状图
+          }
+        ]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el)
+    }
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.bar-chart-container{
+  width:100%;
+  height: 260px;
+}
+</style>

src/views/ems/zddt/MapChart.vue

@@ -0,0 +1,95 @@
+
+<template>
+  <div id="zddtChart" style="height: 100%;width:100%"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/mixins/ems/resize'
+import china from '@/data/ems/china.json'//中国地图数据
+import 'echarts/lib/chart/map';
+echarts.registerMap('china', { geoJSON: china }); //注册可用地图
+
+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() {
+      // ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
+      this.chart = echarts.init(document.querySelector('#zddtChart'))
+    },
+    setOption(data) {
+      this.chart.setOption({
+        color:['#FFBD00'],
+        backgroundColor: 'transparent', //背景色
+        geo: { //地理坐标系组件   地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制
+          map: 'china', //地图类型  这儿展示的是中国地图
+          aspectScale: 0.85,
+          selectedMode: "single",// 开启单选
+          label: {
+            show: true, //是否显示标签  此处指是否显示地图上的地区名字
+            color: '#ffffff',
+            fontSize: 12
+          },
+          roam: true, //是否开启鼠标缩放和平移漫游
+          itemStyle: {
+            areaColor: "#03365b",
+            borderColor: "#4bf3f9",
+            shadowColor: '#03365b', //阴影颜色
+            shadowOffsetX: 0, //阴影偏移量
+            shadowOffsetY: 10, //阴影偏移量
+          },
+          emphasis: {
+            label: {
+              show: true,
+              color: '#ffffff',
+            },
+            itemStyle: {
+              areaColor: "#0f5d9d",
+            }
+          }
+        },
+        series: [
+          {
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            showEffectOn: "render",
+            data,
+            rippleEffect: {
+              brushType: "stroke",
+              scale: 5,
+              period: 2, // 秒数
+            },
+            symbolSize: 12,
+            clickable: false,
+            zlevel: 1,
+            label: {
+              formatter: "{b}",
+              position: "right",
+              show: true,
+            },
+          }
+        ]
+      })
+    }
+  }
+}
+
+
+</script>

src/views/ems/zddt/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="ems-dashboard-editor-container">
+    <zd-info></zd-info>
+    <div class="ems-content-container ">
+      <div class="map-container">
+        <map-chart ref="mapChart"/>
+      </div>
+      <div class="zd-msg-container">
+        <div class="zd-msg-top">
+          <zd-select @submitSite="submitSite"></zd-select>
+          <el-card class="common-card-container">
+            <div slot="header">
+              <span class="card-title">基本信息</span>
+              <el-button style="float: right; padding: 3px 0" type="text" size="small" @click="toDzjk">查看详情</el-button>
+            </div>
+            <div class="single-zd-name">{{singleSiteName}}</div>
+<!--      四个方块-->
+            <el-row :gutter="14">
+              <el-col :span="12"  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>
+ <!--     基本信息     -->
+            <el-descriptions class="single-zd-info-container" :column="1" >
+              <el-descriptions-item  v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{item.value}}</el-descriptions-item>
+            </el-descriptions>
+<!--      echarts柱状图-->
+          <bar-chart ref="barChart"></bar-chart>
+          </el-card>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ZdInfo from '@/components/Ems/ZdBaseInfo/index.vue'
+import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
+import SingleSquareBox from '@/components/Ems/SingleSquareBox/index.vue'
+import BarChart from './BarChart.vue'
+import MapChart from './MapChart.vue'
+import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
+export default {
+  components:{ZdSelect,ZdInfo,SingleSquareBox,BarChart,MapChart},
+  data() {
+    return {
+      singleSiteId:'',
+      singleSiteName:'',
+      singleSiteLocation:[],
+      // 单个电站 四个方块数据
+      singleZdSqaure:[
+        {
+          title:'今日充电（kWh）',
+          value:'',
+          bgColor:'#FFE5E5',
+          attr:'dayChargedCap'
+        },{
+          title:'累计充电（kWh）',
+          value:'',
+          bgColor:'#FFE5E5',
+          attr:'totalChargedCap'
+        },{
+          title:'今日放电（kWh）',
+          value:'',
+          bgColor:'#EEEBFF',
+          attr:'dayDisChargedCap'
+        },{
+          title:'累计放电（kWh）',
+          value:'',
+          bgColor:'#EEEBFF',
+          attr:'totalDisChargedCap'
+        }
+      ],
+
+    //   单个电站 基本信息
+      singleZdInfo:[{
+        title:'电站位置',
+        value:'',
+        attr:'siteAddress'
+      },{
+        title:'投运时间',
+        value:'',
+        attr:'runningTime'
+      },{
+        title:'装机功率',
+        value:'',
+        attr:'installedPower'
+      },{
+        title:'装机容量',
+        value:'',
+        attr:'installedCap',
+      }]
+    }
+  },
+  methods:{
+    // 站点选中
+    submitSite(id){
+      if(this.singleSiteId === id){return console.log(`点击搜索按钮 搜索相同的站点id= ${id}不再调用获取基本信息接口`)}
+      console.log('点击搜索按钮 选中的站点id',id)
+      this.singleSiteId = id
+      getSingleSiteBaseInfo(id).then(response => {
+        console.log('单个站点详情数据',response)
+        const res = response.data || {}
+        this.singleSiteName = res?.siteName || ''//站点名称
+        this.singleSiteLocation = res?.siteLocation || []//站点坐标
+        this.singleZdSqaure.forEach(item=>{
+          item.value =( res[item.attr] || res[item.attr] === 0 ) ? res[item.attr] : '-'
+        })
+        this.singleZdInfo.forEach(item=>{
+          item.value = ( res[item.attr] || res[item.attr] === 0 ) ? res[item.attr] : '-'
+        })
+        this.$refs.barChart.setOption(res?.sevenDayDisChargeStats || [])
+        this.$refs.mapChart.setOption([{name:this.singleSiteName,value:this.singleSiteLocation}])
+
+      })
+    },
+    //跳转单站监控页面
+    toDzjk(){
+      this.$router.push({
+        path:'/dzjk',
+        query:{
+          siteId:this.singleSiteId,
+        }
+      })
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.ems-content-container{
+  display: flex;
+  padding:24px;
+  padding-right: 0;
+  .map-container{
+    flex:auto;
+  }
+  .zd-msg-container{
+    width: 500px;
+    padding: 24px;
+    .single-zd-name{
+      font-weight: 500;
+      line-height: 23px;
+      color: #FFBD00;
+      font-size: 16px;
+      margin-bottom: 24px;
+    }
+    .single-square-box-container{
+      height: 78px;
+      box-sizing: border-box;
+      margin-bottom: 10px;
+    }
+    .single-zd-info-container{
+      font-size: 12px;
+      margin-top: 10px;
+      color:#666666;
+    }
+  }
+}
+</style>