-
-
+
+
+
首页
-
-
详细信息
-
-
- 当前路径: 根目录
-
-
-
-
-
-
-
暂无数据
-
请从左侧树形结构中选择一个日期节点查看集装箱信息
-
-
-
-
-
-
+
-
- // 遍历年份
- mockData.years.forEach(yearData => {
- const yearId = `year-${yearData.year}`;
- const $yearItem = $(`
-
-
-
-
-
- ${yearData.year}年
- ${yearData.months.length}个月
-
-
- `);
-
- $tree.append($yearItem);
-
- // 遍历月份
- yearData.months.forEach(monthData => {
- const monthId = `month-${yearData.year}-${monthData.month}`;
- const $monthItem = $(`
-
-
-
-
-
- ${monthData.month}月
- ${monthData.days.length}天
-
-
- `);
-
- $(`#${yearId}`).append($monthItem);
-
- // 遍历日期
- monthData.days.forEach(dayData => {
- const dayId = `day-${yearData.year}-${monthData.month}-${dayData.day}`;
- const $dayItem = $(`
-
-
-
-
- ${dayData.day}日
- ${dayData.containers.length}个集装箱
-
-
- `);
-
- $(`#${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 += `
-
-
-
-
- 尺寸
- ${container.size}
-
-
- 状态
- ${container.status}
-
-
- 重量
- ${container.weight}
-
-
- 路径
- ${year}/${month.padStart(2, '0')}/${day.padStart(2, '0')}
-
-
-
-
- `;
- });
-
- $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(`
-
-
-
-
- 月份数量
- ${totalMonths} 个月
-
-
- 有记录的天数
- ${totalDays} 天
-
-
- 集装箱总数
- ${totalContainers} 个
-
-
- 数据路径
- ${year}/
-
-
-
-
- `);
-
- $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(`
-
-
-
-
- 有记录的天数
- ${totalDays} 天
-
-
- 集装箱总数
- ${totalContainers} 个
-
-
- 平均每日集装箱数
- ${(totalContainers / totalDays).toFixed(1)} 个/天
-
-
- 数据路径
- ${year}/${month.padStart(2, '0')}/
-
-
-
-
- `);
-
- $emptyState.hide();
- }
-
- // 更新当前路径显示
- function updateCurrentPath() {
- let pathText = "当前路径: ";
-
- if (currentPath.year) {
- pathText += `
${currentPath.year}年`;
-
- if (currentPath.month) {
- pathText += ` /
${currentPath.month}月`;
-
- if (currentPath.day) {
- pathText += ` /
${currentPath.day}日`;
- }
- }
- } else {
- pathText += `
根目录`;
- }
-
- $('#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 += `
-
-
-
-
- 尺寸
- ${container.size}
-
-
- 状态
- ${container.status}
-
-
- 重量
- ${container.weight}
-
-
- 路径
- ${container.year}/${container.month.padStart(2, '0')}/${container.day.padStart(2, '0')}
-
-
-
-
- `;
- });
-
- $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 = $(`
-
- ${message}
-
- `);
-
- $('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} 的相关文件`);
- }
- }
-
-
\ No newline at end of file