Compare commits
2 Commits
225dc12f77
...
328e470c27
| Author | SHA1 | Date | |
|---|---|---|---|
| 328e470c27 | |||
| afdda263e6 |
28
package-lock.json
generated
28
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 兼容
|
||||
}
|
||||
});
|
||||
33
src/main.js
33
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;
|
||||
// }
|
||||
@ -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(() => {
|
||||
|
||||
@ -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')" />
|
||||
<van-cell size="large" class="custom-cell" title="车牌识别" icon="search" is-link value="识别" @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')" />
|
||||
<!-- 全部改为动态渲染的菜单项 -->
|
||||
<template v-for="(item, index) in filteredMenuItems" :key="index">
|
||||
<van-cell size="large" class="custom-cell" :title="item.title" :icon="item.icon" is-link
|
||||
:value="item.value" @click="item.action" />
|
||||
</template>
|
||||
</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: {
|
||||
Header,
|
||||
Footer
|
||||
},
|
||||
components: { 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>
|
||||
@ -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();
|
||||
|
||||
});
|
||||
|
||||
@ -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));
|
||||
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 handleMQTTMessage = (string) => {
|
||||
@ -247,8 +245,13 @@ export default {
|
||||
|
||||
// MQTT 接收函数
|
||||
const MQTT_recv = (string) => {
|
||||
console.log("MQTT 接收的json:" + string);
|
||||
handleMQTTMessage(string);
|
||||
// console.log("MQTT 接收的json:" + 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();
|
||||
window.MQTT_recv = MQTT_recv;
|
||||
const messageHandler = function (event) {
|
||||
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(() => {
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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()] }),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user