5.27
This commit is contained in:
parent
afdda263e6
commit
328e470c27
@ -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')" />
|
||||
<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>
|
||||
@ -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: {
|
||||
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(() => {
|
||||
// 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>
|
||||
@ -245,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 () => {
|
||||
@ -278,12 +283,20 @@ export default {
|
||||
// 在组件挂载时建立 MQTT 连接
|
||||
onMounted(() => {
|
||||
console.log(isLocal);
|
||||
onRefresh();
|
||||
window.addEventListener('message', function (event) {
|
||||
console.log("接受的原始数据", JSON.stringify(event.data))
|
||||
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('移除事件监听器');
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user