单站监控-设备监控-动态三级菜单,点位清单排序

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

@@ -1,38 +1,66 @@
 <template>
-    <div class="ems-dashboard-editor-container ems-third-menu-container">
-    <el-menu
-      class="ems-third-menu"
-      :default-active="$route.name"
-      background-color="#ffffff"
-      text-color="#666666"
-      active-text-color="#ffffff"
-    >
-      <el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
-        <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
-          {{item.meta.title}}
-        </router-link>
-      </el-menu-item>
-    </el-menu>
-    <div class="ems-content-container ems-content-container-padding sbjk-ems-content-container">
-      <keep-alive>
-        <router-view></router-view>
-      </keep-alive>
-    </div>
+    <div class="ems-dashboard-editor-container ems-third-menu-container" v-loading="loading">
+      <el-menu
+        class="ems-third-menu"
+        :default-active="$route.name"
+        background-color="#ffffff"
+        text-color="#666666"
+        active-text-color="#ffffff"
+      >
+        <el-menu-item :index="item.name" v-for="(item,index) in categoryRouter" :key="index+'dzjkChildrenRoute'">
+          <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
+            {{item.meta.title}}
+          </router-link>
+        </el-menu-item>
+      </el-menu>
+      <div class="ems-content-container ems-content-container-padding sbjk-ems-content-container">
+        <keep-alive>
+          <router-view></router-view>
+        </keep-alive>
+      </div>
   </div>
 
 </template>
 
 <script>
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import { dzjk } from '@/router/ems'
+import {mapState} from "vuex";
 const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkSbjk').children//获取到单站监控-设备监控下面的字路由
 export default {
   name:'DzjkSbjk',
+  mixins:[getQuerySiteId],
+  computed:{
+    ...mapState({
+      zdDeviceCategoryOptions: state => state.ems.zdDeviceCategoryOptions,
+    }),
+    locationSiteCategory(){
+      return this.zdDeviceCategoryOptions[this.siteId] || []
+    },
+    categoryRouter(){
+      const routeData =this.childrenRoute.filter(item=>this.locationSiteCategory.includes(item.meta.categoryName))
+      if(this.siteId && routeData.length > 0 && this.locationSiteCategory && this.locationSiteCategory.length >1){
+        const locationPageCategoryName = this.$route.meta?.categoryName || ''
+        if(!routeData.some(item=> item.meta.categoryName===locationPageCategoryName)){
+          this.$router.replace({path:'/dzjk/sbjk/ssyx',query:this.$route.query})
+        }
+      }
+      return routeData
+    }
+  },
   data(){
     return {
       childrenRoute,
-      activeMenu:''
+      activeMenu:'',
+      loading:false,
     }
   },
+  methods:{
+    init(){
+      this.loading=true
+      this.$store.dispatch('getSiteDeviceCategory',this.siteId).finally(()=>this.loading=false)
+    }
+  }
 }
 </script>