perf: endpoint-query交互优化

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

@@ -2,7 +2,7 @@
   <span>
     <!-- 副列表 -->
     <div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
-    <div class="sub-list sub-list-transition" v-if="showSubList">
+    <div class="sub-list main-and-sub-transition" v-if="showSubList">
       <!--窗口大小控制-->
       <div class="sub-list-window-control">
         <!--退出全屏-->

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

@@ -179,6 +179,7 @@
   import chartDataFormat from "../../../charts/chartDataFormat";
   import chart from '../../../page/dashboard/overview/chart'
   var timeout;
+  var internal;
   export default {
     name: "endpointQueryTab",
     components: {
@@ -255,7 +256,6 @@
           bus.$emit("menu-change", 'panel');
           this.$store.state.showPanel.id = panel.id;
           this.$store.state.showPanel.name = panel.name;
-          console.info(this.$router)
           this.$router.push({
             path: "/panel",
             query: {
@@ -266,10 +266,10 @@
       },
       tableReload() {
         var table = this.$refs.endpointQueryTable;
-        let resizeTimeout = setInterval(() => {
+        internal = setInterval(() => {
           if (!window.resizing) {
             table.setHeight();
-            clearInterval(resizeTimeout);
+            clearInterval(internal);
           }
         }, 200);
       },
@@ -279,79 +279,81 @@
         this.queryData = [];
         this.tableData = [];
         this.tableDataCopy = '';
-        this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response=>{
-          this.loading = false;
-          if(response.status==="success"){
-            let results = response.data.result;
-            this.queryData=JSON.parse(JSON.stringify(results));
-            for(let result of results) {
-              let metricName = result.metric.__name__;
-              let temp = metricName;
-              let simpleTemp = metricName;//显示简略信息：隐藏same labels后的结果
-              let metricColor = "";
-              let bracketsColor = "#eb7b18";//#eb7b18
-              let labelColor = "#65bbd1";//#66d9ef
-              let valueColor = "#61c261";//#74e680
-              let colorTemp = `<span style="${metricColor}">${metricName}</span>`;
-              let colorSimpleTemp = `<span>${metricName}</span>`;
-              let metricTip = {};
-              let queryInfos = (this.elementMetricDatas.filter((item)=> {
-                return item.metric === temp;
-              }));
-              if(queryInfos && queryInfos.length > 0) {
-                metricTip = queryInfos[0];
-              } else {
-                metricTip.metric=temp;
-              }
-              delete result.metric.__name__;
-              temp += "{";
-              simpleTemp += "{";
-              colorTemp += `<span style="color: ${bracketsColor}">{</span>`;
-              colorSimpleTemp += `<span style="color: ${bracketsColor}">{</span>`;
-              let keys = Object.keys(result.metric);
-              for (let index in keys){
-                let key = keys[index];
-                temp += key + "='" + result.metric[key] + "',";
-                colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`;
-                if(!this.sameLabels.some((i)=> {return i == key})) {
-                  simpleTemp += key + "='" + result.metric[key] + "',";
-                  colorSimpleTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`;
+        setTimeout(() => {
+          this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response=>{
+            this.loading = false;
+            if(response.status==="success"){
+              let results = response.data.result;
+              this.queryData=JSON.parse(JSON.stringify(results));
+              for(let result of results) {
+                let metricName = result.metric.__name__;
+                let temp = metricName;
+                let simpleTemp = metricName;//显示简略信息：隐藏same labels后的结果
+                let metricColor = "";
+                let bracketsColor = "#eb7b18";//#eb7b18
+                let labelColor = "#65bbd1";//#66d9ef
+                let valueColor = "#61c261";//#74e680
+                let colorTemp = `<span style="${metricColor}">${metricName}</span>`;
+                let colorSimpleTemp = `<span>${metricName}</span>`;
+                let metricTip = {};
+                let queryInfos = (this.elementMetricDatas.filter((item)=> {
+                  return item.metric === temp;
+                }));
+                if(queryInfos && queryInfos.length > 0) {
+                  metricTip = queryInfos[0];
+                } else {
+                  metricTip.metric=temp;
+                }
+                delete result.metric.__name__;
+                temp += "{";
+                simpleTemp += "{";
+                colorTemp += `<span style="color: ${bracketsColor}">{</span>`;
+                colorSimpleTemp += `<span style="color: ${bracketsColor}">{</span>`;
+                let keys = Object.keys(result.metric);
+                for (let index in keys){
+                  let key = keys[index];
+                  temp += key + "='" + result.metric[key] + "',";
+                  colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`;
+                  if(!this.sameLabels.some((i)=> {return i == key})) {
+                    simpleTemp += key + "='" + result.metric[key] + "',";
+                    colorSimpleTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`;
+                  }
+                }
+                if(temp.indexOf(',') != -1){
+                  temp = temp.substr(0,temp.length-1);
+                }
+                if(simpleTemp.indexOf(',') != -1){
+                  simpleTemp = simpleTemp.substr(0,simpleTemp.length-1);
+                }
+                if(colorTemp.indexOf(',') != -1){
+                  colorTemp = colorTemp.substr(0,colorTemp.length-1);
+                }
+                if(colorSimpleTemp.indexOf(',') != -1){
+                  colorSimpleTemp = colorSimpleTemp.substr(0,colorSimpleTemp.length-1);
                 }
-              }
-              if(temp.indexOf(',') != -1){
-                temp = temp.substr(0,temp.length-1);
-              }
-              if(simpleTemp.indexOf(',') != -1){
-                simpleTemp = simpleTemp.substr(0,simpleTemp.length-1);
-              }
-              if(colorTemp.indexOf(',') != -1){
-                colorTemp = colorTemp.substr(0,colorTemp.length-1);
-              }
-              if(colorSimpleTemp.indexOf(',') != -1){
-                colorSimpleTemp = colorSimpleTemp.substr(0,colorSimpleTemp.length-1);
-              }
 
 
-              temp += "}";
-              simpleTemp += "}";
-              colorTemp += `<span style="color: ${bracketsColor}">}</span>`;
-              colorSimpleTemp += `<span style="color: ${bracketsColor}">}</span>`;
-              if(!/.+\{.+\}/.test(simpleTemp)) {
-                simpleTemp = simpleTemp.substr(0,simpleTemp.length-2);
-              }
+                temp += "}";
+                simpleTemp += "}";
+                colorTemp += `<span style="color: ${bracketsColor}">}</span>`;
+                colorSimpleTemp += `<span style="color: ${bracketsColor}">}</span>`;
+                if(!/.+\{.+\}/.test(simpleTemp)) {
+                  simpleTemp = simpleTemp.substr(0,simpleTemp.length-2);
+                }
 
-              if(!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)){
-                let metricReg=new RegExp("<span.*?>"+metricName+"<\/span>")
-                colorSimpleTemp=metricReg.exec(colorSimpleTemp)[0];
-              }
+                if(!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)){
+                  let metricReg=new RegExp("<span.*?>"+metricName+"<\/span>")
+                  colorSimpleTemp=metricReg.exec(colorSimpleTemp)[0];
+                }
 
-              let edpQueryData={element:temp,simpleElement:simpleTemp,colorElement:colorTemp,colorSimpleElement:colorSimpleTemp, value:result.value[1],type:(result.metric.type?result.metric.type:'2'),metricTip:metricTip};
-              this.tableData.push(edpQueryData);
+                let edpQueryData={element:temp,simpleElement:simpleTemp,colorElement:colorTemp,colorSimpleElement:colorSimpleTemp, value:result.value[1],type:(result.metric.type?result.metric.type:'2'),metricTip:metricTip};
+                this.tableData.push(edpQueryData);
+              }
+              this.tableDataCopy = JSON.stringify(this.tableData);
+              this.$nextTick(this.$refs.endpointQueryTable.doLayout());
             }
-            this.tableDataCopy = JSON.stringify(this.tableData);
-            this.$nextTick(this.$refs.endpointQueryTable.doLayout());
-          }
-        });
+          });
+        }, 420);
       },
       clearSelectedMetrics() {
         this.$refs.endpointQueryTable.clearSelection();

nezha-fronted/src/tools.js

@@ -258,6 +258,7 @@ export const bottomBoxWindow = {
     }
   },
   exitFullScreen(vm) {
+    window.resizing = true;
     let contentRightDom = document.querySelector(".content-right"); //右侧内容区
     let contentRightHeight = contentRightDom.offsetHeight;//可视高度
     //主列表
@@ -273,9 +274,11 @@ export const bottomBoxWindow = {
       if (document.querySelector(".sub-list").offsetHeight >= 100) {
         vm.subResizeShow = true;
       }
+      window.resizing = false;
     }, 210);
   },
   fullScreen(vm) {
+    window.resizing = true;
     let contentRightDom = document.querySelector(".content-right"); //右侧内容区
     let contentRightHeight = contentRightDom.offsetHeight;//可视高度
     vm.isFullScreen = true;
@@ -285,6 +288,7 @@ export const bottomBoxWindow = {
     vm.mainResizeShow = false;
     //副列表
     document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
+    window.resizing = false;
   },
   showSubListWatch(vm, n) {
     vm.inTransform = n;