概率统计-电量指标接口联调，站点信息6个方块样式调整

.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

@@ -7,3 +7,88 @@ export function getDzjkHomeView(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/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/assets/styles/common.scss

@@ -110,3 +110,60 @@
     }
   }
 }
+
+//二、三级菜单栏样式
+.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/components/Ems/SingleSquareBox/index.vue

@@ -2,7 +2,7 @@
 <template>
   <el-card shadow="always" class="single-square-box" :style="{background: 'linear-gradient(180deg, '+data.bgColor+' 0%,rgba(255,255,255,0) 100%)'}">
     <div class="single-square-box-title">{{ data.title }}</div>
-    <div class="single-square-box-value">{{ data.value }}</div>
+    <div class="single-square-box-value">{{ data.value | formatNumber }}</div>
   </el-card>
 </template>
 

src/components/Ems/ZdBaseInfo/index.vue

@@ -4,7 +4,7 @@
   <el-row type="flex" >
     <el-card shadow="hover" class="card common-card-container-body-no-padding" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
       <div class="info">{{ item.title }}</div>
-      <div class="num">{{item.num}}</div>
+      <div class="num">{{item.num | formatNumber}}</div>
     </el-card>
   </el-row>
 </template>
@@ -23,13 +23,13 @@ export default {
         title:'装机功率（MW）',
         num:'',
         color:'#3C81FF',
-        attr:'installedPower'
+        attr:'installPower'
 
       },{
         title:'装机容量（MW）',
         num:'',
         color:'#5AC7C0',
-        attr:'installedCap'
+        attr:'installCapacity'
 
       },{
         title:'总充电量（MWh）',
@@ -49,14 +49,14 @@ export default {
   methods: {
     setData(res = {}){
       this.data.forEach((item)=>{
-        item.num =(res[item.attr] || res[item.attr] === 0) ? res[item.attr] : '—'
+        item.num =res[item.attr]
       })
     }
   },
   mounted() {
     getSiteTotalInfo().then(response => {
       console.log('单个站点基本信息返回数据',response)
-      this.setData(response.data || {})
+      this.setData(response?.data || {})
     }).catch(()=>{
       this.setData({})
     })
@@ -65,11 +65,13 @@ export default {
 </script>
 <style scoped lang="scss">
 .card{
-  width: 150px;
+  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;

src/components/Ems/ZdSelect/index.vue

@@ -3,12 +3,12 @@
   <div class="zd-select-container">
     <el-form :inline="true">
       <el-form-item label="站点选择">
-        <el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="change">
+        <el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据">
-          <el-option :label="item.siteName" :value="item.id" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
+          <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="warning" @click="onSubmit">搜索</el-button>
+        <el-button type="primary" :loading="searchLoading" @click="onSubmit">搜索</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -28,7 +28,7 @@ import {mapGetters} from "vuex"
         required:false
       },
       defaultSiteId:{//默认展示的站点ID
-        type:String|Number,
+        type:String,
         default:'',
         required:false
       }
@@ -37,6 +37,7 @@ import {mapGetters} from "vuex"
       return {
         id:'',
         loading:false,
+        searchLoading:false,
         siteList:[],
       }
     },
@@ -47,15 +48,12 @@ import {mapGetters} from "vuex"
       onSubmit(){
         this.$emit('submitSite',this.id)
       },
-      change(id){
-        this.$emit('changeSite',id)
-      },
       setDefaultSite(){
-        const defaultSite = parseInt(this.defaultSiteId)
+        const defaultSite = this.defaultSiteId
-        if(defaultSite && this.siteList.find(item=>item.id === defaultSite)){
+        if(defaultSite && this.siteList.find(item=>item.siteId === defaultSite)){
           this.id = defaultSite
         }else if(!defaultSite && this.siteList.length>0){
-          this.id = this.siteList[0].id
+          this.id = this.siteList[0].siteId
         }
         this.$emit('submitSite',this.id)
       },
@@ -64,11 +62,12 @@ import {mapGetters} from "vuex"
           this.siteList = response.data || []
           console.log("获取站点列表返回数据",response,this.siteList)
           this.setDefaultSite()
-        }).finally(() => {this.loading=false})
+        }).finally(() => {this.loading=false;this.searchLoading=false})
       }
     },
     mounted(){
       this.loading=true
+      this.searchLoading=true
       this.$nextTick(()=>{
         if(this.getListByStore){
           if(this.zdList.length === 0){
@@ -79,6 +78,7 @@ import {mapGetters} from "vuex"
           }else{
             this.siteList = this.zdList
             this.loading=false
+            this.searchLoading=false
             console.log("从store中获取站点列表数据",this.zdList,this.siteList)
             this.setDefaultSite()
           }

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/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" />
+        <img :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+<!--        <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" />
+        <img :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+<!--        <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;
+      width: 100%;
-      height: 32px;
+      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/router/ems.js

@@ -40,108 +40,129 @@ export const dzjk=[
           {
             path: '/dzjk/home',
             component: () => import('@/views/ems/dzjk/home/index.vue'),
-            name: 'DjzkHome',
+            name: 'DzjkHome',
-            meta: { title: '首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkHome' }
+            meta: { title: '首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkHome' }
           },
           {
             path: '/dzjk/sbjk',
             component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
-            name: 'DjzkSbjk',
+            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: 'DjzkSbjkSsyx',
+                name: 'DzjkSbjkSsyx',
-                meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'pcs',
                 component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'),
-                name: 'DjzkSbjkPcs',
+                name: 'DzjkSbjkPcs',
-                meta: { title: 'Pcs',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                meta: { title: 'PCS',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'bmszl',
                 component: () => import('@/views/ems/dzjk/sbjk/bmszl/index.vue'),
-                name: 'DjzkSbjkBmszl',
+                name: 'DzjkSbjkBmszl',
-                meta: { title: 'BMS总览',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                meta: { title: 'BMS总览',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'bmsdcc',
                 component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'),
-                name: 'DjzkSbjkBmsdcc',
+                name: 'DzjkSbjkBmsdcc',
-                meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'dtdc',
                 component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'),
-                name: 'DjzkSbjkDtdc',
+                name: 'DzjkSbjkDtdc',
-                meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'db',
                 component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'),
-                name: 'DjzkSbjkDb',
+                name: 'DzjkSbjkDb',
-                meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'yl',
                 component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'),
-                name: 'DjzkSbjkYl',
+                name: 'DzjkSbjkYl',
-                meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               }
             ]
           },
           {
             path: '/dzjk/gzgj',
             component: () => import('@/views/ems/dzjk/gzgj/index.vue'),
-            name: 'DjzkGzgj',
+            name: 'DzjkGzgj',
-            meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkGzgj' }
+            meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkGzgj' }
           },
           {
             path: '/dzjk/tjbb',
             component: () => import('@/views/ems/dzjk/tjbb/index.vue'),
-            name: 'DjzkTjbb',
+            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: 'DjzkTjbbGltj',
+                name: 'DzjkTjbbGltj',
-                meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
               },
               {
                 path: 'glqx',
                 component: () => import('@/views/ems/dzjk/tjbb/glqx/index.vue'),
-                name: 'DjzkTjbbGlqx',
+                name: 'DzjkTjbbGlqx',
-                meta: { title: '功率曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                meta: { title: '功率曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
               },
               {
                 path: 'pcsqx',
                 component: () => import('@/views/ems/dzjk/tjbb/pcsqx/index.vue'),
-                name: 'DjzkTjbbPcsqx',
+                name: 'DzjkTjbbPcsqx',
-                meta: { title: 'Pcs曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                meta: { title: 'PCS曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
               },
               {
                 path: 'dcdqx',
                 component: () => import('@/views/ems/dzjk/tjbb/dcdqx/index.vue'),
-                name: 'DjzkTjbbDcdqx',
+                name: 'DzjkTjbbDcdqx',
-                meta: { title: '电池堆曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                meta: { title: '电池堆曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
               },
               {
                 path: 'dcwd',
                 component: () => import('@/views/ems/dzjk/tjbb/dcwd/index.vue'),
-                name: 'DjzkTjbbDcwd',
+                name: 'DzjkTjbbDcwd',
-                meta: { title: '电池温度',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                meta: { title: '电池温度',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
               },
               {
                 path: 'dbbb',
                 component: () => import('@/views/ems/dzjk/tjbb/dbbb/index.vue'),
-                name: 'DjzkTjbbDbbb',
+                name: 'DzjkTjbbDbbb',
-                meta: { title: '电表报表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                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/store/modules/ems.js

@@ -1,6 +1,16 @@
 const ems = {
   state: {
-    zdList:[]
+    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) {

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

@@ -1,17 +1,16 @@
 
 <template>
-  <el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
+  <el-card  v-loading="loading" gshadow="always" class="common-card-container common-card-container-no-title-bg">
     <!--    搜索栏-->
-    <div class="select-container">
+    <el-form :inline="true" class="select-container">
-      <el-form :inline="true">
       <el-form-item label="设备类型">
-          <el-select v-model="search.sblx" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+        <el-select v-model="search.deviceType" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-            <el-option :label="item.name" :value="item.id" v-for="(item,index) in sblxOptions" :key="index+'sblxOptions'"></el-option>
+          <el-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.gjdj" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+        <el-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-            <el-option :label="item.name" :value="item.id" v-for="(item,index) in gjdjOptions" :key="index+'gjdjOptions'"></el-option>
+          <el-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="时间选择">
@@ -26,19 +25,18 @@
         </el-date-picker>
       </el-form-item>
       <el-form-item>
-          <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
+        <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>
+          <el-button-group class="ems-btns-group">
-            <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+            <el-button 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>
@@ -50,7 +48,7 @@
           max-height="500"
           style="width: 100%;margin-top:25px;">
           <el-table-column
-            prop="name"
+            prop="deviceName"
             width="200"
             label="设备名称">
           </el-table-column>
@@ -58,43 +56,66 @@
             label="告警等级"
           >
             <template slot-scope="scope">
-              <span>{{scope.row.gjdj}}</span>
+              <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>{{scope.row.gjnr}}</span>
+              <span>{{formatDate(scope.row.alarmStartTime,true)}}</span>
             </template>
           </el-table-column>
           <el-table-column
-            prop="startTime"
+            prop="alarmEndTime"
-            label="告警发生时间">
-          </el-table-column>
-          <el-table-column
-            prop="finishTime"
             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="scope.row.status === 2 ? 'warning-status' : ''">{{scope.row.status === 2 ? '告警中' :'已结束'}}</span>
+              <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:'yesterday'},
+        {name:'历史告警',id:'history'},
       ],
       pickerOptions:{
         disabledDate(time) {
@@ -102,52 +123,109 @@ export default {
         },
       },
       defaultDateRange:[],//默认展示的时间
-      dateRange:[],
+      dateRange:[],//alarmStartTime,alarmEndTime
       activeBtn:'today',
-      loading:false,
+      search:{deviceType:'',alarmLevel:''},
-      search:{sblx:'',gjdj:''},
+      // 表格、分页
-      sblxOptions:[
+      tableData:[],
-        {name:'类型一',id:1},
+      pageSize:10,//分页栏当前每个数据总数
-        {name:'类型二',id:2},
+      pageNum:1,//分页栏当前页数
-        {name:'类型三',id:3},
+      totalSize:0,//table表格数据总数
-      ],
-      gjdjOptions:[
-        {name:'等级一',id:1},
-        {name:'等级二',id:2},
-      ],
-      tableData:[
-        {name:'告警一',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
-        {name:'告警二',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2},
-        {name:'告警三',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
-        {name:'告警四',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2}
-      ]
     }
   },
   methods:{
+    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(){
+      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.dcd=''
+      this.search={deviceType:'',alarmLevel:''}
-      this.search.dcc=''
+      this.dateRange=[]
       this.getData()
     },
-    // 获取数据
+    // 切换今日、历史告警
-    getData(){
-      this.loading=false
-    },
     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(){
-    this.getData()
     const now = new Date();
     const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
     this.defaultDateRange = [lastMonth, now];
@@ -155,16 +233,3 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-.select-container{
-  .el-form--inline .el-form-item{
-    margin-right: 20px;
-  }
-}
-.activeBtn{
-  background-color: #FFF2CB;
-  border-color: #FFF2CB;
-  color: #666666;
-  font-weight: 600;
-}
-</style>

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

@@ -15,6 +15,7 @@
 <script>
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
+import {formatNumber} from "@/filters/ems";
 
 export default {
   mixins: [resize],
@@ -36,7 +37,7 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart(data) {
+    initChart() {
       this.chart = echarts.init(document.querySelector('#nllzChart'))
     },
     setOption(data) {
@@ -45,12 +46,11 @@ export default {
       siteMonitorDataVo.forEach(item=>{
         source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
       })
-      const filterValue=(num)=>{return num || num === 0 ? num : '-'}
       this.chart.setOption({
         title: [
           // 右上角
           {
-            text: `电网 实时功率：${filterValue(gridNrtPower)} kW`,
+            text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
             top: 10,
             right: 10,
             textStyle:{
@@ -60,7 +60,7 @@ export default {
           },
           // 右下角
           {
-            text: `负载 实时功率：${filterValue(loadNrtPower)} kW`,
+            text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
             bottom: 10,
             right: 10,
             textStyle:{
@@ -80,7 +80,7 @@ export default {
           },
           // 左下角第二行
           {
-            text: `实时功率：${filterValue(energyStorageNrtPower)} kW`,
+            text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
             bottom: 26,
             left: 10,
             textStyle:{
@@ -90,7 +90,7 @@ export default {
           },
           // 左下角第三行
           {
-            text: `可用电量：${filterValue(energyStorageAvailElec)} kWh`,
+            text: `可用电量：${formatNumber(energyStorageAvailElec)} kWh`,
             bottom: 10,
             left: 10,
             textStyle:{
@@ -129,6 +129,7 @@ export default {
         },
         dataset:{
           source
+          // source: [['日期','充电量','放电量']]
         },
         series: [
           {

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <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">
@@ -10,7 +10,7 @@
             <el-row :gutter="20">
               <el-col :span="12" v-for="(item,index) in sjglData" :key="index+'sjglData'" class="sjgl-data">
                   <div class="sjgl-title">{{item.title}}</div>
-                  <div class="sjgl-value">{{item.value}}</div>
+                  <div class="sjgl-value">{{item.value | formatNumber}}</div>
               </el-col>
             </el-row>
           </div>
@@ -37,7 +37,7 @@
                 label="状态"
                 >
                   <template slot-scope="scope">
-                    <span class="warning-status circle">{{ scope.row.status === 0 ? '中断':'todo不是0是什么告警'}}</span>
+                    <span :class="{'circle warning-status' : scope.row.status !== 0}">{{ $store.state.ems.warnOptions[scope.row.status]}}</span>
                   </template>
               </el-table-column>
               <el-table-column
@@ -57,23 +57,19 @@
 <script>
 import {getDzjkHomeView} from '@/api/ems/dzjk'
 import NllzChart from "./NllzChart.vue";
+import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
 export default {
-  components: {NllzChart},
+  name:'DzjkSbjkHome',
-  watch: {
+  computed: {
-    '$route.query':{
+    loader() {
-      handler (newQuery,oldQuery) {
+      return loader
-          // 参数变化处理
-          console.log('单站监控=>首页=>页面地址发生变化',newQuery,oldQuery)
-          this.$nextTick(() => {
-            const {siteId} =newQuery
-              siteId && this.getData(newQuery.siteId)
-          })
-      },
-      immediate: true,
     }
   },
+  components: {NllzChart},
+  mixins: [getQuerySiteId],
   data() {
     return {
+      loading:false,
       sjglData:[{
         title:'今日充电量（MWh）',
         value:'',
@@ -96,15 +92,16 @@ export default {
     }
   },
   methods:{
-    getData(siteId){
+    init(){
-      getDzjkHomeView(siteId).then(response => {
+      this.loading = true
-        const data = response.data || {}
+      getDzjkHomeView(this.siteId).then(response => {
+        const data = response?.data || {}
         this.sjglData.forEach(item=>{
-          item.value = (data[item.attr] || data[item.attr] === 0) ? data[item.attr] : '-'
+          item.value =data[item.attr]
         })
         this.tableData = data?.siteMonitorHomeAlarmVo || []
         this.$refs.nllzChart.setOption(data)
-      })
+      }).finally(() => {this.loading = false})
     }
   },
 }

src/views/ems/dzjk/index.vue

@@ -3,14 +3,20 @@
 <template>
   <div class="ems-dashboard-editor-container">
   <zd-select :get-list-by-store="true" :default-site-id="$route.query.siteId" @submitSite="submitSite"/>
-<!--  这里是单站监控的二级菜单栏 需要循环拿到数据 显示在页面上-->
+  <el-menu
-    <div class="router-container">
+    class="ems-second-menu"
-      <div class="route-link" :class="{'active':item.name === $route.meta.activeSecondMenuName}" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
+    :default-active="$route.meta.activeSecondMenuName"
-        <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
+    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>
-      </div>
+    </el-menu-item>
-    </div>
+  </el-menu>
   <div class="ems-content-container ems-content-container-padding dzjk-ems-content-container">
     <keep-alive>
       <router-view></router-view>
@@ -56,23 +62,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .router-container{
-    display: flex;
-    .route-link{
-      width: 104px;
-      height: 40px;
-      line-height: 40px;
-      background-color: #FFBE29 ;
-      color: #666666;
-      font-size: 14px;
-      text-align: center;
-    }
-    .route-link.active{
-      background-color: #ffffff;
-      color: #333333;
-      font-weight: 500;
-    }
-  }
   .dzjk-ems-content-container{
     margin-top:0;
   }

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

@@ -3,7 +3,7 @@
   <!--  6个方块-->
   <el-row :gutter="10">
     <el-col :xs="12" :sm="8" :lg="4"  class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
-      <single-square-box :data="item"></single-square-box>
+      <single-square-box :data="{...item,value:formatNumber(data[item.attr])}" ></single-square-box>
     </el-col>
   </el-row>
 </template>
@@ -11,36 +11,50 @@
 
 <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:'22.74',
+        value:'',
-        bgColor:'#FFF2CB'
+        bgColor:'#FFF2CB',
+        attr:'totalActivePower'
       },{
         title:'实时无功功率（kVar）',
-        value:'22.74',
+        value:'',
-        bgColor:'#CBD6FF'
+        bgColor:'#CBD6FF',
+        attr:'totalReactivePower'
       },{
-        title:'电池催SOC',
+        title:'电池堆SOC',
-        value:'22.74',
+        value:'',
-        bgColor:'#DCCBFF'
+        bgColor:'#DCCBFF',
+        attr:'soc'
       },{
         title:'电池堆SOH',
-        value:'22.74',
+        value:'',
-        bgColor:'#FFD4CB'
+        bgColor:'#FFD4CB',
+        attr:'soh'
       },{
         title:'今日充电量（kWh）',
-        value:'22.74',
+        value:'',
-        bgColor:'#FFD6F8'
+        bgColor:'#FFD6F8',
+        attr:'dayChargedCap'
       },{
         title:'今日放电量（kWh）',
-        value:'22.74',
+        value:'',
-        bgColor:'#E1FFCA'
+        bgColor:'#E1FFCA',
+        attr:'dayDisChargedCap'
       }]
     }
   },

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

@@ -1,118 +1,109 @@
 
 <template>
-  <div>
+  <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">1#电池簇</span>
+          <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 keep" :span="1" label="工作状态" >放电</el-descriptions-item>
+              <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通信">正常</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通信">正常</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">{{item.value}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
+              <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"></div>
+                <div class="process-line":style="{height:baseInfo.currentSoc+'%'}"></div>
               </div>
-            <div class="process">当前SOC : 25%</div>
+              <div class="process">当前SOC :  {{baseInfo.currentSoc}}%</div>
             </div>
           </div>
-    </el-card>
         <el-table
           class="common-table"
-        :data="tableData"
+          :data="baseInfo.batteryDataList"
           stripe
-        max-height="500"
           style="width: 100%;margin-top:25px;">
           <el-table-column
-          prop="name"
+            prop="dataName"
-          width="190"
+            label="名称">
-          label="簇号">
+            <template slot-scope="scope">
+              <span v-html="scope.row.dataName+'（'+unitObj[scope.row.dataName]+'）'"></span>
+            </template>
           </el-table-column>
           <el-table-column
-          label="簇电压"
+            prop="avgData"
+            label="单体平均值"
           >
-          <template slot-scope="scope">
-            <span>{{scope.row.voltage}} V</span>
-          </template>
           </el-table-column>
           <el-table-column
-          label="簇电流">
+            prop="minData"
-          <template slot-scope="scope">
+            label="单体最小值">
-            <span>{{scope.row.electric}} A</span>
-          </template>
           </el-table-column>
           <el-table-column
-          label="簇SOC">
+            prop="minDataID"
-          <template slot-scope="scope">
+            label="单体最小值ID">
-            <span>{{scope.row.soc}} %</span>
-          </template>
           </el-table-column>
           <el-table-column
-          prop="maxVoltage"
+            prop="maxData"
-          label="单体最高电压">
+            label="单体最大值">
-          <template slot-scope="scope">
-            <span>{{scope.row.maxVoltage}} V</span>
-          </template>
           </el-table-column>
           <el-table-column
-          prop="minVoltage"
+            prop="maxDataID"
-          label="单体最低电压">
+            label="单体最大值ID">
-          <template slot-scope="scope">
-            <span>{{scope.row.minVoltage}} V</span>
-          </template>
           </el-table-column>
-        <el-table-column
-          label="单体最高温度">
-          <template slot-scope="scope">
-            <span>{{scope.row.maxTemperature}} &#8451;</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="minTemperature"
-          label="单体最低温度">
-          <template slot-scope="scope">
-            <span>{{scope.row.minTemperature}} &#8451;</span>
-          </template>
-        </el-table-column>
-
         </el-table>
+      </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:'簇电压',value:'742',attr:'',unit:'V'},
+        {label:'簇电压',attr:'clusterVoltage',unit:'V'},
-        {label:'可充电量',value:'100',attr:'',unit:'kWh'},
+        {label:'可充电量',attr:'chargeableCapacity',unit:'kWh'},
-        {label:'累计充电量',value:'100',attr:'',unit:'kWh'},
+        {label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh'},
-        {label:'簇电流',value:'12.7',attr:'',unit:'A'},
+        {label:'簇电流',attr:'clusterCurrent',unit:'A'},
-        {label:'可放电量',value:'300',attr:'',unit:'kWh'},
+        {label:'可放电量',attr:'dischargeableCapacity',unit:'kWh'},
-        {label:'累计放电量',value:'300',attr:'',unit:'kWh'},
+        {label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh'},
-        {label:'SOH',value:'98',attr:'',unit:'%'},
+        {label:'SOH',attr:'soh',unit:'%'},
-        {label:'平均温度',value:'11',attr:'',unit:'&#8451;'},
+        {label:'平均温度',attr:'averageTemperature',unit:'&#8451;'},
-        {label:'绝缘电阻',value:'2000',attr:'',unit:'&Omega;'},
+        {label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;'},
       ],
-      tableData:[
-        {name:'1#电池堆-1#电池簇',voltage:'742.8',electric:'-4.4',soc:'98',maxVoltage:'3.301',minVoltage:'3.102',maxTemperature:'12.8',minTemperature:'11.3'},
-        {name:'1#电池堆-2#电池簇',voltage:'790.1',electric:'-4.2',soc:'90',maxVoltage:'3.391',minVoltage:'3.192',maxTemperature:'13.5',minTemperature:'11.4'},
-        {name:'1#电池堆-3#电池簇',voltage:'740.3',electric:'-4.5',soc:'94',maxVoltage:'3.101',minVoltage:'3.198',maxTemperature:'10.9',minTemperature:'11.5'},
-        {name:'1#电池堆-4#电池簇',voltage:'744.9',electric:'-4.5',soc:'99',maxVoltage:'3.221',minVoltage:'3.234',maxTemperature:'11.4',minTemperature:'11.6'},
-      ]
     }
   },
+  methods:{
+    init(){
+      this.loading = true
+      getBMSBatteryCluster(this.siteId).then(response => {
+        this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
+      }).finally(() => {this.loading = false})
 
+    }
+  }
 }
 </script>
 

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

@@ -1,97 +1,126 @@
 
 <template>
-  <div>
+  <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">电池堆一</span>
+          <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 keep" :span="1" label="工作状态" >放电</el-descriptions-item>
+            <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通信">正常</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通信">正常</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">{{item.value}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
+            <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"></div>
+              <div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
             </div>
-          <div class="process">当前SOC : 25%</div>
+            <div class="process">当前SOC : {{baseInfo.currentSoc}}%</div>
           </div>
         </div>
-    </el-card>
         <el-table
           class="common-table"
-        :data="tableData"
+          :data="baseInfo.batteryDataList"
           stripe
+          max-height="500"
           style="width: 100%;margin-top:25px;">
           <el-table-column
-          prop=""
+            prop="clusterId"
-          label="名称">
+            label="簇号">
+          </el-table-column>
+          <el-table-column
+            label="簇电压"
+          >
             <template slot-scope="scope">
-            <span v-html="scope.row.name"></span>
+              <span>{{scope.row.clusterVoltage}} V</span>
             </template>
           </el-table-column>
           <el-table-column
-          prop="average"
+            label="簇电流">
-          label="单体平均值"
+            <template slot-scope="scope">
-        >
+              <span>{{scope.row.clusterCurrent}} A</span>
+            </template>
           </el-table-column>
           <el-table-column
-          prop="min"
+            label="簇SOC">
-          label="单体最小值">
+            <template slot-scope="scope">
+              <span>{{scope.row.currentSoc}} %</span>
+            </template>
           </el-table-column>
           <el-table-column
-          prop="minID"
+            prop="maxVoltage"
-          label="单体最小值ID">
+            label="单体最高电压">
+            <template slot-scope="scope">
+              <span>{{scope.row.maxVoltage}} V</span>
+            </template>
           </el-table-column>
           <el-table-column
-          prop="max"
+            prop="minVoltage"
-          label="单体最大值">
+            label="单体最低电压">
+            <template slot-scope="scope">
+              <span>{{scope.row.minVoltage}} V</span>
+            </template>
           </el-table-column>
           <el-table-column
-          prop="maxID"
+            label="单体最高温度">
-          label="单体最大值ID">
+            <template slot-scope="scope">
+              <span>{{scope.row.maxTemperature}} &#8451;</span>
+            </template>
           </el-table-column>
+          <el-table-column
+            prop="minTemperature"
+            label="单体最低温度">
+            <template slot-scope="scope">
+              <span>{{scope.row.minTemperature}} &#8451;</span>
+            </template>
+          </el-table-column>
+
         </el-table>
+      </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 {
-  components:{},
+  name:'DzjkSbjkBmszl',
+  mixins:[getQuerySiteId],
   data() {
     return {
-      statusData:[
+      loading:false,
-        {label:'工作状态',value:'',attr:''},
+      baseInfoList:[],
-        {label:'与PCS通信',value:'',attr:''},
-        {label:'与EMS通信',value:'',attr:''},
-      ],
       infoData:[
-        {label:'电池堆总电压',value:'742',attr:'',unit:'V'},
+        {label:'电池堆总电压',attr:'totalVoltage',unit:'V'},
-        {label:'可充电量',value:'100',attr:'',unit:'kWh'},
+        {label:'可充电量',attr:'chargeableCapacity',unit:'kWh'},
-        {label:'累计充电量',value:'100',attr:'',unit:'kWh'},
+        {label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh'},
-        {label:'电池堆总电流',value:'-12.7',attr:'',unit:'A'},
+        {label:'电池堆总电流',attr:'totalCurrent',unit:'A'},
-        {label:'可放电量',value:'300',attr:'',unit:'kWh'},
+        {label:'可放电量',attr:'dischargeableCapacity',unit:'kWh'},
-        {label:'累计放电量',value:'300',attr:'',unit:'kWh'},
+        {label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh'},
-        {label:'SOH',value:'99',attr:'',unit:'%'},
+        {label:'SOH',attr:'soh',unit:'%'},
-        {label:'平均温度',value:'20',attr:'',unit:'&#8451;'},
+        {label:'平均温度',attr:'averageTemperature',unit:'&#8451;'},
-        {label:'绝缘电阻',value:'1000',attr:'',unit:'&Omega;'},
+        {label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;'},
-      ],
-      tableData:[
-        {name:'电压（V）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
-        {name:'温度（&#8451;）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
-        {name:'SOC（%）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
       ]
     }
   },
+  methods:{
+    init(){
+      this.loading=true;
+      getBMSOverView(this.siteId).then(response => {
+        this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
+      }).finally(() => {this.loading = false})
+    }
 
+  }
 }
 </script>
 
@@ -125,7 +154,7 @@ export default {
       left: 0;
       bottom: 0;
       width: 100%;
-      height: 25%;
+      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);

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

@@ -1,82 +1,82 @@
 
 <template>
-      <div>
+      <div v-loading="loading">
-        <el-card shadow="always" class="common-card-container zb-common-card-container">
+        <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>通信中断</div>
+                <div>{{$store.state.ems.communicationStatusOptions[zbInfo.emsCommunicationStatus]}}</div>
-                <div>数据更新时间：2024-10-11 12:00:00</div>
+                <div>数据更新时间：{{zbInfo.dataUpdateTime}}</div>
               </div>
           </div>
           <el-table
             class="common-table"
-            :data="zbTableData"
+            :data="zbInfo.ammeterDataDetailInfos"
               stripe
               style="width: 100%;">
               <el-table-column
-                prop="name"
+                prop="category"
                 label="类别">
               </el-table-column>
               <el-table-column
-                prop="zong"
+                prop="totalKwh"
                 label="总/kWh"
               >
               </el-table-column>
               <el-table-column
-                prop="jian"
+                prop="sharpKwh"
                 label="尖/kWh">
               </el-table-column>
               <el-table-column
-                prop="feng"
+                prop="peakKwh"
                 label="峰/kWh">
               </el-table-column>
               <el-table-column
-                prop="ping"
+                prop="flatKwh"
                 label="平/kWh">
               </el-table-column>
               <el-table-column
-                prop="gu"
+                prop="valleyKwh"
                 label="谷/kWh">
               </el-table-column>
             </el-table>
         </el-card>
-        <el-card shadow="always" class="common-card-container cnb-common-card-container">
+        <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>通信正常</div>
+              <div>{{$store.state.ems.communicationStatusOptions[cnbInfo.emsCommunicationStatus]}}</div>
-              <div>数据更新时间：2024-10-11 12:00:00</div>
+              <div>数据更新时间：{{cnbInfo.dataUpdateTime}}</div>
             </div>
           </div>
           <el-table
             class="common-table"
-            :data="cnbTableData"
+            :data="cnbInfo.ammeterDataDetailInfos"
             stripe
             style="width: 100%;">
             <el-table-column
-              prop="name"
+              prop="category"
               label="类别">
             </el-table-column>
             <el-table-column
-              prop="zong"
+              prop="totalKwh"
               label="总/kWh"
             >
             </el-table-column>
             <el-table-column
-              prop="jian"
+              prop="sharpKwh"
               label="尖/kWh">
             </el-table-column>
             <el-table-column
-              prop="feng"
+              prop="peakKwh"
               label="峰/kWh">
             </el-table-column>
             <el-table-column
-              prop="ping"
+              prop="flatKwh"
               label="平/kWh">
             </el-table-column>
             <el-table-column
-              prop="gu"
+              prop="valleyKwh"
               label="谷/kWh">
             </el-table-column>
           </el-table>
@@ -86,26 +86,26 @@
 
 
 <script>
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getAmmeterDataList} from '@/api/ems/dzjk'
 export default {
   name:'DzjkSbjkDb',
+  mixins:[getQuerySiteId],
   data() {
     return {
-      zbTableData:[
+      loading:false,
-        {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+      zbInfo:{},
-        {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+      cnbInfo:{},
-        {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-        {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-      ],
-      cnbTableData:[
-        {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-        {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-        {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-        {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-      ]
     }
   },
   methods:{
-
+    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(){
 

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

@@ -27,10 +27,11 @@ export default {
       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'],
+        color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
         legend: {
-          left: 'center',
           bottom: '10',
         },
         tooltip: {
@@ -43,26 +44,37 @@ export default {
           color:"#333333",
         },
         xAxis: {
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+          type: 'category',
         },
         yAxis: {
           type: 'value',
         },
+        dataset:{
+          source
+          // source: [['日期','充电量','放电量']]
+        },
         series: [
           {
-            name:'昨天',
+            name:'电压',
-            data: [80,92,1,34,90,130,320,80,9,91,34,90],
             type: 'bar',
 
           },{
-            name:'今天',
+            name:'温度',
-            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
+            type: 'bar',
+          },
+          {
+            name:'SOC',
+            type: 'bar',
+
+          },{
+            name:'SOH',
             type: 'bar',
           }]
       })
-      this.chart.hideLoading()
-
     }
+  },
+  mounted() {
+    this.initChart()
   }
 }
 

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

@@ -1,120 +1,173 @@
 
 <template>
-      <el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
+      <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>
       <!--    搜索栏-->
-      <div class="select-container">
+      <el-form :inline="true" class="select-container">
-        <el-form :inline="true">
         <el-form-item label="电池堆">
-            <el-select v-model="search.dcd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+          <el-select v-model="search.stackId" placeholder="请选择" @change="changeStackId">
-              <el-option :label="item.name" :value="item.id" v-for="(item,index) in dcdOptions" :key="index+'dcdOptions'"></el-option>
+            <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.dcc" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+          <el-select v-model="search.clusterId" :no-data-text="!search.stackId && stackOptions.length > 0 ? '请先选择电池堆':'无数据'" placeholder="请选择" :loading="clusterloading" loading-text="正在加载数据">
-              <el-option :label="item.name" :value="item.id" v-for="(item,index) in dccOptions" :key="index+'dccOptions'"></el-option>
+            <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="warning" @click="onSearch" native-type="button">搜索</el-button>
+          <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;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
-        <!--        四个选择按钮-->
-        <el-row style="">
-          <el-col :xs="24" :sm="24" :lg="24">
-            <el-button-group>
-              <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
-            </el-button-group>
-          </el-col>
-        </el-row>
         <!--    图表-->
-        <el-row style="background:#fff;margin:30px 0;">
+<!--      <div style="margin:30px 0;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">-->
-          <el-col :xs="24" :sm="24" :lg="24">
+<!--        <el-row style="background:#fff;margin:30px 0;">-->
-            <bar-chart ref="barChart"/>
+<!--          <el-col :xs="24" :sm="24" :lg="24">-->
-          </el-col>
+<!--            <bar-chart ref="barChart"/>-->
-        </el-row>
+<!--          </el-col>-->
-      </div>
+<!--        </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 {
-      btnList:[
-        {name:'电压',id:'dy'},
-        {name:'温度',id:'wd'},
-        {name:'SOC',id:'soc'},
-        {name:'SOH',id:'soh'},
-      ],
-      activeBtn:'dy',
       loading:false,
-      search:{dcd:'',dcc:''},
+      clusterloading:false,
-      dcdOptions:[
+      search:{stackId:'',clusterId:''},
-        {name:'电池堆1',id:1},
+      stackOptions:[],//{id:'',deviceName:''}
-        {name:'电池堆2',id:2},
+      clusterOptions:[],//{id:'',deviceName:''}
-        {name:'电池堆3',id:3},
+      tableData:[],
-      ],
+      pageSize:10,//分页栏当前每个数据总数
-      dccOptions:[
+      pageNum:1,//分页栏当前页数
-        {name:'电池簇1',id:1},
+      totalSize:0,//table表格数据总数
-        {name:'电池簇2',id:2},
-      ]
     }
   },
   methods:{
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
     // 搜索
     onSearch(){
-      this.getData()
+      this.getTableData()
     },
     // 重置
+    // 清空搜索栏选中数据
+    // 清空电池簇列表，保留电池堆列表
     onReset(){
-      this.search.dcd=''
+      this.search={stackId:'',clusterId:''}
-      this.search.dcc=''
+      this.clusterOptions=[]
-      this.getData()
+      this.getTableData()
     },
-    // 获取数据
+    changeStackId(val){
-    getData(){
+      if(val){
-      this.$refs.barChart.chart.showLoading()
+        console.log('选择了电池堆，需要获取对应的电池簇',val,this.search.stackId)
-      //获取完成后 传入data todo传参
+        this.search.clusterId=''
-      this.$refs.barChart.setOption()
+        this.getClusterList()
-    },
-    changeDataType(id){
-      if(id !== this.activeBtn){
-        console.log('点击了不同的菜单，更新数据')
-        this.activeBtn=id;
       }
     },
-
+    //表格数据
+    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(){
-    this.$refs.barChart.initChart()
+
-    this.getData()
 
   }
 }
 </script>
 
-<style scoped lang="scss">
-.select-container{
-  .el-form--inline .el-form-item{
-    margin-right: 20px;
-  }
-}
-.activeBtn{
-  background-color: #FFF2CB;
-  border-color: #FFF2CB;
-  color: #666666;
-  font-weight: 600;
-}
-</style>

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

@@ -1,14 +1,18 @@
 <template>
     <div class="ems-dashboard-editor-container sbjk-ems-dashboard-editor-container">
-    <div class="router-container">
+    <el-menu
-      <div>
+      class="ems-third-menu"
-        <div class="route-link" :class="{'active':item.name === $route.name}" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
+      :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>
-      </div>
+      </el-menu-item>
-      </div>
+    </el-menu>
-    </div>
     <div class="ems-content-container ems-content-container-padding sbjk-ems-content-container">
       <keep-alive>
         <router-view></router-view>
@@ -20,9 +24,10 @@
 
 <script>
 import { dzjk } from '@/router/ems'
-const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkSbjk').children//获取到单站监控-设备监控下面的字路由
+const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkSbjk').children//获取到单站监控-设备监控下面的字路由
 console.log('设备监控子路由',childrenRoute)
 export default {
+  name:'DzjkSbjk',
   data(){
     return {
       childrenRoute,
@@ -42,28 +47,6 @@ export default {
   padding:0;
   background: #FFFFFF;
 }
-.router-container{
-  &>div{
-    border: 1px solid #dcdfe6;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
-    display: flex;
-    flex-direction: column;
-  }
-  .route-link{
-    width: 104px;
-    height: 40px;
-    line-height: 40px;
-    background-color: #ffffff;
-    color: #666666;
-    font-size: 14px;
-    text-align: center;
-  }
-  .route-link.active{
-    background-color: #FFBE29 ;
-    color: #333333;
-    font-weight: 500;
-  }
-}
 .sbjk-ems-content-container{
   margin-top:0;
   padding-top:0;

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

@@ -1,70 +1,163 @@
 
 <template>
-  <div class="pcs-ems-dashboard-editor-container">
+  <div class="pcs-ems-dashboard-editor-container" v-loading="loading">
-    <real-time-base-info/>
+<!--    顶部六个方块-->
-    <el-container class="pcs-container">
+    <real-time-base-info :data="runningHeadData"/>
-      <el-header class="pcs-header">
+<!--    内容-->
-        <div class="pcs-title">PCS</div>
+    <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>通信中断</div>
+          <div>{{$store.state.ems.communicationStatusOptions[pcsItem.communicationStatus]}}</div>
-          <div>数据更新时间：2024-10-11 12:00:00</div>
+          <div>数据更新时间：{{pcsItem.dataUpdateTime}}</div>
-        </div>
-        <div class="pcs-btns">
-          <el-button type="warning" size="small">警告按钮</el-button>
-          <el-button size="small">默认按钮</el-button>
         </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 danger"  :span="1" label="工作状态">停止</el-descriptions-item>
+            <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="并网状态">并网</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 save"  :span="1" label="设备状态">在线</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="控制模式">远程</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">{{item.value}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
+            <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">
+        <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="支路一">放电中</el-descriptions-item>
+            <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="直流功率">-9.8kW</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="直流电压">720.4V</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="直流电流">-13.1A</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:'总交流有功电率',value:'-7.2',attr:'',unit:'kW'},
+        {label:'总交流有功电率',attr:'totalActivePower',unit:'kW'},
-        {label:'当天交流充电量',value:'0',attr:'',unit:'kWh'},
+        {label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh'},
-        {label:'A相电压',value:'12',attr:'',unit:'V'},
+        {label:'A相电压',attr:'aPhaseVoltage',unit:'V'},
-        {label:'A相电流',value:'20',attr:'',unit:'A'},
+        {label:'A相电流',attr:'aPhaseCurrent',unit:'A'},
-        {label:'总交流无功电率',value:'-0.1',attr:'',unit:'kVar'},
+        {label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar'},
-        {label:'当天交流放电量',value:'145',attr:'',unit:'kWh'},
+        {label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh'},
-        {label:'B相电压',value:'12',attr:'',unit:'V'},
+        {label:'B相电压',attr:'bPhaseVoltage',unit:'V'},
-        {label:'B相电流',value:'20',attr:'',unit:'A'},
+        {label:'B相电流',attr:'bPhaseCurrent',unit:'A'},
-        {label:'总交流视在功率',value:'8',attr:'',unit:'kVA'},
+        {label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA'},
-        {label:'PCS模块温度',value:'40',attr:'',unit:'&#8451;'},
+        {label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;'},
-        {label:'C相电压',value:'12',attr:'',unit:'V'},
+        {label:'C相电压',attr:'cPhaseVoltage',unit:'V'},
-        {label:'C相电流',value:'20',attr:'',unit:'A'},
+        {label:'C相电流',attr:'cPhaseCurrent',unit:'A'},
-        {label:'总交流功率因数',value:'-0.9',attr:'',unit:''},
+        {label:'总交流功率因数',attr:'totalPowerFactor',unit:''},
-        {label:'PCS环境温度',value:'12',attr:'',unit:'&#8451;'},
+        {label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;'},
-        {label:'交流频率',value:'102',attr:'',unit:'Hz'}
+        {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()
     }
   },
 
@@ -74,9 +167,11 @@ export default {
 <style scoped lang="scss">
 .pcs-container{
   margin-top: 25px;
+  border:1px solid #eeeeee;
+  border-radius: 6px 6px 0 0;
   //红色标题
   .pcs-header{
-    background: #FC6B69;
+    background: #05AEA3;
     display: flex;
     position: relative;
     justify-content: flex-start;
@@ -103,5 +198,11 @@ export default {
       transform: translateY(-50%);
     }
   }
+  .pcs-header.warn{
+    background-color:#FC6B69 ;
+  }
+  .pcs-header.close{
+    background-color:#666666 ;
+  }
 }
 </style>

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

@@ -34,6 +34,7 @@ import DcpjwdChart from './DcpjwdChart.vue'
 import DcpjsocChart from './DcpjsocChart.vue'
 
 export default {
+  name:'DzjkSbjkSsyx',
   components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
   data() {
     return {

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

@@ -1,78 +1,52 @@
 
 <template>
-    <div>
+    <div v-loading="loading">
-      <div class="yl-item-container">
+<!--      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">1#液冷</div>
+          <div class="header-title">{{item.systemName}}</div>
-          <div>工作模式：<span class="header-values">运行</span></div>
+          <div>工作模式：<span class="header-values">{{$store.state.ems.workModeOptions[item.workMode]}}</span></div>
-          <div>当前温度：<span class="header-values">12&#8451;</span></div>
+          <div>当前温度：<span class="header-values">{{item.currentTemperature}}&#8451;</span></div>
         </div>
         <div class="content">
           <el-row>
-            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
+            <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">{{tempDataItem.title}}：{{item[tempDataItem.attr]}}&#8451;</el-col>
-          </el-row>
-        </div>
-      </div>
-
-      <div class="yl-item-container yl-warn-item-container">
-        <div class="header">
-          <div class="header-title">2#液冷</div>
-          <div>工作模式：<span class="header-values">运行</span></div>
-          <div>当前温度：<span class="header-values">12&#8451;</span></div>
-        </div>
-        <div class="content">
-          <el-row>
-            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
-          </el-row>
-        </div>
-      </div>
-      <div class="yl-item-container">
-        <div class="header">
-          <div class="header-title">3#液冷</div>
-          <div>工作模式：<span class="header-values">运行</span></div>
-          <div>当前温度：<span class="header-values">12&#8451;</span></div>
-        </div>
-        <div class="content">
-          <el-row>
-            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
-          </el-row>
-        </div>
-      </div>
-
-      <div class="yl-item-container yl-warn-item-container">
-        <div class="header">
-          <div class="header-title">4#液冷</div>
-          <div>工作模式：<span class="header-values">运行</span></div>
-          <div>当前温度：<span class="header-values">12&#8451;</span></div>
-        </div>
-        <div class="content">
-          <el-row>
-            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
           </el-row>
         </div>
       </div>
+      <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:'制热开启点',value:12,attr:''},
+        {title:'制热开启点',attr:'heatingStartPoint'},
-        {title:'制冷开启点',value:23,attr:''},
+        {title:'制冷开启点',attr:'coolingStartPoint'},
-        {title:'高温告警点',value:30,attr:''},
+        {title:'高温告警点',attr:'highTempAlarmPoint'},
-        {title:'制热停止点',value:24,attr:''},
+        {title:'制热停止点',attr:'heatingStopPoint'},
-        {title:'制冷停止点',value:21,attr:''},
+        {title:'制冷停止点',attr:'coolingStopPoint'},
-        {title:'低温告警点',value:10,attr:''},
+        {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(){
 

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

@@ -1,9 +1,8 @@
 
 <template>
-  <div>
+  <div style="width:100%">
     <!--    搜索栏-->
-    <div class="select-container">
+    <el-form :inline="true" class="select-container">
-      <el-form :inline="true">
       <el-form-item label="电表">
         <el-select v-model="search.db" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
           <el-option :label="item.name" :value="item.id" v-for="(item,index) in dbOptions" :key="index+'dbOptions'"></el-option>
@@ -23,13 +22,12 @@
         </el-date-picker>
       </el-form-item>
       <el-form-item>
-          <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
+        <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>
     <!--表格-->
     <el-table
           class="common-table"
@@ -163,11 +161,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.select-container{
-  .el-form--inline .el-form-item{
-    margin-right: 20px;
-  }
-}
 ::v-deep{
   .common-table.el-table .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th{
     border-bottom: 1px solid #dfe6ec;

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

@@ -3,7 +3,7 @@
   <div>
     <div class="select-container">
       <el-form :inline="true">
-        <el-form-item label="Pcs">
+        <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>
@@ -11,7 +11,7 @@
         <el-form-item label="时间选择">
           <el-date-picker
             v-model="dateRange"
-            type="daterange"
+            type="date"
             range-separator="至"
             start-placeholder="开始时间"
             :picker-options="pickerOptions"
@@ -20,7 +20,7 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item>
-          <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
+          <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>
@@ -31,8 +31,8 @@
       <!--        二个选择按钮-->
       <el-row style="">
         <el-col :xs="24" :sm="24" :lg="24">
-          <el-button-group>
+          <el-button-group class="ems-btns-group">
-            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+            <el-button 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>
@@ -56,8 +56,8 @@ export default {
           return time.getTime() > Date.now();
         },
       },
-      defaultDateRange:[],//默认展示的时间
+      defaultDateRange:'',//默认展示的时间
-      dateRange:[],
+      dateRange:'',
       loading:false,
       pcs:'',
       pcsOptions: [
@@ -88,7 +88,7 @@ export default {
     // 重置
     onReset(){
       this.pcs = ''
-      this.dateRange=[]
+      this.dateRange=''
       this.getData()
     },
     getData(){
@@ -140,9 +140,7 @@ export default {
     }
   },
   mounted(){
-    const now = new Date();
+    this.defaultDateRange =new Date();
-    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-    this.defaultDateRange = [lastMonth, now];
     this.initChart()
     this.getData()
   },
@@ -156,11 +154,3 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-.activeBtn{
-  background-color: #FFF2CB;
-  border-color: #FFF2CB;
-  color: #666666;
-  font-weight: 600;
-}
-</style>

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

@@ -2,8 +2,7 @@
 <template>
   <div>
     <!--    搜索栏-->
-    <div class="select-container">
+    <el-form :inline="true" class="select-container">
-      <el-form :inline="true">
       <el-form-item label="电池堆">
         <el-select v-model="search.dcd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
           <el-option :label="item.name" :value="item.id" v-for="(item,index) in dcdOptions" :key="index+'dcdOptions'"></el-option>
@@ -23,13 +22,12 @@
         </el-date-picker>
       </el-form-item>
       <el-form-item>
-          <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
+        <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-table
@@ -139,11 +137,3 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-.select-container{
-  .el-form--inline .el-form-item{
-    margin-right: 20px;
-  }
-}
-
-</style>

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

@@ -20,7 +20,7 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item>
-          <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
+          <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>
@@ -31,8 +31,8 @@
       <!--        二个选择按钮-->
       <el-row style="">
         <el-col :xs="24" :sm="24" :lg="24">
-          <el-button-group>
+          <el-button-group class="ems-btns-group">
-            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+            <el-button 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>
@@ -69,7 +69,7 @@ export default {
       btnList:[
         {name:'电网功率',id:'dwgl'},
         {name:'负载功率',id:'fzgl'},
-        {name:'电储能功率',id:'cngl'},
+        {name:'储能功率',id:'cngl'},
         {name:'光伏功率',id:'gfgl'},
       ],
 
@@ -156,11 +156,3 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-.activeBtn{
-  background-color: #FFF2CB;
-  border-color: #FFF2CB;
-  color: #666666;
-  font-weight: 600;
-}
-</style>

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

@@ -3,7 +3,7 @@
     <div slot="header">
       <span class="card-title">电量指标</span>
     </div>
-    <div class="card-main">
+    <div class="card-main" v-loading="loading">
       <!--    搜索栏-->
       <div class="select-container">
         <el-form :inline="true">
@@ -19,7 +19,7 @@
             </el-date-picker>
           </el-form-item>
           <el-form-item>
-            <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
+            <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>
@@ -27,9 +27,9 @@
         </el-form>
       </div>
       <div class="total-data">
-        <div>总充电量:<span class="point">1390988kWh</span></div>
+        <div>总充电量:<span class="point">{{totalChargedCap | formatNumber}}kWh</span></div>
-        <div>总放电量:<span class="point">988kWh</span></div>
+        <div>总放电量:<span class="point">{{totalDisChargedCap | formatNumber}}kWh</span></div>
-        <div>总效益:<span class="point">99%</span></div>
+        <div>综合效率:<span class="point">{{efficiency | formatNumber}}%</span></div>
       </div>
       <div id="dlzbChart" style="height: 310px"></div>
     </div>
@@ -39,8 +39,11 @@
 <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],
+  mixins: [resize,getQuerySiteId],
   data() {
     return {
       pickerOptions:{
@@ -51,74 +54,92 @@ export default {
       defaultDateRange:[],//默认展示的时间
       dateRange:[],
       loading:false,
-      chart: null
+      chart: null,
-
+      totalChargedCap:'',
+      totalDisChargedCap:'',
+      efficiency:''
     }
   },
   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 = [['日期','充电量','放电量']]
+      const source = [['日期','充电量','放电量','效率']]
-      // data.forEach(item=>{
+      data.forEach(item=>{
-      //   source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap,item.dailyEfficiency])
-      // })
+      })
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
+        color:['#FFBD00','#3C81FF','#05AEA3'],
         // legend: {
         //   left: 'right',
         //   bottom: '10',
         // },
         tooltip: {},
         xAxis: { type: 'category' },
-        yAxis: { type: 'value' },
+        yAxis: [{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        },{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        }],
         grid:{top:30},
         dataset:{
-          // source
+          source
-          source:[//格式
-            ['product','充电量','放电量'],
-            ['6/10',101,220],
-            ['6/11',210,390],
-            ['6/12',220,360],
-            ['6/13',520,340],
-            ['6/14',270,430],
-          ]
         },
         series: [
           {
+            yAxisIndex:0,
             type: 'bar',//柱状图
           },
           {
+            yAxisIndex:0,
             type: 'bar',//柱状图
           },
+          {
+            yAxisIndex:1,
+            type: 'line',//柱状图
+          },
         ]
       })
     },
-    initChart() {
+    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];
-    this.initChart()
-    this.getData()
   },
   beforeDestroy() {
     if (!this.chart) {

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

@@ -19,7 +19,7 @@
             </el-date-picker>
           </el-form-item>
           <el-form-item>
-            <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
+            <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>

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

@@ -1,14 +1,19 @@
 <template>
   <div class="ems-dashboard-editor-container tjbb-ems-dashboard-editor-container">
-    <div class="router-container">
+    <el-menu
-      <div>
+      class="ems-third-menu"
-        <div class="route-link" :class="{'active':item.name === $route.name}" v-for="(item,index) in childrenRoute" :key="index+'tjbbChildrenRoute'">
+      :default-active="$route.name"
-          <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
+      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>
-        </div>
+      </el-menu-item>
-      </div>
+    </el-menu>
-    </div>
+
     <div class="ems-content-container ems-content-container-padding tjbb-ems-content-container">
       <keep-alive>
         <router-view></router-view>
@@ -20,7 +25,7 @@
 
 <script>
 import { dzjk } from '@/router/ems'
-const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkTjbb').children//获取到统计报表下面的字路由
+const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkTjbb').children//获取到统计报表下面的字路由
 console.log('设备监控子路由',childrenRoute)
 export default {
   name:'DzjkTjbb',
@@ -43,28 +48,6 @@ export default {
   padding:0;
   background: #FFFFFF;
 }
-.router-container{
-  &>div{
-    border: 1px solid #dcdfe6;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
-    display: flex;
-    flex-direction: column;
-  }
-  .route-link{
-    width: 104px;
-    height: 40px;
-    line-height: 40px;
-    background-color: #ffffff;
-    color: #666666;
-    font-size: 14px;
-    text-align: center;
-  }
-  .route-link.active{
-    background-color: #FFBE29 ;
-    color: #333333;
-    font-weight: 500;
-  }
-}
 .tjbb-ems-content-container{
   margin-top:0;
   padding-top:0;

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

@@ -3,7 +3,7 @@
   <div>
     <div class="select-container">
       <el-form :inline="true">
-        <el-form-item label="Pcs">
+        <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>
@@ -20,7 +20,7 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item>
-          <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
+          <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>
@@ -31,8 +31,8 @@
       <!--        二个选择按钮-->
       <el-row style="">
         <el-col :xs="24" :sm="24" :lg="24">
-          <el-button-group>
+          <el-button-group class="ems-btns-group">
-            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+            <el-button 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>
@@ -156,12 +156,3 @@ export default {
   },
 }
 </script>
-
-<style scoped lang="scss">
-.activeBtn{
-  background-color: #FFF2CB;
-  border-color: #FFF2CB;
-  color: #666666;
-  font-weight: 600;
-}
-</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/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ems-dashboard-editor-container">
+  <div class="ems-dashboard-editor-container" v-loading="loading">
     <zd-info></zd-info>
     <div class="ems-content-container ">
       <div class="map-container">
@@ -7,7 +7,7 @@
       </div>
       <div class="zd-msg-container">
         <div class="zd-msg-top">
-          <zd-select @submitSite="submitSite"></zd-select>
+          <zd-select ref="zdSelect" @submitSite="submitSite"></zd-select>
           <el-card class="common-card-container">
             <div slot="header">
               <span class="card-title">基本信息</span>
@@ -22,7 +22,7 @@
             </el-row>
  <!--     基本信息     -->
             <el-descriptions class="single-zd-info-container" :column="1" >
-              <el-descriptions-item  v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{item.value}}</el-descriptions-item>
+              <el-descriptions-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>
@@ -45,6 +45,7 @@ export default {
   components:{ZdSelect,ZdInfo,SingleSquareBox,BarChart,MapChart},
   data() {
     return {
+      loading:false,
       singleSiteId:'',
       singleSiteName:'',
       singleSiteLocation:[],
@@ -85,11 +86,11 @@ export default {
       },{
         title:'装机功率',
         value:'',
-        attr:'installedPower'
+        attr:'installPower'
       },{
         title:'装机容量',
         value:'',
-        attr:'installedCap',
+        attr:'installCapacity',
       }]
     }
   },
@@ -97,23 +98,24 @@ export default {
     // 站点选中
     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 || {}
+        const res = response?.data || {}
         this.singleSiteName = res?.siteName || ''//站点名称
         this.singleSiteLocation = res?.siteLocation || []//站点坐标
         this.singleZdSqaure.forEach(item=>{
-          item.value =( res[item.attr] || res[item.attr] === 0 ) ? res[item.attr] : '-'
+          item.value =res[item.attr]
         })
         this.singleZdInfo.forEach(item=>{
-          item.value = ( res[item.attr] || res[item.attr] === 0 ) ? res[item.attr] : '-'
+          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(){

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 {