269 lines
8.3 KiB
Markdown
269 lines
8.3 KiB
Markdown
# 其他装备列表数据存储结构详解
|
||
|
||
## 📊 **存储概览**
|
||
|
||
其他装备列表的数据采用**双重存储机制**：
|
||
- **内存存储**: 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中确保页面刷新后数据不丢失。
|