自动化立库仓库-WCS系统
parent: f6b64c46 | 补丁 | 提交 | ignore whitespace
#
whycq
2024-10-22 1a20af84298aff8bc36f582544866c166ca761c7 
#
2个文件已修改
3个文件已添加
755 ■■■■■ 已修改文件
src/main/webapp/views/wcsmap/index.html 43 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/webapp/views/wcsmap/mapData.js 12 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/webapp/views/wcsmap/mapData2.js 204 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/webapp/views/wcsmap/wcsmap.html 18 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/webapp/views/wcsmap/wcsmap2.html 478 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 src/main/webapp/views/wcsmap/index.html


New file


@@ -0,0 +1,43 @@


<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>wcs监控图</title>


    <script src="../../static/js/jquery/jquery-3.3.1.min.js"></script>


    <style>


        * {


            margin: 0;


            overflow: hidden;


        }


        html,body {


            height: 100%;


        }


        #content {


            width: 100%;


            height: 100%;


            border: none


        }


    </style>


</head>


<body style="background: #1f3366" >


    <div


            style="position: absolute;top: 80px;right: 50px;background-color: #fff;height: 30px;width: 80px;text-align: center;line-height: 30px;border-radius: 4px;">


        <div id="floorBtn" onclick="changFloor()">1楼</div>


    </div>


    <iframe style="width: 100%" id="content" src="wcsmap.html"></iframe>


</body>


</html>


<script>


    function changFloor() {


        var btnText = document.getElementById('floorBtn')


        if (btnText.textContent == '1楼') {


            btnText.textContent = '2楼'


            $('#content').attr("src", 'wcsmap2.html');


        } else {


            btnText.textContent = '1楼'


            $('#content').attr("src", 'wcsmap.html');


        }






    }


</script>




 src/main/webapp/views/wcsmap/mapData.js


@@ -367,11 +367,11 @@


        { "id": 2, "title": "2排", "unitX": 8, "unitY": 6, "anfme": 44, "x": 776, "y": 526 }


    ],


    "shelf2": [


        { "id": 1, "title": "1排", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 328 },


        { "id": 2, "title": "2排", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 356 },


        { "id": 2, "title": "2排", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 366 },


        { "id": 1, "title": "1排", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 394 },


        { "id": 2, "title": "2排", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 404 },


        { "id": 2, "title": "2排", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 431 }


        { "id": 1, "title": "1排", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 328 },


        { "id": 2, "title": "2排", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 356 },


        { "id": 2, "title": "2排", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 366 },


        { "id": 1, "title": "1排", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 394 },


        { "id": 2, "title": "2排", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 404 },


        { "id": 2, "title": "2排", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 431 }


    ]


}




 src/main/webapp/views/wcsmap/mapData2.js


New file


@@ -0,0 +1,204 @@


var mapData = {


    "plant": [


        { "title": "库存区", "width": "1340", "height": "600", "background": "0x02427f", "x": 20, "y": 20 ,"titleX": 800,"titleY": 50},


        { "title": "硫化区", "width": "1340", "height": "360", "background": "0x02427f", "x": 20, "y": 700 ,"titleX": 800,"titleY": 730},


        { "title": "其他", "width": "470", "height": "360", "background": "0x02427f", "x": 1430, "y": 260 ,"titleX": 1700,"titleY": 280}


    ],


    "legend" : [


        { "title": "自动+有物+有ID", "width": "40", "height": "20", "background": "0xFC3030", "x": 1460, "y": 700 ,"titleX": 1520,"titleY": 700},


        { "title": "自动+有物", "width": "40", "height": "20", "background": "0xFF51F6", "x": 1460, "y": 730 ,"titleX": 1520,"titleY": 730},


        { "title": "自动+ID", "width": "40", "height": "20", "background": "0xC4C400", "x": 1460, "y": 760 ,"titleX": 1520,"titleY": 760},


        { "title": "自动", "width": "40", "height": "20", "background": "0x78FF81", "x": 1460, "y": 790 ,"titleX": 1520,"titleY": 790},


        { "title": "非自动", "width": "40", "height": "20", "background": "0xB8B8B8", "x": 1460, "y": 820 ,"titleX": 1520,"titleY": 820},


    ],


    "track": [


        // {"id": "1", "unitX": 60, "unitY": 3, "anfme": 2, "background": "0x000000", "x": 125, "y": 737},


        // {"id": "2", "unitX": 60, "unitY": 3, "anfme": 2, "background": "0x000000", "x": 227, "y": 737},


        // {"id": "3", "unitX": 60, "unitY": 3, "anfme": 2, "background": "0x000000", "x": 125, "y": 867},


        // {"id": "4", "unitX": 60, "unitY": 3, "anfme": 2, "background": "0x000000", "x": 227, "y": 867},




    ],


    "jar": [


        // { "id": "1", "width": 15, "height": 110, "background": "0xa6a6a6", "x": 126, "y": 750 },


        // { "id": "1", "width": 15, "height": 110, "background": "0xa6a6a6", "x": 169, "y": 750 },


        // { "id": "1", "width": 15, "height": 110, "background": "0xa6a6a6", "x": 228, "y": 750 },


        // { "id": "1", "width": 15, "height": 110, "background": "0xa6a6a6", "x": 270, "y": 750 },


        // { "id": "1", "width": 15, "height": 108, "background": "0xea9a2b", "x": 169, "y": 881 },


        // { "id": "1", "width": 15, "height": 108, "background": "0xea9a2b", "x": 270, "y": 881 },


    ],


    "conveyor": [


        { "id": "1", "title": "415", "width": 30, "height": 10, "background": "0xb8db7c", "x": 222, "y": 331 },


        { "id": "1", "title": "413", "width": 30, "height": 10, "background": "0xb8db7c", "x": 222, "y": 369 },


        { "id": "1", "title": "407", "width": 30, "height": 10, "background": "0xb8db7c", "x": 222, "y": 392 },


        { "id": "1", "title": "405", "width": 30, "height": 10, "background": "0xb8db7c", "x": 222, "y": 424 },




        { "id": "1", "title": "416", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 331 },


        { "id": "1", "title": "412", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 369 },


        { "id": "1", "title": "408", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 392 },


        { "id": "1", "title": "404", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 424 },


        { "id": "1", "title": "400", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 456 },


        { "id": "1", "title": "515", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 478 },


        { "id": "1", "title": "511", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 500 },


        { "id": "1", "title": "509", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 522 },




        { "id": "1", "title": "494", "width": 30, "height": 10, "background": "0xb8db7c", "x": 170, "y": 258 },


        { "id": "1", "title": "493", "width": 10, "height": 18, "background": "0xb8db7c", "x": 180, "y": 269 },


        { "id": "1", "title": "492", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 288 },


        { "id": "1", "title": "419", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 299 },


        { "id": "1", "title": "418", "width": 10, "height": 20, "background": "0xb8db7c", "x": 180, "y": 310 },


        { "id": "1", "title": "417", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 331 },


        { "id": "1", "title": "414", "width": 10, "height": 26, "background": "0xb8db7c", "x": 180, "y": 342 },


        { "id": "1", "title": "411", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 369 },


        { "id": "1", "title": "410", "width": 10, "height": 11, "background": "0xb8db7c", "x": 180, "y": 380 },


        { "id": "1", "title": "409", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 392 },


        { "id": "1", "title": "406", "width": 10, "height": 20, "background": "0xb8db7c", "x": 180, "y": 403 },


        { "id": "1", "title": "403", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 424 },


        { "id": "1", "title": "402", "width": 10, "height": 20, "background": "0xb8db7c", "x": 180, "y": 435 },


        { "id": "1", "title": "401", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 456 },


        { "id": "1", "title": "516", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 467 },


        { "id": "1", "title": "514", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 478 },


        { "id": "1", "title": "513", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 489 },


        { "id": "1", "title": "512", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 500 },


        { "id": "1", "title": "510", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 511 },


        { "id": "1", "title": "508", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 522 },




        { "id": "1", "title": "491", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 288 },


        { "id": "1", "title": "490", "width": 15, "height": 10, "background": "0xb8db7c", "x": 222, "y": 288 },


        { "id": "1", "title": "489", "width": 14, "height": 10, "background": "0xb8db7c", "x": 238, "y": 288 },


        { "id": "1", "title": "488", "width": 37, "height": 10, "background": "0xb8db7c", "x": 253, "y": 288 },


        { "id": "1", "title": "487", "width": 37, "height": 10, "background": "0xb8db7c", "x": 291, "y": 288 },


        { "id": "1", "title": "486", "width": 18, "height": 10, "background": "0xb8db7c", "x": 329, "y": 288 },


        { "id": "1", "title": "485", "width": 18, "height": 10, "background": "0xb8db7c", "x": 348, "y": 288 },


        { "id": "1", "title": "484", "width": 37, "height": 10, "background": "0xb8db7c", "x": 367, "y": 288 },


        { "id": "1", "title": "483", "width": 37, "height": 10, "background": "0xb8db7c", "x": 405, "y": 288 },


        { "id": "1", "title": "482", "width": 37, "height": 10, "background": "0xb8db7c", "x": 443, "y": 288 },


        { "id": "1", "title": "481", "width": 37, "height": 10, "background": "0xb8db7c", "x": 481, "y": 288 },


        { "id": "1", "title": "480", "width": 18, "height": 10, "background": "0xb8db7c", "x": 519, "y": 288 },


        { "id": "1", "title": "479", "width": 18, "height": 10, "background": "0xb8db7c", "x": 538, "y": 288 },


        { "id": "1", "title": "478", "width": 37, "height": 10, "background": "0xb8db7c", "x": 557, "y": 288 },


        { "id": "1", "title": "477", "width": 37, "height": 10, "background": "0xb8db7c", "x": 595, "y": 288 },


        { "id": "1", "title": "476", "width": 37, "height": 10, "background": "0xb8db7c", "x": 633, "y": 288 },


        { "id": "1", "title": "475", "width": 18, "height": 10, "background": "0xb8db7c", "x": 671, "y": 288 },


        { "id": "1", "title": "474", "width": 18, "height": 10, "background": "0xb8db7c", "x": 690, "y": 288 },


        { "id": "1", "title": "473", "width": 37, "height": 10, "background": "0xb8db7c", "x": 709, "y": 288 },


        { "id": "1", "title": "472", "width": 37, "height": 10, "background": "0xb8db7c", "x": 747, "y": 288 },


        { "id": "1", "title": "471", "width": 37, "height": 10, "background": "0xb8db7c", "x": 785, "y": 288 },


        { "id": "1", "title": "470", "width": 18, "height": 10, "background": "0xb8db7c", "x": 823, "y": 288 },


        { "id": "1", "title": "469", "width": 18, "height": 10, "background": "0xb8db7c", "x": 842, "y": 288 },


        { "id": "1", "title": "468", "width": 37, "height": 10, "background": "0xb8db7c", "x": 861, "y": 288 },


        { "id": "1", "title": "467", "width": 37, "height": 10, "background": "0xb8db7c", "x": 899, "y": 288 },


        { "id": "1", "title": "466", "width": 18, "height": 10, "background": "0xb8db7c", "x": 937, "y": 288 },


        { "id": "1", "title": "465", "width": 18, "height": 10, "background": "0xb8db7c", "x": 956, "y": 288 },


        { "id": "1", "title": "464", "width": 37, "height": 10, "background": "0xb8db7c", "x": 975, "y": 288 },


        { "id": "1", "title": "463", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1013, "y": 288 },


        { "id": "1", "title": "462", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1051, "y": 288 },


        { "id": "1", "title": "461", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1089, "y": 277 },


        { "id": "1", "title": "460", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1108, "y": 277 },


        { "id": "1", "title": "459", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1127, "y": 277 },


        { "id": "1", "title": "458", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1089, "y": 288 },


        { "id": "1", "title": "457", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1108, "y": 288 },


        { "id": "1", "title": "456", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1127, "y": 288 },


        { "id": "1", "title": "455", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1165, "y": 288 },


        { "id": "1", "title": "454", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1203, "y": 277 },


        { "id": "1", "title": "453", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1222, "y": 277 },


        { "id": "1", "title": "452", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1241, "y": 277 },


        { "id": "1", "title": "451", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1203, "y": 288 },


        { "id": "1", "title": "450", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1222, "y": 288 },


        { "id": "1", "title": "449", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1241, "y": 288 },




        { "id": "1", "title": "420", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 299 },


        { "id": "1", "title": "421", "width": 30, "height": 10, "background": "0xb8db7c", "x": 222, "y": 299 },


        { "id": "1", "title": "422", "width": 37, "height": 10, "background": "0xb8db7c", "x": 253, "y": 299 },


        { "id": "1", "title": "423", "width": 37, "height": 10, "background": "0xb8db7c", "x": 291, "y": 299 },


        { "id": "1", "title": "424", "width": 37, "height": 10, "background": "0xb8db7c", "x": 329, "y": 299 },


        { "id": "1", "title": "425", "width": 37, "height": 10, "background": "0xb8db7c", "x": 367, "y": 299 },


        { "id": "1", "title": "426", "width": 37, "height": 10, "background": "0xb8db7c", "x": 405, "y": 299 },


        { "id": "1", "title": "427", "width": 37, "height": 10, "background": "0xb8db7c", "x": 443, "y": 299 },


        { "id": "1", "title": "428", "width": 37, "height": 10, "background": "0xb8db7c", "x": 481, "y": 299 },


        { "id": "1", "title": "429", "width": 37, "height": 10, "background": "0xb8db7c", "x": 519, "y": 299 },


        { "id": "1", "title": "430", "width": 37, "height": 10, "background": "0xb8db7c", "x": 557, "y": 299 },


        { "id": "1", "title": "431", "width": 37, "height": 10, "background": "0xb8db7c", "x": 595, "y": 299 },


        { "id": "1", "title": "432", "width": 37, "height": 10, "background": "0xb8db7c", "x": 633, "y": 299 },


        { "id": "1", "title": "433", "width": 37, "height": 10, "background": "0xb8db7c", "x": 671, "y": 299 },


        { "id": "1", "title": "434", "width": 37, "height": 10, "background": "0xb8db7c", "x": 709, "y": 299 },


        { "id": "1", "title": "435", "width": 37, "height": 10, "background": "0xb8db7c", "x": 747, "y": 299 },


        { "id": "1", "title": "436", "width": 37, "height": 10, "background": "0xb8db7c", "x": 785, "y": 299 },


        { "id": "1", "title": "437", "width": 37, "height": 10, "background": "0xb8db7c", "x": 823, "y": 299 },


        { "id": "1", "title": "438", "width": 37, "height": 10, "background": "0xb8db7c", "x": 861, "y": 299 },


        { "id": "1", "title": "439", "width": 37, "height": 10, "background": "0xb8db7c", "x": 899, "y": 299 },


        { "id": "1", "title": "440", "width": 37, "height": 10, "background": "0xb8db7c", "x": 937, "y": 299 },


        { "id": "1", "title": "441", "width": 37, "height": 10, "background": "0xb8db7c", "x": 975, "y": 299 },


        { "id": "1", "title": "442", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1013, "y": 299 },


        { "id": "1", "title": "443", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1051, "y": 299 },


        { "id": "1", "title": "444", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1089, "y": 299 },


        { "id": "1", "title": "445", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1127, "y": 299 },


        { "id": "1", "title": "446", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1165, "y": 299 },


        { "id": "1", "title": "447", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1203, "y": 299 },


        { "id": "1", "title": "448", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1241, "y": 299 },




        { "id": "1", "title": "495", "width": 30, "height": 10, "background": "0xb8db7c", "x": 139, "y": 258 },


        { "id": "1", "title": "496", "width": 10, "height": 30, "background": "0xb8db7c", "x": 149, "y": 269 },


        { "id": "1", "title": "497", "width": 10, "height": 30, "background": "0xb8db7c", "x": 149, "y": 300 },


        { "id": "1", "title": "498", "width": 30, "height": 10, "background": "0xb8db7c", "x": 149, "y": 331 },


        { "id": "1", "title": "499", "width": 10, "height": 24, "background": "0xb8db7c", "x": 149, "y": 342 },


        { "id": "1", "title": "500", "width": 10, "height": 24, "background": "0xb8db7c", "x": 149, "y": 367 },


        { "id": "1", "title": "501", "width": 30, "height": 10, "background": "0xb8db7c", "x": 149, "y": 392 },


        { "id": "1", "title": "502", "width": 10, "height": 25, "background": "0xb8db7c", "x": 149, "y": 403 },


        { "id": "1", "title": "503", "width": 10, "height": 26, "background": "0xb8db7c", "x": 149, "y": 429 },


        { "id": "1", "title": "504", "width": 30, "height": 10, "background": "0xb8db7c", "x": 149, "y": 456 },


        { "id": "1", "title": "517", "width": 10, "height": 35, "background": "0xb8db7c", "x": 149, "y": 467 },


        { "id": "1", "title": "518", "width": 10, "height": 18, "background": "0xb8db7c", "x": 149, "y": 503 },


        { "id": "1", "title": "507", "width": 30, "height": 10, "background": "0xb8db7c", "x": 149, "y": 522 },




        { "id": "1", "title": "519", "width": 20, "height": 10, "background": "0xb8db7c", "x": 128, "y": 456 },


        { "id": "1", "title": "520", "width": 20, "height": 10, "background": "0xb8db7c", "x": 107, "y": 456 },


        { "id": "1", "title": "521", "width": 20, "height": 10, "background": "0xb8db7c", "x": 86, "y": 456 },


        { "id": "1", "title": "522", "width": 10, "height": 10, "background": "0xb8db7c", "x": 75, "y": 456 },


        { "id": "1", "title": "523", "width": 10, "height": 54, "background": "0xb8db7c", "x": 75, "y": 467 },


        { "id": "1", "title": "524", "width": 10, "height": 61, "background": "0xb8db7c", "x": 75, "y": 522 },


        { "id": "1", "title": "506", "width": 20, "height": 10, "background": "0xb8db7c", "x": 128, "y": 522 },


        { "id": "1", "title": "505", "width": 20, "height": 10, "background": "0xb8db7c", "x": 107, "y": 522 },


        { "id": "1", "title": "549", "width": 10, "height": 50, "background": "0xb8db7c", "x": 107, "y": 533 },




        { "id": "1", "title": "548", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 584 },


        { "id": "1", "title": "547", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 625 },


        { "id": "1", "title": "546", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 666 },


        { "id": "1", "title": "545", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 707 },


        { "id": "1", "title": "544", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 748 },


        { "id": "1", "title": "543", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 789 },


        { "id": "1", "title": "542", "width": 25, "height": 10, "background": "0xb8db7c", "x": 100, "y": 830 },


        { "id": "1", "title": "542", "width": 10, "height": 20, "background": "0xb8db7c", "x": 107, "y": 841 },


        { "id": "1", "title": "541", "width": 25, "height": 10, "background": "0xb8db7c", "x": 100, "y": 862 },


        { "id": "1", "title": "540", "width": 10, "height": 20, "background": "0xb8db7c", "x": 107, "y": 873 },


        { "id": "1", "title": "534", "width": 30, "height": 10, "background": "0xb8db7c", "x": 97, "y": 894 },




        { "id": "1", "title": "525", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 584 },


        { "id": "1", "title": "526", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 625 },


        { "id": "1", "title": "527", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 666 },


        { "id": "1", "title": "528", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 707 },


        { "id": "1", "title": "529", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 748 },


        { "id": "1", "title": "530", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 789 },


        { "id": "1", "title": "531", "width": 32, "height": 10, "background": "0xb8db7c", "x": 67, "y": 830 },


        { "id": "1", "title": "532", "width": 10, "height": 52, "background": "0xb8db7c", "x": 75, "y": 841 },


        { "id": "1", "title": "533", "width": 31, "height": 10, "background": "0xb8db7c", "x": 65, "y": 894 },




        { "id": "1", "title": "535", "width": 15, "height": 28, "background": "0xb8db7c", "x": 128, "y": 886 },


        { "id": "1", "title": "536", "width": 31, "height": 10, "background": "0xb8db7c", "x": 144, "y": 894 },


        { "id": "1", "title": "537", "width": 15, "height": 28, "background": "0xb8db7c", "x": 176, "y": 886 },


        { "id": "1", "title": "538", "width": 31, "height": 10, "background": "0xb8db7c", "x": 192, "y": 894 },


        { "id": "1", "title": "539", "width": 50, "height": 50, "background": "0xb8db7c", "x": 224, "y": 875 },




    ],


    "shelf2": [


        { "id": 1, "title": "1排", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 328 },


        { "id": 2, "title": "2排", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 338 },




        { "id": 2, "title": "2排", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 366 },


        { "id": 1, "title": "1排", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 376 },




        { "id": 2, "title": "2排", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 394 },




        { "id": 2, "title": "2排", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 421 },


        { "id": 2, "title": "2排", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 431 }


    ]


}




 src/main/webapp/views/wcsmap/wcsmap.html


@@ -39,6 +39,7 @@


            style="position: absolute;top: 20px;right: 50px;background-color: #fff;height: 30px;width: 80px;text-align: center;line-height: 30px;border-radius: 4px;">


            <div>FPS:{{mapFps}}</div>


        </div>




    </div>


    </div>


</body>


@@ -53,15 +54,18 @@


        el: '#app',


        data: {


            mapFps: 0,


            floor: '1楼',


            sites: ['185', '186', '240', "250", "299"],


            conveyor: []


            currMap: null,


            conveyor: [],




        },


        created() {


            mapData




        },


        mounted() {


            this.createMapData()


            this.createMapData(mapData.conveyor)


            this.createMap()




            setInterval(() => {


@@ -70,9 +74,8 @@




        },


        methods: {


            createMapData() {


                this.conveyor = mapData.conveyor


                console.log(this.conveyor);


            createMapData(conveyor) {


                this.conveyor = conveyor




            },


            getSiteInfo() {


@@ -97,7 +100,7 @@


                                        // }


                                        if (site.siteStatus == 'site-auto-run-id') {


                                            // 自动+有物+ID


                                            conve.background = 0xFC3030


                                            // conve.background = 0xFC3030


                                        


                                        } else if (site.siteStatus == 'site-auto-run') {


                                            // 自动+有物


@@ -356,7 +359,7 @@


                    pixiApp.stage.addChild(text);


                }




                for (let k of mapData.conveyor) {


                for (let k of this.conveyor) {


                    let rectangle = new PIXI.Graphics();


                    rectangle.beginFill(k.background);


                    // rectangle.originColor = k.background;


@@ -370,7 +373,6 @@


                    rectangle.on('mouseover', onMouseOver)


                    function onMouseOver(event) {


                        rectangle.alpha = k.alpha ? k.alpha : 1


                        console.log(event);


                        // 创建内容框


                        let tooltip = new PIXI.Graphics();


                        tooltip.beginFill(0xFFFFFF); // 内容框背景颜色




 src/main/webapp/views/wcsmap/wcsmap2.html


New file


@@ -0,0 +1,478 @@


<!DOCTYPE html>


<html lang="en">




<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>wcs监控图</title>


    <link rel="stylesheet" href="wcsmap.css">


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


    <script src="../../static/js/jquery/jquery-3.3.1.min.js"></script>


    <script src="pixijs.js"></script>


    <script src="vue.min.js"></script>


    <script src="../../static/js/common.js"></script>


    <style>


        .tooltip {


            position: absolute;


            display: block;


            padding: 10px;


            color: #fff;


            background-color: #000;


            border-radius: 5px;


            left: 200px;


            top: 200px;


        }


    </style>


</head>




<body>


    <div id="app">


        <div id="pixiView">




        </div>


        <div style="position: absolute;top: 20px;left: 20px;font-size: 40px;color: white;">


            <div>自动仓库WCS监控图</div>


            <div style="font-size: 13px;">AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</div>


        </div>


        <!--输出操作和FPS-->


        <div


            style="position: absolute;top: 20px;right: 50px;background-color: #fff;height: 30px;width: 80px;text-align: center;line-height: 30px;border-radius: 4px;">


            <div>FPS:{{mapFps}}</div>


        </div>




    </div>


    </div>


</body>




</html>




<script>


    let pixiApp;


    let objectsContainer;


    var tooltip = document.getElementById('tooltip');


    var app = new Vue({


        el: '#app',


        data: {


            mapFps: 0,


            floor: '1楼',


            sites: ['185', '186', '240', "250", "299"],


            currMap: null,


            conveyor: [],




        },


        created() {


            mapData




        },


        mounted() {


            this.createMapData(mapData.conveyor)


            this.createMap()




            setInterval(() => {


                this.getSiteInfo()


            }, 1000)




        },


        methods: {


            createMapData(conveyor) {


                this.conveyor = conveyor




            },


            getSiteInfo() {


                let _this = this


                $.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;


                            pixiApp.stage.children[0].children.forEach((item, index) => {


                                // updateColor(item, item.originColor);


                                for (let site of sites) {


                                    if (site.siteId == item.title) {


                                        var conve = _this.conveyor.find(con => con.title == site.siteId)


                                        // var conve;


                                        // for (let cc of this.conveyor) {


                                        //     if (cc.title == site.siteId) {


                                        //         conve = cc


                                        //     }


                                        // }


                                        if (site.siteStatus == 'site-auto-run-id') {


                                            // 自动+有物+ID


                                            // conve.background = 0xFC3030


                                        


                                        } else if (site.siteStatus == 'site-auto-run') {


                                            // 自动+有物


                                            conve.background = 0xFF51F6


                                        


                                        } else if (site.siteStatus == 'site-auto-id') {


                                            // 自动+ID


                                            conve.background = 0xC4C400


                                        


                                        } else if (site.siteStatus == 'site-auto') {


                                            // 自动


                                            conve.background = 0x78FF81


                                        


                                        } else if (site.siteStatus == 'site-unauto') {


                                            // 非自动/手动


                                            conve.background = 0xB8B8B8


                                        }


                                        _this.updateColor(item, conve)


                                    }


                                }


                                // for (let k of this.sites) {


                                //     if (item.title == k) {


                                //         for (let con of this.conveyor) {


                                //             if (k == con.title) {


                                //                 con.background = 0xFF0000


                                //                 this.updateColor(item, con)


                                //             }


                                //         }




                                //     }


                                // }




                            });


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


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


                        } else {


                            console.log(res.msg);


                        }


                    }


                })








            },


            updateColor(rectangle, conveyor) {


                rectangle.clear()


                rectangle.beginFill(conveyor.background);


                rectangle.drawRect(0, 0, conveyor.width, conveyor.height);


                rectangle.endFill();


            },


            createMap() {


                pixiApp = new PIXI.Application({


                    resizeTo: window,


                    backgroundColor: 0x1f3366


                })


                $("#pixiView").append(pixiApp.view)


                // 加载位图资源


                PIXI.Loader.shared.add('ChillRoundF', './image_font.xml.fnt').load();


                function onAssetsLoaded() {


                    createText();


                }


                function createText() {


                    let text = new PIXI.BitmapText('123', {


                        fontName: 'ChillRoundF',


                        fontSize: 16,


                        tint: 0xffffff


                    })


                    text.x = 100;


                    text.y = 100;


                    pixiApp.stage.addChild(text)


                }


                //*******************拖动画布*******************


                let stageOriginalPos;


                let mouseDownPoint;


                let touchBlank = false;


                let touchOver = false;


                pixiApp.renderer.plugins.interaction.on(


                    'pointerdown',


                    (event) => {


                        const globalPos = event.data.global;


                        // 记录下stage原来的位置


                        stageOriginalPos = [pixiApp.stage.position._x, pixiApp.stage.position._y];


                        // 记录下mouse down的位置


                        mouseDownPoint = [globalPos.x, globalPos.y];


                        if (!event.target) {


                            // 点到了画布的空白位置


                            touchBlank = true;


                        }


                    }


                );






                pixiApp.renderer.plugins.interaction.on(


                    'pointermove',


                    (event) => {


                        const globalPos = event.data.global;




                        if (touchBlank) {


                            // 拖拽画布


                            const dx = globalPos.x - mouseDownPoint[0];


                            const dy = globalPos.y - mouseDownPoint[1];


                            pixiApp.stage.position.set(


                                stageOriginalPos[0] + dx,


                                stageOriginalPos[1] + dy


                            );


                        }


                    }


                );




                pixiApp.renderer.plugins.interaction.on(


                    'pointerup',


                    (event) => {


                        touchBlank = false;


                    }


                );


                // pixiApp.renderer.plugins.interaction.on(


                //     'mouseover',


                //     (event) => {


                //         const globalPos = event.data.global;


                //             console.log(globalPos);


                //     }


                // );




                //*******************拖动画布*******************




                //*******************缩放画布*******************


                pixiApp.view.addEventListener('wheel', (event) => {


                    event.stopPropagation();


                    event.preventDefault();


                    // 因为画布是充满视窗的，所以clientX等于mouse point在renderer上的x坐标


                    const globalPos = [event.clientX, event.clientY];


                    const delta = event.deltaY;


                    const oldZoom = pixiApp.stage.scale.x;


                    let newZoom = oldZoom * 0.999 ** delta;




                    // const oldStageMatrix = app.stage.localTransform.clone();


                    // const oldStagePos = oldStageMatrix.applyInverse(pointerGlobalPos);


                    const oldStagePos = globalPos;


                    const dx = oldStagePos[0] * oldZoom - oldStagePos[0] * newZoom;


                    const dy = oldStagePos[1] * oldZoom - oldStagePos[1] * newZoom;




                    pixiApp.stage.setTransform(


                        pixiApp.stage.position.x + dx,


                        pixiApp.stage.position.y + dy,


                        newZoom,


                        newZoom,


                        0,


                        0,


                        0,


                        0,


                        0


                    );




                });


                //*******************缩放画布*******************




                // 创建一个容器来管理大批量的显示对象


                objectsContainer = new PIXI.Container();


                pixiApp.stage.addChild(objectsContainer);






                //*******************FPS*******************


                var g_Time = 0;


                pixiApp.ticker.add((delta) => {


                    var timeNow = (new Date()).getTime();


                    var timeDiff = timeNow - g_Time;


                    g_Time = timeNow;


                    var fps = 1000 / timeDiff;


                    this.mapFps = parseInt(fps)


                });


                //*******************FPS*******************


                for (let k of mapData.plant) {


                    let rectangle = new PIXI.Graphics();


                    rectangle.beginFill(k.background);


                    rectangle.originColor = k.background;


                    rectangle.drawRect(0, 0, k.width, k.height);


                    rectangle.x = k.x;


                    rectangle.y = k.y;


                    objectsContainer.addChild(rectangle);


                    var hel = `${k.title}`


                    var text = new PIXI.Text(hel, {


                        fontFamily: 'Arial',


                        fontSize: 36,


                        fill: '#FFFFFF', // 白色


                        align: 'center',


                    })


                    text.x = k.titleX;


                    text.y = k.titleY;


                    // pixiApp.stage.addChild(text)


                    // let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});


                    // text.x = 1000;


                    // text.y = 2000;


                    text.resolution = pixiApp.renderer.resolution;


                    pixiApp.stage.addChild(text);


                }


                let track = mapData.track


                for (let j in track) {


                    let k = track[j]


                    let x = k.x


                    for (let i = 0; i < k.anfme; i++) {


                        let rectangle = new PIXI.Graphics();


                        rectangle.beginFill(0xa6a6a6);


                        // rectangle.lineStyle(1, 0xffffff);


                        rectangle.drawRect(0, 0, k.unitX - 1, k.unitY - 1);


                        rectangle.y = k.y + 6 * i;


                        rectangle.x = x;


                        objectsContainer.addChild(rectangle);


                    }


                }


                for (let k of mapData.jar) {


                    let rectangle = new PIXI.Graphics();


                    rectangle.beginFill(k.background);


                    rectangle.originColor = k.background;


                    rectangle.drawRect(0, 0, k.width, k.height);


                    rectangle.x = k.x;


                    rectangle.y = k.y;


                    objectsContainer.addChild(rectangle);


                    var hel = `${k.title}`


                    var text = new PIXI.Text(hel, {


                        fontFamily: 'Arial',


                        fontSize: 18,


                        fill: '#FFFFFF', // 白色


                        align: 'center',


                    })


                    text.x = k.titleX;


                    text.y = k.titleY;


                    // pixiApp.stage.addChild(text)


                    // let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});


                    // text.x = 1000;


                    // text.y = 2000;


                    text.resolution = pixiApp.renderer.resolution;


                    pixiApp.stage.addChild(text);


                }


                for (let k of mapData.legend) {


                    let rectangle = new PIXI.Graphics();


                    rectangle.beginFill(k.background);


                    rectangle.originColor = k.background;


                    rectangle.drawRect(0, 0, k.width, k.height);


                    rectangle.x = k.x;


                    rectangle.y = k.y;


                    objectsContainer.addChild(rectangle);


                    var hel = `${k.title}`


                    var text = new PIXI.Text(hel, {


                        fontFamily: 'Arial',


                        fontSize: 18,


                        fill: '#FFFFFF', // 白色


                        align: 'center',


                    })


                    text.x = k.titleX;


                    text.y = k.titleY;


                    // pixiApp.stage.addChild(text)


                    // let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});


                    // text.x = 1000;


                    // text.y = 2000;


                    text.resolution = pixiApp.renderer.resolution;


                    pixiApp.stage.addChild(text);


                }




                for (let k of this.conveyor) {


                    let rectangle = new PIXI.Graphics();


                    rectangle.beginFill(k.background);


                    // rectangle.originColor = k.background;


                    rectangle.alpha = k.alpha ? k.alpha : 1


                    rectangle.drawRect(0, 0, k.width, k.height);


                    rectangle.x = k.x;


                    rectangle.y = k.y;


                    rectangle.title = k.title


                    rectangle.interactive = true


                    rectangle.cursor = "pointer"


                    rectangle.on('mouseover', onMouseOver)


                    function onMouseOver(event) {


                        rectangle.alpha = k.alpha ? k.alpha : 1


                        // 创建内容框


                        let tooltip = new PIXI.Graphics();


                        tooltip.beginFill(0xFFFFFF); // 内容框背景颜色


                        tooltip.lineStyle(1, 0x000000); // 内容框边框样式


                        tooltip.drawRect(0, 0, 100, 40); // 绘制内容框


                        tooltip.x = event.data.global.x; // 根据鼠标位置调整内容框位置


                        tooltip.y = event.data.global.y;


                        pixiApp.stage.addChild(tooltip);




                        // 计算内容框的位置，使其在鼠标右下角偏移10像素处


                        tooltip.x = event.currentTarget.x + event.currentTarget.width + 10;


                        tooltip.y = event.currentTarget.y + event.currentTarget.height + 10;


                        // 添加文本到内容框


                        var hel = `站点编号：${k.title}`


                        let text = new PIXI.BitmapText(hel, {


                            fontName: 'ChillRoundF',


                            fontSize: 16,


                            tint: 0xffffff


                        })


                        // text.x = 100;


                        // text.y = 100;


                        // pixiApp.stage.addChild(text)


                        // let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});


                        text.x = tooltip.x;


                        text.y = tooltip.y;


                        text.resolution = pixiApp.renderer.resolution;


                        pixiApp.stage.addChild(text);




                        // 监听鼠标移出事件，移除内容框


                        rectangle.on('mouseout', () => {


                            rectangle.alpha = k.alpha ? k.alpha : 1


                            pixiApp.stage.removeChild(tooltip);


                            pixiApp.stage.removeChild(text);


                        });


                    }


                    objectsContainer.addChild(rectangle);


                }


                let shelf1 = mapData.shelf1


                for (let j in shelf1) {


                    let k = shelf1[j]


                    let y = k.y


                    for (let i = 0; i < k.anfme; i++) {


                        let rectangle = new PIXI.Graphics();


                        rectangle.beginFill(0xffffff);


                        // rectangle.lineStyle(1, 0xffffff);


                        rectangle.drawRect(0, 0, k.unitX - 2, k.unitY - 2);


                        rectangle.x = k.x + k.unitX * i;


                        rectangle.y = y;


                        objectsContainer.addChild(rectangle);


                    }


                }




                let shelf2 = mapData.shelf2


                for (let j in shelf2) {


                    let k = shelf2[j]


                    let y = k.y


                    for (let i = 0; i < k.anfme; i++) {


                        let rectangle = new PIXI.Graphics();


                        rectangle.beginFill(0xffffff);


                        // rectangle.lineStyle(1, 0xffffff);


                        rectangle.drawRect(0, 0, k.unitX - 2, k.unitY);


                        rectangle.x = k.x + k.unitX * i;


                        rectangle.y = y;


                        objectsContainer.addChild(rectangle);


                    }


                }












            }


        }




    })


















    // window.addEventListener('DOMContentLoaded',function() {


    //     var tooltip = document.getElementById('tooltip');




    //     document.addEventListener('mouseover',function(event) {


    //         var target = event.target


    //         var tooltipText = target.getAttribute('data-tooltip')




    //         if (tooltipText) {


    //             tooltip.innerHTML = tooltipText


    //             tooltip.style.display = 'block'


    //             tooltip.style.left = (event.clientX + 10) + 'px'


    //             tooltip.style.top = (event.clientY + 10) + 'px'


    //         }


    //     })


    //     document.addEventListener('mouseout',function() {


    //         tooltip.style.display = 'none'


    //     })


    // })




</script>