zy-wcs.git - Gitblit

parent: ec1f4808 | 补丁 | 提交 | ignore whitespace

Merge branch 'bfwcs' of http://47.97.1.152:5880/r/zy-wcs into bfwcs

luxiaotao1123

2022-03-15 dd37f7a757d46b6b2c43c60d292918ee8cb8634d

Merge branch 'bfwcs' of http://47.97.1.152:5880/r/zy-wcs into bfwcs

4个文件已添加

9个文件已修改

	src/main/resources/application.yml	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/static/css/console.css	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/static/css/crn.css	13 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/static/css/index.css	9 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/static/css/pipeline.css	12 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/static/css/ste.css	298 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/static/layui/lay/modules/dropdown/dropdown.css	618 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/static/layui/lay/modules/dropdown/dropdown.js	250 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/views/console.html	1055 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/views/crn.html	334 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/views/index.html	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/views/pipeline.html	191 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/views/ste.html	228 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 src/main/resources/application.yml

@@ -8,7 +8,7 @@
    name: @pom.build.finalName@
  datasource:
    driver-class-name: com.microsoft.sqlserver.jdbc.SQLServerDriver
    url: jdbc:sqlserver://192.168.0.99:1433;databasename=bfasrs
    url: jdbc:sqlserver://192.168.4.229:1433;databasename=bfasrs
    username: sa
    password: sa@123
  mvc:

 src/main/webapp/static/css/console.css

@@ -28,7 +28,7 @@
    width: 100%;
    height: 23%    ;
    position: absolute;
    bottom: 1%;
    bottom: 2.5%;
}
/* 控制开关 */
.system-state {
@@ -320,6 +320,7 @@
}
/* 库位组 */
.stock-group .item {
    width: 30px;
    float: left;
    border-top: 1px solid rgb(194,76,65);
    border-bottom: 1px solid rgb(194,76,65);

 src/main/webapp/static/css/crn.css

@@ -1,11 +1,14 @@
body {
    padding: 10px;
    background-color: #f1f1f1;
    background-color: #6CA7A8;
}
.button-window {
    float: left;
    width: 5%;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #6CA7A8;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0 0 0 .3);
}
/* -------------------- 第一模块 -------------------- */
.log-board {
@@ -19,7 +22,7 @@
.command-log {
    float: left;
    height: 100%;
    width: 19%;
    width: 20%;
    text-align: center;
}
.command-log h2 {
@@ -51,7 +54,7 @@
.crn-state {
    float: left;
    height: 100%;
    width: 76%;
    width: 80%;
    overflow: auto;
}
/* 堆垛机状态表 */

 src/main/webapp/static/css/index.css

@@ -41,7 +41,7 @@
}
.sidebar ul {
    font-size: 20px;
    font-weight: 700;
    font-weight: 5c00;
    padding-left: 15%;

}
@@ -51,16 +51,17 @@
}

.sidebar a:hover {
    color: rgb(87,214,201);
    color: rgb(255, 148, 111);
}



.nav-unselect {
    color: #5D7677;
    color: #FFFFFF;
}
.nav-select {
    color: rgb(87,214,201);
    font-weight: 900;
    color: rgb(255, 148, 111);
}



 src/main/webapp/static/css/pipeline.css

@@ -1,6 +1,6 @@
body {
    padding: 10px;
    background-color: #f1f1f1;
    /*padding: 10px;*/
    background-color: #6CA7A8;
}
main {
    background-color: #fff;
@@ -11,13 +11,17 @@
}
.button-window {
    float: left;
    width: 5%;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #6CA7A8;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0 0 0 .3);
}
.main-board {
    padding-left: 1%;
    float: left;
    width: 47.5%;
    width: 50%;
    height: 100%;
    overflow: auto;
}

 src/main/webapp/static/css/ste.css

New file
@@ -0,0 +1,298 @@
body {
    background-color: #6CA7A8;
}
.button-window {
    float: left;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #6CA7A8;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0 0 0 .3);
}
/* -------------------- 第一模块 -------------------- */
.log-board {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    height: 25%;
}
/* 左 */
.command-log {
    float: left;
    height: 100%;
    width: 20%;
    text-align: center;
}
.command-log h2 {
    padding: 10px;
}

.ste-command-item {
    padding: 4px 0;
}
.ste-command-item label {
    font-size: 20px;
    font-weight: bold;
    vertical-align: middle;
}
.demoBtn {
    vertical-align: middle;
    width: 100%;
    height: 30px;
    left: 0;
    top: 0;
    text-shadow: inherit;
    font-size: 15px;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    background-color: #FF5722;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 5px #B6B6B6;
    border-radius: 3px;
    cursor: pointer;
}
.demoBtn:hover {
    opacity: 0.8
}
.demoBtn:focus {
    outline: 0;
}
/*▼下拉菜单▼*/
.form-item {
    width: 220px;
    display: inline-block;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 3px;margin:3px
}
.form-item input {
    display: inline-block;
    width: 100px;
    float: right;
}
/*▲下拉菜单▲*/
/*.ste-command-item span {*/
/*    display: inline-block;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    background-color: #2e9926;*/
/*    border-radius: 5px;*/
/*    vertical-align: middle;*/
/*}*/

/* 右 */
.ste-state {
    float: left;
    height: 100%;
    width: 80%;
    overflow: auto;
}
/* 穿梭车状态表 */
#ste-state-table {
    font-size: 12px;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
#ste-state-table td, #ste-state-table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 25px;
}
#ste-state-table thead th {
    background-color: #CCE8EB;
    width: 300px;
}
#ste-state-table tr:nth-child(odd) {
    background: #fff;
}
#ste-state-table tr:nth-child(even) {
    background: #F5FAFA;
}

/* -------------------- 第二模块 -------------------- */
.ste-msg {
    /*overflow: auto;*/
    margin-top: 10px;
    height: 23%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
}
/* 堆垛机状态信息表 */
#ste-msg-table {
    font-size: 12px;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
#ste-msg-table td, #ste-msg-table th {
    border: 1px solid #f1f1f1;
    color: #666;
    height: 30px;
}
#ste-msg-table thead th {
    background-color: #fff;
    width: 400px;
}
#ste-msg-table tr:nth-child(odd) {
    background: #fff;
}
#ste-msg-table tr:nth-child(even) {
    background: #fff;
}

/* -------------------- 第三模块 -------------------- */

.ste-operation {
     position: relative;
     margin-top: 10px;
     height: 25%;
     background-color: #fff;
     border-radius: 5px;
     box-shadow: 0 0 3px rgba(0,0,0,.3);
 }

/* 任务设备选择框 */
.task-select {
    width: 13%;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    padding: 20px 0 10px 20px;
    /*clear: right;*/
}
.operator-item {
    display: inline-block;
    height: 100%;
    text-align: center;
    position: relative;
    vertical-align: middle;
    padding: 0 20px;
}
.operator-item .select-title {
    display: inline-block;
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #fff;
    color: #2e95d3;
    font-size: 12px;
    border: 1px solid #8d8d8d;
    border-radius: 5px;
    padding: 5px;
    z-index: 999;
}
.operator-item .select-container {
    padding: 30px 0;
    height: 100%;
    border: 1px solid #8d8d8d;
    border-radius: 5px;
}
#ste-select .select-container label {
    display: block;
    padding: 15px 40px;
    vertical-align: middle; margin-top:-2px; margin-bottom:1px;

}
.select-container input {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle; margin-top:-2px; margin-bottom:1px;
}
.select-container-item {
    display: inline-block;
    padding: 0 10px;
}
.select-container-item input {
    height: 20px;
    border: 1px solid #8D8D8D;
    border-radius: 3px;
    width: 80px;
    outline: none;
}

/* 任务作业选择框 */
.task-operator {
    width: 86%;
    height: 100%;
    overflow: hidden;
    padding: 5px 0 10px 20px;
    display: inline-block;
    margin-right: 10px;
}
.task-operator fieldset {
    padding: 15px 20px 5px 50px;
    /*border-width: 1px;*/
    /*border-style: solid;*/
    height: 100%;
    border: 1px solid #8d8d8d;
    border-radius: 5px;
}
.task-operator legend {
    background-color: #fff;
    color: #2e95d3;
    font-size: 12px;
    border: 1px solid #8d8d8d;
    border-radius: 5px;
    padding: 5px;
    z-index: 999;
}
button.item {
    margin-top: 5px;
    border: 1px solid #333;
    font-size: 13px;
    padding: 1px 1px 1px 1px;
    width: 100px;
    height: 40px;
    outline: none;
    cursor: pointer;
    color: #333;
    background-color: transparent;
    margin-right: 5px;
    border-radius: 5px;
}
button.item:hover {
    background-color: #333;
    color: #fff;
}

/* 手动操作遮罩 */
.ste-operation-shade {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1000;
    text-align: center;
    padding: 80px 0;
}
.ste-operation-shade-span {
    font-size: xx-large;
    font-weight: bold;
    color: red;
}

/* -------------------- 第四模块 -------------------- */
.ste-output-board {
    margin-top: 10px;
    height: 20%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
}
#ste-output {
    border-left: none;
    border-right: none;
    border-top: 1px solid #9d9d9d;
    border-bottom: 1px solid #333;
    width: 100%;
    height: 100%;
    overflow: auto;
    resize:none;
    color: #666;
}

 src/main/webapp/static/layui/lay/modules/dropdown/dropdown.css

New file
@@ -0,0 +1,618 @@
/** 下拉菜单模块 date:2020-05-04   License By http://easyweb.vip */

.dropdown-no-scroll {
    overflow: hidden;
}

.dropdown-fix-parent {
    z-index: auto !important;
}

/** 遮罩层 */
.dropdown-menu-shade {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9998;
    background-color: rgba(0, 0, 0, .1);
}

.dropdown-menu-shade.no-shade {
    background-color: transparent;
}

/** 夜间主题 */

.dropdown-menu-nav.dark, .dropdown-menu-nav.dark .dropdown-menu-nav-child {
    background: #32363F;
    border-color: #484e58;
}

.dropdown-menu-nav.dark > li > a, .dropdown-menu-nav.dark .dropdown-menu-nav-child > li > a {
    color: #a1a8b8;
}

.dropdown-menu-nav.dark > li > a:hover, .dropdown-menu-nav.dark .dropdown-menu-nav-child > li > a:hover {
    background-color: #272b34;
}

.dropdown-menu-nav.dark > li.disabled > a, .dropdown-menu-nav > li.disabled > a:hover,
.dropdown-menu-nav.dark .dropdown-menu-nav-child > li.disabled > a, .dropdown-menu-nav .dropdown-menu-nav-child > li.disabled > a:hover {
    color: #7a8191;
}

.dropdown-menu-nav.dark > hr, .dropdown-menu-nav.dark .dropdown-menu-nav-child > hr {
    background-color: #484e58;
}

.dropdown-menu-nav.dark > li.title, .dropdown-menu-nav.dark .dropdown-menu-nav-child > li.title {
    color: #868b9a;
}

.dropdown-menu-nav.dark .dropdown-anchor {
    border-color: #484e58;
}

.dropdown-menu-nav.dark .dropdown-anchor::after {
    border-color: #32363F;
}

/** 白色主题 */
.dropdown-menu {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}

.dropdown-menu-nav, .dropdown-menu-nav .dropdown-menu-nav-child {
    position: absolute;
    padding: 5px 0;
    margin: 0;
    overflow: visible;
    min-width: 110px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    border: 1px solid #e4e4e4;
    line-height: initial;
    text-align: left;
    z-index: 9999;
}

.dropdown-menu .dropdown-menu-nav {
    display: none;
}

.dropdown-menu.dropdown-open .dropdown-menu-nav {
    display: block;
}

.dropdown-menu-nav.fixed {
    position: fixed;
}

.dropdown-menu-nav > li, .dropdown-menu-nav-child > li {
    padding: 0;
    margin: 0;
    line-height: 18px;
    user-select: none;
    list-style: none;
    position: relative;
}

.dropdown-menu-nav > li > a, .dropdown-menu-nav-child > li > a {
    display: block;
    color: #555;
    font-size: 14px;
    padding: 10px 15px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.dropdown-menu-nav > li > a:hover, .dropdown-menu-nav-child > li > a:hover {
    background-color: #eeeeee;
}

.dropdown-menu-nav > li .layui-icon, .dropdown-menu-nav-child > li .layui-icon {
    font-size: 14px;
    margin-right: 5px;
}

.dropdown-menu-nav > hr, .dropdown-menu-nav-child > hr {
    height: 1px;
    margin: 3px 0;
    background-color: #e6e6e6;
}

/** 禁用样式 */
.dropdown-menu-nav > li.disabled, .dropdown-menu-nav-child > li.disabled {
    cursor: not-allowed;
}

.dropdown-menu-nav > li.disabled > a, .dropdown-menu-nav > li.disabled > a:hover,
.dropdown-menu-nav-child > li.disabled > a, .dropdown-menu-nav-child > li.disabled > a:hover {
    color: #999;
    cursor: not-allowed;
    pointer-events: none;
    background-color: transparent;
}

/** 标题样式 */
.dropdown-menu-nav > li.title, .dropdown-menu-nav-child > li.title {
    color: #999;
    font-size: 12px;
    padding: 3px 15px;
}

/* nav子菜单 */
.dropdown-menu-nav .dropdown-menu-nav-child {
    left: 100%;
    top: 0;
    display: none;
}

.dropdown-menu-nav .show-left .dropdown-menu-nav-child {
    left: auto;
    right: 100%;
}

.dropdown-menu-nav > li.active > .dropdown-menu-nav-child, .dropdown-menu-nav-child > li.active > .dropdown-menu-nav-child {
    display: block;
}

.dropdown-menu-nav > li.have-more:after, .dropdown-menu-nav-child > li.have-more:after {
    content: "\e602";
    font-family: layui-icon !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    right: 4px;
    color: #666;
    top: 50%;
    margin-top: -8px;
}

/** 小箭头 */
.dropdown-menu-nav .dropdown-anchor, .dropdown-menu-nav .dropdown-anchor:after {
    border: 8px solid #e4e4e4;
    position: absolute;
    display: inline-block;
}

.dropdown-menu-nav .dropdown-anchor:after {
    content: '';
    border: 7px solid #fff;
}

/** 下左位置 */
.dropdown-menu-nav.dropdown-bottom-left {
    top: 100%;
}

.dropdown-menu-nav.dropdown-bottom-left {
    margin-top: 8px;
}

.dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor, .dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor:after {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    top: -16px;
}

.dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor:after {
    top: -6px;
    left: -7px;
}

.dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor {
    left: 12px;
}

/** 下右位置 */
.dropdown-menu-nav.dropdown-bottom-right {
    right: 0;
}

.dropdown-menu-nav.dropdown-bottom-right {
    margin-top: 8px;
}

.dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor, .dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor:after {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    top: -16px;
}

.dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor:after {
    top: -6px;
    left: -7px;
}

.dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor {
    right: 12px;
}

/** 下中位置 */
.dropdown-menu-nav.dropdown-bottom-center {
    left: 50%;
    /*transform: translateX(-50%);*/
}

.dropdown-menu-nav.dropdown-bottom-center {
    margin-top: 8px;
}

.dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor, .dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor:after {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    top: -16px;
}

.dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor:after {
    top: -6px;
    left: -7px;
}

.dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor {
    left: calc(50% - 8px);
}

/** 上左位置 */
.dropdown-menu-nav.dropdown-top-left {
    bottom: 100%;
}

.dropdown-menu-nav.dropdown-top-left {
    margin-bottom: 8px;
}

.dropdown-menu-nav.dropdown-top-left .dropdown-anchor, .dropdown-menu-nav.dropdown-top-left .dropdown-anchor:after {
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    bottom: -16px;
}

.dropdown-menu-nav.dropdown-top-left .dropdown-anchor:after {
    top: -8px;
    left: -7px;
    bottom: auto;
}

.dropdown-menu-nav.dropdown-top-left .dropdown-anchor {
    left: 12px;
}

/** 上右位置 */
.dropdown-menu-nav.dropdown-top-right {
    bottom: 100%;
    right: 0;
}

.dropdown-menu-nav.dropdown-top-right {
    margin-bottom: 8px;
}

.dropdown-menu-nav.dropdown-top-right .dropdown-anchor, .dropdown-menu-nav.dropdown-top-right .dropdown-anchor:after {
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    bottom: -16px;
}

.dropdown-menu-nav.dropdown-top-right .dropdown-anchor:after {
    top: -8px;
    left: -7px;
    bottom: auto;
}

.dropdown-menu-nav.dropdown-top-right .dropdown-anchor {
    right: 12px;
}

/** 上中位置 */
.dropdown-menu-nav.dropdown-top-center {
    bottom: 100%;
    left: 50%;
    /*transform: translateX(-50%);*/
}

.dropdown-menu-nav.dropdown-top-center {
    margin-bottom: 8px;
}

.dropdown-menu-nav.dropdown-top-center .dropdown-anchor, .dropdown-menu-nav.dropdown-top-center .dropdown-anchor:after {
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    bottom: -16px;
}

.dropdown-menu-nav.dropdown-top-center .dropdown-anchor:after {
    top: -8px;
    left: -7px;
    bottom: auto;
}

.dropdown-menu-nav.dropdown-top-center .dropdown-anchor {
    left: calc(50% - 8px);
}

/** 左上位置 */
.dropdown-menu-nav.dropdown-left-top {
    right: 100%;
    bottom: 0;
}

.dropdown-menu-nav.dropdown-left-top {
    margin-right: 8px;
}

.dropdown-menu-nav.dropdown-left-top .dropdown-anchor, .dropdown-menu-nav.dropdown-left-top .dropdown-anchor:after {
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    right: -16px;
}

.dropdown-menu-nav.dropdown-left-top .dropdown-anchor:after {
    top: -7px;
    left: -8px;
    right: auto;
}

.dropdown-menu-nav.dropdown-left-top .dropdown-anchor {
    bottom: 12px;
}

/** 左下位置 */
.dropdown-menu-nav.dropdown-left-bottom {
    right: 100%;
    top: 0;
}

.dropdown-menu-nav.dropdown-left-bottom {
    margin-right: 8px;
}

.dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor, .dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor:after {
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    right: -16px;
}

.dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor:after {
    top: -7px;
    left: -8px;
    right: auto;
}

.dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor {
    top: 12px;
}

/** 左中位置 */
.dropdown-menu-nav.dropdown-left-center {
    right: 100%;
    top: 50%;
    /*transform: translateY(-50%);*/
}

.dropdown-menu-nav.dropdown-left-center {
    margin-right: 8px;
}

.dropdown-menu-nav.dropdown-left-center .dropdown-anchor, .dropdown-menu-nav.dropdown-left-center .dropdown-anchor:after {
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    right: -16px;
}

.dropdown-menu-nav.dropdown-left-center .dropdown-anchor:after {
    top: -7px;
    left: -8px;
    right: auto;
}

.dropdown-menu-nav.dropdown-left-center .dropdown-anchor {
    top: calc(50% - 8px);
}

/** 右上位置 */
.dropdown-menu-nav.dropdown-right-top {
    left: 100%;
    bottom: 0;
}

.dropdown-menu-nav.dropdown-right-top {
    margin-left: 8px;
}

.dropdown-menu-nav.dropdown-right-top .dropdown-anchor, .dropdown-menu-nav.dropdown-right-top .dropdown-anchor:after {
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
    left: -16px;
}

.dropdown-menu-nav.dropdown-right-top .dropdown-anchor:after {
    top: -7px;
    left: -6px;
}

.dropdown-menu-nav.dropdown-right-top .dropdown-anchor {
    bottom: 12px;
}

/** 右下位置 */
.dropdown-menu-nav.dropdown-right-bottom {
    left: 100%;
    top: 0;
}

.dropdown-menu-nav.dropdown-right-bottom {
    margin-left: 8px;
}

.dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor, .dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor:after {
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
    left: -16px;
}

.dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor:after {
    top: -7px;
    left: -6px;
}

.dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor {
    top: 12px;
}

/** 右中位置 */
.dropdown-menu-nav.dropdown-right-center {
    left: 100%;
    top: 50%;
    /*transform: translateY(-50%);*/
}

.dropdown-menu-nav.dropdown-right-center {
    margin-left: 8px;
}

.dropdown-menu-nav.dropdown-right-center .dropdown-anchor, .dropdown-menu-nav.dropdown-right-center .dropdown-anchor:after {
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
    left: -16px;
}

.dropdown-menu-nav.dropdown-right-center .dropdown-anchor:after {
    top: -7px;
    left: -6px;
}

.dropdown-menu-nav.dropdown-right-center .dropdown-anchor {
    top: calc(50% - 8px);
}

/** 按钮里面三角形样式 */
.icon-btn .layui-icon-drop {
    margin-right: 0;
    font-size: 14px;
}

.layui-icon-drop:before {
    content: "\e625";
}

.layui-icon-drop.top {
    transform: rotate(180deg);
    display: inline-table;
}

.layui-icon-drop.left {
    transform: rotate(90deg);
    display: inline-table;
}

.layui-icon-drop.right {
    transform: rotate(-90deg);
    display: inline-table;
}

/** 适配btn-container */
.layui-btn-container .dropdown-menu .layui-btn {
    margin: 0;
}

.layui-btn-container .dropdown-menu {
    margin-right: 10px;
    margin-bottom: 10px;
}

.dropdown-menu + .dropdown-menu, .layui-btn + .dropdown-menu, .dropdown-menu + .layui-btn {
    margin-left: 10px;
}

.layui-btn-container input {
    font-size: 14px;
}

/** 气泡确认框 */
.dropdown-popconfirm {
    color: #555;
    font-size: 14px;
    max-width: 230px;
    min-width: 200px;
    width: max-content;
    padding: 15px 15px;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

.dropdown-popconfirm .layui-icon-help, .dropdown-popconfirm .layui-icon-about {
    font-size: 12px;
    color: #fff;
    height: 16px;
    width: 16px;
    line-height: 16px;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    background-color: #FF9900;
    border-radius: 50%;
    margin: -2px 3px 0 0;
    overflow: hidden;
    vertical-align: middle;
}

.dropdown-popconfirm .layui-icon-about {
    background-color: #FF0000;
    position: relative;
}

.dropdown-popconfirm .layui-icon-about:before {
    font-size: 28px;
    position: absolute;
    left: -6px;
    top: 0;
}

.dropdown-popconfirm .dropdown-popconfirm-title > span {
    display: inline-block;
    vertical-align: middle;
}

.dropdown-popconfirm .dropdown-popconfirm-btn {
    margin-top: 12px;
    text-align: right;
}

.dropdown-popconfirm .dropdown-popconfirm-btn .layui-btn {
    height: 24px;
    min-width: 45px;
    line-height: 24px;
    padding: 0;
    font-size: 12px;
    border-radius: 3px;
}

.dropdown-popconfirm .dropdown-popconfirm-btn .layui-btn[btn-cancel] {
    color: #333;
    background: transparent;
}

 src/main/webapp/static/layui/lay/modules/dropdown/dropdown.js

New file
@@ -0,0 +1,250 @@
/** 下拉菜单模块 date:2020-05-04   License By http://easyweb.vip */
layui.define(['jquery'], function (exports) {
    var $ = layui.jquery;
    var openClass = 'dropdown-open';
    var disableClass = 'dropdown-disabled';
    var noScrollClass = 'dropdown-no-scroll';
    var shadeClass = 'dropdown-menu-shade';
    var dropdownClass = 'dropdown-menu';
    var dropNavClass = 'dropdown-menu-nav';
    var hoverClass = 'dropdown-hover';
    var fixedClass = 'fixed';
    var noShadeClass = 'no-shade';
    var animClass = 'layui-anim layui-anim-upbit';
    var popAnimClass = 'layui-anim layui-anim-fadein';
    var dropDirect = ['bottom-left', 'bottom-right', 'bottom-center', 'top-left', 'top-right', 'top-center', 'left-top', 'left-bottom', 'left-center', 'right-top', 'right-bottom', 'right-center'];
    if ($('#ew-css-dropdown').length <= 0) {
        layui.link(layui.cache.base + 'dropdown/dropdown.css');
    }

    var dropdown = {
        // 绑定事件
        init: function () {
            // 点击触发
            $(document).off('click.dropdown').on('click.dropdown', '.' + dropdownClass + '>*:first-child', function (event) {
                var $drop = $(this).parent();
                if (!$drop.hasClass(hoverClass)) {
                    if ($drop.hasClass(openClass)) {
                        $drop.removeClass(openClass);
                    } else {
                        dropdown.hideAll();
                        dropdown.show($(this).parent().find('.' + dropNavClass));
                    }
                }
                event.stopPropagation();
            });
            // 点击任何位置关闭所有
            $(document).off('click.dropHide').on('click.dropHide', function (event) {
                dropdown.hideAll();
            });
            // 点击下拉菜单内容部分不关闭
            $(document).off('click.dropNav').on('click.dropNav', '.' + dropNavClass, function (event) {
                event.stopPropagation();
            });
            // hover触发
            var timer, lastDrop, hoverSelector = '.' + dropdownClass + '.' + hoverClass;
            $(document).off('mouseenter.dropdown').on('mouseenter.dropdown', hoverSelector, function (event) {
                if (lastDrop && lastDrop == event.currentTarget) {
                    clearTimeout(timer);
                }
                dropdown.show($(this).find('.' + dropNavClass));
            });
            $(document).off('mouseleave.dropdown').on('mouseleave.dropdown', hoverSelector, function (event) {
                lastDrop = event.currentTarget;
                timer = setTimeout(function () {
                    $(event.currentTarget).removeClass(openClass);
                }, 300);
            });
            // 分离式绑定
            $(document).off('click.dropStand').on('click.dropStand', '[data-dropdown]', function (event) {
                dropdown.showFixed($(this));
                event.stopPropagation();
            });
            // 无限级子菜单
            var hoverNavSelector = '.' + dropNavClass + ' li';
            $(document).off('mouseenter.dropdownNav').on('mouseenter.dropdownNav', hoverNavSelector, function (event) {
                $(this).children('.dropdown-menu-nav-child').addClass(animClass);
                $(this).addClass('active');
            });
            $(document).off('mouseleave.dropdownNav').on('mouseleave.dropdownNav', hoverNavSelector, function (event) {
                $(this).removeClass('active');
                $(this).find('li.active').removeClass('active');
            });
            // 气泡确认弹窗
            $(document).off('click.popconfirm').on('click.popconfirm', '.dropdown-menu-nav [btn-cancel]', function (event) {
                dropdown.hideAll();
                event.stopPropagation();
            });
        },
        // 点击菜单关闭
        openClickNavClose: function () {
            $(document).off('click.dropNavA').on('click.dropNavA', '.' + dropNavClass + '>li>a', function (event) {
                dropdown.hideAll();
                $(this).parentsUntil('.' + dropdownClass).last().parent().removeClass(openClass);
                event.stopPropagation();
            });
        },
        // 关闭所有
        hideAll: function () {
            $('.' + dropdownClass).removeClass(openClass);
            // 隐藏分离式菜单
            $('.' + dropNavClass + '.' + fixedClass).addClass('layui-hide');  // 隐藏分离式菜单
            $('.' + shadeClass).remove();  // 移除遮罩层
            $('body').removeClass(noScrollClass);  // 移除禁止页面滚动
            $('.dropdown-fix-parent').removeClass('dropdown-fix-parent');
            $('[data-dropdown]').removeClass(openClass);
        },
        // 展开非分离式下拉菜单
        show: function ($dropNav) {
            if ($dropNav && $dropNav.length > 0 && !$dropNav.hasClass(disableClass)) {
                if ($dropNav.hasClass('dropdown-popconfirm')) {
                    $dropNav.removeClass(animClass);
                    $dropNav.addClass(popAnimClass);
                } else {
                    $dropNav.removeClass(popAnimClass);
                    $dropNav.addClass(animClass);
                }
                var position;  // 获取位置
                for (var i = 0; i < dropDirect.length; i++) {
                    if ($dropNav.hasClass('dropdown-' + dropDirect[i])) {
                        position = dropDirect[i];
                        break;
                    }
                }
                if (!position) {  // 没有设置位置添加默认位置
                    $dropNav.addClass('dropdown-' + dropDirect[0]);
                    position = dropDirect[0];
                }
                dropdown.forCenter($dropNav, position);
                $dropNav.parent('.' + dropdownClass).addClass(openClass);
                return position;
            }
            return false;
        },
        // 展开分离式菜单
        showFixed: function ($trigger) {
            var $dropNav = $($trigger.data('dropdown')), position;
            if (!$dropNav.hasClass('layui-hide')) {
                dropdown.hideAll();  // 已经展开则隐藏
                return;
            }
            dropdown.hideAll();  // 已经展开则隐藏
            position = dropdown.show($dropNav);  // 获取弹出位置
            if (position) {
                $dropNav.addClass(fixedClass);  // 设置为固定定位
                $dropNav.removeClass('layui-hide');  // 显示下拉菜单
                var topLeft = dropdown.getTopLeft($trigger, $dropNav, position);  // 计算坐标
                topLeft = dropdown.checkPosition($dropNav, $trigger, position, topLeft); // 是否溢出屏幕
                $dropNav.css(topLeft);  // 设置坐标
                $('body').addClass(noScrollClass); // 禁止页面滚动
                var hideShade = ($trigger.attr('no-shade') == 'true');  // 是否隐藏遮罩层
                $('body').append('<div class="' + (hideShade ? (shadeClass + ' ' + noShadeClass) : shadeClass) + ' layui-anim layui-anim-fadein"></div>');  // 添加遮罩层
                // 重置父元素z-index
                $trigger.parentsUntil('body').each(function () {
                    var zIndex = $(this).css('z-index');
                    if (/[0-9]+/.test(zIndex)) {
                        $(this).addClass('dropdown-fix-parent');
                    }
                });
                $trigger.addClass(openClass);
            }
        },
        // 解决绝对定位因动画导致平移失效
        forCenter: function ($dropNav, position) {
            if (!$dropNav.hasClass(fixedClass)) {
                var wTrigger = $dropNav.parent().outerWidth(), hTrigger = $dropNav.parent().outerHeight();
                var wDrop = $dropNav.outerWidth(), hDrop = $dropNav.outerHeight();
                var pParts = position.split('-'), dropSide = pParts[0], dropPosition = pParts[1];  // 显示方向
                if ((dropSide == 'top' || dropSide == 'bottom') && dropPosition == 'center') {
                    $dropNav.css('left', (wTrigger - wDrop) / 2);
                }
                if ((dropSide == 'left' || dropSide == 'right') && dropPosition == 'center') {
                    $dropNav.css('top', (hTrigger - hDrop) / 2);
                }
            }
        },
        // 计算固定定位坐标
        getTopLeft: function ($trigger, $dropdown, position) {
            var widthTrigger = $trigger.outerWidth();
            var heightTrigger = $trigger.outerHeight();
            var widthDropdown = $dropdown.outerWidth();
            var heightDropdown = $dropdown.outerHeight();
            var topTrigger = $trigger.offset().top - $(document).scrollTop();
            var leftTrigger = $trigger.offset().left;
            var rightTrigger = leftTrigger + widthTrigger;
            var top = 0, left = 0;
            var positionParts = position.split('-');
            var anchorSide = positionParts[0];  // 箭头位置
            var anchorPosition = positionParts[1];  // 箭头方向
            if (anchorSide == 'top' || anchorSide == 'bottom') {
                heightDropdown += 8; // 加上margin距离
                switch (anchorPosition) {
                    case 'left':
                        left = leftTrigger;
                        break;
                    case 'center':
                        left = leftTrigger - widthDropdown / 2 + widthTrigger / 2;
                        break;
                    case 'right':
                        left = rightTrigger - widthDropdown;
                }
            }
            if (anchorSide == 'left' || anchorSide == 'right') {
                widthDropdown += 8;  // 加上margin距离
                switch (anchorPosition) {
                    case 'top':
                        top = topTrigger + heightTrigger - heightDropdown;
                        break;
                    case 'center':
                        top = topTrigger - heightDropdown / 2 + heightTrigger / 2;
                        break;
                    case 'bottom':
                        top = topTrigger;
                }
            }
            switch (anchorSide) {
                case 'top':
                    top = topTrigger - heightDropdown;
                    break;
                case 'right':
                    left = leftTrigger + widthTrigger;
                    break;
                case 'bottom':
                    top = topTrigger + heightTrigger;
                    break;
                case 'left':
                    left = leftTrigger - widthDropdown;
            }
            return {top: top, left: left, right: 'auto', bottom: 'auto'};
        },
        // 检查是否溢出屏幕
        checkPosition: function ($dropNav, $trigger, position, topLeft) {
            var aps = position.split('-');
            if ('bottom' == aps[0]) {
                if ((topLeft.top + $dropNav.outerHeight()) > dropdown.getPageHeight()) {
                    topLeft = dropdown.getTopLeft($trigger, $dropNav, 'top-' + aps[1]);
                    $dropNav.removeClass('dropdown-' + position);
                    $dropNav.addClass('dropdown-top-' + aps[1]);
                }
            } else if ('top' == aps[0]) {
                if (topLeft.top < 0) {
                    topLeft = dropdown.getTopLeft($trigger, $dropNav, 'bottom-' + aps[1]);
                    $dropNav.removeClass('dropdown-' + position);
                    $dropNav.addClass('dropdown-bottom-' + aps[1]);
                }
            }
            return topLeft;
        },
        // 获取浏览器高度
        getPageHeight: function () {
            return document.documentElement.clientHeight || document.body.clientHeight;
        },
        // 获取浏览器宽度
        getPageWidth: function () {
            return document.documentElement.clientWidth || document.body.clientWidth;
        }
    };

    dropdown.init();
    exports('dropdown', dropdown);
});

 src/main/webapp/views/console.html

@@ -91,164 +91,180 @@
        <div class="lane">
            <!-- 货架 -->
            <div class="stock-group">
                <button class="item" style="margin-left: 82px">2</button>
                <button class="item" style="margin-left: 82px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <button class="item">23</button>
                <span class="row-no">1#</span>
            </div>
            <div class="stock-group">
                <div id="site-100" class="site" style="">100</div>
                <button class="item" style="margin-left: 82px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <button class="item">23</button>
                <span class="row-no">2#</span>
            </div>
            <!-- 堆垛机 -->
            <div class="stock-group">
                <div id="site-100" class="site" style="">100</div>
                <button class="item">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <button class="item">22</button>
                <button class="item">23</button>
                <span class="row-no">3#</span>
            </div>
            <!-- 1号堆垛机 -->
            <div class="crn">
                <hr class="pathway">
                <div id="crn-1" class="machine"></div>
            </div>
            <!-- 货架 -->
            <div class="stock-group">
                <div id="site-101" class="site" style="">101</div>
                <button class="item" style="margin-left: 112px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">3#</span>
                <span class="row-no">4#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 82px">2</button>
                <button class="item" style="margin-left: 112px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">4#</span>
                <span class="row-no">5#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 142px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <span class="row-no">6#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 232px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item" style="margin-left: 60px">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item" style="margin-left: 60px">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <span class="row-no">7#</span>
            </div>
        </div>
        <!-- 第二组 -->
@@ -256,82 +272,93 @@
            <span class="row-no"></span>
            <!-- 货架 -->
            <div class="stock-group">
                <div class="site" style="background-color: rgb(108,167,168)"></div>
                <button class="item" style="margin-left: 232px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">6</button>
                <button class="item">5</button>
                <button class="item" style="margin-left: 60px">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item" style="margin-left: 60px">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">16</button>
                <button class="item">18</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">5#</span>
                <span class="row-no">8#</span>
            </div>
            <div class="stock-group">
                <div id="site-102" class="site" style="">102</div>
                <button class="item" style="margin-left: 142px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">6#</span>
                <button class="item">21</button>
                <span class="row-no">9#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 142px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <span class="row-no">10#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 142px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <span class="row-no">11#</span>
            </div>
            <!-- 堆垛机 -->
            <div class="crn">
@@ -340,164 +367,178 @@
            </div>
            <!-- 货架 -->
            <div class="stock-group">
                <div id="site-103" class="site" style="">103</div>
                <button class="item" style="margin-left: 142px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">7#</span>
                <button class="item">21</button>
                <span class="row-no">12#</span>
            </div>
            <div class="stock-group">
                <div class="site" style="background-color: rgb(108,167,168)"></div>
                <button class="item" style="margin-left: 142px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">8#</span>
                <button class="item">21</button>
                <span class="row-no">13#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 142px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <span class="row-no">14#</span>
            </div>

        </div>
        <!--第三组-->
        <div class="lane">
            <span class="row-no"></span>
            <!-- 货架 -->
            <div class="stock-group">
                <button class="item" style="margin-left: 82px">2</button>
                <button class="item" style="margin-left: 142px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">9#</span>
                <button class="item">21</button>
                <span class="row-no">15#</span>
            </div>
            <div class="stock-group">
                <div id="site-104" class="site" style="">104</div>
                <button class="item" style="margin-left: 142px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">10#</span>
                <button class="item">21</button>
                <span class="row-no">16#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 142px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <span class="row-no">17#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 142px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <span class="row-no">18#</span>
            </div>
            <!-- 堆垛机 -->
            <div class="crn">
@@ -506,411 +547,82 @@
            </div>
            <!-- 货架 -->
            <div class="stock-group">
                <div id="site-105" class="site" style="">105</div>
                <button class="item" style="margin-left: 82px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">11#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 82px">2</button>
                <button class="item">4</button>
                <button class="item">6</button>
                <button class="item">8</button>
                <button class="item">10</button>
                <button class="item">12</button>
                <button class="item">14</button>
                <button class="item">16</button>
                <button class="item">18</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">12#</span>
            </div>
        </div>
        <!--第四组-->
        <div class="lane">
            <span class="row-no"></span>
            <!-- 货架 -->
            <div class="stock-group">
                <button class="item" style="margin-left: 82px">2</button>
                <button class="item">4</button>
                <button class="item">6</button>
                <button class="item">8</button>
                <button class="item">10</button>
                <button class="item">12</button>
                <button class="item">14</button>
                <button class="item">16</button>
                <button class="item">18</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">13#</span>
            </div>
            <div class="stock-group">
                <div id="site-106" class="site" style="">106</div>
                <button class="item">2</button>
                <button class="item">4</button>
                <button class="item">6</button>
                <button class="item">8</button>
                <button class="item">10</button>
                <button class="item">12</button>
                <button class="item">14</button>
                <button class="item">16</button>
                <button class="item">18</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">14#</span>
            </div>
            <!-- 堆垛机 -->
            <div class="crn">
                <hr class="pathway">
                <div id="crn-4" class="machine"></div>
            </div>
            <!-- 货架 -->
            <div class="stock-group">
                <div id="site-107" class="site" style="">107</div>
                <button class="item">2</button>
                <button class="item">4</button>
                <button class="item">6</button>
                <button class="item">8</button>
                <button class="item">10</button>
                <button class="item">12</button>
                <button class="item">14</button>
                <button class="item">16</button>
                <button class="item">18</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">15#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 82px">2</button>
                <button class="item">4</button>
                <button class="item">6</button>
                <button class="item">8</button>
                <button class="item">10</button>
                <button class="item">12</button>
                <button class="item">14</button>
                <button class="item">16</button>
                <button class="item">18</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">16#</span>
            </div>
        </div>
        <!--第五组-->
        <div class="lane">
            <span class="row-no"></span>
            <!-- 货架 -->
            <div class="stock-group">
                <button class="item" style="margin-left: 82px">2</button>
                <button class="item">4</button>
                <button class="item">6</button>
                <button class="item">8</button>
                <button class="item">10</button>
                <button class="item">12</button>
                <button class="item">14</button>
                <button class="item">16</button>
                <button class="item">18</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">17#</span>
            </div>
            <div class="stock-group">
                <div id="site-108" class="site" style="">108</div>
                <button class="item">2</button>
                <button class="item">4</button>
                <button class="item">6</button>
                <button class="item">8</button>
                <button class="item">10</button>
                <button class="item">12</button>
                <button class="item">14</button>
                <button class="item">16</button>
                <button class="item">18</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <span class="row-no">18#</span>
            </div>
            <!-- 堆垛机 -->
            <div class="crn">
                <hr class="pathway">
                <div id="crn-5" class="machine"></div>
            </div>
            <!-- 货架 -->
            <div class="stock-group">
                <div id="site-109" class="site" style="">109</div>
                <button class="item">2</button>
                <button class="item">4</button>
                <button class="item">6</button>
                <button class="item">8</button>
                <button class="item">10</button>
                <button class="item">12</button>
                <button class="item">14</button>
                <button class="item">16</button>
                <button class="item">18</button>
                <button class="item">20</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <button class="item">23</button>
                <span class="row-no">19#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 82px">2</button>
                <button class="item" style="margin-left: 82px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <button class="item">22</button>
                <button class="item">24</button>
                <button class="item">26</button>
                <button class="item">28</button>
                <button class="item">30</button>
                <button class="item">32</button>
                <button class="item">34</button>
                <button class="item">36</button>
                <button class="item">38</button>
                <button class="item">40</button>
                <button class="item">42</button>
                <button class="item">44</button>
                <button class="item">46</button>
                <button class="item">48</button>
                <button class="item">50</button>
                <button class="item">52</button>
                <button class="item">54</button>
                <button class="item">56</button>
                <button class="item">58</button>
                <button class="item">60</button>
                <button class="item">62</button>
                <button class="item">64</button>
                <button class="item">66</button>
                <button class="item">68</button>
                <button class="item">70</button>
                <button class="item">23</button>
                <span class="row-no">20#</span>
            </div>
            <div class="stock-group">
                <button class="item" style="margin-left: 82px">1</button>
                <button class="item">2</button>
                <button class="item">3</button>
                <button class="item">4</button>
                <button class="item">5</button>
                <button class="item">6</button>
                <button class="item">7</button>
                <button class="item">8</button>
                <button class="item">9</button>
                <button class="item">10</button>
                <button class="item">11</button>
                <button class="item">12</button>
                <button class="item">13</button>
                <button class="item">14</button>
                <button class="item">15</button>
                <button class="item">16</button>
                <button class="item">17</button>
                <button class="item">18</button>
                <button class="item">19</button>
                <button class="item">20</button>
                <button class="item">21</button>
                <button class="item">22</button>
                <button class="item">23</button>
                <span class="row-no">21#</span>
            </div>
        </div>
    </div>
@@ -955,7 +667,7 @@
            <div class="body-head">输送线状态</div>
            <div class="state states">
                <span>运输线总数</span>
                <span class="line-ss">45</span>
                <span class="line-ss">48</span>
            </div>
            <div class="button"><span>所有状态</span></div>
            <div class="button item-group">
@@ -1220,9 +932,9 @@
</html>
<script>
    var tData = []
    var tDate1 = []
    var tDate2 = []
    var tDate3 = []
    var tData1 = []
    var tData2 = []
    var tData3 = []
    function getCodeData(){
        $.ajax({
            url:baseUrl +'/console/barcode/output/site',
@@ -1230,25 +942,22 @@
            success:function (res) {
                if(res.code === 200){
                    tData = eval(res.data);
                    console.log(tData)
                    if(tData.length<=5){
                        tData1 = tData
                    } else if (tData.length<=10){
                        tDate1 = tData.slice(0,5)
                        tData1 = tData.slice(0,5)
                        tData.splice(0,5)
                        tDate2 = tData
                        console.log(tDate2)
                        tData2 = tData
                    } else if(tData.length<=15){
                        tDate1 = tData.slice(0,5)
                        tDate2 = tData.slice(6,10)
                        tData1 = tData.slice(0,5)
                        tData2 = tData.slice(6,10)
                        tData.splice(0,10)
                        tDate3 = tData
                        console.log(tDate3)
                        tData3 = tData
                    } else {
                        tData = tData.slice(-15)
                        tDate1 = tData.slice(-15)
                        tDate2 = tData.slice(-10)
                        tDate3 = tData.slice(-5)
                        tData1 = tData.slice(-15)
                        tData2 = tData.slice(-10)
                        tData3 = tData.slice(-5)

                    }
                }
@@ -1264,17 +973,16 @@


    function renderBarCode() {
        for (var i = 0;i<tDate1.length;i++){
            console.log(tDate1[i])
            var str1 = '<li><span>' + tDate1[i].barcode + '</span><span class="right">' + tDate1[i].time + '</span></li>'
        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<tDate2.length;j++){
            var str2 = '<li><span>' + tDate2[j].barcode + '</span><span class="right">' + tDate2[j].time + '</span></li>'
        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<tDate3.length;k++){
            var str3 = '<li><span>' + tDate3[k].barcode + '</span><span class="right">' + tDate3[k].time + '</span></li>'
        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)
        }
    }
@@ -1300,9 +1008,9 @@
                for (var val in res.data) {
                    var find = $("#siteWindow").find(":input[name='" + val + "']");
                    if (find[0].type==='text') {
                        find.val(data[val]);
                        find.val(res.data[val]);
                    } else if (find[0].type === 'checkbox') {
                        find.attr("checked", data[val] === 'Y');
                        find.attr("checked", res.data[val] === 'Y');
                    }
                }
            }
@@ -1399,7 +1107,6 @@
            },
            method: 'POST',
            success: function (res) {
                console.log(res)
                layer.close(index);
                if (res.code === 200){
                    if (res.data.status) {

 src/main/webapp/views/crn.html

@@ -41,187 +41,181 @@
    </style>
</head>
<body>
<div class="button-window"></div>
<!-- 日志监控板 -->
<div class="log-board">
    <!-- 执行命令 -->

    <!-- 执行命令 -->
    <div class="command-log">
        <h3>执行中的命令</h3>
        <div class="crn-command-item">
            <label>1#</label>
            <button id="demoBtn-1" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
            <!--            <span>&nbsp;</span>-->
            <input id="crn1" disabled="disabled">
        </div>
        <div class="crn-command-item">
            <label>2#</label>
            <button id="demoBtn-2" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
            <!--            <span>&nbsp;</span>-->
            <input id="crn2" disabled="disabled">
        </div>
        <div class="crn-command-item">
            <label>3#</label>
            <button id="demoBtn-3" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
            <!--            <span>&nbsp;</span>-->
            <input id="crn3" disabled="disabled">
        </div>
        <div class="crn-command-item">
            <label>4#</label>
            <button id="demoBtn-4" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
            <!--            <span>&nbsp;</span>-->
            <input id="crn4" disabled="disabled">
        </div>
        <div class="crn-command-item">
            <label>5#</label>
            <button id="demoBtn-5" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
            <!--            <span>&nbsp;</span>-->
            <input id="crn5" disabled="disabled">
        </div>
    </div>
    <!-- 堆垛机状态位信息 -->
    <div class="crn-state">
        <table id="crn-state-table">
            <thead>
            <tr>
                <th>堆垛机</th>
                <th>模式</th>
                <th>状态</th>
                <th>有物</th>
                <th>列</th>
                <th>层</th>
                <th>货叉定位</th>
                <th>载货台定位</th>
                <th>走行在定位</th>
                <th>故障代码</th>
                <th>故障描述</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
<div style="padding: 10px;height: 100%;float: left;width: 6%">
    <div class="button-window"></div>
</div>
<!-- 堆垛机状态 -->
<div class="crn-msg">
    <table id="crn-msg-table">
        <thead>
        <tr>
            <th>堆垛机</th>
            <th>工作号</th>
            <th>状态</th>
            <th>源站</th>
            <th>目标站</th>
            <th>源库位</th>
            <th>目标库位</th>
            <th>走行速度（m/min)</th>
            <th>升降速度（m/min)</th>
            <th>叉牙速度（m/min)</th>
            <th>走行距离(m)</th>
            <th>升降距离(m)</th>
            <th>走行时长(s)</th>
            <th>升降时长(s)</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<!-- 手动操作 -->
<div class="crn-operation">
<div style="height: 100%;padding-left: 6%">
    <div style="padding: 10px;height: 100%">
        <!-- 日志监控板 -->
        <div class="log-board">
            <!-- 执行命令 -->

    <!-- 遮罩层 -->
    <div class="crn-operation-shade">
        <span class="crn-operation-shade-span">
            WCS 系统运行中，请停止后操作
        </span>
    </div>

    <!-- 设备任务选择 -->
    <div class="task-select">
        <!-- 堆垛机选择 -->
        <div id="crn-select" class="operator-item">
            <span class="select-title">堆垛机号</span>
            <div class="select-container">
                <label><input type="radio" name="crnSelect" value="1" checked>&nbsp;1号堆垛机</label>
                <label><input type="radio" name="crnSelect" value="2">&nbsp;2号堆垛机</label>
                <label><input type="radio" name="crnSelect" value="3">&nbsp;3号堆垛机</label>
                <label><input type="radio" name="crnSelect" value="4">&nbsp;4号堆垛机</label>
                <label><input type="radio" name="crnSelect" value="5">&nbsp;5号堆垛机</label>
            <!-- 执行命令 -->
            <div class="command-log">
                <h3>执行中的命令</h3>
                <div class="crn-command-item">
                    <label>1#</label>
                    <button id="demoBtn-1" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
                    <!--            <span>&nbsp;</span>-->
                    <input id="crn1" disabled="disabled">
                </div>
                <div class="crn-command-item" style="margin-top: 25px">
                    <label>2#</label>
                    <button id="demoBtn-2" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
                    <!--            <span>&nbsp;</span>-->
                    <input id="crn2" disabled="disabled">
                </div>
                <div class="crn-command-item" style="margin-top: 25px">
                    <label>3#</label>
                    <button id="demoBtn-3" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
                    <!--            <span>&nbsp;</span>-->
                    <input id="crn3" disabled="disabled">
                </div>
            </div>
            <!-- 堆垛机状态位信息 -->
            <div class="crn-state">
                <table id="crn-state-table">
                    <thead>
                    <tr>
                        <th>堆垛机</th>
                        <th>模式</th>
                        <th>状态</th>
                        <th>有物</th>
                        <th>列</th>
                        <th>层</th>
                        <th>货叉定位</th>
                        <th>载货台定位</th>
                        <th>走行在定位</th>
                        <th>故障代码</th>
                        <th>故障描述</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 源站/源库位 选择 -->
        <div id="source-select" class="operator-item">
            <span class="select-title">源站/源库位</span>
            <div class="select-container">
                <div class="select-container-item">
                    <span>站</span>
                    <label><input id="sourceStaNo" type="number" name="points" min="0" /></label>
                </div>
                <div class="select-container-item">
                    <span>排</span>
                    <label><input id="sourceRow" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
                </div>
                <div class="select-container-item">
                    <span>列</span>
                    <label><input id="sourceBay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
                </div>
                <div class="select-container-item">
                    <span>层</span>
                    <label><input id="sourceLev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
                </div>
            </div>
        <!-- 堆垛机状态 -->
        <div class="crn-msg">
            <table id="crn-msg-table">
                <thead>
                <tr>
                    <th>堆垛机</th>
                    <th>工作号</th>
                    <th>状态</th>
                    <th>源站</th>
                    <th>目标站</th>
                    <th>源库位</th>
                    <th>目标库位</th>
                    <th>走行速度（m/min)</th>
                    <th>升降速度（m/min)</th>
                    <th>叉牙速度（m/min)</th>
                    <th>走行距离(m)</th>
                    <th>升降距离(m)</th>
                    <th>走行时长(s)</th>
                    <th>升降时长(s)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <!-- 目标站/目标库位 选择 -->
        <div id="target-select" class="operator-item">
            <span class="select-title">目标站/目标库位</span>
            <div class="select-container">
                <div class="select-container-item">
                    <span>站</span>
                    <label><input id="staNo" type="number" name="points" min="0" /></label>
        <!-- 手动操作 -->
        <div class="crn-operation">

            <!-- 遮罩层 -->
            <div class="crn-operation-shade">
                <span class="crn-operation-shade-span">
                    WCS 系统运行中，请停止后操作
                </span>
            </div>

            <!-- 设备任务选择 -->
            <div class="task-select">
                <!-- 堆垛机选择 -->
                <div id="crn-select" class="operator-item">
                    <span class="select-title">堆垛机号</span>
                    <div class="select-container">
                        <label><input type="radio" name="crnSelect" value="1" checked>&nbsp;1号堆垛机</label>
                        <label><input type="radio" name="crnSelect" value="2">&nbsp;2号堆垛机</label>
                        <label><input type="radio" name="crnSelect" value="3">&nbsp;3号堆垛机</label>
                        <label><input type="radio" name="crnSelect" value="4">&nbsp;4号堆垛机</label>
                        <label><input type="radio" name="crnSelect" value="5">&nbsp;5号堆垛机</label>
                    </div>
                </div>
                <div class="select-container-item">
                    <span>排</span>
                    <label><input id="row" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
                <!-- 源站/源库位 选择 -->
                <div id="source-select" class="operator-item">
                    <span class="select-title">源站/源库位</span>
                    <div class="select-container">
                        <div class="select-container-item">
                            <span>站</span>
                            <label><input id="sourceStaNo" type="number" name="points" min="0" /></label>
                        </div>
                        <div class="select-container-item">
                            <span>排</span>
                            <label><input id="sourceRow" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
                        </div>
                        <div class="select-container-item">
                            <span>列</span>
                            <label><input id="sourceBay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
                        </div>
                        <div class="select-container-item">
                            <span>层</span>
                            <label><input id="sourceLev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
                        </div>
                    </div>
                </div>
                <div class="select-container-item">
                    <span>列</span>
                    <label><input id="bay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
                </div>
                <div class="select-container-item">
                    <span>层</span>
                    <label><input id="lev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
                <!-- 目标站/目标库位 选择 -->
                <div id="target-select" class="operator-item">
                    <span class="select-title">目标站/目标库位</span>
                    <div class="select-container">
                        <div class="select-container-item">
                            <span>站</span>
                            <label><input id="staNo" type="number" name="points" min="0" /></label>
                        </div>
                        <div class="select-container-item">
                            <span>排</span>
                            <label><input id="row" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
                        </div>
                        <div class="select-container-item">
                            <span>列</span>
                            <label><input id="bay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
                        </div>
                        <div class="select-container-item">
                            <span>层</span>
                            <label><input id="lev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设备任务操作 -->
            <div class="task-operator">
                <fieldset>
                    <legend>手动操作</legend>
                    <div class="button-group">
                        <button class="item" onclick="put()">入库</button>
                        <button class="item" onclick="take()">出库</button>
                        <button class="item" onclick="stockMove()">库位转移</button>
                        <button class="item" onclick="siteMove()">站到站</button>
                        <!--                <button class="item" onclick="bacOrigin()">回原点</button>-->
                        <!--                <button class="item" onclick="reverseOrigin()">反原点</button>-->
                        <!--                <button class="item" onclick="coorMove()">坐标移行</button>-->
                        <button class="item" onclick="taskComplete()">任务完成</button>
                        <!--                <button class="item" onclick="pause()">暂停</button>-->
                        <!--                <button class="item" onclick="boot()">启动</button>-->
                        <button class="item" onclick="clearCommand()">清除命令</button>
                        <button class="item" onclick="handleReset()">复位</button>
                    </div>
                </fieldset>
            </div>

        </div>
        <!-- 堆垛机日志输出 -->
        <div class="crn-output-board">
            <textarea id="crn-output"></textarea>
        </div>
    </div>

    <!-- 设备任务操作 -->
    <div class="task-operator">
        <fieldset>
            <legend>手动操作</legend>
            <div class="button-group">
                <button class="item" onclick="put()">入库</button>
                <button class="item" onclick="take()">出库</button>
                <button class="item" onclick="stockMove()">库位转移</button>
                <button class="item" onclick="siteMove()">站到站</button>
                <!--                <button class="item" onclick="bacOrigin()">回原点</button>-->
                <!--                <button class="item" onclick="reverseOrigin()">反原点</button>-->
                <!--                <button class="item" onclick="coorMove()">坐标移行</button>-->
                <button class="item" onclick="taskComplete()">任务完成</button>
                <!--                <button class="item" onclick="pause()">暂停</button>-->
                <!--                <button class="item" onclick="boot()">启动</button>-->
                <button class="item" onclick="clearCommand()">清除命令</button>
                <button class="item" onclick="handleReset()">复位</button>
            </div>
        </fieldset>
    </div>

</div>
<!-- 堆垛机日志输出 -->
<div class="crn-output-board">
    <textarea id="crn-output"></textarea>
</div>
</body>
<script>

 src/main/webapp/views/index.html

@@ -16,6 +16,7 @@
        <li><a id="console" onclick="nav(this.id)" class="nav-select" href="#">主控图</a></li>
        <li><a id="pipeline" onclick="nav(this.id)" class="nav-unselect" href="#">输送设备</a></li>
        <li><a id="crn" onclick="nav(this.id)" class="nav-unselect" href="#">堆垛机</a></li>
        <li><a id="ste" onclick="nav(this.id)" class="nav-unselect" href="#">穿梭车</a></li>
    </ul>
</div>
<!-- 主体内容 -->

 src/main/webapp/views/pipeline.html

@@ -17,98 +17,109 @@
    </style>
</head>
<body>
<main>
<div style="padding: 10px;height: 100%;float: left;width: 6%">
    <div class="button-window"></div>
    <!-- plc异常日志监控版 -->
    <div id="plc-error" class="main-board" style="padding-left: 10px">
        <!-- 头部 -->
        <div class="plc-log-header">
            <!--            <div style="height: 40%">-->
            <!--                <span>东侧PLC执行指令</span>-->
            <!--            </div>-->
            <!--            <div style="height: 40%">-->
            <!--                <span>西侧PLC执行指令</span>-->
            <!--            </div>-->
            <div>
                <span style="color: #1E9FFF">PLC异常信息表:</span>
            </div>
        </div>
        <!-- 主体 -->
        <div class="plc-log-body">
            <table id="plc-error-table">
                <thead>
                <tr>
                    <th style="width: 200px">序号</th>
                    <th style="width: 400px">PLC错误描述</th>
                    <th style="width: 400px">异常</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>

    <!-- 站点状态数据监控版 -->
    <div id="site-monitor" class="main-board">
        <!-- 表格 -->
        <table id="site-table">
            <!-- 表头 -->
            <thead>
            <tr>
                <th>站号</th>
                <th>工作号</th>
                <th>自动</th>
                <th>有物</th>
                <th>可入</th>
                <th>可出</th>
                <th>入库标记</th>
                <th>空板信号</th>
                <th>目标站</th>
            </tr>
            </thead>
            <!-- 表格内容 -->
            <tbody></tbody>
        </table>
    </div>
</main>
<footer>
    <textarea id="output"></textarea>
</footer>

<div id="site-detl" style="display: none">
    <form>
        <div class="form-item">
            <label class="form-label">站号:</label>
            <div class="form-input">
                <input id="siteId" name="siteId" class="layui-input" lay-verify="required|number" autocomplete="off" disabled="disabled">
            </div>
        </div>
        <div class="form-item">
            <label class="form-label">工作号:</label>
            <div class="form-input">
                <input id="workNo" name="workNo" type="number" class="layui-input" lay-verify="number" autocomplete="off">
            </div>
        </div>
        <div class="form-item">
            <label class="form-label">目标站:</label>
            <div class="form-input">
                <input id="staNo" name="staNo" type="number" class="layui-input" lay-verify="number" autocomplete="off">
            </div>
        </div>
        <div class="form-item">
            <label class="form-label">入库标记:</label>
            <div class="form-input">
                <input id="pakMk" name="pakMk" type="text" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="form-item form-button-container">
            <button class="form-button" id="save">保存</button>
            <button class="form-button" id="cancel" style="background-color: #D0D0D0">取消</button>
        </div>
    </form>
</div>

<div style="height: 100%;padding-left: 6%">
    <div style="padding: 10px;height: 100%">
        <main>

            <!-- plc异常日志监控版 -->
            <div id="plc-error" class="main-board" style="padding-left: 10px">
                <!-- 头部 -->
                <div class="plc-log-header">
                    <!--            <div style="height: 40%">-->
                    <!--                <span>东侧PLC执行指令</span>-->
                    <!--            </div>-->
                    <!--            <div style="height: 40%">-->
                    <!--                <span>西侧PLC执行指令</span>-->
                    <!--            </div>-->
                    <div>
                        <span style="color: #1E9FFF">PLC异常信息表:</span>
                    </div>
                </div>
                <!-- 主体 -->
                <div class="plc-log-body">
                    <table id="plc-error-table">
                        <thead>
                        <tr>
                            <th style="width: 200px">序号</th>
                            <th style="width: 400px">PLC错误描述</th>
                            <th style="width: 400px">异常</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 站点状态数据监控版 -->
            <div id="site-monitor" class="main-board">
                <!-- 表格 -->
                <table id="site-table">
                    <!-- 表头 -->
                    <thead>
                    <tr>
                        <th>站号</th>
                        <th>工作号</th>
                        <th>自动</th>
                        <th>有物</th>
                        <th>可入</th>
                        <th>可出</th>
                        <th>入库标记</th>
                        <th>空板信号</th>
                        <th>目标站</th>
                    </tr>
                    </thead>
                    <!-- 表格内容 -->
                    <tbody></tbody>
                </table>
            </div>
        </main>
        <footer>
            <textarea id="output"></textarea>
        </footer>

        <div id="site-detl" style="display: none">
            <form>
                <div class="form-item">
                    <label class="form-label">站号:</label>
                    <div class="form-input">
                        <input id="siteId" name="siteId" class="layui-input" lay-verify="required|number" autocomplete="off" disabled="disabled">
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-label">工作号:</label>
                    <div class="form-input">
                        <input id="workNo" name="workNo" type="number" class="layui-input" lay-verify="number" autocomplete="off">
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-label">目标站:</label>
                    <div class="form-input">
                        <input id="staNo" name="staNo" type="number" class="layui-input" lay-verify="number" autocomplete="off">
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-label">入库标记:</label>
                    <div class="form-input">
                        <input id="pakMk" name="pakMk" type="text" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <div class="form-item form-button-container">
                    <button class="form-button" id="save">保存</button>
                    <button class="form-button" id="cancel" style="background-color: #D0D0D0">取消</button>
                </div>
            </form>
        </div>
    </div>

</div>


</body>
<script>
    // 初始化

 src/main/webapp/views/ste.html

New file
@@ -0,0 +1,228 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>穿梭车监控管理</title>
    <link rel="stylesheet" type="text/css" href="../static/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../static/css/common.css">
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/ste.css">
    <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../static/js/layer/layer.js"></script>
    <script type="text/javascript" src="../static/layui/layui.js"></script>
    <script type="text/javascript" src="../static/js/common.js"></script>
</head>
<body>
    <div style="padding: 10px;height: 100%;float: left;width: 6%">
        <div class="button-window"></div>
    </div>
    <div style="height: 100%;padding-left: 6%">
        <div style="padding: 10px;height: 100%">
            <!-- 日志监控板 -->
            <div class="log-board">
                <div class="command-log">
                    <h3>穿梭车位置</h3>
                    <div class="ste-command-item">
                        <label>1#</label>
                        <div class="dropdown-menu">
                            <button id="steBtn-1" class="demoBtn" onclick="changePosition(this.id)">修改位置</button>
                                <ul class="dropdown-menu-nav dark" >
                                    <div class="dropdown-anchor"></div>
                                    <div class="form-item"><span>当前穿梭机：</span><input type="text"></div>
                                    <div class="form-item"><span>排：</span><input type="text"></div>
                                    <div class="form-item"><span>列：</span><input type="text"></div>
                                    <div class="form-item"><span>层：</span><input type="text"></div>
                                </ul>
                        </div>
                        <div class="dropdown-menu">
                            <button class="demoBtn" onclick="">所属堆垛机</button>
                                <ul class="dropdown-menu-nav dark">
                                    <div class="dropdown-anchor"></div>
                                    <div class="form-item"><span>堆垛机号：</span><input type="text"></div>
                                </ul>
                        </div>
                    </div>
                    <div class="ste-command-item" style="margin-top: 25px">
                        <label>2#</label>
                        <div class="dropdown-menu">
                            <button id="steBtn-2" class="demoBtn" onclick="changePosition(this.id)">修改位置</button>
                            <ul class="dropdown-menu-nav dark" >
                                <div class="dropdown-anchor"></div>
                                <div class="form-item"><span>当前穿梭机：</span><input type="text"></div>
                                <div class="form-item"><span>排：</span><input type="text"></div>
                                <div class="form-item"><span>列：</span><input type="text"></div>
                                <div class="form-item"><span>层：</span><input type="text"></div>
                            </ul>
                        </div>
                        <div class="dropdown-menu">
                            <button class="demoBtn" onclick="">所属堆垛机</button>
                                <ul class="dropdown-menu-nav dark">
                                    <div class="dropdown-anchor"></div>
                                    <div class="form-item"><span>堆垛机号：</span><input type="text"></div>
                                </ul>
                        </div>
                    </div>
                    <div class="ste-command-item" style="margin-top: 25px">
                        <label>3#</label>
                        <div class="dropdown-menu">
                            <button id="steBtn-3" class="demoBtn" onclick="changePosition(this.id)">修改位置</button>
                            <ul class="dropdown-menu-nav dark" >
                                <div class="dropdown-anchor"></div>
                                <div class="form-item"><span>当前穿梭机：</span><input type="text"></div>
                                <div class="form-item"><span>排：</span><input type="text"></div>
                                <div class="form-item"><span>列：</span><input type="text"></div>
                                <div class="form-item"><span>层：</span><input type="text"></div>
                            </ul>
                        </div>
                        <div class="dropdown-menu">
                        <button class="demoBtn" onclick="">所属堆垛机</button>
                            <ul class="dropdown-menu-nav dark">
                                <div class="dropdown-anchor"></div>
                                <div class="form-item"><span>堆垛机号：</span><input type="text"></div>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 堆垛机状态位信息 -->
                <div class="ste-state">
                    <table id="ste-state-table">
                        <thead>
                            <tr>
                                <th>穿梭车</th>
                                <th>模式</th>
                                <th>状态</th>
                                <th>有物</th>
                                <th>在轨</th>
                                <th>电量</th>
                                <th>排</th>
                                <th>列</th>
                                <th>层</th>
                                <th>货叉定位</th>
                                <th>载货台定位</th>
                                <th>走行在定位</th>
                                <th>报警信息1</th>
                                <th>报警信息2</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 堆垛机状态 -->
            <div class="ste-msg">
                <table id="ste-msg-table">
                    <thead>
                        <tr>
                            <th>穿梭车</th>
                            <th>任务号</th>
                            <th>任务类型</th>
                            <th>当前位置</th>
                            <th>近点距离</th>
                            <th>当前速度</th>
                            <th>高低位</th>
                            <th>过账指令任务号</th>
                            <th>过账指令状态</th>
                            <th>盘点数量</th>
                            <th>穿梭板就绪</th>
                            <th>充电桩号</th>
                            <th>堆垛机运行</th>
                            <th>堆垛机伸叉</th>
                            <th>堆垛机搬移</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <!-- 手动操作 -->
            <div class="ste-operation">
                <!-- 遮罩层 -->
<!--                <div class="ste-operation-shade">-->
<!--                    <span class="ste-operation-shade-span">-->
<!--                        WCS 系统运行中，请停止后操作-->
<!--                    </span>-->
<!--                </div>-->
                <!-- 设备任务选择 -->
                <div class="task-select">
                    <!-- 选择 -->
                    <div id="ste-select" class="operator-item">
                        <span class="select-title">穿梭车号</span>
                        <div class="select-container">
                            <label><input type="radio" name="steSelect" value="1" checked>&nbsp;1号穿梭车</label>
                            <label><input type="radio" name="steSelect" value="2">&nbsp;2号穿梭车</label>
                            <label><input type="radio" name="steSelect" value="3">&nbsp;3号穿梭车</label>
                        </div>
                    </div>
                </div>
                <!-- 设备任务操作 -->
                <div class="task-operator">
                    <fieldset>
                        <legend>手动操作</legend>
                        <div class="button-group">
                            <button class="item" onclick="leftTake()">左出库</button>
                            <button class="item" onclick="rightTake()">右出库</button>
                            <button class="item" onclick="leftPut()">左入库</button>
                            <button class="item" onclick="rightPut()">右入库</button>
                            <button class="item" onclick="leftStockMove()">左移库</button>
                            <button class="item" onclick="rightStockMove()">右移库</button>
                            <button class="item" onclick="oOrigin()">原点</button>
                            <button class="item" onclick="farPoint()">远点</button>
                            <button class="item" onclick="aPoint()">A 点</button>
                            <button class="item" onclick="bPoint()">B 点</button>
                            <button class="item" onclick="moveLift()">左搬移</button>
                            <button class="item" onclick="moveRight()">右搬移</button>
                            <button class="item" onclick="charging()">充电</button>
                            <button class="item" onclick="pause()">左盘点</button>
                            <button class="item" onclick="boot()">右盘点</button>
                            <button class="item" onclick="boot()">任务完成</button>
                            <button class="item" onclick="clearCommand()">清除命令</button>
                            <button class="item" onclick="handleReset()">复位</button>
                        </div>
                    </fieldset>
                </div>

            </div>
            <!-- 堆垛机日志输出 -->
            <div class="ste-output-board">
                <textarea id="ste-output"></textarea>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    layui.config({
        base: baseUrl + "/static/layui/lay/modules/"
    }).extend({
        dropdown: 'dropdown/dropdown',
    }).use(['dropdown'],function () {
        var dropdown = layui.dropdown;
    })
</script>
<script>
    // 修改穿梭车位置
    function changePosition(id) {
        console.log(id)
        // $.ajax({
        //     url: baseUrl +
        // })
    }
    // 穿梭车信息表获取 ---- 表一

    function getSteStateInfo() {
        var tableEl = $('ste-state-table');
        $.ajax({
            url: baseUrl + "/crn/table/crn/state",
            headers: {'token': localStorage.getItem('token')},
            method: 'GET',
            success: function (res) {
                console.log(res)

            }
        })
    }
    setInterval(function () {
        getSteStateInfo()
    },1000)
</script>

			@@ -8,7 +8,7 @@
			name: @pom.build.finalName@
			datasource:
			driver-class-name: com.microsoft.sqlserver.jdbc.SQLServerDriver
			url: jdbc:sqlserver://192.168.0.99:1433;databasename=bfasrs
			url: jdbc:sqlserver://192.168.4.229:1433;databasename=bfasrs
			username: sa
			password: sa@123
			mvc:

			@@ -28,7 +28,7 @@
			width: 100%;
			height: 23% ;
			position: absolute;
			bottom: 1%;
			bottom: 2.5%;
			}
			/* 控制开关 */
			.system-state {
			@@ -320,6 +320,7 @@
			}
			/* 库位组 */
			.stock-group .item {
			width: 30px;
			float: left;
			border-top: 1px solid rgb(194,76,65);
			border-bottom: 1px solid rgb(194,76,65);

			@@ -1,11 +1,14 @@
			body {
			padding: 10px;
			background-color: #f1f1f1;
			background-color: #6CA7A8;
			}
			.button-window {
			float: left;
			width: 5%;
			width: 100%;
			height: 100%;
			padding: 10px;
			background-color: #6CA7A8;
			border-radius: 5px;
			box-shadow: 0 0 3px rgba(0 0 0 .3);
			}
			/* -------------------- 第一模块 -------------------- */
			.log-board {
			@@ -19,7 +22,7 @@
			.command-log {
			float: left;
			height: 100%;
			width: 19%;
			width: 20%;
			text-align: center;
			}
			.command-log h2 {
			@@ -51,7 +54,7 @@
			.crn-state {
			float: left;
			height: 100%;
			width: 76%;
			width: 80%;
			overflow: auto;
			}
			/* 堆垛机状态表 */

			@@ -41,7 +41,7 @@
			}
			.sidebar ul {
			font-size: 20px;
			font-weight: 700;
			font-weight: 5c00;
			padding-left: 15%;

			}
			@@ -51,16 +51,17 @@
			}

			.sidebar a:hover {
			color: rgb(87,214,201);
			color: rgb(255, 148, 111);
			}



			.nav-unselect {
			color: #5D7677;
			color: #FFFFFF;
			}
			.nav-select {
			color: rgb(87,214,201);
			font-weight: 900;
			color: rgb(255, 148, 111);
			}

			@@ -1,6 +1,6 @@
			body {
			padding: 10px;
			background-color: #f1f1f1;
			/padding: 10px;/
			background-color: #6CA7A8;
			}
			main {
			background-color: #fff;
			@@ -11,13 +11,17 @@
			}
			.button-window {
			float: left;
			width: 5%;
			width: 100%;
			height: 100%;
			padding: 10px;
			background-color: #6CA7A8;
			border-radius: 5px;
			box-shadow: 0 0 3px rgba(0 0 0 .3);
			}
			.main-board {
			padding-left: 1%;
			float: left;
			width: 47.5%;
			width: 50%;
			height: 100%;
			overflow: auto;
			}

New file
			@@ -0,0 +1,298 @@
			body {
			background-color: #6CA7A8;
			}
			.button-window {
			float: left;
			width: 100%;
			height: 100%;
			padding: 10px;
			background-color: #6CA7A8;
			border-radius: 5px;
			box-shadow: 0 0 3px rgba(0 0 0 .3);
			}
			/* -------------------- 第一模块 -------------------- */
			.log-board {
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0 0 3px rgba(0,0,0,.3);
			height: 25%;
			}
			/* 左 */
			.command-log {
			float: left;
			height: 100%;
			width: 20%;
			text-align: center;
			}
			.command-log h2 {
			padding: 10px;
			}

			.ste-command-item {
			padding: 4px 0;
			}
			.ste-command-item label {
			font-size: 20px;
			font-weight: bold;
			vertical-align: middle;
			}
			.demoBtn {
			vertical-align: middle;
			width: 100%;
			height: 30px;
			left: 0;
			top: 0;
			text-shadow: inherit;
			font-size: 15px;
			margin-left: 5px;
			margin-right: 5px;
			display: inline-block;
			background-color: #FF5722;
			border: none;
			color: #FFF;
			box-shadow: 1px 1px 5px #B6B6B6;
			border-radius: 3px;
			cursor: pointer;
			}
			.demoBtn:hover {
			opacity: 0.8
			}
			.demoBtn:focus {
			outline: 0;
			}
			/▼下拉菜单▼/
			.form-item {
			width: 220px;
			display: inline-block;
			color: white;
			font-size: 16px;
			font-weight: bold;
			padding: 3px;margin:3px
			}
			.form-item input {
			display: inline-block;
			width: 100px;
			float: right;
			}
			/▲下拉菜单▲/
			/.ste-command-item span {/
			/* display: inline-block;*/
			/* width: 20px;*/
			/* height: 20px;*/
			/* background-color: #2e9926;*/
			/* border-radius: 5px;*/
			/* vertical-align: middle;*/
			/}/

			/* 右 */
			.ste-state {
			float: left;
			height: 100%;
			width: 80%;
			overflow: auto;
			}
			/* 穿梭车状态表 */
			#ste-state-table {
			font-size: 12px;
			border-collapse: collapse;
			margin: 0 auto;
			text-align: center;
			}
			#ste-state-table td, #ste-state-table th {
			border: 1px solid #cad9ea;
			color: #666;
			height: 25px;
			}
			#ste-state-table thead th {
			background-color: #CCE8EB;
			width: 300px;
			}
			#ste-state-table tr:nth-child(odd) {
			background: #fff;
			}
			#ste-state-table tr:nth-child(even) {
			background: #F5FAFA;
			}

			/* -------------------- 第二模块 -------------------- */
			.ste-msg {
			/overflow: auto;/
			margin-top: 10px;
			height: 23%;
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0 0 3px rgba(0,0,0,.3);
			}
			/* 堆垛机状态信息表 */
			#ste-msg-table {
			font-size: 12px;
			border-collapse: collapse;
			margin: 0 auto;
			text-align: center;
			}
			#ste-msg-table td, #ste-msg-table th {
			border: 1px solid #f1f1f1;
			color: #666;
			height: 30px;
			}
			#ste-msg-table thead th {
			background-color: #fff;
			width: 400px;
			}
			#ste-msg-table tr:nth-child(odd) {
			background: #fff;
			}
			#ste-msg-table tr:nth-child(even) {
			background: #fff;
			}

			/* -------------------- 第三模块 -------------------- */

			.ste-operation {
			position: relative;
			margin-top: 10px;
			height: 25%;
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0 0 3px rgba(0,0,0,.3);
			}

			/* 任务设备选择框 */
			.task-select {
			width: 13%;
			height: 100%;
			overflow: hidden;
			display: inline-block;
			padding: 20px 0 10px 20px;
			/clear: right;/
			}
			.operator-item {
			display: inline-block;
			height: 100%;
			text-align: center;
			position: relative;
			vertical-align: middle;
			padding: 0 20px;
			}
			.operator-item .select-title {
			display: inline-block;
			position: absolute;
			top: -11px;
			left: 50%;
			transform: translate(-50%, 0);
			background-color: #fff;
			color: #2e95d3;
			font-size: 12px;
			border: 1px solid #8d8d8d;
			border-radius: 5px;
			padding: 5px;
			z-index: 999;
			}
			.operator-item .select-container {
			padding: 30px 0;
			height: 100%;
			border: 1px solid #8d8d8d;
			border-radius: 5px;
			}
			#ste-select .select-container label {
			display: block;
			padding: 15px 40px;
			vertical-align: middle; margin-top:-2px; margin-bottom:1px;

			}
			.select-container input {
			display: inline-block;
			font-size: 12px;
			vertical-align: middle; margin-top:-2px; margin-bottom:1px;
			}
			.select-container-item {
			display: inline-block;
			padding: 0 10px;
			}
			.select-container-item input {
			height: 20px;
			border: 1px solid #8D8D8D;
			border-radius: 3px;
			width: 80px;
			outline: none;
			}

			/* 任务作业选择框 */
			.task-operator {
			width: 86%;
			height: 100%;
			overflow: hidden;
			padding: 5px 0 10px 20px;
			display: inline-block;
			margin-right: 10px;
			}
			.task-operator fieldset {
			padding: 15px 20px 5px 50px;
			/border-width: 1px;/
			/border-style: solid;/
			height: 100%;
			border: 1px solid #8d8d8d;
			border-radius: 5px;
			}
			.task-operator legend {
			background-color: #fff;
			color: #2e95d3;
			font-size: 12px;
			border: 1px solid #8d8d8d;
			border-radius: 5px;
			padding: 5px;
			z-index: 999;
			}
			button.item {
			margin-top: 5px;
			border: 1px solid #333;
			font-size: 13px;
			padding: 1px 1px 1px 1px;
			width: 100px;
			height: 40px;
			outline: none;
			cursor: pointer;
			color: #333;
			background-color: transparent;
			margin-right: 5px;
			border-radius: 5px;
			}
			button.item:hover {
			background-color: #333;
			color: #fff;
			}

			/* 手动操作遮罩 */
			.ste-operation-shade {
			position: absolute;
			height: 100%;
			width: 100%;
			z-index: 1000;
			text-align: center;
			padding: 80px 0;
			}
			.ste-operation-shade-span {
			font-size: xx-large;
			font-weight: bold;
			color: red;
			}

			/* -------------------- 第四模块 -------------------- */
			.ste-output-board {
			margin-top: 10px;
			height: 20%;
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0 0 3px rgba(0,0,0,.3);
			}
			#ste-output {
			border-left: none;
			border-right: none;
			border-top: 1px solid #9d9d9d;
			border-bottom: 1px solid #333;
			width: 100%;
			height: 100%;
			overflow: auto;
			resize:none;
			color: #666;
			}

New file
			@@ -0,0 +1,618 @@
			/** 下拉菜单模块 date:2020-05-04 License By http://easyweb.vip */

			.dropdown-no-scroll {
			overflow: hidden;
			}

			.dropdown-fix-parent {
			z-index: auto !important;
			}

			/** 遮罩层 */
			.dropdown-menu-shade {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 9998;
			background-color: rgba(0, 0, 0, .1);
			}

			.dropdown-menu-shade.no-shade {
			background-color: transparent;
			}

			/** 夜间主题 */

			.dropdown-menu-nav.dark, .dropdown-menu-nav.dark .dropdown-menu-nav-child {
			background: #32363F;
			border-color: #484e58;
			}

			.dropdown-menu-nav.dark > li > a, .dropdown-menu-nav.dark .dropdown-menu-nav-child > li > a {
			color: #a1a8b8;
			}

			.dropdown-menu-nav.dark > li > a:hover, .dropdown-menu-nav.dark .dropdown-menu-nav-child > li > a:hover {
			background-color: #272b34;
			}

			.dropdown-menu-nav.dark > li.disabled > a, .dropdown-menu-nav > li.disabled > a:hover,
			.dropdown-menu-nav.dark .dropdown-menu-nav-child > li.disabled > a, .dropdown-menu-nav .dropdown-menu-nav-child > li.disabled > a:hover {
			color: #7a8191;
			}

			.dropdown-menu-nav.dark > hr, .dropdown-menu-nav.dark .dropdown-menu-nav-child > hr {
			background-color: #484e58;
			}

			.dropdown-menu-nav.dark > li.title, .dropdown-menu-nav.dark .dropdown-menu-nav-child > li.title {
			color: #868b9a;
			}

			.dropdown-menu-nav.dark .dropdown-anchor {
			border-color: #484e58;
			}

			.dropdown-menu-nav.dark .dropdown-anchor::after {
			border-color: #32363F;
			}

			/** 白色主题 */
			.dropdown-menu {
			position: relative;
			display: inline-block;
			vertical-align: bottom;
			}

			.dropdown-menu-nav, .dropdown-menu-nav .dropdown-menu-nav-child {
			position: absolute;
			padding: 5px 0;
			margin: 0;
			overflow: visible;
			min-width: 110px;
			background: #fff;
			border-radius: 2px;
			box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
			border: 1px solid #e4e4e4;
			line-height: initial;
			text-align: left;
			z-index: 9999;
			}

			.dropdown-menu .dropdown-menu-nav {
			display: none;
			}

			.dropdown-menu.dropdown-open .dropdown-menu-nav {
			display: block;
			}

			.dropdown-menu-nav.fixed {
			position: fixed;
			}

			.dropdown-menu-nav > li, .dropdown-menu-nav-child > li {
			padding: 0;
			margin: 0;
			line-height: 18px;
			user-select: none;
			list-style: none;
			position: relative;
			}

			.dropdown-menu-nav > li > a, .dropdown-menu-nav-child > li > a {
			display: block;
			color: #555;
			font-size: 14px;
			padding: 10px 15px;
			text-decoration: none;
			white-space: nowrap;
			cursor: pointer;
			user-select: none;
			}

			.dropdown-menu-nav > li > a:hover, .dropdown-menu-nav-child > li > a:hover {
			background-color: #eeeeee;
			}

			.dropdown-menu-nav > li .layui-icon, .dropdown-menu-nav-child > li .layui-icon {
			font-size: 14px;
			margin-right: 5px;
			}

			.dropdown-menu-nav > hr, .dropdown-menu-nav-child > hr {
			height: 1px;
			margin: 3px 0;
			background-color: #e6e6e6;
			}

			/** 禁用样式 */
			.dropdown-menu-nav > li.disabled, .dropdown-menu-nav-child > li.disabled {
			cursor: not-allowed;
			}

			.dropdown-menu-nav > li.disabled > a, .dropdown-menu-nav > li.disabled > a:hover,
			.dropdown-menu-nav-child > li.disabled > a, .dropdown-menu-nav-child > li.disabled > a:hover {
			color: #999;
			cursor: not-allowed;
			pointer-events: none;
			background-color: transparent;
			}

			/** 标题样式 */
			.dropdown-menu-nav > li.title, .dropdown-menu-nav-child > li.title {
			color: #999;
			font-size: 12px;
			padding: 3px 15px;
			}

			/* nav子菜单 */
			.dropdown-menu-nav .dropdown-menu-nav-child {
			left: 100%;
			top: 0;
			display: none;
			}

			.dropdown-menu-nav .show-left .dropdown-menu-nav-child {
			left: auto;
			right: 100%;
			}

			.dropdown-menu-nav > li.active > .dropdown-menu-nav-child, .dropdown-menu-nav-child > li.active > .dropdown-menu-nav-child {
			display: block;
			}

			.dropdown-menu-nav > li.have-more:after, .dropdown-menu-nav-child > li.have-more:after {
			content: "\e602";
			font-family: layui-icon !important;
			font-size: 14px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			position: absolute;
			right: 4px;
			color: #666;
			top: 50%;
			margin-top: -8px;
			}

			/** 小箭头 */
			.dropdown-menu-nav .dropdown-anchor, .dropdown-menu-nav .dropdown-anchor:after {
			border: 8px solid #e4e4e4;
			position: absolute;
			display: inline-block;
			}

			.dropdown-menu-nav .dropdown-anchor:after {
			content: '';
			border: 7px solid #fff;
			}

			/** 下左位置 */
			.dropdown-menu-nav.dropdown-bottom-left {
			top: 100%;
			}

			.dropdown-menu-nav.dropdown-bottom-left {
			margin-top: 8px;
			}

			.dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor, .dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor:after {
			border-top-color: transparent;
			border-right-color: transparent;
			border-left-color: transparent;
			top: -16px;
			}

			.dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor:after {
			top: -6px;
			left: -7px;
			}

			.dropdown-menu-nav.dropdown-bottom-left .dropdown-anchor {
			left: 12px;
			}

			/** 下右位置 */
			.dropdown-menu-nav.dropdown-bottom-right {
			right: 0;
			}

			.dropdown-menu-nav.dropdown-bottom-right {
			margin-top: 8px;
			}

			.dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor, .dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor:after {
			border-top-color: transparent;
			border-right-color: transparent;
			border-left-color: transparent;
			top: -16px;
			}

			.dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor:after {
			top: -6px;
			left: -7px;
			}

			.dropdown-menu-nav.dropdown-bottom-right .dropdown-anchor {
			right: 12px;
			}

			/** 下中位置 */
			.dropdown-menu-nav.dropdown-bottom-center {
			left: 50%;
			/transform: translateX(-50%);/
			}

			.dropdown-menu-nav.dropdown-bottom-center {
			margin-top: 8px;
			}

			.dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor, .dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor:after {
			border-top-color: transparent;
			border-right-color: transparent;
			border-left-color: transparent;
			top: -16px;
			}

			.dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor:after {
			top: -6px;
			left: -7px;
			}

			.dropdown-menu-nav.dropdown-bottom-center .dropdown-anchor {
			left: calc(50% - 8px);
			}

			/** 上左位置 */
			.dropdown-menu-nav.dropdown-top-left {
			bottom: 100%;
			}

			.dropdown-menu-nav.dropdown-top-left {
			margin-bottom: 8px;
			}

			.dropdown-menu-nav.dropdown-top-left .dropdown-anchor, .dropdown-menu-nav.dropdown-top-left .dropdown-anchor:after {
			border-bottom-color: transparent;
			border-right-color: transparent;
			border-left-color: transparent;
			bottom: -16px;
			}

			.dropdown-menu-nav.dropdown-top-left .dropdown-anchor:after {
			top: -8px;
			left: -7px;
			bottom: auto;
			}

			.dropdown-menu-nav.dropdown-top-left .dropdown-anchor {
			left: 12px;
			}

			/** 上右位置 */
			.dropdown-menu-nav.dropdown-top-right {
			bottom: 100%;
			right: 0;
			}

			.dropdown-menu-nav.dropdown-top-right {
			margin-bottom: 8px;
			}

			.dropdown-menu-nav.dropdown-top-right .dropdown-anchor, .dropdown-menu-nav.dropdown-top-right .dropdown-anchor:after {
			border-bottom-color: transparent;
			border-right-color: transparent;
			border-left-color: transparent;
			bottom: -16px;
			}

			.dropdown-menu-nav.dropdown-top-right .dropdown-anchor:after {
			top: -8px;
			left: -7px;
			bottom: auto;
			}

			.dropdown-menu-nav.dropdown-top-right .dropdown-anchor {
			right: 12px;
			}

			/** 上中位置 */
			.dropdown-menu-nav.dropdown-top-center {
			bottom: 100%;
			left: 50%;
			/transform: translateX(-50%);/
			}

			.dropdown-menu-nav.dropdown-top-center {
			margin-bottom: 8px;
			}

			.dropdown-menu-nav.dropdown-top-center .dropdown-anchor, .dropdown-menu-nav.dropdown-top-center .dropdown-anchor:after {
			border-bottom-color: transparent;
			border-right-color: transparent;
			border-left-color: transparent;
			bottom: -16px;
			}

			.dropdown-menu-nav.dropdown-top-center .dropdown-anchor:after {
			top: -8px;
			left: -7px;
			bottom: auto;
			}

			.dropdown-menu-nav.dropdown-top-center .dropdown-anchor {
			left: calc(50% - 8px);
			}

			/** 左上位置 */
			.dropdown-menu-nav.dropdown-left-top {
			right: 100%;
			bottom: 0;
			}

			.dropdown-menu-nav.dropdown-left-top {
			margin-right: 8px;
			}

			.dropdown-menu-nav.dropdown-left-top .dropdown-anchor, .dropdown-menu-nav.dropdown-left-top .dropdown-anchor:after {
			border-bottom-color: transparent;
			border-right-color: transparent;
			border-top-color: transparent;
			right: -16px;
			}

			.dropdown-menu-nav.dropdown-left-top .dropdown-anchor:after {
			top: -7px;
			left: -8px;
			right: auto;
			}

			.dropdown-menu-nav.dropdown-left-top .dropdown-anchor {
			bottom: 12px;
			}

			/** 左下位置 */
			.dropdown-menu-nav.dropdown-left-bottom {
			right: 100%;
			top: 0;
			}

			.dropdown-menu-nav.dropdown-left-bottom {
			margin-right: 8px;
			}

			.dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor, .dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor:after {
			border-bottom-color: transparent;
			border-right-color: transparent;
			border-top-color: transparent;
			right: -16px;
			}

			.dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor:after {
			top: -7px;
			left: -8px;
			right: auto;
			}

			.dropdown-menu-nav.dropdown-left-bottom .dropdown-anchor {
			top: 12px;
			}

			/** 左中位置 */
			.dropdown-menu-nav.dropdown-left-center {
			right: 100%;
			top: 50%;
			/transform: translateY(-50%);/
			}

			.dropdown-menu-nav.dropdown-left-center {
			margin-right: 8px;
			}

			.dropdown-menu-nav.dropdown-left-center .dropdown-anchor, .dropdown-menu-nav.dropdown-left-center .dropdown-anchor:after {
			border-bottom-color: transparent;
			border-right-color: transparent;
			border-top-color: transparent;
			right: -16px;
			}

			.dropdown-menu-nav.dropdown-left-center .dropdown-anchor:after {
			top: -7px;
			left: -8px;
			right: auto;
			}

			.dropdown-menu-nav.dropdown-left-center .dropdown-anchor {
			top: calc(50% - 8px);
			}

			/** 右上位置 */
			.dropdown-menu-nav.dropdown-right-top {
			left: 100%;
			bottom: 0;
			}

			.dropdown-menu-nav.dropdown-right-top {
			margin-left: 8px;
			}

			.dropdown-menu-nav.dropdown-right-top .dropdown-anchor, .dropdown-menu-nav.dropdown-right-top .dropdown-anchor:after {
			border-bottom-color: transparent;
			border-left-color: transparent;
			border-top-color: transparent;
			left: -16px;
			}

			.dropdown-menu-nav.dropdown-right-top .dropdown-anchor:after {
			top: -7px;
			left: -6px;
			}

			.dropdown-menu-nav.dropdown-right-top .dropdown-anchor {
			bottom: 12px;
			}

			/** 右下位置 */
			.dropdown-menu-nav.dropdown-right-bottom {
			left: 100%;
			top: 0;
			}

			.dropdown-menu-nav.dropdown-right-bottom {
			margin-left: 8px;
			}

			.dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor, .dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor:after {
			border-bottom-color: transparent;
			border-left-color: transparent;
			border-top-color: transparent;
			left: -16px;
			}

			.dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor:after {
			top: -7px;
			left: -6px;
			}

			.dropdown-menu-nav.dropdown-right-bottom .dropdown-anchor {
			top: 12px;
			}

			/** 右中位置 */
			.dropdown-menu-nav.dropdown-right-center {
			left: 100%;
			top: 50%;
			/transform: translateY(-50%);/
			}

			.dropdown-menu-nav.dropdown-right-center {
			margin-left: 8px;
			}

			.dropdown-menu-nav.dropdown-right-center .dropdown-anchor, .dropdown-menu-nav.dropdown-right-center .dropdown-anchor:after {
			border-bottom-color: transparent;
			border-left-color: transparent;
			border-top-color: transparent;
			left: -16px;
			}

			.dropdown-menu-nav.dropdown-right-center .dropdown-anchor:after {
			top: -7px;
			left: -6px;
			}

			.dropdown-menu-nav.dropdown-right-center .dropdown-anchor {
			top: calc(50% - 8px);
			}

			/** 按钮里面三角形样式 */
			.icon-btn .layui-icon-drop {
			margin-right: 0;
			font-size: 14px;
			}

			.layui-icon-drop:before {
			content: "\e625";
			}

			.layui-icon-drop.top {
			transform: rotate(180deg);
			display: inline-table;
			}

			.layui-icon-drop.left {
			transform: rotate(90deg);
			display: inline-table;
			}

			.layui-icon-drop.right {
			transform: rotate(-90deg);
			display: inline-table;
			}

			/** 适配btn-container */
			.layui-btn-container .dropdown-menu .layui-btn {
			margin: 0;
			}

			.layui-btn-container .dropdown-menu {
			margin-right: 10px;
			margin-bottom: 10px;
			}

			.dropdown-menu + .dropdown-menu, .layui-btn + .dropdown-menu, .dropdown-menu + .layui-btn {
			margin-left: 10px;
			}

			.layui-btn-container input {
			font-size: 14px;
			}

			/** 气泡确认框 */
			.dropdown-popconfirm {
			color: #555;
			font-size: 14px;
			max-width: 230px;
			min-width: 200px;
			width: max-content;
			padding: 15px 15px;
			box-sizing: border-box;
			border: none;
			border-radius: 4px;
			box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
			}

			.dropdown-popconfirm .layui-icon-help, .dropdown-popconfirm .layui-icon-about {
			font-size: 12px;
			color: #fff;
			height: 16px;
			width: 16px;
			line-height: 16px;
			text-align: center;
			display: inline-block;
			box-sizing: border-box;
			background-color: #FF9900;
			border-radius: 50%;
			margin: -2px 3px 0 0;
			overflow: hidden;
			vertical-align: middle;
			}

			.dropdown-popconfirm .layui-icon-about {
			background-color: #FF0000;
			position: relative;
			}

			.dropdown-popconfirm .layui-icon-about:before {
			font-size: 28px;
			position: absolute;
			left: -6px;
			top: 0;
			}

			.dropdown-popconfirm .dropdown-popconfirm-title > span {
			display: inline-block;
			vertical-align: middle;
			}

			.dropdown-popconfirm .dropdown-popconfirm-btn {
			margin-top: 12px;
			text-align: right;
			}

			.dropdown-popconfirm .dropdown-popconfirm-btn .layui-btn {
			height: 24px;
			min-width: 45px;
			line-height: 24px;
			padding: 0;
			font-size: 12px;
			border-radius: 3px;
			}

			.dropdown-popconfirm .dropdown-popconfirm-btn .layui-btn[btn-cancel] {
			color: #333;
			background: transparent;
			}

New file
			@@ -0,0 +1,250 @@
			/** 下拉菜单模块 date:2020-05-04 License By http://easyweb.vip */
			layui.define(['jquery'], function (exports) {
			var $ = layui.jquery;
			var openClass = 'dropdown-open';
			var disableClass = 'dropdown-disabled';
			var noScrollClass = 'dropdown-no-scroll';
			var shadeClass = 'dropdown-menu-shade';
			var dropdownClass = 'dropdown-menu';
			var dropNavClass = 'dropdown-menu-nav';
			var hoverClass = 'dropdown-hover';
			var fixedClass = 'fixed';
			var noShadeClass = 'no-shade';
			var animClass = 'layui-anim layui-anim-upbit';
			var popAnimClass = 'layui-anim layui-anim-fadein';
			var dropDirect = ['bottom-left', 'bottom-right', 'bottom-center', 'top-left', 'top-right', 'top-center', 'left-top', 'left-bottom', 'left-center', 'right-top', 'right-bottom', 'right-center'];
			if ($('#ew-css-dropdown').length <= 0) {
			layui.link(layui.cache.base + 'dropdown/dropdown.css');
			}

			var dropdown = {
			// 绑定事件
			init: function () {
			// 点击触发
			$(document).off('click.dropdown').on('click.dropdown', '.' + dropdownClass + '>*:first-child', function (event) {
			var $drop = $(this).parent();
			if (!$drop.hasClass(hoverClass)) {
			if ($drop.hasClass(openClass)) {
			$drop.removeClass(openClass);
			} else {
			dropdown.hideAll();
			dropdown.show($(this).parent().find('.' + dropNavClass));
			}
			}
			event.stopPropagation();
			});
			// 点击任何位置关闭所有
			$(document).off('click.dropHide').on('click.dropHide', function (event) {
			dropdown.hideAll();
			});
			// 点击下拉菜单内容部分不关闭
			$(document).off('click.dropNav').on('click.dropNav', '.' + dropNavClass, function (event) {
			event.stopPropagation();
			});
			// hover触发
			var timer, lastDrop, hoverSelector = '.' + dropdownClass + '.' + hoverClass;
			$(document).off('mouseenter.dropdown').on('mouseenter.dropdown', hoverSelector, function (event) {
			if (lastDrop && lastDrop == event.currentTarget) {
			clearTimeout(timer);
			}
			dropdown.show($(this).find('.' + dropNavClass));
			});
			$(document).off('mouseleave.dropdown').on('mouseleave.dropdown', hoverSelector, function (event) {
			lastDrop = event.currentTarget;
			timer = setTimeout(function () {
			$(event.currentTarget).removeClass(openClass);
			}, 300);
			});
			// 分离式绑定
			$(document).off('click.dropStand').on('click.dropStand', '[data-dropdown]', function (event) {
			dropdown.showFixed($(this));
			event.stopPropagation();
			});
			// 无限级子菜单
			var hoverNavSelector = '.' + dropNavClass + ' li';
			$(document).off('mouseenter.dropdownNav').on('mouseenter.dropdownNav', hoverNavSelector, function (event) {
			$(this).children('.dropdown-menu-nav-child').addClass(animClass);
			$(this).addClass('active');
			});
			$(document).off('mouseleave.dropdownNav').on('mouseleave.dropdownNav', hoverNavSelector, function (event) {
			$(this).removeClass('active');
			$(this).find('li.active').removeClass('active');
			});
			// 气泡确认弹窗
			$(document).off('click.popconfirm').on('click.popconfirm', '.dropdown-menu-nav [btn-cancel]', function (event) {
			dropdown.hideAll();
			event.stopPropagation();
			});
			},
			// 点击菜单关闭
			openClickNavClose: function () {
			$(document).off('click.dropNavA').on('click.dropNavA', '.' + dropNavClass + '>li>a', function (event) {
			dropdown.hideAll();
			$(this).parentsUntil('.' + dropdownClass).last().parent().removeClass(openClass);
			event.stopPropagation();
			});
			},
			// 关闭所有
			hideAll: function () {
			$('.' + dropdownClass).removeClass(openClass);
			// 隐藏分离式菜单
			$('.' + dropNavClass + '.' + fixedClass).addClass('layui-hide'); // 隐藏分离式菜单
			$('.' + shadeClass).remove(); // 移除遮罩层
			$('body').removeClass(noScrollClass); // 移除禁止页面滚动
			$('.dropdown-fix-parent').removeClass('dropdown-fix-parent');
			$('[data-dropdown]').removeClass(openClass);
			},
			// 展开非分离式下拉菜单
			show: function ($dropNav) {
			if ($dropNav && $dropNav.length > 0 && !$dropNav.hasClass(disableClass)) {
			if ($dropNav.hasClass('dropdown-popconfirm')) {
			$dropNav.removeClass(animClass);
			$dropNav.addClass(popAnimClass);
			} else {
			$dropNav.removeClass(popAnimClass);
			$dropNav.addClass(animClass);
			}
			var position; // 获取位置
			for (var i = 0; i < dropDirect.length; i++) {
			if ($dropNav.hasClass('dropdown-' + dropDirect[i])) {
			position = dropDirect[i];
			break;
			}
			}
			if (!position) { // 没有设置位置添加默认位置
			$dropNav.addClass('dropdown-' + dropDirect[0]);
			position = dropDirect[0];
			}
			dropdown.forCenter($dropNav, position);
			$dropNav.parent('.' + dropdownClass).addClass(openClass);
			return position;
			}
			return false;
			},
			// 展开分离式菜单
			showFixed: function ($trigger) {
			var $dropNav = $($trigger.data('dropdown')), position;
			if (!$dropNav.hasClass('layui-hide')) {
			dropdown.hideAll(); // 已经展开则隐藏
			return;
			}
			dropdown.hideAll(); // 已经展开则隐藏
			position = dropdown.show($dropNav); // 获取弹出位置
			if (position) {
			$dropNav.addClass(fixedClass); // 设置为固定定位
			$dropNav.removeClass('layui-hide'); // 显示下拉菜单
			var topLeft = dropdown.getTopLeft($trigger, $dropNav, position); // 计算坐标
			topLeft = dropdown.checkPosition($dropNav, $trigger, position, topLeft); // 是否溢出屏幕
			$dropNav.css(topLeft); // 设置坐标
			$('body').addClass(noScrollClass); // 禁止页面滚动
			var hideShade = ($trigger.attr('no-shade') == 'true'); // 是否隐藏遮罩层
			$('body').append('<div class="' + (hideShade ? (shadeClass + ' ' + noShadeClass) : shadeClass) + ' layui-anim layui-anim-fadein"></div>'); // 添加遮罩层
			// 重置父元素z-index
			$trigger.parentsUntil('body').each(function () {
			var zIndex = $(this).css('z-index');
			if (/[0-9]+/.test(zIndex)) {
			$(this).addClass('dropdown-fix-parent');
			}
			});
			$trigger.addClass(openClass);
			}
			},
			// 解决绝对定位因动画导致平移失效
			forCenter: function ($dropNav, position) {
			if (!$dropNav.hasClass(fixedClass)) {
			var wTrigger = $dropNav.parent().outerWidth(), hTrigger = $dropNav.parent().outerHeight();
			var wDrop = $dropNav.outerWidth(), hDrop = $dropNav.outerHeight();
			var pParts = position.split('-'), dropSide = pParts[0], dropPosition = pParts[1]; // 显示方向
			if ((dropSide == 'top' \|\| dropSide == 'bottom') && dropPosition == 'center') {
			$dropNav.css('left', (wTrigger - wDrop) / 2);
			}
			if ((dropSide == 'left' \|\| dropSide == 'right') && dropPosition == 'center') {
			$dropNav.css('top', (hTrigger - hDrop) / 2);
			}
			}
			},
			// 计算固定定位坐标
			getTopLeft: function ($trigger, $dropdown, position) {
			var widthTrigger = $trigger.outerWidth();
			var heightTrigger = $trigger.outerHeight();
			var widthDropdown = $dropdown.outerWidth();
			var heightDropdown = $dropdown.outerHeight();
			var topTrigger = $trigger.offset().top - $(document).scrollTop();
			var leftTrigger = $trigger.offset().left;
			var rightTrigger = leftTrigger + widthTrigger;
			var top = 0, left = 0;
			var positionParts = position.split('-');
			var anchorSide = positionParts[0]; // 箭头位置
			var anchorPosition = positionParts[1]; // 箭头方向
			if (anchorSide == 'top' \|\| anchorSide == 'bottom') {
			heightDropdown += 8; // 加上margin距离
			switch (anchorPosition) {
			case 'left':
			left = leftTrigger;
			break;
			case 'center':
			left = leftTrigger - widthDropdown / 2 + widthTrigger / 2;
			break;
			case 'right':
			left = rightTrigger - widthDropdown;
			}
			}
			if (anchorSide == 'left' \|\| anchorSide == 'right') {
			widthDropdown += 8; // 加上margin距离
			switch (anchorPosition) {
			case 'top':
			top = topTrigger + heightTrigger - heightDropdown;
			break;
			case 'center':
			top = topTrigger - heightDropdown / 2 + heightTrigger / 2;
			break;
			case 'bottom':
			top = topTrigger;
			}
			}
			switch (anchorSide) {
			case 'top':
			top = topTrigger - heightDropdown;
			break;
			case 'right':
			left = leftTrigger + widthTrigger;
			break;
			case 'bottom':
			top = topTrigger + heightTrigger;
			break;
			case 'left':
			left = leftTrigger - widthDropdown;
			}
			return {top: top, left: left, right: 'auto', bottom: 'auto'};
			},
			// 检查是否溢出屏幕
			checkPosition: function ($dropNav, $trigger, position, topLeft) {
			var aps = position.split('-');
			if ('bottom' == aps[0]) {
			if ((topLeft.top + $dropNav.outerHeight()) > dropdown.getPageHeight()) {
			topLeft = dropdown.getTopLeft($trigger, $dropNav, 'top-' + aps[1]);
			$dropNav.removeClass('dropdown-' + position);
			$dropNav.addClass('dropdown-top-' + aps[1]);
			}
			} else if ('top' == aps[0]) {
			if (topLeft.top < 0) {
			topLeft = dropdown.getTopLeft($trigger, $dropNav, 'bottom-' + aps[1]);
			$dropNav.removeClass('dropdown-' + position);
			$dropNav.addClass('dropdown-bottom-' + aps[1]);
			}
			}
			return topLeft;
			},
			// 获取浏览器高度
			getPageHeight: function () {
			return document.documentElement.clientHeight \|\| document.body.clientHeight;
			},
			// 获取浏览器宽度
			getPageWidth: function () {
			return document.documentElement.clientWidth \|\| document.body.clientWidth;
			}
			};

			dropdown.init();
			exports('dropdown', dropdown);
			});

			@@ -41,187 +41,181 @@
			</style>
			</head>
			<body>
			<div class="button-window"></div>
			<!-- 日志监控板 -->
			<div class="log-board">
			<!-- 执行命令 -->

			<!-- 执行命令 -->
			<div class="command-log">
			<h3>执行中的命令</h3>
			<div class="crn-command-item">
			<label>1#</label>
			<button id="demoBtn-1" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
			<!-- <span> </span>-->
			<input id="crn1" disabled="disabled">
			</div>
			<div class="crn-command-item">
			<label>2#</label>
			<button id="demoBtn-2" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
			<!-- <span> </span>-->
			<input id="crn2" disabled="disabled">
			</div>
			<div class="crn-command-item">
			<label>3#</label>
			<button id="demoBtn-3" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
			<!-- <span> </span>-->
			<input id="crn3" disabled="disabled">
			</div>
			<div class="crn-command-item">
			<label>4#</label>
			<button id="demoBtn-4" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
			<!-- <span> </span>-->
			<input id="crn4" disabled="disabled">
			</div>
			<div class="crn-command-item">
			<label>5#</label>
			<button id="demoBtn-5" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
			<!-- <span> </span>-->
			<input id="crn5" disabled="disabled">
			</div>
			</div>
			<!-- 堆垛机状态位信息 -->
			<div class="crn-state">
			<table id="crn-state-table">
			<thead>
			<tr>
			<th>堆垛机</th>
			<th>模式</th>
			<th>状态</th>
			<th>有物</th>
			<th>列</th>
			<th>层</th>
			<th>货叉定位</th>
			<th>载货台定位</th>
			<th>走行在定位</th>
			<th>故障代码</th>
			<th>故障描述</th>
			</tr>
			</thead>
			<tbody>
			</tbody>
			</table>
			</div>
			<div style="padding: 10px;height: 100%;float: left;width: 6%">
			<div class="button-window"></div>
			</div>
			<!-- 堆垛机状态 -->
			<div class="crn-msg">
			<table id="crn-msg-table">
			<thead>
			<tr>
			<th>堆垛机</th>
			<th>工作号</th>
			<th>状态</th>
			<th>源站</th>
			<th>目标站</th>
			<th>源库位</th>
			<th>目标库位</th>
			<th>走行速度（m/min)</th>
			<th>升降速度（m/min)</th>
			<th>叉牙速度（m/min)</th>
			<th>走行距离(m)</th>
			<th>升降距离(m)</th>
			<th>走行时长(s)</th>
			<th>升降时长(s)</th>
			</tr>
			</thead>
			<tbody>
			</tbody>
			</table>
			</div>
			<!-- 手动操作 -->
			<div class="crn-operation">
			<div style="height: 100%;padding-left: 6%">
			<div style="padding: 10px;height: 100%">
			<!-- 日志监控板 -->
			<div class="log-board">
			<!-- 执行命令 -->

			<!-- 遮罩层 -->
			<div class="crn-operation-shade">
			<span class="crn-operation-shade-span">
			WCS 系统运行中，请停止后操作
			</span>
			</div>

			<!-- 设备任务选择 -->
			<div class="task-select">
			<!-- 堆垛机选择 -->
			<div id="crn-select" class="operator-item">
			<span class="select-title">堆垛机号</span>
			<div class="select-container">
			<label><input type="radio" name="crnSelect" value="1" checked> 1号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="2"> 2号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="3"> 3号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="4"> 4号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="5"> 5号堆垛机</label>
			<!-- 执行命令 -->
			<div class="command-log">
			<h3>执行中的命令</h3>
			<div class="crn-command-item">
			<label>1#</label>
			<button id="demoBtn-1" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
			<!-- <span> </span>-->
			<input id="crn1" disabled="disabled">
			</div>
			<div class="crn-command-item" style="margin-top: 25px">
			<label>2#</label>
			<button id="demoBtn-2" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
			<!-- <span> </span>-->
			<input id="crn2" disabled="disabled">
			</div>
			<div class="crn-command-item" style="margin-top: 25px">
			<label>3#</label>
			<button id="demoBtn-3" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
			<!-- <span> </span>-->
			<input id="crn3" disabled="disabled">
			</div>
			</div>
			<!-- 堆垛机状态位信息 -->
			<div class="crn-state">
			<table id="crn-state-table">
			<thead>
			<tr>
			<th>堆垛机</th>
			<th>模式</th>
			<th>状态</th>
			<th>有物</th>
			<th>列</th>
			<th>层</th>
			<th>货叉定位</th>
			<th>载货台定位</th>
			<th>走行在定位</th>
			<th>故障代码</th>
			<th>故障描述</th>
			</tr>
			</thead>
			<tbody>
			</tbody>
			</table>
			</div>
			</div>
			<!-- 源站/源库位选择 -->
			<div id="source-select" class="operator-item">
			<span class="select-title">源站/源库位</span>
			<div class="select-container">
			<div class="select-container-item">
			<span>站</span>
			<label><input id="sourceStaNo" type="number" name="points" min="0" /></label>
			</div>
			<div class="select-container-item">
			<span>排</span>
			<label><input id="sourceRow" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			</div>
			<div class="select-container-item">
			<span>列</span>
			<label><input id="sourceBay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
			</div>
			<div class="select-container-item">
			<span>层</span>
			<label><input id="sourceLev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			</div>
			</div>
			<!-- 堆垛机状态 -->
			<div class="crn-msg">
			<table id="crn-msg-table">
			<thead>
			<tr>
			<th>堆垛机</th>
			<th>工作号</th>
			<th>状态</th>
			<th>源站</th>
			<th>目标站</th>
			<th>源库位</th>
			<th>目标库位</th>
			<th>走行速度（m/min)</th>
			<th>升降速度（m/min)</th>
			<th>叉牙速度（m/min)</th>
			<th>走行距离(m)</th>
			<th>升降距离(m)</th>
			<th>走行时长(s)</th>
			<th>升降时长(s)</th>
			</tr>
			</thead>
			<tbody>
			</tbody>
			</table>
			</div>
			<!-- 目标站/目标库位选择 -->
			<div id="target-select" class="operator-item">
			<span class="select-title">目标站/目标库位</span>
			<div class="select-container">
			<div class="select-container-item">
			<span>站</span>
			<label><input id="staNo" type="number" name="points" min="0" /></label>
			<!-- 手动操作 -->
			<div class="crn-operation">

			<!-- 遮罩层 -->
			<div class="crn-operation-shade">
			<span class="crn-operation-shade-span">
			WCS 系统运行中，请停止后操作
			</span>
			</div>

			<!-- 设备任务选择 -->
			<div class="task-select">
			<!-- 堆垛机选择 -->
			<div id="crn-select" class="operator-item">
			<span class="select-title">堆垛机号</span>
			<div class="select-container">
			<label><input type="radio" name="crnSelect" value="1" checked> 1号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="2"> 2号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="3"> 3号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="4"> 4号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="5"> 5号堆垛机</label>
			</div>
			</div>
			<div class="select-container-item">
			<span>排</span>
			<label><input id="row" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			<!-- 源站/源库位选择 -->
			<div id="source-select" class="operator-item">
			<span class="select-title">源站/源库位</span>
			<div class="select-container">
			<div class="select-container-item">
			<span>站</span>
			<label><input id="sourceStaNo" type="number" name="points" min="0" /></label>
			</div>
			<div class="select-container-item">
			<span>排</span>
			<label><input id="sourceRow" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			</div>
			<div class="select-container-item">
			<span>列</span>
			<label><input id="sourceBay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
			</div>
			<div class="select-container-item">
			<span>层</span>
			<label><input id="sourceLev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			</div>
			</div>
			</div>
			<div class="select-container-item">
			<span>列</span>
			<label><input id="bay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
			</div>
			<div class="select-container-item">
			<span>层</span>
			<label><input id="lev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			<!-- 目标站/目标库位选择 -->
			<div id="target-select" class="operator-item">
			<span class="select-title">目标站/目标库位</span>
			<div class="select-container">
			<div class="select-container-item">
			<span>站</span>
			<label><input id="staNo" type="number" name="points" min="0" /></label>
			</div>
			<div class="select-container-item">
			<span>排</span>
			<label><input id="row" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			</div>
			<div class="select-container-item">
			<span>列</span>
			<label><input id="bay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
			</div>
			<div class="select-container-item">
			<span>层</span>
			<label><input id="lev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			</div>
			</div>
			</div>
			</div>

			<!-- 设备任务操作 -->
			<div class="task-operator">
			<fieldset>
			<legend>手动操作</legend>
			<div class="button-group">
			<button class="item" onclick="put()">入库</button>
			<button class="item" onclick="take()">出库</button>
			<button class="item" onclick="stockMove()">库位转移</button>
			<button class="item" onclick="siteMove()">站到站</button>
			<!-- <button class="item" onclick="bacOrigin()">回原点</button>-->
			<!-- <button class="item" onclick="reverseOrigin()">反原点</button>-->
			<!-- <button class="item" onclick="coorMove()">坐标移行</button>-->
			<button class="item" onclick="taskComplete()">任务完成</button>
			<!-- <button class="item" onclick="pause()">暂停</button>-->
			<!-- <button class="item" onclick="boot()">启动</button>-->
			<button class="item" onclick="clearCommand()">清除命令</button>
			<button class="item" onclick="handleReset()">复位</button>
			</div>
			</fieldset>
			</div>

			</div>
			<!-- 堆垛机日志输出 -->
			<div class="crn-output-board">
			<textarea id="crn-output"></textarea>
			</div>
			</div>

			<!-- 设备任务操作 -->
			<div class="task-operator">
			<fieldset>
			<legend>手动操作</legend>
			<div class="button-group">
			<button class="item" onclick="put()">入库</button>
			<button class="item" onclick="take()">出库</button>
			<button class="item" onclick="stockMove()">库位转移</button>
			<button class="item" onclick="siteMove()">站到站</button>
			<!-- <button class="item" onclick="bacOrigin()">回原点</button>-->
			<!-- <button class="item" onclick="reverseOrigin()">反原点</button>-->
			<!-- <button class="item" onclick="coorMove()">坐标移行</button>-->
			<button class="item" onclick="taskComplete()">任务完成</button>
			<!-- <button class="item" onclick="pause()">暂停</button>-->
			<!-- <button class="item" onclick="boot()">启动</button>-->
			<button class="item" onclick="clearCommand()">清除命令</button>
			<button class="item" onclick="handleReset()">复位</button>
			</div>
			</fieldset>
			</div>

			</div>
			<!-- 堆垛机日志输出 -->
			<div class="crn-output-board">
			<textarea id="crn-output"></textarea>
			</div>
			</body>
			<script>

			@@ -16,6 +16,7 @@
			<li><a id="console" onclick="nav(this.id)" class="nav-select" href="#">主控图</a></li>
			<li><a id="pipeline" onclick="nav(this.id)" class="nav-unselect" href="#">输送设备</a></li>
			<li><a id="crn" onclick="nav(this.id)" class="nav-unselect" href="#">堆垛机</a></li>
			<li><a id="ste" onclick="nav(this.id)" class="nav-unselect" href="#">穿梭车</a></li>
			</ul>
			</div>
			<!-- 主体内容 -->

			@@ -17,98 +17,109 @@
			</style>
			</head>
			<body>
			<main>
			<div style="padding: 10px;height: 100%;float: left;width: 6%">
			<div class="button-window"></div>
			<!-- plc异常日志监控版 -->
			<div id="plc-error" class="main-board" style="padding-left: 10px">
			<!-- 头部 -->
			<div class="plc-log-header">
			<!-- <div style="height: 40%">-->
			<!-- <span>东侧PLC执行指令</span>-->
			<!-- </div>-->
			<!-- <div style="height: 40%">-->
			<!-- <span>西侧PLC执行指令</span>-->
			<!-- </div>-->
			<div>
			<span style="color: #1E9FFF">PLC异常信息表:</span>
			</div>
			</div>
			<!-- 主体 -->
			<div class="plc-log-body">
			<table id="plc-error-table">
			<thead>
			<tr>
			<th style="width: 200px">序号</th>
			<th style="width: 400px">PLC错误描述</th>
			<th style="width: 400px">异常</th>
			</tr>
			</thead>
			<tbody>

			</tbody>
			</table>
			</div>
			</div>

			<!-- 站点状态数据监控版 -->
			<div id="site-monitor" class="main-board">
			<!-- 表格 -->
			<table id="site-table">
			<!-- 表头 -->
			<thead>
			<tr>
			<th>站号</th>
			<th>工作号</th>
			<th>自动</th>
			<th>有物</th>
			<th>可入</th>
			<th>可出</th>
			<th>入库标记</th>
			<th>空板信号</th>
			<th>目标站</th>
			</tr>
			</thead>
			<!-- 表格内容 -->
			<tbody></tbody>
			</table>
			</div>
			</main>
			<footer>
			<textarea id="output"></textarea>
			</footer>

			<div id="site-detl" style="display: none">
			<form>
			<div class="form-item">
			<label class="form-label">站号:</label>
			<div class="form-input">
			<input id="siteId" name="siteId" class="layui-input" lay-verify="required\|number" autocomplete="off" disabled="disabled">
			</div>
			</div>
			<div class="form-item">
			<label class="form-label">工作号:</label>
			<div class="form-input">
			<input id="workNo" name="workNo" type="number" class="layui-input" lay-verify="number" autocomplete="off">
			</div>
			</div>
			<div class="form-item">
			<label class="form-label">目标站:</label>
			<div class="form-input">
			<input id="staNo" name="staNo" type="number" class="layui-input" lay-verify="number" autocomplete="off">
			</div>
			</div>
			<div class="form-item">
			<label class="form-label">入库标记:</label>
			<div class="form-input">
			<input id="pakMk" name="pakMk" type="text" class="layui-input" autocomplete="off">
			</div>
			</div>
			<div class="form-item form-button-container">
			<button class="form-button" id="save">保存</button>
			<button class="form-button" id="cancel" style="background-color: #D0D0D0">取消</button>
			</div>
			</form>
			</div>

			<div style="height: 100%;padding-left: 6%">
			<div style="padding: 10px;height: 100%">
			<main>

			<!-- plc异常日志监控版 -->
			<div id="plc-error" class="main-board" style="padding-left: 10px">
			<!-- 头部 -->
			<div class="plc-log-header">
			<!-- <div style="height: 40%">-->
			<!-- <span>东侧PLC执行指令</span>-->
			<!-- </div>-->
			<!-- <div style="height: 40%">-->
			<!-- <span>西侧PLC执行指令</span>-->
			<!-- </div>-->
			<div>
			<span style="color: #1E9FFF">PLC异常信息表:</span>
			</div>
			</div>
			<!-- 主体 -->
			<div class="plc-log-body">
			<table id="plc-error-table">
			<thead>
			<tr>
			<th style="width: 200px">序号</th>
			<th style="width: 400px">PLC错误描述</th>
			<th style="width: 400px">异常</th>
			</tr>
			</thead>
			<tbody>

			</tbody>
			</table>
			</div>
			</div>

			<!-- 站点状态数据监控版 -->
			<div id="site-monitor" class="main-board">
			<!-- 表格 -->
			<table id="site-table">
			<!-- 表头 -->
			<thead>
			<tr>
			<th>站号</th>
			<th>工作号</th>
			<th>自动</th>
			<th>有物</th>
			<th>可入</th>
			<th>可出</th>
			<th>入库标记</th>
			<th>空板信号</th>
			<th>目标站</th>
			</tr>
			</thead>
			<!-- 表格内容 -->
			<tbody></tbody>
			</table>
			</div>
			</main>
			<footer>
			<textarea id="output"></textarea>
			</footer>

			<div id="site-detl" style="display: none">
			<form>
			<div class="form-item">
			<label class="form-label">站号:</label>
			<div class="form-input">
			<input id="siteId" name="siteId" class="layui-input" lay-verify="required\|number" autocomplete="off" disabled="disabled">
			</div>
			</div>
			<div class="form-item">
			<label class="form-label">工作号:</label>
			<div class="form-input">
			<input id="workNo" name="workNo" type="number" class="layui-input" lay-verify="number" autocomplete="off">
			</div>
			</div>
			<div class="form-item">
			<label class="form-label">目标站:</label>
			<div class="form-input">
			<input id="staNo" name="staNo" type="number" class="layui-input" lay-verify="number" autocomplete="off">
			</div>
			</div>
			<div class="form-item">
			<label class="form-label">入库标记:</label>
			<div class="form-input">
			<input id="pakMk" name="pakMk" type="text" class="layui-input" autocomplete="off">
			</div>
			</div>
			<div class="form-item form-button-container">
			<button class="form-button" id="save">保存</button>
			<button class="form-button" id="cancel" style="background-color: #D0D0D0">取消</button>
			</div>
			</form>
			</div>
			</div>

			</div>


			</body>
			<script>
			// 初始化

New file
			@@ -0,0 +1,228 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>穿梭车监控管理</title>
			<link rel="stylesheet" type="text/css" href="../static/css/normalize.css">
			<link rel="stylesheet" type="text/css" href="../static/css/common.css">
			<link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
			<link rel="stylesheet" href="../static/css/ste.css">
			<script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
			<script type="text/javascript" src="../static/js/layer/layer.js"></script>
			<script type="text/javascript" src="../static/layui/layui.js"></script>
			<script type="text/javascript" src="../static/js/common.js"></script>
			</head>
			<body>
			<div style="padding: 10px;height: 100%;float: left;width: 6%">
			<div class="button-window"></div>
			</div>
			<div style="height: 100%;padding-left: 6%">
			<div style="padding: 10px;height: 100%">
			<!-- 日志监控板 -->
			<div class="log-board">
			<div class="command-log">
			<h3>穿梭车位置</h3>
			<div class="ste-command-item">
			<label>1#</label>
			<div class="dropdown-menu">
			<button id="steBtn-1" class="demoBtn" onclick="changePosition(this.id)">修改位置</button>
			<ul class="dropdown-menu-nav dark" >
			<div class="dropdown-anchor"></div>
			<div class="form-item"><span>当前穿梭机：</span><input type="text"></div>
			<div class="form-item"><span>排：</span><input type="text"></div>
			<div class="form-item"><span>列：</span><input type="text"></div>
			<div class="form-item"><span>层：</span><input type="text"></div>
			</ul>
			</div>
			<div class="dropdown-menu">
			<button class="demoBtn" onclick="">所属堆垛机</button>
			<ul class="dropdown-menu-nav dark">
			<div class="dropdown-anchor"></div>
			<div class="form-item"><span>堆垛机号：</span><input type="text"></div>
			</ul>
			</div>
			</div>
			<div class="ste-command-item" style="margin-top: 25px">
			<label>2#</label>
			<div class="dropdown-menu">
			<button id="steBtn-2" class="demoBtn" onclick="changePosition(this.id)">修改位置</button>
			<ul class="dropdown-menu-nav dark" >
			<div class="dropdown-anchor"></div>
			<div class="form-item"><span>当前穿梭机：</span><input type="text"></div>
			<div class="form-item"><span>排：</span><input type="text"></div>
			<div class="form-item"><span>列：</span><input type="text"></div>
			<div class="form-item"><span>层：</span><input type="text"></div>
			</ul>
			</div>
			<div class="dropdown-menu">
			<button class="demoBtn" onclick="">所属堆垛机</button>
			<ul class="dropdown-menu-nav dark">
			<div class="dropdown-anchor"></div>
			<div class="form-item"><span>堆垛机号：</span><input type="text"></div>
			</ul>
			</div>
			</div>
			<div class="ste-command-item" style="margin-top: 25px">
			<label>3#</label>
			<div class="dropdown-menu">
			<button id="steBtn-3" class="demoBtn" onclick="changePosition(this.id)">修改位置</button>
			<ul class="dropdown-menu-nav dark" >
			<div class="dropdown-anchor"></div>
			<div class="form-item"><span>当前穿梭机：</span><input type="text"></div>
			<div class="form-item"><span>排：</span><input type="text"></div>
			<div class="form-item"><span>列：</span><input type="text"></div>
			<div class="form-item"><span>层：</span><input type="text"></div>
			</ul>
			</div>
			<div class="dropdown-menu">
			<button class="demoBtn" onclick="">所属堆垛机</button>
			<ul class="dropdown-menu-nav dark">
			<div class="dropdown-anchor"></div>
			<div class="form-item"><span>堆垛机号：</span><input type="text"></div>
			</ul>
			</div>
			</div>
			</div>
			<!-- 堆垛机状态位信息 -->
			<div class="ste-state">
			<table id="ste-state-table">
			<thead>
			<tr>
			<th>穿梭车</th>
			<th>模式</th>
			<th>状态</th>
			<th>有物</th>
			<th>在轨</th>
			<th>电量</th>
			<th>排</th>
			<th>列</th>
			<th>层</th>
			<th>货叉定位</th>
			<th>载货台定位</th>
			<th>走行在定位</th>
			<th>报警信息1</th>
			<th>报警信息2</th>
			</tr>
			</thead>
			<tbody>
			</tbody>
			</table>
			</div>
			</div>
			<!-- 堆垛机状态 -->
			<div class="ste-msg">
			<table id="ste-msg-table">
			<thead>
			<tr>
			<th>穿梭车</th>
			<th>任务号</th>
			<th>任务类型</th>
			<th>当前位置</th>
			<th>近点距离</th>
			<th>当前速度</th>
			<th>高低位</th>
			<th>过账指令任务号</th>
			<th>过账指令状态</th>
			<th>盘点数量</th>
			<th>穿梭板就绪</th>
			<th>充电桩号</th>
			<th>堆垛机运行</th>
			<th>堆垛机伸叉</th>
			<th>堆垛机搬移</th>
			</tr>
			</thead>
			<tbody>
			</tbody>
			</table>
			</div>
			<!-- 手动操作 -->
			<div class="ste-operation">
			<!-- 遮罩层 -->
			<!-- <div class="ste-operation-shade">-->
			<!-- <span class="ste-operation-shade-span">-->
			<!-- WCS 系统运行中，请停止后操作-->
			<!-- </span>-->
			<!-- </div>-->
			<!-- 设备任务选择 -->
			<div class="task-select">
			<!-- 选择 -->
			<div id="ste-select" class="operator-item">
			<span class="select-title">穿梭车号</span>
			<div class="select-container">
			<label><input type="radio" name="steSelect" value="1" checked> 1号穿梭车</label>
			<label><input type="radio" name="steSelect" value="2"> 2号穿梭车</label>
			<label><input type="radio" name="steSelect" value="3"> 3号穿梭车</label>
			</div>
			</div>
			</div>
			<!-- 设备任务操作 -->
			<div class="task-operator">
			<fieldset>
			<legend>手动操作</legend>
			<div class="button-group">
			<button class="item" onclick="leftTake()">左出库</button>
			<button class="item" onclick="rightTake()">右出库</button>
			<button class="item" onclick="leftPut()">左入库</button>
			<button class="item" onclick="rightPut()">右入库</button>
			<button class="item" onclick="leftStockMove()">左移库</button>
			<button class="item" onclick="rightStockMove()">右移库</button>
			<button class="item" onclick="oOrigin()">原点</button>
			<button class="item" onclick="farPoint()">远点</button>
			<button class="item" onclick="aPoint()">A 点</button>
			<button class="item" onclick="bPoint()">B 点</button>
			<button class="item" onclick="moveLift()">左搬移</button>
			<button class="item" onclick="moveRight()">右搬移</button>
			<button class="item" onclick="charging()">充电</button>
			<button class="item" onclick="pause()">左盘点</button>
			<button class="item" onclick="boot()">右盘点</button>
			<button class="item" onclick="boot()">任务完成</button>
			<button class="item" onclick="clearCommand()">清除命令</button>
			<button class="item" onclick="handleReset()">复位</button>
			</div>
			</fieldset>
			</div>

			</div>
			<!-- 堆垛机日志输出 -->
			<div class="ste-output-board">
			<textarea id="ste-output"></textarea>
			</div>
			</div>
			</div>
			</body>
			</html>
			<script>
			layui.config({
			base: baseUrl + "/static/layui/lay/modules/"
			}).extend({
			dropdown: 'dropdown/dropdown',
			}).use(['dropdown'],function () {
			var dropdown = layui.dropdown;
			})
			</script>
			<script>
			// 修改穿梭车位置
			function changePosition(id) {
			console.log(id)
			// $.ajax({
			// url: baseUrl +
			// })
			}
			// 穿梭车信息表获取 ---- 表一

			function getSteStateInfo() {
			var tableEl = $('ste-state-table');
			$.ajax({
			url: baseUrl + "/crn/table/crn/state",
			headers: {'token': localStorage.getItem('token')},
			method: 'GET',
			success: function (res) {
			console.log(res)

			}
			})
			}
			setInterval(function () {
			getSteStateInfo()
			},1000)
			</script>