From d1e0acaeffecb0da9cb1c8d61b14a3b719d7bb73 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期四, 26 九月 2024 14:24:41 +0800
Subject: [PATCH] #新地图
---
/dev/null | 240 -----------------
src/main/webapp/views/wcsmap/wcsmap.html | 575 +++++++++++++++++++++++++---------------
2 files changed, 361 insertions(+), 454 deletions(-)
diff --git a/src/main/webapp/views/wcsmap/mapData.json b/src/main/webapp/views/wcsmap/mapData.json
deleted file mode 100644
index 2787ed0..0000000
--- a/src/main/webapp/views/wcsmap/mapData.json
+++ /dev/null
@@ -1,240 +0,0 @@
-mapData = {
- "plant": [
- {"title": "搴撳瓨鍖�","width": "1240","height": "480","background": "0x02427f","x": 20,"y":20},
- {"title": "纭寲鍖�","width": "1240","height": "360","background": "0x02427f","x": 20,"y":680},
- {"title": "鍏朵粬","width": "500","height": "240","background": "0x02427f","x": 1400,"y":260}
- ],
- "conveyor": [
- {"id": "1","title": "608","width": 15,"height":40,"background": "0xb8db7c","x": 87,"y":660},
- {"id": "1","title": "609","width": 15,"height":15,"background": "0xb8db7c","x": 87,"y":701},
-
- {"id": "1","title": "610","width": 38,"height":15,"background": "0xb8db7c","x": 103,"y":701},
- {"id": "1","title": "611","width": 10,"height":10,"background": "0xf2f2f2","x": 128,"y":703},
- {"id": "1","title": "612","width": 15,"height":15,"background": "0xb8db7c","x": 126,"y":717},
- {"id": "1","title": "613","width": 42,"height":15,"background": "0xb8db7c","x": 142,"y":701},
- {"id": "1","title": "614","width": 10,"height":10,"background": "0xf2f2f2","x": 171,"y":703},
- {"id": "1","title": "615","width": 15,"height":15,"background": "0xb8db7c","x": 169,"y":717},
- {"id": "1","title": "616","width": 16,"height":15,"background": "0xb8db7c","x": 185,"y":701},
- {"id": "1","title": "617","width": 41,"height":15,"background": "0xb8db7c","x": 202,"y":701},
- {"id": "1","title": "618","width": 10,"height":10,"background": "0xf2f2f2","x": 230,"y":703},
- {"id": "1","title": "619","width": 15,"height":15,"background": "0xb8db7c","x": 228,"y":717},
- {"id": "1","title": "620","width": 42,"height":15,"background": "0xb8db7c","x": 244,"y":701},
- {"id": "1","title": "621","width": 10,"height":10,"background": "0xf2f2f2","x": 273,"y":703},
- {"id": "1","title": "622","width": 15,"height":15,"background": "0xb8db7c","x": 271,"y":717},
-
-
- {"id": "1","title": "643","width": 15,"height":58,"background": "0xb8db7c","x": 60,"y":660},
- {"id": "1","title": "642","width": 15,"height":59,"background": "0xb8db7c","x": 60,"y":719},
- {"id": "1","title": "641","width": 15,"height":59,"background": "0xb8db7c","x": 60,"y":779},
- {"id": "1","title": "640","width": 15,"height":59,"background": "0xb8db7c","x": 60,"y":839},
- {"id": "1","title": "639","width": 15,"height":59,"background": "0xb8db7c","x": 60,"y":899},
- {"id": "1","title": "638","width": 15,"height":46,"background": "0xb8db7c","x": 60,"y":959},
-
-
- {"id": "1","title": "637","width": 15,"height":15,"background": "0xb8db7c","x": 60,"y":1006},
- {"id": "1","title": "636","width": 22,"height":15,"background": "0xb8db7c","x": 76,"y":1006},
- {"id": "1","title": "635","width": 42,"height":15,"background": "0xb8db7c","x": 99,"y":1006},
- {"id": "1","title": "634","width": 42,"height":15,"background": "0xb8db7c","x": 142,"y":1006},
- {"id": "1","title": "633","width": 10,"height":10,"background": "0xf2f2f2","x": 171,"y":1008},
- {"id": "1","title": "627","width": 15,"height":15,"background": "0xb8db7c","x": 169,"y":990},
- {"id": "1","title": "632","width": 15,"height":15,"background": "0xb8db7c","x": 185,"y":1006},
- {"id": "1","title": "631","width": 41,"height":15,"background": "0xb8db7c","x": 201,"y":1006},
- {"id": "1","title": "630","width": 42,"height":15,"background": "0xb8db7c","x": 243,"y":1006},
- {"id": "1","title": "629","width": 10,"height":10,"background": "0xf2f2f2","x": 272,"y":1008},
- {"id": "1","title": "628","width": 15,"height":15,"background": "0xb8db7c","x": 270,"y":990},
-
-
- // 杩炲粖宸︿晶
- {"id": "1","title": "182","width": 21,"height":5,"background": "0xb8db7c","x": 1373,"y":279},
- {"id": "1","title": "183","width": 21,"height":5,"background": "0xb8db7c","x": 1351,"y":279},
- {"id": "1","title": "184","width": 21,"height":5,"background": "0xb8db7c","x": 1329,"y":279},
- {"id": "1","title": "185","width": 21,"height":5,"background": "0xb8db7c","x": 1307,"y":279},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1285,"y":279},
- {"id": "1","title": "187","width": 21,"height":5,"background": "0xb8db7c","x": 1263,"y":279},
- {"id": "1","title": "188","width": 21,"height":5,"background": "0xb8db7c","x": 1241,"y":279},
- {"id": "1","title": "189","width": 21,"height":5,"background": "0xb8db7c","x": 1219,"y":279},
- {"id": "1","title": "190","width": 21,"height":5,"background": "0xb8db7c","x": 1197,"y":279},
- {"id": "1","title": "191","width": 21,"height":5,"background": "0xb8db7c","x": 1175,"y":279},
- {"id": "1","title": "192","width": 22,"height":5,"background": "0xb8db7c","x": 1152,"y":279},
- {"id": "1","title": "193","width": 5,"height":5,"background": "0xb8db7c","x": 1146,"y":279},
- {"id": "1","title": "113","width": 5,"height":12,"background": "0x45decb","x": 1146,"y":266},
- {"id": "1","title": "136","width": 5,"height":18,"background": "0x45decb","x": 1140,"y":266},
- {"id": "1","title": "114","width": 5,"height":20,"background": "0xb8db7c","x": 1146,"y":245},
- {"id": "1","title": "186","width": 5,"height":20,"background": "0xb8db7c","x": 1140,"y":245},
- {"id": "1","title": "134","width": 24,"height":5,"background": "0xb8db7c","x": 1115,"y":245},
- {"id": "1","title": "133","width": 25,"height":5,"background": "0xb8db7c","x": 1089,"y":245},
- {"id": "1","title": "132","width": 8,"height":21,"background": "0xb8db7c","x": 1080,"y":231},
- {"id": "1","title": "131","width": 8,"height":5,"background": "0xb8db7c","x": 1089,"y":221},
- {"id": "1","title": "130","width": 8,"height":13,"background": "0xb8db7c","x": 1080,"y":217},
- {"id": "1","title": "129","width": 8,"height":10,"background": "0xb8db7c","x": 1080,"y":206},
- {"id": "1","title": "121","width": 8,"height":10,"background": "0xb8db7c","x": 1080,"y":195},
- {"id": "1","title": "122","width": 8,"height":5,"background": "0xb8db7c","x": 1071,"y":195},
- {"id": "1","title": "123","width": 8,"height":10,"background": "0xb8db7c","x": 1062,"y":195},
- {"id": "1","title": "124","width": 8,"height":10,"background": "0xb8db7c","x": 1062,"y":206},
- {"id": "1","title": "125","width": 8,"height":13,"background": "0xb8db7c","x": 1062,"y":217},
- {"id": "1","title": "126","width": 8,"height":5,"background": "0xb8db7c","x": 1053,"y":221},
- {"id": "1","title": "127","width": 8,"height":21,"background": "0xb8db7c","x": 1062,"y":231},
- {"id": "1","title": "128","width": 8,"height":5,"background": "0xb8db7c","x": 1071,"y":245},
-
- {"id": "1","title": "115","width": 5,"height":10,"background": "0xb8db7c","x": 1146,"y":234},
- {"id": "1","title": "116","width": 5,"height":16,"background": "0xb8db7c","x": 1146,"y":217},
- {"id": "1","title": "117","width": 5,"height":20,"background": "0xb8db7c","x": 1146,"y":196},
- {"id": "1","title": "118","width": 20,"height":5,"background": "0xb8db7c","x": 1125,"y":196},
- {"id": "1","title": "119","width": 20,"height":5,"background": "0xb8db7c","x": 1104,"y":196},
- {"id": "1","title": "120","width": 14,"height":5,"background": "0xb8db7c","x": 1089,"y":196},
-
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1351,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1373,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1329,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1307,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1285,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1263,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1241,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1219,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1197,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1175,"y":285},
- {"id": "1","title": "186","width": 22,"height":5,"background": "0xb8db7c","x": 1152,"y":285},
- {"id": "1","title": "186","width": 5,"height":5,"background": "0xb8db7c","x": 1146,"y":285},
- {"id": "1","title": "186","width": 5,"height":12,"background": "0x45decb","x": 1146,"y":291},
- {"id": "1","title": "186","width": 5,"height":18,"background": "0x45decb","x": 1140,"y":285},
-
-
- {"id": "1","title": "313","width": 8,"height":8,"background": "0xb8db7c","x": 1136,"y":141},
- {"id": "1","title": "312","width": 8,"height":16,"background": "0xb8db7c","x": 1145,"y":137},
- {"id": "1","title": "306","width": 8,"height":16,"background": "0xb8db7c","x": 1162,"y":167},
- {"id": "1","title": "226","width": 8,"height":16,"background": "0xb8db7c","x": 1162,"y":150},
- {"id": "1","title": "225","width": 16,"height":8,"background": "0xb8db7c","x": 1154 ,"y":141},
- {"id": "1","title": "224","width": 8,"height":16,"background": "0xb8db7c","x": 1162,"y":124},
- {"id": "1","title": "223","width": 8,"height":16,"background": "0xb8db7c","x": 1162,"y":107},
- {"id": "1","title": "215","width": 28,"height":8,"background": "0xb8db7c","x": 1142,"y":98},
- {"id": "1","title": "216","width": 30,"height":8,"background": "0xb8db7c","x": 1111,"y":98},
- {"id": "1","title": "217","width": 23,"height":8,"background": "0xb8db7c","x": 1087,"y":98},
- {"id": "1","title": "218","width": 16,"height":8,"background": "0xb8db7c","x": 1070,"y":98},
- {"id": "1","title": "311","width": 8,"height":8,"background": "0xb8db7c","x": 1052,"y":141},
- {"id": "1","title": "310","width": 8,"height":16,"background": "0xb8db7c","x": 1061,"y":137},
- {"id": "1","title": "219","width": 8,"height":16,"background": "0xb8db7c","x": 1078,"y":107},
- {"id": "1","title": "220","width": 8,"height":16,"background": "0xb8db7c","x": 1078,"y":124},
- {"id": "1","title": "221","width": 16,"height":8,"background": "0xb8db7c","x": 1070,"y":141},
- {"id": "1","title": "222","width": 8,"height":16,"background": "0xb8db7c","x": 1078,"y":150},
- {"id": "1","title": "305","width": 8,"height":16,"background": "0xb8db7c","x": 1078,"y":167},
- {"id": "1","title": "227","width": 23,"height":8,"background": "0xb8db7c","x": 1054,"y":184},
- {"id": "1","title": "228","width": 8,"height":8,"background": "0xb8db7c","x": 1078,"y":184},
- {"id": "1","title": "229","width": 23,"height":8,"background": "0xb8db7c","x": 1087,"y":184},
- {"id": "1","title": "230","width": 30,"height":8,"background": "0xb8db7c","x": 1111,"y":184},
- {"id": "1","title": "231","width": 19,"height":8,"background": "0xb8db7c","x": 1142,"y":184},
- {"id": "1","title": "233","width": 8,"height":8,"background": "0xb8db7c","x": 1162,"y":184},
- {"id": "1","title": "233","width": 8,"height":8,"background": "0xb8db7c","x": 1162,"y":184},
- {"id": "1","title": "234","width": 8,"height":35,"background": "0xb8db7c","x": 1162,"y":193},
- {"id": "1","title": "235","width": 8,"height":40,"background": "0xb8db7c","x": 1162,"y":229},
- {"id": "1","title": "214","width": 8,"height":25,"background": "0xb8db7c","x": 1171,"y":98},
- {"id": "1","title": "213","width": 8,"height":25,"background": "0xb8db7c","x": 1171,"y":124},
- {"id": "1","title": "212","width": 8,"height":45,"background": "0xb8db7c","x": 1171,"y":150},
- {"id": "1","title": "211","width": 8,"height":45,"background": "0xb8db7c","x": 1171,"y":196},
- {"id": "1","title": "210","width": 8,"height":27,"background": "0xb8db7c","x": 1171,"y":242},
-
-
-
- {"id": "1","title": "259","width": 29,"height":8,"background": "0xb8db7c","x": 1089,"y":270},
- {"id": "1","title": "239","width": 32,"height":8,"background": "0xb8db7c","x": 1119,"y":270},
- {"id": "1","title": "237","width": 18,"height":8,"background": "0xb8db7c","x": 1152,"y":270},
- {"id": "1","title": "240","width": 8,"height":11,"background": "0xf2f2f2","x": 1162,"y":279},
- {"id": "1","title": "208","width": 8,"height":11,"background": "0xf2f2f2","x": 1171,"y":279},
- {"id": "1","title": "186","width": 18,"height":8,"background": "0xb8db7c","x": 1171,"y":270},
- {"id": "1","title": "186","width": 53,"height":8,"background": "0xb8db7c","x": 1190,"y":270},
- {"id": "1","title": "186","width": 53,"height":8,"background": "0xb8db7c","x": 1244,"y":270},
- {"id": "1","title": "186","width": 53,"height":8,"background": "0xb8db7c","x": 1298,"y":270},
-
- {"id": "1","title": "186","width": 29,"height":8,"background": "0xff00ff","x": 1089,"y":291},
- {"id": "1","title": "186","width": 32,"height":8,"background": "0xb8db7c","x": 1119,"y":291},
- {"id": "1","title": "186","width": 18,"height":8,"background": "0xb8db7c","x": 1152,"y":291},
- {"id": "1","title": "186","width": 18,"height":8,"background": "0xb8db7c","x": 1152,"y":291},
- {"id": "1","title": "186","width": 18,"height":8,"background": "0xb8db7c","x": 1171,"y":291},
- {"id": "1","title": "186","width": 53,"height":8,"background": "0xb8db7c","x": 1190,"y":291},
- {"id": "1","title": "186","width": 53,"height":8,"background": "0xb8db7c","x": 1244,"y":291},
- {"id": "1","title": "186","width": 53,"height":8,"background": "0xb8db7c","x": 1298,"y":291},
- // 杩炲粖鍙冲尯
- {"id": "1","title": "186","width": 53,"height":8,"background": "0xb8db7c","x": 1352,"y":270},
- {"id": "1","title": "186","width": 29,"height":8,"background": "0xb8db7c","x": 1406,"y":270},
- {"id": "1","title": "186","width": 8,"height":6,"background": "0xf2f2f2","x": 1426,"y":271},
-
- {"id": "1","title": "174","width": 6,"height":5,"background": "0xb8db7c","x": 1549,"y":279},
- {"id": "1","title": "186","width": 6,"height":5,"background": "0xb8db7c","x": 1549,"y":285},
- {"id": "1","title": "186","width": 6,"height":19,"background": "0xb8db7c","x": 1549,"y":291},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1527,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1505,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1483,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1461,"y":285},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1439,"y":285},
- {"id": "1","title": "175","width": 21,"height":5,"background": "0xb8db7c","x": 1527,"y":279},
- {"id": "1","title": "176","width": 21,"height":5,"background": "0xb8db7c","x": 1505,"y":279},
- {"id": "1","title": "177","width": 21,"height":5,"background": "0xb8db7c","x": 1483,"y":279},
- {"id": "1","title": "178","width": 21,"height":5,"background": "0xb8db7c","x": 1461,"y":279},
- {"id": "1","title": "179","width": 21,"height":5,"background": "0xb8db7c","x": 1439,"y":279},
- {"id": "1","title": "181","width": 21,"height":5,"background": "0xb8db7c","x": 1395,"y":279},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1395,"y":285},
- {"id": "1","title": "186","width": 53,"height":8,"background": "0xb8db7c","x": 1352,"y":291},
- {"id": "1","title": "186","width": 10,"height":8,"background": "0xb8db7c","x": 1406,"y":291},
- {"id": "1","title": "180","width": 21,"height":5,"background": "0xb8db7c","x": 1417,"y":279},
- {"id": "1","title": "186","width": 21,"height":5,"background": "0xb8db7c","x": 1417,"y":285},
- {"id": "1","title": "297","width": 10,"height":20,"background": "0xff00ff","x": 1425,"y":279},
- {"id": "1","title": "186","width": 10,"height":20,"background": "0xb8db7c","x": 1425,"y":300},
- {"id": "1","title": "186","width": 10,"height":18,"background": "0xb8db7c","x": 1425,"y":321},
- {"id": "1","title": "186","width": 10,"height":13,"background": "0xb8db7c","x": 1425,"y":340},
- {"id": "1","title": "186","width": 15,"height":8,"background": "0xb8db7c","x": 1436,"y":345},
- {"id": "1","title": "186","width": 20,"height":8,"background": "0xb8db7c","x": 1452,"y":345},
- {"id": "1","title": "186","width": 20,"height":8,"background": "0xb8db7c","x": 1473,"y":345},
- {"id": "1","title": "186","width": 10,"height":12,"background": "0xb8db7c","x": 1483,"y":354},
- {"id": "1","title": "186","width": 10,"height":12,"background": "0xb8db7c","x": 1483,"y":367},
- {"id": "1","title": "186","width": 10,"height":18,"background": "0xb8db7c","x": 1483,"y":380},
- {"id": "1","title": "186","width": 10,"height":8,"background": "0xb8db7c","x": 1494,"y":380},
- {"id": "1","title": "186","width": 10,"height":8,"background": "0xb8db7c","x": 1505,"y":380},
- {"id": "1","title": "186","width": 18,"height":8,"background": "0xb8db7c","x": 1516,"y":380},
- {"id": "1","title": "186","width": 10,"height":8,"background": "0xb8db7c","x": 1535,"y":380},
- {"id": "1","title": "186","width": 10,"height":18,"background": "0xb8db7c","x": 1535,"y":389},
- {"id": "1","title": "186","width": 21,"height":8,"background": "0xb8db7c","x": 1483,"y":399},
- {"id": "1","title": "186","width": 10,"height":8,"background": "0xb8db7c","x": 1505,"y":399},
- {"id": "1","title": "186","width": 18,"height":8,"background": "0xb8db7c","x": 1516,"y":399},
- {"id": "1","title": "186","width": 10,"height":8,"background": "0xb8db7c","x": 1483,"y":408},
- {"id": "1","title": "186","width": 10,"height":12,"background": "0xb8db7c","x": 1483,"y":417},
- {"id": "1","title": "186","width": 10,"height":8,"background": "0xb8db7c","x": 1494,"y":421},
- {"id": "1","title": "186","width": 10,"height":8,"background": "0xb8db7c","x": 1505,"y":421},
- {"id": "1","title": "186","width": 18,"height":8,"background": "0xb8db7c","x": 1516,"y":421},
- {"id": "1","title": "186","width": 10,"height":8,"background": "0xb8db7c","x": 1535,"y":421},
- {"id": "1","title": "186","width": 10,"height":18,"background": "0xb8db7c","x": 1535,"y":430},
-
-
- {"id": "1","title": "186","width": 10,"height":26,"background": "0xb8db7c","x": 1406,"y":300},
- {"id": "1","title": "186","width": 10,"height":26,"background": "0xb8db7c","x": 1406,"y":327},
- {"id": "1","title": "186","width": 25,"height":8,"background": "0xb8db7c","x": 1406,"y":354},
- {"id": "1","title": "186","width": 16,"height":8,"background": "0xb8db7c","x": 1432,"y":354},
- {"id": "1","title": "186","width": 16,"height":8,"background": "0xb8db7c","x": 1449,"y":354},
- {"id": "1","title": "186","width": 10,"height":12,"background": "0xb8db7c","x": 1466,"y":354},
- {"id": "1","title": "186","width": 10,"height":12,"background": "0xb8db7c","x": 1466,"y":367},
- {"id": "1","title": "186","width": 10,"height":18,"background": "0xb8db7c","x": 1466,"y":380},
- {"id": "1","title": "186","width": 16,"height":8,"background": "0xb8db7c","x": 1466,"y":399},
- {"id": "1","title": "186","width": 10,"height":31,"background": "0xb8db7c","x": 1466,"y":408},
- {"id": "1","title": "186","width": 23,"height":8,"background": "0xb8db7c","x": 1466,"y":440},
- {"id": "1","title": "186","width": 22,"height":8,"background": "0xb8db7c","x": 1490,"y":440},
- {"id": "1","title": "186","width": 12,"height":8,"background": "0xb8db7c","x": 1509,"y":440},
- {"id": "1","title": "186","width": 12,"height":8,"background": "0xb8db7c","x": 1522,"y":440},
- ],
- "shelf1":[
- {"id": 1,"title": "1鎺�","unitX": 7,"unitY":4,"anfme":44,"x":800,"y": 380},
- {"id": 2,"title": "2鎺�","unitX": 7,"unitY":4,"anfme":44,"x":800,"y": 384},
- {"id": 2,"title": "2鎺�","unitX": 7,"unitY":4,"anfme":44,"x":800,"y": 396},
- {"id": 1,"title": "1鎺�","unitX": 7,"unitY":4,"anfme":44,"x":800,"y": 400},
-
- {"id": 2,"title": "2鎺�","unitX": 7,"unitY":4,"anfme":44,"x":800,"y": 410},
- {"id": 2,"title": "2鎺�","unitX": 7,"unitY":4,"anfme":44,"x":800,"y": 414},
- {"id": 1,"title": "1鎺�","unitX": 7,"unitY":4,"anfme":44,"x":800,"y": 426},
- {"id": 2,"title": "2鎺�","unitX": 7,"unitY":4,"anfme":44,"x":800,"y": 430}
- ],
- "shelf2":[
- {"id": 1,"title": "1鎺�","unitX": 10,"unitY":6,"anfme":84,"x":250,"y": 271},
- {"id": 2,"title": "2鎺�","unitX": 10,"unitY":6,"anfme":84,"x":250,"y": 292},
- {"id": 2,"title": "2鎺�","unitX": 10,"unitY":6,"anfme":84,"x":250,"y": 304},
- {"id": 1,"title": "1鎺�","unitX": 10,"unitY":6,"anfme":84,"x":250,"y": 326},
- {"id": 2,"title": "2鎺�","unitX": 10,"unitY":6,"anfme":84,"x":250,"y": 2980},
- {"id": 2,"title": "2鎺�","unitX": 10,"unitY":6,"anfme":84,"x":250,"y": 3110}
- ]
-}
\ 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 1ad55b0..2a548c3 100644
--- a/src/main/webapp/views/wcsmap/wcsmap.html
+++ b/src/main/webapp/views/wcsmap/wcsmap.html
@@ -1,14 +1,16 @@
<!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="mapData.json"></script>
+ <script type="text/javascript" src="mapData.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;
@@ -22,244 +24,389 @@
}
</style>
</head>
-<body>
-<div id="app">
- <div id="pixiView">
+<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>
- <!--杈撳嚭鎿嶄綔鍜孎PS-->
- <div style="position: absolute;top: 20px;right: 50px;">
- <div>FPS:{{mapFps}}</div>
</div>
- <div id="tooltip" class="tooltip">111</div>
- <p style="position: absolute;top: 20px;right: 100px;" data-tooltip="1232131">666666666</p>
-</div>
-</div>
</body>
+
</html>
<script>
+ let pixiApp;
let objectsContainer;
var tooltip = document.getElementById('tooltip');
var app = new Vue({
el: '#app',
data: {
mapFps: 0,
+ sites: ['185', '186', '240', "250", "299"],
+ conveyor: []
},
- created(){
- console.log(mapData);
+ created() {
+ mapData
+
},
- })
- let 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: 'font',
- // 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;
- }
- }
- );
+ mounted() {
+ this.createMapData()
+ this.createMap()
+
+ setInterval(() => {
+ this.getSiteInfo()
+ }, 1000)
+
+ },
+ methods: {
+ createMapData() {
+ this.conveyor = mapData.conveyor
+ console.log(this.conveyor);
+
+ },
+ getSiteInfo() {
+ $.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)
+
+ 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);
+ }
+ }
+ })
- 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
+ },
+ 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);
+ }
+
+ 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 mapData.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
+ console.log(event);
+ // 鍒涘缓鍐呭妗�
+ 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);
+ }
+ }
+
+
+
+
+
}
}
- );
- 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);
- }
- for (let k of mapData.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.interactive = true
- rectangle.cursor = "pointer"
- rectangle.on('mouseover', onMouseOver)
- function onMouseOver(event) {
- console.log(event);
- // 鍒涘缓鍐呭妗�
- 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', () => {
- 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);
- }
- }
-
-
@@ -282,5 +429,5 @@
// tooltip.style.display = 'none'
// })
// })
-
+
</script>
\ No newline at end of file
--
Gitblit v1.9.1