Files
workspace/code/container-ocr/ocr-vue/test.html
T
2026-03-27 17:22:22 +08:00

1087 lines
33 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件管理系统 - 按年月日与集装箱号组织</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
header {
background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
color: white;
padding: 20px 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 28px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 12px;
}
h1 i {
color: #ffd166;
}
.subtitle {
font-size: 16px;
opacity: 0.9;
font-weight: 300;
}
.main-content {
display: flex;
gap: 20px;
}
.tree-panel {
flex: 1;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
padding: 20px;
overflow: auto;
max-height: 700px;
}
.details-panel {
flex: 1.5;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
padding: 20px;
}
.panel-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
display: flex;
align-items: center;
gap: 10px;
color: #2d3748;
}
.panel-title i {
color: #4b6cb7;
}
/* 树形结构样式 */
.tree {
list-style: none;
padding-left: 0;
}
.tree-item {
margin-bottom: 5px;
}
.tree-node {
padding: 10px 15px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: space-between;
}
.tree-node:hover {
background-color: #f8f9fa;
}
.tree-node.active {
background-color: #e8f4ff;
border-left: 4px solid #4b6cb7;
}
.node-content {
display: flex;
align-items: center;
gap: 10px;
}
.node-icon {
color: #4b6cb7;
width: 20px;
text-align: center;
}
.node-label {
font-weight: 500;
}
.node-count {
background-color: #e2e8f0;
color: #4a5568;
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
}
.tree-children {
list-style: none;
padding-left: 30px;
margin-top: 5px;
display: none;
}
.tree-children.expanded {
display: block;
}
.expand-btn {
background: none;
border: none;
color: #718096;
cursor: pointer;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
}
.expand-btn.expanded {
transform: rotate(90deg);
}
/* 搜索和操作区域 */
.controls {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.search-box {
flex: 1;
position: relative;
}
.search-box input {
width: 100%;
padding: 12px 15px 12px 45px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 15px;
transition: all 0.3s;
}
.search-box input:focus {
outline: none;
border-color: #4b6cb7;
box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.1);
}
.search-box i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
}
.btn {
padding: 12px 20px;
background-color: #4b6cb7;
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.btn:hover {
background-color: #3a5795;
transform: translateY(-2px);
}
.btn-secondary {
background-color: #e2e8f0;
color: #4a5568;
}
.btn-secondary:hover {
background-color: #cbd5e0;
}
/* 详细信息面板样式 */
.details-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.current-path {
background-color: #f8f9fa;
padding: 15px;
border-radius: 8px;
font-size: 15px;
color: #4a5568;
border-left: 4px solid #4b6cb7;
}
.path-item {
font-weight: 600;
color: #2d3748;
}
.container-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.container-card {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
transition: all 0.3s;
}
.container-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.card-header {
background-color: #f8f9fa;
padding: 15px;
border-bottom: 1px solid #e2e8f0;
}
.container-id {
font-size: 18px;
font-weight: 700;
color: #2d3748;
margin-bottom: 5px;
}
.container-type {
display: inline-block;
background-color: #4b6cb7;
color: white;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.card-body {
padding: 15px;
}
.card-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed #f0f0f0;
}
.card-row:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.card-label {
color: #718096;
font-size: 14px;
}
.card-value {
color: #2d3748;
font-weight: 500;
}
.card-footer {
padding: 12px 15px;
background-color: #f8f9fa;
border-top: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
}
.card-action {
color: #4b6cb7;
cursor: pointer;
transition: all 0.2s;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
}
.card-action:hover {
color: #3a5795;
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: #a0aec0;
}
.empty-state i {
font-size: 48px;
margin-bottom: 15px;
color: #e2e8f0;
}
footer {
text-align: center;
padding: 20px;
color: #718096;
font-size: 14px;
border-top: 1px solid #e2e8f0;
margin-top: 20px;
}
/* 响应式设计 */
@media (max-width: 1024px) {
.main-content {
flex-direction: column;
}
.tree-panel,
.details-panel {
width: 100%;
}
}
@media (max-width: 768px) {
.container-cards {
grid-template-columns: 1fr;
}
.controls {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-archive"></i> 集装箱文件管理系统</h1>
<p class="subtitle">按年/月/日/集装箱号层级组织文件,直观浏览和管理您的集装箱数据</p>
</header>
<div class="controls">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="searchInput" placeholder="搜索集装箱号、日期或其他信息...">
</div>
<button class="btn" id="addYearBtn">
<i class="fas fa-plus"></i> 添加年份
</button>
<button class="btn btn-secondary" id="refreshBtn">
<i class="fas fa-redo"></i> 刷新
</button>
</div>
<div class="main-content">
<div class="tree-panel">
<h2 class="panel-title"><i class="fas fa-sitemap"></i> 文件夹结构</h2>
<div class="tree-container">
<ul class="tree" id="treeView"></ul>
</div>
</div>
<div class="details-panel">
<h2 class="panel-title"><i class="fas fa-info-circle"></i> 详细信息</h2>
<div class="details-content">
<div class="current-path" id="currentPath">
当前路径: <span class="path-item">根目录</span>
</div>
<div class="container-cards" id="containerCards">
<!-- 集装箱卡片将在这里动态生成 -->
</div>
<div class="empty-state" id="emptyState">
<i class="fas fa-box-open"></i>
<h3>暂无数据</h3>
<p>请从左侧树形结构中选择一个日期节点查看集装箱信息</p>
</div>
</div>
</div>
</div>
<footer>
<p>集装箱文件管理系统 &copy; 2026 | 按年/月/日/集装箱号组织 | 当前时间: <span id="currentTime"></span></p>
</footer>
</div>
<script>
// 模拟数据
const mockData = {
years: [
{
year: "2026",
months: [
{
month: "03",
days: [
{
day: "27",
containers: [
{ id: "TGBU1234567", type: "标准箱", size: "20英尺", status: "在港", weight: "22.5吨" },
{ id: "CMAU8901234", type: "高柜箱", size: "40英尺", status: "在途", weight: "30.2吨" },
{ id: "APHU5678901", type: "冷藏箱", size: "40英尺", status: "在港", weight: "28.7吨" }
]
},
{
day: "26",
containers: [
{ id: "MSCU2345678", type: "标准箱", size: "20英尺", status: "离港", weight: "21.8吨" },
{ id: "SEGU3456789", type: "开顶箱", size: "40英尺", status: "在港", weight: "25.3吨" }
]
},
{
day: "25",
containers: [
{ id: "HLCU4567890", type: "平板箱", size: "40英尺", status: "在途", weight: "26.1吨" }
]
}
]
},
{
month: "02",
days: [
{
day: "16",
containers: [
{ id: "MAEU1234567", type: "标准箱", size: "20英尺", status: "离港", weight: "22.0吨" },
{ id: "OOLU2345678", type: "高柜箱", size: "40英尺", status: "离港", weight: "29.8吨" }
]
}
]
}
]
},
{
year: "2025",
months: [
{
month: "12",
days: [
{
day: "31",
containers: [
{ id: "HMMU3456789", type: "冷藏箱", size: "40英尺", status: "离港", weight: "27.5吨" },
{ id: "YMLU4567890", type: "标准箱", size: "20英尺", status: "离港", weight: "21.3吨" }
]
}
]
}
]
}
]
};
// 当前选中的路径
let currentPath = {
year: null,
month: null,
day: null
};
// 初始化应用
$(document).ready(function () {
initTreeView();
updateCurrentPath();
updateTime();
// 设置定时器,每秒钟更新时间
setInterval(updateTime, 1000);
// 搜索功能
$('#searchInput').on('input', function () {
const searchTerm = $(this).val().toLowerCase();
if (searchTerm.length > 0) {
filterContainers(searchTerm);
} else {
// 如果清空搜索框,显示当前选中的日期下的集装箱
if (currentPath.day) {
showContainersForDay(currentPath.year, currentPath.month, currentPath.day);
} else {
$('#containerCards').html('');
$('#emptyState').show();
}
}
});
// 添加年份按钮
$('#addYearBtn').click(function () {
const newYear = prompt("请输入要添加的年份(例如:2027):");
if (newYear && /^\d{4}$/.test(newYear)) {
addYear(newYear);
} else if (newYear) {
alert("年份格式不正确,请输入4位数字!");
}
});
// 刷新按钮
$('#refreshBtn').click(function () {
initTreeView();
$('#searchInput').val('');
if (currentPath.day) {
showContainersForDay(currentPath.year, currentPath.month, currentPath.day);
} else {
$('#containerCards').html('');
$('#emptyState').show();
}
showMessage("数据已刷新");
});
});
// 初始化树形视图
function initTreeView() {
const $tree = $('#treeView');
$tree.empty();
// 遍历年份
mockData.years.forEach(yearData => {
const yearId = `year-${yearData.year}`;
const $yearItem = $(`
<li class="tree-item">
<div class="tree-node" data-type="year" data-value="${yearData.year}">
<div class="node-content">
<button class="expand-btn"><i class="fas fa-chevron-right"></i></button>
<i class="node-icon fas fa-folder"></i>
<span class="node-label">${yearData.year}年</span>
<span class="node-count">${yearData.months.length}个月</span>
</div>
</div>
<ul class="tree-children" id="${yearId}"></ul>
</li>
`);
$tree.append($yearItem);
// 遍历月份
yearData.months.forEach(monthData => {
const monthId = `month-${yearData.year}-${monthData.month}`;
const $monthItem = $(`
<li class="tree-item">
<div class="tree-node" data-type="month" data-year="${yearData.year}" data-value="${monthData.month}">
<div class="node-content">
<button class="expand-btn"><i class="fas fa-chevron-right"></i></button>
<i class="node-icon fas fa-folder"></i>
<span class="node-label">${monthData.month}月</span>
<span class="node-count">${monthData.days.length}天</span>
</div>
</div>
<ul class="tree-children" id="${monthId}"></ul>
</li>
`);
$(`#${yearId}`).append($monthItem);
// 遍历日期
monthData.days.forEach(dayData => {
const dayId = `day-${yearData.year}-${monthData.month}-${dayData.day}`;
const $dayItem = $(`
<li class="tree-item">
<div class="tree-node" data-type="day" data-year="${yearData.year}" data-month="${monthData.month}" data-value="${dayData.day}">
<div class="node-content">
<i class="node-icon fas fa-calendar-day"></i>
<span class="node-label">${dayData.day}日</span>
<span class="node-count">${dayData.containers.length}个集装箱</span>
</div>
</div>
</li>
`);
$(`#${monthId}`).append($dayItem);
});
});
});
// 绑定树形节点点击事件
bindTreeEvents();
}
// 绑定树形节点事件
function bindTreeEvents() {
// 展开/折叠按钮点击事件
$('.tree-node').off('click').on('click', function (e) {
e.stopPropagation();
const $this = $(this);
const type = $this.data('type');
const value = $this.data('value');
// 移除所有节点的激活状态
$('.tree-node').removeClass('active');
// 为当前节点添加激活状态
$this.addClass('active');
if (type === 'year') {
const $children = $this.siblings('.tree-children');
const $expandBtn = $this.find('.expand-btn');
$children.toggleClass('expanded');
$expandBtn.toggleClass('expanded');
// 更新当前路径
currentPath = { year: value, month: null, day: null };
updateCurrentPath();
// 显示年份信息
showYearInfo(value);
} else if (type === 'month') {
const $children = $this.siblings('.tree-children');
const $expandBtn = $this.find('.expand-btn');
const year = $this.data('year');
$children.toggleClass('expanded');
$expandBtn.toggleClass('expanded');
// 更新当前路径
currentPath = { year: year, month: value, day: null };
updateCurrentPath();
// 显示月份信息
showMonthInfo(year, value);
} else if (type === 'day') {
const year = $this.data('year');
const month = $this.data('month');
const day = $this.data('value');
// 更新当前路径
currentPath = { year: year, month: month, day: day };
updateCurrentPath();
// 显示该日期的集装箱
showContainersForDay(year, month, day);
}
});
}
// 显示指定日期的集装箱
function showContainersForDay(year, month, day) {
const $containerCards = $('#containerCards');
const $emptyState = $('#emptyState');
// 查找数据
const yearData = mockData.years.find(y => y.year === year);
if (!yearData) {
$containerCards.html('');
$emptyState.show();
return;
}
const monthData = yearData.months.find(m => m.month === month);
if (!monthData) {
$containerCards.html('');
$emptyState.show();
return;
}
const dayData = monthData.days.find(d => d.day === day);
if (!dayData || dayData.containers.length === 0) {
$containerCards.html('');
$emptyState.show();
return;
}
// 生成集装箱卡片
let cardsHTML = '';
dayData.containers.forEach(container => {
// 根据状态设置颜色
let statusColor = '#38a169'; // 默认绿色
if (container.status === '在途') statusColor = '#3182ce';
if (container.status === '离港') statusColor = '#718096';
cardsHTML += `
<div class="container-card">
<div class="card-header">
<div class="container-id">${container.id}</div>
<span class="container-type">${container.type}</span>
</div>
<div class="card-body">
<div class="card-row">
<span class="card-label">尺寸</span>
<span class="card-value">${container.size}</span>
</div>
<div class="card-row">
<span class="card-label">状态</span>
<span class="card-value" style="color: ${statusColor};">${container.status}</span>
</div>
<div class="card-row">
<span class="card-label">重量</span>
<span class="card-value">${container.weight}</span>
</div>
<div class="card-row">
<span class="card-label">路径</span>
<span class="card-value">${year}/${month.padStart(2, '0')}/${day.padStart(2, '0')}</span>
</div>
</div>
<div class="card-footer">
<span class="card-action" onclick="showContainerDetails('${container.id}')">
<i class="fas fa-info-circle"></i> 详情
</span>
<span class="card-action" onclick="downloadContainerFiles('${container.id}')">
<i class="fas fa-download"></i> 下载
</span>
<span class="card-action" onclick="deleteContainer('${container.id}')">
<i class="fas fa-trash"></i> 删除
</span>
</div>
</div>
`;
});
$containerCards.html(cardsHTML);
$emptyState.hide();
}
// 显示年份信息
function showYearInfo(year) {
const $containerCards = $('#containerCards');
const $emptyState = $('#emptyState');
// 查找年份数据
const yearData = mockData.years.find(y => y.year === year);
if (!yearData) {
$containerCards.html('');
$emptyState.show();
return;
}
// 计算该年份的统计信息
let totalMonths = yearData.months.length;
let totalDays = 0;
let totalContainers = 0;
yearData.months.forEach(month => {
totalDays += month.days.length;
month.days.forEach(day => {
totalContainers += day.containers.length;
});
});
$containerCards.html(`
<div class="container-card" style="grid-column: 1 / -1;">
<div class="card-header">
<div class="container-id">${year}年 统计概览</div>
<span class="container-type">年度报告</span>
</div>
<div class="card-body">
<div class="card-row">
<span class="card-label">月份数量</span>
<span class="card-value">${totalMonths} 个月</span>
</div>
<div class="card-row">
<span class="card-label">有记录的天数</span>
<span class="card-value">${totalDays} 天</span>
</div>
<div class="card-row">
<span class="card-label">集装箱总数</span>
<span class="card-value">${totalContainers} 个</span>
</div>
<div class="card-row">
<span class="card-label">数据路径</span>
<span class="card-value">${year}/</span>
</div>
</div>
<div class="card-footer">
<span class="card-action" onclick="showMessage('导出年度报告功能开发中')">
<i class="fas fa-chart-bar"></i> 生成年度报告
</span>
<span class="card-action" onclick="showMessage('年度统计功能开发中')">
<i class="fas fa-chart-pie"></i> 查看统计
</span>
</div>
</div>
`);
$emptyState.hide();
}
// 显示月份信息
function showMonthInfo(year, month) {
const $containerCards = $('#containerCards');
const $emptyState = $('#emptyState');
// 查找年份和月份数据
const yearData = mockData.years.find(y => y.year === year);
if (!yearData) {
$containerCards.html('');
$emptyState.show();
return;
}
const monthData = yearData.months.find(m => m.month === month);
if (!monthData) {
$containerCards.html('');
$emptyState.show();
return;
}
// 计算该月份的统计信息
let totalDays = monthData.days.length;
let totalContainers = 0;
monthData.days.forEach(day => {
totalContainers += day.containers.length;
});
$containerCards.html(`
<div class="container-card" style="grid-column: 1 / -1;">
<div class="card-header">
<div class="container-id">${year}年${month}月 统计概览</div>
<span class="container-type">月度报告</span>
</div>
<div class="card-body">
<div class="card-row">
<span class="card-label">有记录的天数</span>
<span class="card-value">${totalDays} 天</span>
</div>
<div class="card-row">
<span class="card-label">集装箱总数</span>
<span class="card-value">${totalContainers} 个</span>
</div>
<div class="card-row">
<span class="card-label">平均每日集装箱数</span>
<span class="card-value">${(totalContainers / totalDays).toFixed(1)} 个/天</span>
</div>
<div class="card-row">
<span class="card-label">数据路径</span>
<span class="card-value">${year}/${month.padStart(2, '0')}/</span>
</div>
</div>
<div class="card-footer">
<span class="card-action" onclick="showMessage('导出月度报告功能开发中')">
<i class="fas fa-chart-line"></i> 生成月度报告
</span>
<span class="card-action" onclick="showMessage('月度统计功能开发中')">
<i class="fas fa-chart-bar"></i> 查看统计
</span>
</div>
</div>
`);
$emptyState.hide();
}
// 更新当前路径显示
function updateCurrentPath() {
let pathText = "当前路径: ";
if (currentPath.year) {
pathText += `<span class="path-item">${currentPath.year}年</span>`;
if (currentPath.month) {
pathText += ` / <span class="path-item">${currentPath.month}月</span>`;
if (currentPath.day) {
pathText += ` / <span class="path-item">${currentPath.day}日</span>`;
}
}
} else {
pathText += `<span class="path-item">根目录</span>`;
}
$('#currentPath').html(pathText);
}
// 添加新年份
function addYear(year) {
// 检查年份是否已存在
const yearExists = mockData.years.some(y => y.year === year);
if (yearExists) {
alert(`年份 ${year} 已存在!`);
return;
}
// 添加新年份
mockData.years.push({
year: year,
months: []
});
// 重新初始化树形视图
initTreeView();
// 选中新添加的年份
$(`.tree-node[data-type="year"][data-value="${year}"]`).click();
showMessage(`成功添加年份 ${year}`);
}
// 筛选集装箱
function filterContainers(searchTerm) {
const $containerCards = $('#containerCards');
const $emptyState = $('#emptyState');
// 收集所有匹配的集装箱
let matchedContainers = [];
mockData.years.forEach(yearData => {
yearData.months.forEach(monthData => {
monthData.days.forEach(dayData => {
dayData.containers.forEach(container => {
// 检查集装箱ID、类型、状态等是否匹配搜索词
if (container.id.toLowerCase().includes(searchTerm) ||
container.type.toLowerCase().includes(searchTerm) ||
container.status.toLowerCase().includes(searchTerm) ||
container.size.toLowerCase().includes(searchTerm) ||
`${yearData.year}${monthData.month}${dayData.day}`.includes(searchTerm)) {
matchedContainers.push({
...container,
year: yearData.year,
month: monthData.month,
day: dayData.day
});
}
});
});
});
});
if (matchedContainers.length === 0) {
$containerCards.html('');
$emptyState.show();
return;
}
// 生成匹配的集装箱卡片
let cardsHTML = '';
matchedContainers.forEach(container => {
// 根据状态设置颜色
let statusColor = '#38a169'; // 默认绿色
if (container.status === '在途') statusColor = '#3182ce';
if (container.status === '离港') statusColor = '#718096';
cardsHTML += `
<div class="container-card">
<div class="card-header">
<div class="container-id">${container.id}</div>
<span class="container-type">${container.type}</span>
</div>
<div class="card-body">
<div class="card-row">
<span class="card-label">尺寸</span>
<span class="card-value">${container.size}</span>
</div>
<div class="card-row">
<span class="card-label">状态</span>
<span class="card-value" style="color: ${statusColor};">${container.status}</span>
</div>
<div class="card-row">
<span class="card-label">重量</span>
<span class="card-value">${container.weight}</span>
</div>
<div class="card-row">
<span class="card-label">路径</span>
<span class="card-value">${container.year}/${container.month.padStart(2, '0')}/${container.day.padStart(2, '0')}</span>
</div>
</div>
<div class="card-footer">
<span class="card-action" onclick="showContainerDetails('${container.id}')">
<i class="fas fa-info-circle"></i> 详情
</span>
<span class="card-action" onclick="downloadContainerFiles('${container.id}')">
<i class="fas fa-download"></i> 下载
</span>
</div>
</div>
`;
});
$containerCards.html(cardsHTML);
$emptyState.hide();
}
// 更新时间显示
function updateTime() {
const now = new Date();
const dateStr = now.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
weekday: 'long'
});
const timeStr = now.toLocaleTimeString('zh-CN');
$('#currentTime').text(`${dateStr} ${timeStr}`);
}
// 显示消息
function showMessage(message) {
// 创建一个临时消息元素
const $message = $(`
<div style="position: fixed; top: 20px; right: 20px; background: #4b6cb7; color: white; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000;">
<i class="fas fa-check-circle"></i> ${message}
</div>
`);
$('body').append($message);
// 3秒后移除消息
setTimeout(() => {
$message.fadeOut(300, function () {
$(this).remove();
});
}, 3000);
}
// 容器操作函数
function showContainerDetails(containerId) {
alert(`查看集装箱 ${containerId} 的详细信息\n\n此功能正在开发中,将显示该集装箱的完整档案、文件列表和相关操作。`);
}
function downloadContainerFiles(containerId) {
showMessage(`开始下载集装箱 ${containerId} 的相关文件...`);
}
function deleteContainer(containerId) {
if (confirm(`确定要删除集装箱 ${containerId} 的所有文件吗?\n\n此操作不可撤销。`)) {
showMessage(`已删除集装箱 ${containerId} 的相关文件`);
}
}
</script>
</body>
</html>