自动化立库仓库-WCS系统
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
#
vincent
2020-06-03 45e4c1543eaacc87ccf67a7ae91d2a8bb5b82ddc 
 src/main/webapp/views/console.html


@@ -14,15 +14,31 @@


    <script type="text/javascript" src="../static/js/common.js"></script>


    <script type="text/javascript" src="../static/js/layer/layer.js"></script>


    <style>




        /* layer 深蓝色按钮修改 */


        /*.layui-layer-lan .layui-layer-btn {*/


            /*border-top: none;*/


        /*}*/


        .layui-layer-lan .layui-layer-btn a {


            background: #4476A7;


            border-color: #4476A7;


            color: #fff;


        }


        .layui-layer-lan .layui-layer-btn .layui-layer-btn1 {


            background: #fff;


            color: #333;


            border-color: #E9E7E7;


        }


        .layui-layer-lan .layui-layer-btn .layui-layer-btn1:hover {


            background-color: #f7f7f7;


        }


    </style>


</head>


<body>


<header>


    <!-- 系统运行状态 -->


    <div class="system-state">


        <div class="system-icon"></div>


        <span>系统运行中...</span>


        <div id="system-icon" class="system-icon-open" onclick="systemSwitch()"></div>


        <span id="system-run-desc">系统运行中...</span>


    </div>




    <!-- 信息展示 -->


@@ -57,9 +73,6 @@


            </div>


        </div>


    </div>




    <!--分割线-->


    <!--<hr class="header-hr">-->


</header>


<main>




@@ -399,24 +412,304 @@


            <span class="row-no">1#</span>


        </div>


    </div>




    <!-- 右输送线 -->


    <!--<input id="val" type="text">-->


    <!--<button id="animate">animate</button>-->


</main>




<!-- 弹窗 -->


<!-- 输送设备弹窗 -->


<div id="siteWindow" style="display: none">


    <form>


        <!-- 第一行 -->


        <div class="form-item" style="width: 25%">


            <div class="form-item-label">


                <span>设备号</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="devpNo" value="12" disabled="disabled" style="width: 4rem">


            </div>


        </div>


        <div class="form-item" style="width: 25%">


            <div class="form-item-label">


                <span>工作号</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="workNo" value="9998" disabled="disabled" style="width: 4rem">


            </div>


        </div>


        <div class="form-item" style="width: 45%">


            <div class="form-item-label">


                <span>工作状态</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="workStatus" value="2.设备上移动" disabled="disabled" style="width: 10rem">


            </div>


        </div>




        <!-- 第二行 -->


        <div class="form-item" style="width: 20%">


            <div class="form-item-label">


                <span>自动</span>


            </div>


            <div class="form-item-input">


                <input type="checkbox" name="auto" disabled="disabled" style="width: 1rem" checked>


            </div>


        </div>


        <div class="form-item" style="width: 20%">


            <div class="form-item-label">


                <span>有物</span>


            </div>


            <div class="form-item-input">


                <input type="checkbox" name="loading" disabled="disabled" style="width: 1rem" checked>


            </div>


        </div>


         <div class="form-item" style="width: 20%">


             <div class="form-item-label">


                 <span>能入</span>


             </div>


             <div class="form-item-input">


                 <input type="checkbox" name="canining" disabled="disabled" style="width: 1rem" checked>


             </div>


         </div>


         <div class="form-item" style="width: 20%">


             <div class="form-item-label">


                 <span>能出</span>


             </div>


             <div class="form-item-input">


                 <input type="checkbox" name="canouting" disabled="disabled" style="width: 1rem" checked>


             </div>


        </div>




        <!-- 第三行 -->


        <div class="form-item" style="width: 40%">


            <div class="form-item-label">


                <span>出入类型</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="ioType" value="1.入库" disabled="disabled" style="width: 8rem">


            </div>


        </div>


        <div class="form-item" style="width: 25%">


            <div class="form-item-label">


                <span>源站</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="sourceStaNo" value="2303" disabled="disabled" style="width: 4rem">


            </div>


        </div>


        <div class="form-item" style="width: 25%">


            <div class="form-item-label">


                <span>目标站</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="staNo" value="2410" disabled="disabled" style="width: 4rem">


            </div>


        </div>




        <!-- 第四行 -->


        <div class="form-item" style="width: 40%">


            <div class="form-item-label">


                <span>源库位</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="sourceStock" value="" disabled="disabled" style="width: 8rem">


            </div>


        </div>


        <div class="form-item" style="width: 40%">


            <div class="form-item-label">


                <span>目标库位</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="stock" value="" style="width: 8rem">


            </div>


        </div>


    </form>


</div>




<!-- 堆垛机弹窗 -->


<div id="crnWindow" style="display: none">


    <form>


        <!-- 第一行 -->


        <div class="form-item" style="width: 23%">


            <div class="form-item-label"  style="width: 87px">


                <span>堆垛机号</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="crnNo" value="12" disabled="disabled" style="width: 3rem">


            </div>


        </div>


        <div class="form-item" style="width: 25%">


            <div class="form-item-label">


                <span>工作号</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="workNo" value="9998" disabled="disabled" style="width: 5rem">


            </div>


        </div>


        <div class="form-item" style="width: 23%">


            <div class="form-item-label">


                <span>源站</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="sourceStaNo" value="2303" disabled="disabled" style="width: 4rem">


            </div>


        </div>


        <div class="form-item" style="width: 25%">


            <div class="form-item-label">


                <span>目标站</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="staNo" value="2410" disabled="disabled" style="width: 4rem">


            </div>


        </div>




        <!-- 第二行 -->


        <div class="form-item" style="width: 45%">


            <div class="form-item-label" style="width: 87px">


                <span>工作状态</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="workStatus" value="2.设备上移动" disabled="disabled" style="width: 10rem">


            </div>


        </div>


        <div class="form-item" style="width: 45%">


            <div class="form-item-label">


                <span>出入类型</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="ioType" value="1.入库" disabled="disabled" style="width: 10rem">


            </div>


        </div>




        <!-- 第三行 -->


        <div class="form-item" style="width: 45%">


            <div class="form-item-label" style="width: 87px">


                <span>源库位</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="sourceStock" value="" disabled="disabled" style="width: 10rem">


            </div>


        </div>


        <div class="form-item" style="width: 45%">


            <div class="form-item-label">


                <span>目标库位</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="stock" value="" disabled="disabled" style="width: 10rem">


            </div>


        </div>




        <!-- 第四行 -->


        <div class="form-item" style="width: 95%">


            <div class="form-item-label">


                <span>堆垛机状态</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="crnStatus" disabled="disabled" style="width: 25rem">


            </div>


        </div>


        <div class="form-item" style="width: 95%">


            <div class="form-item-label" style="width: 87px">


                <span>异常</span>


            </div>


            <div class="form-item-input">


                <input type="text" name="error" disabled="disabled" style="width: 25rem">


            </div>


        </div>


    </form>


</div>




</body>


<script>




    var systemRunning = true;


    var crn1Position = 0;


    var crn2Position = 0;


    // 初始化


    getSitesInfo();


    getCrnInfo();


    getSystemRunningStatus();


    // 实时访问


    setInterval(function () {


        getSitesInfo();


        getCrnInfo();


        getSystemRunningStatus();


    }, 500);


    setInterval(function () {


        getSitesInfo();


    }, 3000);




    // 系统运行开关


    function systemSwitch() {


        if (systemRunning){


            layer.prompt({title: '请输入口令，并停止 WCS 系统', formType: 1,   shadeClose: true}, function(pass, idx){


                layer.close(idx);


                doSwitch(0, pass);


            });


        } else {


            doSwitch(1)


        }




    }




    // 请求服务器控制wcs系统运行状态


    function doSwitch(operatorType, password) {


        // 加载tips


        var index = layer.load(1, {


            shade: [0.1,'#fff']


        });


        $.ajax({


            url: baseUrl+ "/console/system/switch",


            headers: {'token': localStorage.getItem('token')},


            // async: false,


            data: {


                operatorType: operatorType,


                password: password


            },


            method: 'POST',


            success: function (res) {


                if (res.code === 200){


                    layer.close(index);


                    if (res.data.status) {


                        $('#system-icon').attr("class", "system-icon-open");


                        $('#system-run-desc').html("系统运行中...");


                        systemRunning = true;


                    } else {


                        $('#system-icon').attr("class", "system-icon-close");


                        $('#system-run-desc').html("系统已停止!");


                        systemRunning = false;


                    }


                } else if (res.code === 403){


                    top.location.href = baseUrl+"/login";


                }  else {


                    alert(res.msg);


                }


            }


        });




    }




    // 获取wcs系统运行状态


    function getSystemRunningStatus() {


        $.ajax({


            url: baseUrl+ "/console/system/running/status",


            headers: {'token': localStorage.getItem('token')},


            method: 'POST',


            success: function (res) {


                if (res.code === 200){


                    if (res.data.status) {


                        $('#system-icon').attr("class", "system-icon-open");


                        $('#system-run-desc').html("系统运行中...");


                        systemRunning = true;


                    } else {


                        $('#system-icon').attr("class", "system-icon-close");


                        $('#system-run-desc').html("系统已停止!");


                        systemRunning = false;


                    }


                } else if (res.code === 403){


                    top.location.href = baseUrl+"/login";


                }  else {


                    alert(res.msg);


                }


            }


        });


    }




    // 输送设备实时数据获取


    function getSitesInfo(){


@@ -448,7 +741,6 @@


            success: function (res) {


                if (res.code === 200){


                    var crns = res.data;


                    console.log(crns);


                    for (var i = 0; i < crns.length; i++){


                        crnAnimate(crns[i].crnId, crns[i].offset);


                    }


@@ -495,16 +787,44 @@


        }


    }




    // 页面点击事件监听 ---------------------------------------------------------




    $('.item').on('click', function () {


    // 输送设备点击事件


    $('.site').on('click', function () {


        layer.open({


            title: "1204站点信息",


            closeBtn: 0,


            skin: 'layui-layer-lan',


            offset: '180px',


            type: 1,


            shadeClose: true, //点击遮罩关闭层


            content: 'text'


            shadeClose: true,


            content: $('#siteWindow'),


            area: ['35rem', '18rem'],


            btn: ['确定', '关闭'],


            yes: function(index, layero){


                layer.close(index);


                alert(1);


            }


        });


    });


    $('#animate').click(function () {


        crnAnimate(1, $('#val').val());




    // 堆垛机点击事件


    $('.machine').on('click', function () {


        layer.open({


            title: "1号堆垛机",


            skin: 'layui-layer-lan',


            closeBtn: 0,


            type: 1,


            offset: '150px',


            shadeClose: true,


            content: $("#crnWindow"),


            area: ['40rem', '20rem'],


            btn: ['确定', '关闭'],


            yes: function(index, layero){


                layer.close(index);


                alert(1);


            }


        });


    });




</script>