root/apt15e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

地图和操作

Browse Source
This commit is contained in:
caill
2025-07-24 19:08:13 +08:00
parent 677ce26b2e
commit ae2d9b631f
7 changed files with 376 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/config/canvasZoomDrag.js Normal file
View File

@@ -0,0 +1,128 @@
export default {
data () {
return {
touchStart: null, // 触摸起点
scale: 1, // 缩放比例
zoomPercentage: 100, // 当前缩放百分比
isDragging: false, // 是否正在拖动
lastX: 0, // 上一次鼠标/触摸X位置
lastY: 0, // 上一次鼠标/触摸Y位置
offsetX: 0, // Canvas偏移X
offsetY: 0 // Canvas偏移Y
}
},
methods: {
zoom (step) {
this.scale = Math.min(2, Math.max(0.02, this.scale + step / 100))
this.zoomPercentage = Math.round(this.scale * 100)
this.applyTransform()
},
applyTransform () {
this.canvas.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`
},
// 鼠标滚动缩放
handleZoom (event) {
event.preventDefault()
const delta = event.deltaY
const step = delta > 0 ? -1 : 1
this.zoom(step)
},
// 触摸事件修改：支持单指拖动和双指缩放
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
}))
}
},
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 step = (currentDist - startDist) / startDist * 10
this.zoom(step)
// 更新触摸起点
this.touchStart = touches.map(touch => ({
x: touch.clientX,
y: touch.clientY
}))
}
},
// 鼠标按下（开始拖动）
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'
},
// 计算两点之间的距离
getDistance (x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
},
zoomIn () {
if (this.scale < 2) {
this.zoom(8) // 每次放大8%
}
},
zoomOut () {
if (this.scale > 0.02) {
this.zoom(-8) // 每次缩小8%
}
}
}
}

30
src/config/getData.js
View File

@@ -1,4 +1,4 @@
import {post} from '@config/http.js'
import {post, get} from '@config/http.js'
// 登录
export const authlogin = (username, password) => post('auth/login', {
@@ -33,29 +33,7 @@ export const updateStation = (code, st) => post('api/operate/updateStation', {
station_code: code,
station_name: st
})
export const imageUrl = require('../images/new/apt_map.png')
// 地图
export const fetchMapData = () => {
let res = {
code: 200,
message: 'success',
data: {
image: imageUrl,
width: 400,
height: 300,
pixelRatio: 1,
leftBottomCoordinate: {x: -100, y: -300}
}
}
return res
}
export const fetchPathData = () => {
let res = {
code: 200,
message: 'success',
data: [{id: 'A', x: '0', y: '-200'}, {id: 'B', x: '100', y: '-250'}]
}
return res
}
export const getMapInfoByCode = () => get('mapInfo/getMapInfoByCode', {})
export const queryMapAllStation = () => get('station/queryMapAllStation', {})
export const getRouteInfo = () => get('routeInfo/getRouteInfo', {})

45
src/config/http.js
View File

@@ -4,6 +4,10 @@ import i18n from '../i18n/i18n'
axios.defaults.timeout = 50000
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
// 补充GET请求默认Content-Type（可选，GET请求通常无需此配置，但部分后端可能需要）
axios.defaults.headers.get['Content-Type'] = 'application/json;charset=UTF-8'
// 请求拦截器
axios.interceptors.request.use(
config => {
let token = ''
@@ -12,21 +16,17 @@ axios.interceptors.request.use(
}
token && (config.headers.Authorization = token)
if (config.method === 'post') {
if (!config.data.flag) {
config.data = config.data
} else {
config.data = config.data.formData
}
config.data = config.data
}
config.headers.post['Accept-Language'] = i18n.locale === 'en-us' ? 'en' : 'zh'
config.headers['Accept-Language'] = i18n.locale === 'en-us' ? 'en' : 'zh'
return config
},
error => {
// Dialog('错误的传参')
return Promise.reject(error)
}
)
// 响应拦截器
axios.interceptors.response.use(
response => {
return Promise.resolve(response)
@@ -35,27 +35,48 @@ axios.interceptors.response.use(
if (error && error.response) {
switch (error.response.status) {
case 400:
console.error('请求参数错误')
this.$message.error('请求参数错误')
break
case 401:
console.error('身份验证失败，即将跳转登录页')
break
case 404:
console.error('请求资源不存在')
break
case 500:
console.error('服务器内部错误')
break
default:
console.error('请求失败：', error.response.status)
}
return Promise.reject(error.response.data)
} else {
return Promise.reject(error)
console.error('网络错误或服务器无响应')
}
return Promise.reject(error.response.data || error.message)
}
)
export const post = (sevmethod, params) => {
return new Promise((resolve, reject) => {
axios.post(`${store.getters.baseUrl}/` + sevmethod, params)
axios.post(`${store.getters.baseUrl}/${sevmethod}`, params)
.then(response => {
resolve(response.data)
}, error => {
reject(error.message)
})
.catch((error) => {
reject(error)
})
})
}
export const get = (sevmethod, params = {}) => {
return new Promise((resolve, reject) => {
axios.get(`${store.getters.baseUrl}/${sevmethod}`, { params })
.then(response => {
resolve(response.data)
})
.catch(error => {
reject(error)
})
})
}

78
src/config/mork.js
View File

@@ -1,3 +1,4 @@
/* eslint-disable */
export const queryStation = () => {
let res = {
message: 'ok',
@@ -18,3 +19,80 @@ export const updateStation = () => {
}
return res
}
export const queryMapAllStation = () => {
let res = [
{
"station_id": 1,
"station_code": "A",
"station_name": "A",
"station_type": "STATION",
"action_type": "Customize",
"x": 0.0,
"y": 0.0,
"angle": 0.014406
},
{
"station_id": 2,
"station_code": "Goal_21",
"station_name": "Goal_21",
"station_type": "SYSTEM",
"action_type": "Move",
"x": 100.30318,
"y": 0.123685,
"angle": 0.0959
},
{
"station_id": 3,
"station_code": "C",
"station_name": "C",
"station_type": "STATION",
"action_type": "Customize",
"x": 200.0227,
"y": 0.316379,
"angle": 0.136773
}
]
return res
}
export const getRouteInfo = () => {
let res = [
{
"route_id": 1,
"start_id": 1,
"end_id": 2,
"start_x": 0.0,
"start_y": 0.0,
"end_x": 100.30318,
"end_y": 0.123685,
"navigation_mode": "1",
"route_type": "1"
},
{
"route_id": 2,
"start_id": 2,
"end_id": 3,
"start_x": -100.30318,
"start_y": 0.123685,
"end_x": 200.0227,
"end_y": 0.316379,
"navigation_mode": "0",
"route_type": "1"
}
]
return res
}
export const imageUrl = require('../images/new/apt_map.png')
export const getMapInfoByCode = () => {
let res = {
"mapCode": "apt_map_1752651599720.png",
"mapName": "apt_map_1752651599720.png",
"mapImageAddress": imageUrl,
"width": 359.0,
"height": 287.0,
"resolution": 1,
"x": -13.7,
"y": -7.1,
"angle": 0.0
}
return res
}

33
src/pages/modules/device.vue
View File

@@ -65,7 +65,8 @@
<script>
import SaveChain from './save-chain.vue'
import { queryStation, queryTaskChain, queryTaskChainDtl, sendTask, saveTask, cancelTask, deleteTaskChain, updateStation } from '@config/getData.js'
import { queryStation, queryTaskChain } from '@config/mork.js'
import { queryTaskChainDtl, sendTask, saveTask, cancelTask, deleteTaskChain, updateStation } from '@config/getData.js'
export default {
components: {
SaveChain
@@ -74,7 +75,7 @@ export default {
return {
activeName: 'zdy',
stationName: '',
radioOption: [{label: '取货', text: '取', value: 'Ascend'}, {label: '放货', text: '放', value: 'Descend'}, {label: '移动', text: '移', value: 'Move'}, {label: '返回点', text: '返', value: 'Customize'}],
radioOption: [{label: '取货', text: '取', value: 'Ascend'}, {label: '放货', text: '放', value: 'Descend'}, {label: '移动', text: '移', value: 'Move'}, {label: '返回点', text: '返', value: 'Move'}],
dataList: [],
newData: [],
linkData: [],
@@ -93,8 +94,27 @@ export default {
},
mounted () {
this._queryStation()
document.addEventListener('click', this.handleGlobalClick)
},
beforeDestroy () {
document.removeEventListener('click', this.handleGlobalClick)
},
methods: {
handleGlobalClick (event) {
// 遍历所有 popover
for (let i = 0; i < this.dataList.length; i++) {
const popover = this.$refs[`popover-${i}`]
if (popover && popover[0]) {
if (popover[0].$el.contains(event.target)) {
return
}
if (document.querySelector('#keyboard') && document.querySelector('#keyboard').contains(event.target)) {
return
}
popover[0].doClose()
}
}
},
// 站点查询
async _queryStation () {
try {
@@ -122,6 +142,11 @@ export default {
openPopover (index) {
const popover = this.$refs[`popover-${index}`]
if (popover && popover[0]) {
for (let i = 0; i < this.dataList.length; i++) {
if (i !== index) {
this.closePopover(i)
}
}
popover[0].doShow()
this.stationName = ''
}
@@ -177,6 +202,7 @@ export default {
},
// 选取动作类型
radioInput (e, i, value) {
console.log(this.newData)
const lastItem = this.newData.length > 0 ? this.newData[this.newData.length - 1].station_code : null
if (lastItem === e.station_code) {
this.$message('相邻的两个站点不能相同')
@@ -188,6 +214,9 @@ export default {
this.closePopover(i)
return
}
if (this.newData.length > 0 && this.newData[this.newData.length - 1].action_type === 'Move') {
return
}
e.action_type = value
this.newData.push({station_code: e.station_code, station_name: e.station_name, action_type: e.action_type})
this.closePopover(i)

176
src/pages/modules/map.vue
View File

@@ -2,7 +2,18 @@
<template>
<div class="page_container">
<div class="canvas-container">
<canvas id="mapCanvas" ref="mapCanvas" @wheel="handleZoom" @click="handleCanvasClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove"></canvas>
<canvas
id="mapCanvas"
ref="mapCanvas"
@wheel="handleZoom"
@click="handleCanvasClick"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@mousedown="handleMouseDown"
@mousemove="handleMouseMove"
@mouseup="handleMouseUp"
@mouseleave="handleMouseUp"
></canvas>
<el-row type="flex" justify="end" class="map_tools">
<el-button type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" style="border: 0;border-radius: 0;" @click="zoomOut"></el-button>
<div class="zoom_data">{{ zoomPercentage }}%</div>
@@ -17,11 +28,11 @@
>
<el-row type="flex" justify="space-between" class="popup-content" style="border-bottom: 1px solid #fff;">
<el-col :span="10"><h3>编号</h3></el-col>
<el-col :span="14"><p>{{selectedPoint.id}}</p></el-col>
<el-col :span="14"><p>{{selectedPoint.station_code}}</p></el-col>
</el-row>
<el-row type="flex" justify="space-between" class="popup-content">
<el-col :span="10"><h3>别名</h3></el-col>
<el-col :span="14"><p>-</p></el-col>
<el-col :span="14"><p>{{selectedPoint.station_name}}</p></el-col>
</el-row>
<el-row type="flex" justify="space-between" class="popup-content">
<el-col :span="10"><h3>X坐标</h3></el-col>
@@ -33,7 +44,7 @@
</el-row>
<el-row type="flex" justify="space-between" class="popup-content">
<el-col :span="10"><h3>角度值</h3></el-col>
<el-col :span="14"><p>0</p></el-col>
<el-col :span="14"><p>{{ selectedPoint.angle }}</p></el-col>
</el-row>
</div>
</div>
@@ -42,26 +53,25 @@
<script>
// import { throttle } from 'lodash'
import markerImage from '@images/new/agv.png'
import { fetchMapData, fetchPathData } from '@config/getData.js'
import { getMapInfoByCode, getRouteInfo, queryMapAllStation } from '@config/getData.js'
import canvasZoomDrag from '@config/canvasZoomDrag'
export default {
data () {
return {
scale: 1, // 缩放比例
canvas: null, // Canvas 元素
ctx: null, // Canvas 绘图上下文
touchStart: null, // 触摸起点
zoomPercentage: 100, // 当前缩放百分比
mapData: null, // 存储从后端获取的地图数据
pathData: null, // 存储从后端获取的路径数据
mapData: null, // 地图数据
pathData: null, // 路径数据
pointData: null, // 点位数据
showPopup: false,
selectedPoint: {},
popupStyle: {left: '0px', top: '0px'},
selectedPointId: null
}
},
mixins: [canvasZoomDrag],
mounted () {
this._fetchMapData()
this._getMapInfoByCode()
document.addEventListener('click', this.handleDocumentClick)
},
beforeDestroy () {
@@ -69,26 +79,53 @@ export default {
document.removeEventListener('click', this.handleDocumentClick)
},
methods: {
async _fetchMapData () {
async _getMapInfoByCode () {
try {
let res = await fetchMapData()
let res = await getMapInfoByCode()
if (res) {
this.mapData = res.data
this._fetchPathData()
this.mapData = res
this._getRouteInfo()
}
} catch (e) {
this.$message.error(e)
}
},
async _fetchPathData () {
async _getRouteInfo () {
try {
let res = await fetchPathData()
this.pathData = [...res.data]
let res = await getRouteInfo()
this.pathData = [...res]
this._queryMapAllStation()
} catch (e) {
this.$message.error(e)
}
},
async _queryMapAllStation () {
try {
let res = await queryMapAllStation()
const stations = [...res]
this.pointData = this.filterPointData(this.pathData, stations)
this.initCanvas()
} catch (e) {
this.$message.error(e)
}
},
filterPointData (routes, stations) {
const result = []
const seenStationIds = new Set()
routes.forEach((route) => {
const startStation = stations.find((station) => station.station_id === route.start_id)
const endStation = stations.find((station) => station.station_id === route.end_id)
if (startStation && !seenStationIds.has(startStation.station_id)) {
result.push(startStation)
seenStationIds.add(startStation.station_id)
}
if (endStation && !seenStationIds.has(endStation.station_id)) {
result.push(endStation)
seenStationIds.add(endStation.station_id) // 标记为已添加
}
})
return result
},
initCanvas () {
this.canvas = this.$refs.mapCanvas
this.ctx = this.canvas.getContext('2d')
@@ -99,11 +136,11 @@ export default {
redrawCanvas () {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
const img = new Image()
img.src = this.mapData.image
img.src = `${this.$store.getters.baseUrl}${this.mapData.mapImageAddress}`
img.onload = () => {
this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
this.ctx.save()
this.ctx.translate(this.mapData.leftBottomCoordinate.x * -1 * this.mapData.pixelRatio, 0)
this.ctx.translate(this.mapData.x * -1 * this.mapData.resolution, 0)
this.ctx.scale(1, -1)
this.drawPath()
this.drawMarkers()
@@ -112,26 +149,25 @@ export default {
drawPath () {
this.ctx.beginPath()
this.pathData.forEach((point, index) => {
const x = point.x * this.mapData.pixelRatio
const y = point.y * this.mapData.pixelRatio
if (index === 0) {
this.ctx.moveTo(x, y)
} else {
this.ctx.lineTo(x, y)
}
const startX = point.start_x * this.mapData.resolution
const startY = point.start_y * this.mapData.resolution
const endX = point.end_x * this.mapData.resolution
const endY = point.end_y * this.mapData.resolution
this.ctx.moveTo(startX, startY)
this.ctx.lineTo(endX, endY)
this.ctx.strokeStyle = '#009de5'
this.ctx.lineWidth = 3
this.ctx.stroke()
})
this.ctx.strokeStyle = '#009de5'
this.ctx.lineWidth = 3
this.ctx.stroke()
},
drawMarkers () {
const markerImg = new Image()
markerImg.src = markerImage
markerImg.onload = () => {
this.pathData.forEach(point => {
const x = point.x * this.mapData.pixelRatio
const y = point.y * this.mapData.pixelRatio
if (point.id === this.selectedPointId) {
this.pointData.forEach(point => {
const x = point.x * this.mapData.resolution
const y = point.y * this.mapData.resolution
if (point.station_id === this.selectedPointId) {
this.ctx.beginPath()
this.ctx.arc(x, y, 10, 0, Math.PI * 2)
this.ctx.fillStyle = '#59ccd2'
@@ -144,24 +180,26 @@ export default {
this.ctx.font = '12px Arial'
this.ctx.fillStyle = 'white'
this.ctx.textAlign = 'center'
this.ctx.fillText(point.id, x, -y + 25)
this.ctx.fillText(point.station_name, x, -y + 25)
this.ctx.restore()
})
}
},
handleCanvasClick (event) {
const rect = this.canvas.getBoundingClientRect()
const mouseX = event.clientX - rect.left
const mouseY = event.clientY - rect.top
this.pathData.forEach(point => {
const x = (point.x - this.mapData.leftBottomCoordinate.x) * this.mapData.pixelRatio
const y = point.y * -1 * this.mapData.pixelRatio
const mouseX = (event.clientX - rect.left) / this.scale
const mouseY = (event.clientY - rect.top) / this.scale
this.pointData.forEach(point => {
let x = (point.x - this.mapData.x) * this.mapData.resolution
let y = point.y * -1 * this.mapData.resolution
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) {
if (this.selectedPointId === point.id) {
if (this.selectedPointId === point.station_id) {
this.resetSelection()
} else {
this.selectedPointId = point.id
this.selectedPointId = point.station_id
this.selectedPoint = point
this.showPopup = true
this.popupStyle = {
@@ -184,55 +222,6 @@ export default {
this.showPopup = false
this.initCanvas()
}
},
zoom (step) {
this.scale = Math.min(2, Math.max(0.02, this.scale + step / 100))
this.zoomPercentage = Math.round(this.scale * 100)
this.applyTransform()
},
applyTransform () {
this.canvas.style.transform = `scale(${this.scale})`
},
// 鼠标滚动缩放
handleZoom (event) {
event.preventDefault()
const delta = event.deltaY
const step = delta > 0 ? -1 : 1
this.zoom(step)
},
// 触摸开始事件
handleTouchStart (event) {
this.touchStart = Array.from(event.touches).map(touch => ({
x: touch.clientX,
y: touch.clientY
}))
},
// 触摸移动事件
handleTouchMove (event) {
if (this.touchStart && this.touchStart.length === 2 && event.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(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY)
const step = (currentDist - startDist) / startDist
this.zoom(step)
}
this.touchStart = Array.from(event.touches).map(touch => ({
x: touch.clientX,
y: touch.clientY
}))
},
// 计算两点之间的距离
getDistance (x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
},
zoomIn () {
if (this.scale < 2) {
this.zoom(8) // 每次放大8%
}
},
zoomOut () {
if (this.scale > 0.02) {
this.zoom(-8) // 每次缩小8%
}
}
}
}
@@ -246,9 +235,8 @@ export default {
align-items: center;
height calc(100% - .32rem)
background-color rgba(4, 33, 58, 70%)
// background-color rgb(11 68 137 / 70%)
box-shadow inset 1px 1px 7px 2px #4d9bcd
overflow auto
overflow hidden
.map_tools
position absolute
top 0

23
src/pages/shells/index.vue
View File

@@ -9,9 +9,9 @@
<div class="state-item">自动模式</div>
<div v-if="JSON.stringify(topInfo) !== '{}'" class="state-item">{{ topInfo.state }}</div>
<div v-if="JSON.stringify(topInfo) !== '{}'" class="relative elec-qty-wrap" :class="{'elec-wraning': topInfo.batteryPower <= 40}">
<div class="absolute elec-qty" :style="{ width: topInfo.batteryPower !== -1 ? `calc(100% - ${topInfo.batteryPower}%)` : '100%' }"></div>
<div class="absolute elec-qty" :style="{ width: Number(topInfo.batteryPower) !== -1 ? `calc(100% - ${topInfo.batteryPower}%)` : '100%' }"></div>
<div class="absolute elec-qty-border"></div>
<div class="elec-txt">{{topInfo.batteryPower !== -1 ? `${topInfo.batteryPower}%` : '0'}}</div>
<div class="elec-txt">{{Number(topInfo.batteryPower) !== -1 ? `${topInfo.batteryPower}%` : '0'}}</div>
</div>
<div v-else class="relative elec-qty-wrap elec-wraning">
<div class="absolute elec-qty" style="width: 100%"></div>
@@ -54,7 +54,24 @@ export default {
data () {
return {
timer: null,
topInfo: {},
topInfo: {
batteryPower: -1.0,
exceptionInfo: {
exception: ['重定位失败,检查环境或标记是否有变化.', '定位超时，尝试移动小车位置后重试.'],
exceptionCodes: [1, 17179869185, 1335734829057]
},
id: '1', // 车号ID
ip: '192.168.100.82', // 车辆IP
isManual: false, // 是否是手动，true是手动,false是自动
mapId: 39, // 地图ID
mapName: 'apt_map_1753078481180', // 地图名称
name: 'V1', // 车辆名称
state: '未知状态', // 车辆状态
stateId: 7, // 车辆状态ID
theta: 0.9073792099952698, // 车辆航向角
x: -4.030919075012207, // 车辆x坐标
y: -1.6574244499206543 // 车辆y坐标
},
loginVisible: false,
configVisible: false
}