From b057e19c200596a209d0ea34cf74d9d91627248f Mon Sep 17 00:00:00 2001 From: xhf <1424913779@qq.com> Date: Wed, 5 Mar 2025 15:04:39 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=AB=98=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/mapPage/realTimeMap/components/indexPage.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue index bbe39d28..3b059e48 100644 --- a/src/views/mapPage/realTimeMap/components/indexPage.vue +++ b/src/views/mapPage/realTimeMap/components/indexPage.vue @@ -3,7 +3,7 @@ class="affix-container" id="indexpage-container" :style="{ - height: heightVal * radio + 'px', + height: heightVal + 'px', cursor: isDrag ? 'pointer' : 'default', scale: isSizeRaio, transformOrigin: '0 0' @@ -279,7 +279,7 @@ @@ -797,7 +797,7 @@ const linkWebSocket = (url) => { data: JSON.parse(data[key]) }) } - // console.log('=====', dataList) + console.log('=====', dataList) testCarList.value = dataList } //告警信息 From e871f8f9e6db6153538377cb3be9114001072c6f Mon Sep 17 00:00:00 2001 From: xhf <1424913779@qq.com> Date: Wed, 5 Mar 2025 17:12:25 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B0=8F=E8=BD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../realTimeMap/components/indexPage.vue | 158 +++++++----------- 1 file changed, 61 insertions(+), 97 deletions(-) diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue index 3b059e48..bfc67a3b 100644 --- a/src/views/mapPage/realTimeMap/components/indexPage.vue +++ b/src/views/mapPage/realTimeMap/components/indexPage.vue @@ -3,7 +3,7 @@ class="affix-container" id="indexpage-container" :style="{ - height: heightVal + 'px', + height: heightVal + 'px', cursor: isDrag ? 'pointer' : 'default', scale: isSizeRaio, transformOrigin: '0 0' @@ -83,9 +83,12 @@ :key="index" :style="{ left: item.realX * radio + 'px', - top: item.realY * radio + 'px', - width: legendObj.carShow ? 40 * radio + 'px' : '0', - height: legendObj.carShow ? 22 * radio + 'px' : '0' + top: item.realY * radio + 'px', + width: legendObj.carShow ? carWidth / nowObject.showYamlJson.resolution / 100 * radio + 'px' : '0', + height: legendObj.carShow ? carHeight / nowObject.showYamlJson.resolution / 100 * radio + 'px' : '0', + transform: 'rotate(' + radianToDegree(item.data.pose2d.yaw) + 'deg)', + transition: 'all 0.2s ease-in-out', + zIndex: 9999 }" > - + @@ -423,32 +426,23 @@ const carDialogRef = ref(null) const socketClient = ref(null) const router = useRouter() // 路由对象 const emit = defineEmits(['transmitMapId']) -const storeDialogRef = ref(null) +const storeDialogRef = ref(null) // 仓库信息弹窗 const list = ref([]) -const nowObject = ref(null) -const testCarList = ref([]) -const carPointListFun = () => { - let testJson = { - type: 'map_push', - content: - '{"d0:65:78:c4:af:cc":"{\\"id\\":1,\\"macAddress\\":\\"d0:65:78:c4:af:cc\\",\\"robotModelNumber\\":\\"A-1\\",\\"pose2d\\":{\\"y\\":\\"1\\",\\"x\\":\\"2\\",\\"yaw\\":\\"30\\",\\"floor\\":\\"1\\",\\"area\\":\\"A区\\",\\"bat_soc\\":\\"40\\"}}"}' - } - let data = JSON.parse(testJson.content) - // console.log("============",data) - let dataList = [] - for (let key in data) { - dataList.push({ - macAddress: key, - data: JSON.parse(data[key]) - }) - } - // console.log('=====', dataList) - testCarList.value = dataList +const nowObject = ref(null) // 地图当前对象 父组件传过来的 +const testCarList = ref([]) //小车数组 +const carWidth = ref(40) +const carHeight = ref(22) - // let data2 = JSON.parse(data['d0:65:78:c4:af:cc']) - // console.log(data2) +const convertActualToBrowser = (pointX, pointY) => { +  const y1 = Number(nowObject.value.showYamlJson.origin[1]) + Number(nowObject.value.showYamlJson.height) * Number(nowObject.value.showYamlJson.resolution) +  let x = Math.max(Number(pointX) - Number(nowObject.value.showYamlJson.origin[0]), 0) +  let y = Math.max(y1 - Number(pointY), 0) + +  return { +    x :(x / nowObject.value.showYamlJson.resolution) - (carWidth.value / nowObject.value.showYamlJson.resolution / 100/2), +    y: (y / nowObject.value.showYamlJson.resolution) - (carHeight.value / nowObject.value.showYamlJson.resolution / 100/2) +  } } - //是否可以拖拽 const isDrag = ref(false) const changeIsDrag = () => { @@ -462,6 +456,7 @@ const changeIsDrag = () => { }) } +//点击选中线 如果选中就变成非选中 否则相反 const handleChooseRoute = (val, i) => { // console.log('============================', val) if (lineList.value.length) { @@ -603,36 +598,7 @@ const toggleFullScreen = () => { } }) } -//获取地图区域 -const getList = async () => { - let data = await MapApi.getPositionMapGetMap() - let mapList = [] - for (let key in data) { - mapList.push({ - floor: key, - label: key + '层', - value: key, - children: data[key] - }) - } - if (mapList.length) { - mapList.forEach((item) => { - if (item.children.length) { - item.children.forEach((child) => { - child.label = child.area - child.value = child.id - }) - } - }) - } - list.value = mapList - // console.log(list.value, data) - //默认取第一个 - if (data[1][0]) { - getMapData(data[1][0]) - } -} //库位双击 const storeClick = async (item) => { // console.log(item) @@ -660,7 +626,7 @@ const getPositionMapListFun = async (positionMapId) => { // console.log(data) pointList.value = data - console.log('=======================', pointList.value) + // console.log('=======================', pointList.value) pointList.value.forEach((item) => { if (item.type === 1) { item.locationDeep = 40 @@ -684,24 +650,7 @@ const getPositionMapListFun = async (positionMapId) => { } else if (item.type === 7) { } }) - // let lineStyle = calculateDistanceAndAngle( - // { - // left: pointList.value[0].locationX, - // top: pointList.value[0].locationY - // }, - // { - // left: pointList.value[1].locationX, - // top: pointList.value[1].locationY - // } - // ) - // console.log(lineStyle) - // lineList.value = [ - // { - // ...lineStyle, - // color: '#1677ff', - // height: 2 - // } - // ] + } const draggableElement = ref(null) const resetPosition = () => { @@ -789,7 +738,7 @@ const linkWebSocket = (url) => { // 车辆信息 if (jsonMsg.type == 'map_push') { let data = JSON.parse(jsonMsg.content) - console.log("======车位点======",data) + console.log('======车位点======', data) let dataList = [] for (let key in data) { dataList.push({ @@ -797,8 +746,9 @@ const linkWebSocket = (url) => { data: JSON.parse(data[key]) }) } - console.log('=====', dataList) + // console.log('=====', dataList) testCarList.value = dataList + computedRatio() } //告警信息 if (jsonMsg.type == 'agv_warn') { @@ -807,18 +757,29 @@ const linkWebSocket = (url) => { h( 'div', { - style:'background-color: #C60606;', + style: 'background-color: #C60606;' }, - [ - h('span', { style: 'color: rgba(255,255,255,0.88);font-size: 14px;' }, `${JSON.parse(jsonMsg.content)}`), - h('span', {onClick: () => lookError(), style: 'color: rgba(255,255,255,0.88);font-size: 14px;cursor: pointer;text-decoration-line: underline;margin-left: 32px;' }, '详情'), + [ + h( + 'span', + { style: 'color: rgba(255,255,255,0.88);font-size: 14px;' }, + `${JSON.parse(jsonMsg.content)}` + ), + h( + 'span', + { + onClick: () => lookError(), + style: + 'color: rgba(255,255,255,0.88);font-size: 14px;cursor: pointer;text-decoration-line: underline;margin-left: 32px;' + }, + '详情' + ) ] - ), showClose: false, duration: 3000, // 让消息持续显示，直到用户关闭 type: 'info', - customClass: 'indexpage-custom-message-style', + customClass: 'indexpage-custom-message-style' }) } }) @@ -839,9 +800,13 @@ const sendMessage = () => { const disconnect = () => { socketClient.value.disconnect() } +const emitParent = () => { + getMapData(nowObject.value) +} //获取扫描图 const getMapData = async (item) => { // console.log('============', JSON.parse(item.yamlJson)) + testCarList.value = [] nowObject.value = JSON.parse(JSON.stringify(item)) nowObject.value.showYamlJson = JSON.parse(item.yamlJson) let websoketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${nowObject.value.floor}&area=${nowObject.value.area}` @@ -861,6 +826,13 @@ const getMapData = async (item) => { computedRatio() getMapLineList() } +//偏航率斜率算旋转 +const radianToDegree = (radian) =>{ + // 将弧度转换为角度 + const degree = radian * (180 / Math.PI); + // 返回带有单位 'deg' 的 CSS 角度值 + return `${degree}`; +} const heightVal = ref(0) const widthVal = ref(0) const radio = ref(1) @@ -873,17 +845,12 @@ const computedRatio = () => { // console.log("原始地图的宽高",JSON.parse(nowObject.value.yamlJson)) if (testCarList.value.length) { testCarList.value.forEach((item) => { + console.log('dayin', item) item.originWidth = width item.originHeight = height item.origin = JSON.parse(nowObject.value.yamlJson).origin - item.realX = convertToFrontendCoordinates(item.origin, width, height, [ - item.data.pose2d.x, - item.data.pose2d.y - ]).left - item.realY = convertToFrontendCoordinates(item.origin, width, height, [ - item.data.pose2d.x, - item.data.pose2d.y - ]).top + item.realX = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).x + item.realY = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).y }) // console.log('当前数据', testCarList.value) } @@ -918,6 +885,7 @@ const computedRatio = () => { }) } +// 获取地图连线列表 const getMapLineList = () => { MapApi.mapLineListGet({ positionMapId: nowObject.value.id }).then((res) => { // console.log(res) @@ -925,6 +893,7 @@ const getMapLineList = () => { }) } +// 获取图片尺寸 const getImageSize = (url) => { return new Promise((resolve, reject) => { const img = new Image() @@ -1022,7 +991,6 @@ const observeWidthChange = (id, callback) => { let stopObserving defineExpose({ getMapData }) // 提供 open 方法，用于打开弹窗 onMounted(() => { - // carPointListFun() // getList() window.addEventListener('resize', computedRatio) stopObserving = observeWidthChange('indexpage-container', (newWidth) => { @@ -1137,11 +1105,9 @@ onUnmounted(() => { position: fixed; bottom: 26px; z-index: 999; - } .affix-container-left-box { width: 144px; - } .affix-container-left-box-item-box { width: 100%; @@ -1212,6 +1178,4 @@ onUnmounted(() => { flex-shrink: 0; margin-left: 8px; } - - From 9421ed8a1ae58a065741ae734c694a681681290e Mon Sep 17 00:00:00 2001 From: xhf <1424913779@qq.com> Date: Wed, 5 Mar 2025 17:15:28 +0800 Subject: [PATCH 3/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B0=8F=E8=BD=A6?= =?UTF-8?q?=E5=B0=BA=E5=AF=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/mapPage/realTimeMap/components/indexPage.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue index bfc67a3b..9be49cd4 100644 --- a/src/views/mapPage/realTimeMap/components/indexPage.vue +++ b/src/views/mapPage/realTimeMap/components/indexPage.vue @@ -430,8 +430,8 @@ const storeDialogRef = ref(null) // 仓库信息弹窗 const list = ref([]) const nowObject = ref(null) // 地图当前对象 父组件传过来的 const testCarList = ref([]) //小车数组 -const carWidth = ref(40) -const carHeight = ref(22) +const carWidth = ref(60) +const carHeight = ref(32) const convertActualToBrowser = (pointX, pointY) => {   const y1 = Number(nowObject.value.showYamlJson.origin[1]) + Number(nowObject.value.showYamlJson.height) * Number(nowObject.value.showYamlJson.resolution) From 24d854e0ee11928f5fc290723c3459f9c30246d1 Mon Sep 17 00:00:00 2001 From: xhf <1424913779@qq.com> Date: Wed, 5 Mar 2025 17:30:29 +0800 Subject: [PATCH 4/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B0=8F=E8=BD=A6?= =?UTF-8?q?=E8=BF=90=E5=8A=A8=E6=97=B6=E9=97=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/mapPage/realTimeMap/components/indexPage.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue index 9be49cd4..b3100ff1 100644 --- a/src/views/mapPage/realTimeMap/components/indexPage.vue +++ b/src/views/mapPage/realTimeMap/components/indexPage.vue @@ -87,7 +87,7 @@ width: legendObj.carShow ? carWidth / nowObject.showYamlJson.resolution / 100 * radio + 'px' : '0', height: legendObj.carShow ? carHeight / nowObject.showYamlJson.resolution / 100 * radio + 'px' : '0', transform: 'rotate(' + radianToDegree(item.data.pose2d.yaw) + 'deg)', - transition: 'all 0.2s ease-in-out', + transition: 'all 0.4s linear 0s', zIndex: 9999 }" > From a5476540ae7fde951371fa17f9466e5786f90042 Mon Sep 17 00:00:00 2001 From: xhf <1424913779@qq.com> Date: Wed, 5 Mar 2025 18:15:30 +0800 Subject: [PATCH 5/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=A7=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/mapPage/realTimeMap/components/indexPage.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue index b3100ff1..4c478c15 100644 --- a/src/views/mapPage/realTimeMap/components/indexPage.vue +++ b/src/views/mapPage/realTimeMap/components/indexPage.vue @@ -42,7 +42,7 @@ :x2="Number(item.endPointX) * radio" :y2="Number(item.endPointY) * radio" :stroke="item.isSelect ? '#f48924' : '#00329F'" - :stroke-width="5 * radio" + :stroke-width="5 / nowObject.showYamlJson.resolution / 100* radio" :marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''" marker-end="url(#single-arrow)" @click="handleChooseRoute(item, index)" @@ -51,7 +51,7 @@ :d="getLineMidArrowPath(item)" stroke="none" fill="black" - stroke-width="4" + :stroke-width="4 / nowObject.showYamlJson.resolution / 100 * radio" :marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''" :marker-end=" item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)' @@ -62,7 +62,7 @@ Date: Wed, 5 Mar 2025 18:38:39 +0800 Subject: [PATCH 6/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../realTimeMap/components/indexPage.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue index 4c478c15..ea6c6c90 100644 --- a/src/views/mapPage/realTimeMap/components/indexPage.vue +++ b/src/views/mapPage/realTimeMap/components/indexPage.vue @@ -42,7 +42,7 @@ :x2="Number(item.endPointX) * radio" :y2="Number(item.endPointY) * radio" :stroke="item.isSelect ? '#f48924' : '#00329F'" - :stroke-width="5 / nowObject.showYamlJson.resolution / 100* radio" + :stroke-width="(5 / nowObject.showYamlJson.resolution / 100 * radio)>1.5?(5 / nowObject.showYamlJson.resolution / 100 * radio):1.5" :marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''" marker-end="url(#single-arrow)" @click="handleChooseRoute(item, index)" @@ -51,7 +51,7 @@ :d="getLineMidArrowPath(item)" stroke="none" fill="black" - :stroke-width="4 / nowObject.showYamlJson.resolution / 100 * radio" + :stroke-width="(5 / nowObject.showYamlJson.resolution / 100 * radio)>1.5?(5 / nowObject.showYamlJson.resolution / 100 * radio):1.5" :marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''" :marker-end=" item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)' @@ -62,7 +62,7 @@
@@ -262,8 +262,8 @@ class="indexpage-container-box-point-item-inner" v-if="item.type == 6" :style="{ - width: 150 * radio + 'px', - height: 150 * radio + 'px' + width: item.locationWide / nowObject.showYamlJson.resolution / 100 * radio + 'px', + height: item.locationDeep / nowObject.showYamlJson.resolution / 100 * radio + 'px' }" >
@@ -288,8 +288,8 @@ >