249 lines
12 KiB
HTML
249 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>测试KMZ WebSocket数据</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
.test-data {
|
||
background: #f8f9fa;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
margin: 15px 0;
|
||
word-break: break-all;
|
||
font-size: 12px;
|
||
}
|
||
.button {
|
||
background: #52c41a;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin: 5px;
|
||
}
|
||
.button:hover {
|
||
background: #73d13d;
|
||
}
|
||
.info {
|
||
background: #e6f7ff;
|
||
border: 1px solid #91d5ff;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
margin: 10px 0;
|
||
}
|
||
.success {
|
||
background: #f6ffed;
|
||
border: 1px solid #b7eb8f;
|
||
color: #52c41a;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🧪 KMZ WebSocket数据测试</h1>
|
||
|
||
<div class="info">
|
||
<strong>测试说明:</strong> 点击下面的按钮来模拟发送您提供的KMZ文件数据，测试下载功能
|
||
</div>
|
||
|
||
<h3>📊 测试数据</h3>
|
||
<div class="test-data" id="test-data">
|
||
已加载您提供的KMZ文件数据格式
|
||
</div>
|
||
|
||
<h3>🎛️ 测试操作</h3>
|
||
<button class="button" onclick="testDownload()">📥 测试下载KMZ文件</button>
|
||
<button class="button" onclick="showFileInfo()">📋 显示文件信息</button>
|
||
<button class="button" onclick="simulateMultipleFiles()">📁 模拟多文件接收</button>
|
||
|
||
<h3>📝 测试结果</h3>
|
||
<div id="result"></div>
|
||
</div>
|
||
|
||
<script>
|
||
// 您提供的KMZ文件数据
|
||
const kmzData = {
|
||
"version": "1.0",
|
||
"timestamp": 1757341102539,
|
||
"data": {
|
||
"host": {
|
||
"message_type": "kmz_data",
|
||
"task_id": "\u0001",
|
||
"task_name": "位置点侦查御4E",
|
||
"battle_unit_code": "1581F5FHC248A00DXGLU",
|
||
"data_type": "route",
|
||
"kmz_file": {
|
||
"file_name": "位置点侦查御4E_5_daotong_20250908_221822.kmz",
|
||
"file_size": 2136,
|
||
"file_path": "/opt/dji/routes/位置点侦查御4E_5_daotong_20250908_221822.kmz",
|
||
"download_url": "/api/v1/kmz/download/\u0001",
|
||
"file_type": "kmz"
|
||
},
|
||
"waypoints": [],
|
||
"task_config": {
|
||
"fly_to_wayline_mode": "safely",
|
||
"finish_action": "goHome",
|
||
"exit_on_rclost": "executeLostAction",
|
||
"execute_rclost_action": "goBack",
|
||
"take_off_security_height": 20,
|
||
"global_transitional_speed": 15,
|
||
"drone_info": {
|
||
"drone_enum_value": 77,
|
||
"drone_sub_enum_value": 0
|
||
},
|
||
"payload_info": {
|
||
"payload_enum_value": 66,
|
||
"payload_sub_enum_value": 0,
|
||
"payload_position_index": 0
|
||
},
|
||
"coordinate_system": {
|
||
"coordinate_mode": "WGS84",
|
||
"height_mode": "relativeToStartPoint",
|
||
"positioning_type": "GPS"
|
||
}
|
||
},
|
||
"create_time": "2025-09-08 22:18:22",
|
||
"update_time": "2025-09-08 22:18:22",
|
||
"file_data": "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",
|
||
"file_size": 2136
|
||
},
|
||
"sn": "1581F5FHC248A00DXGLU"
|
||
},
|
||
"biz_code": "kmz_file_data"
|
||
};
|
||
|
||
// 显示测试数据
|
||
document.getElementById('test-data').innerHTML = `
|
||
<strong>任务名称:</strong> ${kmzData.data.host.task_name}<br>
|
||
<strong>文件名:</strong> ${kmzData.data.host.kmz_file.file_name}<br>
|
||
<strong>文件大小:</strong> ${formatFileSize(kmzData.data.host.kmz_file.file_size)}<br>
|
||
<strong>设备SN:</strong> ${kmzData.data.sn}<br>
|
||
<strong>创建时间:</strong> ${kmzData.data.host.create_time}
|
||
`;
|
||
|
||
// 格式化文件大小
|
||
function formatFileSize(bytes) {
|
||
if (bytes === 0) return '0 Bytes';
|
||
const k = 1024;
|
||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||
}
|
||
|
||
// 测试下载功能
|
||
function testDownload() {
|
||
try {
|
||
const fileData = kmzData.data.host.file_data;
|
||
const fileName = kmzData.data.host.kmz_file.file_name;
|
||
|
||
// 解码Base64数据
|
||
const byteCharacters = atob(fileData);
|
||
const byteNumbers = new Array(byteCharacters.length);
|
||
|
||
for (let i = 0; i < byteCharacters.length; i++) {
|
||
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
||
}
|
||
|
||
const byteArray = new Uint8Array(byteNumbers);
|
||
const blob = new Blob([byteArray], { type: 'application/zip' });
|
||
|
||
// 创建下载链接
|
||
const url = window.URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = fileName;
|
||
a.style.display = 'none';
|
||
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
window.URL.revokeObjectURL(url);
|
||
|
||
showResult(`✅ KMZ文件下载成功: ${fileName}`, 'success');
|
||
|
||
} catch (error) {
|
||
console.error('KMZ文件下载失败:', error);
|
||
showResult(`❌ KMZ文件下载失败: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// 显示文件信息
|
||
function showFileInfo() {
|
||
const info = `
|
||
<h4>📁 KMZ文件详细信息</h4>
|
||
<p><strong>任务ID:</strong> ${kmzData.data.host.task_id}</p>
|
||
<p><strong>任务名称:</strong> ${kmzData.data.host.task_name}</p>
|
||
<p><strong>文件名:</strong> ${kmzData.data.host.kmz_file.file_name}</p>
|
||
<p><strong>文件大小:</strong> ${formatFileSize(kmzData.data.host.kmz_file.file_size)}</p>
|
||
<p><strong>文件类型:</strong> ${kmzData.data.host.kmz_file.file_type}</p>
|
||
<p><strong>设备SN:</strong> ${kmzData.data.sn}</p>
|
||
<p><strong>作战单位:</strong> ${kmzData.data.host.battle_unit_code}</p>
|
||
<p><strong>创建时间:</strong> ${kmzData.data.host.create_time}</p>
|
||
<p><strong>更新时间:</strong> ${kmzData.data.host.update_time}</p>
|
||
<p><strong>数据类型:</strong> ${kmzData.data.host.data_type}</p>
|
||
`;
|
||
showResult(info, 'info');
|
||
}
|
||
|
||
// 模拟多文件接收
|
||
function simulateMultipleFiles() {
|
||
const djiFile = {
|
||
...kmzData,
|
||
data: {
|
||
...kmzData.data,
|
||
host: {
|
||
...kmzData.data.host,
|
||
kmz_file: {
|
||
...kmzData.data.host.kmz_file,
|
||
file_name: "位置点侦查御4E_5_dji_20250908_221822.kmz"
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
const daotongFile = {
|
||
...kmzData,
|
||
data: {
|
||
...kmzData.data,
|
||
host: {
|
||
...kmzData.data.host,
|
||
kmz_file: {
|
||
...kmzData.data.host.kmz_file,
|
||
file_name: "位置点侦查御4E_5_daotong_20250908_221822.kmz"
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
showResult(`
|
||
<h4>📁 模拟多文件数据</h4>
|
||
<div style="background: #e6f7ff; padding: 10px; margin: 10px 0; border-radius: 4px;">
|
||
<p><strong>大疆文件:</strong> ${djiFile.data.host.kmz_file.file_name}</p>
|
||
<p><strong>道通文件:</strong> ${daotongFile.data.host.kmz_file.file_name}</p>
|
||
<p>在实际应用中，这些文件会分别显示在文件列表中，用户可以选择下载任意一个或全部下载。</p>
|
||
</div>
|
||
`, 'info');
|
||
}
|
||
|
||
function showResult(message, type) {
|
||
const resultDiv = document.getElementById('result');
|
||
resultDiv.innerHTML = `<div class="${type}">${message}</div>`;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|