add:增加AGV看板

nl-vue/src/views/nl_agv/layout/components/PropertyModal.vue

@@ -0,0 +1,124 @@
+<template>
+	<a-modal
+		v-model:visible="visible"
+		title="设备属性设置"
+		:width="500"
+		:footer="null"
+		@cancel="handleClose"
+	>
+		<a-form layout="vertical">
+			<a-form-item label="设备ID">
+				<a-input :value="device.id" disabled />
+			</a-form-item>
+
+			<a-form-item label="设备名称">
+				<a-input :value="device.name" @change="handleUpdate('name', $event.target.value)" />
+			</a-form-item>
+
+			<a-form-item label="设备类型">
+				<a-input :value="device.type" disabled />
+			</a-form-item>
+
+			<a-form-item label="X坐标">
+				<a-input-number
+					:value="device.x"
+					:min="0"
+					style="width: 100%"
+					@change="handleUpdate('x', $event)"
+				/>
+			</a-form-item>
+
+			<a-form-item label="Y坐标">
+				<a-input-number
+					:value="device.y"
+					:min="0"
+					style="width: 100%"
+					@change="handleUpdate('y', $event)"
+				/>
+			</a-form-item>
+
+			<a-form-item label="旋转角度 (度)">
+				<a-input-number
+					:value="device.angle || 0"
+					:min="0"
+					:max="360"
+					:step="1"
+					style="width: 100%"
+					@change="handleUpdate('angle', $event)"
+				/>
+				<div class="form-hint">0-360度，0度为正东方向，顺时针旋转</div>
+			</a-form-item>
+
+			<a-form-item label="设备大小 (像素)">
+				<a-input-number
+					:value="device.size || 50"
+					:min="10"
+					:step="1"
+					style="width: 100%"
+					@change="handleUpdate('size', $event)"
+				/>
+				<div class="form-hint">最小10px，无上限</div>
+			</a-form-item>
+
+			<a-form-item>
+				<a-button type="primary" danger block @click="handleDelete">
+					删除设备
+				</a-button>
+			</a-form-item>
+		</a-form>
+	</a-modal>
+</template>
+
+<script setup>
+	import { ref, watch } from 'vue'
+	import { Modal } from 'ant-design-vue'
+
+	const props = defineProps({
+		device: {
+			type: Object,
+			required: true
+		}
+	})
+
+	const emit = defineEmits(['close', 'update', 'delete'])
+
+	const visible = ref(true)
+
+	watch(
+		() => props.device,
+		() => {
+			visible.value = true
+		}
+	)
+
+	const handleClose = () => {
+		visible.value = false
+		emit('close')
+	}
+
+	const handleUpdate = (property, value) => {
+		emit('update', props.device.id, property, value)
+	}
+
+	const handleDelete = () => {
+		Modal.confirm({
+			title: '确定要删除这个设备吗？',
+			content: `设备名称: ${props.device.name}`,
+			okText: '确定',
+			okType: 'danger',
+			cancelText: '取消',
+			onOk() {
+				emit('delete', props.device.id)
+				handleClose()
+			}
+		})
+	}
+</script>
+
+<style scoped lang="less">
+	.form-hint {
+		font-size: 12px;
+		color: #8b95a5;
+		margin-top: 5px;
+	}
+</style>