修改重定位操作
This commit is contained in:
@@ -122,5 +122,6 @@ module.exports = {
|
||||
Dispatchvehiclenotconnected: 'Dispatch and the vehicle body are not connected.',
|
||||
Vehiclereturnpoint: 'Vehicle return point',
|
||||
autobackfailedmanually:'The automatic fallback has failed. Please take over manually.',
|
||||
vehicleautobacknotmanwaitcompleted: 'The vehicle is in the process of automatic fallback. Do not manually move the vehicle. Please wait until the automatic fallback is completed.'
|
||||
vehicleautobacknotmanwaitcompleted: 'The vehicle is in the process of automatic fallback. Do not manually move the vehicle. Please wait until the automatic fallback is completed.',
|
||||
yousurereposition: 'Are you sure you want to reposition?'
|
||||
}
|
||||
|
||||
@@ -122,5 +122,6 @@ module.exports = {
|
||||
Dispatchvehiclenotconnected: '调度和车辆本体未连接',
|
||||
Vehiclereturnpoint: '车辆返回点',
|
||||
autobackfailedmanually:'自动回退失败，请手动接管。',
|
||||
vehicleautobacknotmanwaitcompleted: '车子正在自动回退中，请勿手动移动车辆，等待车辆自动回退完成。'
|
||||
vehicleautobacknotmanwaitcompleted: '车子正在自动回退中，请勿手动移动车辆，等待车辆自动回退完成。',
|
||||
yousurereposition: '是否确定重定位？'
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 12 KiB |
BIN
src/images/new/agv_back.png
Normal file
BIN
src/images/new/agv_back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/images/new/agv_out.png
Normal file
BIN
src/images/new/agv_out.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
886
src/pages/modules/map/index copy.vue
Normal file
886
src/pages/modules/map/index copy.vue
Normal file
@@ -0,0 +1,886 @@
|
||||
<template>
|
||||
<div class="page_container" :class="{'enClass': $i18n.locale === 'en-us'}">
|
||||
<div class="canvas-container" ref="mapContainer">
|
||||
<canvas
|
||||
class="mapCanvas"
|
||||
ref="mapCanvas"
|
||||
@click="handleCanvasClick"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchmove="handleTouchMove"
|
||||
@touchend="handleTouchEnd"
|
||||
@mousedown="handleMouseDown"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseup="handleMouseUp"
|
||||
@mouseleave="handleMouseUp"
|
||||
@wheel="handleZoom"
|
||||
></canvas>
|
||||
<svg
|
||||
class="mapSvg"
|
||||
ref="mapSvg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
ref="pointImgGrop"
|
||||
id="pointImgGrop"
|
||||
@mousedown="handlePointsDragStart"
|
||||
@touchstart="handlePointsDragStart"
|
||||
>
|
||||
<g ref="pointGrop">
|
||||
<circle
|
||||
v-for="(point, index) in greenPoints"
|
||||
:key="`point-${index}`"
|
||||
:cx="point.px_x"
|
||||
:cy="point.px_y"
|
||||
r="3"
|
||||
fill="green"
|
||||
/>
|
||||
</g>
|
||||
<image
|
||||
ref="carImage"
|
||||
:href="require('@/images/new/agv.png')"
|
||||
alt="小车"
|
||||
width="30"
|
||||
height="30"
|
||||
:x="-15"
|
||||
:y="-15"
|
||||
@mousedown="startCarDrag"
|
||||
@touchstart="startCarDrag"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="map_tools">
|
||||
<el-button class="zoom_btn" type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" @click="zoomOut"></el-button>
|
||||
<div class="zoom_data">{{ zoomPercentage }}%</div>
|
||||
<el-button class="zoom_btn" type="primary" :disabled="zoomPercentage === 200" icon="el-icon-plus" size="mini" @click="zoomIn"></el-button>
|
||||
<el-button class="zoom_btn" style="margin-top: .2rem !important" type="primary" icon="el-icon-rank" size="mini" @click="resetZoomAndDrag"></el-button>
|
||||
<el-button class="zoom_btn" type="primary" icon="el-icon-location" size="mini" :disabled="isCarLocked" @click="handleRelocate"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<PointPopup
|
||||
v-if="showPopup"
|
||||
:style="popupStyle"
|
||||
:point="selectedPoint"
|
||||
/>
|
||||
<PathPopup
|
||||
v-if="showPathPopup"
|
||||
:style="pathPopupStyle"
|
||||
:path="selectedPath"
|
||||
:getStationName="getStationNameById"
|
||||
/>
|
||||
<div v-show="isCarLocked" class="re-popup">
|
||||
<p>是否确定重定位？</p>
|
||||
<el-row style="margin-top: .2rem">
|
||||
<el-button type="danger" @click="cancelLocked"><p>{{$t('Cancel')}}</p></el-button>
|
||||
<el-button type="primary" @click="confirmLocked"><p>{{$t('Confirm')}}</p></el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
import { throttle } from 'lodash'
|
||||
import markerImage from '@/images/new/station.png'
|
||||
import { getMapInfoByCode, getRouteInfo, queryMapAllStation, relocate } from '@/config/getData.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
import PointPopup from './PointPopup.vue'
|
||||
import PathPopup from './PathPopup.vue'
|
||||
const ZOOM_CONFIG = {
|
||||
MIN: 0.02,
|
||||
MAX: 2,
|
||||
STEP: 0.08,
|
||||
TOUCH_STEP_FACTOR: 50
|
||||
}
|
||||
const PATH_CLICK_THRESHOLD = 5
|
||||
const MARKER_SIZE = 16
|
||||
const CAR_SIZE = 15
|
||||
export default {
|
||||
name: 'ModuleMap',
|
||||
components: {
|
||||
PointPopup,
|
||||
PathPopup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: null,
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
canvasWidth: 0,
|
||||
canvasHeight: 0,
|
||||
originX: 0,
|
||||
originY: 0,
|
||||
cachedImages: {
|
||||
map: null,
|
||||
marker: null
|
||||
},
|
||||
mapData: null,
|
||||
pathData: null,
|
||||
pointData: null,
|
||||
mapScale: 1,
|
||||
showPopup: false,
|
||||
selectedPoint: {},
|
||||
popupStyle: {left: '0px', top: '0px'},
|
||||
selectedPointId: null,
|
||||
showPathPopup: false,
|
||||
selectedPath: {route_id: null},
|
||||
pathPopupStyle: { left: '0px', top: '0px' },
|
||||
touchStart: null,
|
||||
isDragging: false,
|
||||
lastX: 0,
|
||||
lastY: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
scale: 1,
|
||||
zoomPercentage: 100,
|
||||
pxCarPosition:{px_x: 0, px_y: 0, px_angle: 0},
|
||||
websocket: null,
|
||||
greenPoints: [],
|
||||
isCarLocked: false,
|
||||
isDraggingCar: false,
|
||||
carLastX: 0,
|
||||
carLastY: 0,
|
||||
carOffsetX: 0,
|
||||
carOffsetY: 0,
|
||||
isDraggingPoints: false,
|
||||
carCenterX: 0,
|
||||
carCenterY: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['serverUrl', 'carPosition', 'userRole'])
|
||||
},
|
||||
watch: {
|
||||
carPosition: {
|
||||
handler(newVal) {
|
||||
this.updateCarPosition(newVal)
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
mapData: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.updateCarPosition(this.carPosition)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.loadAllDataInParallel()
|
||||
},
|
||||
methods: {
|
||||
async loadAllDataInParallel () {
|
||||
try {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.6)'
|
||||
})
|
||||
const [mapData, pathData, stations] = await Promise.all([
|
||||
this._getMapInfoByCode(),
|
||||
this._getRouteInfo(),
|
||||
this._queryMapAllStation()
|
||||
])
|
||||
await Promise.all([
|
||||
this.preloadImage('map', `${this.serverUrl}${mapData.mapImageAddress}`),
|
||||
this.preloadImage('marker', markerImage)
|
||||
])
|
||||
this.mapData = mapData
|
||||
this.pathData = [...pathData]
|
||||
this.pointData = this.filterPointData(pathData, stations)
|
||||
this.initCanvas()
|
||||
} catch (e) {
|
||||
this.$message.error(e.message)
|
||||
} finally {
|
||||
this.loading.close()
|
||||
}
|
||||
},
|
||||
async _getMapInfoByCode () {
|
||||
try {
|
||||
const res = await getMapInfoByCode()
|
||||
if (!res) throw new Error('地图信息为空')
|
||||
return res
|
||||
} catch (e) {
|
||||
console.error('获取地图信息失败:', e)
|
||||
throw new Error(`获取地图信息失败: ${e.message}`)
|
||||
}
|
||||
},
|
||||
async _getRouteInfo () {
|
||||
try {
|
||||
const res = await getRouteInfo()
|
||||
if (!res) throw new Error('路径信息为空')
|
||||
return res
|
||||
} catch (e) {
|
||||
console.error('获取路径信息失败:', e)
|
||||
throw new Error(`获取路径信息失败: ${e.message}`)
|
||||
}
|
||||
},
|
||||
async _queryMapAllStation () {
|
||||
try {
|
||||
const res = await queryMapAllStation()
|
||||
if (!res) throw new Error('站点信息为空')
|
||||
return res
|
||||
} catch (e) {
|
||||
console.error('获取站点信息失败:', e)
|
||||
throw new Error(`获取站点信息失败: ${e.message}`)
|
||||
}
|
||||
},
|
||||
filterPointData (routes, stations) {
|
||||
const result = []
|
||||
const seenStationIds = new Set()
|
||||
|
||||
routes.forEach(route => {
|
||||
[route.start_id, route.end_id].forEach(stationId => {
|
||||
const station = stations.find(s => s.station_id === stationId)
|
||||
if (station && !seenStationIds.has(station.station_id)) {
|
||||
result.push(station)
|
||||
seenStationIds.add(station.station_id)
|
||||
}
|
||||
})
|
||||
})
|
||||
return result
|
||||
},
|
||||
convertCmToPx (cmX, cmY) {
|
||||
const mapX = ((cmX - this.mapData.x) / this.mapData.resolution) * this.mapScale
|
||||
const mapY = (this.mapData.height - (cmY - this.mapData.y) / this.mapData.resolution) * this.mapScale
|
||||
return { x: mapX, y: mapY }
|
||||
},
|
||||
pointCmToPx (cmX, cmY) {
|
||||
const mapX = cmX / this.mapData.resolution * this.mapScale
|
||||
const mapY = -1 * cmY / this.mapData.resolution * this.mapScale
|
||||
return { x: mapX, y: mapY }
|
||||
},
|
||||
converPxToCm (pX, pY) {
|
||||
const mapX = pX / this.mapScale
|
||||
const mapY = pY / this.mapScale
|
||||
const cmX = mapX * this.mapData.resolution + this.mapData.x
|
||||
const cmY = (this.mapData.height - mapY) * this.mapData.resolution + this.mapData.y
|
||||
return { x: cmX, y: cmY }
|
||||
},
|
||||
preloadImage(key, url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 如果图片已加载，直接返回
|
||||
if (this.cachedImages[key]?.complete) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
const img = new Image()
|
||||
img.src = url
|
||||
img.onload = () => {
|
||||
this.cachedImages[key] = img
|
||||
resolve()
|
||||
}
|
||||
img.onerror = () => reject(new Error(`图片加载失败: ${url}`))
|
||||
})
|
||||
},
|
||||
initCanvas () {
|
||||
this.canvas = this.$refs.mapCanvas
|
||||
this.ctx = this.canvas.getContext('2d')
|
||||
const container = this.$refs.mapContainer
|
||||
this.canvasWidth = container.clientWidth
|
||||
this.canvasHeight = container.clientHeight
|
||||
this.canvas.width = this.canvasWidth
|
||||
this.canvas.height = this.canvasHeight
|
||||
// 计算地图图片缩放比例
|
||||
if (this.mapData.width > this.canvas.width || this.mapData.height > this.canvas.height) {
|
||||
const scaleX = this.canvas.width / this.mapData.width
|
||||
const scaleY = this.canvas.height / this.mapData.height
|
||||
this.mapScale = Math.min(scaleX, scaleY)
|
||||
}
|
||||
// 计算点位坐标厘米和像素的转换
|
||||
this.pathData.forEach(point => {
|
||||
const start = this.convertCmToPx(point.start_x, point.start_y)
|
||||
const end = this.convertCmToPx(point.end_x, point.end_y)
|
||||
this.$set(point, 'px_start_x', start.x)
|
||||
this.$set(point, 'px_start_y', start.y)
|
||||
this.$set(point, 'px_end_x', end.x)
|
||||
this.$set(point, 'px_end_y', end.y)
|
||||
})
|
||||
this.pointData.forEach(point => {
|
||||
const pt = this.convertCmToPx(point.x, point.y)
|
||||
this.$set(point, 'px_x', pt.x)
|
||||
this.$set(point, 'px_y', pt.y)
|
||||
})
|
||||
const scaledWidth = this.mapData.width * this.mapScale
|
||||
const scaledHeight = this.mapData.height * this.mapScale
|
||||
// 计算地图图片左上角位置（即要移动到的原点）
|
||||
this.originX = (this.canvas.width - scaledWidth) / 2
|
||||
this.originY = (this.canvas.height - scaledHeight) / 2
|
||||
this.ctx.translate(this.originX, this.originY)
|
||||
this.ctx.save()
|
||||
this.redrawCanvas()
|
||||
// svg
|
||||
const mapSvg = this.$refs.mapSvg
|
||||
mapSvg.setAttribute('width', this.canvasWidth)
|
||||
mapSvg.setAttribute('height', this.canvasHeight)
|
||||
mapSvg.setAttribute('viewBox', `-${this.originX} -${this.originY} ${this.canvasWidth} ${this.canvasHeight}`)
|
||||
},
|
||||
redrawCanvas: throttle(function () {
|
||||
if (!this.ctx || !this.mapData) return
|
||||
this.ctx.save()
|
||||
this.ctx.setTransform(1, 0, 0, 1, 0, 0)
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
||||
this.ctx.restore()
|
||||
const scaledWidth = this.mapData.width * this.mapScale
|
||||
const scaledHeight = this.mapData.height * this.mapScale
|
||||
if (this.cachedImages.map) {
|
||||
this.ctx.drawImage(this.cachedImages.map, 0, 0, scaledWidth, scaledHeight)
|
||||
this.drawPath()
|
||||
this.drawMarkers()
|
||||
} else {
|
||||
this.cachedImages.map = new Image()
|
||||
// this.cachedImages.map.src = this.mapData.mapImageAddress
|
||||
this.cachedImages.map.src = `${this.serverUrl}${this.mapData.mapImageAddress}`
|
||||
this.cachedImages.map.onload = () => {
|
||||
this.ctx.drawImage(this.cachedImages.map, 0, 0, scaledWidth, scaledHeight)
|
||||
this.drawPath()
|
||||
this.drawMarkers()
|
||||
}
|
||||
}
|
||||
}, 30),
|
||||
drawPath () {
|
||||
if (!this.pathData.length) return
|
||||
this.pathData.forEach((point, index) => {
|
||||
const nextPoint = this.pathData[index + 1]
|
||||
let controlX, controlY
|
||||
if (nextPoint) {
|
||||
// 有下一个点时，使用当前终点和下一个起点的中点作为控制点
|
||||
controlX = (point.px_end_x + nextPoint.px_start_x) / 2
|
||||
controlY = (point.px_end_y + nextPoint.px_start_y) / 2
|
||||
} else {
|
||||
// 最后一个点，使用当前终点作为控制点
|
||||
controlX = point.px_end_x
|
||||
controlY = point.px_end_y
|
||||
}
|
||||
this.ctx.beginPath()
|
||||
this.ctx.moveTo(point.px_start_x, point.px_start_y)
|
||||
this.ctx.quadraticCurveTo(controlX, controlY, point.px_end_x, point.px_end_y)
|
||||
if (this.selectedPath.route_id === point.route_id) {
|
||||
this.ctx.strokeStyle = '#ff5722' // 橙色高亮
|
||||
this.ctx.lineWidth = 4
|
||||
} else {
|
||||
this.ctx.strokeStyle = '#009de5' // 默认蓝色
|
||||
this.ctx.lineWidth = 2
|
||||
}
|
||||
this.ctx.stroke()
|
||||
})
|
||||
},
|
||||
drawMarkers () {
|
||||
if (!this.pointData.length || !this.ctx) return
|
||||
if (!this.cachedImages.marker) {
|
||||
this.cachedImages.marker = new Image()
|
||||
this.cachedImages.marker.src = markerImage
|
||||
// 图标加载完成后重新绘制，确保点位显示
|
||||
this.cachedImages.marker.onload = () => {
|
||||
this.redrawCanvas()
|
||||
}
|
||||
return // 等待图标加载完成后再绘制
|
||||
}
|
||||
this.pointData.forEach(point => {
|
||||
// 绘制选中状态
|
||||
if (point.station_id === this.selectedPointId) {
|
||||
this.ctx.beginPath()
|
||||
this.ctx.arc(point.px_x, point.px_y, 5, 0, Math.PI * 2)
|
||||
this.ctx.fillStyle = '#59ccd2'
|
||||
this.ctx.fill()
|
||||
} else {
|
||||
this.ctx.drawImage(this.cachedImages.marker, point.px_x - MARKER_SIZE / 2, point.px_y - MARKER_SIZE / 2, MARKER_SIZE, MARKER_SIZE)
|
||||
}
|
||||
// 绘制点位名称（文字大小随缩放变化）
|
||||
if (point.station_type !== 'Station') {
|
||||
this.ctx.font = '12px Arial'
|
||||
this.ctx.fillStyle = '#62fa0a'
|
||||
this.ctx.textAlign = 'center'
|
||||
this.ctx.fillText(point.station_name, point.px_x, point.px_y + 22)
|
||||
this.ctx.fillText(point.x, point.px_x, point.px_y + 34)
|
||||
this.ctx.fillText(point.y, point.px_x, point.px_y + 50)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCanvasClick (event) {
|
||||
const rect = this.canvas.getBoundingClientRect()
|
||||
const mouseX = (event.clientX - rect.left) / this.scale - this.originX
|
||||
const mouseY = (event.clientY - rect.top) / this.scale - this.originY
|
||||
// 1. 优先检测点位点击
|
||||
let pointClicked = false
|
||||
for (const point of this.pointData) {
|
||||
let x = point.px_x
|
||||
let y = point.px_y
|
||||
x = Math.abs(x) === 0 ? 0 : x
|
||||
y = Math.abs(y) === 0 ? 0 : y
|
||||
if (mouseX >= x - 10 && mouseX <= x + 10 && mouseY >= y - 10 && mouseY <= y + 10) {
|
||||
this.handlePointSelect(point, event)
|
||||
event.stopPropagation()
|
||||
pointClicked = true
|
||||
if (this.showPathPopup) {
|
||||
this.selectedPath = {route_id: null}
|
||||
this.showPathPopup = false
|
||||
this.redrawCanvas()
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
// 2. 只有点位未被点击时，才检测路径点击
|
||||
if (!pointClicked) {
|
||||
if (this.showPopup) {
|
||||
this.selectedPointId = null
|
||||
this.selectedPoint = null
|
||||
this.showPopup = false
|
||||
this.redrawCanvas()
|
||||
}
|
||||
let pathClicked = false
|
||||
for (const path of this.pathData) {
|
||||
// 计算点击点到线段的距离
|
||||
const distance = this.pointToLineDistance(
|
||||
{ x: mouseX, y: mouseY },
|
||||
{ x: path.px_start_x, y: path.px_start_y },
|
||||
{ x: path.px_end_x, y: path.px_end_y }
|
||||
)
|
||||
// 距离小于阈值则认为点击了该路径
|
||||
if (distance <= PATH_CLICK_THRESHOLD) {
|
||||
this.handlePathSelect(path, event)
|
||||
event.stopPropagation()
|
||||
pathClicked = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!pathClicked && this.showPathPopup) {
|
||||
this.selectedPath = {route_id: null}
|
||||
this.showPathPopup = false
|
||||
this.redrawCanvas()
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算点到线段的最短距离
|
||||
pointToLineDistance (point, lineStart, lineEnd) {
|
||||
// 线段向量
|
||||
const dx = lineEnd.x - lineStart.x
|
||||
const dy = lineEnd.y - lineStart.y
|
||||
// 线段长度的平方
|
||||
const lengthSquared = dx * dx + dy * dy
|
||||
// 线段长度为0（起点终点重合），直接返回点到起点的距离
|
||||
if (lengthSquared === 0) {
|
||||
return Math.hypot(point.x - lineStart.x, point.y - lineStart.y)
|
||||
}
|
||||
// 计算点击点在投影到线段上的位置比例（0~1之间为在线段上）
|
||||
let t = ((point.x - lineStart.x) * dx + (point.y - lineStart.y) * dy) / lengthSquared
|
||||
t = Math.max(0, Math.min(1, t)) // 限制在0~1范围内
|
||||
// 投影点坐标
|
||||
const projectionX = lineStart.x + t * dx
|
||||
const projectionY = lineStart.y + t * dy
|
||||
// 点到投影点的距离
|
||||
return Math.hypot(point.x - projectionX, point.y - projectionY)
|
||||
},
|
||||
// 处理点位选中
|
||||
handlePointSelect (point, event) {
|
||||
if (this.selectedPointId === point.station_id) {
|
||||
this.selectedPointId = null
|
||||
this.selectedPoint = null
|
||||
this.showPopup = false
|
||||
} else {
|
||||
this.selectedPointId = point.station_id
|
||||
this.selectedPoint = point
|
||||
this.calculatePopupPosition(event, 143, this.popupStyle)
|
||||
this.showPopup = true
|
||||
}
|
||||
this.redrawCanvas()
|
||||
},
|
||||
// 处理路径选中
|
||||
handlePathSelect (path, event) {
|
||||
if (this.selectedPath.route_id === path.route_id) {
|
||||
this.selectedPath = {route_id: null}
|
||||
this.showPathPopup = false
|
||||
} else {
|
||||
this.selectedPath = path
|
||||
this.calculatePopupPosition(event, 95, this.pathPopupStyle)
|
||||
this.showPathPopup = true
|
||||
}
|
||||
this.redrawCanvas()
|
||||
},
|
||||
calculatePopupPosition (event, height, styleObj = this.popupStyle) {
|
||||
const left = event.clientX
|
||||
const top = event.clientY - height - 10
|
||||
styleObj.left = `${left}px`
|
||||
styleObj.top = `${top}px`
|
||||
},
|
||||
getStationNameById (stationId) {
|
||||
if (!stationId || !this.pointData || !this.pointData.length) return null
|
||||
const station = this.pointData.find(point => point.station_id === stationId)
|
||||
return station ? station.station_name : null
|
||||
},
|
||||
// 触摸事件：支持单指拖动和双指缩放
|
||||
handleTouchStart (event) {
|
||||
// 记录触摸点
|
||||
const touches = Array.from(event.touches)
|
||||
if (touches.length === 1) {
|
||||
// 单指：准备拖动
|
||||
this.isDragging = true
|
||||
this.lastX = touches[0].clientX
|
||||
this.lastY = touches[0].clientY
|
||||
} else if (touches.length === 2) {
|
||||
// 双指：准备缩放（禁用拖动）
|
||||
this.isDragging = false
|
||||
this.touchStart = touches.map(touch => ({
|
||||
x: touch.clientX,
|
||||
y: touch.clientY
|
||||
}))
|
||||
}
|
||||
},
|
||||
applyTransform () {
|
||||
const mapSvg = this.$refs.mapSvg
|
||||
if (this.canvas) {
|
||||
this.canvas.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`
|
||||
mapSvg.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`
|
||||
}
|
||||
},
|
||||
// 计算两点之间的距离
|
||||
getDistance (x1, y1, x2, y2) {
|
||||
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
|
||||
},
|
||||
zoom (step) {
|
||||
this.scale = Math.min(ZOOM_CONFIG.MAX, Math.max(ZOOM_CONFIG.MIN, this.scale + step / 100))
|
||||
this.zoomPercentage = Math.round(this.scale * 100)
|
||||
this.applyTransform()
|
||||
},
|
||||
handleTouchMove (event) {
|
||||
event.preventDefault() // 阻止页面滚动
|
||||
const touches = Array.from(event.touches)
|
||||
if (this.isDragging && touches.length === 1) {
|
||||
// 单指拖动
|
||||
const currentX = touches[0].clientX
|
||||
const currentY = touches[0].clientY
|
||||
// 计算移动距离（考虑缩放影响，拖动速度与缩放比例成反比）
|
||||
const moveX = (currentX - this.lastX) / this.scale
|
||||
const moveY = (currentY - this.lastY) / this.scale
|
||||
// 更新偏移量
|
||||
this.offsetX += moveX
|
||||
this.offsetY += moveY
|
||||
// 更新上一次位置
|
||||
this.lastX = currentX
|
||||
this.lastY = currentY
|
||||
// 应用变换
|
||||
this.applyTransform()
|
||||
} else if (this.touchStart && touches.length === 2) {
|
||||
// 双指缩放（原有逻辑）
|
||||
const startDist = this.getDistance(this.touchStart[0].x, this.touchStart[0].y, this.touchStart[1].x, this.touchStart[1].y)
|
||||
const currentDist = this.getDistance(touches[0].clientX, touches[0].clientY, touches[1].clientX, touches[1].clientY)
|
||||
// 计算缩放步长（更平滑的缩放）
|
||||
const scaleFactor = currentDist / startDist
|
||||
const step = (scaleFactor - 1) * ZOOM_CONFIG.TOUCH_STEP_FACTOR // 调整缩放灵敏度
|
||||
this.zoom(step)
|
||||
// 更新触摸起点
|
||||
this.touchStart = touches.map(touch => ({
|
||||
x: touch.clientX,
|
||||
y: touch.clientY
|
||||
}))
|
||||
}
|
||||
},
|
||||
handleTouchEnd () {
|
||||
this.touchStart = null
|
||||
this.isDragging = false
|
||||
},
|
||||
// 鼠标按下（开始拖动）
|
||||
handleMouseDown (event) {
|
||||
event.preventDefault()
|
||||
this.isDragging = true
|
||||
// 记录初始鼠标位置
|
||||
this.lastX = event.clientX
|
||||
this.lastY = event.clientY
|
||||
// 鼠标样式变为抓手
|
||||
this.canvas.style.cursor = 'grabbing'
|
||||
},
|
||||
// 鼠标移动（拖动中）
|
||||
handleMouseMove (event) {
|
||||
if (!this.isDragging) return
|
||||
event.preventDefault()
|
||||
// 计算移动距离（考虑缩放影响）
|
||||
const currentX = event.clientX
|
||||
const currentY = event.clientY
|
||||
const moveX = (currentX - this.lastX) / this.scale
|
||||
const moveY = (currentY - this.lastY) / this.scale
|
||||
// 更新偏移量
|
||||
this.offsetX += moveX
|
||||
this.offsetY += moveY
|
||||
// 更新上一次位置
|
||||
this.lastX = currentX
|
||||
this.lastY = currentY
|
||||
// 应用变换
|
||||
this.applyTransform()
|
||||
},
|
||||
// 鼠标松开（结束拖动）
|
||||
handleMouseUp () {
|
||||
this.isDragging = false
|
||||
this.canvas.style.cursor = 'default'
|
||||
},
|
||||
// 鼠标滚动缩放
|
||||
handleZoom (event) {
|
||||
event.preventDefault()
|
||||
const delta = event.deltaY
|
||||
const step = delta > 0 ? -1 : 1
|
||||
this.zoom(step)
|
||||
},
|
||||
zoomIn () {
|
||||
if (this.scale < 2) {
|
||||
this.zoom(ZOOM_CONFIG.STEP * 100) // 每次放大8%
|
||||
}
|
||||
},
|
||||
zoomOut () {
|
||||
if (this.scale > 0.02) {
|
||||
this.zoom(-ZOOM_CONFIG.STEP * 100) // 每次缩小8%
|
||||
}
|
||||
},
|
||||
resetZoomAndDrag () {
|
||||
this.scale = 1
|
||||
this.zoomPercentage = 100
|
||||
this.offsetX = 0
|
||||
this.offsetY = 0
|
||||
this.isDragging = false
|
||||
this.applyTransform()
|
||||
this.redrawCanvas()
|
||||
},
|
||||
updateCarPosition(newVal) {
|
||||
if (!this.mapData || typeof newVal?.x !== 'number' || typeof newVal?.y !== 'number' || this.isCarLocked) {
|
||||
return
|
||||
}
|
||||
const coor = this.convertCmToPx(newVal.x, newVal.y)
|
||||
let angle = newVal.angle * -1 * 57.295779513 // 页面Y轴向下，现实Y轴向上，方向相反，所以乘以 -1，范围[-π,π]，需要转化为角度
|
||||
angle = Math.abs(angle) === 0 ? 0 : angle
|
||||
this.pxCarPosition = {px_x: coor.x, px_y: coor.y, px_angle: angle}
|
||||
const pointImgGrop = this.$refs.pointImgGrop
|
||||
pointImgGrop.setAttribute('transform',
|
||||
`translate(${this.pxCarPosition.px_x}, ${this.pxCarPosition.px_y})
|
||||
rotate(${this.pxCarPosition.px_angle} 0 0)`
|
||||
)
|
||||
},
|
||||
initWebSocket () {
|
||||
this.closeWebSocket()
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.6)'
|
||||
})
|
||||
const protocol = this.serverUrl.startsWith('https') ? 'wss' : 'ws'
|
||||
const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
|
||||
this.websocket = new WebSocket(`${protocol}://${wsHost}/webSocket/PointCloudData/${this.userRole}`)
|
||||
this.websocket.onopen = () => {}
|
||||
this.websocket.onmessage = (event) => {
|
||||
try {
|
||||
const pointData = JSON.parse(event.data)
|
||||
pointData.currentData.forEach(point => {
|
||||
const pt = this.pointCmToPx(point.x, point.y)
|
||||
this.$set(point, 'px_x', pt.x)
|
||||
this.$set(point, 'px_y', pt.y)
|
||||
})
|
||||
this.greenPoints = pointData.currentData
|
||||
this.loading.close()
|
||||
} catch (error) {
|
||||
console.error('WebSocket消息解析失败:', error)
|
||||
}
|
||||
}
|
||||
this.websocket.onerror = (error) => {
|
||||
this.$message.error(this.$t('WebSocketerror') + ':', error)
|
||||
}
|
||||
this.websocket.onclose = () => {
|
||||
this.loading.close()
|
||||
}
|
||||
},
|
||||
closeWebSocket () {
|
||||
if (this.websocket) {
|
||||
this.websocket.close(1000, '正常关闭')
|
||||
this.websocket = null
|
||||
}
|
||||
},
|
||||
// 重点位
|
||||
handleRelocate () {
|
||||
// const res = [{x: 3, y: 0, color: 'red'}, {x: 0, y: 3, color: 'orange'}, {x: -3, y: 0, color: 'green'}, {x: 0, y: -3, color: 'blue'}]
|
||||
// res.forEach(point => {
|
||||
// const pt = this.pointCmToPx(point.x, point.y)
|
||||
// this.$set(point, 'px_x', pt.x)
|
||||
// this.$set(point, 'px_y', pt.y)
|
||||
// })
|
||||
// this.greenPoints = res
|
||||
this.initWebSocket()
|
||||
this.isCarLocked = true
|
||||
},
|
||||
startCarDrag (e) {
|
||||
if (!this.isCarLocked) return
|
||||
this.isDraggingCar = true
|
||||
this.carLastX = e.clientX || e.touches[0].clientX
|
||||
this.carLastY = e.clientY || e.touches[0].clientY
|
||||
const options = { passive: false }
|
||||
document.addEventListener('mousemove', this.onCarDragMove, options)
|
||||
document.addEventListener('mouseup', this.endCarDrag, options)
|
||||
document.addEventListener('touchmove', this.onCarDragMove, options)
|
||||
document.addEventListener('touchend', this.endCarDrag, options)
|
||||
e.stopPropagation()
|
||||
},
|
||||
onCarDragMove: throttle(function (e) {
|
||||
if (!this.isDraggingCar) return
|
||||
const currentX = e.clientX || e.touches[0].clientX
|
||||
const currentY = e.clientY || e.touches[0].clientY
|
||||
const moveX = (currentX - this.carLastX) / this.scale
|
||||
const moveY = (currentY - this.carLastY) / this.scale
|
||||
this.carOffsetX += moveX
|
||||
this.carOffsetY += moveY
|
||||
this.carLastX = currentX
|
||||
this.carLastY = currentY
|
||||
const pointImgGrop = this.$refs.pointImgGrop
|
||||
pointImgGrop.setAttribute('transform',
|
||||
`translate(${this.pxCarPosition.px_x}, ${this.pxCarPosition.px_y})
|
||||
translate(${this.carOffsetX}, ${this.carOffsetY})
|
||||
rotate(${this.pxCarPosition.px_angle} 0 0)`
|
||||
)
|
||||
}, 16),
|
||||
endCarDrag () {
|
||||
if (this.isDraggingCar) {
|
||||
this.isDraggingCar = false
|
||||
this.removeCarDragEventListeners()
|
||||
}
|
||||
if (this.isDraggingPoints) {
|
||||
this.endPointsDrag()
|
||||
}
|
||||
},
|
||||
removeCarDragEventListeners() {
|
||||
const options = { passive: false }
|
||||
document.removeEventListener('mousemove', this.onCarDragMove, options)
|
||||
document.removeEventListener('mouseup', this.endCarDrag, options)
|
||||
document.removeEventListener('touchmove', this.onCarDragMove, options)
|
||||
document.removeEventListener('touchend', this.endCarDrag, options)
|
||||
},
|
||||
handlePointsDragStart (e) {
|
||||
if (!this.isCarLocked) return
|
||||
this.isDraggingPoints = true
|
||||
const clientX = e.clientX || e.touches[0].clientX
|
||||
const clientY = e.clientY || e.touches[0].clientY
|
||||
const carImage = this.$refs.carImage
|
||||
const carRect = carImage.getBoundingClientRect()
|
||||
this.carCenterX = carRect.left + carRect.width / 2
|
||||
this.carCenterY = carRect.top + carRect.height / 2
|
||||
const options = { passive: false }
|
||||
document.addEventListener('mousemove', this.onPointsDragMove, options)
|
||||
document.addEventListener('mouseup', this.endPointsDrag, options)
|
||||
document.addEventListener('touchmove', this.onPointsDragMove, options)
|
||||
document.addEventListener('touchend', this.endPointsDrag, options)
|
||||
e.stopPropagation()
|
||||
},
|
||||
onPointsDragMove: throttle(function (e) {
|
||||
if (!this.isDraggingPoints) return
|
||||
const clientX = e.clientX || e.touches[0].clientX
|
||||
const clientY = e.clientY || e.touches[0].clientY
|
||||
// 计算当前鼠标相对于小车中心的角度（弧度）
|
||||
const currentAngleRad = Math.atan2(clientY - this.carCenterY, clientX - this.carCenterX)
|
||||
this.pxCarPosition.px_angle = currentAngleRad * 57.295779513
|
||||
const pointImgGrop = this.$refs.pointImgGrop
|
||||
pointImgGrop.setAttribute('transform',
|
||||
`translate(${this.pxCarPosition.px_x}, ${this.pxCarPosition.px_y})
|
||||
translate(${this.carOffsetX}, ${this.carOffsetY})
|
||||
rotate(${this.pxCarPosition.px_angle} 0 0)`
|
||||
)
|
||||
}, 16),
|
||||
endPointsDrag () {
|
||||
if (this.isDraggingPoints) {
|
||||
this.isDraggingPoints = false
|
||||
this.removePointsDragEventListeners()
|
||||
}
|
||||
},
|
||||
removePointsDragEventListeners() {
|
||||
const options = { passive: false }
|
||||
document.removeEventListener('mousemove', this.onPointsDragMove, options)
|
||||
document.removeEventListener('mouseup', this.endPointsDrag, options)
|
||||
document.removeEventListener('touchmove', this.onPointsDragMove, options)
|
||||
document.removeEventListener('touchend', this.endPointsDrag, options)
|
||||
},
|
||||
cancelLocked () {
|
||||
this.closeWebSocket()
|
||||
this.isCarLocked = false
|
||||
this.carOffsetX = 0
|
||||
this.carOffsetY = 0
|
||||
this.greenPoints = []
|
||||
this.carLastX = 0
|
||||
this.carLastY = 0
|
||||
this.carCenterX = 0
|
||||
this.carCenterY = 0
|
||||
},
|
||||
confirmLocked () {
|
||||
const carImage = this.$refs.carImage
|
||||
const carRect = carImage.getBoundingClientRect()
|
||||
const clientX = carRect.left + carRect.width / 2
|
||||
const clientY = carRect.top + carRect.height / 2
|
||||
const rect = this.canvas.getBoundingClientRect()
|
||||
const mouseX = (clientX - rect.left) / this.scale - this.originX
|
||||
const mouseY = (clientY - rect.top) / this.scale - this.originY
|
||||
const carCoor = this.converPxToCm(mouseX, mouseY)
|
||||
let angleInRadians = this.pxCarPosition.px_angle * Math.PI / 180
|
||||
// 规范化到[-π, π]范围
|
||||
angleInRadians = ((angleInRadians + Math.PI) % (2 * Math.PI) - Math.PI)
|
||||
angleInRadians = angleInRadians * -1
|
||||
console.log(carCoor)
|
||||
console.log(angleInRadians)
|
||||
this._relocate(carCoor.x, carCoor.y, angleInRadians)
|
||||
this.cancelLocked()
|
||||
},
|
||||
async _relocate (x, y, angle) {
|
||||
try {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.6)'
|
||||
})
|
||||
let res = await relocate(x, y, angle)
|
||||
if (res) {
|
||||
this.$message(res.message)
|
||||
}
|
||||
this.loading.close()
|
||||
} catch (e) {
|
||||
this.$message.error(e)
|
||||
this.loading.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.closeWebSocket()
|
||||
this.removeCarDragEventListeners()
|
||||
this.removePointsDragEventListeners() // 清理点组拖拽监听
|
||||
Object.values(this.cachedImages).forEach(img => {
|
||||
if (img && img.src) {
|
||||
img.src = ''
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.canvas-container
|
||||
position relative
|
||||
height 100%
|
||||
background-color rgba(4, 33, 58, 70%)
|
||||
box-shadow inset 1px 1px 7px 2px #4d9bcd
|
||||
overflow hidden
|
||||
.mapCanvas, .mapSvg
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 100%
|
||||
z-index 9
|
||||
.mapSvg
|
||||
pointer-events none
|
||||
z-index 10
|
||||
#pointImgGrop
|
||||
pointer-events bounding-box
|
||||
cursor: grab
|
||||
.re-popup
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(0,0,0,0.7);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 0px 4px 2px rgba(255,255,255,0.1);
|
||||
z-index: 100
|
||||
p
|
||||
font-size: 0.18rem;
|
||||
line-height: 0.32rem;
|
||||
color: #fff;
|
||||
</style>
|
||||
@@ -22,8 +22,6 @@
|
||||
<g
|
||||
ref="pointImgGrop"
|
||||
id="pointImgGrop"
|
||||
@mousedown="handlePointsDragStart"
|
||||
@touchstart="handlePointsDragStart"
|
||||
>
|
||||
<g ref="pointGrop">
|
||||
<circle
|
||||
@@ -35,14 +33,25 @@
|
||||
fill="green"
|
||||
/>
|
||||
</g>
|
||||
<image
|
||||
v-if="isCarLocked"
|
||||
:href="require('@/images/new/agv_out.png')"
|
||||
alt="小车"
|
||||
width="80"
|
||||
height="80"
|
||||
x="-40"
|
||||
y="-40"
|
||||
@mousedown="handlePointsDragStart"
|
||||
@touchstart="handlePointsDragStart"
|
||||
/>
|
||||
<image
|
||||
ref="carImage"
|
||||
:href="require('@/images/new/agv.png')"
|
||||
alt="小车"
|
||||
width="30"
|
||||
height="30"
|
||||
:x="-15"
|
||||
:y="-15"
|
||||
x="-15"
|
||||
y="-15"
|
||||
@mousedown="startCarDrag"
|
||||
@touchstart="startCarDrag"
|
||||
/>
|
||||
@@ -68,7 +77,7 @@
|
||||
:getStationName="getStationNameById"
|
||||
/>
|
||||
<div v-show="isCarLocked" class="re-popup">
|
||||
<p>是否确定重定位？</p>
|
||||
<p>{{ $t('yousurereposition') }}</p>
|
||||
<el-row style="margin-top: .2rem">
|
||||
<el-button type="danger" @click="cancelLocked"><p>{{$t('Cancel')}}</p></el-button>
|
||||
<el-button type="primary" @click="confirmLocked"><p>{{$t('Confirm')}}</p></el-button>
|
||||
@@ -181,6 +190,7 @@ export default {
|
||||
this._queryMapAllStation()
|
||||
])
|
||||
await Promise.all([
|
||||
// this.preloadImage('map', `${mapData.mapImageAddress}`),
|
||||
this.preloadImage('map', `${this.serverUrl}${mapData.mapImageAddress}`),
|
||||
this.preloadImage('marker', markerImage)
|
||||
])
|
||||
@@ -386,13 +396,13 @@ export default {
|
||||
this.ctx.drawImage(this.cachedImages.marker, point.px_x - MARKER_SIZE / 2, point.px_y - MARKER_SIZE / 2, MARKER_SIZE, MARKER_SIZE)
|
||||
}
|
||||
// 绘制点位名称（文字大小随缩放变化）
|
||||
if (point.station_type !== 'Station') {
|
||||
if (point.station_type === 'Station') {
|
||||
this.ctx.font = '12px Arial'
|
||||
this.ctx.fillStyle = '#62fa0a'
|
||||
this.ctx.textAlign = 'center'
|
||||
this.ctx.fillText(point.station_name, point.px_x, point.px_y + 22)
|
||||
this.ctx.fillText(point.x, point.px_x, point.px_y + 34)
|
||||
this.ctx.fillText(point.y, point.px_x, point.px_y + 50)
|
||||
// this.ctx.fillText(point.x, point.px_x, point.px_y + 34)
|
||||
// this.ctx.fillText(point.y, point.px_x, point.px_y + 50)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user