// data.js - 数据管理、导入导出相关功能 function initializeDataPage() { // 生成数据标签页内容 generateDataTabContent(); // 加载项目标题和自定义参数数据 loadProjectTitle(); loadCustomParamsData(); } // 生成数据标签页内容 function generateDataTabContent() { console.log('generateDataTabContent'); const dataTab = document.createElement('div'); dataTab.id = 'data'; dataTab.className = 'tab-content'; // 创建内容容器 const contentContainer = document.createElement('div'); contentContainer.className = 'content-container'; contentContainer.style.flexDirection = 'column'; // 创建项目标题和按钮部分 const titleSection = document.createElement('div'); titleSection.style.marginBottom = '1.5rem'; // 创建标题输入部分 const titleRow = document.createElement('div'); titleRow.style.display = 'flex'; titleRow.style.alignItems = 'center'; titleRow.style.marginBottom = '1rem'; const titleLabel = document.createElement('label'); titleLabel.htmlFor = 'project-title'; titleLabel.style.marginRight = '1rem'; titleLabel.style.fontWeight = 'bold'; titleLabel.textContent = '工程标题:'; const titleInput = document.createElement('input'); titleInput.type = 'text'; titleInput.id = 'project-title'; titleInput.placeholder = '请输入工程标题'; titleInput.style.flex = '1'; titleInput.style.padding = '0.5rem'; titleInput.style.border = '1px solid #ccc'; titleInput.style.borderRadius = '4px'; titleInput.oninput = updateProjectTitle; titleRow.appendChild(titleLabel); titleRow.appendChild(titleInput); // 创建按钮容器 const buttonContainer = document.createElement('div'); buttonContainer.className = 'button-container'; // 创建导出按钮 const exportBtn = document.createElement('button'); exportBtn.className = 'export-btn'; exportBtn.textContent = '导出数据'; exportBtn.onclick = exportData; // 创建导入按钮 const importBtn = document.createElement('button'); importBtn.className = 'import-btn'; importBtn.textContent = '导入数据'; importBtn.onclick = function () { document.getElementById('importFile').click(); }; // 创建新建工程按钮 const newProjectBtn = document.createElement('button'); newProjectBtn.className = 'export-btn'; newProjectBtn.style.backgroundColor = '#dc3545'; newProjectBtn.textContent = '新建工程'; newProjectBtn.onclick = newProject; // 创建文件输入(隐藏) const importFile = document.createElement('input'); importFile.type = 'file'; importFile.id = 'importFile'; importFile.accept = '.json,.txt'; importFile.style.display = 'none'; importFile.onchange = importData; // 添加按钮到容器 buttonContainer.appendChild(exportBtn); buttonContainer.appendChild(importBtn); buttonContainer.appendChild(newProjectBtn); buttonContainer.appendChild(importFile); // 组装标题部分 titleSection.appendChild(titleRow); titleSection.appendChild(buttonContainer); // 创建自定义参数部分 const customParamsSection = document.createElement('div'); customParamsSection.style.marginTop = '1.5rem'; customParamsSection.style.border = '1px solid #eee'; customParamsSection.style.borderRadius = '4px'; customParamsSection.style.padding = '1rem'; // 添加标题 const customParamsTitle = document.createElement('h3'); customParamsTitle.style.marginTop = '0'; customParamsTitle.style.marginBottom = '1rem'; customParamsTitle.textContent = '自定义参数'; // 创建参数容器 const customParamsContainer = document.createElement('div'); customParamsContainer.id = 'custom-params-container'; customParamsContainer.style.display = 'flex'; customParamsContainer.style.flexDirection = 'column'; customParamsContainer.style.gap = '0.5rem'; customParamsContainer.style.maxHeight = '300px'; customParamsContainer.style.overflowY = 'auto'; // 添加按钮 const addParamBtn = document.createElement('div'); addParamBtn.className = 'add-input-btn'; addParamBtn.style.marginTop = '1rem'; addParamBtn.onclick = addCustomParam; const addParamSpan = document.createElement('span'); addParamSpan.textContent = '+ 添加参数'; addParamBtn.appendChild(addParamSpan); // 组装自定义参数部分 customParamsSection.appendChild(customParamsTitle); customParamsSection.appendChild(customParamsContainer); customParamsSection.appendChild(addParamBtn); // 组装整个内容 contentContainer.appendChild(titleSection); contentContainer.appendChild(customParamsSection); dataTab.appendChild(contentContainer); if (document.getElementById('container')) { console.log('appendChild dataTab'); document.getElementById('container').appendChild(dataTab); } // 添加版本信息 const versionInfo = document.createElement('div'); versionInfo.style.textAlign = 'center'; versionInfo.style.marginTop = '1rem'; versionInfo.style.color = '#666'; versionInfo.style.fontSize = '0.8rem'; versionInfo.textContent = 'Ver 1.1.02.250628'; dataTab.appendChild(versionInfo); } // 添加自定义参数 function addCustomParam() { const container = document.getElementById('custom-params-container'); const paramRow = document.createElement('div'); paramRow.className = 'custom-param-row'; paramRow.style.display = 'flex'; paramRow.style.alignItems = 'center'; paramRow.style.gap = '0.5rem'; const nameInput = document.createElement('input'); nameInput.type = 'text'; nameInput.className = 'param-name'; nameInput.placeholder = '参数名称'; nameInput.style.flex = '1'; nameInput.style.padding = '0.5rem'; nameInput.style.border = '1px solid #ccc'; nameInput.style.borderRadius = '4px'; nameInput.oninput = saveCustomParamsData; const valueInput = document.createElement('input'); valueInput.type = 'text'; valueInput.className = 'param-value'; valueInput.placeholder = '参数值'; valueInput.style.flex = '1'; valueInput.style.padding = '0.5rem'; valueInput.style.border = '1px solid #ccc'; valueInput.style.borderRadius = '4px'; valueInput.oninput = saveCustomParamsData; const deleteBtn = document.createElement('span'); deleteBtn.className = 'delete-btn'; deleteBtn.innerHTML = '×'; deleteBtn.onclick = function () { container.removeChild(paramRow); saveCustomParamsData(); }; paramRow.appendChild(nameInput); paramRow.appendChild(valueInput); paramRow.appendChild(deleteBtn); container.appendChild(paramRow); } // 清除自定义参数数据 function clearCustomParamsData() { // 清除自定义参数 const customParamsContainer = document.getElementById('custom-params-container'); while (customParamsContainer.firstChild) { customParamsContainer.removeChild(customParamsContainer.firstChild); } saveCustomParamsData(); } // 保存自定义参数数据 function saveCustomParamsData() { const customParams = Array.from(document.querySelectorAll('#custom-params-container .custom-param-row')).map(row => ({ name: row.querySelector('.param-name').value, value: row.querySelector('.param-value').value })); setLocalStorage('customParamsData', JSON.stringify(customParams)); } // 从localStorage加载自定义参数数据 function loadCustomParamsData() { const savedParams = getLocalStorage('customParamsData'); console.log('customParamsData', savedParams); if (savedParams) { try { const params = JSON.parse(savedParams); const container = document.getElementById('custom-params-container'); // 清除现有参数 while (container.firstChild) { container.removeChild(container.firstChild); } // 添加保存的自定义参数 params.forEach(param => { const paramRow = document.createElement('div'); paramRow.className = 'custom-param-row'; paramRow.style.display = 'flex'; paramRow.style.alignItems = 'center'; paramRow.style.gap = '0.5rem'; const nameInput = document.createElement('input'); nameInput.type = 'text'; nameInput.className = 'param-name'; nameInput.placeholder = '参数名称'; nameInput.style.flex = '1'; nameInput.style.padding = '0.5rem'; nameInput.style.border = '1px solid #ccc'; nameInput.style.borderRadius = '4px'; nameInput.value = param.name; nameInput.oninput = saveCustomParamsData; const valueInput = document.createElement('input'); valueInput.type = 'text'; valueInput.className = 'param-value'; valueInput.placeholder = '参数值'; valueInput.style.flex = '1'; valueInput.style.padding = '0.5rem'; valueInput.style.border = '1px solid #ccc'; valueInput.style.borderRadius = '4px'; valueInput.value = param.value; valueInput.oninput = saveCustomParamsData; const deleteBtn = document.createElement('span'); deleteBtn.className = 'delete-btn'; deleteBtn.innerHTML = '×'; deleteBtn.onclick = function () { container.removeChild(paramRow); saveCustomParamsData(); }; paramRow.appendChild(nameInput); paramRow.appendChild(valueInput); paramRow.appendChild(deleteBtn); container.appendChild(paramRow); }); } catch (e) { console.error('加载自定义参数失败:', e); } } } // 从localStorage加载项目标题 function loadProjectTitle() { const savedTitle = getLocalStorage('projectTitle'); if (savedTitle) { try { const titleInput = document.getElementById('project-title'); console.log('projectTitle', savedTitle); if (titleInput) { titleInput.value = savedTitle; } } catch (e) { console.error('加载项目标题失败:', e); } } } function newProject() { if (confirm('确定要新建工程吗?这将清除所有当前数据!')) { // 清除整个localStorage clearLocalStorage(); // 刷新页面 location.reload(); } } // 导出数据 function exportData() { // 获取所有localStorage数据 const data = getAllLocalStorageData(); const projectTitle = document.getElementById('project-title').value; const jsonString = JSON.stringify(data, null, 2); const blob = new Blob([jsonString], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; const fileName = `_LabStatistics_${new Date().toISOString().split('.')[0]}.json`; a.download = `${projectTitle}${fileName.replace(/-/g, '_')}`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } // 导入数据 function importData() { const fileInput = document.getElementById('importFile'); const file = fileInput.files[0]; if (!file) { alert('请选择要导入的文件!'); return; } const reader = new FileReader(); reader.onload = function (e) { try { const data = JSON.parse(e.target.result); // 清除现有数据 clearLocalStorage(); // 导入所有数据到localStorage // 遍历数据对象的所有键 for (const key in data) { try { // 检查数据类型并相应处理 if (typeof data[key] === 'object' && data[key] !== null) { // 对象类型数据转换为JSON字符串存储 setLocalStorage(key, JSON.stringify(data[key])); } else { // 其他类型直接存储 setLocalStorage(key, data[key]); } } catch (error) { console.error(`导入键 ${key} 时出错:`, error); } } // 导入完成后重新加载页面以更新显示 location.reload(); alert('数据导入成功!'); } catch (error) { alert('导入失败!请检查文件格式。'); console.error('导入错误:', error); } }; reader.readAsText(file); }