5.27

src/views/home/home.vue

@@ -6,31 +6,14 @@
         <van-notice-bar class="notice" scrollable text="下滑刷新页面" color="black" />
         <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
           <van-swipe-item>信安智能</van-swipe-item>
-          <!-- <van-swipe-item>2</van-swipe-item> -->
-          <!-- <van-swipe-item>3</van-swipe-item> -->
         </van-swipe>
         <div class="item-content">
           <van-cell-group inset>
-            <van-cell size="large" class="custom-cell" title="显示设置" icon="photo-o" is-link value="显示"
+            <!-- 全部改为动态渲染的菜单项 -->
-              @click="navigateTo('web/screen_main.html')" />
+            <template v-for="(item, index) in filteredMenuItems" :key="index">
-            <van-cell size="large" class="custom-cell" title="声卡设置" icon="volume-o" is-link value="语音"
+              <van-cell size="large" class="custom-cell" :title="item.title" :icon="item.icon" is-link
-              @click="goto('voiceset')" />
+                :value="item.value" @click="item.action" />
-            <van-cell size="large" class="custom-cell" title="车牌识别" icon="search" is-link value="识别"
+            </template>
-              @click="goto('recognition')" />
-            <van-cell size="large" class="custom-cell" title="预警设置" icon="warning-o" is-link value="预警"
-              @click="goto('warning')" />
-            <van-cell size="large" class="custom-cell" title="远程喊话" icon="bullhorn-o" is-link value="喊话"
-              @click="navigateTo('web/voice_copy.html')" />
-            <!-- <van-cell size="large" class="custom-cell" title="小车控制" icon="logistics" is-link value="控制"
-              @click="goto('CarControl')" /> -->
-            <!-- <van-cell size="large" class="custom-cell" title="小车控制" icon="car" is-link value="控制" @click="goto('TEST')" /> -->
-            <!-- <van-cell size="large" class="custom-cell" title="小车控制" icon="car" is-link value="控制" @click="goto('AudioPlay')" /> -->
-            <van-cell size="large" class="custom-cell" title="网关设置" icon="desktop-o" is-link value="控制"
-              @click="goto('GatewaySetting')" />
-            <van-cell size="large" class="custom-cell" title="路锥控制" icon="warning-o" is-link value="控制"
-              @click="goto('ConeControl')" />
-            <van-cell size="large" class="custom-cell" title="翻转屏遥控" icon="warning-o" is-link value="控制"
-              @click="goto('flipScreen')" />
           </van-cell-group>
         </div>
       </div>
@@ -40,64 +23,102 @@
 </template>
 
 <script>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
-import axios from 'axios';
 import Header from "../../components/Header.vue";
 import Footer from "../../components/Footer.vue";
+
 export default {
-  components: {
+  components: { Header, Footer },
-    Header,
-    Footer
-  },
   setup() {
     const currentTitle = ref('系统设置');
     const loading = ref(false);
     const router = useRouter();
 
-    // 模拟刷新过程的函数
+    // 所有菜单项配置（8个，对应8位二进制）
+    const allMenuItems = ref([
+      { title: "显示设置", icon: "photo-o", value: "显示", action: () => navigateTo('web/screen_main.html') },
+      { title: "声卡设置", icon: "volume-o", value: "语音", action: () => goto('voiceset') },
+      { title: "车牌识别", icon: "search", value: "识别", action: () => goto('recognition') },
+      { title: "预警设置", icon: "warning-o", value: "预警", action: () => goto('warning') },
+      { title: "远程喊话", icon: "bullhorn-o", value: "喊话", action: () => navigateTo('web/voice_copy.html') },
+      { title: "网关设置", icon: "desktop-o", value: "控制", action: () => goto('GatewaySetting') },
+      { title: "路锥控制", icon: "warning-o", value: "控制", action: () => goto('ConeControl') },
+      { title: "翻转屏遥控", icon: "warning-o", value: "控制", action: () => goto('flipScreen') }
+    ]);
+
+    // 从父页面接收的权限控制字符串（8位二进制）
+    const permissionString = ref('00000000'); // 默认全部隐藏 
+
+    // 计算属性：过滤出需要显示的菜单项 
+    const filteredMenuItems = computed(() => {
+      return allMenuItems.value.filter((_, index) => {
+        return permissionString.value[index] === '1';
+      });
+    });
+
+    // 更新菜单显示状态的函数 
+    const updateMenuVisibility = (binaryStr) => {
+      allMenuItems.value.forEach((item, index) => {
+        item.isVisible = binaryStr[index] === '1';
+      });
+    };
+
+    // 监听父页面的消息 
+    onMounted(() => {
+      const messageHandler = (event) => {
+        console.log(' 收到父页面消息:', event.data);
+
+        // 更简洁的写法（当确定格式为XXXXXXXX/XXX时）
+        if (typeof event.data === 'string') {
+          permissionString.value = event.data.substring(0, 8);
+          if (/^[01]{8}$/.test(permissionString.value)) {
+            updateMenuVisibility(permissionString.value);
+          }
+        } else {
+          console.error(' 无效的权限字符串:', event.data);
+        }
+      };
+
+      window.addEventListener('message', messageHandler);
+
+      // 在组件卸载时移除事件监听器
+      onBeforeUnmount(() => {
+        window.removeEventListener('message', messageHandler);
+        console.log('移除事件监听器');
+      });
+    });
+
+    // 跳转方法 
+    const navigateTo = (path) => {
+      window.location.href = path;
+    };
+
+    const goto = (name) => {
+      router.push({ name });
+    };
+
     const onRefresh = () => {
       setTimeout(() => {
         loading.value = false;
       }, 1000);
     };
 
-    // 导航到不同页面的函数
-    const navigateTo = (path) => {
-      window.location.href = path;
-    };
-
-    // 使用 router 进行路由跳转
-    const goto = (name) => {
-      router.push({ name });
-    };
-
-
-
-    onMounted(() => {
-      // window.addEventListener('message', function (event) {
-      //   // console.log("message",JSON.stringify(message))
-      //   // 仅校验消息结构（非必须但建议）
-      //   if (event.data ) {
-      //     const thingsModels = event.data.data;
-      //     console.log('Received  thingsModels:', thingsModels);
-      //     // 注意：确保 thingsModels 的使用是安全的！
-      //   }
-      // });
-    });
-
     return {
       currentTitle,
       loading,
+      filteredMenuItems,
       onRefresh,
       navigateTo,
       goto,
+      updateMenuVisibility
     };
   }
 };
 </script>
 
 <style scoped>
+/* 原有样式保持不变 */
 .page-container {
   display: flex;
   flex-direction: column;
@@ -117,7 +138,6 @@ export default {
 
 .item-content {
   margin-top: 20px;
-
 }
 
 van-pull-refresh {
@@ -147,7 +167,6 @@ van-pull-refresh {
 .custom-cell .van-cell__value,
 .custom-cell .van-icon {
   font-size: 20px;
-  /* Adjust the font size as needed */
 }
 
 .custom-cell .van-cell__title {
@@ -156,6 +175,5 @@ van-pull-refresh {
 
 .custom-cell .van-cell__value {
   color: #666;
-  /* Customize the value text color if needed */
 }
-</style>
+</style>

src/views/system-info/info.vue

@@ -112,16 +112,16 @@ export default {
 
     // 检查环境是否为本地
     const isLocal = window.location.hostname === '192.168.4.1';
-     const MQTT_send = (send_string) => {
+    const MQTT_send = (send_string) => {
-            console.log(" 向父页面发送消息:", JSON.stringify(send_string));
+      console.log(" 向父页面发送消息:", JSON.stringify(send_string));
-            // 使用 postMessage 发送数据给父页面 
+      // 使用 postMessage 发送数据给父页面 
-            window.parent.postMessage(
+      window.parent.postMessage(
-                {
+        {
-                    data: send_string
+          data: send_string
-                },
+        },
-                '*' // 目标 origin，生产环境应替换为具体的父页面域名 
+        '*' // 目标 origin，生产环境应替换为具体的父页面域名 
-            );
+      );
-        };
+    };
 
     const handleMQTTMessage = (string) => {
       console.log("MQTT 接收:" + string);
@@ -245,8 +245,13 @@ export default {
 
     // MQTT 接收函数
     const MQTT_recv = (string) => {
-      console.log("MQTT 接收的json:" + string);
+      // console.log("MQTT 接收的json:" + string);
-      handleMQTTMessage(string);
+      // 先解析一次字符串化的 JSON
+      const parsedString = JSON.parse(string);
+      // 如果解析后的结果仍然是字符串，需要再次解析
+      const data = typeof parsedString === 'string' ? JSON.parse(parsedString) : parsedString;
+      console.log("MQTTRECV 接收的json:" + JSON.stringify(data));
+      handleMQTTMessage(JSON.stringify(data));
     };
     // 下拉刷新事件处理函数
     const onRefresh = async () => {
@@ -278,12 +283,20 @@ export default {
     // 在组件挂载时建立 MQTT 连接
     onMounted(() => {
       console.log(isLocal);
-      onRefresh();
+      const messageHandler = function (event) {
-      window.addEventListener('message', function (event) {
+        console.log("111接受的原始数据", JSON.stringify(event.data))
-        console.log("接受的原始数据", JSON.stringify(event.data))
         if (event.data) {
           MQTT_recv(JSON.stringify(event.data));  // 保持与原 MQTT_recv 兼容 
         }
+      };
+      window.addEventListener('message', messageHandler);
+      // onRefresh();
+
+      // 在组件卸载时移除事件监听器
+      onBeforeUnmount(() => {
+        window.removeEventListener('message', messageHandler);
+        console.log('移除事件监听器');
+
       });
     });