添加要素拖拽功能

src/styles/common.scss

@@ -321,17 +321,17 @@
   }
 
   .selected-item-tag {
-    cursor: pointer;
     border-radius: 8px;
     color: #000000;
     font-size: 16px;
     text-align: center;
     padding: 10px 15px;
     flex: 0 1 auto;
+    cursor: move;
   }
 
   .selected-item-tag-active {
-    cursor: pointer;
+    cursor: move;
     background-color: var(--el-color-primary-light-9);
     border-radius: 8px;
     color: var(--el-color-primary);

src/views/alarm/allData/index.vue

@@ -164,7 +164,12 @@
           <div class="disposition-title" style="margin-top: 0px">已选要素</div>
           <div class="selected-list-c">
             <template v-for="(item,index) in copiedCustomizeColumns" :key="item.id">
-              <div  :class="selectedItemIndex===index?'selected-item-tag-active':'selected-item-tag'" @click="changeSelected(index)">{{item.data_name}}</div>
+              <div  :class="selectedItemIndex===index?'selected-item-tag-active':'selected-item-tag'" @click="changeSelected(index)"
+                    draggable="true"
+                    @dragstart="dragStart($event, index)"
+                    @dragover.prevent
+                    @drop="drop($event, index)"
+              >{{item.data_name}}</div>
             </template>
           </div>
           <div class="button-container">
@@ -200,7 +205,6 @@ const dialog = reactive<any>({
   title: ''
 });
 
-
 const cancel = () => {
   dialog.visible = false;
 }
@@ -458,6 +462,19 @@ const changeMoveDown = ()=>{
   }
 }
 
+const dragStart = (event, index) => {
+  event.dataTransfer.effectAllowed = 'move';
+  // 保存当前拖动的元素索引
+  event.dataTransfer.setData('text/plain', index.toString());
+};
+
+const drop = (event, index) => {
+  const draggedIndex = parseInt(event.dataTransfer.getData('text/plain'));
+  // 移动数组中的元素来更新顺序
+  const draggedItem = copiedCustomizeColumns.value.splice(draggedIndex, 1)[0];
+  copiedCustomizeColumns.value.splice(index, 0, draggedItem);
+};
+
 const changeRemove= ()=>{
   //删除数据
   if (copiedCustomizeColumns.value.length > 0) {

src/views/alarm/singleDevice/index.vue

@@ -89,7 +89,12 @@
           <div class="disposition-title" style="margin-top: 0px">已选设备</div>
           <div class="selected-list-c">
             <template v-for="(item,index) in copiedCustomizeColumns" :key="item.se_type">
-              <div  :class="selectedItemIndex===index?'selected-item-tag-active':'selected-item-tag'" @click="changeSelected(index)">{{item.se_name}}</div>
+              <div  :class="selectedItemIndex===index?'selected-item-tag-active':'selected-item-tag'" @click="changeSelected(index)"
+                    draggable="true"
+                    @dragstart="dragStart($event, index)"
+                    @dragover.prevent
+                    @drop="drop($event, index)"
+              >{{item.se_name}}</div>
             </template>
           </div>
           <div class="button-container">
@@ -230,6 +235,18 @@ const columns = reactive<ColumnProps[]>([
   { prop: "sta_remark", label: "备注" },
 ]);
 
+const dragStart = (event, index) => {
+  event.dataTransfer.effectAllowed = 'move';
+  // 保存当前拖动的元素索引
+  event.dataTransfer.setData('text/plain', index.toString());
+};
+
+const drop = (event, index) => {
+  const draggedIndex = parseInt(event.dataTransfer.getData('text/plain'));
+  // 移动数组中的元素来更新顺序
+  const draggedItem = copiedCustomizeColumns.value.splice(draggedIndex, 1)[0];
+  copiedCustomizeColumns.value.splice(index, 0, draggedItem);
+};
 
 const handlePlatform = (item) => {
   if (!item || typeof item !== 'object') {

src/views/alarm/singleStationData/index.vue

@@ -496,7 +496,12 @@
 					<div class="selected-list-c">
 						<template v-for="(item, index) in copiedCustomizeColumns" :key="item.id">
 							<div :class="selectedItemIndex === index ? 'selected-item-tag-active' : 'selected-item-tag'"
-								@click="changeSelected(index)">{{ item.data_name }}</div>
+								@click="changeSelected(index)"
+                   draggable="true"
+                   @dragstart="dragStart($event, index)"
+                   @dragover.prevent
+                   @drop="drop($event, index)"
+              >{{ item.data_name }}</div>
 						</template>
 					</div>
 					<div class="button-container">
@@ -571,6 +576,21 @@ const dialog = reactive<any>({
 	visible: false,
 	title: ''
 });
+
+
+const dragStart = (event, index) => {
+  event.dataTransfer.effectAllowed = 'move';
+  // 保存当前拖动的元素索引
+  event.dataTransfer.setData('text/plain', index.toString());
+};
+
+const drop = (event, index) => {
+  const draggedIndex = parseInt(event.dataTransfer.getData('text/plain'));
+  // 移动数组中的元素来更新顺序
+  const draggedItem = copiedCustomizeColumns.value.splice(draggedIndex, 1)[0];
+  copiedCustomizeColumns.value.splice(index, 0, draggedItem);
+};
+
 const globalStore = useGlobalStore();
 const isDark = computed(() => globalStore.isDark);
 

src/views/analysis/featureCurves/index.vue

@@ -219,7 +219,12 @@
 					<div class="selected-list-c">
 						<template v-for="(item, index) in copiedCustomizeColumns" :key="item.id">
 							<div :class="selectedItemIndex === index ? 'selected-item-tag-active' : 'selected-item-tag'"
-								@click="changeSelected(index)">{{ item.data_name }}</div>
+								@click="changeSelected(index)"
+                   draggable="true"
+                   @dragstart="dragStart($event, index)"
+                   @dragover.prevent
+                   @drop="drop($event, index)"
+              >{{ item.data_name }}</div>
 						</template>
 					</div>
 					<div class="button-container">
@@ -260,6 +265,20 @@ const changetype = (e) => {
 	}
 	getHistoryList()
 }
+
+const dragStart = (event, index) => {
+  event.dataTransfer.effectAllowed = 'move';
+  // 保存当前拖动的元素索引
+  event.dataTransfer.setData('text/plain', index.toString());
+};
+
+const drop = (event, index) => {
+  const draggedIndex = parseInt(event.dataTransfer.getData('text/plain'));
+  // 移动数组中的元素来更新顺序
+  const draggedItem = copiedCustomizeColumns.value.splice(draggedIndex, 1)[0];
+  copiedCustomizeColumns.value.splice(index, 0, draggedItem);
+};
+
 const handleDateRangeChange = (newVal) => {
 	const [startDate, endDate] = newVal;
 	if (endDate && isToday(endDate)) {

src/views/query/deviceHealth/index.vue

@@ -159,7 +159,12 @@
           <div class="disposition-title" style="margin-top: 0px">已选设备</div>
           <div class="selected-list-c">
             <template v-for="(item,index) in copiedCustomizeColumns" :key="item.se_type">
-              <div  :class="selectedItemIndex===index?'selected-item-tag-active':'selected-item-tag'" @click="changeSelected(index)">{{item.se_name}}</div>
+              <div  :class="selectedItemIndex===index?'selected-item-tag-active':'selected-item-tag'" @click="changeSelected(index)"
+                    draggable="true"
+                    @dragstart="dragStart($event, index)"
+                    @dragover.prevent
+                    @drop="drop($event, index)"
+              >{{item.se_name}}</div>
             </template>
           </div>
           <div class="button-container">
@@ -198,6 +203,19 @@ const points =ref(true);
 const singleTime =ref(undefined)
 const multiTime =ref(undefined)
 
+const dragStart = (event, index) => {
+  event.dataTransfer.effectAllowed = 'move';
+  // 保存当前拖动的元素索引
+  event.dataTransfer.setData('text/plain', index.toString());
+};
+
+const drop = (event, index) => {
+  const draggedIndex = parseInt(event.dataTransfer.getData('text/plain'));
+  // 移动数组中的元素来更新顺序
+  const draggedItem = copiedCustomizeColumns.value.splice(draggedIndex, 1)[0];
+  copiedCustomizeColumns.value.splice(index, 0, draggedItem);
+};
+
 const pageable = ref<any>({
   time_space:60,
   begin_time: undefined,

src/views/query/queryObservationData/index.vue

@@ -240,7 +240,12 @@
           <div class="disposition-title" style="margin-top: 0px">已选要素</div>
           <div class="selected-list-c">
             <template v-for="(item,index) in copiedCustomizeColumns" :key="item.id">
-              <div  :class="selectedItemIndex===index?'selected-item-tag-active':'selected-item-tag'" @click="changeSelected(index)">{{item.data_name}}</div>
+              <div  :class="selectedItemIndex===index?'selected-item-tag-active':'selected-item-tag'" @click="changeSelected(index)"
+                    draggable="true"
+                    @dragstart="dragStart($event, index)"
+                    @dragover.prevent
+                    @drop="drop($event, index)"
+              >{{item.data_name}}</div>
             </template>
           </div>
           <div class="button-container">
@@ -292,6 +297,19 @@ const changeStand=()=>{
   pageable.value.data_items = [...customizeColumns.value];
 }
 
+const dragStart = (event, index) => {
+  event.dataTransfer.effectAllowed = 'move';
+  // 保存当前拖动的元素索引
+  event.dataTransfer.setData('text/plain', index.toString());
+};
+
+const drop = (event, index) => {
+  const draggedIndex = parseInt(event.dataTransfer.getData('text/plain'));
+  // 移动数组中的元素来更新顺序
+  const draggedItem = copiedCustomizeColumns.value.splice(draggedIndex, 1)[0];
+  copiedCustomizeColumns.value.splice(index, 0, draggedItem);
+};
+
 const cancel = () => {
   dialog.visible = false;
 }