perf: 优化一些冗长的代码

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

@@ -17,30 +17,15 @@
       </div>
 
         <!------TAB区------>
-        <!--通用详情-->
-        <!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail" :targetTab.sync="targetTab"
-                           v-if="targetTab == 'detail'"
-                           @changeTab="changeTab"
-        ></common-detail-tab>-->
         <!--机柜-->
       <cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab>
         <!--告警信息-->
       <alert-message-tab v-show="subResizeShow" v-if="((from == 'alertRule' || from == 'asset') && targetTab == 'alertMessage')" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
         <!--asset页的endpoint列表-->
       <endpoint-tab v-show="subResizeShow" v-if="from == 'asset' && targetTab == 'endpoint'" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
-        <!--endpoint页的asset详情-->
-        <!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="assetDetail" :targetTab.sync="targetTab"
-                           v-if="targetTab == 'assetDetail' && from == 'endpoint'"
-                           @changeTab="changeTab"></common-detail-tab>-->
         <!--endpoint-query-->
       <endpoint-query-tab v-show="subResizeShow" v-if="(from == 'endpoint' && targetTab == 'endpointQuery')" :from="from" :obj="obj" @changeTab="changeTab" ref="endpointQuery"></endpoint-query-tab>
 
-        <!--alertMessage页的详情-->
-        <!--<template v-if="from == 'alertMessage'">
-          <common-detail-tab v-show="subResizeShow" :from="from" :targetTab.sync="targetTab" v-for="(item, index) in tabList" :key="index" :detail="detailList[index]"
-                             v-if="targetTab == item" @changeTab="changeTab"></common-detail-tab>
-        </template>-->
-
         <!-- model-panel/asset-detail/project-overview的panel-->
       <panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule' || from == 'endpoint') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
                  @changeTab="changeTab" :targetTab.sync="targetTab" :detail="detail"></panel-tab>
@@ -50,7 +35,6 @@
 </template>
 
 <script>
-  import commonDetailTab from "./tabs/commonDetailTab"
   import cabinetTab from "./tabs/cabinetTab";
   import alertMessageTab from "./tabs/alertMessageTab";
   import endpointQueryTab from "./tabs/endpointQueryTab";
@@ -60,7 +44,6 @@
   export default {
     name: "bottomBox",
     components:{
-      'common-detail-tab': commonDetailTab,
       'cabinet-tab': cabinetTab,
       'alert-message-tab': alertMessageTab,
       'endpoint-query-tab': endpointQueryTab,

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

@@ -1,66 +0,0 @@
-<template>
-  <span>
-    <div class="sub-top-tools">
-      <div class="sub-list-tabs">
-        <div class="sub-list-tab-title">
-          <template v-if="from == 'dc'">{{$t("asset.dcName")}}：{{obj.name}}</template>
-          <template v-else-if="from == 'account'">{{$t("config.account.account")}}：{{obj.username}}</template>
-          <template v-else-if="from == 'promServer'">ID：{{obj.id}}</template>
-          <template v-else-if="from == 'alertRule'">{{$t("alert.alertName")}}：{{obj.alertName}}</template>
-          <template v-else-if="from == 'asset'">{{$t("project.endpoint.asset")}}：{{obj.host}}</template>
-          <template v-else-if="from == 'endpoint'">{{$t("project.endpoint.endpointId")}}: {{obj.id}}</template>
-          <template v-else-if="from == 'alertMessage'">&nbsp;</template>
-  <!-- 为防止代码换行导致页面中元素之间有间隙，所以将元素的标签尾部和相邻元素的标签头部连在一起写 -->
-        </div><div v-if="from != 'alertMessage'" class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'detail'}" @click="changeTab('detail')">{{$t("overall.detail")}}</div><template v-if="from == 'dc'">
-          <div class="sub-list-tab" @click="changeTab('cabinet')">{{$t("config.dc.cabinets")}}</div>
-        </template><template v-if="from == 'alertRule' || from == 'asset'">
-          <div class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div>
-        </template><template v-if="from == 'asset'">
-          <div class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
-        </template><template v-if="from == 'endpoint'">
-          <div class="sub-list-tab" @click="changeTab('endpointQuery')">{{$t("overall.query")}}</div><div
-            class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'assetDetail'}" @click="changeTab('assetDetail')">{{$t("project.endpoint.asset")}}</div>
-        </template><template v-if="from == 'alertMessage'">
-          <div class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'asset'}" @click="changeTab('asset')">{{$t("project.endpoint.asset")}}</div><div
-        class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'project'}" @click="changeTab('project')">{{$t("project.project.project")}}</div><div
-        class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'module'}" @click="changeTab('module')">{{$t("project.module.module")}}</div><div
-        class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'endpoint'}" @click="changeTab('endpoint')">{{$t("project.endpoint.endpoint")}}</div><div
-        class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'dc'}" @click="changeTab('dc')">{{$t("config.dc.dc")}}</div>
-        </template>
-      </div>
-    </div>
-    <div style="margin-top: 10px;">
-      <template v-for="item in detail">
-        <div style="width: 30%; display: inline-block; padding: 5px; color: #606266; word-break: break-all; vertical-align: top">
-          <span>{{item.label}}: </span>
-          <template v-if="item.type && item.type == 'status'">
-            <div style="margin-top: 0" :class="{'active-icon green': item.value == '1', 'active-icon red': item.value == '0' || item.value == '-1' || item.value == '-2'}"></div>
-            <span style="color: #999">{{item.msg}}</span>
-          </template>
-          <template v-else>{{item.value}}</template>
-        </div>
-      </template>
-    </div>
-  </span>
-</template>
-
-<script>
-  export default {
-    name: "commonDetailTab",
-    props: {
-      obj: Object,
-      from: String,
-      detail: Array,
-      targetTab: String
-    },
-    methods: {
-      changeTab(tab) {
-        this.$emit("changeTab", tab);
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>

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

@@ -238,6 +238,68 @@
             if(response.status==="success"){
               let results = response.data.result;
               this.queryData=JSON.parse(JSON.stringify(results));
+              this.tableData = this.handlerTableData(results);
+              this.tableDataCopy = JSON.stringify(this.tableData);
+              this.$nextTick(this.$refs.endpointQueryTable.doLayout());
+            }
+          });
+        }, 450);
+      },
+      clearSelectedMetrics() {
+        this.$refs.endpointQueryTable.clearSelection();
+      },
+      changeTime:function(size,unit){
+        let time=this.getTime(size,unit);
+        this.formatTime=time;
+        this.showEndpoint();
+      },
+      pickTime:function(){
+        this.showEndpoint();
+      },
+      getTime:function(size,unit){//计算时间
+        let now=!this.formatTime? new Date(bus.computeTimezone(new Date().getTime())):new Date(this.formatTime);
+        if(unit){
+          switch (unit) {
+            case 'y':
+              now.setFullYear(now.getFullYear()+size);
+              break;
+            case 'M':
+              now.setMonth(now.getMonth()+size);
+              break;
+            case 'd':
+              now.setDate(now.getDate()+size);
+              break;
+            case 'h':
+              now.setHours(now.getHours()+size);
+              break;
+            case 'm':
+              now.setMinutes(now.getMinutes()+size);
+              break;
+            case 's':
+              now.setSeconds(now.getSeconds()+size);
+              break;
+            default:
+              console.error('unit error');
+          }
+        }else{
+          now.setSeconds(now.getSeconds()+size);
+        }
+        let year=now.getFullYear();
+        let month=now.getMonth()+1;
+        month=month<10?"0"+month:month;
+        let day=now.getDate();
+        day=day<10?"0"+day:day;
+        let hour=now.getHours();
+        hour=hour<10?"0"+hour:hour;
+        let minute=now.getMinutes();
+        minute=minute<10?"0"+minute:minute;
+        let second=now.getSeconds();
+        second=second<10?"0"+second:second;
+        let current=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
+        return current;
+      },
+      handlerTableData(results) {
+        let tableData = [];
         for(let result of results) {
           let metricName = result.metric.__name__;
           let temp = metricName;
@@ -300,66 +362,10 @@
           }
 
           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.tableData.push(edpQueryData);
+          tableData.push(edpQueryData);
         }
-              this.tableDataCopy = JSON.stringify(this.tableData);
-              this.$nextTick(this.$refs.endpointQueryTable.doLayout());
-            }
-          });
-        }, 450);
-      },
-      clearSelectedMetrics() {
-        this.$refs.endpointQueryTable.clearSelection();
-      },
-      changeTime:function(size,unit){
-        let time=this.getTime(size,unit);
-        this.formatTime=time;
-        this.showEndpoint();
-      },
-      pickTime:function(){
-        this.showEndpoint();
-      },
-      getTime:function(size,unit){//计算时间
-        let now=!this.formatTime? new Date(bus.computeTimezone(new Date().getTime())):new Date(this.formatTime);
-        if(unit){
-          switch (unit) {
-            case 'y':
-              now.setFullYear(now.getFullYear()+size);
-              break;
-            case 'M':
-              now.setMonth(now.getMonth()+size);
-              break;
-            case 'd':
-              now.setDate(now.getDate()+size);
-              break;
-            case 'h':
-              now.setHours(now.getHours()+size);
-              break;
-            case 'm':
-              now.setMinutes(now.getMinutes()+size);
-              break;
-            case 's':
-              now.setSeconds(now.getSeconds()+size);
-              break;
-            default:
-              console.error('unit error');
-          }
-        }else{
-          now.setSeconds(now.getSeconds()+size);
-        }
-        let year=now.getFullYear();
-        let month=now.getMonth()+1;
-        month=month<10?"0"+month:month;
-        let day=now.getDate();
-        day=day<10?"0"+day:day;
-        let hour=now.getHours();
-        hour=hour<10?"0"+hour:hour;
-        let minute=now.getMinutes();
-        minute=minute<10?"0"+minute:minute;
-        let second=now.getSeconds();
-        second=second<10?"0"+second:second;
-        let current=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
-        return current;
+        return tableData;
       },
       selectChange:function(selection){//selection 选中的row的数组
         this.selectedEndpoints=selection;