From 1a20af84298aff8bc36f582544866c166ca761c7 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期二, 22 十月 2024 08:10:26 +0800
Subject: [PATCH] #
---
src/main/webapp/views/wcsmap/mapData.js | 12
src/main/webapp/views/wcsmap/index.html | 43 +++
src/main/webapp/views/wcsmap/wcsmap.html | 18
src/main/webapp/views/wcsmap/wcsmap2.html | 478 ++++++++++++++++++++++++++++++++++++
src/main/webapp/views/wcsmap/mapData2.js | 204 +++++++++++++++
5 files changed, 741 insertions(+), 14 deletions(-)
diff --git a/src/main/webapp/views/wcsmap/index.html b/src/main/webapp/views/wcsmap/index.html
new file mode 100644
index 0000000..0a0fb10
--- /dev/null
+++ b/src/main/webapp/views/wcsmap/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>wcs鐩戞帶鍥�</title>
+ <script src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
+ <style>
+ * {
+ margin: 0;
+ overflow: hidden;
+ }
+ html,body {
+ height: 100%;
+ }
+ #content {
+ width: 100%;
+ height: 100%;
+ border: none
+ }
+ </style>
+</head>
+<body style="background: #1f3366" >
+ <div
+ style="position: absolute;top: 80px;right: 50px;background-color: #fff;height: 30px;width: 80px;text-align: center;line-height: 30px;border-radius: 4px;">
+ <div id="floorBtn" onclick="changFloor()">1妤�</div>
+ </div>
+ <iframe style="width: 100%" id="content" src="wcsmap.html"></iframe>
+</body>
+</html>
+<script>
+ function changFloor() {
+ var btnText = document.getElementById('floorBtn')
+ if (btnText.textContent == '1妤�') {
+ btnText.textContent = '2妤�'
+ $('#content').attr("src", 'wcsmap2.html');
+ } else {
+ btnText.textContent = '1妤�'
+ $('#content').attr("src", 'wcsmap.html');
+ }
+
+
+ }
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/views/wcsmap/mapData.js b/src/main/webapp/views/wcsmap/mapData.js
index 2adabe7..277c4f8 100644
--- a/src/main/webapp/views/wcsmap/mapData.js
+++ b/src/main/webapp/views/wcsmap/mapData.js
@@ -367,11 +367,11 @@
{ "id": 2, "title": "2鎺�", "unitX": 8, "unitY": 6, "anfme": 44, "x": 776, "y": 526 }
],
"shelf2": [
- { "id": 1, "title": "1鎺�", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 328 },
- { "id": 2, "title": "2鎺�", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 356 },
- { "id": 2, "title": "2鎺�", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 366 },
- { "id": 1, "title": "1鎺�", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 394 },
- { "id": 2, "title": "2鎺�", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 404 },
- { "id": 2, "title": "2鎺�", "unitX": 11, "unitY": 6, "anfme": 84, "x": 170, "y": 431 }
+ { "id": 1, "title": "1鎺�", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 328 },
+ { "id": 2, "title": "2鎺�", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 356 },
+ { "id": 2, "title": "2鎺�", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 366 },
+ { "id": 1, "title": "1鎺�", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 394 },
+ { "id": 2, "title": "2鎺�", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 404 },
+ { "id": 2, "title": "2鎺�", "unitX": 10, "unitY": 6, "anfme": 84, "x": 254, "y": 431 }
]
}
\ No newline at end of file
diff --git a/src/main/webapp/views/wcsmap/mapData2.js b/src/main/webapp/views/wcsmap/mapData2.js
new file mode 100644
index 0000000..9b030c9
--- /dev/null
+++ b/src/main/webapp/views/wcsmap/mapData2.js
@@ -0,0 +1,204 @@
+var mapData = {
+ "plant": [
+ { "title": "搴撳瓨鍖�", "width": "1340", "height": "600", "background": "0x02427f", "x": 20, "y": 20 ,"titleX": 800,"titleY": 50},
+ { "title": "纭寲鍖�", "width": "1340", "height": "360", "background": "0x02427f", "x": 20, "y": 700 ,"titleX": 800,"titleY": 730},
+ { "title": "鍏朵粬", "width": "470", "height": "360", "background": "0x02427f", "x": 1430, "y": 260 ,"titleX": 1700,"titleY": 280}
+ ],
+ "legend" : [
+ { "title": "鑷姩+鏈夌墿+鏈塈D", "width": "40", "height": "20", "background": "0xFC3030", "x": 1460, "y": 700 ,"titleX": 1520,"titleY": 700},
+ { "title": "鑷姩+鏈夌墿", "width": "40", "height": "20", "background": "0xFF51F6", "x": 1460, "y": 730 ,"titleX": 1520,"titleY": 730},
+ { "title": "鑷姩+ID", "width": "40", "height": "20", "background": "0xC4C400", "x": 1460, "y": 760 ,"titleX": 1520,"titleY": 760},
+ { "title": "鑷姩", "width": "40", "height": "20", "background": "0x78FF81", "x": 1460, "y": 790 ,"titleX": 1520,"titleY": 790},
+ { "title": "闈炶嚜鍔�", "width": "40", "height": "20", "background": "0xB8B8B8", "x": 1460, "y": 820 ,"titleX": 1520,"titleY": 820},
+ ],
+ "track": [
+ // {"id": "1", "unitX": 60, "unitY": 3, "anfme": 2, "background": "0x000000", "x": 125, "y": 737},
+ // {"id": "2", "unitX": 60, "unitY": 3, "anfme": 2, "background": "0x000000", "x": 227, "y": 737},
+ // {"id": "3", "unitX": 60, "unitY": 3, "anfme": 2, "background": "0x000000", "x": 125, "y": 867},
+ // {"id": "4", "unitX": 60, "unitY": 3, "anfme": 2, "background": "0x000000", "x": 227, "y": 867},
+
+ ],
+ "jar": [
+ // { "id": "1", "width": 15, "height": 110, "background": "0xa6a6a6", "x": 126, "y": 750 },
+ // { "id": "1", "width": 15, "height": 110, "background": "0xa6a6a6", "x": 169, "y": 750 },
+ // { "id": "1", "width": 15, "height": 110, "background": "0xa6a6a6", "x": 228, "y": 750 },
+ // { "id": "1", "width": 15, "height": 110, "background": "0xa6a6a6", "x": 270, "y": 750 },
+ // { "id": "1", "width": 15, "height": 108, "background": "0xea9a2b", "x": 169, "y": 881 },
+ // { "id": "1", "width": 15, "height": 108, "background": "0xea9a2b", "x": 270, "y": 881 },
+ ],
+ "conveyor": [
+ { "id": "1", "title": "415", "width": 30, "height": 10, "background": "0xb8db7c", "x": 222, "y": 331 },
+ { "id": "1", "title": "413", "width": 30, "height": 10, "background": "0xb8db7c", "x": 222, "y": 369 },
+ { "id": "1", "title": "407", "width": 30, "height": 10, "background": "0xb8db7c", "x": 222, "y": 392 },
+ { "id": "1", "title": "405", "width": 30, "height": 10, "background": "0xb8db7c", "x": 222, "y": 424 },
+
+ { "id": "1", "title": "416", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 331 },
+ { "id": "1", "title": "412", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 369 },
+ { "id": "1", "title": "408", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 392 },
+ { "id": "1", "title": "404", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 424 },
+ { "id": "1", "title": "400", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 456 },
+ { "id": "1", "title": "515", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 478 },
+ { "id": "1", "title": "511", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 500 },
+ { "id": "1", "title": "509", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 522 },
+
+ { "id": "1", "title": "494", "width": 30, "height": 10, "background": "0xb8db7c", "x": 170, "y": 258 },
+ { "id": "1", "title": "493", "width": 10, "height": 18, "background": "0xb8db7c", "x": 180, "y": 269 },
+ { "id": "1", "title": "492", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 288 },
+ { "id": "1", "title": "419", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 299 },
+ { "id": "1", "title": "418", "width": 10, "height": 20, "background": "0xb8db7c", "x": 180, "y": 310 },
+ { "id": "1", "title": "417", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 331 },
+ { "id": "1", "title": "414", "width": 10, "height": 26, "background": "0xb8db7c", "x": 180, "y": 342 },
+ { "id": "1", "title": "411", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 369 },
+ { "id": "1", "title": "410", "width": 10, "height": 11, "background": "0xb8db7c", "x": 180, "y": 380 },
+ { "id": "1", "title": "409", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 392 },
+ { "id": "1", "title": "406", "width": 10, "height": 20, "background": "0xb8db7c", "x": 180, "y": 403 },
+ { "id": "1", "title": "403", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 424 },
+ { "id": "1", "title": "402", "width": 10, "height": 20, "background": "0xb8db7c", "x": 180, "y": 435 },
+ { "id": "1", "title": "401", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 456 },
+ { "id": "1", "title": "516", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 467 },
+ { "id": "1", "title": "514", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 478 },
+ { "id": "1", "title": "513", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 489 },
+ { "id": "1", "title": "512", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 500 },
+ { "id": "1", "title": "510", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 511 },
+ { "id": "1", "title": "508", "width": 10, "height": 10, "background": "0xb8db7c", "x": 180, "y": 522 },
+
+ { "id": "1", "title": "491", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 288 },
+ { "id": "1", "title": "490", "width": 15, "height": 10, "background": "0xb8db7c", "x": 222, "y": 288 },
+ { "id": "1", "title": "489", "width": 14, "height": 10, "background": "0xb8db7c", "x": 238, "y": 288 },
+ { "id": "1", "title": "488", "width": 37, "height": 10, "background": "0xb8db7c", "x": 253, "y": 288 },
+ { "id": "1", "title": "487", "width": 37, "height": 10, "background": "0xb8db7c", "x": 291, "y": 288 },
+ { "id": "1", "title": "486", "width": 18, "height": 10, "background": "0xb8db7c", "x": 329, "y": 288 },
+ { "id": "1", "title": "485", "width": 18, "height": 10, "background": "0xb8db7c", "x": 348, "y": 288 },
+ { "id": "1", "title": "484", "width": 37, "height": 10, "background": "0xb8db7c", "x": 367, "y": 288 },
+ { "id": "1", "title": "483", "width": 37, "height": 10, "background": "0xb8db7c", "x": 405, "y": 288 },
+ { "id": "1", "title": "482", "width": 37, "height": 10, "background": "0xb8db7c", "x": 443, "y": 288 },
+ { "id": "1", "title": "481", "width": 37, "height": 10, "background": "0xb8db7c", "x": 481, "y": 288 },
+ { "id": "1", "title": "480", "width": 18, "height": 10, "background": "0xb8db7c", "x": 519, "y": 288 },
+ { "id": "1", "title": "479", "width": 18, "height": 10, "background": "0xb8db7c", "x": 538, "y": 288 },
+ { "id": "1", "title": "478", "width": 37, "height": 10, "background": "0xb8db7c", "x": 557, "y": 288 },
+ { "id": "1", "title": "477", "width": 37, "height": 10, "background": "0xb8db7c", "x": 595, "y": 288 },
+ { "id": "1", "title": "476", "width": 37, "height": 10, "background": "0xb8db7c", "x": 633, "y": 288 },
+ { "id": "1", "title": "475", "width": 18, "height": 10, "background": "0xb8db7c", "x": 671, "y": 288 },
+ { "id": "1", "title": "474", "width": 18, "height": 10, "background": "0xb8db7c", "x": 690, "y": 288 },
+ { "id": "1", "title": "473", "width": 37, "height": 10, "background": "0xb8db7c", "x": 709, "y": 288 },
+ { "id": "1", "title": "472", "width": 37, "height": 10, "background": "0xb8db7c", "x": 747, "y": 288 },
+ { "id": "1", "title": "471", "width": 37, "height": 10, "background": "0xb8db7c", "x": 785, "y": 288 },
+ { "id": "1", "title": "470", "width": 18, "height": 10, "background": "0xb8db7c", "x": 823, "y": 288 },
+ { "id": "1", "title": "469", "width": 18, "height": 10, "background": "0xb8db7c", "x": 842, "y": 288 },
+ { "id": "1", "title": "468", "width": 37, "height": 10, "background": "0xb8db7c", "x": 861, "y": 288 },
+ { "id": "1", "title": "467", "width": 37, "height": 10, "background": "0xb8db7c", "x": 899, "y": 288 },
+ { "id": "1", "title": "466", "width": 18, "height": 10, "background": "0xb8db7c", "x": 937, "y": 288 },
+ { "id": "1", "title": "465", "width": 18, "height": 10, "background": "0xb8db7c", "x": 956, "y": 288 },
+ { "id": "1", "title": "464", "width": 37, "height": 10, "background": "0xb8db7c", "x": 975, "y": 288 },
+ { "id": "1", "title": "463", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1013, "y": 288 },
+ { "id": "1", "title": "462", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1051, "y": 288 },
+ { "id": "1", "title": "461", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1089, "y": 277 },
+ { "id": "1", "title": "460", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1108, "y": 277 },
+ { "id": "1", "title": "459", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1127, "y": 277 },
+ { "id": "1", "title": "458", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1089, "y": 288 },
+ { "id": "1", "title": "457", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1108, "y": 288 },
+ { "id": "1", "title": "456", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1127, "y": 288 },
+ { "id": "1", "title": "455", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1165, "y": 288 },
+ { "id": "1", "title": "454", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1203, "y": 277 },
+ { "id": "1", "title": "453", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1222, "y": 277 },
+ { "id": "1", "title": "452", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1241, "y": 277 },
+ { "id": "1", "title": "451", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1203, "y": 288 },
+ { "id": "1", "title": "450", "width": 18, "height": 10, "background": "0xb8db7c", "x": 1222, "y": 288 },
+ { "id": "1", "title": "449", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1241, "y": 288 },
+
+ { "id": "1", "title": "420", "width": 30, "height": 10, "background": "0xb8db7c", "x": 191, "y": 299 },
+ { "id": "1", "title": "421", "width": 30, "height": 10, "background": "0xb8db7c", "x": 222, "y": 299 },
+ { "id": "1", "title": "422", "width": 37, "height": 10, "background": "0xb8db7c", "x": 253, "y": 299 },
+ { "id": "1", "title": "423", "width": 37, "height": 10, "background": "0xb8db7c", "x": 291, "y": 299 },
+ { "id": "1", "title": "424", "width": 37, "height": 10, "background": "0xb8db7c", "x": 329, "y": 299 },
+ { "id": "1", "title": "425", "width": 37, "height": 10, "background": "0xb8db7c", "x": 367, "y": 299 },
+ { "id": "1", "title": "426", "width": 37, "height": 10, "background": "0xb8db7c", "x": 405, "y": 299 },
+ { "id": "1", "title": "427", "width": 37, "height": 10, "background": "0xb8db7c", "x": 443, "y": 299 },
+ { "id": "1", "title": "428", "width": 37, "height": 10, "background": "0xb8db7c", "x": 481, "y": 299 },
+ { "id": "1", "title": "429", "width": 37, "height": 10, "background": "0xb8db7c", "x": 519, "y": 299 },
+ { "id": "1", "title": "430", "width": 37, "height": 10, "background": "0xb8db7c", "x": 557, "y": 299 },
+ { "id": "1", "title": "431", "width": 37, "height": 10, "background": "0xb8db7c", "x": 595, "y": 299 },
+ { "id": "1", "title": "432", "width": 37, "height": 10, "background": "0xb8db7c", "x": 633, "y": 299 },
+ { "id": "1", "title": "433", "width": 37, "height": 10, "background": "0xb8db7c", "x": 671, "y": 299 },
+ { "id": "1", "title": "434", "width": 37, "height": 10, "background": "0xb8db7c", "x": 709, "y": 299 },
+ { "id": "1", "title": "435", "width": 37, "height": 10, "background": "0xb8db7c", "x": 747, "y": 299 },
+ { "id": "1", "title": "436", "width": 37, "height": 10, "background": "0xb8db7c", "x": 785, "y": 299 },
+ { "id": "1", "title": "437", "width": 37, "height": 10, "background": "0xb8db7c", "x": 823, "y": 299 },
+ { "id": "1", "title": "438", "width": 37, "height": 10, "background": "0xb8db7c", "x": 861, "y": 299 },
+ { "id": "1", "title": "439", "width": 37, "height": 10, "background": "0xb8db7c", "x": 899, "y": 299 },
+ { "id": "1", "title": "440", "width": 37, "height": 10, "background": "0xb8db7c", "x": 937, "y": 299 },
+ { "id": "1", "title": "441", "width": 37, "height": 10, "background": "0xb8db7c", "x": 975, "y": 299 },
+ { "id": "1", "title": "442", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1013, "y": 299 },
+ { "id": "1", "title": "443", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1051, "y": 299 },
+ { "id": "1", "title": "444", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1089, "y": 299 },
+ { "id": "1", "title": "445", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1127, "y": 299 },
+ { "id": "1", "title": "446", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1165, "y": 299 },
+ { "id": "1", "title": "447", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1203, "y": 299 },
+ { "id": "1", "title": "448", "width": 37, "height": 10, "background": "0xb8db7c", "x": 1241, "y": 299 },
+
+ { "id": "1", "title": "495", "width": 30, "height": 10, "background": "0xb8db7c", "x": 139, "y": 258 },
+ { "id": "1", "title": "496", "width": 10, "height": 30, "background": "0xb8db7c", "x": 149, "y": 269 },
+ { "id": "1", "title": "497", "width": 10, "height": 30, "background": "0xb8db7c", "x": 149, "y": 300 },
+ { "id": "1", "title": "498", "width": 30, "height": 10, "background": "0xb8db7c", "x": 149, "y": 331 },
+ { "id": "1", "title": "499", "width": 10, "height": 24, "background": "0xb8db7c", "x": 149, "y": 342 },
+ { "id": "1", "title": "500", "width": 10, "height": 24, "background": "0xb8db7c", "x": 149, "y": 367 },
+ { "id": "1", "title": "501", "width": 30, "height": 10, "background": "0xb8db7c", "x": 149, "y": 392 },
+ { "id": "1", "title": "502", "width": 10, "height": 25, "background": "0xb8db7c", "x": 149, "y": 403 },
+ { "id": "1", "title": "503", "width": 10, "height": 26, "background": "0xb8db7c", "x": 149, "y": 429 },
+ { "id": "1", "title": "504", "width": 30, "height": 10, "background": "0xb8db7c", "x": 149, "y": 456 },
+ { "id": "1", "title": "517", "width": 10, "height": 35, "background": "0xb8db7c", "x": 149, "y": 467 },
+ { "id": "1", "title": "518", "width": 10, "height": 18, "background": "0xb8db7c", "x": 149, "y": 503 },
+ { "id": "1", "title": "507", "width": 30, "height": 10, "background": "0xb8db7c", "x": 149, "y": 522 },
+
+ { "id": "1", "title": "519", "width": 20, "height": 10, "background": "0xb8db7c", "x": 128, "y": 456 },
+ { "id": "1", "title": "520", "width": 20, "height": 10, "background": "0xb8db7c", "x": 107, "y": 456 },
+ { "id": "1", "title": "521", "width": 20, "height": 10, "background": "0xb8db7c", "x": 86, "y": 456 },
+ { "id": "1", "title": "522", "width": 10, "height": 10, "background": "0xb8db7c", "x": 75, "y": 456 },
+ { "id": "1", "title": "523", "width": 10, "height": 54, "background": "0xb8db7c", "x": 75, "y": 467 },
+ { "id": "1", "title": "524", "width": 10, "height": 61, "background": "0xb8db7c", "x": 75, "y": 522 },
+ { "id": "1", "title": "506", "width": 20, "height": 10, "background": "0xb8db7c", "x": 128, "y": 522 },
+ { "id": "1", "title": "505", "width": 20, "height": 10, "background": "0xb8db7c", "x": 107, "y": 522 },
+ { "id": "1", "title": "549", "width": 10, "height": 50, "background": "0xb8db7c", "x": 107, "y": 533 },
+
+ { "id": "1", "title": "548", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 584 },
+ { "id": "1", "title": "547", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 625 },
+ { "id": "1", "title": "546", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 666 },
+ { "id": "1", "title": "545", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 707 },
+ { "id": "1", "title": "544", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 748 },
+ { "id": "1", "title": "543", "width": 10, "height": 40, "background": "0xb8db7c", "x": 107, "y": 789 },
+ { "id": "1", "title": "542", "width": 25, "height": 10, "background": "0xb8db7c", "x": 100, "y": 830 },
+ { "id": "1", "title": "542", "width": 10, "height": 20, "background": "0xb8db7c", "x": 107, "y": 841 },
+ { "id": "1", "title": "541", "width": 25, "height": 10, "background": "0xb8db7c", "x": 100, "y": 862 },
+ { "id": "1", "title": "540", "width": 10, "height": 20, "background": "0xb8db7c", "x": 107, "y": 873 },
+ { "id": "1", "title": "534", "width": 30, "height": 10, "background": "0xb8db7c", "x": 97, "y": 894 },
+
+ { "id": "1", "title": "525", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 584 },
+ { "id": "1", "title": "526", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 625 },
+ { "id": "1", "title": "527", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 666 },
+ { "id": "1", "title": "528", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 707 },
+ { "id": "1", "title": "529", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 748 },
+ { "id": "1", "title": "530", "width": 10, "height": 40, "background": "0xb8db7c", "x": 75, "y": 789 },
+ { "id": "1", "title": "531", "width": 32, "height": 10, "background": "0xb8db7c", "x": 67, "y": 830 },
+ { "id": "1", "title": "532", "width": 10, "height": 52, "background": "0xb8db7c", "x": 75, "y": 841 },
+ { "id": "1", "title": "533", "width": 31, "height": 10, "background": "0xb8db7c", "x": 65, "y": 894 },
+
+ { "id": "1", "title": "535", "width": 15, "height": 28, "background": "0xb8db7c", "x": 128, "y": 886 },
+ { "id": "1", "title": "536", "width": 31, "height": 10, "background": "0xb8db7c", "x": 144, "y": 894 },
+ { "id": "1", "title": "537", "width": 15, "height": 28, "background": "0xb8db7c", "x": 176, "y": 886 },
+ { "id": "1", "title": "538", "width": 31, "height": 10, "background": "0xb8db7c", "x": 192, "y": 894 },
+ { "id": "1", "title": "539", "width": 50, "height": 50, "background": "0xb8db7c", "x": 224, "y": 875 },
+
+ ],
+ "shelf2": [
+ { "id": 1, "title": "1鎺�", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 328 },
+ { "id": 2, "title": "2鎺�", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 338 },
+
+ { "id": 2, "title": "2鎺�", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 366 },
+ { "id": 1, "title": "1鎺�", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 376 },
+
+ { "id": 2, "title": "2鎺�", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 394 },
+
+ { "id": 2, "title": "2鎺�", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 421 },
+ { "id": 2, "title": "2鎺�", "unitX": 11.3, "unitY": 6, "anfme": 84, "x": 254, "y": 431 }
+ ]
+}
\ No newline at end of file
diff --git a/src/main/webapp/views/wcsmap/wcsmap.html b/src/main/webapp/views/wcsmap/wcsmap.html
index 16bc34e..d793959 100644
--- a/src/main/webapp/views/wcsmap/wcsmap.html
+++ b/src/main/webapp/views/wcsmap/wcsmap.html
@@ -39,6 +39,7 @@
style="position: absolute;top: 20px;right: 50px;background-color: #fff;height: 30px;width: 80px;text-align: center;line-height: 30px;border-radius: 4px;">
<div>FPS:{{mapFps}}</div>
</div>
+
</div>
</div>
</body>
@@ -53,15 +54,18 @@
el: '#app',
data: {
mapFps: 0,
+ floor: '1妤�',
sites: ['185', '186', '240', "250", "299"],
- conveyor: []
+ currMap: null,
+ conveyor: [],
+
},
created() {
mapData
},
mounted() {
- this.createMapData()
+ this.createMapData(mapData.conveyor)
this.createMap()
setInterval(() => {
@@ -70,9 +74,8 @@
},
methods: {
- createMapData() {
- this.conveyor = mapData.conveyor
- console.log(this.conveyor);
+ createMapData(conveyor) {
+ this.conveyor = conveyor
},
getSiteInfo() {
@@ -97,7 +100,7 @@
// }
if (site.siteStatus == 'site-auto-run-id') {
// 鑷姩+鏈夌墿+ID
- conve.background = 0xFC3030
+ // conve.background = 0xFC3030
} else if (site.siteStatus == 'site-auto-run') {
// 鑷姩+鏈夌墿
@@ -356,7 +359,7 @@
pixiApp.stage.addChild(text);
}
- for (let k of mapData.conveyor) {
+ for (let k of this.conveyor) {
let rectangle = new PIXI.Graphics();
rectangle.beginFill(k.background);
// rectangle.originColor = k.background;
@@ -370,7 +373,6 @@
rectangle.on('mouseover', onMouseOver)
function onMouseOver(event) {
rectangle.alpha = k.alpha ? k.alpha : 1
- console.log(event);
// 鍒涘缓鍐呭妗�
let tooltip = new PIXI.Graphics();
tooltip.beginFill(0xFFFFFF); // 鍐呭妗嗚儗鏅鑹�
diff --git a/src/main/webapp/views/wcsmap/wcsmap2.html b/src/main/webapp/views/wcsmap/wcsmap2.html
new file mode 100644
index 0000000..6b58b99
--- /dev/null
+++ b/src/main/webapp/views/wcsmap/wcsmap2.html
@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>wcs鐩戞帶鍥�</title>
+ <link rel="stylesheet" href="wcsmap.css">
+ <script type="text/javascript" src="mapData2.js"></script>
+ <script src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
+ <script src="pixijs.js"></script>
+ <script src="vue.min.js"></script>
+ <script src="../../static/js/common.js"></script>
+ <style>
+ .tooltip {
+ position: absolute;
+ display: block;
+ padding: 10px;
+ color: #fff;
+ background-color: #000;
+ border-radius: 5px;
+ left: 200px;
+ top: 200px;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="app">
+ <div id="pixiView">
+
+ </div>
+ <div style="position: absolute;top: 20px;left: 20px;font-size: 40px;color: white;">
+ <div>鑷姩浠撳簱WCS鐩戞帶鍥�</div>
+ <div style="font-size: 13px;">AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</div>
+ </div>
+ <!--杈撳嚭鎿嶄綔鍜孎PS-->
+ <div
+ style="position: absolute;top: 20px;right: 50px;background-color: #fff;height: 30px;width: 80px;text-align: center;line-height: 30px;border-radius: 4px;">
+ <div>FPS:{{mapFps}}</div>
+ </div>
+
+ </div>
+ </div>
+</body>
+
+</html>
+
+<script>
+ let pixiApp;
+ let objectsContainer;
+ var tooltip = document.getElementById('tooltip');
+ var app = new Vue({
+ el: '#app',
+ data: {
+ mapFps: 0,
+ floor: '1妤�',
+ sites: ['185', '186', '240', "250", "299"],
+ currMap: null,
+ conveyor: [],
+
+ },
+ created() {
+ mapData
+
+ },
+ mounted() {
+ this.createMapData(mapData.conveyor)
+ this.createMap()
+
+ setInterval(() => {
+ this.getSiteInfo()
+ }, 1000)
+
+ },
+ methods: {
+ createMapData(conveyor) {
+ this.conveyor = conveyor
+
+ },
+ getSiteInfo() {
+ let _this = this
+ $.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;
+ pixiApp.stage.children[0].children.forEach((item, index) => {
+ // updateColor(item, item.originColor);
+ for (let site of sites) {
+ if (site.siteId == item.title) {
+ var conve = _this.conveyor.find(con => con.title == site.siteId)
+ // var conve;
+ // for (let cc of this.conveyor) {
+ // if (cc.title == site.siteId) {
+ // conve = cc
+ // }
+ // }
+ if (site.siteStatus == 'site-auto-run-id') {
+ // 鑷姩+鏈夌墿+ID
+ // conve.background = 0xFC3030
+
+ } else if (site.siteStatus == 'site-auto-run') {
+ // 鑷姩+鏈夌墿
+ conve.background = 0xFF51F6
+
+ } else if (site.siteStatus == 'site-auto-id') {
+ // 鑷姩+ID
+ conve.background = 0xC4C400
+
+ } else if (site.siteStatus == 'site-auto') {
+ // 鑷姩
+ conve.background = 0x78FF81
+
+ } else if (site.siteStatus == 'site-unauto') {
+ // 闈炶嚜鍔�/鎵嬪姩
+ conve.background = 0xB8B8B8
+ }
+ _this.updateColor(item, conve)
+ }
+ }
+ // for (let k of this.sites) {
+ // if (item.title == k) {
+ // for (let con of this.conveyor) {
+ // if (k == con.title) {
+ // con.background = 0xFF0000
+ // this.updateColor(item, con)
+ // }
+ // }
+
+ // }
+ // }
+
+ });
+ } else if (res.code === 403) {
+ parent.location.href = baseUrl + "/login";
+ } else {
+ console.log(res.msg);
+ }
+ }
+ })
+
+
+
+ },
+ updateColor(rectangle, conveyor) {
+ rectangle.clear()
+ rectangle.beginFill(conveyor.background);
+ rectangle.drawRect(0, 0, conveyor.width, conveyor.height);
+ rectangle.endFill();
+ },
+ createMap() {
+ pixiApp = new PIXI.Application({
+ resizeTo: window,
+ backgroundColor: 0x1f3366
+ })
+ $("#pixiView").append(pixiApp.view)
+ // 鍔犺浇浣嶅浘璧勬簮
+ PIXI.Loader.shared.add('ChillRoundF', './image_font.xml.fnt').load();
+ function onAssetsLoaded() {
+ createText();
+ }
+ function createText() {
+ let text = new PIXI.BitmapText('123', {
+ fontName: 'ChillRoundF',
+ fontSize: 16,
+ tint: 0xffffff
+ })
+ text.x = 100;
+ text.y = 100;
+ pixiApp.stage.addChild(text)
+ }
+ //*******************鎷栧姩鐢诲竷*******************
+ let stageOriginalPos;
+ let mouseDownPoint;
+ let touchBlank = false;
+ let touchOver = false;
+ pixiApp.renderer.plugins.interaction.on(
+ 'pointerdown',
+ (event) => {
+ const globalPos = event.data.global;
+ // 璁板綍涓媠tage鍘熸潵鐨勪綅缃�
+ stageOriginalPos = [pixiApp.stage.position._x, pixiApp.stage.position._y];
+ // 璁板綍涓媘ouse down鐨勪綅缃�
+ mouseDownPoint = [globalPos.x, globalPos.y];
+ if (!event.target) {
+ // 鐐瑰埌浜嗙敾甯冪殑绌虹櫧浣嶇疆
+ touchBlank = true;
+ }
+ }
+ );
+
+
+ pixiApp.renderer.plugins.interaction.on(
+ 'pointermove',
+ (event) => {
+ const globalPos = event.data.global;
+
+ if (touchBlank) {
+ // 鎷栨嫿鐢诲竷
+ const dx = globalPos.x - mouseDownPoint[0];
+ const dy = globalPos.y - mouseDownPoint[1];
+ pixiApp.stage.position.set(
+ stageOriginalPos[0] + dx,
+ stageOriginalPos[1] + dy
+ );
+ }
+ }
+ );
+
+ pixiApp.renderer.plugins.interaction.on(
+ 'pointerup',
+ (event) => {
+ touchBlank = false;
+ }
+ );
+ // pixiApp.renderer.plugins.interaction.on(
+ // 'mouseover',
+ // (event) => {
+ // const globalPos = event.data.global;
+ // console.log(globalPos);
+ // }
+ // );
+
+ //*******************鎷栧姩鐢诲竷*******************
+
+ //*******************缂╂斁鐢诲竷*******************
+ pixiApp.view.addEventListener('wheel', (event) => {
+ event.stopPropagation();
+ event.preventDefault();
+ // 鍥犱负鐢诲竷鏄厖婊¤绐楃殑锛屾墍浠lientX绛変簬mouse point鍦╮enderer涓婄殑x鍧愭爣
+ const globalPos = [event.clientX, event.clientY];
+ const delta = event.deltaY;
+ const oldZoom = pixiApp.stage.scale.x;
+ let newZoom = oldZoom * 0.999 ** delta;
+
+ // const oldStageMatrix = app.stage.localTransform.clone();
+ // const oldStagePos = oldStageMatrix.applyInverse(pointerGlobalPos);
+ const oldStagePos = globalPos;
+ const dx = oldStagePos[0] * oldZoom - oldStagePos[0] * newZoom;
+ const dy = oldStagePos[1] * oldZoom - oldStagePos[1] * newZoom;
+
+ pixiApp.stage.setTransform(
+ pixiApp.stage.position.x + dx,
+ pixiApp.stage.position.y + dy,
+ newZoom,
+ newZoom,
+ 0,
+ 0,
+ 0,
+ 0,
+ 0
+ );
+
+ });
+ //*******************缂╂斁鐢诲竷*******************
+
+ // 鍒涘缓涓�涓鍣ㄦ潵绠＄悊澶ф壒閲忕殑鏄剧ず瀵硅薄
+ objectsContainer = new PIXI.Container();
+ pixiApp.stage.addChild(objectsContainer);
+
+
+ //*******************FPS*******************
+ var g_Time = 0;
+ pixiApp.ticker.add((delta) => {
+ var timeNow = (new Date()).getTime();
+ var timeDiff = timeNow - g_Time;
+ g_Time = timeNow;
+ var fps = 1000 / timeDiff;
+ this.mapFps = parseInt(fps)
+ });
+ //*******************FPS*******************
+ for (let k of mapData.plant) {
+ let rectangle = new PIXI.Graphics();
+ rectangle.beginFill(k.background);
+ rectangle.originColor = k.background;
+ rectangle.drawRect(0, 0, k.width, k.height);
+ rectangle.x = k.x;
+ rectangle.y = k.y;
+ objectsContainer.addChild(rectangle);
+ var hel = `${k.title}`
+ var text = new PIXI.Text(hel, {
+ fontFamily: 'Arial',
+ fontSize: 36,
+ fill: '#FFFFFF', // 鐧借壊
+ align: 'center',
+ })
+ text.x = k.titleX;
+ text.y = k.titleY;
+ // pixiApp.stage.addChild(text)
+ // let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});
+ // text.x = 1000;
+ // text.y = 2000;
+ text.resolution = pixiApp.renderer.resolution;
+ pixiApp.stage.addChild(text);
+ }
+ let track = mapData.track
+ for (let j in track) {
+ let k = track[j]
+ let x = k.x
+ for (let i = 0; i < k.anfme; i++) {
+ let rectangle = new PIXI.Graphics();
+ rectangle.beginFill(0xa6a6a6);
+ // rectangle.lineStyle(1, 0xffffff);
+ rectangle.drawRect(0, 0, k.unitX - 1, k.unitY - 1);
+ rectangle.y = k.y + 6 * i;
+ rectangle.x = x;
+ objectsContainer.addChild(rectangle);
+ }
+ }
+ for (let k of mapData.jar) {
+ let rectangle = new PIXI.Graphics();
+ rectangle.beginFill(k.background);
+ rectangle.originColor = k.background;
+ rectangle.drawRect(0, 0, k.width, k.height);
+ rectangle.x = k.x;
+ rectangle.y = k.y;
+ objectsContainer.addChild(rectangle);
+ var hel = `${k.title}`
+ var text = new PIXI.Text(hel, {
+ fontFamily: 'Arial',
+ fontSize: 18,
+ fill: '#FFFFFF', // 鐧借壊
+ align: 'center',
+ })
+ text.x = k.titleX;
+ text.y = k.titleY;
+ // pixiApp.stage.addChild(text)
+ // let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});
+ // text.x = 1000;
+ // text.y = 2000;
+ text.resolution = pixiApp.renderer.resolution;
+ pixiApp.stage.addChild(text);
+ }
+ for (let k of mapData.legend) {
+ let rectangle = new PIXI.Graphics();
+ rectangle.beginFill(k.background);
+ rectangle.originColor = k.background;
+ rectangle.drawRect(0, 0, k.width, k.height);
+ rectangle.x = k.x;
+ rectangle.y = k.y;
+ objectsContainer.addChild(rectangle);
+ var hel = `${k.title}`
+ var text = new PIXI.Text(hel, {
+ fontFamily: 'Arial',
+ fontSize: 18,
+ fill: '#FFFFFF', // 鐧借壊
+ align: 'center',
+ })
+ text.x = k.titleX;
+ text.y = k.titleY;
+ // pixiApp.stage.addChild(text)
+ // let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});
+ // text.x = 1000;
+ // text.y = 2000;
+ text.resolution = pixiApp.renderer.resolution;
+ pixiApp.stage.addChild(text);
+ }
+
+ for (let k of this.conveyor) {
+ let rectangle = new PIXI.Graphics();
+ rectangle.beginFill(k.background);
+ // rectangle.originColor = k.background;
+ rectangle.alpha = k.alpha ? k.alpha : 1
+ rectangle.drawRect(0, 0, k.width, k.height);
+ rectangle.x = k.x;
+ rectangle.y = k.y;
+ rectangle.title = k.title
+ rectangle.interactive = true
+ rectangle.cursor = "pointer"
+ rectangle.on('mouseover', onMouseOver)
+ function onMouseOver(event) {
+ rectangle.alpha = k.alpha ? k.alpha : 1
+ // 鍒涘缓鍐呭妗�
+ let tooltip = new PIXI.Graphics();
+ tooltip.beginFill(0xFFFFFF); // 鍐呭妗嗚儗鏅鑹�
+ tooltip.lineStyle(1, 0x000000); // 鍐呭妗嗚竟妗嗘牱寮�
+ tooltip.drawRect(0, 0, 100, 40); // 缁樺埗鍐呭妗�
+ tooltip.x = event.data.global.x; // 鏍规嵁榧犳爣浣嶇疆璋冩暣鍐呭妗嗕綅缃�
+ tooltip.y = event.data.global.y;
+ pixiApp.stage.addChild(tooltip);
+
+ // 璁＄畻鍐呭妗嗙殑浣嶇疆锛屼娇鍏跺湪榧犳爣鍙充笅瑙掑亸绉�10鍍忕礌澶�
+ tooltip.x = event.currentTarget.x + event.currentTarget.width + 10;
+ tooltip.y = event.currentTarget.y + event.currentTarget.height + 10;
+ // 娣诲姞鏂囨湰鍒板唴瀹规
+ var hel = `绔欑偣缂栧彿锛�${k.title}`
+ let text = new PIXI.BitmapText(hel, {
+ fontName: 'ChillRoundF',
+ fontSize: 16,
+ tint: 0xffffff
+ })
+ // text.x = 100;
+ // text.y = 100;
+ // pixiApp.stage.addChild(text)
+ // let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});
+ text.x = tooltip.x;
+ text.y = tooltip.y;
+ text.resolution = pixiApp.renderer.resolution;
+ pixiApp.stage.addChild(text);
+
+ // 鐩戝惉榧犳爣绉诲嚭浜嬩欢锛岀Щ闄ゅ唴瀹规
+ rectangle.on('mouseout', () => {
+ rectangle.alpha = k.alpha ? k.alpha : 1
+ pixiApp.stage.removeChild(tooltip);
+ pixiApp.stage.removeChild(text);
+ });
+ }
+ objectsContainer.addChild(rectangle);
+ }
+ let shelf1 = mapData.shelf1
+ for (let j in shelf1) {
+ let k = shelf1[j]
+ let y = k.y
+ for (let i = 0; i < k.anfme; i++) {
+ let rectangle = new PIXI.Graphics();
+ rectangle.beginFill(0xffffff);
+ // rectangle.lineStyle(1, 0xffffff);
+ rectangle.drawRect(0, 0, k.unitX - 2, k.unitY - 2);
+ rectangle.x = k.x + k.unitX * i;
+ rectangle.y = y;
+ objectsContainer.addChild(rectangle);
+ }
+ }
+
+ let shelf2 = mapData.shelf2
+ for (let j in shelf2) {
+ let k = shelf2[j]
+ let y = k.y
+ for (let i = 0; i < k.anfme; i++) {
+ let rectangle = new PIXI.Graphics();
+ rectangle.beginFill(0xffffff);
+ // rectangle.lineStyle(1, 0xffffff);
+ rectangle.drawRect(0, 0, k.unitX - 2, k.unitY);
+ rectangle.x = k.x + k.unitX * i;
+ rectangle.y = y;
+ objectsContainer.addChild(rectangle);
+ }
+ }
+
+
+
+
+
+ }
+ }
+
+ })
+
+
+
+
+
+
+
+
+ // window.addEventListener('DOMContentLoaded',function() {
+ // var tooltip = document.getElementById('tooltip');
+
+ // document.addEventListener('mouseover',function(event) {
+ // var target = event.target
+ // var tooltipText = target.getAttribute('data-tooltip')
+
+ // if (tooltipText) {
+ // tooltip.innerHTML = tooltipText
+ // tooltip.style.display = 'block'
+ // tooltip.style.left = (event.clientX + 10) + 'px'
+ // tooltip.style.top = (event.clientY + 10) + 'px'
+ // }
+ // })
+ // document.addEventListener('mouseout',function() {
+ // tooltip.style.display = 'none'
+ // })
+ // })
+
+</script>
\ No newline at end of file
--
Gitblit v1.9.1