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;
}
-
-