From 8af52b048a4ddaadb07346b4bcc08f671fcc05ea Mon Sep 17 00:00:00 2001 From: Junjie <fallin.jie@qq.com> Date: 星期三, 06 九月 2023 10:03:03 +0800 Subject: [PATCH] #基础地图更新 --- src/main/webapp/static/testMoveData.json | 578 +++++++++ src/main/webapp/static/vue/element/fonts/element-icons.ttf | 0 src/main/webapp/views/console2.html | 1025 ++++++++++++++++ src/main/java/com/zy/asrs/controller/ShuttleController.java | 17 src/main/webapp/views/console.html | 1613 +++++++++---------------- src/main/webapp/static/css/console_vue.css | 433 ++++++ src/main/webapp/static/vue/element/fonts/element-icons.woff | 0 7 files changed, 2,651 insertions(+), 1,015 deletions(-) diff --git a/src/main/java/com/zy/asrs/controller/ShuttleController.java b/src/main/java/com/zy/asrs/controller/ShuttleController.java index ce4aa87..dcc006d 100644 --- a/src/main/java/com/zy/asrs/controller/ShuttleController.java +++ b/src/main/java/com/zy/asrs/controller/ShuttleController.java @@ -1,6 +1,7 @@ package com.zy.asrs.controller; import com.alibaba.fastjson.JSON; +import com.alibaba.fastjson.JSONObject; import com.baomidou.mybatisplus.mapper.EntityWrapper; import com.core.annotations.ManagerAuth; import com.core.common.BaseRes; @@ -65,7 +66,7 @@ @PostMapping("/table/shuttle/state") @ManagerAuth(memo = "鍥涘悜绌挎杞︿俊鎭〃") public R shuttleStateTable(){ - ArrayList<NyShuttleProtocol> list = new ArrayList<>(); + ArrayList<JSONObject> list = new ArrayList<>(); List<BasShuttle> shuttles = basShuttleService.selectList(new EntityWrapper<BasShuttle>().orderBy("shuttle_no")); for (BasShuttle basShuttle : shuttles) { // 鑾峰彇鍥涘悜绌挎杞︿俊鎭� @@ -77,7 +78,19 @@ if (shuttleProtocol == null || shuttleProtocol.getShuttleNo()==null) { continue; } - list.add(shuttleProtocol); + JSONObject shuttleData = JSON.parseObject(JSON.toJSONString(shuttleProtocol)); + + shuttleData.put("moveAdvancePath", null);//绌挎杞﹂璁¤矾寰� + if (shuttleProtocol.getTaskNo() != 0) { + //瀛樺湪浠诲姟锛岃幏鍙栨寚浠� + Object object = redisUtil.get("shuttle_wrk_no_" + shuttleProtocol.getTaskNo()); + if (object != null) { + ShuttleRedisCommand redisCommand = JSON.parseObject(object.toString(), ShuttleRedisCommand.class); + shuttleData.put("moveAdvancePath", redisCommand.getAssignCommand().getNodes());//绌挎杞﹂璁¤矾寰� + } + } + + list.add(shuttleData); } return R.ok().add(list); } diff --git a/src/main/webapp/static/css/console_vue.css b/src/main/webapp/static/css/console_vue.css new file mode 100644 index 0000000..4e0c288 --- /dev/null +++ b/src/main/webapp/static/css/console_vue.css @@ -0,0 +1,433 @@ +body { + margin: 0; + padding: 0; + background-color: rgb(108, 167, 168); +} + +.pointContainer { + display: flex; + justify-content: center; +} + +.item { + width: 35px; + height: 35px; + border-right: none; + cursor: default; + color: rgb(194, 76, 65); + display: flex; + justify-content: center; + align-items: center; + user-select: none; + background: #f0f0f0; +} + +/* 绔欑偣 */ +.site { + color: #333; + height: 35px; + width: 35px; + cursor: pointer; + text-align: center; + background-color: rgb(120, 255, 129); + font-size: 13px; + display: flex; + justify-content: center; + align-items: center; + user-select: none; +} + +/*绌虹珯鐐�*/ +.site-k { + border: 1px solid rgb(108, 167, 168); + background-color: rgb(108, 167, 168); +} + +/* 鍏ュ簱 */ +.machine-put-flag { + padding: 0 10px; + background-color: rgb(163, 214, 242); +} + +/* 鍑哄簱 */ +.machine-take-flag { + padding: 0 10px; + background-color: rgb(151, 180, 0); +} + +/* 搴撳埌搴� */ +.machine-stock-move-flag { + padding: 0 10px; + background-color: rgb(58, 77, 249); +} + +/* 绔欏埌绔� */ +.machine-site-move-flag { + padding: 0 10px; + background-color: rgb(240, 140, 10); +} + +/* PToP */ +.machine-p-move-flag { + padding: 0 10px; + background-color: rgb(29, 152, 23); +} + +/* 寮傚父 */ +.machine-error-flag { + padding: 0 10px; + background-color: rgb(252, 48, 48); +} + +/* 鑷姩 */ +.machine-auto-flag { + padding: 0 10px; + background-color: rgb(132, 255, 115); +} + +/* 闈炶嚜鍔�/鎵嬪姩 */ +.machine-unauto-flag { + padding: 0 10px; + background-color: rgb(184, 184, 184); +} + +/* 鑷姩+鏈夌墿+ID */ +.site-auto-run-id { + background-color: rgb(252, 48, 48); +} + +/* 鑷姩+鏈夌墿 */ +.site-auto-run { + background-color: rgb(250, 81, 246); +} + +/* 鑷姩+ID */ +.site-auto-id { + background-color: rgb(196, 196, 0); +} + +/* 鑷姩 */ +.site-auto { + background-color: rgb(120, 255, 129); +} + +/* 闈炶嚜鍔�/鎵嬪姩 */ +.site-unauto { + background-color: rgb(184, 184, 184); +} + +/*绌洪棽*/ +.shuttle-idle { + background-color: rgb(120, 255, 129); +} + +/*浣滀笟涓�*/ +.shuttle-working { + background-color: rgb(196, 196, 0); +} + +/*绛夊緟纭*/ +.shuttle-waiting { + background-color: rgb(184, 184, 184); +} + +/*鍏呯數涓�*/ +.shuttle-charging { + background-color: rgb(250, 81, 246); +} + +/*鍏呯數浠诲姟绛夊緟纭*/ +.shuttle-charging-waiting { + background-color: rgb(58, 77, 249); +} + +/*鏁呴殰淇涓�*/ +.shuttle-fixing { + background-color: rgb(252, 48, 48); +} + +/*绂荤嚎*/ +.shuttle-offline { + background-color: rgb(0, 0, 0); +} + +/*绌洪棽*/ +.lift-idle { + background-color: rgb(120, 255, 129); +} + +/*浣滀笟涓�*/ +.lift-working { + background-color: rgb(196, 196, 0); +} + +/*绛夊緟纭*/ +.lift-waiting { + background-color: rgb(184, 184, 184); +} + +/*绂荤嚎*/ +.lift-offline { + background-color: rgb(0, 0, 0); +} + +/* 杈撻�佽澶囧脊绐� */ +#siteWindow { + width: 300px; + height: 340px; + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border-radius: 20px 20px 0 0; + overflow: hidden; +} + +#siteWindow-head { + width: 300px; + height: 55px; + background: #73fe7a; + font-weight: 700; + display: flex; + justify-content: space-between; + align-items: center; +} + +#siteWindow-head .detailed { + display: inline-block; + background: none; + color: #00000; + margin-left: 20px; +} + +#siteWindow-head button { + width: 25px; + height: 25px; + padding: 0px; + border: none; + border-radius: 25px; + background-image: url(../images/siteclose.png); + display: inline-block; + float: right; + margin-right: 20px; +} + +.siteWindow-body { + height: 285px; + padding: 6px; + background: rgba(0, 0, 0, .6); +} + +#siteWindow .form-item, +#siteWindow .form-item-checkbox { + display: flex; + justify-content: space-between; + margin-top: 5px; +} + +#siteWindow .form-item-label span, +#siteWindow .form-item-label-checkbox span { + color: #fff; +} + +#siteWindow form .form-item-input input { + background-color: rgba(255, 255, 255, .3); + color: #FFFFFF; + padding: 0; + border: none; + border-radius: 2px; + height: 18px; + padding-left: 10px; +} + +.floorBtnBox { + margin-bottom: 10px; +} + +.floorBtnBox button { + width: 110px; + height: 40px; +} + +.footer { + width: 100%; + height: 23%; + position: absolute; + bottom: 3.2%; +} + +.line-status { + float: left; + width: 15%; + height: 100%; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 15px; + margin-left: 1%; +} + +/* 鎺у埗琛ㄥご */ +.body-head { + height: 35px; + width: 100%; + background-image: url(../images/status_bar_1.png); + background-repeat: no-repeat; + margin-left: 5%; + margin-top: 20px; + text-indent: 25px; + color: white; +} + +/* 鏉$爜鎵弿鍣� */ +.bar-code { + display: inline-block; + float: left; + position: fixed; + width: 34%; + height: 23%; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 15px; + margin-left: 1%; + overflow: hidden; +} + +.switch_r { + color: #FFFFFF; + font-size: 14px; + width: 130px; + height: 153px; + float: right; + padding-top: 30px; +} + +#system-run-desc { + font-size: 20px; + margin-top: 15px; +} + +.allStatus { + margin-left: 5%; + font-size: 14px; + color: #FFFFFF; +} + +.state { + height: 34px; + width: 200px; + background-color: rgba(255, 255, 255, 0.1); + background-image: url(../images/stacker.png); + background-repeat: no-repeat; + border-radius: 17px 0 0 17px; + padding-left: 50px; + line-height: 34px; + margin-bottom: 10px; + margin-left: 5%; + color: #FFFFFF; + font-size: 10px; +} + +.states { + background-image: url(../images/line.png); + /*margin-bottom:54px;*/ +} + +.line-ss { + display: inline-block; + float: right; + height: 15px; + width: 40px; + margin-top: 10px; + margin-right: 15px; + line-height: 15px; + text-align: center; + background-color: rgba(5, 5, 5, 0.3); + color: #ffdd00; +} + +/*鎵爜琛ㄥ崟*/ +.tablebox { + display: inline-block; + width: 290px; + height: 162px; + margin-left: 1.5%; + color: white; + font-size: 14px; + list-style: none; + line-height: 27px; + text-indent: 10px; + overflow: hidden; +} + +.table-head { + width: 100%; + height: 27px; + background: linear-gradient(to right, rgb(94, 193, 184), rgb(12, 71, 63)); +} + +#code { + background-image: url(../images/status_bar_2.png); + background-repeat: no-repeat; + margin-left: 2%; +} + +.table-body li { + background-color: #5D7677; +} + +.table-body li:nth-child(even) { + background-color: #4A6565; +} + +.state-ss { + margin-left: 60px; +} + +.shuttle-status-box { + height: 100px; + overflow-y: scroll; + overflow-x: hidden; +} + +.lift-status-box { + height: 120px; + overflow-y: scroll; + overflow-x: hidden; +} + +.right { + float: right; + text-indent: 10px; + padding-right: 10px; +} + +/*=============== SCROLL BAR ===============*/ +::-webkit-scrollbar { + width: .6rem; + border-radius: .5rem; + background-color: hsl(228, 8%, 76%); +} + +::-webkit-scrollbar-thumb { + background-color: hsl(228, 8%, 64%); + border-radius: .5rem; +} + +::-webkit-scrollbar-thumb:hover { + background-color: hsl(228, 8%, 54%); +} + +.sxcar{ + width: 35px; + height: 35px; + background-image: url(../images/sxcar.png); + background-size: 100% 100%; + position: absolute; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + text-shadow: 2px 2px 4px #000000; + font-size: 18px; + transition: all 1s; + user-select: none; +} \ No newline at end of file diff --git a/src/main/webapp/static/testMoveData.json b/src/main/webapp/static/testMoveData.json new file mode 100644 index 0000000..bb98fa1 --- /dev/null +++ b/src/main/webapp/static/testMoveData.json @@ -0,0 +1,578 @@ +[ + { + "x": 1, + "y": 59, + "z": 1, + "isInflectionPoint": false, + "direction": "bottom", + "moveDistance": 1000, + "father": null, + "f": 0, + "h": 0, + "g": 0 + }, + { + "x": 2, + "y": 59, + "z": 1, + "isInflectionPoint": false, + "direction": "bottom", + "moveDistance": 1000, + "father": null, + "f": 48, + "h": 48, + "g": 0 + }, + { + "x": 3, + "y": 59, + "z": 1, + "isInflectionPoint": false, + "direction": "bottom", + "moveDistance": 1000, + "father": null, + "f": 47, + "h": 47, + "g": 0 + }, + { + "x": 4, + "y": 59, + "z": 1, + "isInflectionPoint": false, + "direction": "bottom", + "moveDistance": 1000, + "father": null, + "f": 46, + "h": 46, + "g": 0 + }, + { + "x": 5, + "y": 59, + "z": 1, + "isInflectionPoint": true, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 45, + "h": 45, + "g": 0 + }, + { + "x": 5, + "y": 58, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 46, + "h": 44, + "g": 2 + }, + { + "x": 5, + "y": 57, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 43, + "h": 43, + "g": 0 + }, + { + "x": 5, + "y": 56, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 42, + "h": 42, + "g": 0 + }, + { + "x": 5, + "y": 55, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 41, + "h": 41, + "g": 0 + }, + { + "x": 5, + "y": 54, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 40, + "h": 40, + "g": 0 + }, + { + "x": 5, + "y": 53, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 39, + "h": 39, + "g": 0 + }, + { + "x": 5, + "y": 52, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 38, + "h": 38, + "g": 0 + }, + { + "x": 5, + "y": 51, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 37, + "h": 37, + "g": 0 + }, + { + "x": 5, + "y": 50, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 36, + "h": 36, + "g": 0 + }, + { + "x": 5, + "y": 49, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 35, + "h": 35, + "g": 0 + }, + { + "x": 5, + "y": 48, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 34, + "h": 34, + "g": 0 + }, + { + "x": 5, + "y": 47, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 33, + "h": 33, + "g": 0 + }, + { + "x": 5, + "y": 46, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 32, + "h": 32, + "g": 0 + }, + { + "x": 5, + "y": 45, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 31, + "h": 31, + "g": 0 + }, + { + "x": 5, + "y": 44, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 30, + "h": 30, + "g": 0 + }, + { + "x": 5, + "y": 43, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 29, + "h": 29, + "g": 0 + }, + { + "x": 5, + "y": 42, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 28, + "h": 28, + "g": 0 + }, + { + "x": 5, + "y": 41, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 27, + "h": 27, + "g": 0 + }, + { + "x": 5, + "y": 40, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 26, + "h": 26, + "g": 0 + }, + { + "x": 5, + "y": 39, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 25, + "h": 25, + "g": 0 + }, + { + "x": 5, + "y": 38, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 24, + "h": 24, + "g": 0 + }, + { + "x": 5, + "y": 37, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 23, + "h": 23, + "g": 0 + }, + { + "x": 5, + "y": 36, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 22, + "h": 22, + "g": 0 + }, + { + "x": 5, + "y": 35, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 21, + "h": 21, + "g": 0 + }, + { + "x": 5, + "y": 34, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 20, + "h": 20, + "g": 0 + }, + { + "x": 5, + "y": 33, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 19, + "h": 19, + "g": 0 + }, + { + "x": 5, + "y": 32, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 18, + "h": 18, + "g": 0 + }, + { + "x": 5, + "y": 31, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 17, + "h": 17, + "g": 0 + }, + { + "x": 5, + "y": 30, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 16, + "h": 16, + "g": 0 + }, + { + "x": 5, + "y": 29, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 15, + "h": 15, + "g": 0 + }, + { + "x": 5, + "y": 28, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 14, + "h": 14, + "g": 0 + }, + { + "x": 5, + "y": 27, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 13, + "h": 13, + "g": 0 + }, + { + "x": 5, + "y": 26, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 12, + "h": 12, + "g": 0 + }, + { + "x": 5, + "y": 25, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 11, + "h": 11, + "g": 0 + }, + { + "x": 5, + "y": 24, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 10, + "h": 10, + "g": 0 + }, + { + "x": 5, + "y": 23, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 9, + "h": 9, + "g": 0 + }, + { + "x": 5, + "y": 22, + "z": 1, + "isInflectionPoint": false, + "direction": "left", + "moveDistance": 1000, + "father": null, + "f": 8, + "h": 8, + "g": 0 + }, + { + "x": 6, + "y": 22, + "z": 1, + "isInflectionPoint": true, + "direction": "bottom", + "moveDistance": 1000, + "father": null, + "f": 7, + "h": 7, + "g": 0 + }, + { + "x": 7, + "y": 22, + "z": 1, + "isInflectionPoint": true, + "direction": "bottom", + "moveDistance": 1000, + "father": null, + "f": 7, + "h": 7, + "g": 0 + }, + { + "x": 8, + "y": 22, + "z": 1, + "isInflectionPoint": true, + "direction": "bottom", + "moveDistance": 1000, + "father": null, + "f": 7, + "h": 7, + "g": 0 + }, + { + "x": 9, + "y": 22, + "z": 1, + "isInflectionPoint": true, + "direction": "bottom", + "moveDistance": 1000, + "father": null, + "f": 7, + "h": 7, + "g": 0 + }, + { + "x": 9, + "y": 21, + "z": 1, + "isInflectionPoint": true, + "direction": "bottom", + "moveDistance": 1000, + "father": null, + "f": 7, + "h": 7, + "g": 0 + }, + { + "x": 8, + "y": 21, + "z": 1, + "isInflectionPoint": true, + "direction": "bottom", + "moveDistance": 1000, + "father": null, + "f": 7, + "h": 7, + "g": 0 + } +] \ No newline at end of file diff --git a/src/main/webapp/static/vue/element/fonts/element-icons.ttf b/src/main/webapp/static/vue/element/fonts/element-icons.ttf new file mode 100644 index 0000000..91b74de --- /dev/null +++ b/src/main/webapp/static/vue/element/fonts/element-icons.ttf Binary files differ diff --git a/src/main/webapp/static/vue/element/fonts/element-icons.woff b/src/main/webapp/static/vue/element/fonts/element-icons.woff new file mode 100644 index 0000000..02b9a25 --- /dev/null +++ b/src/main/webapp/static/vue/element/fonts/element-icons.woff Binary files differ diff --git a/src/main/webapp/views/console.html b/src/main/webapp/views/console.html index 8b09f68..74bdbab 100644 --- a/src/main/webapp/views/console.html +++ b/src/main/webapp/views/console.html @@ -1,1025 +1,612 @@ <!DOCTYPE html> <html lang="en"> -<head> - <meta charset="utf-8"> - <title>WCS鎺у埗涓績</title> - <link rel="stylesheet" href="../static/css/console.css"> - <link rel="stylesheet" href="../static/css/animate.min.css"> - <link rel="stylesheet" href="../static/css/toggle-switch.css"> - <script src="../static/js/jquery/jquery-3.3.1.min.js"></script> - <script src="../static/js/layer/layer.js"></script> - <script type="text/javascript" src="../static/js/common.js"></script> -</head> -<body> -<div class="root"> - <header class="header"> - <h1>鑷姩浠撳簱WCS鐩戞帶鍥�</h1> - <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6> - </header> - <main class="main"> - <!--妤煎眰鎸夐挳--> - <div id="floorBtnBox"> - <button class="floorBtn btn-16" onclick="changFloor(this,1)" style="margin-top: 150px">1F</button> - <button class="floorBtn btn-16" onclick="changFloor(this,2)" style="margin-top: 200px">2F</button> - <button class="floorBtn btn-16" onclick="changFloor(this,3)" style="margin-top: 250px">3F</button> - <button class="floorBtn btn-16" onclick="changFloor(this,4)" style="margin-top: 300px">4F</button> - <button class="floorBtn btn-16" onclick="changFloor(this,5)" style="margin-top: 350px">5F</button> - <button class="floorBtn btn-16" onclick="changFloor(this,6)" style="margin-top: 400px">6F</button> - <button class="floorBtn btn-16" onclick="changFloor(this,7)" style="margin-top: 450px">7F</button> - <button class="floorBtn btn-16" onclick="changFloor(this,8)" style="margin-top: 500px">8F</button> - <button class="floorBtn btn-16" onclick="changFloor(this,9)" style="margin-top: 550px">9F</button> - <button class="floorBtn btn-16" onclick="changFloor(this,10)" style="margin-top: 600px">10F</button> - </div> - <button class="floorBtn btn-16" onclick="resetMap()" style="margin-top: 650px;font-size: 14px;">閲嶇疆鍦板浘</button> - <button class="floorBtn btn-16" onclick="testMove()" style="margin-top: 700px;font-size: 14px;">娴嬭瘯绉诲姩杞�</button> + <head> + <meta charset="UTF-8"> + <title>WCS鎺у埗涓績</title> + <link rel="stylesheet" href="../static/css/animate.min.css"> + <link rel="stylesheet" href="../static/vue/element/element.css"> + <link rel="stylesheet" href="../static/css/console_vue.css"> + <link rel="stylesheet" href="../static/css/toggle-switch.css"> + <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> + <script type="text/javascript" src="../static/layui/layui.js"></script> + <script type="text/javascript" src="../static/js/handlebars/handlebars-v4.5.3.js"></script> + <script type="text/javascript" src="../static/js/common.js"></script> + <script type="text/javascript" src="../static/vue/js/vue.min.js"></script> + <script type="text/javascript" src="../static/vue/element/element.js"></script> + </head> + <body> + <div id="app"> + <div style="display: flex;justify-content: center;align-items: center;width: 100%;margin-top: 150px;"> + <div id="mapDataId" style="zoom: 0.7;position: relative;"> + <div class="pointContainer" v-for="(row,index) in map" :key="index"> + <div v-for="(col,idx) in row" :key="idx"> + <div v-if="col.value == 0"> + <!-- 瀛愯建閬� 璺緞涓虹┛姊溅棰勮璺緞鍒欐樉绀虹┛姊溅棰滆壊鍜岀┛姊溅鍙� --> + <div :style="{background: checkAdvancePath(index,idx) == null ? '':shuttleColorList[checkAdvancePath(index,idx)]}" class="item" v-if="col.data.length > 0">{{col.data}}</div> + <div :style="{background: checkAdvancePath(index,idx) == null ? '':shuttleColorList[checkAdvancePath(index,idx)]}" class="item" v-else>{{checkAdvancePath(index,idx) == null ? idx:checkAdvancePath(index,idx)}}</div> + </div> + <div v-else-if="col.value == 3"> + <!-- 姣嶈建閬� 璺緞涓虹┛姊溅棰勮璺緞鍒欐樉绀虹┛姊溅棰滆壊鍜岀┛姊溅鍙� --> + <div :style="{background: checkAdvancePath(index,idx) == null ? '#5af':shuttleColorList[checkAdvancePath(index,idx)]}" class="item">{{checkAdvancePath(index,idx) == null ? '⇅⇄':checkAdvancePath(index,idx)}}</div> + </div> + <div v-else-if="col.value == 4"> + <!-- 绔欑偣 --> + <div class="site" @click="openSite(col.data)">{{col.data}}</div> + </div> + <div v-else-if="col.value == 5"> + <!-- 鍏呯數妗� --> + <div class="item" style="font-size: 24px">⚡</div> + </div> + <div v-else-if="col.value < 0"> + <!-- 绂佹鏄剧ず鍖哄煙 --> + <div class="item" style="visibility: hidden">{{idx}}</div> + </div> + <div v-else-if="col.value == -999"> + <!-- 璺緞鍗犵敤鍖哄煙 --> + <div class="item" style="background:#f83333;color: #fff;">{{idx}}</div> + </div> + <div v-else> + <div class="item" v-if="col.data.length > 0">{{col.data}}</div> + <div class="item" v-else>{{idx}}-{{col.value}}</div> + </div> + </div> - <!-- 璐ф灦 + 鍫嗗灈鏈� + 鍏ュ簱绔欑偣 --> - <div class="main-part" id="mapDataId"> -<!-- <!– 绗竴缁� –>--> -<!-- <div class="lane" id="mapDataId" style="margin-bottom: 280px">--> + <div> + <!-- 鏄剧ず琛屽彿 --> + <div class="item" style="background: none;color: #000;">#{{index+1}}</div> + </div> + </div> -<!-- </div>--> - </div> - </main> - <footer class="footer"> - <!-- 鎬诲紑鍏� --> - <div class="system-state"> - <div class="body-head">鎬诲紑鍏�</div> - <div class="switch"> - <label id="system-toggle" class="toggle-switch" style="margin-left: 20px;"> - <input id="system-toggle-checked" checked="checked" type="checkbox"> - <div class="button"> - <div class="light"></div> - <div class="dots"></div> - <div class="characters"></div> - <div class="shine"></div> - <div class="shadow"></div> - </div> - </label> + <!--杈撳嚭灏忚溅--> + <div v-for="(car,idx) in currentLevShuttleList" + :style="{ + left: getCarPosition(car.wcsPoint.x,car.wcsPoint.y)[1] + ,top: getCarPosition(car.wcsPoint.x,car.wcsPoint.y)[0] + ,color: shuttleColorList[car.shuttleNo] + }" + class="sxcar" :id="'sxcar-' + car.shuttleNo"> + {{car.shuttleNo}} + </div> - <div class="switch_r"> - <p>绯荤粺鐘舵��</p> - <p id="system-run-desc">绯荤粺杩愯涓�</p> - </div> - </div> - </div> - <!-- 鍥涘悜绌挎杞︾姸鎬� --> - <div class="line-status"> - <div class="body-head">绌挎杞︾姸鎬�</div> - <div id="shuttle-status-box" style="height: 100px;overflow-y: scroll;overflow-x: hidden;"> - </div> - <div class="button"><span>鎵�鏈夌姸鎬�</span></div> - <div class="button item-group"> - <span class="shuttle-idle">绌洪棽</span> - <span class="shuttle-working">浣滀笟涓�</span> - <span class="shuttle-waiting">绛夊緟纭</span> - <span class="shuttle-charging">鍏呯數涓�</span> - <span class="shuttle-charging-waiting">鍏呯數浠诲姟绛夊緟纭</span> - <span class="shuttle-fixing">鏁呴殰淇涓�</span> - <span class="shuttle-offline">绂荤嚎</span> - </div> - </div> - <!-- 鎻愬崌鏈虹姸鎬� --> - <div class="line-status"> - <div class="body-head">鎻愬崌鏈虹姸鎬�</div> - <div id="lift-status-box" style="height: 120px;overflow-y: scroll;overflow-x: hidden;"> + </div> - </div> - <div class="button"><span>鎵�鏈夌姸鎬�</span></div> - <div class="button item-group"> - <span class="lift-idle">绌洪棽</span> - <span class="lift-working">浣滀笟涓�</span> - <span class="lift-waiting">绛夊緟纭</span> - <span class="lift-offline">绂荤嚎</span> - </div> - </div> - <!-- 杈撻�佺嚎鐘舵�� --> - <div class="line-status"> - <div class="body-head">杈撻�佺嚎鐘舵��</div> - <div class="state states"> - <span>杩愯緭绾挎�绘暟</span> - <span class="line-ss">9</span> - </div> - <div class="button"><span>鎵�鏈夌姸鎬�</span></div> - <div class="button item-group"> - <span class="site-auto-run-id">鑷姩+鏈夌墿+ID</span> - <span class="site-auto-run">鑷姩+鏈夌墿</span> - <span class="site-auto-id">鑷姩+ID</span> - <span class="site-auto">鑷姩</span> - <span class="site-unauto">闈炶嚜鍔�/鎵嬪姩</span> - </div> - </div> - <!-- 鏉$爜琛ㄦ牸 --> - <div class="bar-code"> - <div class="body-head" id="code">鏉$爜鎵弿鍣�</div> - <div class="tablebox"> - <div class="table-head"> - <li><span>鏉$爜鍚嶇О</span><span class="right">鎵爜鏃堕棿</span></li> - </div> - <div id="barcode1" class="table-body"> + <!--杈撳嚭妤煎眰--> + <div style="height: 100%;"> + <div class="floorBtnBox" v-for="(lev,idx) in floorList"> + <el-button @click="changFloor(lev)">{{lev}}F</el-button> + </div> + <div> + <el-button @click="testMove()">娴嬭瘯绉诲姩杞�</el-button> + </div> + </div> + </div> - </div> - </div> - <div class="tablebox"> - <div class="table-head"> - <li><span>鏉$爜鍚嶇О</span><span class="right">鎵爜鏃堕棿</span></li> - </div> - <div id="barcode2" class="table-body"> + <div class="footer"> + <!-- 鎬诲紑鍏� --> + <div class="line-status"> + <div class="body-head">鎬诲紑鍏�</div> + <div class="switch" @click="systemSwitch"> + <label id="system-toggle" class="toggle-switch" style="margin-left: 20px;"> + <input id="system-toggle-checked" disabled type="checkbox"> + <div class="button"> + <div class="light"></div> + <div class="dots"></div> + <div class="characters"></div> + <div class="shine"></div> + <div class="shadow"></div> + </div> + </label> - </div> - </div> - </div> - </footer> + <div class="switch_r"> + <p>绯荤粺鐘舵��</p> + <p id="system-run-desc">绯荤粺杩愯涓�</p> + </div> + </div> + </div> + <!-- 鍥涘悜绌挎杞︾姸鎬� --> + <div class="line-status"> + <div class="body-head">绌挎杞︾姸鎬�</div> + <div class="shuttle-status-box"> + <div v-for="(item,idx) in shuttleList" class="state"> + <span :style="{color: shuttleColorList[item.shuttleNo]}">鍥涘悜绌挎杞� {{item.shuttleNo}}</span> + <span v-if="item.protocolStatus == 1" + class="state-ss shuttle-idle">{{item.protocolStatus$}}</span> + <span v-else-if="item.protocolStatus == 2" + class="state-ss shuttle-working">{{item.protocolStatus$}}</span> + <span v-else-if="item.protocolStatus == 3" + class="state-ss shuttle-waiting">{{item.protocolStatus$}}</span> + <span v-else-if="item.protocolStatus == 4" + class="state-ss shuttle-charging">{{item.protocolStatus$}}</span> + <span v-else-if="item.protocolStatus == 5" + class="state-ss shuttle-charging-waiting">{{item.protocolStatus$}}</span> + <span v-else-if="item.protocolStatus == 6" + class="state-ss shuttle-fixing">{{item.protocolStatus$}}</span> + <span v-else-if="item.protocolStatus == 7" + class="state-ss shuttle-offline">{{item.protocolStatus$}}</span> + <span v-else class="state-ss shuttle-offline">{{item.protocolStatus$}}</span> + </div> + </div> + <div class="allStatus"><span>鎵�鏈夌姸鎬�</span></div> + <div class="allStatus item-group"> + <span class="shuttle-idle">绌洪棽</span> + <span class="shuttle-working">浣滀笟涓�</span> + <span class="shuttle-waiting">绛夊緟纭</span> + <span class="shuttle-charging">鍏呯數涓�</span> + <span class="shuttle-charging-waiting">鍏呯數浠诲姟绛夊緟纭</span> + <span class="shuttle-fixing">鏁呴殰淇涓�</span> + <span class="shuttle-offline">绂荤嚎</span> + </div> + </div> + <!-- 鎻愬崌鏈虹姸鎬� --> + <div class="line-status"> + <div class="body-head">鎻愬崌鏈虹姸鎬�</div> + <div class="lift-status-box"> + <div v-for="(item,idx) in liftList" class="state states"> + <span>鎻愬崌鏈� {{item.liftNo}}</span> + <span v-if="item.protocolStatus == 1" + class="state-ss lift-idle">{{item.protocolStatus$}}</span> + <span v-else-if="item.protocolStatus == 2" + class="state-ss lift-working">{{item.protocolStatus$}}</span> + <span v-else-if="item.protocolStatus == 3" + class="state-ss lift-waiting">{{item.protocolStatus$}}</span> + <span v-else-if="item.protocolStatus == 4" + class="state-ss lift-offline">{{item.protocolStatus$}}</span> + <span v-else class="state-ss lift-offline">{{item.protocolStatus$}}</span> + </div> + </div> + <div class="allStatus"><span>鎵�鏈夌姸鎬�</span></div> + <div class="allStatus item-group"> + <span class="lift-idle">绌洪棽</span> + <span class="lift-working">浣滀笟涓�</span> + <span class="lift-waiting">绛夊緟纭</span> + <span class="lift-offline">绂荤嚎</span> + </div> + </div> + <!-- 杈撻�佺嚎鐘舵�� --> + <div class="line-status"> + <div class="body-head">杈撻�佺嚎鐘舵��</div> + <div class="state states"> + <span>杩愯緭绾挎�绘暟</span> + <span class="line-ss">9</span> + </div> + <div class="allStatus"><span>鎵�鏈夌姸鎬�</span></div> + <div class="allStatus item-group"> + <span class="site-auto-run-id">鑷姩+鏈夌墿+ID</span> + <span class="site-auto-run">鑷姩+鏈夌墿</span> + <span class="site-auto-id">鑷姩+ID</span> + <span class="site-auto">鑷姩</span> + <span class="site-unauto">闈炶嚜鍔�/鎵嬪姩</span> + </div> + </div> + <!-- 鏉$爜琛ㄦ牸 --> + <div class="bar-code"> + <div class="body-head" id="code">鏉$爜鎵弿鍣�</div> + <div class="tablebox"> + <div class="table-head"> + <li><span>鏉$爜鍚嶇О</span><span class="right">鎵爜鏃堕棿</span></li> + </div> + <div id="barcode1" class="table-body"> - <!-- 鍫嗗灈鏈哄脊绐� --> - <div id="crnWindow" style="display: none;" class="animate__animated animate__fadeIn"> - <div id="crnWindow-head"> - <div class='detailed'></div> - <button></button> - </div> - <form> - <!-- 鍫嗗灈鏈哄彿 --> - <div class="form-item"> - <div class="form-item-label" style> - <span>鍫嗗灈鏈哄彿锛�</span> - </div> - <div class="form-item-input"> - <input type="text" name="crnNo" value=""> - </div> - </div> - <!-- 宸ヤ綔鍙� --> - <div class="form-item"> - <div class="form-item-label"> - <span>宸ヤ綔鍙凤細</span> - </div> - <div class="form-item-input"> - <input type="text" name="workNo" value=""> - </div> - </div> - <!-- 绔欐簮 --> - <div class="form-item"> - <div class="form-item-label"> - <span>绔欐簮锛�</span> - </div> - <div class="form-item-input"> - <input type="text" name="sourceStaNo" value=""> - </div> - </div> - <!-- 鐩爣绔� --> - <div class="form-item"> - <div class="form-item-label"> - <span>鐩爣绔欙細</span> - </div> - <div class="form-item-input"> - <input type="text" name="staNo" value=""> - </div> - </div> - <!-- 宸ヤ綔鐘舵�� --> - <div class="form-item"> - <div class="form-item-label"> - <span>宸ヤ綔鐘舵�侊細</span> - </div> - <div class="form-item-input"> - <input type="text" name="wrkSts" value=""> - </div> - </div> - <!-- 鍑哄叆绫诲瀷 --> - <div class="form-item"> - <div class="form-item-label"> - <span>鍑哄叆绫诲瀷锛�</span> - </div> - <div class="form-item-input"> - <input type="text" name="ioType" value=""> - </div> - </div> - <!-- 婧愬簱浣� --> - <div class="form-item"> - <div class="form-item-label"> - <span>婧愬簱浣嶏細</span> - </div> - <div class="form-item-input"> - <input type="text" name="sourceLocNo" value=""> - </div> - </div> - <!-- 鐩爣搴撲綅 --> - <div class="form-item"> - <div class="form-item-label"> - <span>鐩爣搴撲綅锛�</span> - </div> - <div class="form-item-input"> - <input type="text" name="locNo" value=""> - </div> - </div> - <!-- 鍫嗗灈鏈虹姸鎬� --> - <div class="form-item"> - <div class="form-item-label"> - <span>鍫嗗灈鏈虹姸鎬侊細</span> - </div> - <div class="form-item-input"> - <input type="text" name="crnStatus" value=""> - </div> - </div> - <!-- 寮傚父 --> - <div class="form-item"> - <div class="form-item-label"> - <span>寮傚父锛�</span> - </div> - <div class="form-item-input"> - <input type="text" name="error" value=""> - </div> - </div> - </form> - </div> + </div> + </div> + <div class="tablebox"> + <div class="table-head"> + <li><span>鏉$爜鍚嶇О</span><span class="right">鎵爜鏃堕棿</span></li> + </div> + <div id="barcode2" class="table-body"> - <!-- 杈撻�佽澶囧脊绐� --> - <div id="siteWindow" style="display: none;" class="animate__animated animate__fadeIn"> - <!-- 琛ㄥご --> - <div id="siteWindow-head"> - <div class='detailed'></div> - <button></button> - </div> - <form> - <!-- 璁惧鍙� --> - <div class="form-item" > - <div class="form-item-label"> - <span>璁惧鍙凤細</span> - </div> - <div class="form-item-input"> - <input type="text" name="siteId" value=""> - </div> - </div> - <!-- 宸ヤ綔鍙� --> - <div class="form-item"> - <div class="form-item-label"> - <span>宸ヤ綔鍙凤細</span> - </div> - <div class="form-item-input"> - <input type="text" name="workNo" value=""> - </div> - </div> - <!-- 宸ヤ綔鐘舵�� --> - <div class="form-item"> - <div class="form-item-label"> - <span>宸ヤ綔鐘舵�侊細</span> - </div> - <div class="form-item-input"> - <input type="text" name="wrkSts" value=""> - </div> - </div> - <!-- 鑷姩 --> - <div class="form-item-checkbox"> - <div class="form-item-label-checkbox"> - <span>鑷姩</span> - </div> - <div class="form-item-input-checkbox"> - <input type="checkbox" name="autoing"> - </div> - </div> - <!-- 鏈夌墿 --> - <div class="form-item-checkbox"> - <div class="form-item-label-checkbox"> - <span>鏈夌墿</span> - </div> - <div class="form-item-input-checkbox"> - <input type="checkbox" name="loading"> - </div> - </div> - <!-- 鑳藉叆 --> - <div class="form-item-checkbox"> - <div class="form-item-label-checkbox"> - <span>鑳藉叆</span> - </div> - <div class="form-item-input-checkbox"> - <input type="checkbox" name="canining"> - </div> - </div> - <!-- 鑳藉嚭 --> - <div class="form-item-checkbox"> - <div class="form-item-label-checkbox"> - <span>鑳藉嚭</span> - </div> - <div class="form-item-input-checkbox"> - <input type="checkbox" name="canouting"> - </div> - </div> - <!-- 鍑哄叆绫诲瀷 --> - <div class="form-item"> - <div class="form-item-label"> - <span>鍑哄叆绫诲瀷锛�</span> - </div> - <div class="form-item-input"> - <input type="text" name="ioType" value=""> - </div> - </div> - <!-- 婧愮珯 --> - <div class="form-item"> - <div class="form-item-label"> - <span>婧愮珯锛�</span> - </div> - <div class="form-item-input"> - <input type="text" name="sourceStaNo" value=""> - </div> - </div> - <!-- 鐩爣绔� --> - <div class="form-item"> - <div class="form-item-label"> - <span>鐩爣绔欙細</span> - </div> - <div class="form-item-input"> - <input type="text" name="staNo" value=""> - </div> - </div> - <!-- 婧愬簱浣� --> - <div class="form-item"> - <div class="form-item-label"> - <span>婧愬簱浣嶏細</span> - </div> - <div class="form-item-input"> - <input type="text" name="sourceLocNo" value=""> - </div> - </div> - <!-- 鐩爣搴撲綅 --> - <div class="form-item"> - <div class="form-item-label"> - <span>鐩爣搴撲綅锛�</span> - </div> - <div class="form-item-input"> - <input type="text" name="locNo" value=""> - </div> - </div> + </div> + </div> + </div> + </div> - </form> - </div> -</div> -</body> + <!-- 杈撻�佽澶囧脊绐� --> + <div id="siteWindow" :style="{display:siteWindow?'block':'none'}" class="animate__animated animate__fadeIn"> + <!-- 琛ㄥご --> + <div id="siteWindow-head"> + <div class="detailed"></div> + <button @click="siteWindow = false"></button> + </div> + <!-- 琛ㄥ唴瀹� --> + <div class="siteWindow-body"> + <form> + <!-- 璁惧鍙� --> + <div class="form-item"> + <div class="form-item-label"> + <span>璁惧鍙凤細</span> + </div> + <div class="form-item-input"> + <input type="text" name="siteId" value=""> + </div> + </div> + <!-- 宸ヤ綔鍙� --> + <div class="form-item"> + <div class="form-item-label"> + <span>宸ヤ綔鍙凤細</span> + </div> + <div class="form-item-input"> + <input type="text" name="workNo" value=""> + </div> + </div> + <!-- 宸ヤ綔鐘舵�� --> + <div class="form-item"> + <div class="form-item-label"> + <span>宸ヤ綔鐘舵�侊細</span> + </div> + <div class="form-item-input"> + <input type="text" name="wrkSts" value=""> + </div> + </div> + <div class="form-item"> + <!-- 鑷姩 --> + <div class="form-item-checkbox"> + <div class="form-item-label-checkbox"> + <span>鑷姩</span> + </div> + <div class="form-item-input-checkbox"> + <input type="checkbox" name="autoing"> + </div> + </div> + <!-- 鏈夌墿 --> + <div class="form-item-checkbox"> + <div class="form-item-label-checkbox"> + <span>鏈夌墿</span> + </div> + <div class="form-item-input-checkbox"> + <input type="checkbox" name="loading"> + </div> + </div> + <!-- 鑳藉叆 --> + <div class="form-item-checkbox"> + <div class="form-item-label-checkbox"> + <span>鑳藉叆</span> + </div> + <div class="form-item-input-checkbox"> + <input type="checkbox" name="canining"> + </div> + </div> + <!-- 鑳藉嚭 --> + <div class="form-item-checkbox"> + <div class="form-item-label-checkbox"> + <span>鑳藉嚭</span> + </div> + <div class="form-item-input-checkbox"> + <input type="checkbox" name="canouting"> + </div> + </div> + </div> + <!-- 鍑哄叆绫诲瀷 --> + <div class="form-item"> + <div class="form-item-label"> + <span>鍑哄叆绫诲瀷锛�</span> + </div> + <div class="form-item-input"> + <input type="text" name="ioType" value=""> + </div> + </div> + <!-- 婧愮珯 --> + <div class="form-item"> + <div class="form-item-label"> + <span>婧愮珯锛�</span> + </div> + <div class="form-item-input"> + <input type="text" name="sourceStaNo" value=""> + </div> + </div> + <!-- 鐩爣绔� --> + <div class="form-item"> + <div class="form-item-label"> + <span>鐩爣绔欙細</span> + </div> + <div class="form-item-input"> + <input type="text" name="staNo" value=""> + </div> + </div> + <!-- 婧愬簱浣� --> + <div class="form-item"> + <div class="form-item-label"> + <span>婧愬簱浣嶏細</span> + </div> + <div class="form-item-input"> + <input type="text" name="sourceLocNo" value=""> + </div> + </div> + <!-- 鐩爣搴撲綅 --> + <div class="form-item"> + <div class="form-item-label"> + <span>鐩爣搴撲綅锛�</span> + </div> + <div class="form-item-input"> + <input type="text" name="locNo" value=""> + </div> + </div> + </form> + </div> + </div> + + </div> + <script> + var app = new Vue({ + el: '#app', + data: { + map: [],//鍦板浘鏁版嵁 + currentLev: 1,//鍦板浘褰撳墠妤煎眰 + siteWindow: false, //绔欑偣寮圭獥鏄剧ず榛樿涓嶆樉绀� + floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //褰撳墠椤圭洰妤煎眰 + shuttleList: [], //鍥涘悜绌挎杞﹂泦鍚� + currentLevShuttleList: [],//褰撳墠妤煎眰鍥涘悜绌挎杞﹂泦鍚� + shuttleColorList: [],//鍥涘悜绌挎杞﹂鑹查泦鍚� + liftList: [], //鎻愬崌鏈洪泦鍚� + systemStatus: true,//绯荤粺杩愯鐘舵�� + consoleInterval: null,//瀹氭椂鍣ㄥ瓨鍌ㄥ彉閲� + }, + created() { + this.init() + }, + watch: { + + }, + methods: { + init() { + this.getMap(this.currentLev) + this.getSystemRunningStatus() //鑾峰彇绯荤粺杩愯鐘舵�� + + this.consoleInterval = setInterval(() => { + this.getShuttleStateInfo() //鑾峰彇鍥涘悜绌挎杞︿俊鎭� + this.getLiftStateInfo() //鑾峰彇鎻愬崌鏈轰俊鎭� + console.log('interval') + }, 1000) + }, + //鑾峰彇鍦板浘鏁版嵁 + getMap(lev) { + $.ajax({ + type: "get", + url: baseUrl + "/console/map/" + lev + "/auth", + headers: { + 'token': localStorage.getItem('token') + }, + success: (res) => { + let data = res.data + let tmp = [] + for (let i = 1; i < data.length - 1; i++) { + tmp.push(data[i]) + } + this.map = tmp + } + }) + }, + openSite(id) { + this.siteWindow = true; //鎵撳紑绔欑偣淇℃伅寮圭獥 + $(".detailed").empty(); + $('.detailed').append(id + '绔欑偣璇︾粏淇℃伅'); + $.ajax({ + url: baseUrl + "/console/site/detail", + headers: { + 'token': localStorage.getItem('token') + }, + data: { + siteId: id + }, + method: 'post', + success: function(res) { + for (var val in res.data) { + var find = $("#siteWindow").find(":input[name='" + val + "']"); + if (find[0].type === 'text') { + find.val(res.data[val]); + } else if (find[0].type === 'checkbox') { + find.attr("checked", res.data[val] === 'Y'); + } + } + } + + }) + }, + changFloor(lev) { + this.currentLev = lev + this.currentLevShuttleList = [] + this.getMap(lev) + }, + getShuttleStateInfo() { + // 鍥涘悜绌挎杞︿俊鎭〃鑾峰彇 + let that = this + $.ajax({ + url: baseUrl + "/shuttle/table/shuttle/state", + headers: { + 'token': localStorage.getItem('token') + }, + method: 'POST', + success: function(res) { + if (res.code == 200) { + let currentLevShuttle = []//褰撳墠妤煎眰灏忚溅闆嗗悎 + res.data.forEach((item,idx) => { + if (item.point.z == that.currentLev) { + currentLevShuttle.push(item) + } + }) + that.currentLevShuttleList = currentLevShuttle + that.shuttleList = res.data + + if (that.shuttleColorList.length == 0) { + let colorList = []//闅忔満灏忚溅棰滆壊 + res.data.forEach((item,idx) => { + colorList[item.shuttleNo] = that.colorRGB() + }) + that.shuttleColorList = colorList + } + } + } + }); + }, + getLiftStateInfo() { + // 鎻愬崌鏈轰俊鎭〃鑾峰彇 + let that = this + $.ajax({ + url: baseUrl + "/lift/table/lift/state", + headers: { + 'token': localStorage.getItem('token') + }, + method: 'POST', + success: function(res) { + if (res.code == 200) { + that.liftList = res.data + } + } + }); + }, + systemSwitch() { + // 绯荤粺寮�鍏� + let that = this + if (this.systemStatus) { + this.$prompt('璇疯緭鍏ュ彛浠わ紝骞跺仠姝CS绯荤粺', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + }).then(({ + value + }) => { + that.doSwitch(0, value) + }).catch(() => { + + }); + } else { + this.doSwitch(1) + } + }, + doSwitch(operatorType, password) { + let that = this + $.ajax({ + url: baseUrl + "/console/system/switch", + headers: { + 'token': localStorage.getItem('token') + }, + data: { + operatorType: operatorType, + password: password + }, + method: 'POST', + success: function(res) { + if (res.code === 200) { + if (res.data.status) { + $('#system-toggle-checked').attr("checked", true); + $('#system-run-desc').html("绯荤粺杩愯涓�..."); + that.systemStatus = true; + } else { + $('#system-toggle-checked').attr("checked", false); + $('#system-run-desc').html("绯荤粺宸插仠姝�!"); + that.systemStatus = false; + } + } else if (res.code === 403) { + parent.location.href = baseUrl + "/login"; + } else { + that.$message({ + message: res.msg, + type: 'error' + }); + } + } + }); + }, + getSystemRunningStatus() { + // 鑾峰彇wcs绯荤粺杩愯鐘舵�� + let that = this + $.ajax({ + url: baseUrl + "/console/system/running/status", + headers: { + 'token': localStorage.getItem('token') + }, + method: 'POST', + success: function(res) { + if (res.code === 200) { + if (res.data.status) { + $('#system-toggle-checked').attr("checked", true); + $('#system-run-desc').html("绯荤粺杩愯涓�..."); + that.systemStatus = true; + } else { + $('#system-toggle-checked').attr("checked", false); + $('#system-run-desc').html("绯荤粺宸插仠姝�!"); + that.systemStatus = false; + } + } else if (res.code === 403) { + parent.location.href = baseUrl + "/login"; + } else { + that.$message({ + message: res.msg, + type: 'error' + }); + } + } + }); + }, + getCarPosition(x,y) { + //璁$畻鍥涘悜绌挎杞﹀浘鏍囦綅缃� + let top = (x * 35 - 35) + "px" //闇�瑕佸噺鍘诲皬杞﹁嚜宸辨墍鍗犻珮搴� + let left = (y * 35) + "px" //闇�瑕佸噺鍘诲皬杞﹁嚜宸辨墍鍗犲搴� + return [top,left]; + }, + testMove() { + let that = this + clearInterval(this.consoleInterval)//娓呯悊瀹氭椂鍣� + + let shuttleList = this.currentLevShuttleList + $.ajax({ + url: baseUrl + "/static/testMoveData.json", + headers: { + 'token': localStorage.getItem('token') + }, + method: 'GET', + success: function(res) { + shuttleList[0].moveAdvancePath = res + that.currentLevShuttleList = shuttleList + + let index = 0 + let tmp = null + tmp = setInterval(() => { + if (index < res.length) { + that.currentLevShuttleList[0].wcsPoint.y = res[index].y + that.currentLevShuttleList[0].wcsPoint.x = res[index].x + index++ + }else { + clearInterval(tmp) + that.init() + } + },1000) + } + }); + }, + colorRGB(){ + //闅忔満棰滆壊 + const r = Math.floor(Math.random()*256); + const g = Math.floor(Math.random()*256); + const b = Math.floor(Math.random()*256); + return `rgb(${r},${g},${b})`; + }, + checkAdvancePath(x,y) { + //妫�娴嬭矾寰勬槸鍚︿负绌挎杞﹂璁¤矾寰勶紝濡倄鍜寉璺緞鏄┛姊溅棰勮璺緞锛屽垯杩斿洖灏忚溅鍙� + this.currentLevShuttleList.forEach((item,idx) => { + if (item.moveAdvancePath != null) { + item.moveAdvancePath.forEach((path,index) => { + if (path.x === x && path.y === y) { + return item.shuttleNo; + } + }) + } + }) + let shuttleList = this.currentLevShuttleList; + for (var i = 0; i < shuttleList.length; i++) { + let shuttle = shuttleList[i] + let moveAdvancePath = shuttle.moveAdvancePath + if (moveAdvancePath != null) { + for (var j = 0; j < moveAdvancePath.length; j++) { + let path = moveAdvancePath[j] + if (path.x-1 === x && path.y === y) {//璺緞绗﹀悎 + return shuttle.shuttleNo;//杩斿洖灏忚溅鍙� + } + } + } + } + return null; + } + } + }) + </script> + </body> </html> -<script> - var tData = [] - var tData1 = [] - var tData2 = [] - var tData3 = [] - var mapData = [] //鍦板浘鏁版嵁 - var currentLev = 1;//褰撳墠鍦板浘妤煎眰 - function getCodeData(){ - $.ajax({ - url:baseUrl +'/console/barcode/output/site', - method:'GET', - success:function (res) { - if(res.code === 200){ - tData = eval(res.data); - if(tData.length<=5){ - tData1 = tData - } else if (tData.length<=10){ - tData1 = tData.slice(0,5) - // tData.splice(0,4) - tData2 = tData.splice(5,10) - } else if(tData.length<=15){ - tData1 = tData.slice(0,5) - tData2 = tData.slice(5,10) - // tData.splice(0,10) - tData3 = tData.slice(10,15) - } else { - tData1 = tData.slice(0,5) - tData2 = tData.slice(5,10) - tData3 = tData.slice(10,15) - // tData = tData.slice(-15) - // tData1 = tData.slice(-15) - // tData2 = tData.slice(-10) - // tData3 = tData.slice(-5) - - } - } - } - }) - } - setInterval(function () { - getCodeData(); - renderBarCode(); - }, 1000) - - - function renderBarCode() { - for (var i = 0;i<tData1.length;i++){ - var str1 = '<li><span>' + tData1[i].barcode + '</span><span class="right">' + tData1[i].time + '</span></li>' - $('#barcode1').append(str1) - } - for(var j = 0;j<tData2.length;j++){ - var str2 = '<li><span>' + tData2[j].barcode + '</span><span class="right">' + tData2[j].time + '</span></li>' - $('#barcode2').append(str2) - } - for(var k = 0;k<tData3.length;k++){ - var str3 = '<li><span>' + tData3[k].barcode + '</span><span class="right">' + tData3[k].time + '</span></li>' - $('#barcode3').append(str3) - } - } - - - $(function (){ - initMap(1) - }) - - setInterval(() => { - getShuttleStateInfo() - getLiftStateInfo() - },1000) - - // 鎻愬崌鏈轰俊鎭〃鑾峰彇 - function getLiftStateInfo() { - $.ajax({ - url: baseUrl+ "/lift/table/lift/state", - headers: {'token': localStorage.getItem('token')}, - method: 'POST', - success: function (res) { - $("#lift-status-box").empty() - res.data.forEach((item,index) => { - let liftStatusClass = "lift-idle" - switch (item.protocolStatus) { - case 1://绌洪棽 - liftStatusClass = "lift-idle"; - break - case 2://浣滀笟涓� - liftStatusClass = "lift-working"; - break - case 3://绛夊緟纭 - liftStatusClass = "lift-waiting"; - break - case 4://绂荤嚎 - liftStatusClass = "lift-offline"; - break - default: - liftStatusClass = "lift-idle" - } - let liftStatus = '<div class="state states">' + - '<span>鎻愬崌鏈� ' + item.liftNo + '</span>' + - '<span class="state-ss ' + liftStatusClass + '">' + item.protocolStatus$ + '</span></div>'; - $("#lift-status-box").append(liftStatus) - - }) - } - }); - } - - // 鍥涘悜绌挎杞︿俊鎭〃鑾峰彇 - function getShuttleStateInfo() { - $.ajax({ - url: baseUrl+ "/shuttle/table/shuttle/state", - headers: {'token': localStorage.getItem('token')}, - method: 'POST', - success: function (res) { - $("#shuttle-status-box").empty() - res.data.forEach((item,index) => { - let shuttleStatusClass = "shuttle-idle" - switch (item.protocolStatus) { - case 1://绌洪棽 - shuttleStatusClass = "shuttle-idle"; - break - case 2://浣滀笟涓� - shuttleStatusClass = "shuttle-working"; - break - case 3://绛夊緟纭 - shuttleStatusClass = "shuttle-waiting"; - break - case 4://鍏呯數涓� - shuttleStatusClass = "shuttle-charging"; - break - case 5://鍏呯數浠诲姟绛夊緟纭 - shuttleStatusClass = "shuttle-charging-waiting"; - break - case 6://鏁呴殰淇涓� - shuttleStatusClass = "shuttle-fixing"; - break - case 7://绂荤嚎 - shuttleStatusClass = "shuttle-offline"; - break - default: - shuttleStatusClass = "shuttle-offline" - } - let shuttleStatus = '<div class="state">' + - '<span>鍥涘悜绌挎杞� ' + item.shuttleNo + '</span>' + - '<span class="state-ss ' + shuttleStatusClass + '">' + item.protocolStatus$ + '</span></div>'; - $("#shuttle-status-box").append(shuttleStatus) - - if(item.wcsPoint.z != currentLev){ - //鍥涘悜绌挎杞︽ゼ灞傚拰褰撳墠鍦板浘妤煎眰涓嶄竴鑷达紝鍒犻櫎璇ヨ溅杈� - $("#sxcar-" + item.shuttleNo).remove() - }else { - //绉诲姩鍥涘悜绌挎杞� - moveCar(item.shuttleNo,item.wcsPoint.x,item.wcsPoint.y) - } - }) - } - }); - } - - //璁$畻鍥涘悜绌挎杞﹀浘鏍囦綅缃� - function getCarPosition(x,y) { - let top = (x * 35 - 35) + "px" //闇�瑕佸噺鍘诲皬杞﹁嚜宸辨墍鍗犻珮搴� - let left = (y * 35 - 35) + "px" //闇�瑕佸噺鍘诲皬杞﹁嚜宸辨墍鍗犲搴� - return [top,left]; - } - - //绉诲姩鍥涘悜绌挎杞﹀浘鏍� - function moveCar(id,x,y) { - //鑾峰彇鍏蜂綋浣嶇疆top鍜宭eft鍊� - let position = getCarPosition(x,y) - let top = position[0] - let left = position[1] - $("#sxcar-" + id).animate({top: top,left: left}, 1000); - } - - //鍒濆鍖栧湴鍥� - function initMap(lev) { - getMap(lev) - - $.ajax({ - url: baseUrl+ "/shuttle/table/shuttle/state", - headers: {'token': localStorage.getItem('token')}, - method: 'POST', - success: function (res) { - res.data.forEach((item,index) => { - if(lev == item.wcsPoint.z){ - let carBox = '<div class="sxcar" id="sxcar-' + item.shuttleNo + '">' + item.shuttleNo + '</div>' - $("#mapDataId").append(carBox) - } - }) - } - }); - } - - //鑾峰彇鍦板浘鏁版嵁 - function getMap(lev) { - //姣嶈建閬撶涓�娆$储寮曪紝鐢ㄤ簬瀹氫綅灏忚溅 - let firstMotherIndex = [0,0]; - $("#mapDataId").empty() - $.ajax({ - type:"get", - // url: baseUrl + "/static/js/map_" + lev + ".json", - url: baseUrl + "/console/map/" + lev + "/auth", - headers: {'token': localStorage.getItem('token')}, - success: (res) => { - let data = res.data - mapData = data - let content = "" - data.forEach((rowData,index) => { - //鍘绘帀涓婁笅杈圭紭绂佸尯 - if(!(index == 0 || data.length - 1 == index)){ - let row = '<div class="stock-group">'; - rowData.forEach((colData,idx) => { - //鍘绘帀宸﹀彸杈圭紭绂佸尯 - if(!(idx == 0 || rowData.length - 1 == idx)){ - let col; - switch (colData.value){ - case -999: - col = '<button class="item" style="background:#f83333;color: #fff;">' + idx + '</button>'; - break; - case -1: - col = '<button class="item" style="visibility: hidden">' + idx + '</button>'; - break; - case 3: - //姣嶈建閬� - col = '<button class="item" style="background: #5af;">⇅⇄</button>'; - if (firstMotherIndex[0] === 0 && firstMotherIndex[1] === 0) { - //绗竴娆¢亣鍒版瘝杞ㄩ亾锛屽垯淇濆瓨璇ヨ建閬撳湴鍧�(鐢ㄤ簬灏忚溅鍒濆鍖栧畾浣�) - firstMotherIndex = [index,idx] - } - break; - case 4: - //绔欑偣 - var data = colData.data; - col = '<div id="site-' + data + '" class="site">' + data + '</div>'; - break; - case 5: - //鍏呯數妗� - col = '<button class="item" style="font-size: 24px">⚡</button>'; - break; - default: - let val = idx; - if (colData.data.length > 0) { - val = colData.data - } - col = '<button class="item">' + val + '</button>'; - } - - if(rowData.length - 2 == idx){ - //鎵撲笂琛屾暟鏍囪 - col += '<span class="row-no">' + index + '#</span>'; - } - row += col - } - }) - row += '</div>'; - content += row - } - }) - - $("#mapDataId").append(content) - } - }) - } - - //灏嗗湴鍥炬暟鎹浆鎹㈡垚int浜岀淮鏁扮粍(鍚庣画鐢ㄤ簬璇锋眰璁$畻璺緞鏃舵惡甯﹀湴鍥炬暟鎹弬鏁颁娇鐢�) - function getMap2TwoArr() { - let data = [] - mapData.forEach((item,index) => { - let data2 = [] - item.forEach((val,idx) => { - data2.push(val.value) - }) - data.push(data2) - }) - - return data; - } - - function testMove() { - getMap2TwoArr()//娴嬭瘯鍦板浘鏁版嵁杞崲鏄惁姝e父 - let json = "[{\"x\":5,\"y\":5},{\"x\":6,\"y\":5},{\"x\":7,\"y\":5},{\"x\":8,\"y\":5},{\"x\":9,\"y\":5},{\"x\":10,\"y\":5},{\"x\":11,\"y\":5},{\"x\":11,\"y\":6},{\"x\":12,\"y\":6},{\"x\":13,\"y\":6},{\"x\":14,\"y\":6},{\"x\":15,\"y\":6},{\"x\":16,\"y\":6}]"; - json = JSON.parse(json) - json.forEach((item,index) => { - moveCar(1, item.x, item.y); - }) - } - - /** - * 閲嶇疆鍦板浘 - */ - function resetMap() { - $.ajax({ - url:baseUrl+"/console/map/resetMap/auth", - headers:{ - 'token': localStorage.getItem('token') - }, - data:{}, - method:'get', - success:function (res) { - layer.msg('閲嶇疆瀹屾垚'); - } - }) - } - - // 灏忚溅鍋忕Щ鍔ㄧ敾 - function carAnimate(id, target) { - if (id === 1000) { - let targetTop = 130; - switch (target) { - case 110: - targetTop += 0; - break; - case 109: - targetTop += 60; - break; - case 108: - targetTop += 100; - break; - case 107: - targetTop += 180; - break; - case 106: - targetTop += 220; - break; - default: - return; - } - $("#site-" + id).animate({top: targetTop+'px'}, 1000); - } else if (id === 2000) { - let targetTop = 130; - switch (target) { - case 226: - targetTop += 0; - break; - case 225: - targetTop += 60; - break; - case 224: - targetTop += 100; - break; - case 223: - targetTop += 180; - break; - case 222: - targetTop += 220; - break; - case 214: - targetTop += 280; - break; - case 220: - targetTop += 320; - break; - default: - return; - } - $("#site-" + id).animate({top: targetTop+'px'}, 1000); - } - } -</script> -<script type="text/javascript"> - // 寮圭獥绔欑偣淇℃伅 - $('#mapDataId').on('click','.site',function(){ - var id = this.id.split("-")[1]; - $("#siteWindow").attr("style","display:block;");//鏄剧ずdiv - $("#crnWindow").attr("style","display:none;"); - $(".detailed").empty(); - $('.detailed').append(id+'绔欑偣璇︾粏淇℃伅'); - $.ajax({ - url:baseUrl+"/console/site/detail", - headers:{ - 'token': localStorage.getItem('token') - }, - data:{ - siteId: id - }, - method:'post', - success:function (res) { - for (var val in res.data) { - var find = $("#siteWindow").find(":input[name='" + val + "']"); - if (find[0].type==='text') { - find.val(res.data[val]); - } else if (find[0].type === 'checkbox') { - find.attr("checked", res.data[val] === 'Y'); - } - } - } - - }) - - }); - // 鍫嗗灈鏈轰俊鎭� - $('.machine').on('click',function(){ - var id = this.id.split("-")[1]; - $("#crnWindow").attr('style','display:block;'); - $("#siteWindow").attr("style","display:none;"); - $('.detailed').empty(); - $('.detailed').append(id+'鍙峰爢鍨涙満'); - $.ajax({ - url:baseUrl+"/console/crn/detail", - headers:{ - 'token': localStorage.getItem('token') - }, - data:{ - crnNo: id - }, - method:'post', - success:function (res) { - for (var val in res.data) { - var find = $("#crnWindow").find(":input[name='" + val + "']"); - if (find[0].type==='text') { - find.val(res.data[val]); - } else if (find[0].type === 'checkbox') { - find.attr("checked", res.data[val] === 'Y'); - } - } - } - - }) - - }) - // 寮圭獥鍏抽棴 - $('button').on('click',function(){ - $('#siteWindow').attr('style','display:none') - $('#crnWindow').attr('style','display:none') - }) - - - var crn1Position = 0; - var crn2Position = 0; - var crn3Position = 0; - var crn4Position = 0; - var crn5Position = 0; - - // 鍒濆鍖� - getSitesInfo(); - getCrnInfo(); - getSystemRunningStatus(); - getBarcodeInfo(); - getScaleInfo(); - // 瀹炴椂璁块棶 - setInterval(function () { - getCrnInfo(); - getSystemRunningStatus(); - getBarcodeInfo(); - getScaleInfo(); - }, 1000); - setInterval(function () { - getSitesInfo(); - }, 3000); - - $("#system-toggle").on("click",(e) => { - systemSwitch() - e.stopPropagation();//琛ㄧず闃绘鍚戠埗鍏冪礌鍐掓场 - e.preventDefault();//闃绘 鏂规硶闃绘鍏冪礌鍙戠敓榛樿鐨勮涓猴紙渚嬪锛屽綋鐐瑰嚮鎻愪氦鎸夐挳鏃堕樆姝㈠琛ㄥ崟鐨勬彁浜ゆ垨鑰卆鏍囩锛夈�� - }) - - // 绯荤粺杩愯寮�鍏� - function systemSwitch() { - if (parent.systemRunning){ - layer.prompt({title: '璇疯緭鍏ュ彛浠わ紝骞跺仠姝� WCS 绯荤粺', formType: 1, shadeClose: true}, function(pass, idx){ - layer.close(idx); - doSwitch(0, pass); // 鍋滄wcs绯荤粺 - }); - } else { - doSwitch(1); // 鍚姩wcs绯荤粺 - } - } - - // 璇锋眰鏈嶅姟鍣ㄦ帶鍒秝cs绯荤粺杩愯鐘舵�� - function doSwitch(operatorType, password) { - // 鍔犺浇tips - var index = layer.load(1, { - shade: [0.1,'#fff'] - }); - $.ajax({ - url: baseUrl+ "/console/system/switch", - headers: {'token': localStorage.getItem('token')}, - // async: false, - data: { - operatorType: operatorType, - password: password - }, - method: 'POST', - success: function (res) { - layer.close(index); - if (res.code === 200){ - if (res.data.status) { - $('#system-toggle-checked').attr("checked", true); - $('#system-run-desc').html("绯荤粺杩愯涓�..."); - parent.systemRunning = true; - } else { - $('#system-toggle-checked').attr("checked", false); - $('#system-run-desc').html("绯荤粺宸插仠姝�!"); - parent.systemRunning = false; - } - } else if (res.code === 403){ - parent.location.href = baseUrl+"/login"; - } else { - console.log(res.msg); - - } - } - }); - - } - - // 鑾峰彇wcs绯荤粺杩愯鐘舵�� - function getSystemRunningStatus() { - $.ajax({ - url: baseUrl+ "/console/system/running/status", - headers: {'token': localStorage.getItem('token')}, - method: 'POST', - success: function (res) { - if (res.code === 200){ - if (res.data.status) { - $('#system-toggle-checked').attr("checked", true); - $('#system-run-desc').html("绯荤粺杩愯涓�..."); - parent.systemRunning = true; - } else { - $('#system-toggle-checked').attr("checked", false); - $('#system-run-desc').html("绯荤粺宸插仠姝�!"); - parent.systemRunning = false; - } - } else if (res.code === 403){ - parent.location.href = baseUrl+"/login"; - } else { - console.log(res.msg); - } - } - }); - } - - // 杈撻�佽澶囧疄鏃舵暟鎹幏鍙� - function getSitesInfo(){ - $.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; - for (var i = 0; i < sites.length; i++){ - var siteEl = $("#site-"+sites[i].siteId); - siteEl.attr("class", "site " + sites[i].siteStatus); - if (sites[i].workNo != null && sites[i].workNo>0) { - siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]"); - } else { - siteEl.html(sites[i].siteId); - } - if (i+1===8) { - carAnimate(i+1, Number(sites[i].nearbySta)); - } - } - } else if (res.code === 403){ - parent.location.href = baseUrl+"/login"; - } else { - console.log(res.msg); - } - } - }); - } - - // 鍫嗗灈鏈哄疄鏃舵暟鎹幏鍙� - function getCrnInfo(){ - $.ajax({ - url: baseUrl+ "/console/latest/data/crn", - headers: {'token': localStorage.getItem('token')}, - method: 'POST', - success: function (res) { - if (res.code === 200){ - var crns = res.data; - for (var i = 0; i < crns.length; i++){ - var crnEl = $("#crn-"+crns[i].crnId); - crnEl.attr("class", "machine " + crns[i].crnStatus); - var unit = ($('.item').eq(0).width()+4)/2; - crnEl.animate({left: (crns[i].bay * unit + 25) +'px'}, 1000); - } - } else if (res.code === 403){ - parent.location.href = baseUrl+"/login"; - } else { - console.log(res.msg); - } - } - }); - } - - // 鎵爜鍣ㄥ疄鏃舵暟鎹幏鍙� - function getBarcodeInfo(){ - $.ajax({ - url: baseUrl+ "/console/latest/data/barcode", - headers: {'token': localStorage.getItem('token')}, - method: 'POST', - success: function (res) { - if (res.code === 200){ - var barcodes = res.data; - for (var i = 0; i < barcodes.length; i++){ - $("#code-decoder-data-"+barcodes[i].barcodeId).html(barcodes[i].codeValue); - } - } else if (res.code === 403){ - parent.location.href = baseUrl+"/login"; - } else { - console.log(res.msg); - } - } - }); - } - - // 纾呯Г瀹炴椂鏁版嵁鑾峰彇 - function getScaleInfo(){ - $.ajax({ - url: baseUrl+ "/console/latest/data/scale", - headers: {'token': localStorage.getItem('token')}, - method: 'POST', - success: function (res) { - - if (res.code === 200){ - var sclaes = res.data; - for (var i = 0; i < sclaes.length; i++){ - console.log(sclaes[i].scaleId + ":" + sclaes[i].value) - $("#scale-data-"+sclaes[i].scaleId).text(sclaes[i].value); - } - } else if (res.code === 403){ - parent.location.href = baseUrl+"/login"; - } else { - console.log(res.msg); - } - } - }); - } - - // 灏忚溅鍋忕Щ鍔ㄧ敾 - function carAnimate(id, target) { - var targetTop = 122; - if (id === 8) { - switch (target) { - case 1: - targetTop += 160; - break; - case 2: - targetTop += 140; - break; - case 3: - targetTop += 80; - break; - case 4: - targetTop += 40; - break; - case 7: - targetTop += 0; - break; - default: - return; - } - } else { - return; - } - $("#site-" + id).animate({top: targetTop+'px'}, 1000); - } - - //妤煎眰鍒囨崲鎸夐挳 - function changFloor(e,x) { - $("#floorBtnBox button").each((index,item) => { - $(item).removeClass("btn-16-active") - }) - $(e).addClass("btn-16-active") - currentLev = x - initMap(currentLev) - } - -</script> diff --git a/src/main/webapp/views/console2.html b/src/main/webapp/views/console2.html new file mode 100644 index 0000000..8b09f68 --- /dev/null +++ b/src/main/webapp/views/console2.html @@ -0,0 +1,1025 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>WCS鎺у埗涓績</title> + <link rel="stylesheet" href="../static/css/console.css"> + <link rel="stylesheet" href="../static/css/animate.min.css"> + <link rel="stylesheet" href="../static/css/toggle-switch.css"> + <script src="../static/js/jquery/jquery-3.3.1.min.js"></script> + <script src="../static/js/layer/layer.js"></script> + <script type="text/javascript" src="../static/js/common.js"></script> +</head> +<body> +<div class="root"> + <header class="header"> + <h1>鑷姩浠撳簱WCS鐩戞帶鍥�</h1> + <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6> + </header> + <main class="main"> + <!--妤煎眰鎸夐挳--> + <div id="floorBtnBox"> + <button class="floorBtn btn-16" onclick="changFloor(this,1)" style="margin-top: 150px">1F</button> + <button class="floorBtn btn-16" onclick="changFloor(this,2)" style="margin-top: 200px">2F</button> + <button class="floorBtn btn-16" onclick="changFloor(this,3)" style="margin-top: 250px">3F</button> + <button class="floorBtn btn-16" onclick="changFloor(this,4)" style="margin-top: 300px">4F</button> + <button class="floorBtn btn-16" onclick="changFloor(this,5)" style="margin-top: 350px">5F</button> + <button class="floorBtn btn-16" onclick="changFloor(this,6)" style="margin-top: 400px">6F</button> + <button class="floorBtn btn-16" onclick="changFloor(this,7)" style="margin-top: 450px">7F</button> + <button class="floorBtn btn-16" onclick="changFloor(this,8)" style="margin-top: 500px">8F</button> + <button class="floorBtn btn-16" onclick="changFloor(this,9)" style="margin-top: 550px">9F</button> + <button class="floorBtn btn-16" onclick="changFloor(this,10)" style="margin-top: 600px">10F</button> + </div> + <button class="floorBtn btn-16" onclick="resetMap()" style="margin-top: 650px;font-size: 14px;">閲嶇疆鍦板浘</button> + <button class="floorBtn btn-16" onclick="testMove()" style="margin-top: 700px;font-size: 14px;">娴嬭瘯绉诲姩杞�</button> + + <!-- 璐ф灦 + 鍫嗗灈鏈� + 鍏ュ簱绔欑偣 --> + <div class="main-part" id="mapDataId"> +<!-- <!– 绗竴缁� –>--> +<!-- <div class="lane" id="mapDataId" style="margin-bottom: 280px">--> + +<!-- </div>--> + </div> + </main> + <footer class="footer"> + <!-- 鎬诲紑鍏� --> + <div class="system-state"> + <div class="body-head">鎬诲紑鍏�</div> + <div class="switch"> + <label id="system-toggle" class="toggle-switch" style="margin-left: 20px;"> + <input id="system-toggle-checked" checked="checked" type="checkbox"> + <div class="button"> + <div class="light"></div> + <div class="dots"></div> + <div class="characters"></div> + <div class="shine"></div> + <div class="shadow"></div> + </div> + </label> + + <div class="switch_r"> + <p>绯荤粺鐘舵��</p> + <p id="system-run-desc">绯荤粺杩愯涓�</p> + </div> + </div> + </div> + <!-- 鍥涘悜绌挎杞︾姸鎬� --> + <div class="line-status"> + <div class="body-head">绌挎杞︾姸鎬�</div> + <div id="shuttle-status-box" style="height: 100px;overflow-y: scroll;overflow-x: hidden;"> + </div> + <div class="button"><span>鎵�鏈夌姸鎬�</span></div> + <div class="button item-group"> + <span class="shuttle-idle">绌洪棽</span> + <span class="shuttle-working">浣滀笟涓�</span> + <span class="shuttle-waiting">绛夊緟纭</span> + <span class="shuttle-charging">鍏呯數涓�</span> + <span class="shuttle-charging-waiting">鍏呯數浠诲姟绛夊緟纭</span> + <span class="shuttle-fixing">鏁呴殰淇涓�</span> + <span class="shuttle-offline">绂荤嚎</span> + </div> + </div> + <!-- 鎻愬崌鏈虹姸鎬� --> + <div class="line-status"> + <div class="body-head">鎻愬崌鏈虹姸鎬�</div> + <div id="lift-status-box" style="height: 120px;overflow-y: scroll;overflow-x: hidden;"> + + </div> + <div class="button"><span>鎵�鏈夌姸鎬�</span></div> + <div class="button item-group"> + <span class="lift-idle">绌洪棽</span> + <span class="lift-working">浣滀笟涓�</span> + <span class="lift-waiting">绛夊緟纭</span> + <span class="lift-offline">绂荤嚎</span> + </div> + </div> + <!-- 杈撻�佺嚎鐘舵�� --> + <div class="line-status"> + <div class="body-head">杈撻�佺嚎鐘舵��</div> + <div class="state states"> + <span>杩愯緭绾挎�绘暟</span> + <span class="line-ss">9</span> + </div> + <div class="button"><span>鎵�鏈夌姸鎬�</span></div> + <div class="button item-group"> + <span class="site-auto-run-id">鑷姩+鏈夌墿+ID</span> + <span class="site-auto-run">鑷姩+鏈夌墿</span> + <span class="site-auto-id">鑷姩+ID</span> + <span class="site-auto">鑷姩</span> + <span class="site-unauto">闈炶嚜鍔�/鎵嬪姩</span> + </div> + </div> + <!-- 鏉$爜琛ㄦ牸 --> + <div class="bar-code"> + <div class="body-head" id="code">鏉$爜鎵弿鍣�</div> + <div class="tablebox"> + <div class="table-head"> + <li><span>鏉$爜鍚嶇О</span><span class="right">鎵爜鏃堕棿</span></li> + </div> + <div id="barcode1" class="table-body"> + + </div> + </div> + <div class="tablebox"> + <div class="table-head"> + <li><span>鏉$爜鍚嶇О</span><span class="right">鎵爜鏃堕棿</span></li> + </div> + <div id="barcode2" class="table-body"> + + </div> + </div> + </div> + </footer> + + <!-- 鍫嗗灈鏈哄脊绐� --> + <div id="crnWindow" style="display: none;" class="animate__animated animate__fadeIn"> + <div id="crnWindow-head"> + <div class='detailed'></div> + <button></button> + </div> + <form> + <!-- 鍫嗗灈鏈哄彿 --> + <div class="form-item"> + <div class="form-item-label" style> + <span>鍫嗗灈鏈哄彿锛�</span> + </div> + <div class="form-item-input"> + <input type="text" name="crnNo" value=""> + </div> + </div> + <!-- 宸ヤ綔鍙� --> + <div class="form-item"> + <div class="form-item-label"> + <span>宸ヤ綔鍙凤細</span> + </div> + <div class="form-item-input"> + <input type="text" name="workNo" value=""> + </div> + </div> + <!-- 绔欐簮 --> + <div class="form-item"> + <div class="form-item-label"> + <span>绔欐簮锛�</span> + </div> + <div class="form-item-input"> + <input type="text" name="sourceStaNo" value=""> + </div> + </div> + <!-- 鐩爣绔� --> + <div class="form-item"> + <div class="form-item-label"> + <span>鐩爣绔欙細</span> + </div> + <div class="form-item-input"> + <input type="text" name="staNo" value=""> + </div> + </div> + <!-- 宸ヤ綔鐘舵�� --> + <div class="form-item"> + <div class="form-item-label"> + <span>宸ヤ綔鐘舵�侊細</span> + </div> + <div class="form-item-input"> + <input type="text" name="wrkSts" value=""> + </div> + </div> + <!-- 鍑哄叆绫诲瀷 --> + <div class="form-item"> + <div class="form-item-label"> + <span>鍑哄叆绫诲瀷锛�</span> + </div> + <div class="form-item-input"> + <input type="text" name="ioType" value=""> + </div> + </div> + <!-- 婧愬簱浣� --> + <div class="form-item"> + <div class="form-item-label"> + <span>婧愬簱浣嶏細</span> + </div> + <div class="form-item-input"> + <input type="text" name="sourceLocNo" value=""> + </div> + </div> + <!-- 鐩爣搴撲綅 --> + <div class="form-item"> + <div class="form-item-label"> + <span>鐩爣搴撲綅锛�</span> + </div> + <div class="form-item-input"> + <input type="text" name="locNo" value=""> + </div> + </div> + <!-- 鍫嗗灈鏈虹姸鎬� --> + <div class="form-item"> + <div class="form-item-label"> + <span>鍫嗗灈鏈虹姸鎬侊細</span> + </div> + <div class="form-item-input"> + <input type="text" name="crnStatus" value=""> + </div> + </div> + <!-- 寮傚父 --> + <div class="form-item"> + <div class="form-item-label"> + <span>寮傚父锛�</span> + </div> + <div class="form-item-input"> + <input type="text" name="error" value=""> + </div> + </div> + </form> + </div> + + <!-- 杈撻�佽澶囧脊绐� --> + <div id="siteWindow" style="display: none;" class="animate__animated animate__fadeIn"> + <!-- 琛ㄥご --> + <div id="siteWindow-head"> + <div class='detailed'></div> + <button></button> + </div> + <form> + <!-- 璁惧鍙� --> + <div class="form-item" > + <div class="form-item-label"> + <span>璁惧鍙凤細</span> + </div> + <div class="form-item-input"> + <input type="text" name="siteId" value=""> + </div> + </div> + <!-- 宸ヤ綔鍙� --> + <div class="form-item"> + <div class="form-item-label"> + <span>宸ヤ綔鍙凤細</span> + </div> + <div class="form-item-input"> + <input type="text" name="workNo" value=""> + </div> + </div> + <!-- 宸ヤ綔鐘舵�� --> + <div class="form-item"> + <div class="form-item-label"> + <span>宸ヤ綔鐘舵�侊細</span> + </div> + <div class="form-item-input"> + <input type="text" name="wrkSts" value=""> + </div> + </div> + <!-- 鑷姩 --> + <div class="form-item-checkbox"> + <div class="form-item-label-checkbox"> + <span>鑷姩</span> + </div> + <div class="form-item-input-checkbox"> + <input type="checkbox" name="autoing"> + </div> + </div> + <!-- 鏈夌墿 --> + <div class="form-item-checkbox"> + <div class="form-item-label-checkbox"> + <span>鏈夌墿</span> + </div> + <div class="form-item-input-checkbox"> + <input type="checkbox" name="loading"> + </div> + </div> + <!-- 鑳藉叆 --> + <div class="form-item-checkbox"> + <div class="form-item-label-checkbox"> + <span>鑳藉叆</span> + </div> + <div class="form-item-input-checkbox"> + <input type="checkbox" name="canining"> + </div> + </div> + <!-- 鑳藉嚭 --> + <div class="form-item-checkbox"> + <div class="form-item-label-checkbox"> + <span>鑳藉嚭</span> + </div> + <div class="form-item-input-checkbox"> + <input type="checkbox" name="canouting"> + </div> + </div> + <!-- 鍑哄叆绫诲瀷 --> + <div class="form-item"> + <div class="form-item-label"> + <span>鍑哄叆绫诲瀷锛�</span> + </div> + <div class="form-item-input"> + <input type="text" name="ioType" value=""> + </div> + </div> + <!-- 婧愮珯 --> + <div class="form-item"> + <div class="form-item-label"> + <span>婧愮珯锛�</span> + </div> + <div class="form-item-input"> + <input type="text" name="sourceStaNo" value=""> + </div> + </div> + <!-- 鐩爣绔� --> + <div class="form-item"> + <div class="form-item-label"> + <span>鐩爣绔欙細</span> + </div> + <div class="form-item-input"> + <input type="text" name="staNo" value=""> + </div> + </div> + <!-- 婧愬簱浣� --> + <div class="form-item"> + <div class="form-item-label"> + <span>婧愬簱浣嶏細</span> + </div> + <div class="form-item-input"> + <input type="text" name="sourceLocNo" value=""> + </div> + </div> + <!-- 鐩爣搴撲綅 --> + <div class="form-item"> + <div class="form-item-label"> + <span>鐩爣搴撲綅锛�</span> + </div> + <div class="form-item-input"> + <input type="text" name="locNo" value=""> + </div> + </div> + + </form> + </div> +</div> +</body> +</html> +<script> + var tData = [] + var tData1 = [] + var tData2 = [] + var tData3 = [] + var mapData = [] //鍦板浘鏁版嵁 + var currentLev = 1;//褰撳墠鍦板浘妤煎眰 + function getCodeData(){ + $.ajax({ + url:baseUrl +'/console/barcode/output/site', + method:'GET', + success:function (res) { + if(res.code === 200){ + tData = eval(res.data); + if(tData.length<=5){ + tData1 = tData + } else if (tData.length<=10){ + tData1 = tData.slice(0,5) + // tData.splice(0,4) + tData2 = tData.splice(5,10) + } else if(tData.length<=15){ + tData1 = tData.slice(0,5) + tData2 = tData.slice(5,10) + // tData.splice(0,10) + tData3 = tData.slice(10,15) + } else { + tData1 = tData.slice(0,5) + tData2 = tData.slice(5,10) + tData3 = tData.slice(10,15) + // tData = tData.slice(-15) + // tData1 = tData.slice(-15) + // tData2 = tData.slice(-10) + // tData3 = tData.slice(-5) + + } + } + } + }) + } + setInterval(function () { + getCodeData(); + renderBarCode(); + }, 1000) + + + function renderBarCode() { + for (var i = 0;i<tData1.length;i++){ + var str1 = '<li><span>' + tData1[i].barcode + '</span><span class="right">' + tData1[i].time + '</span></li>' + $('#barcode1').append(str1) + } + for(var j = 0;j<tData2.length;j++){ + var str2 = '<li><span>' + tData2[j].barcode + '</span><span class="right">' + tData2[j].time + '</span></li>' + $('#barcode2').append(str2) + } + for(var k = 0;k<tData3.length;k++){ + var str3 = '<li><span>' + tData3[k].barcode + '</span><span class="right">' + tData3[k].time + '</span></li>' + $('#barcode3').append(str3) + } + } + + + $(function (){ + initMap(1) + }) + + setInterval(() => { + getShuttleStateInfo() + getLiftStateInfo() + },1000) + + // 鎻愬崌鏈轰俊鎭〃鑾峰彇 + function getLiftStateInfo() { + $.ajax({ + url: baseUrl+ "/lift/table/lift/state", + headers: {'token': localStorage.getItem('token')}, + method: 'POST', + success: function (res) { + $("#lift-status-box").empty() + res.data.forEach((item,index) => { + let liftStatusClass = "lift-idle" + switch (item.protocolStatus) { + case 1://绌洪棽 + liftStatusClass = "lift-idle"; + break + case 2://浣滀笟涓� + liftStatusClass = "lift-working"; + break + case 3://绛夊緟纭 + liftStatusClass = "lift-waiting"; + break + case 4://绂荤嚎 + liftStatusClass = "lift-offline"; + break + default: + liftStatusClass = "lift-idle" + } + let liftStatus = '<div class="state states">' + + '<span>鎻愬崌鏈� ' + item.liftNo + '</span>' + + '<span class="state-ss ' + liftStatusClass + '">' + item.protocolStatus$ + '</span></div>'; + $("#lift-status-box").append(liftStatus) + + }) + } + }); + } + + // 鍥涘悜绌挎杞︿俊鎭〃鑾峰彇 + function getShuttleStateInfo() { + $.ajax({ + url: baseUrl+ "/shuttle/table/shuttle/state", + headers: {'token': localStorage.getItem('token')}, + method: 'POST', + success: function (res) { + $("#shuttle-status-box").empty() + res.data.forEach((item,index) => { + let shuttleStatusClass = "shuttle-idle" + switch (item.protocolStatus) { + case 1://绌洪棽 + shuttleStatusClass = "shuttle-idle"; + break + case 2://浣滀笟涓� + shuttleStatusClass = "shuttle-working"; + break + case 3://绛夊緟纭 + shuttleStatusClass = "shuttle-waiting"; + break + case 4://鍏呯數涓� + shuttleStatusClass = "shuttle-charging"; + break + case 5://鍏呯數浠诲姟绛夊緟纭 + shuttleStatusClass = "shuttle-charging-waiting"; + break + case 6://鏁呴殰淇涓� + shuttleStatusClass = "shuttle-fixing"; + break + case 7://绂荤嚎 + shuttleStatusClass = "shuttle-offline"; + break + default: + shuttleStatusClass = "shuttle-offline" + } + let shuttleStatus = '<div class="state">' + + '<span>鍥涘悜绌挎杞� ' + item.shuttleNo + '</span>' + + '<span class="state-ss ' + shuttleStatusClass + '">' + item.protocolStatus$ + '</span></div>'; + $("#shuttle-status-box").append(shuttleStatus) + + if(item.wcsPoint.z != currentLev){ + //鍥涘悜绌挎杞︽ゼ灞傚拰褰撳墠鍦板浘妤煎眰涓嶄竴鑷达紝鍒犻櫎璇ヨ溅杈� + $("#sxcar-" + item.shuttleNo).remove() + }else { + //绉诲姩鍥涘悜绌挎杞� + moveCar(item.shuttleNo,item.wcsPoint.x,item.wcsPoint.y) + } + }) + } + }); + } + + //璁$畻鍥涘悜绌挎杞﹀浘鏍囦綅缃� + function getCarPosition(x,y) { + let top = (x * 35 - 35) + "px" //闇�瑕佸噺鍘诲皬杞﹁嚜宸辨墍鍗犻珮搴� + let left = (y * 35 - 35) + "px" //闇�瑕佸噺鍘诲皬杞﹁嚜宸辨墍鍗犲搴� + return [top,left]; + } + + //绉诲姩鍥涘悜绌挎杞﹀浘鏍� + function moveCar(id,x,y) { + //鑾峰彇鍏蜂綋浣嶇疆top鍜宭eft鍊� + let position = getCarPosition(x,y) + let top = position[0] + let left = position[1] + $("#sxcar-" + id).animate({top: top,left: left}, 1000); + } + + //鍒濆鍖栧湴鍥� + function initMap(lev) { + getMap(lev) + + $.ajax({ + url: baseUrl+ "/shuttle/table/shuttle/state", + headers: {'token': localStorage.getItem('token')}, + method: 'POST', + success: function (res) { + res.data.forEach((item,index) => { + if(lev == item.wcsPoint.z){ + let carBox = '<div class="sxcar" id="sxcar-' + item.shuttleNo + '">' + item.shuttleNo + '</div>' + $("#mapDataId").append(carBox) + } + }) + } + }); + } + + //鑾峰彇鍦板浘鏁版嵁 + function getMap(lev) { + //姣嶈建閬撶涓�娆$储寮曪紝鐢ㄤ簬瀹氫綅灏忚溅 + let firstMotherIndex = [0,0]; + $("#mapDataId").empty() + $.ajax({ + type:"get", + // url: baseUrl + "/static/js/map_" + lev + ".json", + url: baseUrl + "/console/map/" + lev + "/auth", + headers: {'token': localStorage.getItem('token')}, + success: (res) => { + let data = res.data + mapData = data + let content = "" + data.forEach((rowData,index) => { + //鍘绘帀涓婁笅杈圭紭绂佸尯 + if(!(index == 0 || data.length - 1 == index)){ + let row = '<div class="stock-group">'; + rowData.forEach((colData,idx) => { + //鍘绘帀宸﹀彸杈圭紭绂佸尯 + if(!(idx == 0 || rowData.length - 1 == idx)){ + let col; + switch (colData.value){ + case -999: + col = '<button class="item" style="background:#f83333;color: #fff;">' + idx + '</button>'; + break; + case -1: + col = '<button class="item" style="visibility: hidden">' + idx + '</button>'; + break; + case 3: + //姣嶈建閬� + col = '<button class="item" style="background: #5af;">⇅⇄</button>'; + if (firstMotherIndex[0] === 0 && firstMotherIndex[1] === 0) { + //绗竴娆¢亣鍒版瘝杞ㄩ亾锛屽垯淇濆瓨璇ヨ建閬撳湴鍧�(鐢ㄤ簬灏忚溅鍒濆鍖栧畾浣�) + firstMotherIndex = [index,idx] + } + break; + case 4: + //绔欑偣 + var data = colData.data; + col = '<div id="site-' + data + '" class="site">' + data + '</div>'; + break; + case 5: + //鍏呯數妗� + col = '<button class="item" style="font-size: 24px">⚡</button>'; + break; + default: + let val = idx; + if (colData.data.length > 0) { + val = colData.data + } + col = '<button class="item">' + val + '</button>'; + } + + if(rowData.length - 2 == idx){ + //鎵撲笂琛屾暟鏍囪 + col += '<span class="row-no">' + index + '#</span>'; + } + row += col + } + }) + row += '</div>'; + content += row + } + }) + + $("#mapDataId").append(content) + } + }) + } + + //灏嗗湴鍥炬暟鎹浆鎹㈡垚int浜岀淮鏁扮粍(鍚庣画鐢ㄤ簬璇锋眰璁$畻璺緞鏃舵惡甯﹀湴鍥炬暟鎹弬鏁颁娇鐢�) + function getMap2TwoArr() { + let data = [] + mapData.forEach((item,index) => { + let data2 = [] + item.forEach((val,idx) => { + data2.push(val.value) + }) + data.push(data2) + }) + + return data; + } + + function testMove() { + getMap2TwoArr()//娴嬭瘯鍦板浘鏁版嵁杞崲鏄惁姝e父 + let json = "[{\"x\":5,\"y\":5},{\"x\":6,\"y\":5},{\"x\":7,\"y\":5},{\"x\":8,\"y\":5},{\"x\":9,\"y\":5},{\"x\":10,\"y\":5},{\"x\":11,\"y\":5},{\"x\":11,\"y\":6},{\"x\":12,\"y\":6},{\"x\":13,\"y\":6},{\"x\":14,\"y\":6},{\"x\":15,\"y\":6},{\"x\":16,\"y\":6}]"; + json = JSON.parse(json) + json.forEach((item,index) => { + moveCar(1, item.x, item.y); + }) + } + + /** + * 閲嶇疆鍦板浘 + */ + function resetMap() { + $.ajax({ + url:baseUrl+"/console/map/resetMap/auth", + headers:{ + 'token': localStorage.getItem('token') + }, + data:{}, + method:'get', + success:function (res) { + layer.msg('閲嶇疆瀹屾垚'); + } + }) + } + + // 灏忚溅鍋忕Щ鍔ㄧ敾 + function carAnimate(id, target) { + if (id === 1000) { + let targetTop = 130; + switch (target) { + case 110: + targetTop += 0; + break; + case 109: + targetTop += 60; + break; + case 108: + targetTop += 100; + break; + case 107: + targetTop += 180; + break; + case 106: + targetTop += 220; + break; + default: + return; + } + $("#site-" + id).animate({top: targetTop+'px'}, 1000); + } else if (id === 2000) { + let targetTop = 130; + switch (target) { + case 226: + targetTop += 0; + break; + case 225: + targetTop += 60; + break; + case 224: + targetTop += 100; + break; + case 223: + targetTop += 180; + break; + case 222: + targetTop += 220; + break; + case 214: + targetTop += 280; + break; + case 220: + targetTop += 320; + break; + default: + return; + } + $("#site-" + id).animate({top: targetTop+'px'}, 1000); + } + } +</script> +<script type="text/javascript"> + // 寮圭獥绔欑偣淇℃伅 + $('#mapDataId').on('click','.site',function(){ + var id = this.id.split("-")[1]; + $("#siteWindow").attr("style","display:block;");//鏄剧ずdiv + $("#crnWindow").attr("style","display:none;"); + $(".detailed").empty(); + $('.detailed').append(id+'绔欑偣璇︾粏淇℃伅'); + $.ajax({ + url:baseUrl+"/console/site/detail", + headers:{ + 'token': localStorage.getItem('token') + }, + data:{ + siteId: id + }, + method:'post', + success:function (res) { + for (var val in res.data) { + var find = $("#siteWindow").find(":input[name='" + val + "']"); + if (find[0].type==='text') { + find.val(res.data[val]); + } else if (find[0].type === 'checkbox') { + find.attr("checked", res.data[val] === 'Y'); + } + } + } + + }) + + }); + // 鍫嗗灈鏈轰俊鎭� + $('.machine').on('click',function(){ + var id = this.id.split("-")[1]; + $("#crnWindow").attr('style','display:block;'); + $("#siteWindow").attr("style","display:none;"); + $('.detailed').empty(); + $('.detailed').append(id+'鍙峰爢鍨涙満'); + $.ajax({ + url:baseUrl+"/console/crn/detail", + headers:{ + 'token': localStorage.getItem('token') + }, + data:{ + crnNo: id + }, + method:'post', + success:function (res) { + for (var val in res.data) { + var find = $("#crnWindow").find(":input[name='" + val + "']"); + if (find[0].type==='text') { + find.val(res.data[val]); + } else if (find[0].type === 'checkbox') { + find.attr("checked", res.data[val] === 'Y'); + } + } + } + + }) + + }) + // 寮圭獥鍏抽棴 + $('button').on('click',function(){ + $('#siteWindow').attr('style','display:none') + $('#crnWindow').attr('style','display:none') + }) + + + var crn1Position = 0; + var crn2Position = 0; + var crn3Position = 0; + var crn4Position = 0; + var crn5Position = 0; + + // 鍒濆鍖� + getSitesInfo(); + getCrnInfo(); + getSystemRunningStatus(); + getBarcodeInfo(); + getScaleInfo(); + // 瀹炴椂璁块棶 + setInterval(function () { + getCrnInfo(); + getSystemRunningStatus(); + getBarcodeInfo(); + getScaleInfo(); + }, 1000); + setInterval(function () { + getSitesInfo(); + }, 3000); + + $("#system-toggle").on("click",(e) => { + systemSwitch() + e.stopPropagation();//琛ㄧず闃绘鍚戠埗鍏冪礌鍐掓场 + e.preventDefault();//闃绘 鏂规硶闃绘鍏冪礌鍙戠敓榛樿鐨勮涓猴紙渚嬪锛屽綋鐐瑰嚮鎻愪氦鎸夐挳鏃堕樆姝㈠琛ㄥ崟鐨勬彁浜ゆ垨鑰卆鏍囩锛夈�� + }) + + // 绯荤粺杩愯寮�鍏� + function systemSwitch() { + if (parent.systemRunning){ + layer.prompt({title: '璇疯緭鍏ュ彛浠わ紝骞跺仠姝� WCS 绯荤粺', formType: 1, shadeClose: true}, function(pass, idx){ + layer.close(idx); + doSwitch(0, pass); // 鍋滄wcs绯荤粺 + }); + } else { + doSwitch(1); // 鍚姩wcs绯荤粺 + } + } + + // 璇锋眰鏈嶅姟鍣ㄦ帶鍒秝cs绯荤粺杩愯鐘舵�� + function doSwitch(operatorType, password) { + // 鍔犺浇tips + var index = layer.load(1, { + shade: [0.1,'#fff'] + }); + $.ajax({ + url: baseUrl+ "/console/system/switch", + headers: {'token': localStorage.getItem('token')}, + // async: false, + data: { + operatorType: operatorType, + password: password + }, + method: 'POST', + success: function (res) { + layer.close(index); + if (res.code === 200){ + if (res.data.status) { + $('#system-toggle-checked').attr("checked", true); + $('#system-run-desc').html("绯荤粺杩愯涓�..."); + parent.systemRunning = true; + } else { + $('#system-toggle-checked').attr("checked", false); + $('#system-run-desc').html("绯荤粺宸插仠姝�!"); + parent.systemRunning = false; + } + } else if (res.code === 403){ + parent.location.href = baseUrl+"/login"; + } else { + console.log(res.msg); + + } + } + }); + + } + + // 鑾峰彇wcs绯荤粺杩愯鐘舵�� + function getSystemRunningStatus() { + $.ajax({ + url: baseUrl+ "/console/system/running/status", + headers: {'token': localStorage.getItem('token')}, + method: 'POST', + success: function (res) { + if (res.code === 200){ + if (res.data.status) { + $('#system-toggle-checked').attr("checked", true); + $('#system-run-desc').html("绯荤粺杩愯涓�..."); + parent.systemRunning = true; + } else { + $('#system-toggle-checked').attr("checked", false); + $('#system-run-desc').html("绯荤粺宸插仠姝�!"); + parent.systemRunning = false; + } + } else if (res.code === 403){ + parent.location.href = baseUrl+"/login"; + } else { + console.log(res.msg); + } + } + }); + } + + // 杈撻�佽澶囧疄鏃舵暟鎹幏鍙� + function getSitesInfo(){ + $.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; + for (var i = 0; i < sites.length; i++){ + var siteEl = $("#site-"+sites[i].siteId); + siteEl.attr("class", "site " + sites[i].siteStatus); + if (sites[i].workNo != null && sites[i].workNo>0) { + siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]"); + } else { + siteEl.html(sites[i].siteId); + } + if (i+1===8) { + carAnimate(i+1, Number(sites[i].nearbySta)); + } + } + } else if (res.code === 403){ + parent.location.href = baseUrl+"/login"; + } else { + console.log(res.msg); + } + } + }); + } + + // 鍫嗗灈鏈哄疄鏃舵暟鎹幏鍙� + function getCrnInfo(){ + $.ajax({ + url: baseUrl+ "/console/latest/data/crn", + headers: {'token': localStorage.getItem('token')}, + method: 'POST', + success: function (res) { + if (res.code === 200){ + var crns = res.data; + for (var i = 0; i < crns.length; i++){ + var crnEl = $("#crn-"+crns[i].crnId); + crnEl.attr("class", "machine " + crns[i].crnStatus); + var unit = ($('.item').eq(0).width()+4)/2; + crnEl.animate({left: (crns[i].bay * unit + 25) +'px'}, 1000); + } + } else if (res.code === 403){ + parent.location.href = baseUrl+"/login"; + } else { + console.log(res.msg); + } + } + }); + } + + // 鎵爜鍣ㄥ疄鏃舵暟鎹幏鍙� + function getBarcodeInfo(){ + $.ajax({ + url: baseUrl+ "/console/latest/data/barcode", + headers: {'token': localStorage.getItem('token')}, + method: 'POST', + success: function (res) { + if (res.code === 200){ + var barcodes = res.data; + for (var i = 0; i < barcodes.length; i++){ + $("#code-decoder-data-"+barcodes[i].barcodeId).html(barcodes[i].codeValue); + } + } else if (res.code === 403){ + parent.location.href = baseUrl+"/login"; + } else { + console.log(res.msg); + } + } + }); + } + + // 纾呯Г瀹炴椂鏁版嵁鑾峰彇 + function getScaleInfo(){ + $.ajax({ + url: baseUrl+ "/console/latest/data/scale", + headers: {'token': localStorage.getItem('token')}, + method: 'POST', + success: function (res) { + + if (res.code === 200){ + var sclaes = res.data; + for (var i = 0; i < sclaes.length; i++){ + console.log(sclaes[i].scaleId + ":" + sclaes[i].value) + $("#scale-data-"+sclaes[i].scaleId).text(sclaes[i].value); + } + } else if (res.code === 403){ + parent.location.href = baseUrl+"/login"; + } else { + console.log(res.msg); + } + } + }); + } + + // 灏忚溅鍋忕Щ鍔ㄧ敾 + function carAnimate(id, target) { + var targetTop = 122; + if (id === 8) { + switch (target) { + case 1: + targetTop += 160; + break; + case 2: + targetTop += 140; + break; + case 3: + targetTop += 80; + break; + case 4: + targetTop += 40; + break; + case 7: + targetTop += 0; + break; + default: + return; + } + } else { + return; + } + $("#site-" + id).animate({top: targetTop+'px'}, 1000); + } + + //妤煎眰鍒囨崲鎸夐挳 + function changFloor(e,x) { + $("#floorBtnBox button").each((index,item) => { + $(item).removeClass("btn-16-active") + }) + $(e).addClass("btn-16-active") + currentLev = x + initMap(currentLev) + } + +</script> -- Gitblit v1.9.1