1087 lines
33 KiB
HTML
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>集装箱文件管理系统 © 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> |