单站监控首页更新

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

@@ -15,7 +15,6 @@
 <script>
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
-import {formatNumber} from "@/filters/ems";
 
 export default {
   mixins: [resize],
@@ -40,67 +39,19 @@ export default {
     initChart() {
       this.chart = echarts.init(document.querySelector('#activeChart'))
     },
+    showLoading(){
+      this.chart && this.chart.showLoading()
+    },
     setOption(data) {
-      const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
+      const source = [['日期','电网功率']]
-      const source = [['日期','充电量','放电量']]
+      data.forEach((item)=>{
-      siteMonitorDataVo.forEach(item=>{
+        source.push([item.statisDate,item.gridPower])
-        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
       })
       this.chart.setOption({
-        title: [
+        color:['#FFBD00','#3C81FF'],
-          // 右上角
+        legend: {
-          {
+          left: 'center',
-            text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
+          bottom: '10',
-            top: 10,
-            right: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 右下角
-          {
-            text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
-            bottom: 10,
-            right: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第一行
-          {
-            text: '储能',
-            bottom: 40,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第二行
-          {
-            text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
-            bottom: 26,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第三行
-          {
-            text: `可用电量：${formatNumber(energyStorageAvailElec)} kWh`,
-            bottom: 10,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          }
-        ],
-        grid:{
-          left:200
         },
         tooltip: {
           trigger: 'axis',
@@ -113,34 +64,21 @@ export default {
         },
         xAxis: {
           type: 'category',
-          axisLine: {
-            lineStyle:{
-              color: '#333333',
-            }
-          }
         },
         yAxis: {
           type: 'value',
-          axisLine: {
-            lineStyle:{
-              color: '#333333',
-            }
-          }
-        },
-        dataset:{
-          source
-          // source: [['日期','充电量','放电量']]
         },
+        dataset:{source},
         series: [
           {
-            name:'充电量',
+            name:'电网功率',
             type: 'line',
-          },{
-            name:'放电量',
-            type: 'line',
-          }]
-      })
           }
+        ]
+      })
+      this.chart.hideLoading()
+    },
+
   }
 }
 

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

@@ -15,7 +15,6 @@
 <script>
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
-import {formatNumber} from "@/filters/ems";
 
 export default {
   mixins: [resize],
@@ -40,106 +39,56 @@ export default {
     initChart() {
       this.chart = echarts.init(document.querySelector('#weekChart'))
     },
-    setOption(data) {
+    showLoading(){
-      const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
+      this.chart && this.chart.showLoading()
+    },
+    setOption(data,unit) {
       const source = [['日期','充电量','放电量']]
-      siteMonitorDataVo.forEach(item=>{
+      data.forEach(item=>{
         source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
       })
       this.chart.setOption({
-        title: [
+        color:['#FFBD00','#3C81FF','#05AEA3'],
-          // 右上角
-          {
-            text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
-            top: 10,
-            right: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 右下角
-          {
-            text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
-            bottom: 10,
-            right: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第一行
-          {
-            text: '储能',
-            bottom: 40,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第二行
-          {
-            text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
-            bottom: 26,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第三行
-          {
-            text: `可用电量：${formatNumber(energyStorageAvailElec)} kWh`,
-            bottom: 10,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          }
-        ],
-        grid:{
-          left:200
-        },
         tooltip: {
           trigger: 'axis',
           axisPointer: { // 坐标轴指示器，坐标轴触发有效
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
           }
         },
-        textStyle:{
+        legend: {
-          color:"#333333",
+          left: 'center',
+          bottom: '10',
         },
         xAxis: {
           type: 'category',
-          axisLine: {
+          name:unit,
-            lineStyle:{
+          nameLocation:'center'
-              color: '#333333',
-            }
-          }
         },
-        yAxis: {
+        yAxis: [{
           type: 'value',
+          name:'充电量/放电量kWh',
           axisLine: {
             lineStyle:{
               color: '#333333',
-            }
-          }
             },
+            onZero:false
+          }
+        }],
         dataset:{
           source
-          // source: [['日期','充电量','放电量']]
         },
         series: [
           {
-            name:'充电量',
+            yAxisIndex:0,
             type: 'line',
-          },{
+          },
-            name:'放电量',
+          {
+            yAxisIndex:0,
             type: 'line',
-          }]
+          },
+        ]
       })
+      this.chart.hideLoading()
     }
   }
 }

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

@@ -87,18 +87,13 @@
 
 <script>
 import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
-import {getDzjkHomeView} from '@/api/ems/dzjk'
+import {getDzjkHomeView, getPcsNameList, getPowerData} from '@/api/ems/dzjk'
-// import NllzChart from "./NllzChart.vue";
 import WeekChart from "./WeekChart.vue";
 import ActiveChart from "./ActiveChart.vue";
 import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
+import {formatDate} from "@/filters/ems";
 export default {
   name:'DzjkSbjkHome',
-  computed: {
-    loader() {
-      return loader
-    }
-  },
   components: {WeekChart,ActiveChart},
   mixins: [getQuerySiteId],
   data() {
@@ -134,7 +129,6 @@ export default {
         value:'',
         attr:'totalDischargedCap'
       }],
-      // todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
       tableData:[],
       info:{}
     }
@@ -143,22 +137,44 @@ export default {
     toTicket(){
       this.$router.push({path:'/ticket'})
     },
-    init(){
+    getGVQXData(){
-      this.loading = true
+      this.$refs.activeChart.showLoading()
-      getSingleSiteBaseInfo(this.siteId).then(response => {
+      const {siteId}=this,now=new Date()
-        console.log('单个站点详情数据',response)
+      getPcsNameList(this.siteId).then(response=>{
-        this.info = response?.data || {}
+        const data=response?.data || [];
+        if(data.length>0){
+          //接口调用完成之后 设置图表、结束loading
+          getPowerData({siteId,deviceId:data[0].id,startDate:formatDate(now),endDate:formatDate(now),dataType:'1'}).then(response => {
+            this.$refs.activeChart.setOption(response?.data || [])
           })
+        }
+      })
+    },
+    getBaseInfo(){
+      this.$refs.weekChart.showLoading()
+      getSingleSiteBaseInfo(this.siteId).then(response => {
+        this.info = response?.data || {}
+        const {sevenDayDisChargeStats=[],unit=''} = this.info
+        this.$refs.weekChart.setOption(sevenDayDisChargeStats,unit)
+      })
+    },
+    getTableData(){
       getDzjkHomeView(this.siteId).then(response => {
         const data = response?.data || {}
         this.sjglData.forEach(item=>{
           item.value =data[item.attr]
         })
         this.tableData = data?.siteMonitorHomeAlarmVo || []
-        // this.$refs.nllzChart.setOption(data)
-        this.$refs.weekChart.setOption(data)
-        this.$refs.activeChart.setOption(data)
       }).finally(() => {this.loading = false})
+    },
+    init(){
+      this.loading = true
+      // 功率曲线
+      this.getGVQXData()
+      // 基本信息+冲放曲线
+      this.getBaseInfo()
+      //其他数据
+      this.getTableData()
 
     }
   },