From 28127e3653d82b1ae9f765e0e01da91eef5ffaab Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Mon, 27 Dec 2021 15:37:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20explore=20table=20=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=88=97=E5=88=87=E6=8D=A2=E6=98=BE=E7=A4=BA=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E7=9A=84=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/common/elementSet.scss     | 10 +++++++
 .../src/components/common/elementSet.vue      | 10 +++----
 .../page/dashboard/explore/exploreItem.vue    | 28 +++++++++++++++++++
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/elementSet.scss b/nezha-fronted/src/assets/css/components/common/elementSet.scss
index cd3a652c3..61eb27164 100644
--- a/nezha-fronted/src/assets/css/components/common/elementSet.scss
+++ b/nezha-fronted/src/assets/css/components/common/elementSet.scss
@@ -35,6 +35,7 @@
   width: 100%;
   height: 300px;
   border: 1px solid $--button-light-border-color !important;
+  line-height: 1.5;
 }
 .custom-labels i {
   color: #04b330;
@@ -42,6 +43,15 @@
   position: absolute;
   left: 5px;
   top: 6px;
+  margin: 0 !important;
+}
+.explore-table-title{
+  display: none;
+}
+.is-active .explore-table-title{
+  display: block;
+  position: relative;
+  width: 100%
 }
 .nz-btn.nz-btn-style-light {
   background-color: $--background-color-empty;
diff --git a/nezha-fronted/src/components/common/elementSet.vue b/nezha-fronted/src/components/common/elementSet.vue
index e42db76d5..605ad3747 100644
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/nezha-fronted/src/components/common/elementSet.vue
@@ -8,7 +8,7 @@
           v-for="(item,index) in custom"
           :key="index"
           class="custom-label"
-          @click="handler(item,index)"
+          @click.stop="handler(item,index)"
           :id="'element-set-el-'+index"
           :class="{'custom-title orange-font':item.type == 'title','custom-label-disabled':!allowedAll&&!item.allowed && (index==0 || index == 1 || item.NotSet)}"
         >
@@ -20,17 +20,17 @@
       </div>
     </div>
     <div class="custom-bottom-btns">
-      <button v-if="isCancel" :id="tableId+'-element-set-none'" class="nz-btn nz-btn-size-small nz-btn-style-light is-cancel" type="button" @click="batchHandler(false)">
+      <button v-if="isCancel" :id="tableId+'-element-set-none'" class="nz-btn nz-btn-size-small nz-btn-style-light is-cancel" type="button" @click.stop="batchHandler(false)">
         <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
       </button>
-      <button v-if="!isCancel" :id="tableId+'-element-set-all'" class="nz-btn nz-btn-size-small nz-btn-style-light" type="button" @click="batchHandler(true)">
+      <button v-if="!isCancel" :id="tableId+'-element-set-all'" class="nz-btn nz-btn-size-small nz-btn-style-light" type="button" @click.stop="batchHandler(true)">
         <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
       </button>
       <div>
-        <button :id="tableId+'-element-set-esc'" class="nz-btn nz-btn-size-small nz-btn-style-light" type="button" @click="esc">
+        <button :id="tableId+'-element-set-esc'" class="nz-btn nz-btn-size-small nz-btn-style-light" type="button" @click.stop="esc">
           <span class="top-tool-btn-txt">{{$t('overall.esc')}}</span>
         </button>
-        <button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small nz-btn-style-normal" type="button" @click="save">
+        <button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small nz-btn-style-normal" type="button" @click.stop="save">
           <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
         </button>
       </div>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index 4b0be2577..113346d0c 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -91,6 +91,29 @@
                 </div>
               </el-collapse-item>
               <el-collapse-item class="el-collapse-item__height" name="2" title="Table">
+                <div slot="title" class="explore-table-title">
+                  Table
+                  <button class="top-tool-btn table-column-setting"
+                          style="position: absolute;right: 10px;top: 8px"
+                          type="button"
+                          @click.stop="tools.showCustomTableTitle = true"
+                  >
+                    <i class="nz-icon-gear nz-icon"></i>
+                  </button> <!-- 自定义table列 -->
+                  <transition name="el-zoom-in-top">
+                    <element-set
+                      @click.stop
+                      v-if="tools.showCustomTableTitle"
+                      :tableId="tableId"
+                      ref="customTableTitle"
+                      :custom-table-title="tools.customTableTitle"
+                      :original-table-title="tableTitle"
+                      :operation-true="true"
+                      @close="tools.showCustomTableTitle = false"
+                      @update="updateCustomTableTitle"
+                    ></element-set>
+                  </transition>
+                </div>
                 <!-- 自定义table列 -->
                 <div class="nz-table2 explore-table">
                   <el-table ref="exploreTable"
@@ -332,6 +355,7 @@ export default {
       },
       value: true,
       tabPosition: 'none',
+      tableId: 'explore',
       searchMetrics: [
         {
           value: 'Metrics',
@@ -984,6 +1008,10 @@ export default {
           this.$refs.logDetail.myChart.resize()
         }
       })
+    },
+    updateCustomTableTitle (custom) {
+      this.tools.customTableTitle = custom
+      this.$refs.exploreTable.doLayout()
     }
   },
   watch: {