From d22aa0b02f43299d557208714c820579d4cee43d Mon Sep 17 00:00:00 2001
From: whycq <whycq>
Date: 星期一, 23 五月 2022 15:59:24 +0800
Subject: [PATCH] # ycq

---
 src/main/webapp/views/render/render.html |   18 +
 src/main/webapp/views/render/render.js   |  706 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/main/webapp/views/render/render.css  |   45 +++
 3 files changed, 769 insertions(+), 0 deletions(-)

diff --git a/src/main/webapp/views/render/render.css b/src/main/webapp/views/render/render.css
new file mode 100644
index 0000000..ba5d83e
--- /dev/null
+++ b/src/main/webapp/views/render/render.css
@@ -0,0 +1,45 @@
+* {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+}
+#main {
+    height: 100%;
+    width: 100%;
+    background-color: rgb(108,167,168);
+}
+.mapName {
+    overflow: hidden;
+    width: 20%;
+    height: 10%;
+    text-align: center;
+    line-height: 100px;
+    font-size: 40px;
+    color: white;
+}
+.rack {
+    position: absolute;
+    display: inline-block;
+}
+.racks {
+    border: 1px solid rgb(194,76,65);
+    color: rgb(194,76,65);
+}
+.stn {
+    text-align: center;
+    background-color: rgb(120,255,129);
+    position: absolute;
+}
+.crn {
+    position: absolute;
+    display: inline-block;
+    background-color: #00ff90;
+    z-index: 999;
+}
+.track {
+    position: absolute;
+    display: inline-block;
+    background-color: #000000;
+}
\ No newline at end of file
diff --git a/src/main/webapp/views/render/render.html b/src/main/webapp/views/render/render.html
new file mode 100644
index 0000000..81abdc5
--- /dev/null
+++ b/src/main/webapp/views/render/render.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>鑷姩浠撳簱wcs绯荤粺</title>
+    <link rel="stylesheet" href="./render.css">
+    <script src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
+    <script src="./render.js"></script>
+
+</head>
+<body>
+    <div id="main"></div>
+
+
+</body>
+
+</html>
+<script>getMap();</script>
\ No newline at end of file
diff --git a/src/main/webapp/views/render/render.js b/src/main/webapp/views/render/render.js
new file mode 100644
index 0000000..1c65f12
--- /dev/null
+++ b/src/main/webapp/views/render/render.js
@@ -0,0 +1,706 @@
+data = {
+    "mapName": "鍏嬪姵鏂帥鑿瞁CS",
+    "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)
+}

--
Gitblit v1.9.1