'commit'
This commit is contained in:
Binary file not shown.
@@ -412,33 +412,34 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
contextMenu.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
// 替换原导入按钮事件为文件选择模式
|
||||
// 替换原导入按钮事件为直接加载指定JSON文件
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 导入数据按钮事件 - 全新实现
|
||||
// 导入数据按钮事件 - 直接加载指定文件版
|
||||
const importDataBtn = document.getElementById('importDataBtn');
|
||||
if (importDataBtn) {
|
||||
if (!importDataBtn) {
|
||||
alert('错误：未找到导入按钮元素！');
|
||||
console.error('导入按钮元素不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
importDataBtn.addEventListener('click', function() {
|
||||
// 创建隐藏的文件选择输入
|
||||
const fileInput = document.createElement('input');
|
||||
fileInput.type = 'file';
|
||||
fileInput.accept = '.json';
|
||||
fileInput.style.display = 'none';
|
||||
alert('开始导入指定数据文件...'); // 确认进入代码逻辑
|
||||
console.log('开始导入指定JSON文件');
|
||||
|
||||
// 触发文件选择对话框
|
||||
fileInput.click();
|
||||
|
||||
// 文件选择处理
|
||||
fileInput.onchange = function(e) {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
console.log('已选择文件:', file.name);
|
||||
// 直接加载指定JSON文件（使用相对路径）
|
||||
const jsonFilePath = 'json/arrow_data_2025-09-10.json'; // 文件相对路径
|
||||
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);
|
||||
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
|
||||
@@ -450,43 +451,37 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
|
||||
layer.close(loadIndex);
|
||||
alert('数据导入成功，页面将刷新');
|
||||
layer.msg('数据导入成功，页面将刷新', {icon: 1, time: 1500}, function() {
|
||||
location.reload();
|
||||
});
|
||||
} catch (error) {
|
||||
})
|
||||
.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);
|
||||
};
|
||||
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});
|
||||
@@ -528,3 +521,49 @@ function 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);
|
||||
}
|
||||
});
|
||||
@@ -1,33 +1,36 @@
|
||||
{
|
||||
"elements": [
|
||||
{
|
||||
"type": "arrow",
|
||||
"imagePath": "images/1.png",
|
||||
"left": "687.469px",
|
||||
"top": "259.891px",
|
||||
"left": "645.469px",
|
||||
"top": "210.891px",
|
||||
"text": "",
|
||||
"referencePoint": "top-left",
|
||||
"stopDistance": 50
|
||||
"stopDistance": "50"
|
||||
},
|
||||
{
|
||||
"type": "arrow",
|
||||
"imagePath": "images/2.png",
|
||||
"left": "922.891px",
|
||||
"top": "-79.625px",
|
||||
"left": "838.891px",
|
||||
"top": "-87.625px",
|
||||
"text": "",
|
||||
"referencePoint": "top-left",
|
||||
"stopDistance": 50
|
||||
"stopDistance": "50"
|
||||
},
|
||||
{
|
||||
"type": "arrow",
|
||||
"imagePath": "images/4.png",
|
||||
"left": "1024.7px",
|
||||
"top": "271.344px",
|
||||
"left": "960.688px",
|
||||
"top": "208.344px",
|
||||
"text": "",
|
||||
"referencePoint": "top-left",
|
||||
"stopDistance": 50
|
||||
"stopDistance": "50"
|
||||
}
|
||||
],
|
||||
"centerPoint": {
|
||||
"left": "931px",
|
||||
"top": "209px"
|
||||
"left": "871px",
|
||||
"top": "172px"
|
||||
},
|
||||
"exportTime": "2025-09-10T00:08:19.377Z"
|
||||
"exportTime": "2025-09-10T00:13:39.941Z"
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
{
|
||||
"elements": [
|
||||
{
|
||||
"type": "arrow",
|
||||
"imagePath": "images/./1.png",
|
||||
"left": "739.422px",
|
||||
"top": "315.391px",
|
||||
"text": "17集团军",
|
||||
"referencePoint": "top-left",
|
||||
"stopDistance": "110"
|
||||
},
|
||||
{
|
||||
"type": "arrow",
|
||||
"imagePath": "images/./2.png",
|
||||
"left": "1007.05px",
|
||||
"top": "-66.75px",
|
||||
"text": "第4野战军8纵",
|
||||
"referencePoint": "top-left",
|
||||
"stopDistance": "90"
|
||||
},
|
||||
{
|
||||
"type": "arrow",
|
||||
"imagePath": "images/./5.png",
|
||||
"left": "1100.61px",
|
||||
"top": "320.766px",
|
||||
"text": "第4野战军2纵",
|
||||
"referencePoint": "null",
|
||||
"stopDistance": "120"
|
||||
}
|
||||
],
|
||||
"centerPoint": {
|
||||
"left": "963px",
|
||||
"top": "237px"
|
||||
},
|
||||
"exportTime": "2025-09-09T23:53:11.571Z"
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
<title>箭头动画</title>
|
||||
<link rel="stylesheet" href="../layui/css/layui.css">
|
||||
<!--引入layui layer-->
|
||||
<script src="../js/jquery-3.6.0.min.js"></script>
|
||||
<script src="../js/jquery-3.7.1.min.js"></script>
|
||||
<script src="../layui/layui.all.js" charset="utf-8"></script>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<style>
|
||||
@@ -48,11 +48,21 @@
|
||||
<button class="save-btn" id="resetBtn" style="margin-top: 10px;">重置</button>
|
||||
<!-- 添加数据操作按钮 -->
|
||||
<div class="data-operation layui-row" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee;">
|
||||
<div class="layui-form-item" style="margin-top: 15px;">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md6">
|
||||
<button id="saveDataBtn" class="layui-btn layui-btn-normal layui-btn-fluid">保存数据</button>
|
||||
<button id="saveDataBtn" class="layui-btn layui-btn-fluid">保存数据</button>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<button id="importDataBtn" class="layui-btn layui-btn-fluid layui-btn-normal">导入数据</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加清空数据按钮 -->
|
||||
<div class="layui-row" style="margin-top: 10px;">
|
||||
<div class="layui-col-md12">
|
||||
<button id="clearDataBtn" class="layui-btn layui-btn-fluid layui-btn-danger">清空数据</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6" style="padding-left: 10px;">
|
||||
<button id="importDataBtn" class="layui-btn layui-btn-normal layui-btn-fluid">导入数据</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
2
dsLightRag/static/js/jquery-3.6.0.min.js
vendored
2
dsLightRag/static/js/jquery-3.6.0.min.js
vendored
File diff suppressed because one or more lines are too long
2
dsLightRag/static/js/jquery-3.7.1.min.js
vendored
Normal file
2
dsLightRag/static/js/jquery-3.7.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user