data = {
    "mapName": "克劳斯玛菲WCS",
    "rackCount": 12,
    "crnCount": 3,
    "stbCount": 36,
    "hpPosition": 1,
    "minBayNo": 2,
    "floors": 1,
    "racks": [
    {
        "type": "rack",
        "id": "rack12",
        "top": 646,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack11",
        "top": 613,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack10",
        "top": 516,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack9",
        "top": 483,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack8",
        "top": 451,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack7",
        "top": 418,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack6",
        "top": 323,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack5",
        "top": 290,
        "left": 324,
        "width": 887,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 52
    },
    {
        "type": "rack",
        "id": "rack3",
        "top": 225,
        "left": 188,
        "width": 1023,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 60
    },
    {
        "type": "rack",
        "id": "rack1",
        "top": 97,
        "left": 188,
        "width": 1023,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 60
    },
    {
        "type": "rack",
        "id": "rack4",
        "top": 257,
        "left": 188,
        "width": 1023,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 60
    },
    {
        "type": "rack",
        "id": "rack2",
        "top": 129,
        "left": 188,
        "width": 1023,
        "height": 30,
        "minBayNo": 2,
        "maxBayNo": 60
    }
],
    "rackDescs": [
    {
        "type": "rackDescs",
        "id": "lb_desc12",
        "text": "#12",
        "top": 646,
        "left": 260,
        "width": 47,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc11",
        "text": "#11",
        "top": 618,
        "left": 260,
        "width": 44,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc10",
        "text": "#10",
        "top": 516,
        "left": 257,
        "width": 49,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc9",
        "text": "#9",
        "top": 488,
        "left": 257,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc8",
        "text": "#8",
        "top": 449,
        "left": 260,
        "width": 39,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc7",
        "text": "#7",
        "top": 421,
        "left": 260,
        "width": 37,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc6",
        "text": "#6",
        "top": 327,
        "left": 260,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc5",
        "text": "#5",
        "top": 291,
        "left": 261,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc4",
        "text": "#4",
        "top": 253,
        "left": 145,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc3",
        "text": "#3",
        "top": 225,
        "left": 145,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc2",
        "text": "#2",
        "top": 128,
        "left": 145,
        "width": 38,
        "height": 27
    },
    {
        "type": "rackDescs",
        "id": "lb_desc1",
        "text": "#1",
        "top": 100,
        "left": 145,
        "width": 35,
        "height": 27
    }
],
    "crns": [
    {
        "type": "crane",
        "id": "lb_crn1",
        "text": "1",
        "top": 184,
        "left": 777,
        "width": 93,
        "height": 22
    },
    {
        "type": "crane",
        "id": "lb_crn2",
        "text": "2",
        "top": 378,
        "left": 777,
        "width": 93,
        "height": 22
    },
    {
        "type": "crane",
        "id": "lb_crn3",
        "text": "3",
        "top": 572,
        "left": 777,
        "width": 93,
        "height": 22
    },
    {
        "type": "track",
        "id": "lb_track2",
        "text": "",
        "top": 387,
        "left": 298,
        "width": 1050,
        "height": 2
    },
    {
        "type": "track",
        "id": "lb_track3",
        "text": "",
        "top": 582,
        "left": 298,
        "width": 1050,
        "height": 2
    },
    {
        "type": "track",
        "id": "lb_track1",
        "text": "",
        "top": 195,
        "left": 298,
        "width": 1050,
        "height": 2
    }
],
    "stns": [
    {
        "type": "stn",
        "id": "stn132",
        "text": "132",
        "top": 547,
        "left": 1399,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "stn126",
        "text": "126",
        "top": 450,
        "left": 1461,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "stn125",
        "text": "125",
        "top": 450,
        "left": 1399,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "stn119",
        "text": "119",
        "top": 353,
        "left": 1461,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "stn118",
        "text": "118",
        "top": 353,
        "left": 1399,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "stn136",
        "text": "136",
        "top": 611,
        "left": 1461,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn135",
        "text": "135",
        "top": 611,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn134",
        "text": "134",
        "top": 611,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn133",
        "text": "133",
        "top": 611,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn130",
        "text": "130",
        "top": 515,
        "left": 1461,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn129",
        "text": "129",
        "top": 515,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn128",
        "text": "128",
        "top": 515,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn127",
        "text": "127",
        "top": 515,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn131",
        "text": "131",
        "top": 515,
        "left": 1522,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn123",
        "text": "123",
        "top": 418,
        "left": 1461,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn122",
        "text": "122",
        "top": 418,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn121",
        "text": "121",
        "top": 418,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn120",
        "text": "120",
        "top": 418,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn124",
        "text": "124",
        "top": 418,
        "left": 1522,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn112",
        "text": "112",
        "top": 256,
        "left": 1461,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "stn111",
        "text": "111",
        "top": 256,
        "left": 1399,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "stn116",
        "text": "116",
        "top": 321,
        "left": 1461,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn115",
        "text": "115",
        "top": 321,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn114",
        "text": "114",
        "top": 321,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn113",
        "text": "113",
        "top": 321,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn117",
        "text": "117",
        "top": 321,
        "left": 1522,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn105",
        "text": "105",
        "top": 159,
        "left": 1399,
        "width": 60,
        "height": 63
    },
    {
        "type": "stn",
        "id": "stn109",
        "text": "109",
        "top": 224,
        "left": 1461,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn108",
        "text": "108",
        "top": 224,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn107",
        "text": "107",
        "top": 224,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn106",
        "text": "106",
        "top": 224,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn104",
        "text": "104",
        "top": 128,
        "left": 1461,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn103",
        "text": "103",
        "top": 128,
        "left": 1399,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn102",
        "text": "102",
        "top": 128,
        "left": 1337,
        "width": 60,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn101",
        "text": "101",
        "top": 128,
        "left": 1215,
        "width": 120,
        "height": 30
    },
    {
        "type": "stn",
        "id": "stn110",
        "text": "110",
        "top": 224,
        "left": 1522,
        "width": 60,
        "height": 30
    }
]
}

function getMap() {
    let mapName = "<div class='mapName'>" + data.mapName + "</div>"
    let rack = '', racks = '', rackDesc = '',
        rackDescs = '', crn = '', crns = '',track = '',
        tracks = '', stn = '', stns = '';
    let rackss = data.racks,
        rackDescss = data.rackDescs,
        crnss = data.crns,
        stnss = data.stns;
    // 货架
    for (let i = 0;i < rackss.length;i++) {
        let btn =''
        let btns = ''
        var maxBayNo = rackss[i].maxBayNo
        var minBayNo = rackss[i].minBayNo
        let bLen = maxBayNo / minBayNo
        if (data.hpPosition == 1) {
            for (let j = bLen;j > 0; j--) {
                btn = "<button class='racks' style='width: 34px'>" + maxBayNo + "</button>"
                btns = btns + btn
                maxBayNo = maxBayNo - minBayNo;
            }
        }else {
            for (let j = 0;j < bLen; j++) {
                btn = "<button class='racks' style='width: 30px'>" + minBayNo + "</button>"
                btns = btns + btn
                minBayNo = minBayNo + minBayNo;
            }
        }

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