'commit'
This commit is contained in:
Binary file not shown.
@@ -412,81 +412,76 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
contextMenu.addEventListener('click', function(e) {
|
contextMenu.addEventListener('click', function(e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
});
|
});
|
||||||
// 替换原导入按钮事件为文件选择模式
|
// 替换原导入按钮事件为直接加载指定JSON文件
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// 导入数据按钮事件 - 全新实现
|
// 导入数据按钮事件 - 直接加载指定文件版
|
||||||
const importDataBtn = document.getElementById('importDataBtn');
|
const importDataBtn = document.getElementById('importDataBtn');
|
||||||
if (importDataBtn) {
|
if (!importDataBtn) {
|
||||||
importDataBtn.addEventListener('click', function() {
|
alert('错误:未找到导入按钮元素!');
|
||||||
// 创建隐藏的文件选择输入
|
console.error('导入按钮元素不存在');
|
||||||
const fileInput = document.createElement('input');
|
return;
|
||||||
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);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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文件并下载
|
// 保存数据到JSON文件并下载
|
||||||
function saveDataToFile() {
|
function saveDataToFile() {
|
||||||
// 获取所有箭头元素数据
|
// 获取所有箭头元素数据 - 完全匹配localStorage格式
|
||||||
const arrows = document.querySelectorAll('.arrow-container');
|
const arrows = document.querySelectorAll('.arrow-container');
|
||||||
const elements = Array.from(arrows).map(arrow => ({
|
const elements = Array.from(arrows).map(arrow => ({
|
||||||
|
type: 'arrow', // 添加缺失的type字段
|
||||||
imagePath: arrow.dataset.imagePath,
|
imagePath: arrow.dataset.imagePath,
|
||||||
left: arrow.style.left,
|
left: arrow.style.left, // 保留px单位和字符串类型
|
||||||
top: arrow.style.top,
|
top: arrow.style.top, // 保留px单位和字符串类型
|
||||||
text: arrow.dataset.text || '',
|
text: arrow.dataset.text || '',
|
||||||
referencePoint: arrow.dataset.referencePoint || 'top-left',
|
referencePoint: arrow.dataset.referencePoint || 'top-left',
|
||||||
stopDistance: parseInt(arrow.dataset.stopDistance) || 50
|
stopDistance: arrow.dataset.stopDistance || '50' // 保留字符串类型
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// 获取中心点数据
|
// 获取中心点数据 - 保留px单位和字符串类型
|
||||||
const centerPoint = centerDot ? {
|
const centerPoint = centerDot ? {
|
||||||
left: centerDot.style.left,
|
left: centerDot.style.left,
|
||||||
top: centerDot.style.top
|
top: centerDot.style.top
|
||||||
@@ -500,12 +495,10 @@ function saveDataToFile() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// 生成JSON字符串,确保正确处理特殊字符
|
|
||||||
const jsonData = JSON.stringify(exportData, null, 2);
|
const jsonData = JSON.stringify(exportData, null, 2);
|
||||||
const blob = new Blob([jsonData], { type: 'application/json;charset=utf-8' });
|
const blob = new Blob([jsonData], { type: 'application/json;charset=utf-8' });
|
||||||
const url = URL.createObjectURL(blob);
|
const url = URL.createObjectURL(blob);
|
||||||
|
|
||||||
// 创建下载链接
|
|
||||||
const a = document.createElement('a');
|
const a = document.createElement('a');
|
||||||
a.href = url;
|
a.href = url;
|
||||||
const dateStr = new Date().toISOString().slice(0, 10);
|
const dateStr = new Date().toISOString().slice(0, 10);
|
||||||
@@ -513,13 +506,13 @@ function saveDataToFile() {
|
|||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
|
|
||||||
// 清理
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.body.removeChild(a);
|
document.body.removeChild(a);
|
||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
}, 0);
|
}, 0);
|
||||||
|
|
||||||
console.log('数据已成功导出');
|
console.log('数据已成功导出');
|
||||||
|
layer.msg('数据导出成功', {icon: 1});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('导出数据失败:', error);
|
console.error('导出数据失败:', error);
|
||||||
layer.msg('导出失败: ' + error.message, {icon: 2});
|
layer.msg('导出失败: ' + error.message, {icon: 2});
|
||||||
@@ -528,3 +521,49 @@ 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);
|
||||||
|
}
|
||||||
|
});
|
@@ -1,33 +1,36 @@
|
|||||||
{
|
{
|
||||||
"elements": [
|
"elements": [
|
||||||
{
|
{
|
||||||
|
"type": "arrow",
|
||||||
"imagePath": "images/1.png",
|
"imagePath": "images/1.png",
|
||||||
"left": "687.469px",
|
"left": "645.469px",
|
||||||
"top": "259.891px",
|
"top": "210.891px",
|
||||||
"text": "",
|
"text": "",
|
||||||
"referencePoint": "top-left",
|
"referencePoint": "top-left",
|
||||||
"stopDistance": 50
|
"stopDistance": "50"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
"type": "arrow",
|
||||||
"imagePath": "images/2.png",
|
"imagePath": "images/2.png",
|
||||||
"left": "922.891px",
|
"left": "838.891px",
|
||||||
"top": "-79.625px",
|
"top": "-87.625px",
|
||||||
"text": "",
|
"text": "",
|
||||||
"referencePoint": "top-left",
|
"referencePoint": "top-left",
|
||||||
"stopDistance": 50
|
"stopDistance": "50"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
"type": "arrow",
|
||||||
"imagePath": "images/4.png",
|
"imagePath": "images/4.png",
|
||||||
"left": "1024.7px",
|
"left": "960.688px",
|
||||||
"top": "271.344px",
|
"top": "208.344px",
|
||||||
"text": "",
|
"text": "",
|
||||||
"referencePoint": "top-left",
|
"referencePoint": "top-left",
|
||||||
"stopDistance": 50
|
"stopDistance": "50"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"centerPoint": {
|
"centerPoint": {
|
||||||
"left": "931px",
|
"left": "871px",
|
||||||
"top": "209px"
|
"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>
|
<title>箭头动画</title>
|
||||||
<link rel="stylesheet" href="../layui/css/layui.css">
|
<link rel="stylesheet" href="../layui/css/layui.css">
|
||||||
<!--引入layui layer-->
|
<!--引入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>
|
<script src="../layui/layui.all.js" charset="utf-8"></script>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<style>
|
<style>
|
||||||
@@ -48,11 +48,21 @@
|
|||||||
<button class="save-btn" id="resetBtn" style="margin-top: 10px;">重置</button>
|
<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="data-operation layui-row" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee;">
|
||||||
<div class="layui-col-md6">
|
<div class="layui-form-item" style="margin-top: 15px;">
|
||||||
<button id="saveDataBtn" class="layui-btn layui-btn-normal layui-btn-fluid">保存数据</button>
|
<div class="layui-row">
|
||||||
</div>
|
<div class="layui-col-md6">
|
||||||
<div class="layui-col-md6" style="padding-left: 10px;">
|
<button id="saveDataBtn" class="layui-btn layui-btn-fluid">保存数据</button>
|
||||||
<button id="importDataBtn" class="layui-btn layui-btn-normal 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>
|
</div>
|
||||||
</div>
|
</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