#基础地图更新

Junjie

2023-09-06 8af52b048a4ddaadb07346b4bcc08f671fcc05ea

#基础地图更新

 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);
    }

 src/main/webapp/static/css/console_vue.css

New file
@@ -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;
}

 src/main/webapp/static/testMoveData.json

New file
@@ -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
  }
]

 src/main/webapp/static/vue/element/fonts/element-icons.ttf

Binary files differ

 src/main/webapp/static/vue/element/fonts/element-icons.woff

Binary files differ

 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 ? '&#x21c5;&#x21c4;':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">&#9889;</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">
<!--            &lt;!&ndash; 第一组 &ndash;&gt;-->
<!--            <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('请输入口令，并停止WCS系统', '提示', {
                                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) {
                        //检测路径是否为穿梭车预计路径，如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和left值
        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;">&#x21c5;&#x21c4;</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">&#9889;</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()//测试地图数据转换是否正常
        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();//阻止 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交或者a标签）。
    })

    // 系统运行开关
    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系统
        }
    }

    // 请求服务器控制wcs系统运行状态
    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>

 src/main/webapp/views/console2.html

New file
@@ -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">
<!--            &lt;!&ndash; 第一组 &ndash;&gt;-->
<!--            <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和left值
        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;">&#x21c5;&#x21c4;</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">&#9889;</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()//测试地图数据转换是否正常
        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();//阻止 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交或者a标签）。
    })

    // 系统运行开关
    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系统
        }
    }

    // 请求服务器控制wcs系统运行状态
    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>