<template>
<view class="container">
<!-- 旋转控制按钮 -->
<cover-view class="rotate-btn" @click="toggleRotation">
<cover-view>旋转屏幕</cover-view>
</cover-view>
<!-- 使用动态样式设置 WebView 尺寸和旋转 -->
<movable-area>
<web-view :src="webViewUrl" ref="webviewRef" class="webview-element"
:class="{ 'rotate': isRotated }"></web-view>
</movable-area>
<!-- 自定义展开菜单 -->
<cover-view class="menu-container" :class="{'menu-expanded': menuExpanded}">
<!-- 菜单按钮 -->
<cover-view class="menu-button" @click="toggleMenu">
<cover-image class="menu-icon" src="@/static/img/沟通页_三条杠_跳转选择孩子.png" mode="aspectFit"></cover-image>
</cover-view>
<!-- 展开的菜单项 -->
<cover-view class="menu-items" v-show="menuExpanded">
<cover-view class="menu-item" @click="handleMenuItem(0)">
<cover-view>报警监控</cover-view>
</cover-view>
<cover-view class="menu-item" @click="handleMenuItem(1)">
<cover-view>项目配置</cover-view>
</cover-view>
</cover-view>
</cover-view>
</view>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 状态管理
const value = ref('');
const label = ref('');
const token = ref('');
const isRotated = ref(false); // 旋转状态
const menuExpanded = ref(false);
const webviewRef = ref(null);
// 计算 WebView URL
const webViewUrl = computed(() => {
if (!value.value || !token.value) return 'about:blank';
return `https://bohao.wang/monitor/#/display?projectUid=${value.value}&accessToken=${encodeURIComponent(token.value)}`;
});
// 切换菜单展开/收起
const toggleMenu = () => {
menuExpanded.value = !menuExpanded.value;
};
// 处理菜单项点击
const handleMenuItem = (index : number) => {
console.log('选中菜单项:', index);
menuExpanded.value = false;
if (index === 0) {
uni.navigateTo({ url: `/pages/Projectcenter/Ala/Ala?label=${label.value}` });
} else if (index === 1) {
uni.navigateTo({ url: `/pages/Projectcenter/projectconfing/projectconfing?value=${value.value}` });
}
};
// 旋转 WebView
const toggleRotation = () => {
isRotated.value = !isRotated.value;
updateWebViewSize();
};
// 更新 WebView 尺寸和位置
const updateWebViewSize = () => {
uni.getSystemInfo({
success: (res) => {
const windowWidth = res.windowWidth;
const windowHeight = res.windowHeight;
// 获取 WebView 元素并更新样式
const webview = webviewRef.value;
if (webview) {
// 动态设置样式（确保在小程序中生效）
webview.style.width = isRotated.value ? `${windowHeight}px` : `${windowWidth}px`;
webview.style.height = isRotated.value ? `${windowWidth}px` : `${windowHeight}px`;
if (isRotated.value) {
webview.style.transform = 'rotate(90deg)';
webview.style.transformOrigin = 'center';
webview.style.position = 'absolute';
webview.style.top = `${windowWidth / 2}px`;
webview.style.left = `${windowHeight / 2}px`;
} else {
webview.style.transform = 'rotate(0deg)';
webview.style.top = '0';
webview.style.left = '0';
}
}
},
fail: (err) => {
console.error('获取系统信息失败:', err);
}
});
};
// 生命周期钩子
onLoad((options) => {
value.value = options.value;
label.value = options.label;
token.value = uni.getStorageSync('x-token')?.slice(8) || '';
console.log('加载参数:', { value: value.value, label: label.value, token: token.value });
});
onMounted(() => {
updateWebViewSize();
});
</script>
<style>
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
/* 旋转按钮样式 */
.rotate-btn {
position: fixed;
top: 20px;
left: 20px;
padding: 8px 16px;
background-color: #007AFF;
color: white;
border-radius: 4px;
z-index: 9999;
font-size: 14px;
}
/* WebView 旋转样式 */
.webview-element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
z-index: 0;
}
/* 菜单样式 */
.menu-container {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 9999;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.menu-expanded .menu-items {
transform: translateX(0);
opacity: 1;
}
.menu-button {
width: 48px;
height: 48px;
background-color: #007AFF;
border-radius: 24px 0 0 24px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);
}
.menu-icon {
width: 24px;
height: 24px;
}
.menu-items {
display: flex;
flex-direction: column;
background-color: blueviolet;
border-radius: 8px 0 0 8px;
box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.15);
padding: 8px 0;
transform: translateX(100%);
opacity: 0;
transition: all 0.3s ease;
}
.menu-item {
display: flex;
align-items: center;
padding: 12px 16px;
width: 160px;
transition: background-color 0.2s;
}
.menu-item cover-image {
width: 20px;
height: 20px;
margin-right: 8px;
}
</style>
