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