fix : 菜单显示问题

src/components/manageBtn/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="manage-btn">
-    <div v-for="(item,index) in btnList" :key="item.name" class="btn-box" @click="select(item,index)">
+    <div v-for="(item,index) in list" :key="item.name" class="btn-box" @click="select(item,index)">
       <div :style="{ backgroundImage:'url(' +getImageUrl(item.icon)+')' }"></div>
       <div :class="{'select-active':selectButton===index}">{{ item.name }}</div>
     </div>
@@ -18,17 +18,17 @@ const props = defineProps({
     default: []
   },
 })
-watch(() => props.list, (now) => {
+// watch(() => props.list, (now) => {
-  let newArr=[]
+//   let newArr=[]
-  btnList.value.forEach((btnList) => {
+//   btnList.value.forEach((btnList) => {
-    now.forEach((item) => {
+//     now.forEach((item) => {
-      if (btnList.route==item) {
+//       if (btnList.route==item) {
-        newArr.push(btnList)
+//         newArr.push(btnList)
-      }
+//       }
-    })
+//     })
-  })
+//   })
-  btnList.value=newArr
+//   btnList.value=newArr
-}, {deep: true});
+// }, {deep: true});
 const emit = defineEmits(["update:modelValue", "select"]);
 const btnList = ref([
   {
@@ -56,6 +56,7 @@ const btnList = ref([
   //   name: '模拟仿真'
   // },
 ])
+const newList=ref([])
 const selectButton = ref(props.modelValue);
 const getImageUrl = (name) => {
   return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href

src/views/tunnel/index.vue

@@ -16,8 +16,8 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-                  item.label
+                    item.label
-                }}
+                  }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -36,21 +36,21 @@
     <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-          :transducer-data="largeScreenData" />
+                  :transducer-data="largeScreenData"/>
         <!--        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
+        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
     </div>
     <div class="right">
       <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
+        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" />
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -77,14 +77,14 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import { dateFormat } from "@/utils/date.js";
+import {dateFormat} from "@/utils/date.js";
-import { getToken } from "@/utils/auth";
+import {getToken} from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
+import {useAuthStore} from "@/store/userstore.js";
-import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
+import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
-import { ElMessage, ElMessageBox } from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
-import { getUserInfo } from "@/api/login";
+import {getUserInfo} from "@/api/login";
-import { initSceneData } from "@/api/tunnelScene";
+import {initSceneData} from "@/api/tunnelScene";
-import { getSiteDetail } from "../../api/site";
+import {getSiteDetail} from "../../api/site";
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -106,6 +106,32 @@ const tunnelLength = ref(0);
 const constructionLength = ref(0);
 const routeList = ref([]);
 let socket = reactive("");
+const btnList = ref([
+  {
+    route: '/site',
+    icon: 'sp_icon_zdgl.png',
+    name: '站点管理'
+  },
+  {
+    route: '/tunnel',
+    icon: 'sp_icon_sdgl.png',
+    name: '隧道管理'
+  },
+  {
+    route: '/user',
+    icon: 'sp_icon_yhgl.png',
+    name: '用户管理'
+  },
+  // {
+  //   route: '/system',
+  //   icon: 'sp_icon_xtgl.png',
+  //   name: '系统管理'
+  // },
+  // {
+  //   icon: 'sp_icon_mngl.png',
+  //   name: '模拟仿真'
+  // },
+])
 const serialNumber = ref("SC00DY00GH00ELBT");
 let token = getToken();
 let send = {
@@ -126,165 +152,174 @@ onMounted(() => {
 });
 const getUser = () => {
   getUserInfo().then(res => {
-    showMenu.value=true
     currentUser.value = res.data.user.userName
     currentUserId.value = res.data.user.userId
   })
 }
 const getDefaultSite = (siteId) => {
-    // console.log('siteList.value',siteList.value)
+  // console.log('siteList.value',siteList.value)
-    // getSiteDetail(siteId).then((res) => {
+  // getSiteDetail(siteId).then((res) => {
-    //   console.log('res',res)
+  //   console.log('res',res)
-    // });
+  // });
-  }
+}
-  const getOtherInfo = () => {
+const getOtherInfo = () => {
-    getLargeScreenInfo().then((res) => {
+  getLargeScreenInfo().then((res) => {
+    if (res?.code === 1000) {
+      let routeArr = [];
+      console.log(res.data.routeList,"res.data.routeList")
+      res.data.routeList.forEach((item, index) => {
+        for (let btn of btnList.value) {
+          if (item === btn.route){
+            routeArr.push(btn)
+          }
+        }
+      })
+      routeList.value = routeArr
+      showMenu.value = true
+      siteList.value = res.data.siteOption
+      currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
+      currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
+      getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
+    }
+  });
+};
+const getScreenInfo = (id) => {
+  if (id) {
+    tunnelId.value = id
+    getLargeScreen(id).then((res) => {
       if (res?.code === 1000) {
-        routeList.value = res.data.routeList
+        largeScreenData.value = res.data;
-        siteList.value = res.data.siteOption
+      } else {
-        currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
+        ElMessage.warning(res.msg)
-        currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
-        getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
       }
     });
+    initSceneData(id).then((res) => {
+      tunnelLength.value = res.data.tunnelLength
+      constructionLength.value = res.data.constructionLength
+    })
+  }
+};
+//根据站点id获取隧道信息
+const getTunnel = (id) => {
+  getTunnelBySiteId(id).then((res) => {
+    if (res?.code === 1000) {
+      tunnelList.value = res.data
+      getScreenInfo(res.data[0]?.value)
+    }
+  });
+}
+const changeTunnel = (e) => {
+  let newObj = {}
+  tunnelList.value.forEach((item, index) => {
+    if (index === e) {
+      newObj = item
+    }
+  })
+  getScreenInfo(newObj.value)
+  nextTick(() => {
+    showFan.value = true;
+  });
+}
+const manageSelect = (index) => {
+  console.log("首页点击-", index);
+  if (index == '站点管理') {
+    if (currentUserId.value) {
+      router.push("/site/" + currentUserId.value);
+    }
+  } else if (index == '隧道管理') {
+    if (currentSiteId.value && currentUserId.value) {
+      router.push("/tunnel/" + currentSiteId.value + '/i/' + currentUserId.value);
+    }
+  } else if (index == '用户管理') {
+    if (currentSiteId.value) {
+      router.push("/user/" + currentSiteId.value);
+    }
+  }
+};
+const handleChangeSite = (item) => {
+  currentSite.value = item.label
+  currentSiteId.value = item.value
+  getTunnel(item.value)
+  showFan.value = false
+  nextTick(() => {
+    showFan.value = true;
+  });
+}
+const closeLeft = () => {
+  drawerLeft.value = !drawerLeft.value;
+};
+const closeRight = () => {
+  drawerRight.value = !drawerRight.value;
+};
+const handleLogout = () => {
+  ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    authStore.userLogout();
+    router.push("/login");
+  })
+};
+const previousBtn = () => {
+  tunnelBtn.value.prev();
+};
+const nextBtn = () => {
+  tunnelBtn.value.next();
+};
+
+const initWebSocket = () => {
+  // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
+  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
+  console.log(wsUrl);
+  socket = new WebSocket(wsUrl);
+  //连接发生错误的回调方法
+  socket.onerror = function () {
+    console.log("ws连接发生错误");
   };
-  const getScreenInfo = (id) => {
+  //连接成功建立的回调方法
-    if (id) {
+  socket.onopen = function () {
-      tunnelId.value = id
+    console.log("ws连接成功");
-      getLargeScreen(id).then((res) => {
+  };
-        if (res?.code === 1000) {
+  //接收到消息的回调方法
-          largeScreenData.value = res.data;
+  socket.onmessage = function (event) {
-        } else {
+    console.log("服务器返回的信息: ", JSON.parse(event.data));
-          ElMessage.warning(res.msg)
+    const type = JSON.parse(event.data).type;
+    const data = JSON.parse(event.data).data;
+    if (type === "equipment") {
+      data.forEach((item) => {
+        if (item.typeKey === "frequency") {
+          socketData.leftData = data;
+        } else if (item.typeKey === "windPressure") {
+          socketData.windPressure = data;
+        } else if (item.typeKey === "sensor") {
+          socketData.sensor = data;
         }
       });
-      initSceneData(id).then((res) => {
-        tunnelLength.value = res.data.tunnelLength
-        constructionLength.value = res.data.constructionLength
-      })
     }
   };
-  //根据站点id获取隧道信息
+  //连接关闭的回调方法
-  const getTunnel = (id) => {
+  socket.onclose = function () {
-    getTunnelBySiteId(id).then((res) => {
+    console.log("ws连接关闭");
-      if (res?.code === 1000) {
+    // initWebSocket()
-        tunnelList.value = res.data
-        getScreenInfo(res.data[0]?.value)
-      }
-    });
-  }
-  const changeTunnel = (e) => {
-    let newObj = {}
-    tunnelList.value.forEach((item, index) => {
-      if (index === e) {
-        newObj = item
-      }
-    })
-    getScreenInfo(newObj.value)
-    nextTick(() => {
-      showFan.value = true;
-    });
-  }
-  const manageSelect = (index) => {
-    console.log("首页点击-", index);
-    if (index == '站点管理') {
-      if (currentUserId.value) {
-        router.push("/site/" + currentUserId.value);
-      }
-    } else if (index == '隧道管理') {
-      if (currentSiteId.value && currentUserId.value) {
-        router.push("/tunnel/" + currentSiteId.value + '/i/' + currentUserId.value);
-      }
-    } else if (index == '用户管理') {
-      if (currentSiteId.value) {
-        router.push("/user/" + currentSiteId.value);
-      }
-    }
   };
-  const handleChangeSite = (item) => {
+  setInterval(() => {
-    currentSite.value = item.label
+    socket.send(JSON.stringify(send));
-    currentSiteId.value = item.value
+  }, 30000);
-    getTunnel(item.value)
+};
-    showFan.value=false
+const closeSocket = () => {
-    nextTick(() => {
+  socket.close();
-      showFan.value = true;
+};
-    });
+initWebSocket();
-  }
-  const closeLeft = () => {
-    drawerLeft.value = !drawerLeft.value;
-  };
-  const closeRight = () => {
-    drawerRight.value = !drawerRight.value;
-  };
-  const handleLogout = () => {
-    ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(() => {
-      authStore.userLogout();
-      router.push("/login");
-    })
-  };
-  const previousBtn = () => {
-    tunnelBtn.value.prev();
-  };
-  const nextBtn = () => {
-    tunnelBtn.value.next();
-  };
-
-  const initWebSocket = () => {
-    // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
-    let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
-    console.log(wsUrl);
-    socket = new WebSocket(wsUrl);
-    //连接发生错误的回调方法
-    socket.onerror = function () {
-      console.log("ws连接发生错误");
-    };
-    //连接成功建立的回调方法
-    socket.onopen = function () {
-      console.log("ws连接成功");
-    };
-    //接收到消息的回调方法
-    socket.onmessage = function (event) {
-      console.log("服务器返回的信息: ", JSON.parse(event.data));
-      const type = JSON.parse(event.data).type;
-      const data = JSON.parse(event.data).data;
-      if (type === "equipment") {
-        data.forEach((item) => {
-          if (item.typeKey === "frequency") {
-            socketData.leftData = data;
-          } else if (item.typeKey === "windPressure") {
-            socketData.windPressure = data;
-          } else if (item.typeKey === "sensor") {
-            socketData.sensor = data;
-          }
-        });
-      }
-    };
-    //连接关闭的回调方法
-    socket.onclose = function () {
-      console.log("ws连接关闭");
-      // initWebSocket()
-    };
-    setInterval(() => {
-      socket.send(JSON.stringify(send));
-    }, 30000);
-  };
-  const closeSocket = () => {
-    socket.close();
-  };
-  initWebSocket();
 
 
-  watch(
+watch(
     () => tunnelId.value,
     (now) => {
       tunnelId.value = now
     },
-    { deep: true }
+    {deep: true}
-  )
+)
 </script>
 <style lang="scss">
 .el-dropdown__popper.el-popper {