• 前端,前端。。。


    <!DOCTYPE html>
    <html >
    <head>
        <meta charset="utf-8" />
        <title>东裕</title>
        <link rel="stylesheet" href="css/douyu.css" />
        <link rel="stylesheet" href="css/swiper.min.css" />
        <!--<link type="text/css" rel="stylesheet" href="css/css.css">-->
        <script src="jquery-2.1.1.min.js"></script>
        <!--<script src="index.js"></script>-->
    </head>
    <body>
        <div class="main">
            <div class="split" style="74.5%;">
                <!--==========================================大图轮播====================-->
                <div style="height:100%;100%;position:relative;">
    
                    <ul id="pictures">
                        <!--<li><div style="height:100%;100%;position:relative"><iframe id="src1" frameborder="0" scrolling="no" src="" class="pic"></iframe></div></li>
                        <li style="list-style:none"><iframe id="src2" frameborder="0" scrolling="no" src="img/2.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src3" frameborder="0" scrolling="no" src="img/3.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src4" frameborder="0" scrolling="no" src="img/4.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src5" frameborder="0" scrolling="no" src="img/5.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src6" frameborder="0" scrolling="no" src="img/1.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src7" frameborder="0" scrolling="no" src="img/2.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src8" frameborder="0" scrolling="no" src="img/3.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src9" frameborder="0" scrolling="no" src="img/4.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src10" frameborder="0" scrolling="no" src="img/5.jpg" class="picfixed"></iframe></li>-->
                        <!--<li><img id="src1" src="img/1.jpg" class="picfixed"/></li>
                        <li><img id="src2"  src="img/2.jpg" class="picfixed"/></li>
                        <li><img id="src3"src="img/3.jpg" class="picfixed"/></li>
                        <li><img id="src4" src="img/4.jpg" class="picfixed"/></li>
                        <li><img id="src5"  src="img/5.jpg" class="picfixed"/></li>
                        <li><img id="src6" src="img/1.jpg" class="picfixed"/></li>
                        <li><img id="src7"  src="img/2.jpg" class="picfixed"/></li>
                        <li><img id="src8" src="img/3.jpg" class="picfixed"/></li>
                        <li><img id="src9"  src="img/4.jpg" class="picfixed"/></li>
                        <li><img id="src10"  src="img/5.jpg" class="picfixed"/></li>-->
                    </ul>
    
                </div>
    
                <!--============================================================-->
            </div>
            <div class="split" style="0.5%;"></div>
            <div class="split" style="25%;">
                <!--=========================================================================================================================-->
                <div class="rightsplit " style="height:40%;">
                    <form id="form1" runat="server" class="form">
                        <table style="100%;text-align:center;height:100%;position:relative;">
                            <tr class="tr">
                                <td class="td white">品名</td>
                                <td class="td white">前班产量</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="pinming"></td>
                                <td class="td green" id="qianbanchanliang"></td>
                            </tr>
                            <tr class="tr">
                                <td class="td white">料号</td>
                                <td class="td white">当班产量</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="liaohao"></td>
                                <td class="td green" id="dangbanchanliang"></td>
                            </tr>
                            <tr class="tr">
                                <td class="td white">工单号</td>
                                <td class="td white">理论周期</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="gongdanhao"></td>
                                <td class="td green" id="lilunzhouqi"></td>
                            </tr>
                            <tr class="tr">
                                <td class="td white">开始时间</td>
                                <td class="td white">实际周期</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="kaishishijian"></td>
                                <td class="td green" id="shijizhouqi"></td>
                            </tr>
                            <tr class="tr">
                                <td class="td white">订单量</td>
                                <td class="td white">不良数</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="dingdanliang"></td>
                                <td class="td green" id="buliangshu"></td>
                            </tr>
                            <tr class="tr">
                                <td class="td white">已完成量</td>
                                <td class="td white">不良率</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="yiwanchengliang"></td>
                                <td class="td green" id="bulianglv"></td>
                            </tr>
                        </table>
                    </form>
                </div>
    
                <div class="rightsplit green" style="height:60%;">
                    <div class="buliangpintongji ">不良品统计</div>
                    <div style="100%;height:90%;position:relative;">
                        <form id="form1" runat="server" class="form">
                            <table style="100%;text-align:center;height:100%;position:relative;vertical-align:central;">
                                <tr class="trx green border">
    
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id1" class="iddiv"></div>
                                                <div id="name1" class="namediv"></div>
                                            </div>
                                            <div id="value1" class="countdiv" style=""></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id10" class="iddiv"></div>
                                                <div id="name10" class="namediv"></div>
                                            </div>
                                            <div id="value10" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id19" class="iddiv"></div>
                                                <div id="name19" class="namediv"></div>
                                            </div>
                                            <div id="value19" class="countdiv"></div>
                                        </div>
                                    </td>
    
                                </tr>
                                <tr class="trx white">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id2" class="iddiv"></div>
                                                <div id="name2" class="namediv"></div>
                                            </div>
                                            <div id="value2" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id11" class="iddiv"></div>
                                                <div id="name11" class="namediv"></div>
                                            </div>
                                            <div id="value11" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id20" class="iddiv"></div>
                                                <div id="name20" class="namediv"></div>
                                            </div>
                                            <div id="value20" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx green">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id3" class="iddiv"></div>
                                                <div id="name3" class="namediv"></div>
                                            </div>
                                            <div id="value3" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id12" class="iddiv"></div>
                                                <div id="name12" class="namediv"></div>
                                            </div>
                                            <div id="value12" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id21" class="iddiv"></div>
                                                <div id="name21" class="namediv"></div>
                                            </div>
                                            <div id="value21" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx white">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id4" class="iddiv"></div>
                                                <div id="name4" class="namediv"></div>
                                            </div>
                                            <div id="value4" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id13" class="iddiv"></div>
                                                <div id="name13" class="namediv"></div>
                                            </div>
                                            <div id="value13" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id22" class="iddiv"></div>
                                                <div id="name22" class="namediv"></div>
                                            </div>
                                            <div id="value22" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx green">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id5" class="iddiv"></div>
                                                <div id="name5" class="namediv"></div>
                                            </div>
                                            <div id="value5" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id14" class="iddiv"></div>
                                                <div id="name14" class="namediv"></div>
                                            </div>
                                            <div id="value14" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id23" class="iddiv"></div>
                                                <div id="name23" class="namediv"></div>
                                            </div>
                                            <div id="value23" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx white">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id6" class="iddiv"></div>
                                                <div id="name6" class="namediv"></div>
                                            </div>
                                            <div id="value6" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id15" class="iddiv"></div>
                                                <div id="name15" class="namediv"></div>
                                            </div>
                                            <div id="value15" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id24" class="iddiv"></div>
                                                <div id="name24" class="namediv"></div>
                                            </div>
                                            <div id="value24" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx green">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id7" class="iddiv"></div>
                                                <div id="name7" class="namediv"></div>
                                            </div>
                                            <div id="value7" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id16" class="iddiv"></div>
                                                <div id="name16" class="namediv"></div>
                                            </div>
                                            <div id="value16" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id25" class="iddiv"></div>
                                                <div id="name25" class="namediv"></div>
                                            </div>
                                            <div id="value25" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx white">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id8" class="iddiv"></div>
                                                <div id="name8" class="namediv"></div>
                                            </div>
                                            <div id="value8" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id17" class="iddiv"></div>
                                                <div id="name17" class="namediv"></div>
                                            </div>
                                            <div id="value17" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="div1 "></div>
                                    </td>
                                </tr>
                                <tr class="trx green">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id9" class="iddiv"></div>
                                                <div id="name9" class="namediv"></div>
                                            </div>
                                            <div id="value9" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id18" class="iddiv"></div>
                                                <div id="name18" class="namediv"></div>
                                            </div>
                                            <div id="value18" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="div1 "></div>
                                    </td>
                                </tr>
                            </table>
                        </form>
    
                    </div>
                </div>
    
                <!--===============================-->
                <!--===================================-->
            </div>
        </div>
        <script type="text/javascript">
            //================================键盘操作方法=======================
            init();
            var checked = 0;
            var countresult = 0;
            var keyCode = 0;
            var keyCodeArry = [];
            var numArry = [];
            var planid = 0;
            var postbadproid = 0;
            var postbadpronum = 0;
            var result = 0;
            var srcarr = [];
            var countdelcode = 0;
            var manualPlayindex = 0;
            //var value1 = document.getElementById("value1");
            //var value2 = document.getElementById("value2");
            //var value3 = document.getElementById("value3");
            //var value4 = document.getElementById("value4");
            //var value5 = document.getElementById("value5");
            //var value6 = document.getElementById("value6");
            //var value7 = document.getElementById("value7");
            //var value8 = document.getElementById("value8");
            //var value9 = document.getElementById("value9");
            //var value10 = document.getElementById("value10");
            //var value11 = document.getElementById("value11");
            //var value12 = document.getElementById("value12");
            //var value13 = document.getElementById("value13");
            //var value14 = document.getElementById("value14");
            //var value15 = document.getElementById("value15");
            //var value16 = document.getElementById("value16");
            //var value17 = document.getElementById("value17");
            //var value18 = document.getElementById("value18");
            //var value19 = document.getElementById("value19");
            //var value20 = document.getElementById("value20");
            //var value21 = document.getElementById("value21");
            //var value22 = document.getElementById("value22");
            //var value23 = document.getElementById("value23");
            //var value24 = document.getElementById("value24");
            //var value25 = document.getElementById("value25");
    
            //keydown调用的方法
            document.onkeydown = function (ev) {
                var oEvent = ev || event;
                keyCode = oEvent.keyCode;
                keyCodeArry = addKeyCodeArry(keyCode, keyCodeArry);
                if (keyCode == 106)
                {
                    transform();
                    updatebadreason();
                    window.location.reload()
                }
              
                if (keyCode == 100 || keyCode == 102)
                {
                  
                    manualPlay("pictures", "li", keyCode);
                }
                enter();
            }
            //keyup调用的方法
            document.onkeyup = function (ev) {
                var oEvent = ev || event;
                keyCode = oEvent.keyCode;
                keyCodeArry = deleteKeyCodeArry(keyCode, keyCodeArry);
            }
            function addKeyCodeArry(num, arr) {
                arr = keyCodeArry;
                //var check = 0;
                //for (var i = 0; i < arr.length; i++) {
                //    if (arr[i] == num) {
                //        check = 1;
                //    }
                //}
                //if (check == 0) {
                    arr.push(num);
                //}
                return arr;
            }
            function deleteKeyCodeArry(num, arr) {
    
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == 111) {
                        arr = [];
                        window.location.reload()
                    }
                }
                return arr
            }
            //===========================================================
            //===============通过按+或-键来计算不良品数量==============
            function count(num) {
                var content = "";
                if (num == 110) {
                    content = checked;
                }
                if (num == 107) {
                    countresult = countresult + 1;
                    content = countresult;
                }
                if (num == 109) {
                    if (countresult > 0) {
                        countresult = countresult - 1;
                    }
                    else {
                        countresult = 0;
                    }
                    content = countresult;
                }
    
                return content;
            }
            //=================通过按+或-键来计算不良品数量===============
            //==============删除高亮显示=================
            function removecss(id)//要改变css样式div的id
            {
                id.addClass('nogaoliang');
            }
            //============删除高亮显示=====================
            //=============按*键调用的方法=====================
            function transform() {
    
                if (keyCodeArry[1] == 110) {
                    numKeycode = keyCodeArry[0];
                    if (numKeycode == 97) { // 按 1
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value1'));
                    }
                    if (numKeycode == 98) { // 按 2
                        postbadproid = id2.innerText;
                        postbadpronum = value2.innerText;
                        removecss($('#value2'));
                    }
                    if (numKeycode == 99) { // 3 键
                        postbadproid = id3.innerText;
                        postbadpronum = value3.innerText;
                        removecss($('#value3'));
                    }
                  
                    if (numKeycode == 101) { // 5键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value5'));
                    }
                   
                    if (numKeycode == 103) { // 7 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value7'));
                    }
    
                    if (numKeycode == 104) { // 8键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value8'));
                    }
                    if (numKeycode == 105) { // 9 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value9'));
                    }
                }
                if (keyCodeArry[2] == 110) {
                    numKeycode = keyCodeArry[0]
                    numKeycode1 = keyCodeArry[1]
                    if (numKeycode == 99 && numKeycode1 == 107) { // 4 键  3和+
                        postbadproid = id4.innerText;
                        postbadpronum = value4.innerText;
                        removecss($('#value4'));
                    }
                    if (numKeycode == 101 && numKeycode1 == 107) { // 6键  5和+
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value6'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 96) {// 10 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value10'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 97) {// 11 键 
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value11'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 98) {// 12 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value12'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 99) {// 13 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value13'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 100) {// 14 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value14'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 101) {// 15 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value15'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 102) {// 16 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value16'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 103) {// 17 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value17'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 104) {// 18 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value18'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 105) {// 19 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value19'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 96) {// 20 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value20'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 97) {// 21 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value21'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 98) {// 22 键 
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value22'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 99) {// 23 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value23'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 100) {// 24 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value24'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 101) {//25 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value25'));
                    }
                }
    
    
            }
            //=================按*键调用的方法=====================
            //===================添加高亮显示================================
            function addcss(id)//要改变css样式div的id
            {
                id.addClass('gaoliang');
            }
            //===============添加高亮显示====================
            //============按.键调用的方法======================
            function enter() {
    
                if (keyCodeArry[1] == 110) {
                    numKeycode = keyCodeArry[0];
                    if (numKeycode == 97) { // 按 1
                        value1.innerText = count(keyCode);
                        addcss($('#value1'));
                    }
                    if (numKeycode == 98) { // 按 2
                        value2.innerText = count(keyCode);
                        addcss($('#value2'));
                    }
                    if (numKeycode == 99) { // 3 键
                        value3.innerText = count(keyCode);
                        addcss($('#value3'));
                    }
                  
                    if (numKeycode == 101) { // 5键
                        value5.innerText = count(keyCode);
                        addcss($('#value5'));
                    }
                  
                    if (numKeycode == 103) { // 7 键
                        value7.innerText = count(keyCode);
                        addcss($('#value7'));
                    }
    
                    if (numKeycode == 104) { // 8键
                        value8.innerText = count(keyCode);
                        addcss($('#value8'));
                    }
                    if (numKeycode == 105) { // 9 键
                        value9.innerText = count(keyCode);
                        addcss($('#value9'));
                    }
                }
                if (keyCodeArry[2] == 110) {
                    numKeycode = keyCodeArry[0]
                    numKeycode1 = keyCodeArry[1]
                    if (numKeycode == 99 && numKeycode1 == 107)
                    { // 4 键 3和+
                        value4.innerText = count(keyCode);
                        addcss($('#value4'));
                    }
                    if (numKeycode == 101 && numKeycode1 == 107)
                    { // 6键  5和+
                        value6.innerText = count(keyCode);
                        addcss($('#value6'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 96) {// 10 键
                        value10.innerText = count(keyCode);
                        addcss($('#value10'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 97) {// 11 键 
                        value11.innerText = count(keyCode);
                        addcss($('#value11'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 98) {// 12 键
                        value12.innerText = count(keyCode);
                        addcss($('#value12'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 99) {// 13 键
                        value13.innerText = count(keyCode);
                        addcss($('#value13'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 100) {// 14 键
                        value14.innerText = count(keyCode);
                        addcss($('#value14'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 101) {// 15 键
                        value15.innerText = count(keyCode);
                        addcss($('#value15'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 102) {// 16 键
                        value16.innerText = count(keyCode);
                        addcss($('#value16'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 103) {// 17 键
                        value17.innerText = count(keyCode);
                        addcss($('#value17'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 104) {// 18 键
                        value18.innerText = count(keyCode);
                        addcss($('#value18'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 105) {// 19 键
                        value19.innerText = count(keyCode);
                        addcss($('#value19'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 96) {// 20 键
                        value20.innerText = count(keyCode);
                        addcss($('#value20'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 97) {// 21 键
                        value21.innerText = count(keyCode);
                        addcss($('#value21'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 98) {// 22 键  
                        value22.innerText = count(keyCode);
                        addcss($('#value22'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 99) {// 23 键
                        value23.innerText = count(keyCode);
                        addcss($('#value23'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 100) {// 24 键
                        value24.innerText = count(keyCode);
                        addcss($('#value24'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 101) {//25 键
                        value25.innerText = count(keyCode);
                        addcss($('#value25'));
                    }
                }
            }
            //===============按.键调用的方法========================
    
            //==============页面加载时调用的方法==================
            function init() {
    
                loadinformation();
                //autoPlay("pictures", "li");
              
            }
            //================页面加载时调用的方法==================
            //data1 = data.josnObj.tsBadreasonrecs;
            //加载分享配置
            function loadinformation() {
                $.ajax({
                    url: "http://192.168.21.230:8081/tsplan/getSopByEquId?equId=1057743339643867248",
                    timeout: 10000, //超时时间设置,单位毫秒
                    type: 'GET',
                    data: {},
                    dataType: "json",
                    cache: false,
                    error: erryFunction,  //错误执行方法
                    success: succFunction //成功执行方法
    
                });
            }
            function updatebadreason() {
    
                $.ajax({
                    //url: "http://192.168.21.230:8081/tsinspection/addSopBadRec? planId =" + planid + "& badproId=" + postbadproid + "& badproNum=" + postbadpronum,
                    url: "http://192.168.21.230:8081/tsinspection/addSopBadRec/", 
                    type: 'POST', 
                    data: { planId: planid, badproId: postbadproid, badproNum: postbadpronum }, 
                    dataType: "json", 
                    success: function (msg)
                    {
                        alert("提交成功!!");
                    },
                    error: erryFunction//错误执行方法
                    
                });
            }
            function erryFunction(msg) {
                alert("失败");
            }
         
            function succFunction(data) {
    
                //var json = eval(data); //数组
                var jsonbadreasonlist = data.josnObj.tsBadreasonrecs;//获取的数组
                var jsontsPlan = data.josnObj.tsPlan;
                var jsonobj = data.josnObj;
                var getsoplist = data.josnObj.sopList;
                var jsonpiclist = [];
                var piclist = [];
                var imgfile = "";
                var reletiveurl = "";
                pinming.innerText = jsontsPlan.productName;
                qianbanchanliang.innerText = jsonobj.beforeshiftsTotal;
                liaohao.innerText = jsontsPlan.productCode;
                dangbanchanliang.innerText = jsonobj.shiftsTotal;
                gongdanhao.innerText = jsontsPlan.planNum;
                lilunzhouqi.innerText = jsonobj.standCycle;
                kaishishijian.innerText = jsontsPlan.beginDate;
                shijizhouqi.innerText = jsontsPlan.cycletime;
                dingdanliang.innerText = jsontsPlan.planCount;
                buliangshu.innerText = jsontsPlan.badproTotal;
                yiwanchengliang.innerText = jsontsPlan.proTotal;
                bulianglv.innerText = (jsontsPlan.badproTotal / jsontsPlan.proTotal).toFixed(2);
                planid = jsontsPlan.planId;//要传给后台的planid
    
                $.each(getsoplist, function (index, item)
                {
                    
                   
                    $.each(getsoplist[index], function (index1, item)
                    {
                        piclist.push(getsoplist[index][index1].soppath);
                    });
           
                });
                $.each(jsonpiclist, function (index, item)
                {
                    if (jsonpiclist[index].soppath != null && jsonpiclist[index].soppath != "")
                    { 
                        piclist.push(jsonpiclist[index]);
                    }
                   
                });
    
                $.each(piclist, function (index, item)
                {
                    imgfile = "http://192.168.21.230:8081/" + piclist[index];
                    reletiveurl = piclist[index]
                    showFile(imgfile, reletiveurl);
                    //alert(imgfile);
                });
              
                $.each(jsonbadreasonlist, function (index, item)
                {
    
                    //循环获取数据
                    var id = jsonbadreasonlist[index].badproId;
                    var name = jsonbadreasonlist[index].badreason;
                    var num = jsonbadreasonlist[index].badproNum;
    
                    if (id == 1) {
                        value1.innerText = num;
                        id1.innerText = id;
                        name1.innerText = name;
    
                    }
                    if (id == 2) {
                        value2.innerText = num;
                        id2.innerText = id;
                        name2.innerText = name;
                    }
                    if (id == 3) {
                        value3.innerText = num;
                        id3.innerText = id;
                        name3.innerText = name;
                    }
                    if (id == 4) {
                        value4.innerText = num;
                        id4.innerText = id;
                        name4.innerText = name;
                    }
                    if (id == 5) {
                        value5.innerText = num;
                        id5.innerText = id;
                        name5.innerText = name;
                    }
                    if (id == 6) {
                        value6.innerText = num;
                        id6.innerText = id;
                        name6.innerText = name;
                    }
                    if (id == 7) {
                        value7.innerText = num;
                        id7.innerText = id;
                        name7.innerText = name;
                    }
                    if (id == 8) {
                        value8.innerText = num;
                        id8.innerText = id;
                        name8.innerText = name;
                    }
                    if (id == 9) {
                        value9.innerText = num;
                        id9.innerText = id;
                        name9.innerText = name;
                    }
                    if (id == 10) {
                        value10.innerText = num;
                        id10.innerText = id;
                        name10.innerText = name;
                    }
                    if (id == 11) {
                        value11.innerText = num;
                        id11.innerText = id;
                        name11.innerText = name;
                    }
                    if (id == 12) {
                        value12.innerText = num;
                        id12.innerText = id;
                        name12.innerText = name;
                    }
                    if (id == 13) {
                        value13.innerText = num;
                        id13.innerText = id;
                        name13.innerText = name;
                    }
                    if (id == 14) {
                        value14.innerText = num;
                        id14.innerText = id;
                        name14.innerText = name;
                    }
                    if (id == 15) {
                        value15.innerText = num;
                        id15.innerText = id;
                        name15.innerText = name;
                    }
                    if (id == 16) {
                        value16.innerText = num;
                        id16.innerText = id;
                        name16.innerText = name;
                    }
                    if (id == 17) {
                        value17.innerText = num;
                        id17.innerText = id;
                        name17.innerText = name;
                    }
                    if (id == 18) {
                        value18.innerText = num;
                        id18.innerText = id;
                        name18.innerText = name;
                    }
                    if (id == 19) {
                        value19.innerText = num;
                        id19.innerText = id;
                        name19.innerText = name;
                    }
                    if (id == 20) {
                        value20.innerText = num;
                        id20.innerText = id;
                        name20.innerText = name;
                    }
                    if (id == 21) {
                        value21.innerText = num;
                        id21.innerText = id;
                        name21.innerText = name;
                    }
                    if (id == 22) {
                        value22.innerText = num;
                        id22.innerText = id;
                        name22.innerText = name;
                    }
                    if (id == 23) {
                        value23.innerText = num;
                        id23.innerText = id;
                        name23.innerText = name;
                    }
                    if (id == 24) {
                        value24.innerText = num;
                        id24.innerText = id;
                        name24.innerText = name;
                    }
                    if (id == 25) {
                        value25.innerText = num;
                        id25.innerText = id;
                        name25.innerText = name;
                    }
                });
            }
    
    
          
            //=============大图自动轮播===============
            function autoPlay(parentID, childTag) {
                $(document).ready(function () {
                    //循环执行,每隔1秒钟执行一次 1000 
                    var t1 = window.setInterval(refreshCount, 1000);
    
                    function refreshCount() {
                        console.log("ready");
                    }
    
                    //去掉定时器的方法  
                    //window.clearInterval(t1);
                }); 
                var pictures = document.getElementById(parentID);
                var items = pictures.getElementsByTagName(childTag);
                var len = items.length;
                var index = 0;
                showItem();
                // 显示一张图片
                function showItem() {
                    // 首先将所有图片透明度设为0
                    hideItems();
                    items[index].style.opacity = 1;
                    //items[index].css("opacity", "1");
                    // 将要显示的透明度改变让其显示
    
                    if (index > len - 2) {
                        index = 0;
                    }
                    else {
                        index++;
                    }
    
                    // 在这里用setTimeout模拟setInterval的效果
                    setTimeout(showItem, 15000);
                }
                // 将所有图片透明度设为0
                function hideItems(parentID, childTag) {
                    for (var i = 0; i < len; i++) {
                        items[i].style.opacity = 0;
                      
                    }
    
                }
    
            };
            //=================大图自动轮播=================
            //================================手动切换图片===================
            function manualPlay(parentID, childTag, keynum)
            {
                
                var pictures = document.getElementById(parentID);
    
                var items = pictures.getElementsByTagName(childTag);
                var len = items.length;
                //alert(len);
                showItem();
                // 显示一张图片
                function showItem()
                {
                    // 首先将所有图片透明度设为0
                    hideItems();
                    //items[2].style.opacity = 1;
                    // 将要显示的透明度改变让其显示
                   
                    if (keynum == 102)  //增加  6键
                    {
                        if (manualPlayindex > len - 2)
                        {
                            //alert("请按“-”号继续查看上图");
                            manualPlayindex = 0;
                        }
                        else
                        {
                            manualPlayindex++;
                        }
                    }
                    if (keynum == 100)   /*减少  4键*/
                    {
                        if (manualPlayindex < 1)
                        {
                            alert("请按键“6”继续查看下图");
                            manualPlayindex = 0;
                        }
                        else {
                            manualPlayindex--;
                        }
                    }
                  
                     items[manualPlayindex].style.opacity = 1;
                }
                // 将所有图片透明度设为0
                function hideItems(parentID, childTag) {
                    for (var i = 0; i < len; i++) {
                        items[i].style.opacity = 0;
    
                    }
                }
            };
            //===================手动切换图片=================
    
            //==================================================
    
            //================================================
            //=======================删除li元素========================
           
                //=======================删除li元素===================
            function showFile(file,reurl)
            {
                //var file = $(obj).attr("data-src");
    
                var arr = reurl.split('.');
                var name = arr[1];
                var img_infor = "";
                var ul = document.getElementById("pictures");
                var obj = document.createElement("li");
                if (name == "pdf")
                {
                    //img_infor = ' <iframe frameBorder="0" scrolling="no" src="' +
                    //    file + '" style="700px; height:800px;position: absolute;overflow:hidden; "></iframe>';
                    img_infor = ' <div style="height:800px;900px;position:absolute"> <iframe frameBorder="0" scrolling="no" src="' +
                        file + '" style="1400px; height:1000px;position: absolute;overflow:hidden;"></iframe></div>';
                   
                }
                else
                {
                    img_infor = '<div style="height: 1020px;  1430px; position: absolute"><img  src="' + file + ' "style="700px; height:800px;position: absolute;overflow:hidden;"/></div>';
                }
              
                obj.innerHTML = img_infor;
                ul.appendChild(obj);
                $('ul li').css('list-style', 'none');
    
                $('ul li').css('opacity', '0');
                $('ul li:first-child').css('opacity', '1');
    
            }
        </script>
    </body>
    
    
    
    </html>
        html
    {
        height: 100%
    }
    
    body
    {
        min-height: 100%
    }
    ul
    {
        -webkit-padding-start: 0px;
        /*-webkit-margin-before: 1em;
        -webkit-margin-after: 1em;*/
        -webkit-margin-start: 0px;
        /*-webkit-margin-end: 0px;*/
        /*-webkit-padding-start: 40px;*/
    }
    .main {
        /*1920px;
        height:1080px;*/
     
        height: 100%;
        100%;
        margin: 0 0.1rem;
        overflow: hidden;
    }
    html,
    body 
    {
        position: relative;
        height: 100%;
    }
    .split
    {
        float: left;
      
        position: relative;
        height: 100%
    }
    .rightsplit 
    {
         100%;
        position: relative;
    }
    .tr 
    {
     
        height:8%;
        position: relative;
        
    }
    .td {
         50%;
        position: relative;
      
      font:600;
      font-size:large;
       
    }
    .white {
        background-color: #F8F8FF;
    }
    .green {
        background-color: #E0EEE0;
    }
    .trx {
     100%;
        height:10%;
        position: relative;
      
    }
    
    .tdx {
        height: 10%;
         33%;
        position: relative;
        font: 600;
        font-size: large;
    }
    .form
    {
         100%;
        height: 100%;
        position: relative;
    }
    .pictureall {
         100%;
        height: 100%;
        position: relative;
    }
    .countdiv {
       
         30%;
        height: 70%;
        position: relative;
        float: left;
        border: 0.5px solid darkgrey;
        border-radius: 10px;
        padding: 10px 0px 0px 0px;
       
    }
    .iddiv {
        /*margin: 2% auto;*/
        /*background: darkcyan;*/
         40%;
        height: 100%;
        position: relative;
        float: left;
        padding: 15px 0px 0px 0px;
        /*line-height: 100px;*/
    
        /*background-color: aquamarine;*/
    
    }
    .namediv {
        /*margin: 2% auto;*/
        /*background: darkcyan;*/
         60%;
        height: 100%;
        position: relative;
        float: left;
        /*background-color: red;*/
        /*text-align: center;
        display: table-cell;
        vertical-align: middle;*/
        /*line-height: 100%;*/
        padding: 15px 0px 0px 0px;
       
    }
    
    .div1 
    {
       position: relative;
        height: 100%;
         60%;
        float: left;
       
    }
    
    .vertical 
    {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .buliangpintongji {
         100%;
        height: 10%;
        position: relative;
        text-align: center;
        font-size: 25px;
        font-weight: 700;
        vertical-align: middle;
        line-height: 100%;
       
        padding: 15px 0px 0px 0px;
        border-top-style: solid;
        border-bottom-style: solid;
        border-color: darkgrey;
        border- 0.8px;
       /*background-color:aqua;*/
    }
    
    .tddiv {
        height: 100%;
         98%;
        position: relative;
        border-right-style: solid;
        /*border-bottom-style: solid;*/
        border-color: darkgrey;
        border- 0.8px;
        /*background-color:red;*/
    
    
    }
    .gaoliang {
       
        /*border-radius: 10px;*/
        -webkit-box-shadow: 0 0 5px rgba(0,113,241,1);
        /*---------------------------*/
        /* 30%;
        height: 70%;
        position: relative;
        float: left;
        border: 0.5px solid darkgrey;
        border-radius: 10px;
        padding: 10px 0px 0px 0px;*/
    }
    .nogaoliang {
        -webkit-box-shadow: 0 0 0 #F8F8FF;
    }
    .pic {
        height:80%;
         80%;
        /*left: -200px;*/
        position: absolute;
       overflow:hidden;
    }
    
    .picfixed 
    {
        height:100%;
        100%;
       
        position:relative;
    }
    
    .opacity {
        opacity:0;
    }
    /*======================================*/

    <!DOCTYPE html>
    <html >
    <head>
        <meta charset="utf-8" />
        <title>东裕</title>
        <link rel="stylesheet" href="css/douyu.css" />
        <link rel="stylesheet" href="css/swiper.min.css" />
        <!--<link type="text/css" rel="stylesheet" href="css/css.css">-->
        <script src="jquery-2.1.1.min.js"></script>
        <!--<script src="index.js"></script>-->
    </head>
    <body>
        <div class="main">
            <div class="split" style="74.5%;">
                <!--==========================================大图轮播====================-->
                <div style="height:100%;100%;position:relative;">

                    <ul id="pictures">
                        <!--<li><div style="height:100%;100%;position:relative"><iframe id="src1" frameborder="0" scrolling="no" src="" class="pic"></iframe></div></li>
                        <li style="list-style:none"><iframe id="src2" frameborder="0" scrolling="no" src="img/2.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src3" frameborder="0" scrolling="no" src="img/3.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src4" frameborder="0" scrolling="no" src="img/4.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src5" frameborder="0" scrolling="no" src="img/5.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src6" frameborder="0" scrolling="no" src="img/1.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src7" frameborder="0" scrolling="no" src="img/2.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src8" frameborder="0" scrolling="no" src="img/3.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src9" frameborder="0" scrolling="no" src="img/4.jpg" class="picfixed"></iframe></li>
                        <li><iframe id="src10" frameborder="0" scrolling="no" src="img/5.jpg" class="picfixed"></iframe></li>-->
                        <!--<li><img id="src1" src="img/1.jpg" class="picfixed"/></li>
                        <li><img id="src2"  src="img/2.jpg" class="picfixed"/></li>
                        <li><img id="src3"src="img/3.jpg" class="picfixed"/></li>
                        <li><img id="src4" src="img/4.jpg" class="picfixed"/></li>
                        <li><img id="src5"  src="img/5.jpg" class="picfixed"/></li>
                        <li><img id="src6" src="img/1.jpg" class="picfixed"/></li>
                        <li><img id="src7"  src="img/2.jpg" class="picfixed"/></li>
                        <li><img id="src8" src="img/3.jpg" class="picfixed"/></li>
                        <li><img id="src9"  src="img/4.jpg" class="picfixed"/></li>
                        <li><img id="src10"  src="img/5.jpg" class="picfixed"/></li>-->
                    </ul>

                </div>

                <!--============================================================-->
            </div>
            <div class="split" style="0.5%;"></div>
            <div class="split" style="25%;">
                <!--=========================================================================================================================-->
                <div class="rightsplit " style="height:40%;">
                    <form id="form1" runat="server" class="form">
                        <table style="100%;text-align:center;height:100%;position:relative;">
                            <tr class="tr">
                                <td class="td white">品名</td>
                                <td class="td white">前班产量</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="pinming"></td>
                                <td class="td green" id="qianbanchanliang"></td>
                            </tr>
                            <tr class="tr">
                                <td class="td white">料号</td>
                                <td class="td white">当班产量</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="liaohao"></td>
                                <td class="td green" id="dangbanchanliang"></td>
                            </tr>
                            <tr class="tr">
                                <td class="td white">工单号</td>
                                <td class="td white">理论周期</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="gongdanhao"></td>
                                <td class="td green" id="lilunzhouqi"></td>
                            </tr>
                            <tr class="tr">
                                <td class="td white">开始时间</td>
                                <td class="td white">实际周期</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="kaishishijian"></td>
                                <td class="td green" id="shijizhouqi"></td>
                            </tr>
                            <tr class="tr">
                                <td class="td white">订单量</td>
                                <td class="td white">不良数</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="dingdanliang"></td>
                                <td class="td green" id="buliangshu"></td>
                            </tr>
                            <tr class="tr">
                                <td class="td white">已完成量</td>
                                <td class="td white">不良率</td>
                            </tr>
                            <tr class="tr">
                                <td class="td green" id="yiwanchengliang"></td>
                                <td class="td green" id="bulianglv"></td>
                            </tr>
                        </table>
                    </form>
                </div>

                <div class="rightsplit green" style="height:60%;">
                    <div class="buliangpintongji ">不良品统计</div>
                    <div style="100%;height:90%;position:relative;">
                        <form id="form1" runat="server" class="form">
                            <table style="100%;text-align:center;height:100%;position:relative;vertical-align:central;">
                                <tr class="trx green border">

                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id1" class="iddiv"></div>
                                                <div id="name1" class="namediv"></div>
                                            </div>
                                            <div id="value1" class="countdiv" style=""></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id10" class="iddiv"></div>
                                                <div id="name10" class="namediv"></div>
                                            </div>
                                            <div id="value10" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id19" class="iddiv"></div>
                                                <div id="name19" class="namediv"></div>
                                            </div>
                                            <div id="value19" class="countdiv"></div>
                                        </div>
                                    </td>

                                </tr>
                                <tr class="trx white">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id2" class="iddiv"></div>
                                                <div id="name2" class="namediv"></div>
                                            </div>
                                            <div id="value2" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id11" class="iddiv"></div>
                                                <div id="name11" class="namediv"></div>
                                            </div>
                                            <div id="value11" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id20" class="iddiv"></div>
                                                <div id="name20" class="namediv"></div>
                                            </div>
                                            <div id="value20" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx green">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id3" class="iddiv"></div>
                                                <div id="name3" class="namediv"></div>
                                            </div>
                                            <div id="value3" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id12" class="iddiv"></div>
                                                <div id="name12" class="namediv"></div>
                                            </div>
                                            <div id="value12" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id21" class="iddiv"></div>
                                                <div id="name21" class="namediv"></div>
                                            </div>
                                            <div id="value21" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx white">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id4" class="iddiv"></div>
                                                <div id="name4" class="namediv"></div>
                                            </div>
                                            <div id="value4" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id13" class="iddiv"></div>
                                                <div id="name13" class="namediv"></div>
                                            </div>
                                            <div id="value13" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id22" class="iddiv"></div>
                                                <div id="name22" class="namediv"></div>
                                            </div>
                                            <div id="value22" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx green">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id5" class="iddiv"></div>
                                                <div id="name5" class="namediv"></div>
                                            </div>
                                            <div id="value5" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id14" class="iddiv"></div>
                                                <div id="name14" class="namediv"></div>
                                            </div>
                                            <div id="value14" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id23" class="iddiv"></div>
                                                <div id="name23" class="namediv"></div>
                                            </div>
                                            <div id="value23" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx white">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id6" class="iddiv"></div>
                                                <div id="name6" class="namediv"></div>
                                            </div>
                                            <div id="value6" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id15" class="iddiv"></div>
                                                <div id="name15" class="namediv"></div>
                                            </div>
                                            <div id="value15" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id24" class="iddiv"></div>
                                                <div id="name24" class="namediv"></div>
                                            </div>
                                            <div id="value24" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx green">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id7" class="iddiv"></div>
                                                <div id="name7" class="namediv"></div>
                                            </div>
                                            <div id="value7" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id16" class="iddiv"></div>
                                                <div id="name16" class="namediv"></div>
                                            </div>
                                            <div id="value16" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id25" class="iddiv"></div>
                                                <div id="name25" class="namediv"></div>
                                            </div>
                                            <div id="value25" class="countdiv"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="trx white">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id8" class="iddiv"></div>
                                                <div id="name8" class="namediv"></div>
                                            </div>
                                            <div id="value8" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id17" class="iddiv"></div>
                                                <div id="name17" class="namediv"></div>
                                            </div>
                                            <div id="value17" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="div1 "></div>
                                    </td>
                                </tr>
                                <tr class="trx green">
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id9" class="iddiv"></div>
                                                <div id="name9" class="namediv"></div>
                                            </div>
                                            <div id="value9" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="tddiv">
                                            <div class="div1 ">
                                                <div id="id18" class="iddiv"></div>
                                                <div id="name18" class="namediv"></div>
                                            </div>
                                            <div id="value18" class="countdiv"></div>
                                        </div>
                                    </td>
                                    <td class="tdx ">
                                        <div class="div1 "></div>
                                    </td>
                                </tr>
                            </table>
                        </form>

                    </div>
                </div>

                <!--===============================-->
                <!--===================================-->
            </div>
        </div>
        <script type="text/javascript">
            //================================键盘操作方法=======================
            init();
            var checked = 0;
            var countresult = 0;
            var keyCode = 0;
            var keyCodeArry = [];
            var numArry = [];
            var planid = 0;
            var postbadproid = 0;
            var postbadpronum = 0;
            var result = 0;
            var srcarr = [];
            var countdelcode = 0;
            var manualPlayindex = 0;
            //var value1 = document.getElementById("value1");
            //var value2 = document.getElementById("value2");
            //var value3 = document.getElementById("value3");
            //var value4 = document.getElementById("value4");
            //var value5 = document.getElementById("value5");
            //var value6 = document.getElementById("value6");
            //var value7 = document.getElementById("value7");
            //var value8 = document.getElementById("value8");
            //var value9 = document.getElementById("value9");
            //var value10 = document.getElementById("value10");
            //var value11 = document.getElementById("value11");
            //var value12 = document.getElementById("value12");
            //var value13 = document.getElementById("value13");
            //var value14 = document.getElementById("value14");
            //var value15 = document.getElementById("value15");
            //var value16 = document.getElementById("value16");
            //var value17 = document.getElementById("value17");
            //var value18 = document.getElementById("value18");
            //var value19 = document.getElementById("value19");
            //var value20 = document.getElementById("value20");
            //var value21 = document.getElementById("value21");
            //var value22 = document.getElementById("value22");
            //var value23 = document.getElementById("value23");
            //var value24 = document.getElementById("value24");
            //var value25 = document.getElementById("value25");

            //keydown调用的方法
            document.onkeydown = function (ev) {
                var oEvent = ev || event;
                keyCode = oEvent.keyCode;
                keyCodeArry = addKeyCodeArry(keyCode, keyCodeArry);
                if (keyCode == 106)
                {
                    transform();
                    updatebadreason();
                    window.location.reload()
                }
              
                if (keyCode == 100 || keyCode == 102)
                {
                  
                    manualPlay("pictures", "li", keyCode);
                }
                enter();
            }
            //keyup调用的方法
            document.onkeyup = function (ev) {
                var oEvent = ev || event;
                keyCode = oEvent.keyCode;
                keyCodeArry = deleteKeyCodeArry(keyCode, keyCodeArry);
            }
            function addKeyCodeArry(num, arr) {
                arr = keyCodeArry;
                //var check = 0;
                //for (var i = 0; i < arr.length; i++) {
                //    if (arr[i] == num) {
                //        check = 1;
                //    }
                //}
                //if (check == 0) {
                    arr.push(num);
                //}
                return arr;
            }
            function deleteKeyCodeArry(num, arr) {

                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == 111) {
                        arr = [];
                        window.location.reload()
                    }
                }
                return arr
            }
            //===========================================================
            //===============通过按+或-键来计算不良品数量==============
            function count(num) {
                var content = "";
                if (num == 110) {
                    content = checked;
                }
                if (num == 107) {
                    countresult = countresult + 1;
                    content = countresult;
                }
                if (num == 109) {
                    if (countresult > 0) {
                        countresult = countresult - 1;
                    }
                    else {
                        countresult = 0;
                    }
                    content = countresult;
                }

                return content;
            }
            //=================通过按+或-键来计算不良品数量===============
            //==============删除高亮显示=================
            function removecss(id)//要改变css样式div的id
            {
                id.addClass('nogaoliang');
            }
            //============删除高亮显示=====================
            //=============按*键调用的方法=====================
            function transform() {

                if (keyCodeArry[1] == 110) {
                    numKeycode = keyCodeArry[0];
                    if (numKeycode == 97) { // 按 1
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value1'));
                    }
                    if (numKeycode == 98) { // 按 2
                        postbadproid = id2.innerText;
                        postbadpronum = value2.innerText;
                        removecss($('#value2'));
                    }
                    if (numKeycode == 99) { // 3 键
                        postbadproid = id3.innerText;
                        postbadpronum = value3.innerText;
                        removecss($('#value3'));
                    }
                  
                    if (numKeycode == 101) { // 5键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value5'));
                    }
                   
                    if (numKeycode == 103) { // 7 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value7'));
                    }

                    if (numKeycode == 104) { // 8键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value8'));
                    }
                    if (numKeycode == 105) { // 9 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value9'));
                    }
                }
                if (keyCodeArry[2] == 110) {
                    numKeycode = keyCodeArry[0]
                    numKeycode1 = keyCodeArry[1]
                    if (numKeycode == 99 && numKeycode1 == 107) { // 4 键  3和+
                        postbadproid = id4.innerText;
                        postbadpronum = value4.innerText;
                        removecss($('#value4'));
                    }
                    if (numKeycode == 101 && numKeycode1 == 107) { // 6键  5和+
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value6'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 96) {// 10 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value10'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 97) {// 11 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value11'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 98) {// 12 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value12'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 99) {// 13 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value13'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 100) {// 14 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value14'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 101) {// 15 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value15'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 102) {// 16 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value16'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 103) {// 17 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value17'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 104) {// 18 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value18'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 105) {// 19 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value19'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 96) {// 20 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value20'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 97) {// 21 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value21'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 98) {// 22 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value22'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 99) {// 23 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value23'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 100) {// 24 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value24'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 101) {//25 键
                        postbadproid = id1.innerText;
                        postbadpronum = value1.innerText;
                        removecss($('#value25'));
                    }
                }


            }
            //=================按*键调用的方法=====================
            //===================添加高亮显示================================
            function addcss(id)//要改变css样式div的id
            {
                id.addClass('gaoliang');
            }
            //===============添加高亮显示====================
            //============按.键调用的方法======================
            function enter() {

                if (keyCodeArry[1] == 110) {
                    numKeycode = keyCodeArry[0];
                    if (numKeycode == 97) { // 按 1
                        value1.innerText = count(keyCode);
                        addcss($('#value1'));
                    }
                    if (numKeycode == 98) { // 按 2
                        value2.innerText = count(keyCode);
                        addcss($('#value2'));
                    }
                    if (numKeycode == 99) { // 3 键
                        value3.innerText = count(keyCode);
                        addcss($('#value3'));
                    }
                  
                    if (numKeycode == 101) { // 5键
                        value5.innerText = count(keyCode);
                        addcss($('#value5'));
                    }
                  
                    if (numKeycode == 103) { // 7 键
                        value7.innerText = count(keyCode);
                        addcss($('#value7'));
                    }

                    if (numKeycode == 104) { // 8键
                        value8.innerText = count(keyCode);
                        addcss($('#value8'));
                    }
                    if (numKeycode == 105) { // 9 键
                        value9.innerText = count(keyCode);
                        addcss($('#value9'));
                    }
                }
                if (keyCodeArry[2] == 110) {
                    numKeycode = keyCodeArry[0]
                    numKeycode1 = keyCodeArry[1]
                    if (numKeycode == 99 && numKeycode1 == 107)
                    { // 4 键 3和+
                        value4.innerText = count(keyCode);
                        addcss($('#value4'));
                    }
                    if (numKeycode == 101 && numKeycode1 == 107)
                    { // 6键  5和+
                        value6.innerText = count(keyCode);
                        addcss($('#value6'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 96) {// 10 键
                        value10.innerText = count(keyCode);
                        addcss($('#value10'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 97) {// 11 键
                        value11.innerText = count(keyCode);
                        addcss($('#value11'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 98) {// 12 键
                        value12.innerText = count(keyCode);
                        addcss($('#value12'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 99) {// 13 键
                        value13.innerText = count(keyCode);
                        addcss($('#value13'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 100) {// 14 键
                        value14.innerText = count(keyCode);
                        addcss($('#value14'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 101) {// 15 键
                        value15.innerText = count(keyCode);
                        addcss($('#value15'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 102) {// 16 键
                        value16.innerText = count(keyCode);
                        addcss($('#value16'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 103) {// 17 键
                        value17.innerText = count(keyCode);
                        addcss($('#value17'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 104) {// 18 键
                        value18.innerText = count(keyCode);
                        addcss($('#value18'));
                    }
                    if (numKeycode == 97 && numKeycode1 == 105) {// 19 键
                        value19.innerText = count(keyCode);
                        addcss($('#value19'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 96) {// 20 键
                        value20.innerText = count(keyCode);
                        addcss($('#value20'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 97) {// 21 键
                        value21.innerText = count(keyCode);
                        addcss($('#value21'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 98) {// 22 键  
                        value22.innerText = count(keyCode);
                        addcss($('#value22'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 99) {// 23 键
                        value23.innerText = count(keyCode);
                        addcss($('#value23'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 100) {// 24 键
                        value24.innerText = count(keyCode);
                        addcss($('#value24'));
                    }
                    if (numKeycode == 98 && numKeycode1 == 101) {//25 键
                        value25.innerText = count(keyCode);
                        addcss($('#value25'));
                    }
                }
            }
            //===============按.键调用的方法========================

            //==============页面加载时调用的方法==================
            function init() {

                loadinformation();
                //autoPlay("pictures", "li");
              
            }
            //================页面加载时调用的方法==================
            //data1 = data.josnObj.tsBadreasonrecs;
            //加载分享配置
            function loadinformation() {
                $.ajax({
                    url: "http://192.168.21.230:8081/tsplan/getSopByEquId?equId=1057743339643867248",
                    timeout: 10000, //超时时间设置,单位毫秒
                    type: 'GET',
                    data: {},
                    dataType: "json",
                    cache: false,
                    error: erryFunction,  //错误执行方法
                    success: succFunction //成功执行方法

                });
            }
            function updatebadreason() {

                $.ajax({
                    //url: "http://192.168.21.230:8081/tsinspection/addSopBadRec? planId =" + planid + "& badproId=" + postbadproid + "& badproNum=" + postbadpronum,
                    url: "http://192.168.21.230:8081/tsinspection/addSopBadRec/",
                    type: 'POST',
                    data: { planId: planid, badproId: postbadproid, badproNum: postbadpronum },
                    dataType: "json",
                    success: function (msg)
                    {
                        alert("提交成功!!");
                    },
                    error: erryFunction//错误执行方法
                    
                });
            }
            function erryFunction(msg) {
                alert("失败");
            }
         
            function succFunction(data) {

                //var json = eval(data); //数组
                var jsonbadreasonlist = data.josnObj.tsBadreasonrecs;//获取的数组
                var jsontsPlan = data.josnObj.tsPlan;
                var jsonobj = data.josnObj;
                var getsoplist = data.josnObj.sopList;
                var jsonpiclist = [];
                var piclist = [];
                var imgfile = "";
                var reletiveurl = "";
                pinming.innerText = jsontsPlan.productName;
                qianbanchanliang.innerText = jsonobj.beforeshiftsTotal;
                liaohao.innerText = jsontsPlan.productCode;
                dangbanchanliang.innerText = jsonobj.shiftsTotal;
                gongdanhao.innerText = jsontsPlan.planNum;
                lilunzhouqi.innerText = jsonobj.standCycle;
                kaishishijian.innerText = jsontsPlan.beginDate;
                shijizhouqi.innerText = jsontsPlan.cycletime;
                dingdanliang.innerText = jsontsPlan.planCount;
                buliangshu.innerText = jsontsPlan.badproTotal;
                yiwanchengliang.innerText = jsontsPlan.proTotal;
                bulianglv.innerText = (jsontsPlan.badproTotal / jsontsPlan.proTotal).toFixed(2);
                planid = jsontsPlan.planId;//要传给后台的planid

                $.each(getsoplist, function (index, item)
                {
                    
                   
                    $.each(getsoplist[index], function (index1, item)
                    {
                        piclist.push(getsoplist[index][index1].soppath);
                    });
           
                });
                $.each(jsonpiclist, function (index, item)
                {
                    if (jsonpiclist[index].soppath != null && jsonpiclist[index].soppath != "")
                    {
                        piclist.push(jsonpiclist[index]);
                    }
                   
                });

                $.each(piclist, function (index, item)
                {
                    imgfile = "http://192.168.21.230:8081/" + piclist[index];
                    reletiveurl = piclist[index]
                    showFile(imgfile, reletiveurl);
                    //alert(imgfile);
                });
              
                $.each(jsonbadreasonlist, function (index, item)
                {

                    //循环获取数据
                    var id = jsonbadreasonlist[index].badproId;
                    var name = jsonbadreasonlist[index].badreason;
                    var num = jsonbadreasonlist[index].badproNum;

                    if (id == 1) {
                        value1.innerText = num;
                        id1.innerText = id;
                        name1.innerText = name;

                    }
                    if (id == 2) {
                        value2.innerText = num;
                        id2.innerText = id;
                        name2.innerText = name;
                    }
                    if (id == 3) {
                        value3.innerText = num;
                        id3.innerText = id;
                        name3.innerText = name;
                    }
                    if (id == 4) {
                        value4.innerText = num;
                        id4.innerText = id;
                        name4.innerText = name;
                    }
                    if (id == 5) {
                        value5.innerText = num;
                        id5.innerText = id;
                        name5.innerText = name;
                    }
                    if (id == 6) {
                        value6.innerText = num;
                        id6.innerText = id;
                        name6.innerText = name;
                    }
                    if (id == 7) {
                        value7.innerText = num;
                        id7.innerText = id;
                        name7.innerText = name;
                    }
                    if (id == 8) {
                        value8.innerText = num;
                        id8.innerText = id;
                        name8.innerText = name;
                    }
                    if (id == 9) {
                        value9.innerText = num;
                        id9.innerText = id;
                        name9.innerText = name;
                    }
                    if (id == 10) {
                        value10.innerText = num;
                        id10.innerText = id;
                        name10.innerText = name;
                    }
                    if (id == 11) {
                        value11.innerText = num;
                        id11.innerText = id;
                        name11.innerText = name;
                    }
                    if (id == 12) {
                        value12.innerText = num;
                        id12.innerText = id;
                        name12.innerText = name;
                    }
                    if (id == 13) {
                        value13.innerText = num;
                        id13.innerText = id;
                        name13.innerText = name;
                    }
                    if (id == 14) {
                        value14.innerText = num;
                        id14.innerText = id;
                        name14.innerText = name;
                    }
                    if (id == 15) {
                        value15.innerText = num;
                        id15.innerText = id;
                        name15.innerText = name;
                    }
                    if (id == 16) {
                        value16.innerText = num;
                        id16.innerText = id;
                        name16.innerText = name;
                    }
                    if (id == 17) {
                        value17.innerText = num;
                        id17.innerText = id;
                        name17.innerText = name;
                    }
                    if (id == 18) {
                        value18.innerText = num;
                        id18.innerText = id;
                        name18.innerText = name;
                    }
                    if (id == 19) {
                        value19.innerText = num;
                        id19.innerText = id;
                        name19.innerText = name;
                    }
                    if (id == 20) {
                        value20.innerText = num;
                        id20.innerText = id;
                        name20.innerText = name;
                    }
                    if (id == 21) {
                        value21.innerText = num;
                        id21.innerText = id;
                        name21.innerText = name;
                    }
                    if (id == 22) {
                        value22.innerText = num;
                        id22.innerText = id;
                        name22.innerText = name;
                    }
                    if (id == 23) {
                        value23.innerText = num;
                        id23.innerText = id;
                        name23.innerText = name;
                    }
                    if (id == 24) {
                        value24.innerText = num;
                        id24.innerText = id;
                        name24.innerText = name;
                    }
                    if (id == 25) {
                        value25.innerText = num;
                        id25.innerText = id;
                        name25.innerText = name;
                    }
                });
            }


          
            //=============大图自动轮播===============
            function autoPlay(parentID, childTag) {
                $(document).ready(function () {
                    //循环执行,每隔1秒钟执行一次 1000
                    var t1 = window.setInterval(refreshCount, 1000);

                    function refreshCount() {
                        console.log("ready");
                    }

                    //去掉定时器的方法  
                    //window.clearInterval(t1);
                });
                var pictures = document.getElementById(parentID);
                var items = pictures.getElementsByTagName(childTag);
                var len = items.length;
                var index = 0;
                showItem();
                // 显示一张图片
                function showItem() {
                    // 首先将所有图片透明度设为0
                    hideItems();
                    items[index].style.opacity = 1;
                    //items[index].css("opacity", "1");
                    // 将要显示的透明度改变让其显示

                    if (index > len - 2) {
                        index = 0;
                    }
                    else {
                        index++;
                    }

                    // 在这里用setTimeout模拟setInterval的效果
                    setTimeout(showItem, 15000);
                }
                // 将所有图片透明度设为0
                function hideItems(parentID, childTag) {
                    for (var i = 0; i < len; i++) {
                        items[i].style.opacity = 0;
                      
                    }

                }

            };
            //=================大图自动轮播=================
            //================================手动切换图片===================
            function manualPlay(parentID, childTag, keynum)
            {
                
                var pictures = document.getElementById(parentID);

                var items = pictures.getElementsByTagName(childTag);
                var len = items.length;
                //alert(len);
                showItem();
                // 显示一张图片
                function showItem()
                {
                    // 首先将所有图片透明度设为0
                    hideItems();
                    //items[2].style.opacity = 1;
                    // 将要显示的透明度改变让其显示
                   
                    if (keynum == 102)  //增加  6键
                    {
                        if (manualPlayindex > len - 2)
                        {
                            //alert("请按“-”号继续查看上图");
                            manualPlayindex = 0;
                        }
                        else
                        {
                            manualPlayindex++;
                        }
                    }
                    if (keynum == 100)   /*减少  4键*/
                    {
                        if (manualPlayindex < 1)
                        {
                            alert("请按键“6”继续查看下图");
                            manualPlayindex = 0;
                        }
                        else {
                            manualPlayindex--;
                        }
                    }
                  
                     items[manualPlayindex].style.opacity = 1;
                }
                // 将所有图片透明度设为0
                function hideItems(parentID, childTag) {
                    for (var i = 0; i < len; i++) {
                        items[i].style.opacity = 0;

                    }
                }
            };
            //===================手动切换图片=================

            //==================================================

            //================================================
            //=======================删除li元素========================
           
                //=======================删除li元素===================
            function showFile(file,reurl)
            {
                //var file = $(obj).attr("data-src");

                var arr = reurl.split('.');
                var name = arr[1];
                var img_infor = "";
                var ul = document.getElementById("pictures");
                var obj = document.createElement("li");
                if (name == "pdf")
                {
                    //img_infor = ' <iframe frameBorder="0" scrolling="no" src="' +
                    //    file + '" style="700px; height:800px;position: absolute;overflow:hidden; "></iframe>';
                    img_infor = ' <div style="height:800px;900px;position:absolute"> <iframe frameBorder="0" scrolling="no" src="' +
                        file + '" style="1400px; height:1000px;position: absolute;overflow:hidden;"></iframe></div>';
                   
                }
                else
                {
                    img_infor = '<div style="height: 1020px; 1430px; position: absolute"><img  src="' + file + ' "style="700px; height:800px;position: absolute;overflow:hidden;"/></div>';
                }
              
                obj.innerHTML = img_infor;
                ul.appendChild(obj);
                $('ul li').css('list-style', 'none');

                $('ul li').css('opacity', '0');
                $('ul li:first-child').css('opacity', '1');

            }
        </script>
    </body>



    </html>

  • 相关阅读:
    python自动化_day3_基础数据类型的整理
    python自动化_day2_基础数据类型0410
    解决PowerDesigner 12 建Oracle 9i数据库脚本双引号问题(转抄)
    获取WPF资源,生成文件
    DataTable 用法归纳
    VS2008开发环境中容易遇到的3个问题之解决办法(转载)
    调用线程必须为 STA,因为许多 UI 组件都需要(转载)
    无法在Web服务器上启动调试。您不具备调试此应用程序的权限_解决方法
    js 数组去重问题
    HTML空格转义字符的使用
  • 原文地址:https://www.cnblogs.com/zhengqian/p/10930573.html
Copyright © 2020-2023  润新知