#

luxiaotao1123

2022-08-22 4aa39baac48fc4dd1b8555bb776bd020bbcbe50b

#

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

@@ -288,19 +288,16 @@
    position: absolute;
    top: 122px;
}
/* 输送线第一列 */
.site-row-1 {
    top: 205px;
    left: 120px;
    top: 67px;
    left: 392px;
}
.site-row-1 .site {
    width: 80px;
}

/* 输送线第二列 */
.site-row-2 {
    top: 67px;
    left: 400px;
    left: 474px;
}
.site-row-2 .site {
    width: 80px;
@@ -497,6 +494,40 @@
    margin-right: 80px;
}

/* ------------------ 台车 ------------------ */
/* 轨道 */
.car-track {
    position: absolute;
}
.car-track-across {
    position: absolute;
}
.car-track div {
    height: 100%;
    display: inline-block;
    width: 75%;
    border-left: 5px solid #313131;
    border-right: 5px solid #313131;
}
.car-track-across div {
    height: 80%;
    display: inline-block;
    width: 100%;
    border-top: 3px solid #313131;
    border-bottom: 3px solid #313131;
}
#car-track-1 {
    text-align: center;
    width: 70px;
    height: 605px;
    top: 0;
    left: 6px;
}

/* 车 */
.car {
    position: absolute;
}


/* 弹窗 */

 src/main/webapp/views/console.html

@@ -16,15 +16,23 @@
        <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6>
    </header>
    <main class="main">
        <!--第1列（宽度 70px） -->
<!--        <div class="site-row site-row-1">-->
<!--            <div class="site-k" style="height:39px;width:70px;"></div>-->
<!--            <div id="site-173" class="site" style="height: 18px;line-height: 18px;margin-bottom: 85px">173</div>-->
<!--        </div>-->
        <!--第1列 -->
        <div class="site-row site-row-1">
            <div id="site-102" class="site" style="height: 18px;line-height: 18px;width:80px;margin-top: 340px">102</div>

            <div id="site-101" class="site" style="height: 18px;line-height: 18px;width:80px;margin-top: 20px">101</div>

            <div id="site-100" class="site" style="height: 18px;line-height: 18px;width:80px;margin-top: 184px">100</div>
        </div>
        <!--第2列-->
        <div class="site-row site-row-2">
            <div id="site-1000" class="site" style="height: 18px;line-height: 18px;">1000</div>
            <div id="site-2000" class="site" style="height: 18px;line-height: 18px;">2000</div>
            <!-- 台车轨道 -->
            <div id="car-track-1" class="car-track">
                <div></div>
            </div>
            <!-- 台车实例 -->
            <div id="site-1000" class="site car">1000</div>
            <div id="site-2000" class="site car">2000</div>
        </div>
        <!-- 第3列 -->
        <div class="site-row site-row-3">
@@ -1374,6 +1382,61 @@
            $('#barcode3').append(str3)
        }
    }

    // 小车偏移动画
    function carAnimate(id, target) {
        if (id === 1000) {
            let targetTop = 130;
            switch (target) {
                case 110:
                    targetTop += 0;
                    break;
                case 109:
                    targetTop += 60;
                    break;
                case 108:
                    targetTop += 100;
                    break;
                case 107:
                    targetTop += 180;
                    break;
                case 106:
                    targetTop += 220;
                    break;
                default:
                    return;
            }
            $("#site-" + id).animate({top: targetTop+'px'}, 1000);
        } else if (id === 2000) {
            let targetTop = 130;
            switch (target) {
                case 226:
                    targetTop += 0;
                    break;
                case 225:
                    targetTop += 60;
                    break;
                case 224:
                    targetTop += 100;
                    break;
                case 223:
                    targetTop += 180;
                    break;
                case 222:
                    targetTop += 220;
                    break;
                case 214:
                    targetTop += 280;
                    break;
                case 220:
                    targetTop += 320;
                    break;
                default:
                    return;
            }
            $("#site-" + id).animate({top: targetTop+'px'}, 1000);
        }
    }
</script>
<script type="text/javascript">
    // 弹窗站点信息