diff --git a/nezha-fronted/src/components/chart/chart/chartGroup.vue b/nezha-fronted/src/components/chart/chart/chartGroup.vue
index 922ffa0dd..f803437bc 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: {
@@ -54,6 +55,7 @@ export default {
       handler (n) {
         console.log(n)
         this.$nextTick(() => {
+          console.log(this.from)
           this.dataList = JSON.parse(JSON.stringify(n))
         })
       }
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index 617d934fd..f851dbb37 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 +( from !== fromRoute.panel ? 36 : 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: {
@@ -270,6 +272,7 @@ export default {
   },
   mounted () {
     this.init()
+    console.log(this.from,'chartList')
     if (!this.isGroup) {
       bus.$on('groupMove', this.changeGroupHeight)
       this.$store.commit('setChartListId', `chartList${this.timestamp}`)
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 417909a3b..0ab8bc25d 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -18,6 +18,7 @@
       :chart-data="chartData"
       :chart-info="chartInfo"
       :panelLock="panelLock"
+      :from="from"
       :is-fullscreen="isFullscreen"
       :loading="loading"
       v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse"
@@ -46,7 +47,8 @@ export default {
     timeRange: Array, // 时间范围
     isFullscreen: Boolean,
     panelLock: Boolean,
-    chartDetailInfo: Object
+    chartDetailInfo: Object,
+    from: String
   },
   data () {
     return {
@@ -93,22 +95,23 @@ export default {
       this.query(elements, startTime, endTime, step)
     },
     query (elements, startTime, endTime, step) {
+      console.log(this.from, this.chartInfo.datasource,this.chartInfo.type, elements, startTime, endTime, step)
       try {
         switch (this.chartInfo.datasource) {
-          case 'metrics': {
+          case 'metrics':
+          case 'logs': {
             if (this.chartInfo.type === 'assetInfo') {
               this.$get('asset/asset/' + this.chartDetailInfo.id).then(res => {
                 this.chartData = res.data
               })
+              break
             }
             if (this.chartInfo.type === 'endpointInfo') {
               this.$get('monitor/endpoint/' + this.chartDetailInfo.id).then(res => {
                 this.chartData = res.data
               })
+              break
             }
-            break
-          }
-          case 'logs': {
             let urlPre = ''
             if (this.chartInfo.datasource === 'metrics') {
               urlPre += '/prom'
@@ -293,6 +296,7 @@ export default {
   },
   mounted () {
     this.getChartData()
+    console.log(this.from,this.chartInfo.type)
   }
 }
 </script>
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..7802ec6a1 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -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,26 @@ 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
+      }
+      console.log(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 +476,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 +642,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 +690,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/login.vue b/nezha-fronted/src/components/common/login.vue
index 930b56f4e..2cf2c5af5 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 => {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 9bcad0425..2551b3160 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>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index e519f26ae..4d23a3cce 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,