站点地图、单站监控-实时运行部分接口联调

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

@@ -14,7 +14,6 @@
 
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
 
 export default {
@@ -37,16 +36,21 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
-      this.chart = echarts.init(document.querySelector('#nllzChart'), 'macarons')
-      this.setOptions()
+    initChart(data) {
+      this.chart = echarts.init(document.querySelector('#nllzChart'))
     },
-    setOptions() {
+    setOption(data) {
+      const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
+      const source = [['日期','充电量','放电量']]
+      siteMonitorDataVo.forEach(item=>{
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+      })
+      const filterValue=(num)=>{return num || num === 0 ? num : '-'}
       this.chart.setOption({
         title: [
           // 右上角
           {
-            text: '电网 实时功率：15kW',
+            text: `电网 实时功率：${filterValue(gridNrtPower)} kW`,
             top: 10,
             right: 10,
             textStyle:{
@@ -56,7 +60,7 @@ export default {
           },
           // 右下角
           {
-            text: '负载 实时功率：15kW',
+            text: `负载 实时功率：${filterValue(loadNrtPower)} kW`,
             bottom: 10,
             right: 10,
             textStyle:{
@@ -67,7 +71,7 @@ export default {
           // 左下角第一行
           {
             text: '储能',
-            bottom: 56,
+            bottom: 40,
             left: 10,
             textStyle:{
               fontSize:12,
@@ -76,8 +80,8 @@ export default {
           },
           // 左下角第二行
           {
-            text: '实时功率：12kW',
-            bottom: 40,
+            text: `实时功率：${filterValue(energyStorageNrtPower)} kW`,
+            bottom: 26,
             left: 10,
             textStyle:{
               fontSize:12,
@@ -86,17 +90,7 @@ export default {
           },
           // 左下角第三行
           {
-            text: 'SOC:75%',
-            bottom: 26,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第四行
-          {
-            text: '可用电量：12kWh',
+            text: `可用电量：${filterValue(energyStorageAvailElec)} kWh`,
             bottom: 10,
             left: 10,
             textStyle:{
@@ -118,7 +112,7 @@ export default {
           color:"#333333",
         },
         xAxis: {
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+          type: 'category',
           axisLine: {
             lineStyle:{
               color: '#333333',
@@ -133,14 +127,15 @@ export default {
             }
           }
         },
+        dataset:{
+          source
+        },
         series: [
           {
             name:'充电量',
-            data: [80,92,1,34,90,130,320,80,9,91,34,90],
             type: 'line',
           },{
             name:'放电量',
-            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
             type: 'line',
           }]
       })