${Object.entries(interfaces).map(([interfaceName, [size1, size2]]) => `
-
+
${interfaceName}
+ ${size1 > 0 ? `[${size1}${size2 > 0 ? `][${size2}` : ''}]` : ''}
`).join('')}
@@ -719,6 +783,16 @@ class DataCollection extends HTMLElement {
// 更新监控状态
this.updateMonitorStatus();
+
+ // 在树型控件部分添加双击事件处理
+ this.shadowRoot.querySelectorAll('.interface-item').forEach(itemEl => {
+ itemEl.ondblclick = (e) => {
+ const name = itemEl.getAttribute('data-interfacename');
+ const struct = itemEl.getAttribute('data-modelstructname');
+ console.log('双击接口:', name, struct); // 添加调试日志
+ this.handleInterfaceDblClick(name, struct);
+ };
+ });
}
// 重新激活组件
@@ -728,10 +802,132 @@ class DataCollection extends HTMLElement {
this.startStatusTimer();
}
+ async loadCollectResult() {
+ try {
+ const response = await fetch('/api/filesystem/read', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ filename: 'collect_result.csv'
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error(`读取文件失败: ${response.status} ${response.statusText}`);
+ }
+
+ const result = await response.json();
+ if (!result.success) {
+ throw new Error(result.message || '读取文件失败');
+ }
+
+ // 解析CSV数据
+ const csvData = result.data;
+ if (!csvData) {
+ throw new Error('CSV数据为空');
+ }
+
+ const lines = csvData.split('\n');
+ if (lines.length < 2) {
+ throw new Error('CSV文件格式错误：数据行数不足');
+ }
+
+ // 获取接口名称（第一行）并解析数组索引
+ const interfaceNames = lines[0].split(',').map(name => {
+ const trimmedName = name.trim();
+ // 匹配接口名称和数组索引
+ const match = trimmedName.match(/^(.+?)\((\d+)(?:_(\d+))?\)$/);
+ if (match) {
+ return {
+ fullName: trimmedName,
+ baseName: match[1],
+ index1: parseInt(match[2], 10) - 1, // 转换为0基索引
+ index2: match[3] ? parseInt(match[3], 10) - 1 : null // 转换为0基索引
+ };
+ }
+ return {
+ fullName: trimmedName,
+ baseName: trimmedName,
+ index1: null,
+ index2: null
+ };
+ });
+
+ // 按接口名称整理数据
+ const organizedData = {};
+
+ // 处理数据行
+ for (let i = 1; i < lines.length; i++) {
+ const values = lines[i].split(',').map(value => parseFloat(value.trim()));
+ if (values.length === interfaceNames.length) {
+ // 第一列是时间
+ const time = values[0];
+
+ interfaceNames.forEach(({ fullName, baseName, index1, index2 }, valueIndex) => {
+ if (valueIndex === 0) return; // 跳过时间列
+
+ if (index1 !== null) {
+ // 数组接口
+ if (!organizedData[baseName]) {
+ organizedData[baseName] = {
+ isArray: true,
+ data: [],
+ times: [] // 添加时间数组
+ };
+ }
+ if (index2 !== null) {
+ // 二维数组
+ if (!organizedData[baseName].data[index1]) {
+ organizedData[baseName].data[index1] = [];
+ }
+ if (!organizedData[baseName].data[index1][index2]) {
+ organizedData[baseName].data[index1][index2] = [];
+ }
+ organizedData[baseName].data[index1][index2].push(values[valueIndex]);
+ } else {
+ // 一维数组
+ if (!organizedData[baseName].data[index1]) {
+ organizedData[baseName].data[index1] = [];
+ }
+ organizedData[baseName].data[index1].push(values[valueIndex]);
+ }
+ } else {
+ // 非数组接口
+ if (!organizedData[fullName]) {
+ organizedData[fullName] = {
+ isArray: false,
+ data: [],
+ times: [] // 添加时间数组
+ };
+ }
+ organizedData[fullName].data.push(values[valueIndex]);
+
+ // 添加时间到对应的接口数据中
+ if (!organizedData[fullName].times.includes(time)) {
+ organizedData[fullName].times.push(time);
+ }
+ }
+
+ // 添加时间到数组接口数据中
+ if (index1 !== null && !organizedData[baseName].times.includes(time)) {
+ organizedData[baseName].times.push(time);
+ }
+ });
+ }
+ }
+
+ return organizedData;
+ } catch (error) {
+ console.error('加载采集结果失败:', error);
+ throw error;
+ }
+ }
+
async handleStartCollect() {
// 检查监控状态
if (this.monitorStatus !== 1) {
- alert('请先启动监控');
return;
}
@@ -742,6 +938,8 @@ class DataCollection extends HTMLElement {
}
const startCollectBtn = this.shadowRoot.getElementById('startCollectBtn');
+ const loadScriptBtn = this.shadowRoot.getElementById('loadScriptBtn');
+ const downloadBtn = this.shadowRoot.getElementById('downloadBtn');
// 如果正在采集，则停止采集
if (this.collectStatus === 2) {
@@ -754,11 +952,25 @@ class DataCollection extends HTMLElement {
if (result.success) {
// 更新采集状态
- this.collectStatus = 1; // 改为已加载脚本状态
+ this.collectStatus = 3; // 改为采集完成状态
// 更新按钮状态
startCollectBtn.textContent = '开始采集';
startCollectBtn.disabled = false;
startCollectBtn.classList.remove('stop');
+ // 启用卸载脚本按钮
+ loadScriptBtn.disabled = false;
+ // 启用下载按钮
+ if (downloadBtn) downloadBtn.disabled = false;
+
+ // 加载采集结果
+ try {
+ const collectData = await this.loadCollectResult();
+ // 存储采集数据
+ this.collectData = collectData;
+ } catch (error) {
+ console.error('加载采集数据失败:', error);
+ alert('加载采集数据失败: ' + error.message);
+ }
} else {
throw new Error(result.message);
}
@@ -791,6 +1003,10 @@ class DataCollection extends HTMLElement {
// 更新按钮状态
startCollectBtn.textContent = '停止采集';
startCollectBtn.classList.add('stop');
+ // 禁用卸载脚本按钮
+ loadScriptBtn.disabled = true;
+ // 禁用下载按钮
+ if (downloadBtn) downloadBtn.disabled = true;
} else {
throw new Error(result.message);
}
@@ -799,6 +1015,238 @@ class DataCollection extends HTMLElement {
alert('启动采集失败: ' + error.message);
}
}
+
+ async handleInterfaceDblClick(interfaceName, modelStructName) {
+ // 只有在采集完成状态才允许绘图
+ if (this.collectStatus !== 3) {
+ return;
+ }
+
+ // 检查是否已经存在该接口的图表窗口
+ const windowId = `${interfaceName}_${modelStructName}`;
+ if (this.chartWindows.has(windowId)) {
+ // 如果窗口已存在，将其置顶
+ const window = this.chartWindows.get(windowId);
+ window.setAttribute('z-index', Date.now());
+ return;
+ }
+
+ try {
+ // 获取左侧面板和工具栏的位置信息
+ const leftPanel = this.shadowRoot.querySelector('.left-panel');
+ const toolbar = this.shadowRoot.querySelector('.toolbar');
+ const leftPanelRect = leftPanel.getBoundingClientRect();
+ const toolbarRect = toolbar.getBoundingClientRect();
+
+ // 计算可用区域
+ const minX = leftPanelRect.right;
+ const maxX = window.innerWidth;
+ const minY = toolbarRect.bottom;
+ const maxY = window.innerHeight;
+
+ // 创建图表数据
+ const chartData = {
+ labels: [],
+ datasets: []
+ };
+
+ // 创建图表配置
+ const chartOptions = {
+ responsive: true,
+ maintainAspectRatio: false,
+ animation: false,
+ elements: {
+ point: {
+ radius: 0
+ },
+ line: {
+ tension: 0
+ }
+ },
+ scales: {
+ y: {
+ beginAtZero: false,
+ display: true,
+ ticks: {
+ callback: function(value) {
+ if (Math.abs(value) > 1000 || (Math.abs(value) < 0.1 && value !== 0)) {
+ return value.toExponential(1);
+ }
+ return value.toFixed(1);
+ },
+ maxTicksLimit: 8
+ }
+ },
+ x: {
+ display: true,
+ type: 'linear',
+ ticks: {
+ callback: function(value) {
+ return value.toFixed(1);
+ }
+ }
+ }
+ },
+ plugins: {
+ legend: {
+ display: true,
+ position: 'top'
+ },
+ tooltip: {
+ enabled: true,
+ mode: 'index',
+ intersect: false,
+ callbacks: {
+ label: function(context) {
+ console.log('Tooltip context:', context);
+ console.log('Raw data:', context.raw);
+
+ if (!context.raw) {
+ console.log('No raw data');
+ return `${context.dataset.label}: N/A`;
+ }
+
+ if (typeof context.raw.y === 'undefined') {
+ console.log('No y value in raw data');
+ return `${context.dataset.label}: N/A`;
+ }
+
+ const value = context.raw.y;
+ console.log('Value type:', typeof value, 'Value:', value);
+
+ if (typeof value !== 'number') {
+ console.log('Value is not a number');
+ return `${context.dataset.label}: N/A`;
+ }
+
+ return `${context.dataset.label}: ${value.toFixed(1)}`;
+ }
+ }
+ }
+ }
+ };
+
+ // 创建浮动窗口组件
+ const floatingWindow = document.createElement('floating-chart-window');
+ if (!floatingWindow) {
+ throw new Error('创建浮动窗口组件失败');
+ }
+
+ // 添加数据点计数器
+ floatingWindow.dataPointIndex = 0;
+
+ // 先添加到页面
+ document.body.appendChild(floatingWindow);
+ this.chartWindows.set(windowId, floatingWindow);
+
+ // 设置浮动窗口的约束
+ floatingWindow.setAttribute('constraints', JSON.stringify({
+ minX: minX,
+ maxX: maxX,
+ minY: minY,
+ maxY: maxY
+ }));
+
+ // 再设置属性
+ floatingWindow.setAttribute('title', interfaceName);
+ floatingWindow.setAttribute('initial-position', JSON.stringify({
+ x: minX + 20, // 在左侧面板右侧留出20px的间距
+ y: minY + 20 // 在工具栏下方留出20px的间距
+ }));
+ floatingWindow.setAttribute('initial-size', JSON.stringify({ width: 400, height: 300 }));
+ floatingWindow.setAttribute('chart-data', JSON.stringify(chartData));
+ floatingWindow.setAttribute('chart-options', JSON.stringify(chartOptions));
+
+ // 更新图表数据
+ if (this.collectData && this.collectData[interfaceName]) {
+ const interfaceData = this.collectData[interfaceName];
+ if (interfaceData.isArray) {
+ // 数组接口
+ if (interfaceData.data[0] && Array.isArray(interfaceData.data[0][0])) {
+ // 二维数组
+ const datasets = [];
+ interfaceData.data.forEach((row, i) => {
+ row.forEach((values, j) => {
+ if (values && values.length > 0) {
+ datasets.push({
+ label: `${interfaceName}[${i+1}][${j+1}]`,
+ data: values,
+ borderColor: `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`,
+ tension: 0
+ });
+ }
+ });
+ });
+ // 更新图表数据
+ floatingWindow.updateChartData({
+ labels: interfaceData.times,
+ datasets: datasets
+ });
+ } else {
+ // 一维数组
+ const datasets = [];
+ interfaceData.data.forEach((values, i) => {
+ if (values && values.length > 0) {
+ datasets.push({
+ label: `${interfaceName}[${i+1}]`,
+ data: values,
+ borderColor: `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`,
+ tension: 0
+ });
+ }
+ });
+ // 更新图表数据
+ floatingWindow.updateChartData({
+ labels: interfaceData.times,
+ datasets: datasets
+ });
+ }
+ } else {
+ // 非数组接口
+ if (interfaceData.data && interfaceData.data.length > 0) {
+ // 更新图表数据
+ floatingWindow.updateChartData({
+ labels: interfaceData.times,
+ datasets: [{
+ label: interfaceName,
+ data: interfaceData.data,
+ borderColor: 'rgb(75, 192, 192)',
+ tension: 0
+ }]
+ });
+ }
+ }
+ }
+
+ // 添加关闭事件处理
+ floatingWindow.addEventListener('close', () => {
+ this.chartWindows.delete(windowId);
+ });
+ } catch (error) {
+ console.error('创建图表窗口失败:', error);
+ alert('创建图表窗口失败，请查看控制台了解详情');
+ }
+ }
+
+ async handleDownload() {
+ if (!this.outputFile) {
+ alert('没有可下载的文件');
+ return;
+ }
+
+ try {
+ // 创建一个隐藏的a标签用于下载
+ const link = document.createElement('a');
+ link.href = `/api/filesystem/download?filename=${encodeURIComponent(this.outputFile)}`;
+ link.download = this.outputFile;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ } catch (error) {
+ console.error('下载文件失败:', error);
+ alert('下载文件失败: ' + error.message);
+ }
+ }
}
customElements.define('data-collection', DataCollection);
\ No newline at end of file
diff --git a/XNSimHtml/routes/filesystem.js b/XNSimHtml/routes/filesystem.js
index 84ceb77..051f992 100644
--- a/XNSimHtml/routes/filesystem.js
+++ b/XNSimHtml/routes/filesystem.js
@@ -358,4 +358,107 @@ router.get('/validate-csv-headers', async (req, res) => {
}
});
+// 读取CSV文件内容
+router.post('/read', async (req, res) => {
+ try {
+ const { filename } = req.body;
+ if (!filename) {
+ return res.status(400).json({
+ success: false,
+ message: '未提供文件名'
+ });
+ }
+
+ // 获取上传目录路径
+ const uploadPath = await getUploadPath();
+ const filePath = path.join(uploadPath, filename);
+
+ // 检查文件是否存在
+ try {
+ await fsPromises.access(filePath);
+ } catch (error) {
+ return res.status(404).json({
+ success: false,
+ message: '文件不存在'
+ });
+ }
+
+ // 读取文件内容
+ const content = await fsPromises.readFile(filePath, 'utf8');
+
+ res.json({
+ success: true,
+ data: content
+ });
+ } catch (error) {
+ console.error('读取CSV文件失败:', error);
+ res.status(500).json({
+ success: false,
+ message: '读取CSV文件失败: ' + error.message
+ });
+ }
+});
+
+// 文件下载
+router.get('/download', async (req, res) => {
+ try {
+ const { filename } = req.query;
+ if (!filename) {
+ return res.status(400).json({
+ success: false,
+ message: '未提供文件名'
+ });
+ }
+
+ // 获取上传目录路径
+ const uploadPath = await getUploadPath();
+ const filePath = path.join(uploadPath, filename);
+
+ // 安全检查：确保文件在上传目录内
+ if (!filePath.startsWith(uploadPath)) {
+ return res.status(403).json({
+ success: false,
+ message: '无权访问该文件'
+ });
+ }
+
+ // 检查文件是否存在
+ try {
+ await fsPromises.access(filePath);
+ } catch (error) {
+ return res.status(404).json({
+ success: false,
+ message: '文件不存在'
+ });
+ }
+
+ // 设置响应头
+ res.setHeader('Content-Disposition', `attachment; filename=${encodeURIComponent(filename)}`);
+ res.setHeader('Content-Type', 'application/octet-stream');
+
+ // 创建文件流并发送
+ const fileStream = fs.createReadStream(filePath);
+ fileStream.pipe(res);
+
+ // 处理流错误
+ fileStream.on('error', (error) => {
+ console.error('文件下载失败:', error);
+ if (!res.headersSent) {
+ res.status(500).json({
+ success: false,
+ message: '文件下载失败: ' + error.message
+ });
+ }
+ });
+ } catch (error) {
+ console.error('文件下载失败:', error);
+ if (!res.headersSent) {
+ res.status(500).json({
+ success: false,
+ message: '文件下载失败: ' + error.message
+ });
+ }
+ }
+});
+
module.exports = router;
\ No newline at end of file