pcs顶部方块样式调整

.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = EMS管理系统
+VUE_APP_TITLE = 上动新能源-EMS管理系统
 
 # 开发环境配置
 ENV = 'development'

.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = EMS管理系统
+VUE_APP_TITLE = 上动新能源-EMS管理系统
 
 # 生产环境配置
 ENV = 'production'

.env.staging

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = EMS管理系统
+VUE_APP_TITLE = 上动新能源-EMS管理系统
 
 BABEL_ENV = production
 

src/api/ems/dzjk.js

@@ -0,0 +1,94 @@
+import request from '@/utils/request'
+
+//获取单个站点的信息
+export function getDzjkHomeView(siteId) {
+  return request({
+    url: `/ems/siteMonitor/homeView?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+
+//获取pcs、实时运行头部的设备信息
+export function getRunningHeadInfo(siteId) {
+  return request({
+    url: `/ems/siteMonitor/runningHeadInfo?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+//获取pcs列表
+export function getPcsDetailInfo(siteId) {
+  return request({
+    url: `/ems/siteMonitor/getPcsDetailInfo?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+
+//获取BMS总览数据
+export function getBMSOverView(siteId) {
+  return request({
+    url: `/ems/siteMonitor/getBMSOverView?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+
+//获取BMS电池簇总览数据
+export function getBMSBatteryCluster(siteId) {
+  return request({
+    url: `/ems/siteMonitor/getBMSBatteryCluster?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+
+//获取单体电池 电池堆列表数据
+export function getStackNameList(siteId) {
+  return request({
+    url: `/ems/siteMonitor/getStackNameList?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+//获取单体电池 电池簇列表数据
+export function getClusterNameList(stackDeviceId) {
+  return request({
+    url: `/ems/siteMonitor/getClusterNameList?stackDeviceId=${stackDeviceId}`,
+    method: 'get'
+  })
+}
+//单体电池表格数据
+export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId, pageSize, pageNum}) {
+  return request({
+    url: `/ems/siteMonitor/getClusterDataInfoList?clusterDeviceId=${clusterDeviceId}&siteId=${siteId}&stackDeviceId=${stackDeviceId}&pageSize=${pageSize}&pageNum=${pageNum}`,
+    method: 'get'
+  })
+}
+//获取液冷列表数据
+export function getCoolingDataList(siteId) {
+  return request({
+    url: `/ems/siteMonitor/getCoolingDataList?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+
+//获取电表数据
+export function getAmmeterDataList(siteId) {
+  return request({
+    url: `/ems/siteMonitor/getAmmeterDataList?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+
+// 故障告警
+export function getAlarmDetailList({siteId, deviceType, alarmLevel, alarmStartTime, alarmEndTime,pageSize,pageNum}) {
+  return request({
+    url: `/ems/siteAlarm/getAlarmDetailList?siteId=${siteId}&deviceType=${deviceType}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
+    method: 'get'
+  })
+}
+
+// 概率统计
+//获取概率统计 电量指标接口
+export function getElectricData({siteId,startDate,endDate}) {
+  return request({
+    url: `/ems/statsReport/getElectricData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
+    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/site.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+// 站点列表
+export function getSiteInfoList({siteName,startTime, endTime,pageSize,pageNum}) {
+  return request({
+    url: `/ems/siteConfig/getSiteInfoList?siteName=${siteName}&startTime=${startTime}&endTime=${endTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
+    method: 'get'
+  })
+}
+
+// 设备列表
+export function getDeviceInfoList({siteId,pageSize,pageNum}) {
+  return request({
+    url: `/ems/siteConfig/getDeviceInfoList?siteId=${siteId}&pageSize=${pageSize}&pageNum=${pageNum}`,
+    method: 'get'
+  })
+}
+
+// 设备详情
+export function getDeviceDetailInfo(deviceId) {
+  return request({
+    url: `/ems/siteConfig/getDeviceDetailInfo?deviceId=${deviceId}`,
+    method: 'get'
+  })
+}

src/api/ems/ticket.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询工单主列表
+export function listTicket(query) {
+  return request({
+    url: '/ticket/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询工单主详细
+export function getTicket(id) {
+  return request({
+    url: '/ticket/' + id,
+    method: 'get'
+  })
+}
+
+// 新增工单主
+export function addTicket(data) {
+  return request({
+    url: '/ticket',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改工单主
+export function updateTicket(data) {
+  return request({
+    url: '/ticket',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除工单主
+export function delTicket(id) {
+  return request({
+    url: '/ticket/' + id,
+    method: 'delete'
+  })
+}

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,169 @@
+/*
+  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;
+    }
+  }
+}
+
+//二、三级菜单栏样式
+.ems-second-menu{
+  width:fit-content;
+  .el-menu-item{
+    line-height: 40px;
+    height: 40px;
+    padding:0;
+  }
+  &.el-menu--horizontal > .el-menu-item.is-active,&.el-menu--horizontal > .el-menu-item{
+    border-bottom:none!important;
+  }
+  .el-menu-item.is-active{
+    background: #0366c1!important;
+  }
+}
+.ems-third-menu{
+  border-right: none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  height: fit-content;
+  .el-menu-item{
+    line-height: 45px;
+    height: 45px;
+    padding: 0 !important;
+    width: 125px;
+    text-align: center;
+  }
+  .el-menu-item:hover{
+    background: #67b1ff!important;
+    color:#ffffff!important;
+  }
+  .el-menu-item.is-active{
+    background: #409eff!important;
+  }
+
+}
+
+
+//按钮栏 选中样式
+.ems-btns-group{
+  .activeBtn{
+    background-color: #0366c1;
+    border-color: #0366c1;
+    color: #ffffff;
+    font-weight: 600;
+  }
+}
+
+//搜索栏样式
+.select-container.el-form--inline .el-form-item{
+  margin-right: 15px;
+}
+//红色背景颜色按钮
+.alarm-btn,.alarm-btn:hover, .alarm-btn:focus{
+  background-color: #FC6B69;
+  border-color: #FC6B69;
+}

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 | formatNumber }}</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 10px;
+    }
+  }
+</style>
+<script>
+  export default {
+    props: ['data'],
+  }
+</script>

src/components/Ems/ZdBaseInfo/index.vue

@@ -0,0 +1,89 @@
+
+<!--首页、地图站点页面顶部信息方块-->
+<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 | formatNumber}}</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:'installPower'
+
+      },{
+        title:'装机容量（MW）',
+        num:'',
+        color:'#5AC7C0',
+        attr:'installCapacity'
+
+      },{
+        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]
+      })
+    }
+  },
+  mounted() {
+    getSiteTotalInfo().then(response => {
+      console.log('单个站点基本信息返回数据',response)
+      this.setData(response?.data || {})
+    }).catch(()=>{
+      this.setData({})
+    })
+  }
+}
+</script>
+<style scoped lang="scss">
+.card{
+  min-width: 150px;
+  height: 96px;
+  margin-right: 27px;
+  border-bottom: 4px solid transparent;
+  text-align: center;
+  box-sizing: border-box;
+  padding:0 10px;
+  .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="正在加载数据">
+          <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :loading="searchLoading" @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,
+        default:'',
+        required:false
+      }
+    },
+    data() {
+      return {
+        id:'',
+        loading:false,
+        searchLoading:false,
+        siteList:[],
+      }
+    },
+    computed:{
+      ...mapGetters(["zdList"]),
+    },
+    methods:{
+      onSubmit(){
+        this.$emit('submitSite',this.id)
+      },
+      setDefaultSite(){
+        const defaultSite = this.defaultSiteId
+        if(defaultSite && this.siteList.find(item=>item.siteId === defaultSite)){
+          this.id = defaultSite
+        }else if(!defaultSite && this.siteList.length>0){
+          this.id = this.siteList[0].siteId
+        }
+        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;this.searchLoading=false})
+      }
+    },
+    mounted(){
+      this.loading=true
+      this.searchLoading=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
+            this.searchLoading=false
+            console.log("从store中获取站点列表数据",this.zdList,this.siteList)
+            this.setDefaultSite()
+          }
+        }else{
+          this.getList()
+        }
+      })
+    }
+  }
+</script>

src/filters/ems.js

@@ -0,0 +1,19 @@
+
+export const formatNumber = (val) => {
+ if(val || [0,'0'].includes(val)) {
+   return val
+ }else {return '-'}
+}
+
+
+export const formatDate = (val,toSeconds = false) => {
+  if(!val) return ''
+  const date = new Date(val)
+  const month = date.getMonth() + 1,day = date.getDate()
+  if(!toSeconds){
+    return `${date.getFullYear()}-${month<10?'0'+month : month}-${day<10 ? '0'+day : day}`
+  }else{
+    const hours = date.getHours(),minuets=date.getMinutes(),seconds = date.getSeconds();
+    return `${date.getFullYear()}-${month<10?'0'+month : month}-${day<10 ? '0'+day : day} ${hours<10 ? '0'+hours : hours}:${minuets<10 ? '0'+minuets : minuets}:${seconds<10 ? '0'+seconds : seconds}`
+  }
+}

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/layout/components/Sidebar/Logo.vue

@@ -2,12 +2,12 @@
   <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <img :src="logo" class="sidebar-logo" />
+<!--        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <img :src="logo" class="sidebar-logo" />
+<!--        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
       </router-link>
     </transition>
   </div>
@@ -16,7 +16,8 @@
 <script>
 import logoImg from '@/assets/logo/logo.png'
 import variables from '@/assets/styles/variables.scss'
-
+import logo from '@/assets/images/ems/logo.png'
+import logoLarge from '@/assets/images/ems/logo-large.png'
 export default {
   name: 'SidebarLogo',
   props: {
@@ -36,7 +37,9 @@ export default {
   data() {
     return {
       title: process.env.VUE_APP_TITLE,
-      logo: logoImg
+      // logo: logoImg
+      logo:logo,
+      logoLarge:logoLarge
     }
   }
 }
@@ -66,10 +69,10 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 100%;
+      height: 100%;
       vertical-align: middle;
-      margin-right: 12px;
+      //margin-right: 12px;
     }
 
     & .sidebar-title {

src/main.js

@@ -36,6 +36,8 @@ import DictTag from '@/components/DictTag'
 // 字典数据组件
 import DictData from '@/components/DictData'
 
+import {formatNumber} from '@/filters/ems'
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -74,7 +76,7 @@ Vue.use(Element, {
 })
 
 Vue.config.productionTip = false
-
+Vue.filter('formatNumber', formatNumber)
 new Vue({
   el: '#app',
   router,

src/mixins/ems/getQuerySiteId.js

@@ -0,0 +1,25 @@
+// 用于单站监控二级菜单页面获取路由中的站点ID
+const getQuerySiteId=  {
+  data: function () {
+    return {
+      siteId:''
+    }
+  },
+  watch: {
+    '$route.query':{
+      handler (newQuery,oldQuery) {
+        // 参数变化处理
+        this.$nextTick(() => {
+          const {siteId} =newQuery
+          if(siteId){
+            this.siteId = siteId
+            siteId && this.init(newQuery.siteId)
+            console.log('mixin=>getQuerySiteId=>页面参数siteId发生了变化,this.siteId=',this.siteId)
+          }
+        })
+      },
+      immediate: true,
+    }
+  },
+}
+export default getQuerySiteId

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,176 @@
+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: 'DzjkHome',
+            meta: { title: '站点首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkHome' }
+          },
+          {
+            path: '/dzjk/sbjk',
+            component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
+            name: 'DzjkSbjk',
+            meta: { title: '设备监控',breadcrumb: false,activeMenu: '/dzjk'},
+            redirect: '/dzjk/sbjk/ssyx',
+            children: [
+              {
+                path: 'ssyx',
+                component: () => import('@/views/ems/dzjk/sbjk/ssyx/index.vue'),
+                name: 'DzjkSbjkSsyx',
+                meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
+              },
+              {
+                path: 'pcs',
+                component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'),
+                name: 'DzjkSbjkPcs',
+                meta: { title: 'PCS',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
+              },
+              {
+                path: 'bmszl',
+                component: () => import('@/views/ems/dzjk/sbjk/bmszl/index.vue'),
+                name: 'DzjkSbjkBmszl',
+                meta: { title: 'BMS总览',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
+              },
+              {
+                path: 'bmsdcc',
+                component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'),
+                name: 'DzjkSbjkBmsdcc',
+                meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
+              },
+              {
+                path: 'dtdc',
+                component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'),
+                name: 'DzjkSbjkDtdc',
+                meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
+              },
+              {
+                path: 'db',
+                component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'),
+                name: 'DzjkSbjkDb',
+                meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
+              },
+              {
+                path: 'yl',
+                component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'),
+                name: 'DzjkSbjkYl',
+                meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
+              }
+            ]
+          },
+          {
+            path: '/dzjk/gzgj',
+            component: () => import('@/views/ems/dzjk/gzgj/index.vue'),
+            name: 'DzjkGzgj',
+            meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkGzgj' }
+          },
+          {
+            path: '/dzjk/tjbb',
+            component: () => import('@/views/ems/dzjk/tjbb/index.vue'),
+            name: 'DzjkTjbb',
+            meta: {title: '统计报表', breadcrumb: false, activeMenu: '/dzjk'},
+            redirect: '/dzjk/tjbb/gltj',
+            children: [
+              {
+                path: 'gltj',
+                component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
+                name: 'DzjkTjbbGltj',
+                meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
+              },
+              {
+                path: 'glqx',
+                component: () => import('@/views/ems/dzjk/tjbb/glqx/index.vue'),
+                name: 'DzjkTjbbGlqx',
+                meta: { title: '功率曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
+              },
+              {
+                path: 'pcsqx',
+                component: () => import('@/views/ems/dzjk/tjbb/pcsqx/index.vue'),
+                name: 'DzjkTjbbPcsqx',
+                meta: { title: 'PCS曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
+              },
+              {
+                path: 'dcdqx',
+                component: () => import('@/views/ems/dzjk/tjbb/dcdqx/index.vue'),
+                name: 'DzjkTjbbDcdqx',
+                meta: { title: '电池堆曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
+              },
+              {
+                path: 'dcwd',
+                component: () => import('@/views/ems/dzjk/tjbb/dcwd/index.vue'),
+                name: 'DzjkTjbbDcwd',
+                meta: { title: '电池温度',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
+              },
+              {
+                path: 'dbbb',
+                component: () => import('@/views/ems/dzjk/tjbb/dbbb/index.vue'),
+                name: 'DzjkTjbbDbbb',
+                meta: { title: '电表报表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
+              }
+            ]
+          },
+          {
+            path: '/dzjk/clpz',
+            component: () => import('@/views/ems/dzjk/clpz/index.vue'),
+            name: 'DzjkClpz',
+            meta: {title: '策略配置', breadcrumb: false, activeMenu: '/dzjk'},
+            redirect: '/dzjk/clpz/clyx',
+            children: [
+              {
+                path: 'clyx',
+                component: () => import('@/views/ems/dzjk/clpz/clyx/index.vue'),
+                name: 'DzjkClpzClyx',
+                meta: { title: '策略运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkClpz'},
+              },
+              {
+                path: 'xftg',
+                component: () => import('@/views/ems/dzjk/clpz/xftg/index.vue'),
+                name: 'DzjkClpzXftg',
+                meta: { title: '削峰填谷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkClpz'},
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
+
+
+

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,22 @@
+const ems = {
+  state: {
+    zdList:[],
+    workStatusOptions:{'0':'正常','1':'异常','2':'停止'},//工作状态
+    deviceStatusOptions:{'0':'在线','1':'离线','2':'维修中'},//设备状态
+    gridStatusOptions:{'0':'并网','1':'未并网'},//并网状态
+    controlModeOptions:{'0':'远程','1':'本地'},//控制模式
+    warnOptions:{0:'正常', 1:'中断', 2:'不在线',3:'异常'},//告警状态
+    communicationStatusOptions:{'0':'正常','1':'通讯中断','2':'异常'},//通讯状态
+    workModeOptions:{'0':'正常','1':'停止'},//工作模式
+    alarmLevelOptions:{'A':'提示','B':'一般','C':'严重','D':'紧急'},//告警等级
+    alarmStatusOptions:{'0':'待处理','1':'已处理','2':'处理中'},//告警状态
+    deviceTypeOptions:{'TCP':'TCP','RTU':'RTU'},//设备类型
+  },
+  mutations: {
+    SET_ZD_LIST(state, list) {
+      state.zdList = list || []
+    }
+  },
+}
+
+export default ems

src/views/ems/dzjk/clpz/ClContainer.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-container class="clyx-container">
+    <el-header class="clyx-header">
+      <div class="clyx-title">策略状态：<span class="clyx-status save">已运行</span></div>
+      <div class="clyx-btns">
+        <el-button v-if="!hideSettingBtn" size="small" @click="$refs.setting.dialogFormVisible = true">配置</el-button>
+        <el-button type="warning" class="alarm-btn" size="small" @click='close'>停止策略</el-button>
+      </div>
+    </el-header>
+    <el-main class="clyx-main">
+      <slot name="default"></slot>
+      <setting ref="setting"/>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import Setting from './Setting.vue'
+export default {
+  name:'DzjkClpzClContainer',
+  components:{Setting},
+  props:{
+    hideSettingBtn:{
+      type:Boolean,
+      default:false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods:{
+    close(){
+      this.$confirm('确认要停止策略吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            setTimeout(() => {
+              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
+              done();
+              // setTimeout(() => {
+              instance.confirmButtonLoading = false;
+              // }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在故障复位成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '停止策略成功!'
+        });
+      }).catch(() => {
+        //取消复位
+      });
+    }
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.clyx-container{
+  border:1px solid #eee;
+  .clyx-header{
+    background: #F1F5FB;
+    display: flex;
+    position: relative;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0;
+    height: 60px;
+    border-radius: 6px 6px 0 0;
+    .clyx-title{
+      color: #333333;
+      line-height: 20px;
+      padding: 0 50px 0 25px;
+      .clyx-status{
+        font-weight: 500;
+        font-size: 16px;
+        &.danger{
+          color:#FC6B69;
+        }
+        &.save{
+          color:#09ADA3;
+        }
+        &.keep{
+          color:#3C81FF;
+        }
+      }
+    }
+    .clyx-btns{
+      position: absolute;
+      right: 25px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+</style>

src/views/ems/dzjk/clpz/Setting.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-dialog
+    title="主从策略配置"
+    custom-class="ems-dialog"
+    :visible.sync="dialogFormVisible"
+    width="420px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="cancel"
+  >
+    <el-form :model="form" label-width="100px">
+      <el-form-item label="主策略">
+        <el-select v-model="form.main" placeholder="请选择">
+          <el-option label="主策略一" value="1"></el-option>
+          <el-option label="主策略二" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="辅助策略">
+        <el-select v-model="form.assis" placeholder="请选择">
+          <el-option label="辅助策略一" value="1"></el-option>
+          <el-option label="辅助策略二" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogFormVisible=false">取 消</el-button>
+      <el-button type="primary" :loading="loading" @click="sure">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+      loading:false,
+      dialogFormVisible:false,
+      form:{
+        main:'',
+        assis:''
+      }
+    }
+  },
+  methods:{
+    cancel(){
+      this.form.main='';
+      this.form.assis='';
+    },
+    sure(){
+      if(this.form.main===''||this.form.assis===''){
+        return this.$alert('请选择正确的策略');
+      }
+      this.loading = true
+      setTimeout(()=>{
+        this.loading = false
+        //如果接口调用成功 关闭弹窗
+        this.dialogFormVisible = false;
+      },3000)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/ems/dzjk/clpz/clyx/index.vue

@@ -0,0 +1,79 @@
+
+<template>
+ <cl-container>
+   <template v-slot:default>
+     <div class="cl-items cl-items-main">
+       <div class="cl-header">主策略</div>
+       <div class="cl-content">
+         <div class="cl-name">削峰填谷</div>
+       </div>
+     </div>
+     <div class="cl-items">
+       <div class="cl-header">辅助策略</div>
+       <div class="cl-content">
+         <div class="cl-name">需量控制</div>
+       </div>
+     </div>
+   </template>
+ </cl-container>
+</template>
+
+
+<script>
+import ClContainer from './../ClContainer.vue'
+export default {
+  name:'DzjkClpzClyx',
+  components:{ClContainer},
+  data() {
+    return {
+
+    }
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .clyx-main{
+    padding:0 12px 0 12px;
+    .cl-items{
+      width: 228px;
+      height: 156px;
+      display: inline-block;
+      margin:24px 12px 0 12px;
+      font-size:14px;
+      color:#333333;
+      border: 1px solid #eeeeee;
+      .cl-header{
+        background:  #FFE5AC;
+        text-align: center;
+        font-size:16px;
+        line-height: 40px;
+        height: 40px;
+        width: 100%;
+      }
+      .cl-content{
+        background-color: #ffffff;
+        position: relative;
+        height: 114px;
+        width: 100%;
+        .cl-name{
+          position: absolute;
+          top:50%;
+          left:50%;
+          transform: translate(-50%,-50%);
+        }
+      }
+      &.cl-items-main{
+        .cl-header{
+          background:  #FFBE29;
+        }
+        .cl-content{
+          background-color: #FFF2CB;
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="ems-dashboard-editor-container clpz-ems-dashboard-editor-container">
+    <el-menu
+      class="ems-third-menu"
+      :default-active="$route.name"
+      background-color="#ffffff"
+      text-color="#666666"
+      active-text-color="#ffffff"
+    >
+      <el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'clpzChildrenRoute'">
+        <router-link  style="height: 100%;width: 100%;display: block;" :to="{path:item.path,query:$route.query}">
+          {{item.meta.title}}
+        </router-link>
+      </el-menu-item>
+    </el-menu>
+
+    <div class="ems-content-container ems-content-container-padding clpz-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==='DzjkClpz').children//获取到统计报表下面的字路由
+console.log('设备监控子路由',childrenRoute)
+export default {
+  name:'DzjkClpz',
+  data(){
+    return {
+      childrenRoute,
+      activeMenu:''
+    }
+  },
+  mounted() {
+    console.log('当前统计报表页面路由',this.$route)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.clpz-ems-dashboard-editor-container{
+  display: flex;
+  padding:0;
+  background: #FFFFFF;
+}
+.clpz-ems-content-container{
+  margin-top:0;
+  padding-top:0;
+  padding-right: 0;
+  flex: 1;
+}
+</style>
+

src/views/ems/dzjk/clpz/xftg/AddTemplate.vue

@@ -0,0 +1,243 @@
+<template>
+    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑${editTempName}` ">
+      <el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item label="模板名称" prop="tempName">
+          <el-input v-model="formData.tempName" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="soc限制" prop="socStatus" required>
+          <el-switch v-model="formData.socStatus"></el-switch>
+        </el-form-item>
+        <el-form-item label="soc下限" prop="min">
+          <el-input v-model="formData.min" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
+        </el-form-item>
+        <el-form-item label="soc上限" prop="max">
+          <el-input v-model="formData.max" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-button type="primary" size="mini" @click="addTime">新增</el-button>
+<!--      新增时间段表单-->
+      <el-collapse-transition>
+          <el-card v-show="showAddTime" shadow="always" class="common-card-container" style="margin-top:25px;">
+            <el-form class="add-time-form transition-box" ref="addTimeForm" :model="formInline" :rules="formInlineRule" label-width="100px" style="margin-top:25px">
+            <el-form-item label="开始时间" prop="startTime">
+              <el-time-select
+                placeholder="开始时间"
+                v-model="formInline.startTime"
+                :picker-options="{
+                start: '00:00',
+                step: '01:00',
+                end: '23:00',
+              }">
+              </el-time-select>
+            </el-form-item>
+            <el-form-item label="结束时间" prop="endTime">
+              <el-time-select
+                placeholder="结束时间"
+                v-model="formInline.endTime"
+                :picker-options="{
+                start: '00:00',
+                step: '01:00',
+                end: '24:00',
+                minTime: formInline.startTime
+              }">
+              </el-time-select>
+            </el-form-item>
+            <el-form-item label="冲放功率" prop="cfgl">
+              <el-input v-model="formInline.cfgl" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="充电状态" prop="powerStatus">
+              <el-select v-model="formInline.powerStatus" placeholder="请选择">
+                <el-option v-for="(item,index) in powerStatusOptions" :key="index+'powerStatusOptions'" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="mini" @click="saveTime">保存</el-button>
+              <el-button size="mini" @click="cancelAddTime">取消</el-button>
+            </el-form-item>
+          </el-form>
+          </el-card>
+      </el-collapse-transition>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%;margin-top:25px">
+        <!--            todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
+        <el-table-column
+          prop="startTime"
+          label="开始时间">
+        </el-table-column>
+        <el-table-column
+          prop="endTime"
+          label="结束时间">
+        </el-table-column>
+        <el-table-column
+          prop="cfgl"
+          label="充放功率（kW）">
+        </el-table-column>
+        <el-table-column
+          prop="powerStatus"
+          label="充电状态">
+          <template slot-scope="scope">
+            {{scope.row.powerStatus === 1 ? '充电' :'放电'}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="120">
+          <template slot-scope="scope">
+            <el-button
+              @click.native.prevent="deleteRow(scope.$index, tableData)"
+              type="warning"
+              size="mini">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="saveDialog">确定</el-button>
+      </div>
+    </el-dialog>
+</template>
+<script>
+export default {
+  props:{
+    mode:{
+      type:String,
+      default:"add"
+    },
+    editTempId:{
+      type:Number,
+      default:''
+    },
+    editTempName:{
+      type:String,
+      default:''
+    }
+  },
+  data() {
+    return {
+      dialogTableVisible:false,
+      formData: {
+        tempName: '',
+        socStatus: false,
+        min: '',
+        max: '',
+      },
+      rules: {
+        tempName: [{
+          required: true,
+          message: '请输入',
+          trigger: 'blur'
+        }],
+        min: [{
+          required: true,
+          message: '请输入',
+          trigger: 'blur'
+        }],
+        max: [{
+          required: true,
+          message: '请输入',
+          trigger: 'blur'
+        }],
+      },
+      showAddTime: false,
+      formInline:{
+        startTime:'',endTime:'',cfgl:'',powerStatus:1
+      },
+      formInlineRule:{
+        startTime: [{
+          required: true,
+          message: '请选择开始时间',
+          trigger: 'change'
+        }],
+        endTime: [{
+          required: true,
+          message: '请选择结束时间',
+          trigger: 'change'
+        }],
+        cfgl: [{
+          required: true,
+          message: '请输入冲放功率',
+          trigger: 'blur'
+        }],
+      },
+      tableData:[],
+      powerStatusOptions:[{label:'充电',value:1},{label:'放电',value:2}],
+    }
+  },
+  computed: {},
+  watch: {
+    "formInline.startTime":{
+      handler(newVal,oldVal){
+        if(newVal && this.formInline.endTime){
+          const endTime = parseInt((this.formInline.endTime).split(':')[0] || 0)
+          const startTime =parseInt(newVal.split(':')[0])
+          if(endTime<=startTime){
+            this.formInline.endTime = `${startTime+1 <=9 ? '0'+(startTime+1) : startTime+1}:00`
+          }
+        }
+      },
+      deep:true
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    addTime(){
+      this.showAddTime=true
+    },
+    cancelAddTime(){
+      this.$refs.addTimeForm.resetFields()
+      this.showAddTime=false
+      this.formInline = {startTime:'',endTime:'',cfgl:'',powerStatus:1}
+    },
+    saveTime(){
+      //表单校验，校验成功，添加到tableData里
+      this.$refs.addTimeForm.validate(valid => {
+        if (!valid) return
+        this.tableData.push(JSON.parse(JSON.stringify(this.formInline)));
+        this.$nextTick(() => {this.cancelAddTime()})
+      })
+    },
+    deleteRow(index, table){
+      this.tableData.splice(index,1)
+    },
+    saveDialog() {
+      this.$refs.addTempForm.validate(valid => {
+        if (!valid) return
+        this.closeDialog()
+      })
+    },
+    closeDialog(){
+      // 清空所有数据
+      this.$refs.addTempForm.resetFields()
+      this.formData={
+        tempName: '',
+          socStatus: false,
+          min: '',
+          max: '',
+      }
+      this.tableData=[]
+      this.cancelAddTime()
+      this.dialogTableVisible=false
+    }
+  }
+}
+
+</script>
+<style scoped>
+.ems-dialog{
+  .el-dialog{
+    max-width: 700px;
+  }
+  .add-time-form{
+    .el-input{
+      width: 220px;
+    }
+  }
+}
+</style>

src/views/ems/dzjk/clpz/xftg/TempPowerChart.vue

@@ -0,0 +1,87 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding" style="margin-top:25px;">
+    <div slot="header">
+      <span class="card-title">策略模板曲线展示</span>
+    </div>
+    <div style="height: 360px" id="tempChart"/>
+  </el-card>
+</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
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#tempChart'))
+      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: ['01:00','02:00','03:00','05:00','06:00','07:00','08:00','09:00','10:00'],
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        series: [
+        {
+          name:'模板一',
+          data: [80,92,1,34,90,130,320,80,9,91],
+          type: 'line',
+        },{
+            name:'模板二',
+            data: [820,932,901,934,1290,1330,1320,820,932,901],
+            type: 'line',
+          }]
+      })
+    }
+  }
+}
+
+</script>

src/views/ems/dzjk/clpz/xftg/TempTable.vue

@@ -0,0 +1,159 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container">
+    <div slot="header">
+      <span class="card-title">新增模板</span>
+      <div style="float: right; padding: 3px 0">
+        <el-button type="primary" size="mini" @click="handlerType = 'add';$refs.addTemplate.dialogTableVisible=true">新增</el-button>
+        <el-button type="warning" size="mini" @click="handlerType = 'edit';$refs.addTemplate.dialogTableVisible=true">编辑</el-button>
+        <el-button type="primary" class="alarm-btn" size="mini" @click="deleteTemp">删除</el-button>
+      </div>
+    </div>
+    <div>
+      <el-button-group class="ems-btns-group">
+        <el-button v-for="(item,index) in tempList" :key="index+'tempList'" :class="{'activeBtn' : activeBtn === item.id}" type="small" @click="changeTemp(item.id)">{{item.name}}</el-button>
+      </el-button-group>
+      <el-table
+        :data="tableData"
+        :span-method="tableSpanFilter"
+        border
+        style="width: 100%;margin-top:25px;">
+        <!--            todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
+        <el-table-column
+          prop="name"
+          label="模板名称"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="status"
+          label="SOC限制">
+          <template slot-scope="scope">
+            <el-switch
+              :value="scope.row.status === 1"
+              disabled>
+            </el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="min"
+          label="SOC下限">
+          <template slot-scope="scope">
+            {{scope.row.min}}%
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="max"
+          label="SOC上限">
+          <template slot-scope="scope">
+            {{scope.row.max}}%
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="startTime"
+          label="开始时间">
+        </el-table-column>
+        <el-table-column
+          prop="endTime"
+          label="结束时间">
+        </el-table-column>
+        <el-table-column
+          prop="cfgl"
+          label="充放功率（kW）">
+        </el-table-column>
+        <el-table-column
+          prop="powerStatus"
+          label="充电状态">
+        </el-table-column>
+
+      </el-table>
+    </div>
+    <add-template ref="addTemplate" :mode="handlerType" :edit-temp-id="activeTempData.id" :edit-temp-name="activeTempData.name"/>
+  </el-card>
+</template>
+
+<script>
+import AddTemplate from "./AddTemplate.vue";
+export default {
+  components: {AddTemplate},
+  data() {
+    return {
+      handlerType:'',
+      activeBtn:1,
+      tempList:[
+        {name:'模板1',id:1},
+        {name:'模板2',id:2},
+        {name:'模板3',id:3},
+      ],
+      tableData:[
+        {name:'模板一',status:1,min:10,max:90,startTime:'2023/05/07',endTime:'2030/05/07',cfgl:100,powerStatus:'充电'},
+        {name:'模板一',status:1,min:10,max:90,startTime:'2024/06/07',endTime:'2030/05/07',cfgl:110,powerStatus:'充电'},
+        {name:'模板一',status:1,min:10,max:90,startTime:'2023/07/07',endTime:'2030/05/07',cfgl:120,powerStatus:'充电'},
+        {name:'模板一',status:1,min:10,max:90,startTime:'2023/08/07',endTime:'2030/05/07',cfgl:130,powerStatus:'充电'},
+        {name:'模板一',status:1,min:10,max:90,startTime:'2023/09/07',endTime:'2030/05/07',cfgl:140,powerStatus:'充电'},
+      ],
+      mixinPrototype:['name','status','min','max']
+    }
+  },
+  computed:{
+    activeTempData(){
+      return this.tempList.find(item=>item.id === this.activeBtn)
+    }
+  },
+  methods:{
+    deleteTemp(){
+      this.$confirm(`确认要删除${this.activeTempData.name}吗?`, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            setTimeout(() => {
+              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
+              done();
+              // setTimeout(() => {
+              instance.confirmButtonLoading = false;
+              // }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在故障复位成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+      }).catch(() => {
+        //取消复位
+      });
+    },
+    changeTemp(id){
+      //切换模板 更新数据
+      if(id !== this.activeBtn){
+        this.activeBtn=id;
+      }
+    },
+    tableSpanFilter({ row, column, rowIndex, columnIndex }){
+      if(!this.mixinPrototype.includes(column.property)) return { rowspan: 1,colspan: 1 }
+      if(rowIndex===0){
+        return {
+          rowspan: this.tableData.length,
+          colspan: 1
+        };
+      }else{
+        return {
+          rowspan: 0,
+          colspan: 0
+        }
+      }
+    }
+  },
+  mounted(){
+
+  }
+}
+</script>

src/views/ems/dzjk/clpz/xftg/TimeSetting.vue

@@ -0,0 +1,80 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container" style="margin-top:25px;">
+    <div slot="header">
+      <span class="card-title">策略配置：削峰填谷</span>
+      <div style="float: right; padding: 3px 0">
+        <el-button type="warning" size="mini">编辑</el-button>
+      </div>
+    </div>
+    <el-form :inline="true" class="select-container">
+      <el-form-item label="时间配置">
+        <el-select  v-model="timeType" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+          <el-option :label="item.name" :value="item.id" v-for="(item,index) in timeOptions" :key="index+'timeOptions'"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div style="padding:0 6px 12px 6px;">
+      <div class="cl-items" v-for="item in 12" :key="item+'lclf'">
+        <div class="cl-header">{{item}}月</div>
+        <div class="cl-content">
+          <div class="cl-name">两放两冲</div>
+        </div>
+      </div>
+    </div>
+
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+.cl-items{
+  width: 144px;
+  height: 90px;
+  line-height: 16px;
+  display: inline-block;
+  margin:12px 6px 0 6px;
+  font-size:14px;
+  color:#333333;
+  border: 1px solid #eeeeee;
+  .cl-header{
+    background:  #FFE5AC;
+    text-align: center;
+    font-size:16px;
+    line-height: 40px;
+    height: 40px;
+    width: 100%;
+  }
+  .cl-content{
+    background-color: #ffffff;
+    position: relative;
+    height: 48px;
+    width: 100%;
+    .cl-name{
+      position: absolute;
+      top:50%;
+      left:50%;
+      transform: translate(-50%,-50%);
+    }
+  }
+}
+</style>
+<script>
+export default {
+  data() {
+    return {
+      loading:false,
+      timeType:1,
+      timeOptions:[
+        {name:'按日',id:1},
+        {name:'按月',id:2},
+        {name:'按年',id:3},
+      ]
+    }
+  },
+  methods:{
+  },
+  mounted(){
+
+  }
+}
+</script>

src/views/ems/dzjk/clpz/xftg/index.vue

@@ -0,0 +1,46 @@
+
+<template>
+  <cl-container :hideSettingBtn="true">
+    <template v-slot:default>
+      <temp-table/>
+      <time-setting/>
+      <temp-power-chart/>
+    </template>
+  </cl-container>
+</template>
+
+
+<script>
+import ClContainer from './../ClContainer.vue'
+import TempTable from "./TempTable.vue";
+import TimeSetting from "./TimeSetting.vue";
+import TempPowerChart from "./TempPowerChart.vue";
+export default {
+  name:'DzjkClpzXftg',
+  components:{ClContainer,TempTable,TimeSetting,TempPowerChart},
+  data() {
+    return {
+
+    }
+  },
+  methods:{
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep{
+  .common-card-container .el-card__header{
+    padding:5px 20px;
+    height:44px;
+    .card-title{
+      line-height: 34px;
+    }
+  }
+}
+
+
+</style>

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

@@ -0,0 +1,237 @@
+
+<template>
+  <el-card  v-loading="loading" gshadow="always" class="common-card-container common-card-container-no-title-bg">
+    <!--    搜索栏-->
+    <el-form :inline="true" class="select-container">
+      <el-form-item label="设备类型">
+        <el-select v-model="search.deviceType" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+          <el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.deviceTypeOptions" :key="key+'deviceTypeOptions'"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="告警等级">
+        <el-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+          <el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions" :key="key+'alarmLevelOptions'"></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="primary" @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 style="margin:30px 0;">
+      <!--        二个选择按钮-->
+      <el-row style="">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <el-button-group class="ems-btns-group">
+            <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'" :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="deviceName"
+            width="200"
+            label="设备名称">
+          </el-table-column>
+          <el-table-column
+            label="告警等级"
+          >
+            <template slot-scope="scope">
+              <span>{{$store.state.ems.alarmLevelOptions[scope.row.alarmLevel]}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="alarmContent"
+            show-overflow-tooltip
+            label="告警内容">
+          </el-table-column>
+          <el-table-column
+            prop="alarmStartTime"
+            label="告警发生时间">
+            <template slot-scope="scope">
+              <span>{{formatDate(scope.row.alarmStartTime,true)}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="alarmEndTime"
+            label="告警结束时间">
+            <template slot-scope="scope">
+              <span>{{formatDate(scope.row.alarmEndTime,true)}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="状态">
+            <template slot-scope="scope">
+              <span :class="['0','2'].includes(scope.row.status) ? 'warning-status' : ''">{{$store.state.ems.alarmStatusOptions[scope.row.status]}}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      <el-pagination
+        v-show="tableData.length>0"
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalSize"
+        style="margin-top:15px;text-align: center"
+      >
+      </el-pagination>
+    </div>
+  </el-card>
+</template>
+
+
+<script>
+import {getAlarmDetailList} from'@/api/ems/dzjk'
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import { formatDate } from '@/filters/ems'
+export default {
+  name:'DzjkGzgj',
+  mixins:[getQuerySiteId],
+  data() {
+    return {
+      loading:false,
+      btnList:[
+        {name:'今日告警',id:'today'},
+        {name:'历史告警',id:'history'},
+      ],
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],//alarmStartTime,alarmEndTime
+      activeBtn:'today',
+      search:{deviceType:'',alarmLevel:''},
+      // 表格、分页
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
+    }
+  },
+  methods:{
+    formatDate,
+    // 判断是否是同一天
+    isSameDay(day1, day2) {
+      const date1 = new Date(day1),date2 = new Date(day2)
+      return date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate();
+    },
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
+    // 搜索
+    onSearch(){
+      this.pageNum =1//每次搜索从1开始搜索
+      const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
+      // 选中了时间范围
+      if(alarmStartTime && alarmStartTime){
+        // 如果选择的时间范围是今天
+        if(this.isSameDay(alarmStartTime,alarmEndTime) && this.isSameDay(alarmStartTime,new Date())){
+          this.activeBtn = 'today'
+        }else {
+          this.activeBtn = 'history'
+        }
+      }else{
+        //没有选择时间范围 还是按照选中的今日告警、历史告警查询
+      }
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.search={deviceType:'',alarmLevel:''}
+      this.dateRange=[]
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    // 切换今日、历史告警
+    changeDataType(id){
+      if(id !== this.activeBtn){
+        console.log('点击了不同的菜单，更新数据')
+        this.activeBtn=id;
+        const [alarmStartTime,alarmEndTime]=(this.dateRange || [])
+        // 切换到今日告警，如果已经选择了时间范围清空
+        if(alarmStartTime && alarmEndTime){
+          // 如果切换到了今日告警，时间范围不相等或者相等但是不是今天 清空时间选择范围
+          if(id === 'today' && !this.isSameDay(alarmStartTime,alarmEndTime) || (this.isSameDay(alarmStartTime,alarmEndTime) && !this.isSameDay(alarmStartTime,new Date()))){
+            this.dateRange = []
+          }else if(id === 'history' && this.isSameDay(alarmStartTime,alarmEndTime) && this.isSameDay(alarmStartTime,new Date())){
+            // 切换成历史告警，但是选择时间范围是当天，清空时间范围
+            this.dateRange = []
+          }
+        }
+        this.getData()
+      }
+    },
+    // 获取数据
+    getData(){
+      this.loading=true
+      const {deviceType,alarmLevel} = this.search
+      const {siteId,pageNum,pageSize,activeBtn} =this
+      const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
+      let start='',end = '',now =new Date()
+      if(activeBtn === 'today'){
+        start = end = now
+      }else{
+        if(alarmStartTime && alarmEndTime){
+          start = alarmStartTime
+          end = alarmEndTime
+        }else{
+          start=''
+          end = ''
+            // now
+          // end.setDate(end.getDate() - 1);
+        }
+      }
+      getAlarmDetailList({deviceType,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(start),alarmEndTime:formatDate(end)}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(() => {this.loading=false})
+    },
+    init(){
+      this.onReset()
+    },
+  },
+  mounted(){
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+  }
+}
+</script>
+

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

@@ -0,0 +1,148 @@
+
+<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'
+import {formatNumber} from "@/filters/ems";
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#nllzChart'))
+    },
+    setOption(data) {
+      const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
+      const source = [['日期','充电量','放电量']]
+      siteMonitorDataVo.forEach(item=>{
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+      })
+      this.chart.setOption({
+        title: [
+          // 右上角
+          {
+            text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
+            top: 10,
+            right: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 右下角
+          {
+            text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
+            bottom: 10,
+            right: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第一行
+          {
+            text: '储能',
+            bottom: 40,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第二行
+          {
+            text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
+            bottom: 26,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第三行
+          {
+            text: `可用电量：${formatNumber(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
+          // source: [['日期','充电量','放电量']]
+        },
+        series: [
+          {
+            name:'充电量',
+            type: 'line',
+          },{
+            name:'放电量',
+            type: 'line',
+          }]
+      })
+    }
+  }
+}
+
+</script>
+

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

@@ -0,0 +1,140 @@
+<template>
+  <div v-loading="loading">
+    <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 | formatNumber}}</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="{'circle warning-status' : scope.row.status !== 0}">{{ $store.state.ems.warnOptions[scope.row.status]}}</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";
+import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
+export default {
+  name:'DzjkSbjkHome',
+  computed: {
+    loader() {
+      return loader
+    }
+  },
+  components: {NllzChart},
+  mixins: [getQuerySiteId],
+  data() {
+    return {
+      loading:false,
+      sjglData:[{
+        title:'今日充电量（MWh）',
+        value:'',
+        attr:'dayChargedCap'
+      },{
+        title:'今日放电量（MWh）',
+        value:'',
+        attr:'dayDisChargedCap'
+      },{
+        title:'总充电量（MWh）',
+        value:'',
+        attr:'totalChargedCap'
+      },{
+        title:'总放电量（MWh）',
+        value:'',
+        attr:'totalDischargedCap'
+      }],
+      // todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
+      tableData:[]
+    }
+  },
+  methods:{
+    init(){
+      this.loading = true
+      getDzjkHomeView(this.siteId).then(response => {
+        const data = response?.data || {}
+        this.sjglData.forEach(item=>{
+          item.value =data[item.attr]
+        })
+        this.tableData = data?.siteMonitorHomeAlarmVo || []
+        this.$refs.nllzChart.setOption(data)
+      }).finally(() => {this.loading = false})
+    }
+  },
+}
+</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,68 @@
+
+
+<template>
+  <div class="ems-dashboard-editor-container">
+  <zd-select :get-list-by-store="true" :default-site-id="$route.query.siteId" @submitSite="submitSite"/>
+  <el-menu
+    class="ems-second-menu"
+    :default-active="$route.meta.activeSecondMenuName"
+    background-color="#1890ff"
+    text-color="#ffffff"
+    active-text-color="#ffffff"
+    mode="horizontal"
+  >
+    <el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
+      <router-link  style="height: 100%;width: 100%;display: block;padding:0 20px;" :to="{path:item.path,query:$route.query}">
+        {{item.meta.title}}
+      </router-link>
+    </el-menu-item>
+  </el-menu>
+  <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">
+  .dzjk-ems-content-container{
+    margin-top:0;
+  }
+</style>

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

@@ -0,0 +1,68 @@
+
+<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,value:formatNumber(data[item.attr])}" ></single-square-box>
+    </el-col>
+  </el-row>
+</template>
+
+
+<script>
+import SingleSquareBox from "@/components/Ems/SingleSquareBox/index.vue";
+import {formatNumber} from '@/filters/ems'
+export default {
+  components:{SingleSquareBox},
+  props:{
+    data:{
+      type:Object,
+      required:false,
+      default:()=>{return {}}
+    },
+  },
+  methods:{formatNumber},
+  data() {
+    return {
+      // 单个电站 四个方块数据
+      singleZdSqaure:[{
+        title:'实时有功功率（kW）',
+        value:'',
+        bgColor:'#FFF2CB',
+        attr:'totalActivePower'
+      },{
+        title:'实时无功功率（kVar）',
+        value:'',
+        bgColor:'#CBD6FF',
+        attr:'totalReactivePower'
+      },{
+        title:'电池堆SOC',
+        value:'',
+        bgColor:'#DCCBFF',
+        attr:'soc'
+      },{
+        title:'电池堆SOH',
+        value:'',
+        bgColor:'#FFD4CB',
+        attr:'soh'
+      },{
+        title:'今日充电量（kWh）',
+        value:'',
+        bgColor:'#FFD6F8',
+        attr:'dayChargedCap'
+      },{
+        title:'今日放电量（kWh）',
+        value:'',
+        bgColor:'#E1FFCA',
+        attr:'dayDisChargedCap'
+      }]
+    }
+  },
+
+}
+</script>
+
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,151 @@
+
+<template>
+  <div v-loading="loading">
+    <div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
+      <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">{{index+1}}#{{baseInfo.deviceName}}</span>
+        </div>
+          <div class="descriptions-main">
+            <el-descriptions direction="vertical" :column="3" :colon="false">
+              <el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1"  label="工作状态" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
+              <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
+              <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</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">{{baseInfo[item.attr] | formatNumber}} <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":style="{height:baseInfo.currentSoc+'%'}"></div>
+              </div>
+              <div class="process">当前SOC :  {{baseInfo.currentSoc}}%</div>
+            </div>
+          </div>
+        <el-table
+          class="common-table"
+          :data="baseInfo.batteryDataList"
+          stripe
+          style="width: 100%;margin-top:25px;">
+          <el-table-column
+            prop="dataName"
+            label="名称">
+            <template slot-scope="scope">
+              <span v-html="scope.row.dataName+'（'+unitObj[scope.row.dataName]+'）'"></span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="avgData"
+            label="单体平均值"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="minData"
+            label="单体最小值">
+          </el-table-column>
+          <el-table-column
+            prop="minDataID"
+            label="单体最小值ID">
+          </el-table-column>
+          <el-table-column
+            prop="maxData"
+            label="单体最大值">
+          </el-table-column>
+          <el-table-column
+            prop="maxDataID"
+            label="单体最大值ID">
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+    <el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
+  </div>
+
+</template>
+
+<script>
+import {getBMSBatteryCluster} from '@/api/ems/dzjk'
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+export default {
+  name:'DzjkSbjkBmsdcc',
+  mixins:[getQuerySiteId],
+  components:{},
+  data() {
+    return {
+      loading:false,
+      unitObj:{
+        '电压':'V',
+        '温度':'&#8451;',
+        'SOC':'%'
+      },
+      baseInfoList:[],
+      infoData:[
+        {label:'簇电压',attr:'clusterVoltage',unit:'V'},
+        {label:'可充电量',attr:'chargeableCapacity',unit:'kWh'},
+        {label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh'},
+        {label:'簇电流',attr:'clusterCurrent',unit:'A'},
+        {label:'可放电量',attr:'dischargeableCapacity',unit:'kWh'},
+        {label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh'},
+        {label:'SOH',attr:'soh',unit:'%'},
+        {label:'平均温度',attr:'averageTemperature',unit:'&#8451;'},
+        {label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;'},
+      ],
+    }
+  },
+  methods:{
+    init(){
+      this.loading = true
+      getBMSBatteryCluster(this.siteId).then(response => {
+        this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
+      }).finally(() => {this.loading = false})
+
+    }
+  }
+}
+</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,169 @@
+
+<template>
+  <div v-loading="loading">
+    <div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
+      <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">{{index+1}}#{{baseInfo.deviceName}}</span>
+        </div>
+        <div class="descriptions-main">
+          <el-descriptions direction="vertical" :column="3" :colon="false">
+            <el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</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">{{baseInfo[item.attr] | formatNumber}} <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" :style="{height:baseInfo.stackSoc+'%'}"></div>
+            </div>
+            <div class="process">当前SOC : {{baseInfo.stackSoc}}%</div>
+          </div>
+        </div>
+        <el-table
+          class="common-table"
+          :data="baseInfo.batteryDataList"
+          stripe
+          max-height="500"
+          style="width: 100%;margin-top:25px;">
+          <el-table-column
+            prop="clusterId"
+            label="簇号">
+          </el-table-column>
+          <el-table-column
+            label="簇电压"
+          >
+            <template slot-scope="scope">
+              <span>{{scope.row.clusterVoltage}} V</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="簇电流">
+            <template slot-scope="scope">
+              <span>{{scope.row.clusterCurrent}} A</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="簇SOC">
+            <template slot-scope="scope">
+              <span>{{scope.row.currentSoc}} %</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="maxVoltage"
+            label="单体最高电压">
+            <template slot-scope="scope">
+              <span>{{scope.row.maxCellVoltage}} V</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="minVoltage"
+            label="单体最低电压">
+            <template slot-scope="scope">
+              <span>{{scope.row.minCellVoltage}} V</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="单体最高温度">
+            <template slot-scope="scope">
+              <span>{{scope.row.maxCellTemp}} &#8451;</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="minTemperature"
+            label="单体最低温度">
+            <template slot-scope="scope">
+              <span>{{scope.row.minCellTemp}} &#8451;</span>
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </el-card>
+    </div>
+    <el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
+  </div>
+</template>
+
+<script>
+import {getBMSOverView} from '@/api/ems/dzjk'
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+export default {
+  name:'DzjkSbjkBmszl',
+  mixins:[getQuerySiteId],
+  data() {
+    return {
+      loading:false,
+      baseInfoList:[],
+      infoData:[
+        {label:'电池堆总电压',attr:'stackVoltage',unit:'V'},
+        {label:'可充电量',attr:'availableChargeCapacity',unit:'kWh'},
+        {label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh'},
+        {label:'电池堆总电流',attr:'stackCurrent',unit:'A'},
+        {label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh'},
+        {label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh'},
+        {label:'SOH',attr:'stackSoh',unit:'%'},
+        {label:'平均温度',attr:'operatingTemp',unit:'&#8451;'},
+        {label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;'},
+      ]
+    }
+  },
+  methods:{
+    init(){
+      this.loading=true;
+      getBMSOverView(this.siteId).then(response => {
+        this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
+      }).finally(() => {this.loading = false})
+    }
+
+  }
+}
+</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: 0;
+      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 v-loading="loading">
+        <el-card shadow="always" class="common-card-container" :class="zbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
+          <div slot="header">
+              <span class="large-title">1#总表</span>
+              <div class="status">
+                <div>{{$store.state.ems.communicationStatusOptions[zbInfo.emsCommunicationStatus]}}</div>
+                <div>数据更新时间：{{zbInfo.dataUpdateTime}}</div>
+              </div>
+          </div>
+          <el-table
+            class="common-table"
+            :data="zbInfo.ammeterDataDetailInfos"
+              stripe
+              style="width: 100%;">
+              <el-table-column
+                prop="category"
+                label="类别">
+              </el-table-column>
+              <el-table-column
+                prop="totalKwh"
+                label="总/kWh"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="sharpKwh"
+                label="尖/kWh">
+              </el-table-column>
+              <el-table-column
+                prop="peakKwh"
+                label="峰/kWh">
+              </el-table-column>
+              <el-table-column
+                prop="flatKwh"
+                label="平/kWh">
+              </el-table-column>
+              <el-table-column
+                prop="valleyKwh"
+                label="谷/kWh">
+              </el-table-column>
+            </el-table>
+        </el-card>
+        <el-card shadow="always" class="common-card-container" :class="cnbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
+          <div slot="header">
+            <span class="large-title">2#储能表</span>
+            <div class="status">
+              <div>{{$store.state.ems.communicationStatusOptions[cnbInfo.emsCommunicationStatus]}}</div>
+              <div>数据更新时间：{{cnbInfo.dataUpdateTime}}</div>
+            </div>
+          </div>
+          <el-table
+            class="common-table"
+            :data="cnbInfo.ammeterDataDetailInfos"
+            stripe
+            style="width: 100%;">
+            <el-table-column
+              prop="category"
+              label="类别">
+            </el-table-column>
+            <el-table-column
+              prop="totalKwh"
+              label="总/kWh"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="sharpKwh"
+              label="尖/kWh">
+            </el-table-column>
+            <el-table-column
+              prop="peakKwh"
+              label="峰/kWh">
+            </el-table-column>
+            <el-table-column
+              prop="flatKwh"
+              label="平/kWh">
+            </el-table-column>
+            <el-table-column
+              prop="valleyKwh"
+              label="谷/kWh">
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </div>
+</template>
+
+
+<script>
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getAmmeterDataList} from '@/api/ems/dzjk'
+export default {
+  name:'DzjkSbjkDb',
+  mixins:[getQuerySiteId],
+  data() {
+    return {
+      loading:false,
+      zbInfo:{},
+      cnbInfo:{},
+    }
+  },
+  methods:{
+    init(){
+      this.loading = true
+      getAmmeterDataList(this.siteId).then(response => {
+        this.zbInfo =JSON.parse(JSON.stringify(response?.data[0] || {}));
+        this.cnbInfo =JSON.parse(JSON.stringify(response?.data[1] || {}));
+      }).finally(() => {this.loading = false})
+    }
+  },
+  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,81 @@
+
+<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() {
+      const source = [['日期','电压','温度','SOC','SOH']]
+      source.push(['1月','12','13','14','15'],['2月','12','13','14','15'])
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
+        legend: {
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          type: 'category',
+        },
+        yAxis: {
+          type: 'value',
+        },
+        dataset:{
+          source
+          // source: [['日期','充电量','放电量']]
+        },
+        series: [
+          {
+            name:'电压',
+            type: 'bar',
+
+          },{
+            name:'温度',
+            type: 'bar',
+          },
+          {
+            name:'SOC',
+            type: 'bar',
+
+          },{
+            name:'SOH',
+            type: 'bar',
+          }]
+      })
+    }
+  },
+  mounted() {
+    this.initChart()
+  }
+}
+
+</script>

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

@@ -0,0 +1,175 @@
+
+<template>
+      <el-card v-loading="loading" shadow="always" class="common-card-container common-card-container-no-title-bg">
+        <div slot="header">
+          <span class="large-title">单体电池实时数据</span>
+        </div>
+      <!--    搜索栏-->
+      <el-form :inline="true" class="select-container">
+        <el-form-item label="电池堆">
+          <el-select v-model="search.stackId" placeholder="请选择" @change="changeStackId">
+            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in stackOptions" :key="index+'stackOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电池簇">
+          <el-select v-model="search.clusterId" :no-data-text="!search.stackId && stackOptions.length > 0 ? '请先选择电池堆':'无数据'" placeholder="请选择" :loading="clusterloading" loading-text="正在加载数据">
+            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in clusterOptions" :key="index+'clusterOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @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 style="margin:30px 0;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">-->
+<!--        <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-table
+          class="common-table"
+          :data="tableData"
+          stripe
+          style="width: 100%;margin-top: 25px">
+          <el-table-column
+            prop="deviceId"
+            label="单体编号">
+          </el-table-column>
+          <el-table-column
+            prop="clusterDeviceId"
+            label="簇号">
+          </el-table-column>
+          <el-table-column
+            prop="voltage"
+            label="电压（V）"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="temperature"
+            label="温度（℃）">
+          </el-table-column>
+          <el-table-column
+            prop="soc"
+            label="SOC（%）">
+          </el-table-column>
+          <el-table-column
+            prop="soh"
+            label="SOH（%）">
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          v-show="tableData.length>0"
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pageNum"
+          :page-size="pageSize"
+          :page-sizes="[10, 20, 30, 40]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalSize"
+          style="margin-top:15px;text-align: center"
+          >
+        </el-pagination>
+
+    </el-card>
+</template>
+
+
+<script>
+import BarChart from './BarChart'
+import {getStackNameList, getClusterNameList, getClusterDataInfoList} from '@/api/ems/dzjk'
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+export default {
+  name:'DzjkSbjkDtdc',
+  mixins:[getQuerySiteId],
+  components:{BarChart},
+  data() {
+    return {
+      loading:false,
+      clusterloading:false,
+      search:{stackId:'',clusterId:''},
+      stackOptions:[],//{id:'',deviceName:''}
+      clusterOptions:[],//{id:'',deviceName:''}
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
+    }
+  },
+  methods:{
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
+    // 搜索
+    onSearch(){
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getTableData()
+    },
+    // 重置
+    // 清空搜索栏选中数据
+    // 清空电池簇列表，保留电池堆列表
+    onReset(){
+      this.search={stackId:'',clusterId:''}
+      this.clusterOptions=[]
+      this.pageNum = 1
+      this.getTableData()
+    },
+    changeStackId(val){
+      if(val){
+        console.log('选择了电池堆，需要获取对应的电池簇',val,this.search.stackId)
+        this.search.clusterId=''
+        this.getClusterList()
+      }
+    },
+    //表格数据
+    getTableData(){
+      this.loading=true;
+      const {stackId:stackDeviceId,clusterId:clusterDeviceId} =this.search
+      const {siteId,pageNum,pageSize}=this
+      getClusterDataInfoList({stackDeviceId,clusterDeviceId,siteId,pageNum,pageSize}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(()=>{
+        this.loading=false;
+      })
+    },
+    getStackList(){
+      getStackNameList(this.siteId).then(response => {
+        this.stackOptions = JSON.parse(JSON.stringify(response?.data || []))
+      })
+    },
+    getClusterList(){
+      this.clusterloading =true
+      getClusterNameList(this.search.stackId).then(response => {
+        this.clusterOptions = JSON.parse(JSON.stringify(response?.data || []))
+      }).finally(() => {this.clusterloading =false})
+    },
+    init(){
+      // 只有页面初次加载或切换站点的时候调用电池堆列表，其他情况不需要
+      this.search={stackId:'',clusterId:''}//保证切换站点时，清空选择项
+      this.getStackList()
+      this.getTableData()
+    }
+  },
+  mounted(){
+
+
+  }
+}
+</script>
+

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

@@ -0,0 +1,57 @@
+<template>
+    <div class="ems-dashboard-editor-container sbjk-ems-dashboard-editor-container">
+    <el-menu
+      class="ems-third-menu"
+      :default-active="$route.name"
+      background-color="#ffffff"
+      text-color="#666666"
+      active-text-color="#ffffff"
+    >
+      <el-menu-item :index="item.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>
+      </el-menu-item>
+    </el-menu>
+    <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==='DzjkSbjk').children//获取到单站监控-设备监控下面的字路由
+console.log('设备监控子路由',childrenRoute)
+export default {
+  name:'DzjkSbjk',
+  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;
+}
+.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,208 @@
+
+<template>
+  <div class="pcs-ems-dashboard-editor-container" v-loading="loading">
+<!--    顶部六个方块-->
+    <real-time-base-info :data="runningHeadData"/>
+<!--    内容-->
+    <el-container class="pcs-container" v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'">
+<!--      背景颜色根据工作状态来展示-->
+      <el-header class="pcs-header" :class="pcsItem.workStatus === '1' ? 'warn' : pcsItem.workStatus === '2' ? 'close' : ''">
+        <div class="pcs-title">{{pcsItem.deviceName}}</div>
+        <div class="pcs-status">
+          <div>{{$store.state.ems.communicationStatusOptions[pcsItem.communicationStatus]}}</div>
+          <div>数据更新时间：{{pcsItem.dataUpdateTime}}</div>
+        </div>
+<!--        <div class="pcs-btns">-->
+<!--          <el-button type="warning" size="small" @click="problemSaved">故障复位</el-button>-->
+<!--          <el-button size="small" @click="machineClosed">关机</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 ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="并网状态">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="控制模式">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</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">{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
+          </el-descriptions>
+        </div>
+        <div class="descriptions-main" v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'">
+          <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="'支路'+(index+1)">{{item.dischargeStatus}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流功率">{{item.dcPower}}kW</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流电压">{{item.dcVoltage}}V</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流电流">{{item.dcCurrent}}A</el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </el-main>
+    </el-container>
+    <el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty>
+
+  </div>
+</template>
+
+<script>
+import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk'
+export default {
+  name:'DzjkSbjkPcs',
+  components:{RealTimeBaseInfo},
+  mixins:[getQuerySiteId],
+  data() {
+    return {
+      loading:false,
+      runningHeadData:{},//运行信息
+      pcsList:[],
+      infoData:[
+        {label:'总交流有功电率',attr:'totalActivePower',unit:'kW'},
+        {label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh'},
+        {label:'A相电压',attr:'aPhaseVoltage',unit:'V'},
+        {label:'A相电流',attr:'aPhaseCurrent',unit:'A'},
+        {label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar'},
+        {label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh'},
+        {label:'B相电压',attr:'bPhaseVoltage',unit:'V'},
+        {label:'B相电流',attr:'bPhaseCurrent',unit:'A'},
+        {label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA'},
+        {label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;'},
+        {label:'C相电压',attr:'cPhaseVoltage',unit:'V'},
+        {label:'C相电流',attr:'cPhaseCurrent',unit:'A'},
+        {label:'总交流功率因数',attr:'totalPowerFactor',unit:''},
+        {label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;'},
+        {label:'交流频率',attr:'acFrequency',unit:'Hz'}
+      ],
+      pcsBranchList:[],//pcs的支路列表
+    }
+  },
+  methods:{
+    problemSaved(){
+      this.$confirm('确认故障已复位?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            setTimeout(() => {
+              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
+              done();
+              // setTimeout(() => {
+              instance.confirmButtonLoading = false;
+              // }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在故障复位成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '故障复位成功!'
+        });
+      }).catch(() => {
+        //取消复位
+      });
+    },
+    machineClosed(){
+      this.$confirm('确认要关机吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            setTimeout(() => {
+              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
+              done();
+              // setTimeout(() => {
+              instance.confirmButtonLoading = false;
+              // }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在关机成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '关机成功!'
+        });
+      }).catch(() => {
+        //取消关机
+      });
+    },
+    //6个方块数据
+    getRunningHeadData(){
+      getRunningHeadInfo(this.siteId).then(response => {
+        this.runningHeadData = response?.data || {}
+      })
+    },
+    getPcsList(){
+      this.loading = true
+      getPcsDetailInfo(this.siteId).then(response => {
+        const data = response?.data || {}
+        this.pcsList = JSON.parse(JSON.stringify(data))
+      }).finally(()=>this.loading = false)
+    },
+    init(){
+      this.getRunningHeadData()
+      this.getPcsList()
+    }
+  },
+
+}
+</script>
+
+<style scoped lang="scss">
+.pcs-container{
+  margin-top: 25px;
+  border:1px solid #eeeeee;
+  border-radius: 6px 6px 0 0;
+  //红色标题
+  .pcs-header{
+    background: #05AEA3;
+    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%);
+    }
+  }
+  .pcs-header.warn{
+    background-color:#FC6B69 ;
+  }
+  .pcs-header.close{
+    background-color:#666666 ;
+  }
+}
+</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,45 @@
+
+<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 {
+  name:'DzjkSbjkSsyx',
+  components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
+  data() {
+    return {
+    }
+  },
+
+}
+</script>

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

@@ -0,0 +1,118 @@
+
+<template>
+    <div v-loading="loading">
+<!--      todo 判断条件是否需要更新-->
+      <div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
+        <div class="header">
+          <div class="header-title">{{item.systemName}}</div>
+          <div>工作模式：<span class="header-values">{{$store.state.ems.workModeOptions[item.workMode]}}</span></div>
+          <div>当前温度：<span class="header-values">{{item.currentTemperature}}&#8451;</span></div>
+        </div>
+        <div class="content">
+          <el-row>
+            <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">{{tempDataItem.title}}：{{item[tempDataItem.attr]}}&#8451;</el-col>
+          </el-row>
+        </div>
+      </div>
+      <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
+    </div>
+</template>
+
+
+<script>
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getCoolingDataList} from '@/api/ems/dzjk'
+export default {
+  name:'DzjkSbjkYl',
+  mixins:[getQuerySiteId],
+  data() {
+    return {
+      loading:false,
+      list:[],
+      tempData:[
+        {title:'制热开启点',attr:'heatingStartPoint'},
+        {title:'制冷开启点',attr:'coolingStartPoint'},
+        {title:'高温告警点',attr:'highTempAlarmPoint'},
+        {title:'制热停止点',attr:'heatingStopPoint'},
+        {title:'制冷停止点',attr:'coolingStopPoint'},
+        {title:'低温告警点',attr:'lowTempAlarmPoint'},
+
+      ]
+    }
+  },
+  methods:{
+    init(){
+      this.loading = true
+      getCoolingDataList(this.siteId).then(response => {
+        this.list =  JSON.parse(JSON.stringify(response?.data || []));
+      }).finally(() => {this.loading = false})
+    }
+  },
+  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,170 @@
+
+<template>
+  <div style="width:100%">
+    <!--    搜索栏-->
+    <el-form :inline="true" class="select-container">
+      <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="primary" @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>
+    <!--表格-->
+    <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">
+::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,156 @@
+
+<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="date"
+            range-separator="至"
+            start-placeholder="开始时间"
+            :picker-options="pickerOptions"
+            :default-value="defaultDateRange"
+            end-placeholder="结束时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @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 class="ems-btns-group">
+            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" :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(){
+    this.defaultDateRange =new Date();
+    this.initChart()
+    this.getData()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+}
+</script>
+

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

@@ -0,0 +1,139 @@
+
+<template>
+  <div>
+    <!--    搜索栏-->
+    <el-form :inline="true" class="select-container">
+      <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="primary" @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 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>
+

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

@@ -0,0 +1,158 @@
+
+<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="primary" @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 class="ems-btns-group">
+            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" :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>
+

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

@@ -0,0 +1,173 @@
+<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" v-loading="loading">
+      <!--    搜索栏-->
+      <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="primary" @click="getData" 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">{{totalChargedCap | formatNumber}}kWh</span></div>
+        <div>总放电量:<span class="point">{{totalDisChargedCap | formatNumber}}kWh</span></div>
+        <div>综合效率:<span class="point">{{efficiency | formatNumber}}%</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";
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getElectricData} from '@/api/ems/dzjk'
+import {formatDate} from '@/filters/ems'
+export default {
+  mixins: [resize,getQuerySiteId],
+  data() {
+    return {
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      loading:false,
+      chart: null,
+      totalChargedCap:'',
+      totalDisChargedCap:'',
+      efficiency:''
+    }
+  },
+  methods: {
+    // 重置
+    onReset(){
+      this.dateRange=[]
+      this.getData()
+    },
+    setOption(data){
+      const source = [['日期','充电量','放电量','效率']]
+      data.forEach(item=>{
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap,item.dailyEfficiency])
+      })
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF','#05AEA3'],
+        // legend: {
+        //   left: 'right',
+        //   bottom: '10',
+        // },
+        tooltip: {},
+        xAxis: { type: 'category' },
+        yAxis: [{
+          type: 'value',
+          name:'充电量/放电量kWh',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        },{
+          type: 'value',
+          name:'效率%',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        }],
+        grid:{top:40},
+        dataset:{
+          source
+        },
+        series: [
+          {
+            yAxisIndex:0,
+            type: 'bar',//柱状图
+          },
+          {
+            yAxisIndex:0,
+            type: 'bar',//柱状图
+          },
+          {
+            yAxisIndex:1,
+            type: 'line',//柱状图
+          },
+        ]
+      })
+    },
+    getData(){
+      this.loading=true;
+      //接口调用完成之后 设置图表、结束loading
+      const [start='',end='']=this.dateRange || [];
+      const startDate=formatDate(start),endDate = formatDate(end)
+      getElectricData({siteId:this.siteId,startDate,endDate}).then(response => {
+        const {totalChargedCap='',totalDisChargedCap='',efficiency='',sevenDayDisChargeStats=[]}=response?.data || {}
+        this.setOption(sevenDayDisChargeStats || [])
+        this.totalChargedCap=totalChargedCap
+        this.totalDisChargedCap=totalDisChargedCap
+        this.efficiency=efficiency
+      }).finally(() => {
+        this.loading=false;
+      })
+    },
+    init(){
+      this.chart = echarts.init(document.querySelector('#dlzbChart'));
+      this.onReset()
+    }
+  },
+  mounted(){
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+  },
+  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="primary" @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,58 @@
+<template>
+  <div class="ems-dashboard-editor-container tjbb-ems-dashboard-editor-container">
+    <el-menu
+      class="ems-third-menu"
+      :default-active="$route.name"
+      background-color="#ffffff"
+      text-color="#666666"
+      active-text-color="#ffffff"
+    >
+      <el-menu-item :index="item.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>
+      </el-menu-item>
+    </el-menu>
+
+    <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==='DzjkTjbb').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;
+}
+.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,158 @@
+
+<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="primary" @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 class="ems-btns-group">
+            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" :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>

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/site/sblb/index.vue

@@ -0,0 +1,197 @@
+
+<template>
+  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
+    <el-form :inline="true" class="select-container">
+        <el-form-item label="站点选择">
+          <el-select v-model="siteId" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
+          </el-select>
+        </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
+        <el-button @click="onReset" native-type="button">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      class="common-table"
+      :data="tableData"
+      stripe
+      max-height="600px"
+      style="width: 100%;margin-top: 25px">
+      <el-table-column
+        prop="siteId"
+        label="站点ID">
+      </el-table-column>
+      <el-table-column
+        prop="siteName"
+        label="站点名称">
+      </el-table-column>
+      <el-table-column
+        prop="deviceId"
+        label="设备ID"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="deviceName"
+        label="设备名称">
+      </el-table-column>
+      <el-table-column
+        prop="deviceType"
+        label="设备类型">
+      </el-table-column>
+      <el-table-column
+        prop="communicationStatus"
+        label="通信状态">
+        <template slot-scope="scope">
+          <span>{{$store.state.ems.communicationStatusOptions[scope.row.communicationStatus]}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="140">
+        <template slot-scope="scope">
+          <el-button
+            @click="toDetail(scope.row.deviceId)"
+            type="primary"
+            size="small">
+            查看详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-show="tableData.length>0"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageNum"
+      :page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalSize"
+      style="margin-top:15px;text-align: center"
+    >
+    </el-pagination>
+    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title=" 详细信息" :close-on-click-modal="false" :before-close="handleClosed">
+      <div class="descriptions-main" style="padding: 0" >
+        <el-descriptions direction="vertical" :column="2" :colon="false" border>
+          <el-descriptions-item v-for="item in detailData" labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" :label="item.label">{{item.value}}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {getDeviceInfoList,getDeviceDetailInfo} from'@/api/ems/site'
+import {getAllSites} from '@/api/ems/zddt'
+import {formatNumber} from "@/filters/ems";
+export default {
+  name: "Sblb",
+  data() {
+    return {
+      loading:false,
+      searchLoading:false,
+      siteId:'',
+      siteList:[],
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
+      dialogTableVisible:false,
+      detailData:[
+        {label:'设备ID',value:'',attr:'deviceId'},
+        {label:'设备名称',value:'',attr:'deviceName'},
+        {label:'设备类型',value:'',attr:'deviceType'},
+        {label:'通信状态',value:'',attr:'communicationStatus'},
+        {label:'TCP设备的IP地址',value:'',attr:'ipAddress'},
+        {label:'TCP端口号',value:'',attr:'ipPort'},
+        {label:'串口路径',value:'',attr:'serialPort'},
+        {label:'波特率',value:'',attr:'baudRate'},
+        {label:'数据位',value:'',attr:'dataBits'},
+        {label:'停止位',value:'',attr:'stopBits'},
+        {label:'校验位',value:'',attr:'parity'},
+        {label:'设备描述',value:'',attr:'description'},
+        {label:'设备类别',value:'',attr:'deviceCategory'},
+        {label:'上级设备ID',value:'',attr:'parentId'},
+        {label:'设备唯一标识符',value:'',attr:'deviceId'},
+      ],
+      detailformatAttr:{
+        'deviceType':'deviceTypeOptions',
+        'communicationStatus':'communicationStatusOptions',
+      }
+    }
+  },
+  methods:{
+    handleClosed(done){
+      this.detailData.forEach((item)=>{item.value = ''})
+      done()
+    },
+    toDetail(deviceId){
+      this.loading = true
+      getDeviceDetailInfo(deviceId).then(response => {
+        const data = response?.data || {};
+        this.detailData.forEach(item=>{
+          if(this.detailformatAttr[item.attr]){
+            item.value=formatNumber(this.$store.state.ems[this.detailformatAttr[item.attr]][data[item.attr]]);
+          }else{
+            item.value=formatNumber(data[item.attr]);
+          }
+
+        })
+        this.dialogTableVisible = true
+      }).finally(() => {this.loading = false})
+
+    },
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    // 搜索
+    onSearch(){
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.siteId=''
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=true
+      const {siteId,pageNum,pageSize} =this
+      getDeviceInfoList({siteId,pageNum,pageSize}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(() => {this.loading=false})
+    },
+    //获取站点列表
+    getZdList(){
+      this.searchLoading=true
+      getAllSites().then(response => {
+        this.siteList = response?.data || []
+      }).finally(() => {this.searchLoading=false})
+    }
+  },
+  mounted() {
+    this.onReset()
+    this.getZdList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/ems/site/zdlb/index.vue

@@ -0,0 +1,147 @@
+
+<template>
+  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
+    <el-form :inline="true" class="select-container">
+      <el-form-item label="站点名称">
+        <el-input
+          v-model="siteName"
+          placeholder="请输入"
+          clearable
+          style="width: 240px"
+        />
+      </el-form-item>
+      <el-form-item label="运营时间">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          :default-value="defaultDateRange"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
+        <el-button @click="onReset" native-type="button">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      class="common-table"
+      :data="tableData"
+      stripe
+      max-height="500px"
+      style="width: 100%;margin-top: 25px">
+      <el-table-column
+        prop="siteId"
+        label="站点ID">
+      </el-table-column>
+      <el-table-column
+        prop="siteName"
+        label="站点名称">
+      </el-table-column>
+      <el-table-column
+        prop="siteAddress"
+        label="站点地址"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="runningTime"
+        label="运营时间">
+      </el-table-column>
+      <el-table-column
+        prop="installPower"
+        label="装机功率">
+      </el-table-column>
+      <el-table-column
+        prop="installCapacity"
+        label="装机容量">
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-show="tableData.length>0"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageNum"
+      :page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalSize"
+      style="margin-top:15px;text-align: center"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import {getSiteInfoList} from '@/api/ems/site'
+import { formatDate } from '@/filters/ems'
+export default {
+  name: "Zdlb",
+  data() {
+    return {
+      loading:false,
+      siteName:"",
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],//startTime,endTime
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
+    }
+  },
+  methods:{
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    // 搜索
+    onSearch(){
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.siteName=''
+      this.dateRange=[]
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=true
+      const {siteName,pageNum,pageSize} =this
+      const [startTime='',endTime='']=(this.dateRange || [])
+      getSiteInfoList({siteName,pageSize,pageNum,startTime:formatDate(startTime),endTime:formatDate(endTime)}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(() => {this.loading=false})
+    },
+  },
+  mounted() {
+    this.onReset()
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/ems/ticket/AddTicket.vue

@@ -0,0 +1,110 @@
+<template>
+    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑todo 工单名称` " :close-on-click-modal="false" :show-close="false">
+      <el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item label="工单号" prop="gdh">
+          <el-input :disabled="mode !=='add'" v-model="formData.gdh" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="工单标题" prop="title" required>
+          <el-input v-model="formData.title" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="问题描述" prop="question" required>
+          <el-input v-model="formData.question" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="处理状态" prop="handleStatus">
+          <el-select v-model="formData.handleStatus" placeholder="请选择">
+            <el-option :label="value" :value="key" v-for="(value,key) in handleStatusOptions" :key="key+'handleStatusOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="提交人" prop="submitName" required>
+          <el-input v-model="formData.submitName" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="处理人" prop="handleName" required>
+          <el-input v-model="formData.handleName" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="提交时间" prop="submitTime" required>
+          <el-input v-model="formData.submitTime" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="saveDialog">确定</el-button>
+      </div>
+    </el-dialog>
+</template>
+<script>
+export default {
+  props:{
+    mode:{
+      type:String,
+      default:"add"
+    },
+//todo 修改数据时，从接口获取工单详情还是从列表中返回？
+  },
+  data() {
+    return {
+      dialogTableVisible:false,
+      handleStatusOptions:{'0':'处理完成','1':'处理中','2':'未处理'},
+      formData: {
+        gdh: '',//工单号
+        title: '',//工单标题
+        question: '',
+        handleStatus:'',
+        submitName:'',
+        handleName: '',
+        submitTime: '',
+      },
+      rules: {
+        gdh: [{
+          required: true,
+          message: '请输入',
+          trigger: 'blur'
+        }],
+      },
+    }
+  },
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    saveDialog() {
+      this.$refs.addTempForm.validate(valid => {
+        if (!valid) return
+        this.closeDialog()
+      })
+    },
+    closeDialog(){
+      // 清空所有数据
+      this.$refs.addTempForm.resetFields()
+      this.formData={
+        gdh: '',//工单号
+        title: '',//工单标题
+        question: '',
+        handleStatus:'',
+        submitName:'',
+        handleName: '',
+        submitTime: '',
+      }
+      this.dialogTableVisible=false
+    }
+  }
+}
+
+</script>
+<style scoped>
+.ems-dialog{
+  .el-dialog{
+    max-width: 700px;
+  }
+  .add-time-form{
+    .el-input{
+      width: 220px;
+    }
+  }
+}
+</style>

src/views/ems/ticket/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
+    <el-button type="primary" @click="addTicket" native-type="button">新增</el-button>
+    <el-table
+      class="common-table"
+      :data="tableData"
+      stripe
+      max-height="500px"
+      style="width: 100%;margin-top: 25px">
+      <el-table-column
+        prop="gdh"
+        label="工单号">
+      </el-table-column>
+      <el-table-column
+        prop="title"
+        label="工单标题"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="question"
+        min-width="300"
+        show-overflow-tooltip
+        label="问题描述">
+      </el-table-column>
+      <el-table-column
+        prop="handleStatus"
+        label="处理状态">
+      </el-table-column>
+      <el-table-column
+        prop="submitName"
+        label="提交人">
+      </el-table-column>
+      <el-table-column
+        prop="handleName"
+        label="处理人">
+      </el-table-column>
+      <el-table-column
+        prop="submitTime"
+        label="提交时间">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="150">
+        <template slot-scope="scope">
+          <el-button
+            @click="editTicket(scope.row.gdh)"
+            type="warning"
+            size="mini">
+            编辑
+          </el-button>
+          <el-button
+            @click="deleteTicket(scope.row)"
+            type="danger"
+            size="small">
+            废弃
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <add-ticket ref="addTicket" :mode="mode"/>
+  </div>
+</template>
+
+<script>
+// import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
+import AddTicket from './AddTicket.vue'
+export default {
+  name: "Ticket",
+  components: {AddTicket},
+  data() {
+    return {
+      mode:'',//新增、修改工单
+      editTicketId:'',
+      loading:false,
+      tableData:[
+        {gdh:'0001',title:'工单一',question:'问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述',handleStatus:'处理完成',submitName:'张三',handleName:'李四',submitTime:'2025/06/20'}
+      ]
+    }
+  },
+  methods:{
+    addTicket(){
+      this.mode = 'add';
+      this.$refs.addTicket.dialogTableVisible = true;
+    },
+    editTicket(id){
+      this.mode = 'add';
+      this.editTicketId = id
+      this.$refs.addTicket.dialogTableVisible = true;
+    },
+    deleteTicket(row){
+      console.log('表格行数据',row)
+      this.$confirm(`确认要废弃工单${row.title}吗?`, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            setTimeout(() => {
+              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
+              done();
+              // setTimeout(() => {
+              instance.confirmButtonLoading = false;
+              // }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在废弃成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '废弃成功!'
+        });
+        //调用接口 更新表格数据
+      }).catch(() => {
+        //取消关机
+      });
+    }
+  },
+}
+</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>

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,163 @@
+<template>
+  <div class="ems-dashboard-editor-container" v-loading="loading">
+    <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 ref="zdSelect" @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 | formatNumber }}</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 {
+      loading:false,
+      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:'installPower'
+      },{
+        title:'装机容量',
+        value:'',
+        attr:'installCapacity',
+      }]
+    }
+  },
+  methods:{
+    // 站点选中
+    submitSite(id){
+      if(this.singleSiteId === id){return console.log(`点击搜索按钮 搜索相同的站点id= ${id}不再调用获取基本信息接口`)}
+      this.loading=true
+      console.log('点击搜索按钮 选中的站点id',id)
+      this.singleSiteId = id
+      this.$refs.zdSelect.searchLoading = true
+      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]
+        })
+        this.singleZdInfo.forEach(item=>{
+          item.value = res[item.attr]
+        })
+        this.$refs.barChart.setOption(res?.sevenDayDisChargeStats || [])
+        this.$refs.mapChart.setOption([{name:this.singleSiteName,value:this.singleSiteLocation}])
+      }).finally(() => {this.$refs.zdSelect.searchLoading = false;this.loading=false})
+    },
+    //跳转单站监控页面
+    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>

src/views/login.vue

@@ -56,7 +56,7 @@
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2018-2025 xzzn All Rights Reserved.</span>
+      <span>Copyright © 2025 上海电动工具研究所（集团）有限公司.</span>
     </div>
   </div>
 </template>
@@ -162,7 +162,7 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("../assets/images/ems/login-background.png");
   background-size: cover;
 }
 .title {

src/views/register.vue

@@ -61,7 +61,7 @@
     </el-form>
     <!--  底部  -->
     <div class="el-register-footer">
-      <span>Copyright © 2018-2025 xzzn All Rights Reserved.</span>
+      <span>Copyright © 2018-2025 上海电动工具研究所（集团）有限公司.</span>
     </div>
   </div>
 </template>
@@ -153,7 +153,7 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("../assets/images/ems/login-background.png");
   background-size: cover;
 }
 .title {