1

template/erp/workshopshow_xdshow.html

@@ -17,7 +17,7 @@ body {
     font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
     background-color: var(--bg-body);
     margin: 0;
-    padding: 30px;
+    padding: 30px 30px 10px 30px;
     color: var(--text-primary);
 }
 
@@ -76,15 +76,15 @@ h2 {
 /* --- 顶部统计区域 --- */
 .stats-container {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 20px;
-    margin-bottom: 40px;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 10px;
+    margin-bottom: 20px;
 }
 
 .stat-card {
     background: var(--card-bg);
     border-radius: var(--radius);
-    padding: 20px 30px;
+    padding: 15px 20px;
     box-shadow: var(--shadow);
     display: flex;
     justify-content: space-between;
@@ -128,8 +128,8 @@ h2 {
  .process-container {
     display: grid;
     /* 核心代码：自动填充，每个卡片固定宽度 220px，多余空间自动换行 */
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 25px;
+    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+    gap: 10px;
     justify-content: start; /* 左对齐，防止拉伸 */
 }
 
@@ -137,7 +137,7 @@ h2 {
     background: var(--card-bg);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
-    padding: 20px;
+    padding: 5px;
     text-align: center;
     /* 固定高度或最小高度，保持整齐 */
     min-height: 110px;
@@ -193,6 +193,216 @@ h2 {
     .stat-info .count { font-size: 24px; }
     .process-card { flex: 1 1 45%; } /* 手机端每行两个 */
 }  
+
+/* --- 主卡片容器 --- */
+.main-card {
+    background: var(--card-bg);
+    border-radius: 12px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+    padding: 15px;
+    max-width: 1200px;
+    margin-top: 10px;
+    /* margin: 0 auto; */
+}
+
+/* --- 顶部搜索栏 --- */
+.search-bar {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 25px;
+    gap: 10px;
+}
+
+.search-input {
+    padding: 8px 16px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.2s;
+    width: 240px;
+}
+
+.search-input:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+}
+
+.btn {
+    padding: 8px 20px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s;
+}
+
+.btn-primary {
+    background-color: #1d4ed8;
+    /* background-color: var(--primary); */
+    color: white;
+}
+
+/* .btn-primary:hover {
+    background-color: #1d4ed8;
+} */
+
+/* --- 表格样式 --- */
+.order-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 10px; /* 为分页留出空间 */
+}
+
+.order-table th {
+    text-align: left;
+    padding: 16px;
+    background-color: #f8fafc;
+    color: var(--text-sub);
+    font-weight: 600;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border-bottom: 2px solid var(--border);
+}
+
+.order-table td {
+    padding: 16px;
+    border-bottom: 1px solid var(--border);
+    font-size: 14px;
+    color: var(--text-main);
+}
+
+/* 数字列右对齐 */
+.order-table td:nth-child(n+2) {
+    text-align: right;
+    font-family: 'Courier New', Courier, monospace; /* 等宽字体更适合数字 */
+    font-weight: 500;
+}
+
+.order-table tbody tr:hover {
+    background-color: #f1f5f9;
+}
+
+/* 状态标签 */
+.badge {
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+}
+.badge-warning {
+    background-color: #fee2e2;
+    color: #991b1b;
+}
+
+/* --- 分页组件 --- */
+.pagination-section {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: 20px;
+    border-top: 1px solid var(--border);
+    margin-top: 10px;
+}
+
+.pagination-info {
+    color: var(--text-sub);
+    font-size: 13px;
+    margin-right: 15px;
+}
+
+.page-btn {
+    background: white;
+    border: 1px solid var(--border);
+    color: var(--text-main);
+    padding: 6px 12px;
+    margin-left: 5px;
+    border-radius: 4px;
+    font-size: 13px;
+    cursor: pointer;
+    text-decoration: none; /* 移除链接下划线 */
+    transition: all 0.2s;
+}
+
+.page-btn:hover {
+    background-color: #f1f5f9;
+    color: var(--primary);
+}
+
+.page-btn.active {
+    background-color: var(--primary);
+    color: white;
+    border-color: var(--primary);
+}
+
+.page-btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* --- 车间统计区域 (独立模块) --- */
+.workshop-section {
+    /*margin-top: 40px; *//* 与上方内容拉开距离 */
+    border-top: 2px solid var(--bg-page); /* 视觉分割 */
+    padding-top: 20px;
+}
+
+.workshop-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-main);
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+}
+
+/* 小竖条装饰 */
+.workshop-title::before {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 16px;
+    background-color: var(--primary);
+    margin-right: 10px;
+    border-radius: 2px;
+}
+
+.workshop-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 15px;
+}
+
+.workshop-card {
+    background: #f8fafc;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 15px;
+    text-align: center;
+    transition: transform 0.2s;
+}
+
+.workshop-card:hover {
+    transform: translateY(-2px);
+    border-color: var(--primary);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+}
+
+.ws-label {
+    font-size: 13px;
+    color: var(--text-sub);
+    margin-bottom: 5px;
+}
+
+.ws-value {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--primary);
+    font-family: 'Courier New', Courier, monospace;
+}
     
 
        
@@ -200,69 +410,85 @@ h2 {
 <body>
 <div class="warp">
     <!-- 2. 时间筛选栏 -->
-    <div class="filter-container">
+    <!-- <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">&nbsp;&nbsp;&nbsp;&nbsp;
 至&nbsp;&nbsp;&nbsp;&nbsp; <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>
+    </div> -->
 
-    <h1 style="font-size: 22px;font-weight: bold;">🏭 生产可视化看板</h1>
+    <h1 style="font-size: 22px;font-weight: bold;margin-bottom: 10px;">🏭 生产可视化看板</h1>
     <!-- 顶部：统计指标 -->
     <div class="stats-container">
         <!-- 第一行 -->
         <div class="stat-card border-blue">
             <div class="stat-info">
                 <h3>在产未交工单</h3>
-                <div class="count">124</div>
+                <div class="count">124 (单)</div>
             </div>
-            <div class="icon-box">📋</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 class="count">8 (单)</div>
             </div>
-            <div class="icon-box">⏳</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 class="count">5 (单)</div>
             </div>
-            <div class="icon-box">🚨</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 class="count">12 (单)</div>
             </div>
-            <div class="icon-box">🔄</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 class="count">3 (单)</div>
+            </div>
+            <!-- <div class="icon-box">📦</div> -->
+        </div>
+        <div class="stat-card border-red">
+            <div class="stat-info">
+                <h3>打印超7天未出货单</h3>
+                <div style="display: flex; justify-content: space-between;">
+                    <div class="count"><span id="order_num_7">-</span>(单)</div>
+                    <div class="count"><span id="ts_7">-</span>(条)</div>
+                </div>
+                
+                
+            </div>
+            <!-- <div class="icon-box">⚠️</div> -->
+        </div>
+        <div class="stat-card border-blue">
+            <div class="stat-info">
+                <h3>未发货单</h3>
+                <div style="display: flex; justify-content: space-between;">
+                    <div class="count"><span id="order_num_m">-</span>(单)</div>
+                    <div class="count"><span id="ts_m">-</span> (条)</div>
+                </div>
             </div>
-            <div class="icon-box">📦</div>
+            <!-- <div class="icon-box">⚠️</div> -->
         </div>
     </div>
 
     <!-- 底部：工序数量看板 (固定宽度，自动换行) -->
-    <h2 style="font-size: 22px;">各工序在产数量</h2>
+    <!-- <h2 style="font-size: 22px;">各工序在产数量</h2> -->
     <div class="process-container">
 
         <!-- 单个工序卡片 -->
@@ -329,7 +555,114 @@ h2 {
     </div>
 
    
-    
+    <div class="main-card">
+        <!-- 1. 顶部筛选 -->
+        <div class="search-bar">
+            <input type="text" class="search-input" placeholder="输入订单号进行搜索...">
+            <button class="btn btn-primary">搜索</button>
+        </div>
+
+        <!-- 2. 订单表格 -->
+        <table class="order-table">
+            <thead>
+                <tr>
+                    <th style="width: 35%;">订单号</th>
+                    <th style="width: 15%;">订单数量</th>
+                    <th style="width: 15%;">已打印数量</th>
+                    <th style="width: 15%;">已完工数量</th>
+                    <th style="width: 20%;">未完工数量</th>
+                </tr>
+            </thead>
+            <tbody>
+                <!-- 模拟数据行 -->
+                <tr>
+                    <td>#MO-20231024-001</td>
+                    <td>1000</td>
+                    <td>1000</td>
+                    <td>850</td>
+                    <td><span class="badge badge-warning">150</span></td>
+                </tr>
+                <tr>
+                    <td>#MO-20231024-002</td>
+                    <td>500</td>
+                    <td>500</td>
+                    <td>500</td>
+                    <td>0</td>
+                </tr>
+                <tr>
+                    <td>#MO-20231024-003</td>
+                    <td>2400</td>
+                    <td>1200</td>
+                    <td>1000</td>
+                    <td><span class="badge badge-warning">1400</span></td>
+                </tr>
+                <tr>
+                    <td>#MO-20231024-004</td>
+                    <td>800</td>
+                    <td>800</td>
+                    <td>200</td>
+                    <td><span class="badge badge-warning">600</span></td>
+                </tr>
+                 <tr>
+                    <td>#MO-20231024-005</td>
+                    <td>1500</td>
+                    <td>1500</td>
+                    <td>1500</td>
+                    <td>0</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <!-- 3. 分页组件 (独立一行) -->
+        <div class="pagination-section">
+            <a href="#" class="page-btn disabled">上一页</a>
+            <a href="#" class="page-btn">下一页</a>
+        </div>
+    </div>
+
+    <!-- 4. 车间统计 (完全独立于卡片之外) -->
+    <div class="workshop-section">
+        <div class="workshop-title">各车间在产数量</div>
+        <div class="workshop-grid">
+            <!-- 车间卡片 -->
+            <div class="workshop-card">
+                <div class="ws-label">配货</div>
+                <div class="ws-value">12</div>
+            </div>
+            <div class="workshop-card">
+                <div class="ws-label">前处理</div>
+                <div class="ws-value">8</div>
+            </div>
+            <div class="workshop-card">
+                <div class="ws-label">后处理</div>
+                <div class="ws-value">24</div>
+            </div>
+            <div class="workshop-card">
+                <div class="ws-label">漂扣</div>
+                <div class="ws-value">5</div>
+            </div>
+            <div class="workshop-card">
+                <div class="ws-label">曲发</div>
+                <div class="ws-value">36</div>
+            </div>
+            <div class="workshop-card">
+                <div class="ws-label">高针</div>
+                <div class="ws-value">14</div>
+            </div>
+             <div class="workshop-card">
+                <div class="ws-label">发型师</div>
+                <div class="ws-value">0</div>
+            </div>
+             <div class="workshop-card">
+                <div class="ws-label">完成</div>
+                <div class="ws-value">120</div>
+            </div>
+             <div class="workshop-card">
+                <div class="ws-label">辫子</div>
+                <div class="ws-value">9</div>
+            </div>
+        </div>
+    </div>
 
 </div>
 
@@ -337,7 +670,8 @@ h2 {
 <script type="text/javascript">
     let dataurl = "/workshopshow/xdshow"
     $(function(){
-
+        //getData()
+        getOrderCount();
     })
     //获取数据
     function getData(){
@@ -350,6 +684,28 @@ h2 {
             layx.destroy('loadId');
         },"json")
     }
+    //获取订单维度的统计
+    function getOrderCount(){
+        $.post("/workshopshow/ordercount",{},function(res){
+            console.log("===================")
+            console.log(res);
+            if(res.code == 1){
+                let order_num_7 = res.data.order_num_7;
+                let ts_7 = res.data.ts_7;
+                let order_num_m = res.data.order_num_m;
+                let ts_m = res.data.ts_m;
+                $("#order_num_7").text(order_num_7);
+                $("#ts_7").text(ts_7);
+                $("#order_num_m").text(order_num_m);
+                $("#ts_m").text(ts_m);
+            }
+        },'json')
+    }
+
+
+
+
+
     
 </script>