feat: 优化总览大屏地图搜索跳转功能

🗺️ 地图跳转功能改进： - 修复员工搜索后地图不跳转到员工位置的问题 - 新增 jumpToUserLocation() 函数实现智能地图定位 - 优化缩放策略：保持用户当前视野高度，只改变中心点 - 支持多数据源定位：从健康数据和告警数据中查找用户位置 - 增强坐标验证：过滤无效GPS坐标，提升定位准确性 - 完善错误处理：详细的调试日志和异常处理机制 🎯 用户体验提升： - 地图智能平移到员工位置，无需手动调整视野 - 支持模糊搜索和下拉选择两种定位方式 - 流畅的视觉过渡效果，提供良好交互体验 - 解决"定位后视角太高需要手动放大"的问题 🔧 技术优化： - 修复 bigScreen/.gitignore 文件，移除 * 通配符忽略规则 - 保留 templates/ 目录，确保核心模板文件正常跟踪 - 更新项目文档至 v1.3.2，包含详细功能说明 📝 文档更新： - 更新 README-CICD-v1.3.1.md 版本至 1.3.2 - 添加地图跳转功能的详细说明和使用方法 - 包含完整的测试文档和故障排除指南
2025-08-14 21:03:26 +08:00
parent 59f79a1d03
commit 78d9449db8
5 changed files with 8924 additions and 3 deletions
@@ -1,13 +1,20 @@
 # LJWX BigScreen CI/CD 多架构优化方案
-## 版本 1.3.1 - AMD64 & ARM64 双架构支持
+## 版本 1.3.2 - 智能地图定位 + AMD64 & ARM64 双架构支持

 [![Build Status](https://img.shields.io/badge/build-passing-brightgreen)](https://github.com/ljwx-bigscreen/actions)
 [![Docker](https://img.shields.io/badge/docker-multi--arch-blue)](https://hub.docker.com/r/ljwx-bigscreen/ljwx-bigscreen)
 [![Architecture](https://img.shields.io/badge/arch-AMD64%20%7C%20ARM64-orange)](https://github.com/ljwx-bigscreen)
-[![Version](https://img.shields.io/badge/version-1.3.1-green)](https://github.com/ljwx-bigscreen/releases)
+[![Version](https://img.shields.io/badge/version-1.3.2-green)](https://github.com/ljwx-bigscreen/releases)

 ## 🚀 新功能特性

+### ✨ 1.3.2 版本亮点
+- 🗺️ **智能地图定位**: 员工搜索后自动跳转到GPS位置，保持最佳视野
+- 🎯 **多数据源支持**: 从健康数据和告警数据中智能查找用户位置
+- 🔍 **增强搜索体验**: 支持模糊搜索和下拉选择，快速定位员工
+- ✅ **坐标验证优化**: 自动过滤无效GPS数据，提升定位准确性
+- 💡 **调试友好**: 详细控制台日志，便于问题排查和系统监控
+
 ### ✨ 1.3.1 版本亮点
 - 🏗️ **多架构支持**: 原生支持 AMD64 和 ARM64 架构
 - 🐳 **优化镜像构建**: 多阶段构建，减少 60% 镜像体积
@@ -408,6 +415,19 @@ git push origin feature/multi-arch-optimization

 ## 🎉 更新日志

+### v1.3.2 (2025-01-14)
+- 🗺️ **优化总览大屏地图跳转功能**
+  - 修复员工搜索后地图不跳转到员工位置的问题
+  - 新增智能地图定位：选择员工后自动平移到员工GPS位置
+  - 优化缩放策略：保持用户当前视野高度，只改变中心点
+  - 支持多数据源定位：从健康数据和告警数据中查找用户位置
+  - 增强坐标验证：过滤无效GPS坐标，提升定位准确性
+  - 完善错误处理：详细的调试日志和异常处理机制
+- 🎯 **用户体验提升**
+  - 地图智能平移到员工位置，无需手动调整视野
+  - 支持模糊搜索和下拉选择两种定位方式
+  - 流畅的视觉过渡效果，提供良好交互体验
+
 ### v1.3.1 (2024-12-07)
 - ✨ 新增多架构支持 (AMD64 + ARM64)
 - 🚀 优化 CI/CD 流水线，构建速度提升 40%
@@ -424,6 +444,6 @@ git push origin feature/multi-arch-optimization

 ---

-*最后更新: 2024-12-07*
+*最后更新: 2025-01-14*

 **🌟 如果这个项目对您有帮助，请给我们一个 Star！**
@@ -0,0 +1,22 @@
+# Created by venv; see https://docs.python.org/3/library/venv.html
+# 忽略虚拟环境
+bin/
+lib/
+lib64/
+include/
+share/
+pyvenv.cfg
+
+# 忽略Python缓存
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+
+# 忽略临时文件
+*.log
+*.tmp
+.DS_Store
+
+# 重要：保留templates目录，它包含项目的核心模板文件
+!templates/
@@ -0,0 +1,43 @@
+# 地图跳转缩放优化
+
+## 🔧 问题描述
+搜索用户后，地图会跳转到用户位置，但缩放级别被强制调整到15级，导致视野太近，用户需要手动缩小地图才能看清周围环境。
+
+## ✨ 解决方案
+修改 `jumpToUserLocation` 函数，**只改变地图中心点，保持当前缩放级别不变**。
+
+## 📝 代码修改
+
+### 修改前 (问题代码)
+```javascript
+map.setCenter([lng, lat]);
+map.setZoom(15); // 强制设置缩放级别为15
+```
+
+### 修改后 (优化代码)
+```javascript
+map.setCenter([lng, lat]);
+// 保持当前缩放级别不变，只改变中心点
+```
+
+## 🎯 优化效果
+
+| 功能 | 修改前 | 修改后 |
+|------|--------|--------|
+| 地图中心 | ✅ 跳转到用户位置 | ✅ 跳转到用户位置 |
+| 缩放级别 | ❌ 强制15级（太近） | ✅ 保持当前级别 |
+| 用户体验 | ❌ 需手动缩小地图 | ✅ 直接看到合适视野 |
+
+## 🧪 测试方法
+1. 访问：`http://localhost:5001/main?customerId=1`
+2. 调整地图到合适的缩放级别
+3. 搜索并选择员工
+4. 观察：地图中心跳转到员工位置，但缩放级别保持不变
+
+## ✅ 现在的用户体验
+- 🎯 地图智能平移到员工位置
+- 👁️ 保持用户习惯的视野高度
+- ⚡ 无需手动调整缩放级别
+- 🎬 提供流畅的视觉过渡
+
+**完美解决了"定位后视角太高需要用户再放大地图"的问题！**
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>地图跳转功能测试</title>
+    <meta charset="UTF-8">
+</head>
+<body>
+    <h1>🗺️ 总览大屏地图跳转功能测试</h1>
+    
+    <h2>🔍 问题分析</h2>
+    <p><strong>原问题</strong>：选择对应员工名后地图没有跳转到该员工所在的位置</p>
+    
+    <h2>✅ 解决方案</h2>
+    <h3>1. 问题根因</h3>
+    <ul>
+        <li>用户选择员工后，系统只调用了 <code>updateMapData()</code> 过滤数据</li>
+        <li>缺少地图自动跳转到用户位置的逻辑</li>
+        <li>没有根据用户坐标调整地图视图中心点</li>
+    </ul>
+    
+    <h3>2. 修复内容</h3>
+    <ul>
+        <li>✅ 在用户选择事件中添加了 <code>jumpToUserLocation()</code> 调用</li>
+        <li>✅ 新增 <code>jumpToUserLocation(userId, data)</code> 函数实现地图跳转</li>
+        <li>✅ 支持从健康数据和告警数据中查找用户位置</li>
+        <li>✅ 包含坐标有效性验证和错误处理</li>
+        <li>✅ 保持当前缩放级别不变，只改变地图中心点</li>
+    </ul>
+    
+    <h3>3. 代码修改</h3>
+    <h4>用户选择事件处理（5880行附近）</h4>
+    <pre><code>// 用户选择变化时刷新地图
+$('#userSelect').change(function() {
+    currentUser=$(this).val()
+    console.log('currentUser',currentUser);
+    updateMapData(lastTotalInfo);
+    
+    // 🎯 新增：如果选择了特定用户，地图跳转到该用户位置
+    if (currentUser && lastTotalInfo) {
+        jumpToUserLocation(currentUser, lastTotalInfo);
+    }
+});</code></pre>
+    
+    <h4>新增函数：jumpToUserLocation（7203行附近）</h4>
+    <pre><code>// 地图跳转到指定用户位置的函数
+window.jumpToUserLocation = function(userId, data) {
+    console.log('jumpToUserLocation - userId:', userId, 'data:', data);
+    
+    if (!userId || !data || !map) {
+        console.warn('❌ 跳转用户位置失败 - 缺少必要参数');
+        return;
+    }
+    
+    try {
+        // 从健康数据中查找用户
+        const healths = data.health_data?.healthData || [];
+        const userHealth = healths.find(h => 
+            String(h.user_id || h.userId) === String(userId) ||
+            String(h.id) === String(userId)
+        );
+        
+        if (userHealth && userHealth.longitude && userHealth.latitude) {
+            const lng = parseFloat(userHealth.longitude);
+            const lat = parseFloat(userHealth.latitude);
+            
+            // 验证坐标有效性并跳转
+            if (isValidCoordinate(lng, lat)) {
+                console.log(`🎯 地图跳转到用户位置: ${userHealth.userName} (${lng}, ${lat})`);
+                map.setCenter([lng, lat]);
+                // 保持当前缩放级别不变，只改变中心点
+            }
+        } else {
+            // 如果健康数据中没有，从告警数据中查找
+            // ... 告警数据查找逻辑
+        }
+        
+    } catch (error) {
+        console.error('❌ 跳转用户位置出错:', error);
+    }
+};</code></pre>
+    
+    <h2>🧪 测试方法</h2>
+    <ol>
+        <li><strong>访问大屏页面</strong>：<code>http://localhost:5001/main?customerId=1</code></li>
+        <li><strong>打开浏览器开发者工具</strong>：查看控制台输出</li>
+        <li><strong>使用搜索功能</strong>：
+            <ul>
+                <li>在搜索框中输入员工姓名进行模糊搜索</li>
+                <li>或在"选择用户"下拉框中选择特定员工</li>
+            </ul>
+        </li>
+        <li><strong>观察地图行为</strong>：
+            <ul>
+                <li>地图应该自动跳转到选中员工的位置</li>
+                <li>缩放级别应该调整到15级以突出显示</li>
+                <li>控制台应该显示跳转日志信息</li>
+            </ul>
+        </li>
+    </ol>
+    
+    <h2>📋 功能特性</h2>
+    <ul>
+        <li>🎯 <strong>智能定位</strong>：自动跳转到选中员工的GPS位置</li>
+        <li>🔍 <strong>多数据源</strong>：支持从健康数据和告警数据中查找位置</li>
+        <li>✅ <strong>坐标验证</strong>：验证GPS坐标有效性，过滤无效数据</li>
+        <li>🎬 <strong>视觉优化</strong>：保持当前视野高度，只平移到用户位置</li>
+        <li>📊 <strong>调试信息</strong>：详细的控制台日志，便于排查问题</li>
+        <li>🛡️ <strong>错误处理</strong>：完善的异常处理和降级策略</li>
+    </ul>
+    
+    <h2>🎮 使用场景</h2>
+    <ul>
+        <li><strong>员工定位</strong>：快速找到特定员工的实时位置</li>
+        <li><strong>紧急响应</strong>：应急情况下快速定位相关人员</li>
+        <li><strong>区域管理</strong>：查看不同部门员工的地理分布</li>
+        <li><strong>健康监控</strong>：关注特定员工的健康状态和位置</li>
+    </ul>
+    
+    <h2>🔧 技术细节</h2>
+    <ul>
+        <li><strong>地图库</strong>：使用高德地图 API</li>
+        <li><strong>坐标系统</strong>：支持经纬度坐标系</li>
+        <li><strong>缩放策略</strong>：保持当前缩放级别不变</li>
+        <li><strong>数据来源</strong>：health_data.healthData 和 alert_info.alerts</li>
+        <li><strong>用户匹配</strong>：支持 user_id、userId、id 字段匹配</li>
+    </ul>
+    
+    <div style="background: #f0f8ff; border: 1px solid #0084ff; padding: 15px; margin: 20px 0; border-radius: 5px;">
+        <h3>✨ 现在的体验</h3>
+        <p>选择员工后，地图会自动：</p>
+        <ul>
+            <li>🎯 平移到该员工的GPS位置</li>
+            <li>👁️ 保持当前视野高度不变</li>
+            <li>💡 在控制台显示跳转信息</li>
+            <li>⚡ 提供流畅的视觉过渡效果</li>
+        </ul>
+    </div>
+    
+</body>
+</html>