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