|
@@ -0,0 +1,357 @@
|
|
|
|
|
+{Template header}
|
|
|
|
|
+<style>
|
|
|
|
|
+:root {
|
|
|
|
|
+ --bg-body: #f4f7fe;
|
|
|
|
|
+ --card-bg: #ffffff;
|
|
|
|
|
+ --text-primary: #2c3e50;
|
|
|
|
|
+ --text-secondary: #7f8c8d;
|
|
|
|
|
+ --color-blue: #3498db;
|
|
|
|
|
+ --color-red: #e74c3c;
|
|
|
|
|
+ --color-orange: #e67e22;
|
|
|
|
|
+ --color-green: #2ecc71;
|
|
|
|
|
+ --radius: 12px;
|
|
|
|
|
+ --shadow: 0 4px 6px rgba(0,0,0,0.05);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+body {
|
|
|
|
|
+ font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
|
|
|
+ background-color: var(--bg-body);
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ padding: 30px;
|
|
|
|
|
+ color: var(--text-primary);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h2 {
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: var(--text-primary);
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ border-left: 5px solid var(--color-blue);
|
|
|
|
|
+ padding-left: 15px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* --- 筛选区域 --- */
|
|
|
|
|
+.filter-container {
|
|
|
|
|
+ margin-bottom: 25px;
|
|
|
|
|
+ padding: 15px;
|
|
|
|
|
+ background: var(--card-bg);
|
|
|
|
|
+ border-radius: var(--radius);
|
|
|
|
|
+ box-shadow: var(--shadow);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.filter-label {
|
|
|
|
|
+ font-size: 22px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ margin-right: 15px;
|
|
|
|
|
+ color: var(--text-primary);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.filter-btn {
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+ background: none;
|
|
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
|
|
+ color: var(--text-secondary);
|
|
|
|
|
+ padding: 6px 16px;
|
|
|
|
|
+ border-radius: 20px; /* 胶囊形状 */
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ margin-right: 10px;
|
|
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.filter-btn:hover {
|
|
|
|
|
+ color: var(--color-blue);
|
|
|
|
|
+ border-color: var(--color-blue);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 激活状态的按钮样式 */
|
|
|
|
|
+.filter-btn.active {
|
|
|
|
|
+ background-color: var(--color-blue);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ border-color: var(--color-blue);
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* --- 顶部统计区域 --- */
|
|
|
|
|
+.stats-container {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
|
|
|
+ gap: 20px;
|
|
|
|
|
+ margin-bottom: 40px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.stat-card {
|
|
|
|
|
+ background: var(--card-bg);
|
|
|
|
|
+ border-radius: var(--radius);
|
|
|
|
|
+ padding: 20px 30px;
|
|
|
|
|
+ box-shadow: var(--shadow);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ border-bottom: 4px solid transparent;
|
|
|
|
|
+ transition: transform 0.2s;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.stat-card:hover {
|
|
|
|
|
+ transform: translateY(-2px);
|
|
|
|
|
+ box-shadow: 0 8px 15px rgba(0,0,0,0.1);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.stat-info h3 {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ color: var(--text-secondary);
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.stat-info .count {
|
|
|
|
|
+ margin-top: 8px;
|
|
|
|
|
+ font-size: 32px;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ color: var(--text-primary);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 不同状态的边框颜色 */
|
|
|
|
|
+.border-blue { border-color: var(--color-blue); }
|
|
|
|
|
+.border-red { border-color: var(--color-red); }
|
|
|
|
|
+.border-orange { border-color: var(--color-orange); }
|
|
|
|
|
+.border-green { border-color: var(--color-green); }
|
|
|
|
|
+
|
|
|
|
|
+.icon-box {
|
|
|
|
|
+ font-size: 40px;
|
|
|
|
|
+ opacity: 0.8;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ /* 底部工序区域 - 关键修改在这里 */
|
|
|
|
|
+ .process-container {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ /* 核心代码:自动填充,每个卡片固定宽度 220px,多余空间自动换行 */
|
|
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
|
|
|
+ gap: 25px;
|
|
|
|
|
+ justify-content: start; /* 左对齐,防止拉伸 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.process-card {
|
|
|
|
|
+ background: var(--card-bg);
|
|
|
|
|
+ border-radius: var(--radius);
|
|
|
|
|
+ box-shadow: var(--shadow);
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ /* 固定高度或最小高度,保持整齐 */
|
|
|
|
|
+ min-height: 110px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ transition: transform 0.2s;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.process-card:hover {
|
|
|
|
|
+ transform: translateY(-5px);
|
|
|
|
|
+ box-shadow: 0 8px 15px rgba(0,0,0,0.1);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.process-name {
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
+ color: var(--text-primary);
|
|
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.process-count {
|
|
|
|
|
+ font-size: 36px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: var(--color-blue);
|
|
|
|
|
+}
|
|
|
|
|
+.date-input {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ max-width:300px ;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* .count-label {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: var(--text-secondary);
|
|
|
|
|
+ margin-top: 5px;
|
|
|
|
|
+} */
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+/* 响应式调整 */
|
|
|
|
|
+@media (max-width: 768px) {
|
|
|
|
|
+ body { padding: 15px; }
|
|
|
|
|
+ .stat-card { padding: 15px 20px; }
|
|
|
|
|
+ .stat-info .count { font-size: 24px; }
|
|
|
|
|
+ .process-card { flex: 1 1 45%; } /* 手机端每行两个 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+</style>
|
|
|
|
|
+<body>
|
|
|
|
|
+<div class="warp">
|
|
|
|
|
+ <!-- 2. 时间筛选栏 -->
|
|
|
|
|
+ <div class="filter-container">
|
|
|
|
|
+ <span class="filter-label">数据时间范围:</span>
|
|
|
|
|
+ <input id="timetk" value="{date('Y-m-d',time()-29*24*3600)} 0:00" name="timetk" type="text" onClick="laydate({istime: true,format:'YYYY-MM-DD hh:mm'})" autocomplete="off" class="date-input">
|
|
|
|
|
+至 <input id="timetj" value="{date('Y-m-d',time()+24*3600)} 0:00" name="timetj" type="text" onClick="laydate({istime: true,format:'YYYY-MM-DD hh:mm'})" autocomplete="off" class="date-input">
|
|
|
|
|
+ <button class="filter-btn active">搜 索</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <h1 style="font-size: 22px;font-weight: bold;">🏭 生产可视化看板</h1>
|
|
|
|
|
+ <!-- 顶部:统计指标 -->
|
|
|
|
|
+ <div class="stats-container">
|
|
|
|
|
+ <!-- 第一行 -->
|
|
|
|
|
+ <div class="stat-card border-blue">
|
|
|
|
|
+ <div class="stat-info">
|
|
|
|
|
+ <h3>在产未交工单</h3>
|
|
|
|
|
+ <div class="count">124</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="icon-box">📋</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="stat-card border-blue">
|
|
|
|
|
+ <div class="stat-info">
|
|
|
|
|
+ <h3>未开始生产单</h3>
|
|
|
|
|
+ <div class="count">8</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="icon-box">⏳</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="stat-card border-red">
|
|
|
|
|
+ <div class="stat-info">
|
|
|
|
|
+ <h3>打印超7天未出货单</h3>
|
|
|
|
|
+ <div class="count">2</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="icon-box">⚠️</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 第二行 -->
|
|
|
|
|
+ <div class="stat-card border-red">
|
|
|
|
|
+ <div class="stat-info">
|
|
|
|
|
+ <h3>已超时单</h3>
|
|
|
|
|
+ <div class="count">5</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="icon-box">🚨</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="stat-card border-orange">
|
|
|
|
|
+ <div class="stat-info">
|
|
|
|
|
+ <h3>工序流转超3天单</h3>
|
|
|
|
|
+ <div class="count">12</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="icon-box">🔄</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="stat-card border-green">
|
|
|
|
|
+ <div class="stat-info">
|
|
|
|
|
+ <h3>下道工序未及时入库单</h3>
|
|
|
|
|
+ <div class="count">3</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="icon-box">📦</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 底部:工序数量看板 (固定宽度,自动换行) -->
|
|
|
|
|
+ <h2 style="font-size: 22px;">各工序在产数量</h2>
|
|
|
|
|
+ <div class="process-container">
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 单个工序卡片 -->
|
|
|
|
|
+ <div class="process-card">
|
|
|
|
|
+ <div class="process-name">配货</div>
|
|
|
|
|
+ <div class="process-count">45</div>
|
|
|
|
|
+ <div class="count-label"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="process-card">
|
|
|
|
|
+ <div class="process-name">前处理</div>
|
|
|
|
|
+ <div class="process-count">32</div>
|
|
|
|
|
+ <div class="count-label"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="process-card">
|
|
|
|
|
+ <div class="process-name">后处理</div>
|
|
|
|
|
+ <div class="process-count">28</div>
|
|
|
|
|
+ <div class="count-label"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="process-card">
|
|
|
|
|
+ <div class="process-name">漂扣</div>
|
|
|
|
|
+ <div class="process-count">15</div>
|
|
|
|
|
+ <div class="count-label"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="process-card">
|
|
|
|
|
+ <div class="process-name">曲发</div>
|
|
|
|
|
+ <div class="process-count">60</div>
|
|
|
|
|
+ <div class="count-label"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="process-card">
|
|
|
|
|
+ <div class="process-name">高针</div>
|
|
|
|
|
+ <div class="process-count">10</div>
|
|
|
|
|
+ <div class="count-label"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="process-card">
|
|
|
|
|
+ <div class="process-name">发型师</div>
|
|
|
|
|
+ <div class="process-count">22</div>
|
|
|
|
|
+ <div class="count-label"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="process-card">
|
|
|
|
|
+ <div class="process-name">完成</div>
|
|
|
|
|
+ <div class="process-count">8</div>
|
|
|
|
|
+ <div class="count-label"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="process-card">
|
|
|
|
|
+ <div class="process-name">辫子</div>
|
|
|
|
|
+ <div class="process-count">55</div>
|
|
|
|
|
+ <div class="count-label"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="process-card">
|
|
|
|
|
+ <div class="process-name">中转仓</div>
|
|
|
|
|
+ <div class="process-count">104</div>
|
|
|
|
|
+ <div class="count-label"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+<script type="text/javascript">
|
|
|
|
|
+ let dataurl = "/workshopshow/xdshow"
|
|
|
|
|
+ $(function(){
|
|
|
|
|
+
|
|
|
|
|
+ })
|
|
|
|
|
+ //获取数据
|
|
|
|
|
+ function getData(){
|
|
|
|
|
+ let obj = {
|
|
|
|
|
+ timetk:$("#timetk").val(),
|
|
|
|
|
+ timetj:$("#timetj").val(),
|
|
|
|
|
+ }
|
|
|
|
|
+ layx.load('loadId','数据加载中');
|
|
|
|
|
+ $.post(dataurl,obj,function(res){
|
|
|
|
|
+ layx.destroy('loadId');
|
|
|
|
|
+ },"json")
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<script type="text/javascript" src="{$theme}js/laydate.js"></script>
|
|
|
|
|
+{Template footer}
|