Site_Tools/LabStatistics/pageData.js

// 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
        localStorage.clear();
        // 刷新页面
        location.reload();
    }
}


// 导出数据
function exportData() {
    // 获取所有localStorage数据
    const data = {};
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        try {
            // 尝试解析JSON数据
            const value = localStorage.getItem(key);
            data[key] = JSON.parse(value);
        } catch (e) {
            // 如果不是JSON格式则直接存储原始值
            data[key] = localStorage.getItem(key);
        }
    }

    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);

            // 清除现有数据
            localStorage.clear();

            // 导入所有数据到localStorage
            // 遍历数据对象的所有键
            for (const key in data) {
                try {
                    // 检查数据类型并相应处理
                    if (typeof data[key] === 'object' && data[key] !== null) {
                        // 对象类型数据转换为JSON字符串存储
                        localStorage.setItem(key, JSON.stringify(data[key]));
                    } else {
                        // 其他类型直接存储
                        localStorage.setItem(key, data[key]);
                    }
                } catch (error) {
                    console.error(`导入键 ${key} 时出错:`, error);
                }
            }

            // 导入完成后重新加载页面以更新显示
            location.reload();

            alert('数据导入成功！');
        } catch (error) {
            alert('导入失败！请检查文件格式。');
            console.error('导入错误:', error);
        }
    };
    reader.readAsText(file);
}