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,52 +68,18 @@
       </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">-->
+  <!--          <div class="nz-tab-item-box">-->
-<!--            <div class="nz-tab-item nz-tab-item-active">{{$t('project.endpoint.endpoint')}}</div>-->
+  <!--            <div class="nz-tab-item nz-tab-item-active">{{$t('project.endpoint.endpoint')}}</div>-->
-<!--          </div>-->
+  <!--          </div>-->
-<!--          <div class="nz-tab-item-box" @click="tableShow = 2">-->
+  <!--          <div class="nz-tab-item-box" @click="tableShow = 2">-->
-<!--            <div class="nz-tab-item">{{$t('project.metrics.metrics')}}</div>-->
+  <!--            <div class="nz-tab-item">{{$t('project.metrics.metrics')}}</div>-->
-<!--          </div>-->
+  <!--          </div>-->
           </div>
           <div>
             <export-excel
@@ -113,9 +92,9 @@
                 <i class="nz-icon nz-icon-create-square" @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" ></i>
               </template>
             </export-excel>
-<!--          <button @click="toCreateEndpoint" :title="$t('overall.createProject')"  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="project-add-ep">-->
+  <!--          <button @click="toCreateEndpoint" :title="$t('overall.createProject')"  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="project-add-ep">-->
-<!--            <i class="nz-icon-create-square nz-icon"></i>-->
+  <!--            <i class="nz-icon-create-square nz-icon"></i>-->
-<!--          </button>-->
+  <!--          </button>-->
             <div class="top-tool-search float-right margin-r-20"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
           </div>
         </div>
@@ -158,7 +137,7 @@
                     <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
                   </div>
                 </el-popover>
-<!--              {{ scope.row.state == 1 ? 'up' : ''}}{{scope.row.state == 0 ? 'down' : ''}}-->
+  <!--              {{ scope.row.state == 1 ? 'up' : ''}}{{scope.row.state == 0 ? 'down' : ''}}-->
               </span>
               <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
               <template v-else>-</template>
@@ -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">
@@ -224,9 +203,9 @@
 
               </el-dropdown-menu>
             </el-dropdown>
-<!--          <button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-120" :class="{'nz-btn-disabled':selectedEndpoints.length<1}">-->
+  <!--          <button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-120" :class="{'nz-btn-disabled':selectedEndpoints.length<1}">-->
-<!--            <span class='top-tool-btn-txt'>{{$t('project.endpoint.addGraph')}}</span>-->
+  <!--            <span class='top-tool-btn-txt'>{{$t('project.endpoint.addGraph')}}</span>-->
-<!--          </button>-->
+  <!--          </button>-->
           </div>
         </div>
         <div  class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
@@ -266,7 +245,7 @@
                 <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
               </el-popover>
               <span v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
-<!--            <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>-->
+  <!--            <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>-->
             </template>
           </el-table-column>
           <el-table-column
@@ -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;