diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index ce063c629..6e7a7fb91 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -4071,7 +4071,7 @@
     },
     "clipboard": {
       "version": "2.0.11",
-      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
       "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
       "requires": {
         "good-listener": "^1.2.2",
@@ -6221,7 +6221,7 @@
     },
     "delegate": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
       "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
     },
     "delegates": {
@@ -8548,7 +8548,7 @@
     },
     "good-listener": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
       "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
       "requires": {
         "delegate": "^3.1.2"
@@ -16536,7 +16536,7 @@
     },
     "select": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
       "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
     },
     "select-hose": {
@@ -18020,7 +18020,7 @@
     },
     "tiny-emitter": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
     },
     "tinycolor2": {
@@ -18719,7 +18719,7 @@
     },
     "vue-clipboard2": {
       "version": "0.3.3",
-      "resolved": "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
       "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
       "requires": {
         "clipboard": "^2.0.0"
diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index d216d605d..34bec2381 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -598,3 +598,21 @@
 .hiddenItem{
   box-shadow: $--chart-shadow;
 }
+.mapboxgl-control-container{
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  summary{
+    display: none;
+  }
+  .mapboxgl-ctrl-attrib-inner{
+    color: hsla(0,0%,69.8%,.77) !important;
+    background: unset;
+    a {
+      color: hsla(0,0%,69.8%,.77) !important;
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+}
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index b8b04ed2d..c95da25e3 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -48,128 +48,146 @@
             <div class="form__sub-title" style="margin-bottom:0px">
               <span>{{$t('dashboard.panel.variables')}}</span>
             </div>
-            <el-row
-              :key="index"
-              v-for="(item,index) of editPanel.param.variables"
-            >
-              <div class="variable-title">
-                <span class="variable-title-left">
-                  <i class="nz-icon nz-icon-arrow-down" :class="item.collapse?'is-active':''" @click.stop="dropVariable(index,item)"></i>
-                  <span v-show="item.collapse">{{item.name}}</span>
-                </span>
-                <span style="display:flex;align-items:center">
-                  <span @click="showVariable(index,item)" class="nz-icon-minus-medium" style="margin-right: 6px;padding-left: 10px">
-                    <i v-if="item.show" class="nz-icon nz-icon-mimakejian" :title="$t('overall.visible')"></i>
-                    <i v-else class="nz-icon nz-icon-mimabukejian" :title="$t('overall.invisible')"></i>
+            <draggable
+              v-model="editPanel.param.variables"
+              :scroll-sensitivity="150"
+              :options="{
+                dragClass:'drag-columns-class',
+                fallbackClass:'fallback-class',
+                forceFallback:true,
+                ghostClass:'chart-ghost',
+                chosenClass:'choose-class',
+                scroll:true,
+                filter: '.drag-disabled',
+                animation: 150,
+                handle: '.drag-sort'
+              }">
+              <el-row
+                v-for="(item,index) of editPanel.param.variables"
+                :key="item.uid"
+              >
+                <div class="variable-title">
+                  <span class="variable-title-left">
+                    <i class="nz-icon nz-icon-arrow-down" :class="item.collapse?'is-active':''" @click.stop="dropVariable(index,item)"></i>
+                    <span v-show="item.collapse">{{item.name}}</span>
                   </span>
-                  <span @click="addVariable()" style="margin-right: 6px" :title="$t('tip.add')">
-                    <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                  <span style="display:flex;align-items:center">
+                    <span @click="showVariable(index,item)" class="nz-icon-minus-medium" style="margin-right: 6px;padding-left: 10px">
+                      <i v-if="item.show" class="nz-icon nz-icon-mimakejian" :title="$t('overall.visible')"></i>
+                      <i v-else class="nz-icon nz-icon-mimabukejian" :title="$t('overall.invisible')"></i>
+                    </span>
+                    <span @click="addVariable()" style="margin-right: 6px" :title="$t('tip.add')">
+                      <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                    </span>
+                    <span @click="copyVariable(item)" style="margin-right: 6px" :title="$t('overall.duplicate')">
+                      <i  class="nz-icon nz-icon-override"></i>
+                    </span>
+                    <span @click="removeVariable(index)" class="nz-icon-minus-medium" style="margin-right: 6px" :title="$t('overall.delete')">
+                      <i  class="nz-icon nz-icon-minus"></i>
+                    </span>
+                    <span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
+                      <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
+                    </span>
                   </span>
-                  <span @click="copyVariable(item)" style="margin-right: 6px" :title="$t('overall.duplicate')">
-                    <i  class="nz-icon nz-icon-override"></i>
-                  </span>
-                  <span @click="removeVariable(index)" class="nz-icon-minus-medium" style="margin-right: 6px" :title="$t('overall.delete')">
-                    <i  class="nz-icon nz-icon-minus"></i>
-                  </span>
-                </span>
-              </div>
-              <transition name="el-zoom-in-top">
-                <div class="form-items--half-width-group" v-if="!item.collapse" style="margin-top: 16px">
-                  <!-- Name -->
-                  <el-form-item class="form-item--half-width" :label='$t("overall.name")' :prop="'param.variables.' + index + '.name'"
-                    :rules="[
-                    { required: true, message: $t('validate.required'), trigger: 'blur'},
-                    { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: $t('dashboard.panel.matchRegex'), trigger: 'blur'},
-                    { validator: variableValidator,trigger: 'blur'},
-                    ]"
-                  >
-                    <el-input v-model="item.name" :placeholder="$t('overall.placeHolder')" size="small"/>
-                  </el-form-item>
-                  <!-- Type -->
-                  <el-form-item class="form-item--half-width" :label='$t("overall.type")' :prop="'param.variables.' + index + '.type'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}">
-                    <el-select
-                      v-model="item.type"
-                      :placeholder="$t('overall.placeHolder')"
-                      size="small"
-                      @change="variableTypeChange(index)"
-                      >
-                      <el-option label="Query" value="query"></el-option>
-                      <el-option label="Custom" value="custom"></el-option>
-                    </el-select>
-                  </el-form-item>
-                  <!-- Query expression -->
-                  <el-form-item class="query-expression" v-if="item.type==='query'" :prop="'param.variables.' + index + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="expression" style="width: 100%;" >
-                    <div slot="label">
-                      <span>{{$t('dashboard.panel.queryExpression')}}</span>
-                      <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside">
-                        <table class="query-variable-table" width="640" cellspacing="5">
-                          <thead>
-                            <th>{{$t('overall.name')}}</th>
-                            <th>{{$t('overall.remark')}}</th>
-                          </thead>
-                          <tbody>
-                            <tr v-for="item in queryVariableList" :key="item.name">
-                              <td width="200">{{item.name}}</td>
-                              <td>{{item.description}}</td>
-                            </tr>
-                          </tbody>
-                        </table>
-                        <span slot="reference">
-                          <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
-                        </span>
-                      </el-popover>
-                    </div>
-                    <el-input v-model="item.expression" placeholder="labels_names()" size="small"/>
-                  </el-form-item>
-                  <!-- Regex -->
-                  <el-form-item v-if="item.type==='query'" :label="$t('dashboard.panel.regex')" :prop="'param.variables.' + index + '.regex'" key="regex" style="width: 100%;" >
-                    <el-input v-model="item.regex" placeholder="/.*-(?<text>.*)-(?<value>.*)-.*/" size="small"/>
-                  </el-form-item>
-                  <!-- Custom values -->
-                  <el-form-item v-if="item.type==='custom'" :label="$t('dashboard.panel.customValues')" :prop="'param.variables.' + index + '.customOptions'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="customOptions" style="width: 100%;" >
-                    <el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small"/>
-                  </el-form-item>
-                  <!-- Multi-value -->
-                  <el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.multi'" style="margin-bottom: 0px">
-                    <div slot="label">
-                      <span>{{$t('dashboard.panel.multi')}}</span>
-                      <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside multiTip">
-                        <span>{{$t('dashboard.panel.multiTip')}}</span>
-                        <span slot="reference">
-                          <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
-                        </span>
-                      </el-popover>
-                    </div>
-                    <el-select
-                      v-model="item.multi"
-                      size="small"
-                      >
-                      <el-option :label="$t('overall.enabled')" :value="true"></el-option>
-                      <el-option :label="$t('overall.disabled')" :value="false"></el-option>
-                    </el-select>
-                  </el-form-item>
-                  <!-- All option -->
-                  <el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.allOption'" style="margin-bottom: 0px">
-                    <div slot="label">
-                      <span>{{$t('dashboard.panel.allOption')}}</span>
-                      <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside allOptionTip">
-                        <span>{{$t('dashboard.panel.allOptionTip')}}</span>
-                        <span slot="reference">
-                          <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
-                        </span>
-                      </el-popover>
-                    </div>
-                    <el-select
-                      v-model="item.allOption"
-                      size="small"
-                      >
-                      <el-option :label="$t('overall.enabled')" :value="true"></el-option>
-                      <el-option :label="$t('overall.disabled')" :value="false"></el-option>
-                    </el-select>
-                  </el-form-item>
                 </div>
-              </transition>
-            </el-row>
+                <transition name="el-zoom-in-top">
+                  <div class="form-items--half-width-group" v-if="!item.collapse" style="margin-top: 16px">
+                    <!-- Name -->
+                    <el-form-item class="form-item--half-width" :label='$t("overall.name")' :prop="'param.variables.' + index + '.name'"
+                      :rules="[
+                      { required: true, message: $t('validate.required'), trigger: 'blur'},
+                      { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: $t('dashboard.panel.matchRegex'), trigger: 'blur'},
+                      { validator: variableValidator,trigger: 'blur'},
+                      ]"
+                    >
+                      <el-input v-model="item.name" :placeholder="$t('overall.placeHolder')" size="small"/>
+                    </el-form-item>
+                    <!-- Type -->
+                    <el-form-item class="form-item--half-width" :label='$t("overall.type")' :prop="'param.variables.' + index + '.type'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}">
+                      <el-select
+                        v-model="item.type"
+                        :placeholder="$t('overall.placeHolder')"
+                        size="small"
+                        @change="variableTypeChange(index)"
+                        >
+                        <el-option label="Query" value="query"></el-option>
+                        <el-option label="Custom" value="custom"></el-option>
+                      </el-select>
+                    </el-form-item>
+                    <!-- Query expression -->
+                    <el-form-item class="query-expression" v-if="item.type==='query'" :prop="'param.variables.' + index + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="expression" style="width: 100%;" >
+                      <div slot="label">
+                        <span>{{$t('dashboard.panel.queryExpression')}}</span>
+                        <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside">
+                          <table class="query-variable-table" width="640" cellspacing="5">
+                            <thead>
+                              <th>{{$t('overall.name')}}</th>
+                              <th>{{$t('overall.remark')}}</th>
+                            </thead>
+                            <tbody>
+                              <tr v-for="item in queryVariableList" :key="item.name">
+                                <td width="200">{{item.name}}</td>
+                                <td>{{item.description}}</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <span slot="reference">
+                            <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                          </span>
+                        </el-popover>
+                      </div>
+                      <el-input v-model="item.expression" placeholder="labels_names()" size="small"/>
+                    </el-form-item>
+                    <!-- Regex -->
+                    <el-form-item v-if="item.type==='query'" :label="$t('dashboard.panel.regex')" :prop="'param.variables.' + index + '.regex'" key="regex" style="width: 100%;" >
+                      <el-input v-model="item.regex" placeholder="/.*-(?<text>.*)-(?<value>.*)-.*/" size="small"/>
+                    </el-form-item>
+                    <!-- Custom values -->
+                    <el-form-item v-if="item.type==='custom'" :label="$t('dashboard.panel.customValues')" :prop="'param.variables.' + index + '.customOptions'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="customOptions" style="width: 100%;" >
+                      <el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small"/>
+                    </el-form-item>
+                    <!-- Multi-value -->
+                    <el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.multi'" style="margin-bottom: 0px">
+                      <div slot="label">
+                        <span>{{$t('dashboard.panel.multi')}}</span>
+                        <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside multiTip">
+                          <span>{{$t('dashboard.panel.multiTip')}}</span>
+                          <span slot="reference">
+                            <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                          </span>
+                        </el-popover>
+                      </div>
+                      <el-select
+                        v-model="item.multi"
+                        size="small"
+                        >
+                        <el-option :label="$t('overall.enabled')" :value="true"></el-option>
+                        <el-option :label="$t('overall.disabled')" :value="false"></el-option>
+                      </el-select>
+                    </el-form-item>
+                    <!-- All option -->
+                    <el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.allOption'" style="margin-bottom: 0px">
+                      <div slot="label">
+                        <span>{{$t('dashboard.panel.allOption')}}</span>
+                        <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside allOptionTip">
+                          <span>{{$t('dashboard.panel.allOptionTip')}}</span>
+                          <span slot="reference">
+                            <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                          </span>
+                        </el-popover>
+                      </div>
+                      <el-select
+                        v-model="item.allOption"
+                        size="small"
+                        >
+                        <el-option :label="$t('overall.enabled')" :value="true"></el-option>
+                        <el-option :label="$t('overall.disabled')" :value="false"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                </transition>
+              </el-row>
+            </draggable>
             <div @click="addVariable()" class="add-variable">{{$t('dashboard.panel.addVariable')}}</div>
           </div>
 
@@ -317,8 +335,13 @@
 import editRigthBox from '../mixin/editRigthBox'
 import bus from '@/libs/bus'
 import { arrLength, datePicker } from '@/components/common/js/validate'
+import draggable from 'vuedraggable'
+import { getUUID } from '@/components/common/js/common'
 export default {
   name: 'panelBox',
+  components: {
+    draggable
+  },
   props: {
     obj: {
       type: Object
@@ -453,9 +476,6 @@ export default {
     // 展开 折叠变量
     dropVariable (index, item) {
       this.$set(this.editPanel.param.variables[index], 'collapse', !item.collapse)
-      this.$refs.form.clearValidate('param.variables.' + index + '.name')
-      this.$refs.form.clearValidate('param.variables.' + index + '.customOptions')
-      this.$refs.form.clearValidate('param.variables.' + index + '.expression')
     },
     // 显示 隐藏变量
     showVariable (index, item) {
@@ -467,7 +487,9 @@ export default {
         show: true,
         type: 'query',
         multi: false,
-        allOption: false
+        allOption: false,
+        collapse: false,
+        uid: getUUID()
       }
       this.editPanel.param.variables.push(temp)
     },
@@ -476,6 +498,7 @@ export default {
       const temp = JSON.parse(JSON.stringify(item))
       temp.name = temp.name ? temp.name + '_copy' : ''
       temp.collapse = false
+      temp.uid = getUUID()
       this.editPanel.param.variables.push(temp)
     },
     // 删除变量
@@ -510,10 +533,11 @@ export default {
 
     /* 保存 */
     save () {
-      // 保存时把collapse属性删除 再传入后台
+      // 保存时把无用属性删除 再传入后台
       const variables = this.editPanel.param.variables.map((item) => {
         const temp = JSON.parse(JSON.stringify(item))
         delete temp.collapse
+        delete temp.uid
         return temp
       })
       const params = {
@@ -624,10 +648,14 @@ export default {
       handler (n, o) {
         this.isEdit = true
         this.editPanel = JSON.parse(JSON.stringify(n))
-        // 如果是空数组 则添加一条变量数据
+        // 若没有数据 默认设置为空数组
         if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) {
           const temp = []
           this.$set(this.editPanel.param, 'variables', temp)
+        } else {
+          this.editPanel.param.variables.forEach(item => {
+            item.uid = getUUID()
+          })
         }
       }
     },