perf: asset列表性能优化

nezha-fronted/src/assets/stylus/main.scss

@@ -6,6 +6,7 @@ body {
   min-width: 1024px;
   margin: 0px !important;
   padding:0px !important;
+  cursor: default !important;
 }
 html {
   height: 100%;
@@ -929,7 +930,38 @@ li{
   padding:2px 5px;
   border-radius: 4px;
 }
-
+.nz-table .danger>span {
+  background-color: $danger-color;
+  color: white;
+  padding:2px 5px;
+  border-radius: 4px;
+}
+.nz-table .success>span {
+  background-color: $success-color;
+  color: white;
+  padding:2px 5px;
+  border-radius: 4px;
+}
+.nz-table .suspended>span {
+  background-color: $suspended-color;
+  color: white;
+  padding:2px 5px;
+  border-radius: 4px;
+}
+.nz-table .warning>span {
+  background-color: $warning-color;
+  color: white;
+  padding:2px 5px;
+  border-radius: 4px;
+}
+.col-resize-area {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+}
 .nz-table th {
   padding: 0;
 }
@@ -2429,3 +2461,8 @@ li{
   text-align: left;
 }
 
+.table-tooltip {
+  position: fixed !important;
+  visibility: hidden;
+}
+

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

@@ -7,6 +7,7 @@
     <left-menu ></left-menu>
     <menus v-if="isMenuPage"></menus>
     <web-ssh ref="webSsh" ></web-ssh>
+    <span class="el-popover table-tooltip"></span>
   </div>
 
 </template>

nezha-fronted/src/components/common/js/tools.js

@@ -304,7 +304,7 @@ export function calcDurationByStringTimeB(startTime, endTime) {
   }else if(durationSecond > 60) {
     result = `${(Math.floor(durationSecond/60))%60}m ${result}`;
   }
-  
+
   return result;
 }
 export function unixTimeParseToString(unixTime,fmt='yyyy-MM-dd hh:mm:ss'){
@@ -742,3 +742,26 @@ export function clickLegend(echart,legendName,index){
 
   }
 }
+
+export function showTableTooltip(content, show = true, e) {
+  //console.info(content, e)
+  if (show) {
+    let dom = document.querySelector(".table-tooltip");
+    dom.innerHTML = content;
+    dom.setAttribute("style",  `visibility: visible; top: ${e.clientY-e.offsetY+e.target.offsetHeight*0.5-dom.offsetHeight*0.5}px; left: ${e.clientX-e.offsetX+e.target.offsetWidth}px`);
+  }
+}
+export function hideTableTooltip() {
+  let dom = document.querySelector(".table-tooltip");
+  dom.setAttribute("style", "visibility: hidden;");
+  dom.innerHTML = "";
+}
+
+/*function getTdDom(dom) {
+  let tagName = dom.tagName;
+  if (tagName.toLowerCase() === 'td') {
+    return dom;
+  } else {
+    return getTdDom(dom.parentElement);
+  }
+}*/

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

@@ -47,7 +47,6 @@
         border
         v-loading="tools.loading"
         ref="assetTable"
-        :cell-class-name="messageStyle"
         @sort-change="tableDataSort"
         @row-dblclick="detail"
         @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
@@ -65,6 +64,7 @@
           :key="`col_${index}`"
           :label="item.label"
           :fixed="item.fixed"
+          :width="item.width"
           :class-name="item.prop == 'option' ? 'content-right-options' : ''"
           :sortable="$tableSet.sortableShow(item.prop,'asset')"
           :prop="$tableSet.propTitle(item.prop,'asset')"
@@ -72,7 +72,10 @@
         >
           <template slot-scope="scope" slot="header">
             <span v-if="item.type == 'tag'" class="tag-header" :title="item.label"><span class="tag-value">{{item.label}}</span><span class="tag-mark">&nbsp;[Tag]</span></span>
-            <span v-else><span>{{item.label}}</span></span>
+            <span v-else>
+              <span>{{item.label}}</span>
+              <div class="col-resize-area"></div>
+            </span>
           </template>
           <template slot-scope="scope" :column="item">
             <div v-if="item.prop=='ID'">
@@ -90,8 +93,9 @@
               <span v-if="scope.row.state==2">{{ $t('asset.notInStock')}}</span>
               <span v-if="scope.row.state==3">{{ $t('asset.suspended')}}</span>
             </div>
-          <div v-if="item.prop == 'pingStatus'">
+          <div @mouseenter="showTableTooltip(formatPingTime(scope.row.pingLastUpdate), true, $event)" @mouseleave="hideTableTooltip" v-if="item.prop == 'pingStatus'">
-            <el-popover
+            <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
+            <!--<el-popover
               placement="right"
               width="200"
               trigger="hover"
@@ -99,24 +103,38 @@
               <div slot="reference" style="width: 100%">
                 <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
               </div>
-            </el-popover>
+            </el-popover>-->
           </div>
           <template v-if="item.prop=='Module'">
-            <el-tooltip placement="right" effect="light">
+            <div :class="messageStyle(item, scope.row)" @mouseenter="showTableTooltip(`${$t('asset.down')} / ${$t('asset.suspended')} / ${$t('asset.total')}`, true, $event)" @mouseleave="hideTableTooltip">
+              <span @click="showEndpoint(scope.row)" class="link" style="padding: 2px 8px">{{scope.row.endpointDownNum}}/{{scope.row.endpointSuspendedNum}}/{{scope.row.endpointNum}}</span>
+            </div>
+            <!--<el-tooltip placement="right" effect="light">
               <div slot="content">
                 {{$t('asset.down')}} / {{$t('asset.suspended')}} / {{$t('asset.total')}}
               </div>
-              <span class="link" @click="showEndpoint(scope.row)" style="padding: 2px 8px">{{scope.row.endpointDownNum}}/{{scope.row.endpointSuspendedNum}}/{{scope.row.endpointNum}}</span>
+              <span :class="messageStyle(item, scope.row)">
-            </el-tooltip>
+                <span class="link" @click="showEndpoint(scope.row)" style="padding: 2px 8px">{{scope.row.endpointDownNum}}/{{scope.row.endpointSuspendedNum}}/{{scope.row.endpointNum}}</span>
+              </span>
+            </el-tooltip>-->
           </template>
           <template v-if="item.prop=='Alert'">
-            <el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">
+            <div :class="messageStyle(item, scope.row)" @mouseenter="showTableTooltip(scope.row.alertNum+' '+$t('overall.active'), scope.row.alertNum >= 99, $event)" @mouseleave="hideTableTooltip">
               <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
                 {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
                   <sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
                 {{' ' + $t('overall.active')}}
               </span>
-            </el-tooltip>
+            </div>
+            <!--<el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">
+              <span :class="messageStyle(item, scope.row)">
+                <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
+                  {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
+                    <sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
+                  {{' ' + $t('overall.active')}}
+                </span>
+              </span>
+            </el-tooltip>-->
           </template>
           <div v-if="item.prop=='dataCenter'">
             <span  >{{scope.row.idc.name}}</span>
@@ -203,6 +221,8 @@
   import exportXLSX from "../../common/exportXLSX";
   import endpointStatusPop from "./endpointStatusPop";
   import deleteButton from "../../common/deleteButton";
+  import {showTableTooltip, hideTableTooltip} from "../../common/js/tools";
+
   export default {
     name: "asset",
     components:{
@@ -318,58 +338,66 @@
             prop: 'ID',
             show: false,
             allowed:true,
-            // width: 110
+            width: 110
           }, {
             label: this.$t("asset.tableTitle.assetType"),
             prop: 'assetType',
             show: true,
+            width: 110
           }, {
             label: this.$t("asset.tableTitle.device"),
             prop: 'SN',
             show: true,
-            width: 130
           },  {
             label: this.$t("asset.tableTitle.assetState"),
             prop: 'state',
             show: true,
+            width: 110
           }, {
             label:this.$t('asset.tableTitle.assetPing'),
             prop:'pingStatus',
             show:true,
+            width: 110
           },{
             label: this.$t("asset.tableTitle.modules"),
             prop: 'Module',
             show: true,
-            width: 105
+            width: 120
           }, {
             label: this.$t("asset.tableTitle.alerts"),
             prop: 'Alert',
             show: true,
-            width: 100
+            width: 120
           }, {
             label: this.$t("asset.tableTitle.dataCenter"),
             prop: 'dataCenter',
             show: true,
+            width: 110
           }, {
             label: this.$t("asset.tableTitle.cabinet"),
             prop: 'cabinet',
             show: true,
+            width: 110
           }, {
             label: this.$t("asset.tableTitle.model"),
             prop: 'model',
             show: true,
+            width: 110
           }, {
             label: this.$t("asset.tableTitle.vendor"),
             prop: 'vendor',
             show: true,
+            width: 110
           }, {
             label: this.$t("asset.tableTitle.procurementDate"),
             prop: 'purchaseDate',
             show: false,
+            width: 110
           }, {
             label: this.$t("asset.tableTitle.principal"),
             prop: 'principal',
             show: false,
+            width: 110
           }, {
             label: this.$t("asset.tableTitle.principalTel"),
             prop: 'tel',
@@ -379,7 +407,6 @@
             label: this.$t('config.account.option'),
             prop: 'option',
             show: true,
-            width: 150,
             fixed:'right'
           }],
         tableData: [],
@@ -435,7 +462,7 @@
           if (n.length === 0 && this.pageObj.pageNo > 1) {
             this.pageNo(this.pageObj.pageNo-1);
           }
-          
+
           if(!this.delFlag){ // 不是删除时回到顶部
             this.$refs.assetTable.bodyWrapper.scrollTop = 0
           }else{
@@ -447,6 +474,7 @@
       }
     },
     methods: {
+      showTableTooltip, hideTableTooltip,
       fullScreen() {
         let vm = this;
         this.$bottomBoxWindow.fullScreen(vm);
@@ -529,8 +557,26 @@
           });
         });
       },
-      messageStyle(e) {
+      messageStyle(title, row) {
-        if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
+        if (title.label == 'Alerts' || title.label == this.$t("asset.tableTitle.alerts")) {
+          if (row.alertNum > 0) {
+            return 'danger';
+          } else {
+            return 'success';
+          }
+        }
+        if(title.label == 'Module' || title.label == this.$t("asset.tableTitle.modules")){
+          if (row.state == 3) {
+            return 'suspended';
+          } else {
+            if (row.endpointDownNum > 0) {
+              return 'danger';
+            } else {
+              return 'success';
+            }
+          }
+        }
+        /*if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
           if (e.row.alertNum > 0) {
             return 'danger';
           } else {
@@ -547,7 +593,7 @@
               return 'success';
             }
           }
-        }
+        }*/
         return '';
       },
       edit(asset) {
@@ -861,7 +907,7 @@
       bus.$off('alert-message-change');
       if(this.scrollbarWrap){
         this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
+      }
     }
   }
 </script>