主控图地图绘制优化

Junjie

2023-03-22 178bace75121ea2e460dbf4ff1c2f74ffdbc34ed

 src/main/webapp/views/console.html

@@ -27,40 +27,6 @@
            <!-- 第一组 -->
            <div class="lane" id="mapDataId" style="margin-bottom: 280px">
                <div class="sxcar" id="sxcar-1"></div>
                <!-- 货架 -->
<!--                <div class="stock-group">-->
<!--                    <button class="item">1</button>-->
<!--                    <button class="item">2</button>-->
<!--                    <button class="item">3</button>-->
<!--                    <button class="item">4</button>-->
<!--                    <button class="item">5</button>-->
<!--                    <button class="item">6</button>-->
<!--                    <button class="item">7</button>-->
<!--                    <button class="item">8</button>-->
<!--                    <button class="item">9</button>-->
<!--                    <button class="item">10</button>-->
<!--                    <button class="item">11</button>-->
<!--                    <button class="item">12</button>-->
<!--                    <button class="item">13</button>-->
<!--                    <button class="item">14</button>-->
<!--                    <button class="item">15</button>-->
<!--                    <button class="item">16</button>-->
<!--                    <button class="item">17</button>-->
<!--                    <button class="item">18</button>-->
<!--                    <button class="item">19</button>-->
<!--                    <button class="item">20</button>-->
<!--                    <button class="item">21</button>-->
<!--                    <button class="item">22</button>-->
<!--                    <button class="item">23</button>-->
<!--                    <button class="item">24</button>-->
<!--                    <button class="item">25</button>-->
<!--                    <span class="row-no">1#</span>-->
<!--                </div>-->
                <!-- 堆垛机 -->
<!--                <div class="crn">-->
<!--                    <hr class="pathway">-->
<!--                    <div id="crn-1" class="machine"></div>-->
<!--                </div>-->
            </div>
        </div>
    </main>
@@ -373,6 +339,7 @@
    var tData1 = []
    var tData2 = []
    var tData3 = []
    var mapData = [] //地图数据
    function getCodeData(){
        $.ajax({
            url:baseUrl +'/console/barcode/output/site',
@@ -433,8 +400,8 @@

    //计算四向穿梭车图标位置
    function getCarPosition(x,y) {
        let top = (x * 30) + "px"
        let left = (y * 40 - 40) + "px" //需要减去小车自己所占宽度
        let top = (x * 35 - 35) + "px" //需要减去小车自己所占高度
        let left = (y * 70 - 70) + "px" //需要减去小车自己所占宽度
        return [top,left];
    }

@@ -444,7 +411,6 @@
        let position = getCarPosition(x,y)
        let top = position[0]
        let left = position[1]
        console.log(top,left)
        $("#sxcar-" + id).animate({top: top,left: left}, 1000);
    }

@@ -457,6 +423,7 @@
            type:"get",
            url: baseUrl + "/static/js/map.json",
            success: (data) => {
                mapData = data
                let content = ""
                data.forEach((rowData,index) => {
                    let lastGroup = '<div class="stock-group">'
@@ -467,9 +434,8 @@
                            //去掉左右边缘禁区
                            if(!(idx == 0 || rowData.length - 1 == idx)){
                                let col;
                                switch (colData){
                                switch (colData.value){
                                    case -1:
                                        //-1禁区不显示，但是需要占用元素位置
                                        col = '<button class="item" style="visibility: hidden">' + idx + '</button>';
                                        break;
                                    case 3:
@@ -479,6 +445,11 @@
                                            //第一次遇到母轨道，则保存该轨道地址(用于小车初始化定位)
                                            firstMotherIndex = [index,idx]
                                        }
                                        break;
                                    case 4:
                                        //站点
                                        let data = colData.data
                                        col = '<div id="site-' + data + '" class="site">' + data + '(9991)</div>';
                                        break;
                                    default:
                                        col = '<button class="item">' + index + '</button>';
@@ -498,14 +469,28 @@
                    }
                })


                moveCar(1, firstMotherIndex[0], firstMotherIndex[1]);
                $("#mapDataId").append(content)
            }
        })
    }

    //将地图数据转换成int二维数组(后续用于请求计算路径时携带地图数据参数使用)
    function getMap2TwoArr() {
        let data = []
        mapData.forEach((item,index) => {
            let data2 = []
            item.forEach((val,idx) => {
                data2.push(val.value)
            })
            data.push(data2)
        })

        return data;
    }

    function testMove() {
        getMap2TwoArr()//测试地图数据转换是否正常
        let json = "[{\n" +
            "\t\t\"x\": 5,\n" +
            "\t\t\"y\": 5\n" +
@@ -659,7 +644,7 @@
</script>
<script type="text/javascript">
    // 弹窗站点信息
    $('.site').on('click',function(){
    $('#mapDataId').on('click','.site',function(){
        var id = this.id.split("-")[1];
        $("#siteWindow").attr("style","display:block;");//显示div
        $("#crnWindow").attr("style","display:none;");