站点选择下拉框的数据获取、存储处理逻辑更新，解决因为多层router-view嵌套，二级路由以上页面不会被缓存的而导致单站监控页面站点选择下拉框闪烁的问题

src/components/Ems/ZdSelect/index.vue

@@ -19,8 +19,14 @@
 </style>
 <script>
 import {getAllSites} from '@/api/ems/zddt'
+import {mapGetters} from "vuex"
   export default {
     props:{
+      getListByStore:{
+        type:Boolean,
+        default:false,
+        required:false
+      },
       defaultSiteId:{//默认展示的站点ID
         type:String|Number,
         default:'',
@@ -31,33 +37,54 @@ import {getAllSites} from '@/api/ems/zddt'
       return {
         id:'',
         loading:false,
-        siteList:[]
+        siteList:[],
       }
     },
+    computed:{
+      ...mapGetters(["zdList"]),
+    },
     methods:{
       onSubmit(){
         this.$emit('submitSite',this.id)
       },
       change(id){
         this.$emit('changeSite',id)
+      },
+      setDefaultSite(){
+        const defaultSite = parseInt(this.defaultSiteId)
+        if(defaultSite && this.siteList.find(item=>item.id === defaultSite)){
+          this.id = defaultSite
+        }else if(!defaultSite && this.siteList.length>0){
+          this.id = this.siteList[0].id
+        }
+        this.$emit('submitSite',this.id)
+      },
+      getList(){
+       return getAllSites().then(response => {
+          this.siteList = response.data || []
+          console.log("获取站点列表返回数据",response,this.siteList)
+          this.setDefaultSite()
+        }).finally(() => {this.loading=false})
       }
     },
     mounted(){
       this.loading=true
       this.$nextTick(()=>{
-        getAllSites().then(response => {
+        if(this.getListByStore){
-          this.siteList = response.data || []
+          if(this.zdList.length === 0){
-          console.log("获取站点列表返回数据",response,this.siteList)
+            this.getList().then(()=>{
-          // 页面初始化 设置默认选中的站点
+              this.$store.commit('SET_ZD_LIST', this.siteList)
-          //defaultSite会传来字符串类型 getAllSites接口返回的id是number类型 两个数据的类型不匹配时下拉框的默认值会显示有问题
+              console.log("从store中获取站点列表数据,但是store中的zdList=[]，所以从接口获取数据",this.zdList,this.siteList)
-          const defaultSite = parseInt(this.defaultSiteId)
+            })
-          if(defaultSite&& this.siteList.find(item=>item.id === defaultSite)){
+          }else{
-            this.id = defaultSite
+            this.siteList = this.zdList
-          }else if(!defaultSite && this.siteList.length>0){
+            this.loading=false
-            this.id = this.siteList[0].id
+            console.log("从store中获取站点列表数据",this.zdList,this.siteList)
+            this.setDefaultSite()
           }
-          this.$emit('submitSite',this.id)
+        }else{
-        }).finally(() => {this.loading=false})
+          this.getList()
+        }
       })
     }
   }

src/store/getters.js

@@ -16,6 +16,7 @@ const getters = {
   permission_routes: state => state.permission.routes,
   topbarRouters: state => state.permission.topbarRouters,
   defaultRoutes: state => state.permission.defaultRoutes,
-  sidebarRouters: state => state.permission.sidebarRouters
+  sidebarRouters: state => state.permission.sidebarRouters,
+  zdList:state=>state.ems.zdList
 }
 export default getters

src/store/index.js

@@ -6,6 +6,7 @@ import user from './modules/user'
 import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
+import ems from './modules/ems'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -17,7 +18,8 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    settings
+    settings,
+    ems
   },
   getters
 })

src/store/modules/ems.js

@@ -0,0 +1,12 @@
+const ems = {
+  state: {
+    zdList:[]
+  },
+  mutations: {
+    SET_ZD_LIST(state, list) {
+      state.zdList = list || []
+    }
+  },
+}
+
+export default ems

src/views/ems/dzjk/index.vue

@@ -2,7 +2,7 @@
 
 <template>
   <div class="ems-dashboard-editor-container">
-  <zd-select :default-site-id="$route.query.siteId" @submitSite="submitSite"/>
+  <zd-select :get-list-by-store="true" :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'">
@@ -42,6 +42,12 @@ export default {
       }
     }
   },
+  beforeRouteLeave(to,from, next){
+    //从单站监控下面的所有子页面跳出时会触发
+    // 清空store中的zdList 保障下次进入到单站监控会重新调用接口获取数据
+    this.$store.commit('SET_ZD_LIST',[])
+    next()
+  },
   mounted() {
     console.log('单站监控一级页面路由',this.$route)
   }