From 58a1b5db7be53b204b5761ae1e37eb63318a1876 Mon Sep 17 00:00:00 2001 From: caill <815519168@qq.com> Date: Fri, 17 Oct 2025 14:19:52 +0800 Subject: [PATCH] =?UTF-8?q?map=E9=87=8D=E5=AE=9A=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config/mork.js | 21 + src/i18n/langs/en.js | 4 +- src/i18n/langs/zh.js | 4 +- src/pages/modules/building.vue | 99 ++- src/pages/modules/gl-map.vue | 1 - src/pages/modules/map/PathPopup.vue | 64 ++ src/pages/modules/map/PointPopup.vue | 68 +++ src/pages/modules/map/index.vue | 881 +++++++++++++++++++++++++++ src/pages/shells/index.vue | 3 +- src/router/index.js | 2 +- src/style/common.styl | 3 +- src/vuex/modules/data.js | 9 +- 12 files changed, 1120 insertions(+), 39 deletions(-) create mode 100644 src/pages/modules/map/PathPopup.vue create mode 100644 src/pages/modules/map/PointPopup.vue create mode 100644 src/pages/modules/map/index.vue diff --git a/src/config/mork.js b/src/config/mork.js index cae0b93..6368373 100644 --- a/src/config/mork.js +++ b/src/config/mork.js @@ -203,4 +203,25 @@ export const setStation = (sn, code) => { export const getReturnStation = () => { let res = {station_id: 'B3333',station_code:"111",station_name:"1111"} return res +} +export const sendAutoBack = (sn, code) => { + let res = { + code: 200, + message: 'ok' + } + return res +} +export const oneClickDeployment = (sn, code) => { + let res = { + code: 200, + message: 'ok' + } + return res +} +export const abandonMapping = (sn, code) => { + let res = { + code: 200, + message: 'ok' + } + return res } \ No newline at end of file diff --git a/src/i18n/langs/en.js b/src/i18n/langs/en.js index e646aa8..aedc82a 100644 --- a/src/i18n/langs/en.js +++ b/src/i18n/langs/en.js @@ -120,5 +120,7 @@ module.exports = { Dispatchnotconnected: 'Dispatch is not connected', Vehiclenotconnected: 'Vehicle body is not connected', Dispatchvehiclenotconnected: 'Dispatch and the vehicle body are not connected.', - Vehiclereturnpoint: 'Vehicle return point' + 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.' } diff --git a/src/i18n/langs/zh.js b/src/i18n/langs/zh.js index 9c8c53f..4949d54 100644 --- a/src/i18n/langs/zh.js +++ b/src/i18n/langs/zh.js @@ -120,5 +120,7 @@ module.exports = { Dispatchnotconnected: '调度未连接', Vehiclenotconnected: '车辆本体未连接', Dispatchvehiclenotconnected: '调度和车辆本体未连接', - Vehiclereturnpoint: '车辆返回点' + Vehiclereturnpoint: '车辆返回点', + autobackfailedmanually:'自动回退失败，请手动接管。', + vehicleautobacknotmanwaitcompleted: '车子正在自动回退中，请勿手动移动车辆，等待车辆自动回退完成。' } diff --git a/src/pages/modules/building.vue b/src/pages/modules/building.vue index 1726fa0..105a0d3 100644 --- a/src/pages/modules/building.vue +++ b/src/pages/modules/building.vue @@ -4,13 +4,14 @@ - +
{{$t('CartPosition')}}: {{ carPosition.x }}, {{carPosition.y}}
 + {{ autoBackEnable }}, {{autoBackFinish}} @@ -52,6 +53,12 @@ > +
+
+
{{autoBackFinish === '2' ? $t('autobackfailedmanually') : $t('vehicleautobacknotmanwaitcompleted')}}
+ +
+
@@ -59,7 +66,6 @@ import GlMap from './gl-map.vue' import { driver } from 'driver.js' import 'driver.js/dist/driver.css' -// import { startMapping } from '../../config/mork.js' import { startMapping, stopMapping, getMappingStatus, setStation, oneClickDeployment, abandonMapping, sendAutoBack } from '../../config/getData.js' import { mapGetters } from 'vuex' export default { @@ -138,37 +144,37 @@ export default { warnTip: false, percentage: 0, intervalId: null, // 用于存储定时器ID - backActive: false // 打点完成后新增一个弹框 提示用户是否自动开回上一个点 + backActive: false, // 打点完成后新增一个弹框 提示用户是否自动开回上一个点 + tipShow: false // 正在自动回退中的提示 } }, computed: { - ...mapGetters(['isTop', 'carPosition', 'autoLoopEnable', 'autoBackEnable']) + ...mapGetters(['isTop', 'carPosition', 'autoLoopEnable', 'autoBackEnable', 'autoBackFinish']) }, watch: { - autoBackEnable (val) { - if (this.backActive && val === '0') { - this.loading = this.$loading({ - lock: true, - spinner: 'el-icon-loading', - background: 'rgba(0, 0, 0, 0.6)' - }) - } - if (this.backActive && val === '1') { - this.loading.close() - } - if (this.backActive && val === '2') { - 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 - }) - } + 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); @@ -185,6 +191,31 @@ export default { }, 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') { @@ -473,7 +504,7 @@ export default { }) } }, - // 打点功能点击反馈成功后 + // 打点功能点击返回成功后 async _sendAutoBack () { try { this.loading = this.$loading({ @@ -483,15 +514,21 @@ export default { }) let res = await sendAutoBack() if (res && res.code === 200) { - this.$message({ - type: 'success', - message: res.message + 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 } } } diff --git a/src/pages/modules/gl-map.vue b/src/pages/modules/gl-map.vue index bbbccc9..b6f70a8 100644 --- a/src/pages/modules/gl-map.vue +++ b/src/pages/modules/gl-map.vue @@ -564,7 +564,6 @@ export default { this.socket.close(1000, '组件销毁') this.socket = null } - this.allPoints = [] }, init() { this.initWebSocket() diff --git a/src/pages/modules/map/PathPopup.vue b/src/pages/modules/map/PathPopup.vue new file mode 100644 index 0000000..663e756 --- /dev/null +++ b/src/pages/modules/map/PathPopup.vue @@ -0,0 +1,64 @@ + + + + + \ No newline at end of file diff --git a/src/pages/modules/map/PointPopup.vue b/src/pages/modules/map/PointPopup.vue new file mode 100644 index 0000000..f922104 --- /dev/null +++ b/src/pages/modules/map/PointPopup.vue @@ -0,0 +1,68 @@ + + + + + \ No newline at end of file diff --git a/src/pages/modules/map/index.vue b/src/pages/modules/map/index.vue new file mode 100644 index 0000000..c8c859a --- /dev/null +++ b/src/pages/modules/map/index.vue @@ -0,0 +1,881 @@ + + + + + \ No newline at end of file diff --git a/src/pages/shells/index.vue b/src/pages/shells/index.vue index 07dda1c..cc18b01 100644 --- a/src/pages/shells/index.vue +++ b/src/pages/shells/index.vue @@ -109,7 +109,8 @@ export default { // ], // forkTipObstacles: '1', // auto_loop_enable: '0', - // auto_back_enable: '' + // auto_back_enable: '', + // auto_back_finish: '' // }, taskSeq: [], currentStep: null, diff --git a/src/router/index.js b/src/router/index.js index b7c457c..3dff653 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -7,7 +7,7 @@ const Home = r => require.ensure([], () => r(require('../pages/modules/home.vue' const Device = r => require.ensure([], () => r(require('../pages/modules/device.vue')), 'Device') const Warning = r => require.ensure([], () => r(require('../pages/modules/warning.vue')), 'Warning') const Building = r => require.ensure([], () => r(require('../pages/modules/building.vue')), 'Building') -const Map = r => require.ensure([], () => r(require('../pages/modules/map.vue')), 'Map') +const Map = r => require.ensure([], () => r(require('../pages/modules/map/index.vue')), 'Map') const Relocation = r => require.ensure([], () => r(require('../pages/modules/relocation.vue')), 'Relocation') Vue.use(VueRouter) diff --git a/src/style/common.styl b/src/style/common.styl index c575714..9f03f86 100644 --- a/src/style/common.styl +++ b/src/style/common.styl @@ -353,12 +353,13 @@ padding .4rem 0 .6rem 0 .page_container _wh(96%, 100%) - padding .09rem + padding .09rem 0 margin 0 auto .map_tools position absolute top 0 right 0 + z-index 30 .zoom_data width .7rem font-size .16rem diff --git a/src/vuex/modules/data.js b/src/vuex/modules/data.js index e7d9940..af789ed 100644 --- a/src/vuex/modules/data.js +++ b/src/vuex/modules/data.js @@ -6,7 +6,8 @@ const state = { errorData: [], backIoStatus: '0', autoLoopEnable: '0', - autoBackEnable: '' + autoBackEnable: '', + autoBackFinish: '' } const getters = { @@ -15,7 +16,8 @@ const getters = { errorData: state => state.errorData, backIoStatus: state => state.backIoStatus, autoLoopEnable: state => state.autoLoopEnable, - autoBackEnable: state => state.autoBackEnable + autoBackEnable: state => state.autoBackEnable, + autoBackFinish: state => state.autoBackFinish } const actions = { @@ -47,6 +49,9 @@ const mutations = { if (Object.prototype.hasOwnProperty.call(data, 'auto_back_enable')) { state.autoBackEnable = data.auto_back_enable } + if (Object.prototype.hasOwnProperty.call(data, 'auto_back_finish')) { + state.autoBackFinish = data.auto_back_finish + } } }