From 47d456433e0da302966759b4cdd768433463daa7 Mon Sep 17 00:00:00 2001 From: lnljyang <506960565@qq.com> Date: Tue, 20 Jan 2026 16:35:30 +0800 Subject: [PATCH] =?UTF-8?q?gjt=E9=80=82=E9=85=8D=E7=89=88=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/map/index.vue | 456 +++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 429 insertions(+), 27 deletions(-) diff --git a/pages/map/index.vue b/pages/map/index.vue index 345626b..8fc59bf 100644 --- a/pages/map/index.vue +++ b/pages/map/index.vue @@ -63,7 +63,7 @@ + @afterHide="onAfterHide" --> 当前数量:{{ _clusterSelList.length || 0 }}(辆) + 当前数量:{{ _clusterSelList.length || 0 }}(座) - @@ -127,7 +128,7 @@ - + --> + + + + + + + - + + + + + + 全部车辆： + + - + + + 全部加氢站： + + - + 仪表盘 - 部门 + 车型 @@ -346,10 +433,39 @@ {{ - item.shortDepName || "--" + item.noticeModel || "--" }} + + + + 已加载 {{ virtualClusterList.length }} / + {{ _clusterSelList.length }} 条 + + + + 加载更多 + + 加载中 + . + . + . + + + + 已加载全部数据 + @@ -368,7 +484,6 @@ @tap="resetMap" > + >1111 --> item.carNumber) || []; }, + _truckTypeList() { + const arr = this.truckTypeList.map((item) => { + const carNumber = + this.clusterSelList.filter((t) => { + return t.noticeModel === item.dicName; + })?.length || 0; + item.carNumber = carNumber; + item.nameAndCount = item.dicName + " (" + carNumber + ")"; + return item; + }); + return arr.filter((item) => item.carNumber) || []; + }, _areaList() { const arr = this.areaList.map((item) => { const carNumber = @@ -641,6 +803,8 @@ export default { item.plateNumber?.toString().indexOf(this.areaName) > -1) && (this.departName === "" || this.departName?.toString().indexOf(item.shortDepName) > 0) && + (this.truckTypeName === "" || + item.noticeModel === this.truckTypeName) && (this.plateNumberInput === "" || item.plateNumber?.toString().indexOf(this.plateNumberInput) > -1) @@ -674,6 +838,7 @@ export default { this.getOrgList(); this.getAreaList(); this.getDepartList(); + this.getTruckType(); this.getCoopList(); // this.getVehicleMarkers(); //this.gotoMap(); @@ -684,6 +849,11 @@ export default { clearTimeout(this.popTimer); this.popTimer = null; } + // 清理backRight防抖定时器 + if (this.backRightTimer) { + clearTimeout(this.backRightTimer); + this.backRightTimer = null; + } // 清理地图事件监听器 if (this._mapContext) { // 直接移除所有监听器，不需要传递回调函数 @@ -698,6 +868,76 @@ export default { }, methods: { + changeSwitch(e) { + console.log("change", e); + if (e) { + // 开启开关，保存当前数据并显示全部 + this.originalClusterList = [...this.clusterSelList]; + this.clusterSelList = [...this.covers]; + this.virtualScrollCurrentPage = 1; // 重置到第一页 + this.$nextTick(() => { + this.resetScrollPosition(); + }); + } else { + // 关闭开关，恢复原始数据 + this.clusterSelList = [...this.originalClusterList]; + this.virtualScrollCurrentPage = 1; // 重置到第一页 + this.$nextTick(() => { + this.resetScrollPosition(); + }); + } + }, + changeSwitchHydrogen(e) { + console.log("changeSwitchHydrogen", e); + if (e) { + // 开启开关，保存当前数据并显示全部 + this.originalHydrogenList = [...this.clusterSelList]; + this.clusterSelList = [...this.covers]; + this.virtualScrollCurrentPage = 1; // 重置到第一页 + this.$nextTick(() => { + this.resetScrollPosition(); + }); + } else { + // 关闭开关，恢复原始数据 + this.clusterSelList = [...this.originalHydrogenList]; + this.virtualScrollCurrentPage = 1; // 重置到第一页 + this.$nextTick(() => { + this.resetScrollPosition(); + }); + } + }, + // 滚动事件处理 + onScroll(e) { + if (this.virtualScrollLoading || !this.virtualScrollHasMore) return; + + const { scrollTop, scrollHeight, clientHeight } = e.detail; + // 当滚动到三分之二位置时触发加载 + const threshold = scrollHeight * (2 / 3); + + if (scrollTop + clientHeight >= threshold) { + this.loadMoreData(); + } + }, + // 加载更多数据 + loadMoreData() { + if (this.virtualScrollLoading || !this.virtualScrollHasMore) return; + + this.virtualScrollLoading = true; + + // 模拟网络延迟，实际项目中可以移除 + setTimeout(() => { + this.virtualScrollCurrentPage++; + this.virtualScrollLoading = false; + }, 300); + }, + // 重置滚动位置到顶部 + resetScrollPosition() { + // 先设置为非0值，再设置为0，确保触发滚动 + this.scrollTop = 1; + this.$nextTick(() => { + this.scrollTop = 0; + }); + }, banIosChuanTou() { // 阻止iOS事件穿透到地图 console.log("阻止事件穿透"); @@ -728,6 +968,9 @@ export default { clearClickDepart() { this.departName = ""; // 重置业务部门 }, + clearClickTruckType() { + this.truckTypeName = ""; // 重置车辆型号 + }, clearClick() { this.orgName = ""; // 重置组织名称 }, @@ -765,6 +1008,12 @@ export default { this.areaList = res || []; }); }, + getTruckType() { + this.truckTypeName = ""; + this.$api.standbyVehicle.getTruckType().then((res) => { + this.truckTypeList = res || []; + }); + }, getDepartList() { this.departName = ""; // this.$api.map.getOwnDepartDic().then((res) => { @@ -784,6 +1033,12 @@ export default { this.departName = e.value[0].dicName; console.log(this.areaName); }, + confirmTruckType(e) { + console.log("confirmTruckType:\n", e.value[0]); + this.showTruckTypePicker = false; + this.truckTypeName = e.value[0].dicName; + }, + clearClickCoop() { this.CoopName = ""; this.CoopCode = ""; @@ -802,18 +1057,57 @@ export default { this.showCoopPicker = false; }, resetMap() { + this.isMapResetForTruck = true; + this.isMapResetForHydrogen = true; + this.hasClickedBackRightForTruck = false; + this.hasClickedBackRightForHydrogen = false; this.sectionChange(this.current, {}); }, backRight() { - if (this.clusterSelList && this.clusterSelList.length > 0) { - //this.includePoints = this.clusterSelList; //返回聚合点视图 - this.checkListShow = true; - this._mapContext.includePoints({ - points: this.clusterSelList, - padding: [50, 50, 50, 50], - }); - this.showPopup = false; //关闭底部弹窗 + // 防抖处理 + if (this.backRightTimer) { + clearTimeout(this.backRightTimer); } + this.backRightTimer = setTimeout(() => { + this.executeBackRight(); + }, 300); + }, + executeBackRight() { + if (!this.clusterSelList || this.clusterSelList.length === 0) { + this.clusterSelList = this.covers; + } + + // 如果是重置地图后第一次点击backRight，隐藏对应的switch + if ( + this.current === 0 && + this.isMapResetForTruck && + !this.hasClickedBackRightForTruck + ) { + this.hasClickedBackRightForTruck = true; + } else if ( + this.current === 1 && + this.isMapResetForHydrogen && + !this.hasClickedBackRightForHydrogen + ) { + this.hasClickedBackRightForHydrogen = true; + } + + this.checkListShow = true; + this._mapContext.includePoints({ + points: this.clusterSelList, + padding: [50, 50, 50, 50], + }); + this.showPopup = false; //关闭底部弹窗 + this.resetScrollPosition(); // 重置滚动位置 + // if (this.clusterSelList && this.clusterSelList.length > 0) { + // //this.includePoints = this.clusterSelList; //返回聚合点视图 + // this.checkListShow = true; + // this._mapContext.includePoints({ + // points: this.clusterSelList, + // padding: [50, 50, 50, 50], + // }); + // this.showPopup = false; //关闭底部弹窗 + // } }, // 显示选择器 async showPicker() { @@ -1157,6 +1451,19 @@ export default { hydrogenStationName: "", hydrogenStationId: "", }; + // 重置switch状态 + this.allTruckSwitch = false; + this.allHydrogenSwitch = false; + + // 重置对应视图的首次点击状态 + if (index === 0) { + this.isMapResetForTruck = true; + this.hasClickedBackRightForTruck = false; + } else { + this.isMapResetForHydrogen = true; + this.hasClickedBackRightForHydrogen = false; + } + let obj = params || undefined; if (index === 0) { await this.getVehicleMarkers(obj); @@ -1250,15 +1557,34 @@ export default { //点击聚合簇时，清除筛选条件 this.orgName = ""; this.areaName = ""; + this.truckTypeName = ""; + this.allTruckSwitch = false; // 重置显示全部开关 } else { this.CoopName = ""; this.CoopCode = ""; + this.allHydrogenSwitch = false; // 重置显示全部加氢站开关 } const numCluster = res.cluster.markerIds.map((item) => Number(item)); this.clusterSelList = this.covers.filter((item) => numCluster.includes(item.hashCode)) || []; + + // 重置switch状态，因为现在有具体的clusterSelList了 + this.allTruckSwitch = false; + this.allHydrogenSwitch = false; + + // 设置为非重置地图状态，只重置当前视图的状态 + if (this.current === 0) { + this.isMapResetForTruck = false; + this.hasClickedBackRightForTruck = false; + } else { + this.isMapResetForHydrogen = false; + this.hasClickedBackRightForHydrogen = false; + } + + this.virtualScrollCurrentPage = 1; // 重置到第一页 + this.resetScrollPosition(); // 重置滚动位置 console.log("聚合簇点击", this.clusterSelList); }); }, @@ -1654,5 +1980,81 @@ export default { } } } + + // 虚拟滚动加载样式 + .load-more-controls { + display: flex; + flex-direction: column; + align-items: center; + padding: 12px 0; + background-color: #f8f9fa; + border-top: 1px solid #e9ecef; + + .load-more-info { + font-size: 12px; + color: #999; + margin-bottom: 8px; + } + + .load-more-button { + .load-more-btn { + padding: 6px 20px; + font-size: 12px; + background-color: #f0f0f0; + color: #666; + border-radius: 15px; + border: none; + transition: all 0.3s ease; + + &.loading { + background-color: #f0f0f0; + color: #999; + + .loading-content { + display: flex; + align-items: center; + + .loading-text { + margin-right: 2px; + } + + .loading-dot { + animation: loadingDot 1.4s infinite ease-in-out both; + + &:nth-child(2) { + animation-delay: -0.32s; + } + + &:nth-child(3) { + animation-delay: -0.16s; + } + } + } + } + + &:active { + background-color: #e0e0e0; + transform: scale(0.98); + } + } + } + + .no-more-data { + font-size: 12px; + color: #bbb; + padding: 6px 0; + } + } + + @keyframes loadingDot { + 0%, + 80%, + 100% { + opacity: 0.3; + } + 40% { + opacity: 1; + } + } }