diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index c695a2ea4..d72849e8f 100644 --- a/nezha-fronted/src/assets/stylus/main.scss +++ b/nezha-fronted/src/assets/stylus/main.scss @@ -149,18 +149,23 @@ li{ position: relative; } .to-top { - position: absolute; - bottom: 10px; - right: 5px; + position: fixed; + right: 16px; border-radius: 5px; height: 40px; width: 40px; border: none; cursor: pointer; - opacity: 0.5; + opacity: 0; background-color: #bbb; outline: none; z-index: 10; + transition: opacity .2s linear, top .2s linear; + transform: translateY(-50%); + bottom: 35px; +} +.to-top.to-top-is-hover, .nz-table .el-table__body-wrapper.ps--scrolling-y .to-top { + opacity: 0.5; } .to-top>i { font-size: 20px; @@ -1626,6 +1631,7 @@ li{ } .ps__thumb-x { bottom: 0; + background-color: #bbb; } .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, @@ -1681,6 +1687,12 @@ li{ .dropdownBtn>.el-button-group>.el-button:last-of-type { padding: 0 5px; } +.dropdownBtn>.el-button-group>.el-button { + width: 30px; +} +.dropdownBtn>.el-button-group { + width: 60px; +} .export-left-btn { display: inline-block; width: 30px; @@ -1696,6 +1708,10 @@ li{ /*export相关*/ +.dropdownBtn .el-dropdown__caret-button{ + top:0px !important; + left: -1px; +} .export-xlsx .el-dialog__body{ padding: 10px 20px 20px 20px; } diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue index 7887a8e73..d7868f762 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue @@ -32,7 +32,7 @@ v-loading="loading" ref="alertMessageSubList" tooltip-effect="light" - v-scrollBar:el-table + v-scrollBar:el-table="'large'" :height="$tableHeight.openSubList.subList" :cell-class-name="labelsClassName" @selection-change="selectChange" @@ -109,10 +109,13 @@ + - + @@ -181,6 +184,8 @@ total: 0 }, + tableHover: false, //控制滚动条和top按钮同时出现 + importBox: {show: false, title:this.$t('overall.exportExcel')}, deleteBox: {show: false, ids: "", remark: '', state: 2}, @@ -529,6 +534,12 @@ this.showTopBtn = false; } }); + el.addEventListener("mouseenter", () => { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/alertList") diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue index 3e0192943..68e7b7135 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue @@ -130,7 +130,7 @@ width="180"> --> - + { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); } diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue index 341e5b16b..f46b8fe9a 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue @@ -31,7 +31,7 @@ v-loading="loading" class="nz-table endpoint-table" :height="$tableHeight.noPagination" - v-scrollBar:el-table + v-scrollBar:el-table="'large'" ref="endpointTable" style="width: 100%;"> + - { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); } diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue index 2d5a0fcfe..6316b79a5 100644 --- a/nezha-fronted/src/components/page/alert/config.vue +++ b/nezha-fronted/src/components/page/alert/config.vue @@ -86,12 +86,14 @@ +
- @@ -134,6 +136,9 @@ showSubList: false, //是否展示二级列表 alertRuleForMessage: {}, //传给alertMessage上滑框的对象 + toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 + tableHover: false, //控制滚动条和top按钮同时出现 + tableId: 'alertRuleTable', //需要分页的table的id，用于记录每页数量 showTopBtn: false, mainTableHeight: this.$tableHeight.normal, //主列表table高度 @@ -538,6 +543,12 @@ this.showTopBtn = false; } }); + el.addEventListener("mouseenter", () => { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path) diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue index 7a8794b99..a64e1dd73 100644 --- a/nezha-fronted/src/components/page/alert/list.vue +++ b/nezha-fronted/src/components/page/alert/list.vue @@ -122,12 +122,14 @@ +
- @@ -200,6 +202,9 @@ showSubList: false, //是否展示二级列表 mainTableHeight: this.$tableHeight.normal, //主列表table高度 + toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 + tableHover: false, //控制滚动条和top按钮同时出现 + //导出相关 importBox: {show: false, title:this.$t('overall.exportExcel')}, deleteBox: {show: false, ids: "", remark: '', state: 2}, @@ -650,6 +655,12 @@ this.showTopBtn = false; } }); + el.addEventListener("mouseenter", () => { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path) diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue index fcb4d7183..4568f9238 100644 --- a/nezha-fronted/src/components/page/asset/asset.vue +++ b/nezha-fronted/src/components/page/asset/asset.vue @@ -239,12 +239,14 @@ +
- { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } //resize时刷新左侧列表滚动条 let _this = this; diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue index b81f3f2c8..6ad9bc71a 100644 --- a/nezha-fronted/src/components/page/config/account.vue +++ b/nezha-fronted/src/components/page/config/account.vue @@ -103,12 +103,14 @@ +
- { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path) diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue index 5ed7bcd57..fd581bb8b 100644 --- a/nezha-fronted/src/components/page/config/dc.vue +++ b/nezha-fronted/src/components/page/config/dc.vue @@ -113,16 +113,18 @@ +
- @@ -157,6 +159,9 @@ cabinetDc: {}, // 用在二级cabinet列表页里 dcDetail: [], //dc的详情信息，包含标题 + toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 + tableHover: false, //控制滚动条和top按钮同时出现 + showElementSet: false, //控制自定义列的弹框 tableId: 'dcTable', //需要分页的table的id，用于记录每页数量 showTopBtn: false, @@ -447,6 +452,12 @@ this.showTopBtn = false; } }); + el.addEventListener("mouseenter", () => { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); window.onresize = function() { el._ps_.update(); }; diff --git a/nezha-fronted/src/components/page/config/mib.vue b/nezha-fronted/src/components/page/config/mib.vue index 741be35f7..987e8782d 100644 --- a/nezha-fronted/src/components/page/config/mib.vue +++ b/nezha-fronted/src/components/page/config/mib.vue @@ -107,10 +107,12 @@ + - @@ -141,6 +143,9 @@ showTab: 'file', //file/browser loading: false, + toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 + tableHover: false, //控制滚动条和top按钮同时出现 + tableId: 'mibTable', //需要分页的table的id，用于记录每页数量 showTopBtn: false, mib: { @@ -376,6 +381,12 @@ this.showTopBtn = false; } }); + el.addEventListener("mouseenter", () => { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path) diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue index 03d5dd464..391037593 100644 --- a/nezha-fronted/src/components/page/config/model.vue +++ b/nezha-fronted/src/components/page/config/model.vue @@ -79,10 +79,12 @@ + - { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path) diff --git a/nezha-fronted/src/components/page/config/operationlog.vue b/nezha-fronted/src/components/page/config/operationlog.vue index c5c060164..9803c2ef4 100644 --- a/nezha-fronted/src/components/page/config/operationlog.vue +++ b/nezha-fronted/src/components/page/config/operationlog.vue @@ -79,10 +79,12 @@ + - { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path) diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue index fe853775c..9ac4eb860 100644 --- a/nezha-fronted/src/components/page/config/promServer.vue +++ b/nezha-fronted/src/components/page/config/promServer.vue @@ -93,12 +93,14 @@ +
- @@ -217,6 +219,9 @@ promDetail: [], //底部上滑框相关end + toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性 + tableHover: false, //控制滚动条和top按钮同时出现 + tableId: 'promTable', //需要分页的table的id，用于记录每页数量 showTopBtn: false, rightBox: { //弹出框相关 @@ -722,6 +727,12 @@ this.showTopBtn = false; } }); + el.addEventListener("mouseenter", () => { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path) diff --git a/nezha-fronted/src/components/page/config/terminallog.vue b/nezha-fronted/src/components/page/config/terminallog.vue index b45f89f46..c6a9af248 100644 --- a/nezha-fronted/src/components/page/config/terminallog.vue +++ b/nezha-fronted/src/components/page/config/terminallog.vue @@ -85,10 +85,12 @@ + - { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path) diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue index 1716927a4..8171adf50 100644 --- a/nezha-fronted/src/components/page/project/project.vue +++ b/nezha-fronted/src/components/page/project/project.vue @@ -154,12 +154,14 @@ +
- { + this.tableHover = true; + }); + el.addEventListener("mouseleave", () => { + this.tableHover = false; + }); } }); //resize时刷新左侧列表滚动条 @@ -1107,10 +1118,6 @@ .control-icon-checked{ color:#666; } - .dropdownBtn .el-dropdown__caret-button{ - top:0px !important; - left: -1px; - } .endpoint-query-table .el-loading-spinner .circular{ width: 42px; height: 42px; diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js index e6ac3d5ff..9c48b6b37 100644 --- a/nezha-fronted/src/main.js +++ b/nezha-fronted/src/main.js @@ -81,8 +81,10 @@ Vue.prototype.$tableHeight = { //列表页表格的高度 normal: 'calc(100% - 100px)', //常规高度，特例在下方定义 openSubList: { //打开二级列表后的高度 mainList: 'calc(100% - 60px)', - subList: 'calc(100% - 86px)' + subList: 'calc(100% - 86px)', + toTopBtnTop: 'calc(50% - 11px)' }, + toTopBtnTop: 'calc(100% - 73px)', noPagination: 'calc(100% - 60px)', //特例：没有翻页组件 }; diff --git a/nezha-fronted/src/tools.js b/nezha-fronted/src/tools.js index 6a0eab8d5..87ae8bba2 100644 --- a/nezha-fronted/src/tools.js +++ b/nezha-fronted/src/tools.js @@ -202,27 +202,31 @@ export const bottomBoxWindow = { //往上方拖动： if (e.clientY < mouseInitialY) { + vm.toTopBtnTop = mainInitialHeight-mouseMoveY+20+'px'; mainListDom.style.height = mainInitialHeight-mouseMoveY+'px'; subListDom.style.height = subInitialHeight+mouseMoveY+'px'; } //往下方拖动： if (e.clientY > mouseInitialY) { + vm.toTopBtnTop = mainInitialHeight+mouseMoveY+20+'px'; mainListDom.style.height = mainInitialHeight+mouseMoveY+'px'; subListDom.style.height = subInitialHeight-mouseMoveY+'px'; } // 主、副列表最小高度限制为15px if(parseInt(mainListDom.style.height) >= contentRightHeight-15){ + vm.toTopBtnTop = contentRightHeight+5+'px'; mainListDom.style.height = contentRightHeight-15+'px'; } if(parseInt(mainListDom.style.height) <= 15){ - mainListDom.style.height = 15+'px'; + vm.toTopBtnTop = '35px'; + mainListDom.style.height = '15px'; } if(parseInt(subListDom.style.height) >= contentRightHeight-15){ subListDom.style.height = contentRightHeight-15+'px'; } if(parseInt(subListDom.style.height) <= 15){ - subListDom.style.height = 15+'px'; + subListDom.style.height = '15px'; } //当主副列表可视区域小于一定值时，不展示内容 if(parseInt(mainListDom.style.height) <= 100){ @@ -283,6 +287,7 @@ export const bottomBoxWindow = { vm.inTransform = n; if (!n) { vm.mainTableHeight = vm.$tableHeight.normal; //重置table的高度 + vm.toTopBtnTop = vm.$tableHeight.toTopBtnTop; vm.isFullScreen = false; //移动分页组件的位置 let paginationTop = document.querySelector(".pagination-top"); @@ -306,6 +311,7 @@ export const bottomBoxWindow = { document.querySelector(".sub-list").style.height = ''; } else { vm.mainTableHeight = vm.$tableHeight.openSubList.mainList; //重置table高度 + vm.toTopBtnTop = vm.$tableHeight.openSubList.toTopBtnTop; //移动分页组件的位置 let paginationTop = document.querySelector(".pagination-top"); paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));