站点地图展示，站点地图、单站监控首页部分接口联调

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

@@ -29,17 +29,18 @@
               stripe
               style="width: 100%">
               <el-table-column
-                prop="name"
+                prop="deviceName"
                 label="名称">
               </el-table-column>
               <el-table-column
-                prop="status"
                 label="状态"
-                class-name="warning-status"
-                label-class-name="table-head">
+                >
+                  <template slot-scope="scope">
+                    <span class="warning-status">{{ scope.row.status == 0 ? '中断':'todo不是0是什么告警'}}</span>
+                  </template>
               </el-table-column>
               <el-table-column
-                prop="value"
+                prop="alarmContent"
                 label="告警内容">
               </el-table-column>
             </el-table>
@@ -52,28 +53,62 @@
 </template>
 
 <script>
+import {getDzjkHomeView} from '@/api/ems/dzjk'
 import NllzChart from "./NllzChart.vue";
 export default {
   components: {NllzChart},
+  watch: {
+    '$route.query':{
+      handler (newQuery,oldQuery) {
+          // 参数变化处理
+          console.log('单站监控=>首页=>页面地址发生变化',newQuery,oldQuery)
+          this.$nextTick(() => {
+            const {siteId} =newQuery
+              siteId && this.getData(newQuery.siteId)
+          })
+      },
+      immediate: true,
+    }
+  },
   data() {
     return {
-      // todo 没有数据时 显示-？
       sjglData:[{
         title:'今日充电量（MWh）',
-        value:'1234'
+        value:'',
+        attr:'dayChargedCap'
       },{
         title:'今日放电量（MWh）',
-        value:'1234'
+        value:'',
+        attr:'dayDisChargedCap'
       },{
         title:'总充电量（MWh）',
-        value:'1234'
+        value:'',
+        attr:'totalChargedCap'
       },{
         title:'总放电量（MWh）',
-        value:'1234'
+        value:'',
+        attr:'totalDischargedCap'
       }],
       // todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
-      tableData:[{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'}]
+      tableData:[]
     }
+  },
+  methods:{
+    getData(siteId){
+      getDzjkHomeView(siteId).then(response => {
+        console.log(`获取单站监控id=${siteId}的基本信息`,response)
+        const data = response.data || {}
+        this.sjglData.forEach(item=>{
+          item.value = (data[item.attr] || data[item.attr] == 0) ? data[item.attr] : '-'
+        })
+        this.tableData = data?.siteMonitorHomeAlarmVo || []
+      })
+    }
+  },
+  mounted() {
+    // console.log('当前页面路由参数',this.$route.query)
+    // const {siteId} = this.$route.query;
+    // this.getData(siteId)
   }
 }
 </script>