From f12f6399bf4f97905d453965807149b4001665d8 Mon Sep 17 00:00:00 2001 From: guoapeng Date: Thu, 20 Mar 2025 18:58:06 +0800 Subject: [PATCH] =?UTF-8?q?fix:debug=E5=BC=B9=E7=AA=97=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E6=8B=96=E6=8B=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/system.ts | 1 + src/components/common/FTStream/index.vue | 52 ++++++++++++++++++++++++++-- src/libs/utils.ts | 34 +++++++++++++++++-- src/stores/useSystemStore.ts | 2 +- src/views/home/index.vue | 31 +++++++++-------- src/views/point/index.vue | 58 +++++++++++++++----------------- 6 files changed, 128 insertions(+), 50 deletions(-) diff --git a/src/apis/system.ts b/src/apis/system.ts index 7b3a254..6240542 100644 --- a/src/apis/system.ts +++ b/src/apis/system.ts @@ -10,3 +10,4 @@ export const login = (params: { username: string, password: string }) => http.po export const control = (params: any) => http.post('/function', params) export const debugControl = (params: any) => http.post('/function/debug', params) +export const getDeviceStatus = () => http.get('/device-status/') diff --git a/src/components/common/FTStream/index.vue b/src/components/common/FTStream/index.vue index 2b153d1..6ded1d9 100644 --- a/src/components/common/FTStream/index.vue +++ b/src/components/common/FTStream/index.vue @@ -16,6 +16,8 @@ const title = computed(() => { }) const maskBodyRef = ref(null) +const maskRef = ref(null) +const maskHeaderRef = ref(null) const statusMap = { error: 'danger', @@ -37,14 +39,59 @@ watch( }, { deep: true }, ) + +// 拖拽相关逻辑 +let isDragging = false +let offsetX = 0 +let offsetY = 0 + +const handleMouseDown = (event: MouseEvent | TouchEvent) => { + if (maskRef.value && maskHeaderRef.value) { + isDragging = true + const clientX = 'clientX' in event ? event.clientX : event.touches[0].clientX + const clientY = 'clientY' in event ? event.clientY : event.touches[0].clientY + offsetX = clientX - maskRef.value.offsetLeft + offsetY = clientY - maskRef.value.offsetTop + document.addEventListener('mousemove', handleMouseMove) + document.addEventListener('mouseup', handleMouseUp) + document.addEventListener('touchmove', handleMouseMove) + document.addEventListener('touchend', handleMouseUp) + } +} + +const handleMouseMove = (event: MouseEvent | TouchEvent) => { + if (maskRef.value && isDragging) { + const clientX = 'clientX' in event ? event.clientX : event.touches[0].clientX + const clientY = 'clientY' in event ? event.clientY : event.touches[0].clientY + + // 获取 body 的宽度和高度 + const bodyWidth = document.body.clientWidth + const bodyHeight = document.body.clientHeight + + // 计算新的位置，并确保不会超出 body 的范围 + const newLeft = Math.max(0, Math.min(clientX - offsetX, bodyWidth - maskRef.value.offsetWidth)) + const newTop = Math.max(0, Math.min(clientY - offsetY, bodyHeight - maskRef.value.offsetHeight)) + + maskRef.value.style.left = `${newLeft}px` + maskRef.value.style.top = `${newTop}px` + } +} + +const handleMouseUp = () => { + isDragging = false + document.removeEventListener('mousemove', handleMouseMove) + document.removeEventListener('mouseup', handleMouseUp) + document.removeEventListener('touchmove', handleMouseMove) + document.removeEventListener('touchend', handleMouseUp) +}