perf: asset列表性能优化

2021-03-11 16:46:09 +08:00
parent f45b0a32f5
commit d13e30657b
4 changed files with 129 additions and 22 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/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;
+}
+
--- a/nezha-fronted/src/components/common/home.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/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);
+  }
+}*/
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/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'">
-            <el-popover
+          <div @mouseenter="showTableTooltip(formatPingTime(scope.row.pingLastUpdate), true, $event)" @mouseleave="hideTableTooltip" v-if="item.prop == 'pingStatus'">
+            <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>
-            </el-tooltip>
+              <span :class="messageStyle(item, scope.row)">
+                <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) {
-        if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
+      messageStyle(title, row) {
+        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>