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

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() {
+    initChart(data) {
-      this.chart = echarts.init(document.querySelector('#nllzChart'), 'macarons')
+      this.chart = echarts.init(document.querySelector('#nllzChart'))
-      this.setOptions()
     },
-    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',
+            text: `实时功率：${filterValue(energyStorageNrtPower)} kW`,
-            bottom: 40,
+            bottom: 26,
             left: 10,
             textStyle:{
               fontSize:12,
@@ -86,17 +90,7 @@ export default {
           },
           // 左下角第三行
           {
-            text: 'SOC:75%',
+            text: `可用电量：${filterValue(energyStorageAvailElec)} kWh`,
-            bottom: 26,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第四行
-          {
-            text: '可用电量：12kWh',
             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',
           }]
       })

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

@@ -20,7 +20,7 @@
         <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
           <div slot="header">
             <span class="card-title">实时告警</span>
-            <el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态：<span style="color:red">超时</span></el-button>
+<!--            <el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态：<span style="color:red">超时</span></el-button>-->
           </div>
           <div class="ssgj-container">
             <el-table
@@ -48,7 +48,7 @@
         </el-card>
       </el-col>
     </el-row>
-    <nllz-chart/>
+    <nllz-chart ref="nllzChart"/>
   </div>
 </template>
 
@@ -102,14 +102,10 @@ export default {
           item.value = (data[item.attr] || data[item.attr] == 0) ? data[item.attr] : '-'
         })
         this.tableData = data?.siteMonitorHomeAlarmVo || []
+        this.$refs.nllzChart.setOption(data)
       })
     }
   },
-  mounted() {
-    // console.log('当前页面路由参数',this.$route.query)
-    // const {siteId} = this.$route.query;
-    // this.getData(siteId)
-  }
 }
 </script>
 

src/views/ems/zddt/index.vue

@@ -47,6 +47,7 @@ export default {
     return {
       singleSiteId:'',
       singleSiteName:'',
+      singleSiteLocation:[],
       // 单个电站 四个方块数据
       singleZdSqaure:[
         {
@@ -76,7 +77,7 @@ export default {
       singleZdInfo:[{
         title:'电站位置',
         value:'',
-        attr:'siteLocation'
+        attr:'siteAddress'
       },{
         title:'投运时间',
         value:'',
@@ -101,13 +102,16 @@ export default {
         console.log('单个站点详情数据',response)
         const res = response.data || {}
         this.singleSiteName = res?.siteName || ''//站点名称
+        this.singleSiteLocation = res?.siteLocation || []//站点坐标
         this.singleZdSqaure.forEach(item=>{
           item.value =( res[item.attr] || res[item.attr] == 0 ) ? res[item.attr] : '-'
         })
         this.singleZdInfo.forEach(item=>{
           item.value = ( res[item.attr] || res[item.attr] == 0 ) ? res[item.attr] : '-'
         })
-        this.$refs.barChart.setOption(res?.sevenDayDischargeStats || [])
+        this.$refs.barChart.setOption(res?.sevenDayDisChargeStats || [])
+        this.$refs.mapChart.setOption([{name:this.singleSiteName,value:this.singleSiteLocation}])
+
       })
     },
     //跳转单站监控页面
@@ -120,14 +124,6 @@ export default {
       })
     }
   },
-  mounted() {
-    //todo 在获取到数据后更新chart
-    // 电站名称，坐标，样式
-    this.$nextTick(()=>{
-      console.log('this.$refs.mapChart',this.$refs)
-      this.$refs.mapChart.setOption([{name:'电站一',value:[121.627049,31.444993]}])
-    })
-  }
 }
 </script>