feat: endpoint-query二级页面效果展示

nezha-fronted/src/components/common/pagination.vue

@@ -56,7 +56,7 @@ export default {
   },
   mounted() {
     let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-    this.pageSize = pageSizes&&pageSizes.length>0?pageSizes[0]:(pageSize ? pageSize : 20);
+    this.pageSize = this.pageSizes && this.pageSizes.length > 0 ? this.pageSizes[0] : (pageSize ? pageSize : 20);
     this.$nextTick(() => {
       let input = document.querySelector(".el-pagination .el-select .el-input__inner");
       input.value = this.pageSize + this.$t('pageSize');

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

@@ -22,6 +22,19 @@
   .date-pick-group button:last-of-type {
     margin-left: 4px;
   }
+
+  .main-list {
+    height: 100%;
+    transition: .4s height, .4s transform;
+  }
+  .main-list.main-list-with-sub {
+    transform: translate3d(0,0,0);
+    height: 50%;
+  }
+  .sub-list {
+    height: 50%;
+    transition: .4s height;
+  }
 </style>
 <style scope>
   .chart-bottom {
@@ -55,44 +68,10 @@
       </el-scrollbar>
     </div>
 
-    <!--metrics-->
-<!--    <div class="content-right" v-show="tableShow == 2">-->
-<!--      <div class="top-tools">-->
-<!--        <div class="nz-tab">-->
-<!--          <div @click="tableShow = 1" class="nz-tab-item-box">-->
-<!--            <div class="nz-tab-item">{{$t('project.endpoint.endpoint')}}</div>-->
-<!--          </div>-->
-<!--          <div class="nz-tab-item-box">-->
-<!--            <div class="nz-tab-item nz-tab-item-active">{{$t('project.metrics.metrics')}}</div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        <div class="top-tool-search"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>-->
-<!--      </div>-->
-<!--      <el-table-->
-<!--        :data="metricsTableData"-->
-<!--        class="nz-table"-->
-<!--        border-->
-<!--        height="calc(100% - 160px)"-->
-<!--        style="width: 100%;">-->
-<!--        <el-table-column-->
-<!--          :resizable="false"-->
-<!--          v-for="(item, index) in metricsTableTitle"-->
-<!--          v-if="item.show"-->
-<!--          :width="item.width"-->
-<!--          :key="`col-${index}`"-->
-<!--          :label="item.label"-->
-<!--          min-width="110px"-->
-<!--        >-->
-<!--          <template slot-scope="scope" :column="item">-->
-<!--            <span>{{scope.row[item.prop]}}</span>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--      </el-table>-->
-<!--      <Pagination v-cloak :pageObj="metricPageObj" @pageNo='metricsPageNo' @pageSize='metricsPageSize' ref="metricPagination"></Pagination>-->
-<!--    </div>-->
-
     <!--endpoint-->
-    <div class="content-right" v-show="tableShow == 1">
+    <div class="content-right">
+      <!-- 主列表 -->
+      <div class="main-list" :class="{'main-list-with-sub': tableShow == 3}">
         <div class="top-tools">
           <div class="nz-tab">
   <!--          <div class="nz-tab-item-box">-->
@@ -176,8 +155,8 @@
         <button class="to-top" v-show="showTopBtn1" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
 
-    <!--endpoint query-->
+      <!-- 副列表 endpoint query-->
-    <div class="content-right" v-if="tableShow == 3" style="position: relative">
+      <div class="sub-list" v-show="tableShow == 3" style="position: relative">
         <div class="top-tools" >
           <div>
             <div @click="backToEdpTab">
@@ -276,8 +255,9 @@
           </el-table-column>
         </el-table>
         <button class="to-top" v-show="showTopBtn2" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
-
       </div>
+    </div>
+
     <element-set
       v-clickoutside="elementsetHide"
       :table-title="endpointTableTitle"
@@ -1118,6 +1098,7 @@
       showEndpoint:function(endpoint){
         this.tableShow=3;
         this.queryEdpLoading=true;
+        setTimeout(() => {
           if(endpoint){
             this.curEndpoint=endpoint;
             this.formatTime='';
@@ -1204,11 +1185,16 @@
                   }
                 });
               }
-        })
+          });
+          this.$nextTick(() => {
+            this.gutterHandler(".endpoint-table");
+          });
+        }, 400);
       },
       backToEdpTab:function(){
         this.tableShow=1;
         this.selectedEndpoints=[];
+        this.showTableData = [];
         this.showTopBtn1 = false;
         this.$nextTick(() => {
           this.gutterHandler(".endpoint-table");
@@ -1925,7 +1911,7 @@
     position: absolute;
     z-index: 1;
     top: 60px;
-    left: 25px;
+    left: 10px;
   }
   .control-icon-unchecked{
     color: #d1d1d1;