From 52d48b7e3f0ea04b3be2a2f82c6bd472c6f82c3e Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Mon, 18 Jul 2022 11:03:49 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-2029=20feat=EF=BC=9Acolumns=20display?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B9=E5=A2=9E=E5=8A=A0=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rightBox/chartRightBox/chartRightBox.scss | 23 +++++++++++++++++
 .../common/rightBox/chart/chartConfig.vue     | 25 ++++++++++++++-----
 .../rightBox/chart/systemChartConfig.vue      | 15 ++++++++++-
 3 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
index b68c315c0..5dc676913 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
@@ -331,3 +331,26 @@
     font-size: 18px;
   }
 }
+
+.columns-dispaly-pop{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 4px;
+  .columns-dispaly-title{
+    padding: 4px 8px;
+    font-size: 14px;
+    background: $--border-color-light;
+    color: $--color-text-primary;
+    margin-top: 14px;
+    margin-bottom: 6px;
+  }
+  .columns-dispaly-title:first-of-type{
+    margin-top: 0;
+  }
+  .columns-dispaly-msg{
+    font-size: 14px;
+    color: $--color-text-primary;
+    line-height: 20px;
+  }
+}
\ No newline at end of file
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index 2f21d8465..ce21262f9 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -515,17 +515,30 @@
                 <div class='mapping-display'>{{$t('dashboard.panel.chartForm.unit')}}</div>
               </div>
               <el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
-                           placeholder=""
-                           popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
-                           size="small"
-                           style="flex: 1"
-                           @change="unitSelected"
+                placeholder=""
+                popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+                size="small"
+                style="flex: 1"
+                @change="unitSelected"
               >
               </el-cascader>
             </el-row>
             <el-row class="thresholds-item" v-show="item.show" :key="2">
               <div>
-                <div class='mapping-display'>{{$t('config.assetLabel.display')}}</div>
+                <div class='mapping-display'>
+                  <span>{{$t('config.assetLabel.display')}}</span>
+                  <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside">
+                    <div class="columns-dispaly-pop" style="width:396px">
+                      <div class="columns-dispaly-title" v-pre>{{&lt;expression name&gt;.$labels.&lt;label name&gt;}}</div>
+                      <div class="columns-dispaly-msg">{{$t('tip.expressionLabel')}}{{$t('tip.$labels')}}</div>
+                      <div class="columns-dispaly-title" v-pre>{{&lt;expression name&gt;.$value}}</div>
+                      <div class="columns-dispaly-msg">{{$t('tip.expressionValue')}}</div>
+                    </div>
+                    <span slot="reference">
+                      <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                    </span>
+                  </el-popover>
+                </div>
               </div>
               <el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
                 <el-input v-model="item.display"  style="margin-right: 10px" size="small"  @change="change('columns',index)"/>
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index 8774be571..b003ed624 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -479,7 +479,20 @@
             </el-row>
             <el-row class="thresholds-item" v-show="item.show" :key="2">
               <div>
-                <div class='mapping-display'>{{$t('config.assetLabel.display')}}</div>
+                <div class='mapping-display'>
+                  <span>{{$t('config.assetLabel.display')}}</span>
+                  <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside">
+                    <div class="columns-dispaly-pop" style="width:396px">
+                      <div class="columns-dispaly-title" v-pre>{{&lt;expression name&gt;.$labels.&lt;label name&gt;}}</div>
+                      <div class="columns-dispaly-msg">{{$t('tip.expressionLabel')}}{{$t('tip.$labels')}}</div>
+                      <div class="columns-dispaly-title" v-pre>{{&lt;expression name&gt;.$value}}</div>
+                      <div class="columns-dispaly-msg">{{$t('tip.expressionValue')}}</div>
+                    </div>
+                    <span slot="reference">
+                      <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                    </span>
+                  </el-popover>
+                </div>
               </div>
               <el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
                 <el-input v-model="item.display"  style="margin-right: 10px" size="small"  @change="change('columns',index)"/>