u
This commit is contained in:
1 parent
b7f50f3ccb
commit
11bcef03e1
8 files changed
+437
-537
No files matched your search
+1
-1
@@ -1,3 +1,3 @@
|
||||
VITE_APP_PORT = 8080
|
||||
VITE_APP_PORT = 8081
|
||||
|
||||
VITE_ALIYUN_BUCKET = 'g3hy'
|
||||
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"g3hd": "http://192.168.1.137:8085/api"
|
||||
"g3hd": "http://127.0.0.1:8085/api"
|
||||
}
|
||||
@@ -1,470 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>拖拽触发文件下载演示</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
<meta charset="UTF-8" />
|
||||
<title>数据看板</title>
|
||||
|
||||
body {
|
||||
background-color: #f5f7fa;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
padding: 20px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
<!-- Tailwind -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #e1e4e8;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 10px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #7f8c8d;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-area,
|
||||
.explanation {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.demo-area h2,
|
||||
.explanation h2 {
|
||||
color: #3498db;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.draggable-item {
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.draggable-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(106, 17, 203, 0.2);
|
||||
}
|
||||
|
||||
.draggable-item:active {
|
||||
cursor: grabbing;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.draggable-icon {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.download-hint {
|
||||
background-color: #f8f9fa;
|
||||
border-left: 4px solid #3498db;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 12px;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.85rem;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
background-color: #2c3e50;
|
||||
color: #ecf0f1;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
overflow-x: auto;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.code-keyword {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.code-string {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.code-comment {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.code-function {
|
||||
color: #9b59b6;
|
||||
}
|
||||
|
||||
.limitations {
|
||||
background-color: #fff8e1;
|
||||
border: 1px solid #ffd54f;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.limitations h3 {
|
||||
color: #f39c12;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e1e4e8;
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
margin-top: 20px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
.drag-target {
|
||||
border: 3px dashed #3498db;
|
||||
background-color: rgba(52, 152, 219, 0.05);
|
||||
}
|
||||
</style>
|
||||
<!-- ECharts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>拖拽触发文件下载演示</h1>
|
||||
<p class="subtitle">演示如何通过拖拽操作触发浏览器文件下载</p>
|
||||
</header>
|
||||
<body class="bg-gray-100">
|
||||
|
||||
<div class="container">
|
||||
<div class="demo-area">
|
||||
<h2>演示区域</h2>
|
||||
<p>将下面的元素拖拽到桌面或文件夹,会触发文件下载到浏览器的默认下载目录。</p>
|
||||
<div class="p-4">
|
||||
|
||||
<div class="draggable-item" id="draggableElement" draggable="true">
|
||||
<div class="draggable-icon">📦</div>
|
||||
<h3>拖拽我下载文件</h3>
|
||||
<p>按住鼠标左键拖拽到桌面或文件夹</p>
|
||||
</div>
|
||||
<!-- 顶部 -->
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h1 class="text-xl font-bold">数据看板</h1>
|
||||
<button id="refreshBtn"
|
||||
class="bg-blue-500 text-white px-3 py-1 rounded"
|
||||
onclick="refreshData()">
|
||||
🔄 刷新
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="download-hint">
|
||||
<p><strong>提示:</strong> 文件将下载到浏览器的默认下载目录(如"下载"文件夹),而不是直接保存到拖拽的目标位置。</p>
|
||||
</div>
|
||||
<!-- KPI -->
|
||||
<div id="kpi" class="grid grid-cols-6 gap-3 mb-4"></div>
|
||||
|
||||
<div class="file-list">
|
||||
<p><strong>可下载的文件:</strong></p>
|
||||
<div class="file-item">
|
||||
<div class="file-icon">📄</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">示例文档.txt</div>
|
||||
<div class="file-size">文本文件,约 20 字节</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-item">
|
||||
<div class="file-icon">🖼️</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">demo-image.png</div>
|
||||
<div class="file-size">图片文件,约 45 KB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-item">
|
||||
<div class="file-icon">📊</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">数据报告.pdf</div>
|
||||
<div class="file-size">PDF文档,约 120 KB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 趋势 -->
|
||||
<div class="bg-white p-4 rounded shadow mb-4">
|
||||
<div class="mb-2 font-semibold">近7天上传趋势</div>
|
||||
<div id="trend" style="height:260px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="statusMessage" class="status-message"></div>
|
||||
</div>
|
||||
<!-- 中间区域 -->
|
||||
<div class="grid grid-cols-3 gap-4 mb-4">
|
||||
|
||||
<div class="explanation">
|
||||
<h2>技术原理</h2>
|
||||
<p>这个演示通过以下步骤实现拖拽触发下载:</p>
|
||||
<ol>
|
||||
<li>为可拖拽元素添加 <code>draggable="true"</code> 属性</li>
|
||||
<li>监听 <code>dragstart</code> 事件</li>
|
||||
<li>在事件处理函数中,动态创建隐藏的下载链接</li>
|
||||
<li>设置链接的 <code>href</code> 和 <code>download</code> 属性</li>
|
||||
<li>通过 JavaScript 模拟点击链接,触发下载</li>
|
||||
</ol>
|
||||
|
||||
<div class="code-container">
|
||||
<pre><code><span class="code-comment">// 获取可拖拽元素</span>
|
||||
<span class="code-keyword">const</span> draggable = document.<span class="code-function">getElementById</span>(<span class="code-string">'draggableElement'</span>);
|
||||
|
||||
<span class="code-comment">// 监听拖拽开始事件</span>
|
||||
draggable.<span class="code-function">addEventListener</span>(<span class="code-string">'dragstart'</span>, <span class="code-keyword">function</span>(e) {
|
||||
<span class="code-comment">// 设置拖拽效果为"复制"</span>
|
||||
e.dataTransfer.effectAllowed = <span class="code-string">'copy'</span>;
|
||||
<span class="code-comment">// 设置拖拽数据(某些系统需要)</span>
|
||||
e.dataTransfer.<span class="code-function">setData</span>(<span class="code-string">'text/plain'</span>, <span class="code-string">'下载文件'</span>);
|
||||
|
||||
<span class="code-comment">// 创建隐藏的下载链接</span>
|
||||
<span class="code-keyword">const</span> link = document.<span class="code-function">createElement</span>(<span class="code-string">'a'</span>);
|
||||
|
||||
<span class="code-comment">// 可以根据需要切换不同的文件</span>
|
||||
<span class="code-keyword">const</span> fileType = <span class="code-function">getSelectedFileType</span>(); <span class="code-comment">// 假设的函数</span>
|
||||
link.href = <span class="code-function">getFileUrl</span>(fileType); <span class="code-comment">// 文件URL</span>
|
||||
link.download = <span class="code-function">getFileName</span>(fileType); <span class="code-string">// 下载的文件名</span>
|
||||
|
||||
<span class="code-comment">// 模拟点击触发下载</span>
|
||||
document.body.<span class="code-function">appendChild</span>(link);
|
||||
link.<span class="code-function">click</span>();
|
||||
document.body.<span class="code-function">removeChild</span>(link);
|
||||
|
||||
<span class="code-comment">// 显示状态消息</span>
|
||||
<span class="code-function">showStatus</span>(<span class="code-string">'下载已开始,请检查浏览器的下载列表'</span>, <span class="code-string">'success'</span>);
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 排行 -->
|
||||
<div class="bg-white p-4 rounded shadow col-span-2">
|
||||
<div class="mb-2 font-semibold">操作员上传排行</div>
|
||||
<div id="rank" style="height:260px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="limitations">
|
||||
<h3>技术限制与注意事项</h3>
|
||||
<ul>
|
||||
<li>拖拽操作实际上触发的是浏览器的标准下载流程,文件会保存到默认下载目录,而不是拖拽的目标位置</li>
|
||||
<li>某些浏览器可能对拖拽触发下载有安全限制</li>
|
||||
<li>下载行为受浏览器下载设置的影响(如下载前询问保存位置)</li>
|
||||
<li>需要服务器正确设置CORS头部(如果文件来自不同源)</li>
|
||||
<li>对于大文件,下载可能在后台进行,用户可能不会立即察觉</li>
|
||||
</ul>
|
||||
<!-- 右侧 -->
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
<!-- 最新上传 -->
|
||||
<div class="bg-white p-4 rounded shadow">
|
||||
<div class="mb-2 font-semibold">最新上传</div>
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-gray-500">
|
||||
<th>箱号</th><th>操作员</th><th>时间</th><th>数量</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 企业公告 -->
|
||||
<div class="bg-white p-4 rounded shadow">
|
||||
<div class="mb-2 font-semibold">📢 企业公告</div>
|
||||
<div id="notice" class="text-sm space-y-2 max-h-[120px] overflow-auto"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>演示:拖拽触发文件下载 | 使用 HTML、CSS 和 JavaScript 实现</p>
|
||||
<p>注意:这是一个前端技术演示,实际文件下载功能需要配合服务器端或Blob API</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const draggableElement = document.getElementById('draggableElement');
|
||||
const statusMessage = document.getElementById('statusMessage');
|
||||
<!-- 异常 -->
|
||||
<div class="bg-white p-4 rounded shadow">
|
||||
<div class="mb-2 font-semibold text-red-500">⚠️ 数据异常</div>
|
||||
<div id="warn" class="text-sm text-red-500 space-y-1"></div>
|
||||
</div>
|
||||
|
||||
// 模拟可下载的文件数据
|
||||
const files = {
|
||||
txt: {
|
||||
name: "示例文档.txt",
|
||||
content: "这是一个通过拖拽下载的示例文件。\n创建时间: " + new Date().toLocaleString(),
|
||||
type: "text/plain"
|
||||
},
|
||||
png: {
|
||||
name: "demo-image.png",
|
||||
// 这里使用一个实际存在的在线图片URL作为示例
|
||||
url: "https://via.placeholder.com/300x200/3498db/FFFFFF?text=Demo+Image",
|
||||
type: "image/png"
|
||||
},
|
||||
pdf: {
|
||||
name: "数据报告.pdf",
|
||||
// 使用一个简单的PDF数据URL作为示例(实际应用中应使用真实文件)
|
||||
content: "data:application/pdf;base64,JVBERi0xLjcNCiWhs8XXDQoxIDAgb2JqDQo8PC9QYWdlcyAyIDAgUi9UeXBlL0NhdGFsb2cvTWV0YWRhdGEgNTUgMCBSL1ZpZXdlclByZWZlcmVuY2VzIDU2IDAgUj4+DQplbmRvYmoNCjIgMCBvYmoNCjw8L0NvdW50IDEvVHlwZS9QYWdlcy9LaWRzWyAzIDAgUl0gPj4NCmVuZG9iag0KMyAwIG9iag0KPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9YT2JqZWN0PDwvSW1hZ2U1IDUgMCBSPj4vRm9udDw8L0YxIDYgMCBSPj4+Pi9NZWRpYUJveFswIDAgNTk1LjMyIDg0MS45Ml0vQ29udGVudHMgNCAwIFI+Pg0KZW5kb2JqDQo0IDAgb2JqDQo8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvTGVuZ3RoIDQ3Pj4NCnN0cmVhbQ0KeJwr5DI2UzC2NFcI5TIAQqgMhKGuMZeJoYEhl6mBCZcJF4hrymUJkgWxTCDKzLjMuUy4TKDKQKq4DADa8g6JDQplbmRzdHJlYW0NCmVuZG9iag0KNSAwIG9iag0KPDwvVHlwZS9YT2JqZWN0L1N1YnR5cGUvSW1hZ2UvV2lkdGggMzAwL0hlaWdodCAyMDAvQ29sb3JTcGFjZS9EZXZpY2VSR0IvQml0c1BlckNvbXBvbmVudCA4L0ZpbHRlci9EQ1REZWNvZGUvTGVuZ3RoIDM2OTc+Pg0Kc3RyZWFtDQr/2Q==",
|
||||
type: "application/pdf"
|
||||
}
|
||||
};
|
||||
</div>
|
||||
|
||||
// 当前选中的文件类型
|
||||
let currentFileType = 'txt';
|
||||
<script>
|
||||
// ===== 模拟数据 =====
|
||||
function getData() {
|
||||
return {
|
||||
kpi: [
|
||||
["今日箱数", rand(80,150)],
|
||||
["照片总数", rand(300,800)],
|
||||
["活跃操作员", rand(5,20)],
|
||||
["最近上传", "10:" + rand(10,59)],
|
||||
["异常箱数", rand(0,10)],
|
||||
["待处理", rand(0,5)],
|
||||
],
|
||||
trend: Array.from({length:7},()=>rand(50,150)),
|
||||
rank: Array.from({length:5},()=>rand(40,120)),
|
||||
users: ["张三","李四","王五","赵六","钱七"],
|
||||
list: [
|
||||
["MSCU1234567","张三","10:30",5],
|
||||
["TEMU7654321","李四","10:20",4],
|
||||
["CMAU9988776","王五","10:10",6],
|
||||
],
|
||||
notice: [
|
||||
"📌 今日起必须上传封条照片",
|
||||
"📌 晚班请补录遗漏数据",
|
||||
"📌 周五晚系统维护"
|
||||
],
|
||||
warn: [
|
||||
"图片少于3张:" + rand(0,5),
|
||||
"箱号为空:" + rand(0,3),
|
||||
"OCR失败:" + rand(0,3)
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
// 显示状态消息
|
||||
function showStatus(message, type) {
|
||||
statusMessage.textContent = message;
|
||||
statusMessage.className = 'status-message ' + type;
|
||||
statusMessage.style.display = 'block';
|
||||
function rand(min,max){return Math.floor(Math.random()*(max-min)+min)}
|
||||
|
||||
// 3秒后隐藏消息
|
||||
setTimeout(() => {
|
||||
statusMessage.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
// ===== 渲染 =====
|
||||
let trendChart = echarts.init(document.getElementById('trend'));
|
||||
let rankChart = echarts.init(document.getElementById('rank'));
|
||||
|
||||
// 获取文件URL
|
||||
function getFileUrl(fileType) {
|
||||
if (fileType === 'png') {
|
||||
return files.png.url;
|
||||
} else if (fileType === 'pdf') {
|
||||
return files.pdf.content; // 使用base64数据URL
|
||||
} else {
|
||||
// 为文本文件创建Blob URL
|
||||
const blob = new Blob([files.txt.content], { type: files.txt.type });
|
||||
return URL.createObjectURL(blob);
|
||||
}
|
||||
}
|
||||
function render() {
|
||||
const data = getData();
|
||||
|
||||
// 获取文件名
|
||||
function getFileName(fileType) {
|
||||
return files[fileType].name;
|
||||
}
|
||||
// KPI
|
||||
document.getElementById("kpi").innerHTML = data.kpi.map(i=>`
|
||||
<div class="bg-white p-3 rounded shadow">
|
||||
<div class="text-gray-400 text-xs">${i[0]}</div>
|
||||
<div class="text-xl font-bold mt-1">${i[1]}</div>
|
||||
</div>
|
||||
`).join("");
|
||||
|
||||
// 处理拖拽开始事件
|
||||
draggableElement.addEventListener('dragstart', function (e) {
|
||||
// 设置拖拽效果为"复制"
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('text/plain', '下载文件: ' + getFileName(currentFileType));
|
||||
// 表格
|
||||
document.getElementById("table").innerHTML = data.list.map(i=>`
|
||||
<tr class="border-t">
|
||||
<td>${i[0]}</td>
|
||||
<td>${i[1]}</td>
|
||||
<td>${i[2]}</td>
|
||||
<td>${i[3]}</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
|
||||
// 添加拖拽视觉效果
|
||||
this.classList.add('drag-target');
|
||||
// 公告
|
||||
document.getElementById("notice").innerHTML =
|
||||
data.notice.map(i=>`<div>${i}</div>`).join("");
|
||||
|
||||
// 创建隐藏的下载链接
|
||||
const link = document.createElement('a');
|
||||
link.href = getFileUrl(currentFileType);
|
||||
link.download = getFileName(currentFileType);
|
||||
// 异常
|
||||
document.getElementById("warn").innerHTML =
|
||||
data.warn.map(i=>`<div>${i}</div>`).join("");
|
||||
|
||||
// 模拟点击触发下载
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
// 趋势图
|
||||
trendChart.setOption({
|
||||
xAxis: { type: 'category', data: ['一','二','三','四','五','六','日'] },
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
data: data.trend,
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}]
|
||||
});
|
||||
|
||||
// 显示成功消息
|
||||
showStatus(`"${getFileName(currentFileType)}" 下载已开始,请检查浏览器的下载列表`, 'success');
|
||||
// 排行
|
||||
rankChart.setOption({
|
||||
xAxis: { type: 'category', data: data.users },
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
data: data.rank,
|
||||
type: 'bar'
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
// 如果是文本文件,需要释放Blob URL
|
||||
if (currentFileType === 'txt') {
|
||||
setTimeout(() => URL.revokeObjectURL(link.href), 100);
|
||||
}
|
||||
// ===== 刷新 =====
|
||||
function refreshData() {
|
||||
const btn = document.getElementById("refreshBtn");
|
||||
btn.innerText = "刷新中...";
|
||||
btn.disabled = true;
|
||||
|
||||
// 循环切换文件类型(用于演示多种文件)
|
||||
if (currentFileType === 'txt') {
|
||||
currentFileType = 'png';
|
||||
} else if (currentFileType === 'png') {
|
||||
currentFileType = 'pdf';
|
||||
} else {
|
||||
currentFileType = 'txt';
|
||||
}
|
||||
setTimeout(()=>{
|
||||
render();
|
||||
btn.innerText = "🔄 刷新";
|
||||
btn.disabled = false;
|
||||
}, 800);
|
||||
}
|
||||
|
||||
// 更新拖拽元素的提示文本
|
||||
updateDraggableText();
|
||||
});
|
||||
render();
|
||||
</script>
|
||||
|
||||
// 拖拽结束事件
|
||||
draggableElement.addEventListener('dragend', function () {
|
||||
this.classList.remove('drag-target');
|
||||
});
|
||||
|
||||
// 更新拖拽元素的提示文本
|
||||
function updateDraggableText() {
|
||||
const fileTypeNames = {
|
||||
'txt': '文本文件',
|
||||
'png': '图片文件',
|
||||
'pdf': 'PDF文档'
|
||||
};
|
||||
|
||||
const fileTypeElement = draggableElement.querySelector('p');
|
||||
if (fileTypeElement) {
|
||||
fileTypeElement.textContent = `下次拖拽将下载: ${getFileName(currentFileType)} (${fileTypeNames[currentFileType]})`;
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化文本
|
||||
updateDraggableText();
|
||||
|
||||
// 添加文件类型选择功能
|
||||
const fileItems = document.querySelectorAll('.file-item');
|
||||
fileItems.forEach((item, index) => {
|
||||
item.addEventListener('click', function () {
|
||||
const types = ['txt', 'png', 'pdf'];
|
||||
currentFileType = types[index];
|
||||
updateDraggableText();
|
||||
|
||||
// 高亮显示选中的文件
|
||||
fileItems.forEach(el => el.style.backgroundColor = '#f8f9fa');
|
||||
this.style.backgroundColor = '#e3f2fd';
|
||||
|
||||
showStatus(`已选择 "${getFileName(currentFileType)}",现在可以拖拽下载`, 'success');
|
||||
});
|
||||
});
|
||||
|
||||
// 默认选中第一个文件
|
||||
if (fileItems.length > 0) {
|
||||
fileItems[0].style.backgroundColor = '#e3f2fd';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+4
@@ -13,6 +13,7 @@ declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
Directory: typeof import('./src/components/wang-editor/modules/directory.vue')['default']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
@@ -27,9 +28,12 @@ declare module 'vue' {
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElPopover: typeof import('element-plus/es')['ElPopover']
|
||||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||
ElSplitter: typeof import('element-plus/es')['ElSplitter']
|
||||
ElSplitterPanel: typeof import('element-plus/es')['ElSplitterPanel']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElTree: typeof import('element-plus/es')['ElTree']
|
||||
G3Column: typeof import('./src/components/g3-table/g3-column.vue')['default']
|
||||
|
||||
@@ -19,3 +19,14 @@
|
||||
.el-button--large {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
&.is-fullscreen {
|
||||
.el-loading-spinner .path {
|
||||
stroke: #fff !important;
|
||||
}
|
||||
.el-loading-text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -287,7 +287,6 @@ export function getAliyunFileBlob(url) {
|
||||
|
||||
// 检查响应状态
|
||||
if (!response.ok) {
|
||||
ElMessage.error(`下载失败:${response.status}`);
|
||||
reject(new Error(`下载失败:${response.status}`));
|
||||
return;
|
||||
}
|
||||
@@ -298,8 +297,6 @@ export function getAliyunFileBlob(url) {
|
||||
// 返回blob
|
||||
resolve(blob);
|
||||
} catch (error) {
|
||||
// 捕获网络请求失败或其他错误
|
||||
ElMessage.error("下载文件时发生错误");
|
||||
reject(error);
|
||||
}
|
||||
}
|
||||
@@ -311,27 +308,26 @@ export function getAliyunFileBlob(url) {
|
||||
|
||||
export function downloadZip(files, fileName = "文件合集", callback) {
|
||||
const zip = new JSZip();
|
||||
const addedFiles = new Set(); // 用来存储已添加的文件名
|
||||
const addedFiles = new Set();
|
||||
|
||||
let result = files.map((item) => {
|
||||
let promise = getAliyunFileBlob(item.mx_mapfilename).then((res) => {
|
||||
// 处理文件名重复的情况
|
||||
let uniqueFileName = getUniqueFileName(item.mx_filename, addedFiles);
|
||||
const tasks = files.map((item) => {
|
||||
return getAliyunFileBlob(item.mx_mapfilename).then((res) => {
|
||||
const uniqueFileName = getUniqueFileName(item.mx_filename, addedFiles);
|
||||
zip.file(uniqueFileName, res, { binary: true });
|
||||
addedFiles.add(uniqueFileName); // 添加文件名到已添加的集合中
|
||||
addedFiles.add(uniqueFileName);
|
||||
});
|
||||
return promise;
|
||||
});
|
||||
|
||||
Promise.all(result)
|
||||
.then(() => {
|
||||
zip.generateAsync({ type: "blob" }).then((res) => {
|
||||
callback && callback();
|
||||
saveAs(res, `${fileName}.zip`);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// ✅ 关键:return
|
||||
return Promise.all(tasks)
|
||||
.then(() => zip.generateAsync({ type: "blob" }))
|
||||
.then((res) => {
|
||||
saveAs(res, `${fileName}.zip`);
|
||||
callback && callback();
|
||||
})
|
||||
.catch((err) => {
|
||||
callback && callback();
|
||||
throw err; // ✅ 继续往外抛
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,11 @@ import {
|
||||
} from "@/request/api";
|
||||
import { getAlignByFormat, formatValueByFormat } from "@/utils/columns";
|
||||
import { updateViewTableColumns } from "@/utils/columns";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { downloadZip } from "@/utils/file";
|
||||
import { formatToDate } from "@/utils/time";
|
||||
import { ElLoading, ElMessage } from "element-plus";
|
||||
import { saveAs } from "file-saver";
|
||||
import JSZip from "jszip";
|
||||
|
||||
const tableRef = ref();
|
||||
|
||||
@@ -49,7 +53,9 @@ const viewName = "v_container";
|
||||
const showPreview = ref(false);
|
||||
const previewIndex = ref(-1);
|
||||
const previewImageList = computed(() => {
|
||||
return tableData.value.map((item) => item.b_container_img).filter((img) => img);
|
||||
return tableData.value
|
||||
.map((item) => item.b_container_img)
|
||||
.filter((img) => img);
|
||||
});
|
||||
|
||||
const currentRow = ref({});
|
||||
@@ -172,38 +178,53 @@ async function deleteRows(rows = []) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 确保 deleteIds 数组中的值是数字,防止 SQL 注入
|
||||
const safeDeleteIds = deleteIds.map((id) => Number(id));
|
||||
|
||||
// 使用安全的 SQL 查询
|
||||
const fileRes = await loadDataApi("bf_file", `father IN (${safeDeleteIds.join(",")})`, "", [
|
||||
"subid",
|
||||
]);
|
||||
|
||||
if (!fileRes.success) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (const file of fileRes.data) {
|
||||
await deleteFileApi(file.subid);
|
||||
}
|
||||
|
||||
const requestData = [
|
||||
{
|
||||
tableName: "b_container",
|
||||
keyField: "b_id",
|
||||
inserts: [],
|
||||
updates: [],
|
||||
deletes: deleteIds.map((id) => ({ b_id: id })),
|
||||
},
|
||||
];
|
||||
|
||||
await saveObjectApi(requestData).then((res) => {
|
||||
if (res.success) {
|
||||
ElMessage.success("删除成功");
|
||||
loadTableDatas();
|
||||
}
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: "正在删除中...",
|
||||
});
|
||||
|
||||
try {
|
||||
// 确保 deleteIds 数组中的值是数字,防止 SQL 注入
|
||||
const safeDeleteIds = deleteIds.map((id) => Number(id));
|
||||
|
||||
// 使用安全的 SQL 查询
|
||||
const fileRes = await loadDataApi(
|
||||
"bf_file",
|
||||
`father IN (${safeDeleteIds.join(",")})`,
|
||||
"",
|
||||
["subid"],
|
||||
);
|
||||
|
||||
if (!fileRes.success) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (const file of fileRes.data) {
|
||||
await deleteFileApi(file.subid);
|
||||
}
|
||||
|
||||
const requestData = [
|
||||
{
|
||||
tableName: "b_container",
|
||||
keyField: "b_id",
|
||||
inserts: [],
|
||||
updates: [],
|
||||
deletes: deleteIds.map((id) => ({ b_id: id })),
|
||||
},
|
||||
];
|
||||
|
||||
await saveObjectApi(requestData).then((res) => {
|
||||
if (res.success) {
|
||||
ElMessage.success("删除成功");
|
||||
loadTableDatas();
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
ElMessage.error("删除失败");
|
||||
console.log(err);
|
||||
} finally {
|
||||
loading.close();
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
@@ -241,9 +262,167 @@ function handleFileShow(data) {
|
||||
showFile.value = true;
|
||||
}
|
||||
|
||||
function handleDownloadOne(data) {
|
||||
console.log(data);
|
||||
// 获取
|
||||
async function handleDownloadOne(data) {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: "正在下载并打包文件,请稍候...",
|
||||
});
|
||||
|
||||
try {
|
||||
const fileRes = await loadDataApi(
|
||||
"bf_file",
|
||||
`father = '${data.b_id}'`,
|
||||
"mx_xh asc",
|
||||
);
|
||||
|
||||
if (!fileRes.success) {
|
||||
ElMessage.error("获取附件失败");
|
||||
return;
|
||||
}
|
||||
|
||||
const downloadFiles = fileRes.data.map((item, index) => ({
|
||||
mx_filename: buildFileName(
|
||||
data.b_container_no,
|
||||
index + 1,
|
||||
item.mx_filename,
|
||||
),
|
||||
mx_mapfilename: item.mx_mapfilename,
|
||||
}));
|
||||
|
||||
await downloadZip(
|
||||
downloadFiles,
|
||||
`${data.b_container_no}_${formatToDate(data.b_inputdatetime)}`,
|
||||
);
|
||||
|
||||
ElMessage.success("下载完成");
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
ElMessage.error("下载失败");
|
||||
} finally {
|
||||
loading.close();
|
||||
}
|
||||
}
|
||||
|
||||
async function runWithLimit(tasks, limit = 3) {
|
||||
const results = [];
|
||||
const executing = [];
|
||||
|
||||
for (const task of tasks) {
|
||||
const p = task().then((res) => {
|
||||
executing.splice(executing.indexOf(p), 1);
|
||||
return res;
|
||||
});
|
||||
|
||||
results.push(p);
|
||||
executing.push(p);
|
||||
|
||||
if (executing.length >= limit) {
|
||||
await Promise.race(executing);
|
||||
}
|
||||
}
|
||||
|
||||
return Promise.all(results);
|
||||
}
|
||||
|
||||
async function handleDownloadBatch() {
|
||||
const $table = tableRef.value;
|
||||
if (!$table) return;
|
||||
|
||||
const records = $table.getCheckboxRecords();
|
||||
|
||||
if (records.length === 0) {
|
||||
ElMessage.warning("请选择需要下载的数据");
|
||||
return;
|
||||
}
|
||||
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: "正在下载并打包文件,请稍候...",
|
||||
});
|
||||
|
||||
const zip = new JSZip();
|
||||
|
||||
try {
|
||||
let total = 0;
|
||||
let finished = 0;
|
||||
|
||||
// 👉 先统计总文件数(用于进度)
|
||||
for (const item of records) {
|
||||
const fileRes = await loadDataApi(
|
||||
"bf_file",
|
||||
`father = '${item.b_id}'`,
|
||||
"",
|
||||
);
|
||||
if (fileRes.success) {
|
||||
total += (fileRes.data || []).length;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 正式处理
|
||||
for (const item of records) {
|
||||
const folderName = `${item.b_container_no}_${formatToDate(
|
||||
item.b_inputdatetime,
|
||||
)}`;
|
||||
|
||||
const folder = zip.folder(folderName);
|
||||
|
||||
const fileRes = await loadDataApi(
|
||||
"bf_file",
|
||||
`father = '${item.b_id}'`,
|
||||
"mx_xh asc",
|
||||
);
|
||||
|
||||
if (!fileRes.success) {
|
||||
ElMessage.error("获取附件失败");
|
||||
continue;
|
||||
}
|
||||
|
||||
const files = fileRes.data || [];
|
||||
|
||||
const tasks = files.map((file, index) => async () => {
|
||||
const fileUrl = file.mx_mapfilename;
|
||||
|
||||
try {
|
||||
const res = await fetch(fileUrl);
|
||||
const blob = await res.blob();
|
||||
|
||||
const fileName =
|
||||
buildFileName(item.b_container_no, index + 1, file.mx_filename) ||
|
||||
"未命名文件";
|
||||
|
||||
folder.file(fileName, blob);
|
||||
} catch (e) {
|
||||
ElMessage.error(item.b_container_no + "箱号部分图片下载失败");
|
||||
console.error("下载失败:", fileUrl);
|
||||
} finally {
|
||||
finished++;
|
||||
loading.setText(`正在下载 ${finished}/${total} 个文件...`);
|
||||
}
|
||||
});
|
||||
|
||||
// 控制并发数
|
||||
await runWithLimit(tasks, 3);
|
||||
}
|
||||
|
||||
// 👉 生成 zip
|
||||
loading.setText("正在生成压缩包...");
|
||||
const content = await zip.generateAsync({ type: "blob" });
|
||||
|
||||
saveAs(content, "批量下载.zip");
|
||||
|
||||
ElMessage.success("下载完成");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
ElMessage.error("打包失败");
|
||||
} finally {
|
||||
loading.close();
|
||||
}
|
||||
}
|
||||
|
||||
function buildFileName(containerNo, index, fileName) {
|
||||
const formattedIndex = String(index).padStart(2, "0");
|
||||
|
||||
return `${containerNo}_${formattedIndex}.${fileName.split(".").pop()}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -299,7 +478,7 @@ function handleDownloadOne(data) {
|
||||
<div class="g3-content">
|
||||
<div class="content-top">
|
||||
<div>
|
||||
<el-button type="primary">
|
||||
<el-button type="primary" @click="handleDownloadBatch">
|
||||
<el-icon class="el-icon--left">
|
||||
<G3Icon icon="lucide:cloud-download" />
|
||||
</el-icon>
|
||||
@@ -368,7 +547,14 @@ function handleDownloadOne(data) {
|
||||
}"
|
||||
height="100%"
|
||||
>
|
||||
<vxe-column field="seq" type="seq" width="50" align="center" title=" " fixed="left" />
|
||||
<vxe-column
|
||||
field="seq"
|
||||
type="seq"
|
||||
width="50"
|
||||
align="center"
|
||||
title=" "
|
||||
fixed="left"
|
||||
/>
|
||||
<vxe-column type="checkbox" width="50" align="center" fixed="left" />
|
||||
<vxe-column
|
||||
v-for="column in columns"
|
||||
@@ -389,7 +575,12 @@ function handleDownloadOne(data) {
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatValueByFormat(row[column.col_FieldName], column.col_DisplayFormat) }}
|
||||
{{
|
||||
formatValueByFormat(
|
||||
row[column.col_FieldName],
|
||||
column.col_DisplayFormat,
|
||||
)
|
||||
}}
|
||||
</template>
|
||||
</template>
|
||||
</vxe-column>
|
||||
|
||||
@@ -1,49 +1,30 @@
|
||||
<script setup lang="js">
|
||||
const value = ref("");
|
||||
import { saveAs } from "file-saver";
|
||||
import JSZip from "jszip";
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: "Option1",
|
||||
label: "Option1",
|
||||
},
|
||||
{
|
||||
value: "Option2",
|
||||
label: "Option2",
|
||||
},
|
||||
{
|
||||
value: "Option3",
|
||||
label: "Option3",
|
||||
},
|
||||
{
|
||||
value: "Option4",
|
||||
label: "Option4",
|
||||
},
|
||||
{
|
||||
value: "Option5",
|
||||
label: "Option5",
|
||||
},
|
||||
// 假设这些是文件数据和它们的路径
|
||||
const files = [
|
||||
{ name: "file1.txt", folder: "folder1", content: "This is file 1 content" },
|
||||
{ name: "file2.txt", folder: "folder2", content: "This is file 2 content" },
|
||||
{ name: "file3.txt", folder: "folder1", content: "This is file 3 content" },
|
||||
{ name: "file4.txt", folder: "folder3", content: "This is file 4 content" },
|
||||
];
|
||||
|
||||
async function createZip() {
|
||||
const zip = new JSZip();
|
||||
|
||||
// 遍历文件列表,将文件按文件夹添加到 ZIP 文件中
|
||||
files.forEach((file) => {
|
||||
// 创建文件夹并将文件添加到对应的文件夹下
|
||||
zip.folder(file.folder).file(file.name, file.content);
|
||||
});
|
||||
|
||||
// 生成并下载 ZIP 文件
|
||||
const content = await zip.generateAsync({ type: "blob" });
|
||||
saveAs(content, "files.zip");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Grid direction="row">
|
||||
<G3GridGroup :label-width="80" :width="440" :column="2">
|
||||
<G3GridItem label="1222222222222222222222222" content="2" :span="1" required>
|
||||
<el-input type="textarea" v-model="value" />
|
||||
</G3GridItem>
|
||||
|
||||
<G3GridItem label="3" :span="1">
|
||||
<el-input />
|
||||
</G3GridItem>
|
||||
</G3GridGroup>
|
||||
<G3GridGroup :label-width="80" :width="440" :column="2">
|
||||
<G3GridItem label="1222222222222222222222222" content="2" :span="1" required>
|
||||
<el-input type="textarea" v-model="value" />
|
||||
</G3GridItem>
|
||||
|
||||
<G3GridItem label="3" :span="1">
|
||||
<el-input />
|
||||
</G3GridItem>
|
||||
</G3GridGroup>
|
||||
</G3Grid>
|
||||
<el-button @click="createZip">测试</el-button>
|
||||
</template>
|
||||
Reference in new issue
Block a user