feat： chart添加group 并修改样式

13 files changed, 214 insertions, 483 deletions

diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index b3e849df7..cf7020bd1 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -20,21 +20,25 @@
               <span class="panel-info-corner-inner"></span>
             </span>
           </el-popover>
-          <el-dropdown trigger="click" v-show="!isPreview" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
-              <span class="chart-title-text">{{chartInfo.name}}</span>
-              <span class="chart-title-icon" v-if="data.editable"><i class="nz-icon nz-icon-xialaxuanze  "  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+            <span class="el-dropdown-link chart-title">
+              <span class="chart-title-text">{{chartData.name}}</span>
+              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+                <span  @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
+                  <i class="nz-icon nz-icon-replay"></i>
+                </span>
+                 <span  @click="showAllScreen" class="" :title="$t('dashboard.screen')">
+                  <i class="nz-icon nz-icon-maxview"></i>
+                 </span>
+                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
+              </span>
             </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow" v-if="data.editable" :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
-              <li  @click="refreshChart" class="el-dropdown-menu__item">
-                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
-              <li  @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
-                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
+              <li  @click="editChart" class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
               <li  @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
                 <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  @click="showAllScreen" class="el-dropdown-menu__item">
-                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
               <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
                 <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
             </ul>
@@ -839,31 +843,7 @@ export default {
     },
     duplicate () {
       this.dropdownMenuShow = false
-      this.$confirm(this.$t('tip.confirmDuplicate'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'info'
-      }).then(() => {
-        const param = { id: this.data.id }
-        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t('tip.duplicateSuccess')
-            })
-            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
-          } else {
-            if (response.msg) {
-              this.$message.error(response.msg)
-            } else if (response.error) {
-              this.$message.error(response.error)
-            } else {
-              this.$message.error(response)
-            }
-          }
-        })
-      })
+      this.$emit('on-duplicate-chart-block', this.data.id)
     },
     // 全屏查看
     showAllScreen () {
diff --git a/nezha-fronted/src/components/charts/chart-group.vue b/nezha-fronted/src/components/charts/chart-group.vue
index c0d76d60e..3ca56ed75 100644
--- a/nezha-fronted/src/components/charts/chart-group.vue
+++ b/nezha-fronted/src/components/charts/chart-group.vue
@@ -10,28 +10,41 @@
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
-              <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze  "  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+            <span class="el-dropdown-link chart-title">
+              <span class="chart-title-text">
+                <span @click="showList=!showList">
+                  <i class="nz-icon nz-icon-arrow-down" :class="showList?'':'is-active'"/>
+                </span>
+                {{chartData.name}}
+                <span v-show="!showList">{{dataList.length}} panel collapse</span>
+              </span>
+              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+<!--                <span  @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">-->
+<!--                  <i class="nz-icon nz-icon-replay"></i>-->
+<!--                </span>-->
+<!--                 <span  @click="showAllScreen" class="" :title="$t('dashboard.screen')">-->
+<!--                  <i class="nz-icon nz-icon-maxview"></i>-->
+<!--                 </span>-->
+<!--                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>-->
+
+              </span>
             </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
-              <li  @click="refreshChart" class="el-dropdown-menu__item">
-                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
-              <li  @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
-                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
+              <li  @click="editChart" class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
               <li  @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
                 <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
-                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
-              <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
+<!--              <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">-->
+<!--                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>-->
             </ul>
           </el-dropdown>
 
         </div>
-        <div :id="'chartUrl'+chartIndex" class="mt-10 url-container">
-          <chart-list-group :groupList.sync="chartData.children" :panel-lock="panelLock" :filterParent="filter"  :class="{'show-top':false}" :hasGroup="false" :from="from" ref="listGroup" :panelId="panelId" @on-edit-group-chart="editGroupItem" @on-remove-chart="removeChartGroup" @moveGroupItem="moveGroupItem"></chart-list-group>
-        </div>
+        <el-collapse-transition>
+          <div :id="'chartUrl'+chartIndex" class="mt-10 url-container" v-show="showList">
+            <chart-list-group :groupList.sync="chartData.children" :panel-lock="panelLock" :filterParent="filter"  :class="{'show-top':false}" :hasGroup="false" :from="from" ref="listGroup" :panelId="panelId" @on-edit-group-chart="editGroupItem" @on-duplicate-group-chart="duplicateGroupItem" @on-remove-chart="removeChartGroup" @moveGroupItem="moveGroupItem"></chart-list-group>
+          </div>
+        </el-collapse-transition>
         <div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
           <div  :id="'staticContainer'+chartIndex" class="center-content"></div>
         </div>
@@ -92,7 +105,8 @@ export default {
       titleHeight: 38, // title-height:28,magrin-bottom:10
       paddingBottom: 6,
       divFirstShow: false,
-      showStatic: false
+      showStatic: false,
+      showList: true
     }
   },
   methods: {
@@ -202,6 +216,9 @@ export default {
     editGroupItem (chart) {
       this.$emit('on-edit-group-chart', chart)
     },
+    duplicateGroupItem (chart) {
+      this.$emit('on-duplicate-group-chart', chart)
+    },
     // 删除该图表
     removeChart () {
       this.dropdownMenuShow = false
@@ -221,31 +238,7 @@ export default {
     },
     duplicate () {
       this.dropdownMenuShow = false
-      this.$confirm(this.$t('tip.confirmDuplicate'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'info'
-      }).then(() => {
-        const param = { id: this.data.id }
-        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t('tip.duplicateSuccess')
-            })
-            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
-          } else {
-            if (response.msg) {
-              this.$message.error(response.msg)
-            } else if (response.error) {
-              this.$message.error(response.error)
-            } else {
-              this.$message.error(response)
-            }
-          }
-        })
-      })
+      this.$emit('on-duplicate-chart-block', this.data.id)
     },
     moveGroupItem (groupList) {
       this.$emit('moveGroupItem', { groupId: this.data.id, children: groupList })
@@ -311,3 +304,14 @@ export default {
     position: unset !important;
   }
 </style>
+<style scoped>
+  .chart-title .nz-icon-arrow-down{
+    display: inline-block;
+    transition: transform .3s;
+  }
+  .chart-title .nz-icon-arrow-down.is-active{
+    transform: rotate(
+      -90deg
+    );
+  }
+</style>
diff --git a/nezha-fronted/src/components/charts/chart-list-group.vue b/nezha-fronted/src/components/charts/chart-list-group.vue
index d947bf2ae..54cc1cc6b 100644
--- a/nezha-fronted/src/components/charts/chart-list-group.vue
+++ b/nezha-fronted/src/components/charts/chart-list-group.vue
@@ -1,7 +1,7 @@
 <style scoped>
   .chartBox {
     float:left;
-    padding: 0px 2px 2px 0;
+    padding: 0px 10px 10px 0;
     position:relative;
     box-sizing: border-box;
   }
@@ -10,7 +10,7 @@
   }
   .list-width{
     width: calc(100% - 2px);
-    padding: 5px 5px 5px 0px;
+    padding: 5px 10px 5px 0px;
     box-sizing: border-box;
     overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
   }
@@ -1552,90 +1552,16 @@ export default {
       }
     },
     // 复制图表
-    duplicateChart (chartId, duplicateChartBack) {
-      const duplicateChartId = duplicateChartBack.id
-      let chart
-      let chartIndex = -1
-      this.dataList.forEach((item, index) => {
-        if (item.id === chartId) {
-          chartIndex = index
-          chart = item
-        }
-      })
-      let chartNext
-      const chartNextIndex = chartIndex + 1
-      if (chartNextIndex <= (this.dataList.length - 1)) {
-        chartNext = this.dataList[chartNextIndex]
-      }
-
+    duplicateChart (chartId) {
+      const chart = this.dataList.find(item => item.id === chartId)
       if (chart) {
-        chart.next = duplicateChartId
-        const duplicateChart = JSON.parse(JSON.stringify(chart))
-        duplicateChart.id = duplicateChartId
-        duplicateChart.prev = duplicateChartBack.prev
-        duplicateChart.next = duplicateChartBack.next
-        duplicateChart.title = duplicateChartBack.title
-        duplicateChart.elements = duplicateChartBack.elements
-        if (chartNext) {
-          chartNext.prev = duplicateChartId
-        }
-
-        this.dataList.splice(chartNextIndex, 0, duplicateChart)
-
-        const indexInTotal = this.dataTotalList.indexOf(chart)
-        this.dataTotalList.splice(indexInTotal + 1, 0, duplicateChart)
-        const chartInTotal = this.dataTotalList.find(item => item.id === chartId)
-        chartInTotal.next = duplicateChartId
-        if (chartNext) {
-          const chartNextInTotal = this.dataTotalList.find(item => item.id === chartNext.id)
-          chartNextInTotal.prev = chartNext.prev
-        }
-
-        const indexInTotalBak = this.dataTotalListBak.indexOf(chart)
-        this.dataTotalListBak.splice(indexInTotalBak + 1, 0, duplicateChart)
-        const chartInTotalBak = this.dataTotalListBak.find(item => item.id === chartId)
-        chartInTotalBak.next = duplicateChartId
-        if (chartNext) {
-          const chartNextInTotalBak = this.dataTotalListBak.find(item => item.id === chartNext.id)
-          chartNextInTotalBak.prev = chartNext.prev
-        }
-
-        this.currentRecordNum = this.currentRecordNum + 1
-        const chartData = this.chartDataCacheGroup.get(chart.id)
-        // console.log("__chartItem00__", chartData)
-        if (duplicateChartBack.type === 'alertList') {
-          this.$nextTick(() => {
-            this.getAlertListChartData(duplicateChartBack)
-            this.setChartSize(duplicateChart, chartNextIndex) // 设置该图表宽度
-          })
-        } else {
-          let duplicateChartData = {}
-          try {
-            duplicateChartData = JSON.parse(JSON.stringify(chartData))
-          } catch (e) {
-            console.warn(e)
-          }
-          duplicateChartData.chartItem = duplicateChart
-          this.chartDataCacheGroup.set(duplicateChartId, duplicateChartData)
-          this.$nextTick(() => {
-            if (this.$refs['editChart' + duplicateChartId][0]) {
-              this.$refs['editChart' + duplicateChartId][0].showLoad(duplicateChart)// 之后要实现
-            }
-
-            const chartType = duplicateChart.type
-            if (chartType !== 'url') {
-              this.getChartDataForSearch(duplicateChart, chartNextIndex)
-            }
-            this.setChartSize(duplicateChart, chartNextIndex) // 设置该图表宽度
-          })
-        }
+        this.$emit('on-duplicate-group-chart', chart)
       }
     },
     // 编辑图表
     editData (chartId) {
       // 获取该id下chart的相关信息
       const chart = this.dataList.find(item => item.id === chartId)
-      console.log(chart)
       if (chart) {
         this.$emit('on-edit-group-chart', chart)
       }
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index bc4a50820..bb785e3f3 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1,7 +1,7 @@
 <style scoped>
   .chartBox {
     float:left;
-    padding: 0px 2px 2px 0;
+    padding: 0px 10px 10px 0;
     position:relative;
     box-sizing: border-box;
   }
@@ -182,6 +182,7 @@
                       @on-edit-chart-block="editData"
                       @on-edit-group-chart="editDataGroup"
                       @on-remove-group-chart="removeChartGroup"
+                      @on-duplicate-group-chart="duplicateChartGroup"
                       @moveGroupItem="moveGroupItem"
                       :panel-id="filter.panelId"
                       :chart-data="item"
@@ -317,12 +318,12 @@ export default {
       this.dataList.forEach((item, index) => {
         item.weight = index
         newWeights.push({ id: item.id, weight: index })
-        if (item.type === 'group' && group.groupId!==item.id) {
+        if (item.type === 'group' && group.groupId !== item.id) {
           item.children.forEach(chart => {
             i++
             newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
           })
-        } else if (item.type === 'group' && group.groupId == item.id){
+        } else if (item.type === 'group' && group.groupId == item.id) {
           group.children.forEach(chart => {
             i++
             newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
@@ -1607,82 +1608,22 @@ export default {
     },
     // 复制图表
     duplicateChart (chartId, duplicateChartBack) {
-      const duplicateChartId = duplicateChartBack.id
-      let chart
-      let chartIndex = -1
-      this.dataList.forEach((item, index) => {
-        if (item.id === chartId) {
-          chartIndex = index
-          chart = item
-        }
+      const chart = this.dataList.find(item => {
+        return item.id === chartId
       })
-      let chartNext
-      const chartNextIndex = chartIndex + 1
-      if (chartNextIndex <= (this.dataList.length - 1)) {
-        chartNext = this.dataList[chartNextIndex]
+      if (chart) {
+        const copyChart = { ...chart }
+        delete copyChart.id
+        copyChart.name = 'Copy_' + copyChart.name
+        this.$emit('on-edit-chart', copyChart)
       }
-
+    },
+    duplicateChartGroup (chart) {
       if (chart) {
-        chart.next = duplicateChartId
-        const duplicateChart = JSON.parse(JSON.stringify(chart))
-        duplicateChart.id = duplicateChartId
-        duplicateChart.prev = duplicateChartBack.prev
-        duplicateChart.next = duplicateChartBack.next
-        duplicateChart.title = duplicateChartBack.title
-        duplicateChart.elements = duplicateChartBack.elements
-        if (chartNext) {
-          chartNext.prev = duplicateChartId
-        }
-
-        this.dataList.splice(chartNextIndex, 0, duplicateChart)
-
-        const indexInTotal = this.dataTotalList.indexOf(chart)
-        this.dataTotalList.splice(indexInTotal + 1, 0, duplicateChart)
-        const chartInTotal = this.dataTotalList.find(item => item.id === chartId)
-        chartInTotal.next = duplicateChartId
-        if (chartNext) {
-          const chartNextInTotal = this.dataTotalList.find(item => item.id === chartNext.id)
-          chartNextInTotal.prev = chartNext.prev
-        }
-
-        const indexInTotalBak = this.dataTotalListBak.indexOf(chart)
-        this.dataTotalListBak.splice(indexInTotalBak + 1, 0, duplicateChart)
-        const chartInTotalBak = this.dataTotalListBak.find(item => item.id === chartId)
-        chartInTotalBak.next = duplicateChartId
-        if (chartNext) {
-          const chartNextInTotalBak = this.dataTotalListBak.find(item => item.id === chartNext.id)
-          chartNextInTotalBak.prev = chartNext.prev
-        }
-
-        this.currentRecordNum = this.currentRecordNum + 1
-        const chartData = this.chartDataCacheGroup.get(chart.id)
-        // console.log("__chartItem00__", chartData)
-        if (duplicateChartBack.type === 'alertList') {
-          this.$nextTick(() => {
-            this.getAlertListChartData(duplicateChartBack)
-            this.setChartSize(duplicateChart, chartNextIndex) // 设置该图表宽度
-          })
-        } else {
-          let duplicateChartData = {}
-          try {
-            duplicateChartData = JSON.parse(JSON.stringify(chartData))
-          } catch (e) {
-            console.warn(e)
-          }
-          duplicateChartData.chartItem = duplicateChart
-          this.chartDataCacheGroup.set(duplicateChartId, duplicateChartData)
-          this.$nextTick(() => {
-            if (this.$refs['editChart' + duplicateChartId][0]) {
-              this.$refs['editChart' + duplicateChartId][0].showLoad(duplicateChart)// 之后要实现
-            }
-
-            const chartType = duplicateChart.type
-            if (chartType !== 'url') {
-              this.getChartDataForSearch(duplicateChart, chartNextIndex)
-            }
-            this.setChartSize(duplicateChart, chartNextIndex) // 设置该图表宽度
-          })
-        }
+        const copyChart = { ...chart }
+        delete copyChart.id
+        copyChart.name = 'Copy_' + copyChart.name
+        this.$emit('on-edit-chart', copyChart)
       }
     },
     // 编辑图表
diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
index 784f0288c..fca155e65 100644
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -22,19 +22,23 @@
           </el-popover>
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
+            <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze  "  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+                <span  @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
+                  <i class="nz-icon nz-icon-replay"></i>
+                </span>
+                 <span  @click="showAllScreen" class="" :title="$t('dashboard.screen')">
+                  <i class="nz-icon nz-icon-maxview"></i>
+                 </span>
+                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
+              </span>
             </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
-              <li  @click="refreshChart"  class="el-dropdown-menu__item">
-                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
-              <li  @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
-                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
+              <li  @click="editChart" class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
               <li  @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
                 <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
-                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
               <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
                 <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
             </ul>
@@ -265,31 +269,7 @@ export default {
     },
     duplicate () {
       this.dropdownMenuShow = false
-      this.$confirm(this.$t('tip.confirmDuplicate'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'info'
-      }).then(() => {
-        const param = { id: this.data.id }
-        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t('tip.duplicateSuccess')
-            })
-            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
-          } else {
-            if (response.msg) {
-              this.$message.error(response.msg)
-            } else if (response.error) {
-              this.$message.error(response.error)
-            } else {
-              this.$message.error(response)
-            }
-          }
-        })
-      })
+      this.$emit('on-duplicate-chart-block', this.data.id)
     },
     // 全屏查看
     showAllScreen () {
diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
index fe6a5159c..beb32b7fc 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ b/nezha-fronted/src/components/charts/chart-single-stat.vue
@@ -22,19 +22,23 @@
           </el-popover>
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
+            <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze  "  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+                <span  @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
+                  <i class="nz-icon nz-icon-replay"></i>
+                </span>
+                 <span  @click="showAllScreen" class="" :title="$t('dashboard.screen')">
+                  <i class="nz-icon nz-icon-maxview"></i>
+                 </span>
+                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
+              </span>
             </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
-              <li  @click="refreshChart"  class="el-dropdown-menu__item">
-                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
-              <li  @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
-                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
+              <li  @click="editChart" class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
               <li  @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
                 <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
-                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
               <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
                 <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
             </ul>
@@ -356,31 +360,7 @@ export default {
     },
     duplicate () {
       this.dropdownMenuShow = false
-      this.$confirm(this.$t('tip.confirmDuplicate'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'info'
-      }).then(() => {
-        const param = { id: this.data.id }
-        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t('tip.duplicateSuccess')
-            })
-            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
-          } else {
-            if (response.msg) {
-              this.$message.error(response.msg)
-            } else if (response.error) {
-              this.$message.error(response.error)
-            } else {
-              this.$message.error(response)
-            }
-          }
-        })
-      })
+      this.$emit('on-duplicate-chart-block', this.data.id)
     },
     // 全屏查看
     showAllScreen () {
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index fa0c77c46..0cec25ef0 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -21,31 +21,27 @@
                 <span class="panel-info-corner-inner"></span>
             </span>
           </el-popover>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
+            <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze  "
-                                                :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+                <span  @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
+                  <i class="nz-icon nz-icon-replay"></i>
+                </span>
+                 <span  @click="showAllScreen" class="" :title="$t('dashboard.screen')">
+                  <i class="nz-icon nz-icon-maxview"></i>
+                 </span>
+                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
+              </span>
             </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex"
-                class="el-dropdown-menu nz-chart-dropdown"
-                style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;">
-              <li @click="refreshChart" class="el-dropdown-menu__item">
-                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span>
-              </li>
-              <li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
-                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}
-              </li>
-              <li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}
-              </li>
-              <li @click="showAllScreen" class="el-dropdown-menu__item">
-                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}
-              </li>
-              <li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}
-              </li>
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
+              <li  @click="editChart" class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
+              <li  @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
+                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
+              <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
+                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
             </ul>
           </el-dropdown>
         </div>
@@ -336,31 +332,7 @@ export default {
     },
     duplicate () {
       this.dropdownMenuShow = false
-      this.$confirm(this.$t('tip.confirmDuplicate'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'info'
-      }).then(() => {
-        const param = { id: this.data.id }
-        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t('tip.duplicateSuccess')
-            })
-            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
-          } else {
-            if (response.msg) {
-              this.$message.error(response.msg)
-            } else if (response.error) {
-              this.$message.error(response.error)
-            } else {
-              this.$message.error(response)
-            }
-          }
-        })
-      })
+      this.$emit('on-duplicate-chart-block', this.data.id)
     },
     // 全屏查看
     showAllScreen () {
diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue
index a26f28f20..06821c072 100644
--- a/nezha-fronted/src/components/charts/chart-url.vue
+++ b/nezha-fronted/src/components/charts/chart-url.vue
@@ -10,19 +10,23 @@
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
+            <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze  "  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+                <span  @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
+                  <i class="nz-icon nz-icon-replay"></i>
+                </span>
+                 <span  @click="showAllScreen" class="" :title="$t('dashboard.screen')">
+                  <i class="nz-icon nz-icon-maxview"></i>
+                 </span>
+                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
+              </span>
             </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
-              <li  @click="refreshChart" class="el-dropdown-menu__item">
-                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
-              <li  @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
-                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
+              <li  @click="editChart" class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
               <li  @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
                 <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
-                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
               <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
                 <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
             </ul>
@@ -224,31 +228,7 @@ export default {
     },
     duplicate () {
       this.dropdownMenuShow = false
-      this.$confirm(this.$t('tip.confirmDuplicate'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'info'
-      }).then(() => {
-        const param = { id: this.data.id }
-        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t('tip.duplicateSuccess')
-            })
-            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
-          } else {
-            if (response.msg) {
-              this.$message.error(response.msg)
-            } else if (response.error) {
-              this.$message.error(response.error)
-            } else {
-              this.$message.error(response)
-            }
-          }
-        })
-      })
+      this.$emit('on-duplicate-chart-block', this.data.id)
     },
     setLoadFrameFull () {
       const that = this
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index cc65349ea..eadb2d609 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -68,10 +68,16 @@
   line-height: 20px;
 }
 .nz-chart-dropdown {
+  position: absolute;
+  top: 30px;
+  left: calc(100% - 110px);
+  transform-origin: center top;
+  z-index: 1000;
+  width: 110px;
   li {
     padding-left:15px !important;
     padding-right:0px !important;
-    width:140px;
+    width:94px;
     text-align: left;
     i {
       margin-right: 10px;
@@ -83,7 +89,7 @@
   li {
     padding-left:15px !important;
     padding-right:0px !important;
-    width:140px;
+    width:94px;
     text-align: left;
     i {
       margin-right: 10px;
@@ -310,8 +316,13 @@
         overflow: hidden;
         white-space: nowrap;
         .chart-title-icon{
-          display: inline-block;
+          display: inline-flex;
           cursor: pointer;
+          justify-content: space-between;
+          align-items: center;
+          span{
+            margin-left: 20px;
+          }
         }
       }
     }
@@ -499,9 +510,9 @@
     .chartTitle {
       text-align: center;
       width: 100%;
-      line-height: 20px;
-      height: 28px;
-      padding: 1px 3px 0 3px;
+      line-height: 40px;
+      height: 40px;
+      padding: 1px 10px 0 10px;
       box-sizing: border-box;
       .nz-chart-top{
         width:100%;
@@ -514,11 +525,13 @@
       }
       .chart-title {
         font-size: 14px;
-        line-height: 26px;
-        color: #52545c;
+        line-height: 40px;
         display:flex;
-        justify-content:center;
+        justify-content:space-between;
         align-items:center;
+        height: 39px;
+        color: #333333;
+        font-weight: 400;
         .chart-title-text{
           max-width:calc(100% - 20px);
           text-overflow: ellipsis;
@@ -527,9 +540,14 @@
           cursor: pointer;
         }
         .chart-title-icon{
-          display: inline-block;
+          display: inline-flex;
           cursor: pointer;
-          .nz-icon-xialaxuanze{
+          justify-content: space-between;
+          align-items: center;
+          span{
+            margin-left: 20px;
+          }
+          .nz-icon-more1{
             margin-left: 5px;
             font-size: 16px;
           }
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 523a65e67..045cbd7d5 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -36,20 +36,24 @@
           </span>
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
+            <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow"><i :class="{'visible':caretShow,'hidden':!caretShow}" class="nz-icon nz-icon-xialaxuanze  "></i></span>
+              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+                <span  @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
+                  <i class="nz-icon nz-icon-replay"></i>
+                </span>
+                 <span  @click="showAllScreen" class="" :title="$t('dashboard.screen')">
+                  <i class="nz-icon nz-icon-maxview"></i>
+                 </span>
+                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
+              </span>
             </span>
-            <ul :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" :id="'dropdownUl'+chartIndex" slot="dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow"    v-show="dropdownMenuShow" >
-              <li v-show="!isExplore"  @click="refreshChart"  class="el-dropdown-menu__item">
-                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
-              <li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`" v-show="!isExplore">
-                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
-              <li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`" v-show="!isExplore">
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
+              <li  @click="editChart" class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
+              <li  @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
                 <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  @click="showAllScreen" class="el-dropdown-menu__item">
-                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
-              <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`" v-show="!isExplore">
+              <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
                 <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
             </ul>
           </el-dropdown>
@@ -1470,31 +1474,7 @@ export default {
     },
     duplicate () {
       this.dropdownMenuShow = false
-      this.$confirm(this.$t('tip.confirmDuplicate'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'info'
-      }).then(() => {
-        const param = { id: this.data.id }
-        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t('tip.duplicateSuccess')
-            })
-            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
-          } else {
-            if (response.msg) {
-              this.$message.error(response.msg)
-            } else if (response.error) {
-              this.$message.error(response.error)
-            } else {
-              this.$message.error(response)
-            }
-          }
-        })
-      })
+      this.$emit('on-duplicate-chart-block', this.data.id)
     },
     dateChange (time) {
       this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
diff --git a/nezha-fronted/src/components/charts/text-chart.vue b/nezha-fronted/src/components/charts/text-chart.vue
index a5bdbba85..beba1f239 100644
--- a/nezha-fronted/src/components/charts/text-chart.vue
+++ b/nezha-fronted/src/components/charts/text-chart.vue
@@ -10,19 +10,23 @@
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
+            <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze  "  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+                <span  @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
+                  <i class="nz-icon nz-icon-replay"></i>
+                </span>
+                 <span  @click="showAllScreen" class="" :title="$t('dashboard.screen')">
+                  <i class="nz-icon nz-icon-maxview"></i>
+                 </span>
+                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
+              </span>
             </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
-              <li  @click="refreshChart" class="el-dropdown-menu__item">
-                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
-              <li  @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
-                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
+              <li  @click="editChart" class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
               <li  @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
                 <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  @click="showAllScreen" class="el-dropdown-menu__item">
-                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
               <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
                 <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
             </ul>
@@ -172,31 +176,7 @@ export default {
     },
     duplicate () {
       this.dropdownMenuShow = false
-      this.$confirm(this.$t('tip.confirmDuplicate'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'info'
-      }).then(() => {
-        const param = { id: this.data.id }
-        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t('tip.duplicateSuccess')
-            })
-            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
-          } else {
-            if (response.msg) {
-              this.$message.error(response.msg)
-            } else if (response.error) {
-              this.$message.error(response.error)
-            } else {
-              this.$message.error(response)
-            }
-          }
-        })
-      })
+      this.$emit('on-duplicate-chart-block', this.data.id)
     },
     // 全屏查看
     showAllScreen () {
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index d92503089..e59cf7e1c 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -220,7 +220,7 @@
           <!--type unit end-->
 
           <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="half-form-item" prop="span">
-            <el-select class="right-box-row-with-btn" :disabled="isGroup"  placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span">
+            <el-select class="right-box-row-with-btn" :disabled="editChart.type === 'group'"  placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span">
               <el-option :key="item" :label="'span-' + item" :value="item" v-for="item in spanList">
                 <span class="panel-dropdown-label-txt" > span-{{item}}</span>
               </el-option>
@@ -232,7 +232,7 @@
               id="chart-box-height"
               :fetch-suggestions="querySearch"
               @select="handleSelect"
-              :disabled="isGroup"
+              :disabled="editChart.type === 'group'"
               placeholder=""
               popper-class="popper-z-index no-style-class"
               size="mini"
@@ -507,7 +507,6 @@ export default {
       isUrl: false,
       isSingleStat: false,
       isAlert: false,
-      isGroup: false,
       rules: {
         panelName: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
@@ -875,14 +874,6 @@ export default {
           chartParams.groupId = -1
         }
         delete chartParams.panel
-        if (chartParams.type === 'group') {
-          chartParams.elements = [{
-            expression: 'Hadoop_DataNode_BlockChecksumOpNumOps',
-            id: '',
-            legend: '',
-            type: 'expert'
-          }]
-        }
         this.$post('visual/panel/chart', chartParams).then(response => {
           if (response.code === 200) {
             this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -1208,31 +1199,26 @@ export default {
       this.isUrl = true
       this.isSingleStat = false
       this.isAlert = false
-      this.isGroup = false
     },
     setIsSingleStat () {
       this.isUrl = false
       this.isSingleStat = true
       this.isAlert = false
-      this.isGroup = false
     },
     setIsAlertList () {
       this.isAlert = true
       this.isUrl = false
       this.isSingleStat = false
-      this.isGroup = false
     },
     setIsOtherChart () {
       this.isSingleStat = false
       this.isUrl = false
       this.isAlert = false
-      this.isGroup = false
     },
     setIsGroup () {
       this.isSingleStat = false
       this.isUrl = false
       this.isAlert = false
-      this.isGroup = true
     },
     // 编辑chart时使用, set_tdata
     editData (data, panelId) {
@@ -1268,6 +1254,8 @@ export default {
         // this.elements=[1];
       } else if (this.editChart.type === 'singleStat') {
         this.setIsSingleStat()
+      } else if (this.editChart.type === 'group') {
+        this.setIsGroup()
       } else {
         if ((this.editChart.type === 'line' || this.editChart.type === 'bar' || this.editChart.type === 'stackArea' || this.editChart.type === 'singleStat') && data.param) {
           this.editChart.param.threshold = data.param.threshold
@@ -1722,6 +1710,8 @@ export default {
             this.$set(this.editChart.param, 'valueMapping', { type: 'value', mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }] })
             this.showPicker.push({ bac: false, text: false })
           }
+        } else if (n.type === 'group') {
+          this.setIsGroup()
         } else {
           this.setIsOtherChart()
           n.param && !n.param.legendValue && this.$set(this.editChart.param, 'legendValue', { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' })
@@ -1740,7 +1730,7 @@ export default {
             })
           }
         })
-        if (n.id) {
+        if (n.id || n.name) {
           this.editData(this.editChart, this.showPanel.id)
         } else {
           this.createData(this.showPanel.id, '', n.unit)
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 7990b6b89..e5e9cd6c9 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -15,7 +15,7 @@
 
                 <template slot-scope="{ node, data }">
                   <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">
-                    <i class="nz-icon nz-icon-moban"></i>
+                    <i class="nz-icon nz-icon-template2"></i>
                     {{data.label}}
                   </div>
                 </template>
@@ -50,7 +50,7 @@
 
                   <template slot-scope="{ node, data }">
                     <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">
-                      <i class="nz-icon nz-icon-moban"></i>
+                      <i class="nz-icon nz-icon-template2"></i>
                       {{data.label}}
                     </div>
                   </template>
@@ -651,11 +651,11 @@ export default {
     padding: 0 10px 0 25px;
     position: relative;
   }
-  .nz-cascade .nz-icon-moban {
+  .nz-cascade .nz-icon-template2 {
     display: none;
   }
 
-  .nz-cascade-temp .nz-icon-moban{
+  .nz-cascade-temp .nz-icon-template2{
     display: inline-block;
     position: absolute;
     left: 5px;