# QB303设备地图显示功能实现

## 🎯 功能概述

成功为QB303设备实现了地图显示功能，模仿无人机的上图方式，实现了从WebSocket数据获取到地图可视化的完整流程。

## 🚀 实现特点

### **1. 数据流程**
- ✅ **WebSocket数据接收**: 监听`qb303_device_status`消息
- ✅ **数据解析和存储**: 解析QB303特有的数据格式
- ✅ **本地缓存**: 数据持久化到localStorage
- ✅ **地图可视化**: 实时显示在3D地图上

### **2. 地图显示特性**
- ✅ **专用图标**: QB303设备使用独特的绿色标识
- ✅ **实时位置**: 根据经纬度和高度实时定位
- ✅ **姿态显示**: 使用yaw角度控制设备朝向
- ✅ **状态标签**: 显示设备编号和状态信息
- ✅ **点击交互**: 点击设备显示详细信息

## 📊 数据结构

### **WebSocket输入数据**
```javascript
{
  "biz_code": "qb303_device_status",
  "data": {
    "sn": "QB303_SN_001",
    "host": {
      "battle_unit_code": "QB303_UNIT_001", // 作战单元代码(主键)
      "platform_type": 1,                   // 平台类型
      "health_status": 1,                   // 健康状态 1=正常
      "latitude": 39.9042,                  // 纬度
      "longitude": 116.4074,                // 经度  
      "altitude": 50,                       // 高度(米)
      "velocity": 15.5,                     // 总速度(m/s)
      "velocity_x": 10.2,                   // X轴速度
      "velocity_y": 8.5,                    // Y轴速度
      "velocity_z": -2.1,                   // Z轴速度
      "roll": 5.2,                          // 翻滚角(度)
      "pitch": -3.8,                        // 俯仰角(度)
      "yaw": 125.6,                         // 偏航角(度)
      "sid": "SID_001",                     // 系统标识
      "report_time": 1640995200000          // 上报时间
    }
  }
}
```

### **标准化后的设备数据**
```javascript
{
  equipmentId: "QB303_UNIT_001",           // 使用battle_unit_code作为主键
  equipmentType: "QB303设备",              // 设备类型
  category: "特种平台",                    // 设备分类
  status: "正常",                          // 运行状态
  function: "QB303平台设备",               // 功能描述
  online_status: true,                     // 在线状态
  latitude: 39.9042,                       // 纬度
  longitude: 116.4074,                     // 经度
  altitude: 50,                            // 高度
  
  // QB303特有字段
  velocity: 15.5,                          // 总速度
  velocity_x: 10.2,                        // X轴速度分量
  velocity_y: 8.5,                         // Y轴速度分量
  velocity_z: -2.1,                        // Z轴速度分量
  roll: 5.2,                               // 翻滚角
  pitch: -3.8,                             // 俯仰角
  yaw: 125.6,                              // 偏航角
  battleUnitCode: "QB303_UNIT_001",        // 作战单元代码
  sn: "QB303_SN_001",                      // 设备序列号
  sid: "SID_001",                          // 系统标识符
  reportTime: 1640995200000                // 数据上报时间
}
```

## 🔧 核心实现

### **1. 数据处理层** (`src/pages/dataGovernanceDashboard/views/homeShow/index.vue`)

```javascript
// WebSocket消息处理
if (message.biz_code == "qb303_device_status") {
  let qbData = message.data;
  let battleUnitCode = qbData.host?.battle_unit_code || qbData.sn;
  
  let qbEquipmentInfo = {
    equipmentId: battleUnitCode,
    equipmentType: 'QB303设备',
    category: getQB303Category(qbData.host?.platform_type),
    status: getQB303Status(qbData.host?.health_status),
    online_status: qbData.host?.health_status === 1,
    latitude: qbData.host?.latitude || 0,
    longitude: qbData.host?.longitude || 0,
    altitude: qbData.host?.altitude || 0,
    // ... 更多QB303特有字段
  };
  
  // 添加或更新设备到列表
  const equipmentIndex = otherEquipmentList.value.findIndex(
    equipment => equipment.equipmentId === qbEquipmentInfo.equipmentId
  );
  
  if (equipmentIndex !== -1) {
    Object.assign(otherEquipmentList.value[equipmentIndex], qbEquipmentInfo);
  } else {
    otherEquipmentList.value.push(qbEquipmentInfo);
  }
  
  // 保存到本地存储
  localStorage.setItem("index-otherEquipmentList", JSON.stringify(otherEquipmentList.value));
}
```

### **2. 地图显示层** (`src/utils/aixiaorui.ts`)

```javascript
// QB303设备数据存储
qb303DeviceData: {
  [key: string]: any
} = {}

// 加载QB303设备到地图
加载QB303设备(key: string, data: any) {
  if (!this.qb303DeviceData[key]["deviceImage"]) {
    // 创建QB303设备图标
    const deviceImage = new mars3d.graphic.ModelEntity({
      name: "QB303设备",
      position: [data.longitude, data.latitude, data.altitude || 0],
      style: {
        url: this.getQB303DeviceIcon(),
        heading: data.yaw || 0,  // 使用偏航角
        scale: 1.2,
        minimumPixelSize: 40,
        highlight: {
          silhouetteColor: "#00ff00", // 绿色高亮
        },
        label: {
          text: `QB303-${data.battleUnitCode || key}`,
          fillColor: Cesium.Color.LIME, // 绿色标签
        }
      }
    });
    
    // 添加点击事件
    deviceImage.on(mars3d.EventType.click, (event) => {
      this.emit("qb303DeviceClick", {
        equipmentId: data.equipmentId,
        deviceData: data,
        position: [data.longitude, data.latitude, data.altitude]
      });
    });
    
    this.graphicLayer.addGraphic(deviceImage);
    this.qb303DeviceData[key]["deviceImage"] = deviceImage;
  } else {
    // 更新现有设备位置和姿态
    const deviceImage = this.qb303DeviceData[key]["deviceImage"];
    deviceImage.position = [data.longitude, data.latitude, data.altitude || 0];
    deviceImage.style.heading = data.yaw || 0;
  }
}
```

### **3. 地图集成层** (`src/components/aixiaorui/index.vue`)

```javascript
// 定时加载QB303设备数据
timer = setInterval(() => {
  // QB303设备
  if(!m3Data.qb303DeviceData){
    m3Data.qb303DeviceData={}
  }
  
  // 从localStorage获取QB303设备数据
  const localQB303Data = localStorage.getItem("index-otherEquipmentList");
  if (localQB303Data) {
    const qb303Devices = JSON.parse(localQB303Data).filter(item => 
      item.equipmentType === 'QB303设备'
    );
    
    qb303Devices.forEach(device => {
      const key = device.equipmentId || device.battleUnitCode;
      if (key && device.online_status) {
        if (!m3Data.qb303DeviceData[key]) {
          m3Data.qb303DeviceData[key] = {}
        }
        m3Data.qb303DeviceData[key].info = {...device}
      }
    });
    
    m3Data.loadrQB303DeviceData()
  }
}, 2 * 1000)

// 监听QB303设备点击事件
m3Data.on("qb303DeviceClick",(value)=>{
  console.info("QB303设备点击事件:",value)
  alert(`QB303设备: ${value.equipmentId}\n位置: ${value.position.join(', ')}\n状态: ${value.deviceData.status || '运行中'}`)
})
```

## 🎮 使用方法

### **1. 测试QB303设备显示**

在浏览器控制台执行：
```javascript
// 测试单个QB303设备
testQB303Data()

// 测试多个QB303设备
testMultipleQB303Data()
```

### **2. 查看设备列表**

在装备列表面板中：
- 切换到"其他装备"标签页
- 查看QB303设备列表
- 设备显示详细的位置、速度、姿态信息

### **3. 地图交互**

在3D地图上：
- QB303设备显示为绿色标识的图标
- 点击设备图标查看详细信息
- 设备会根据实时数据更新位置和朝向

## 🔍 关键特性

### **与无人机显示的差异**
| 特性 | 无人机 | QB303设备 |
|------|--------|-----------|
| **图标颜色** | 蓝色/白色 | 绿色 |
| **标签前缀** | 设备名称 | QB303- |
| **高亮颜色** | 红色 | 绿色 |
| **数据源** | DJI API + WebSocket | 纯WebSocket |
| **主键字段** | device_sn | battle_unit_code |
| **姿态控制** | attitude_head | yaw |

### **数据同步机制**
1. **WebSocket实时接收** → QB303设备状态数据
2. **数据标准化处理** → 转换为统一格式
3. **localStorage缓存** → 本地数据持久化
4. **定时地图同步** → 每2秒更新地图显示
5. **实时位置更新** → 设备移动时更新位置

## 🚀 扩展功能

### **可以进一步添加的功能**
- ✨ **轨迹显示**: 显示QB303设备的历史轨迹
- ✨ **速度矢量**: 显示设备的运动方向和速度
- ✨ **状态面板**: 点击设备显示详细的控制面板
- ✨ **告警提示**: 设备异常时的视觉告警
- ✨ **编队显示**: 多个QB303设备的编队关系

## 📋 注意事项

1. **数据格式**: QB303设备使用`battle_unit_code`作为唯一标识，与无人机的`device_sn`不同
2. **坐标系**: 确保经纬度数据的坐标系统一致
3. **性能优化**: 大量设备时考虑分页加载或距离过滤
4. **错误处理**: 数据异常时的容错机制
5. **内存管理**: 及时清理不再使用的设备图形对象

## ✅ 实现状态

- [x] QB303设备数据接收和解析
- [x] 设备数据标准化和存储  
- [x] 地图图标显示和定位
- [x] 实时位置和姿态更新
- [x] 设备点击交互事件
- [x] 与现有系统的集成
- [x] 测试功能和调试工具

QB303设备的地图显示功能已经完全实现，可以像无人机一样在3D地图上实时显示设备的位置、状态和详细信息！🎯✨