加浏览器访问异常信息后台，打包有区别
This commit is contained in:
611
src/pages/modules/build/index.vue
Normal file
611
src/pages/modules/build/index.vue
Normal file
@@ -0,0 +1,611 @@
|
||||
<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,
|
||||
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()
|
||||
this.backActive = false
|
||||
}).catch(() => {
|
||||
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 () {
|
||||
try {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.6)'
|
||||
})
|
||||
let res = await sendAutoBack()
|
||||
if (res && res.code === 200) {
|
||||
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>
|
||||
Reference in New Issue
Block a user