YCQ

whycq

2021-12-29 99b4f2a8876546974737446378e4cddc6317ea78

YCQ

 src/main/webapp/static/css/console.css

@@ -48,6 +48,15 @@
            border-radius: 15px;
            margin-left: 1%;
        }
        .state-ss {
            margin-left: 60px;

        }





        /* 输送线状态 */
        .line-status {
            display: inline-block;
@@ -56,6 +65,18 @@
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            margin-left: 1%;
        }
        .line-ss {
            display: inline-block;
            float: right;
            height: 15px;
            width: 40px;
            margin-top: 10px;
            margin-right: 15px;
            line-height: 15px;
            text-align: center;
            background-color: rgba(5, 5, 5, 0.3);
            color: #ffdd00;
        }
        /* 条码扫描器 */
        .bar-code {
@@ -308,6 +329,40 @@
            background-position: top center;
            cursor: pointer;
        }
        /* 入库 */
        .machine-pakin {
            background-image: url("../images/Crane_store.png");
        }
        /* 出库 */
        .machine-pakout {
            background-image: url("../images/Crane_retrieve.png");
        }
        /* 库到库 */
        .machine-stock-move {
            background-image: url("../images/Crane_loctoloc.png");
        }
        /* 站到站 */
        .machine-site-move {
            background-image: url("../images/Crane_stntostn.png");
        }
        /* p to p */
        .machine-p-move {
            background-image: url("../images/Crane_hptoohp.png");
        }
        /* 异常 */
        .machine-error {
            background-image: url("../images/Crane_error.png");
        }
        /* 自动 */
        .machine-auto {
            background-image: url("../images/Crane_auto.png");
        }
        /* 非自动/收到 */
        .machine-un-auto {
            background-image: url("../images/Crane_manual.png");
        }


        /* 堆垛机弹窗 */
        #crnWindow {
            width: 291px;

 src/main/webapp/static/images/Crane_error.png

 src/main/webapp/static/images/Crane_hptoohp.png

 src/main/webapp/static/images/Crane_loctoloc.png

 src/main/webapp/static/images/Crane_manual.png

 src/main/webapp/static/images/Crane_manual1.png

 src/main/webapp/static/images/Crane_retrieve.png

 src/main/webapp/static/images/Crane_stntostn.png

 src/main/webapp/static/images/Crane_store.png

 src/main/webapp/views/console.html

@@ -5,7 +5,7 @@
        <title>WCS控制中心</title>
<!--<link rel="stylesheet" type="text/css" href="../static/css/common.css">-->
        <link rel="stylesheet" href="../static/css/console.css">
        <link rel="stylesheet" type="text/css" href="../static/css/normalize.css">
<!--        <link rel="stylesheet" type="text/css" href="../static/css/normalize.css">-->


        
@@ -61,8 +61,8 @@
            </div>
            <!--&lt;!&ndash; 第6列（宽度 70px） &ndash;&gt;-->
            <div class="site-row site-row-6">
                <div id="site-120" class="site" style="height: 31px;line-height: 31px">120(8888)</div>
                <div id="site-121" class="site" style="height: 31px;line-height: 31px">121(8888)</div>
                <div id="site-120" class="site" style="height: 31px;line-height: 31px">120</div>
                <div id="site-121" class="site" style="height: 31px;line-height: 31px">121</div>
                <div id="site-122" class="site" style="height: 71px;line-height: 71px">122</div>
                <div id="site-123" class="site" style="height: 31px;line-height: 31px">123</div>
                <div id="site-124" class="site" style="height: 31px;line-height: 31px">124</div>
@@ -914,6 +914,7 @@
                    </div>
                </div>
            </div>
            <!--底部-->
            <div id="body">
                <!-- 总开关 -->
                <div class="system-state">
@@ -931,11 +932,11 @@
                    <div class="body-head">堆垛机状态</div>
                    <div class="state">
                        <span>堆垛机 1</span>
                        <span>自动</span>
                        <span class="state-ss machine-put-flag    ">入库</span>
                    </div>
                    <div class="state">    
                        <span>堆垛机 2</span>
                        <span>自动</span>
                        <span class="state-ss machine-auto-flag    ">自动</span>
                        
                    </div>
                    <div class="button"><span>所有状态</span></div>
@@ -954,7 +955,7 @@
                    <div class="body-head">输送线状态</div>
                    <div class="state states">
                        <span>运输线总数</span>
                        <span>45</span>
                        <span class="line-ss">45</span>
                    </div>
                    <div class="button"><span>所有状态</span></div>
                        <div class="button item-group">
@@ -1194,27 +1195,51 @@
    </body>
</html>
<script type="text/javascript">
    // // 弹窗站点信息
    // $('.site').on('click',function(){
    //     var id = this.id.split("-")[1];
    //      $("#siteWindow").attr("style","display:block;");//显示div
    //      $(".detailed").empty();
    //      $('.detailed').append(id+'站点详细信息');
    // });
    // // 堆垛机信息
    // $('.machine').on('click',function(){
    //     var id = this.id.split("-")[1];
    //     $("#crnWindow").attr('style','display:block;');
    //     $('.detailed').empty();
    //     $('.detailed').append(id+'号堆垛机');
    // })
    // // 弹窗关闭
    // $('button').on('click',function(){
    //     $('#siteWindow').attr('style','display:none')
    //     $('#crnWindow').attr('style','display:none')
    // })
    // 弹窗站点信息
    $('.site').on('click',function(){
        var id = this.id.split("-")[1];
         $("#siteWindow").attr("style","display:block;");//显示div
         $(".detailed").empty();
         $('.detailed').append(id+'站点详细信息');
         $.post(baseUrl+"/console/site/detail", {siteId: id}, function (res) {
             for (var val in res.data) {
                 var find = $("#siteWindow").find(":input[name='" + val + "']");
                 if (find[0].type==='text') {
                     find.val(res.data[val]);
                 } else if (find[0].type === 'checkbox') {
                     find.attr("checked", res.data[val] === 'Y');
                 }
             }
         })
    });
    // 堆垛机信息
    $('.machine').on('click',function(){
        var id = this.id.split("-")[1];
        $("#crnWindow").attr('style','display:block;');
        $('.detailed').empty();
        $('.detailed').append(id+'号堆垛机');
        $.post(baseUrl+"/console/crn/detail", {crnNo: id}, function (res) {
            for (var val in res.data) {
                var find = $("#crnWindow").find(":input[name='" + val + "']");
                if (find[0].type==='text') {
                    find.val(res.data[val]);
                } else if (find[0].type === 'checkbox') {
                    find.attr("checked", res.data[val] === 'Y');
                }
            }
        })
    })
    // 弹窗关闭
    $('button').on('click',function(){
        $('#siteWindow').attr('style','display:none')
        $('#crnWindow').attr('style','display:none')
    })
    var crn1Position = 0;
    var crn2Position = 0;
    var crn3Position = 0;
    var crn4Position = 0;
    var crn5Position = 0;

    // 初始化
    getSitesInfo();
    getCrnInfo();
@@ -1418,6 +1443,18 @@
                $("#crn-2").animate({left: leftVal+'px'}, 1000);
                crn2Position = leftVal;
                break;
            case 3:
                $("#crn-3").animate({left: leftVal+'px'}, 1000);
                crn3Position = leftVal;
                break;
            case 4:
                $("#crn-4").animate({left: leftVal+'px'}, 1000);
                crn4Position = leftVal;
                break;
            case 5:
                $("#crn-5").animate({left: leftVal+'px'}, 1000);
                crn5Position = leftVal;
                break;
            default:
                break
        }
@@ -1426,69 +1463,69 @@
    // 页面点击事件监听 ---------------------------------------------------------

    // 输送设备点击事件
    $('.site').on('click', function () {
        var id = this.id.split("-")[1];
        if (id === undefined) {
            return;
        }
        layer.open({
            title: id + " 站点信息详情",
            closeBtn: 0,
            skin: 'layui-layer-lan',
            offset: '180px',
            type: 1,
            shadeClose: true,
            content: $('#siteWindow'),
            area: ['35rem', '18rem'],
            btn: ['确定', '关闭'],
            success: function(layero, index){
                http.post(baseUrl+"/console/site/detail", {siteId: id}, function (res) {
                    for (var val in res.data) {
                        var find = $("#siteWindow").find(":input[name='" + val + "']");
                        if (find[0].type==='text') {
                            find.val(res.data[val]);
                        } else if (find[0].type === 'checkbox') {
                            find.attr("checked", res.data[val] === 'Y');
                        }
                    }
                })
            },
            end: function () {
                $(':input', $("#siteWindow")).val('').removeAttr('checked').removeAttr('selected');
            }
        });
    });
    // $('.site').on('click', function () {
    //     var id = this.id.split("-")[1];
    //     if (id === undefined) {
    //         return;
    //     }
    //     layer.open({
    //         title: id + " 站点信息详情",
    //         closeBtn: 0,
    //         skin: 'layui-layer-lan',
    //         offset: '180px',
    //         type: 1,
    //         shadeClose: true,
    //         content: $('#siteWindow'),
    //         area: ['35rem', '18rem'],
    //         btn: ['确定', '关闭'],
    //         success: function(layero, index){
    //             http.post(baseUrl+"/console/site/detail", {siteId: id}, function (res) {
    //                 for (var val in res.data) {
    //                     var find = $("#siteWindow").find(":input[name='" + val + "']");
    //                     if (find[0].type==='text') {
    //                         find.val(res.data[val]);
    //                     } else if (find[0].type === 'checkbox') {
    //                         find.attr("checked", res.data[val] === 'Y');
    //                     }
    //                 }
    //             })
    //         },
    //         end: function () {
    //             $(':input', $("#siteWindow")).val('').removeAttr('checked').removeAttr('selected');
    //         }
    //     });
    // });

    // 堆垛机点击事件
    $('.machine').on('click', function () {
        var id = this.id.split("-")[1];
        layer.open({
            title: id+"号堆垛机",
            skin: 'layui-layer-lan',
            closeBtn: 0,
            type: 1,
            offset: '150px',
            shadeClose: true,
            content: $("#crnWindow"),
            area: ['40rem', '20rem'],
            btn: ['确定', '关闭'],
            success: function(layero, index){
                http.post(baseUrl+"/console/crn/detail", {crnNo: id}, function (res) {
                    for (var val in res.data) {
                        var find = $("#crnWindow").find(":input[name='" + val + "']");
                        if (find[0].type==='text') {
                            find.val(res.data[val]);
                        } else if (find[0].type === 'checkbox') {
                            find.attr("checked", res.data[val] === 'Y');
                        }
                    }
                })
            },
            end: function () {
                $(':input', $("#crnWindow")).val('').removeAttr('checked').removeAttr('selected');
            }
        });
    });
    // $('.machine').on('click', function () {
    //     var id = this.id.split("-")[1];
    //     layer.open({
    //         title: id+"号堆垛机",
    //         skin: 'layui-layer-lan',
    //         closeBtn: 0,
    //         type: 1,
    //         offset: '150px',
    //         shadeClose: true,
    //         content: $("#crnWindow"),
    //         area: ['40rem', '20rem'],
    //         btn: ['确定', '关闭'],
    //         success: function(layero, index){
    //             http.post(baseUrl+"/console/crn/detail", {crnNo: id}, function (res) {
    //                 for (var val in res.data) {
    //                     var find = $("#crnWindow").find(":input[name='" + val + "']");
    //                     if (find[0].type==='text') {
    //                         find.val(res.data[val]);
    //                     } else if (find[0].type === 'checkbox') {
    //                         find.attr("checked", res.data[val] === 'Y');
    //                     }
    //                 }
    //             })
    //         },
    //         end: function () {
    //             $(':input', $("#crnWindow")).val('').removeAttr('checked').removeAttr('selected');
    //         }
    //     });
    // });


    // 小车偏移动画