@extends('layouts.father')
@section('title', '布匹检验')
@section('style')
@section('body')
  <div class="login-aml" style="height: 100%" >
  {{csrf_field()}}
    <div class="tool">
      <div style="display:flex; align-items: center; justify-content: space-between; width:50%">
        <img src="/images/amllog.png" alt="Logo">
        <div class="mix-div">当前工序：<span class="gongxu">面料质检</span></div>
        <div class="mix-div">操作员：<div id="people"></div> </div>
      </div>
        <div class="layui-btn" onclick="logout()">退出</div>
    </div>
    <div>
    <div>
    <!-- <div class="worker"> -->
        <div class="main-div">
            <div action="" class="layui-form-item layui-form" style="display: flex; align-items: center; justify-content: space-evenly;  width: 100%;">
                <div class="layui-inline">
                    <div class="layui-input-inline li_input">
                        <select name="status">
                          <option disabled selected>请选择供应商</option>
                          <option>功能暂无</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline li_input">
                        <select name="status">
                          <option disabled selected>请选择供应型号</option>
                          <option>功能暂无</option>
                        </select>
                    </div>
                </div>
                <div style="display:flex;align-items: center; margin-bottom: 5px; margin-right: 10px; border: none;">
                    <input type="text" class="in-reel" id="reel_input" placeholder="请扫描卷号">
                </div>
                <button class="jy-btn"  onclick="search()">查询</button>
                <div class="mix-div" style="color:#fff" id="nowYb"></div>
                <div class="mix-div" style="color:#fff" id="nowRk"></div>
                <button class="jy-btn" style="background-color: #f5841f;" onclick="WorkRecord()">验布查询</button>
            </div>
        </div>
        <div class="middle-div">
        <div style="width: 80%; height:260px; overflow:auto; ">
                <table class="layui-table">
                    <thead class="sticky-header">
                    <tr class="tr_head">
                        <th>序号</th>
                        <th>供应商</th>
                        <th>供应商型号</th>
                        <th>对应内部型号</th>
                        <!-- <th>是否加急</th> -->
                        <th>门幅</th>
                        <th>到货米数</th>
                        <th>到货日期</th>
                        <th>验布米数</th>
                        <th>卷号</th>
                    </tr>
                    </thead>
                    <tbody id="work-reel">
                      @for ($i = 0; $i < 5; $i++)
                        <tr id="item" style="height: 43px">
                          @for ($j = 0; $j < 9; $j++)
                          <td></td>
                          @endfor
                        </tr>
                      @endfor
                    </tbody>
                </table>
            </div>
          <div style="display:flex; align-items: center;">
            <div class="keyboard">
              @for ($i = 1; $i <= 9; $i++)
                <div class="key" onclick="addToInput({{ $i }})">{{ $i }}</div>
              @endfor
              <div class="key" onclick="addToInput(0)">0</div>
              <div class="key" onclick="addToInput('.')">.</div>
              <div class="key" onclick="deleteLastCharacter()">删除</div>
            </div>
          </div>
        </div>
        <div class="middle-div">
            <div style="width: 40%; height:250px; overflow:auto; background-color: #fff;">
                <table class="layui-table">
                    <thead class="sticky-header">
                    <tr class="tr_head">
                        <!-- <th>序号</th> -->
                        <th style="width:100px">位置</th>
                        <th>疵点问题</th>
                        <th style="width:60px">操作</th>
                    </tr>
                    </thead>
                    <tbody id="work-cd">
                    </tbody>
                </table>
            </div>
            <div style="width: 30rem;display: flex; align-items: center; justify-content: space-around;">
              <button class="jy-btn new-btn" onclick="addCd()" >新增疵点</button>
              <button class="jy-btn new-btn" onclick="addCd_qj()" >新增区间疵点</button>
              <button class="jy-btn new-btn" style="background-color: #0583df;" onclick="printKc()">打印库存</button>
            </div>
            <div style="width: 25rem;display: flex; align-items: center;">
              <button class="jy-btn" style="background-color: #0583df;" onclick="Completed(1)">合格</button>
              <button class="jy-btn" style="background-color: #f5841f;" onclick="Completed(0)">退货</button>
              <button class="jy-btn" style="background-color: gray;" onclick="Completed(2)">待定</button>
            </div>
        </div>
    </div>
  <script type="text/javascript" src="/js/qrcode.min.js"></script>
  <script src="/js/Quagge.js"></script>
  <script>
      $(document).ready(function() {
          var queryString = window.location.search.substring(1);
          var params = new URLSearchParams(queryString);
          var name = params.get('name');
          let start = '{{date('Y-m-d 0:0:0')}}';
          var end = '{{date('Y-m-d 24:0:0')}}';
          $('#people').text(name);
          $.get(`jyjjLists`, {people:name, start:start ,end:end}, res=>{
              if(res.status === 1){
                let totalys = 0;
                let totalyh = 0;
                res.data.data.forEach(obj => {
                  totalys += parseFloat(obj.yhms);
                });
                res.data.data.forEach(obj => {
                  totalyh += parseFloat(obj.yhms);
                });
                $("#nowYb").text('今日验布：'+totalys.toFixed(2));
                $("#nowRk").text('入库米数：'+totalyh.toFixed(2));
              }else{
                layer.msg(res.msg)
              }
        })
    });
    function addToInput(value) {
        document.getElementById('in-meter').value += value;
    }
    var inputId = 1
    function selectmeter(val){
        inputId = val
    }
    function addToInput_cd(value) {
        //document.getElementById('meter-1').value += value;
        if(inputId == 1){
            document.getElementById('meter-1').value += value;
        }else{
            document.getElementById('meter-2').value += value;
        }
    }
    function deleteLastCharacter() {
        var inputField = document.getElementById('in-meter');
        var currentValue = inputField.value;
        inputField.value = currentValue.slice(0, -1);
    }
    function deleteLastCharacter_cd() {
      if(inputId == 1){
            var inputField = document.getElementById('meter-1');
            var currentValue = inputField.value;
            inputField.value = currentValue.slice(0, -1);
        }else{
            var inputField = document.getElementById('meter-2');
            var currentValue = inputField.value;
            inputField.value = currentValue.slice(0, -1);
        }

    }
    var alldata = {} // 全部数据
    window.onload = function() {
        var input = document.getElementById('reel_input');
        // 如果找到了输入框，则将焦点设置到它上面
        if (input) {
            input.focus();
        }
    };
    $("#refresh").click(function () {
      window.location.reload(true)
    })
    $(document).keyup(function(event){
      if(event.keyCode !== 13){
        return
      }
      if(event.keyCode ==13){
        if(event.target.id === 'reel_input'){
          focus()
          go_url()
        }
      }
    });
    function logout(){  //注销按钮
      let str = ''
      setTimeout(() => {
        location.href = '/admin/allLogins'
      } , 1000)
    }
    function search(){
      layer.msg("功能涉及到货单暂时未开放");
    }
    var keyitx = 0;
    var keyity = 0;
    var keyreel = 0;
    var Cdwrong = '';
    var placeAll = [];
    var defectAll = [];
    function addCd() {
      if($("#reel_input").val() == ''){
        document.getElementById('reel_input').focus();
        layer.msg("请先扫描卷号");
        return
      }
      if($("#in-meter").val() == ''){
        layer.msg("请输入米数位置");
        return
      }
      $.get(`/admin/defectAdd` , res=>{
        if(res.status == 1){
          Cdwrong = res.data;
          layui.use(['layer'], function() {
              var layer = layui.layer;
              let content = '<div id="content-wrapper" style="padding: 20px; text-align: center; display:flex; flex-wrap: wrap;">';
              res.data.forEach((item,index) => {
                  content += '<div id="repair" onclick="openzf('+index+')" style="font-size:24px; background: rgb(14,156,214);padding:20px 40px;color:white; margin: 0px 10px 10px 10px;">'+item+'</div>';
              });
              content += '</div>';
              layer.open({
                  type:1,
                  cancel:function(){},
                  success: function(layero, index) {},
                  title:"新增疵点",
                  area:['760px','420px'],
                  content: content,
              })
        });
        }else{
            layer.msg("疵点原因不存在")
        }
      })
    }
    function addCd_qj() {
      if($("#reel_input").val() == ''){
        document.getElementById('reel_input').focus();
        layer.msg("请先扫描卷号");
        return
      }
      $.get(`/admin/defectAdd` , res=>{
        if(res.status == 1){
          Cdwrong = res.data;
          layui.use(['layer'], function() {
              var layer = layui.layer;
              let content = '<div id="content-wrapper" style="padding: 20px; text-align: center; display:flex; flex-wrap: wrap;">';
              res.data.forEach((item,index) => {
                  content += '<div id="repair" onclick="openzf_qj('+index+')" style="font-size:24px; background: rgb(14,156,214);padding:20px 40px;color:white; margin: 0px 10px 10px 10px;">'+item+'</div>';
              });
              content += '</div>';
              layer.open({
                  type:1,
                  cancel:function(){},
                  success: function(layero, index) {},
                  title:"新增区间疵点",
                  area:['760px','420px'],
                  content: content,
              })
        });
        }else{
            layer.msg("疵点原因不存在")
        }
      })
    }
    var deepValue = 0;
    function openzf(index){
      //layui.layer.closeAll();
      deepValue = index
      layui.use(['layer'], function() {
              var layer = layui.layer;
              let content = '<div id="content-wrapper" style="padding: 20px;display: flex; align-items: center; justify-content: space-around;">'+
              '<button class="jy-btn new-btn" style="margin: 0;background-color: #0583df;" onclick=\'addCd2("正向")\')" >正向</button> <button class="jy-btn new-btn" onclick=\'addCd2("反向")\')">反向</button>';
              content += '</div>';
              layer.open({
                  type:1,
                  cancel:function(){},
                  success: function(layero, index) {},
                  title:"正反选择",
                  area:['400px','170px'],
                  content: content,
              })
      });
    }
    function openzf_qj(index){
      //layui.layer.closeAll();
      inputId = 1
      deepValue = index
      layui.use(['layer'], function() {
              var layer = layui.layer;
              let content = '<div id="content-wrapper" style="padding: 20px;">'+
              '<div style="display: flex; align-items: center; justify-content: space-around;">'+
              '<input type="text" class="inc-meter" style="border:none; color: red;" id="meter-1" readonly onclick=selectmeter(1)>——'+
              '<input type="text" class="inc-meter" style="border:none; color: red;" id="meter-2" readonly onclick=selectmeter(2)>'+
              '<div class="keyboard">'+
              @for ($i = 1; $i <= 9; $i++)
                '<div class="key" onclick="addToInput_cd({{ $i }})">{{ $i }}</div>'+
              @endfor
              '<div class="key" onclick="addToInput_cd(0)">0</div>'+
              '<div class="key" onclick=\'addToInput_cd(".")\'">.</div>'+
              '<div class="key" onclick="deleteLastCharacter_cd()">删除</div>'+
              '</div>'+
              '</div>'+
              '<div style="display: flex; align-items: center; justify-content: space-around; margin-top:20px">'+
              '<button class="jy-btn new-btn" style="margin: 0;background-color: #0583df;" onclick=\'addCd2_qj("正向")\')" >正向</button> <button class="jy-btn new-btn"  style="margin: 0;"onclick=\'addCd2_qj("反向")\')">反向</button></div>';
              content += '</div>';
              layer.open({
                  type:1,
                  cancel:function(){},
                  success: function(layero, index) {},
                  title:"区间正反选择",
                  area:['600px','450px'],
                  content: content,
              })
      });
    }
    var deepId = '';
    function addCd2(index) {
      console.log(index,deepValue)
      layui.layer.closeAll();
      keyitx++;
      keyity++;
      var Delid = 0;
      const tbodyx = document.getElementById('work-cd');
      var place = document.getElementById('in-meter').value
      placeAll.push({ id: keyity, value: place });
      defectAll.push({ id: keyity, value: index+`:`+Cdwrong[deepValue] });
      $.post(`/admin/defectAdd` , {id: deepId,reel:$("#reel_input").val() , place: place,defect: index+`:`+Cdwrong[deepValue],_token: $("input[name=_token]").val()}, res=>{
                  if(res.status == 1){
                    deepId = res.data.iid;
                    Delid = res.data.id;
                    const row = `<tr id="item`+ Delid +`" style="height:50px">
                        <td>`+place+`米</td>
                        <td>`+index+`:`+Cdwrong[deepValue]+`</td>
                        <td>
                            <a class="layui-btn layui-btn-danger layui-btn-sm" onclick="delCd(`+Delid+`)" style="margin: 0 5px; font-size: 18px;" href="javascript:;">删除</a>
                        </td>
                    </tr>`;
                   $('#work-cd').append(row);
                    Android.postCd(JSON.stringify(place),JSON.stringify(Cdwrong[deepValue]),JSON.stringify(index));
                   $("#in-meter").val('')
                }
      })
    }
    function addCd2_qj(index) {
      console.log(index,deepValue)
      keyitx++;
      keyity++;
      var Delid = 0;
      const tbodyx = document.getElementById('work-cd');
      var place = document.getElementById('meter-1').value+'-'+document.getElementById('meter-2').value
      if(document.getElementById('meter-1').value === '' || document.getElementById('meter-2').value === ''){
        layer.msg("区间不能为空");
        return;
      }
      layui.layer.closeAll();
      placeAll.push({ id: keyity, value: place });
      defectAll.push({ id: keyity, value: index+`:`+Cdwrong[deepValue] });
      $.post(`/admin/defectAdd` , {id: deepId,reel:$("#reel_input").val() , place: place,defect: index+`:`+Cdwrong[deepValue],_token: $("input[name=_token]").val()}, res=>{
                  if(res.status == 1){
                    deepId = res.data.iid;
                    Delid = res.data.id;
                    const row = `<tr id="item`+ Delid +`" style="height:50px">
                        <td>`+place+`米</td>
                        <td>`+index+`:`+Cdwrong[deepValue]+`</td>
                        <td>
                            <a class="layui-btn layui-btn-danger layui-btn-sm" onclick="delCd(`+Delid+`)" style="margin: 0 5px; font-size: 18px;" href="javascript:;">删除</a>
                        </td>
                    </tr>`;
                   $('#work-cd').append(row);
                    Android.postCd(JSON.stringify(place),JSON.stringify(Cdwrong[deepValue]),JSON.stringify(index));
                   $("#in-meter").val('')
                }
      })
    }
    function delCd(i) {
      console.log(i);
      $.get(`/admin/defectDel` , {id: i}, res=>{

      })
      $('#item' + i).remove();
      placeAll = placeAll.filter(item => item.id !== i);
      defectAll = defectAll.filter(item => item.id !== i);
      var rows = document.querySelectorAll('#work-cd tr');
      // rows.forEach((row, index) => {  //干掉序号 所以注释
      //   row.querySelector('td:first-child').textContent = index + 1;
      // });
      keyitx = rows.length;
    }
    function go_url() {
      var url = window.location.origin;
      const body = document.getElementById('work-cd');
      let html = '';
      // for (let i = 0; i < 5; i++) {
      //     html += '<tr id="item-cd" style="height: 43px">';
      //     for (let j = 0; j < 4; j++) {
      //         html += '<td></td>';
      //     }
      //     html += '</tr>';
      // }
      body.innerHTML = html;
      var x = 0;
      var reeldata = $("#reel_input").val();
      $.get(`${url}/api/business/getNormswares?reel=${reeldata}` , res=>{
        console.log(res.normsware)
        if(res != ""){
            alldata[x] = res.normsware;
            if(res.inspect){
              deepId = res.inspect.id
            }else{
              deepId = '';
            }
            // var divElement = document.getElementById('reelnumber');
            // divElement.textContent = res.number;
            var reelList = res.normsware;
            var defectList = res.defect;
            var ruku_time = reelList.ruku_time;
            var result = ruku_time.indexOf('.') !== -1 ? ruku_time.substring(0, ruku_time.indexOf('.')) : ruku_time;
            keyreel++;
            const tbodyx = document.getElementById('work-reel');
            //<tr id="item`+ keyreel +`">
            const row = `<tr id="item">
                <td>1</td>
                <td>${reelList.supplier}</td>
                <td>${reelList.supplier_xh}</td>
                <td>${reelList.number}</td>
                <td>${reelList.norms.menfu}</td>
                <td>${reelList.store}</td>
                <td>${result}</td>
                <td>
                  <input type="text" class="in-meter" style="padding-left: 5px; border:none; color: red;" id="in-meter" readonly>
                </td>
                <td>${reeldata}</td>
              </tr>`;
              const existingRow = $(`#item`);
              if ($(`#work-reel tr#item`).length > 0) {
                  $(`#item`).replaceWith(row);
              } else {
                  $('#work-reel').append(row);
              }
              //$('#work-reel').append(row);
              keyitx++;
              keyity++;
              const tbodyy = document.getElementById('work-cd');
              defectList.forEach(item => {
                const row = `<tr id="item`+ item.id +`" style="height:50px">
                  <td>`+item.place+`米</td>
                  <td>${item.defect}</td>
                  <td>
                    <a class="layui-btn layui-btn-danger layui-btn-sm" onclick="delCd(`+item.id+`)" style="margin: 0 5px; font-size: 18px;" href="javascript:;">删除</a>
                  </td>
                </tr>`;
                $('#work-cd').append(row);
              });
        }else{
            layer.msg("该卷号不存在！！")
        }
      })
    }
    function focus(){
        var alem = document.getElementById('reel_input');
        alem.focus();
    }

    var gck_number_obj = {}
    var js_hg = "";
    var completedClicked = false;
    async function Completed(hg) {
      if (completedClicked) {
          return; // 如果已经点击过了，则直接返回
      }
      completedClicked = true;
      if($("#reel_input").val() == ''){
        document.getElementById('reel_input').focus();
        layer.msg("请先扫描卷号");
        completedClicked = false;
        return
      }
      if($("#in-meter").val() != alldata[0].store && $("#in-meter").val() != ''){
          var xdata = alldata[0].store - $("#in-meter").val();
          var url = window.location.origin;
          var Tiao = {};
          data = {
          reel: alldata[0].norms.reel,
          comment: alldata[0].norms.reel_detail,  //卷号描述
          reduce: xdata,
          //menfu:$("#mf_input").val()
        }
        await $.post(`${url}/api/business/ClothAdjustment`, data, res=>{
              if(res.status === 1){
              }else{
                layer.msg(res.msg)
              }

        })
      }
      var data = {};
      var placesString = placeAll.map(item => item.value).join(',');
      var defectString = defectAll.map(item => item.value).join(',');
      if(hg == 1){
        js_hg = '合格';
        data = {
          yhms:$("#in-meter").val(),
          reel:$("#reel_input").val(),
          js_hg:'合格',
          // place:placesString,
          // defect:defectString,
          id:deepId,
          people:$('#people').text()
        }
        await $.get(`finishJy`, data, res=>{
              if(res.status === 1){
                Goprint(js_hg)
                layer.msg("布匹检验成功")
              }else{
                layer.msg(res.msg)
                completedClicked = false;
              }
        })
        completedClicked = false;
      }else if (hg == 2) {
        js_hg = '待定';
        data = {
          yhms:$("#in-meter").val(),
          reel:$("#reel_input").val(),
          js_hg:'待定',
          // place:placesString,
          // defect:defectString,
          id:deepId,
          people:$('#people').text()
        }
        await $.get(`finishJy`, data, res=>{
              if(res.status === 1){
                layer.msg("布匹检验成功")
                Goprint(js_hg)
              }else{
                layer.msg(res.msg)
                completedClicked = false;
              }
        })
        completedClicked = false;
      }else{
        js_hg = '不合格';
        data = {
          yhms:$("#in-meter").val(),
          reel:$("#reel_input").val(),
          js_hg:'不合格',
          // place:placesString,
          // defect:defectString,
          id:deepId,
          people:$('#people').text()
        }
        await $.get(`finishJy`, data, res=>{
              if(res.status === 1){
                layer.msg("布匹检验成功")
                Goprint(js_hg)
              }else{
                layer.msg(res.msg)
                completedClicked = false;
              }
        })
        completedClicked = false;
      }
    }
    function printKc(){
      if($("#reel_input").val() == ''){
        document.getElementById('reel_input').focus();
        layer.msg("请先扫描卷号");
        return
      }else{
        var dd = '库存'
        Goprint(dd);
      }
    }
    function Goprint(leixing){
              let i_num = 'txm-img'
                for(let i in alldata){
                    if(alldata[i][0] !== ''){
                        alldata[i].i_num = i_num
                        alldata[i].yhms = $("#in-meter").val()
                        alldata[i].js_hg = js_hg
                        alldata[i].leixing = leixing
                        gck_number_obj[i_num] = alldata[i].norms.reel
                        i_num = i_num + 'n'
                    }
                }
                var pp = 'YB';  //不同卷号打印需求的区分
                let widthValue = 8; //获取缓存的宽高 没有则取默认值
                let heightValue = 11;
                let token = $("input[name='_token']").val() ;
                $.ajax({                // 发起 Ajax 请求加载页面
                  url: 'printReel',
                  type: 'POST',
                  data:  { data: alldata, pp: pp , widthValue: widthValue, heightValue: heightValue,_token:token  }, // 将要发送的数据添加到请求中
                  success: function(res) {// 将返回的页面内容填充到指定的容器中
                      var data2 = $(res).filter('.wrap').prop('outerHTML');// 提取HTML内容
                      var ddcValue = '2' //暂时跳过 关闭或开启打印预览的功能
                      if (ddcValue === '1') {
                        layer.open({
                          type: 1,
                          skin: 'layui-layer-rim', //加上边框
                          area: ['14cm', '18cm'], //宽高
                          content: data2
                        });
                      }
                      else{
                        $('body').html(data2)
                        console.log(alldata)
                        Android.postMessage(JSON.stringify(alldata));
                        setTimeout(function(){
                          dayin()
                        } , 10)
                      }
                    for (let gck in gck_number_obj){  //循环显示条形码
                        if(gck_number_obj[gck]){
                           $('.'+ gck).JsBarcode(gck_number_obj[gck])
                        }
                    }
                  },
                  error: function(xhr, status, error) {
                    console.error(error);
                  }
                });
    }
    function dayin(){ //标签的打印
        console.log("jyjj")
        // $('.dayin').remove()
        // wrapHtml = document.querySelector('.wrap').innerHTML
        // bdhtml = document.querySelector('#out').innerHTML;//获取当前页的html代码
        // sprnstr = "<!--startprint" + 1 + "-->";//设置打印开始区域
        // eprnstr = "<!--endprint" + 1 + "-->";//设置打印结束区域
        // prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
        // prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html
        // window.document.body.innerHTML = prnhtml;
        // window.print();
        location.reload()
    }
    var workurl='<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%;">';
    async function WorkRecord(){
      var queryString = window.location.search.substring(1);
          var params = new URLSearchParams(queryString);
          var name = params.get('name');
          let start = '{{date('Y-m-d 0:0:0')}}';
          var end = '{{date('Y-m-d 24:0:0')}}';
      await $.get(`jyjjLists`, {people:name, start:start ,end:end}, res=>{
          var ddt = res.data;
           // 插入新的行
           ddt.data.forEach(item => {
            const row = `<tr>
                <td>${item.reel}</td>
                <td>${item.number}</td>
                <td>${item.jy_status}</td>
                <td>${item.jy_time}</td>
            </tr>`;
            workurl += row;
        });
        workurl +='</tbody></table><div style="text-align: center;" id="pagination"></div></div>'+
                    '<button id="closeButton" onclick="closeView()" class="jy-btn" style="background-color: #0583df; float: right;" >关闭</button>';
        layui.layer.open({
                  type:1,
                  cancel:function(){focus('#reel_input')
                    workurl='<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%;">';
                  },
                  title:"报工记录",
                  area:['760px','420px'],
                  content: workurl,
                  success: function(layero, index) {
                  }
        })
        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 closeView(){
      workurl='<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%;">';
      layui.layer.closeAll();
    }
  </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;
  }
  .layui-table td, .layui-table th {
    font-size: 18px;
  }
  .layui-table td{
    padding: 0px 15px;
  }
    .tool{
      display:flex;
      justify-content: space-between;
      height: 100px;
      padding:10px;
      align-items: center;
      color: #fff;

    }
    .tool > div{
      float: left;
    }
    .login-aml{
        background:url(../images/amlbg.png) no-repeat center;
        background-size: cover;
        overflow: hidden;
        padding: 10px;
    }
    .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: 8rem;
      /* overflow: auto; */
      padding:10px 10px 10px 10px;
    }
    .middle-div{
      display: flex;
      /*border-bottom: 1px solid #000000;*/ /* 下边框 */
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      height: 16rem;
      padding:10px;
    }
    .in-meter{
      height: 50px;
      width: 120px;
      font-size: 26px;
    }
    .inc-meter{
      height: 70px;
      line-height:70px;
      width: 80px;
      padding: 0 20px;
      font-size: 26px;
      background-color: #e1e1e1;
    }
    .in-reel{
      height: 50px;
      width: 220px;
      padding: 0 10px;
      font-size: 24px;
      border:none;
    }
    .jy-btn {
      display: inline-block;
      height: 48px;
      line-height: 48px;
      padding: 0 15px;
      background-color: #000;
      color: #fff;
      white-space: nowrap;
      text-align: center;
      font-size: 18px;
      border: none;
      border-radius: 2px;
      cursor: pointer;
      width: 100px;
      margin-bottom: 5px;
      margin-right: 10px;
    }
    .new-btn {
      width: 150px;
      height: 80px;
      line-height: 80px;
    }
    .datarow{
        /* padding-left:10px;
        padding-right:10px; */
    }
    .mix-div{
      margin-left: 10px;
      font-size: 22px;
      margin: 10px;
      text-align: right;
      display:flex
    }
    .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;
      float: right;
    }
    .layui-input.layui-unselect {
        color: #999; /* 灰色字体 */
        height: 50px;
    }
  .key {
    font-size: 24px;
    width: calc(33.33% - 5px); /* 计算每个按键的宽度，减去间距 */
    height: 60px;
    line-height: 60px;
    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;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s;
  }
    .key:hover {
      background-color: #ccc;
    }
  </style>
  <script type="text/javascript" src="/js/tableContentRoll.js"></script>
  <link rel="stylesheet" href="/css/tableContentRoll.css">
@endsection