修改小车
This commit is contained in:
xhf
parent
b057e19c20
commit
e871f8f9e6
@ -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
|
||||
}"
|
||||
>
|
||||
<img
|
||||
@ -396,7 +399,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<storeDialog ref="storeDialogRef" @success="getList" />
|
||||
<storeDialog ref="storeDialogRef" @success="emitParent" />
|
||||
<carDialog ref="carDialogRef" />
|
||||
</template>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user