发起任务在地图选择库位时,弹窗的地图改为可以使用鼠标滚轮放大缩小

This commit is contained in:
yyy 2025-06-17 09:45:22 +08:00
parent 306450e179
commit c349dcdbe3
2 changed files with 41 additions and 4 deletions

View File

@ -22,10 +22,12 @@
<el-icon @click="close" class="mr-4"><Close /></el-icon> <el-icon @click="close" class="mr-4"><Close /></el-icon>
</div> </div>
</template> </template>
<div class="location-selection-dialog-map"> <div class="location-selection-dialog-map" @wheel="handleWheel">
<div <div
class="location-selection-map" class="location-selection-map"
:style="{ :style="{
transform: `scale(${imageChangeMultiple})`,
transformOrigin: '0 0',
width: imgBgObj.showWidth + 'px', width: imgBgObj.showWidth + 'px',
height: imgBgObj.showHeight + 'px', height: imgBgObj.showHeight + 'px',
backgroundImage: `url(${imgBgObj.imgUrl})` backgroundImage: `url(${imgBgObj.imgUrl})`
@ -191,7 +193,9 @@ const getMapList = async () => {
//id //id
if (props.positionMapId) { if (props.positionMapId) {
let item = findDataById(res, props.positionMapId) let item = findDataById(res, props.positionMapId)
if (item) {
cascaderValue.value = [item.floor, item.id] cascaderValue.value = [item.floor, item.id]
}
} else { } else {
cascaderValue.value = [cascaderList.value[0].value, cascaderList.value[0].children[0].value] cascaderValue.value = [cascaderList.value[0].value, cascaderList.value[0].children[0].value]
} }
@ -227,7 +231,7 @@ const findDataById = (obj, id) => {
// //
for (const item of obj[floor]) { for (const item of obj[floor]) {
// id // id
if (item.id === id) { if (String(item.id) === String(id)) {
return item return item
} }
} }
@ -371,6 +375,36 @@ const submitAddForm = () => {
} }
} }
const imageChangeMultiple = ref(1)
//
const handleWheel = (event) => {
// Ctrl
if (event.ctrlKey) {
//
event.preventDefault()
//
if (event.deltaY < 0) {
//
//
if (imageChangeMultiple.value < 4) {
imageChangeMultiple.value += 0.2
} else {
imageChangeMultiple.value = 3.8
message.warning('不能在放大了')
}
} else {
//
if (imageChangeMultiple.value > 0.2) {
imageChangeMultiple.value -= 0.1
} else {
imageChangeMultiple.value = 0.1
message.warning('不能在缩小了')
}
}
}
}
const emit = defineEmits(['locationSelectionDialogSuccess']) const emit = defineEmits(['locationSelectionDialogSuccess'])
defineExpose({ open }) // open defineExpose({ open }) // open
</script> </script>
@ -412,6 +446,10 @@ defineExpose({ open }) // 提供 open 方法,用于打开弹窗
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
position: absolute;
top: 0;
left: 0;
.location-selection-map-item { .location-selection-map-item {
position: absolute; position: absolute;
top: 0; top: 0;

View File

@ -592,7 +592,6 @@ const initWebsocket = () => {
socketClient.value = wsConnection.value socketClient.value = wsConnection.value
// //
socketClient.value.onMessage((message) => { socketClient.value.onMessage((message) => {
console.log(message)
if (message == 'ping' || message == 'pong') return if (message == 'ping' || message == 'pong') return
let jsonMsg = JSON.parse(message) let jsonMsg = JSON.parse(message)