新增概率统计报表=>电表报表、电池温度

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,112 @@
+/*
+  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;
+    }
+  }
+}
+
+//公共表格样式
+.common-table.el-table{
+  color:#333333;
+  .el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
+    background: #f1f5fc;
+    border-bottom: none;
+    .table-head {
+      color: #515a6e;
+    }
+  }
+  .warning-status{
+    color:#FC6B69;
+    &.circle::before {
+      content: "";
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #FC6B69;
+      margin-right: 8px;
+    }
+  }
+}

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,155 @@
+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'},
+              }
+            ]
+          },
+          {
+            path: '/dzjk/gzgj',
+            component: () => import('@/views/ems/dzjk/gzgj/index.vue'),
+            name: 'DjzkGzgj',
+            meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkGzgj' }
+          },
+          {
+            path: '/dzjk/tjbb',
+            component: () => import('@/views/ems/dzjk/tjbb/index.vue'),
+            name: 'DjzkTjbb',
+            meta: {title: '统计报表', breadcrumb: false, activeMenu: '/dzjk'},
+            redirect: '/dzjk/tjbb/gltj',
+            children: [
+              {
+                path: 'gltj',
+                component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
+                name: 'DjzkTjbbGltj',
+                meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              },
+              {
+                path: 'glqx',
+                component: () => import('@/views/ems/dzjk/tjbb/glqx/index.vue'),
+                name: 'DjzkTjbbGlqx',
+                meta: { title: '功率曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              },
+              {
+                path: 'pcsqx',
+                component: () => import('@/views/ems/dzjk/tjbb/pcsqx/index.vue'),
+                name: 'DjzkTjbbPcsqx',
+                meta: { title: 'Pcs曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              },
+              {
+                path: 'dcdqx',
+                component: () => import('@/views/ems/dzjk/tjbb/dcdqx/index.vue'),
+                name: 'DjzkTjbbDcdqx',
+                meta: { title: '电池堆曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              },
+              {
+                path: 'dcwd',
+                component: () => import('@/views/ems/dzjk/tjbb/dcwd/index.vue'),
+                name: 'DjzkTjbbDcwd',
+                meta: { title: '电池温度',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              },
+              {
+                path: 'dbbb',
+                component: () => import('@/views/ems/dzjk/tjbb/dbbb/index.vue'),
+                name: 'DjzkTjbbDbbb',
+                meta: { title: '电表报表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
+
+
+

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,170 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
+    <!--    搜索栏-->
+    <div class="select-container">
+      <el-form :inline="true">
+        <el-form-item label="设备类型">
+          <el-select v-model="search.sblx" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in sblxOptions" :key="index+'sblxOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="告警等级">
+          <el-select v-model="search.gjdj" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in gjdjOptions" :key="index+'gjdjOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间选择">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            :picker-options="pickerOptions"
+            :default-value="defaultDateRange"
+            end-placeholder="结束时间">
+          </el-date-picker>
+        </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;">
+      <!--        二个选择按钮-->
+      <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-table
+          class="common-table"
+          :data="tableData"
+          stripe
+          max-height="500"
+          style="width: 100%;margin-top:25px;">
+          <el-table-column
+            prop="name"
+            width="200"
+            label="设备名称">
+          </el-table-column>
+          <el-table-column
+            label="告警等级"
+          >
+            <template slot-scope="scope">
+              <span>{{scope.row.gjdj}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="告警内容">
+            <template slot-scope="scope">
+              <span>{{scope.row.gjnr}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="startTime"
+            label="告警发生时间">
+          </el-table-column>
+          <el-table-column
+            prop="finishTime"
+            label="告警结束时间">
+          </el-table-column>
+          <el-table-column
+            label="状态">
+            <template slot-scope="scope">
+              <span :class="scope.row.status === 2 ? 'warning-status' : ''">{{scope.row.status === 2 ? '告警中' :'已结束'}}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+    </div>
+  </el-card>
+</template>
+
+
+<script>
+export default {
+  name:'DzjkGzgj',
+  data() {
+    return {
+      btnList:[
+        {name:'今日告警',id:'today'},
+        {name:'历史告警',id:'yesterday'},
+      ],
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      activeBtn:'today',
+      loading:false,
+      search:{sblx:'',gjdj:''},
+      sblxOptions:[
+        {name:'类型一',id:1},
+        {name:'类型二',id:2},
+        {name:'类型三',id:3},
+      ],
+      gjdjOptions:[
+        {name:'等级一',id:1},
+        {name:'等级二',id:2},
+      ],
+      tableData:[
+        {name:'告警一',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
+        {name:'告警二',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2},
+        {name:'告警三',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
+        {name:'告警四',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2}
+      ]
+    }
+  },
+  methods:{
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.search.dcd=''
+      this.search.dcc=''
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=false
+    },
+    changeDataType(id){
+      if(id !== this.activeBtn){
+        console.log('点击了不同的菜单，更新数据')
+        this.activeBtn=id;
+      }
+    },
+
+  },
+  mounted(){
+    this.getData()
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+  }
+}
+</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/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,143 @@
+<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
+              class="common-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 circle">{{ 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 ;
+      }
+    }
+  }
+</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,160 @@
+
+<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>
+    <el-table
+        class="common-table"
+        :data="tableData"
+        stripe
+        max-height="500"
+        style="width: 100%;margin-top:25px;">
+        <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>
+</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;
+  }
+}
+
+</style>

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

@@ -0,0 +1,140 @@
+
+<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>
+    <el-table
+        class="common-table"
+        :data="tableData"
+        stripe
+        style="width: 100%;margin-top:25px;">
+        <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>
+</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;
+  }
+}
+
+</style>

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

@@ -0,0 +1,146 @@
+
+<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
+            class="common-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
+            class="common-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">2#液冷</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">3#液冷</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">4#液冷</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/dbbb/index.vue

@@ -0,0 +1,177 @@
+
+<template>
+  <div>
+    <!--    搜索栏-->
+    <div class="select-container">
+      <el-form :inline="true">
+        <el-form-item label="电表">
+          <el-select v-model="search.db" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in dbOptions" :key="index+'dbOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日报">
+          <el-select v-model="search.rb" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in rbOptions" :key="index+'rbOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间选择">
+          <el-date-picker
+            v-model="search.date"
+            type="date"
+            :picker-options="pickerOptions"
+            :default-value="defaultDate">
+          </el-date-picker>
+        </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>
+    <!--表格-->
+    <el-table
+          class="common-table"
+          :data="tableData"
+          stripe
+          max-height="500"
+          show-summary
+          sum-text="汇总"
+          style="width: 100%;margin-top:25px;">
+<!--      todo汇总数据  :summary-method="getSummaries"-->
+<!--        汇总列-->
+          <el-table-column label="汇总">
+            <el-table-column
+              prop="time"
+              label="日期"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+<!--充电量列-->
+          <el-table-column  label="充电量">
+            <el-table-column
+              prop="cdlJian"
+              label="尖">
+            </el-table-column>
+            <el-table-column
+              prop="cdlFeng"
+              label="峰">
+            </el-table-column>
+            <el-table-column
+              prop="cdlPing"
+              label="平">
+            </el-table-column>
+            <el-table-column
+              prop="cdlGu"
+              label="谷">
+            </el-table-column>
+            <el-table-column
+              prop="cdlZong"
+              label="总">
+            </el-table-column>
+          </el-table-column>
+        <!--充电量列-->
+          <el-table-column  label="放电量">
+            <el-table-column
+              prop="fdlJian"
+              label="尖">
+            </el-table-column>
+            <el-table-column
+              prop="fdlFeng"
+              label="峰">
+            </el-table-column>
+            <el-table-column
+              prop="fdlPing"
+              label="平">
+            </el-table-column>
+            <el-table-column
+              prop="fdlGu"
+              label="谷">
+            </el-table-column>
+            <el-table-column
+              prop="fdlZong"
+              label="总">
+            </el-table-column>
+          </el-table-column>
+<!--        效率-->
+          <el-table-column label="效率(%)">
+            <el-table-column
+              prop="efficiency">
+            </el-table-column>
+          </el-table-column>
+        </el-table>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name:'DzjkTjbbDbbb',
+  data() {
+    return {
+      loading:false,
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDate:'',//默认展示的时间
+      search:{db:'',rb:'',date:''},
+      dbOptions:[
+        {name:'电表1',id:1},
+        {name:'电表2',id:2},
+        {name:'电表3',id:3},
+      ],
+      rbOptions:[
+        {name:'日报1',id:1},
+        {name:'日报2',id:2},
+      ],
+      tableData:[
+        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
+        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
+        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
+        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
+      ]
+    }
+  },
+  methods:{
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.search={
+        db:'',rb:'',date:''
+      }
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=false
+    },
+    getSummaries(){
+
+    }
+  },
+  mounted(){
+    this.getData()
+    this.defaultDate = new Date()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.select-container{
+  .el-form--inline .el-form-item{
+    margin-right: 20px;
+  }
+}
+::v-deep{
+  .common-table.el-table .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th{
+    border-bottom: 1px solid #dfe6ec;
+  }
+}
+
+</style>

src/views/ems/dzjk/tjbb/dcdqx/index.vue

@@ -0,0 +1,166 @@
+
+<template>
+  <div>
+    <div class="select-container">
+      <el-form :inline="true">
+        <el-form-item label="Pcs">
+          <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'sblxOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间选择">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            :picker-options="pickerOptions"
+            :default-value="defaultDateRange"
+            end-placeholder="结束时间">
+          </el-date-picker>
+        </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;">
+      <!--        二个选择按钮-->
+      <el-row style="">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <el-button-group>
+            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!--echart-->
+      <div id="dcdEchart" style="height:360px;"></div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import * as echarts from 'echarts'
+import resize from "@/mixins/ems/resize";
+export default {
+  name:'DzjkTjbbPcsqx',
+  mixins: [resize],
+  data() {
+    return {
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      loading:false,
+      pcs:'',
+      pcsOptions: [
+        {name:'Pcs1',id:1},
+        {name:'Pcs2',id:2},
+      ],
+      activeBtn:'dpjwd',
+      btnList:[
+        {name:'堆平均维度',id:'dpjwd'},
+        {name:'堆电压',id:'ddy'},
+        {name:'堆电流',id:'dll'},
+        {name:'堆soc',id:'dsoc'},
+      ],
+
+    }
+  },
+  methods: {
+    changeDataType(id){
+      if(id !== this.activeBtn){
+        console.log('点击了不同的菜单，更新数据')
+        this.activeBtn=id;
+      }
+    },
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.pcs = ''
+      this.dateRange=[]
+      this.getData()
+    },
+    getData(){
+      this.loading=true;
+      this.chart.showLoading()
+      //接口调用完成之后 设置图表、结束loading
+      this.setOption()
+      this.loading=false;
+      this.chart.hideLoading()
+    },
+    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: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name:this.btnList.find(item=>item.id===this.activeBtn).name,
+            data: [80,92,1,34,90,130,320,80,9,91,34,90,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',
+          // }
+          ]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#dcdEchart'));
+    }
+  },
+  mounted(){
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+    this.initChart()
+    this.getData()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.activeBtn{
+  background-color: #FFF2CB;
+  border-color: #FFF2CB;
+  color: #666666;
+  font-weight: 600;
+}
+</style>

src/views/ems/dzjk/tjbb/dcwd/index.vue

@@ -0,0 +1,149 @@
+
+<template>
+  <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.gjdj" 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 label="时间选择">
+          <el-date-picker
+            v-model="search.date"
+            type="date"
+            :picker-options="pickerOptions"
+            :default-value="defaultDate">
+          </el-date-picker>
+        </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;">
+      <!--表格-->
+      <el-table
+          class="common-table"
+          :data="tableData"
+          stripe
+          max-height="500"
+          style="width: 100%;margin-top:25px;">
+          <el-table-column
+            prop="time"
+            width="100"
+            label="时间">
+          </el-table-column>
+          <el-table-column
+            prop="maxTemp"
+            label="最高温（℃）">
+          </el-table-column>
+          <el-table-column
+            prop="maxTempDtId"
+            label="单体ID">
+          </el-table-column>
+          <el-table-column
+            prop="minTemp"
+            label="最低温（℃）">
+          </el-table-column>
+          <el-table-column
+            prop="minTempDtId"
+            label="单体ID">
+          </el-table-column>
+          <el-table-column
+            prop="maxPressure"
+            label="最高压（V）">
+          </el-table-column>
+          <el-table-column
+            prop="maxPressureDtId"
+            label="单体ID">
+          </el-table-column>
+          <el-table-column
+            prop="minTemp"
+            label="最低压（V）">
+          </el-table-column>
+          <el-table-column
+            prop="minPressureDtId"
+            label="单体ID">
+          </el-table-column>
+        </el-table>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name:'DzjkTjbbDcwd',
+  data() {
+    return {
+      loading:false,
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDate:'',//默认展示的时间
+      search:{dcd:'',dcc:'',date:''},
+      dcdOptions:[
+        {name:'电池堆1',id:1},
+        {name:'电池堆2',id:2},
+        {name:'电池堆3',id:3},
+      ],
+      dccOptions:[
+        {name:'电池簇1',id:1},
+        {name:'电池簇2',id:2},
+      ],
+      tableData:[
+        {time:'00:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'01:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'02:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'03:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'04:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'05:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'06:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'07:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+      ]
+    }
+  },
+  methods:{
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.search={
+        dcd:'',dcc:'',date:''
+      }
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=false
+    },
+  },
+  mounted(){
+    this.getData()
+    this.defaultDate = new Date()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.select-container{
+  .el-form--inline .el-form-item{
+    margin-right: 20px;
+  }
+}
+
+</style>

src/views/ems/dzjk/tjbb/glqx/index.vue

@@ -0,0 +1,166 @@
+
+<template>
+  <div>
+    <div class="select-container">
+      <el-form :inline="true">
+<!--        <el-form-item label="网点">-->
+<!--          <el-select v-model="wd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
+<!--            <el-option :label="item.name" :value="item.id" v-for="(item,index) in wdOptions" :key="index+'sblxOptions'"></el-option>-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
+        <el-form-item label="时间选择">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            :picker-options="pickerOptions"
+            :default-value="defaultDateRange"
+            end-placeholder="结束时间">
+          </el-date-picker>
+        </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;">
+      <!--        二个选择按钮-->
+      <el-row style="">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <el-button-group>
+            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!--echart-->
+      <div id="glqxEchart" style="height:360px;"></div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import * as echarts from 'echarts'
+import resize from "@/mixins/ems/resize";
+export default {
+  name:'DzjkTjbbGlqx',
+  mixins: [resize],
+  data() {
+    return {
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      loading:false,
+      // todo delete
+      // wd:'',
+      // wdOptions: [
+      //   {name:'网点一',id:1},
+      //   {name:'网点二',id:2},
+      // ],
+      activeBtn:'dwgl',
+      btnList:[
+        {name:'电网功率',id:'dwgl'},
+        {name:'负载功率',id:'fzgl'},
+        {name:'电储能功率',id:'cngl'},
+        {name:'光伏功率',id:'gfgl'},
+      ],
+
+    }
+  },
+  methods: {
+    changeDataType(id){
+      if(id !== this.activeBtn){
+        console.log('点击了不同的菜单，更新数据')
+        this.activeBtn=id;
+      }
+    },
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.dateRange=[]
+      this.getData()
+    },
+    getData(){
+      this.loading=true;
+      this.chart.showLoading()
+      //接口调用完成之后 设置图表、结束loading
+      this.setOption()
+      this.loading=false;
+      this.chart.hideLoading()
+    },
+    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: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name:this.btnList.find(item=>item.id===this.activeBtn).name,
+            data: [80,92,1,34,90,130,320,80,9,91,34,90,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',
+          // }
+          ]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#glqxEchart'));
+    }
+  },
+  mounted(){
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+    this.initChart()
+    this.getData()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.activeBtn{
+  background-color: #FFF2CB;
+  border-color: #FFF2CB;
+  color: #666666;
+  font-weight: 600;
+}
+</style>

src/views/ems/dzjk/tjbb/gltj/Dlzb.vue

@@ -0,0 +1,150 @@
+<template>
+  <el-card shadow="always" class="common-card-container" style="margin-top:20px">
+    <div slot="header">
+      <span class="card-title">电量指标</span>
+    </div>
+    <div class="card-main">
+      <!--    搜索栏-->
+      <div class="select-container">
+        <el-form :inline="true">
+          <el-form-item label="时间选择">
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始时间"
+              :picker-options="pickerOptions"
+              :default-value="defaultDateRange"
+              end-placeholder="结束时间">
+            </el-date-picker>
+          </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 class="total-data">
+        <div>总充电量:<span class="point">1390988kWh</span></div>
+        <div>总放电量:<span class="point">988kWh</span></div>
+        <div>总效益:<span class="point">99%</span></div>
+      </div>
+      <div id="dlzbChart" style="height: 310px"></div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from "@/mixins/ems/resize";
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      loading:false,
+      chart: null
+
+    }
+  },
+  methods: {
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.dateRange=[]
+      this.getData()
+    },
+    getData(){
+      this.loading=true;
+      this.chart.showLoading()
+      //接口调用完成之后 设置图表、结束loading
+      this.setOption()
+      this.loading=false;
+      this.chart.hideLoading()
+    },
+    setOption(data){
+      // const source = [['日期','充电量','放电量']]
+      // data.forEach(item=>{
+      //   source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+      // })
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF'],
+        // legend: {
+        //   left: 'right',
+        //   bottom: '10',
+        // },
+        tooltip: {},
+        xAxis: { type: 'category' },
+        yAxis: { type: 'value' },
+        grid:{top:30},
+        dataset:{
+          // source
+          source:[//格式
+            ['product','充电量','放电量'],
+            ['6/10',101,220],
+            ['6/11',210,390],
+            ['6/12',220,360],
+            ['6/13',520,340],
+            ['6/14',270,430],
+          ]
+        },
+        series: [
+          {
+            type: 'bar',//柱状图
+          },
+          {
+            type: 'bar',//柱状图
+          },
+        ]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#dlzbChart'));
+    }
+  },
+  mounted(){
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+    this.initChart()
+    this.getData()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+}
+</script>
+
+
+<style scoped lang="scss">
+.total-data{
+  line-height: 18px;
+  color: #333333;
+  font-size: 16px;
+  padding:10px 0;
+  >div{
+    display: inline-block;
+    margin-right: 20px;
+    .point{
+      color: #05AEA3;
+      font-weight: 500;
+      font-size: 18px;
+    }
+  }
+}
+</style>

src/views/ems/dzjk/tjbb/gltj/Syzb.vue

@@ -0,0 +1,147 @@
+<template>
+  <el-card shadow="always" class="common-card-container">
+    <div slot="header">
+      <span class="card-title">收益指标</span>
+    </div>
+    <div class="card-main">
+      <!--    搜索栏-->
+      <div class="select-container">
+        <el-form :inline="true">
+          <el-form-item label="时间选择">
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始时间"
+              :picker-options="pickerOptions"
+              :default-value="defaultDateRange"
+              end-placeholder="结束时间">
+            </el-date-picker>
+          </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 class="total-data">
+        <div>总收益:<span class="point">22345元</span></div>
+      </div>
+      <div id="syzbChart" style="height: 310px"></div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from "@/mixins/ems/resize";
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      loading:false,
+      chart: null
+
+    }
+  },
+  methods: {
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.dateRange=[]
+      this.getData()
+    },
+    getData(){
+      this.loading=true;
+      this.chart.showLoading()
+      //接口调用完成之后 设置图表、结束loading
+      this.setOption()
+      this.loading=false;
+      this.chart.hideLoading()
+    },
+    setOption(data){
+      // const source = [['日期','充电量','放电量']]
+      // data.forEach(item=>{
+      //   source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+      // })
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF'],
+        // legend: {
+        //   left: 'right',
+        //   bottom: '10',
+        // },
+        tooltip: {},
+        xAxis: { type: 'category' },
+        yAxis: { type: 'value' },
+        grid:{top:30},
+        dataset:{
+          // source
+          source:[//格式
+            ['product','收入','支出'],
+            ['6/10',10,20],
+            ['6/11',20,30],
+            ['6/12',20,34],
+            ['6/13',20,90],
+            ['6/14',20,3],
+          ]
+        },
+        series: [
+          {
+            type: 'bar',//柱状图
+          },
+          {
+            type: 'bar',//柱状图
+          }
+        ]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#syzbChart'));
+    }
+  },
+  mounted(){
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+    this.initChart()
+    this.getData()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+}
+</script>
+
+
+<style scoped lang="scss">
+.total-data{
+  line-height: 18px;
+  color: #333333;
+  font-size: 16px;
+  padding:10px 0;
+  >div{
+    display: inline-block;
+    .point{
+      color: #05AEA3;
+      font-weight: 500;
+      font-size: 18px;
+    }
+  }
+}
+</style>

src/views/ems/dzjk/tjbb/gltj/index.vue

@@ -0,0 +1,19 @@
+
+<template>
+  <div>
+    <syzb/>
+    <dlzb/>
+  </div>
+</template>
+
+<script>
+import Syzb from "./Syzb.vue";
+import Dlzb from "./Dlzb.vue";
+export default {
+  name:'DzjkTjbbGltj',
+  components: {Syzb,Dlzb}
+}
+</script>
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="ems-dashboard-editor-container tjbb-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+'tjbbChildrenRoute'">
+          <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 tjbb-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==='DjzkTjbb').children//获取到统计报表下面的字路由
+console.log('设备监控子路由',childrenRoute)
+export default {
+  name:'DzjkTjbb',
+  data(){
+    return {
+      childrenRoute,
+      activeMenu:''
+    }
+  },
+  mounted() {
+    console.log('当前统计报表页面路由',this.$route)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.tjbb-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;
+  }
+}
+.tjbb-ems-content-container{
+  margin-top:0;
+  padding-top:0;
+  padding-right: 0;
+  flex: 1;
+}
+</style>
+

src/views/ems/dzjk/tjbb/pcsqx/index.vue

@@ -0,0 +1,167 @@
+
+<template>
+  <div>
+    <div class="select-container">
+      <el-form :inline="true">
+        <el-form-item label="Pcs">
+          <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'sblxOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间选择">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            :picker-options="pickerOptions"
+            :default-value="defaultDateRange"
+            end-placeholder="结束时间">
+          </el-date-picker>
+        </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;">
+      <!--        二个选择按钮-->
+      <el-row style="">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <el-button-group>
+            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!--echart-->
+      <div id="pcsEchart" style="height:360px;"></div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import * as echarts from 'echarts'
+import resize from "@/mixins/ems/resize";
+export default {
+  name:'DzjkTjbbPcsqx',
+  mixins: [resize],
+  data() {
+    return {
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      loading:false,
+      pcs:'',
+      pcsOptions: [
+        {name:'Pcs1',id:1},
+        {name:'Pcs2',id:2},
+      ],
+      activeBtn:'yggl',
+      btnList:[
+        {name:'有功功率',id:'yggl'},
+        {name:'无功功率',id:'wggl'},
+        {name:'温度',id:'wd'},
+        {name:'三相电压',id:'sxdy'},
+        {name:'三相电流',id:'sxdl'},
+      ],
+
+    }
+  },
+  methods: {
+    changeDataType(id){
+      if(id !== this.activeBtn){
+        console.log('点击了不同的菜单，更新数据')
+        this.activeBtn=id;
+      }
+    },
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.pcs = ''
+      this.dateRange=[]
+      this.getData()
+    },
+    getData(){
+      this.loading=true;
+      this.chart.showLoading()
+      //接口调用完成之后 设置图表、结束loading
+      this.setOption()
+      this.loading=false;
+      this.chart.hideLoading()
+    },
+    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: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name:this.btnList.find(item=>item.id===this.activeBtn).name,
+            data: [80,92,1,34,90,130,320,80,9,91,34,90,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',
+          // }
+          ]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#pcsEchart'));
+    }
+  },
+  mounted(){
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+    this.initChart()
+    this.getData()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.activeBtn{
+  background-color: #FFF2CB;
+  border-color: #FFF2CB;
+  color: #666666;
+  font-weight: 600;
+}
+</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>