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

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>

src/views/ems/dzjk/index.vue

@@ -2,11 +2,11 @@
 
 <template>
   <div class="ems-dashboard-editor-container">
-  <zd-select/>
+  <zd-select :default-site-id="$route.query.siteId" @submitSite="submitSite"/>
 <!--  这里是单站监控的二级菜单栏 需要循环拿到数据 显示在页面上-->
     <div class="router-container">
       <div class="route-link" :class="{'active':item.name === $route.meta.activeSecondMenuName}" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
-        <router-link  style="height: 100%;width: 100%;display: block" :to="item.path">
+        <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
         {{item.meta.title}}
         </router-link>
       </div>
@@ -32,8 +32,18 @@ export default {
       activeMenu:''
     }
   },
+  methods:{
+    submitSite(id){
+      if(id != this.$route.query.siteId){
+        console.log('单站监控选择了其他的站点id=',id,'并更新页面地址参数')
+        this.$router.push({query:{...this.$route.query,siteId:id}})
+      }else{
+        console.log('单站监控选择了相同的其他的站点id=',id,'页面地址不发生改变')
+      }
+    }
+  },
   mounted() {
-    console.log('当前页面路由',this.$route)
+    console.log('单站监控一级页面路由',this.$route)
   }
 
 }

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

@@ -3,7 +3,7 @@
     <div class="router-container">
       <div>
         <div class="route-link" :class="{'active':item.name === $route.name}" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
-          <router-link  style="height: 100%;width: 100%;display: block" :to="item.path">
+          <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
             {{item.meta.title}}
           </router-link>
       </div>