hexiugang
/
iamberry-common-parent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        article, section, time, aside {
            display: block;
        }
        .point-time {
            content: "";
            position: absolute;
            width: 15px;
            height: 15px;
            line-height: 15px;
            top: 35%;
            left: 48%;
            background: #1c87bf;
            margin-left: -5px;
            border-radius: 50%;
            box-shadow: 0 0 0 5px #fff;
            font-size: 12px;
            text-align: center;
            color: #fff;
        }

        .text-red {
            color: #f6393f;
        }

        .text-blue {
            color: #1c87bf;
        }

        .text-green {
            color: #999;
        }

        .text-yellow {
            color: #ffb902;
        }

        .text-purple {
            color: #d32d93;
        }
        .text-left{
            text-align: left;
            text-indent: 1em;
        }
        .text-right{
            text-align: right;
            padding-right: 1em;
        }
        .point-red {
            background-color: #f6393f;
        }

        .point-blue {
            background-color: #1c87bf;
        }

        .point-green {
            background-color: #95c91e;
        }

        .point-yellow {
            background-color: #ffb902;
        }

        .point-gray {
            background-color: #999;
        }

        .point-purple {
            background-color: #d32d93;
        }

        .content {
            width: 100%;
            margin: 0 auto;
        }
        .content article {
            position: relative;
        }
        .content article > h3 {
            width: 100%;
            text-align: center;
            font-size: 1.4em;
            color: #fff;
            padding: 10px 0 20px;
            background-color: #32a3d8;
            margin: 0 0 10px 0;
        }
        .content article section {
            padding: 10px 0 10px;
            position: relative;
        }
        .content article section:before {
            content: "";
            width: 5px;
            top: 23px;
            bottom: -50px;
            left: 48%;
            background: #e6e6e6;
            position: absolute;
        }
        .content article section:last-child:before {
            display: none;
        }
        .content article section time {
            width: 45%;
            display: block;
            position: absolute;
            text-align: right;
        }
        .content article section time > span {
            display: block;
        }
        .content article section aside {
            color: #3a3a38;
            margin-left: 55%;
            min-height: 50px;
        }
        .content article section aside > span{
            display: block;
        }
        .content article section .brief {
            color: #9f9f9f;
        }

        .class-hidden {
            display: none;
        }

        /*设置Select样式*/
        select {
            border-width: 0px;
            border-top-style: none;
            border-right-style: none;
            border-left-style: none;
            border-bottom-style: none;
            overflow:hidden;
            -webkit-appearance: none;
        }

        select option {
            text-align: center;
            color: blue;
        }

        .add-title-left{position: absolute;right: 0;top: 15%;}
        .add-title-right{position: absolute;left: 55%;top:33%;}
        .my-btn-edit{padding: 6px 20px;background-color: #fff;color: #32a3d8;border: 1px solid #32a3d8;cursor:pointer;margin: 5px 0 5px 0;}
        .list-main{list-style-type: none;margin: 0;padding: 10px;overflow-x: scroll;white-space: nowrap;}
        .list-main>li{display: table-cell;min-width: 450px;position: relative;width: 450px;margin-right: 20px;border: 1px solid rgba(0,0,0,.1);}
    </style>
<#include "/base/list_base.ftl">
</head>
<body>
<div><input type="hidden" value="${deviceId!}" id="deviceId"></div>
<ul class="list-main">
    <#--<li>
        <div class="content">
            <article>
                <h3>净水机</h3>
                <section>
                    <span class="point-time point-yellow">1</span>
                    <time>
                        <span>净水机需求清洗物料</span>
                        <span class="text-blue">员工：张三（a5）</span>
                    </time>
                    <aside>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </aside>
                </section>
                <section>
                    <span class="point-time point-red">2</span>
                    <time>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </time>
                    <aside>
                        <span>t1滤芯组装</span>
                        <span class="text-blue">员工：李二二（a4）</span>
                    </aside>
                </section>
                <section>
                    <span class="point-time point-green">3</span>
                    <time>
                        <span>t3滤芯组装</span>
                        <span class="text-blue">员工：钟小小（a4）</span>
                    </time>
                    <aside>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </aside>
                </section>
                <section>
                    <span class="point-time point-red">4</span>
                    <time>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </time>
                    <aside>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加员工</button></span>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加设备</button></span>
                        <span class="add-title-right">接头加工</span>
                    </aside>
                </section>
                <section>
                    <span class="point-time point-green">5</span>
                    <time>
                        <span class="text-left"><button type="button" class="my-btn-edit">添加员工</button></span>
                        <span class="text-left"><button type="button" class="my-btn-edit">添加设备</button></span>
                        <span class="add-title-left">接头加工</span>
                    </time>
                    <aside>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </aside>
                </section>
                <section>
                    <span class="point-time point-blue">6</span>
                    <time>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </time>
                    <aside>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加员工</button></span>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加设备</button></span>
                        <span class="add-title-right">接头加工</span>
                    </aside>
                </section>
                <section>
                    <span class="point-time point-red">7</span>
                    <time>
                        <span class="text-left"><button type="button" class="my-btn-edit">添加员工</button></span>
                        <span class="text-left"><button type="button" class="my-btn-edit">添加设备</button></span>
                        <span class="add-title-left">接头加工</span>
                    </time>
                    <aside>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </aside>
                </section>
                <section>
                    <span class="point-time point-blue">8</span>
                    <time datetime="2012-02">
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </time>
                    <aside>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加员工</button></span>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加设备</button></span>
                        <span class="add-title-right">接头加工</span>
                    </aside>
                </section>
            </article>
        </div>
    </li>

    <li>
        <div class="content">
            <article>
                <h3>净水机</h3>
                <section>
                    <span class="point-time point-yellow">1</span>
                    <time>
                        <span>净水机需求清洗物料</span>
                        <span class="text-blue">员工：张三（a5）</span>
                    </time>
                    <aside>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </aside>
                </section>
                <section>
                    <span class="point-time point-red">2</span>
                    <time>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </time>
                    <aside>
                        <span>t1滤芯组装</span>
                        <span class="text-blue">员工：李二二（a4）</span>
                    </aside>
                </section>
                <section>
                    <span class="point-time point-green">3</span>
                    <time>
                        <span>t3滤芯组装</span>
                        <span class="text-blue">员工：钟小小（a4）</span>
                    </time>
                    <aside>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </aside>
                </section>
                <section>
                    <span class="point-time point-red">4</span>
                    <time>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </time>
                    <aside>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加员工</button></span>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加设备</button></span>
                        <span class="add-title-right">接头加工</span>
                    </aside>
                </section>
                <section>
                    <span class="point-time point-green">5</span>
                    <time>
                        <span class="text-left"><button type="button" class="my-btn-edit">添加员工</button></span>
                        <span class="text-left"><button type="button" class="my-btn-edit">添加设备</button></span>
                        <span class="add-title-left">接头加工</span>
                    </time>
                    <aside>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </aside>
                </section>
                <section>
                    <span class="point-time point-blue">6</span>
                    <time>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </time>
                    <aside>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加员工</button></span>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加设备</button></span>
                        <span class="add-title-right">接头加工</span>
                    </aside>
                </section>
                <section>
                    <span class="point-time point-red">7</span>
                    <time>
                        <span class="text-left"><button type="button" class="my-btn-edit">添加员工</button></span>
                        <span class="text-left"><button type="button" class="my-btn-edit">添加设备</button></span>
                        <span class="add-title-left">接头加工</span>
                    </time>
                    <aside>
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </aside>
                </section>
                <section>
                    <span class="point-time point-blue">8</span>
                    <time datetime="2012-02">
                        <!--<span></span>
                        <span></span>&ndash;&gt;
                    </time>
                    <aside>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加员工</button></span>
                        <span class="text-right"><button type="button" class="my-btn-edit">添加设备</button></span>
                        <span class="add-title-right">接头加工</span>
                    </aside>
                </section>
            </article>
        </div>
    </li>-->
</ul>
<script type="text/javascript">

    $(function(){
        var deviceId = $('#deviceId').val();
        $.ajax({
            cache: true,
            type: "POST",
            url: "${path}/admin/equipment/select_produce_process",
            async: false,
            success: function(data){
                if (data.returnCode == 200) {
                    var data_produce = data.returnMsg.objMap.produceList;
                    var employeeList = data.returnMsg.objMap.employeeList;
                    var deviceList = data.returnMsg.objMap.deviceList;
                    var table = document.body.querySelector('.list-main');
                    var tab_name = $('#tab_title');
                    var tab_text = '';
                    var id_num = 1;

                    $.each(data_produce, function(i,item){
                        var this_produce = this;

                        var li = document.createElement('li');
                        var process = '';
                        var data_process = this_produce.process;
                        $.each(data_process, function(j,obj){
                            id_num++;
                            var this_process = this;
                            var tb_user = '';
                            var tb_device = '';
                            var point_class = '';
                            if (deviceId == this_process.driveId) {
                                point_class = 'point-red';
                            } else {
                                point_class = 'point-blue';
                            }
                            if (this_process.employeeName == null || this_process.employeeName == undefined) {
                                var employee_option = '<option value="">选择员工</option>';
                                $.each(employeeList, function(n,nobj){
                                    var employee_list = this;
                                    employee_option += '<option value="' + employee_list.employeeId + '">' + employee_list.employeeName + '</option>';
                                });
                                tb_user = '<select id="user' + id_num + '" process="' + this_process.processId + '" onchange="update_process(this,1)">' + employee_option + '</select>&nbsp;&nbsp;&nbsp;&nbsp;';
                            } else {
                                var employee_option = '';
                                $.each(employeeList, function(n,nobj){
                                    var employee_list = this;
                                    if (employee_list.employeeId == this_process.employeeId) {
                                        employee_option += '<option value="' + employee_list.employeeId + '" selected>' + employee_list.employeeName + '</option>';
                                    } else {
                                        employee_option += '<option value="' + employee_list.employeeId + '">' + employee_list.employeeName + '</option>';
                                    }

                                });
                                tb_user = '<select id="user' + id_num + '" process="' + this_process.processId + '" onchange="update_process(this,1)">' + employee_option + '</select>';
                            }
                            if (this_process.deviceName == null || this_process.deviceName == undefined) {
                                var device_option = '<option value="">添加打卡设备</option>';
                                $.each(deviceList, function(n,nobj){
                                    var device_list = this;
                                    device_option += '<option value="' + device_list.deviceId + '">' + device_list.deviceName + '</option>';
                                });
                                tb_device = '(<select id="device' + id_num + '" process="' + this_process.processId + '" onchange="update_process(this,2)">' + device_option + '</select>)';
                            } else {
                                var device_option = '';
                                $.each(deviceList, function(n,nobj){
                                    var device_list = this;
                                    if (this_process.driveId == device_list.deviceId) {
                                        device_option += '<option value="' + device_list.deviceId + '" selected>' + device_list.deviceName + '</option>';
                                    } else {
                                        device_option += '<option value="' + device_list.deviceId + '">' + device_list.deviceName + '</option>';
                                    }
                                });
                                tb_device = '(<select id="device' + id_num + '" process="' + this_process.processId + '" onchange="update_process(this,2)">' + device_option + '</select>)';
                            }
                            if (j % 2 == 0) {
                                process += '<section>'
                                        + '<span class="point-time ' + point_class + '">' + (j+1)
                                        + '</span>'
                                        + '<time>'
                                        + '<span>' + this_process.processName
                                        + '</span>'
                                        + '<span class="text-blue">' + tb_user + tb_device
                                        + '</span>'
                                        + '</time>'
                                        + '<aside>'
                                        + '</aside>'
                                        + '</section>'
                            } else {
                                process += '<section>'
                                        + '<span class="point-time ' + point_class + '">' + (j+1)
                                        + '</span>'
                                        + '<time>'
                                        + '</time>'
                                        + '<aside>'
                                        + '<span>' + this_process.processName
                                        + '</span>'
                                        + '<span class="text-blue">' + tb_user + tb_device
                                        + '</span>'
                                        + '</aside>'
                                        + '</section>'
                            }
                        });
                        li.innerHTML = '<div class="content"><article><h3>' + this_produce.produceName + '</h3>' + process + '</article></div>';
                        li.id = 'tab_li' + i;
                        li.setAttribute("index", i);
                        table.appendChild(li);
                    });
                    tab_name.html(tab_text);
                }
            },
            error: function(XmlHttpRequest, textStatus, errorThrown){

            }
        });
    });

    function update_process(obj,num) {
        var processId = obj.getAttribute("process");
        var id = obj.getAttribute("id");
        var value = $('#' + id + ' option:selected').val();
        var data = null;
        if (confirm("您确定修改吗？")) {
            //num=1则是修改员工信息，num=2则是修改设备信息
            if (num == 1) {
                data = {
                    processId: processId,
                    employeeId: value
                }
            } else if(num == 2) {
                data = {
                    processId: processId,
                    driveId: value
                }
            }
            $.ajax({
                cache: true,
                type: "POST",
                data: data,
                url: "${path}/admin/equipment/update_process_info",
                async: false,
                success: function(dt){
                    if (dt.returnCode == 200) {
                        alert('恭喜您，修改成功!');
                    } else {
                        alert('对不起，修改失败!');
                    }
                }
            })
        } else {
            location.reload();
        }
    }
</script>
</body>
</html>