From a382207c6455c55a305ae190326a5acaae3ec5b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A3=B7=E5=8F=B6?= <14103883+leaf-phos@user.noreply.gitee.com> Date: Thu, 10 Apr 2025 19:56:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/bst/area.js | 13 ++ src/views/bst/areaSub/components/AreaMap.vue | 206 ++++++++---------- .../bst/areaSub/components/PlaybackPanel.vue | 171 +++++++++++++++ src/views/bst/device/index.vue | 2 +- .../device/view/components/DeviceLocation.vue | 8 +- 5 files changed, 281 insertions(+), 119 deletions(-) create mode 100644 src/views/bst/areaSub/components/PlaybackPanel.vue diff --git a/src/api/bst/area.js b/src/api/bst/area.js index 59a3cee..e6f2dc7 100644 --- a/src/api/bst/area.js +++ b/src/api/bst/area.js @@ -51,3 +51,16 @@ export function listSimpleArea(query) { params: query }) } + +// 获取定位所属区域信息 +export function getLocationArea(lon, lat, areaId) { + return request({ + url: '/bst/area/locationArea', + method: 'get', + params: { + lon, + lat, + areaId + } + }) +} diff --git a/src/views/bst/areaSub/components/AreaMap.vue b/src/views/bst/areaSub/components/AreaMap.vue index 347b6ba..d49348c 100644 --- a/src/views/bst/areaSub/components/AreaMap.vue +++ b/src/views/bst/areaSub/components/AreaMap.vue @@ -12,75 +12,22 @@ 切换样式 {{ showLabels ? '隐藏' : '显示' }}文字 {{ isPlaybackVisible ? '隐藏' : '显示' }}轨迹控制台 + {{ isDebugMode ? '退出调试' : '调试' }} - - - - 时间： - {{ currentLog ? currentLog.at : '-' }} - - - 位置： - {{ currentLog ? `${currentLog.longitude}, ${currentLog.latitude}` : '-' }} - - - 速度： - {{ currentSpeed }} Km/h - - - 电压： - {{ currentLog ? currentLog.voltage + 'V' : '-' }} - - - 信号： - {{ currentLog ? currentLog.signal : '-' }} - - - 卫星： - {{ currentLog ? currentLog.satellites : '-' }} - - - 状态： - - - - 锁状态： - - - - 电门： - - - - -
- - - -
- - - {{ isPlaying ? '暂停' : '播放' }} - - - {{ speed }}x - - -
-
- +
@@ -106,9 +53,14 @@ import { AreaSubStatus } from "@/utils/enums"; import { debounce, isEmpty } from "@/utils/index"; import globalConfig from "@/utils/config/globalConfig"; import { AREA_STYLES, HIGHLIGHT_STYLES, MARKER_ICONS, LABEL_STYLES, DEVICE_STATUS_ICONS } from "@/views/bst/areaSub/components/AreaMap"; +import PlaybackPanel from './PlaybackPanel.vue'; +import { getLocationArea } from "@/api/bst/area"; export default { name: 'AreaMap', + components: { + PlaybackPanel + }, dicts: ['device_status', 'device_lock_status', 'device_quality'], props: { // 运营区域信息 @@ -162,6 +114,8 @@ export default { currentLog: null, sortedLocationLogs: [], progressPolyline: null, + isDebugMode: false, // 是否处于调试模式 + debugClickHandler: null, // 调试模式点击事件处理器 }; }, @@ -369,6 +323,10 @@ export default { }); polygon.on('click', (e) => { + if (this.isDebugMode) { + // 在调试模式下，不阻止事件冒泡 + return; + } if (!this.isEditing) { // 如果点击的是当前选中的区域，不做任何操作 if (this.selectedAreaId !== subArea.id) { @@ -394,6 +352,10 @@ export default { }); marker.on('click', (e) => { + if (this.isDebugMode) { + // 在调试模式下，不阻止事件冒泡 + return; + } if (!this.isEditing) { this.showInfoWindow(subArea); } @@ -427,6 +389,10 @@ export default { }); label.on('click', (e) => { + if (this.isDebugMode) { + // 在调试模式下，不阻止事件冒泡 + return; + } if (!this.isEditing) { this.showInfoWindow(subArea); } @@ -743,6 +709,7 @@ export default { destroyMap() { if (this.map) { + this.clearDebugMode(); this.clearHighlight(); this.clearOverlays(); this.map.destroy(); @@ -1026,6 +993,65 @@ export default { this.playbackTimer = null; } }, + // 切换调试模式 + toggleDebugMode() { + this.isDebugMode = !this.isDebugMode; + + if (this.isDebugMode) { + // 进入调试模式 + this.debugClickHandler = (e) => { + const { lng, lat } = e.lnglat; + console.log('点击位置:', lng, lat); + + // 调用API获取区域信息 + getLocationArea(lng, lat, this.area.id).then(response => { + console.log('区域信息:', response.data); + }).catch(error => { + console.error('获取区域信息失败:', error); + }); + }; + + // 为所有覆盖物添加调试点击事件 + this.overlays.polygons.forEach(polygon => { + polygon.on('click', this.debugClickHandler); + }); + this.overlays.markers.forEach(marker => { + marker.on('click', this.debugClickHandler); + }); + this.overlays.labels.forEach(label => { + label.on('click', this.debugClickHandler); + }); + + this.map.on('click', this.debugClickHandler); + this.$message.success('已进入调试模式，点击地图获取位置信息'); + } else { + // 退出调试模式，移除所有调试事件 + this.clearDebugMode(); + this.$message.success('已退出调试模式'); + } + }, + + // 清理调试模式 + clearDebugMode() { + if (this.debugClickHandler) { + // 移除地图点击事件 + this.map.off('click', this.debugClickHandler); + + // 移除所有覆盖物的调试点击事件 + this.overlays.polygons.forEach(polygon => { + polygon.off('click', this.debugClickHandler); + }); + this.overlays.markers.forEach(marker => { + marker.off('click', this.debugClickHandler); + }); + this.overlays.labels.forEach(label => { + label.off('click', this.debugClickHandler); + }); + + this.debugClickHandler = null; + } + this.isDebugMode = false; + }, } }; @@ -1060,57 +1086,7 @@ export default { text-align: left; } } - - .playback-panel { - position: absolute; - top: 60px; - right: 15px; - transform: none; - z-index: 100; - width: 400px; - background-color: #fff; - border-radius: 4px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - - .device-info { - padding: 8px; - margin-bottom: 15px; - background-color: #f5f7fa; - border-radius: 4px; - - .info-item { - font-size: 12px; - line-height: 1.4; - - .label { - color: #606266; - } - - .value { - color: #303133; - font-weight: 500; - } - } - } - - .playback-controls { - .el-slider { - margin-bottom: 15px; - } - - .control-buttons { - display: flex; - justify-content: center; - gap: 10px; - - .el-button { - padding: 7px 12px; - } - } - } - } } - \ No newline at end of file diff --git a/src/views/bst/device/index.vue b/src/views/bst/device/index.vue index 98157b3..ffbd5fa 100644 --- a/src/views/bst/device/index.vue +++ b/src/views/bst/device/index.vue @@ -421,7 +421,7 @@ export default { // 字段列表 columns: [ {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"}, - {key: 'sn', visible: true, label: '设备', minWidth: null, sortable: true, overflow: false, align: 'left', width: "180"}, + {key: 'sn', visible: true, label: '设备', minWidth: null, sortable: true, overflow: false, align: 'left', width: "220"}, {key: 'vehicleNum', visible: true, label: '车辆', minWidth: null, sortable: true, overflow: false, align: 'left', width: null}, {key: 'mchName', visible: true, label: '归属', minWidth: null, sortable: true, overflow: false, align: 'left', width: null}, {key: 'signalStrength', visible: true, label: '信号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null}, diff --git a/src/views/bst/device/view/components/DeviceLocation.vue b/src/views/bst/device/view/components/DeviceLocation.vue index bd76938..29cd352 100644 --- a/src/views/bst/device/view/components/DeviceLocation.vue +++ b/src/views/bst/device/view/components/DeviceLocation.vue @@ -94,18 +94,20 @@ export default { methods: { // 获取运营区域 getArea() { - if (!this.areaId) { + if (this.areaId == null) { this.area = {}; - this.areaSubList = []; return; } getArea(this.areaId).then(res => { this.area = res.data; - this.getAreaSubList(); }); }, // 获取子区域列表 getAreaSubList() { + if (this.areaId == null) { + this.areaSubList = []; + return; + } listAreaSubByAreaId({ areaId: this.areaId }).then(res => { this.areaSubList = res.data; });