From e924c22f6f5ea6f87681218c1e8e4f6f1c8c4b6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Wed, 8 Apr 2020 18:50:00 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20modulebox-walk-tree=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.modulebox-walk-tree提示信息交互优化
2.alert-message列表labels不显示alertname和等级
---
 nezha-fronted/src/assets/stylus/main.scss     |   5 +-
 .../common/bottomBox/tabs/alertMessageTab.vue |   8 +-
 .../bottomBox/tabs/endpointQueryTab.vue       |   2 +-
 .../src/components/common/exportXLSX.vue      |   3 +-
 .../components/common/popBox/selectWalk.vue   | 121 ++++++++++++------
 .../src/components/page/alert/list.vue        |   1 +
 6 files changed, 90 insertions(+), 50 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 4f2bb8418..dc9178d4e 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -734,7 +734,7 @@ li{
 .el-tooltip__popper.is-light[x-placement^=top] .popper__arrow { /*覆盖tooltip小三角颜色*/
   border-top-color: #ebeef5;
 }
-.nz-table.el-table--enable-row-hover .el-table__body tr:hover>td {
+.el-table .el-table__body tr:hover>td {
   background-color: #f0f0f0;
 }
 .nz-table-gear {
@@ -911,6 +911,9 @@ li{
   padding: 0 !important;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1) !important;
 }
+.nz-pop-select-walk .pop-item-wider {
+  position: relative;
+}
 .right-box-title {
   height: 36px;
   text-align: left;
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index fe37db585..24e261039 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -43,11 +43,11 @@
                  v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName + ' ' + $t('overall.active')}}</div>
             <template v-else>-</template>
           </template>
-          <div v-else-if="item.prop == 'type'" class="content-right-options">
+          <!--<div v-else-if="item.prop == 'type'" class="content-right-options">
             <span v-if="scope.row[item.prop] == 1">Project</span>
             <span v-if="scope.row[item.prop] == 2">Module</span>
             <span v-if="scope.row[item.prop] == 3">Device</span>
-          </div>
+          </div>-->
           <template v-else-if="item.prop == 'summary'">
             <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
             <template v-else>-</template>
@@ -61,7 +61,7 @@
             <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
             <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
           </span>
-          <div v-else-if="item.prop == 'linkObject'">
+          <!--<div v-else-if="item.prop == 'linkObject'">
             <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
                   @click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"
                   :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>
@@ -69,7 +69,7 @@
                   @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"
                   :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>
             <span v-else>-</span>
-          </div>
+          </div>-->
           <div v-else-if="item.prop == 'state'">
             <span class="">
               {{scope.row['state'] == 1 ? "Pending" : ""}}
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index 6ebd61eff..fc20c1ae8 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -74,7 +74,7 @@
         prop="element"
         :label="$t('project.endpoint.element')">
         <template slot-scope="scope">
-          <el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
+          <el-popover trigger="click" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
             <div>
               <ul>
                 <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'--'}}</span></li>
diff --git a/nezha-fronted/src/components/common/exportXLSX.vue b/nezha-fronted/src/components/common/exportXLSX.vue
index f6664dc39..d9abc84dd 100644
--- a/nezha-fronted/src/components/common/exportXLSX.vue
+++ b/nezha-fronted/src/components/common/exportXLSX.vue
@@ -2,8 +2,7 @@
   <div class="export-xlsx">
     <div>
       <el-dropdown split-button type="primary"  size="mini" class="dropdownBtn">
-        <slot name="optionZone" class="option-button"></slot>
-        <el-dropdown-menu slot="dropdown">
+        <slot name="optionZone" class="option-button"></slot><el-dropdown-menu slot="dropdown">
           <el-dropdown-item @click.native="showImportBox(1)" class="dropdown-content"><i class="el-icon-upload2"></i>{{$t('overall.importExcelLower')}}</el-dropdown-item>
           <el-dropdown-item @click.native="showImportBox(2)" class="dropdown-content"><i class="el-icon-download"></i>{{$t('overall.exportExcelLower')}}</el-dropdown-item>
         </el-dropdown-menu>
diff --git a/nezha-fronted/src/components/common/popBox/selectWalk.vue b/nezha-fronted/src/components/common/popBox/selectWalk.vue
index bba69ba8e..1fbd3643e 100644
--- a/nezha-fronted/src/components/common/popBox/selectWalk.vue
+++ b/nezha-fronted/src/components/common/popBox/selectWalk.vue
@@ -1,45 +1,41 @@
 <template>
-  <el-popover v-if="popBox.show" :placement="placement" width="367" ref="selectWalkPopBox" popper-class="nz-pop nz-pop-select-walk" transition="slide">
-    <div>
-      <div class="pop-item-wider">
-        <el-scrollbar class="select-walk-tree" ref="scrollbar">
-          <el-tree
-            ref="walkTree"
-            node-key="objectID"
-            :props="{label: 'name', children: 'subTree', disabled: disabledNode}"
-            :data="walkData"
-            :default-expanded-keys="expandedWalk"
-            :expand-on-click-node="false"
-            check-on-click-node
-            check-strictly
-            show-checkbox
-            @check="change"
-            :default-checked-keys="currentWalk"
-          >
-            <span slot-scope="{node, data}" :class="getClass(data.objectID)">
-              <span v-if="!data.type"><i class="el-icon-reading"></i></span>
-              <span v-else>
-                <i v-if="data.type.toUpperCase() == 'IDENTIFIER'" class="el-icon-folder-opened"></i>
-                <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length > 0" class="el-icon-folder-opened"></i>
-                <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
-                <i v-if="data.type.toUpperCase() == 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
-                <i v-if="data.type.toUpperCase() == 'TABLE'" class="nz-icon nz-icon-table"></i>
-                <el-popover ref="walkDetail" trigger="click" placement="left" popper-class="nz-pop nz-pop-walk-detail">
-                  <div>
-                    <ul>
-                      <li><span class="metirc-tip-list">Name&nbsp;:&nbsp;</span><span>{{data.name}}</span></li>
-                      <li><span class="metirc-tip-list">OID&nbsp;:&nbsp;</span><span>{{data.objectID}}</span></li>
-                      <li><span class="metirc-tip-list">MIB&nbsp;:&nbsp;</span><span>{{mibName(node)}}</span></li>
-                    </ul>
-                  </div>
-                  <span @click.stop slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
-                </el-popover>
-              </span>
-              {{data.name}}
-            </span>
-          </el-tree>
-        </el-scrollbar>
+  <el-popover @show="tempWalk.detailShow = false" v-if="popBox.show" :placement="placement" width="367" ref="selectWalkPopBox" popper-class="nz-pop nz-pop-select-walk" transition="slide">
+    <div class="pop-item-wider" @click="tempWalk.detailShow = false">
+      <div v-if="tempWalk.detailShow" class="el-popover nz-pop walk-pop" :style="{left: detailPopPosition.left, top: detailPopPosition.top}">
+        <p><span class="metirc-tip-list">Name&nbsp;:&nbsp;</span><span>{{tempWalk.name}}</span></p>
+        <p><span class="metirc-tip-list">OID&nbsp;:&nbsp;</span><span>{{tempWalk.objectID}}</span></p>
+        <p><span class="metirc-tip-list">MIB&nbsp;:&nbsp;</span><span>{{mibName(tempWalk.objectID)}}</span></p>
       </div>
+      <el-scrollbar class="select-walk-tree" ref="scrollbar">
+        <el-tree
+          ref="walkTree"
+          node-key="objectID"
+          :props="{label: 'name', children: 'subTree', disabled: disabledNode}"
+          :data="walkData"
+          :default-expanded-keys="expandedWalk"
+          :expand-on-click-node="false"
+          check-on-click-node
+          check-strictly
+          show-checkbox
+          @check="change"
+          :default-checked-keys="currentWalk"
+        >
+          <div slot-scope="{node, data}" class="walk-tree-item" :class="getClass(data.objectID)">
+            <span v-if="!data.type"><i class="el-icon-reading"></i></span>
+            <span v-else>
+              <i v-if="data.type.toUpperCase() == 'IDENTIFIER'" class="el-icon-folder-opened"></i>
+              <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length > 0" class="el-icon-folder-opened"></i>
+              <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
+              <i v-if="data.type.toUpperCase() == 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
+              <i v-if="data.type.toUpperCase() == 'TABLE'" class="nz-icon nz-icon-table"></i>
+              <span @click.stop="showDetail(data, $event)" style="position: relative;">
+                <i class="nz-icon nz-icon-info-normal metric-tip-icon"></i>
+              </span>
+            </span>
+            {{data.name}}
+          </div>
+        </el-tree>
+      </el-scrollbar>
     </div>
     <div slot="reference">
       <slot name="trigger">
@@ -60,6 +56,8 @@
       data() {
         return {
           popBox: {show: false},
+          tempWalk: {detailShow: false, objectID: ''},
+          detailPopPosition: {top: "0", left: "0"}
         }
       },
       computed: {
@@ -70,12 +68,13 @@
         },
         mibName() {
           return (value) => {
-            return this.getMibName(value);
+            return value ? this.getMibName(value) : "";
           }
         }
       },
       methods:{
-        getMibName(node) {
+        getMibName(oid) {
+          let node = this.$refs.walkTree.getNode(oid);
           let mibName = getMibName(node);
           function getMibName(n) {
             if (n.parent && n.parent.parent) {
@@ -94,10 +93,23 @@
         },
         change(data, tree) {
           this.$emit("selectWalk", data.objectID);
+          this.tempWalk.detailShow = false
         },
         show() {
           this.popBox.show = true;
         },
+        showDetail(data, e) {
+          if (this.tempWalk.objectID != data.objectID) {
+            this.tempWalk.detailShow = false;
+            data.detailShow = !data.detailShow;
+            this.tempWalk = data;
+          } else {
+            data.detailShow = !data.detailShow;
+          }
+
+          this.detailPopPosition.top = e.screenY-23 + "px";
+          this.detailPopPosition.left = e.screenX-16 + "px";
+        },
         disabledNode(data) {
           if (data.objectID) {
             return false;
@@ -130,7 +142,32 @@
 .walk-active {
   color: $global-text-color-active;
 }
+.walk-tree-item {
+  height: 34px;
+  line-height: 34px;
+}
 .walk-detail {
   z-index: 10000 !important;
 }
+
+.walk-pop {
+  position: fixed;
+  transform: translate(-100%, -100%);
+}
+.walk-pop::after {
+  content: '';
+  display: block;
+  width:0;
+  height:0;
+  overflow: hidden;
+  font-size: 0;
+  line-height: 0;
+  border: 5px;
+  border-style: dashed dashed dashed solid;
+  border-color: transparent transparent transparent #fff ;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(10px, -50%);
+}
 </style>
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index a895204a5..9467e3c3a 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -82,6 +82,7 @@
               <template v-else-if="item.prop == 'labels'">
                 <el-tag @click="showTagDetail(scope.row.labels, key)"
                         :class="{'link': key == 'asset' || key == 'endpoint' || key == 'project' || key == 'module' || key == 'datacenter'}"
+                        v-if="key != 'alertname' && key != 'severity'"
                         :type="tagType(key)"
                         size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{key}}：{{value}}</el-tag>
               </template>