perf: endpoint-query改为pl-table等优化

1.endpoint-query改为pl-table
2.动画结束后再渲染数据

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

@@ -49,7 +49,43 @@
       </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>
-    <el-table
+    <pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :height="$tableHeight.noPagination"
+              class="nz-table endpoint-query-table" style="width: 100%;" v-loading="loading" v-scrollBar:el-table="'large'" :pagination-show="false" ref="endpointQueryTable"
+              @selection-change="selectChange">
+      <pl-table-column
+        :resizable="false"
+        type="selection"
+        width="39"
+        align="center"
+        :selectable="selectable">
+      </pl-table-column>
+      <pl-table-column
+        prop="element"
+        :label="$t('project.endpoint.element')">
+        <template v-slot="scope">
+          <el-popover trigger="click" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
+            <div>
+              <ul>
+                <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'&#45;&#45;'}}</span></li>
+                <li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
+                <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'&#45;&#45;'}}</span></li>
+                <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'&#45;&#45;'}}</span></li>
+              </ul>
+            </div>
+            <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>
+          &lt;!&ndash;            <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>&ndash;&gt;
+        </template>
+      </pl-table-column>
+      <pl-table-column
+        :resizable="false"
+        prop="value"
+        :label="$t('project.endpoint.value')"
+        width="180">
+      </pl-table-column>
+    </pl-table>
+    <!--<el-table
       :data="tableData"
       border
       v-scrollBar:el-table="'normal'"
@@ -76,16 +112,16 @@
           <el-popover trigger="click" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
             <div>
               <ul>
-                <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'--'}}</span></li>
+                <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'&#45;&#45;'}}</span></li>
                 <li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
-                <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'--'}}</span></li>
+                <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'&#45;&#45;'}}</span></li>
-                <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'--'}}</span></li>
+                <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'&#45;&#45;'}}</span></li>
               </ul>
             </div>
             <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>-->
+          &lt;!&ndash;            <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>&ndash;&gt;
         </template>
       </el-table-column>
       <el-table-column
@@ -94,7 +130,7 @@
         :label="$t('project.endpoint.value')"
         width="180">
       </el-table-column>
-    </el-table>
+    </el-table>-->
     <button class="to-top" v-show="showTopBtn" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
 
     <el-dialog class="line-chart-block-modal nz-dialog"
@@ -565,6 +601,7 @@
         this.tableData = [];
         this.tableDataCopy = '';
         this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response=>{
+          setTimeout(() => {
             this.loading = false;
             if(response.status==="success"){
               let results = response.data.result;
@@ -635,6 +672,7 @@
               }
               this.tableDataCopy = JSON.stringify(this.tableData);
             }
+          }, 300);
         });
       },
       clearSelectedMetrics() {

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

@@ -1097,7 +1097,7 @@
   .table-header-inner{
     position: absolute;
     z-index: 1;
-    top: 40px;
+    top: 38px;
     left: 11px;
     cursor: pointer;
   }