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-11-03 13:22:31 +08:00
parent 4e105e7127
commit 81bb71f8b1
4 changed files with 4 additions and 1262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/config/http.js
View File

@@ -47,7 +47,7 @@ axios.interceptors.response.use(
default:
console.log('请求失败：', error.response.status)
}
return Promise.reject(error.response.data || error.message)
return Promise.reject(error.response.data.message || error.message)
} else {
console.log('网络错误或服务器无响应')
return Promise.reject(new Error('网络错误或服务器无响应'))
@@ -62,7 +62,7 @@ export const post = (sevmethod, params) => {
resolve(response.data)
})
.catch((error) => {
reject(error.message)
reject(error.message || error)
})
})
}
@@ -74,7 +74,7 @@ export const get = (sevmethod, params = {}) => {
resolve(response.data)
})
.catch(error => {
reject(error.message)
reject(error.message || error)
})
})
}

644
src/pages/modules/build/gl-map-4.vue
View File

@@ -1,644 +0,0 @@
<template>
<div class="point-cloud-map">
<div ref="canvasContainer" class="canvas-container">
<canvas ref="pointCloudCanvas"></canvas>
</div>
<el-button icon="el-icon-location" size="mini" class="locate-button" @click="locateCar">
</el-button>
<div v-if="isLoading" class="loading-indicator">{{ $t('Loading') }}</div>
</div>
</template>
<script>
/* eslint-disable */
import * as THREE from 'three'
import { mapGetters } from 'vuex'
// import { points } from '../../config/point.js'
// import { points1 } from '../../config/point1.js'
// import { points2 } from '../../config/point2.js'
export default {
name: 'PointCloudMap',
data() {
return {
// Three.js相关
scene: null,
camera: null,
renderer: null,
pointCloud: null,
pointMaterial: null,
pointGeometry: null,
carMesh: null,
carTexture: null,
// 点云数据
allPoints: [],
pointCount: 0,
maxPoints: 1000000, // 最大点数限制
// 点云坐标范围配置（根据实际数据调整）
pointCloudRange: {
minX: 0, // 点云X轴最小值
maxX: 10, // 点云X轴最大值
minY: 0, // 点云Y轴最小值
maxY: 10 // 点云Y轴最大值
},
// 小车相关
vehicleImage: require('../../images/new/agv.png'),
carMovementEnabled: true,
carSize: 30,
// 视图控制
isDragging: false,
previousTouchX: 0,
previousTouchY: 0,
cameraX: 0,
cameraY: 0,
zoomRange: {
min: 0.1, // 最小缩放（最多缩小到1/10原尺寸）
max: 2 // 最大缩放（最多放大到10倍原尺寸）
},
cameraZoom: 1,
initialPinchDistance: null,
initialZoom: null,
// UI控制
pointSize: 2,
// WebSocket相关
socket: null,
isLoading: true,
reconnectTimer: null, // 重连计时器
animationFrameId: null,
// 优化相关参数
updateThrottle: 50, // 数据更新节流间隔(ms)
lastUpdateTime: 0
// resizeHandler: null // 存储resize事件处理函数
}
},
computed: {
...mapGetters(['serverUrl', 'userRole', 'carPosition']),
},
watch: {
carPosition: {
handler(newVal) {
this.updateCarPosition(newVal)
},
deep: true
}
},
beforeDestroy() {
this.cleanupResources();
},
mounted () {
this.initThreeJS();
},
methods: {
cleanupResources() {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId)
this.closeWebSocket()
// 清理Three.js资源
if (this.renderer) {
this.renderer.dispose();
this.renderer.forceContextLoss();
this.renderer = null;
}
if (this.pointGeometry) {
this.pointGeometry.dispose();
this.pointGeometry = null;
}
if (this.pointMaterial) {
this.pointMaterial.dispose();
this.pointMaterial = null;
}
if (this.carTexture) {
this.carTexture.dispose();
this.carTexture = null;
}
if (this.scene) {
this.scene.clear();
this.scene = null;
}
// if (this.resizeHandler) {
// window.removeEventListener('resize', this.resizeHandler);
// this.resizeHandler = null;
// }
const canvas = this.$refs.pointCloudCanvas;
if (canvas) {
canvas.removeEventListener('touchstart', null);
canvas.removeEventListener('touchmove', null);
canvas.removeEventListener('touchend', null);
canvas.removeEventListener('mousedown', null);
canvas.removeEventListener('mousemove', null);
canvas.removeEventListener('mouseup', null);
canvas.removeEventListener('mouseleave', null);
canvas.removeEventListener('wheel', null);
}
this.camera = null;
this.pointCloud = null;
this.carMesh = null;
this.allPoints = [];
this.pointCount = 0;
},
initThreeJS() {
// 初始化Three.js场景
const container = this.$refs.canvasContainer;
const aspectRatio = container.clientWidth / container.clientHeight;
let viewSize = 10; // 默认初始大小
if (this.allPoints.length > 0) {
const actualRangeX = this.pointCloudRange.maxX - this.pointCloudRange.minX;
const actualRangeY = this.pointCloudRange.maxY - this.pointCloudRange.minY;
viewSize = Math.max(actualRangeX, actualRangeY) * 1.1;
}
this.scene = new THREE.Scene();
this.camera = new THREE.OrthographicCamera(
-viewSize * aspectRatio / 2,
viewSize * aspectRatio / 2,
viewSize / 2,
-viewSize / 2,
0.1,
2000
);
this.camera.position.z = 10;
const canvas = this.$refs.pointCloudCanvas;
this.renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: false,
alpha: true, // 关键：启用alpha通道
transparent: true // 关键：允许透明
});
this.updateRendererSize();
this.createPointCloud();
this.createCar();
this.setupEventListeners();
this.animate();
},
createPointCloud() {
this.pointGeometry = new THREE.BufferGeometry();
this.pointMaterial = new THREE.PointsMaterial({
size: this.pointSize,
color: 0xFFFFFF,
sizeAttenuation: false,
transparent: false, // 不透明
depthWrite: true,
antialias: false
});
this.pointCloud = new THREE.Points(this.pointGeometry, this.pointMaterial);
this.scene.add(this.pointCloud);
},
createCar() {
const textureLoader = new THREE.TextureLoader();
textureLoader.load(this.vehicleImage, (texture) => {
this.carTexture = texture;
// 纹理过滤设置
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.needsUpdate = true;
const carMaterial = new THREE.SpriteMaterial({
map: texture,
transparent: true,
opacity: 1,
depthWrite: false // 避免z-fight
});
this.carMesh = new THREE.Sprite(carMaterial);
const actualRangeY = this.pointCloudRange.maxY - this.pointCloudRange.minY;
const carScale = actualRangeY / 5;
this.carMesh.scale.set(carScale * 1.5, carScale * 1.5, 1);
this.carMesh.position.set(this.carPosition.x, this.carPosition.y, 5);
this.carMesh.rotation.z = this.carPosition.angle;
this.scene.add(this.carMesh);
});
},
updatePointCloud(points) {
if (!points || !Array.isArray(points) || points.length === 0) return;
// 计算新点的范围
const newRange = this.calculateNewPointsRange(points);
// 检查是否需要扩展现有范围
const rangeExpanded = this.expandPointCloudRange(newRange);
const pointSet = new Set();
this.allPoints.forEach(point => {
const key = `${point.x},${point.y}`;
pointSet.add(key);
});
const newUniquePoints = points.filter(point => {
const key = `${point.x},${point.y}`;
if (pointSet.has(key)) return false;
pointSet.add(key);
return true;
});
if (newUniquePoints.length === 0 && !rangeExpanded) return;
this.allPoints.push(...newUniquePoints);
if (this.allPoints.length > this.maxPoints) {
this.allPoints.splice(0, this.allPoints.length - this.maxPoints);
}
this.pointCount = this.allPoints.length;
this.updatePointCloudGeometry();
if (rangeExpanded) {
this.adjustCameraToNewRange();
}
},
// 计算新点的范围
calculateNewPointsRange(points) {
if (!points || points.length === 0) return null;
let minX = Infinity, maxX = -Infinity;
let minY = Infinity, maxY = -Infinity;
points.forEach(point => {
const x = point.x || 0;
const y = point.y || 0;
minX = Math.min(minX, x);
maxX = Math.max(maxX, x);
minY = Math.min(minY, y);
maxY = Math.max(maxY, y);
});
return { minX, maxX, minY, maxY };
},
// 扩展现有范围（如果新点超出了当前范围）
expandPointCloudRange(newRange) {
if (!newRange) return false;
let expanded = false;
// 初始化范围（如果是首次）
if (this.allPoints.length === 0) {
this.pointCloudRange = { ...newRange };
return true;
}
// 检查并扩展X范围
if (newRange.minX < this.pointCloudRange.minX) {
this.pointCloudRange.minX = newRange.minX;
expanded = true;
}
if (newRange.maxX > this.pointCloudRange.maxX) {
this.pointCloudRange.maxX = newRange.maxX;
expanded = true;
}
// 检查并扩展Y范围
if (newRange.minY < this.pointCloudRange.minY) {
this.pointCloudRange.minY = newRange.minY;
expanded = true;
}
if (newRange.maxY > this.pointCloudRange.maxY) {
this.pointCloudRange.maxY = newRange.maxY;
expanded = true;
}
return expanded;
},
// 新增：根据新范围调整相机
adjustCameraToNewRange() {
// 保持当前相机的缩放比例，但调整视野以适应新范围
this.updateRendererSize();
// 可选：如果希望在范围扩展时自动将新区域纳入视野
// 可以计算新的中心点并调整相机位置
const centerX = (this.pointCloudRange.minX + this.pointCloudRange.maxX) / 2;
const centerY = (this.pointCloudRange.minY + this.pointCloudRange.maxY) / 2;
// 平滑过渡到新中心（如果需要）
this.cameraX = centerX;
this.cameraY = centerY;
},
updatePointCloudGeometry() {
const positions = new Float32Array(this.pointCount * 3);
// 填充坐标数据
for (let i = 0; i < this.pointCount; i++) {
const point = this.allPoints[i];
positions[i * 3] = point.x || 0;
positions[i * 3 + 1] = point.y || 0;
positions[i * 3 + 2] = 0; // 固定z轴
}
// 正确处理缓冲区大小变化的情况
if (this.pointGeometry.attributes.position) {
// 如果数组大小不同，需要先删除旧属性再添加新属性
if (this.pointGeometry.attributes.position.array.length !== positions.length) {
this.pointGeometry.deleteAttribute('position');
this.pointGeometry.setAttribute(
'position',
new THREE.BufferAttribute(positions, 3)
);
} else {
// 大小相同则直接更新内容
this.pointGeometry.attributes.position.array.set(positions);
this.pointGeometry.attributes.position.needsUpdate = true;
}
} else {
// 首次创建属性
this.pointGeometry.setAttribute(
'position',
new THREE.BufferAttribute(positions, 3)
);
}
},
updateCarPosition(position) {
if (!this.carMovementEnabled || !this.carMesh) return;
this.carMesh.position.set(position.x, position.y, 5);
this.carMesh.rotation.z = position.angle;
},
animate() {
this.animationFrameId = requestAnimationFrame(this.animate);
let isCameraUpdated = false;
// 优化：仅在相机状态变化时更新
if (this.camera.position.x !== this.cameraX || this.camera.position.y !== this.cameraY) {
this.camera.position.x = this.cameraX;
this.camera.position.y = this.cameraY;
isCameraUpdated = true;
}
if (this.camera.zoom !== this.cameraZoom) {
this.camera.zoom = this.cameraZoom;
isCameraUpdated = true;
}
if (isCameraUpdated) {
this.camera.updateProjectionMatrix();
}
this.renderer.render(this.scene, this.camera);
},
updateRendererSize() {
const container = this.$refs.canvasContainer;
const width = container.clientWidth;
const height = container.clientHeight;
const aspectRatio = width / height;
let viewSize = 10; // 默认大小
if (this.allPoints.length > 0) {
const actualRangeX = this.pointCloudRange.maxX - this.pointCloudRange.minX;
const actualRangeY = this.pointCloudRange.maxY - this.pointCloudRange.minY;
viewSize = Math.max(actualRangeX, actualRangeY) * 1.1; // 增加10%的边距
}
this.camera.left = -viewSize * aspectRatio / 2 / this.cameraZoom;
this.camera.right = viewSize * aspectRatio / 2 / this.cameraZoom;
this.camera.top = viewSize / 2 / this.cameraZoom;
this.camera.bottom = -viewSize / 2 / this.cameraZoom;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
},
locateCar() {
// 将相机对准小车
this.cameraX = this.carPosition.x;
this.cameraY = this.carPosition.y;
},
setupEventListeners() {
const canvas = this.$refs.pointCloudCanvas;
// this.resizeHandler = () => this.updateRendererSize();
// window.addEventListener('resize', this.resizeHandler);
// 触摸事件 - 平移
canvas.addEventListener('touchstart', (e) => {
if (e.touches.length === 1) {
this.isDragging = true;
this.previousTouchX = e.touches[0].clientX;
this.previousTouchY = e.touches[0].clientY;
e.preventDefault();
}
});
canvas.addEventListener('touchmove', (e) => {
if (this.isDragging && e.touches.length === 1) {
const deltaX = e.touches[0].clientX - this.previousTouchX;
const deltaY = e.touches[0].clientY - this.previousTouchY;
// 添加最小移动阈值
if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1) return;
// 移动相机（反转方向以获得自然拖动效果）
this.cameraX -= deltaX * 0.05 / this.cameraZoom;
this.cameraY += deltaY * 0.05 / this.cameraZoom;
this.previousTouchX = e.touches[0].clientX;
this.previousTouchY = e.touches[0].clientY;
e.preventDefault();
}
// 双指 pinch 缩放
if (e.touches.length === 2) {
const touch1 = e.touches[0];
const touch2 = e.touches[1];
// 计算当前两点间的距离
const currentDistance = Math.hypot(
touch1.clientX - touch2.clientX,
touch1.clientY - touch2.clientY
);
// 计算初始两点间的距离
if (!this.initialPinchDistance) {
this.initialPinchDistance = currentDistance;
this.initialZoom = this.cameraZoom;
}
// 1. 计算新的缩放比例
let newZoom = this.initialZoom * (currentDistance / this.initialPinchDistance);
// 2. 强制限制在缩放范围内
newZoom = Math.max(this.zoomRange.min, Math.min(this.zoomRange.max, newZoom));
// 3. 更新缩放并刷新视图
if (newZoom !== this.cameraZoom) {
this.cameraZoom = newZoom;
this.updateRendererSize();
}
e.preventDefault();
}
});
canvas.addEventListener('touchend', ()=> {
this.isDragging = false;
this.initialPinchDistance = null;
this.initialZoom = null
});
// 鼠标事件（用于桌面设备测试）
canvas.addEventListener('mousedown', (e) => {
this.isDragging = true;
this.previousTouchX = e.clientX;
this.previousTouchY = e.clientY;
});
canvas.addEventListener('mousemove', (e) => {
if (this.isDragging) {
const deltaX = e.clientX - this.previousTouchX;
const deltaY = e.clientY - this.previousTouchY;
if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1) return;
this.cameraX -= deltaX * 0.05 / this.cameraZoom;
this.cameraY += deltaY * 0.05 / this.cameraZoom;
this.previousTouchX = e.clientX;
this.previousTouchY = e.clientY;
}
});
canvas.addEventListener('mouseup', () => {
this.isDragging = false;
});
canvas.addEventListener('mouseleave', () => {
this.isDragging = false;
});
// 鼠标滚轮缩放
canvas.addEventListener('wheel', (e)=> {
e.preventDefault();
// 1. 计算新的缩放比例（步长保持1.05，即每次滚动缩放5%）
let newZoom = e.deltaY < 0
? this.cameraZoom * 1.05 // 滚轮向上：放大
: this.cameraZoom / 1.05; // 滚轮向下：缩小
// 2. 强制限制在缩放范围内
newZoom = Math.max(this.zoomRange.min, Math.min(this.zoomRange.max, newZoom));
// 3. 更新缩放并刷新视图
if (newZoom !== this.cameraZoom) {
this.cameraZoom = newZoom;
this.updateRendererSize();
}
});
},
initWebSocket() {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
const protocol = this.serverUrl.startsWith('https') ? 'wss' : 'ws'
const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
this.socket = new WebSocket(`${protocol}://${wsHost}/webSocket/PointCloudData/${this.userRole}`)
this.socket.onopen = () => {
console.log('WebSocket连接已建立')
this.isLoading = false
}
this.socket.onmessage = (event) => {
try {
const now = Date.now()
if (now - this.lastUpdateTime < this.updateInterval) {
return
}
this.lastUpdateTime = now
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
const pointData = JSON.parse(event.data)
this.updatePointCloud(pointData.data)
} catch (error) {
console.error('解析点云数据失败:', error)
}
}
this.socket.onclose = (event) => {
console.log('WebSocket连接已关闭，代码:', event.code)
this.isLoading = true
this.reconnectTimer = setTimeout(() => this.initWebSocket(), 3000)
}
this.socket.onerror = (error) => {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
console.error('WebSocket错误:', error)
this.isLoading = true
}
},
closeWebSocket() {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
if (this.socket) {
this.socket.onopen = null
this.socket.onmessage = null
this.socket.onclose = null
this.socket.onerror = null
this.socket.close(1000, '组件销毁')
this.socket = null
}
this.allPoints = []
},
init() {
this.initWebSocket()
// this.isLoading = false;
// const pointData = points.data
// this.updatePointCloud(pointData);
// setTimeout(() => {
// const arr = points1.data
// this.updatePointCloud(arr);
// }, 1000)
// setTimeout(() => {
// const arr = points2.data
// this.updatePointCloud(arr);
// }, 2000)
}
}
}
</script>
<style lang="stylus" scoped>
.point-cloud-map
position relative
width 100%
height 100%
background-color rgba(4, 33, 58, 70%)
box-shadow inset 1px 1px 7px 2px #4d9bcd
overflow hidden
.canvas-container
display: flex;
align-items: center;
justify-content: center;
width: 100%
height: 100%
position: relative
z-index: 0
// 定位按钮样式
.locate-button
position: absolute
bottom: 20px
right: 20px
width: 40px
height: 40px
border-radius: 50%
background-color: rgba(255, 255, 255, 0.8)
border: none
color: #333
font-size: 18px
cursor: pointer
display: flex
align-items: center
justify-content: center
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2)
z-index: 100
transition: all 0.2s ease
&:hover
background-color: white
transform: scale(1.05)
&:active
transform: scale(0.95)
.loading-indicator
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
background-color: rgba(255, 255, 255, 0.8)
padding: .01rem .02rem
border-radius: 4px
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)
font-size: .12rem
color: #333
z-index: 100
display: flex
align-items: center
</style>

615
src/pages/modules/build/index copy.vue
View File

@@ -1,615 +0,0 @@
<template>
<div class="page_container" :class="{'enClass': $i18n.locale === 'en-us'}">
<div id="v-step-1" class="map_container">
<gl-map ref="glMap"/>
</div>
<el-row type="flex" justify="space-between">
<el-col :span="15">
<el-row type="flex">
<button id="v-step-2" class="button_control" :disabled="disabled" @click="addPoint"><p>{{$t('MarkPoint')}}</p></button>
<button class="button_control" style="margin-left: 10px" :disabled="disabled" @click="closeCloud"><p>{{cloudOff ? $t('EnablePointCloud') : $t('DisablePointCloud')}}</p></button>
<div class="car-info">{{$t('CartPosition')}}: <span>{{ carPosition.x }}, {{carPosition.y}}</span></div>
</el-row>
</el-col>
<el-col :span="1" style="color: #fff;">{{ autoBackEnable }}, {{autoBackFinish}}</el-col>
<el-col :span="8">
<el-row type="flex" justify="end">
<button class="button_control" @click="$router.push('/index/home')"><p>{{$t('AbandonMapbuild')}}</p></button>
<button id="v-step-3" class="button_control" :class="{'button_control_gray': autoLoopEnable !== '1'}" style="margin-left: 10px" :disabled="disabled" @click="stopMappingConfirm"><p>{{$t('FinishMapbuild')}}</p></button>
</el-row>
</el-col>
</el-row>
<el-dialog
:title="$t('SetUpStation')"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="55%">
<el-form :model="dataForm" ref="dataForm" :rules="dataRule" :label-width="$i18n.locale === 'en-us' ? '' : '1.1rem'" size="mini" @submit.native.prevent>
<el-form-item :label="$t('StationName')" prop="stationName">
<el-input v-model="dataForm.stationName" id="stationName"></el-input>
</el-form-item>
</el-form>
<el-row type="flex" justify="space-around" style="margin-top: .3rem">
<el-col :span="7"><button class="button_control button_control_disabled" @click="dialogVisible = false"><p>{{$t('Cancel')}}</p></button></el-col>
<el-col :span="7"><button class="button_control" @click="stationConfirm"><p>{{$t('Save')}}</p></button></el-col>
</el-row>
</el-dialog>
<transition name="custom-message" >
<div v-if="message" class="message" :style="{'top': isTop ? '.87rem' : '.57rem', 'color': error ? '#F56C6C' : '#67C23A'}">
<i :class="error ? 'el-icon-error' : 'el-icon-success'"></i>
<p>{{ message }}</p>
</div>
</transition>
<div v-if="showProgress" class="progress-mask">
<!-- 进度条内容区 -->
<div class="progress-container">
<div class="progress_tip">{{warnTip ? $t('Mapdeployed') : $t('Mapgenerated')}}</div>
<el-progress
v-show="!warnTip"
:percentage="percentage"
:stroke-width="10"
style="width: 300px;"
></el-progress>
</div>
</div>
<div v-if="tipShow" class="progress-mask">
<div class="progress-container">
<div class="progress_tip">{{autoBackFinish === '2' ? $t('autobackfailedmanually') : $t('vehicleautobacknotmanwaitcompleted')}}</div>
<button v-if="autoBackFinish === '2'" class="button_control" style="margin-top: 25px;" @click="failHandle"><p>{{$t('Confirm')}}</p></button>
</div>
</div>
</div>
</template>
<script>
import GlMap from './gl-map.vue'
import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'
import { startMapping, stopMapping, getMappingStatus, setStation, oneClickDeployment, abandonMapping, sendAutoBack } from '@/config/getData.js'
import { mapGetters } from 'vuex'
export default {
name: 'ModuleBuilding',
components: {
GlMap
},
beforeRouteLeave (to, from, next) {
if (this.needsConfirmation) {
this.$confirm(this.$t('Doabandonmapattempt'), this.$t('Prompt'), {
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(async () => {
try {
// 显示加载中状态
this.loading = this.$loading({
lock: true,
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.6)'
})
// 调用放弃建图接口
const res = await abandonMapping()
this.loading.close()
if (res && res.code === 200) {
// 接口成功，允许离开页面
this.needsConfirmation = false // 标记无需再确认
next()
} else {
// 接口返回失败，提示错误并阻止离开
this.$message.error(res.message)
next(false)
}
} catch (error) {
// 发生异常，提示错误并阻止离开
this.loading.close()
next(false)
}
}).catch(() => {
next(false) // 阻止离开
})
} else {
next()
}
},
data () {
const validateStationName = (rule, value, callback) => {
if (value && value.includes(',')) {
callback(new Error(this.$t('stationnotcommas')));
} else {
callback();
}
}
return {
cloudOff: false,
driver: null,
driverActive: true,
needsConfirmation: true,
mapName: '',
dialogVisible: false,
dataForm: {
stationCode: '',
stationName: ''
},
dataRule: {
stationName: [
{ validator: validateStationName, trigger: 'blur' }
]
},
submitSuccess: false,
keyPoints: [],
disabled: false,
message: '', // 用于显示消息
error: false,
showProgress: false,
warnTip: false,
percentage: 0,
intervalId: null, // 用于存储定时器ID
backActive: false, // 打点完成后新增一个弹框 提示用户是否自动开回上一个点
tipShow: false // 正在自动回退中的提示
}
},
computed: {
...mapGetters(['isTop', 'carPosition', 'autoLoopEnable', 'autoBackEnable', 'autoBackFinish'])
},
watch: {
autoBackEnable: {
handler (val) {
this.backHandleChange(this.backActive, val)
},
deep: true
},
backActive: {
handler (val) {
this.backHandleChange(val, this.autoBackEnable)
},
deep: true
},
autoBackFinish: {
handler (val) {
if (val === '1') {
this.$nextTick(() => {
this.$refs.glMap.init()
})
this.tipShow = false
}
},
deep: true
}
},
beforeDestroy () {
document.removeEventListener('keydown', this.handleKeydown);
if (this.intervalId) {
clearTimeout(this.intervalId)
}
},
mounted() {
// 初始化并启动引导
this.$nextTick(() => {
this.initGuide()
})
document.addEventListener('keydown', this.handleKeydown);
},
methods: {
/* eslint-disable */
backHandleChange(active, val) {
if (active && val === '0') {
this.loading = this.$loading({
lock: true,
text: this.$t('systemcalculatingnotmovevehicle'),
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.6)'
})
}
if (active && val === '1') {
this.loading.close()
}
if (active && val === '2') {
this.loading.close()
this.$confirm(this.$t('Whetherdrivebackpoint'), this.$t('Prompt'), {
confirmButtonText: this.$t('yes'),
cancelButtonText: this.$t('no'),
type: 'warning'
}).then(() => {
this._sendAutoBack('0')
this.backActive = false
}).catch(() => {
this._sendAutoBack('1')
this.backActive = false
})
}
},
handleKeydown(event) {
// 仅在对话框可见时响应Enter键
if (this.dialogVisible && event.key === 'Enter') {
event.preventDefault(); // 阻止默认行为
this.stationConfirm();
}
},
initGuide() {
const config = {
// allowClose: false,
overlayOpacity: 0.7,
popoverClass: 'driverjs-theme',
stagePadding: 0,
nextBtnText: this.$t('next'),
prevBtnText: this.$t('previous'),
doneBtnText: this.$t('close'),
onDestroyed: () => {
this.driverActive = false
this._startMapping()
},
onPopoverRender: (popover, {config, state}) => {
if (state.activeIndex === 0) {
const popoverElement = document.querySelector('.driver-popover')
if (popoverElement) {
setTimeout(()=>{
popoverElement.style.top = '25%'
popoverElement.style.bottom = 'auto'
popoverElement.style.left = 'calc(2% + 0.2rem)'
popoverElement.style.right = 'auto'
}, 20)
}
}
}
}
const steps = [
{
element: '#v-step-1',
popover: {
description: this.$t('driverTxt1'),
side: 'left',
align: 'center'
}
},
{
element: '#v-step-2',
popover: {
description: this.$t('driverTxt2'),
side: 'top',
align: 'start'
}
},
{
element: '#v-step-3',
popover: {
description: this.$t('driverTxt3'),
side: 'top',
align: 'end'
}
}
];
this.driver = driver({
...config,
steps
})
this.driver.drive()
},
// 开始建图
async _startMapping () {
try {
this.loading = this.$loading({
lock: true,
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.6)'
})
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始，补0
const day = String(now.getDate()).padStart(2, '0')
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0')
this.mapName = `apt_map_${year}${month}${day}${hours}${minutes}${seconds}`
let res = await startMapping(this.mapName)
if (res && res.code === 200) {
this.message = this.$t('carbuildingmap')
this.error = false
this.$nextTick(() => {
this.$refs.glMap.init()
})
}
this.loading.close()
} catch (e) {
this.message = this.$t('errorbuildingredone')
this.error = true
this.loading.close()
}
},
// 打点
addPoint () {
if (this.driverActive) return
this.dialogVisible = true
this.dataForm.stationCode = 'B' + (this.keyPoints.length + 1)
const na = this.$i18n.locale === 'en-us' ? 'Work point ' : '工作点'
this.dataForm.stationName = `${na}${this.keyPoints.length + 1}`
this.$nextTick(() => {
const input = document.getElementById('stationName');
if (input) {
input.focus();
}
})
},
// 打点->保存
stationConfirm () {
this.$refs.dataForm.validate((valid) => {
if (valid) {
this.submitSuccess = true
this._setStation()
setTimeout(() => {
this.submitSuccess = false
}, 3000)
} else {
return false
}
})
},
async _setStation () {
this.disabled = true
try {
let res = await setStation(this.dataForm.stationName, this.dataForm.stationCode)
if (res) {
if (res.code === 200) {
this.$message({
type: 'success',
message: res.message
})
this.keyPoints.push(this.dataForm.stationCode)
this.backActive = true
} else {
this.$message.error(res.message)
this.backActive = false
}
}
this.dialogVisible = false
this.disabled = false
} catch (e) {
this.$message.error(e)
this.dialogVisible = false
this.disabled = false
this.backActive = false
}
},
stopMappingConfirm () {
if (this.autoLoopEnable !== '1') return
if (this.driverActive) return
this.$confirm(this.$t('sureendbuilding'), this.$t('Prompt'), {
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
this._stopMapping()
}).catch(() => {
this.$message({
type: 'info',
message: this.$t('endbuildingcancel')
})
})
},
// 结束建图
async _stopMapping () {
this.disabled = true
try {
this.loading = this.$loading({
lock: true,
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.6)'
})
let res = await stopMapping()
if (res && res.code === 200) {
this.message = ''
this.error = false
this.$nextTick(() => {
this.$refs.glMap.closeWebSocket()
})
this._getMappingStatus()
}
this.disabled = false
this.loading.close()
} catch (e) {
this.message = this.$t('errorendbuilding')
this.error = true
this.disabled = false
this.loading.close()
}
},
// 进度条
async _getMappingStatus () {
try {
let res = await getMappingStatus()
this.showProgress = true
this.percentage = Number(res.mapping_percent) || 0
if (res.mapping_return === '0') {
if (this.intervalId) clearTimeout(this.intervalId)
this.intervalId = setTimeout(() => this._getMappingStatus(), 1000)
}
if (res.mapping_return === '1') {
if (this.intervalId) clearTimeout(this.intervalId)
this.warnTip = true
this.percentage = 0
this._oneClickDeployment()
}
if (res.mapping_return === '2') {
if (this.intervalId) clearTimeout(this.intervalId)
this.showProgress = false
this.percentage = 0
this.keyPoints = []
this.$confirm(this.$t('Newfailedagain'), this.$t('Prompt'), {
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
this._startMapping()
}).catch(() => {
this.$message({
type: 'info',
message: this.$t('Mapbuildingcancel')
})
})
}
} catch (e) {
this.message = ''
this.error = false
this.keyPoints = []
this.$confirm(this.$t('Newfailedagain'), this.$t('Prompt'), {
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
this._startMapping()
}).catch(() => {
this.$message({
type: 'info',
message: this.$t('Mapbuildingcancel')
})
})
}
},
async _oneClickDeployment () {
try {
let res = await oneClickDeployment(this.mapName)
if (res && res.code === 200) {
this.$message({
type: 'success',
message: res.message
})
this.needsConfirmation = false
this.$router.push('/index/home')
} else {
this.$message.error(res.message)
}
this.showProgress = false
this.warnTip = false
this.message = ''
this.error = false
this.disabled = false
this.loading.close()
} catch (e) {
this.showProgress = false
this.warnTip = false
this.$message.error(e)
this.message = ''
this.error = false
this.disabled = false
this.loading.close()
}
},
closeCloud () {
this.cloudOff = !this.cloudOff
if (this.cloudOff) {
this.$nextTick(() => {
this.$refs.glMap.closeWebSocket()
})
} else {
this.$nextTick(() => {
this.$refs.glMap.init()
})
}
},
// 打点功能点击返回成功后
async _sendAutoBack (flag) {
try {
this.loading = this.$loading({
lock: true,
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.6)'
})
let res = await sendAutoBack(flag)
if (res && res.code === 200) {
if (flag === '0') {
this.$nextTick(() => {
this.$refs.glMap.closeWebSocket()
})
this.tipShow = true
}
}
this.loading.close()
} catch (e) {
this.loading.close()
}
},
failHandle () {
this.$nextTick(() => {
this.$refs.glMap.init()
})
this.tipShow = false
}
}
}
</script>
<style lang="stylus" scoped>
.map_container
position relative
width 100%
height calc(100% - .5rem)
margin-bottom .14rem
.message
min-width 380px
border 1px solid #e1f3d8
border-radius 4px
position fixed
left 50%
transform translateX(-50%)
background-color #f0f9eb
transition opacity .3s,transform .4s
overflow hidden
padding 8px 15px
z-index 2003
display flex
align-items center
font-size .2rem
list-height 1
p
margin-left 10px
.custom-message-enter, .custom-message-leave-to
opacity 0
transform translate(-50%,-100%)
.progress-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色遮罩 */
z-index: 9999; /* 确保在最上层 */
display: flex;
justify-content: center;
align-items: center;
}
/* 进度条容器 */
.progress-container {
background-color: #fff;
padding: 30px 40px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.progress_tip {
font-size: .2rem
line-height: .34rem
color: #000
font-weight: 700
}
.car-info
max-width calc(100% - 3rem)
background: rgba(30, 95, 239, 60%);
padding: 0 10px;
border-radius: 8px;
margin-left: 10px;
font-size: 0.2rem;
line-height: 0.36rem;
color: #fff
overflow: hidden
.button_control
p
font-size .26rem
.enClass
.button_control
p
font-size .18rem
line-height .16rem
.car-info
font-size .16rem
</style>

1
src/pages/modules/login/index.vue
View File

@@ -116,6 +116,7 @@ export default {
}
this.disabled = false
} catch (err) {
this.$message.error(err)
this.disabled = false
}
},