perf: to-top按钮随滚动条出现/消失

nezha-fronted/src/assets/stylus/main.scss

@@ -149,18 +149,23 @@ li{
   position: relative;
 }
 .to-top {
-  position: absolute;
+  position: fixed;
-  bottom: 10px;
+  right: 16px;
-  right: 5px;
   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;
 }

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 @@
             <i class="nz-icon nz-icon-gear"></i>
           </span>
         </template>
+        <template v-slot="scope">
+          <button v-if="scope.$index == 0" :class="{'to-top-is-hover': tableHover}" class="to-top" v-show="showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+        </template>
       </el-table-column>
     </el-table>
     <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-    <button class="to-top" v-show="showTopBtn && subResizeShow" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+
     <project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
     <module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>
     <asset-box :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl" ref="assetEditUnit"></asset-box>
@@ -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")

nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue

@@ -130,7 +130,7 @@
         width="180">
       </el-table-column>
     </el-table>-->
-    <button class="to-top" v-show="showTopBtn" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+    <button class="to-top" v-show="showTopBtn" :class="{'to-top-is-hover': tableHover}" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
 
     <el-dialog class="line-chart-block-modal nz-dialog"
                :title="$t('project.endpoint.dialogTitle')"
@@ -196,6 +196,7 @@
     data() {
       let temp = this;
       return {
+        tableHover: false,
         loading: false,
         showTopBtn: false, //主列表top按钮
         currentEndpoint: {},
@@ -1032,6 +1033,12 @@
               this.showTopBtn = false;
             }
           });
+          el.addEventListener("mouseenter", () => {
+            this.tableHover = true;
+          });
+          el.addEventListener("mouseleave", () => {
+            this.tableHover = false;
+          });
         }
       });
     }

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%;">
       <el-table-column
@@ -78,9 +78,11 @@
             <i class="nz-icon nz-icon-gear"></i>
           </span>
         </template>
+        <template v-slot="scope">
+          <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+        </template>
       </el-table-column>
     </el-table>
-    <button class="to-top" v-show="showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
 
     <element-set
       v-clickoutside="elementsetHide"
@@ -113,6 +115,9 @@
         endpointDetail: {}, //用来查看详情的对象
         asset: {}, //对应props的obj
         showTopBtn: false, //top按钮是否显示
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+        tableHover: false, //控制滚动条和top按钮同时出现
+
         loading: false,
         tableTitle: [
           {
@@ -347,6 +352,12 @@
               this.showTopBtn = false;
             }
           });
+          el.addEventListener("mouseenter", () => {
+            this.tableHover = true;
+          });
+          el.addEventListener("mouseleave", () => {
+            this.tableHover = false;
+          });
         }
       });
     }

nezha-fronted/src/components/page/alert/config.vue

@@ -86,12 +86,14 @@
                 <i class="nz-icon nz-icon-gear"></i>
               </span>
             </template>
+            <template v-slot="scope">
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+            </template>
           </el-table-column>
         </el-table>
         <div class="pagination-bottom" v-show="!showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
-        <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertRuleForMessage" :isFullScreen="isFullScreen" :from="'alertRule'" :targetTab.sync="targetTab" :detail="ruleDetail"
                   @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
@@ -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)

nezha-fronted/src/components/page/alert/list.vue

@@ -122,12 +122,14 @@
                 <i class="nz-icon nz-icon-gear"></i>
               </span>
             </template>
+            <template v-slot="scope">
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+            </template>
           </el-table-column>
         </el-table>
         <div class="pagination-bottom" v-show="!showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
-        <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" :from="'alertMessage'" :targetTab.sync="targetTab" :detailList="tabDetailList"
                   @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box>
@@ -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)

nezha-fronted/src/components/page/asset/asset.vue

@@ -239,12 +239,14 @@
                 <i class="nz-icon nz-icon-gear"></i>
               </span>
             </template>
+            <template v-slot="scope">
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+            </template>
           </el-table-column>
         </el-table>
         <div class="pagination-bottom" v-show="!showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
-        <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertMsgAsset" :isFullScreen="isFullScreen" :from="'asset'" :targetTab.sync="targetTab" :detail="assetDetail"
                   @reload="getAssetData"
@@ -297,6 +299,8 @@
         showSubList: false, //是否展示二级列表
         targetTab: '', //展示二级列表中的哪个页签
 
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+        tableHover: false, //控制滚动条和top按钮同时出现
         showElementSet: false, //自定义列弹框是否显示
         tableId: 'assetTable', //需要分页的table的id，用于记录每页数量
         searchMsg: { //给搜索框子组件传递的信息
@@ -991,6 +995,12 @@
               this.showTopBtn = false;
             }
           });
+          el.addEventListener("mouseenter", () => {
+            this.tableHover = true;
+          });
+          el.addEventListener("mouseleave", () => {
+            this.tableHover = false;
+          });
         }
         //resize时刷新左侧列表滚动条
         let _this = this;

nezha-fronted/src/components/page/config/account.vue

@@ -103,12 +103,14 @@
                 <i class="nz-icon nz-icon-gear"></i>
               </span>
             </template>
+            <template v-slot="scope">
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+            </template>
           </el-table-column>
         </el-table>
         <div class="pagination-bottom" v-show="!showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
-       <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
       <!-- 底部上滑框 -->
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="user" :isFullScreen="isFullScreen" :from="'account'" :targetTab.sync="targetTab" :detail="userDetail"
@@ -214,6 +216,9 @@
         userDetail: [],
         //底部上滑框相关end
 
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+        tableHover: false, //控制滚动条和top按钮同时出现
+
         tableId: 'accountTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false, //是否显示回到顶部按钮
         rightBox: { //弹出框相关
@@ -616,6 +621,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)

nezha-fronted/src/components/page/config/dc.vue

@@ -113,16 +113,18 @@
             </el-table-column>
             <el-table-column width="28" :resizable="false">
               <template slot="header" slot-scope="scope">
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+                <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-                <i class="nz-icon nz-icon-gear"></i>
+                  <i class="nz-icon nz-icon-gear"></i>
-              </span>
+                </span>
+              </template>
+              <template v-slot="scope">
+                <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
               </template>
             </el-table-column>
           </el-table>
           <div class="pagination-bottom" v-show="!showSubList">
             <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
           </div>
-          <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
         </div>
         <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="cabinetDc" :isFullScreen="isFullScreen" :from="'dc'" :targetTab.sync="targetTab" :detail="dcDetail"
                      @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
@@ -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();
           };

nezha-fronted/src/components/page/config/mib.vue

@@ -107,10 +107,12 @@
                 <i class="nz-icon nz-icon-gear"></i>
               </span>
             </template>
+            <template v-slot="scope">
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+            </template>
           </el-table-column>
         </el-table>
         <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-        <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </template>
       <mib-browser :showTab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
     </div>
@@ -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)

nezha-fronted/src/components/page/config/model.vue

@@ -79,10 +79,12 @@
               <i class="nz-icon nz-icon-gear"></i>
             </span>
           </template>
+          <template v-slot="scope">
+            <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+          </template>
         </el-table-column>
       </el-table>
       <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
     </left-menu>
     <element-set
@@ -104,6 +106,10 @@
       return {
         tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
+
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+        tableHover: false, //控制滚动条和top按钮同时出现
+
         model: {
           id: '',
           name: '',
@@ -319,6 +325,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)

nezha-fronted/src/components/page/config/operationlog.vue

@@ -79,10 +79,12 @@
               <i class="nz-icon nz-icon-gear"></i>
             </span>
           </template>
+          <template v-slot="scope">
+            <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+          </template>
         </el-table-column>
       </el-table>
       <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
     </left-menu>
     <element-set
@@ -103,6 +105,9 @@
         loading: false,
         tableId: 'operationLogTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+        tableHover: false, //控制滚动条和top按钮同时出现
+
         rightBox: { //弹出框相关
           show: false,
           isEdit: false, //false查看，true编辑
@@ -338,6 +343,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)

nezha-fronted/src/components/page/config/promServer.vue

@@ -93,12 +93,14 @@
                 <i class="nz-icon nz-icon-gear"></i>
               </span>
             </template>
+            <template v-slot="scope">
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+            </template>
           </el-table-column>
         </el-table>
         <div class="pagination-bottom" v-show="!showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
-        <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="promServer" :isFullScreen="isFullScreen" :from="'promServer'" :targetTab.sync="targetTab" :detail="promDetail"
                   @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
@@ -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)

nezha-fronted/src/components/page/config/terminallog.vue

@@ -85,10 +85,12 @@
               <i class="nz-icon nz-icon-gear"></i>
             </span>
           </template>
+          <template v-slot="scope">
+            <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+          </template>
         </el-table-column>
       </el-table>
       <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
     </left-menu>
     <element-set
@@ -109,6 +111,9 @@
         loading: false,
         tableId: 'terminalLogTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+        tableHover: false, //控制滚动条和top按钮同时出现
+
         rightBox: { //弹出框相关
           show: false,
           isEdit: false, //false查看，true编辑
@@ -359,6 +364,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)

nezha-fronted/src/components/page/project/project.vue

@@ -154,12 +154,14 @@
                 <i class="nz-icon nz-icon-gear"></i>
               </span>
             </template>
+            <template v-slot="scope">
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+            </template>
           </el-table-column>
         </el-table>
         <div class="pagination-bottom" v-show="!showSubList">
           <Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
         </div>
-        <button class="to-top" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
       </div>
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen"
                   :from="'endpoint'" :targetTab.sync="targetTab" :detail="endpointDetail" :obj="curEndpoint" :assetDetail="assetDetail"
@@ -211,6 +213,7 @@
         endpointDetail: [],
         targetTab: '',
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
         isFullScreen: false, //是否是全屏，用来控制拖动条是否展示
         tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
         mainResizeShow: true, //dom高度改变时部分内容是否展示
@@ -220,6 +223,7 @@
 
         userData: [],
         showTopBtn: false, //主列表top按钮
+        tableHover: false, //控制滚动条和top按钮同时出现
         editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
         endpointTableTitle: [
           {
@@ -721,7 +725,7 @@
             this.userData = response.data.list
           }
         })
-      },
+      }
     },
     created() {
       this.currentProject = this.$store.state.currentProject;
@@ -751,6 +755,13 @@
               this.showTopBtn = false;
             }
           });
+
+          el.addEventListener("mouseenter", () => {
+            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;

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)', //特例：没有翻页组件
 };
 

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