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-08-08 17:44:36 +08:00
parent 7367906a45
commit af93101ff2
23 changed files with 926 additions and 1650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/pages/modules/building.vue
View File

@@ -3,7 +3,7 @@
<el-row type="flex" justify="space-between">
<el-col :span="10"><button class="button_control" :disabled="disabled" @click="addPoint"><p>打点</p></button></el-col>
</el-row>
<gl-map></gl-map>
<gl-map ref="glMap"/>
<el-row type="flex" justify="end">
<button class="button_control" @click="$router.push('/index/home')"><p>放弃建图</p></button>
<button class="button_control" style="margin-left: 10px" :disabled="disabled" @click="_stopMapping"><p>结束建图</p></button>
@@ -13,8 +13,8 @@
:visible.sync="dialogVisible"
width="50%">
<el-form :model="dataForm" ref="dataForm" :label-width="$i18n.locale === 'en-us' ? '' : '1.1rem'" size="mini">
<el-form-item label="站点名称" prop="point">
<el-input v-model="dataForm.point" id="point" @focus="show" data-layout="normal"></el-input>
<el-form-item label="站点名称" prop="stationName">
<el-input v-model="dataForm.stationName" id="stationName" @focus="show" data-layout="normal"></el-input>
</el-form-item>
</el-form>
<el-row type="flex" justify="space-around" style="margin-top: .3rem">
@@ -29,17 +29,30 @@
<p>{{ message }}</p>
</div>
</transition>
<div v-if="showProgress" class="progress-mask">
<!-- 进度条内容区 -->
<div class="progress-container">
<el-progress
:percentage="percentage"
:stroke-width="6"
style="width: 300px;"
></el-progress>
</div>
</div>
</div>
</template>
<script>
import GlMap from './gl-map1.vue'
import { startMapping, setStation, stopMapping, getLocalMaps, oneClickDeployment, abandonMapping } from '../../config/getData.js'
import GlMap from './gl-map.vue'
// import PointCloudMap from './point-cloud-map.vue'
// import { startMapping, stopMapping, getMappingStatus } from '../../config/mork.js'
import { startMapping, stopMapping, getMappingStatus, setStation, oneClickDeployment, abandonMapping } from '../../config/getData.js'
import { mapGetters } from 'vuex'
export default {
name: 'ModuleBuilding',
components: {
GlMap
GlMap,
// PointCloudMap
},
beforeRouteLeave (to, from, next) {
if (this.needsConfirmation) {
@@ -86,21 +99,23 @@ export default {
mapName: '',
dialogVisible: false,
dataForm: {
point: ''
stationCode: '',
stationName: ''
},
keyPoints: [],
disabled: false,
message: '', // 用于显示消息
error: false,
intervalId: null, // 用于存储定时器ID
startTime: null, // 用于记录开始时间
visible: false,
layout: 'normal',
input: null,
options: {
useKbEvents: false,
preventClickEvent: false
}
},
showProgress: false,
percentage: 0,
intervalId: null // 用于存储定时器ID
}
},
computed: {
@@ -108,7 +123,7 @@ export default {
},
beforeDestroy () {
if (this.intervalId) {
clearInterval(this.intervalId)
clearTimeout(this.intervalId)
}
},
created () {
@@ -157,12 +172,21 @@ export default {
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.6)'
})
const getTimestamp = new Date().getTime()
this.mapName = `apt_map_${getTimestamp}`
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.error = false
this.$nextTick(() => {
this.$refs.glMap.init()
})
}
this.loading.close()
} catch (e) {
@@ -174,20 +198,21 @@ export default {
// 打点
addPoint () {
this.dialogVisible = true
this.dataForm.point = 'B' + (this.keyPoints.length + 1)
this.dataForm.stationCode = 'B' + (this.keyPoints.length + 1)
this.dataForm.stationName = 'B' + (this.keyPoints.length + 1)
},
// 打点->保存
async _setStation () {
this.disabled = true
try {
let res = await setStation(this.dataForm.point)
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.point)
this.keyPoints.push(this.dataForm.stationCode)
} else {
this.$message.error(res.message)
}
@@ -213,65 +238,75 @@ export default {
})
let res = await stopMapping()
if (res && res.code === 200) {
this.message = '正在建图，请等待。。。'
this.error = false
this.startTime = Date.now() // 记录开始时间
this._getLocalMaps()
this.intervalId = setInterval(this._getLocalMaps, 3000) // 每5秒检查一次
} else {
this.$message.error(res.message)
this.message = ''
this.error = false
this.disabled = false
this.loading.close()
this.$nextTick(() => {
this.$refs.glMap.closeWebSocket()
})
this._getMappingStatus()
}
this.disabled = false
this.loading.close()
} catch (e) {
this.$message.error(e)
this.message = ''
this.error = false
this.message = '结束建图出现错误'
this.error = true
this.disabled = false
this.loading.close()
}
},
async _getLocalMaps () {
// 进度条
async _getMappingStatus () {
try {
let res = await getLocalMaps()
let res = await getMappingStatus()
if (res && res.code === 200) {
let flag = false
res.data.map(el => {
if (el.id === this.mapName) {
flag = true
}
})
if (flag) {
clearInterval(this.intervalId) // 停止定时器
await this._oneClickDeployment()
} else {
const elapsedTime = Date.now() - this.startTime
if (elapsedTime >= 60000) { // 超过1分钟
clearInterval(this.intervalId) // 停止定时器
this.message = ''
this.error = false
this.$message.error('建图失败，请重新建图')
this.disabled = false
this.loading.close()
}
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.showProgress = false
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('新建地图失败, 是否重新建图?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this._startMapping()
}).catch(() => {
this.$message({
type: 'info',
message: '已取消建图'
})
})
}
} else {
clearInterval(this.intervalId) // 停止定时器
this.message = ''
this.error = false
this.$message.error('建图失败，请重新建图')
this.disabled = false
this.loading.close()
}
this.loading.close()
} catch (e) {
clearInterval(this.intervalId) // 出错时停止定时器
this.message = ''
this.error = false
this.disabled = false
this.$message.error(e)
this.loading.close()
this.keyPoints = []
this.$confirm('新建地图失败, 是否重新建图?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this._startMapping()
}).catch(() => {
this.$message({
type: 'info',
message: '已取消建图'
})
})
}
},
async _oneClickDeployment () {
@@ -298,17 +333,6 @@ export default {
this.disabled = false
this.loading.close()
}
},
// 放大
zoomIn () {
// this.scale += 0.1
// this.redrawCanvas()
},
// 缩小
zoomOut () {
// this.scale -= 0.1
// if (this.scale < 0.1) this.scale = 0.1 // 防止缩放到 0 或负值
// this.redrawCanvas()
}
}
}
@@ -336,4 +360,25 @@ export default {
.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);
}
</style>