From 68aacde426ad097200dbeedaff370d765233eb7b Mon Sep 17 00:00:00 2001 From: zengmingjie Date: Thu, 26 Jun 2025 22:31:31 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E9=AB=98=E5=BE=B7=E5=AE=9A?= =?UTF-8?q?=E4=BD=8D=E3=80=81=E5=8C=BA=E5=88=86=E9=98=B2=E5=8C=BA=E6=97=A0?= =?UTF-8?q?=E4=BA=BA=E6=9C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/index.scss | 7 +- src/views/contentData/LeftSidebar/index.vue | 230 +++++++++++--------- src/views/contentData/headerTop/index.vue | 187 ++++++++-------- src/views/mapControl/index.vue | 6 +- 4 files changed, 221 insertions(+), 209 deletions(-) diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss index adedadf..9a68b40 100644 --- a/src/assets/css/index.scss +++ b/src/assets/css/index.scss @@ -171,7 +171,7 @@ body { width: 100%; height: calc(100% - 140px); margin-top: 25px; - pointer-events: none; + overflow: hidden; .title { width: 100%; height: 40px; @@ -181,7 +181,9 @@ body { height: 100%; padding: 0; margin: 0; - overflow: auto; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + touch-action: pan-y; /* 允许垂直方向的触摸滑动 */ margin-top: 10px; li { @@ -192,6 +194,7 @@ body { margin-top: 3%; position: relative; display: flex; + pointer-events: auto; .details-one { width: 60%; height: 100%; diff --git a/src/views/contentData/LeftSidebar/index.vue b/src/views/contentData/LeftSidebar/index.vue index cc0c668..3d0c060 100644 --- a/src/views/contentData/LeftSidebar/index.vue +++ b/src/views/contentData/LeftSidebar/index.vue @@ -33,7 +33,9 @@
{{ index < 9 ? "0" + (index + 1) : index + 1 }}
-
{{ drone.serial_number }}
+
+ {{ drone.serial_number }} +
@@ -65,7 +67,9 @@
{{ index < 9 ? "0" + (index + 1) : index + 1 }}
-
{{ drone.serial_number }}
+
+ {{ drone.serial_number }} +
@@ -280,7 +284,7 @@ export default { .utc() .subtract(1, "month") .format("YYYY-MM-DD HH:mm:ss"); - console.log("Initialized time range:", this.startTime, "to", this.endTime); + this.enableTouchScroll(); }, watch: { homeData: { @@ -338,114 +342,118 @@ export default { // Id: "1936279217155215360" // } // ]; - newVal.forEach((newItem) => { - // 如果已经存在相同BatchId的数据，重置计时器 - if (newItem.BatchId) { - const existingTimer = this.droneTimers.get(newItem.BatchId); - if (existingTimer) { - clearInterval(existingTimer); // 清除旧计时器 + let positionID = localStorage.getItem("PositionIds"); + if (positionID === null || positionID === undefined) { + const match = newVal.some((item) => positionID.includes(item.id)); + if (match) { + newVal.forEach((newItem) => { + // 如果已经存在相同BatchId的数据，重置计时器 + if (newItem.BatchId) { + const existingTimer = this.droneTimers.get(newItem.BatchId); + if (existingTimer) { + clearInterval(existingTimer); // 清除旧计时器 + } + + // 设置15秒初始时间 + newItem.currTime = window.mapConfig.currTime; + // 创建新计时器 + const timer = this.startTimer(newItem); + this.droneTimers.set(newItem.BatchId, timer); + + // 初始化 detailsShow（仅首次） + if (!(newItem.BatchId in this.droneStates)) { + this.$set(this.droneStates, newItem.BatchId, true); + } + // 默认隐藏 navigation-content + if (!(newItem.BatchId in this.navigationStates)) { + this.$set(this.navigationStates, newItem.BatchId, false); + } + + // 更新无人机列表 + const existingIndex = this.drones.findIndex( + (d) => d.BatchId === newItem.BatchId + ); + newItem.times = moment(newItem.CreateTime).format("HH:mm:ss"); + newItem.distance = parseInt(newItem.distance.toFixed(0)); + + if (existingIndex !== -1) { + this.$set(this.drones, existingIndex, { ...newItem }); + } else { + this.$set(this.drones, this.drones.length, { ...newItem }); + } + } + }); + if (newVal.length === 0) { + this.iswarning = false; + this.showAudioPrompt = false; // 没有数据 不显示提示框 } - // 设置15秒初始时间 - newItem.currTime = window.mapConfig.currTime; - // 创建新计时器 - const timer = this.startTimer(newItem); - this.droneTimers.set(newItem.BatchId, timer); - - // 初始化 detailsShow（仅首次） - if (!(newItem.BatchId in this.droneStates)) { - this.$set(this.droneStates, newItem.BatchId, true); - } - // 默认隐藏 navigation-content - if (!(newItem.BatchId in this.navigationStates)) { - this.$set(this.navigationStates, newItem.BatchId, false); + if (this.drones) { + mapUavFiex(this.drones, window.olMap); } + const media = this.$refs.uavAudio; + let alarm = this.drones.find((d) => d.alarmLevel === 1); + if (alarm) { + this.iswarning = true; + this.$nextTick(() => { + if (media) { + media.muted = true; // 初始静音 + const savedVolume = localStorage.getItem("soundValue"); + media.volume = savedVolume !== null ? savedVolume / 100 : 1; + media.muted = this.isZoomedIn ? false : true; - // 更新无人机列表 - const existingIndex = this.drones.findIndex( - (d) => d.BatchId === newItem.BatchId - ); - newItem.times = moment(newItem.CreateTime).format("HH:mm:ss"); - newItem.distance = parseInt(newItem.distance.toFixed(0)); - // newItem.drone_lon = newItem.drone_lon.toFixed(6); - // newItem.drone_lat = newItem.drone_lat.toFixed(6); - - if (existingIndex !== -1) { - this.$set(this.drones, existingIndex, { ...newItem }); - } else { - this.$set(this.drones, this.drones.length, { ...newItem }); - } - } - }); - if (newVal.length === 0) { - this.iswarning = false; - this.showAudioPrompt = false; // 没有数据 不显示提示框 - } - - if (this.drones) { - mapUavFiex(this.drones, window.olMap); - } - const media = this.$refs.uavAudio; - let alarm = this.drones.find((d) => d.alarmLevel === 1); - if (alarm) { - this.iswarning = true; - this.$nextTick(() => { - if (media) { - media.muted = true; // 初始静音 - const savedVolume = localStorage.getItem("soundValue"); - media.volume = savedVolume !== null ? savedVolume / 100 : 1; - media.muted = this.isZoomedIn ? false : true; - - // 如果音频未在播放，则开始播放 - if (!this.isAudioPlaying) { - media - .play() - .then(() => { - console.log("播放音频"); - this.isAudioPlaying = true; - // 监听音频结束事件，循环播放 - media.onended = () => { - if (this.iswarning) { - media.play().catch((error) => { - console.log("循环播放失败:", error); - this.showAudioPrompt = true; - }); - } else { + // 如果音频未在播放，则开始播放 + if (!this.isAudioPlaying) { + media + .play() + .then(() => { + console.log("播放音频"); + this.isAudioPlaying = true; + // 监听音频结束事件，循环播放 + media.onended = () => { + if (this.iswarning) { + media.play().catch((error) => { + console.log("循环播放失败:", error); + this.showAudioPrompt = true; + }); + } else { + this.isAudioPlaying = false; + } + }; + }) + .catch((error) => { + console.log("播放失败:", error); + this.showAudioPrompt = true; this.isAudioPlaying = false; - } - }; - }) - .catch((error) => { - console.log("播放失败:", error); - this.showAudioPrompt = true; - this.isAudioPlaying = false; - }); + }); + } + } + }); + } else if (!alarm && this.iswarning) { + // 告警消失，停止音频 + this.iswarning = false; + if (media) { + media.pause(); + media.currentTime = 0; + this.isAudioPlaying = false; + media.onended = null; // 移除结束事件监听 + this.showAudioPrompt = false; } } - }); - } else if (!alarm && this.iswarning) { - // 告警消失，停止音频 - this.iswarning = false; - if (media) { - media.pause(); - media.currentTime = 0; - this.isAudioPlaying = false; - media.onended = null; // 移除结束事件监听 - this.showAudioPrompt = false; + // 无数据时重置 + if (newVal.length === 0) { + this.iswarning = false; + this.showAudioPrompt = false; + this.isAudioPlaying = false; + if (media) { + media.pause(); + media.currentTime = 0; + media.onended = null; + } + vectorSource.clear(); + } } } - // 无数据时重置 - if (newVal.length === 0) { - this.iswarning = false; - this.showAudioPrompt = false; - this.isAudioPlaying = false; - if (media) { - media.pause(); - media.currentTime = 0; - media.onended = null; - } - vectorSource.clear(); - } } }, deep: true @@ -465,6 +473,24 @@ export default { } }, methods: { + enableTouchScroll() { + const ulElement = this.$el.querySelector(".drone-list ul"); + if (ulElement) { + let startY, startScrollTop; + + ulElement.addEventListener("touchstart", (e) => { + startY = e.touches[0].clientY; + startScrollTop = ulElement.scrollTop; + }); + + ulElement.addEventListener("touchmove", (e) => { + const deltaY = e.touches[0].clientY - startY; + ulElement.scrollTop = startScrollTop - deltaY; + // 阻止默认滚动行为（视情况调整） + // e.preventDefault(); + }); + } + }, closeNavigation(drone) { console.log(drone.app_lat, drone.app_lon, "导航"); // 确保 drone.app_lon 和 drone.app_lat 存在 diff --git a/src/views/contentData/headerTop/index.vue b/src/views/contentData/headerTop/index.vue index dd2cb4c..5b01c48 100644 --- a/src/views/contentData/headerTop/index.vue +++ b/src/views/contentData/headerTop/index.vue @@ -24,13 +24,13 @@