#

whycq

2022-03-15 37a50634832b20de8589e4a02d527681d81b53c7

#

 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 {

 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/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>&nbsp;</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>&nbsp;</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>&nbsp;</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>