erp/template/erp/workshopshow_xdshow.html

{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 30px 10px 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(180px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 15px 20px;
    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: 22px;
    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(110px, 1fr));
    gap: 10px;
    justify-content: start; /* 左对齐，防止拉伸 */
}

.process-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 5px;
    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%; } /* 手机端每行两个 */
}  

/* --- 主卡片容器 --- */
.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;
}
    

       
</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">&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> -->

    <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"><span id="wjg_num">-</span>(条)</div>
            </div>
            <!-- <div class="icon-box">📋</div> -->
        </div>

        <div class="stat-card border-blue">
            <div class="stat-info">
                <h3>未开始生产单</h3>
                <div class="count"><span id="wsc_num">-</span> (条)</div>
            </div>
            <!-- <div class="icon-box">⏳</div> -->
        </div>

        

        <!-- 第二行 -->
        <div class="stat-card border-red">
            <div class="stat-info">
                <h3>已超时单</h3>
                <div class="count"><span id="ycs_num">-</span> (条)</div>
            </div>
            <!-- <div class="icon-box">🚨</div> -->
        </div>

        <div class="stat-card border-orange">
            <div class="stat-info">
                <h3>工序流转超3天单</h3>
                <div class="count"><span id="lz3d_num">-</span> (条)</div>
            </div>
            <!-- <div class="icon-box">🔄</div> -->
        </div>

        <div class="stat-card border-green">
            <div class="stat-info">
                <h3>下道工序未及时入库单</h3>
                <div class="count"><span id="wjsrk_num">-</span> (条)</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 style="min-width: 140px;">未发货单 </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>
    </div>

    <!-- 底部：工序数量看板 (固定宽度，自动换行) -->
    <!-- <h2 style="font-size: 22px;">各工序在产数量</h2> -->
    <div class="process-container">

        <!-- 单个工序卡片 -->
        <div class="process-card">
            <div class="process-name">配货</div>
            <div class="process-count" id="o_1">-</div>
            <div class="count-label"></div>
        </div>

        <div class="process-card">
            <div class="process-name">前处理</div>
            <div class="process-count"  id="o_5">-</div>
            <div class="count-label"></div>
        </div>

        <div class="process-card">
            <div class="process-name">后处理</div>
            <div class="process-count"  id="o_6">-</div>
            <div class="count-label"></div>
        </div>

        <div class="process-card">
            <div class="process-name">漂扣</div>
            <div class="process-count"  id="o_10">-</div>
            <div class="count-label"></div>
        </div>

        <div class="process-card">
            <div class="process-name">曲发</div>
            <div class="process-count"  id="o_4">-</div>
            <div class="count-label"></div>
        </div>

        <div class="process-card">
            <div class="process-name">高针</div>
            <div class="process-count"  id="o_2">-</div>
            <div class="count-label"></div>
        </div>

        <div class="process-card">
            <div class="process-name">发型师</div>
            <div class="process-count" id="o_7">-</div>
            <div class="count-label"></div>
        </div>

        <div class="process-card">
            <div class="process-name">完成</div>
            <div class="process-count"  id="o_3">-</div>
            <div class="count-label"></div>
        </div>

        <div class="process-card">
            <div class="process-name">辫子</div>
            <div class="process-count" id="o_17">-</div>
            <div class="count-label"></div>
        </div>

        <div class="process-card">
            <div class="process-name">中转仓</div>
            <div class="process-count"  id="o_13">-</div>
            <div class="count-label"></div>
        </div>

    </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 id="bh_box">
                
            </tbody>
        </table>

        <!-- 3. 分页组件 (独立一行) -->
        <div class="pagination-section">
            <a href="javascript:void(0);" id="syy" class="page-btn" data-type="1" onclick="getOrderList(this)">上一页</a>
            <a href="javascript:void(0);" id="xyy" class="page-btn" data-type="2"  onclick="getOrderList(this)">下一页</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>


<script type="text/javascript">
    let page = 1;//当前页面
    let dataurl = "/workshopshow/xdshow"
    $(function(){
        //getData()
        getOrderCount();
        getSmallOrderCount();
        getOperateCount();
        mgbhorders();
    })
    //获取数据
    function getData(){
        let obj = {
            timetk:$("#timetk").val(),
            timetj:$("#timetj").val(),
        }
        layx.load('loadId','数据加载中');
        $.post(dataurl,obj,function(res){
            layx.destroy('loadId');
        },"json")
    }
    //获取订单维度的统计
    function getOrderCount(){
        $.post("/workshopshow/ordercount",{},function(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')
    }
    //获取小单备货流转维度数据
    function getSmallOrderCount(){
        $.post("/workshopshow/bbcount",{},function(res){
            if(res.code == 1){
                let wsc_num = res.data.wsc_num;
                $("#wsc_num").text(wsc_num);

                let wjg_num = res.data.wjg_num;
                $("#wjg_num").text(wjg_num);

                let ycs_num = res.data.ycs_num;
                $("#ycs_num").text(ycs_num);

                let wjsrk_num = res.data.wjsrk_num;
                $("#wjsrk_num").text(wjsrk_num);

                let lz3d_num = res.data.lz3d_num;
                $("#lz3d_num").text(lz3d_num);


            }
        },'json')
    }

    function getOperateCount(){
        $.post("/workshopshow/cjzk",{},function(res){
            if(res.code == 1){
                let o_1 = res.data.o_1;
                $("#o_1").text(o_1);

                let o_5 = res.data.o_5;
                $("#o_5").text(o_5);

                let o_6 = res.data.o_6;
                $("#o_6").text(o_6);

                let o_10 = res.data.o_10;
                $("#o_10").text(o_10);

                let o_4 = res.data.o_4;
                $("#o_4").text(o_4);

                let o_2 = res.data.o_2;
                $("#o_2").text(o_2);

                let o_7 = res.data.o_7;
                $("#o_7").text(o_7);

                let o_3 = res.data.o_3;
                $("#o_3").text(o_3);

                let o_17 = res.data.o_17;
                $("#o_17").text(o_17);

                let o_13 = res.data.o_13;
                $("#o_13").text(o_13);

            }
        },'json')
    }

    //美国备货订单列表
    function mgbhorders(type = 0){
        $.post("/workshopshow/mgbhorders",{page:page},function(res){
            if(res.code == 1){
                alert(type)
                if(type == 1){
                    page = page -1;
                }else{
                    page = page + 1;
                }
                let tplStr = document.getElementById('edit_content').innerHTML;
                //let outputHtml = compiledTemplate.fetch({ data: data });
                let outputHtml =  ejs.render(tplStr, {data: res.data});
                $("#bh_box").html(outputHtml);
            }else{
                if(type == 1){
                    page = page + 1;
                }else{
                    page = page - 1;
                }
                layx.msg(res.msg,{dialogIcon:'warn', position:'cc'});
            }
        },'json')
    }
    function getOrderList(that){
        let type = $(that).data("type");
        if(type == 1){
            let tmp_page = page - 1;
            if(tmp_page <= 0){
                layx.msg('已经是第一页了',{dialogIcon:'warn', position:'cc'});
                return;
            }
           

        }else{
            
        }
        mgbhorders(type);
    }
    





    
</script>

<script type="text/javascript" src="{$theme}js/laydate.js"></script>
<script type="text/javascript" src="{$theme}js/ejs.min.js"></script>
<script id="edit_content" type="text/html">
<% for(let key in data) { %>
<tr>
    <td><%= data[key]['orderinfo'] %></td>
    <td><%= data[key]['bhsum'] %></td>
    <td><%= data[key]['printnum'] %></td>
    <td><%= data[key]['wcnum'] %></td>
    <td><span class="badge badge-warning"><%= data[key]['wwgnum'] %></span></td>
</tr>
<% } %>

</script>
{Template footer}