发起任务在地图选择库位时,弹窗的地图改为可以使用鼠标滚轮放大缩小
This commit is contained in:
parent
306450e179
commit
c349dcdbe3
@ -22,10 +22,12 @@
|
||||
<el-icon @click="close" class="mr-4"><Close /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<div class="location-selection-dialog-map">
|
||||
<div class="location-selection-dialog-map" @wheel="handleWheel">
|
||||
<div
|
||||
class="location-selection-map"
|
||||
:style="{
|
||||
transform: `scale(${imageChangeMultiple})`,
|
||||
transformOrigin: '0 0',
|
||||
width: imgBgObj.showWidth + 'px',
|
||||
height: imgBgObj.showHeight + 'px',
|
||||
backgroundImage: `url(${imgBgObj.imgUrl})`
|
||||
@ -191,7 +193,9 @@ const getMapList = async () => {
|
||||
//如果传了地图id
|
||||
if (props.positionMapId) {
|
||||
let item = findDataById(res, props.positionMapId)
|
||||
if (item) {
|
||||
cascaderValue.value = [item.floor, item.id]
|
||||
}
|
||||
} else {
|
||||
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]) {
|
||||
// 如果找到匹配的 id,返回该数据
|
||||
if (item.id === id) {
|
||||
if (String(item.id) === String(id)) {
|
||||
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'])
|
||||
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
||||
</script>
|
||||
@ -412,6 +446,10 @@ defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.location-selection-map-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
@ -592,7 +592,6 @@ const initWebsocket = () => {
|
||||
socketClient.value = wsConnection.value
|
||||
// 监听消息
|
||||
socketClient.value.onMessage((message) => {
|
||||
console.log(message)
|
||||
if (message == 'ping' || message == 'pong') return
|
||||
let jsonMsg = JSON.parse(message)
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user