整体面板
This commit is contained in:
yyy
parent
f99e5d0ff4
commit
922eb8bdbe
@ -88,6 +88,7 @@
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- 其它类型节点继续DOM渲染 -->
|
||||
|
||||
<div
|
||||
class="map-point-list"
|
||||
v-for="(item, index) in filteredMapPoints"
|
||||
@ -172,18 +173,6 @@
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<div
|
||||
v-if="
|
||||
item.type === 1 &&
|
||||
legendObj.sortNumberShow &&
|
||||
item.sortNum &&
|
||||
sortNumberShow
|
||||
"
|
||||
class="sort-num"
|
||||
:style="getSortNumStyle(item, index)"
|
||||
>
|
||||
{{ item.sortNum }}
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
item.type !== 1 &&
|
||||
@ -196,19 +185,9 @@
|
||||
>
|
||||
{{ item.sortNum }}
|
||||
</div>
|
||||
<div
|
||||
v-if="item.type === 1"
|
||||
:style="{
|
||||
width: Number(item.locationWidePx) * Number(radio) + 'px',
|
||||
height: Number(item.locationDeepPx) * Number(radio) + 'px',
|
||||
backgroundColor: '#000',
|
||||
borderRadius: '50%'
|
||||
}"
|
||||
>
|
||||
</div>
|
||||
<!-- 库位点 -->
|
||||
<img
|
||||
v-else-if="item.type === 2"
|
||||
v-if="item.type === 2"
|
||||
src="@/assets/imgs/indexPage/bin-location.png"
|
||||
:style="nodeStyle(item, index)"
|
||||
@dblclick="storeClick(item)"
|
||||
@ -367,33 +346,7 @@ const nodeStyle = (item, index) => {
|
||||
borderRadius: '3px'
|
||||
}
|
||||
}
|
||||
//sortNum路径点的样式
|
||||
const getSortNumStyle = (item, index) => {
|
||||
let leftNum = 0
|
||||
if (item.sortNum.toString().length === 1) {
|
||||
leftNum = 3
|
||||
} else if (item.sortNum.toString().length === 2) {
|
||||
leftNum = 7
|
||||
} else if (item.sortNum.toString().length === 3) {
|
||||
leftNum = 10
|
||||
} else if (item.sortNum.toString().length === 4) {
|
||||
leftNum = 14
|
||||
} else if (item.sortNum.toString().length === 5) {
|
||||
leftNum = 18
|
||||
} else if (item.sortNum.toString().length === 6) {
|
||||
leftNum = 21
|
||||
} else if (item.sortNum.toString().length === 7) {
|
||||
leftNum = 25
|
||||
} else if (item.sortNum.toString().length === 8) {
|
||||
leftNum = 28
|
||||
} else if (item.sortNum.toString().length === 9) {
|
||||
leftNum = 31
|
||||
}
|
||||
return {
|
||||
left: Number(item.locationWidePx) / 2 - leftNum + 'px',
|
||||
top: 6 + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
//sortNum非路径点的样式
|
||||
const getSortNumLocationStyle = (item, index) => {
|
||||
let leftNum = 0
|
||||
@ -435,12 +388,15 @@ const filterTypeFun = (deviceType) => {
|
||||
const convertActualCarToBrowser = (pointX, pointY) => {
|
||||
const resolution = Number(imgBgObj.resolution)
|
||||
const [originX, originY] = imgBgObj.origin.map(Number)
|
||||
const imgHeight = Number(imgBgObj.height)
|
||||
// 使用原始高度计算，不使用可能已经被radio.value缩放过的imgBgObj.height
|
||||
const originalHeight = props.isFullScreen
|
||||
? Number(imgBgObj.height) / Number(radio.value)
|
||||
: Number(imgBgObj.height)
|
||||
const carW = Number(carWidth.value)
|
||||
const carH = Number(carHeight.value)
|
||||
|
||||
// 地图原点在左下角，y轴向上，需转换为浏览器坐标系（左上角，y轴向下）
|
||||
const yBottom = originY + imgHeight * resolution
|
||||
const yBottom = originY + originalHeight * resolution
|
||||
const xPx = Math.max(Number(pointX) - originX, 0) / resolution
|
||||
const yPx = Math.max(yBottom - Number(pointY), 0) / resolution
|
||||
|
||||
@ -480,15 +436,6 @@ const changeIsDrag = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 获取曲线的路径
|
||||
const getCurvePath = (curve) => {
|
||||
let startPointX = Number(curve.startPointX) * radio.value
|
||||
let startPointY = Number(curve.startPointY) * radio.value
|
||||
let endPointX = Number(curve.endPointX) * radio.value
|
||||
let endPointY = Number(curve.endPointY) * radio.value
|
||||
return `M ${startPointX} ${startPointY} C ${curve.beginControlX * radio.value} ${curve.beginControlY * radio.value}, ${curve.endControlX * radio.value} ${curve.endControlY * radio.value}, ${endPointX} ${endPointY}`
|
||||
}
|
||||
|
||||
//放大缩小
|
||||
const isSizeRadio = ref(1)
|
||||
const changeSize = (type) => {
|
||||
@ -643,14 +590,12 @@ const initWebsocket = () => {
|
||||
if (jsonMsg.type == 'map_push') {
|
||||
requestAnimationFrame(() => {
|
||||
let data = JSON.parse(jsonMsg.content)
|
||||
// console.log(data)
|
||||
// console.log(data, dayjs().format('HH:mm:ss SSS'))
|
||||
|
||||
let dataList = Object.entries(data).map(([key, value]) => ({
|
||||
macAddress: key,
|
||||
data: JSON.parse(value)
|
||||
}))
|
||||
testCarList.value = throttledUpdateCarList(testCarList.value, dataList, imgBgObj)
|
||||
// console.log(data, dayjs().format('HH:mm:ss SSS'))
|
||||
})
|
||||
}
|
||||
//告警信息
|
||||
@ -719,14 +664,12 @@ const mergeArraysWithoutDelete = (arr1, arr2) => {
|
||||
|
||||
// 优化车辆位置计算
|
||||
const processCarData = (car, mapInfo) => {
|
||||
// 保存原始分辨率信息用于调试
|
||||
const originalResolution = mapInfo.resolution
|
||||
const browserPos = convertActualCarToBrowser(car.data.pose2d.x, car.data.pose2d.y)
|
||||
|
||||
return {
|
||||
...car,
|
||||
originWidth: mapInfo.width,
|
||||
originHeight: mapInfo.height,
|
||||
origin: mapInfo.origin,
|
||||
realX: browserPos.x,
|
||||
realY: browserPos.y,
|
||||
robotNo: car.data.pose2d.robotNo,
|
||||
style: {
|
||||
left: browserPos.x * radio.value + 'px',
|
||||
@ -770,17 +713,14 @@ const computedRatio = () => {
|
||||
if (props.isFullScreen) {
|
||||
let width = getElementWidthByClass('index-page-container')
|
||||
|
||||
testCarList.value.forEach((item) => {
|
||||
item.originWidth = imgBgObj.width
|
||||
item.originHeight = imgBgObj.height
|
||||
item.origin = imgBgObj.origin
|
||||
item.realX = convertActualCarToBrowser(item.data.pose2d.x, item.data.pose2d.y).x
|
||||
item.realY = convertActualCarToBrowser(item.data.pose2d.x, item.data.pose2d.y).y
|
||||
})
|
||||
|
||||
// 记录原始尺寸和新的缩放比例
|
||||
const originalWidth = imgBgObj.width
|
||||
const originalHeight = imgBgObj.height
|
||||
radio.value = width / imgBgObj.width
|
||||
imgBgObj.width = imgBgObj.width * radio.value
|
||||
imgBgObj.height = imgBgObj.height * radio.value
|
||||
|
||||
// 只在视觉上应用缩放，但保留原始尺寸用于坐标计算
|
||||
imgBgObj.width = originalWidth * radio.value
|
||||
imgBgObj.height = originalHeight * radio.value
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -818,7 +758,7 @@ const getMapData = async (item) => {
|
||||
imgBgObj.origin = yamlJson.origin
|
||||
imgBgObj.resolution = yamlJson.resolution
|
||||
//获取地图
|
||||
getMapDownloadPng(imgBgObj)
|
||||
await getMapDownloadPng(imgBgObj)
|
||||
//初始化Websocket
|
||||
initWebsocket()
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user