# 其他装备列表数据存储结构详解 ## 📊 **存储概览** 其他装备列表的数据采用**双重存储机制**： - **内存存储**: Vue3响应式数组 `otherEquipmentList.value` - **持久化存储**: 浏览器localStorage `"index-otherEquipmentList"` ## 🗂️ **数据结构定义** ### **1. Vue响应式变量** ```javascript // 定义位置：homeShow/index.vue 第1536行 const otherEquipmentList = ref([]); // 设备列表数组 const otherEquipmentCount = computed(() => { return otherEquipmentList.value.filter( item => item.online_status === true ).length; }); // 在线设备计数 ``` ### **2. localStorage存储键** ```javascript // 存储键名 const STORAGE_KEY = "index-otherEquipmentList"; // 存储操作 localStorage.setItem(STORAGE_KEY, JSON.stringify(otherEquipmentList.value)); localStorage.getItem(STORAGE_KEY); // 获取数据 ``` ## 📋 **设备对象数据结构** ### **通用其他装备数据格式** ```javascript { // === 基础标识信息 === equipmentId: "OTHER_001", // 设备唯一ID equipmentType: "电子干扰设备", // 设备类型 category: "电子战", // 设备分类 // === 状态信息 === status: "正常", // 设备状态 online_status: true, // 在线状态 (boolean) maintenanceStatus: "良好", // 维护状态 // === 功能参数 === function: "信号干扰", // 主要功能 range: 15, // 作用范围 (km) operationTime: 8.5, // 运行时间 (小时) // === 位置信息 === latitude: 39.9042, // 纬度 longitude: 116.4074, // 经度 altitude: 0, // 高度 (仅QB303设备有) // === 时间戳 === lastUpdateTime: 1757292674555 // 最后更新时间 } ``` ### **QB303设备专用数据格式** ```javascript { // === 基础信息 === equipmentId: "dy04", // 使用battle_unit_code作为ID equipmentType: "QB303设备", category: "平台设备", // 根据platform_type映射 // === QB303特有标识 === battleUnitCode: "dy04", // 作战单元代码 (主键) sn: "2", // 原始序列号 sid: "2", // 原始设备ID // === 状态信息 === status: "正常", // 根据health_status映射 online_status: true, // 基于health_status maintenanceStatus: "正常", // === 功能信息 === function: "QB303平台设备", range: "N/A", operationTime: 60, // 计算得出 (分钟) // === 位置和运动信息 === latitude: 28.20648476190476, longitude: 112.8945530952381, altitude: 200, // QB303独有 // === 运动数据 (QB303独有) === velocity: 0, // 总速度 velocity_x: 0.10144216567277908, // X轴速度 velocity_y: -0.0755225121974945, // Y轴速度 velocity_z: 0.050013765692710876, // Z轴速度 // === 姿态数据 (QB303独有) === roll: -1.02637914332358, // 横滚角 pitch: 2.0691601321652815, // 俯仰角 yaw: 0, // 偏航角 // === 时间信息 === reportTime: 1757150761138, // 设备上报时间 lastUpdateTime: 1757295666670 // 系统更新时间 } ``` ## 💾 **数据持久化机制** ### **1. 初始化加载** ```javascript // 位置：第1537-1556行 const otherEquipmentInit = async () => { const localData = localStorage.getItem("index-otherEquipmentList"); if (localData) { try { const savedEquipment = JSON.parse(localData); otherEquipmentList.value = savedEquipment; otherEquipmentCount.value = savedEquipment.length; } catch (error) { console.error('解析本地数据失败:', error); } } else { otherEquipmentList.value = []; otherEquipmentCount.value = 0; } } ``` ### **2. 数据保存时机** 数据会在以下情况自动保存到localStorage： 1. **WebSocket接收新数据时** 2. **设备信息更新时** 3. **手动编辑设备信息时** 4. **测试数据添加时** ```javascript // 保存代码模式 localStorage.setItem("index-otherEquipmentList", JSON.stringify(otherEquipmentList.value)); ``` ## 📱 **数据实例示例** ### **实际存储的数据结构 (localStorage)** ```json [ { "equipmentId": "OTHER_001", "equipmentType": "电子干扰设备", "category": "电子战", "status": "正常", "function": "信号干扰", "range": 15, "operationTime": 8.5, "maintenanceStatus": "良好", "online_status": true, "latitude": 39.9042, "longitude": 116.4074, "lastUpdateTime": 1757292674555 }, { "equipmentId": "dy04", "equipmentType": "QB303设备", "category": "平台设备", "status": "正常", "function": "QB303平台设备", "range": "N/A", "operationTime": 60, "maintenanceStatus": "正常", "online_status": true, "latitude": 28.20648476190476, "longitude": 112.8945530952381, "altitude": 200, "velocity": 0, "velocity_x": 0.10144216567277908, "velocity_y": -0.0755225121974945, "velocity_z": 0.050013765692710876, "roll": -1.02637914332358, "pitch": 2.0691601321652815, "yaw": 0, "battleUnitCode": "dy04", "sn": "2", "sid": "2", "reportTime": 1757150761138, "lastUpdateTime": 1757295666670 } ] ``` ## 🔧 **数据操作接口** ### **查看当前数据** ```javascript // 1. 查看内存中的数据 console.log('内存数据:', otherEquipmentList.value); console.log('设备总数:', otherEquipmentList.value.length); console.log('在线设备数:', otherEquipmentCount.value); // 2. 查看localStorage中的数据 const storedData = localStorage.getItem("index-otherEquipmentList"); console.log('存储数据:', JSON.parse(storedData)); // 3. 查看特定设备 const device = otherEquipmentList.value.find(d => d.equipmentId === 'dy04'); console.log('QB303设备 dy04:', device); ``` ### **数据操作功能** ```javascript // 1. 清空所有数据 localStorage.removeItem("index-otherEquipmentList"); otherEquipmentList.value = []; // 2. 添加测试数据 testQB303Data(); // 添加单个QB303设备 testMultipleQB303Data(); // 添加多个QB303设备 // 3. 手动编辑设备信息 // 通过UI界面的编辑功能进行 // 4. 导出数据 const exportData = JSON.stringify(otherEquipmentList.value, null, 2); console.log('导出数据:', exportData); ``` ## 🎯 **数据字段映射关系** ### **QB303数据映射** | WebSocket字段 | 存储字段 | 说明 | |-------------|----------|------| | `data.host.battle_unit_code` | `equipmentId` | 设备主键 | | `data.host.battle_unit_code` | `battleUnitCode` | 作战单元代码 | | `data.sn` | `sn` | 原始序列号 | | `data.host.sid` | `sid` | 原始设备ID | | `data.host.platform_type` | `category` | 设备分类 (1→"平台设备") | | `data.host.health_status` | `status` | 设备状态 (1→"正常") | | `data.host.latitude` | `latitude` | 纬度 | | `data.host.longitude` | `longitude` | 经度 | | `data.host.altitude` | `altitude` | 高度 | | `data.host.velocity` | `velocity` | 速度 | | `data.host.report_time` | `reportTime` | 上报时间 | ### **通用装备数据映射** | WebSocket字段 | 存储字段 | 说明 | |-------------|----------|------| | `data.equipment_id` | `equipmentId` | 设备ID | | `data.equipment_type` | `equipmentType` | 设备类型 | | `data.category` | `category` | 设备分类 | | `data.online_status` | `online_status` | 在线状态 | | `data.latitude` | `latitude` | 纬度 | | `data.longitude` | `longitude` | 经度 | ## 🔍 **数据调试方法** ### **快速检查数据状态** ```javascript // 在浏览器控制台运行 console.table(otherEquipmentList.value.map(d => ({ ID: d.equipmentId, 类型: d.equipmentType, 状态: d.status, 在线: d.online_status ? '是' : '否', 位置: `${d.latitude}, ${d.longitude}` }))); ``` 这就是您的其他装备列表数据存储的完整结构！数据既保存在内存中供实时操作，也持久化到localStorage中确保页面刷新后数据不丢失。