diff --git a/src/assets/location-icon.png b/src/assets/location-icon.png new file mode 100644 index 00000000..d67c6232 Binary files /dev/null and b/src/assets/location-icon.png differ diff --git a/src/assets/warehouse-map.png b/src/assets/warehouse-map.png new file mode 100644 index 00000000..5a35ca6d Binary files /dev/null and b/src/assets/warehouse-map.png differ diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index 11bd26b0..471f041d 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -62,7 +62,7 @@ export const useAppStore = defineStore('app', { tagsViewIcon: true, // 是否显示标签图标 logo: true, // logo fixedHeader: true, // 固定toolheader - footer: true, // 显示页脚 + footer: false, // 显示页脚 greyMode: false, // 是否开始灰色模式，用于特殊悼念日 fixedMenu: wsCache.get('fixedMenu') || false, // 是否固定菜单 layout: wsCache.get(CACHE_KEY.LAYOUT) || 'classic', // layout布局 diff --git a/src/views/mapPage/realTimeMap/框选demo.vue b/src/views/mapPage/example/框选demo.vue similarity index 100% rename from src/views/mapPage/realTimeMap/框选demo.vue rename to src/views/mapPage/example/框选demo.vue diff --git a/src/views/mapPage/realTimeMap/测距.vue b/src/views/mapPage/example/测距demo.vue similarity index 100% rename from src/views/mapPage/realTimeMap/测距.vue rename to src/views/mapPage/example/测距demo.vue diff --git a/src/views/mapPage/example/第一版编辑地图.vue b/src/views/mapPage/example/第一版编辑地图.vue new file mode 100644 index 00000000..ce4f4f07 --- /dev/null +++ b/src/views/mapPage/example/第一版编辑地图.vue @@ -0,0 +1,1413 @@ + + + + + diff --git a/src/views/mapPage/realTimeMap/贝塞尔曲线demo.vue b/src/views/mapPage/example/贝塞尔曲线demo.vue similarity index 100% rename from src/views/mapPage/realTimeMap/贝塞尔曲线demo.vue rename to src/views/mapPage/example/贝塞尔曲线demo.vue diff --git a/src/views/mapPage/example/转换成实际坐标demo.vue b/src/views/mapPage/example/转换成实际坐标demo.vue new file mode 100644 index 00000000..cc418af3 --- /dev/null +++ b/src/views/mapPage/example/转换成实际坐标demo.vue @@ -0,0 +1,151 @@ + + + + + diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue index f22adc35..589ce004 100644 --- a/src/views/mapPage/realTimeMap/editMap.vue +++ b/src/views/mapPage/realTimeMap/editMap.vue @@ -115,24 +115,23 @@ -
+
-
resizeEnd(x, y, width, height, item, index)" @activated="() => activatedHandle(item, index)" @deactivated="deactivatedHandle" - :draggable="item.draggable" - :resizable="item.resizable" - :rotatable="item.rotatable" + :draggable="item.draggable && !state.prohibitedOperation" + :resizable="item.resizable && !state.prohibitedOperation" + :rotatable="item.rotatable && !state.prohibitedOperation" :lock-aspect-ratio="item.lockAspectRatio" style="border: none" > @@ -212,7 +211,7 @@ src="https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png" alt="" :style="{ - width: item.locationWide + 'px', + width: item.locationWidee + 'px', height: item.locationDeep + 'px', border: currentItemIndex === index ? '1px dashed #000' : 'none' }" @@ -324,6 +323,7 @@ />
+ { currentItemIndex.value = index //节点编辑 - if (toolbarSwitchType.value === 'editNode' && item.type !== 7) { + if (toolbarSwitchType.value === 'editNode') { editNodePropertiesRef.value.open(JSON.parse(JSON.stringify(item))) } } @@ -476,7 +476,7 @@ const mapClick = (e) => { locationDeep: 16, locationWide: 16, angle: 0, - draggable: false, + draggable: true, resizable: false, rotatable: false, lockAspectRatio: false, //横纵比 @@ -737,7 +737,9 @@ const state = reactive({ inputBoxValue: '', //输入的值 isShowLayer: false, //图层显示 measureDistancesPoints: [], // 存储点击的点位 - measureDistancesNum: 0 // 存储两点之间的距离 + measureDistancesNum: 0, // 存储两点之间的距离 + imageChangeMultiple: 1, //图片放大缩小的倍数 + prohibitedOperation: false //禁止操作 在框选测距等操作时，禁止所有拖动等操作 }) const toolbarClick = (item) => { let type = item.switchType @@ -782,6 +784,17 @@ const toolbarClick = (item) => { state.measureDistancesNum = 0 // 清空存储两点之间的距离 } + //禁止操作 在框选测距等操作时，禁止所有拖动等操作 + if ( + toolbarSwitchType.value === 'ranging' || + toolbarSwitchType.value === 'lineLibrary' || + toolbarSwitchType.value === 'region' + ) { + state.prohibitedOperation = true + } else { + state.prohibitedOperation = false + } + switch (type) { case 'open': // 打开 @@ -903,18 +916,16 @@ const toolbarClick = (item) => { break case 'larger': //放大 - if (imgBgObj.width < 10000) { - imgBgObj.width *= 1.2 - imgBgObj.height *= 1.2 + if (state.imageChangeMultiple < 3) { + state.imageChangeMultiple *= 1.2 } else { message.warning('不能在放大了') } break case 'smaller': //缩小 - if (imgBgObj.width > 500) { - imgBgObj.width *= 0.8 - imgBgObj.height *= 0.8 + if (state.imageChangeMultiple > 0.3) { + state.imageChangeMultiple *= 0.8 } else { message.warning('不能在缩小了') } @@ -964,8 +975,8 @@ const startDrawSelection = (event) => { const backgroundRect = mapBackgroundRef.value.getBoundingClientRect() - const x = Number(event.clientX) - backgroundRect.left - const y = event.clientY - backgroundRect.top + const x = disposeEventPoints(event).x + const y = disposeEventPoints(event).y // 确保点击在背景区域内 if (x >= 0 && x <= backgroundRect.width && y >= 0 && y <= backgroundRect.height) { @@ -981,9 +992,8 @@ const startDrawSelection = (event) => { const updateDrawSelection = (event) => { if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return if (state.drawSelectionAreaShow) { - const backgroundRect = mapBackgroundRef.value.getBoundingClientRect() - const x = event.clientX - backgroundRect.left - const y = event.clientY - backgroundRect.top + const x = disposeEventPoints(event).x + const y = disposeEventPoints(event).y state.drawSelectionAreaBox.width = Number(x) - Number(state.drawSelectionStartPoint.x) state.drawSelectionAreaBox.height = Number(y) - Number(state.drawSelectionStartPoint.y) @@ -1112,33 +1122,26 @@ const computedLineWidth = computed(() => { // 处理点击事件 const measureDistancesClick = (event) => { // 获取点击点相对于整个页面的坐标 - const x = event.clientX - const y = event.clientY + + const x = disposeEventPoints(event).x + const y = disposeEventPoints(event).y // 检查点击是否发生在背景区域内 - const backgroundRect = mapBackgroundRef.value.getBoundingClientRect() - if ( - x >= backgroundRect.left && - x <= backgroundRect.right && - y >= backgroundRect.top && - y <= backgroundRect.bottom - ) { + if (state.measureDistancesPoints.length === 2) { + // 如果已经有两个点，清空信息 + state.measureDistancesPoints = [] + state.measureDistancesNum = null + } else { + // 记录点击的点位（相对于背景区域的坐标） + const offsetX = x + const offsetY = y + state.measureDistancesPoints.push({ x: offsetX, y: offsetY }) if (state.measureDistancesPoints.length === 2) { - // 如果已经有两个点，清空信息 - state.measureDistancesPoints = [] - state.measureDistancesNum = null - } else { - // 记录点击的点位（相对于背景区域的坐标） - const offsetX = x - backgroundRect.left - const offsetY = y - backgroundRect.top - state.measureDistancesPoints.push({ x: offsetX, y: offsetY }) - if (state.measureDistancesPoints.length === 2) { - // 计算两点之间的距离 - state.measureDistancesNum = calculateDistance( - state.measureDistancesPoints[0], - state.measureDistancesPoints[1] - ) - } + // 计算两点之间的距离 + state.measureDistancesNum = calculateDistance( + state.measureDistancesPoints[0], + state.measureDistancesPoints[1] + ) } } } @@ -1150,7 +1153,9 @@ const imgBgObj = reactive({ width: '', height: '', floor: '', - area: '' + area: '', + resolution: 0.05, + origin: [-54.4, -34.2] }) //接收参数 const { query } = useRoute() // 查询参数 @@ -1201,7 +1206,7 @@ const getAllNodeList = async () => { item.dataList = [] item.locationDeep = 16 item.locationWide = 16 - item.draggable = false + item.draggable = true item.resizable = false item.rotatable = false item.lockAspectRatio = true @@ -1211,7 +1216,7 @@ const getAllNodeList = async () => { item.locationDeep = item.dataList[0].locationDeep item.locationWide = item.dataList[0].locationWide item.draggable = true - item.resizable = false + item.resizable = true item.rotatable = false item.lockAspectRatio = true } else if (item.type === 3 || item.type === 4) { @@ -1220,7 +1225,7 @@ const getAllNodeList = async () => { item.locationDeep = item.dataObj.locationDeep item.locationWide = item.dataObj.locationWide item.draggable = true - item.resizable = false + item.resizable = true item.rotatable = false item.lockAspectRatio = true } else if (item.type === 7) { @@ -1285,33 +1290,50 @@ const layerSelectionSuccess = (typeList) => { }) } +//处理数据 +const disposeEventPoints = (event) => { + const rect = mapBackgroundRef.value.getBoundingClientRect() + const scrollLeft = mapBackgroundRef.value.scrollLeft // 水平滚动条偏移量 + const scrollTop = mapBackgroundRef.value.scrollTop // 垂直滚动条偏移量 + const devicePixelRatio = window.devicePixelRatio || 1 + + // 计算页面坐标（考虑设备像素比和滚动条偏移量） + const x = (event.clientX - rect.left + scrollLeft) / state.imageChangeMultiple / devicePixelRatio + const y = (event.clientY - rect.top + scrollTop) / state.imageChangeMultiple / devicePixelRatio + + // 转换为实际坐标 + const actualLocationX = (x - imgBgObj.origin[0]) / imgBgObj.resolution + const actualLocationY = (y - imgBgObj.origin[1]) / imgBgObj.resolution + + return { + x, + y, + actualLocationX, + actualLocationY + } +} + onMounted(() => { getMapList() }) diff --git a/src/views/mapPage/realTimeMap/test.vue b/src/views/mapPage/realTimeMap/test.vue index d569339f..0a029781 100644 --- a/src/views/mapPage/realTimeMap/test.vue +++ b/src/views/mapPage/realTimeMap/test.vue @@ -17,10 +17,7 @@
示例图片 - -
+ +
+ 距离：{{ distance.toFixed(2) }} 像素 +
- -
- - -
+ +
- - -
-