From e6368e32d55237d7b52a8f3bea4dceb33f620fe5 Mon Sep 17 00:00:00 2001 From: Chenhuaqiang Date: Fri, 9 Oct 2026 17:14:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=87=E7=82=B9=E4=BA=A4?= =?UTF-8?q?=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/EquipmentManagementPage.vue | 233 +++++++++++++++++- vite.config.ts | 4 +- 2 files changed, 225 insertions(+), 12 deletions(-) diff --git a/src/views/dashboard1/pages/EquipmentManagementPage.vue b/src/views/dashboard1/pages/EquipmentManagementPage.vue index 3d929ed..79d8ec8 100644 --- a/src/views/dashboard1/pages/EquipmentManagementPage.vue +++ b/src/views/dashboard1/pages/EquipmentManagementPage.vue @@ -306,6 +306,12 @@ const configuringDeviceId = ref(null); const editingPointId = ref(null); const formError = ref(""); const mapEditorMode = ref("select"); +const draggingPointId = ref(null); +const pointDropTargetId = ref(null); +const pointDropPosition = ref<"before" | "after">("before"); +// 列表点击"前/后插入"后，记录待插入位置，等地图点选坐标后写入该位置 +const pendingInsertIndex = ref(null); +const pendingInsertLabel = ref(""); const mapStageRef = ref(null); const mapCanvasRef = ref(null); const mapOverviewRef = ref(null); @@ -1473,7 +1479,8 @@ async function openConfigDialog(device: DeviceRecord) { deviceConfigs[device.id] = config; configuringDeviceId.value = device.id; configDialogVisible.value = true; - mapEditorMode.value = "normal"; + mapEditorMode.value = "select"; + cancelInsertPoint(); if (!config.plans.some((plan) => plan.id === config.activePlanId)) { config.activePlanId = config.plans[0]?.id ?? ""; @@ -1515,6 +1522,7 @@ function closeConfigDialog() { configDialogVisible.value = false; planDialogVisible.value = false; configuringDeviceId.value = null; + cancelInsertPoint(); clearSelectionBox(); clearDragPointState(); clearMapPanState(); @@ -2496,12 +2504,14 @@ function buildAutoPointName(type: PatrolPointType, index: number) { return `${type} ${String(index + 1).padStart(2, "0")}`; } -function buildPointName(mode: EditorMode, type: PatrolPointType) { +function buildPointName(mode: EditorMode, type: PatrolPointType, index?: number) { + const targetIndex = index ?? activeRoundPoints.value.length; + if (mode === "waypoint") { - return buildAutoPointName("途经点", activeRoundPoints.value.length); + return buildAutoPointName("途经点", targetIndex); } - return buildAutoPointName(type, activeRoundPoints.value.length); + return buildAutoPointName(type, targetIndex); } function buildNextPointId() { @@ -2723,10 +2733,13 @@ function handleMapStageClick(event: MouseEvent) { } const type = buildPointTypeFromMode(mapEditorMode.value); + const insertIndex = pendingInsertIndex.value; + const canInsert = + insertIndex !== null && insertIndex >= 0 && insertIndex <= currentConfig.value.points.length; const point: PatrolPoint = { id: buildNextPointId(), planId: currentConfig.value.plans[0]?.id ?? currentConfig.value.activePlanId, - name: buildPointName(mapEditorMode.value, type), + name: buildPointName(mapEditorMode.value, type, insertIndex ?? undefined), type, direction: type === "业务点" ? "正向" : "正向", x: position.x, @@ -2743,7 +2756,14 @@ function handleMapStageClick(event: MouseEvent) { note: "新建点位，待补充巡检说明", }; - currentConfig.value.points.push(point); + if (canInsert && insertIndex !== null) { + currentConfig.value.points.splice(insertIndex, 0, point); + cancelInsertPoint(); + mapEditorMode.value = "select"; + } else { + currentConfig.value.points.push(point); + } + updateSelection([point.id]); } @@ -2930,6 +2950,86 @@ function removePoint(pointId: string) { updateSelection(nextPoint ? [nextPoint.id] : []); } +// 共享巡检点顺序即巡检顺序，可通过列表拖拽调整 +function handlePointDragStart(point: PatrolPoint, event: DragEvent) { + cancelInsertPoint(); + draggingPointId.value = point.id; + pointDropTargetId.value = null; + pointDropPosition.value = "before"; + + if (event.dataTransfer) { + event.dataTransfer.effectAllowed = "move"; + event.dataTransfer.setData("text/plain", point.id); + } +} + +function handlePointDragOver(point: PatrolPoint, event: DragEvent) { + if (!draggingPointId.value || draggingPointId.value === point.id) { + return; + } + + event.preventDefault(); + + if (event.dataTransfer) { + event.dataTransfer.dropEffect = "move"; + } + + const rect = (event.currentTarget as HTMLElement).getBoundingClientRect(); + + pointDropTargetId.value = point.id; + pointDropPosition.value = event.clientY > rect.top + rect.height / 2 ? "after" : "before"; +} + +function handlePointDrop(point: PatrolPoint) { + const sourceId = draggingPointId.value; + const config = currentConfig.value; + + if (!sourceId || !config || sourceId === point.id) { + resetPointDragState(); + return; + } + + const fromIndex = config.points.findIndex((item) => item.id === sourceId); + + if (fromIndex < 0 || !config.points.some((item) => item.id === point.id)) { + resetPointDragState(); + return; + } + + const [movedPoint] = config.points.splice(fromIndex, 1); + const targetIndex = config.points.findIndex((item) => item.id === point.id); + const insertIndex = pointDropPosition.value === "after" ? targetIndex + 1 : targetIndex; + + config.points.splice(insertIndex, 0, movedPoint); + resetPointDragState(); + + nextTick(() => { + scheduleMapCanvasRender(); + }); +} + +function resetPointDragState() { + draggingPointId.value = null; + pointDropTargetId.value = null; + pointDropPosition.value = "before"; +} + +// 在指定点位前/后插入新点位：记录插入位置，随后在地图上点选坐标 +function startInsertPoint(anchorIndex: number, position: "before" | "after") { + if (!currentConfig.value?.mapLoaded) { + return; + } + + pendingInsertIndex.value = position === "before" ? anchorIndex : anchorIndex + 1; + pendingInsertLabel.value = `点位 ${anchorIndex + 1} ${position === "before" ? "之前" : "之后"}`; + mapEditorMode.value = "normal"; +} + +function cancelInsertPoint() { + pendingInsertIndex.value = null; + pendingInsertLabel.value = ""; +} + function loadPlan(point: PatrolPoint) { if (!activeRound.value) { return; @@ -3359,6 +3459,13 @@ watch(
+ +
+ 在地图上点击放置新点位，将插入到{{ pendingInsertLabel }} + +
@@ -3442,14 +3553,28 @@ watch(
-
共享巡检点
+
+
共享巡检点
+ 拖拽调整巡检顺序 +
+ ]" draggable="true" @click="editPoint(point.id)" @dragstart="handlePointDragStart(point, $event)" + @dragover="handlePointDragOver(point, $event)" @drop.prevent="handlePointDrop(point)" + @dragend="resetPointDragState"> +
点位 {{ index + 1 }}
@@ -3460,6 +3585,18 @@ watch(
+ +