模型预览

src/pages/projectSelect/index.vue

@@ -1,7 +1,7 @@
 <!-- 在你的 Vue 组件中 -->
 <template>
     <view class="container">
-        <web-view ref="baiduMap" :src="webViewUrl" :key="webViewKey" @message="handleWebViewMessage"></web-view>
+        <web-view ref="baiduMap" :src="webViewUrl" :key="webViewKey" @message="handleWebViewMessage" @load="handleWebViewLoad"></web-view>
     </view>
 </template>
 
@@ -24,13 +24,12 @@ const getProjectList = async () => {
     projectList.value = res || []
 }
 
-const handleWebViewMessage = (event) => {
+// 处理 web-view 加载完成事件
-    console.log('=== 收到 web-view 消息 ===');
+const handleWebViewLoad = (event) => {
-    console.log('完整事件对象:', event);
+    // 当页面重新加载时，HTML 中的代码会自动检测 URL 参数并发送消息
-    console.log('event.detail:', event.detail);
+}
-    console.log('event.detail.data:', event.detail.data);
-    console.log('event.detail.data 类型:', Array.isArray(event.detail.data) ? '数组' : typeof event.detail.data);
 
+const handleWebViewMessage = (event) => {
     // 尝试多种数据格式
     let action, projectInfo;
     
@@ -39,13 +38,11 @@ const handleWebViewMessage = (event) => {
         if (event.detail.data.action) {
             action = event.detail.data.action;
             projectInfo = event.detail.data.projectInfo;
-            console.log('使用对象格式解析');
         }
         // 格式2: event.detail.data 是数组
         else if (Array.isArray(event.detail.data) && event.detail.data.length > 0) {
             action = event.detail.data[0]?.action;
             projectInfo = event.detail.data[0]?.projectInfo;
-            console.log('使用数组格式解析');
         }
     }
     
@@ -54,24 +51,25 @@ const handleWebViewMessage = (event) => {
         if (event.detail.action) {
             action = event.detail.action;
             projectInfo = event.detail.projectInfo;
-            console.log('使用直接格式解析');
         }
     }
     
-    console.log('解析后的 action:', action);
+    // 格式4: 安卓环境下可能的数据格式
-    console.log('解析后的 projectInfo:', projectInfo);
+    if (!action && event.detail && typeof event.detail === 'object') {
+        if (event.detail.action) {
+            action = event.detail.action;
+            projectInfo = event.detail.projectInfo;
+        }
+    }
     
     if (!action) {
         console.warn('无法解析 action，消息格式可能不正确');
-        console.warn('请检查 event.detail 的结构');
         return;
     }
 
     if (action === 'modelPreview') {
-        console.log('收到模型预览请求，projectId:', projectInfo?.proId);
         // 模型预览逻辑
         getProjectModelListApi({ projectId: projectInfo.proId }).then((res) => {
-            console.log('获取模型列表成功:', res);
             if (res?.data?.length > 0) {
                 // 使用 URL 参数方式传递数据（最可靠的方式）
                 const modelListJson = JSON.stringify(res.data);
@@ -88,8 +86,6 @@ const handleWebViewMessage = (event) => {
                 
                 const newUrl = `/static/map.html?projectInfo=${projectInfoParam}&modelList=${modelListParam}&clickedProject=${clickedProjectParam}&action=showPreview&t=${timestamp}`;
                 
-                console.log('准备更新 webViewUrl，URL 长度:', newUrl.length);
-                
                 // 强制重新渲染 web-view
                 webViewKey.value += 1;
                 // 先清空，再设置新值，确保触发更新
@@ -97,10 +93,8 @@ const handleWebViewMessage = (event) => {
                 
                 setTimeout(() => {
                     webViewUrl.value = newUrl;
-                    console.log('webViewUrl 已更新');
                 }, 100);
             } else {
-                console.warn('该工程暂无模型数据');
                 uni.$u.toast('该工程暂无模型数据');
             }
         }).catch((err) => {

src/static/map.html

@@ -32,22 +32,29 @@
             height: 100%;
             z-index: 1000;
             display: flex;
-            background: rgba(0, 0, 0, 0.3);
+            pointer-events: none; /* 允许点击穿透到地图 */
+            align-items: flex-start; /* 顶部对齐 */
         }
 
         .model-preview-tree {
-            width: 300px;
+            width: 200px;
-            height: 100%;
+            height: auto;
-            background: #fff;
+            max-height: 80%;
-            border-right: 1px solid #e0e0e0;
+            margin-top: 2%;
+            margin-left: 2%;
+            background: rgba(30, 30, 30, 0.55);
+            border-right: 1px solid rgba(51, 51, 51, 0.5);
+            border-radius: 8px;
             overflow-y: auto;
             padding: 20px;
+            pointer-events: auto; /* 列表区域可以交互 */
+            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
         }
 
         .tree-title {
             font-size: 18px;
             font-weight: bold;
-            color: #333;
+            color: #fff;
             margin-bottom: 20px;
             padding-bottom: 10px;
             border-bottom: 2px solid #002db6;
@@ -67,7 +74,7 @@
         }
 
         .tree-node-item:hover {
-            background-color: #f5f5f5;
+            background-color: #323232;
         }
 
         .tree-node-checkbox {
@@ -80,7 +87,7 @@
         .tree-node-label {
             flex: 1;
             font-size: 14px;
-            color: #333;
+            color: #fff;
             user-select: none;
         }
 
@@ -90,16 +97,17 @@
             right: 20px;
             width: 40px;
             height: 40px;
-            background: #fff;
+            background: rgba(255, 255, 255, 0.9);
-            border: 1px solid #ddd;
+            border: 1px solid rgba(221, 221, 221, 0.5);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
             transition: all 0.2s;
             z-index: 1001;
+            pointer-events: auto; /* 关闭按钮可以点击 */
         }
 
         .model-preview-close:hover {
@@ -253,7 +261,6 @@
         if (clickedProjectParam) {
             try {
                 currentClickedProject = JSON.parse(decodeURIComponent(clickedProjectParam));
-                console.log('保存点击的项目信息:', currentClickedProject);
             } catch (e) {
                 console.error('解析点击项目信息失败:', e);
             }
@@ -262,23 +269,51 @@
         // 先初始化地图
         initMap(projectInfo)
         
-        // 如果 URL 中有模型预览请求，在页面加载完成后显示
+        // 如果 URL 中有模型预览请求（通过 URL 参数触发的情况）
+        if (actionParam === 'modelPreview' && clickedProjectParam) {
+            // 通过 postMessage 通知 Vue 组件获取模型列表
+            const triggerModelPreview = () => {
+                try {
+                    const projectInfo = JSON.parse(decodeURIComponent(clickedProjectParam));
+                    
+                    // 尝试多种方式发送消息
+                    const messageData = {
+                        data: {
+                            action: 'modelPreview',
+                            projectInfo: projectInfo
+                        }
+                    };
+                    
+                    // 方案1: uni.postMessage
+                    if (typeof uni !== 'undefined' && typeof uni.postMessage === 'function') {
+                        uni.postMessage(messageData);
+                        return;
+                    }
+                    
+                    // 方案2: window.parent.postMessage
+                    if (window.parent && window.parent !== window) {
+                        window.parent.postMessage(messageData, '*');
+                        return;
+                    }
+                } catch (e) {
+                    console.error('触发模型预览失败:', e);
+                }
+            };
+            
+            // 等待 UniAppJSBridgeReady 后再触发
+            setTimeout(triggerModelPreview, 500);
+        }
+        
+        // 如果 URL 中有模型预览请求（已有模型列表的情况），在页面加载完成后显示
         if (actionParam === 'showPreview' && modelListParam) {
-            console.log('检测到模型预览请求');
             try {
                 const models = JSON.parse(decodeURIComponent(modelListParam));
-                console.log('从 URL 参数获取模型列表，数量:', models.length);
                 
                 // 定义一个函数来显示预览
                 const showPreviewWhenReady = () => {
                     if (map && typeof window.showModelPreview === 'function') {
-                        console.log('地图和函数都已准备好，显示预览');
                         window.showModelPreview(models, currentClickedProject);
                     } else {
-                        console.log('等待地图和函数准备...', {
-                            map: !!map,
-                            showModelPreview: typeof window.showModelPreview
-                        });
                         setTimeout(showPreviewWhenReady, 200);
                     }
                 };
@@ -373,7 +408,12 @@
             setTimeout(() => {
                 const menuContainer = document.querySelector('.action-menu');
                 if (menuContainer) {
-                    menuContainer.addEventListener('click', function(e) {
+                    // 处理点击和触摸事件（兼容安卓）
+                    const handleAction = function(e) {
+                        // 阻止默认行为和事件冒泡
+                        e.preventDefault();
+                        e.stopPropagation();
+                        
                         const target = e.target.closest('.action-menu-item');
                         if (!target) return;
                         
@@ -382,53 +422,55 @@
                         
                         if (action === 'survey') {
                             // 勘察 - 原来的逻辑
-                            console.log('发送勘察消息:', projectInfo);
+                            const surveyMessage = {
+                                data: {
+                                    action: 'navigateToProject',
+                                    projectInfo: projectInfo
+                                }
+                            };
                             
+                            // 尝试多种方式发送消息
                             try {
-                                uni.postMessage({
+                                if (typeof uni !== 'undefined' && typeof uni.postMessage === 'function') {
-                                    data: {
+                                    uni.postMessage(surveyMessage);
-                                        action: 'navigateToProject',
+                                } else if (window.parent && window.parent !== window) {
-                                        projectInfo: projectInfo
+                                    window.parent.postMessage(surveyMessage, '*');
-                                    }
+                                }
-                                });
-                                console.log('勘察消息已发送');
                             } catch (error) {
                                 console.error('发送勘察消息失败:', error);
                             }
                         } else if (action === 'preview') {
                             // 模型预览
-                            console.log('准备发送模型预览消息:---', projectInfo);
+                            sendModelPreviewMessage(projectInfo);
-                            console.log(uni.postMessage,'uni.postMessage')
-                            console.log('uni 对象:', typeof uni !== 'undefined' ? uni : '未定义');
-                            console.log('uni.postMessage:', typeof uni !== 'undefined' && typeof uni.postMessage === 'function' ? '存在' : '不存在');
-                            
-                            // 确保 uni 对象已加载
-                            if (typeof uni === 'undefined' || typeof uni.postMessage !== 'function') {
-                                console.error('uni.postMessage 不可用，等待 UniAppJSBridgeReady...');
-                                // 等待 uni 对象加载
-                                setTimeout(() => {
-                                    if (typeof uni !== 'undefined' && typeof uni.postMessage === 'function') {
-                                        sendModelPreviewMessage(projectInfo);
-                                    } else {
-                                        console.error('uni.postMessage 仍然不可用');
-                                    }
-                                }, 100);
-                            } else {
-                                sendModelPreviewMessage(projectInfo);
-                            }
                         }
+                    };
+                    
+                    // 同时监听 click 和 touchstart 事件（安卓兼容）
+                    menuContainer.addEventListener('click', handleAction);
+                    menuContainer.addEventListener('touchend', function(e) {
+                        // 触摸事件需要立即处理，避免延迟
+                        handleAction(e);
                     });
+                    
+                    // 防止触摸时触发点击（避免重复触发）
+                    let touchStartTime = 0;
+                    menuContainer.addEventListener('touchstart', function(e) {
+                        touchStartTime = Date.now();
+                    });
+                    
+                    menuContainer.addEventListener('click', function(e) {
+                        // 如果刚刚有触摸事件，忽略点击事件（避免重复）
+                        if (Date.now() - touchStartTime < 300) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                    }, true);
                 }
             }, 200);
         }
 
         // 发送模型预览消息的辅助函数
         function sendModelPreviewMessage(projectInfo) {
-            console.log('=== 开始发送模型预览消息 ===');
-            console.log('projectInfo:', projectInfo);
-            console.log('uni 对象类型:', typeof uni);
-            console.log('uni.postMessage 类型:', typeof (uni && uni.postMessage));
-            
             // 根据 uni-app 文档，使用 data 对象格式（不是数组）
             const messageData = {
                 data: {
@@ -437,26 +479,68 @@
                 }
             };
             
-            console.log('准备发送的消息数据:', messageData);
+            // 方案1: 尝试使用 uni.postMessage（iOS 和部分安卓）
-            
+            let messageSent = false;
             try {
-                if (typeof uni === 'undefined') {
+                if (typeof uni !== 'undefined' && typeof uni.postMessage === 'function') {
-                    console.error('uni 对象未定义！');
+                    uni.postMessage(messageData);
-                    return;
+                    messageSent = true;
                 }
-                
-                if (typeof uni.postMessage !== 'function') {
-                    console.error('uni.postMessage 不是函数！');
-                    console.log('uni 对象内容:', Object.keys(uni || {}));
-                    return;
-                }
-                
-                uni.postMessage(messageData);
-                console.log('✓ 模型预览消息已通过 uni.postMessage 发送');
             } catch (error) {
-                console.error('✗ 发送消息失败:', error);
+                // 静默失败，尝试下一个方案
-                console.error('错误详情:', error.message);
+            }
-                console.error('错误堆栈:', error.stack);
+            
+            // 方案2: 尝试使用 window.parent.postMessage（安卓备选方案）
+            if (!messageSent) {
+                try {
+                    if (window.parent && window.parent !== window) {
+                        window.parent.postMessage(messageData, '*');
+                        messageSent = true;
+                    }
+                } catch (error) {
+                    // 静默失败，尝试下一个方案
+                }
+            }
+            
+            // 方案3: 尝试使用 window.webkit.messageHandlers（iOS WebView）
+            if (!messageSent) {
+                try {
+                    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.uni) {
+                        window.webkit.messageHandlers.uni.postMessage(messageData);
+                        messageSent = true;
+                    }
+                } catch (error) {
+                    // 静默失败，尝试下一个方案
+                }
+            }
+            
+            // 方案4: 通过 URL 参数方式触发（最可靠的安卓方案，作为最后备选）
+            if (!messageSent) {
+                try {
+                    // 获取当前 URL 参数
+                    const urlParams = new URLSearchParams(window.location.search);
+                    const currentProjectInfo = urlParams.get('projectInfo');
+                    
+                    // 构建新的 URL，添加模型预览触发参数
+                    const clickedProjectJson = encodeURIComponent(JSON.stringify(projectInfo));
+                    const timestamp = Date.now();
+                    
+                    // 构建完整的新 URL
+                    let newUrl = window.location.pathname;
+                    if (currentProjectInfo) {
+                        newUrl += '?projectInfo=' + encodeURIComponent(currentProjectInfo);
+                    }
+                    newUrl += (currentProjectInfo ? '&' : '?') + 'clickedProject=' + clickedProjectJson;
+                    newUrl += '&action=modelPreview&t=' + timestamp;
+                    
+                    // 使用 location.href 触发页面重新加载
+                    // 注意：这会触发页面重新加载，但可以通过 URL 参数恢复状态
+                    window.location.href = newUrl;
+                    return;
+                } catch (error) {
+                    console.error('发送模型预览消息失败:', error);
+                    alert('无法发送模型预览请求，请重试');
+                }
             }
         }
 
@@ -483,19 +567,12 @@
 
         // 显示模型预览面板（暴露到全局作用域）
         window.showModelPreview = function(models, clickedProject) {
-            console.log('showModelPreview 被调用，模型数量:', models?.length);
-            console.log('点击的项目信息:', clickedProject);
-            
             // 如果传入了点击的项目信息，保存它
             if (clickedProject) {
                 currentClickedProject = clickedProject;
             }
             
-            console.log('当前 map 对象:', map);
-            console.log('当前 allOverlays 数量:', allOverlays.length);
-            
             if (!map) {
-                console.error('地图未初始化，等待地图初始化...');
                 // 如果地图未初始化，等待一下再试
                 setTimeout(() => {
                     if (map) {
@@ -522,19 +599,18 @@
             }
             
             // 清空所有覆盖物
-            console.log('开始清空覆盖物，当前数量:', allOverlays.length);
             clearAllOverlays();
-            console.log('已清空所有覆盖物');
             
             // 渲染树形结构
             treeContainer.innerHTML = '';
             if (modelList.length === 0) {
-                treeContainer.innerHTML = '<div style="color: #999; text-align: center; padding: 20px;">暂无模型数据</div>';
+                treeContainer.innerHTML = '<div style="color: #aaa; text-align: center; padding: 20px;">暂无模型数据</div>';
             } else {
+                console.log('modelList',JSON.stringify(modelList));
                 modelList.forEach((model, index) => {
+                    
                     const nodeDiv = document.createElement('div');
                     nodeDiv.className = 'tree-node';
-                    
                     const itemDiv = document.createElement('div');
                     itemDiv.className = 'tree-node-item';
                     
@@ -552,23 +628,19 @@
                     nodeDiv.appendChild(itemDiv);
                     treeContainer.appendChild(nodeDiv);
                 });
-                console.log('已渲染', modelList.length, '个模型节点');
             }
             
             // 显示面板
             panel.style.display = 'flex';
-            console.log('预览面板已显示');
         };
 
         // 带数据的预览函数（用于直接调用）
         window.showModelPreviewWithData = function(models, clickedProject) {
-            console.log('showModelPreviewWithData 被调用');
             window.showModelPreview(models, clickedProject);
         };
 
         // 监听 postMessage 消息
         window.addEventListener('message', function(event) {
-            console.log('收到 postMessage:', event.data);
             if (event.data && event.data.type === 'showModelPreview') {
                 window.showModelPreview(event.data.modelList);
             }
@@ -595,7 +667,6 @@
         // 监听来自父组件的消息（用于接收模型列表）
         // 注意：uni-app 的 web-view 消息传递机制
         window.addEventListener('message', function(event) {
-            console.log('收到 window.message 事件:', event.data);
             if (event.data && event.data.type === 'showModelPreview') {
                 const models = event.data.modelList;
                 const clickedProject = event.data.clickedProject;
@@ -606,7 +677,6 @@
         // 也监听 uni 的消息（如果支持）
         if (typeof uni !== 'undefined' && uni.on) {
             uni.on('modelPreviewData', function(data) {
-                console.log('收到 uni 消息:', data);
                 if (data && data.modelList) {
                     window.showModelPreview(data.modelList, data.clickedProject);
                 }