diff --git a/package-lock.json b/package-lock.json index f6826fe..e5e3418 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 86e3176..e0efeb2 100644 --- a/package.json +++ b/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", diff --git a/public/web/js/MQTT_port.js b/public/web/js/MQTT_port.js index 88a1612..847519c 100644 --- a/public/web/js/MQTT_port.js +++ b/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,10 +25,10 @@ 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)) { + if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) { uni.postMessage({ data: { str: send_string @@ -37,7 +37,7 @@ function MQTT_send(string) { } else { //这里需要将string发送出去 window.parent.postMessage({ - str: send_string + data: send_string }, "*"); // 替换为Vue应用的URL } @@ -51,16 +51,16 @@ function MQTT_json_send(string, protocol) { } let send_string; localStorage.setItem("json_id", json_id); - if(protocol=="sound_card"){ - send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":103"+ ",\"" + protocol + "\":" + string + "}"; + if (protocol == "sound_card") { + send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":103" + ",\"" + protocol + "\":" + string + "}"; - }else{ + } else { send_string = "{\"JSON_id\":" + json_id + ",\"" + protocol + "\":" + string + "}"; } console.log("MQTT 发送:" + send_string); - if (/xazn/.test(navigator.userAgent)||/uni-app/.test(navigator.userAgent)) { + if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) { uni.postMessage({ data: { str: send_string @@ -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 兼容 + } +}); \ No newline at end of file diff --git a/src/main.js b/src/main.js index 8761210..44023d8 100644 --- a/src/main.js +++ b/src/main.js @@ -72,4 +72,37 @@ app.use(store).use(router).mount('#app'); window.VueRouter = router; // 这里立即暴露 router -console.log("VueRouter 已暴露到全局"); \ No newline at end of file +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; +// } \ No newline at end of file diff --git a/src/views/forewarning/forewarning.vue b/src/views/forewarning/forewarning.vue index bedcfa7..bee3fab 100644 --- a/src/views/forewarning/forewarning.vue +++ b/src/views/forewarning/forewarning.vue @@ -331,17 +331,14 @@ export default { } } const MQTT_send = (send_string) => { - console.log("MQTT 发送:" + JSON.stringify(send_string)); - jsonId.value++; - if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) { - uni.postMessage({ - data: { - str: JSON.stringify(send_string) - } - }); - } else { - window.parent.postMessage({ str: JSON.stringify(send_string) }, "*"); - } + console.log(" 向父页面发送消息:", JSON.stringify(send_string)); + // 使用 postMessage 发送数据给父页面 + window.parent.postMessage( + { + data: send_string + }, + '*' // 目标 origin，生产环境应替换为具体的父页面域名 + ); }; 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(() => { diff --git a/src/views/home/home.vue b/src/views/home/home.vue index 0d3f2c6..3103f9e 100644 --- a/src/views/home/home.vue +++ b/src/views/home/home.vue @@ -11,17 +11,26 @@
- - - - - - + + + + + + - - - + + +
@@ -66,6 +75,15 @@ export default { 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 { @@ -99,7 +117,7 @@ export default { .item-content { margin-top: 20px; - + } van-pull-refresh { @@ -128,7 +146,8 @@ 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; + /* Adjust the font size as needed */ } .custom-cell .van-cell__title { @@ -136,7 +155,7 @@ van-pull-refresh { } .custom-cell .van-cell__value { - color: #666; /* Customize the value text color if needed */ + color: #666; + /* Customize the value text color if needed */ } - diff --git a/src/views/recognize/License-plate-recognition.vue b/src/views/recognize/License-plate-recognition.vue index 2445fd6..663a179 100644 --- a/src/views/recognize/License-plate-recognition.vue +++ b/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)); - jsonId.value++; - if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) { - uni.postMessage({ - data: { - str: JSON.stringify(send_string) - } - }); - } else { - window.parent.postMessage({ str: JSON.stringify(send_string) }, "*"); - } + console.log(" 向父页面发送消息:", JSON.stringify(send_string)); + // 使用 postMessage 发送数据给父页面 + window.parent.postMessage( + { + data: send_string + }, + '*' // 目标 origin，生产环境应替换为具体的父页面域名 + ); }; 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(); }); diff --git a/src/views/system-info/info.vue b/src/views/system-info/info.vue index 6e9543f..d5f3d81 100644 --- a/src/views/system-info/info.vue +++ b/src/views/system-info/info.vue @@ -112,18 +112,16 @@ export default { // 检查环境是否为本地 const isLocal = window.location.hostname === '192.168.4.1'; - const MQTT_send = (send_string) => { - console.log("MQTT 发送:" + JSON.stringify(send_string)); - if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) { - uni.postMessage({ - data: { - str: JSON.stringify(send_string) - } - }); - } else { - window.parent.postMessage({ str: JSON.stringify(send_string) }, "*"); - } - }; + const MQTT_send = (send_string) => { + console.log(" 向父页面发送消息:", JSON.stringify(send_string)); + // 使用 postMessage 发送数据给父页面 + window.parent.postMessage( + { + data: send_string + }, + '*' // 目标 origin，生产环境应替换为具体的父页面域名 + ); + }; const handleMQTTMessage = (string) => { console.log("MQTT 接收:" + string); @@ -281,8 +279,12 @@ export default { onMounted(() => { console.log(isLocal); onRefresh(); - 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 兼容 + } + }); }); onBeforeUnmount(() => { diff --git a/src/views/voice/voiceset.vue b/src/views/voice/voiceset.vue index e2a2349..4d4bc9a 100644 --- a/src/views/voice/voiceset.vue +++ b/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)); - if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) { - uni.postMessage({ - data: { - str: JSON.stringify(send_string) - } - }); - } else { - window.parent.postMessage({ str: JSON.stringify(send_string) }, "*"); - } + console.log(" 向父页面发送消息:", JSON.stringify(send_string)); + // 使用 postMessage 发送数据给父页面 + window.parent.postMessage( + { + data: send_string + }, + '*' // 目标 origin，生产环境应替换为具体的父页面域名 + ); }; // MQTT 接收函数 const MQTT_recv = (string) => { @@ -1060,124 +1064,124 @@ export default { }); // json数据处理函数 function handleJsonMessage(data) { - // 如果存在新参数音量，则更新 - if (data.param) { - voicevalue.value = data.param.volume; - } - - // 更新文件名选项 - if (data && Array.isArray(data.mp3_list)) { - newFilename.value = getNextTTSFilename(combinedList.value); - filenamecolumns.value = data.mp3_list.map(mp3 => ({ - text: mp3, - value: mp3 - })); - } else { - console.warn('No valid mp3_list found in data.sound_card'); - } - - // 更新播放列表并合并到 combinedList - if (data.play_list) { - const newPlaylistItems = data.play_list.map(item => ({ - remark: item.remark, - filename: item.filename, - runningtime: item.play_time, - pauseduration: item.pause_time, - Broadcast_sound: item.TTS ? item.TTS.per : null, - speed: item.TTS ? item.TTS.spd : 0, - pit: item.TTS ? item.TTS.pit : 0, - vol: item.TTS ? item.TTS.vol : 0, - text: item.tts_str, - ...item - })); - playlist.value = newPlaylistItems; - combinedList.value.push(...newPlaylistItems); - } - - // 更新事件播放列表并合并到 combinedList - if (data.event_play_list) { - const newEventPlaylistItems = data.event_play_list.map(item => { - let eventType, eventsource; - switch (item.event.source) { - case 0: - eventsource = '本台设备'; - break; - case 254: - eventsource = '除本身外任意设备'; - break; - case 255: - eventsource = '任意设备'; - break; - default: - eventsource = '其他'; + // 如果存在新参数音量，则更新 + if (data.param) { + voicevalue.value = data.param.volume; } - switch (item.event.code) { - case 0: - eventType = '默认显示'; - break; - case 1: - eventType = '雷达触发(RS485 雷达)'; - break; - case 2: - eventType = '雷达超速(RS485 雷达)'; - break; - case 3: - eventType = '车牌触发(摄像头)'; - break; - case 4: - eventType = '车牌超速(摄像头)'; - break; - case 5: - eventType = '行人检测(相机)'; - break; - case 51: - eventType = 'IN1下降沿'; - break; - case 52: - eventType = 'IN2上升沿'; - break; - case 53: - eventType = 'IN3下降沿'; - break; - case 54: - eventType = 'IN4上升沿'; - break; - case 55: - eventType = 'IN1低电平'; - break; - case 56: - eventType = 'IN2高电平'; - break; - case 57: - eventType = 'IN3低电平'; - break; - case 58: - eventType = 'IN4高电平'; - break; - default: - eventType = '其他'; - } - return { - remark: item.remark, - EventSource: item.event.source, - eventcode: item.event.code, - EventSourcename: eventsource, - eventcodename: eventType, - priority: item.event.priority, - Broadcast_sound: item.TTS ? item.TTS.per : null, - speed: item.TTS ? item.TTS.spd : 0, - pit: item.TTS ? item.TTS.pit : 0, - vol: item.TTS ? item.TTS.vol : 0, - text: item.tts_str, - ...item - }; - }); - eventplaylist.value = newEventPlaylistItems; - combinedList.value.push(...newEventPlaylistItems); - } - console.log('combinedList:', JSON.stringify(combinedList.value)); -} + // 更新文件名选项 + if (data && Array.isArray(data.mp3_list)) { + newFilename.value = getNextTTSFilename(combinedList.value); + filenamecolumns.value = data.mp3_list.map(mp3 => ({ + text: mp3, + value: mp3 + })); + } else { + console.warn('No valid mp3_list found in data.sound_card'); + } + + // 更新播放列表并合并到 combinedList + if (data.play_list) { + const newPlaylistItems = data.play_list.map(item => ({ + remark: item.remark, + filename: item.filename, + runningtime: item.play_time, + pauseduration: item.pause_time, + Broadcast_sound: item.TTS ? item.TTS.per : null, + speed: item.TTS ? item.TTS.spd : 0, + pit: item.TTS ? item.TTS.pit : 0, + vol: item.TTS ? item.TTS.vol : 0, + text: item.tts_str, + ...item + })); + playlist.value = newPlaylistItems; + combinedList.value.push(...newPlaylistItems); + } + + // 更新事件播放列表并合并到 combinedList + if (data.event_play_list) { + const newEventPlaylistItems = data.event_play_list.map(item => { + let eventType, eventsource; + switch (item.event.source) { + case 0: + eventsource = '本台设备'; + break; + case 254: + eventsource = '除本身外任意设备'; + break; + case 255: + eventsource = '任意设备'; + break; + default: + eventsource = '其他'; + } + switch (item.event.code) { + case 0: + eventType = '默认显示'; + break; + case 1: + eventType = '雷达触发(RS485 雷达)'; + break; + case 2: + eventType = '雷达超速(RS485 雷达)'; + break; + case 3: + eventType = '车牌触发(摄像头)'; + break; + case 4: + eventType = '车牌超速(摄像头)'; + break; + case 5: + eventType = '行人检测(相机)'; + break; + case 51: + eventType = 'IN1下降沿'; + break; + case 52: + eventType = 'IN2上升沿'; + break; + case 53: + eventType = 'IN3下降沿'; + break; + case 54: + eventType = 'IN4上升沿'; + break; + case 55: + eventType = 'IN1低电平'; + break; + case 56: + eventType = 'IN2高电平'; + break; + case 57: + eventType = 'IN3低电平'; + break; + case 58: + eventType = 'IN4高电平'; + break; + default: + eventType = '其他'; + } + return { + remark: item.remark, + EventSource: item.event.source, + eventcode: item.event.code, + EventSourcename: eventsource, + eventcodename: eventType, + priority: item.event.priority, + Broadcast_sound: item.TTS ? item.TTS.per : null, + speed: item.TTS ? item.TTS.spd : 0, + pit: item.TTS ? item.TTS.pit : 0, + vol: item.TTS ? item.TTS.vol : 0, + text: item.tts_str, + ...item + }; + }); + eventplaylist.value = newEventPlaylistItems; + combinedList.value.push(...newEventPlaylistItems); + } + + console.log('combinedList:', JSON.stringify(combinedList.value)); + } diff --git a/vue.config.js b/vue.config.js index d20fd6f..526afa8 100644 --- a/vue.config.js +++ b/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,16 +39,24 @@ 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()] }), // Components({ resolvers: [VantResolver()] }), //当大于等于 0.26.0 时，使用以下写法 AutoImport.default({ - resolvers: [VantResolver(),ElementPlusResolver()], + resolvers: [VantResolver(), ElementPlusResolver()], }), - Components.default({ resolvers: [VantResolver(),ElementPlusResolver()] }), + Components.default({ resolvers: [VantResolver(), ElementPlusResolver()] }), // new CompressionWebpackPlugin({ // algorithm: 'gzip', // 使用gzip压缩 // test: /\.js$|\.html$|\.css$/, // 匹配文件名