去除watch
This commit is contained in:
44
src/App.vue
44
src/App.vue
@@ -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(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user