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,70 +238,7 @@
             if(response.status==="success"){
               let results = response.data.result;
               this.queryData=JSON.parse(JSON.stringify(results));
-              for(let result of results) {
+              this.tableData = this.handlerTableData(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);
-                }
-
-
-                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];
-                }
-
-                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());
             }
@@ -361,6 +298,75 @@
         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;
+          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);
+          }
+
+
+          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];
+          }
+
+          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);
+          tableData.push(edpQueryData);
+        }
+        return tableData;
+      },
       selectChange:function(selection){//selection 选中的row的数组
         this.selectedEndpoints=selection;
       },