From 514acb13e450c4b82b4cbdfc31d6c56b3ebd6e89 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 19 Jul 2022 10:54:09 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-2044=20fix=EF=BC=9A=20chart=20=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E9=A1=B5=E9=9D=A2=20=E6=93=8D=E4=BD=9C=E5=8D=A1?=
 =?UTF-8?q?=E9=A1=BF=E5=93=8D=E5=BA=94=E6=85=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/rightBox/chart/chartConfig.vue     | 25 ++++++++-----------
 .../rightBox/chart/systemChartConfig.vue      | 25 ++++++++-----------
 2 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index ca66684f1..9add1bb08 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -691,26 +691,21 @@
                   </div>
                   <el-form-item :prop="'param.valueMapping.' + 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" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
-                      <el-popover
-                        slot="prefix"
-                        placement="top-start"
-                        trigger="manual"
-                        popper-class="mapping-iconPop no-style-class"
-                        v-clickoutside="()=>{closeChoose(index)}"
-                        v-model="isChoose[index]"
-                        >
-                        <ul class="mapping-iconList">
-                          <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
-                            <i :class="subItem.value"></i>
-                          </li>
-                        </ul>
-                        <div slot="reference" @click="chooseIcon(isChoose[index],index)">
+                      <el-dropdown trigger="click" slot="prefix" placement="top-start">
+                        <div class="el-dropdown-link">
                           <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
                           <div v-else class="mapping-iconSelect" :title="$t('tip.add')">
                             <i class="nz-icon nz-icon-create-square"></i>
                           </div>
                         </div>
-                      </el-popover>
+                        <el-dropdown-menu slot="dropdown" class="mapping-iconPop">
+                            <ul class="mapping-iconList">
+                              <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
+                                <i :class="subItem.value"></i>
+                              </li>
+                            </ul>
+                        </el-dropdown-menu>
+                      </el-dropdown>
                     </el-input>
                   </el-form-item>
                   <nezhaColor
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index 76f88a86e..0f4bba8a3 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -645,26 +645,21 @@
                   </div>
                   <el-form-item :prop="'param.valueMapping.' + 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" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
-                      <el-popover
-                        slot="prefix"
-                        placement="top-start"
-                        trigger="manual"
-                        popper-class="mapping-iconPop no-style-class"
-                        v-clickoutside="()=>{closeChoose(index)}"
-                        v-model="isChoose[index]"
-                        >
-                        <ul class="mapping-iconList">
-                          <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
-                            <i :class="subItem.value"></i>
-                          </li>
-                        </ul>
-                        <div slot="reference" @click="chooseIcon(isChoose[index],index)">
+                      <el-dropdown trigger="click" slot="prefix" placement="top-start">
+                        <div class="el-dropdown-link">
                           <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
                           <div v-else class="mapping-iconSelect" :title="$t('tip.add')">
                             <i class="nz-icon nz-icon-create-square"></i>
                           </div>
                         </div>
-                      </el-popover>
+                        <el-dropdown-menu slot="dropdown" class="mapping-iconPop">
+                          <ul class="mapping-iconList">
+                            <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
+                              <i :class="subItem.value"></i>
+                            </li>
+                          </ul>
+                        </el-dropdown-menu>
+                      </el-dropdown>
                     </el-input>
                   </el-form-item>
                   <nezhaColor