<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<title>仓库操作计划 - Board</title>
|
<style>
|
/* 1. 全局重置：锁定大屏纯净背景 */
|
html, body {
|
margin: 0;
|
padding: 0;
|
width: 100%;
|
height: 100%;
|
background-color: #f0f2f5 !important; /* 工业级浅灰背景 */
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
overflow: hidden; /* 大屏禁止出现滚动条 */
|
}
|
|
.shell {
|
width: 100% !important;
|
max-width: 100% !important;
|
margin: 0 !important;
|
padding: 10px;
|
box-sizing: border-box;
|
}
|
|
/* 2. 标题导航 */
|
.cal-nav-row {
|
display: flex;
|
align-items: center;
|
gap: 20px;
|
margin-bottom: 10px;
|
padding-left: 10px;
|
}
|
|
.cal-title {
|
margin: 0;
|
font-size: 24px;
|
font-weight: bold;
|
color: #000;
|
}
|
|
.cal-nav-btn {
|
text-decoration: none;
|
color: #1890ff;
|
font-weight: bold;
|
font-size: 20px;
|
padding: 5px 15px;
|
background: #fff;
|
border: 1px solid #d9d9d9;
|
border-radius: 4px;
|
}
|
|
/* 3. 日历表格：纯白美化 */
|
.cal-table-wrap {
|
width: 100%;
|
background: #fff !important;
|
border-radius: 4px;
|
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
overflow: hidden;
|
}
|
|
.cal-table {
|
table-layout: fixed;
|
width: 100%;
|
border-collapse: collapse;
|
background: #fff !important; /* 强制背景为白 */
|
}
|
|
thead th {
|
background: #fafafa !important;
|
color: #555;
|
padding: 12px 0;
|
font-size: 16px;
|
border: 1px solid #f0f0f0;
|
}
|
|
.cal-cell {
|
height: 13vh; /* 根据屏幕高度动态计算 */
|
vertical-align: top;
|
border: 1px solid #f0f0f0 !important;
|
padding: 0 !important;
|
background: #fff !important;
|
}
|
|
.cal-cell--today {
|
background-color: #e6f7ff !important; /* 今日淡蓝提示 */
|
}
|
|
.cal-daynum {
|
font-size: 14px;
|
font-weight: bold;
|
color: #999;
|
padding: 4px 6px;
|
display: block;
|
}
|
|
/* 4. 事件字段：极致单行显示 */
|
.cal-plans {
|
margin: 0;
|
padding: 0 2px;
|
list-style: none;
|
}
|
|
.cal-plan {
|
margin-bottom: 2px;
|
border-radius: 2px;
|
padding: 2px 4px;
|
display: block;
|
overflow: hidden; /* 强制裁剪溢出 */
|
}
|
|
/* 状态颜色：大屏高对比色 */
|
.cal-plan--active {
|
background-color: #1890ff !important; /* 鲜艳蓝 */
|
color: #fff !important;
|
}
|
|
.cal-plan--over {
|
background-color: #52c41a !important; /* 鲜艳绿 */
|
color: #fff !important;
|
}
|
|
.cal-plan-fields {
|
display: flex;
|
flex-wrap: nowrap; /* 绝对禁止换行 */
|
align-items: center;
|
font-size: 13px; /* 大屏字体稍大一点 */
|
line-height: 1.2;
|
}
|
|
/* 每一个字段都不允许缩小，确保文字完整 */
|
.cal-field {
|
flex-shrink: 0;
|
margin-right: 8px; /* 字段间留一个空格距离 */
|
white-space: nowrap;
|
}
|
|
.cal-event-text { font-weight: 900; }
|
.cal-to-text { font-weight: 900; }
|
.cal-note { font-weight: 400; opacity: 0.9; }
|
|
</style>
|
</head>
|
<body class="page-home">
|
<div class="shell">
|
<div class="cal-nav-row">
|
<a class="cal-nav-btn" href="<%= basePath %>/warehouse-calendar?year=<%= prevYear %>&month=<%= prevMonth %>"><</a>
|
<a class="cal-nav-btn" href="<%= basePath %>/warehouse-calendar?year=<%= nextYear %>&month=<%= nextMonth %>">></a>
|
<h2 class="cal-title"><%= monthTitle %> 仓库操作计划看板</h2>
|
</div>
|
|
<div class="cal-table-wrap">
|
<table class="cal-table">
|
<thead>
|
<tr>
|
<% weekdayLabels.forEach(function (w) { %>
|
<th><%= w %></th>
|
<% }); %>
|
</tr>
|
</thead>
|
<tbody>
|
<% rows.forEach(function (row) { %>
|
<tr>
|
<% row.forEach(function (cell) { %>
|
<td class="cal-cell<%= cell.isToday ? ' cal-cell--today' : '' %>">
|
<% if (cell.day !== null) { %>
|
<span class="cal-daynum"><%= cell.day %></span>
|
<ul class="cal-plans">
|
<% cell.plans.forEach(function (p) { %>
|
<%
|
var st = p.event_status != null && String(p.event_status).trim() !== '' ? String(p.event_status).trim().toLowerCase() : '';
|
var isOver = (st === 'over') || (st === '' && typeof todayKey === 'string' && cell.dateKey < todayKey);
|
%>
|
<li class="cal-plan<%= isOver ? ' cal-plan--over' : ' cal-plan--active' %>">
|
<div class="cal-plan-fields">
|
<span class="cal-field cal-event-text">
|
<%= (p.eventstr && p.eventstr.length > 5) ? p.eventstr.slice(-5) : p.eventstr %>
|
</span>
|
<% if (p.event_to) { %>
|
<span class="cal-field cal-to-text"><%= p.event_to.substring(0, 3) %></span>
|
<% } %>
|
<span class="cal-field cal-note">
|
<%= p.note_a || '' %> <%= p.note_b || '' %>
|
</span>
|
</div>
|
</li>
|
<% }); %>
|
</ul>
|
<% } %>
|
</td>
|
<% }); %>
|
</tr>
|
<% }); %>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</body>
|
</html>
|
