liuhairui
/
tool


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    * {
        box-sizing: border-box;
    }

    html, body {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    td, th {
        padding: 0;
    }

    .whole {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
        padding: 16px;
    }

    .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
        width: 100%;
        table-layout: fixed;
        word-break: break-all;
    }

    .pure-table caption {
        color: #000;
        font: italic 85%/1 arial, sans-serif;
        padding: 1em 0;
        text-align: center;
    }

    .pure-table td, .pure-table th {
        border-left: 1px solid #cbcbcb;
        border-width: 0 0 0 1px;
        font-size: 14px;
        margin: 0;
        overflow: hidden;
        padding: .5em .6em;
        text-align: center;
    }

    .pure-table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: center;
        vertical-align: middle;
    }

    .pure-table td {
        background-color: transparent;
    }

    .pure-table-bordered td {
        border-bottom: 1px solid #cbcbcb;
    }

    .pure-table-bordered tbody > tr:last-child > td {
        border-bottom-width: 0;
    }

    .machine {
        flex: 1 1 calc(33.333% - 16px);
        min-width: 300px;
        max-width: 100%;
        border: 1px dashed #999;
        padding: 12px;
        height: auto;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        background: #fff;
    }

    .machine h1 {
        text-align: center;
        margin: 0 0 12px;
        font-size: 20px;
    }

    .machine h2 {
        text-align: center;
    }

    .machine .order {
        margin-bottom: 16px;
    }

    .machine table {
        margin: 0 auto;
        width: 100%;
    }

    .zcolor {
        cursor: pointer;
        text-decoration: underline;
    }

    @media (max-width: 1400px) {
        .machine {
            flex: 1 1 calc(50% - 16px);
        }
    }

    @media (max-width: 768px) {
        .whole {
            padding: 10px;
            gap: 10px;
        }

        .machine {
            flex: 1 1 100%;
            min-width: 0;
            max-height: none;
        }

        .pure-table td, .pure-table th {
            font-size: 12px;
            padding: .4em .3em;
        }
    }
</style>
<script src="__CDN__/assets/js/jquery2.1.1.min.js"></script>
<div class="whole">
    {foreach name="list" id="value" }
    <div class="machine">
        <div>
            <input type="hidden" value="{$key}" name="name" class="key">
            <h1>JY{$key}号机</h1>
        </div>
        {foreach name="value" id="vol" }
        <div class="order">
            <!--            <h2>工单号：xxx</h2>-->
            <table class="pure-table pure-table-bordered" >
                <thead>
                    <tr>
                        <th>工单号</th>
                        <th>专色墨</th>
                        <th>领用(kg)</th>
                        <th>退还(kg)</th>
                    </tr>
                    </thead>
                    {foreach name="vol.lRes" id="val"}
                    <tbody>
                    <tr>
                        <td>{$val.order_number}</td>
                        <td class="zcolor" data-type="1">{$val.color}</td>
                        <td>{$val.weight}</td>
                        {if $val.back_weight eq ''}
                        <td ><span style="color: red">*</span></td>
                        {else}
                        <td >{$val.back_weight}</td>
                        {/if}
                    </tr>
                    </tbody>
                    {/foreach}
                    {foreach name="vol.lR" id="val"}
                    <tbody>
                    <tr>
                        <td>{$val.order_number}</td>
                        <td class="zcolor" data-type="2">{$val.ink_name}</td>
                        <td >{$val.out_weight}</td>
                        {if $val.back_weight eq ''}
                        <td ><span style="color: red">*</span></td>
                        {else}
                        <td >{$val.back_weight}</td>
                        {/if}
                    </tr>
                </tbody>
                {/foreach}
            </table>
        </div>
        {/foreach}
    </div>
    {/foreach}
</div>
<script>
    /*$(".order_num").click(function(){
        // var order_num = $(this).html()
        layer.open({
            type: 2,
            title:'领退料信息工单号查询',
            area: ['100%', '100%'],
            content: 'machine_sit_show?order_num='+$(this).html()
            //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
        });
    });*/
    $(".zcolor").click(function(){
        var order_num = $(this).prev().text();//工单号
        var collar = $(this).text();//专色墨名称
        var datatype= $(this).attr("data-type");
        var jh = $(this).parent().parent().parent().parent().prev().children().val();//机号 目的代表哪个机器下的数据
        if (jh == ''){
            jh = $(this).parent().parent().parent().parent().prev().prev().children().val();
            if (jh == ''){
                jh = $(this).parent().parent().parent().parent().prev().prev().prev().children().val();
            }
        }
        layer.open({
            type: 2,
            title:'领退料信息专色墨查询',
            area: ['100%', '100%'],
            content: 'machine_collar_show?order_num='+order_num+'&datatype='+datatype+'&jh='+jh+'&collar='+encodeURIComponent(collar)
            //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
        });
    })
</script>
</body>
</html>