diff --git a/nezha-fronted/src/assets/css/components/charts/chart.scss b/nezha-fronted/src/assets/css/components/charts/chart.scss
index 83e3873d5..a18f52f38 100644
--- a/nezha-fronted/src/assets/css/components/charts/chart.scss
+++ b/nezha-fronted/src/assets/css/components/charts/chart.scss
@@ -115,8 +115,8 @@
 }
 .panel-info-corner .fa {
   position: relative;
-  top: -6px;
-  left: -6px;
+  top: -10px;
+  left: 0px;
   font-size: 75%;
   z-index: 3;
 }
diff --git a/nezha-fronted/src/components/chart/chart-list-grid.vue b/nezha-fronted/src/components/chart/chart-list-grid.vue
index b75cd7633..e48a667ed 100644
--- a/nezha-fronted/src/components/chart/chart-list-grid.vue
+++ b/nezha-fronted/src/components/chart/chart-list-grid.vue
@@ -305,7 +305,6 @@ export default {
   },
   methods: {
     drag: function (e) {
-      console.log(e)
       const parentRect = document.getElementById('content').getBoundingClientRect()
       let mouseInGrid = false
       if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
@@ -367,17 +366,14 @@ export default {
     moveEvent: function (i, newX, newY) {
       const msg = 'MOVE i=' + i + ', X=' + newX + ', Y=' + newY
       this.eventLog.push(msg)
-      console.log(msg)
     },
     movedEvent: function (i, newX, newY) {
       const msg = 'MOVED i=' + i + ', X=' + newX + ', Y=' + newY
       this.eventLog.push(msg)
-      console.log(msg)
     },
     resizeEvent: function (i, newH, newW, newHPx, newWPx) {
       const msg = 'RESIZE i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx
       this.eventLog.push(msg)
-      console.log(msg, this.$refs['editChart' + i])
       setTimeout(() => {
         this.$refs['editChart' + i][0].chartResize()
       })
@@ -385,7 +381,6 @@ export default {
     resizedEvent: function (i, newX, newY, newHPx, newWPx) {
       const msg = 'RESIZED i=' + i + ', X=' + newX + ', Y=' + newY + ', H(px)=' + newHPx + ', W(px)=' + newWPx
       this.eventLog.push(msg)
-      console.log(msg)
       setTimeout(() => {
         this.$refs['editChart' + i][0].chartResize()
       }, 50)
@@ -393,27 +388,21 @@ export default {
     containerResizedEvent: function (i, newH, newW, newHPx, newWPx) {
       const msg = 'CONTAINER RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx
       this.eventLog.push(msg)
-      console.log(msg)
     },
     layoutCreatedEvent: function (newLayout) {
       this.eventLog.push('Created layout')
-      console.log('Created layout: ', newLayout)
     },
     layoutBeforeMountEvent: function (newLayout) {
       this.eventLog.push('beforeMount layout')
-      console.log('beforeMount layout: ', newLayout)
     },
     layoutMountedEvent: function (newLayout) {
       this.eventLog.push('Mounted layout')
-      console.log('Mounted layout: ', newLayout)
     },
     layoutReadyEvent: function (newLayout) {
       this.eventLog.push('Ready layout')
-      console.log('Ready layout: ', newLayout)
     },
     layoutUpdatedEvent: function (newLayout) {
       this.eventLog.push('Updated layout')
-      console.log('Updated layout: ', newLayout)
     },
     dropmenuChange (id, show) {
       if (show) {
diff --git a/nezha-fronted/src/components/chart/chart-list-group-grid.vue b/nezha-fronted/src/components/chart/chart-list-group-grid.vue
index 56cbec328..ba41ba79c 100644
--- a/nezha-fronted/src/components/chart/chart-list-group-grid.vue
+++ b/nezha-fronted/src/components/chart/chart-list-group-grid.vue
@@ -408,47 +408,37 @@ export default {
     moveEvent: function (i, newX, newY) {
       const msg = 'MOVE i=' + i + ', X=' + newX + ', Y=' + newY
       this.eventLog.push(msg)
-      console.log(msg)
     },
     movedEvent: function (i, newX, newY) {
       const msg = 'MOVED i=' + i + ', X=' + newX + ', Y=' + newY
       this.eventLog.push(msg)
-      console.log(msg)
     },
     resizeEvent: function (i, newH, newW, newHPx, newWPx) {
       const msg = 'RESIZE i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx
       this.eventLog.push(msg)
-      console.log(msg)
     },
     resizedEvent: function (i, newX, newY, newHPx, newWPx) {
       const msg = 'RESIZED i=' + i + ', X=' + newX + ', Y=' + newY + ', H(px)=' + newHPx + ', W(px)=' + newWPx
       this.eventLog.push(msg)
-      console.log(msg)
     },
     containerResizedEvent: function (i, newH, newW, newHPx, newWPx) {
       const msg = 'CONTAINER RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx
       this.eventLog.push(msg)
-      console.log(msg)
     },
     layoutCreatedEvent: function (newLayout) {
       this.eventLog.push('Created layout')
-      console.log('Created layout: ', newLayout)
     },
     layoutBeforeMountEvent: function (newLayout) {
       this.eventLog.push('beforeMount layout')
-      console.log('beforeMount layout: ', newLayout)
     },
     layoutMountedEvent: function (newLayout) {
       this.eventLog.push('Mounted layout')
-      console.log('Mounted layout: ', newLayout)
     },
     layoutReadyEvent: function (newLayout) {
       this.eventLog.push('Ready layout')
-      console.log('Ready layout: ', newLayout)
     },
     layoutUpdatedEvent: function (newLayout) {
       this.eventLog.push('Updated layout')
-      console.log('Updated layout: ', newLayout)
     },
     tempDomInit () {
       const span = document.querySelector('.temp-dom')
diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue
index 90a146ef5..fa79c4b96 100644
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -1,7 +1,7 @@
 <template>
   <div :style="chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="chartInfo.param.showHeader ? '' : 'no-header'" >
     <loading :loading="loading"></loading>
-    <chart-no-data v-if="isNoData"></chart-no-data>
+    <chart-no-data v-if="isNoData || isError"></chart-no-data>
     <template v-else>
       <chart-time-series
         v-if="isTimeSeries(chartInfo.type)"
@@ -125,6 +125,7 @@
       ></chart-table>
       <chart-group
         :ref="'chart' + chartInfo.id"
+        :from="from"
         v-if="isGroup(chartInfo.type)"
         :panelLock="panelLock"
         :chart-data="chartData"
@@ -192,7 +193,9 @@ export default {
     customChartOption: Object, // 需要自定义echarts的option时传入，非必须；传入该值时仍需传对应格式的chartData
     isFullscreen: Boolean,
     loading: Boolean,
-    panelLock: Boolean
+    panelLock: Boolean,
+    from: String,
+    isError: Boolean
   },
   computed: {
     isNoData () {
@@ -224,7 +227,6 @@ export default {
     isMap,
     isTable,
     resize () {
-      console.log(this.$refs['chart' + this.chartInfo.id])
       this.$refs['chart' + this.chartInfo.id].resize()
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartGroup.vue b/nezha-fronted/src/components/chart/chart/chartGroup.vue
index 922ffa0dd..dc8f0e4f4 100644
--- a/nezha-fronted/src/components/chart/chart/chartGroup.vue
+++ b/nezha-fronted/src/components/chart/chart/chartGroup.vue
@@ -6,7 +6,7 @@
       :class="{'show-top':showTopBtn}"
       :data-list="dataList"
       :nowTimeType="nowTimeType"
-      :from="fromRoute.panel"
+      :from="from"
       :panel-lock="panelLock"
       :isGroup="true"
       :time-range="searchTime"
@@ -25,6 +25,7 @@ export default {
   name: 'chart-group',
   props: {
     panelLock: Boolean,
+    from: String
   },
   mixins: [chartMixin, chartFormat],
   computed: {
@@ -52,7 +53,6 @@ export default {
     chartData: {
       immediate: true,
       handler (n) {
-        console.log(n)
         this.$nextTick(() => {
           this.dataList = JSON.parse(JSON.stringify(n))
         })
diff --git a/nezha-fronted/src/components/chart/chart/chartMap.vue b/nezha-fronted/src/components/chart/chart/chartMap.vue
index 7adfd1d93..70f3bdf89 100644
--- a/nezha-fronted/src/components/chart/chart/chartMap.vue
+++ b/nezha-fronted/src/components/chart/chart/chartMap.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="overview">
     <div class="content-col-content">
-      <div id="map" style="height: 100%; width: 100%"></div>
+      <div :id="'map' + chartInfo.id" style="height: 100%; width: 100%" :style="theme=='light'? '': ' filter: invert(1) hue-rotate(0.5turn);opacity: 0.75;'"></div>
     </div>
     <!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪-->
     <div :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}" class="my-pane"></div>
@@ -32,7 +32,8 @@ export default {
       tooltip: {
         x: 0,
         y: 0
-      }
+      },
+      theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`)
     }
   },
   mounted () {
@@ -64,7 +65,8 @@ export default {
               this.map.remove()
               this.map = null
             }
-            const map = L.map('map', {
+            const mapId = 'map' + this.chartInfo.id
+            const map = L.map(mapId, {
               minZoom: mapConfig.minZoom,
               maxZoom: mapConfig.maxZoom,
               attributionControl: false,
@@ -149,7 +151,6 @@ export default {
               }
               shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
               shadowMarker.on('mouseover', (param) => {
-                console.log(param)
                 const point = param.containerPoint
                 const event = param.originalEvent
                 const boxWidth = window.innerWidth / 2
@@ -218,9 +219,12 @@ export default {
         }, 100); */
     },
     resize () {
-      console.log(this.map);
       this.initMap()
     }
+  },
+  beforeDestroy () {
+    // this.map.remove()
+    this.map = null
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue
index 6d1bce840..407aa3399 100644
--- a/nezha-fronted/src/components/chart/chart/chartStat.vue
+++ b/nezha-fronted/src/components/chart/chart/chartStat.vue
@@ -74,7 +74,6 @@ export default {
             stat.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(stat.value, null, -1, 2)
             stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             this.statData.push(stat)
-            console.log(this.statData)
             colorIndex++
           })
         })
diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
index c128b2135..9a53d5768 100644
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -57,7 +57,6 @@ export default {
   },
   methods: {
     initChart () {
-      console.log(this.chartInfo, this.chartData)
       this.columns = this.chartInfo.param.columns
       this.chartInfo.param.valueMapping.forEach((item) => {
         if (this.valueMapping[item.column]) {
@@ -68,7 +67,6 @@ export default {
       })
       const data = this.initTableData(this.chartInfo, this.chartData)
       const arr = []
-      console.log(data)
       Object.keys(data).forEach(key => {
         arr.push(data[key])
       })
@@ -80,18 +78,22 @@ export default {
       })
       this.tableData = arr
       this.$refs.dataTable.doLayout()
-      console.log(data)
     },
     initTableData (chartInfo, originalDatas) {
       let colorIndex = 0
       const returnData = {}
       const arr = chartInfo.param.indexs.split(',')
-      console.log(returnData)
       originalDatas.forEach((originalData, expressionIndex) => {
-        const key = chartInfo.elements[expressionIndex].name || expressionIndex
+        let key = expressionIndex
+        if (chartInfo.elements && chartInfo.elements[expressionIndex].name) {
+          key = chartInfo.elements[expressionIndex].name
+        }
+        if (chartInfo.datasource == 'system' && chartInfo.param.datasource[0].name) {
+          key = chartInfo.param.datasource[0].name
+        }
         originalData.forEach((data, dataIndex) => {
           data.$labels = data.metric
-          const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
+          const value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last')
           const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
           // const mapping = this.selectTableMapping(value, chartInfo.param.valueMapping)
           data.$value = value
@@ -128,7 +130,7 @@ export default {
       this.columns.forEach((column) => {
         if (valueMapping[column.title]) {
           obj[column.title + 'mapping'] = ''
-          if (chartInfo.param.enable && this.chartInfo.param.enable.valueMapping) {
+          if (this.chartInfo.param.enable && this.chartInfo.param.enable.valueMapping) {
             valueMapping[column.title].forEach(item => {
               const rowValue = row.display[column.title + 'display']
               if (item.type === 'value') {
diff --git a/nezha-fronted/src/components/chart/chartHeader.vue b/nezha-fronted/src/components/chart/chartHeader.vue
index 12bfce975..ec3bed9b1 100644
--- a/nezha-fronted/src/components/chart/chartHeader.vue
+++ b/nezha-fronted/src/components/chart/chartHeader.vue
@@ -1,5 +1,18 @@
 <template>
   <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header">
+    <span v-if="isError">
+     <el-popover
+       placement="top-start"
+       :close-delay=10
+       trigger="hover"
+       popper-class="chart-error-popper">
+            <div >{{errorText}}</div>
+            <span slot="reference" class="panel-info-corner panel-info-corner--error">
+              <i class="nz-icon nz-icon-warning fa"></i>
+              <span class="panel-info-corner-inner"></span>
+           </span>
+          </el-popover>
+    </span>
     <div class="chart-header__title" v-if="!isGroup">{{chartInfo.name}}</div>
     <div class="chart-header__title" v-else >
       <span @click="groupShow"> <i class="nz-icon" :class="chartInfo.param.collapse ? 'nz-icon-arrow-down': 'nz-icon-arrow-right'"></i></span>
@@ -62,7 +75,12 @@ export default {
     error: {
       type: String,
       default: ''
-    }
+    },
+    isError: {
+      type: Boolean,
+      default: false
+    },
+    chartData: {}
   },
   data () {
     return {
@@ -102,6 +120,17 @@ export default {
     groupShow () {
       this.$emit('groupShow', !this.chartInfo.param.collapse)
     }
+  },
+  watch: {
+    isError: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          console.log(this.chartData)
+          this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
+        }
+      }
+    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index 617d934fd..382b126f4 100644
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -14,7 +14,7 @@
       :vertical-compact="true"
       :useCssTransforms="false"
       :style="{
-        'margin-top':isGroup ? '0' : (-1 * (stepWidth + 12) + 'px')
+        'margin-top':isGroup ? '0' : (-1 * (stepWidth + 14) + 'px')
       }"
     >
       <grid-item
@@ -44,6 +44,7 @@
           :ref="'chart' + item.id"
           @edit-chart="$emit('edit-chart', item)"
           :chart-info="item"
+          :from="from"
           :time-range="timeRange"
           :chart-detail-info="chartDetailInfo"
           @showFullscreen="showFullscreen"
@@ -70,6 +71,7 @@
       <panel-chart
         :ref="'chart-fullscreen' + fullscreen.chartInfo.id"
         :chart-info="fullscreen.chartInfo"
+        :from="from"
         :is-fullscreen="true"
         @groupShow="groupShow"
         :panelLock="panelLock"
@@ -92,13 +94,13 @@ export default {
   name: 'chartList',
   props: {
     // TODO isModel
-    from: { type: String },
     panelId: {},
     chartDetailInfo: Object,
     timeRange: Array, // 时间范围
     panelLock: { type: Boolean, default: true },
     isGroup: { type: Boolean, default: false },
     groupInfo: {},
+    from: String,
     dataList: Array // 看板中所有图表信息
   },
   components: {
@@ -202,7 +204,6 @@ export default {
       // console.log(height,copyList, group, flag)
       // console.log(this.$refs.layout)
       const groupFind = this.copyDataList.find(item => item.id == group.id)
-      console.log(groupFind)
       if (group && groupFind) {
         groupFind.height = groupFind.h = height + this.headerHPadding
         groupFind.children = copyList
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index d29c4b6df..2f40b6b0b 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -45,7 +45,6 @@ export default {
             if (chartInfo.param.stack) { // 堆叠
               s.stack = 'Total'
             }
-            console.log(lodash.isEmpty(chartInfo.param.thresholds))
             if (chartInfo.param.enable && chartInfo.param.enable.legend && !lodash.isEmpty(chartInfo.param.thresholds)) { // 阈值
               s.markLine = {
                 symbol: 'circle',
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 993761707..47b6167be 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -5,6 +5,8 @@
     <chart-header
       v-if="!isFullscreen"
       :is-group="isGroup(chartInfo.type)"
+      :isError="isError"
+      :chartData="chartData"
       :chart-info="chartInfo"
       @edit-chart="$emit('edit-chart', chartInfo)"
       @refresh="refresh"
@@ -18,6 +20,8 @@
       :chart-data="chartData"
       :chart-info="chartInfo"
       :panelLock="panelLock"
+      :from="from"
+      :isError="isError"
       :is-fullscreen="isFullscreen"
       :loading="loading"
       v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse"
@@ -46,12 +50,14 @@ export default {
     timeRange: Array, // 时间范围
     isFullscreen: Boolean,
     panelLock: Boolean,
-    chartDetailInfo: Object
+    chartDetailInfo: Object,
+    from: String
   },
   data () {
     return {
       chartData: [],
-      loading: true
+      loading: true,
+      isError: false
     }
   },
   computed: {
@@ -93,6 +99,7 @@ export default {
       this.query(elements, startTime, endTime, step)
     },
     query (elements, startTime, endTime, step) {
+      this.isError = false
       try {
         switch (this.chartInfo.datasource) {
           case 'metrics':
@@ -128,6 +135,7 @@ export default {
                   chartData.push(r.data.result)
                 } else {
                   chartData.push({ error: r.msg || r.error || r })
+                  this.isError = true
                 }
               })
               this.chartData = chartData
@@ -194,7 +202,6 @@ export default {
               }
             }
             if (this.chartInfo.type === 'group') {
-              console.log(this.chartInfo.children)
               this.chartData = [...this.chartInfo.children]
               this.groupInit()
             }
@@ -263,7 +270,6 @@ export default {
         this.chartInfo.height = height + this.headerHPadding
         this.chartInfo.h = height + this.headerHPadding
       } else {
-        console.log(this.headerH)
         this.chartInfo.height = this.headerH + height
         this.chartInfo.h = this.headerH + height
       }
diff --git a/nezha-fronted/src/components/chart/tempGroup.js b/nezha-fronted/src/components/chart/tempGroup.js
index d5954dd13..f608c0071 100644
--- a/nezha-fronted/src/components/chart/tempGroup.js
+++ b/nezha-fronted/src/components/chart/tempGroup.js
@@ -7,7 +7,7 @@ const group = {
   height: 1,
   updateBy: 1,
   updateAt: '2021-12-13 08:20:04',
-  type: 'groupTemp',
+  type: 'group',
   unit: 2,
   weight: 4,
   param: {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index 0148ac39c..95d2c2ce4 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -95,7 +95,7 @@
         </div>
       </template>
       <!--图表-->
-      <div id="tableList" class="table-list">
+      <div id="tableList" class="table-list" style="padding-top: 0">
         <div id="dashboardScrollbar" ref="dashboardScrollbar" class="table-list-box">
           <div class="box-content" v-loading="chartListLoading">
             <chart-list
@@ -105,7 +105,7 @@
               :class="{'show-top':showTopBtn}"
               :data-list="dataList"
               :nowTimeType="nowTimeType"
-              :from="fromRoute.panel"
+              :from="from"
               :panel-lock="panelLock"
               :time-range="searchTime"
               @edit-chart="editChart"
@@ -120,7 +120,22 @@
       </div>
     </nz-bottom-data-list>
     <transition name="right-box">
-      <chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
+<!--      <chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>-->
+      <chart-right-box
+        v-if="chartRightBoxShow"
+        v-loading="rightBox.loading"
+        ref="addChartModal"
+        :chart="chart"
+        :from="from"
+        :panel-data="panelData"
+        :show-panel="showPanel"
+        @close="closeRightBox"
+        @reload="panelReload"
+        @reloadOnlyPanel="panelReloadOnlyPanel"
+        @delete-chart="delChart"
+        @on-create-success="createSuccess"
+        @on-delete-success="delChartOk"
+      ></chart-right-box>
     </transition>
     <transition name="right-box">
       <chart-temp-box v-if="rightBox.chartTemp.show" :from="from" :obj="chart" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @on-create-success="createSuccess"></chart-temp-box>
@@ -129,7 +144,8 @@
 </template>
 
 <script>
-import chartBox from '../../../page/dashboard/chartBox'
+// import chartBox from '../../../page/dashboard/chartBox'
+import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
 import chartList from '@/components/chart/chartList'
 import bus from '../../../../libs/bus'
 import subDataListMixin from '@/components/common/mixin/subDataList'
@@ -150,6 +166,14 @@ export default {
       default: 'dashboard'
     }
   },
+  computed: {
+    chartRightBoxShow () {
+      return this.$store.getters.getShowRightBox
+    },
+    delChartFlag () {
+      return this.$store.getters.getDelChart
+    }
+  },
   data () {
     return {
       fromRoute,
@@ -237,7 +261,7 @@ export default {
     }
   },
   components: {
-    chartBox,
+    chartRightBox,
     chartList,
     nzBottomDataList,
     topToolMoreOptions,
@@ -256,6 +280,25 @@ export default {
     panelReloadForDel () {
       this.getTableData(this.obj.id)
     },
+    panelReload (clearShowPanel) {
+      this.getTableData(clearShowPanel)
+    },
+    panelReloadOnlyPanel () { // 仅刷新panel数据
+      if (!this.hasButton('panel_view')) {
+        return
+      }
+      this.$get('visual/panel?pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
+          for (let i = 0; i < this.panelData.length; i++) {
+            if (this.panelData[i].id == this.showPanel.id) {
+              this.showPanel = this.panelData[i]
+              break
+            }
+          }
+        }
+      })
+    },
     /* 图表相关操作--start */
     addChart () {
       this.chart = this.newChart()
@@ -275,6 +318,7 @@ export default {
     newChart () {
       return JSON.parse(JSON.stringify(this.blankChart))
     },
+
     // 切换tab
     changeTab (tab) {
       this.$emit('changeTab', tab)
@@ -282,6 +326,8 @@ export default {
     closeRightBox (refresh) {
       this.rightBox.chart.show = false
       this.rightBox.chartTemp.show = false
+      this.chart = {}
+      this.$store.dispatch('clearPanel')
       if (refresh) {
         this.refresh()
         if (this.from === fromRoute.chartTemp) {
@@ -357,19 +403,25 @@ export default {
         const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
         params.start_time = startTimeTmp
         params.end_time = endTimeTmp
+        params.from = this.from
+      }
+      if (this.from !== 'chartTemp') {
+        this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.chartListLoading = false
+            this.dataList = response.data.list.map(item => {
+              return {
+                ...item,
+                hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
+                loaded: false
+              }
+            })
+          }
+        })
+      } else {
+        this.chartListLoading = false
+        this.dataList = this.panelDataList
       }
-      this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.chartListLoading = false
-          this.dataList = response.data.list.map(item => {
-            return {
-              ...item,
-              hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
-              loaded: false
-            }
-          })
-        }
-      })
     },
 
     /* 图表相关操作--end */
@@ -423,11 +475,6 @@ export default {
         if (this.from === this.fromRoute.chartTemp) {
           if (this.obj.type === 'group') {
             this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
-              res.data.list.forEach(item => {
-                if (!item.children) {
-                  item.children = []
-                }
-              })
               this.panelDataList = res.data.list
               if (this.panelDataList.length > 0) {
                 this.showPanel.id = this.filter.panelId = 0
@@ -594,6 +641,26 @@ export default {
           this.$message.error(res.msg)
         }
       })
+    },
+    disposeChart () {
+      const chartInfo = this.$store.getters.getChart
+      const groupId = this.$store.getters.getGroupId
+      const type = this.$store.getters.getType
+      if (type === 'add') {
+        this.addChart()
+      }
+      if (type === 'edit') {
+        this.editChart(chartInfo)
+      }
+      if (type === 'addGroupItem') {
+        this.addGroupItem(groupId)
+      }
+      if (type === 'delete') {
+        this.delChart(chartInfo)
+      }
+      if (type === 'duplicate') {
+        this.editChart(chartInfo, true)
+      }
     }
   },
   mounted () {
@@ -622,7 +689,25 @@ export default {
           this.chartDetailInfo = n
         }, 500)
       }
-    }
+    },
+    chartRightBoxShow: {
+      immediate: false,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.disposeChart()
+        }
+      }
+    },
+    delChartFlag: {
+      immediate: false,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.disposeChart()
+        }
+      }
+    },
   },
   beforeDestroy () {
     document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
diff --git a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
index 730ef55cc..39894e060 100644
--- a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
+++ b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
@@ -244,7 +244,6 @@ export default {
         setTimeout(() => {
           this.hexagonData = JSON.parse(JSON.stringify(this.hexData))
           const box = `#${this.hexagonSvgID}`
-          console.log(box,document.getElementById(this.hexagonSvgID))
           if (!document.getElementById(this.hexagonSvgID)) {
             return
           }
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 14ef68f14..a8cd74bf7 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -819,7 +819,6 @@ export function getMetricTypeValue (queryItem, type) {
     }
     case 'last': {
       const last = copy.sort((x, y) => { return parseFloat(y[0]) - parseFloat(x[0]) })[0][1]
-      console.log(last)
       return last
     }
     case 'first': {
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 930b56f4e..51adf7a78 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -153,9 +153,9 @@ export default {
   methods: {
     ...mapActions(['loginSuccess']),
     login () {
-      // if (this.loading || !this.license.valid || !this.license.token) {
-      //   return
-      // }
+      if (this.loading || !this.license.valid || !this.license.token) {
+        return
+      }
       if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
         this.loading = true
         this.$post('/sys/login', this.loginData).then(res => {
@@ -355,7 +355,7 @@ export default {
     },
     downloadTxt () {
       const element = document.createElement('a')
-      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponentComponent(this.fileContent))
+      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(this.fileContent))
       element.setAttribute('download', 'Nezha recovery codes')
       element.style.display = 'none'
       element.click()
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index d4a6498a7..1ae55f8ac 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -171,7 +171,6 @@ export default {
         }
         delete params.panel
         if (params.type === 'table') {
-          console.log(params.param.tags)
           delete params.param.tags
         }
         if (params.id) { // 修改
@@ -290,7 +289,7 @@ export default {
               valueMapping: true
             },
             datasource: [{
-              name: 'A',
+              name: 'System',
               type: 'asset',
               systemGroup: '',
               systemSelect: '',
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 9bcad0425..08538b615 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -21,7 +21,7 @@
           <el-select
             id="chart-box-type"
             v-model="chartConfig.type"
-            :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
+            :disabled="!!(chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length)"
             :placeholder="$t('el.select.placeholder')"
             popper-class="right-box-select-top prevent-clickoutside"
             size="small"
@@ -30,7 +30,7 @@
             <el-option
               v-for="item in chartTypeList"
               :key="item.id"
-              :disabled="item.id==='group' && chartConfig.isGroup"
+              :disabled="item.id==='group' && !!chartConfig.groupId"
               :label="item.name"
               :value="item.id">
               <span class="panel-dropdown-label-txt" >{{item.name}}</span>
@@ -165,6 +165,18 @@ export default {
         {
           id: 'group',
           name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
+        },
+        {
+          id: 'map',
+          name: this.$t('dashboard.panel.chartForm.typeVal.map.label')
+        },
+        {
+          id: 'carousel',
+          name: this.$t('dashboard.panel.chartForm.typeVal.carousel.label')
+        },
+        {
+          id: 'hexagonFigure',
+          name: this.$t('dashboard.panel.chartForm.typeVal.hexagonFigure.label')
         }
       ]
     }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 35a8ab499..c8b08d00b 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -396,7 +396,6 @@ export default {
       this.chartConfig.param.columns[index].show = !this.chartConfig.param.columns[index].show
     },
     tagsChange (newTags) {
-      console.log(newTags, newTags)
       this.chartConfig.param.tags = newTags
       this.chartConfig.param.indexs = newTags.map(item => item.text).join(',')
       this.change()
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index 049ebf6d2..3fa7341ab 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -7,7 +7,9 @@
       label-position= "top"
       label-width="120px"
     >
-
+      <div class="chart-title chart-title-config">
+        System
+      </div>
       <div class="system-chart-config" v-loading="loading" v-for="(item, index) in chartConfig.param.datasource " :key="index">
         <div class="system-chart-config-left">
           <ul>
@@ -15,7 +17,7 @@
               v-for="(system,index1) in systemData"
               :key="index1"
               class="system-chart-item"
-              :class="item.name === system.system ? 'is-select' : ''"
+              :class="item.type === system.system ? 'is-select' : ''"
               @click="changeSystem(system, index)"
             >{{system.name}}</li>
           </ul>
@@ -64,7 +66,7 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              :label="$t('dashboard.panel.chartForm.result')"
+              :label="$t('dashboard.panel.chartForm.limit')"
               class="form-item--half-width"
               prop="param.limit"
             >
@@ -515,8 +517,8 @@ export default {
               thresholds: true
             },
             datasource: [{
-              name: 'A',
-              type: 'asset',
+              name: 'System',
+              type: '',
               systemGroup: '',
               systemSelect: '',
               group: '',
@@ -543,8 +545,8 @@ export default {
               thresholds: true
             },
             datasource: [{
-              name: 'A',
-              type: 'asset',
+              name: 'System',
+              type: '',
               systemGroup: '',
               systemSelect: '',
               group: '',
@@ -556,6 +558,9 @@ export default {
           }
           break
       }
+      this.chartConfig.param.datasource[0].type = this.systemData[0].name
+      this.groupList = this.systemData[0].group
+      this.selectList = this.systemData[0].select
       this.oldType = type
       this.change()
     },
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index 65a4d71ed..0b6c07ef7 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -1062,7 +1062,6 @@ export default {
     },
     // input框监听是按删除还是回车
     enter (val, e) {
-      console.log(val, e)
       const keyCode = window.event ? e.keyCode : e.which
       if (val == 'ID' && keyCode == 13) {
         const id = /^[0-9]*$/
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index e519f26ae..62715e540 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -157,6 +157,7 @@ import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import { fromRoute } from '@/components/common/js/constants'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
+// import chartData from './testData'
 
 export default {
   name: 'panel',
@@ -515,6 +516,7 @@ export default {
       this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
         if (response.code === 200) {
           this.chartListLoading = false
+          // response = chartData
           this.dataList = response.data.list.map(item => {
             return {
               ...item,