db接口参数更新，实时运行接口联调

src/api/ems/dzjk.js

@@ -92,3 +92,33 @@ export function getElectricData({siteId,startDate,endDate}) {
     method: 'get'
   })
 }
+
+// 实时运行
+//储能
+export function storagePower(siteId) {
+  return request({
+    url: `/ems/siteMonitor/runningGraph/storagePower?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+//poc平均温度
+export function stackAveTemp(siteId) {
+  return request({
+    url: `/ems/siteMonitor/runningGraph/stackAveTemp?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+// 电池平均soc
+export function batteryAveSoc(siteId) {
+  return request({
+    url: `/ems/siteMonitor/runningGraph/batteryAveSoc?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+// 电池平均温度
+export function batteryAveTemp(siteId) {
+  return request({
+    url: `/ems/siteMonitor/runningGraph/batteryAveTemp?siteId=${siteId}`,
+    method: 'get'
+  })
+}

src/filters/ems.js

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

src/utils/request.js

@@ -17,7 +17,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
   // 超时
-  timeout: 10000
+  timeout: 60000
 })
 
 // request拦截器

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

@@ -3,7 +3,7 @@
       <div v-loading="loading">
         <el-card shadow="always" class="common-card-container" :class="zbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
           <div slot="header">
-              <span class="large-title">1#总表</span>
+              <span class="large-title">1#{{zbInfo.deviceName}}</span>
               <div class="status">
                 <div>{{$store.state.ems.communicationStatusOptions[zbInfo.emsCommunicationStatus]}}</div>
                 <div>数据更新时间：{{zbInfo.dataUpdateTime}}</div>
@@ -11,7 +11,7 @@
           </div>
           <el-table
             class="common-table"
-            :data="zbInfo.ammeterDataDetailInfos"
+            :data="zbInfo.loadDataDetailInfo"
               stripe
               style="width: 100%;">
               <el-table-column
@@ -24,11 +24,11 @@
               >
               </el-table-column>
               <el-table-column
-                prop="sharpKwh"
+                prop="peakKwh"
                 label="尖/kWh">
               </el-table-column>
               <el-table-column
-                prop="peakKwh"
+                prop="highKwh"
                 label="峰/kWh">
               </el-table-column>
               <el-table-column
@@ -43,7 +43,7 @@
         </el-card>
         <el-card shadow="always" class="common-card-container" :class="cnbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
           <div slot="header">
-            <span class="large-title">2#储能表</span>
+            <span class="large-title">2#{{cnbInfo.deviceName}}</span>
             <div class="status">
               <div>{{$store.state.ems.communicationStatusOptions[cnbInfo.emsCommunicationStatus]}}</div>
               <div>数据更新时间：{{cnbInfo.dataUpdateTime}}</div>
@@ -51,7 +51,7 @@
           </div>
           <el-table
             class="common-table"
-            :data="cnbInfo.ammeterDataDetailInfos"
+            :data="cnbInfo.meteDataDetailInfo"
             stripe
             style="width: 100%;">
             <el-table-column
@@ -59,25 +59,13 @@
               label="类别">
             </el-table-column>
             <el-table-column
-              prop="totalKwh"
+              prop="activePower"
-              label="总/kWh"
+              label="有功功率"
             >
             </el-table-column>
             <el-table-column
-              prop="sharpKwh"
+              prop="reactivePower"
-              label="尖/kWh">
+              label="无功功率">
-            </el-table-column>
-            <el-table-column
-              prop="peakKwh"
-              label="峰/kWh">
-            </el-table-column>
-            <el-table-column
-              prop="flatKwh"
-              label="平/kWh">
-            </el-table-column>
-            <el-table-column
-              prop="valleyKwh"
-              label="谷/kWh">
             </el-table-column>
           </el-table>
         </el-card>
@@ -102,8 +90,8 @@ export default {
     init(){
       this.loading = true
       getAmmeterDataList(this.siteId).then(response => {
-        this.zbInfo =JSON.parse(JSON.stringify(response?.data[0] || {}));
+        this.zbInfo =JSON.parse(JSON.stringify(response?.data?.ammeterLoadData || {}));
-        this.cnbInfo =JSON.parse(JSON.stringify(response?.data[1] || {}));
+        this.cnbInfo =JSON.parse(JSON.stringify(response?.data?.ammeterMeteData || {}));
       }).finally(() => {this.loading = false})
     }
   },

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

@@ -11,8 +11,9 @@
 <style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
+import {formatDate} from "@/filters/ems";
+import {storagePower} from '@/api/ems/dzjk'
 
 export default {
   mixins: [resize],
@@ -22,9 +23,7 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(() => {
+    this.chart = echarts.init(document.querySelector('#cnglqxChart'))
-      this.initChart()
-    })
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -34,17 +33,31 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    init(siteId){
-      this.chart = echarts.init(document.querySelector('#cnglqxChart'))
+      this.chart.showLoading()
-      this.setOptions()
+      const x = []
+      const data1 =[],data2 =[]
+      storagePower(siteId).then(response => {
+        const source = response?.data?.energyStoragePowList || []
+        source.forEach(item=>{
+          x.push(formatDate(item.createDate,false,true))
+          data1.push(item.pcsTotalActPower)
+          data2.push(item.pcsTotalReactivePower)
+        })
+        this.setOption(x,data1,data2)
+      }).finally(()=>{
+        this.chart.hideLoading()
+      })
     },
-    setOptions() {
+    setOption(x,data1,data2) {
-
       this.chart.setOption({
         color:['#FFBD00','#3C81FF'],
         legend: {
           left: 'center',
-          bottom: '10',
+          top: '10',
+        },
+        grid: {
+          left: "15%"
         },
         tooltip: {
           trigger: 'axis',
@@ -55,23 +68,37 @@ export default {
         textStyle:{
           color:"#333333",
         },
-        xAxis: {
+        xAxis: {type:'category',data:x},
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
-        },
         yAxis: {
           type: 'value',
         },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 10
+          },
+          {
+            start: 0,
+            end: 10
+          }
+        ],
         // POC昨日有功功率、POC昨日无功功率
         series: [
           {
             name:'POC实时有功功率',
-            data: [80,92,1,34,90,130,320,80,9,91,34,90],
             type: 'line',
-
+            areaStyle: {
+              color:'#FFBD00'
+            },
+            data: data1,
           },{
             name:'POC实时无功功率',
-            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
             type: 'line',
+            areaStyle: {
+              color: '#3C81FF'
+            },
+            data: data2
           }]
       })
     }

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

@@ -11,9 +11,9 @@
 <style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
-
+import {formatDate} from "@/filters/ems";
+import {batteryAveSoc} from '@/api/ems/dzjk'
 export default {
   mixins: [resize],
   data() {
@@ -22,9 +22,7 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(() => {
+    this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
-      this.initChart()
-    })
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -34,44 +32,53 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    init(siteId){
-      this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
+      this.chart.showLoading()
-      this.setOptions()
+      const x = []
+      const data =[]
+      batteryAveSoc(siteId).then(response => {
+        const source = response?.data?.batteryAveSOCList || []
+        source.forEach(item=>{
+          x.push(formatDate(item.createDate,false,true))
+          data.push(item.batterySOC)
+        })
+        this.setOption(x,data)
+      }).finally(()=>{
+        this.chart.hideLoading()
+      })
     },
-    setOptions() {
+    setOption(x,data) {
-
       this.chart.setOption({
         color:['#FFBD00','#3C81FF'],
-        legend: {
+        // legend: {
-          left: 'center',
+        //   left: 'center',
-          bottom: '10',
+        //   bottom: '10',
-        },
+        // },
         tooltip: {
           trigger: 'axis',
           axisPointer: { // 坐标轴指示器，坐标轴触发有效
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
           }
         },
+        grid: {
+          left: "15%"
+        },
         textStyle:{
           color:"#333333",
         },
-        xAxis: {
+        xAxis: {type:'category',data:x},
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
-        },
         yAxis: {
           type: 'value',
         },
-        // POC昨日有功功率、POC昨日无功功率
         series: [
           {
-            name:'昨日同时段电池平均SOC',
+            name:'电池平均SOC',
-            data: [80,92,1,34,90,130,320,80,9,91,34,90],
+            data: data,
-            type: 'scatter',
+            type: 'line',
+            areaStyle: {
+              color:'#FFBD00'
+            }
 
-          },{
-            name:'实时电池平均SOC',
-            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
-            type: 'scatter',
           }]
       })
     }

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

@@ -11,8 +11,9 @@
 <style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
+import {formatDate} from "@/filters/ems";
+import {batteryAveTemp} from '@/api/ems/dzjk'
 
 export default {
   mixins: [resize],
@@ -22,9 +23,7 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(() => {
+    this.chart = echarts.init(document.querySelector('#dcpjwdChart'))
-      this.initChart()
-    })
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -34,44 +33,63 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    init(siteId){
-      this.chart = echarts.init(document.querySelector('#dcpjwdChart'))
+      this.chart.showLoading()
-      this.setOptions()
+      const x = []
+      const data1 =[],data2 =[]
+      batteryAveTemp(siteId).then(response => {
+        const source = response?.data?.batteryAveTempList || []
+        source.forEach(item=>{
+          x.push(formatDate(item.createDate,false,true))
+          data1.push(item.batteryTemp)
+        })
+        this.setOption(x,data1,data2)
+      }).finally(()=>{
+        this.chart.hideLoading()
+      })
     },
-    setOptions() {
+    setOption(x,data) {
-
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
+        color:['#3C81FF'],
-        legend: {
+        // legend: {
-          left: 'center',
+        //   left: 'center',
-          bottom: '10',
+        //   bottom: '10',
-        },
+        // },
         tooltip: {
           trigger: 'axis',
           axisPointer: { // 坐标轴指示器，坐标轴触发有效
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
           }
         },
+        grid: {
+          left: "15%"
+        },
         textStyle:{
           color:"#333333",
         },
-        xAxis: {
+        xAxis: {type:'category',data:x},
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
-        },
         yAxis: {
           type: 'value',
         },
-        // POC昨日有功功率、POC昨日无功功率
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 10
+          },
+          {
+            start: 0,
+            end: 10
+          }
+        ],
         series: [
           {
-            name:'昨日同时段温度',
+            name:'电池平均温度',
-            data: [80,92,1,34,90,130,320,80,9,91,34,90],
+            data: data,
-            type: 'line',
-
-          },{
-            name:'实时温度',
-            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
             type: 'line',
+            areaStyle: {
+              color:'#3C81FF'
+            },
           }]
       })
     }

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

@@ -11,8 +11,9 @@
 <style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
+import {formatDate} from "@/filters/ems";
+import {stackAveTemp} from '@/api/ems/dzjk'
 
 export default {
   mixins: [resize],
@@ -22,9 +23,7 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(() => {
+    this.chart = echarts.init(document.querySelector('#pocpjwdChart'))
-      this.initChart()
-    })
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -34,44 +33,60 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    init(siteId){
-      this.chart = echarts.init(document.querySelector('#pocpjwdChart'))
+      this.chart.showLoading()
-      this.setOptions()
+      const x = []
+      const data =[]
+      stackAveTemp(siteId).then(response => {
+        const source = response?.data?.stackAveTempList || []
+        source.forEach(item=>{
+          x.push(formatDate(item.createDate,false,true))
+          data.push(item.temp)
+        })
+        this.setOption(x,data)
+      }).finally(()=>{
+        this.chart.hideLoading()
+      })
     },
-    setOptions() {
+    setOption(x,data) {
-
       this.chart.setOption({
         color:['#FFBD00','#3C81FF'],
-        legend: {
-          left: 'center',
-          bottom: '10',
-        },
         tooltip: {
           trigger: 'axis',
           axisPointer: { // 坐标轴指示器，坐标轴触发有效
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
           }
         },
+        grid: {
+          left: "15%"
+        },
         textStyle:{
           color:"#333333",
         },
-        xAxis: {
+        xAxis: {type:'category',data:x},
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
-        },
         yAxis: {
           type: 'value',
         },
-        // POC昨日有功功率、POC昨日无功功率
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 10
+          },
+          {
+            start: 0,
+            end: 10
+          }
+        ],
         series: [
           {
-            name:'昨日同时段温度',
+            name:'Poc平均温度',
-            data: [80,92,1,34,90,130,320,80,9,91,34,90],
+            data: data,
-            type: 'bar',
+            type: 'line',
+            areaStyle: {
+              color:'#FFBD00'
+            }
 
-          },{
-            name:'实时温度',
-            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
-            type: 'bar',
           }]
       })
     }

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

@@ -2,22 +2,22 @@
 <template>
 <div class="ssyx-ems-dashboard-editor-container">
 <!--  6个方块-->
-  <real-time-base-info/>
+  <real-time-base-info :data="runningHeadData"/>
 <!--  echart图表-->
   <el-row :gutter="32" style="background:#fff;margin:30px 0;">
     <el-col :xs="24" :sm="12" :lg="12">
-      <cnglqx-chart/>
+      <cnglqx-chart ref='cnglqx'/>
     </el-col>
     <el-col :xs="24" :sm="12" :lg="12">
-      <pocpjwd-chart/>
+      <pocpjwd-chart ref='pocpjwd'/>
     </el-col>
   </el-row>
   <el-row :gutter="32" style="margin:30px 0;">
     <el-col :xs="24" :sm="12" :lg="12">
-      <dcpjsoc-chart/>
+      <dcpjsoc-chart ref="dcpjsoc"/>
     </el-col>
     <el-col :xs="24" :sm="12" :lg="12">
-      <dcpjwd-chart/>
+      <dcpjwd-chart ref="dcpjwd"/>
     </el-col>
   </el-row>
 </div>
@@ -32,14 +32,36 @@ import CnglqxChart from './CnglqxChart.vue'
 import PocpjwdChart from './PocpjwdChart.vue'
 import DcpjwdChart from './DcpjwdChart.vue'
 import DcpjsocChart from './DcpjsocChart.vue'
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getRunningHeadInfo} from '@/api/ems/dzjk'
 
 export default {
   name:'DzjkSbjkSsyx',
   components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
+  mixins:[getQuerySiteId],
   data() {
     return {
+      runningHeadData:{},//运行信息
     }
   },
+  methods:{
+    //6个方块数据
+    getRunningHeadData(){
+      getRunningHeadInfo(this.siteId).then(response => {
+        this.runningHeadData = response?.data || {}
+      })
+    },
+    init(){
+      this.getRunningHeadData()
+      this.$nextTick(()=>{
+        this.$refs.cnglqx.init(this.siteId)
+        this.$refs.pocpjwd.init(this.siteId)
+        this.$refs.dcpjsoc.init(this.siteId)
+        this.$refs.dcpjwd.init(this.siteId)
+      })
+
+    }
+  }
 
 }
 </script>

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

@@ -66,7 +66,7 @@ export default {
       this.dateRange=[]
       this.getData()
     },
-    setOption(data){
+    setOption(data,unit){
       const source = [['日期','充电量','放电量','效率']]
       data.forEach(item=>{
         source.push([item.ammeterDate, item.chargedCap,item.disChargedCap,item.dailyEfficiency])
@@ -78,7 +78,11 @@ export default {
         //   bottom: '10',
         // },
         tooltip: {},
-        xAxis: { type: 'category' },
+        xAxis: {
+          type: 'category',
+          name:unit,
+          nameLocation:'center'
+        },
         yAxis: [{
           type: 'value',
           name:'充电量/放电量kWh',
@@ -124,8 +128,8 @@ export default {
       const [start='',end='']=this.dateRange || [];
       const startDate=formatDate(start),endDate = formatDate(end)
       getElectricData({siteId:this.siteId,startDate,endDate}).then(response => {
-        const {totalChargedCap='',totalDisChargedCap='',efficiency='',sevenDayDisChargeStats=[]}=response?.data || {}
+        const {totalChargedCap='',totalDisChargedCap='',efficiency='',sevenDayDisChargeStats=[],unit=''}=response?.data || {}
-        this.setOption(sevenDayDisChargeStats || [])
+        this.setOption(sevenDayDisChargeStats || [],unit)
         this.totalChargedCap=totalChargedCap
         this.totalDisChargedCap=totalDisChargedCap
         this.efficiency=efficiency