#

lsh

2024-05-16 258b92c6218195d6ae3e8f77d65ebf7b6c2ccdb0

#

 src/main/webapp/static/css/index.css

@@ -32,13 +32,13 @@
.sidebar {
    width: 8%;
    height: 40%;
    line-height: 90px;
    line-height: 40px;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}
.nav ul {
    font-size: 1.25em;
    font-size: 0.75em;
    font-weight: 500;
    padding-left: 5%;
}

 src/main/webapp/static/js/console.map.js

@@ -3,7 +3,7 @@
    "rackCount": 16,
    "crnCount": 4,
    "stbCount": 16,
    "hpPosition": 1,
    "hpPosition": -1,
    "minBayNo": 2,
    "floors": 1,
    "racks": [{
@@ -11,37 +11,64 @@
        "id": "rack21",
        "top": 256,
        "left": 630,
        "width": 917,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack22",
        "top": 278,//-48  ==>3
        "left": 630,
        "width": 917,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack23",
        "top": 333,
        "left": 630,
        "width": 917,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack24",
        "top": 278,//-48  ==>3
        "top": 355,//-48  ==>3
        "left": 630,
        "width": 917,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack25",
        "top": 406,//-48  ==>3
        "left": 630,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack26",
        "top": 462,
        "left": 630,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack27",
        "top": 484,//-48  ==>3
        "left": 630,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 62
    }],
    "rackDescs": [],
    "crns": [],

 src/main/webapp/static/js/console.map11.js

New file
@@ -0,0 +1,1103 @@
mapInfo = {
    "mapName": "STWCS",
    "rackCount": 16,
    "crnCount": 4,
    "stbCount": 16,
    "hpPosition": -1,
    "minBayNo": 2,
    "floors": 1,
    "racks": [{
        "type": "rack",
        "id": "rack21",
        "top": 256,
        "left": 630,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack22",
        "top": 278,//-48  ==>3
        "left": 630,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack23",
        "top": 333,
        "left": 630,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack24",
        "top": 355,//-48  ==>3
        "left": 630,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack25",
        "top": 406,//-48  ==>3
        "left": 630,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack26",
        "top": 462,
        "left": 630,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 62
    }, {
        "type": "rack",
        "id": "rack27",
        "top": 484,//-48  ==>3
        "left": 630,
        "width": 1000,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 62
    }],
    "rackDescs": [],
    "crns": [],
    "areas": [{
        "type": "Control_floor",
        "id": "tabControl_floor1",
        "text": "楼层",
        "top": 68,
        "left": 80,
        "width": 1400,
        "height": 680,
        "floors": [{
            "type": "floor",
            "id": "page_floor1",
            "text": "1",
            "top": 4,
            "left": 22,
            "width": 1374,
            "height": 672,
            "stns": [{
                "type": "stn",
                "id": "site-524",
                "text": "524",
                "top": 650,
                "left": 230,
                "width": 49,
                "height": 74
            },{
                "type": "stn",
                "id": "site-523",
                "text": "523",
                "top": 560,
                "left": 230,
                "width": 49,
                "height": 89
            },{
                "type": "stn",
                "id": "site-522",
                "text": "522",
                "top": 530,
                "left": 230,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-521",
                "text": "521",
                "top": 530,
                "left": 260,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-520",
                "text": "520",
                "top": 530,
                "left": 290,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-519",
                "text": "519",
                "top": 530,
                "left": 350,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-504",
                "text": "504",
                "top": 530,
                "left": 410,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-503",
                "text": "503",
                "top": 480,
                "left": 410,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-502",
                "text": "502",
                "top": 430,
                "left": 410,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-501",
                "text": "501",
                "top": 400,
                "left": 410,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-500",
                "text": "500",
                "top": 350,
                "left": 410,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-499",
                "text": "499",
                "top": 300,
                "left": 410,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-498",
                "text": "498",
                "top": 270,
                "left": 410,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-497",
                "text": "497",
                "top": 210,
                "left": 410,
                "width": 49,
                "height": 59
            },{
                "type": "stn",
                "id": "site-496",
                "text": "496",
                "top": 150,
                "left": 410,
                "width": 49,
                "height": 59
            },{
                "type": "stn",
                "id": "site-495",
                "text": "495",
                "top": 120,
                "left": 400,
                "width": 69,
                "height": 29
            },{
                "type": "stn",
                "id": "site-505",
                "text": "505",
                "top": 680,
                "left": 290,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-549",
                "text": "549",
                "top": 710,
                "left": 290,
                "width": 59,
                "height": 19
            },{
                "type": "stn",
                "id": "site-506",
                "text": "506",
                "top": 680,
                "left": 350,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-507",
                "text": "507",
                "top": 680,
                "left": 410,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-517",
                "text": "517",
                "top": 560,
                "left": 410,
                "width": 49,
                "height": 89
            },{
                "type": "stn",
                "id": "site-518",
                "text": "518",
                "top": 650,
                "left": 410,
                "width": 49,
                "height": 29
            },{
                "type": "stn",
                "id": "site-508",
                "text": "508",
                "top": 680,
                "left": 470,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-509",
                "text": "509",
                "top": 680,
                "left": 530,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-512",
                "text": "512",
                "top": 630,
                "left": 480,
                "width": 49,
                "height": 29
            },{
                "type": "stn",
                "id": "site-511",
                "text": "511",
                "top": 630,
                "left": 530,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-510",
                "text": "510",
                "top": 660,
                "left": 480,
                "width": 49,
                "height": 19
            },{
                "type": "stn",
                "id": "site-514",
                "text": "514",
                "top": 580,
                "left": 480,
                "width": 49,
                "height": 29
            },{
                "type": "stn",
                "id": "site-515",
                "text": "515",
                "top": 580,
                "left": 530,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-513",
                "text": "513",
                "top": 610,
                "left": 480,
                "width": 49,
                "height": 19
            },{
                "type": "stn",
                "id": "site-516",
                "text": "516",
                "top": 560,
                "left": 480,
                "width": 49,
                "height": 19
            },{
                "type": "stn",
                "id": "site-401",
                "text": "401",
                "top": 530,
                "left": 470,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-400",
                "text": "400",
                "top": 530,
                "left": 530,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-402",
                "text": "402",
                "top": 495,
                "left": 480,
                "width": 49,
                "height": 34
            },{
                "type": "stn",
                "id": "site-403",
                "text": "403",
                "top": 465,
                "left": 480,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-404",
                "text": "404",
                "top": 465,
                "left": 510,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-405",
                "text": "405",
                "top": 465,
                "left": 570,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-406",
                "text": "406",
                "top": 430,
                "left": 480,
                "width": 49,
                "height": 34
            },{
                "type": "stn",
                "id": "site-409",
                "text": "409",
                "top": 400,
                "left": 480,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-408",
                "text": "408",
                "top": 400,
                "left": 510,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-407",
                "text": "407",
                "top": 400,
                "left": 570,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-410",
                "text": "410",
                "top": 365,   //495 - 365 = 130
                "left": 480,
                "width": 49,
                "height": 34
            },{
                "type": "stn",
                "id": "site-411",
                "text": "411",
                "top": 335,
                "left": 480,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-412",
                "text": "412",
                "top": 335,
                "left": 510,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-413",
                "text": "413",
                "top": 335,
                "left": 570,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-414",
                "text": "414",
                "top": 300,
                "left": 480,
                "width": 49,
                "height": 34
            },{
                "type": "stn",
                "id": "site-417",
                "text": "417",
                "top": 270,
                "left": 480,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-416",
                "text": "416",
                "top": 270,
                "left": 510,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-415",
                "text": "415",
                "top": 270,
                "left": 570,
                "width": 59,
                "height": 29
            },{
                "type": "stn",
                "id": "site-493",
                "text": "493",
                "top": 150,
                "left": 480,
                "width": 49,
                "height": 34
            },{
                "type": "stn",
                "id": "site-418",
                "text": "418",
                "top": 235,
                "left": 480,
                "width": 49,
                "height": 34
            },{
                "type": "stn",
                "id": "site-494",
                "text": "494",
                "top": 120,
                "left": 470,
                "width": 69,
                "height": 29
            },{
                "type": "stn",
                "id": "site-492",
                "text": "492",
                "top": 185,
                "left": 480,
                "width": 29,
                "height": 24
            },{
                "type": "stn",
                "id": "site-491",
                "text": "491",
                "top": 185,
                "left": 510,
                "width": 59,
                "height": 24
            },{
                "type": "stn",
                "id": "site-490",
                "text": "490",
                "top": 185,
                "left": 570,
                "width": 29,
                "height": 24
            },{
                "type": "stn",
                "id": "site-489",
                "text": "489",
                "top": 185,
                "left": 600,
                "width": 29,
                "height": 24
            },{
                "type": "stn",
                "id": "site-488",
                "text": "488",
                "top": 185,
                "left": 630,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-487",
                "text": "487",
                "top": 185,
                "left": 670,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-486",
                "text": "486",
                "top": 185,
                "left": 710,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-485",
                "text": "485",
                "top": 185,
                "left": 730,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-484",
                "text": "484",
                "top": 185,
                "left": 750,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-483",
                "text": "483",
                "top": 185,
                "left": 790,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-482",
                "text": "482",
                "top": 185,
                "left": 830,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-481",
                "text": "481",
                "top": 185,
                "left": 870,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-480",
                "text": "480",
                "top": 185,
                "left": 910,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-479",
                "text": "479",
                "top": 185,
                "left": 930,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-478",
                "text": "478",
                "top": 185,
                "left": 950,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-477",
                "text": "477",
                "top": 185,
                "left": 990,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-476",
                "text": "476",
                "top": 185,
                "left": 1030,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-475",
                "text": "475",
                "top": 185,
                "left": 1070,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-474",
                "text": "474",
                "top": 185,
                "left": 1090,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-473",
                "text": "473",
                "top": 185,
                "left": 1110,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-472",
                "text": "472",
                "top": 185,
                "left": 1150,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-471",
                "text": "471",
                "top": 185,
                "left": 1190,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-470",
                "text": "470",
                "top": 185,
                "left": 1230,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-469",
                "text": "469",
                "top": 185,
                "left": 1250,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-468",
                "text": "468",
                "top": 185,
                "left": 1270,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-467",
                "text": "467",
                "top": 185,
                "left": 1310,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-466",
                "text": "466",
                "top": 185,
                "left": 1350,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-465",
                "text": "465",
                "top": 185,
                "left": 1370,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-464",
                "text": "464",
                "top": 185,
                "left": 1390,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-463",
                "text": "463",
                "top": 185,
                "left": 1430,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-462",
                "text": "462",
                "top": 185,
                "left": 1470,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-458",
                "text": "458",
                "top": 185,
                "left": 1510,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-457",
                "text": "457",
                "top": 185,
                "left": 1530,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-461",
                "text": "461",
                "top": 160,
                "left": 1510,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-460",
                "text": "460",
                "top": 160,
                "left": 1530,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-456",
                "text": "456",
                "top": 185,
                "left": 1550,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-459",
                "text": "459",
                "top": 160,
                "left": 1550,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-455",
                "text": "455",
                "top": 185,
                "left": 1590,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-451",
                "text": "451",
                "top": 185,
                "left": 1630,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-450",
                "text": "450",
                "top": 185,
                "left": 1650,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-449",
                "text": "449",
                "top": 185,
                "left": 1670,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-454",
                "text": "454",
                "top": 160,
                "left": 1630,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-453",
                "text": "453",
                "top": 160,
                "left": 1650,
                "width": 19,
                "height": 24
            },{
                "type": "stn",
                "id": "site-452",
                "text": "452",
                "top": 160,
                "left": 1670,
                "width": 39,
                "height": 24
            }
            ,{
                "type": "stn",
                "id": "site-419",
                "text": "419",
                "top": 210,
                "left": 480,
                "width": 29,
                "height": 24
            },{
                "type": "stn",
                "id": "site-420",
                "text": "420",
                "top": 210,
                "left": 510,
                "width": 59,
                "height": 24
            },{
                "type": "stn",
                "id": "site-421",
                "text": "421",
                "top": 210,
                "left": 570,
                "width": 59,
                "height": 24
            },{
                "type": "stn",
                "id": "site-422",
                "text": "422",
                "top": 210,
                "left": 630,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-423",
                "text": "423",
                "top": 210,
                "left": 670,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-424",
                "text": "424",
                "top": 210,
                "left": 710,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-425",
                "text": "425",
                "top": 210,
                "left": 750,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-426",
                "text": "426",
                "top": 210,
                "left": 790,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-427",
                "text": "427",
                "top": 210,
                "left": 830,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-428",
                "text": "428",
                "top": 210,
                "left": 870,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-429",
                "text": "429",
                "top": 210,
                "left": 910,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-430",
                "text": "430",
                "top": 210,
                "left": 950,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-431",
                "text": "431",
                "top": 210,
                "left": 990,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-432",
                "text": "432",
                "top": 210,
                "left": 1030,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-433",
                "text": "433",
                "top": 210,
                "left": 1070,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-434",
                "text": "434",
                "top": 210,
                "left": 1110,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-435",
                "text": "435",
                "top": 210,
                "left": 1150,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-436",
                "text": "436",
                "top": 210,
                "left": 1190,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-437",
                "text": "437",
                "top": 210,
                "left": 1230,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-438",
                "text": "438",
                "top": 210,
                "left": 1270,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-439",
                "text": "439",
                "top": 210,
                "left": 1310,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-440",
                "text": "440",
                "top": 210,
                "left": 1350,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-441",
                "text": "441",
                "top": 210,
                "left": 1390,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-442",
                "text": "442",
                "top": 210,
                "left": 1430,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-443",
                "text": "443",
                "top": 210,
                "left": 1470,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-444",
                "text": "444",
                "top": 210,
                "left": 1510,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-445",
                "text": "445",
                "top": 210,
                "left": 1550,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-446",
                "text": "446",
                "top": 210,
                "left": 1590,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-447",
                "text": "447",
                "top": 210,
                "left": 1630,
                "width": 39,
                "height": 24
            },{
                "type": "stn",
                "id": "site-448",
                "text": "448",
                "top": 210,
                "left": 1670,
                "width": 39,
                "height": 24
            }]
        }]
    }]
}

 src/main/webapp/static/js/console.map12.js

New file
@@ -0,0 +1,231 @@
mapInfo = {
    "mapName": "STWCS",
    "rackCount": 16,
    "crnCount": 4,
    "stbCount": 16,
    "hpPosition": -1,
    "minBayNo": 2,
    "floors": 1,
    "racks": [],
    "rackDescs": [],
    "crns": [],
    "areas": [{
        "type": "Control_floor",
        "id": "tabControl_floor1",
        "text": "楼层",
        "top": 68,
        "left": 80,
        "width": 1400,
        "height": 680,
        "floors": [{
            "type": "floor",
            "id": "page_floor2",
            "text": "2",
            "top": 4,
            "left": 22,
            "width": 1374,
            "height": 672,
            "stns": [{
                "type": "stn",
                "id": "site-525",
                "text": "525",
                "top": 100,
                "left": 430,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-526",
                "text": "526",
                "top": 150,
                "left": 430,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-527",
                "text": "527",
                "top": 200,
                "left": 430,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-528",
                "text": "528",
                "top": 250,
                "left": 430,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-529",
                "text": "529",
                "top": 300,
                "left": 430,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-530",
                "text": "530",
                "top": 350,
                "left": 430,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-531",
                "text": "531",
                "top": 400,
                "left": 420,
                "width": 69,
                "height": 29
            },{
                "type": "stn",
                "id": "site-532",
                "text": "532",
                "top": 430,
                "left": 430,
                "width": 49,
                "height": 99
            },{
                "type": "stn",
                "id": "site-533",
                "text": "533",
                "top": 530,
                "left": 420,
                "width": 89,
                "height": 49
            },{
                "type": "stn",
                "id": "site-548",
                "text": "548",
                "top": 100,
                "left": 530,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-547",
                "text": "547",
                "top": 150,
                "left": 530,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-546",
                "text": "546",
                "top": 200,
                "left": 530,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-545",
                "text": "545",
                "top": 250,
                "left": 530,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-544",
                "text": "544",
                "top": 300,
                "left": 530,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-543",
                "text": "543",
                "top": 350,
                "left": 530,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-542",
                "text": "542",
                "top": 400,
                "left": 520,
                "width": 69,
                "height": 29
            },{
                "type": "stn",
                "id": "site- ",
                "text": " ",
                "top": 430,
                "left": 530,
                "width": 49,
                "height": 19
            },{
                "type": "stn",
                "id": "site-541",
                "text": "541",
                "top": 450,
                "left": 520,
                "width": 69,
                "height": 29
            },{
                "type": "stn",
                "id": "site-540",
                "text": "540",
                "top": 480,
                "left": 530,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-534",
                "text": "534",
                "top": 530,
                "left": 510,
                "width": 89,
                "height": 49
            },{
                "type": "stn",
                "id": "site-535",
                "text": "535",
                "top": 520,
                "left": 600,
                "width": 49,
                "height": 69
            },{
                "type": "stn",
                "id": "site-536",
                "text": "536",
                "top": 530,
                "left": 650,
                "width": 89,
                "height": 49
            },{
                "type": "stn",
                "id": "site-537",
                "text": "537",
                "top": 520,
                "left": 740,
                "width": 49,
                "height": 69
            },{
                "type": "stn",
                "id": "site-538",
                "text": "538",
                "top": 530,
                "left": 790,
                "width": 49,
                "height": 49
            },{
                "type": "stn",
                "id": "site-539",
                "text": "539",
                "top": 510,
                "left": 840,
                "width": 89,
                "height": 89
            }]
        }]
    }]
}

 src/main/webapp/static/js/console.map21.js

New file
@@ -0,0 +1,1791 @@
mapInfo = {
    "mapName": "STWCS",
    "rackCount": 16,
    "crnCount": 4,
    "stbCount": 16,
    "hpPosition": 1,
    "minBayNo": 2,
    "floors": 1,
    "overflow": "scroll",
    "racks": [{
        "type": "rack",
        "id": "rack1",
        "top": 661,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack2",
        "top": 639,//-48  ==>3
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack3",
        "top": 591,//-22  ==>4  //67,//92  103  //591  +25 ==>//616  +11 ==>//627
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack4",
        "top": 569,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    },{
        "type": "rack",
        "id": "rack5",
        "top": 547,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack6",
        "top": 525,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack7",
        "top": 477,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack8",
        "top": 455,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack9",
        "top": 432,//-22  ==>10
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack10",
        "top": 384,//+25  ==>409   +11 ==>420
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    },{
        "type": "rack",
        "id": "rack11",
        "top": 362,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack12",
        "top": 314,//+25  ==>339
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack13",
        "top": 292,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack14",
        "top": 244,//+25  ==> 269
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }],
    "rackDescs": [{
        "type": "rackDescs",
        "id": "lb_desc16",
        "text": "#1",
        "top": 661,
        "left": 270,
        "width": 30,
        "height": 23
    }, {
        "type": "rackDescs",
        "id": "lb_desc1",
        "text": "#4",
        "top": 569,
        "left": 270,
        "width": 41,
        "height": 23
    }],
    "crns": [{
        "type": "crane",
        "id": "crn-1",
        "text": "1",
        "top": 616,// 591(3号堆垛机),//-22  ==>4  //67,//92  103  //（测算堆垛机位置）591  +25 ==>//616  +11 ==>//627
        "left": 439,
        "width": 93,
        "height": 22
    }, {
        "type": "track",
        "id": "lb_track1",
        "text": "",
        "top": 627,
        "left": 273,
        "width": 1042,
        "height": 2
    },{
        "type": "crane",
        "id": "crn-2",
        "text": "2",
        "top": 502,
        "left": 439,
        "width": 93,
        "height": 22
    }, {
        "type": "track",
        "id": "lb_track2",
        "text": "",
        "top": 513,
        "left": 273,
        "width": 1042,
        "height": 2
    },{
        "type": "crane",
        "id": "crn-3",
        "text": "3",
        "top": 409,
        "left": 439,
        "width": 93,
        "height": 22
    }, {
        "type": "track",
        "id": "lb_track3",
        "text": "",
        "top": 420,
        "left": 273,
        "width": 1042,
        "height": 2
    },{
        "type": "crane",
        "id": "crn-4",
        "text": "4",
        "top": 339,
        "left": 439,
        "width": 93,
        "height": 22
    }, {
        "type": "track",
        "id": "lb_track4",
        "text": "",
        "top": 350,
        "left": 273,
        "width": 1042,
        "height": 2
    },{
        "type": "crane",
        "id": "crn-5",
        "text": "5",
        "top": 269,
        "left": 439,
        "width": 93,
        "height": 22
    }, {
        "type": "track",
        "id": "lb_track5",
        "text": "",
        "top": 280,
        "left": 273,
        "width": 1042,
        "height": 2
    }],
    "areas": [{
        "type": "Control_floor",
        "id": "tabControl_floor1",
        "text": "楼层",
        "top": 68,
        "left": 80,
        "width": 1400,
        "height": 680,
        "floors": [{
            "type": "floor",
            "id": "page_floor1",
            "text": "小料箱",
            "top": 4,
            "left": 22,
            "width": 1374,
            "height": 672,
            "stns": [{
                "type": "stn",
                "id": "site-100",
                "text": "100",
                "top": 641.5,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-101",
                "text": "101",
                "top": 664,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-102",
                "text": "102",
                "top": 664,
                "left": 1318,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-103",
                "text": "103",
                "top": 629,
                "left": 1369,
                "width": 29,
                "height": 55
            },{
                "type": "stn",
                "id": "site-104",
                "text": "104",
                "top": 624,
                "left": 1400,
                "width": 29,
                "height": 60
            },{
                "type": "stn",
                "id": "site-123",
                "text": "123",
                "top": 58,
                "left": 1133,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-124",
                "text": "124",
                "top": 88,
                "left": 1133,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-125",
                "text": "125",
                "top": 118,
                "left": 1133,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-126",
                "text": "126",
                "top": 128,
                "left": 1103,
                "width": 29,
                "height": 19
            },{
                "type": "stn",
                "id": "site-122",
                "text": "122",
                "top": 58,
                "left": 1163,
                "width": 25,
                "height": 20
            },{
                "type": "stn",
                "id": "site-121",
                "text": "121",
                "top": 58,
                "left": 1189,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-129",
                "text": "129",
                "top": 88,
                "left": 1189,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-130",
                "text": "130",
                "top": 118,
                "left": 1189,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-131",
                "text": "131",
                "top": 128,
                "left": 1219,
                "width": 29,
                "height": 19
            },{
                "type": "stn",
                "id": "site-120",
                "text": "120",
                "top": 58,
                "left": 1219,
                "width": 59,
                "height": 20
            },{
                "type": "stn",
                "id": "site-119",
                "text": "119",
                "top": 58,
                "left": 1279,
                "width": 59,
                "height": 20
            },{
                "type": "stn",
                "id": "site-118",
                "text": "118",
                "top": 58,
                "left": 1339,
                "width": 59,
                "height": 20
            },{
                "type": "stn",
                "id": "site-117",
                "text": "117",
                "top": 58,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-116",
                "text": "116",
                "top": 98,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-115",
                "text": "115",
                "top": 138,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-114",
                "text": "114",
                "top": 178,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-113",
                "text": "113",
                "top": 218,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-112",
                "text": "112",
                "top": 258,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-111",
                "text": "111",
                "top": 298,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-110",
                "text": "110",
                "top": 338,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-109",
                "text": "109",
                "top": 378,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-108",
                "text": "108",
                "top": 418,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-107",
                "text": "107",
                "top": 458,
                "left": 1400,
                "width": 29,
                "height": 59
            },{
                "type": "stn",
                "id": "site-106",
                "text": "106",
                "top": 518,
                "left": 1400,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-105",
                "text": "105",
                "top": 548,
                "left": 1400,
                "width": 29,
                "height": 75
            },{
                "type": "stn",
                "id": "site-154",
                "text": "154",
                "top": 572,
                "left": 1369,
                "width": 29,
                "height": 55
            },{
                "type": "stn",
                "id": "site-127",
                "text": "127",
                "top": 158,
                "left": 1133,
                "width": 29,
                "height": 40
            },{
                "type": "stn",
                "id": "site-128",
                "text": "128",
                "top": 178,
                "left": 1163,
                "width": 25,
                "height": 20
            },{
                "type": "stn",
                "id": "site-132",
                "text": "132",
                "top": 158,
                "left": 1189,
                "width": 29,
                "height": 40
            },{
                "type": "stn",
                "id": "site-133",
                "text": "133",
                "top": 178,
                "left": 1219,
                "width": 69,
                "height": 20
            },{
                "type": "stn",
                "id": "site-134",
                "text": "134",
                "top": 178,
                "left": 1289,
                "width": 79,
                "height": 20
            },{
                "type": "stn",
                "id": "site-135",
                "text": "135",
                "top": 178,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-136",
                "text": "136",
                "top": 218,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-137",
                "text": "137",
                "top": 258,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-138",
                "text": "138",
                "top": 298,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-139",
                "text": "139",
                "top": 338,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-140",
                "text": "140",
                "top": 378,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-141",
                "text": "141",
                "top": 418,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-142",
                "text": "142",
                "top": 458,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-143",
                "text": "143",
                "top": 458,
                "left": 1318,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-144",
                "text": "144",
                "top": 458,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-145",
                "text": "145",
                "top": 480,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-148",
                "text": "148",
                "top": 528,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-149",
                "text": "149",
                "top": 550,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-150",
                "text": "150",
                "top": 550,
                "left": 1318,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-147",
                "text": "147",
                "top": 535,
                "left": 1369,
                "width": 29,
                "height": 35
            },{
                "type": "stn",
                "id": "site-146",
                "text": "146",
                "top": 499,
                "left": 1369,
                "width": 29,
                "height": 34
            },{
                "type": "stn",
                "id": "site-151",
                "text": "151",
                "top": 572,
                "left": 1318,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-152",
                "text": "152",
                "top": 572,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-153",
                "text": "153",
                "top": 593,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-155",
                "text": "155",
                "top": 258,
                "left": 1430,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-156",
                "text": "156",
                "top": 258,
                "left": 1455,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-157",
                "text": "157",
                "top": 258,
                "left": 1480,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-158",
                "text": "158",
                "top": 258,
                "left": 1505,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-159",
                "text": "159",
                "top": 258,
                "left": 1530,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-160",
                "text": "160",
                "top": 258,
                "left": 1555,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-161",
                "text": "161",
                "top": 258,
                "left": 1580,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-162",
                "text": "162",
                "top": 258,
                "left": 1605,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-163",
                "text": "163",
                "top": 258,
                "left": 1630,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-164",
                "text": "164",
                "top": 258,
                "left": 1655,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-165",
                "text": "165",
                "top": 258,
                "left": 1680,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-166",
                "text": "166",
                "top": 258,
                "left": 1705,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-167",
                "text": "167",
                "top": 258,
                "left": 1730,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-168",
                "text": "168",
                "top": 258,
                "left": 1755,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-169",
                "text": "169",
                "top": 258,
                "left": 1780,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-170",
                "text": "170",
                "top": 258,
                "left": 1805,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-171",
                "text": "171",
                "top": 258,
                "left": 1830,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-172",
                "text": "172",
                "top": 258,
                "left": 1855,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-193",
                "text": "193",
                "top": 238,
                "left": 1430,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-192",
                "text": "192",
                "top": 238,
                "left": 1455,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-191",
                "text": "191",
                "top": 238,
                "left": 1480,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-190",
                "text": "190",
                "top": 238,
                "left": 1505,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-189",
                "text": "189",
                "top": 238,
                "left": 1530,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-188",
                "text": "188",
                "top": 238,
                "left": 1555,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-187",
                "text": "187",
                "top": 238,
                "left": 1580,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-186",
                "text": "186",
                "top": 238,
                "left": 1605,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-185",
                "text": "185",
                "top": 238,
                "left": 1630,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-184",
                "text": "184",
                "top": 238,
                "left": 1655,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-183",
                "text": "183",
                "top": 238,
                "left": 1680,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-182",
                "text": "182",
                "top": 238,
                "left": 1705,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-181",
                "text": "181",
                "top": 238,
                "left": 1730,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-180",
                "text": "180",
                "top": 238,
                "left": 1755,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-179",
                "text": "179",
                "top": 238,
                "left": 1780,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-178",
                "text": "178",
                "top": 238,
                "left": 1805,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-177",
                "text": "177",
                "top": 238,
                "left": 1830,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-176",
                "text": "176",
                "top": 238,
                "left": 1855,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-175",
                "text": "175",
                "top": 238,
                "left": 1880,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-174",
                "text": "174",
                "top": 258,
                "left": 1880,
                "width": 24,
                "height": 59
            },{
                "type": "stn",
                "id": "site-173",
                "text": "173",
                "top": 318,
                "left": 1880,
                "width": 24,
                "height": 19
            }]
        }, {
            "type": "floor",
            "id": "page_floor2",
            "text": "大料箱",
            "top": 4,
            "left": 22,
            "width": 1374,
            "height": 672,
            "stns": [{
                "type": "stn",
                "id": "site-200",
                "text": "200",
                "top": 434,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-201",
                "text": "201",
                "top": 434,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-202",
                "text": "202",
                "top": 434,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-203",
                "text": "203",
                "top": 434,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-204",
                "text": "204",
                "top": 434,
                "left": 1410,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-205",
                "text": "205",
                "top": 316,
                "left": 1410,
                "width": 29,
                "height": 57
            },{
                "type": "stn",
                "id": "site-206",
                "text": "206",
                "top": 374,
                "left": 1410,
                "width": 29,
                "height": 59
            },{
                "type": "stn",
                "id": "site-261",
                "text": "261",
                "top": 386,
                "left": 1267,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-257",
                "text": "257",
                "top": 386,
                "left": 1292,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-256",
                "text": "256",
                "top": 386,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-255",
                "text": "255",
                "top": 386,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-254",
                "text": "254",
                "top": 386,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-258",
                "text": "258",
                "top": 407,
                "left": 1380,
                "width": 29,
                "height": 26
            },{
                "type": "stn",
                "id": "site-250",
                "text": "250",
                "top": 364,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-251",
                "text": "251",
                "top": 364,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-252",
                "text": "252",
                "top": 364,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-253",
                "text": "253",
                "top": 364,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-260",
                "text": "260",
                "top": 316,
                "left": 1267,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-248",
                "text": "248",
                "top": 316,
                "left": 1292,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-247",
                "text": "247",
                "top": 316,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-246",
                "text": "246",
                "top": 316,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-245",
                "text": "245",
                "top": 316,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-249",
                "text": "249",
                "top": 337,
                "left": 1380,
                "width": 29,
                "height": 26
            },{
                "type": "stn",
                "id": "site-241",
                "text": "241",
                "top": 294,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-242",
                "text": "242",
                "top": 294,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-243",
                "text": "243",
                "top": 294,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-244",
                "text": "244",
                "top": 294,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-207",
                "text": "207",
                "top": 294,
                "left": 1410,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-262",
                "text": "262",
                "top": 294,
                "left": 1440,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-263",
                "text": "263",
                "top": 294,
                "left": 1470,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-264",
                "text": "264",
                "top": 294,
                "left": 1500,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-265",
                "text": "265",
                "top": 294,
                "left": 1530,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-266",
                "text": "266",
                "top": 294,
                "left": 1560,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-267",
                "text": "267",
                "top": 294,
                "left": 1590,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-268",
                "text": "268",
                "top": 294,
                "left": 1620,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-269",
                "text": "269",
                "top": 315,
                "left": 1620,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-270",
                "text": "270",
                "top": 365,
                "left": 1620,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-320",
                "text": "320",
                "top": 415,
                "left": 1620,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-321",
                "text": "321",
                "top": 415,
                "left": 1660,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-322",
                "text": "322",
                "top": 415,
                "left": 1700,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-323",
                "text": "323",
                "top": 415,
                "left": 1740,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-324",
                "text": "324",
                "top": 436,
                "left": 1740,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-271",
                "text": "271",
                "top": 486,
                "left": 1740,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-259",
                "text": "259",
                "top": 246,
                "left": 1267,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-239",
                "text": "239",
                "top": 246,
                "left": 1292,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-238",
                "text": "238",
                "top": 246,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-237",
                "text": "237",
                "top": 246,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-236",
                "text": "236",
                "top": 246,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-235",
                "text": "235",
                "top": 225,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-234",
                "text": "234",
                "top": 204,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-231",
                "text": "231",
                "top": 183,
                "left": 1360,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-230",
                "text": "230",
                "top": 183,
                "left": 1310,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-229",
                "text": "229",
                "top": 183,
                "left": 1260,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-227",
                "text": "227",
                "top": 183,
                "left": 1160,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-228",
                "text": "228",
                "top": 183,
                "left": 1210,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-233",
                "text": "233",
                "top": 183,
                "left": 1385,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-306",
                "text": "306",
                "top": 162,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-226",
                "text": "226",
                "top": 141,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-225",
                "text": "225",
                "top": 120,
                "left": 1340,
                "width": 69,
                "height": 20
            },{
                "type": "stn",
                "id": "site-312",
                "text": "312",
                "top": 110,
                "left": 1320,
                "width": 29,
                "height": 40
            },{
                "type": "stn",
                "id": "site-313",
                "text": "313",
                "top": 120,
                "left": 1290,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-224",
                "text": "224",
                "top": 99,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-223",
                "text": "223",
                "top": 78,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-215",
                "text": "215",
                "top": 57,
                "left": 1360,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-216",
                "text": "216",
                "top": 57,
                "left": 1310,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-217",
                "text": "217",
                "top": 57,
                "left": 1260,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-218",
                "text": "218",
                "top": 57,
                "left": 1210,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-305",
                "text": "305",
                "top": 162,
                "left": 1230,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-222",
                "text": "222",
                "top": 141,
                "left": 1230,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-221",
                "text": "221",
                "top": 120,
                "left": 1190,
                "width": 69,
                "height": 20
            },{
                "type": "stn",
                "id": "site-310",
                "text": "310",
                "top": 110,
                "left": 1170,
                "width": 29,
                "height": 40
            },{
                "type": "stn",
                "id": "site-311",
                "text": "311",
                "top": 120,
                "left": 1140,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-220",
                "text": "220",
                "top": 99,
                "left": 1230,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-219",
                "text": "219",
                "top": 78,
                "left": 1230,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-208",
                "text": "208",
                "top": 267,
                "left": 1410,
                "width": 29,
                "height": 26
            },{
                "type": "stn",
                "id": "site-209",
                "text": "209",
                "top": 246,
                "left": 1410,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-304",
                "text": "304",
                "top": 246,
                "left": 1440,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-303",
                "text": "303",
                "top": 246,
                "left": 1470,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-302",
                "text": "302",
                "top": 246,
                "left": 1500,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-301",
                "text": "301",
                "top": 246,
                "left": 1530,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-300",
                "text": "300",
                "top": 246,
                "left": 1560,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-299",
                "text": "299",
                "top": 246,
                "left": 1600,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-298",
                "text": "298",
                "top": 246,
                "left": 1640,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-297",
                "text": "297",
                "top": 267,
                "left": 1655,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-296",
                "text": "296",
                "top": 317,
                "left": 1655,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-329",
                "text": "329",
                "top": 367,
                "left": 1655,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-328",
                "text": "328",
                "top": 367,
                "left": 1695,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-327",
                "text": "327",
                "top": 367,
                "left": 1735,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-326",
                "text": "326",
                "top": 367,
                "left": 1775,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-325",
                "text": "325",
                "top": 388,
                "left": 1775,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-295",
                "text": "295",
                "top": 438,
                "left": 1775,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-240",
                "text": "240",
                "top": 267,
                "left": 1380,
                "width": 29,
                "height": 26
            },{
                "type": "stn",
                "id": "site-210",
                "text": "210",
                "top": 225,
                "left": 1410,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-211",
                "text": "211",
                "top": 183,
                "left": 1410,
                "width": 29,
                "height": 41
            },{
                "type": "stn",
                "id": "site-212",
                "text": "212",
                "top": 141,
                "left": 1410,
                "width": 29,
                "height": 41
            },{
                "type": "stn",
                "id": "site-213",
                "text": "213",
                "top": 99,
                "left": 1410,
                "width": 29,
                "height": 41
            },{
                "type": "stn",
                "id": "site-214",
                "text": "214",
                "top": 57,
                "left": 1410,
                "width": 29,
                "height": 41
            }]
        }]
    }]
}

 src/main/webapp/static/js/console.map22.js

New file
@@ -0,0 +1,1791 @@
mapInfo = {
    "mapName": "STWCS",
    "rackCount": 16,
    "crnCount": 4,
    "stbCount": 16,
    "hpPosition": 1,
    "minBayNo": 2,
    "floors": 1,
    "overflow": "scroll",
    "racks": [{
        "type": "rack",
        "id": "rack1",
        "top": 661,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack2",
        "top": 639,//-48  ==>3
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack3",
        "top": 591,//-22  ==>4  //67,//92  103  //591  +25 ==>//616  +11 ==>//627
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack4",
        "top": 569,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    },{
        "type": "rack",
        "id": "rack5",
        "top": 547,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack6",
        "top": 525,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack7",
        "top": 477,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack8",
        "top": 455,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack9",
        "top": 432,//-22  ==>10
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack10",
        "top": 384,//+25  ==>409   +11 ==>420
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    },{
        "type": "rack",
        "id": "rack11",
        "top": 362,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack12",
        "top": 314,//+25  ==>339
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack13",
        "top": 292,
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }, {
        "type": "rack",
        "id": "rack14",
        "top": 244,//+25  ==> 269
        "left": 350,
        "width": 917,
        "height": 22,
        "minBayNo": 2,
        "maxBayNo": 42
    }],
    "rackDescs": [{
        "type": "rackDescs",
        "id": "lb_desc16",
        "text": "#1",
        "top": 661,
        "left": 270,
        "width": 30,
        "height": 23
    }, {
        "type": "rackDescs",
        "id": "lb_desc1",
        "text": "#4",
        "top": 569,
        "left": 270,
        "width": 41,
        "height": 23
    }],
    "crns": [{
        "type": "crane",
        "id": "crn-1",
        "text": "1",
        "top": 616,// 591(3号堆垛机),//-22  ==>4  //67,//92  103  //（测算堆垛机位置）591  +25 ==>//616  +11 ==>//627
        "left": 439,
        "width": 93,
        "height": 22
    }, {
        "type": "track",
        "id": "lb_track1",
        "text": "",
        "top": 627,
        "left": 273,
        "width": 1042,
        "height": 2
    },{
        "type": "crane",
        "id": "crn-2",
        "text": "2",
        "top": 502,
        "left": 439,
        "width": 93,
        "height": 22
    }, {
        "type": "track",
        "id": "lb_track2",
        "text": "",
        "top": 513,
        "left": 273,
        "width": 1042,
        "height": 2
    },{
        "type": "crane",
        "id": "crn-3",
        "text": "3",
        "top": 409,
        "left": 439,
        "width": 93,
        "height": 22
    }, {
        "type": "track",
        "id": "lb_track3",
        "text": "",
        "top": 420,
        "left": 273,
        "width": 1042,
        "height": 2
    },{
        "type": "crane",
        "id": "crn-4",
        "text": "4",
        "top": 339,
        "left": 439,
        "width": 93,
        "height": 22
    }, {
        "type": "track",
        "id": "lb_track4",
        "text": "",
        "top": 350,
        "left": 273,
        "width": 1042,
        "height": 2
    },{
        "type": "crane",
        "id": "crn-5",
        "text": "5",
        "top": 269,
        "left": 439,
        "width": 93,
        "height": 22
    }, {
        "type": "track",
        "id": "lb_track5",
        "text": "",
        "top": 280,
        "left": 273,
        "width": 1042,
        "height": 2
    }],
    "areas": [{
        "type": "Control_floor",
        "id": "tabControl_floor1",
        "text": "楼层",
        "top": 68,
        "left": 80,
        "width": 1400,
        "height": 680,
        "floors": [{
            "type": "floor",
            "id": "page_floor1",
            "text": "小料箱",
            "top": 4,
            "left": 22,
            "width": 1374,
            "height": 672,
            "stns": [{
                "type": "stn",
                "id": "site-100",
                "text": "100",
                "top": 641.5,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-101",
                "text": "101",
                "top": 664,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-102",
                "text": "102",
                "top": 664,
                "left": 1318,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-103",
                "text": "103",
                "top": 629,
                "left": 1369,
                "width": 29,
                "height": 55
            },{
                "type": "stn",
                "id": "site-104",
                "text": "104",
                "top": 624,
                "left": 1400,
                "width": 29,
                "height": 60
            },{
                "type": "stn",
                "id": "site-123",
                "text": "123",
                "top": 58,
                "left": 1133,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-124",
                "text": "124",
                "top": 88,
                "left": 1133,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-125",
                "text": "125",
                "top": 118,
                "left": 1133,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-126",
                "text": "126",
                "top": 128,
                "left": 1103,
                "width": 29,
                "height": 19
            },{
                "type": "stn",
                "id": "site-122",
                "text": "122",
                "top": 58,
                "left": 1163,
                "width": 25,
                "height": 20
            },{
                "type": "stn",
                "id": "site-121",
                "text": "121",
                "top": 58,
                "left": 1189,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-129",
                "text": "129",
                "top": 88,
                "left": 1189,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-130",
                "text": "130",
                "top": 118,
                "left": 1189,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-131",
                "text": "131",
                "top": 128,
                "left": 1219,
                "width": 29,
                "height": 19
            },{
                "type": "stn",
                "id": "site-120",
                "text": "120",
                "top": 58,
                "left": 1219,
                "width": 59,
                "height": 20
            },{
                "type": "stn",
                "id": "site-119",
                "text": "119",
                "top": 58,
                "left": 1279,
                "width": 59,
                "height": 20
            },{
                "type": "stn",
                "id": "site-118",
                "text": "118",
                "top": 58,
                "left": 1339,
                "width": 59,
                "height": 20
            },{
                "type": "stn",
                "id": "site-117",
                "text": "117",
                "top": 58,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-116",
                "text": "116",
                "top": 98,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-115",
                "text": "115",
                "top": 138,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-114",
                "text": "114",
                "top": 178,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-113",
                "text": "113",
                "top": 218,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-112",
                "text": "112",
                "top": 258,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-111",
                "text": "111",
                "top": 298,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-110",
                "text": "110",
                "top": 338,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-109",
                "text": "109",
                "top": 378,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-108",
                "text": "108",
                "top": 418,
                "left": 1400,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-107",
                "text": "107",
                "top": 458,
                "left": 1400,
                "width": 29,
                "height": 59
            },{
                "type": "stn",
                "id": "site-106",
                "text": "106",
                "top": 518,
                "left": 1400,
                "width": 29,
                "height": 29
            },{
                "type": "stn",
                "id": "site-105",
                "text": "105",
                "top": 548,
                "left": 1400,
                "width": 29,
                "height": 75
            },{
                "type": "stn",
                "id": "site-154",
                "text": "154",
                "top": 572,
                "left": 1369,
                "width": 29,
                "height": 55
            },{
                "type": "stn",
                "id": "site-127",
                "text": "127",
                "top": 158,
                "left": 1133,
                "width": 29,
                "height": 40
            },{
                "type": "stn",
                "id": "site-128",
                "text": "128",
                "top": 178,
                "left": 1163,
                "width": 25,
                "height": 20
            },{
                "type": "stn",
                "id": "site-132",
                "text": "132",
                "top": 158,
                "left": 1189,
                "width": 29,
                "height": 40
            },{
                "type": "stn",
                "id": "site-133",
                "text": "133",
                "top": 178,
                "left": 1219,
                "width": 69,
                "height": 20
            },{
                "type": "stn",
                "id": "site-134",
                "text": "134",
                "top": 178,
                "left": 1289,
                "width": 79,
                "height": 20
            },{
                "type": "stn",
                "id": "site-135",
                "text": "135",
                "top": 178,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-136",
                "text": "136",
                "top": 218,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-137",
                "text": "137",
                "top": 258,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-138",
                "text": "138",
                "top": 298,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-139",
                "text": "139",
                "top": 338,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-140",
                "text": "140",
                "top": 378,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-141",
                "text": "141",
                "top": 418,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-142",
                "text": "142",
                "top": 458,
                "left": 1369,
                "width": 29,
                "height": 39
            },{
                "type": "stn",
                "id": "site-143",
                "text": "143",
                "top": 458,
                "left": 1318,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-144",
                "text": "144",
                "top": 458,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-145",
                "text": "145",
                "top": 480,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-148",
                "text": "148",
                "top": 528,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-149",
                "text": "149",
                "top": 550,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-150",
                "text": "150",
                "top": 550,
                "left": 1318,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-147",
                "text": "147",
                "top": 535,
                "left": 1369,
                "width": 29,
                "height": 35
            },{
                "type": "stn",
                "id": "site-146",
                "text": "146",
                "top": 499,
                "left": 1369,
                "width": 29,
                "height": 34
            },{
                "type": "stn",
                "id": "site-151",
                "text": "151",
                "top": 572,
                "left": 1318,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-152",
                "text": "152",
                "top": 572,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-153",
                "text": "153",
                "top": 593,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-155",
                "text": "155",
                "top": 258,
                "left": 1430,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-156",
                "text": "156",
                "top": 258,
                "left": 1455,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-157",
                "text": "157",
                "top": 258,
                "left": 1480,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-158",
                "text": "158",
                "top": 258,
                "left": 1505,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-159",
                "text": "159",
                "top": 258,
                "left": 1530,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-160",
                "text": "160",
                "top": 258,
                "left": 1555,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-161",
                "text": "161",
                "top": 258,
                "left": 1580,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-162",
                "text": "162",
                "top": 258,
                "left": 1605,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-163",
                "text": "163",
                "top": 258,
                "left": 1630,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-164",
                "text": "164",
                "top": 258,
                "left": 1655,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-165",
                "text": "165",
                "top": 258,
                "left": 1680,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-166",
                "text": "166",
                "top": 258,
                "left": 1705,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-167",
                "text": "167",
                "top": 258,
                "left": 1730,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-168",
                "text": "168",
                "top": 258,
                "left": 1755,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-169",
                "text": "169",
                "top": 258,
                "left": 1780,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-170",
                "text": "170",
                "top": 258,
                "left": 1805,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-171",
                "text": "171",
                "top": 258,
                "left": 1830,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-172",
                "text": "172",
                "top": 258,
                "left": 1855,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-193",
                "text": "193",
                "top": 238,
                "left": 1430,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-192",
                "text": "192",
                "top": 238,
                "left": 1455,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-191",
                "text": "191",
                "top": 238,
                "left": 1480,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-190",
                "text": "190",
                "top": 238,
                "left": 1505,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-189",
                "text": "189",
                "top": 238,
                "left": 1530,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-188",
                "text": "188",
                "top": 238,
                "left": 1555,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-187",
                "text": "187",
                "top": 238,
                "left": 1580,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-186",
                "text": "186",
                "top": 238,
                "left": 1605,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-185",
                "text": "185",
                "top": 238,
                "left": 1630,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-184",
                "text": "184",
                "top": 238,
                "left": 1655,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-183",
                "text": "183",
                "top": 238,
                "left": 1680,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-182",
                "text": "182",
                "top": 238,
                "left": 1705,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-181",
                "text": "181",
                "top": 238,
                "left": 1730,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-180",
                "text": "180",
                "top": 238,
                "left": 1755,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-179",
                "text": "179",
                "top": 238,
                "left": 1780,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-178",
                "text": "178",
                "top": 238,
                "left": 1805,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-177",
                "text": "177",
                "top": 238,
                "left": 1830,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-176",
                "text": "176",
                "top": 238,
                "left": 1855,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-175",
                "text": "175",
                "top": 238,
                "left": 1880,
                "width": 24,
                "height": 19
            },{
                "type": "stn",
                "id": "site-174",
                "text": "174",
                "top": 258,
                "left": 1880,
                "width": 24,
                "height": 59
            },{
                "type": "stn",
                "id": "site-173",
                "text": "173",
                "top": 318,
                "left": 1880,
                "width": 24,
                "height": 19
            }]
        }, {
            "type": "floor",
            "id": "page_floor2",
            "text": "大料箱",
            "top": 4,
            "left": 22,
            "width": 1374,
            "height": 672,
            "stns": [{
                "type": "stn",
                "id": "site-200",
                "text": "200",
                "top": 434,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-201",
                "text": "201",
                "top": 434,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-202",
                "text": "202",
                "top": 434,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-203",
                "text": "203",
                "top": 434,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-204",
                "text": "204",
                "top": 434,
                "left": 1410,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-205",
                "text": "205",
                "top": 316,
                "left": 1410,
                "width": 29,
                "height": 57
            },{
                "type": "stn",
                "id": "site-206",
                "text": "206",
                "top": 374,
                "left": 1410,
                "width": 29,
                "height": 59
            },{
                "type": "stn",
                "id": "site-261",
                "text": "261",
                "top": 386,
                "left": 1267,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-257",
                "text": "257",
                "top": 386,
                "left": 1292,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-256",
                "text": "256",
                "top": 386,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-255",
                "text": "255",
                "top": 386,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-254",
                "text": "254",
                "top": 386,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-258",
                "text": "258",
                "top": 407,
                "left": 1380,
                "width": 29,
                "height": 26
            },{
                "type": "stn",
                "id": "site-250",
                "text": "250",
                "top": 364,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-251",
                "text": "251",
                "top": 364,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-252",
                "text": "252",
                "top": 364,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-253",
                "text": "253",
                "top": 364,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-260",
                "text": "260",
                "top": 316,
                "left": 1267,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-248",
                "text": "248",
                "top": 316,
                "left": 1292,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-247",
                "text": "247",
                "top": 316,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-246",
                "text": "246",
                "top": 316,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-245",
                "text": "245",
                "top": 316,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-249",
                "text": "249",
                "top": 337,
                "left": 1380,
                "width": 29,
                "height": 26
            },{
                "type": "stn",
                "id": "site-241",
                "text": "241",
                "top": 294,
                "left": 1267,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-242",
                "text": "242",
                "top": 294,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-243",
                "text": "243",
                "top": 294,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-244",
                "text": "244",
                "top": 294,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-207",
                "text": "207",
                "top": 294,
                "left": 1410,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-262",
                "text": "262",
                "top": 294,
                "left": 1440,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-263",
                "text": "263",
                "top": 294,
                "left": 1470,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-264",
                "text": "264",
                "top": 294,
                "left": 1500,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-265",
                "text": "265",
                "top": 294,
                "left": 1530,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-266",
                "text": "266",
                "top": 294,
                "left": 1560,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-267",
                "text": "267",
                "top": 294,
                "left": 1590,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-268",
                "text": "268",
                "top": 294,
                "left": 1620,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-269",
                "text": "269",
                "top": 315,
                "left": 1620,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-270",
                "text": "270",
                "top": 365,
                "left": 1620,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-320",
                "text": "320",
                "top": 415,
                "left": 1620,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-321",
                "text": "321",
                "top": 415,
                "left": 1660,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-322",
                "text": "322",
                "top": 415,
                "left": 1700,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-323",
                "text": "323",
                "top": 415,
                "left": 1740,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-324",
                "text": "324",
                "top": 436,
                "left": 1740,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-271",
                "text": "271",
                "top": 486,
                "left": 1740,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-259",
                "text": "259",
                "top": 246,
                "left": 1267,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-239",
                "text": "239",
                "top": 246,
                "left": 1292,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-238",
                "text": "238",
                "top": 246,
                "left": 1318,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-237",
                "text": "237",
                "top": 246,
                "left": 1349,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-236",
                "text": "236",
                "top": 246,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-235",
                "text": "235",
                "top": 225,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-234",
                "text": "234",
                "top": 204,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-231",
                "text": "231",
                "top": 183,
                "left": 1360,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-230",
                "text": "230",
                "top": 183,
                "left": 1310,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-229",
                "text": "229",
                "top": 183,
                "left": 1260,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-227",
                "text": "227",
                "top": 183,
                "left": 1160,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-228",
                "text": "228",
                "top": 183,
                "left": 1210,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-233",
                "text": "233",
                "top": 183,
                "left": 1385,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-306",
                "text": "306",
                "top": 162,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-226",
                "text": "226",
                "top": 141,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-225",
                "text": "225",
                "top": 120,
                "left": 1340,
                "width": 69,
                "height": 20
            },{
                "type": "stn",
                "id": "site-312",
                "text": "312",
                "top": 110,
                "left": 1320,
                "width": 29,
                "height": 40
            },{
                "type": "stn",
                "id": "site-313",
                "text": "313",
                "top": 120,
                "left": 1290,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-224",
                "text": "224",
                "top": 99,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-223",
                "text": "223",
                "top": 78,
                "left": 1380,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-215",
                "text": "215",
                "top": 57,
                "left": 1360,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-216",
                "text": "216",
                "top": 57,
                "left": 1310,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-217",
                "text": "217",
                "top": 57,
                "left": 1260,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-218",
                "text": "218",
                "top": 57,
                "left": 1210,
                "width": 49,
                "height": 20
            },{
                "type": "stn",
                "id": "site-305",
                "text": "305",
                "top": 162,
                "left": 1230,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-222",
                "text": "222",
                "top": 141,
                "left": 1230,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-221",
                "text": "221",
                "top": 120,
                "left": 1190,
                "width": 69,
                "height": 20
            },{
                "type": "stn",
                "id": "site-310",
                "text": "310",
                "top": 110,
                "left": 1170,
                "width": 29,
                "height": 40
            },{
                "type": "stn",
                "id": "site-311",
                "text": "311",
                "top": 120,
                "left": 1140,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-220",
                "text": "220",
                "top": 99,
                "left": 1230,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-219",
                "text": "219",
                "top": 78,
                "left": 1230,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-208",
                "text": "208",
                "top": 267,
                "left": 1410,
                "width": 29,
                "height": 26
            },{
                "type": "stn",
                "id": "site-209",
                "text": "209",
                "top": 246,
                "left": 1410,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-304",
                "text": "304",
                "top": 246,
                "left": 1440,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-303",
                "text": "303",
                "top": 246,
                "left": 1470,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-302",
                "text": "302",
                "top": 246,
                "left": 1500,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-301",
                "text": "301",
                "top": 246,
                "left": 1530,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-300",
                "text": "300",
                "top": 246,
                "left": 1560,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-299",
                "text": "299",
                "top": 246,
                "left": 1600,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-298",
                "text": "298",
                "top": 246,
                "left": 1640,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-297",
                "text": "297",
                "top": 267,
                "left": 1655,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-296",
                "text": "296",
                "top": 317,
                "left": 1655,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-329",
                "text": "329",
                "top": 367,
                "left": 1655,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-328",
                "text": "328",
                "top": 367,
                "left": 1695,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-327",
                "text": "327",
                "top": 367,
                "left": 1735,
                "width": 39,
                "height": 20
            },{
                "type": "stn",
                "id": "site-326",
                "text": "326",
                "top": 367,
                "left": 1775,
                "width": 24,
                "height": 20
            },{
                "type": "stn",
                "id": "site-325",
                "text": "325",
                "top": 388,
                "left": 1775,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-295",
                "text": "295",
                "top": 438,
                "left": 1775,
                "width": 24,
                "height": 49
            },{
                "type": "stn",
                "id": "site-240",
                "text": "240",
                "top": 267,
                "left": 1380,
                "width": 29,
                "height": 26
            },{
                "type": "stn",
                "id": "site-210",
                "text": "210",
                "top": 225,
                "left": 1410,
                "width": 29,
                "height": 20
            },{
                "type": "stn",
                "id": "site-211",
                "text": "211",
                "top": 183,
                "left": 1410,
                "width": 29,
                "height": 41
            },{
                "type": "stn",
                "id": "site-212",
                "text": "212",
                "top": 141,
                "left": 1410,
                "width": 29,
                "height": 41
            },{
                "type": "stn",
                "id": "site-213",
                "text": "213",
                "top": 99,
                "left": 1410,
                "width": 29,
                "height": 41
            },{
                "type": "stn",
                "id": "site-214",
                "text": "214",
                "top": 57,
                "left": 1410,
                "width": 29,
                "height": 41
            }]
        }]
    }]
}

 src/main/webapp/views/console11.html

New file
@@ -0,0 +1,799 @@
<!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>
    <!--地图json-->
    <script src="../static/js/console.map11.js"></script>
    <script src="../static/js/console.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 id="line-total" class="line-ss"></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();
    // carAnimate();
    carAnimate2();
    // 实时访问
    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 {
                    alert(res.msg);
                    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);
                        console.log(sites[i].siteId)
                        siteEl.attr("class", "site " + sites[i].siteStatus);
                        // siteEl.attr("class", "site site-auto-run-id");
                        if (sites[i].workNo != null && sites[i].workNo > 0) {
                            siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]");
                        } else {
                            siteEl.html(sites[i].siteId);
                        }

                        if (sites[i].siteId === '16' || sites[i].siteId === '016') {

                            carAnimate(Number(sites[i].siteId), 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 = 0;//($('.item').eq(0).width() + 13) / 2;

                        if (crns[i].bay < 0 || crns[i].bay === -2) {
                            crns[i].bay = 1
                        }
                        // crnEl.animate({left: (crns[i].bay * unit) + 'px'}, 1000);
                        // crns[i].bay = 15;

                        var offSet = 0;
                        unit = 60;
                        offSet = 325;


                        if(crns[i].bay === 1){
                            crnEl.animate({left: offSet + 'px'}, 1000);
                        } else {
                            crnEl.animate({left: (offSet - unit + (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) {
        // debugger
        var targetTop = 0;
        if (id === 16 || id === '16' || id === '016') {
            switch (target) {
                case 1:
                    targetTop += 827;
                    break;
                case 2:
                    targetTop += 765;
                    break;
                case 3:
                    targetTop += 651;
                    break;
                case 4:
                    targetTop += 589;
                    break;
                case 5:
                    targetTop += 505;
                    break;
                case 6:
                    targetTop += 443;
                    break;
                case 7:
                    targetTop += 362;
                    break;
                case 8:
                    targetTop += 297;
                    break;
                case 9:
                    targetTop += 243;
                    break;
                case 10:
                    targetTop += 129;
                    break;
                default:
                    return;
            }
        } else {
            return;
        }

        $("#site-0" + id).animate({top: targetTop + 'px'}, 1000);
    }

    //RGV车辆各站点距离数据
    let sitePosition = {
        101: '68px',
        102: '117px',
        122: '183px',
        104: '183px',
        105: '232px',
        118: '297px',
        107: '297px',
        108: '345px',
        119: '355px',
        110: '410px',
        120: '421px',
        111: '459px',
        121: '479px',
        113: '524px',
        123: '556px',
        114: '572px',
        1142: '600px',
        116: '639px',
        117: '687px',
    }

    //RGV车移动动画
    function moveSite(siteId, staNo) {
        $(siteId).animate({top: sitePosition[staNo]}, 1000);
    }

    // moveSite("#site-1", 117);//测试移动方法,可删除

    // Rgv实时数据获取
    function carAnimate2() {
        // console.log("1=============1")
        $.ajax({
            url: baseUrl + "/rgv/console/rgv/site/data",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    var rgvMap = res.data;
                    for (var i = 0; i < rgvMap.length; i++) {
                        moveSite("#site-"+rgvMap[i].id, rgvMap[i].title);
                    }
                } else {
                    console.log(res.msg);
                }
            }
        });
    }

</script>

 src/main/webapp/views/console12.html

New file
@@ -0,0 +1,799 @@
<!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>
    <!--地图json-->
    <script src="../static/js/console.map12.js"></script>
    <script src="../static/js/console.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 id="line-total" class="line-ss"></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();
    // carAnimate();
    carAnimate2();
    // 实时访问
    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 {
                    alert(res.msg);
                    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);
                        console.log(sites[i].siteId)
                        siteEl.attr("class", "site " + sites[i].siteStatus);
                        // siteEl.attr("class", "site site-auto-run-id");
                        if (sites[i].workNo != null && sites[i].workNo > 0) {
                            siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]");
                        } else {
                            siteEl.html(sites[i].siteId);
                        }

                        if (sites[i].siteId === '16' || sites[i].siteId === '016') {

                            carAnimate(Number(sites[i].siteId), 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 = 0;//($('.item').eq(0).width() + 13) / 2;

                        if (crns[i].bay < 0 || crns[i].bay === -2) {
                            crns[i].bay = 1
                        }
                        // crnEl.animate({left: (crns[i].bay * unit) + 'px'}, 1000);
                        // crns[i].bay = 15;

                        var offSet = 0;
                        unit = 60;
                        offSet = 325;


                        if(crns[i].bay === 1){
                            crnEl.animate({left: offSet + 'px'}, 1000);
                        } else {
                            crnEl.animate({left: (offSet - unit + (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) {
        // debugger
        var targetTop = 0;
        if (id === 16 || id === '16' || id === '016') {
            switch (target) {
                case 1:
                    targetTop += 827;
                    break;
                case 2:
                    targetTop += 765;
                    break;
                case 3:
                    targetTop += 651;
                    break;
                case 4:
                    targetTop += 589;
                    break;
                case 5:
                    targetTop += 505;
                    break;
                case 6:
                    targetTop += 443;
                    break;
                case 7:
                    targetTop += 362;
                    break;
                case 8:
                    targetTop += 297;
                    break;
                case 9:
                    targetTop += 243;
                    break;
                case 10:
                    targetTop += 129;
                    break;
                default:
                    return;
            }
        } else {
            return;
        }

        $("#site-0" + id).animate({top: targetTop + 'px'}, 1000);
    }

    //RGV车辆各站点距离数据
    let sitePosition = {
        101: '68px',
        102: '117px',
        122: '183px',
        104: '183px',
        105: '232px',
        118: '297px',
        107: '297px',
        108: '345px',
        119: '355px',
        110: '410px',
        120: '421px',
        111: '459px',
        121: '479px',
        113: '524px',
        123: '556px',
        114: '572px',
        1142: '600px',
        116: '639px',
        117: '687px',
    }

    //RGV车移动动画
    function moveSite(siteId, staNo) {
        $(siteId).animate({top: sitePosition[staNo]}, 1000);
    }

    // moveSite("#site-1", 117);//测试移动方法,可删除

    // Rgv实时数据获取
    function carAnimate2() {
        // console.log("1=============1")
        $.ajax({
            url: baseUrl + "/rgv/console/rgv/site/data",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    var rgvMap = res.data;
                    for (var i = 0; i < rgvMap.length; i++) {
                        moveSite("#site-"+rgvMap[i].id, rgvMap[i].title);
                    }
                } else {
                    console.log(res.msg);
                }
            }
        });
    }

</script>

 src/main/webapp/views/console21.html

New file
@@ -0,0 +1,799 @@
<!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>
    <!--地图json-->
    <script src="../static/js/console.map21.js"></script>
    <script src="../static/js/console.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" style="width: 1920px;height:1080px;overflow: scroll">

        </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 id="line-total" class="line-ss"></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();
    // carAnimate();
    carAnimate2();
    // 实时访问
    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 {
                    alert(res.msg);
                    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);
                        console.log(sites[i].siteId)
                        siteEl.attr("class", "site " + sites[i].siteStatus);
                        // siteEl.attr("class", "site site-auto-run-id");
                        if (sites[i].workNo != null && sites[i].workNo > 0) {
                            siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]");
                        } else {
                            siteEl.html(sites[i].siteId);
                        }

                        if (sites[i].siteId === '16' || sites[i].siteId === '016') {

                            carAnimate(Number(sites[i].siteId), 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 = 0;//($('.item').eq(0).width() + 13) / 2;

                        if (crns[i].bay < 0 || crns[i].bay === -2) {
                            crns[i].bay = 1
                        }
                        // crnEl.animate({left: (crns[i].bay * unit) + 'px'}, 1000);
                        // crns[i].bay = 15;

                        var offSet = 0;
                        unit = 60;
                        offSet = 325;


                        if(crns[i].bay === 1){
                            crnEl.animate({left: offSet + 'px'}, 1000);
                        } else {
                            crnEl.animate({left: (offSet - unit + (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) {
        // debugger
        var targetTop = 0;
        if (id === 16 || id === '16' || id === '016') {
            switch (target) {
                case 1:
                    targetTop += 827;
                    break;
                case 2:
                    targetTop += 765;
                    break;
                case 3:
                    targetTop += 651;
                    break;
                case 4:
                    targetTop += 589;
                    break;
                case 5:
                    targetTop += 505;
                    break;
                case 6:
                    targetTop += 443;
                    break;
                case 7:
                    targetTop += 362;
                    break;
                case 8:
                    targetTop += 297;
                    break;
                case 9:
                    targetTop += 243;
                    break;
                case 10:
                    targetTop += 129;
                    break;
                default:
                    return;
            }
        } else {
            return;
        }

        $("#site-0" + id).animate({top: targetTop + 'px'}, 1000);
    }

    //RGV车辆各站点距离数据
    let sitePosition = {
        101: '68px',
        102: '117px',
        122: '183px',
        104: '183px',
        105: '232px',
        118: '297px',
        107: '297px',
        108: '345px',
        119: '355px',
        110: '410px',
        120: '421px',
        111: '459px',
        121: '479px',
        113: '524px',
        123: '556px',
        114: '572px',
        1142: '600px',
        116: '639px',
        117: '687px',
    }

    //RGV车移动动画
    function moveSite(siteId, staNo) {
        $(siteId).animate({top: sitePosition[staNo]}, 1000);
    }

    // moveSite("#site-1", 117);//测试移动方法,可删除

    // Rgv实时数据获取
    function carAnimate2() {
        // console.log("1=============1")
        $.ajax({
            url: baseUrl + "/rgv/console/rgv/site/data",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    var rgvMap = res.data;
                    for (var i = 0; i < rgvMap.length; i++) {
                        moveSite("#site-"+rgvMap[i].id, rgvMap[i].title);
                    }
                } else {
                    console.log(res.msg);
                }
            }
        });
    }

</script>

 src/main/webapp/views/console22.html

New file
@@ -0,0 +1,799 @@
<!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>
    <!--地图json-->
    <script src="../static/js/console.map22.js"></script>
    <script src="../static/js/console.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" style="width: 1920px;height:1080px;overflow: scroll">

        </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 id="line-total" class="line-ss"></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();
    // carAnimate();
    carAnimate2();
    // 实时访问
    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 {
                    alert(res.msg);
                    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);
                        console.log(sites[i].siteId)
                        siteEl.attr("class", "site " + sites[i].siteStatus);
                        // siteEl.attr("class", "site site-auto-run-id");
                        if (sites[i].workNo != null && sites[i].workNo > 0) {
                            siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]");
                        } else {
                            siteEl.html(sites[i].siteId);
                        }

                        if (sites[i].siteId === '16' || sites[i].siteId === '016') {

                            carAnimate(Number(sites[i].siteId), 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 = 0;//($('.item').eq(0).width() + 13) / 2;

                        if (crns[i].bay < 0 || crns[i].bay === -2) {
                            crns[i].bay = 1
                        }
                        // crnEl.animate({left: (crns[i].bay * unit) + 'px'}, 1000);
                        // crns[i].bay = 15;

                        var offSet = 0;
                        unit = 60;
                        offSet = 325;


                        if(crns[i].bay === 1){
                            crnEl.animate({left: offSet + 'px'}, 1000);
                        } else {
                            crnEl.animate({left: (offSet - unit + (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) {
        // debugger
        var targetTop = 0;
        if (id === 16 || id === '16' || id === '016') {
            switch (target) {
                case 1:
                    targetTop += 827;
                    break;
                case 2:
                    targetTop += 765;
                    break;
                case 3:
                    targetTop += 651;
                    break;
                case 4:
                    targetTop += 589;
                    break;
                case 5:
                    targetTop += 505;
                    break;
                case 6:
                    targetTop += 443;
                    break;
                case 7:
                    targetTop += 362;
                    break;
                case 8:
                    targetTop += 297;
                    break;
                case 9:
                    targetTop += 243;
                    break;
                case 10:
                    targetTop += 129;
                    break;
                default:
                    return;
            }
        } else {
            return;
        }

        $("#site-0" + id).animate({top: targetTop + 'px'}, 1000);
    }

    //RGV车辆各站点距离数据
    let sitePosition = {
        101: '68px',
        102: '117px',
        122: '183px',
        104: '183px',
        105: '232px',
        118: '297px',
        107: '297px',
        108: '345px',
        119: '355px',
        110: '410px',
        120: '421px',
        111: '459px',
        121: '479px',
        113: '524px',
        123: '556px',
        114: '572px',
        1142: '600px',
        116: '639px',
        117: '687px',
    }

    //RGV车移动动画
    function moveSite(siteId, staNo) {
        $(siteId).animate({top: sitePosition[staNo]}, 1000);
    }

    // moveSite("#site-1", 117);//测试移动方法,可删除

    // Rgv实时数据获取
    function carAnimate2() {
        // console.log("1=============1")
        $.ajax({
            url: baseUrl + "/rgv/console/rgv/site/data",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    var rgvMap = res.data;
                    for (var i = 0; i < rgvMap.length; i++) {
                        moveSite("#site-"+rgvMap[i].id, rgvMap[i].title);
                    }
                } else {
                    console.log(res.msg);
                }
            }
        });
    }

</script>

 src/main/webapp/views/index.html

@@ -14,8 +14,10 @@
<div class="sidebar">
    <div class="nav">
        <ul class="cl-effect-4">
            <li><a id="console" onclick="nav(this.id)" class="nav-select" href="#">一楼</a></li>
            <li><a id="console2" onclick="nav(this.id)" class="nav-select" href="#">二楼</a></li>
            <li><a id="console11" onclick="nav(this.id)" class="nav-select" href="#">一楼一区</a></li>
            <li><a id="console12" onclick="nav(this.id)" class="nav-select" href="#">一楼二区</a></li>
            <li><a id="console21" onclick="nav(this.id)" class="nav-select" href="#">二楼一区</a></li>
            <li><a id="console22" onclick="nav(this.id)" class="nav-select" href="#">二楼二区</a></li>
            <li><a id="pipeline" onclick="nav(this.id)" class="nav-unselect" href="#">输送设备</a></li>
            <li><a id="crn" onclick="nav(this.id)" class="nav-unselect" href="#">堆垛机</a></li>
            <li><a id="rgv" onclick="nav(this.id)" class="nav-unselect" href="#">RGV</a></li>