5.27

package-lock.json

@@ -27,6 +27,7 @@
         "lamejs": "^1.2.1",
         "mqtt": "^2.18.8",
         "nipplejs": "^0.10.2",
+        "qiankun": "^2.10.16",
         "vant": "^4.9.5",
         "vconsole": "^3.15.1",
         "vue": "^3.2.13",
@@ -8199,6 +8200,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/import-html-entry": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmmirror.com/import-html-entry/-/import-html-entry-1.17.0.tgz",
+      "integrity": "sha512-2SDsRlGlE8bqdnGqsOyiDPEWlzJR0jNW4LWopnZl5QE1Yd0nJ7fykWo2GaKUF7Jq7pR0g3dElhuJHyamTt1gPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -11277,6 +11287,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/qiankun": {
+      "version": "2.10.16",
+      "resolved": "https://registry.npmmirror.com/qiankun/-/qiankun-2.10.16.tgz",
+      "integrity": "sha512-Q3tSVUrPnzx8ckEOKIoPnhb5LE28FPKyan/r6jEuGJGqTbIy+3rp6E2/KfU82ZI4yZpef9LFTrnxdj49jAEsmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.5",
+        "import-html-entry": "^1.15.1",
+        "lodash": "^4.17.11",
+        "single-spa": "^5.9.2"
+      }
+    },
     "node_modules/qs": {
       "version": "6.13.0",
       "resolved": "https://registry.npmmirror.com/qs/-/qs-6.13.0.tgz",
@@ -12015,6 +12037,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/single-spa": {
+      "version": "5.9.5",
+      "resolved": "https://registry.npmmirror.com/single-spa/-/single-spa-5.9.5.tgz",
+      "integrity": "sha512-9SQdmsyz4HSP+3gs6PJzhkaMEg+6zTlu9oxIghnwUX3eq+ajq4ft5egl0iyR55LAmO/UwvU8NgIWs/ZyQMa6dw==",
+      "license": "MIT"
+    },
     "node_modules/sirv": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/sirv/-/sirv-2.0.4.tgz",

package.json

@@ -27,6 +27,7 @@
     "lamejs": "^1.2.1",
     "mqtt": "^2.18.8",
     "nipplejs": "^0.10.2",
+    "qiankun": "^2.10.16",
     "vant": "^4.9.5",
     "vconsole": "^3.15.1",
     "vue": "^3.2.13",

public/web/js/MQTT_port.js

@@ -6,7 +6,7 @@
  * @LastEditors: Andy
  * @LastEditTime: 2024-03-11 11:07:00
  */
-var MQTT_MODE = 0;
+var MQTT_MODE = 1;
 
 function pageName() {
     var a = location.href;
@@ -25,7 +25,7 @@ function MQTT_send(string) {
         json_id = 0;
     }
     localStorage.setItem("json_id", json_id);
-    let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + string + "}";
+    let send_string = "JSON_id\":" + json_id + ",\"board_id\":102" + ",\"led_protocol\":" + string ;
     console.log("MQTT 发送:" + send_string);
 
     if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) {
@@ -37,7 +37,7 @@ function MQTT_send(string) {
     } else {
         //这里需要将string发送出去
         window.parent.postMessage({
-            str: send_string
+            data: send_string
         }, "*"); // 替换为Vue应用的URL
     }
 
@@ -109,3 +109,9 @@ function MQTT_recv(string) {
         voice_reply_parse_fun(string);
     }
 }
+window.addEventListener('message', function (event) {
+    console.log("接受的原始数据", JSON.stringify(event.data))
+    if (event.data) {
+        MQTT_recv(JSON.stringify(event.data));  // 保持与原 MQTT_recv 兼容 
+    }
+});

src/main.js

@@ -73,3 +73,36 @@ app.use(store).use(router).mount('#app');
 
 window.VueRouter = router; // 这里立即暴露 router
 console.log("VueRouter 已暴露到全局");
+
+
+// qiankun
+ 
+// let instance = null;
+ 
+// function render(props = {}) {
+//   const { container } = props;
+//   instance = new Vue({
+//     render: (h) => h(App),
+//   }).$mount(container ? container.querySelector('#app')  : '#app');
+// }
+ 
+// // 独立运行（非 Qiankun 环境）
+// if (!window.__POWERED_BY_QIANKUN__) {
+//   render();
+// }
+ 
+// // Qiankun 生命周期
+// export async function bootstrap() {
+//   console.log('[subapp]  bootstrap');
+// }
+ 
+// export async function mount(props) {
+//   console.log('[subapp]  mount', props);
+//   render(props);
+// }
+ 
+// export async function unmount() {
+//   console.log('[subapp]  unmount');
+//   instance.$destroy();
+//   instance = null;
+// }

src/views/forewarning/forewarning.vue

@@ -331,17 +331,14 @@ export default {
       }
     }
     const MQTT_send = (send_string) => {
-      console.log("MQTT 发送:" + JSON.stringify(send_string));
+      console.log(" 向父页面发送消息:", JSON.stringify(send_string));
-      jsonId.value++;
+      // 使用 postMessage 发送数据给父页面 
-      if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) {
+      window.parent.postMessage(
-        uni.postMessage({
+        {
-          data: {
+          data: send_string
-            str: JSON.stringify(send_string)
+        },
-          }
+        '*' // 目标 origin，生产环境应替换为具体的父页面域名 
-        });
+      );
-      } else {
-        window.parent.postMessage({ str: JSON.stringify(send_string) }, "*");
-      }
     };
 
     const MQTT_recv = (string) => {
@@ -371,8 +368,15 @@ export default {
     onMounted(async () => {
       await checkEnvironment();
       console.log(isLocal.value);
-      window.MQTT_recv = MQTT_recv;
+      // window.MQTT_recv = MQTT_recv;
-
+      window.addEventListener('message', function (event) {
+        // console.log("message",JSON.stringify(message))
+        // 仅校验消息结构（非必须但建议）
+        console.log("接受的原始数据", JSON.stringify(event.data))
+        if (event.data) {
+          MQTT_recv(JSON.stringify(event.data));  // 保持与原 MQTT_recv 兼容 
+        }
+      });
       onRefresh();
     });
     onBeforeUnmount(() => {

src/views/home/home.vue

@@ -6,22 +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')" />
+            <!-- 全部改为动态渲染的菜单项 -->
-            <van-cell size="large" class="custom-cell" title="声卡设置" icon="volume-o" is-link value="语音" @click="goto('voiceset')" />
+            <template v-for="(item, index) in filteredMenuItems" :key="index">
-            <van-cell size="large" class="custom-cell" title="车牌识别" icon="search" is-link value="识别" @click="goto('recognition')" />
+              <van-cell size="large" class="custom-cell" :title="item.title" :icon="item.icon" is-link
-            <van-cell size="large" class="custom-cell" title="预警设置" icon="warning-o" is-link value="预警" @click="goto('warning')" />
+                :value="item.value" @click="item.action" />
-            <van-cell size="large" class="custom-cell" title="远程喊话" icon="bullhorn-o" is-link value="喊话" @click="navigateTo('web/voice_copy.html')" />
+            </template>
-            <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>
@@ -31,55 +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(() => {
-    });
-
     return {
       currentTitle,
       loading,
+      filteredMenuItems,
       onRefresh,
       navigateTo,
       goto,
+      updateMenuVisibility
     };
   }
 };
 </script>
 
 <style scoped>
+/* 原有样式保持不变 */
 .page-container {
   display: flex;
   flex-direction: column;
@@ -99,7 +138,6 @@ export default {
 
 .item-content {
   margin-top: 20px;
-  
 }
 
 van-pull-refresh {
@@ -128,7 +166,7 @@ van-pull-refresh {
 .custom-cell .van-cell__label,
 .custom-cell .van-cell__value,
 .custom-cell .van-icon {
-  font-size: 20px; /* Adjust the font size as needed */
+  font-size: 20px;
 }
 
 .custom-cell .van-cell__title {
@@ -136,7 +174,6 @@ van-pull-refresh {
 }
 
 .custom-cell .van-cell__value {
-  color: #666; /* Customize the value text color if needed */
+  color: #666;
 }
-
 </style>

src/views/recognize/License-plate-recognition.vue

@@ -643,17 +643,14 @@ export default {
             }
         };
         const MQTT_send = (send_string) => {
-            console.log("MQTT 发送:" + JSON.stringify(send_string));
+            console.log(" 向父页面发送消息:", JSON.stringify(send_string));
-            jsonId.value++;
+            // 使用 postMessage 发送数据给父页面 
-            if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) {
+            window.parent.postMessage(
-                uni.postMessage({
+                {
-                    data: {
+                    data: send_string
-                        str: JSON.stringify(send_string)
+                },
-                    }
+                '*' // 目标 origin，生产环境应替换为具体的父页面域名 
-                });
+            );
-            } else {
-                window.parent.postMessage({ str: JSON.stringify(send_string) }, "*");
-            }
         };
 
         const MQTT_recv = (string) => {
@@ -667,7 +664,12 @@ export default {
         onMounted(async () => {
             await checkEnvironment();
             console.log(isLocal.value);
-            window.MQTT_recv = MQTT_recv;
+            window.addEventListener('message', function (event) {
+                console.log("接受的原始数据", JSON.stringify(event.data))
+                if (event.data) {
+                    MQTT_recv(JSON.stringify(event.data));  // 保持与原 MQTT_recv 兼容 
+                }
+            });
             onRefresh();
 
         });

src/views/system-info/info.vue

@@ -113,16 +113,14 @@ export default {
     // 检查环境是否为本地
     const isLocal = window.location.hostname === '192.168.4.1';
     const MQTT_send = (send_string) => {
-      console.log("MQTT 发送:" + JSON.stringify(send_string));
+      console.log(" 向父页面发送消息:", JSON.stringify(send_string));
-      if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) {
+      // 使用 postMessage 发送数据给父页面 
-        uni.postMessage({
+      window.parent.postMessage(
-          data: {
+        {
-            str: JSON.stringify(send_string)
+          data: send_string
-          }
+        },
-        });
+        '*' // 目标 origin，生产环境应替换为具体的父页面域名 
-      } else {
+      );
-        window.parent.postMessage({ str: JSON.stringify(send_string) }, "*");
-      }
     };
 
     const handleMQTTMessage = (string) => {
@@ -247,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 () => {
@@ -280,9 +283,21 @@ export default {
     // 在组件挂载时建立 MQTT 连接
     onMounted(() => {
       console.log(isLocal);
-      onRefresh();
+      const messageHandler = function (event) {
-      window.MQTT_recv = MQTT_recv;
+        console.log("111接受的原始数据", 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('移除事件监听器');
+
+      });
     });
 
     onBeforeUnmount(() => {

src/views/voice/voiceset.vue

@@ -400,8 +400,14 @@ export default {
         };
         // 在组件挂载时获取音频数据
         onMounted(async () => {
+            window.addEventListener('message', function (event) {
+                console.log("接受的原始数据",JSON.stringify(event.data))
+                if (event.data) {
+                    MQTT_recv(JSON.stringify(event.data));  // 保持与原 MQTT_recv 兼容 
+                }
+            });
             // showToast("success")
-            window.MQTT_recv = MQTT_recv;
+            // window.MQTT_recv = MQTT_recv;
             await checkEnvironment();
             getallinfo();
             // fetchAudioData(); // 获取音频数据
@@ -449,16 +455,14 @@ export default {
 
 
         const MQTT_send = (send_string) => {
-            console.log("MQTT 发送:" + JSON.stringify(send_string));
+            console.log(" 向父页面发送消息:", JSON.stringify(send_string));
-            if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) {
+            // 使用 postMessage 发送数据给父页面 
-                uni.postMessage({
+            window.parent.postMessage(
-                    data: {
+                {
-                        str: JSON.stringify(send_string)
+                    data: send_string
-                    }
+                },
-                });
+                '*' // 目标 origin，生产环境应替换为具体的父页面域名 
-            } else {
+            );
-                window.parent.postMessage({ str: JSON.stringify(send_string) }, "*");
-            }
         };
         // MQTT 接收函数
         const MQTT_recv = (string) => {

vue.config.js

@@ -26,7 +26,10 @@ module.exports = defineConfig({
   devServer: {
     open: true,
     hot: true,//自动保存
-    port:80
+    port: 80,
+    headers: {
+      'Access-Control-Allow-Origin': '*', // 允许跨域
+    },
   },
   chainWebpack: (config) => {
     config.plugin('code-inspector-plugin').use(
@@ -36,6 +39,14 @@ module.exports = defineConfig({
     );
   },
   configureWebpack: {
+    //qiankun
+    output: {
+      library: `subapp-[name]`, // 必须唯一 
+      libraryTarget: 'umd', // 必须使用 UMD 格式
+      chunkLoadingGlobal: `webpackJsonp_subapp`, // 避免全局 JSONP 冲突
+    },
+
+
     plugins: [
       // 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法
       // AutoImport({ resolvers: [VantResolver()] }),