@extends('layouts.father')
@section('title', '工序计件')
@section('body')
    <audio src="/images/工作3.mp3" id="voice"></audio>
    <div class="login-aml" style="height: 100%"  id ='picture' >
        {{csrf_field()}}
        <div class="tool">
            <img src="/images/lclog.png" alt="Logo" height="120px">
            <div class="mix-div">当前工序：<span class="gongxu">{{$imeis->process}}</span></div>
            <div class="mix-div" id="ns">操作员：@foreach($worker as $k) {{$k->name}}  @endforeach </div>
            <div class="layui-btn layui-bg-black" style="position: absolute; right: 100px;" onclick="reload()">刷新</div>
            <div class="layui-btn layui-bg-black" style="position: absolute; right: 20px;" onclick="logout()">注销</div>
        </div>
        <div style="padding-left: 12px;padding-right: 12px;">
            <!-- <div class="worker"> -->
            <!-- <div style="text-align: center; margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
            <div id="refresh" style="width:64px"></div>
            <b style="font-size: 24px;">布匹检验系统</b>
        </div> -->
            <div style="display: flex;" class="all">
                <div class="main-div" style="display: flex; flex-direction: column; align-items: flex-start; padding-left: 0px; padding-top: 10px; margin-right: 20px;width:130%">
                    <div style="display:flex;">
                        <input type="text" class="in-reel" id="reel_input" placeholder="请扫描明细码">
                        <div id="fanxius" class="layui-btn layui-bg-black layui-btn-lg" style="margin-top: 5px; margin-left: 30px; padding-left: 10px; padding-right: 10px;" onclick="showHistory()">查看之前工序</div>
                        <div class="layui-btn layui-bg-red layui-btn-lg" style="margin-top: 5px; margin-left: 32px;" onclick="WorkRecord();">查看明细</div>
                        <div class="layui-btn  layui-btn-lg" id="deletemxm" style="display:none;margin-top: 5px; margin-left: 32px; background-color: red" onclick="deleteMxm();">删除计件</div>
                        {{--                        <div id="imei"></div>--}}
                    </div>
                    <div style="display:flex;">
                        <div id="order_number" style="font-size: 20px; color: white; font-weight: bold;">订单号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div id="mxm" style="font-size: 20px; color: white; font-weight: bold;margin-left: 50px;">明细单:</div>
                    </div>
                    <div style="display:flex;">
                        <div id="gongrencount" style="font-size: 20px; color: white; font-weight: bold; margin-left: 0px; border-right-width: ‒50; margin-right: 140px;">今日完成量:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <div id="setcount" style="font-size: 20px; color: white; font-weight: bold; margin-right: 90px;">设定标准:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <div id="finish" style="font-size: 20px; color: white; font-weight: bold;">完成率:&nbsp;&nbsp;&nbsp;&nbsp;</div>
                    </div>
                </div>
                <div style="width: 50%; height: 170px; display: flex; justify-content: center; align-items: center ; " id="imgess">
               {{-- <div id="imgess" style="font-size: 24px; text-align: center; line-height:150px;width: 60%;background-color: white;height: 85%;color: orangered;"></div>--}}
                </div>
            </div>
            <div class="middle-div" style="padding-left: 0px;margin-top: 20px;">
                <table style="width: 100%; border-collapse: collapse;">
                    <tbody style="background-color: white;">
                    <tr>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">品名:</td>
                        <td id="pm" style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">型号:</td>
                        <td id="xh" style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">工艺定制:</td>
                        <td id="cfkz" style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">窗宽:</td>
                        <td id="ck" style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">开向:</td>
                        <td id="khfx" style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">侧缝靠边:</td>
                        <td id="cfkb" style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">成品宽度:</td>
                        <td id="cpcm"style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">裁剪标准:</td>
                        <td id="cjfs"style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">绑带款式:</td>
                        <td id="bdks"style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">成品高度:</td>
                        <td id="cpgd"style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">数量:</td>
                        <td id="count"style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                        <td style="border: 1px solid black; padding: 8px; height: 30px;">布带类型:</td>
                        <td id="bdlx"style="border: 1px solid black; padding: 8px; height: 30px;"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="middles-div" style="display: none" id="real">
                <div style="width: 100%; height:200px; overflow:auto; ">
                    <div style="display:flex;">
                        <div style="font-size: 20px;color: white;font-weight: bold;margin-top: 50px;margin-right: 30px;">返修:</div>
                        <div style="display: flex; width: 50%">
                            <select id="fxgx" name="city"  style="margin-right: 50px;margin-top: 40px;padding-top: 0px;">
                                <option value="">返修工序</option>
                            </select>
                            <select id="fxbz"name="city" lay-verify="" style="margin-top: 40px;margin-right: 50px;">
                                <option value="">返修备注</option>
                            </select>
                            <select id="find"name="city" lay-verify="" style="margin-top: 40px;">
                                <option value="">发现工序</option>
                            </select>
                        </div>
                        <div class="layui-btn layui-bg-black layui-btn-lg" style="margin-top: 45px;margin-left: 30px;padding-left: 10px;padding-right: 10px;" onclick="sendWrong()">提交返修</div>
                        {{--                        <div class="layui-btn layui-bg-red layui-btn-lg" style="margin-top: 45px;margin-left: 30px;">查看返修情况</div>--}}
                        <div id="FXcodes" style="margin-top: 50px;margin-left: 100px;font-size: 20px;color: white;"></div>
                    </div>
                </div>
            </div>
            <div class="middles-div" style="display: block;padding-left: 0px;"id="false" >
                <div style="width: 90%; height:200px; overflow:auto; ">
                    <div style="display:flex;">
                        <div class="layui-btn layui-bg-black layui-btn-lg" style="display: none;margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 0px;" onclick="repair()" >申请返修</div>
                        @if($imeis->process=="裁剪")
                            <div class="layui-btn layui-bg-black layui-btn-lg" id="yccq" style="display:none; margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 0px;"  onclick="yccq()">裁剪异常</div>
                            <div class="layui-btn layui-bg-black layui-btn-lg" id="yc缺衬布" style="display:none; margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 0px;"  onclick="sendyc('yc缺衬布')">缺衬布</div>
                            <div class="layui-btn layui-bg-black layui-btn-lg" id="yc缺配布" style="display:none;margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 50px;" onclick="sendyc('yc缺配布')">缺配布</div>
                        @elseif($imeis->process=="验布")
                            <div class="layui-btn layui-bg-black layui-btn-lg" id="ycyb" style="display:none; margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 0px;"  onclick="ycyb()">验布异常</div>
                            <div class="layui-btn layui-bg-black layui-btn-lg" id="yc重做" style="display:none; margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 0px;"  onclick="sendyc('yc重做')">重做</div>
                            <div class="layui-btn layui-bg-black layui-btn-lg" id="yc挖角" style="display:none;margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 50px;" onclick="sendyc('yc挖角')">挖角</div>
                            <div class="layui-btn layui-bg-black layui-btn-lg" id="yc洗布" style="display:none;margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 50px;" onclick="sendyc('yc洗布')">洗布</div>
                            <div class="layui-btn layui-bg-black layui-btn-lg" id="yc返修" style="display:none;margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 50px;" onclick="sendyc('yc返修')">返修</div>
                            <div class="layui-btn layui-bg-black layui-btn-lg" id="yc返定型" style="display:none;margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 50px;" onclick="sendyc('yc返定型')">返定型</div>
                            <div class="layui-btn layui-bg-black layui-btn-lg" id="yc返揽花" style="display:none;margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 50px;" onclick="sendyc('yc返揽花')">返揽花</div>
                            <div class="layui-btn layui-bg-black layui-btn-lg" id="yc返侧边" style="display:none;margin-top: 45px;padding-left: 10px;padding-right: 10px;margin-left: 50px;" onclick="sendyc('yc返侧边')">返侧边</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="/js/qrcode.min.js"></script>
        <script src="/js/Quagge.js"></script>
        <script>
            /*安卓接口交互能拿到设备码*/
            // function receiveDataFromAndroid(data) {
            //     document.getElementById("imei").innerHTML = data;
            // }
            var music_type = false

            let mxmall="";
            layui.use(['layer', 'form'], function(){
                var layer = layui.layer
                    ,form = layui.form;
            });
            window.onload = function() {
                var input = document.getElementById('reel_input');
                // 如果找到了输入框，则将焦点设置到它上面
                if (input) {
                    input.focus();
                }
            };
            let mxms
            $(document).keyup(function(event){

                if(event.keyCode !== 13){
                    return
                }
                if(event.keyCode ==13){
                    focus($('#reel_input'));
                    if(event.target.id === 'reel_input'){
                        // repairGo()
                        mxms = $("#reel_input").val();
                        document.getElementById("real").style.display = "none";
                        document.getElementById("false").style.display = "block";
                        var selectElement = document.getElementById('fxbz');
                        selectElement.value="";
                        var selectElement1 = document.getElementById('fxgx');
                        selectElement1.value="";
                        var selectElement2 = document.getElementById('find');
                        selectElement2.value="";
                        $('#FXcodes').html("");
                        focus('#reel_input');
                        count(mxms)
                        $("#reel_input").val("");
                    }
                    if($('#wrongCode').length > 0){
                        focus($('#AuthCode'))
                    }
                }
            });
            function logout() {
                $.get("/admin/zhuxiao?imei={{$imeis->code}}&user={{$user_id}}", function (res) {
                    // 发异步，把数据提交给php
                    if (res.status == 1) {
                        console.log('注销');
                        //发异步把用户状态进行更改
                        layer.msg(res.msg,{icon: 6,time:1000},function () {
                            location.href = '/admin/workLogins?imei='+res.data;
                        });
                    } else {

                        layer.alert(res.msg, {icon: 5});
                    }
                });
            }
            var layerIndex;

            //
            function repair(){
                focus('#wrongCode');
                layui.use(['layer'], function() {
                    var layer = layui.layer;
                    layerIndex= layui.layer.open({
                        type:1,
                        cancel:function(){focus('#reel_input');$("#AuthCode").val('')},
                        title:"输入授权码",
                        area:['400px','270px'],
                        content: '<div style="padding: 20px; text-align: center;"><div style="padding:10px; font-size: 20px; display:flex; align-items: center;"><span style="width:30%; text-align:right">返修明细：</span>'+
                            '<input type="text" id="wrongCode" style="height: 40px;line-height: 40px; font-size: 20px; padding:0 10px; width:60%"></div>' +
                            '<div style="padding:10px; font-size: 20px; display:flex; align-items: center;"><span style="width:30%; text-align:right">授权码：</span><input type="password" id="AuthCode" style="height: 40px;line-height: 40px; font-size: 20px; padding:0 10px; width:60%"></div>' +
                            '<button  id="repair"  onclick="repairGo();" style="background: rgb(14,156,214);padding:10px 30px;color:white;border: none">确认</button></div>'
                    })
                });
                focus('#wrongCode');
            }
            // 在全局作用域中定义事件处理函数
            function preventDefaultTouchMove(event) {
                event.preventDefault();
            }

            function preventDefaultWheel(event) {
                event.preventDefault();
            }
            //历史进度
            function showHistory(){
                let mxm = mxms; // 获取明细码
                document.getElementById("fanxius").style.pointerEvents = 'none';
                if(mxm){
                    $.get('/admin/getHistory?number='+mxm , function(res){
                        document.getElementById("fanxius").style.pointerEvents = 'auto';
                        //console.log(res[0].jd);
                        // 移除事件监听器
                        document.removeEventListener('touchmove', preventDefaultTouchMove, {passive: false});
                        document.removeEventListener('wheel', preventDefaultWheel, {passive: false});
                        var cc= res[0].jd;
                        let newHtml="";
                        newHtml += '<table id="data-table" class="new-data-table" style=" width: 92%;border-collapse: collapse;margin-left: 20px;">'+
                            '<thead>'+
                            '<tr>'+
                            '<th>时间</th>'+
                            '<th>工序</th>'+
                            '<th>操作人</th>'+
                            '</tr>'+
                            '</thead>'+
                            '<tbody>'+
                            '</tbody>'+
                            '</table>';
                        cc = cc.replace(/←/g, "←<br>");// 将换行符 \n 替换为 <br> 标签
                        // console.log(cc);
                        // 将数据字符串拆分为数组

                        layui.use(['layer'], function() {
                            var layer = layui.layer;
                            layer.open({
                                type: 1, // 弹窗类型为页面层
                                title: '历史进度'+mxm, // 弹窗标题
                                area: ['500px', '300px'], // 弹窗大小，宽度400px，高度300px
                                resize: false, // 不允许拉伸
                                content:  newHtml, // 弹窗内容
                                cancel: function(index, layero) {
                                    // 添加事件监听器
                                    document.addEventListener('touchmove', preventDefaultTouchMove, {passive: false});
                                    document.addEventListener('wheel', preventDefaultWheel, {passive: false});
                                    layer.close(index); // 关闭弹出层
                                    return false; // 阻止默认关闭操作
                                },
                                success: function(layero, index) {
                                    document.getElementById("fanxius").style.pointerEvents = 'auto';
                                    const dataArray = cc.split('<br>');
                                    // 获取表格的 tbody 元素
                                    const tbody = document.querySelector('#data-table tbody');

                                    // 遍历数据数组并插入到表格中
                                    dataArray.forEach(data => {
                                        // 去除两边的空格
                                        data = data.trim();
                                        if (data) {
                                            // 提取时间部分
                                            const timeMatch = data.match(/\d{2}-\d{2} \d{2}:\d{2}/);
                                            const time = timeMatch ? timeMatch[0] : '';

                                            const parts = data.split(',');
                                            const beforeComma = parts[0];
                                            const afterComma = parts[1].replace(/\d{2}-\d{2} \d{2}:\d{2}/, '').trim();

                                            // 提取工序部分
                                            const processMatch = afterComma.match(/[\u4e00-\u9fa5]+/g);
                                            const process = processMatch && processMatch.length > 0 ? processMatch.join('') : '';

                                            const operatorMatch = beforeComma.match(/[^\d]+[\u4e00-\u9fa5（）/]+/);
                                            const operator = operatorMatch ? operatorMatch[0] : '';

                                            // const operator = beforeComma && beforeComma.length > 0 ? beforeComma : '';


                                            // 创建新的表格行
                                            const tr = document.createElement('tr');
                                            tr.innerHTML = `<td>${time}</td><td>${process}</td><td>${operator}</td>`;
                                            tbody.appendChild(tr);
                                        }
                                    });
                                }

                            });
                        });
                    }).fail(function(error){
                        $('.size-div').html(error)
                    })
                }else {
                    layer.msg("请先扫描明细码")
                    document.getElementById("fanxius").style.pointerEvents = 'auto';
                }

            }
            //返修
            let FXcode="";
            let AuthCode="";
            function repairGo(){
                if($("#wrongCode").val() == ''){
                    layer.msg('未获取到当前需要返修的明细码！');
                    return;
                }
                if($("#AuthCode").val() == ''){
                    layer.msg('未获取到授权码！');
                    return;
                }
                // let FXcode= $("#reel_input").val();
                // let AuthCode= "123";
                FXcode = $("#wrongCode").val();
                AuthCode = $("#AuthCode").val();

                $.get(`/admin/fxCode?code=`+AuthCode+`&number=`+FXcode,function(res){
                    if(res.status){
                        var index = layui.layer.index; // 获取当前弹窗的索引
                        layui.layer.close(index); // 关闭当前弹窗
                        layer.close(layerIndex);
                        document.getElementById("real").style.display = "block";
                        document.getElementById("false").style.display = "none";
                        // 获取 select 元素
                        var selectElement = document.getElementById('fxgx');
                        var selectElement2 = document.getElementById('fxbz');
                        var selectElement3 = document.getElementById('find');
                        $('#FXcodes').html("返修明细码:"+FXcode);

                        res.data.process.forEach(function(item) {
                            var optionElement = document.createElement('option');
                            optionElement.value = item;
                            optionElement.text = item;
                            selectElement.appendChild(optionElement);
                        });
                        res.data.remark.forEach(function(item) {
                            var optionElement2 = document.createElement('option');
                            optionElement2.value = item.remark;
                            optionElement2.text = item.remark;
                            selectElement2.appendChild(optionElement2);
                        });
                        res.data.name.forEach(function(item) {
                            var optionElement3 = document.createElement('option');
                            optionElement3.value = item;
                            optionElement3.text = item;
                            selectElement3.appendChild(optionElement3);
                        });
                    }else{
                        layer.msg(res.msg);
                    }
                    // focus('#reel_input');
                })
            }
            let gongrencount;
            //刷新明细
            function deletes(){
                $('#order_number').html("订单号：");
                $('#mxm').html("明细单：");
                $('#gongrencount').html("今日完成量：");
                $('#pm').html("");
                $('#xh').html("");
                $('#cfkz').html("");
                $('#ck').html("");
                $('#khfx').html("");
                $('#cfkb').html("");
                $('#cpcm').html("");
                $('#cjfs').html("");
                $('#bdks').html("");
                $('#cpgd').html("");
                $('#count').html("");
                $('#bdlx').html("");
                $('#jq').html("");
                $('#setcount').html("设定标准:");
                $('#finish').html("完成率:");
                $("#reel_input").val("")
                focus('#reel_input');

            }
            function go_url(mxms,index) {
                let  type=0;
                const urlParams = new URLSearchParams(window.location.search);
                let idValue = urlParams.get('id');
                if (type !== 1) {
                    let mxm = mxms;
                    layer.close(index)
                    mxmall=mxm// 获取明细码
                    $.get(`/admin/FindOrderMessage?number=${mxm}&gonghao=${idValue}`, res => {
                        $('#order_number').html("订单号：" + res.data.order_number);
                        $('#mxm').html("明细单：" + res.data.mxm);
                        gongrencount=$('#gongrencount').html("今日完成量：" + res.data.gongrencount);
                        $('#pm').html(res.data.pm);
                        $('#xh').html(res.data.xh);
                        $('#cfkz').html(res.data.cfkz);
                        $('#ck').html(res.data.ck);
                        $('#khfx').html(res.data.khfx);
                        $('#cfkb').html(res.data.cfkb);
                        $('#cpcm').html(res.data.cpcm);
                        $('#cjfs').html(res.data.cjfs);
                        $('#bdks').html(res.data.bdks);
                        $('#cpgd').html(res.data.cpgd);
                        $('#count').html(res.data.count);
                        $('#bdlx').html(res.data.bdlx);
                        $('#jq').html(res.data.jq);
                        $('#setcount').html("设定标准:"+res.data.setcount+" 件/天");
                        $('#finish').html(res.data.finish);
                        $("#reel_input").val("")
                        focus('#reel_input');

                    })
                    return; // 1 为计件模式
                }
            }


            function focus ( el ){
                $(el).focus()
                var element = $(el);
                if (element.length > 0) {
                    // 获取当前页面的 URL
                    let currentUrl = window.location.href;


                    // 获取元素的 ID 或其他属性来判断
                    if (element.attr('id') === "reel_input") {
                        // 调用隐藏软键盘的安卓方法
                        if (!currentUrl.includes("cs")) {
                            Android.banjianpan();
                        }
                    } else {
                        // 调用显示软键盘的安卓方法
                        if (!currentUrl.includes("cs")) {
                            Android.secure();
                        }

                    }
                } else {
                    console.log("元素未找到: " + el);
                }
            }

            document.getElementById("fxgx").addEventListener("change", function() {
                let selectedOption = this.value;
                sendRequest(selectedOption);
            });
            function sendRequest(value){
                let process=value;
                var selectElement2 = document.getElementById('fxbz');
                selectElement2.innerHTML="";
                $.get(`/admin/fxCode?code=`+AuthCode+`&number=`+FXcode+`&process=`+process,function(res){
                    if(res.status == 1){
                        var optionElementdefault = document.createElement('option');
                        optionElementdefault.value = "";
                        optionElementdefault.text = "请选择";
                        selectElement2.appendChild(optionElementdefault);
                        res.data.remark.forEach(function(item) {
                            var optionElement2 = document.createElement('option');
                            optionElement2.value = item.remark;
                            optionElement2.text = item.remark;
                            selectElement2.appendChild(optionElement2);
                        });
                    }
                })
            }
            function sendWrong(){
                let index=layer.load();
                var selectElement = document.getElementById('fxbz');
                var selectedValue = selectElement.value;
                var selectElement1 = document.getElementById('fxgx');
                var selectedValue1 = selectElement1.value;
                var selectElement2 = document.getElementById('find');
                var selectedValue2 = selectElement2.value;
                if(selectedValue1==""){
                    layer.alert('返修工序为空，不允许提交', {icon: 5});
                    layer.close(index);
                    return;
                }
                if(selectedValue==""){
                    layer.alert('返修备注为空，不允许提交', {icon: 5});
                    layer.close(index);
                    return;
                }
                if(selectedValue2==""){
                    layer.alert('发现工序为空，不允许提交', {icon: 5});
                    layer.close(index);
                    return;
                }
                // 你可以在这里处理选中项的值，比如发送请求或更新页面内容
                $.get(`/admin/doFanxiu?number=`+FXcode+`&process=`+selectedValue1+`&remark=`+selectedValue+`&find=`+selectedValue2,function(res){
                    layer.msg(res.msg);
                    if(res.msg=="返修申请成功"){
                        document.getElementById("real").style.display = "none";
                        document.getElementById("false").style.display = "block";
                        $('#FXcodes').html("");
                        window.location.reload();
                    }
                    layer.close(index);
                    $("#reel_input").val("");

                });

            }
            //用于删除计件信息
            let reckon_id;
            function count(mxms) {
                let mxm = mxms; // 获取明细码
                const urlParams = new URLSearchParams(window.location.search);
                let idValue = urlParams.get('id');
                let index = layer.load();
                let work_reel="";
                let wh_goods="";
                $.get('http://' + window.location.host + `/admin/doEngineering?people=${idValue}&process={{isset($imeis->process)?$imeis->process:''}}&number=` +  mxm + '&work_reel=' + work_reel + '&wh_goods=' + wh_goods, function (res) {

                    // 发异步，把数据提交给php
                    //发异步把用户状态进行更改
                    if(res){
                        $("#loading").hide()
                    }
                    order_number = ''
                    // 扫码几件
                    // if(res.data.hasOwnProperty('goods')  'goods' in res.data){
                    if(Object.prototype.toString.call(res.data) === '[object Object]') {
                        // 如果是对象
                        if ('goods' in res.data) {
                            // 先判断是否有这个属性 说明是否错误
                            // 进入到这个判断后 =>  我们需要判断 是否为null
                            if (res.data.goods !== null && res.data.goods.length > 0) {
                                // 不为 null  则将 值 赋予
                                $('.dataValue').html(res.data.goods)
                                var div = $(".allocation")
                                div.find('button').remove()
                                div.append('<button id="sub" onclick="sub()" style="padding: 0 10px;background: rgb(14,156,214);color: white;border: none" >立即解绑</button>')
                            } else {
                                $('.dataValue').html("")
                                var div = $(".allocation")
                                div.find('button').remove()
                                div.append('<button id="add" onclick="bding()" style="padding: 0 10px;background: rgb(14,156,214);color: white;border: none">立即绑定货位</button>')
                                if($(".gongxu").html() === '验布' ){
                                    var button = $('<button id="yc" onclick="ycing()" style="padding: 0 10px;background: white;border: none"></button>');
                                    button.append('<span style="background: rgb(14,116,224);color: white;">验布异常</span>');
                                    div.append('   验布:').append(button);
                                }
                                if($(".gongxu").html() === '裁剪' ){
                                    var button = $('<button id="yc" onclick="ycings()" style="padding: 0 10px;background: white;border: none"></button>');
                                    button.append('<span style="background: rgb(14,116,224);color: white;">裁剪异常</span>');
                                    div.append('   裁剪:').append(button);
                                }
                            }

                        } else {
                            // 当扫码错误时
                            $('.dataValue').html("")// 将货位 成为空
                            var div = $(".allocation")
                            div.find('button').remove()
                            div.append('<button id="add" onclick="bding()" style="padding: 0 10px;background: rgb(14,156,214);color: white;border: none" >立即绑定货位</button>')
                            if($(".gongxu").html() === '验布' ){
                                var button = $('<button id="yc" onclick="ycing()" style="padding: 0 10px;background: white;border: none"></button>');
                                button.append('<span style="background: rgb(14,116,224);color: white;">验布异常</span>');
                                div.append('   验布:').append(button);
                            }
                            if($(".gongxu").html() === '裁剪' ){
                                var button = $('<button id="yc" onclick="ycings()" style="padding: 0 10px;background: white;border: none"></button>');
                                button.append('<span style="background: rgb(14,116,224);color: white;">裁剪异常</span>');
                                div.append('   裁剪:').append(button);
                            }
                        }

                        if (res.data.order_number) {
                            order_number = res.data.order_number;
                        }
                        //
                        // if(res.data.status !== undefined){
                        //       music_type = true
                        //       status = true
                        //   }else {
                        //       music_type = false
                        //       status = false
                        // }
                        if(mxms){
                            @if($imeis->process=="裁剪")
                            // $('#yccq').css({
                            //     'display':'block'
                            // })
                            @elseif($imeis->process=="验布")
                            $('#ycyb').css({
                                'display':'block'
                            })
                            @endif

                        }
                        setImagePattern()
                        if (res.data.status === '2') {
                            deletes()
                            layer.close(index)
                            $(".size-div").css('color', 'red')
                            $('.his-btn').css({display:"none"});
                            music_type = true
                            status = true
                            layer.msg(res.msg)
                            reckon_id = res.data.id;
                            @if($imeis->process=="裁剪")
                            yccqreturn();
                            @elseif($imeis->process=="验布")
                            ycybreturn();
                            @endif
                            $('#deletemxm').css({
                                'display':'block'
                            })
                            // layer.msg("明细码错误 无法进行打印")
                        } else {
                            $('#deletemxm').css({
                                'display':'none'
                            })
                            go_url(mxm,index)
                            layer.msg(res.msg);
                        @if($imeis->process=="裁剪")
                        yccqreturn();
                        @elseif($imeis->process=="验布")
                        ycybreturn();
                        @endif
                            if(work_reel){
                                mxmArr.unshift(mxm);
                            }
                            $(".size-div").css('color', 'black')
                            $('.his-btn').css({display:"block"});
                            music_type = false
                            status = false
                            if(!res.data.hq){
                                res.data.hq = '2';
                            }
                            if($(".gongxu").html() === '包装' && res.data.hq !== '1'){
                                if(mxm.includes('H')){
                                    // 售后单
                                    $.get('/admin/shPrintBQ?id='+res.data.id , function(res){
                                        var urls = label_print(res);

                                        $('body').html(urls)
                                        for (let gck in gck_number_obj){
                                            $('.'+ gck).JsBarcode(gck_number_obj[gck])
                                        }
                                        setTimeout(function(){
                                            window.print()
                                            window.location.reload()
                                        } , 1000)
                                    })
                                }else if(mxm.includes('hp')){
                                    // 换片单
                                    if(res.data.hasOwnProperty('order')){
                                        // 判断这个是否有order 属性  有就是明细 没有就是售后
                                        $.get("/admin/orderMxDyAll?id="+res.data.order.gck_number,function(res){
                                            var urls = label_print(res);

                                            $('body').html(urls)
                                            for (let gck in gck_number_obj){
                                                $('.'+ gck).JsBarcode(gck_number_obj[gck])
                                            }
                                            setTimeout(function(){
                                                window.print()
                                                window.location.reload()
                                            } , 1000)
                                        })
                                    }else{
                                        // 换片的售后
                                        $.get('/admin/shPrintBQ?id='+res.data.id, function(res){
                                            var urls = label_print(res);

                                            $('body').html(urls)
                                            for (let gck in gck_number_obj){
                                                $('.'+ gck).JsBarcode(gck_number_obj[gck])
                                            }
                                            setTimeout(function(){
                                                window.print()
                                                window.location.reload()
                                            } , 1000)
                                        })
                                    }
                                }else{
                                    // var mxm2= mxm.replace(/-.*/, '');
                                    $.get("/admin/orderMxDyAll?id="+mxm,function(res){
                                        var urls = label_print(res);

                                        $('body').html(urls)
                                        for (let gck in gck_number_obj){
                                            $('.'+ gck).JsBarcode(gck_number_obj[gck])
                                        }
                                        setTimeout(function(){
                                            window.print()
                                            window.location.reload()
                                        } , 1000)
                                    })
                                }
                            }
                            if($(".gongxu").html() === '包装' && res.data.hq === '1'){
                                if(mxm.includes('H')){
                                    // 售后单
                                    layer.confirm('货齐是否要打印？',function(index){
                                        $.get('/admin/shPrintBQ?id='+res.data.id , function(res){
                                            var urls = label_print(res);

                                            $('body').html(urls)
                                            for (let gck in gck_number_obj){
                                                $('.'+ gck).JsBarcode(gck_number_obj[gck])
                                            }
                                            setTimeout(function(){
                                                window.print()
                                                window.location.reload()
                                            } , 1000)
                                        })
                                    });
                                }else if(mxm.includes('hp')){
                                    // 换片单
                                    if(res.data.hasOwnProperty('order')){
                                        // 判断这个是否有order 属性  有就是明细 没有就是售后
                                        layer.confirm('货齐是否要打印？',function(index){
                                            $.get("/admin/orderMxDyAll?id="+res.data.order.gck_number,function(res){
                                                var urls = label_print(res);

                                                $('body').html(urls)
                                                for (let gck in gck_number_obj){
                                                    $('.'+ gck).JsBarcode(gck_number_obj[gck])
                                                }
                                                setTimeout(function(){
                                                    window.print()
                                                    window.location.reload()
                                                } , 1000)
                                            })
                                        });
                                    }else{
                                        // 换片的售后
                                        layer.confirm('货齐是否要打印？',function(index){
                                            $.get('/admin/shPrintBQ?id='+res.data.id, function(res){
                                                var urls = label_print(res);

                                                $('body').html(urls)
                                                for (let gck in gck_number_obj){
                                                    $('.'+ gck).JsBarcode(gck_number_obj[gck])
                                                }
                                                setTimeout(function(){
                                                    window.print()
                                                    window.location.reload()
                                                } , 1000)
                                            })
                                        });
                                    }
                                }else{
                                    // var mxm2= mxm.replace(/-.*/, '');
                                    layer.confirm('货齐是否要打印？',function(index){
                                        $.get("/admin/orderMxDyAll?id="+mxm,function(res){
                                            var urls = label_print(res);

                                            $('body').html(urls)
                                            for (let gck in gck_number_obj){
                                                $('.'+ gck).JsBarcode(gck_number_obj[gck])
                                            }
                                            setTimeout(function(){
                                                window.print()
                                                window.location.reload()
                                            } , 1000)
                                        })
                                    });
                                }
                            }
                        }
                        if($(".gongxu").html() === '验布' && res.data.ybhq == '1'){
                            layui.use(['layer'], function() {
                                var layer = layui.layer;
                                layer.open({
                                    content:"验布已经货齐!",
                                    btn: ['确定'],
                                    yes:function(index,layero){
                                        layer.close(index)
                                    },
                                })
                            })
                            $('#deletemxm').css({
                                'display':'none'
                            })
                        }
                        musicss()

                        if (res.data.status === '2' || res.data.status === 'OK') {
                            $('.allocation').css({
                                display: "block"
                            })
                        }

                        // if (res.data.status === "2") {
                        //     var data = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
                        //     // var data = ''
                        //     if(res.msg.indexOf('重复扫码') !== -1){
                        //         // 说明 重复计件了
                        //         reckon_id = res.data.id;
                        //         layer.msg(res.msg);
                        //         $('.delete-div').css({
                        //             display:"block"
                        //         })
                        //
                        //     }
                        //     // error_message[0].innerHTML = message
                        //     if(document.getElementById('error')){
                        //         if (error_message[0].offsetHeight >= 100) {
                        //             document.getElementById('error').className = 'block'
                        //         } else {
                        //             document.getElementById('error').className = 'none'
                        //         }
                        //     }
                        //
                        // }

                        if (res.data.status === "3") {
                            var url = window.location.href.split("?")
                            var query = url[1].split("&")
                            var imei = null
                            for (var i = 0; i < query.length; i++) {
                                if (query[i].indexOf("imei") !== -1) {
                                    imei = query[i]
                                    break
                                }
                            }
                            var changeImei = imei.split("=")
                            changeImei[1] = res.data.process_data.imei
                            var imeiQueryStr = changeImei.join("=")
                            query[0] = imeiQueryStr

                            var changeUrl = url[0] + "?" + query.join("&")
                            window.location.href = changeUrl

                        }

                    }else{
                        $('.sizediv').css({
                            'color':"black"
                        })
                    }

                    // $(".size-div").text(res.msg);
                    // if(work_reel){
                    //     mxmArr = mxmArr.splice(0 , 6)
                    //     $('.mxm').html('已处理明细码: ' + mxmArr.join('/'))
                    // }
                    // if("work_reel" in res.data){
                    //     work_reel = res.data.work_reel
                    //     $('.work_reel').html("当前工作卷号:" + work_reel + ' ');
                    //
                    // }
                    // if("wh_goods" in res.data){
                    //     wh_goods = res.data.wh_goods
                    //     $('.wh_goods').html("<span style='color: red;'>自动定位: " + wh_goods + '</span> ');
                    // }
                });
            }


            // // 首先定义 preventDefault 函数
            // function preventDefault(event) {
            //     event.preventDefault();
            // }

            // function preventDefaultTouchMove(event) {
            //     event.preventDefault();
            // }
            //
            // function preventDefaultWheel(event) {
            //     event.preventDefault();
            // }
            var allmoney = 0;
            var workurl='<div style="display: flex;justify-content: flex-end;margin:0 10px 10px 0;"><div id="allm" style="margin-top: 10px; margin-left: 10px;align-items: center; display:flex;">总金额：'+allmoney+'</div>'+
                '<div class="layui-input-inline" style="margin-top: 10px; margin-left: 10px; display: none"><input class="layui-input" placeholder="开始日期" name="order_time" id="start" value=""></div>'+
                '<div class="layui-input-inline" style="margin-top: 10px; margin-left: 10px; display: none"><input class="layui-input" placeholder="结束日期" name="affirm_time" id="confirm" value=""></div>'+
                '@foreach($worker as $k)<button class="layui-btn gong layui-btn-small" onclick="workerName({{ json_encode($k->number) }})"> {{$k->name}} </button>@endforeach</div>'+
                '<form class="layui-form" onkeydown="if(event.keyCode==13)return false;">'+
                '<div style="width:100%;overflow:auto; height:300px; ">'+
                '<table class="layui-table" id="inPuttable" lay-size="sm" style="width: 100%; margin: 0px; ">'+
                '<thead style="position: sticky; top: 0; z-index: 100; ">'+
                '<tr class="tr_head">'+
                '<th style="width: 150px;">明细码</th>'+
                '<th style="width: 150px;">工序</th>'+
                '<th style="width: 150px;">金额</th>'+
                '<th>时间</th>'+
                '</tr>'+
                '</thead>'+
                '<tbody id="work-img" style="width:100%;"></tbody></table><div id="pagination" style="text-align: center; position: fixed; bottom: 78px; left: 0; right: 0; margin: 0 auto; width: fit-content; padding: 10px 0;"><div></div></div></div></form>'
            function WorkRecord(){
                layui.use(['layer'], function() {
                    var layer = layui.layer;
                    var laydate = layui.laydate;
                    // 移除事件监听器
                    document.removeEventListener('touchmove', preventDefaultTouchMove, {passive: false});
                    document.removeEventListener('wheel', preventDefaultWheel, {passive: false});
                    layui.layer.open({
                        type:1,
                        cancel:function(){focus('#reel_input')},
                        title:"报工记录",
                        area:['760px','420px'],
                        content: workurl,
                        cancel: function(index, layero) {
                            // 添加事件监听器
                            document.addEventListener('touchmove', preventDefaultTouchMove, {passive: false});
                            document.addEventListener('wheel', preventDefaultWheel, {passive: false});
                            layer.close(index); // 关闭弹出层
                            return false; // 阻止默认关闭操作
                        },
                        success: function(layero, index) {
                            laydate.render({
                                elem: '#start' // 指定元素
                            });
                            laydate.render({
                                elem: '#confirm' // 指定元素
                            });
                            document.querySelector('button.gong').click();
                        }
                    })
                });
            }

            function workerName(x,page,limit){
                page = page || 1;
                $.get(`/admin/workerHistory?gonghao=`+x+`&start=`+$("#start").val()+`&end=`+$("#confirm").val()+ `&page=` + page,function(res){
                    const tbodyx = document.getElementById('work-img');
                    tbodyx.innerHTML = '';
                    var ddt = res.data[0].data
                    // 插入新的行
                    ddt.data.forEach(item => {
                        const row = `<tr>
                <td>${item.number}</td>
                <td>${item.gongyi}</td>
                <td>${nonull(item.wages)}</td>
                <td>${item.time}</td>
            </tr>`;
                        tbodyx.innerHTML += row;
                    });
                    document.getElementById('allm').innerText = '总金额：' + parseFloat(res.data[0].total_wages).toFixed(2);
                    layui.use(['laydate', 'element', 'laypage', 'layer'], function () {
                        laypage = layui.laypage;
                        laypage.render({
                            elem: 'pagination',
                            count: ddt.total, // 数据总数
                            limit: ddt.per_page, // 每页显示的条数
                            curr: ddt.current_page, // 当前页号
                            layout: ['count', 'prev', 'page', 'next'], // 自定义排版['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            jump: function (obj, first) {
                                if (!first) {
                                    workerName(x, obj.curr, obj.limit); // 跳转页面时重新调用 workerName 函数
                                }
                            }
                        });
                    });
                })
            }

            function musicss() {
                if(music_type){
                    var voice = document.getElementById('voice');
                    voice.play()
                }
            }

            function noramal (value){
                if(value == null || value == undefined){
                    return ''
                }else{
                    return value
                }
            }

            var gck_number_obj = {}
            function label_print(res) {
                    console.log(res.data)
                var url = "";
                url += '<div id="order-dy-id">'
                url += '<!--startprint1--><!--打印内容开始-->'
                let i_num = 'txm-img'
                for (let i of res.data) {
                    url += '<div style="width: 4.6cm;height: 6.8cm;font-size: 12px;border: 1px solid #000000;padding: 10px 10px;margin: 0 0 0 5px">'
                    url += '<div class="dy-order-lang" style="width: 100%;text-align: center;"><b style="position:relative;left: -30px">' + i.webname + '</b><b style="position: relative;left: 30px">快递状态：' + i.kd_status + '</b></div>'
                    url += '<div>'
                    url += '<div style="right: 0"><img src="" style="width: 120px;height: 40px" class='+i_num+'></div>'
                    url += '<div style="display: flex;justify-content: space-between">'
                    url += '<div class="dy-order-lang" >'+i.gck_number+'</div>'
                    gck_number_obj[i_num] = i.gck_number
                    i_num = i_num + 'n'
                    url += '<div class="dy-order-lang">'+nonull(i.goods)+'</div>'
                    url += "</div>"
                    // 出货的地址
                    url += '<div class="dy-order-lang">'+i.address+'</div>'
                    url += '<div class="dy-order-lang">门店：' + (i.dymd ? i.dymd : noramal(i.belong))  + '</div>'
                    url += '<div class="dy-order-lang">客户：' + (i.dyyz ? i.dyyz : noramal(i.people)) + '</div>'
                    url += '<div style="display: flex;justify-content: space-between;">'
                    url += '<div style="display: flex;flex-wrap: wrap">'
                    url += '<div class="dy-order-lang">品名：' + i.name + '</div>'
                    let sis_count = 0
                    if (i.sis['魔术贴'] !== undefined) {
                        delete i.sis['帘顶款式']
                        delete i.sis['帘高']
                        delete i.sis['尺码']
                    }
                    for (let n in i.sis) {
                        sis_count++
                        if (n.substr(n.length - 1, 1) === '价') {
                            continue
                        }
                        url += '<div class="dy-order-lang" style="margin-right: 10px">'+n +':'+i.sis[n]+'</div>'
                    }
                    url += '</div>'
                    url += '</div>'
                    url += '<div class="dy-order-lang">型号：' + i.xh + '</div>'
                    if (i.mk) {
                        url += '<div class="dy-order-lang">楣宽：' + i.mk + '</div>'
                    }
                    if (i.count) {
                        url += '<div class="dy-order-lang">数量：' + i.count + '</div>'
                    }
                    url += '<div class="dy-order-lang">订单号：' + i.order_number + '</div>'
                    url += '<div class="dy-order-lang">财务序列号：' + (i.xlh || '') + '</div>'
                    url += '</div>'
                    url += '</div>'
                }
                url += '<!--打印内容结束--><!--endprint1-->'
                url += '</div>'
                return url
            }


            function sendyc(process) {
                var url = 'http://' + window.location.host + '/admin/doEngineering?people={{$user_id}}&process=' + process + '&number=' + mxms;
                $.get(url, function (data) {
                    if (data.data.status === "OK") {
                        var msgIndex = layer.msg(data.msg, {time: 0}); // 弹出消息提示框，设置时间为0表示不自动关闭
                        setTimeout(function(){
                            layer.close(msgIndex); // 关闭消息提示框
                            layer.closeAll(); // 关闭所有弹出层
                        }, 3000); // 5秒后关闭消息提示框
                    } else {
                        layer.msg(data.msg, {time: 2500});
                    }
                });
            }

            function yccq(){
                $('#yccq').css({
                    'display':'none'
                })
                $('#yc缺衬布').css({
                    'display':'block'
                })
                $('#yc缺配布').css({
                    'display':'block'
                })
            }

            function yccqreturn(){
                $('#yccq').css({
                    'display':'block'
                })
                $('#yc缺衬布').css({
                    'display':'none'
                })
                $('#yc缺配布').css({
                    'display':'none'
                })
            }

            function ycyb(){
                $('#ycyb').css({
                    'display':'none'
                })
                $('#yc重做').css({
                    'display':'block'
                })
                $('#yc挖角').css({
                    'display':'block'
                })
                $('#yc洗布').css({
                    'display':'block'
                })
                $('#yc返修').css({
                    'display':'block'
                })
                $('#yc返定型').css({
                    'display':'block'
                })
                $('#yc返揽花').css({
                    'display':'block'
                })
                $('#yc返侧边').css({
                    'display':'block'
                })
            }

            function ycybreturn(){
                $('#ycyb').css({
                    'display':'block'
                })
                $('#yc重做').css({
                    'display':'none'
                })
                $('#yc挖角').css({
                    'display':'none'
                })
                $('#yc洗布').css({
                    'display':'none'
                })
                $('#yc返修').css({
                    'display':'none'
                })
                $('#yc返定型').css({
                    'display':'none'
                })
                $('#yc返揽花').css({
                    'display':'none'
                })
                $('#yc返侧边').css({
                    'display':'none'
                })
            }

            //删除计件信息
            function deleteMxm(){
                $.get('/admin/processCardDel?id='+reckon_id+"&people={{isset($user_id)?$user_id:''}}"  , function(res){

                    // layer.msg(res.msg);
                    // if(res.msg=="删除成功"){
                        $('#deletemxm').css({
                            'display':'none'
                        })
                    // }

                }).fail(function(error){
                    $('.size-div').html(error)
                })
            }
            function  reload(){
                    window.location.reload();
            }
                //图片模式
            function setImagePattern(){
                $.get('/admin/cardPic?number='+mxms , function(res){
                    if(res.data !== undefined){
                        var imgSrc = "{{env('OSS_HOST')}}"+res.data.pic;
                        var xh = res.data.xh;
                        var zhubuArray = [];
                        var peibu1Array = [];
                        var peibu2Array = [];
                        var huabianArray = [];
                        for(var key in xh){
                            if(key.indexOf('主布') !== -1){
                                zhubuArray.push(key)
                            }
                            if(key.indexOf('花边') !== -1){
                                huabianArray.push(key)
                            }
                            if(key.indexOf('1') !== -1){
                                peibu1Array.push(key)
                            }
                            if(key.indexOf('2') !== -1){
                                peibu2Array.push(key)
                            }
                        }
                        var clothStr= '';
                        if(zhubuArray.length > 0){
                            clothStr+= '主布 : ';
                            clothStr += getStr(zhubuArray , xh);
                        }
                        if(peibu1Array.length > 0){
                            clothStr+= ' 配布1 : ';
                            clothStr += getStr(peibu1Array , xh);
                        }
                        if(peibu2Array.length > 0){
                            clothStr+= ' 配布2 : ';
                            clothStr += getStr(peibu2Array , xh);
                        }
                        if(huabianArray.length > 0){
                            clothStr+= ' 花边 : ';
                            clothStr += getStr(huabianArray , xh);
                        }

                        let image_pattern = "<div style='width: 100%;height: 100%'  class='wamp'><div style='margin-left: 10px;margin-top: 5px;'><p style='color: white'></p><img src="+imgSrc+" onclick='imgClick(this)'><div style='width: 100%;height: 100%'>"+clothStr+"</div></div></div>"

                        $('#imgess').html(image_pattern)
                    }else{
                        flag =  true
                    }
                })
            }
            function getStr (arr , obj) {
                var str ='';
                for(var i = 0 ; i < arr.length ; i++ ){
                    if(i === arr.length - 1){
                        str += '/'
                    }
                    str += nonull(obj[arr[i]])
                }
                return str
            }
            function imgClick(e) {
                var box = document.createElement('div');
                var worker = document.querySelector('#picture');
                box.style.width = worker.clientWidth / 2 + 'px';
                box.style.height = worker.clientHeight  + 'px';
                box.style.position = 'absolute';
                box.style.margin = '0 auto';
                box.style.top = '0';
                box.style.bottom = '0';
                box.style.left = '0';
                box.style.right = '0';
                box.style.zIndex = '999'
                box.className = 'img_wamp'
                var fitstElement = worker.firstElementChild
                worker.insertBefore(box , fitstElement)
                var imgUrl = e.src; // 图片地址
                var img = document.createElement('img');
                box.appendChild(img)
                img.src = imgUrl;
                img.style.width ='100%';
                img.style.height = '100%';
                box.onclick = function(){
                    box.remove();
                    document.getElementById('txt_Title').focus()
                }
            }


            // 添加事件监听器
            document.addEventListener('touchmove', preventDefaultTouchMove, {passive: false});
            document.addEventListener('wheel', preventDefaultWheel, {passive: false});



        </script>
        <script type="text/javascript" src="/js/tableContentRoll.js"></script>
        <link rel="stylesheet" href="/css/tableContentRoll.css">
        <style>
            .worker{
                border: 1px solid #000000;
                width: 750px;
                margin: 0 auto;
                position: relative;
            }
            .sticky-header th {
                background-color: #f2f2f2;
                position: sticky;
                top: 0;
                z-index: 1;
            }
            .wamp{
                width: 100px;
                /*margin: 40px 0;*/
                text-align: center;
            }
            .wamp img{
                width: 150px;
            }
            .tool{
                display:flex;
                width: 750px;
                height: 100px;
                padding:10px;
                align-items: center;
                color: #fff;
            }
            .tool > div{
                float: right;
            }
            .all{
                border-top: 8px solid #fff; /* 上边框 */
            }
            .main-div{
                display: flex;
                /*border-top: 8px solid #fff; !* 上边框 *!*/
                /*border-bottom: 1px solid #000000; !* 下边框 *!*/
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                height: 10rem;
                overflow: auto;
                padding:0 10px;
            }
            .middle-div{
                display: flex;
                /*border-bottom: 1px solid #000000; !* 下边框 *!*/
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                height: 20rem;
                padding-left:10px;
            }
            .in-meter{
                height: 50px;
                width: 120px;
                font-size: 26px;
            }
            .in-reel{
                height: 50px;
                width: 310px;
                font-size: 24px;
            }
            .jy-btn {
                display: inline-block;
                height: 48px;
                line-height: 48px;
                padding: 0 18px;
                background-color: #1e9fff;
                color: #fff;
                white-space: nowrap;
                text-align: center;
                font-size: 18px;
                border: none;
                border-radius: 2px;
                cursor: pointer;
                width: 86px;
                margin-bottom: 30px;
            }
            .Njy-btn {
                display: inline-block;
                height: 48px;
                line-height: 48px;
                padding: 0 18px;
                background-color: red;
                color: #fff;
                white-space: nowrap;
                text-align: center;
                font-size: 18px;
                border: none;
                border-radius: 2px;
                cursor: pointer;
                width: 86px;
            }
            .new-btn {
                width: 120px;
            }
            .datarow{
                /* padding-left:10px;
                padding-right:10px; */
            }
            .mix-div{
                margin-left: 10px;
                font-size: 22px;
            }
            .sizediv{
                padding: 0 10px 10px 10px;
                font-size: 22px;
            }
            #music{
                width: 100px;
                height: 100px;
                background-color: #df5000;
            }
            #error{
                position: absolute;
                right: 0;
                bottom: -30px;
                font-size: 18px;
            }
            .block{
                display: block;
            }
            .none{
                display: none;
            }
            #error3{
                font-size: 2rem;
                color: red;
                text-align: center;
            }
            .none_button{
                float: right;
                position: relative;
                border: none;
                bottom: -30px;
                left: -20px;
            }
            .keyboard {          /*兼容低版本安卓css*/
                width: 250px;
                margin-top: 10px;
                float: right;
            }
            .login-aml{
                background:url(../images/lcbg.png) no-repeat center;
                background-size: cover;
                overflow: hidden;
                padding: 10px;
            }
            .key {
                font-size: 24px;
                width: calc(33.33% - 5px); /* 计算每个按键的宽度，减去间距 */
                height: 52px;
                font-weight: bold;
                float: left;
                margin-right: 5px;
                margin-bottom: 5px;
                box-sizing: border-box;
                text-align: center;
                background-color: #f0f0f0;
                border: 1px solid #ccc;
                border-radius: 3px;
                padding: 10px;
                box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
                transition: background-color 0.3s, transform 0.3s;
            }
            .key:hover {
                background-color: #ccc;
            }
            td {
                border: 1px solid black;
                padding: 8px;
                height: 60px;
                width: 16.66%;
                font-size: 20px;
            }
        </style>


    </div>
    <script type="text/javascript" src="/js/qrcode.min.js"></script>
    <script src="/js/Quagge.js"></script>
    <script>
    </script>
    <script type="text/javascript" src="/js/tableContentRoll.js"></script>
    <link rel="stylesheet" href="/css/tableContentRoll.css">
    <style>
        .worker{
            border: 1px solid #000000;
            width: 750px;
            margin: 0 auto;
            position: relative;
        }
        .sticky-header th {
            background-color: #f2f2f2;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        .wamp{
            width: 100px;
            /*margin: 40px 0;*/
            text-align: center;
        }
        .wamp img{
            width: 150px;
        }
        .tool{
            display:flex;
            width: 750px;
            height: 100px;
            padding:10px;
            align-items: center;
            color: #fff;
        }
        .tool > div{
            float: right;
        }
        .main-div{
            display: flex;
            /*border-top: 8px solid #fff; !* 上边框 *!*/
            /*border-bottom: 1px solid #000000; !* 下边框 *!*/
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            height: 10rem;
            overflow: auto;
            padding:0 10px;
        }
        .middle-div{
            display: flex;
            /*border-bottom: 1px solid #000000; !* 下边框 *!*/
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            height: 11rem;
            padding-left:10px;
        }
        .middles-div{
            display: flex;
            /*border-bottom: 1px solid #000000; !* 下边框 *!*/
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            height: 7rem;
            padding-left:10px;
        }
        .in-meter{
            height: 50px;
            width: 120px;
            font-size: 26px;
        }

        .in-reel{
            height: 50px;
            width: 310px;
            font-size: 24px;
        }
        .jy-btn {
            display: inline-block;
            height: 48px;
            line-height: 48px;
            padding: 0 18px;
            background-color: #1e9fff;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 18px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            width: 86px;
            margin-bottom: 30px;
        }
        .Njy-btn {
            display: inline-block;
            height: 48px;
            line-height: 48px;
            padding: 0 18px;
            background-color: red;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 18px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            width: 86px;
        }
        .new-btn {
            width: 120px;
        }
        .datarow{
            /* padding-left:10px;
            padding-right:10px; */
        }
        .mix-div{
            margin-left: 10px;
            font-size: 22px;
        }
        .sizediv{
            padding: 0 10px 10px 10px;
            font-size: 22px;
        }
        #music{
            width: 100px;
            height: 100px;
            background-color: #df5000;
        }
        #error{
            position: absolute;
            right: 0;
            bottom: -30px;
            font-size: 18px;
        }
        .block{
            display: block;
        }
        .none{
            display: none;
        }
        #error3{
            font-size: 2rem;
            color: red;
            text-align: center;
        }
        .none_button{
            float: right;
            position: relative;
            border: none;
            bottom: -30px;
            left: -20px;
        }
        .keyboard {          /*兼容低版本安卓css*/
            width: 250px;
            margin-top: 10px;
            float: right;
        }
        .login-aml{
            background:url(../images/lcbg.png) no-repeat center;
            background-size: cover;
            overflow: hidden;
            padding: 10px;
        }
        .key {
            font-size: 24px;
            width: calc(33.33% - 5px); /* 计算每个按键的宽度，减去间距 */
            height: 52px;
            font-weight: bold;
            float: left;
            margin-right: 5px;
            margin-bottom: 5px;
            box-sizing: border-box;
            text-align: center;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 10px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s, transform 0.3s;

        }
        .key:hover {
            background-color: #ccc;
        }
        td {
            border: 1px solid black;
            padding: 8px;
            height: 60px;
            width: 16.66%;
            font-size: 20px;
        }
        .new-data-table {
            width: 100%;
            border-collapse: collapse;
        }
        .new-data-table th, .new-data-table td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        .new-data-table th {
            background-color: #f2f2f2;
            text-align: left;
        }
        .new-data-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .wamp{
            width: 100px;
            /*margin: 40px 0;*/
            text-align: center;
        }
        .wamp img{
            width: 110px;
        }
    </style>
@endsection