diff --git a/src/views/dataManagement/components/data/device.vue b/src/views/dataManagement/components/data/device.vue
index c742895..94336b0 100644
--- a/src/views/dataManagement/components/data/device.vue
+++ b/src/views/dataManagement/components/data/device.vue
@@ -1,6 +1,7 @@
 <!-- 设备分析  --数据看板 -->
 <script name="deviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -99,6 +100,12 @@
 defineExpose({
   showChart,
 })
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -148,24 +155,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :key="index" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;

diff --git a/src/views/dataManagement/components/data/device.vue b/src/views/dataManagement/components/data/device.vue
index c742895..94336b0 100644
--- a/src/views/dataManagement/components/data/device.vue
+++ b/src/views/dataManagement/components/data/device.vue
@@ -1,6 +1,7 @@
 <!-- 设备分析  --数据看板 -->
 <script name="deviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -99,6 +100,12 @@
 defineExpose({
   showChart,
 })
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -148,24 +155,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :key="index" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/eqptDevice.vue b/src/views/dataManagement/components/data/eqptDevice.vue
index 64b73d5..b3fc7c7 100644
--- a/src/views/dataManagement/components/data/eqptDevice.vue
+++ b/src/views/dataManagement/components/data/eqptDevice.vue
@@ -1,6 +1,7 @@
 <!-- 受检设备分析  --数据看板 -->
 <script name="EqptDeviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -161,6 +162,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -235,24 +243,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal-rank v-if="element.type === 'rank'" :colors="colors" label-position="" :x-axis-data="element.xAxisData" :data="element.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal-rank v-if="item.type === 'rank'" :colors="colors" label-position="" :x-axis-data="item.xAxisData" :data="item.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;

diff --git a/src/views/dataManagement/components/data/device.vue b/src/views/dataManagement/components/data/device.vue
index c742895..94336b0 100644
--- a/src/views/dataManagement/components/data/device.vue
+++ b/src/views/dataManagement/components/data/device.vue
@@ -1,6 +1,7 @@
 <!-- 设备分析  --数据看板 -->
 <script name="deviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -99,6 +100,12 @@
 defineExpose({
   showChart,
 })
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -148,24 +155,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :key="index" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/eqptDevice.vue b/src/views/dataManagement/components/data/eqptDevice.vue
index 64b73d5..b3fc7c7 100644
--- a/src/views/dataManagement/components/data/eqptDevice.vue
+++ b/src/views/dataManagement/components/data/eqptDevice.vue
@@ -1,6 +1,7 @@
 <!-- 受检设备分析  --数据看板 -->
 <script name="EqptDeviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -161,6 +162,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -235,24 +243,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal-rank v-if="element.type === 'rank'" :colors="colors" label-position="" :x-axis-data="element.xAxisData" :data="element.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal-rank v-if="item.type === 'rank'" :colors="colors" label-position="" :x-axis-data="item.xAxisData" :data="item.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/meteringVerification.vue b/src/views/dataManagement/components/data/meteringVerification.vue
index f59465b..0b7ef54 100644
--- a/src/views/dataManagement/components/data/meteringVerification.vue
+++ b/src/views/dataManagement/components/data/meteringVerification.vue
@@ -1,6 +1,7 @@
 <!-- 计量检定分析  --数据看板 -->
 <script name="meteringVerification" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 import ScrollTable from '@/components/ScrollTable/index.vue'
@@ -108,6 +109,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -209,25 +217,58 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <scroll-table v-if="element.type === 'rank-table'" style="width: 100%;" :height="330" :data="element.data" :columns="element.columns" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <scroll-table v-if="item.type === 'rank-table'" style="width: 100%;" :height="330" :data="item.data" :columns="item.columns" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;

diff --git a/src/views/dataManagement/components/data/device.vue b/src/views/dataManagement/components/data/device.vue
index c742895..94336b0 100644
--- a/src/views/dataManagement/components/data/device.vue
+++ b/src/views/dataManagement/components/data/device.vue
@@ -1,6 +1,7 @@
 <!-- 设备分析  --数据看板 -->
 <script name="deviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -99,6 +100,12 @@
 defineExpose({
   showChart,
 })
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -148,24 +155,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :key="index" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/eqptDevice.vue b/src/views/dataManagement/components/data/eqptDevice.vue
index 64b73d5..b3fc7c7 100644
--- a/src/views/dataManagement/components/data/eqptDevice.vue
+++ b/src/views/dataManagement/components/data/eqptDevice.vue
@@ -1,6 +1,7 @@
 <!-- 受检设备分析  --数据看板 -->
 <script name="EqptDeviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -161,6 +162,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -235,24 +243,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal-rank v-if="element.type === 'rank'" :colors="colors" label-position="" :x-axis-data="element.xAxisData" :data="element.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal-rank v-if="item.type === 'rank'" :colors="colors" label-position="" :x-axis-data="item.xAxisData" :data="item.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/meteringVerification.vue b/src/views/dataManagement/components/data/meteringVerification.vue
index f59465b..0b7ef54 100644
--- a/src/views/dataManagement/components/data/meteringVerification.vue
+++ b/src/views/dataManagement/components/data/meteringVerification.vue
@@ -1,6 +1,7 @@
 <!-- 计量检定分析  --数据看板 -->
 <script name="meteringVerification" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 import ScrollTable from '@/components/ScrollTable/index.vue'
@@ -108,6 +109,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -209,25 +217,58 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <scroll-table v-if="element.type === 'rank-table'" style="width: 100%;" :height="330" :data="element.data" :columns="element.columns" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <scroll-table v-if="item.type === 'rank-table'" style="width: 100%;" :height="330" :data="item.data" :columns="item.columns" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/resourceManage.vue b/src/views/dataManagement/components/data/resourceManage.vue
index 46065be..be8a5cf 100644
--- a/src/views/dataManagement/components/data/resourceManage.vue
+++ b/src/views/dataManagement/components/data/resourceManage.vue
@@ -1,6 +1,7 @@
 <!-- 资源管理分析  --数据看板 -->
 <script name="resourceManage" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -101,6 +102,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -189,24 +197,58 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" title=" " :show-total="true" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-double v-if="element.type === 'bar-double'" :legend-data="element.legendData" :data1="element.data1" :data2="element.data2" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" title=" " :show-total="true" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-double v-if="item.type === 'bar-double'" :legend-data="item.legendData" :data1="item.data1" :data2="item.data2" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;

diff --git a/src/views/dataManagement/components/data/device.vue b/src/views/dataManagement/components/data/device.vue
index c742895..94336b0 100644
--- a/src/views/dataManagement/components/data/device.vue
+++ b/src/views/dataManagement/components/data/device.vue
@@ -1,6 +1,7 @@
 <!-- 设备分析  --数据看板 -->
 <script name="deviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -99,6 +100,12 @@
 defineExpose({
   showChart,
 })
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -148,24 +155,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :key="index" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/eqptDevice.vue b/src/views/dataManagement/components/data/eqptDevice.vue
index 64b73d5..b3fc7c7 100644
--- a/src/views/dataManagement/components/data/eqptDevice.vue
+++ b/src/views/dataManagement/components/data/eqptDevice.vue
@@ -1,6 +1,7 @@
 <!-- 受检设备分析  --数据看板 -->
 <script name="EqptDeviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -161,6 +162,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -235,24 +243,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal-rank v-if="element.type === 'rank'" :colors="colors" label-position="" :x-axis-data="element.xAxisData" :data="element.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal-rank v-if="item.type === 'rank'" :colors="colors" label-position="" :x-axis-data="item.xAxisData" :data="item.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/meteringVerification.vue b/src/views/dataManagement/components/data/meteringVerification.vue
index f59465b..0b7ef54 100644
--- a/src/views/dataManagement/components/data/meteringVerification.vue
+++ b/src/views/dataManagement/components/data/meteringVerification.vue
@@ -1,6 +1,7 @@
 <!-- 计量检定分析  --数据看板 -->
 <script name="meteringVerification" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 import ScrollTable from '@/components/ScrollTable/index.vue'
@@ -108,6 +109,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -209,25 +217,58 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <scroll-table v-if="element.type === 'rank-table'" style="width: 100%;" :height="330" :data="element.data" :columns="element.columns" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <scroll-table v-if="item.type === 'rank-table'" style="width: 100%;" :height="330" :data="item.data" :columns="item.columns" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/resourceManage.vue b/src/views/dataManagement/components/data/resourceManage.vue
index 46065be..be8a5cf 100644
--- a/src/views/dataManagement/components/data/resourceManage.vue
+++ b/src/views/dataManagement/components/data/resourceManage.vue
@@ -1,6 +1,7 @@
 <!-- 资源管理分析  --数据看板 -->
 <script name="resourceManage" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -101,6 +102,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -189,24 +197,58 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" title=" " :show-total="true" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-double v-if="element.type === 'bar-double'" :legend-data="element.legendData" :data1="element.data1" :data2="element.data2" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" title=" " :show-total="true" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-double v-if="item.type === 'bar-double'" :legend-data="item.legendData" :data1="item.data1" :data2="item.data2" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/standardDevice.vue b/src/views/dataManagement/components/data/standardDevice.vue
index 624e3ca..a2f7e86 100644
--- a/src/views/dataManagement/components/data/standardDevice.vue
+++ b/src/views/dataManagement/components/data/standardDevice.vue
@@ -1,6 +1,7 @@
 <!-- 标准装置分析  --数据看板 -->
 <script name="standardDevice" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllMonth } from '@/utils/date'
 import img1 from '@/assets/images/data/bg.png'
@@ -112,6 +113,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 const imgList = ref([img1, img2])
 </script>
 
@@ -189,22 +197,30 @@
       </div>
       <!-- 图表区域 -->
       <div class="content">
-        <div class="chart">
-          <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-            <div class="chart-name">
-              {{ item.name }}
+        <draggable
+          v-model="showChart" item-key="name" class="chart"
+          animation="300"
+          drag-class="dragClass"
+          ghost-class="ghostClass"
+          chosen-class="chosenClass"
+          @end="onEnd"
+        >
+          <template #item="{ element, index }">
+            <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+              <div class="chart-name">
+                {{ element.name }}
+              </div>
+              <div v-loading="loading" class="chart-page">
+                <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+                <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+                <bar-chart-horizontal-rank v-if="element.type === 'rank'" :colors="colors" label-position="" :x-axis-data="element.xAxisData" :data="element.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
+                <scroll-table v-if="element.type === 'rank-table'" style="width: 100%;" :height="330" :data="element.data" :columns="element.columns" />
+                <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+                <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              </div>
             </div>
-            <div v-if="item.needSearch" class="chart-search" />
-            <div v-loading="loading" class="chart-page">
-              <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-              <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-              <bar-chart-horizontal-rank v-if="item.type === 'rank'" :colors="colors" label-position="" :x-axis-data="item.xAxisData" :data="item.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
-              <scroll-table v-if="item.type === 'rank-table'" style="width: 100%;" :height="330" :data="item.data" :columns="item.columns" />
-              <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-              <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            </div>
-          </div>
-        </div>
+          </template>
+        </draggable>
         <div class="swiper">
           <el-carousel trigger="click" height="680px">
             <el-carousel-item v-for="item in imgList" :key="item">
@@ -219,6 +235,29 @@
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .content {
   display: flex;
 

diff --git a/src/views/dataManagement/components/data/device.vue b/src/views/dataManagement/components/data/device.vue
index c742895..94336b0 100644
--- a/src/views/dataManagement/components/data/device.vue
+++ b/src/views/dataManagement/components/data/device.vue
@@ -1,6 +1,7 @@
 <!-- 设备分析  --数据看板 -->
 <script name="deviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -99,6 +100,12 @@
 defineExpose({
   showChart,
 })
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -148,24 +155,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :key="index" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/eqptDevice.vue b/src/views/dataManagement/components/data/eqptDevice.vue
index 64b73d5..b3fc7c7 100644
--- a/src/views/dataManagement/components/data/eqptDevice.vue
+++ b/src/views/dataManagement/components/data/eqptDevice.vue
@@ -1,6 +1,7 @@
 <!-- 受检设备分析  --数据看板 -->
 <script name="EqptDeviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -161,6 +162,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -235,24 +243,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal-rank v-if="element.type === 'rank'" :colors="colors" label-position="" :x-axis-data="element.xAxisData" :data="element.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal-rank v-if="item.type === 'rank'" :colors="colors" label-position="" :x-axis-data="item.xAxisData" :data="item.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/meteringVerification.vue b/src/views/dataManagement/components/data/meteringVerification.vue
index f59465b..0b7ef54 100644
--- a/src/views/dataManagement/components/data/meteringVerification.vue
+++ b/src/views/dataManagement/components/data/meteringVerification.vue
@@ -1,6 +1,7 @@
 <!-- 计量检定分析  --数据看板 -->
 <script name="meteringVerification" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 import ScrollTable from '@/components/ScrollTable/index.vue'
@@ -108,6 +109,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -209,25 +217,58 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <scroll-table v-if="element.type === 'rank-table'" style="width: 100%;" :height="330" :data="element.data" :columns="element.columns" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <scroll-table v-if="item.type === 'rank-table'" style="width: 100%;" :height="330" :data="item.data" :columns="item.columns" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/resourceManage.vue b/src/views/dataManagement/components/data/resourceManage.vue
index 46065be..be8a5cf 100644
--- a/src/views/dataManagement/components/data/resourceManage.vue
+++ b/src/views/dataManagement/components/data/resourceManage.vue
@@ -1,6 +1,7 @@
 <!-- 资源管理分析  --数据看板 -->
 <script name="resourceManage" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -101,6 +102,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -189,24 +197,58 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" title=" " :show-total="true" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-double v-if="element.type === 'bar-double'" :legend-data="element.legendData" :data1="element.data1" :data2="element.data2" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" title=" " :show-total="true" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-double v-if="item.type === 'bar-double'" :legend-data="item.legendData" :data1="item.data1" :data2="item.data2" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/standardDevice.vue b/src/views/dataManagement/components/data/standardDevice.vue
index 624e3ca..a2f7e86 100644
--- a/src/views/dataManagement/components/data/standardDevice.vue
+++ b/src/views/dataManagement/components/data/standardDevice.vue
@@ -1,6 +1,7 @@
 <!-- 标准装置分析  --数据看板 -->
 <script name="standardDevice" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllMonth } from '@/utils/date'
 import img1 from '@/assets/images/data/bg.png'
@@ -112,6 +113,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 const imgList = ref([img1, img2])
 </script>
 
@@ -189,22 +197,30 @@
       </div>
       <!-- 图表区域 -->
       <div class="content">
-        <div class="chart">
-          <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-            <div class="chart-name">
-              {{ item.name }}
+        <draggable
+          v-model="showChart" item-key="name" class="chart"
+          animation="300"
+          drag-class="dragClass"
+          ghost-class="ghostClass"
+          chosen-class="chosenClass"
+          @end="onEnd"
+        >
+          <template #item="{ element, index }">
+            <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+              <div class="chart-name">
+                {{ element.name }}
+              </div>
+              <div v-loading="loading" class="chart-page">
+                <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+                <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+                <bar-chart-horizontal-rank v-if="element.type === 'rank'" :colors="colors" label-position="" :x-axis-data="element.xAxisData" :data="element.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
+                <scroll-table v-if="element.type === 'rank-table'" style="width: 100%;" :height="330" :data="element.data" :columns="element.columns" />
+                <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+                <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              </div>
             </div>
-            <div v-if="item.needSearch" class="chart-search" />
-            <div v-loading="loading" class="chart-page">
-              <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-              <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-              <bar-chart-horizontal-rank v-if="item.type === 'rank'" :colors="colors" label-position="" :x-axis-data="item.xAxisData" :data="item.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
-              <scroll-table v-if="item.type === 'rank-table'" style="width: 100%;" :height="330" :data="item.data" :columns="item.columns" />
-              <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-              <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            </div>
-          </div>
-        </div>
+          </template>
+        </draggable>
         <div class="swiper">
           <el-carousel trigger="click" height="680px">
             <el-carousel-item v-for="item in imgList" :key="item">
@@ -219,6 +235,29 @@
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .content {
   display: flex;
 
diff --git a/src/views/dataManagement/components/data/verificationCertificate.vue b/src/views/dataManagement/components/data/verificationCertificate.vue
index f33f6e9..0696c15 100644
--- a/src/views/dataManagement/components/data/verificationCertificate.vue
+++ b/src/views/dataManagement/components/data/verificationCertificate.vue
@@ -1,6 +1,7 @@
 <!-- 检定证书分析  --数据看板 -->
 <script name="verificationCertificate" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -167,6 +168,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -254,27 +262,60 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal-rank v-if="element.type === 'rank'" :colors="colors" label-position="" :x-axis-data="element.xAxisData" :data="element.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
+              <scroll-table v-if="element.type === 'rank-table'" style="width: 100%;" :height="330" :data="element.data" :columns="element.columns" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :gradient="element.gradient" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal-rank v-if="item.type === 'rank'" :colors="colors" label-position="" :x-axis-data="item.xAxisData" :data="item.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
-            <scroll-table v-if="item.type === 'rank-table'" style="width: 100%;" :height="330" :data="item.data" :columns="item.columns" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :gradient="item.gradient" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;

diff --git a/src/views/dataManagement/components/data/device.vue b/src/views/dataManagement/components/data/device.vue
index c742895..94336b0 100644
--- a/src/views/dataManagement/components/data/device.vue
+++ b/src/views/dataManagement/components/data/device.vue
@@ -1,6 +1,7 @@
 <!-- 设备分析  --数据看板 -->
 <script name="deviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -99,6 +100,12 @@
 defineExpose({
   showChart,
 })
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -148,24 +155,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :key="index" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/eqptDevice.vue b/src/views/dataManagement/components/data/eqptDevice.vue
index 64b73d5..b3fc7c7 100644
--- a/src/views/dataManagement/components/data/eqptDevice.vue
+++ b/src/views/dataManagement/components/data/eqptDevice.vue
@@ -1,6 +1,7 @@
 <!-- 受检设备分析  --数据看板 -->
 <script name="EqptDeviceTrend" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -161,6 +162,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -235,24 +243,57 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 6 ? '31%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal-rank v-if="element.type === 'rank'" :colors="colors" label-position="" :x-axis-data="element.xAxisData" :data="element.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal-rank v-if="item.type === 'rank'" :colors="colors" label-position="" :x-axis-data="item.xAxisData" :data="item.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/meteringVerification.vue b/src/views/dataManagement/components/data/meteringVerification.vue
index f59465b..0b7ef54 100644
--- a/src/views/dataManagement/components/data/meteringVerification.vue
+++ b/src/views/dataManagement/components/data/meteringVerification.vue
@@ -1,6 +1,7 @@
 <!-- 计量检定分析  --数据看板 -->
 <script name="meteringVerification" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 import ScrollTable from '@/components/ScrollTable/index.vue'
@@ -108,6 +109,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -209,25 +217,58 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <scroll-table v-if="element.type === 'rank-table'" style="width: 100%;" :height="330" :data="element.data" :columns="element.columns" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <scroll-table v-if="item.type === 'rank-table'" style="width: 100%;" :height="330" :data="item.data" :columns="item.columns" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/resourceManage.vue b/src/views/dataManagement/components/data/resourceManage.vue
index 46065be..be8a5cf 100644
--- a/src/views/dataManagement/components/data/resourceManage.vue
+++ b/src/views/dataManagement/components/data/resourceManage.vue
@@ -1,6 +1,7 @@
 <!-- 资源管理分析  --数据看板 -->
 <script name="resourceManage" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -101,6 +102,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -189,24 +197,58 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" title=" " :show-total="true" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-double v-if="element.type === 'bar-double'" :legend-data="element.legendData" :data1="element.data1" :data2="element.data2" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" title=" " :show-total="true" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-double v-if="item.type === 'bar-double'" :legend-data="item.legendData" :data1="item.data1" :data2="item.data2" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/components/data/standardDevice.vue b/src/views/dataManagement/components/data/standardDevice.vue
index 624e3ca..a2f7e86 100644
--- a/src/views/dataManagement/components/data/standardDevice.vue
+++ b/src/views/dataManagement/components/data/standardDevice.vue
@@ -1,6 +1,7 @@
 <!-- 标准装置分析  --数据看板 -->
 <script name="standardDevice" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllMonth } from '@/utils/date'
 import img1 from '@/assets/images/data/bg.png'
@@ -112,6 +113,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 const imgList = ref([img1, img2])
 </script>
 
@@ -189,22 +197,30 @@
       </div>
       <!-- 图表区域 -->
       <div class="content">
-        <div class="chart">
-          <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-            <div class="chart-name">
-              {{ item.name }}
+        <draggable
+          v-model="showChart" item-key="name" class="chart"
+          animation="300"
+          drag-class="dragClass"
+          ghost-class="ghostClass"
+          chosen-class="chosenClass"
+          @end="onEnd"
+        >
+          <template #item="{ element, index }">
+            <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+              <div class="chart-name">
+                {{ element.name }}
+              </div>
+              <div v-loading="loading" class="chart-page">
+                <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+                <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+                <bar-chart-horizontal-rank v-if="element.type === 'rank'" :colors="colors" label-position="" :x-axis-data="element.xAxisData" :data="element.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
+                <scroll-table v-if="element.type === 'rank-table'" style="width: 100%;" :height="330" :data="element.data" :columns="element.columns" />
+                <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+                <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              </div>
             </div>
-            <div v-if="item.needSearch" class="chart-search" />
-            <div v-loading="loading" class="chart-page">
-              <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-              <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-              <bar-chart-horizontal-rank v-if="item.type === 'rank'" :colors="colors" label-position="" :x-axis-data="item.xAxisData" :data="item.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
-              <scroll-table v-if="item.type === 'rank-table'" style="width: 100%;" :height="330" :data="item.data" :columns="item.columns" />
-              <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-              <bar-chart-vertical v-if="item.type === 'bar-vertical'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            </div>
-          </div>
-        </div>
+          </template>
+        </draggable>
         <div class="swiper">
           <el-carousel trigger="click" height="680px">
             <el-carousel-item v-for="item in imgList" :key="item">
@@ -219,6 +235,29 @@
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .content {
   display: flex;
 
diff --git a/src/views/dataManagement/components/data/verificationCertificate.vue b/src/views/dataManagement/components/data/verificationCertificate.vue
index f33f6e9..0696c15 100644
--- a/src/views/dataManagement/components/data/verificationCertificate.vue
+++ b/src/views/dataManagement/components/data/verificationCertificate.vue
@@ -1,6 +1,7 @@
 <!-- 检定证书分析  --数据看板 -->
 <script name="verificationCertificate" lang="ts" setup>
 import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
 import { colors } from '../environment/colors'
 import { getRangeAllTime } from '@/utils/date'
 const props = defineProps({
@@ -167,6 +168,13 @@
 defineExpose({
   showChart,
 })
+
+// 拖拽结束
+const onEnd = () => {
+  console.log('拖拽结束')
+  const resize = new Event('resize')
+  window.dispatchEvent(resize)
+}
 </script>
 
 <template>
@@ -254,27 +262,60 @@
         </div>
       </div>
       <!-- 图表区域 -->
-      <div class="chart">
-        <div v-for="(item, index) in showChart" :key="item" :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
-          <div class="chart-name">
-            {{ item.name }}
+      <!-- <div class="chart"> -->
+      <draggable
+        v-model="showChart" item-key="name" class="chart"
+        animation="300"
+        drag-class="dragClass"
+        ghost-class="ghostClass"
+        chosen-class="chosenClass"
+        @end="onEnd"
+      >
+        <template #item="{ element, index }">
+          <div :style="{ width: `${showChart.length === 4 ? '48%' : index === 0 || index === 1 ? '48%' : '31.5%'}` }" class="chart-item">
+            <div class="chart-name">
+              {{ element.name }}
+            </div>
+            <div v-loading="loading" class="chart-page">
+              <pie-chart v-if="element.type === 'pie'" :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
+              <bar-chart-horizontal-rank v-if="element.type === 'rank'" :colors="colors" label-position="" :x-axis-data="element.xAxisData" :data="element.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
+              <scroll-table v-if="element.type === 'rank-table'" style="width: 100%;" :height="330" :data="element.data" :columns="element.columns" />
+              <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+              <bar-chart-vertical v-if="element.type === 'bar-vertical'" :gradient="element.gradient" :bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
+            </div>
           </div>
-          <div v-if="item.needSearch" class="chart-search" />
-          <div v-loading="loading" class="chart-page">
-            <pie-chart v-if="item.type === 'pie'" :data="item.data" :colors="colors" :center="item.center" label-formatter="{style1|{c}}" :label-position="item.labelPosition" :radius="item.radius" :grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <line-chart v-if="item.type === 'line'" :colors="colors" :gradient="item.gradient" :x-axis-data="item.xAxisData" :data="item.data" :smooth="item.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }" :legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
-            <bar-chart-horizontal-rank v-if="item.type === 'rank'" :colors="colors" label-position="" :x-axis-data="item.xAxisData" :data="item.data" font-color="#000" :grid="{ top: 10, left: 20, right: 20, bottom: 10, containLabel: true }" :legend="{ }" />
-            <scroll-table v-if="item.type === 'rank-table'" style="width: 100%;" :height="330" :data="item.data" :columns="item.columns" />
-            <bar-chart-horizontal v-if="item.type === 'bar-horizontal'" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-            <bar-chart-vertical v-if="item.type === 'bar-vertical'" :gradient="item.gradient" :bar-coner="0" :data="item.data" :x-axis-data="item.xAxisData" :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
-          </div>
-        </div>
-      </div>
+        </template>
+      </draggable>
+      <!-- </div> -->
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.dragClass {
+  /* background-color: blueviolet !important; */
+  opacity: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-image: none !important;
+  color: #6ff !important;
+}
+
+.ghostClass {
+  /* background-color: blue !important; */
+}
+
+.chosenClass {
+  color: #6ff !important;
+
+  /* background-color: #ccc !important; */
+
+  /* opacity: 1 !important; */
+
+  /* width: 32.5% !important; */
+}
+
 .icon-button-icon {
   width: 50px;
   height: 50px;
diff --git a/src/views/dataManagement/dataBoard.vue b/src/views/dataManagement/dataBoard.vue
index acc6f8f..eb4e2a6 100644
--- a/src/views/dataManagement/dataBoard.vue
+++ b/src/views/dataManagement/dataBoard.vue
@@ -326,7 +326,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        z-index: 9999;
+        z-index: 99;
 
         &:hover {
           cursor: pointer;