去除watch

This commit is contained in:
2025-12-07 00:13:53 +08:00
parent 3d65b32fc7
commit 21772cae01

View File

@@ -122,7 +122,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader' import AMapLoader from '@amap/amap-jsapi-loader'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { WebSocketClient, MockWebSocketDataGenerator } from './utils/websocket.js' import { WebSocketClient, MockWebSocketDataGenerator } from './utils/websocket.js'
@@ -759,9 +759,6 @@ const removeFence = (fenceId) => {
const fence = fences.value[index] const fence = fences.value[index]
// 标记正在删除避免watch触发检测
isRemovingFence = true
// 直接从地图上移除(同步操作,快速完成) // 直接从地图上移除(同步操作,快速完成)
if (fence && fence.shape) { if (fence && fence.shape) {
try { try {
@@ -774,14 +771,9 @@ const removeFence = (fenceId) => {
} }
} }
// 从列表中移除这会触发watch但watch会检查isRemovingFence标记 // 从列表中移除
fences.value.splice(index, 1) fences.value.splice(index, 1)
// 延迟重置标记确保watch不会触发
setTimeout(() => {
isRemovingFence = false
}, 150) // 增加延迟时间确保watch检查时标记仍然有效
console.log('围栏已删除:', fenceId, '剩余围栏数量:', fences.value.length) console.log('围栏已删除:', fenceId, '剩余围栏数量:', fences.value.length)
} }
@@ -816,9 +808,6 @@ const clearAllFences = async () => {
} }
) )
// 标记正在删除避免watch触发检测
isRemovingFence = true
// 先清除地图上的所有图形 // 先清除地图上的所有图形
const fencesToRemove = [...fences.value] // 创建副本避免遍历时修改数组 const fencesToRemove = [...fences.value] // 创建副本避免遍历时修改数组
fencesToRemove.forEach(fence => { fencesToRemove.forEach(fence => {
@@ -837,11 +826,6 @@ const clearAllFences = async () => {
// 清空围栏列表 // 清空围栏列表
fences.value = [] fences.value = []
// 延迟重置标记
setTimeout(() => {
isRemovingFence = false
}, 150)
console.log('所有围栏已清除,当前围栏数量:', fences.value.length) console.log('所有围栏已清除,当前围栏数量:', fences.value.length)
ElMessage.success('所有围栏已清除') ElMessage.success('所有围栏已清除')
} catch (error) { } catch (error) {
@@ -853,29 +837,7 @@ const clearAllFences = async () => {
} }
} }
// 监听围栏变化重新检测无人机位置优化版本移除deep监听使用长度变化 // watch已移除无人机位置实时更新时会自动检测围栏状态不需要监听围栏变化
let fenceWatchTimer = null
let isRemovingFence = false // 标记是否正在删除围栏
// 只监听数组长度变化,而不是深度监听,避免多次触发
watch(() => fences.value.length, (newLength, oldLength) => {
// 如果正在删除围栏,跳过检测
if (isRemovingFence) {
return
}
// 使用防抖,避免频繁检测导致卡顿
if (fenceWatchTimer) {
clearTimeout(fenceWatchTimer)
}
fenceWatchTimer = setTimeout(() => {
if (droneData.value && !isDrawing.value) {
// 只在非绘制状态下检测,避免干扰
checkFenceStatus(droneData.value.longitude, droneData.value.latitude)
}
}, 300) // 300ms防抖
})
// 组件挂载时初始化地图 // 组件挂载时初始化地图
onMounted(() => { onMounted(() => {