From 37a50634832b20de8589e4a02d527681d81b53c7 Mon Sep 17 00:00:00 2001
From: whycq <whycq>
Date: 星期二, 15 三月 2022 14:51:07 +0800
Subject: [PATCH] #
---
src/main/webapp/static/css/ste.css | 29 +
src/main/webapp/views/ste.html | 124 +++++-
src/main/webapp/static/layui/lay/modules/dropdown/dropdown.js | 250 +++++++++++++
src/main/webapp/static/layui/lay/modules/dropdown/dropdown.css | 618 ++++++++++++++++++++++++++++++++++
4 files changed, 990 insertions(+), 31 deletions(-)
diff --git a/src/main/webapp/static/css/ste.css b/src/main/webapp/static/css/ste.css
index a422487..c21a5d5 100644
--- a/src/main/webapp/static/css/ste.css
+++ b/src/main/webapp/static/css/ste.css
@@ -38,7 +38,7 @@
}
.demoBtn {
vertical-align: middle;
- width: 30%;
+ width: 100%;
height: 30px;
left: 0;
top: 0;
@@ -60,14 +60,29 @@
.demoBtn:focus {
outline: 0;
}
-.ste-command-item span {
+/*鈻间笅鎷夎彍鍗曗柤*/
+.form-item {
+ width: 220px;
display: inline-block;
- width: 20px;
- height: 20px;
- background-color: #2e9926;
- border-radius: 5px;
- vertical-align: middle;
+ 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 {
diff --git a/src/main/webapp/static/layui/lay/modules/dropdown/dropdown.css b/src/main/webapp/static/layui/lay/modules/dropdown/dropdown.css
new file mode 100644
index 0000000..67b169c
--- /dev/null
+++ b/src/main/webapp/static/layui/lay/modules/dropdown/dropdown.css
@@ -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;
+}
diff --git a/src/main/webapp/static/layui/lay/modules/dropdown/dropdown.js b/src/main/webapp/static/layui/lay/modules/dropdown/dropdown.js
new file mode 100644
index 0000000..b05f3ac
--- /dev/null
+++ b/src/main/webapp/static/layui/lay/modules/dropdown/dropdown.js
@@ -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>'); // 娣诲姞閬僵灞�
+ // 閲嶇疆鐖跺厓绱爖-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);
+});
diff --git a/src/main/webapp/views/ste.html b/src/main/webapp/views/ste.html
index 8652f35..eba9ade 100644
--- a/src/main/webapp/views/ste.html
+++ b/src/main/webapp/views/ste.html
@@ -5,8 +5,12 @@
<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%">
@@ -17,24 +21,66 @@
<!-- 鏃ュ織鐩戞帶鏉� -->
<div class="log-board">
<div class="command-log">
- <h3>鎵ц涓殑鍛戒护</h3>
+ <h3>绌挎杞︿綅缃�</h3>
<div class="ste-command-item">
<label>1#</label>
- <button id="demoBtn-1" class="demoBtn" onclick="changePosition()">淇敼浣嶇疆</button>
- <!-- <span> </span>-->
- <button class="demoBtn" onclick="">鎵�灞炲爢鍨涙満</button>
+ <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>
- <button id="demoBtn-2" class="demoBtn" onclick="">淇敼浣嶇疆</button>
- <!-- <span> </span>-->
- <button class="demoBtn" onclick="">鎵�灞炲爢鍨涙満</button>
+ <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>
- <button id="demoBtn-3" class="demoBtn" onclick="">淇敼浣嶇疆</button>
- <!-- <span> </span>-->
+ <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>
<!-- 鍫嗗灈鏈虹姸鎬佷綅淇℃伅 -->
@@ -114,19 +160,19 @@
<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()">A 鐐�</button>
- <button class="item" onclick="boot()">B 鐐�</button>
- <button class="item" onclick="pause()">宸︽惉绉�</button>
- <button class="item" onclick="boot()">鍙虫惉绉�</button>
- <button class="item" onclick="boot()">鍏呯數</button>
+ <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>
@@ -146,7 +192,37 @@
</body>
</html>
<script>
- function changePosition() {
-
+ 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>
\ No newline at end of file
--
Gitblit v1.9.1