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) +}