# ycq

whycq

2022-05-25 d63e87164a8dd1a178301080dd9a450802149f97

# ycq

 src/main/webapp/static/css/render.css

New file
@@ -0,0 +1,475 @@
* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
body {
    height: 1080px;
    width: 1920px;
}
#main {
    height: 100%;
    width: 100%;
    background-color: rgb(108,167,168);
}
.head {
    height: 10%;
    width: 100%;
    color: #FFFFFF;
}
.head-left {
    height: 100%;
    width: 20%;
    display: inline-block;
}
.head-right {
    height: 100%;
    width: 30%;
    display: inline-block;
    float: right;
}
.head h1 {
    display: inline;
    margin-top: 2%;
    margin-left: 2%;
    font-weight: 400;
    letter-spacing:3px;
}
.head h6 {
    display: inline;
    margin-left: 2%;
    font-weight: 400;
}

img {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}
.rack {
    position: absolute;
    display: inline-block;
}
.rackDescs {
    height: 100%;
    width: 100%;
    position: absolute;
    display: inline-block;
    text-align: center;
}
.stn {
    text-align: center;
    background-color: rgb(120,255,129);
    position: absolute;
}
.crn {
    position: absolute;
    display: inline-block;
    background-color: #00ff90;
    z-index: 999;
}
.track {
    position: absolute;
    display: inline-block;
    background-color: #000000;
}
.item {
    border: 1px solid rgb(194,76,65);
    color: rgb(194,76,65);
    height: 100%;
    width: 100%;
}

/*操作显示栏*/
#body {
    width: 100%;
    height: 23%    ;
    position: absolute;
    bottom: 2.5%;
}
/* 控制开关 */
.system-state {
    display: inline-block;
    width: 15%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    margin-left: 1%;
}
/* 堆垛机状态 */
.machine-status {
    display: inline-block;
    width: 15%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    margin-left: 1%;
}
.state-ss {
    margin-left: 60px;

}

/* 输送线状态 */
.line-status {
    display: inline-block;
    width: 15%;
    height: 100%;
    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 {
    display: inline-block;
    width: 49%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    margin-left: 1%;
}
/*扫码表单*/
.tablebox {
    display: inline-block;
    width: 290px;
    height: 162px;
    margin-left: 1.5%;
    color: white;
    font-size: 14px;
    list-style: none;
    line-height: 27px;
    text-indent: 10px;
}
.table-head {
    width: 100%;
    height: 27px;
    background:linear-gradient(to right, rgb(94, 193, 184),rgb(12,71,63));
}
.right {
    float: right;
    text-indent: 10px;
    padding-right: 10px;
}
.table-body li {
    background-color: #5D7677;
}
.table-body li:nth-child(even) {
    background-color: #4A6565;
}



/* 控制表头 */
.body-head {
    height: 35px;
    width: 100%;
    background-image: url(../images/status_bar_1.png);
    background-repeat: no-repeat;
    margin-left: 5%;
    margin-top: 20px;
    text-indent: 25px;
    color: white;
}


.system-icon-open {
    width: 153px;
    height: 153px;
    background-image: url(../images/start48.png);
    display: inline-block;
}
.system-icon-close {
    width: 153px;
    height: 153px;
    background-image: url(../images/stop48.png);
    display: inline-block;
}
.switch_r {
    color: #FFFFFF;
    font-size: 14px;
    width: 130px;
    height: 153px;
    float: right;
    padding-top: 30px;
}
#system-run-desc {
    font-size: 20px;
    margin-top: 15px;
}
.state {
    height: 34px;
    width: 200px;
    background-color: rgba(255,255,255,0.1);
    background-image: url(../images/stacker.png);
    background-repeat: no-repeat;
    border-radius: 17px 0 0 17px;
    padding-left: 50px;
    line-height: 34px;
    margin-bottom: 10px;
    margin-left: 5%;
    color: #FFFFFF;
    font-size: 10px;
}
.states {
    background-image: url(../images/line.png);
    margin-bottom:54px;
}
.button {
    margin-left: 5%;
    font-size: 14px;
    color: #FFFFFF;
}
/* 站点 */
.site {
    position: absolute;
    color: #333;
    cursor: pointer;
    text-align: center;
    background-color: rgb(120,255,129);
    font-size: 14px;
}
/*空站点*/
.site-k {
    border: 1px solid rgb(108,167,168);
    background-color: rgb(108, 167, 168);
}
/* 入库 */
.machine-put-flag {
    padding: 0 10px;
    background-color: rgb(163,214,242);
}
/* 出库 */
.machine-take-flag {
    padding: 0 10px;
    background-color: rgb(151,180,0);
}
/* 库到库 */
.machine-stock-move-flag {
    padding: 0 10px;
    background-color: rgb(58,77,249);
}
/* 站到站 */
.machine-site-move-flag {
    padding: 0 10px;
    background-color: rgb(240,140,10);
}
/* PToP */
.machine-p-move-flag {
    padding: 0 10px;
    background-color: rgb(29,152,23);
}
/* 异常 */
.machine-error-flag {
    padding: 0 10px;
    background-color: rgb(252,48,48);
}
/* 自动 */
.machine-auto-flag {
    padding: 0 10px;
    background-color: rgb(132,255,115);
}
/* 非自动/手动 */
.machine-unauto-flag {
    padding: 0 10px;
    background-color: rgb(184,184,184);
}
/* 自动+有物+ID */
.site-auto-run-id {
    background-color: rgb(252,48,48);
}
/* 自动+有物 */
.site-auto-run {
    background-color: rgb(250,81,246);
}
/* 自动+ID */
.site-auto-id {
    background-color: rgb(196,196,0);
}
/* 自动 */
.site-auto {
    background-color: rgb(120,255,129);
}
/* 非自动/手动 */
.site-unauto {
    background-color: rgb(184,184,184);
}
#code {
    background-image: url(../images/status_bar_2.png);
    background-repeat: no-repeat;
    margin-left: 2%;
}
/* 堆垛机 */
.machine {
    position: absolute;
    background-color: rgb(108,167,168);
    margin-left: 1116px;
    height: 20px;
    width: 80px;
    background-image: url("../images/Crane_auto.png");
    background-repeat: no-repeat;
    background-size:100% 100%;
    background-position: top center;
    cursor: pointer;
    z-index: 99;
}
/* 入库 */
.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;
    height: 365px;
    background-image: url(../images/Popup-yellow.png);
    position: fixed;
    color:white;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 101;
}
/* 输送设备弹窗 */
#siteWindow {
    width: 291px;
    height: 336px;
    background-image: url(../images/Popup-green.png);
    position: fixed;
    color:white;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 101;
}
#siteWindow-head {
    width: 291px;
    height: 55px;
    line-height: 55px;
    margin-left: 25px;
    color: #000000;
    font-weight: 700;
    letter-spacing: 2px;
}
#siteWindow-head .detailed {
    display: inline-block;
}
#siteWindow-head button {
    width: 25px;
    height: 25px;
    padding: 0px;
    border: none;
    border-radius: 25px;
    background-image: url(../images/siteclose.png);
    display: inline-block;
    float: right;
    margin-top: 15px;
    margin-right: 50px;
}
#crnWindow-head {
    width: 291px;
    height: 55px;
    line-height: 55px;
    margin-left: 55px;
    color: #000000;
    font-weight: 700;
    letter-spacing: 2px;

}
#crnWindow-head .detailed {
    display: inline-block;
}
#crnWindow-head button {
    width: 25px;
    height: 25px;
    padding: 0px;
    border: none;
    border-radius: 25px;
    background-image: url(../images/siteclose.png);
    display: inline-block;
    float: right;
    margin-top: 15px;
    margin-right: 80px;
}



/* 弹窗 */
form .form-item {
    display: inline-block;
    padding-left: 10px;
}
form .form-item-label {
    display: inline-block;
    width: 90px;
    font-size: 10px;
}
form .form-item-input {
    display: inline-block;
    width: 180px;

}
form .form-item-input input {
    background-color: rgba(255,255,255,.3);
    color: #FFFFFF;
    padding: 0;
    border: none;
    border-radius: 2px;
    height: 18px;
    padding-left: 10px;
}
/* checkbox */
form .form-item-checkbox {
    display: inline-block;
    padding-left: 10px;
    width: 20%;
}
form .form-item-label-checkbox {
    display: inline-block;
    width: auto;
    font-size: 14px;
}
form .form-item-input-checkbox {
    display: inline-block;
    width: auto;

}

 src/main/webapp/views/render.html

New file
@@ -0,0 +1,711 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动仓库wcs系统</title>
    <link rel="stylesheet" href="../static/css/render.css">
    <script src="../static/js/jquery/jquery-3.3.1.min.js"></script>
    <script src="../static/js/layer/layer.js"></script>
    <script src="./render.js"></script>
    <script src="../static/js/common.js"></script>


</head>
<body>
    <div id="main">
        <div class="head">
            <div class="head-left">
                <h1>自动仓库WCS监控图</h1>
                <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6>
            </div>
            <div class="head-right">
                <img src="../static/images/zy-logo.png" alt="中扬" height="44" width="80">
            </div>
        </div>
        <!-- 货架 + 堆垛机 + 入库站点 -->
        <div class="main-part">

        </div>
        <div id="body">
            <!-- 总开关 -->
            <div class="system-state">
                <div class="body-head">总开关</div>
                <div class="switch">
                    <div id="system-icon" class="system-icon-open" onclick="systemSwitch()"></div>
                    <div class="switch_r">
                        <p>系统状态</p>
                        <p id="system-run-desc">系统运行中</p>
                    </div>
                </div>
            </div>
            <!-- 堆垛机状态 -->
            <div class="machine-status">
                <div class="body-head">堆垛机状态</div>
                <div class="state">
                    <span>堆垛机 1</span>
                    <span class="state-ss machine-put-flag    ">入库</span>
                </div>
                <div class="state">
                    <span>堆垛机 2</span>
                    <span class="state-ss machine-auto-flag    ">自动</span>

                </div>
                <div class="button"><span>所有状态</span></div>
                <div class="button item-group">
                    <span class="machine-put-flag">入库</span>
                    <span class="machine-take-flag">出库</span>
                    <span class="machine-stock-move-flag">库到库</span>
                    <span class="machine-site-move-flag">站到站</span>
                    <span class="machine-p-move-flag">PToP</span>
                    <span class="machine-error-flag">异常</span>
                    <span class="machine-auto-flag">自动</span>
                    <span class="machine-unauto-flag">非自动/手动</span>
                </div>
            </div>
            <div class="line-status">
                <div class="body-head">输送线状态</div>
                <div class="state states">
                    <span>运输线总数</span>
                    <span class="line-ss">58</span>
                </div>
                <div class="button"><span>所有状态</span></div>
                <div class="button item-group">
                    <span class="site-auto-run-id">自动+有物+ID</span>
                    <span class="site-auto-run">自动+有物</span>
                    <span class="site-auto-id">自动+ID</span>
                    <span class="site-auto">自动</span>
                    <span class="site-unauto">非自动/手动</span>
                </div>
            </div>
            <div class="bar-code">
                <div class="body-head" id="code">条码扫描器</div>
                <div class="tablebox">
                    <div class="table-head">
                        <li><span>条码名称</span><span class="right">扫码时间</span></li>
                    </div>
                    <div id="barcode1" class="table-body">

                    </div>
                </div>
                <div class="tablebox">
                    <div class="table-head">
                        <li><span>条码名称</span><span class="right">扫码时间</span></li>
                    </div>
                    <div id="barcode2" class="table-body">

                    </div>
                </div>
                <div class="tablebox">
                    <div class="table-head">
                        <li><span>条码名称</span><span class="right">扫码时间</span></li>
                    </div>
                    <div id="barcode3" class="table-body">

                    </div>
                </div>
            </div>
        </div>
        <!-- 堆垛机弹窗 -->
        <div id="crnWindow" style="display: none;" class="animate__animated animate__fadeIn">
            <div id="crnWindow-head">
                <div class='detailed'></div>
                <button></button>
            </div>
            <form>
                <!-- 堆垛机号 -->
                <div class="form-item">
                    <div class="form-item-label" style>
                        <span>堆垛机号：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="crnNo" value="">
                    </div>
                </div>
                <!-- 工作号 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>工作号：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="workNo" value="">
                    </div>
                </div>
                <!-- 站源 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>站源：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="sourceStaNo" value="">
                    </div>
                </div>
                <!-- 目标站 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>目标站：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="staNo" value="">
                    </div>
                </div>
                <!-- 工作状态 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>工作状态：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="wrkSts" value="">
                    </div>
                </div>
                <!-- 出入类型 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>出入类型：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="ioType" value="">
                    </div>
                </div>
                <!-- 源库位 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>源库位：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="sourceLocNo" value="">
                    </div>
                </div>
                <!-- 目标库位 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>目标库位：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="locNo" value="">
                    </div>
                </div>
                <!-- 堆垛机状态 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>堆垛机状态：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="crnStatus" value="">
                    </div>
                </div>
                <!-- 异常 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>异常：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="error" value="">
                    </div>
                </div>
            </form>
        </div>
        <!-- 输送设备弹窗 -->
        <div id="siteWindow" style="display: none;" class="animate__animated animate__fadeIn">
            <!-- 表头 -->
            <div id="siteWindow-head">
                <div class='detailed'></div>
                <button></button>
            </div>
            <form>
                <!-- 设备号 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>设备号：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="siteId" value="">
                    </div>
                </div>
                <!-- 工作号 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>工作号：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="workNo" value="">
                    </div>
                </div>
                <!-- 工作状态 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>工作状态：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="wrkSts" value="">
                    </div>
                </div>
                <!-- 自动 -->
                <div class="form-item-checkbox">
                    <div class="form-item-label-checkbox">
                        <span>自动</span>
                    </div>
                    <div class="form-item-input-checkbox">
                        <input type="checkbox" name="autoing">
                    </div>
                </div>
                <!-- 有物 -->
                <div class="form-item-checkbox">
                    <div class="form-item-label-checkbox">
                        <span>有物</span>
                    </div>
                    <div class="form-item-input-checkbox">
                        <input type="checkbox" name="loading">
                    </div>
                </div>
                <!-- 能入 -->
                <div class="form-item-checkbox">
                    <div class="form-item-label-checkbox">
                        <span>能入</span>
                    </div>
                    <div class="form-item-input-checkbox">
                        <input type="checkbox" name="canining">
                    </div>
                </div>
                <!-- 能出 -->
                <div class="form-item-checkbox">
                    <div class="form-item-label-checkbox">
                        <span>能出</span>
                    </div>
                    <div class="form-item-input-checkbox">
                        <input type="checkbox" name="canouting">
                    </div>
                </div>
                <!-- 出入类型 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>出入类型：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="ioType" value="">
                    </div>
                </div>
                <!-- 源站 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>源站：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="sourceStaNo" value="">
                    </div>
                </div>
                <!-- 目标站 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>目标站：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="staNo" value="">
                    </div>
                </div>
                <!-- 源库位 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>源库位：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="sourceLocNo" value="">
                    </div>
                </div>
                <!-- 目标库位 -->
                <div class="form-item">
                    <div class="form-item-label">
                        <span>目标库位：</span>
                    </div>
                    <div class="form-item-input">
                        <input type="text" name="locNo" value="">
                    </div>
                </div>

            </form>
        </div>
    </div>

</body>

</html>
<script>
    getMap();
</script>
<script>
    setInterval(function () {
        getCodeData();
        renderBarCode();
    }, 1000)
    var tData = [],tData1 = [],tData2 = [],tData3 = [];
    function getCodeData() {
        $.ajax({
            url: baseUrl + '/console/barcode/output/site',
            method: 'GET',
            success: function (res) {
                if (res.code === 200) {
                    tData = eval(res.data);
                    if (tData.length <= 5) {
                        tData1 = tData
                    } else if (tData.length <= 10) {
                        tData1 = tData.slice(0, 5)
                        tData.splice(0, 5)
                        tData2 = tData
                    } else if (tData.length <= 15) {
                        tData1 = tData.slice(0, 5)
                        tData2 = tData.slice(6, 10)
                        tData.splice(0, 10)
                        tData3 = tData
                    } else {
                        tData = tData.slice(-15)
                        tData1 = tData.slice(-15)
                        tData2 = tData.slice(-10)
                        tData3 = tData.slice(-5)
                    }
                }
            }
        })
    }
    function renderBarCode() {
        for (var i = 0; i < tData1.length; i++) {
            var str1 = '<li><span>' + tData1[i].barcode + '</span><span class="right">' + tData1[i].time + '</span></li>'
            $('#barcode1').append(str1)
        }
        for (var j = 0; j < tData2.length; j++) {
            var str2 = '<li><span>' + tData2[j].barcode + '</span><span class="right">' + tData2[j].time + '</span></li>'
            $('#barcode2').append(str2)
        }
        for (var k = 0; k < tData3.length; k++) {
            var str3 = '<li><span>' + tData3[k].barcode + '</span><span class="right">' + tData3[k].time + '</span></li>'
            $('#barcode3').append(str3)
        }
    }
</script>
<script type="text/javascript">
    // 弹窗站点信息
    $('.site').on('click', function () {
        var id = this.id.split("-")[1];
        $("#siteWindow").attr("style", "display:block;");//显示div
        $("#crnWindow").attr("style", "display:none;");
        $(".detailed").empty();
        $('.detailed').append(id + '站点详细信息');
        $.ajax({
            url: baseUrl + "/console/site/detail",
            headers: {
                'token': localStorage.getItem('token')
            },
            data: {
                siteId: id
            },
            method: 'post',
            success: 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;');
        $("#siteWindow").attr("style", "display:none;");
        $('.detailed').empty();
        $('.detailed').append(id + '号堆垛机');
        $.ajax({
            url: baseUrl + "/console/crn/detail",
            headers: {
                'token': localStorage.getItem('token')
            },
            data: {
                crnNo: id
            },
            method: 'post',
            success: 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();
    getSystemRunningStatus();
    getBarcodeInfo();
    getScaleInfo();
    // 实时访问
    setInterval(function () {
        getCrnInfo();
        getSystemRunningStatus();
        getBarcodeInfo();
        getScaleInfo();
    }, 1000);
    setInterval(function () {
        getSitesInfo();
    }, 3000);

    // 系统运行开关
    function systemSwitch() {
        if (parent.systemRunning) {
            layer.prompt({title: '请输入口令，并停止 WCS 系统', formType: 1, shadeClose: true}, function (pass, idx) {
                layer.close(idx);
                doSwitch(0, pass); // 停止wcs系统
            });
        } else {
            doSwitch(1); // 启动wcs系统
        }
    }

    // 请求服务器控制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) {
                layer.close(index);
                if (res.code === 200) {
                    if (res.data.status) {
                        $('#system-icon').attr("class", "system-icon-open");
                        $('#system-run-desc').html("系统运行中...");
                        parent.systemRunning = true;
                    } else {
                        $('#system-icon').attr("class", "system-icon-close");
                        $('#system-run-desc').html("系统已停止!");
                        parent.systemRunning = false;
                    }
                } else if (res.code === 403) {
                    parent.location.href = baseUrl + "/login";
                } else {
                    console.log(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("系统运行中...");
                        parent.systemRunning = true;
                    } else {
                        $('#system-icon').attr("class", "system-icon-close");
                        $('#system-run-desc').html("系统已停止!");
                        parent.systemRunning = false;
                    }
                } else if (res.code === 403) {
                    parent.location.href = baseUrl + "/login";
                } else {
                    console.log(res.msg);
                }
            }
        });
    }

    // 输送设备实时数据获取
    function getSitesInfo() {
        $.ajax({
            url: baseUrl + "/console/latest/data/site",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    var sites = res.data;
                    for (var i = 0; i < sites.length; i++) {
                        var siteEl = $("#site-" + sites[i].siteId);
                        siteEl.attr("class", "site " + sites[i].siteStatus);
                        if (sites[i].workNo != null && sites[i].workNo > 0) {
                            siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]");
                        } else {
                            siteEl.html(sites[i].siteId);
                        }
                        if (i + 1 === 8) {
                            carAnimate(i + 1, Number(sites[i].nearbySta));
                        }
                    }
                } else if (res.code === 403) {
                    parent.location.href = baseUrl + "/login";
                } else {
                    console.log(res.msg);
                }
            }
        });
    }

    // 堆垛机实时数据获取
    function getCrnInfo() {
        $.ajax({
            url: baseUrl + "/console/latest/data/crn",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
                console.log(res)
                if (res.code === 200) {
                    var crns = res.data;
                    for (var i = 0; i < crns.length; i++) {
                        var crnEl = $("#crn-" + crns[i].crnId);
                        crnEl.attr("class", "machine " + crns[i].crnStatus);
                        var unit = ($('.item').eq(0).width() + 13) / 2;
                        if (crns[i].bay < 0) {
                            crns[i].bay = 0
                        }
                        crnEl.animate({left: (crns[i].bay * unit) + 'px'}, 1000);
                    }
                } else if (res.code === 403) {
                    parent.location.href = baseUrl + "/login";
                } else {
                    console.log(res.msg);
                }
            }
        });
    }

    // 扫码器实时数据获取
    function getBarcodeInfo() {
        $.ajax({
            url: baseUrl + "/console/latest/data/barcode",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    var barcodes = res.data;
                    for (var i = 0; i < barcodes.length; i++) {
                        $("#code-decoder-data-" + barcodes[i].barcodeId).html(barcodes[i].codeValue);
                    }
                } else if (res.code === 403) {
                    parent.location.href = baseUrl + "/login";
                } else {
                    console.log(res.msg);
                }
            }
        });
    }

    // 磅秤实时数据获取
    function getScaleInfo() {
        $.ajax({
            url: baseUrl + "/console/latest/data/scale",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {

                if (res.code === 200) {
                    var sclaes = res.data;
                    for (var i = 0; i < sclaes.length; i++) {
                        console.log(sclaes[i].scaleId + ":" + sclaes[i].value)
                        $("#scale-data-" + sclaes[i].scaleId).text(sclaes[i].value);
                    }
                } else if (res.code === 403) {
                    parent.location.href = baseUrl + "/login";
                } else {
                    console.log(res.msg);
                }
            }
        });
    }

    // 堆垛机偏移动画
    function crnAnimate(id, leftVal) {
        console.log(crn1Position)
        switch (id) {
            case 1:
                $("#crn-1").animate({left: leftVal + 'px'}, 1000);
                crn1Position = leftVal;
                break;
            case 2:
                $("#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
        }
    }

    // 小车偏移动画
    function carAnimate(id, target) {
        var targetTop = 122;
        if (id === 8) {
            switch (target) {
                case 1:
                    targetTop += 160;
                    break;
                case 2:
                    targetTop += 140;
                    break;
                case 3:
                    targetTop += 80;
                    break;
                case 4:
                    targetTop += 40;
                    break;
                case 7:
                    targetTop += 0;
                    break;
                default:
                    return;
            }
        } else {
            return;
        }
        $("#site-" + id).animate({top: targetTop + 'px'}, 1000);
    }


</script>

 src/main/webapp/views/render.js

New file
@@ -0,0 +1,709 @@
data = {
    "mapName": "克劳斯玛菲WCS",
    "rackCount": 12,
    "crnCount": 3,
    "stbCount": 36,
    "hpPosition": 1,
    "minBayNo": 2,
    "floors": 1,
    "racks": [
    {
        "type": "rack",
        "id": "rack12",
        "top": 646,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack11",
        "top": 613,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack10",
        "top": 516,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack9",
        "top": 483,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack8",
        "top": 451,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack7",
        "top": 418,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack6",
        "top": 323,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack5",
        "top": 290,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack3",
        "top": 225,
        "left": 188,
        "width": 1023,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 60
    },
    {
        "type": "rack",
        "id": "rack1",
        "top": 97,
        "left": 188,
        "width": 1023,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 60
    },
    {
        "type": "rack",
        "id": "rack4",
        "top": 257,
        "left": 188,
        "width": 1023,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 60
    },
    {
        "type": "rack",
        "id": "rack2",
        "top": 129,
        "left": 188,
        "width": 1023,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 60
    }
],
    "rackDescs": [
    {
        "type": "rackDescs",
        "id": "lb_desc12",
        "text": "#12",
        "top": 646,
        "left": 260,
        "width": 47,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc11",
        "text": "#11",
        "top": 618,
        "left": 260,
        "width": 44,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc10",
        "text": "#10",
        "top": 516,
        "left": 257,
        "width": 49,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc9",
        "text": "#9",
        "top": 488,
        "left": 257,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc8",
        "text": "#8",
        "top": 449,
        "left": 260,
        "width": 39,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc7",
        "text": "#7",
        "top": 421,
        "left": 260,
        "width": 37,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc6",
        "text": "#6",
        "top": 327,
        "left": 260,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc5",
        "text": "#5",
        "top": 291,
        "left": 261,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc4",
        "text": "#4",
        "top": 253,
        "left": 145,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc3",
        "text": "#3",
        "top": 225,
        "left": 145,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc2",
        "text": "#2",
        "top": 128,
        "left": 145,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc1",
        "text": "#1",
        "top": 100,
        "left": 145,
        "width": 35,
        "height": 27
    }
],
    "crns": [
    {
        "type": "crane",
        "id": "crn-1",
        "text": "1",
        "top": 184,
        "left": 777,
        "width": 93,
        "height": 22
    },
    {
        "type": "crane",
        "id": "crn-2",
        "text": "2",
        "top": 378,
        "left": 777,
        "width": 93,
        "height": 22
    },
    {
        "type": "crane",
        "id": "crn-3",
        "text": "3",
        "top": 572,
        "left": 777,
        "width": 93,
        "height": 22
    },
    {
        "type": "track",
        "id": "lb_track2",
        "text": "",
        "top": 390,
        "left": 325,
        "width": 1010,
        "height": 2
    },
    {
        "type": "track",
        "id": "lb_track3",
        "text": "",
        "top": 584,
        "left": 325,
        "width": 1010,
        "height": 2
    },
    {
        "type": "track",
        "id": "lb_track1",
        "text": "",
        "top": 197,
        "left": 188,
        "width": 1148,
        "height": 2
    }
],
    "stns": [
    {
        "type": "stn",
        "id": "site-132",
        "text": "132",
        "top": 547,
        "left": 1399,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "site-126",
        "text": "126",
        "top": 450,
        "left": 1461,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "site-125",
        "text": "125",
        "top": 450,
        "left": 1399,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "site-119",
        "text": "119",
        "top": 353,
        "left": 1461,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "site-118",
        "text": "118",
        "top": 353,
        "left": 1399,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "site-136",
        "text": "136",
        "top": 611,
        "left": 1461,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-135",
        "text": "135",
        "top": 611,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-134",
        "text": "134",
        "top": 611,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-133",
        "text": "133",
        "top": 611,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-130",
        "text": "130",
        "top": 515,
        "left": 1461,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-129",
        "text": "129",
        "top": 515,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-128",
        "text": "128",
        "top": 515,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-127",
        "text": "127",
        "top": 515,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-131",
        "text": "131",
        "top": 515,
        "left": 1522,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-123",
        "text": "123",
        "top": 418,
        "left": 1461,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-122",
        "text": "122",
        "top": 418,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-121",
        "text": "121",
        "top": 418,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-120",
        "text": "120",
        "top": 418,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-124",
        "text": "124",
        "top": 418,
        "left": 1522,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-112",
        "text": "112",
        "top": 256,
        "left": 1461,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "site-111",
        "text": "111",
        "top": 256,
        "left": 1399,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "site-116",
        "text": "116",
        "top": 321,
        "left": 1461,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-115",
        "text": "115",
        "top": 321,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-114",
        "text": "114",
        "top": 321,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-113",
        "text": "113",
        "top": 321,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-117",
        "text": "117",
        "top": 321,
        "left": 1522,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-105",
        "text": "105",
        "top": 159,
        "left": 1399,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "site-109",
        "text": "109",
        "top": 224,
        "left": 1461,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-108",
        "text": "108",
        "top": 224,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-107",
        "text": "107",
        "top": 224,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-106",
        "text": "106",
        "top": 224,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-104",
        "text": "104",
        "top": 128,
        "left": 1461,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-103",
        "text": "103",
        "top": 128,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-102",
        "text": "102",
        "top": 128,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-101",
        "text": "101",
        "top": 128,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "site-110",
        "text": "110",
        "top": 224,
        "left": 1522,
        "width": 60,
        "height": 30
    }
]
}
// 库位图
function getMap() {
    let mapName = "<div class='mapName'>" + data.mapName + "</div>"
    let rack = '', racks = '', rackDesc = '',
        rackDescs = '', crn = '', crns = '',track = '',
        tracks = '', stn = '', stns = '';
    let rackss = data.racks,
        rackDescss = data.rackDescs,
        crnss = data.crns,
        stnss = data.stns;
    // 货架
    for (let i = 0;i < rackss.length;i++) {
        let btn =''
        let btns = ''
        var maxBayNo = rackss[i].maxBayNo
        var minBayNo = rackss[i].minBayNo
        let bLen = maxBayNo / minBayNo
        if (data.hpPosition == 1) {
            for (let j = bLen;j > 0; j--) {
                btn = "<button class='item' style='width: 34px'>" + maxBayNo + "</button>"
                btns = btns + btn
                maxBayNo = maxBayNo - minBayNo;
            }
        }else {
            for (let j = 0;j < bLen; j++) {
                btn = "<button class='item' style='width: 34px'>" + minBayNo + "</button>"
                btns = btns + btn
                minBayNo = minBayNo + minBayNo;
            }
        }

        rack = "<div class='rack' id='" + rackss[i].id +
            "'style='width:"+ rackss[i].width +
            "px;height: "+ rackss[i].height+
            "px;top: "+ rackss[i].top +
            "px;left: "+ rackss[i].left +
            "px'>" + btns + "</div>"
        racks = racks + rack
    }
    // 货架描述
    for (let i = 0;i < rackDescss.length;i++) {
        rackDesc = "<div class='rackDescs' id='" + rackDescss[i].id +
            "'style='width:"+ rackDescss[i].width +
            "px;height: "+ rackDescss[i].height+
            "px;line-height: "+ rackDescss[i].height+
            "px;top: "+ rackDescss[i].top +
            "px;left: "+ rackDescss[i].left +
            "px'>" + rackDescss[i].text + "</div>"
        rackDescs = rackDescs + rackDesc
    }
    // 堆垛机和地轨
    for (let i = 0;i < crnss.length;i++) {
        if (crnss[i].type == "crane") {
            crn = "<div class='machine' id='" + crnss[i].id +
                "'style='width:"+ crnss[i].width +
                "px;height: "+ crnss[i].height+
                "px;top: "+ crnss[i].top +
                "px;left: "+ crnss[i].left +
                "px'></div>"
            crns = crns + crn
        } else {
            track = "<div class='track' id='" + crnss[i].id +
                "'style='width:"+ crnss[i].width +
                "px;height: "+ crnss[i].height+
                "px;top: "+ crnss[i].top +
                "px;left: "+ crnss[i].left +
                "px'>" + crnss[i].text + "</div>"
            tracks = tracks + track
        }
    }
    // 输送线 站点
    for (let i = 0;i < stnss.length;i++) {
        stn = "<div class='site' id='" + stnss[i].id +
            "'style='width:"+ stnss[i].width +
            "px;height: "+ stnss[i].height+
            "px;line-height: "+ stnss[i].height+
            "px;top: "+ stnss[i].top +
            "px;left: "+ stnss[i].left +
            "px'>" + stnss[i].text + "</div>"
        stns = stns + stn
    }
    let whycq = racks + stns + rackDescs + crns + tracks
    $(".main-part").append(whycq)
};



 src/main/webapp/views/test.html

New file
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="closeBtn()">关闭</button>
    <button onclick="openBtn()">开始</button>
</body>
<script>
    var i = 1
    var a = true
    setInterval(()=>{
        addI();
    },1000)
    function addI() {
        if (a) {
            console.log("正在打印"+i++)
        }else {
            return;
        }
    }


    function closeBtn() {
        console.log("暂停打印")
        a = false
    }
    function openBtn() {
        console.log("恢复打印")
        a = true
    }
</script>
</html>