This commit is contained in:
2025-09-10 08:23:55 +08:00
parent 96cae21b44
commit a87e6e4853
7 changed files with 135 additions and 119 deletions

View File

@@ -412,81 +412,76 @@ document.addEventListener('DOMContentLoaded', function() {
contextMenu.addEventListener('click', function(e) {
e.stopPropagation();
});
// 替换原导入按钮事件为文件选择模式
// 替换原导入按钮事件为直接加载指定JSON文件
document.addEventListener('DOMContentLoaded', function() {
// 导入数据按钮事件 - 全新实现
// 导入数据按钮事件 - 直接加载指定文件版
const importDataBtn = document.getElementById('importDataBtn');
if (importDataBtn) {
importDataBtn.addEventListener('click', function() {
// 创建隐藏的文件选择输入
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.json';
fileInput.style.display = 'none';
// 触发文件选择对话框
fileInput.click();
// 文件选择处理
fileInput.onchange = function(e) {
const file = e.target.files[0];
if (!file) return;
console.log('已选择文件:', file.name);
const loadIndex = layer.load(2, {shade: [0.3, '#333']});
const reader = new FileReader();
reader.onload = function(event) {
try {
const data = JSON.parse(event.target.result);
console.log('JSON文件解析成功:', data);
// 保存数据到localStorage
if (data.elements) {
localStorage.setItem('savedElements', JSON.stringify(data.elements));
}
if (data.centerPoint) {
localStorage.setItem('centerPoint', JSON.stringify(data.centerPoint));
}
layer.close(loadIndex);
layer.msg('数据导入成功,页面将刷新', {icon: 1, time: 1500}, function() {
location.reload();
});
} catch (error) {
layer.close(loadIndex);
console.error('JSON解析失败:', error);
layer.msg('文件格式错误请选择有效的JSON文件', {icon: 5});
}
};
reader.onerror = function() {
layer.close(loadIndex);
layer.msg('文件读取失败', {icon: 5});
};
reader.readAsText(file);
};
});
if (!importDataBtn) {
alert('错误:未找到导入按钮元素!');
console.error('导入按钮元素不存在');
return;
}
importDataBtn.addEventListener('click', function() {
alert('开始导入指定数据文件...'); // 确认进入代码逻辑
console.log('开始导入指定JSON文件');
// 直接加载指定JSON文件使用相对路径
const jsonFilePath = 'json/arrow_data_2025-09-10.json'; // 文件相对路径
const loadIndex = layer.load(2, {shade: [0.3, '#333']});
fetch(jsonFilePath)
.then(response => {
alert(`文件请求状态: ${response.status}`); // 网络请求反馈
if (!response.ok) {
throw new Error(`网络响应错误: ${response.status}`);
}
return response.json();
})
.then(data => {
alert('JSON文件解析成功准备保存数据...');
console.log('JSON文件解析成功:', data);
// 保存数据到localStorage
if (data.elements) {
localStorage.setItem('savedElements', JSON.stringify(data.elements));
}
if (data.centerPoint) {
localStorage.setItem('centerPoint', JSON.stringify(data.centerPoint));
}
layer.close(loadIndex);
alert('数据导入成功,页面将刷新');
layer.msg('数据导入成功,页面将刷新', {icon: 1, time: 1500}, function() {
location.reload();
});
})
.catch(error => {
layer.close(loadIndex);
alert(`导入失败: ${error.message}`); // 错误反馈
console.error('文件加载/解析错误:', error);
layer.msg('导入失败: ' + error.message, {icon: 5});
});
});
});
});
// 保存数据到JSON文件并下载
function saveDataToFile() {
// 获取所有箭头元素数据
// 获取所有箭头元素数据 - 完全匹配localStorage格式
const arrows = document.querySelectorAll('.arrow-container');
const elements = Array.from(arrows).map(arrow => ({
type: 'arrow', // 添加缺失的type字段
imagePath: arrow.dataset.imagePath,
left: arrow.style.left,
top: arrow.style.top,
left: arrow.style.left, // 保留px单位和字符串类型
top: arrow.style.top, // 保留px单位和字符串类型
text: arrow.dataset.text || '',
referencePoint: arrow.dataset.referencePoint || 'top-left',
stopDistance: parseInt(arrow.dataset.stopDistance) || 50
stopDistance: arrow.dataset.stopDistance || '50' // 保留字符串类型
}));
// 获取中心点数据
// 获取中心点数据 - 保留px单位和字符串类型
const centerPoint = centerDot ? {
left: centerDot.style.left,
top: centerDot.style.top
@@ -500,12 +495,10 @@ function saveDataToFile() {
};
try {
// 生成JSON字符串确保正确处理特殊字符
const jsonData = JSON.stringify(exportData, null, 2);
const blob = new Blob([jsonData], { type: 'application/json;charset=utf-8' });
const url = URL.createObjectURL(blob);
// 创建下载链接
const a = document.createElement('a');
a.href = url;
const dateStr = new Date().toISOString().slice(0, 10);
@@ -513,13 +506,13 @@ function saveDataToFile() {
document.body.appendChild(a);
a.click();
// 清理
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 0);
console.log('数据已成功导出');
layer.msg('数据导出成功', {icon: 1});
} catch (error) {
console.error('导出数据失败:', error);
layer.msg('导出失败: ' + error.message, {icon: 2});
@@ -527,4 +520,50 @@ function saveDataToFile() {
}
// 为保存数据按钮添加点击事件
document.getElementById('saveDataBtn').addEventListener('click', saveDataToFile);
document.getElementById('saveDataBtn').addEventListener('click', saveDataToFile);
// 清空数据功能实现
function clearAllData() {
// 显示确认对话框
layer.confirm('确定要清空所有数据吗?此操作不可恢复!', {
icon: 3,
title: '警告',
btn: ['确认清空', '取消']
}, function(index) {
// 确认清空数据
try {
// 1. 清除localStorage数据
localStorage.removeItem('savedElements');
localStorage.removeItem('centerPoint');
// 2. 清除DOM中的箭头元素
document.querySelectorAll('.arrow-container').forEach(arrow => {
arrow.remove();
});
// 3. 清除中心点
if (centerDot) {
centerDot.remove();
centerDot = null;
}
// 4. 刷新页面或更新UI
layer.msg('所有数据已成功清空', {icon: 1, time: 1500}, function() {
location.reload(); // 简单粗暴的刷新确保UI完全重置
});
} catch (error) {
console.error('清空数据失败:', error);
layer.msg('清空失败: ' + error.message, {icon: 2});
}
layer.close(index);
});
}
// 为清空数据按钮添加点击事件
document.addEventListener('DOMContentLoaded', function() {
const clearDataBtn = document.getElementById('clearDataBtn');
if (clearDataBtn) {
clearDataBtn.addEventListener('click', clearAllData);
}
});