bruno
78d9449db8
🗺️ 地图跳转功能改进： - 修复员工搜索后地图不跳转到员工位置的问题 - 新增 jumpToUserLocation() 函数实现智能地图定位 - 优化缩放策略：保持用户当前视野高度，只改变中心点 - 支持多数据源定位：从健康数据和告警数据中查找用户位置 - 增强坐标验证：过滤无效GPS坐标，提升定位准确性 - 完善错误处理：详细的调试日志和异常处理机制 🎯 用户体验提升： - 地图智能平移到员工位置，无需手动调整视野 - 支持模糊搜索和下拉选择两种定位方式 - 流畅的视觉过渡效果，提供良好交互体验 - 解决"定位后视角太高需要手动放大"的问题 🔧 技术优化： - 修复 bigScreen/.gitignore 文件，移除 * 通配符忽略规则 - 保留 templates/ 目录，确保核心模板文件正常跟踪 - 更新项目文档至 v1.3.2，包含详细功能说明 📝 文档更新： - 更新 README-CICD-v1.3.1.md 版本至 1.3.2 - 添加地图跳转功能的详细说明和使用方法 - 包含完整的测试文档和故障排除指南
140 lines
5.8 KiB
HTML
140 lines
5.8 KiB
HTML
<!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> |