feat: 加载站点
This commit is contained in:
parent
ea9314581e
commit
7c9f813246
@ -178,7 +178,7 @@ export const drawAdvancedAreaList = (canvasCtx, map, dataStore) => {
|
||||
centroidWorldX /= vertices.length; // 求平均得到质心 X
|
||||
centroidWorldY /= vertices.length; // 求平均得到质心 Y
|
||||
const centroidScreen = worldToScreen(centroidWorldX, centroidWorldY, store);
|
||||
canvasCtx.font = '500 8px "JetBrains Mono"'; // 标签字体
|
||||
canvasCtx.font = '500 32px "JetBrains Mono"'; // 标签字体
|
||||
canvasCtx.fillStyle = strokeColorCss; // 与描边同色
|
||||
canvasCtx.textAlign = 'center'; // 居中对齐
|
||||
canvasCtx.fillText(area.instanceName || '', centroidScreen.x, centroidScreen.y + 3); // 绘制文字
|
||||
@ -445,7 +445,7 @@ export const drawAdvancedPointList = (canvasCtx, map, dataStore) => {
|
||||
}
|
||||
|
||||
// ── 名称标签 ──
|
||||
canvasCtx.font = '500 7px "JetBrains Mono"';
|
||||
canvasCtx.font = '500 12px "JetBrains Mono"';
|
||||
canvasCtx.fillStyle = hexToCssRgba(pointColorHex, 0.7);
|
||||
canvasCtx.textAlign = 'center';
|
||||
canvasCtx.fillText(advPoint.instanceName || '', pointScreen.x, pointScreen.y - diamondRadius - 4);
|
||||
@ -560,13 +560,14 @@ export const buildOccupancyGridImage = (parsedMap, showEdgeGlow) => {
|
||||
}
|
||||
|
||||
export class MobileRobot {
|
||||
constructor(id, name, x, y, angleRad = 0, color= "#00D4FF", imageUrl = null) {
|
||||
constructor(id, name, x, y, angleRad = 0, color = '#15ff00', imageUrl = null) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.x = x; // 世界坐标X (米)
|
||||
this.y = y; // 世界坐标Y (米)
|
||||
this.angle = angleRad; // 朝向弧度
|
||||
this.imageUrl = imageUrl || '/bot.svg';
|
||||
this.color = color; // 颜色
|
||||
// 预加载图片 (可选)
|
||||
this.imgElement = null;
|
||||
if (this.imageUrl) {
|
||||
@ -596,8 +597,8 @@ export class MobileRobot {
|
||||
}
|
||||
|
||||
// 绘制到canvas上下文 (屏幕坐标)
|
||||
draw(ctx, screenX, screenY, scale = 1) {
|
||||
const size = 18; // 绘制大小px
|
||||
draw(ctx, screenX, screenY, color, scale = 1) {
|
||||
const size = 24; // 绘制大小px
|
||||
if (this.imgElement && this.imgElement.complete) {
|
||||
ctx.save();
|
||||
ctx.translate(screenX, screenY);
|
||||
@ -607,9 +608,9 @@ export class MobileRobot {
|
||||
}
|
||||
// 名字标签
|
||||
ctx.font = '12px "JetBrains Mono"';
|
||||
ctx.fillStyle = '#a0c0f0';
|
||||
ctx.fillStyle = color;
|
||||
ctx.shadowBlur = 0;
|
||||
ctx.fillText(this.name, screenX - 30, screenY - 20);
|
||||
ctx.fillText(this.name, screenX, screenY - 20);
|
||||
}
|
||||
|
||||
// 更新位置
|
||||
|
||||
@ -247,7 +247,7 @@ const drawAllRobots = (ctx) => {
|
||||
if (screenPos.x + 20 < 0 || screenPos.x - 20 > inspectionStore.canvasWidthPx || screenPos.y + 20 < 0 || screenPos.y - 20 > inspectionStore.canvasHeightPx) {
|
||||
continue;
|
||||
}
|
||||
robot.draw(ctx, screenPos.x, screenPos.y);
|
||||
robot.draw(ctx, screenPos.x, screenPos.y, robot.color, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -313,7 +313,7 @@ const updateTooltipDisplay = (hitResult) => {
|
||||
if (hitResult.kind === 'robot') {
|
||||
const robot = hitResult.robot;
|
||||
title = `${robot.name}`;
|
||||
details = `<div class="tooltip-detail">位置: (${robot.x.toFixed(3)}, ${robot.y.toFixed(3)})</div>
|
||||
details = `<div class="tooltip-detail">位置: (${robot.x}, ${robot.y})</div>
|
||||
<div class="tooltip-detail">朝向: ${(robot.angle * 180 / Math.PI).toFixed(1)}°</div>
|
||||
<div class="tooltip-detail">ID: ${robot.id}</div>`;
|
||||
}
|
||||
@ -375,8 +375,6 @@ const loadSourceMap = async () => {
|
||||
const addRobot = (id, name,x, y, angleRad, color) => {
|
||||
const map = applicationState.parsedMap;
|
||||
// 放置于地图中央附近
|
||||
// const centerX = (map.originX + map.maxX) / 2;
|
||||
// const centerY = (map.originY + map.maxY) / 2;
|
||||
const robot = new MobileRobot(id, name, x, y, angleRad, color);
|
||||
applicationState.robots.push(robot);
|
||||
}
|
||||
@ -389,10 +387,6 @@ const moveRobot = (robot, dx, dy, dtheta = 0) => {
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
watch(() => props.robotList,
|
||||
(newVal) => {
|
||||
if (props.robotList.length > 0) {
|
||||
loadSourceMap()
|
||||
requestAnimationFrame(renderFrame);
|
||||
@ -402,10 +396,35 @@ watch(() => props.robotList,
|
||||
bindEvent()
|
||||
props.robotList.forEach(item => {
|
||||
const [x, y, angle] = item.currentPosition.split(',')
|
||||
addRobot(item.id, item.robotName, x, y, angle, '#00D4FF')
|
||||
addRobot(item.id, item.robotName, x, y, angle, colorList[applicationState.robots.length % colorList.length])
|
||||
})
|
||||
}, 300)
|
||||
}
|
||||
})
|
||||
|
||||
const colorList = ['#00D4FF', '#FFB300', '#00FF88', '#ff5100', '#fff', '#15ff00', '#ff00d4', '#00d4ff']
|
||||
|
||||
watch(() => props.robotList,
|
||||
(newVal) => {
|
||||
if (newVal.length > 0) {
|
||||
const ids = applicationState.robots.map(r => r.id);
|
||||
props.robotList.forEach(item => {
|
||||
if (!ids.includes(item.id)) {
|
||||
const [x, y, angle] = item.currentPosition.split(',')
|
||||
addRobot(item.id, item.robotName, x, y, angle, colorList[applicationState.robots.length % colorList.length])
|
||||
} else {
|
||||
applicationState.robots.forEach(robot => {
|
||||
if (robot.id === item.id) {
|
||||
const [x, y, angle] = item.currentPosition.split(',')
|
||||
// moveRobot(robot, parseFloat(x) - robot.x, parseFloat(y) - robot.y, parseFloat(angle) - robot.angle)
|
||||
robot.x = x
|
||||
robot.y = y
|
||||
robot.angle = angle
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
</div>
|
||||
|
||||
<div class="map-box">
|
||||
<MapCanvas :robotList="robotList" ref="mapCanvasRef" />
|
||||
<MapCanvas v-if="robotList.length > 0" :robotList="robotList" ref="mapCanvasRef" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-container">
|
||||
@ -98,7 +98,7 @@ const robotStatus = {
|
||||
}
|
||||
const getRobot = async () => {
|
||||
let robotType
|
||||
if (import.meta.env.VITE_INSPECTION_TYPE = 'inspection') {
|
||||
if (import.meta.env.VITE_INSPECTION_TYPE === 'inspection') {
|
||||
robotType = '2'
|
||||
} else {
|
||||
robotType = '1'
|
||||
@ -110,6 +110,7 @@ const getRobot = async () => {
|
||||
|
||||
if (res.code === 200) {
|
||||
robotList.value = res.rows
|
||||
// getRobot()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user