'commit'
This commit is contained in:
@@ -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);
|
||||
}
|
||||
});
|
Reference in New Issue
Block a user