399 lines
8.8 KiB
Vue
399 lines
8.8 KiB
Vue
<template>
|
||
<div
|
||
class="placed-device"
|
||
:class="{ selected: selected }"
|
||
:style="deviceStyle"
|
||
:data-device-id="device.id"
|
||
@click.stop="handleClick"
|
||
@dblclick.stop="handleDoubleClick"
|
||
@mousedown="handleMouseDown"
|
||
>
|
||
<div class="device-marker">
|
||
<div class="device-marker-icon">
|
||
<img
|
||
v-if="isImageUrl(device.icon)"
|
||
:src="device.icon"
|
||
:alt="device.name"
|
||
class="device-icon-img"
|
||
:style="{ transform: `rotate(${device.angle || 0}deg)` }"
|
||
/>
|
||
<span
|
||
v-else
|
||
:style="{
|
||
fontSize: iconFontSize + 'px',
|
||
transform: `rotate(${device.angle || 0}deg)`,
|
||
display: 'inline-block'
|
||
}"
|
||
>
|
||
{{ device.icon || '📍' }}
|
||
</span>
|
||
</div>
|
||
<div class="device-marker-label">{{ device.name }}</div>
|
||
</div>
|
||
<div class="device-delete-btn" @click.stop="handleDelete">×</div>
|
||
<div v-if="selected" class="device-controls">
|
||
<div
|
||
v-for="direction in ['nw', 'ne', 'sw', 'se']"
|
||
:key="direction"
|
||
class="resize-handle"
|
||
:class="`resize-${direction}`"
|
||
:data-direction="direction"
|
||
@mousedown.stop="handleResizeStart"
|
||
></div>
|
||
<div class="rotate-handle" title="拖拽旋转" @mousedown.stop="handleRotateStart">🔄</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from 'vue'
|
||
|
||
const props = defineProps({
|
||
device: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
mapWidth: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
mapHeight: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
selected: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['select', 'update', 'delete'])
|
||
|
||
const isDragging = ref(false)
|
||
const isResizing = ref(false)
|
||
const isRotating = ref(false)
|
||
const dragStartPos = ref({ x: 0, y: 0 })
|
||
const resizeStartSize = ref(0)
|
||
const resizeStartPos = ref({ x: 0, y: 0 })
|
||
|
||
// 计算设备样式
|
||
const deviceStyle = computed(() => {
|
||
const leftPercent = (props.device.x / props.mapWidth) * 100
|
||
const topPercent = (props.device.y / props.mapHeight) * 100
|
||
const size = props.device.size || 50
|
||
|
||
return {
|
||
left: leftPercent + '%',
|
||
top: topPercent + '%',
|
||
width: size + 'px',
|
||
height: size + 'px'
|
||
}
|
||
})
|
||
|
||
// 计算图标字体大小
|
||
const iconFontSize = computed(() => {
|
||
return Math.round((props.device.size || 50) * 0.64)
|
||
})
|
||
|
||
// 判断是否为可直接访问的图片URL（排除本地文件路径）
|
||
const isImageUrl = (str) => {
|
||
if (!str) return false
|
||
// 只接受 http/https 开头的URL
|
||
return str.startsWith('http://') || str.startsWith('https://')
|
||
}
|
||
|
||
// 单击选中
|
||
const handleClick = () => {
|
||
emit('select', props.device.id)
|
||
}
|
||
|
||
// 双击打开属性面板
|
||
const handleDoubleClick = () => {
|
||
// 可以通过事件总线或其他方式打开属性面板
|
||
console.log('双击设备:', props.device.name)
|
||
}
|
||
|
||
// 删除设备
|
||
const handleDelete = () => {
|
||
emit('delete', props.device.id)
|
||
}
|
||
|
||
// 开始拖动设备
|
||
const handleMouseDown = (e) => {
|
||
if (e.target.closest('.resize-handle') || e.target.closest('.rotate-handle')) return
|
||
if (e.target.closest('.device-delete-btn')) return
|
||
|
||
isDragging.value = true
|
||
dragStartPos.value = { x: e.clientX, y: e.clientY }
|
||
|
||
document.addEventListener('mousemove', handleDragMove)
|
||
document.addEventListener('mouseup', handleDragEnd)
|
||
}
|
||
|
||
// 拖动设备
|
||
const handleDragMove = (e) => {
|
||
if (!isDragging.value) return
|
||
|
||
const deltaX = e.clientX - dragStartPos.value.x
|
||
const deltaY = e.clientY - dragStartPos.value.y
|
||
|
||
// 计算新位置
|
||
const mapEl = document.querySelector('.map-image')
|
||
if (!mapEl) return
|
||
|
||
const rect = mapEl.getBoundingClientRect()
|
||
const newX = props.device.x + Math.round(deltaX / rect.width * props.mapWidth)
|
||
const newY = props.device.y + Math.round(deltaY / rect.height * props.mapHeight)
|
||
|
||
emit('update', props.device.id, {
|
||
x: Math.max(0, Math.min(props.mapWidth, newX)),
|
||
y: Math.max(0, Math.min(props.mapHeight, newY))
|
||
})
|
||
|
||
dragStartPos.value = { x: e.clientX, y: e.clientY }
|
||
}
|
||
|
||
// 结束拖动
|
||
const handleDragEnd = () => {
|
||
isDragging.value = false
|
||
document.removeEventListener('mousemove', handleDragMove)
|
||
document.removeEventListener('mouseup', handleDragEnd)
|
||
}
|
||
|
||
// 开始缩放
|
||
const handleResizeStart = (e) => {
|
||
isResizing.value = true
|
||
resizeStartSize.value = props.device.size || 50
|
||
resizeStartPos.value = { x: e.clientX, y: e.clientY }
|
||
|
||
document.addEventListener('mousemove', handleResizeMove)
|
||
document.addEventListener('mouseup', handleResizeEnd)
|
||
}
|
||
|
||
// 缩放设备
|
||
const handleResizeMove = (e) => {
|
||
if (!isResizing.value) return
|
||
|
||
const deltaX = e.clientX - resizeStartPos.value.x
|
||
const deltaY = e.clientY - resizeStartPos.value.y
|
||
const delta = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
|
||
const direction = (deltaX + deltaY) > 0 ? 1 : -1
|
||
|
||
const newSize = Math.max(10, resizeStartSize.value + delta * direction * 0.5)
|
||
emit('update', props.device.id, { size: newSize })
|
||
}
|
||
|
||
// 结束缩放
|
||
const handleResizeEnd = () => {
|
||
isResizing.value = false
|
||
document.removeEventListener('mousemove', handleResizeMove)
|
||
document.removeEventListener('mouseup', handleResizeEnd)
|
||
}
|
||
|
||
// 开始旋转
|
||
const handleRotateStart = (e) => {
|
||
isRotating.value = true
|
||
|
||
document.addEventListener('mousemove', handleRotateMove)
|
||
document.addEventListener('mouseup', handleRotateEnd)
|
||
}
|
||
|
||
// 旋转设备
|
||
const handleRotateMove = (e) => {
|
||
if (!isRotating.value) return
|
||
|
||
const deviceEl = e.target.closest('.placed-device')
|
||
if (!deviceEl) return
|
||
|
||
const rect = deviceEl.getBoundingClientRect()
|
||
const centerX = rect.left + rect.width / 2
|
||
const centerY = rect.top + rect.height / 2
|
||
|
||
const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI
|
||
const normalizedAngle = Math.round((angle + 360) % 360)
|
||
|
||
emit('update', props.device.id, { angle: normalizedAngle })
|
||
}
|
||
|
||
// 结束旋转
|
||
const handleRotateEnd = () => {
|
||
isRotating.value = false
|
||
document.removeEventListener('mousemove', handleRotateMove)
|
||
document.removeEventListener('mouseup', handleRotateEnd)
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.placed-device {
|
||
position: absolute;
|
||
transform: translate(-50%, -50%);
|
||
cursor: move;
|
||
pointer-events: auto;
|
||
will-change: transform;
|
||
|
||
&:hover {
|
||
z-index: 100;
|
||
}
|
||
|
||
&.selected {
|
||
z-index: 101;
|
||
}
|
||
}
|
||
|
||
.device-marker {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.device-marker-icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32px;
|
||
background: transparent;
|
||
border: none;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.device-icon-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.device-marker-label {
|
||
position: absolute;
|
||
bottom: -25px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding: 4px 10px;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
border: 1px solid #00ffc8;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: #00ffc8;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
z-index: 10;
|
||
}
|
||
|
||
.device-delete-btn {
|
||
position: absolute;
|
||
top: -10px;
|
||
right: -10px;
|
||
width: 24px;
|
||
height: 24px;
|
||
background: #ff6b6b;
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
background: #ff5252;
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
.placed-device.selected .device-delete-btn {
|
||
display: flex;
|
||
}
|
||
|
||
.device-controls {
|
||
display: block;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: calc(100% + 40px);
|
||
height: calc(100% + 40px);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.resize-handle {
|
||
position: absolute;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #00ffc8;
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
pointer-events: auto;
|
||
transition: all 0.2s;
|
||
box-shadow: 0 0 10px rgba(0, 255, 200, 0.6);
|
||
|
||
&:hover {
|
||
transform: scale(1.3);
|
||
background: #00d4ff;
|
||
box-shadow: 0 0 20px rgba(0, 255, 200, 1);
|
||
}
|
||
|
||
&.resize-nw {
|
||
top: -6px;
|
||
left: -6px;
|
||
cursor: nw-resize;
|
||
}
|
||
|
||
&.resize-ne {
|
||
top: -6px;
|
||
right: -6px;
|
||
cursor: ne-resize;
|
||
}
|
||
|
||
&.resize-sw {
|
||
bottom: -6px;
|
||
left: -6px;
|
||
cursor: sw-resize;
|
||
}
|
||
|
||
&.resize-se {
|
||
bottom: -6px;
|
||
right: -6px;
|
||
cursor: se-resize;
|
||
}
|
||
}
|
||
|
||
.rotate-handle {
|
||
position: absolute;
|
||
top: -35px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 28px;
|
||
height: 28px;
|
||
background: rgba(255, 107, 107, 0.9);
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
cursor: grab;
|
||
pointer-events: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
transition: all 0.2s;
|
||
box-shadow: 0 0 15px rgba(255, 107, 107, 0.6);
|
||
|
||
&:hover {
|
||
transform: translateX(-50%) scale(1.2);
|
||
background: rgba(255, 107, 107, 1);
|
||
box-shadow: 0 0 25px rgba(255, 107, 107, 1);
|
||
}
|
||
|
||
&:active {
|
||
cursor: grabbing;
|
||
}
|
||
}
|
||
</style>
|