Merge branch 'develop' into single-develop

src/api/ems/dzjk.js

@@ -93,9 +93,9 @@ export function getAmmeterDataList(siteId) {
 }
 
 // 故障告警
-export function getAlarmDetailList({siteId, deviceId, alarmLevel, alarmStartTime, alarmEndTime,pageSize,pageNum}) {
+export function getAlarmDetailList({status,siteId, deviceId, alarmLevel, alarmStartTime, alarmEndTime,pageSize,pageNum}) {
   return request({
-    url: `/ems/siteAlarm/getAlarmDetailList?siteId=${siteId}&deviceId=${deviceId}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
+    url: `/ems/siteAlarm/getAlarmDetailList?siteId=${siteId}&status=${status}&deviceId=${deviceId}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
     method: 'get'
   })
 }
@@ -116,16 +116,16 @@ export function getPcsNameList(siteId) {
   })
 }
 //pcs曲线
-export function getPCSData({siteId,deviceId,startTime,endTime,dataType}) {
+export function getPCSData({siteId,startTime,endTime,dataType}) {
   return request({
-    url: `/ems/statsReport/getPCSData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
+    url: `/ems/statsReport/getPCSData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
     method: 'get'
   })
 }
 //电池堆曲线
-export function getStackData({siteId,deviceId,startTime,endTime,dataType}) {
+export function getStackData({siteId,startTime,endTime,dataType}) {
   return request({
-    url: `/ems/statsReport/getStackData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
+    url: `/ems/statsReport/getStackData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
     method: 'get'
   })
 }
@@ -168,9 +168,9 @@ export function batteryAveTemp(siteId) {
   })
 }
 // 功率曲线
-export function getPowerData({siteId,deviceId,startDate,endDate,dataType}) {
+export function getPowerData({siteId,startDate,endDate}) {
   return request({
-    url: `/ems/statsReport/getPowerData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startDate}&endDate=${endDate}&dataType=${dataType}`,
+    url: `/ems/statsReport/getPowerData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
     method: 'get'
   })
 }
@@ -291,3 +291,11 @@ export function curveList({siteId,strategyId}) {
     method: 'get',
   })
 }
+
+//单站监控 首页 当日功率曲线
+export function getPointData({siteId,startDate,endDate}) {
+  return request({
+    url: `/ems/siteMonitor/getPointData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
+    method: 'get',
+  })
+}

src/api/ems/search.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+// 获取设备列表
+export function getAllDeviceCategory() {
+  return request({
+    url: '/ems/generalQuery/getAllDeviceCategory',
+    method: 'get'
+  })
+}
+// 点位列表
+export function pointFuzzyQuery(data) {
+  return request({
+    url: '/ems/generalQuery/pointFuzzyQuery',
+    method: 'post',
+    data
+  })
+}
+// 图表
+export function getPointValueList(data) {
+  return request({
+    url: '/ems/generalQuery/getPointValueList',
+    method: 'post',
+    data
+  })
+}
+
+// 图表
+export function getAllBatteryIdsBySites(data) {
+  return request({
+    url: `/ems/generalQuery/getAllBatteryIdsBySites/${data}`,
+    method: 'get',
+  })
+}

src/api/ems/site.js

@@ -62,3 +62,11 @@ export function getDeviceList(siteId) {
     method: 'get',
   })
 }
+
+//获取设备点位table
+export function getDevicePointList({siteId,deviceCategory,pageNum,pageSize}) {
+  return request({
+    url: `/ems/siteConfig/getDevicePointList?siteId=${siteId}&pageNum=${pageNum}&pageSize=${pageSize}&deviceCategory=${deviceCategory}`,
+    method: 'get',
+  })
+}

src/assets/styles/common.scss

@@ -26,18 +26,15 @@
       border-bottom: none;
       font-size: 12px;
       background: #F1F5FB ;
+      position: relative;
       .card-title{
         font-weight: 500;
         color:#333333;
       }
-      .large-title{
-        font-size: 20px;
-        font-weight: 500;
-        line-height: 40px;
-      }
       .el-button--text{
         color: #666666;
       }
+
     }
 }
 .common-card-container-body-no-padding{
@@ -50,6 +47,80 @@
       background-color: transparent;
     }
 }
+//单站监控 设备监控card公共样式
+.sbjk-card-container{
+  .el-card__header {
+    background-color: transparent;
+    padding: 10px 14px;
+    color: #ffffff;
+    position: relative;
+    border-radius: 5px 5px 0 0;
+    .large-title{
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 40px;
+      padding: 0 50px 0 11px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+    .info {
+      display: inline-block;
+      vertical-align: middle;
+      color: #ffffff;
+      font-size: 12px;
+      line-height: 20px;
+    }
+    .el-button--text{
+      color: #666666;
+    }
+    .alarm{
+      position: absolute;
+      right: 25px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  //红色背景颜色标题
+  &.warning-card-container{
+    .el-card__header {
+      background-color: #fc6b69;
+    }
+  }
+  //绿色背景颜色标题
+  &.running-card-container {
+    .el-card__header {
+      background-color: #05aea3;
+    }
+  }
+  //灰色背景颜色标题
+  &.timing-card-container {
+    .el-card__header {
+      background-color: #666666;
+    }
+  }
+}
+
+/* card标题里的时间选择器 */
+.time-range-card {
+  &.common-card-container .el-card__header {
+    padding-top: 0;
+    padding-bottom: 0;
+    .time-range-header {
+      height: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .card-title {
+        line-height: 40px;
+      }
+    }
+  }
+}
+
+
+
+
+
 //描述样式 PCS、BMS总览、BMS电池簇页面公共样式
 .descriptions-main{
   padding:24px;

src/components/Ems/DateRangeSelect/index.vue

@@ -38,9 +38,9 @@ export default {
     }
   },
   methods: {
-    init(){
+    init(today=false){
         const now = new Date(),formatNow = formatDate(now);
-        const weekAgo = formatDate(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000))
+        const weekAgo = formatDate(today ? new Date(now.getTime()) : new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000))
         this.dateRange = [weekAgo, formatNow];
         this.defaultDateRange=[weekAgo, formatNow];
         this.$emit('updateDate',this.dateRange)

src/components/Ems/ZdSelect/index.vue

@@ -3,13 +3,13 @@
   <div class="zd-select-container">
     <el-form :inline="true">
       <el-form-item label="站点选择">
-        <el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据">
+        <el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="onSubmit">
           <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-form-item>-->
-        <el-button type="primary" :loading="searchLoading" @click="onSubmit">搜索</el-button>
+<!--        <el-button type="primary" :loading="searchLoading" @click="onSubmit">搜索</el-button>-->
-      </el-form-item>
+<!--      </el-form-item>-->
     </el-form>
   </div>
 </template>

src/filters/ems.js

@@ -17,7 +17,7 @@ export const formatDate = (val,toSeconds = false,onlyTime=false) => {
   if(!toSeconds){
     return front
   } else{
-    return front +''+back
+    return front +' '+back
   }
 
 

src/mixins/ems/intervalUpdate.js

@@ -0,0 +1,24 @@
+// 定时刷新
+const intervalUpdate=  {
+    data: function () {
+        return {
+            intervalUpdateTimer:null
+        }
+    },
+    beforeDestroy() {
+        console.log('销毁之前 清空定时器')
+        if( this.intervalUpdateTimer) {
+            window.clearInterval(this.intervalUpdateTimer)
+            this.intervalUpdateTimer = null
+        }
+    },
+    methods:{
+        updateInterval: function (cn,time=60000) {
+            window.clearInterval(this.intervalUpdateTimer)
+            this.intervalUpdateTimer = null
+            this.intervalUpdateTimer = window.setInterval(cn,time)
+        }
+    }
+
+}
+export default intervalUpdate

src/store/modules/ems.js

@@ -15,6 +15,7 @@ const ems = {
     ticketStatusOptions:{0:'待处理', 1:'已处理', 2:'处理中'},//工单处理状态
     strategyStatusOptions:{'0':'未启用', '1':'已运行', '2':'已暂停', '3':'禁用', '4':'删除'},//策略状态
     chargeStatusOptions:{'1':'充电','2':'待机'},//冲放状态
+    deviceCategoryOptions:{'PCS':'PCS','STACK':'电池堆','CLUSTER':'电池簇','COOLING':'液冷','BATTERY':'单体电池','AMMETER':'电表'},//设备类别
   },
   mutations: {
     SET_ZD_LIST(state, list) {

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

@@ -124,7 +124,7 @@ export default {
     return {
       loading:false,
       btnList:[
-        {name:'今日告警',id:'today'},
+        {name:'未处理告警',id:'today'},
         {name:'历史告警',id:'history'},
       ],
       deviceOptions:[],//设备列表
@@ -173,17 +173,6 @@ export default {
     onSearch(){
       this.pageNum =1//每次搜索从1开始搜索
       const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
-      // 选中了时间范围
-      if(alarmStartTime && alarmStartTime){
-        // 如果选择的时间范围是今天
-        if(this.isSameDay(alarmStartTime,alarmEndTime) && this.isSameDay(alarmStartTime,new Date())){
-          this.activeBtn = 'today'
-        }else {
-          this.activeBtn = 'history'
-        }
-      }else{
-        //没有选择时间范围 还是按照选中的今日告警、历史告警查询
-      }
       this.getData()
     },
     // 重置
@@ -198,17 +187,6 @@ export default {
       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()
       }
     },
@@ -218,21 +196,8 @@ export default {
       const {deviceId,alarmLevel} = this.search
       const {siteId,pageNum,pageSize,activeBtn} =this
       const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
-      let start='',end = '',now =new Date()
+      let status = activeBtn === 'today' ? '0' : '1,2'
-      if(activeBtn === 'today'){
+      getAlarmDetailList({status,deviceId,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(alarmStartTime),alarmEndTime:formatDate(alarmEndTime)}).then(response => {
-        start = end = now
-      }else{
-        if(alarmStartTime && alarmEndTime){
-          start = alarmStartTime
-          end = alarmEndTime
-        }else{
-          start=''
-          end = ''
-            // now
-          // end.setDate(end.getDate() - 1);
-        }
-      }
-      getAlarmDetailList({deviceId,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})

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

@@ -13,7 +13,7 @@
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
 import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
-import {getPcsNameList, getPowerData} from '@/api/ems/dzjk'
+import { getPointData } from '@/api/ems/dzjk'
 
 export default {
   mixins: [resize],
@@ -23,7 +23,7 @@ export default {
       chart: null,
       timeRange:[],
       siteId:'',
-      deviceId:''
+      isInit:true
     }
   },
   mounted() {
@@ -42,33 +42,23 @@ export default {
     // 更新时间范围 重置图表
     updateDate(data){
       this.timeRange=data
-      this.getGVQXData()
+      !this.isInit && this.getGVQXData()
+      this.isInit = false
     },
     getGVQXData(){
       this.showLoading()
-      const {siteId,deviceId,timeRange}=this
+      const {siteId,timeRange}=this
-      if(!deviceId) return this.hideLoading()
+      getPointData({siteId,startDate:timeRange[0],endDate:timeRange[1]}).then(response => {
-      getPowerData({siteId,deviceId,startDate:timeRange[0],endDate:timeRange[1],dataType:'1'}).then(response => {
         this.setOption(response?.data || [])
       }).finally(()=>this.hideLoading())
     },
     init(siteId){
       //初始化 清空数据
       this.siteId = siteId
+      this.isInit = true
       this.timeRange=[]
-      this.deviceId=''
+      this.$refs.dateRangeSelect.init(true)
-      this.$refs.dateRangeSelect.init()
+      this.getGVQXData()
-      this.showLoading()
-      getPcsNameList(siteId).then(response=>{
-        const data=response?.data || [];
-        if(data.length>0){
-          this.deviceId=data[0].id
-          //接口调用完成之后 设置图表、结束loading
-          this.getGVQXData()
-        }else{
-          this.hideLoading()
-        }
-      })
     },
     initChart() {
       this.chart = echarts.init(document.querySelector('#activeChart'))
@@ -80,12 +70,12 @@ export default {
       this.chart && this.chart.hideLoading()
     },
     setOption(data) {
-      const source = [['日期','电网功率']]
+      const source = [['日期','电网功率','负载功率','储能功率','光伏功率','soc平均值','soh平均值','电池平均温度平均值']]
+      console.log('source.slice(1)',source[0].slice(1))
       this.chart && data.forEach((item)=>{
-        source.push([item.statisDate,item.gridPower])
+        source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower,item.avgSoc,item.avgSoh,item.avgTemp])
       })
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
         grid: {
           containLabel: true
         },
@@ -105,16 +95,21 @@ export default {
         xAxis: {
           type: 'category',
         },
-        yAxis: {
+        yAxis: [
-          type: 'value',
-        },
-        dataset:{source},
-        series: [
           {
-            name:'电网功率',
+            type: 'value',
+          },
+          {
+            type: 'value',
+          },
+        ],
+        dataset:{source},
+        series: source[0].slice(1).map((item,index)=>{
+          return {
             type: 'line',
+            yAxisIndex:index<=4 ? 0 : 1
           }
-        ]
+        })
       })
     },
 

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

@@ -72,7 +72,7 @@ export default {
         source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
       })
       this.chart && this.chart.setOption({
-        color:['#FFBD00','#3C81FF','#05AEA3'],
+        color:['#4472c4','#70ad47'],//所有充放电颜色保持统一
         tooltip: {
           trigger: 'axis',
           axisPointer: { // 坐标轴指示器，坐标轴触发有效
@@ -107,11 +107,11 @@ export default {
         series: [
           {
             yAxisIndex:0,
-            type: 'line',
+            type: 'bar',
           },
           {
             yAxisIndex:0,
-            type: 'line',
+            type: 'bar',
           },
         ]
       })

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

@@ -13,7 +13,7 @@
           class="common-card-container common-card-container-body-no-padding"
         >
           <div slot="header">
-            <span class="card-title">静态信息</span>
+            <span class="card-title">站点信息</span>
           </div>
           <div
             style="box-sizing: border-box; height: 250px; padding: 20px 15px"
@@ -105,11 +105,11 @@ export default {
       ],
       sjglData: [
         {
-          title: "今日充电量（MWh）",
+          title: "今日充电量（kWh）",
           attr: "dayChargedCap",
         },
         {
-          title: "今日放电量（MWh）",
+          title: "今日放电量（kWh）",
           attr: "dayDisChargedCap",
         },
         {
@@ -202,20 +202,4 @@ export default {
     }
   }
 }
-/* card标题里的时间选择器 */
-.time-range-card {
-  &.common-card-container .el-card__header {
-    padding-top: 0;
-    padding-bottom: 0;
-    .time-range-header {
-      height: 40px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .card-title {
-        line-height: 40px;
-      }
-    }
-  }
-}
 </style>

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

@@ -0,0 +1,221 @@
+<!--电位展示图表-->
+<template>
+  <el-dialog
+      :visible.sync="show"
+      :title="pointName"
+      :close-on-click-modal="false"
+      show-close
+      destroy-on-close
+      lock-scroll
+      append-to-body
+      width="1000px"
+      class="ems-dialog"
+      :before-close="handleColsed"
+  >
+    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
+      <div slot="header" class="time-range-header">
+        <el-radio-group class="card-title" v-model="dataUnit">
+          <el-radio :label="1">分钟</el-radio>
+          <el-radio :label="2">小时</el-radio>
+          <el-radio :label="3">天</el-radio>
+        </el-radio-group>
+        <date-time-select ref="dateTimeSelect" :data-unit="dataUnit" @initDate="((e)=>dataRange=e||[])" @updateDate="updateDate"/>
+      </div>
+      <div style="height: 350px" id="searchChart"></div>
+    </el-card>
+  </el-dialog>
+</template>
+<script>
+import * as echarts from "echarts";
+import resize from "@/mixins/ems/resize";
+import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
+import {getPointValueList} from "@/api/ems/search";
+import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
+export default {
+  components: {DateRangeSelect, DateTimeSelect},
+  mixins: [resize],
+  props: {
+    siteId:{
+      type: String,
+      required: true,
+    }
+  },
+  computed: {
+    isDtdc(){
+      return this.categoryName === '单体电池'
+    },
+  },
+  watch:{
+    show(val) {
+      if(!val){
+        this.pointName=''
+        this.categoryName=''
+        this.deviceId=''
+        this.dataUnit=1
+        if (!this.chart) {
+          return
+        }
+        this.hideLoading()
+        this.chart.dispose()
+        this.chart = null
+      }
+    },
+    dataUnit:{
+      handler(newVal,oldVal){
+        console.log('wacth到了dataUnit的变化',newVal,oldVal)
+        this.$nextTick(()=>{
+          this.$refs.dateTimeSelect.init()
+          this.getDate()
+        })
+      },
+    }
+  },
+  data(){
+    return{
+      show:false,
+      chart:null,
+      dataUnit:1,
+      dataRange:[],
+      child:[],//单体电池需要数据 暂不删除
+      pointName:'',
+      categoryName:'',
+      deviceId:''
+    }
+  },
+  methods:{
+    showChart({pointName,categoryName,deviceId}){
+      //初始化数据
+      this.pointName=pointName
+      this.categoryName=categoryName
+      this.deviceId=deviceId
+      this.show = true
+      this.$nextTick(()=>{
+        this.$refs.dateTimeSelect.init()
+        this.initChart()
+        this.getDate()
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#searchChart'))
+    },
+    showLoading(){
+      this.chart && this.chart.showLoading()
+    },
+    hideLoading(){
+      this.chart && this.chart.hideLoading()
+    },
+    getDate(){
+        this.showLoading()
+        const{dataUnit,dataRange:[start='',end=''],child}=this
+        let siteDeviceMap={}
+        child.forEach(([first,second,third])=>{
+          if(siteDeviceMap[first]){
+            siteDeviceMap[first].push(third)
+          }else{
+            siteDeviceMap[first]=[]
+            siteDeviceMap[first].push(third)
+          }
+        })
+        let startDate,endDate
+        if(start && dataUnit===3){
+          // startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
+          startDate = start + ' 00:00:00'
+        }else{
+          startDate=start
+        }
+        if(end && dataUnit===3){
+          // endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
+          endDate = end + ' 00:00:00'
+        }else{
+          endDate=end
+        }
+
+        getPointValueList({siteIds:[this.siteId],deviceId:this.deviceId,dataUnit,categoryName:this.categoryName,pointName:this.pointName,startDate,endDate,siteDeviceMap:{}}).then(response => {
+          this.setOption(response?.data || [])
+        }).finally(()=>{
+          this.hideLoading()
+        })
+    },
+    setOption(data) {
+      if(!this.chart) return
+      this.chart.clear()
+      console.log('返回的数据',data)
+      let dataset=[]
+      if(data.length>0){
+        data.forEach((item,index)=>{
+          item.deviceList.forEach(inner=>{
+            dataset.push({
+              name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${inner.deviceId}`,
+              type:'line',
+              xdata:[],
+              data:[]
+            })
+            const length = dataset.length
+            inner.pointValueList.forEach(value=>{
+              dataset[length-1].xdata.push(value.valueDate)
+              dataset[length-1].data.push(value.pointValue)
+            })
+          })
+        })
+      }else{
+        this.$message.warning('暂无数据')
+      }
+      console.log('图表数据',dataset)
+      this.chart.setOption({
+        legend: {
+          // left: 'center',
+          // top: '10',
+        },
+        grid: {
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
+        yAxis: {
+          type: 'value',
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 100
+          },
+          {
+            start: 0,
+            end: 100
+          }
+        ],
+        series: dataset
+      })
+    },
+    updateDate(val){
+      this.dataRange =val || []
+      this.getDate()
+    },
+    handleColsed(done) {
+      if (!this.chart) {
+        return done();
+      }
+      this.chart.dispose();
+      this.chart = null;
+      done();
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+::v-deep {
+ .card-title .el-radio{
+    line-height: 40px;
+  }
+}
+
+</style>

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

@@ -2,9 +2,13 @@
 <template>
   <div v-loading="loading">
     <div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
-      <el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
+      <el-card shadow="always" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
+       :class="{
+        'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
+        'running-card-container':baseInfo.workStatus === '0'
+      }">
         <div slot="header">
-          <span class="large-title">{{index+1}}#{{baseInfo.deviceName}}</span>
+          <span class="large-title">{{index+1}}#{{baseInfo.parentDeviceName?`${baseInfo.parentDeviceName} —> ` : ''}}{{baseInfo.deviceName}}</span>
         </div>
           <div class="descriptions-main">
             <el-descriptions direction="vertical" :column="3" :colon="false">
@@ -15,14 +19,18 @@
           </div>
           <div class="descriptions-main descriptions-main-bg-color">
             <el-descriptions direction="vertical" :column="3" :colon="false">
-              <el-descriptions-item  labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
+              <el-descriptions-item  labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">
+                <span class="pointer" @click="showChart(item.pointName || '','电池簇',baseInfo.deviceId)">
+                {{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
+              </span>
+              </el-descriptions-item>
             </el-descriptions>
             <!--        进度-->
             <div class="process-container">
               <div class="process-line-bg">
-                <div class="process-line":style="{height:baseInfo.currentSoc+'%'}"></div>
+                <div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
               </div>
-              <div class="process">当前SOC :  {{baseInfo.currentSoc}}%</div>
+              <div class="process pointer" @click="showChart( '当前SOC','电池簇',baseInfo.deviceId)">当前SOC :  {{baseInfo.currentSoc}}%</div>
             </div>
           </div>
         <el-table
@@ -41,10 +49,16 @@
             prop="avgData"
             label="单体平均值"
           >
+            <template slot-scope="scope">
+              <span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.avgData}}</span>
+            </template>
           </el-table-column>
           <el-table-column
             prop="minData"
             label="单体最小值">
+            <template slot-scope="scope">
+              <span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.minData}}</span>
+            </template>
           </el-table-column>
           <el-table-column
             prop="minDataID"
@@ -53,6 +67,9 @@
           <el-table-column
             prop="maxData"
             label="单体最大值">
+            <template slot-scope="scope">
+              <span class="pointe " @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.maxData}}</span>
+            </template>
           </el-table-column>
           <el-table-column
             prop="maxDataID"
@@ -62,17 +79,20 @@
       </el-card>
     </div>
     <el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
+    <point-chart ref="pointChart" :site-id="siteId"/>
   </div>
 
 </template>
 
 <script>
+import pointChart from "./../PointChart.vue";
 import {getBMSBatteryCluster} from '@/api/ems/dzjk'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
 export default {
   name:'DzjkSbjkBmsdcc',
-  mixins:[getQuerySiteId],
+  mixins:[getQuerySiteId,intervalUpdate],
-  components:{},
+  components:{pointChart},
   data() {
     return {
       loading:false,
@@ -81,27 +101,45 @@ export default {
         '温度':'&#8451;',
         'SOC':'%'
       },
+      tablePointNameMap:{
+        '电压单体最小值':'最低单体电压',
+        '电压单体平均值':'电压平均值',
+        '电压单体最大值':'最高单体电压',
+        '温度单体最小值':'最低单体温度',
+        '温度单体平均值':'温度平均值',
+        '温度单体最大值':'最高单体温度',
+        'SOC单体最小值':'最低单体SOC',
+        'SOC单体平均值':'当前SOC',
+        'SOC单体最大值':'最高单体SOC',
+      },
       baseInfoList:[],
       infoData:[
-        {label:'簇电压',attr:'clusterVoltage',unit:'V'},
+        {label:'簇电压',attr:'clusterVoltage',unit:'V',pointName:'簇电压'},
-        {label:'可充电量',attr:'chargeableCapacity',unit:'kWh'},
+        {label:'可充电量',attr:'chargeableCapacity',unit:'kWh',pointName:'可充电量'},
-        {label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh'},
+        {label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh',pointName:'累计充电量'},
-        {label:'簇电流',attr:'clusterCurrent',unit:'A'},
+        {label:'簇电流',attr:'clusterCurrent',unit:'A',pointName:'簇电流'},
-        {label:'可放电量',attr:'dischargeableCapacity',unit:'kWh'},
+        {label:'可放电量',attr:'dischargeableCapacity',unit:'kWh',pointName:'可放电量'},
-        {label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh'},
+        {label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh',pointName:'累计放电量'},
-        {label:'SOH',attr:'soh',unit:'%'},
+        {label:'SOH',attr:'soh',unit:'%',pointName:'SOH'},
-        {label:'平均温度',attr:'averageTemperature',unit:'&#8451;'},
+        {label:'平均温度',attr:'averageTemperature',unit:'&#8451;',pointName:'平均温度'},
-        {label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;'},
+        {label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;',pointName:'绝缘电阻'},
       ],
     }
   },
   methods:{
-    init(){
+    showChart(pointName,categoryName,deviceId){
+      console.log('点击查询图表',pointName,categoryName,deviceId)
+      pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
+    },
+    updateData(){
       this.loading = true
       getBMSBatteryCluster(this.siteId).then(response => {
         this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
       }).finally(() => {this.loading = false})
-
+    },
+    init(){
+      this.updateData()
+      this.updateInterval(this.updateData)
     }
   }
 }

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

@@ -2,145 +2,165 @@
 <template>
   <div v-loading="loading">
     <div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
-      <el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
+      <el-card :class="{
+        'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
+        'running-card-container':baseInfo.workStatus === '0'
+      }" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
+               shadow="always">
         <div slot="header">
           <span class="large-title">{{index+1}}#{{baseInfo.deviceName}}</span>
         </div>
         <div class="descriptions-main">
-          <el-descriptions direction="vertical" :column="3" :colon="false">
+          <el-descriptions :colon="false" :column="3" direction="vertical">
-            <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 :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
+            <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="与PCS通信" labelClassName="descriptions-label">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
+            <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="与EMS通信" labelClassName="descriptions-label">{{$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 :colon="false" :column="3" direction="vertical">
-            <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-item  v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1" contentClassName="descriptions-direction" labelClassName="descriptions-label">
+              <span  class="pointer" @click="showChart(item.pointName || '','电池堆',baseInfo.deviceId)">
+                {{baseInfo[item.attr] | formatNumber}}<span v-if="item.unit" v-html="item.unit"></span>
+              </span>
+            </el-descriptions-item>
           </el-descriptions>
           <!--        进度-->
           <div class="process-container">
             <div class="process-line-bg">
-              <div class="process-line" :style="{height:baseInfo.stackSoc+'%'}"></div>
+              <div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
             </div>
-            <div class="process">当前SOC : {{baseInfo.stackSoc}}%</div>
+            <div class="process pointer" @click="showChart('当前SOC','电池堆',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
           </div>
         </div>
         <el-table
-          class="common-table"
           :data="baseInfo.batteryDataList"
-          stripe
+          class="common-table"
           max-height="500"
+          stripe
           style="width: 100%;margin-top:25px;">
           <el-table-column
-            prop="clusterId"
+            label="簇号"
-            label="簇号">
+            prop="clusterId">
           </el-table-column>
           <el-table-column
             label="簇电压"
           >
             <template slot-scope="scope">
-              <span>{{scope.row.clusterVoltage}} V</span>
+              <span class="pointer" @click="showChart('簇电压','电池簇',scope.row.clusterId)">{{scope.row.clusterVoltage}} V</span>
             </template>
           </el-table-column>
           <el-table-column
             label="簇电流">
             <template slot-scope="scope">
-              <span>{{scope.row.clusterCurrent}} A</span>
+              <span class="pointer" @click="showChart('簇电流','电池簇',scope.row.clusterId)">{{scope.row.clusterCurrent}} A</span>
             </template>
           </el-table-column>
           <el-table-column
             label="簇SOC">
             <template slot-scope="scope">
-              <span>{{scope.row.currentSoc}} %</span>
+              <span class="pointer" @click="showChart('当前SOC','电池簇',scope.row.clusterId)">{{scope.row.currentSoc}} %</span>
             </template>
           </el-table-column>
           <el-table-column
-            prop="maxVoltage"
+            label="单体最高电压"
-            label="单体最高电压">
+            prop="maxVoltage">
             <template slot-scope="scope">
-              <span>{{scope.row.maxCellVoltage}} V</span>
+              <span class="pointer" @click="showChart('最高单体电压','电池簇',scope.row.clusterId)">{{scope.row.maxCellVoltage}} V</span>
             </template>
           </el-table-column>
           <el-table-column
-            prop="maxCellVoltageId"
+            label="电池号码"
-            label="电池号码">
+            prop="maxCellVoltageId">
           </el-table-column>
           <el-table-column
-            prop="minVoltage"
+            label="单体最低电压"
-            label="单体最低电压">
+            prop="minVoltage">
             <template slot-scope="scope">
-              <span>{{scope.row.minCellVoltage}} V</span>
+              <span class="pointer" @click="showChart('最低单体电压','电池簇',scope.row.clusterId)">{{scope.row.minCellVoltage}} V</span>
             </template>
           </el-table-column>
           <el-table-column
-            prop="minCellVoltageId"
+            label="电池号码"
-            label="电池号码">
+            prop="minCellVoltageId">
           </el-table-column>
           <el-table-column
             label="单体最高温度">
             <template slot-scope="scope">
-              <span>{{scope.row.maxCellTemp}} &#8451;</span>
+              <span class="pointer" @click="showChart('最高单体温度','电池簇',scope.row.clusterId)">{{scope.row.maxCellTemp}} &#8451;</span>
             </template>
           </el-table-column>
           <el-table-column
-            prop="maxCellTempId"
+            label="电池号码"
-            label="电池号码">
+            prop="maxCellTempId">
           </el-table-column>
           <el-table-column
-            prop="minTemperature"
+            label="单体最低温度"
-            label="单体最低温度">
+            prop="minTemperature">
             <template slot-scope="scope">
-              <span>{{scope.row.minCellTemp}} &#8451;</span>
+              <span class="pointer" @click="showChart('最低单体温度','电池簇',scope.row.clusterId)">{{scope.row.minCellTemp}} &#8451;</span>
             </template>
           </el-table-column>
           <el-table-column
-            prop="minCellTempId"
+            label="电池号码"
-            label="电池号码">
+            prop="minCellTempId">
           </el-table-column>
 
         </el-table>
       </el-card>
     </div>
     <el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
+    <point-chart ref="pointChart" :site-id="siteId"/>
   </div>
 </template>
 
 <script>
 import {getBMSOverView} from '@/api/ems/dzjk'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
+import pointChart from "./../PointChart.vue";
 export default {
   name:'DzjkSbjkBmszl',
-  mixins:[getQuerySiteId],
+  components: {pointChart,},
+  mixins:[getQuerySiteId,intervalUpdate],
   data() {
     return {
       loading:false,
       baseInfoList:[],
       infoData:[
-        {label:'电池堆总电压',attr:'stackVoltage',unit:'V'},
+        {label:'电池堆总电压',attr:'stackVoltage',unit:'V',pointName:'电池堆电压'},
-        {label:'可充电量',attr:'availableChargeCapacity',unit:'kWh'},
+        {label:'可充电量',attr:'availableChargeCapacity',unit:'kWh',pointName:'可充电量'},
-        {label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh'},
+        {label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh',pointName:'累计充电量'},
-        {label:'电池堆总电流',attr:'stackCurrent',unit:'A'},
+        {label:'电池堆总电流',attr:'stackCurrent',unit:'A',pointName:'电池堆总电流'},
-        {label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh'},
+        {label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh',pointName:'可放电量'},
-        {label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh'},
+        {label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh',pointName:'累计放电量'},
-        {label:'SOH',attr:'stackSoh',unit:'%'},
+        {label:'SOH',attr:'stackSoh',unit:'%',pointName:'SOH'},
-        {label:'平均温度',attr:'operatingTemp',unit:'&#8451;'},
+        {label:'平均温度',attr:'operatingTemp',unit:'&#8451;',pointName:'平均温度'},
-        {label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;'},
+        {label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;',pointName:'绝缘电阻'},
       ]
     }
   },
   methods:{
-    init(){
+    showChart(pointName,categoryName,deviceId){
-      this.loading=true;
+      console.log('点击查询图表',pointName,categoryName,deviceId)
+      pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
+    },
+    updateData(){
+      this.loading = true
       getBMSOverView(this.siteId).then(response => {
         this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
       }).finally(() => {this.loading = false})
+    },
+    init(){
+      this.updateData()
+      this.updateInterval(this.updateData)
     }
 
   }
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 ::v-deep {
   //描述列表样式
   .descriptions-main {

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

@@ -2,16 +2,15 @@
   <div v-loading="loading">
     <el-card
       shadow="always"
-      class="common-card-container"
+      class="sbjk-card-container"
-      :class="
+      :class="{
-        zbInfo.emsCommunicationStatus !== '0'
+        'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
-          ? 'zb-common-card-container'
+        'running-card-container':zbInfo.emsCommunicationStatus === '0'
-          : 'cnb-common-card-container'
+      }"
-      "
     >
       <div slot="header">
         <span class="large-title">1#{{ zbInfo.deviceName }}</span>
-        <div class="status">
+        <div class="info">
           <div>
             {{
               $store.state.ems.communicationStatusOptions[
@@ -25,6 +24,7 @@
       <el-table
         class="common-table"
         :data="zbInfo.loadDataDetailInfo"
+        @cell-click="(row,col)=>{handlerCell(zbInfo.deviceId,row,col)}"
         stripe
         style="width: 100%"
       >
@@ -38,17 +38,16 @@
     </el-card>
     <el-card
       shadow="always"
-      class="common-card-container"
+      class="sbjk-card-container"
       style="margin-top: 20px"
-      :class="
+      :class="{
-        cnbInfo.emsCommunicationStatus !== '0'
+        'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
-          ? 'zb-common-card-container'
+        'running-card-container':zbInfo.emsCommunicationStatus === '0'
-          : 'cnb-common-card-container'
+      }"
-      "
     >
       <div slot="header">
         <span class="large-title">2#{{ cnbInfo.deviceName }}</span>
-        <div class="status">
+        <div class="info">
           <div>
             {{
               $store.state.ems.communicationStatusOptions[
@@ -62,6 +61,7 @@
       <el-table
         class="common-table"
         :data="cnbInfo.meteDataDetailInfo"
+        @cell-click="(row,col)=>{handlerCellCN(cnbInfo.deviceId,row,col)}"
         stripe
         style="width: 100%"
       >
@@ -71,15 +71,19 @@
         </el-table-column>
       </el-table>
     </el-card>
+    <point-chart ref="pointChart" :site-id="siteId"/>
   </div>
 </template>
 
 <script>
+import pointChart from "./../PointChart.vue";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import { getAmmeterDataList } from "@/api/ems/dzjk";
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
 export default {
   name: "DzjkSbjkDb",
-  mixins: [getQuerySiteId],
+  mixins: [getQuerySiteId,intervalUpdate],
+  components:{pointChart},
   data() {
     return {
       loading: false,
@@ -88,20 +92,42 @@ export default {
     };
   },
   methods: {
-    init() {
+    handlerCell(id,row,column){
+      if(column.label !== '类别'){
+        const arr = row.category.split('')
+        arr.splice(6,0,column.label[0])
+        this.showChart(arr.join(''),'电表',id)
+      }
+    },
+    handlerCellCN(id,row,column){
+      if(column.label !== '类别'){
+        const arr = row.category.split('')
+        arr.splice(2,arr.length-2,column.label)
+        this.showChart(arr.join(''),'电表',id)
+      }
+    },
+    showChart(pointName,categoryName,deviceId){
+      console.log('点击查询图表',pointName,categoryName,deviceId)
+      pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
+    },
+    updateData(){
       this.loading = true;
       getAmmeterDataList(this.siteId)
-        .then((response) => {
+          .then((response) => {
-          this.zbInfo = JSON.parse(
+            this.zbInfo = JSON.parse(
-            JSON.stringify(response?.data?.ammeterLoadData || {})
+                JSON.stringify(response?.data?.ammeterLoadData || {})
-          );
+            );
-          this.cnbInfo = JSON.parse(
+            this.cnbInfo = JSON.parse(
-            JSON.stringify(response?.data?.ammeterMeteData || {})
+                JSON.stringify(response?.data?.ammeterMeteData || {})
-          );
+            );
-        })
+          })
-        .finally(() => {
+          .finally(() => {
-          this.loading = false;
+            this.loading = false;
-        });
+          });
+    },
+    init() {
+      this.updateData()
+      this.updateInterval(this.updateData)
     },
   },
   mounted() {},
@@ -109,32 +135,16 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.zb-common-card-container,
+.common-card-container {
-.cnb-common-card-container {
   ::v-deep {
-    .el-card__header {
+    .el-table__row td{
-      padding: 10px 14px;
+      &:not(:first-child){
-      background-color: #fc6b69;
+        .cell{
-      color: #ffffff;
+          cursor: pointer;
-      position: relative;
+        }
+      }
     }
   }
 }
-.cnb-common-card-container {
+
-  margin-top: 25px;
-  ::v-deep {
-    .el-card__header {
-      background-color: #05aea3;
-    }
-  }
-}
-.status {
-  position: absolute;
-  right: 14px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #ffffff;
-  font-size: 12px;
-  line-height: 20px;
-}
 </style>

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

@@ -2,7 +2,7 @@
   <el-card
     v-loading="loading"
     shadow="always"
-    class="common-card-container common-card-container-no-title-bg"
+    class="sbjk-card-container common-card-container-no-title-bg running-card-container"
   >
     <div slot="header">
       <span class="large-title">单体电池实时数据</span>

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

@@ -1,141 +1,112 @@
 
 <template>
-  <div class="pcs-ems-dashboard-editor-container" v-loading="loading">
+  <div v-loading="loading" class="pcs-ems-dashboard-editor-container">
 <!--    顶部六个方块-->
     <real-time-base-info :data="runningHeadData"/>
-<!--    内容-->
+    <div v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'" style="margin-bottom:25px;">
-    <el-container class="pcs-container" v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'">
+    <el-card :class="{
-<!--      背景颜色根据工作状态来展示-->
+        'warning-card-container':pcsItem.workStatus === '1',
-      <el-header class="pcs-header" :class="pcsItem.workStatus === '1' ? 'warn' : pcsItem.workStatus === '2' ? 'close' : ''">
+        'timing-card-container':pcsItem.workStatus === '2',
-        <div class="pcs-title">{{pcsItem.deviceName}}</div>
+        'running-card-container':!['1','2'].includes(pcsItem.workStatus)
-        <div class="pcs-status">
+      }" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
-          <div>{{$store.state.ems.communicationStatusOptions[pcsItem.communicationStatus]}}</div>
+             shadow="always">
-          <div>数据更新时间：{{pcsItem.dataUpdateTime}}</div>
+        <div slot="header">
+          <span class="large-title">{{pcsIndex+1}}#{{pcsItem.deviceName}}</span>
+          <div class="info">
+            <div>
+              {{
+                $store.state.ems.communicationStatusOptions[
+                    pcsItem.communicationStatus
+                    ]
+              }}
+            </div>
+            <div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
+          </div>
+          <div class="alarm">
+            <el-badge :value="pcsItem.alarmNum || 0" class="item">
+              <i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i>
+            </el-badge>
+          </div>
         </div>
-       <div class="pcs-btns">
+      <div class="descriptions-main">
-        <el-badge :value="pcsItem.alarmNum || 0" class="item">
+        <el-descriptions :colon="false" :column="4" direction="vertical">
-          <i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i>
+          <el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
-        </el-badge>
+          <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="并网状态" labelClassName="descriptions-label">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
-       </div>
+          <el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态" labelClassName="descriptions-label">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
-      </el-header>
+          <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="控制模式" labelClassName="descriptions-label">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
-      <el-main style="padding: 0">
+        </el-descriptions>
-        <div class="descriptions-main">
+      </div>
-          <el-descriptions direction="vertical" :column="4" :colon="false">
+      <div class="descriptions-main descriptions-main-bg-color">
-            <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 :colon="false" :column="4" contentClassName="descriptions-direction" direction="vertical" labelClassName="descriptions-label">
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="并网状态">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
+          <el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1">
-            <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>
+              <span  class="pointer" @click="showChart(item.pointName || '','PCS',pcsItem.deviceId)">
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="控制模式">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
+                {{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
-          </el-descriptions>
+              </span>
-        </div>
+          </el-descriptions-item>
-        <div class="descriptions-main descriptions-main-bg-color">
+        </el-descriptions>
-          <el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction" direction="vertical" :column="4" :colon="false">
+      </div>
-            <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>
+      <div v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'" class="descriptions-main">
-          </el-descriptions>
+        <el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction keep" direction="vertical" labelClassName="descriptions-label">
-        </div>
+          <el-descriptions-item :label="'支路'+(index+1)" :span="4"  contentClassName="descriptions-direction keep" labelClassName="descriptions-label">{{item.dischargeStatus}}</el-descriptions-item>
-        <div class="descriptions-main" v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'">
+          <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="直流功率" labelClassName="descriptions-label">
-          <el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction keep" direction="vertical" :column="4" :colon="false">
+            <span class="pointer" @click="showChart('直流功率','PCS分支设备',item.deviceId)">{{item.dcPower}}kW</span>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep"  :span="4" :label="'支路'+(index+1)">{{item.dischargeStatus}}</el-descriptions-item>
+          </el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流功率">{{item.dcPower}}kW</el-descriptions-item>
+          <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="直流电压" labelClassName="descriptions-label">
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流电压">{{item.dcVoltage}}V</el-descriptions-item>
+            <span class="pointer" @click="showChart('直流电压','PCS分支设备',item.deviceId)">{{item.dcVoltage}}V</span>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流电流">{{item.dcCurrent}}A</el-descriptions-item>
+          </el-descriptions-item>
-          </el-descriptions>
+          <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="直流电流" labelClassName="descriptions-label">
-        </div>
+            <span class="pointer" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span>
-      </el-main>
+          </el-descriptions-item>
-    </el-container>
+        </el-descriptions>
+      </div>
+      </el-card>
+    </div>
     <el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty>
-
+<!--    电位图表 showChart({pointName:点位名称,categoryName:设备名称})-->
+    <point-chart ref="pointChart" :site-id="siteId"/>
   </div>
 </template>
 
 <script>
+import pointChart from "./../PointChart.vue";
 import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk'
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
 export default {
   name:'DzjkSbjkPcs',
-  components:{RealTimeBaseInfo},
+  components:{RealTimeBaseInfo,pointChart},
-  mixins:[getQuerySiteId],
+  mixins:[getQuerySiteId,intervalUpdate],
   data() {
     return {
       loading:false,
       runningHeadData:{},//运行信息
       pcsList:[],
       infoData:[
-        {label:'总交流有功电率',attr:'totalActivePower',unit:'kW'},
+        {label:'总交流有功电率',attr:'totalActivePower',unit:'kW',pointName:'总交流有功电率'},
-        {label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh'},
+        {label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh',pointName:'当天交流充电量 (kWh)'},
-        {label:'A相电压',attr:'aPhaseVoltage',unit:'V'},
+        {label:'A相电压',attr:'aPhaseVoltage',unit:'V',pointName:''},
-        {label:'A相电流',attr:'aPhaseCurrent',unit:'A'},
+        {label:'A相电流',attr:'aPhaseCurrent',unit:'A',pointName:'A相电流'},
-        {label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar'},
+        {label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar',pointName:'总交流无功电率'},
-        {label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh'},
+        {label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh',pointName:'当天交流放电量 (kWh)'},
-        {label:'B相电压',attr:'bPhaseVoltage',unit:'V'},
+        {label:'B相电压',attr:'bPhaseVoltage',unit:'V',pointName:''},
-        {label:'B相电流',attr:'bPhaseCurrent',unit:'A'},
+        {label:'B相电流',attr:'bPhaseCurrent',unit:'A',pointName:'B相电流'},
-        {label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA'},
+        {label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA',pointName:'总交流视在功率'},
-        {label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;'},
+        {label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;',pointName:''},
-        {label:'C相电压',attr:'cPhaseVoltage',unit:'V'},
+        {label:'C相电压',attr:'cPhaseVoltage',unit:'V',pointName:''},
-        {label:'C相电流',attr:'cPhaseCurrent',unit:'A'},
+        {label:'C相电流',attr:'cPhaseCurrent',unit:'A',pointName:'C相电流'},
-        {label:'总交流功率因数',attr:'totalPowerFactor',unit:''},
+        {label:'总交流功率因数',attr:'totalPowerFactor',unit:'',pointName:'总交流功率因数'},
-        {label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;'},
+        {label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;',pointName:''},
-        {label:'交流频率',attr:'acFrequency',unit:'Hz'}
+        {label:'交流频率',attr:'acFrequency',unit:'Hz',pointName:'交流频率'}
       ],
       pcsBranchList:[],//pcs的支路列表
     }
   },
   methods:{
-    problemSaved(){
+    //todo 后续需要新增设备id
-      this.$confirm('确认故障已复位?', {
+    showChart(pointName,categoryName,deviceId){
-        confirmButtonText: '确定',
+      console.log('点击查询图表',pointName,categoryName,deviceId)
-        cancelButtonText: '取消',
+      pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
-        showClose:false,
-        closeOnClickModal:false,
-        type: 'warning',
-        beforeClose: (action, instance, done) => {
-          if (action === 'confirm') {
-            instance.confirmButtonLoading = true;
-            setTimeout(() => {
-              done();
-              instance.confirmButtonLoading = false;
-            }, 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(() => {
-              done();
-              instance.confirmButtonLoading = false;
-            }, 3000);
-          } else {
-            done();
-          }
-        }
-      }).then(() => {
-        //只有在关机成功的情况下会走到这里
-        this.$message({
-          type: 'success',
-          message: '关机成功!'
-        });
-      }).catch(() => {
-        //取消关机
-      });
     },
     //6个方块数据
     getRunningHeadData(){
@@ -150,54 +121,18 @@ export default {
         this.pcsList = JSON.parse(JSON.stringify(data))
       }).finally(()=>this.loading = false)
     },
-    init(){
+    updateData(){
       this.getRunningHeadData()
       this.getPcsList()
+    },
+    init(){
+      this.updateData()
+      this.updateInterval(this.updateData)
     }
   },
 
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
-.pcs-container{
-  margin-top: 25px;
-  border:1px solid #eeeeee;
-  border-radius: 6px 6px 0 0;
-  //红色标题
-  .pcs-header{
-    background: #05AEA3;
-    display: flex;
-    position: relative;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0;
-    height: 60px;
-    border-radius: 6px 6px 0 0;
-    .pcs-title{
-      color: #ffffff;
-      font-size: 20px;
-      font-weight: 500;
-      line-height: 20px;
-      padding: 0 50px 0 25px;
-    }
-    .pcs-status{
-      color: #ffffff;
-      font-size: 12px;
-      line-height: 20px;
-    }
-    .pcs-btns{
-      position: absolute;
-      right: 25px;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-  }
-  .pcs-header.warn{
-    background-color:#FC6B69 ;
-  }
-  .pcs-header.close{
-    background-color:#666666 ;
-  }
-}
 </style>

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

@@ -34,11 +34,12 @@ import DcpjwdChart from './DcpjwdChart.vue'
 import DcpjsocChart from './DcpjsocChart.vue'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import {getRunningHeadInfo} from '@/api/ems/dzjk'
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
 
 export default {
   name:'DzjkSbjkSsyx',
   components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
-  mixins:[getQuerySiteId],
+  mixins:[getQuerySiteId,intervalUpdate],
   data() {
     return {
       runningHeadData:{},//运行信息
@@ -51,15 +52,18 @@ export default {
         this.runningHeadData = response?.data || {}
       })
     },
+    updateData(){
+      this.$refs.cnglqx.init(this.siteId)
+      this.$refs.pocpjwd.init(this.siteId)
+      this.$refs.dcpjsoc.init(this.siteId)
+      this.$refs.dcpjwd.init(this.siteId)
+    },
     init(){
       this.getRunningHeadData()
       this.$nextTick(()=>{
-        this.$refs.cnglqx.init(this.siteId)
+        this.updateData()
-        this.$refs.pocpjwd.init(this.siteId)
+        this.updateInterval(this.updateData)
-        this.$refs.dcpjsoc.init(this.siteId)
-        this.$refs.dcpjwd.init(this.siteId)
       })
-
     }
   }
 

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

@@ -1,7 +1,7 @@
 
 <template>
     <div v-loading="loading">
-      <div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
+      <div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0','yl-normal-item-container':item.workMode === '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
         <div class="header">
           <div class="header-title">{{item.systemName}}</div>
           <div>工作模式：<span class="header-values">{{$store.state.ems.workModeOptions[item.workMode]}}</span></div>
@@ -21,9 +21,10 @@
 <script>
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import {getCoolingDataList} from '@/api/ems/dzjk'
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
 export default {
   name:'DzjkSbjkYl',
-  mixins:[getQuerySiteId],
+  mixins:[getQuerySiteId,intervalUpdate],
   data() {
     return {
       loading:false,
@@ -40,11 +41,15 @@ export default {
     }
   },
   methods:{
-    init(){
+    updateData(){
       this.loading = true
       getCoolingDataList(this.siteId).then(response => {
         this.list =  JSON.parse(JSON.stringify(response?.data || []));
       }).finally(() => {this.loading = false})
+    },
+    init(){
+      this.updateData()
+      this.updateInterval(this.updateData)
     }
   },
   mounted(){
@@ -56,7 +61,6 @@ export default {
 <style scoped lang="scss">
 .yl-item-container{
   border-radius: 5px;
-  background-color: #EBF6F6;
   &:not(:last-child){
     margin-bottom: 25px;
   }
@@ -73,11 +77,9 @@ export default {
       width: 120px;
       height: 40px;
       font-size: 16px;
-      background-color: #05AEA3;
       text-align: center;
     }
     .header-values{
-      color: #05AEA3;
       font-weight: 500;
     }
   }
@@ -113,5 +115,16 @@ export default {
     }
   }
 }
+.yl-normal-item-container{
+  background-color: #EBF6F6;
+  .header{
+    .header-title{
+      background-color: #05AEA3;
+    }
+    .header-values{
+      color: #05AEA3;
+    }
+  }
+}
 
 </style>

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

@@ -3,11 +3,11 @@
   <div v-loading="loading">
     <div class="select-container">
       <el-form :inline="true">
-        <el-form-item label="电池堆">
+<!--        <el-form-item label="电池堆">-->
-          <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+<!--          <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
-            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>
+<!--            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
-          </el-select>
+<!--          </el-select>-->
-        </el-form-item>
+<!--        </el-form-item>-->
         <el-form-item label="时间选择">
           <el-date-picker
             v-model="dateRange"
@@ -62,14 +62,14 @@ export default {
       defaultDateRange:[],//默认展示的时间
       dateRange:[],
       loading:false,
-      pcs:'',
+      // pcs:'',
-      pcsOptions: [],
+      // pcsOptions: [],
       activeBtn:'1',
       btnList:[
-        {name:'堆平均维度',id:'1',attr:['temp'],source:[['日期','有功功率']]},
+        {name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
-        {name:'堆电压',id:'2',attr:['voltage'],source:[['日期','堆电压']]},
+        {name:'堆电压',id:'2',attr:['voltage'],source:['堆电压']},
-        {name:'堆电流',id:'3',attr:['current'],source:[['日期','堆电流']]},
+        {name:'堆电流',id:'3',attr:['current'],source:['堆电流']},
-        {name:'堆soc',id:'4',attr:['soc'],source:[['日期','堆soc']]},
+        {name:'堆soc',id:'4',attr:['soc'],source:['堆soc']},
       ],
     }
   },
@@ -90,41 +90,71 @@ export default {
       this.dateRange=''
       this.getData()
     },
-    getPcsList(){
+    // getPcsList(){
-      return getStackNameList(this.siteId).then(response => {
+    //   return getStackNameList(this.siteId).then(response => {
-        const data = JSON.parse(JSON.stringify(response?.data || []))
+    //     const data = JSON.parse(JSON.stringify(response?.data || []))
-        this.pcsOptions = data
+    //     this.pcsOptions = data
-        this.pcs = data.length>0?data[0].id:'';
+    //     this.pcs = data.length>0?data[0].id:'';
-      })
+    //   })
-    },
+    // },
     getData(){
-      const {siteId,pcs,activeBtn}=this;
+      const {siteId,activeBtn}=this;
       const [start='',end='']=(this.dateRange || [])
-      if(!pcs) return
       //接口调用完成之后 设置图表、结束loading
       this.loading=true;
-       getStackData({siteId,deviceId:pcs,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
+       getStackData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
         this.setOption(response?.data || [])
       }).finally(()=>{this.loading=false;})
-
+    },
+    compareDate(date1,date2){
+      console.log('比较时间',date1,date2)
+      // 年2025-09/天2025-09-15/时2025-09-15/10:00
+      if(date1.indexOf(':') > -1 && date2.indexOf(':') > -1){
+        return parseInt(date1) - parseInt(date2)
+      }
+      const [date1_Y='',date1_M='',date1_D=''] = date1.split('-')//根据空格区分[年月日,小时]
+      const [date2_Y='',date2_M='',date2_D=''] = date2.split('-')//根据空格区分[年月日,小时]
+      return (date1_Y === date2_Y && date1_M === date2_M && date1_D - date2_D) || (date1_Y === date2_Y && date1_M - date2_M) || date1_Y - date2_Y
     },
     setOption(data) {
       const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
-      const source = JSON.parse(JSON.stringify(ele.source))
+      const sourceBase = JSON.parse(JSON.stringify(ele.source))
-      const length = ele.attr.length
+      // sourceBase={name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
-      const series = []
+      const source=[]
+      const sourceTop = ['日期']
+      let map={},mapArr=[]
+      // 生成所有{日期:[],日期:[]}格式的对象和所有包含所有日期的[日期1,日期2...]
       data.forEach((item)=>{
-        const arr = ele.attr.map(key=>item[key])
+        item.dataList.forEach((inner)=>{
-        source.push([item.statisDate,...arr])
+          // 日期格式
-      })
+          // 年2025-09/天2025-09-15/时2025-09-15/10:00
-      ele.attr.forEach((item)=>{
+          // 所有数据的日期格式一致
-        series.push({
+          if(!map[inner.statisDate]) {
-          name:length>1?item:ele.name,
+            map[inner.statisDate] = []
-          type:ele.type || 'scatter'
+            mapArr.push(inner.statisDate)
+          }
         })
       })
+      data.forEach((item,itemIndex)=>{
+        const dataTimeList = item.dataList.map(i =>i.statisDate)
+        const noDataTime = mapArr.filter(i=>!dataTimeList.includes(i))
+        sourceBase.forEach((outer,outerIndex)=>{
+          sourceTop.push(`${item.deviceId}-${outer}`)
+          noDataTime.forEach(i=>map[i].push(''))
+          item.dataList.forEach((inner,innerIndex)=>{
+            map[inner.statisDate].push(inner[ele.attr[outerIndex]])
+          })
+        })
+      })
+      mapArr = mapArr.sort((a,b)=>this.compareDate(a,b))
+      mapArr.forEach(item=>{
+        source.push([item,...map[item]])
+      })
+      source.unshift(sourceTop)
+      console.log('map=',map)
+      console.log('mapArr=',mapArr)
+      console.log('========',source)
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
         grid: {
           containLabel: true
         },
@@ -148,7 +178,11 @@ export default {
           type: 'value',
         },
         dataset: {source},
-        series
+        series:source[0].slice(1).map(item=>{
+          return {
+            type:ele.type || 'scatter'
+          }
+        })
       },true)
     },
     initChart() {
@@ -156,16 +190,10 @@ export default {
     },
     init(){
       this.loading = true
-      this.pcs=''
+      // this.pcs=''
-      this.pcsOptions=[]
+      // this.pcsOptions=[]
       this.initChart()
-      this.getPcsList().then(()=>{
+      this.onReset()
-        if(this.pcs){
-          this.onReset()
-        }else{
-          this.loading = false
-        }
-      })
     }
   },
   mounted(){

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

@@ -3,16 +3,6 @@
   <div v-loading="loading">
     <div class="select-container">
       <el-form :inline="true">
-<!--        <el-form-item label="网点">-->
-<!--          <el-select v-model="wd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
-<!--            <el-option :label="item.name" :value="item.id" v-for="(item,index) in wdOptions" :key="index+'sblxOptions'"></el-option>-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
-        <el-form-item label="PCS">
-          <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>
-          </el-select>
-        </el-form-item>
         <el-form-item label="时间选择">
           <el-date-picker
             v-model="dateRange"
@@ -33,15 +23,6 @@
       </el-form>
     </div>
     <div style="margin:30px 0;">
-      <!--        二个选择按钮-->
-      <el-row style="">
-        <el-col :xs="24" :sm="24" :lg="24">
-          <el-button-group class="ems-btns-group">
-            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
-          </el-button-group>
-        </el-col>
-      </el-row>
-      <!--echart-->
       <div id="glqxEchart" style="height:360px;"></div>
     </div>
   </div>
@@ -67,26 +48,9 @@ export default {
       defaultDateRange:[],//默认展示的时间
       dateRange:[],
       loading:false,
-      pcs:'',
-      pcsOptions: [],
-      activeBtn:'1',
-      btnList:[
-        {name:'电网功率',id:'1',attr:'gridPower'},
-        {name:'负载功率',id:'2',attr:'loadPower'},
-        {name:'储能功率',id:'3',attr:'storagePower'},
-        {name:'光伏功率',id:'4',attr:'pvPower'},
-      ],
-
     }
   },
   methods: {
-    changeDataType(id){
-      if(id !== this.activeBtn){
-        console.log('点击了不同的菜单，更新数据')
-        this.activeBtn=id;
-        this.getData()
-      }
-    },
     // 搜索
     onSearch(){
       this.getData()
@@ -96,31 +60,21 @@ export default {
       this.dateRange=[]
       this.getData()
     },
-    getPcsList(){
-      return getPcsNameList(this.siteId).then(response => {
-        const data = response?.data || [];
-        this.pcsOptions = data
-        this.pcs = data.length>0?data[0].id:'';
-      })
-    },
     getData(){
-      const {siteId,pcs,activeBtn}=this;
+      const {siteId}=this;
       const [start='',end='']=(this.dateRange || [])
-      if(!pcs) return
       //接口调用完成之后 设置图表、结束loading
       this.loading=true;
-      getPowerData({siteId,deviceId:pcs,startDate:formatDate(start),endDate:formatDate(end),dataType:activeBtn}).then(response => {
+      getPowerData({siteId,startDate:formatDate(start),endDate:formatDate(end)}).then(response => {
         this.setOption(response?.data || [])
       }).finally(()=>{this.loading=false;})
     },
     setOption(data) {
-      const {name,attr} =this.btnList.find(item=>item.id===this.activeBtn)
+      const source = [['日期','电网功率','负载功率','储能功率','光伏功率']]
-      const source = [['日期',name]]
+      data.forEach(item=>{
-      data.forEach((item,index)=>{
+        source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower])
-        source.push([item.statisDate,item[attr]])
       })
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
         grid: {
           containLabel: true
         },
@@ -146,7 +100,15 @@ export default {
         dataset:{source},
         series: [
           {
-            name,
+            type: 'scatter',
+          },
+          {
+            type: 'scatter',
+          },
+          {
+            type: 'scatter',
+          },
+          {
             type: 'scatter',
           }
         ]
@@ -157,16 +119,8 @@ export default {
     },
     init(){
       this.loading = true
-      this.pcs=''
-      this.pcsOptions=[]
       this.initChart()
-      this.getPcsList().then(()=>{
+      this.getData()
-        if(this.pcs){
-          this.onReset()
-        }else{
-          this.loading = false
-        }
-      })
     }
   },
   mounted(){

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

@@ -72,7 +72,6 @@ export default {
         source.push([item.ammeterDate, item.chargedCap,item.disChargedCap,item.dailyEfficiency])
       })
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF','#05AEA3'],
         legend: {
           left: 'center',
           bottom: '15',
@@ -110,18 +109,22 @@ export default {
         dataset:{
           source
         },
+        //所有充放电颜色保持统一
         series: [
           {
             yAxisIndex:0,
             type: 'bar',//柱状图
+            color:'#4472c4'
           },
           {
             yAxisIndex:0,
             type: 'bar',//柱状图
+            color:'#70ad47'
           },
           {
             yAxisIndex:1,
             type: 'line',//柱状图
+            color:'#FFBD00'
           },
         ]
       })

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

@@ -3,11 +3,11 @@
   <div v-loading="loading">
     <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-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
-            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>
+<!--            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
-          </el-select>
+<!--          </el-select>-->
-        </el-form-item>
+<!--        </el-form-item>-->
         <el-form-item label="时间选择">
           <el-date-picker
             v-model="dateRange"
@@ -62,15 +62,15 @@ export default {
       defaultDateRange:[],//默认展示的时间
       dateRange:[],
       loading:false,
-      pcs:'',
+      // pcs:'',
-      pcsOptions: [],
+      // pcsOptions: [],
       activeBtn:'1',
       btnList:[
-        {name:'有功功率',id:'1',attr:['activePower'],source:[['日期','有功功率']]},
+        {name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']},
-        {name:'无功功率',id:'2',attr:['reactivePower'],source:[['日期','无功功率']]},
+        {name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']},
         // {name:'温度',id:'wd'},
         // {name:'三相电压',id:'sxdy'},
-        {name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:[['日期','u电流','v电流','w电流']],type:'bar'},
+        {name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:['u电流','v电流','w电流'],type:'bar'},
       ],
 
     }
@@ -93,41 +93,72 @@ export default {
       this.dateRange=[]
       this.getData()
     },
-    getPcsList(){
+    // getPcsList(){
-      return getPcsNameList(this.siteId).then(response => {
+    //   return getPcsNameList(this.siteId).then(response => {
-        const data = response?.data || [];
+    //     const data = response?.data || [];
-        this.pcsOptions = data
+    //     this.pcsOptions = data
-        this.pcs = data.length>0?data[0].id:'';
+    //     this.pcs = data.length>0?data[0].id:'';
-      })
+    //   })
-    },
+    // },
     getData(){
-      const {siteId,pcs,activeBtn}=this;
+      const {siteId,activeBtn}=this;
       const [start='',end='']=(this.dateRange || [])
-      if(!pcs) return
       this.loading=true;
       //接口调用完成之后 设置图表、结束loading
-      getPCSData({siteId,deviceId:pcs,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
+      getPCSData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
         this.setOption(response?.data || [])
       }).finally(()=>{this.loading=false;})
 
     },
+    compareDate(date1,date2){
+      console.log('比较时间',date1,date2)
+      // 年2025-09/天2025-09-15/时2025-09-15/10:00
+      if(date1.indexOf(':') > -1 && date2.indexOf(':') > -1){
+        return parseInt(date1) - parseInt(date2)
+      }
+      const [date1_Y='',date1_M='',date1_D=''] = date1.split('-')//根据空格区分[年月日,小时]
+      const [date2_Y='',date2_M='',date2_D=''] = date2.split('-')//根据空格区分[年月日,小时]
+      return (date1_Y === date2_Y && date1_M === date2_M && date1_D - date2_D) || (date1_Y === date2_Y && date1_M - date2_M) || date1_Y - date2_Y
+    },
     setOption(data) {
       const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
-      const source = JSON.parse(JSON.stringify(ele.source))
+      const sourceBase = JSON.parse(JSON.stringify(ele.source))
-      const length = ele.attr.length
+      // sourceBase={name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
-      const series = []
+      const source=[]
+      const sourceTop = ['日期']
+      let map={},mapArr=[]
+      // 生成所有{日期:[],日期:[]}格式的对象和所有包含所有日期的[日期1,日期2...]
       data.forEach((item)=>{
-        const arr = ele.attr.map(key=>item[key])
+        item.dataList.forEach((inner)=>{
-        source.push([item.statisDate,...arr])
+          // 日期格式
-      })
+          // 年2025-09/天2025-09-15/时2025-09-15/10:00
-      ele.attr.forEach((item)=>{
+          // 所有数据的日期格式一致
-        series.push({
+          if(!map[inner.statisDate]) {
-          name:length>1?item:ele.name,
+            map[inner.statisDate] = []
-          type:ele.type || 'scatter'
+            mapArr.push(inner.statisDate)
+          }
         })
       })
+      data.forEach((item,itemIndex)=>{
+        const dataTimeList = item.dataList.map(i =>i.statisDate)
+        const noDataTime = mapArr.filter(i=>!dataTimeList.includes(i))
+        sourceBase.forEach((outer,outerIndex)=>{
+          sourceTop.push(`${item.deviceId}-${outer}`)
+          noDataTime.forEach(i=>map[i].push(''))
+          item.dataList.forEach((inner,innerIndex)=>{
+            map[inner.statisDate].push(inner[ele.attr[outerIndex]])
+          })
+        })
+      })
+      mapArr = mapArr.sort((a,b)=>this.compareDate(a,b))
+      mapArr.forEach(item=>{
+        source.push([item,...map[item]])
+      })
+      source.unshift(sourceTop)
+      console.log('map=',map)
+      console.log('mapArr=',mapArr)
+      console.log('========',source)
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF','#91cc74'],
         grid: {
           containLabel: true
         },
@@ -151,7 +182,11 @@ export default {
           type: 'value',
         },
         dataset: {source},
-        series
+        series:source[0].slice(1).map(item=>{
+          return {
+            type:ele.type || 'scatter'
+          }
+        })
 
       },true)
     },
@@ -160,18 +195,18 @@ export default {
     },
     init(){
       this.loading = true
-      this.pcs=''
+      // this.pcs=''
-      this.pcsOptions=[]
+      // this.pcsOptions=[]
-      this.dateRange =[]
       this.initChart()
-      this.getPcsList().then(()=>{
+      this.onReset()
-        if(this.pcs){
+      // this.getPcsList().then(()=>{
-          this.onReset()
+      //   if(this.pcs){
-        }else{
+      //     this.onReset()
-          this.loading=false;
+      //   }else{
-        }
+      //     this.loading=false;
-
+      //   }
-      })
+      //
+      // })
     }
   },
   mounted(){

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

@@ -112,11 +112,14 @@
                   >
                     {{ communicationStatusOptions[item.communicationStatus] }}
                   </div>
-                  <div class="row-items-img">
+                  <div class="row-items-img row-items-img-bms">
-                    <img
+                    <div style="position:relative;">
-                      class="img-bms"
+                      <img
-                      :src="require('@/assets/images/ems/bms.png')"
+                        class="img-bms"
-                    />
+                        :src="require('@/assets/images/ems/bms.png')"
+                      />
+                      <div class="num">{{item.batteryNum || 0}}</div>
+                    </div>
                     <div class="name">{{ item.deviceName }}</div>
                   </div>
                 </div>
@@ -179,11 +182,14 @@
                       ]
                     }}
                   </div>
-                  <div class="row-items-img">
+                  <div class="row-items-img row-items-img-bms">
-                    <img
+                    <div style="position: relative">
-                      class="img-pcs"
+                      <img
-                      :src="require('@/assets/images/ems/bms.png')"
+                        class="img-bms"
-                    />
+                        :src="require('@/assets/images/ems/bms.png')"
+                      />
+                      <div class="num">{{item.batteryNum || 0}}</div>
+                    </div>
                     <div class="name">{{ item.children[0].deviceName }}</div>
                   </div>
                 </div>
@@ -505,10 +511,26 @@ $lineColor: #86bcc7;
           .row-items-img {
             position: relative;
             padding-top: 12px;
+            &.row-items-img-bms{
+              padding-top: 14px;
+              .num{
+                position: absolute;
+                top: -2px;
+                right: -2px;
+                font-size: 10px;
+                line-height: 10px;
+                padding: 2px 4px;
+                text-align: center;
+                border-radius: 10px;
+                background-color: #03c69d;
+                color: #fff;
+              }
+            }
             img {
               width: 80px;
               height: auto;
               display: block;
+              position: relative;
               &.img-lq {
                 width: 50px;
               }

src/views/ems/search/DateTimeSelect.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="time-range">
+        <el-date-picker
+            v-model="dateRange"
+            :type="type"
+            range-separator="至"
+            start-placeholder="开始时间"
+            :format="valueFormat"
+            :value-format="valueFormat"
+            :clearable="false"
+            :picker-options="pickerOptions"
+            end-placeholder="结束时间">
+            </el-date-picker>
+            <el-button size="mini" style="margin-left: 10px;" :loading="loading" @click="reset">重置</el-button>
+            <el-button type="primary" size="mini" :loading="loading" @click="search">搜索</el-button>
+            <el-button type="primary" size="mini" :loading="loading" @click="timeLine('before')">上一时段</el-button>
+            <el-button type="primary" size="mini" :loading="loading" @click="timeLine('next')" :disabled="disabledNextBtn">下一时段</el-button>
+        </div>
+</template>
+
+<script>
+import {formatDate} from '@/filters/ems'
+export default {
+  props:{
+    dataUnit:{
+      type:Number,
+      default:1
+    }
+  },
+  computed:{
+    type(){
+      return this.dataUnit === 3 ? 'daterange' : 'datetimerange'
+    },
+    valueFormat(){
+      return this.dataUnit === 3 ? 'yyyy-MM-dd' :this.dataUnit === 2 ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd HH:mm:ss'
+    },
+    disabledNextBtn(){
+      if(this.dateRange && this.dateRange.length ===2){
+        return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
+      }else{
+        return true
+      }
+
+    }
+  },
+  data() {
+    return {
+      loading:false,
+      dateRange:[],
+      defaultDateRange:[],
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+    }
+  },
+  methods: {
+    init(){
+        const {dataUnit} = this
+        const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
+        const now = new Date(),formatNow = formatDate(now.getTime(),dataUnit !== 3 );
+        const timeAgo = formatDate(new Date(now.getTime() - timeDis),dataUnit !== 3)
+        this.dateRange = [timeAgo, formatNow];
+        this.defaultDateRange=[timeAgo, formatNow];
+        console.log('init',timeAgo,formatNow)
+        this.$emit('initDate',this.dateRange || [])
+    },
+    showBtnLoading(status){
+        this.loading = status
+    },
+    // 切换分、时、天 重置时间可选范围
+    resetDate(){
+      this.dateRange = this.defaultDateRange
+    },
+    //重置 设置时间范围为初始化时间段
+    reset(){
+        this.resetDate()
+        this.$emit('updateDate',this.dateRange || [])
+    },
+    // 搜索
+    search(){
+      if(this.dateRange && this.dateRange.length>0){
+        const {dataUnit} = this
+        const [start,end] = this.dateRange
+        const startTime = new Date(start),endTime=new Date(end)
+        const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
+        if(endTime - startTime > timeDis){
+          this.$message.error(`时间范围不能超过${dataUnit === 3 ? '30天' : dataUnit === 2 ? '24小时' : '1小时'}`)
+        }else{
+          this.$emit('updateDate',this.dateRange || [])
+        }
+      }else{
+        this.$emit('updateDate',this.dateRange || [])
+      }
+    },
+    timeLine(type){
+      if(!this.dateRange) return
+      //baseTime,maxTime 毫秒数
+      const baseTimes= this.dataUnit === 3 ? 24 * 60 * 60 * 1000 :this.dataUnit === 2 ? 60 * 60 * 1000 : 60 * 1000
+      const baseDis = this.dataUnit === 3 ? 30 :this.dataUnit === 2 ? 24 : 60
+      let baseTime = type === 'before' ? new Date(this.dateRange[0]).getTime() - baseTimes :new Date(this.dateRange[1]).getTime() + baseTimes  ,
+        maxTime = new Date(this.defaultDateRange[1]).getTime()
+      //updateTime 毫秒数
+      let updateTime = type === 'before' ? baseTime - baseDis * baseTimes : baseTime + baseDis * baseTimes
+      if(type === 'next' && updateTime >= maxTime) updateTime = maxTime
+      const start = formatDate(type === 'before' ? updateTime : baseTime,this.dataUnit !== 3)
+      const end = formatDate(type === 'before' ? baseTime : updateTime,this.dataUnit !== 3)
+      this.dateRange = [start,end]
+      this.$emit('updateDate',this.dateRange || [])
+    },
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.time-range{
+    display: flex;
+    ::v-deep {
+        .el-range-editor--medium .el-range__icon, .el-range-editor--medium .el-range__close-icon{
+          line-height: 22px;
+        }
+        .el-range-editor--medium.el-input__inner{
+            height: 30px;
+        }
+        .el-range-editor--medium .el-range-separator{
+            line-height: 24px;
+        }
+        .el-button--mini{
+            padding:3px 10px;
+        }
+    }
+
+}
+</style>

src/views/ems/search/index.vue

@@ -0,0 +1,340 @@
+<template>
+  <div v-loading="loading" class="ems-dashboard-editor-container" style="background-color: #ffffff">
+    <el-form ref="form" :model="form" label-position="top">
+      <el-form-item
+          label="站点"
+          prop="siteIds"
+          :rules="[{ required: true, message: '请选择站点' }]"
+      >
+        <el-radio-group v-model="form.siteIds" >
+          <el-radio  v-for="(item,index) in siteList" :key="index+'zdListSearch'" :label="item.siteId">
+            {{ item.siteName }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="设备" prop="categoryName" :rules="[{ required: true, message: '请选择设备' }]">
+        <el-radio-group v-model="form.categoryName" >
+          <el-radio v-for="(key,index) in deviceCategoryList" :key="index+'sbListSearch'" :label="key">
+            {{ key }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="isDtdc" label="单体电池(不超过5个)" prop="child" :rules="[{ required: true, message: '请选择单体电池' }]">
+        <el-cascader
+            v-model="form.child"
+            style="width:400px"
+            :props="{ multiple: true }"
+            :show-all-levels="false"
+            :options="childOptions"
+            @change="handleChildChange"></el-cascader>
+      </el-form-item>
+      <div style="display: flex">
+        <el-form-item label="点位" prop="pointName"  :rules="[{ required: true, message: '请输入点位' }]" style="margin-right: 50px">
+          <el-autocomplete
+              v-model="form.pointName"
+              placeholder="请输入点位"
+              clearable
+              :fetch-suggestions="querySearchAsync"
+              @select="handleSelect"
+          ></el-autocomplete>
+        </el-form-item>
+<!--        <el-form-item label="横坐标" prop="dataUnit" :rules="[{ required: true, message: '请选择横坐标' }]">-->
+<!--          <el-radio-group v-model="form.dataUnit">-->
+<!--            <el-radio :label="1">分钟</el-radio>-->
+<!--            <el-radio :label="2">小时</el-radio>-->
+<!--            <el-radio :label="3">天</el-radio>-->
+<!--          </el-radio-group>-->
+<!--        </el-form-item>-->
+      </div>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm">生成图表</el-button>
+      </el-form-item>
+    </el-form>
+    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
+      <div slot="header" class="time-range-header">
+        <span class="card-title">
+          <el-radio-group v-model="form.dataUnit">
+            <el-radio :label="1">分钟</el-radio>
+            <el-radio :label="2">小时</el-radio>
+            <el-radio :label="3">天</el-radio>
+          </el-radio-group>
+        </span>
+        <date-time-select ref="dateTimeSelect" :data-unit="form.dataUnit" @initDate="((e)=>form.dataRange=e||[])" @updateDate="updateDate"/>
+      </div>
+      <div style="height: 350px" id="searchChart"></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/mixins/ems/resize'
+import {getAllSites} from "@/api/ems/zddt";
+import {getAllDeviceCategory,getPointValueList,pointFuzzyQuery,getAllBatteryIdsBySites} from '@/api/ems/search'
+import DateTimeSelect from "./DateTimeSelect.vue";
+export default {
+  name: "Search",
+  mixins: [resize],
+  components:{DateTimeSelect},
+  computed: {
+    isDtdc(){
+      return this.form.categoryName === '单体电池'
+    },
+  },
+  watch:{
+    'form.siteIds':{
+        handler(newVal){
+          newVal && this.isDtdc && this.getChildList()
+        }
+    },
+    isDtdc:{
+      handler(newVal){
+        newVal && this.form.siteIds && this.getChildList()
+        !newVal && (this.form.child = [])
+      }
+    },
+    'form.dataUnit':{
+      handler(newVal,oldVal){
+        console.log('wacth到了dataUnit的变化',newVal,oldVal)
+        this.$nextTick(()=>{
+          this.$refs.dateTimeSelect.init()
+          this.getDate()
+        })
+        // this.submitForm()
+      },
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      deviceCategoryList:[],//设备列表
+      siteList: [],//站点列表
+      childOptions:[],//二级设备列表
+      form: {
+        dataRange:[],//时间选择范围
+        child:[],
+        siteIds: '',//当前选中的站点id 默认选中第一个站点
+        categoryName: '',//设备
+        pointName: '',//点位
+        dataUnit: 1,//横坐标
+      },
+      loading: false,
+    }
+  },
+  methods: {
+    getChildList(){
+      this.childOptions=[]
+      this.form.child=[]
+      const {siteIds} = this.form
+      getAllBatteryIdsBySites([siteIds]).then(response=>{
+        const data = response?.data || {};
+        const base = 50
+        let options = []
+        Object.entries(data).forEach(([key,value],index)=>{
+          if(!value) value  =[]
+          options.push({
+            value: key,
+            label: this.siteList.find(s=>s.siteId === key)?.siteName || '',
+            children:[]
+          })
+          const length = value.length
+          const num = Math.ceil(length /base )
+          if(num === 0) return
+          for(let i = 1; i <= num; i++){
+            const start = (i-1)*base+1,end = i*base
+            options[index].children.push({
+              value:i,
+              label: `${start}-${end}`,
+              children:[]
+            })
+            for(let s = start;s<=Math.min(length,end);s++){
+              options[index].children[i-1].children.push({
+                value:value[s-1],
+                label:value[s-1]
+              })
+            }
+          }
+        })
+        console.log('二级设备options',options)
+        this.childOptions = options;
+      })
+    },
+    handleChildChange(data){
+      console.log('选择二级设备',data)
+      this.form.child=data
+    },
+    showLoading(){
+      this.chart && this.chart.showLoading()
+    },
+    hideLoading(){
+      this.chart && this.chart.hideLoading()
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#searchChart'))
+    },
+    updateDate(val){
+      this.form.dataRange =val || []
+      this.getDate()
+    },
+    setOption(data) {
+      if(!this.chart) return
+      this.chart.clear()
+      console.log('返回的数据',data)
+      let dataset=[]
+      if(data.length>0){
+        data.forEach((item,index)=>{
+          item.deviceList.forEach(inner=>{
+            dataset.push({
+              name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${inner.deviceId}`,
+              type:'line',
+              xdata:[],
+              data:[]
+            })
+            const length = dataset.length
+            inner.pointValueList.forEach(value=>{
+              dataset[length-1].xdata.push(value.valueDate)
+              dataset[length-1].data.push(value.pointValue)
+            })
+          })
+        })
+      }else{
+        this.$message.warning('暂无数据')
+      }
+      console.log('图表数据',dataset)
+      this.chart.setOption({
+        legend: {
+          // left: 'center',
+          // top: '10',
+        },
+        grid: {
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
+        yAxis: {
+          type: 'value',
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 100
+          },
+          {
+            start: 0,
+            end: 100
+          }
+        ],
+        series: dataset
+      })
+    },
+    submitForm() {
+      this.getDate()
+    },
+    handleSelect(data){
+      this.form.pointName = data.value
+    },
+    querySearchAsync(query,cb){
+      console.log('查询数据',query)
+      if(!this.form.siteIds || !this.form.categoryName){
+        this.$message({
+          type: 'warning',
+          message: '请先选择站点和设备',
+        })
+        return cb([])
+      }
+      pointFuzzyQuery({
+        siteIds:[this.form.siteIds],
+        categoryName:this.form.categoryName,
+        pointName:query,
+      }).then(response => {
+        const data  = response?.data || []
+        cb(data.map(item => {
+          return {name: item, value: item}
+        }))
+      })
+    },
+    // 获取所有设备
+    getDeviceCategory(){
+      return getAllDeviceCategory().then(response => {
+        this.deviceCategoryList=response?.data || []
+      })
+    },
+    getZdList() {
+      return getAllSites().then(response => {
+        this.siteList = response.data || []
+      }).finally(() => {
+      })
+    },
+    getDate(){
+      this.$refs.form.validate(valid => {
+        if(valid){
+          if(!this.form.pointName){
+            return this.$message.error('请输入正确的点位');
+          }
+          if(this.isDtdc && (this.form.child.length === 0 || this.form.child.length > 5 )){
+            return this.$message.error('请选择单体电池且不能超过5个');
+          }
+          this.loading = true
+          const{siteIds,dataUnit,categoryName,pointName,dataRange:[start='',end=''],child}=this.form
+          let siteDeviceMap={}
+          child.forEach(([first,second,third])=>{
+             if(siteDeviceMap[first]){
+               siteDeviceMap[first].push(third)
+             }else{
+               siteDeviceMap[first]=[]
+               siteDeviceMap[first].push(third)
+             }
+          })
+          let startDate,endDate
+          if(start && dataUnit===3){
+            // startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
+            startDate = start + ' 00:00:00'
+          }else{
+            startDate=start
+          }
+          if(end && dataUnit===3){
+            // endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
+            endDate = end + ' 00:00:00'
+          }else{
+            endDate=end
+          }
+
+          getPointValueList({siteIds:[siteIds],dataUnit,categoryName,pointName,startDate,endDate,siteDeviceMap}).then(response => {
+            this.setOption(response?.data || [])
+          }).finally(()=>{
+            this.loading = false
+          })
+        }
+      })
+    },
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  mounted() {
+    this.loading= true
+    this.$nextTick(()=>{
+      this.initChart()
+      this.$refs.dateTimeSelect.init()
+      Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(()=>this.loading=false)
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/ems/site/sblb/PointTable.vue

@@ -0,0 +1,114 @@
+<!--电位展示图表-->
+<template>
+  <el-dialog
+      v-loading="loading"
+      :visible.sync="show"
+      title="点位列表"
+      :close-on-click-modal="false"
+      show-close
+      destroy-on-close
+      lock-scroll
+      append-to-body
+      width="600px"
+      class="ems-dialog"
+  >
+    <el-table
+        class="common-table"
+        :data="tableData"
+        stripe
+        max-height="600px"
+        style="width: 100%;">
+      <el-table-column
+          prop="dataPoint"
+          label="数据点位">
+      </el-table-column>
+      <el-table-column
+          prop="dataPointName"
+          label="数据点位名称">
+      </el-table-column>
+    </el-table>
+    <el-pagination
+        v-show="tableData.length>0"
+        small
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :pager-count="5"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalSize"
+        style="margin-top:15px;text-align: center"
+    >
+    </el-pagination>
+  </el-dialog>
+</template>
+<script>
+import {getDevicePointList} from "@/api/ems/site";
+
+export default {
+  watch:{
+    show(val) {
+      if(!val){
+        this.tableData=[]
+        this.deviceId=''
+        this.siteId=''
+        this.pageSize=10
+        this.pageNum=1
+        this.totalSize=0
+        this.loading =false
+      }
+    },
+  },
+  data(){
+    return{
+      show:false,
+      loading:false,
+      deviceCategory:'',
+      siteId:'',
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
+    }
+  },
+  methods:{
+    showTable({deviceCategory,siteId}){
+      this.deviceCategory =deviceCategory
+      this.siteId=siteId
+      this.show=true
+      this.getData()
+    },
+    getData(){
+      this.loading=true
+      const {siteId,deviceCategory,pageNum,pageSize} =this
+      getDevicePointList({siteId,deviceCategory,pageNum,pageSize}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(() => {this.loading=false})
+    },
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+::v-deep {
+  .card-title .el-radio{
+    line-height: 40px;
+  }
+}
+
+</style>

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

@@ -3,12 +3,12 @@
   <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
     <el-form :inline="true" class="select-container">
         <el-form-item label="站点选择">
-          <el-select v-model="siteId" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据">
+          <el-select v-model="siteId" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="onSearch">
             <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
           </el-select>
         </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
+<!--        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>-->
         <el-button @click="onReset" native-type="button">重置</el-button>
       </el-form-item>
     </el-form>
@@ -50,7 +50,7 @@
       <el-table-column
         fixed="right"
         label="操作"
-        width="150">
+        width="260">
         <template slot-scope="scope">
 <!--          <el-button-->
 <!--            @click="toDetail(scope.row.id)"-->
@@ -58,6 +58,12 @@
 <!--            size="mini">-->
 <!--            查看详情-->
 <!--          </el-button>-->
+          <el-button
+              @click="pointDetail(scope.row)"
+              type="primary"
+              size="mini">
+            电位列表
+          </el-button>
           <el-button
             @click="editDevice(scope.row)"
             type="warning"
@@ -94,6 +100,7 @@
       </div>
     </el-dialog>
     <add-device ref="addDevice" :mode="mode" :id="editDeviceId" @update="getData" @clear="clearEditDeviceData"/>
+    <point-table ref="pointTable"/>
   </div>
 </template>
 
@@ -101,10 +108,11 @@
 import {getDeviceInfoList,getDeviceDetailInfo,deleteService} from'@/api/ems/site'
 import {getAllSites} from '@/api/ems/zddt'
 import {formatNumber} from "@/filters/ems";
+import PointTable from './PointTable.vue'
 import AddDevice from "./AddDevice.vue";
 export default {
   name: "Sblb",
-  components:{AddDevice},
+  components:{AddDevice,PointTable},
   data() {
     return {
       loading:false,
@@ -142,6 +150,10 @@ export default {
     }
   },
   methods:{
+    // 查看设备电位表格
+    pointDetail(row){
+      this.$refs.pointTable.showTable({deviceCategory:row.deviceCategory,siteId:row.siteId})
+    },
     clearEditDeviceData(){
       this.mode = '';
       this.editDeviceId=''

src/views/ems/zddt/BarChart.vue

@@ -32,7 +32,7 @@ export default {
         source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
       })
       this.chart.setOption({
-        color:['#A796FF','#FFBE01'],
+        color:['#4472c4','#70ad47'],//所有充放电颜色保持统一
         grid: {
           top:30,
           containLabel: true