`;
this.shadowRoot.getElementById('startBtn').onclick = () => this.startMonitor();
this.shadowRoot.getElementById('stopBtn').onclick = () => this.stopMonitor();
@@ -184,13 +316,67 @@ class NetworkMonitor extends HTMLElement {
dataList.innerHTML = '
';
return;
}
- dataList.innerHTML = this.state.data.map(item => `
-
-
时间: ${new Date(item.timestamp).toLocaleString()}
-
来源: ${item.source}
-
内容: ${typeof item.data === 'object' ? JSON.stringify(item.data, null, 2) : item.data}
+ dataList.innerHTML = this.state.data.map((item, index) => `
+
+
+
+ | 时间: ${new Date(item.timestamp).toLocaleString('zh-CN', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ fractionalSecondDigits: 3
+ })} |
+ 来源: ${item.source} |
+ 大小: ${item.length || this.getDataSize(item.data)} 字节 |
+
+
`).join('');
+
+ // 添加点击事件
+ dataList.querySelectorAll('.data-item').forEach(item => {
+ item.addEventListener('click', (e) => {
+ const index = parseInt(e.currentTarget.dataset.index);
+ this.selectDataItem(index);
+ });
+ });
+ }
+
+ getDataSize(data) {
+ // 如果数据是十六进制字符串，每两个字符代表一个字节
+ if (typeof data === 'string' && /^[0-9a-fA-F]+$/.test(data)) {
+ return Math.ceil(data.length / 2);
+ }
+ return 0;
+ }
+
+ formatDataAsHex(data) {
+ // 如果数据是十六进制字符串，直接处理
+ if (typeof data === 'string' && /^[0-9a-fA-F]+$/.test(data)) {
+ const bytes = [];
+ for (let i = 0; i < data.length; i += 2) {
+ const byte = parseInt(data.substr(i, 2), 16);
+ bytes.push(byte);
+ }
+
+ // 分行显示，每行16个字节
+ const bytesPerLine = 16;
+ const lines = [];
+
+ for (let i = 0; i < bytes.length; i += bytesPerLine) {
+ const lineBytes = bytes.slice(i, i + bytesPerLine);
+ const lineHex = lineBytes.map(byte => byte.toString(16).padStart(2, '0')).join(' ');
+ const offset = i.toString(16).padStart(4, '0').toUpperCase();
+ lines.push(`${offset}: ${lineHex}`);
+ }
+
+ return lines.join('\n');
+ }
+
+ return '无效数据格式';
}
setStatus(msg) {
@@ -257,6 +443,7 @@ class NetworkMonitor extends HTMLElement {
this.state.data = this.state.data.slice(-1000);
}
this.renderDataList();
+ this.updateDetailContent();
}
this.state.isMonitoring = data.isMonitoring;
this.shadowRoot.getElementById('monitorStatus').textContent = data.isMonitoring ? '运行中' : '已停止';
@@ -284,6 +471,141 @@ class NetworkMonitor extends HTMLElement {
reactivate() {
this.initialize();
}
+
+ selectDataItem(index) {
+ this.state.selectedData = index;
+ this.renderDataList();
+ this.updateDetailContent();
+ }
+
+ updateDetailContent() {
+ const detailContent = this.shadowRoot.getElementById('detailContent');
+ if (!detailContent) return;
+
+ if (this.state.selectedData === null || !this.state.data[this.state.selectedData]) {
+ detailContent.innerHTML = '
请从左侧选择一个数据包查看详情
';
+ return;
+ }
+
+ const item = this.state.data[this.state.selectedData];
+ detailContent.innerHTML = `
+
${this.formatHexContent(item.data)}
+
+ ${this.formatParseContent(item.data)}
+
+ `;
+ }
+
+ getPacketIndex(packet) {
+ // 这里可以根据需要实现数据包序号逻辑
+ return Math.floor(Math.random() * 1000) + 1;
+ }
+
+ formatHexContent(data) {
+ // 如果数据是十六进制字符串，直接处理
+ if (typeof data === 'string' && /^[0-9a-fA-F]+$/.test(data)) {
+ const bytes = [];
+ for (let i = 0; i < data.length; i += 2) {
+ const byte = parseInt(data.substr(i, 2), 16);
+ bytes.push(byte);
+ }
+
+ // 分行显示，每行16个字节
+ const bytesPerLine = 16;
+ const lines = [];
+
+ for (let i = 0; i < bytes.length; i += bytesPerLine) {
+ const lineBytes = bytes.slice(i, i + bytesPerLine);
+ const lineHex = lineBytes.map(byte => byte.toString(16).padStart(2, '0')).join(' ');
+ const offset = i.toString(16).padStart(4, '0').toUpperCase();
+ lines.push(`${offset}: ${lineHex}`);
+ }
+
+ return lines.join('\n');
+ }
+
+ return '无效数据格式';
+ }
+
+ formatParseContent(data) {
+ if (typeof data !== 'string' || !/^[0-9a-fA-F]+$/.test(data) || data.length < 14) {
+ return '
数据包长度不足，无法解析
';
+ }
+
+ const bytes = [];
+ for (let i = 0; i < data.length; i += 2) {
+ const byte = parseInt(data.substr(i, 2), 16);
+ bytes.push(byte);
+ }
+
+ // 解析数据包头
+ const header = bytes.slice(0, 6); // 前6个字节
+ const sizeBytes = bytes.slice(6, 8); // 第7-8个字节表示数据包大小
+
+ let parseResult = '
数据包头解析
';
+
+ // 1. a6-XNSim数据
+ parseResult += `
1. ${header[0].toString(16).padStart(2, '0')} - XNSim数据
`;
+
+ // 2. c0-C909数据 c1-C919数据
+ const dataType = header[1];
+ let dataTypeDesc = '';
+ if (dataType === 0xc0) {
+ dataTypeDesc = 'C909数据';
+ } else if (dataType === 0xc1) {
+ dataTypeDesc = 'C919数据';
+ } else {
+ dataTypeDesc = `未知数据类型(${dataType.toString(16).padStart(2, '0')})`;
+ }
+ parseResult += `
2. ${dataType.toString(16).padStart(2, '0')} - ${dataTypeDesc}
`;
+
+ // 3. ATA章节号
+ const ataChapter = header[2];
+ parseResult += `
3. ${ataChapter.toString(16).padStart(2, '0')} - ATA章节号 (ATA${ataChapter.toString().padStart(2, '0')})
`;
+
+ // 4. 模型编号
+ const modelNumber = header[3];
+ parseResult += `
4. ${modelNumber.toString(16).padStart(2, '0')} - 模型编号 (${modelNumber})
`;
+
+ // 5. 结构体类别
+ const structType = header[4];
+ let structTypeDesc = '';
+ switch (structType) {
+ case 0x00:
+ structTypeDesc = '输入结构体';
+ break;
+ case 0x01:
+ structTypeDesc = '输出结构体';
+ break;
+ case 0x02:
+ structTypeDesc = '心跳结构体';
+ break;
+ default:
+ structTypeDesc = `未知结构体类型(${structType.toString(16).padStart(2, '0')})`;
+ }
+ parseResult += `
5. ${structType.toString(16).padStart(2, '0')} - 结构体类别 (${structTypeDesc})
`;
+
+ // 6. 数据传输方向
+ const direction = header[5];
+ let directionDesc = '';
+ switch (direction) {
+ case 0x00:
+ directionDesc = '输入';
+ break;
+ case 0x01:
+ directionDesc = '输出';
+ break;
+ default:
+ directionDesc = `未知方向(${direction.toString(16).padStart(2, '0')})`;
+ }
+ parseResult += `
6. ${direction.toString(16).padStart(2, '0')} - 数据传输方向 (${directionDesc})
`;
+
+ // 7. 数据包大小
+ const packetSize = (sizeBytes[0] << 8) | sizeBytes[1];
+ parseResult += `
7. ${sizeBytes[0].toString(16).padStart(2, '0')} ${sizeBytes[1].toString(16).padStart(2, '0')} - 数据包大小 (${packetSize} 字节)
`;
+
+ return parseResult;
+ }
}
-customElements.define('network-monitor', NetworkMonitor);
\ No newline at end of file
+customElements.define('network-monitor', NetworkMonitor);
\ No newline at end of file
diff --git a/XNSimHtml/routes/udp-monitor.js b/XNSimHtml/routes/udp-monitor.js
index dc749e9..49ac97b 100644
--- a/XNSimHtml/routes/udp-monitor.js
+++ b/XNSimHtml/routes/udp-monitor.js
@@ -55,21 +55,17 @@ router.post('/start', (req, res) => {
udpServer.on('message', (msg, rinfo) => {
// 将收到的数据添加到数据队列
try {
- let processedData;
-
- // 尝试将数据解析为JSON
- try {
- processedData = JSON.parse(msg.toString());
- } catch (e) {
- // 如果不是JSON，则保存为字符串
- processedData = msg.toString();
- }
+ // 保存原始字节数据，转换为十六进制字符串
+ const hexData = msg.toString('hex');
+ const rawBytes = Array.from(msg);
// 将数据添加到队列
udpData.push({
timestamp: Date.now(),
source: `${rinfo.address}:${rinfo.port}`,
- data: processedData
+ data: hexData,
+ rawBytes: rawBytes,
+ length: msg.length
});
// 限制数据队列大小，最多保存1000条记录
diff --git a/XNSimHtml/utils/model-utils.js b/XNSimHtml/utils/model-utils.js
index b10d11c..be86f80 100644
--- a/XNSimHtml/utils/model-utils.js
+++ b/XNSimHtml/utils/model-utils.js
@@ -233,10 +233,7 @@ function saveNewVersion(db, versionData) {
versionData.DataPackageEntryPoint || '',
versionData.DataPackageInterfaceName || '',
versionData.ConfID,
- versionData.CmdList || '[]',
- versionData.ClassName,
- versionData.originalVersion || versionData.Version,
- versionData.PlaneName
+ versionData.CmdList || '[]'
);
return {