125 lines
2.5 KiB
Vue
125 lines
2.5 KiB
Vue
|
<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>
|