yanglijie/gjt_mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gjt适配版地图

Browse Source
This commit is contained in:
lnljyang
2026-01-20 16:35:30 +08:00
parent 51b927d29a
commit 47d456433e
1 changed files with 429 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

456
pages/map/index.vue
View File

@@ -63,7 +63,7 @@
</view>
<ba-tree-picker
ref="treePicker"
:isShowOrgPicker="_showOrgPicker"
:isShowOrgPicker="false"
@select-change="selectChange"
@emitOrgId="emitOrgId"
:title="` `"
@@ -80,7 +80,7 @@
@beforeleave="onBeforeLeave"
>
<!-- @afterShow="onAfterShow"
@afterHide="onAfterHide" -->
@afterHide="onAfterHide" -->
<view class="right-panel" @tap.native.stop="banIosChuanTou">
<view class="panel-header">
<view class="panel-title"
@@ -89,13 +89,14 @@
<view v-if="current === 0"
>当前数量:{{ _clusterSelList.length || 0 }}(辆)</view
>
<view v-else>当前数量:{{ _clusterSelList.length || 0 }}(座)</view>
<view class="close-btn" @tap="checkListShow = false">
<u-icon name="close" color="#333" size="22"></u-icon>
</view>
</view>
<view v-if="current === 0" class="tableOption">
<view class="optionItem">
<view
<!-- <view
class="item right-u-popup u-border"
style="border-radius: 4px"
>
@@ -127,7 +128,7 @@
</view>
</template>
</u-input>
</view>
</view> -->
<view
class="item right-u-popup u-border"
style="border-radius: 4px"
@@ -150,8 +151,41 @@
</template>
</u-input>
</view>
<view
class="item right-u-popup u-border"
style="border-radius: 4px; flex: 1"
>
<u-picker
:show="showTruckTypePicker"
:columns="[_truckTypeList]"
keyName="nameAndCount"
@confirm="confirmTruckType"
:immediateChange="true"
@cancel="showTruckTypePicker = false"
>
</u-picker>
<u-input
v-model="truckTypeName"
border="surround"
:disabledColor="'#ffffff'"
style="font-size: 13px"
disabled
placeholder="请选择车辆型号"
@tap="showTruckTypePicker = true"
>
<template slot="suffix">
<view
class="close-btn"
v-if="truckTypeName"
@tap.stop="clearClickTruckType"
>
<u-icon name="close" color="#333" size="20"></u-icon>
</view>
</template>
</u-input>
</view>
</view>
<view class="optionItem">
<!-- <view class="optionItem">
<view
class="item right-u-popup u-border"
style="border-radius: 4px"
@@ -218,9 +252,38 @@
</template>
</u-input>
</view>
</view> -->
<view class="optionItem">
<!-- 占位的空div，保持布局一致性 -->
<view
v-if="
current === 0 &&
isMapResetForTruck &&
hasClickedBackRightForTruck
"
class="item"
style="flex: 1"
></view>
<view
v-if="
current === 0 &&
!isMapResetForTruck &&
!hasClickedBackRightForTruck
"
class="item"
style="display: flex; align-items: center"
>
全部车辆：
<u-switch
size="58"
activeColor="#2F6D47"
v-model="allTruckSwitch"
@change="changeSwitch"
></u-switch>
</view>
</view>
</view>
<view v-else class="tableOption">
<view v-else class="tableOption" style="padding-top: 10px">
<view class="optionItem">
<view
class="item right-u-popup u-border"
@@ -255,9 +318,33 @@
</template>
</u-input>
</view>
<view
v-if="
current === 1 &&
!isMapResetForHydrogen &&
!hasClickedBackRightForHydrogen
"
class="item"
style="display: flex; align-items: center"
>
全部加氢站：
<u-switch
size="58"
activeColor="#2F6D47"
v-model="allHydrogenSwitch"
@change="changeSwitchHydrogen"
></u-switch>
</view>
</view>
</view>
<scroll-view scroll-y="true" style="height: calc(100vh - 200px)">
<scroll-view
ref="scrollView"
scroll-y="true"
:scroll-top="scrollTop"
style="height: calc(100vh - 200px)"
@scrolltolower="loadMoreData"
@scroll="onScroll"
>
<view class="rightPop">
<view
v-if="current === 0"
@@ -303,11 +390,11 @@
<view class="demo-layout">仪表盘</view>
</u-col>
<u-col span="3">
<view class="demo-layout">部门</view>
<view class="demo-layout">车型</view>
</u-col>
</u-row>
<view
v-for="(item, index) in _clusterSelList"
v-for="(item, index) in virtualClusterList"
class="clusterItem"
:key="index"
>
@@ -346,10 +433,39 @@
</view>
</view>
<view class="item" v-if="current === 0">{{
item.shortDepName || "--"
item.noticeModel || "--"
}}</view>
</view>
</view>
<!-- 虚拟滚动加载控制 -->
<view
v-if="
virtualClusterList.length > 0 &&
_clusterSelList.length > virtualScrollPageSize
"
class="load-more-controls"
>
<view class="load-more-info">
已加载 {{ virtualClusterList.length }} /
{{ _clusterSelList.length }} 条
</view>
<view v-if="virtualScrollHasMore" class="load-more-button">
<view
class="load-more-btn"
:class="{ loading: virtualScrollLoading }"
@tap="loadMoreData"
>
<text v-if="!virtualScrollLoading">加载更多</text>
<view v-else class="loading-content">
<text class="loading-text">加载中</text>
<text class="loading-dot">.</text>
<text class="loading-dot">.</text>
<text class="loading-dot">.</text>
</view>
</view>
</view>
<view v-else class="no-more-data"> 已加载全部数据 </view>
</view>
<!-- <view>查看详细分布</view> -->
</view>
</scroll-view>
@@ -368,7 +484,6 @@
@tap="resetMap"
></image>
<image
v-if="clusterSelList && clusterSelList.length > 0"
src="/static/expand-left-line.png"
style="
position: absolute;
@@ -403,14 +518,14 @@
<cover-view class="popup" v-if="showPopup">
<cover-view class="popup-header">
<!-- <cover-view style="display: flex" :show-location="true"
><cover-image
:src="
current === 0 ? '/static/kachetou.png' : '/static/jiaqingzhan.png'
"
style="width: 40rpx; height: 40rpx; margin: 5px"
></cover-image
>1111</cover-view
> -->
><cover-image
:src="
current === 0 ? '/static/kachetou.png' : '/static/jiaqingzhan.png'
"
style="width: 40rpx; height: 40rpx; margin: 5px"
></cover-image
>1111</cover-view
> -->
<cover-view style="display: flex; padding: 5px; flex: 1">
<cover-image
:src="
@@ -576,8 +691,27 @@ export default {
plateNumberInput: "", //车牌号输入框
departList: [], //业务部门
departName: "", //业务部门
truckTypeList: [], //车辆类型
showDepartPicker: false, //是否业务部门选择器
showTruckTypePicker: false, //是否车辆型号选择器
truckTypeName: "", //车辆型号名称
showAllVehicles: false, //是否显示全部车辆
originalClusterList: [], //保存切换前的clusterSelList
mileageSortOrder: "desc", // 行驶里程排序方向：desc-从大到小，asc-从小到大
backRightTimer: null, // backRight方法的防抖定时器
allTruckSwitch: false, //是否显示全部车辆
allHydrogenSwitch: false, //是否显示全部加氢站
originalHydrogenList: [], //保存切换前的加氢站列表
virtualScrollPageSize: 150, // 虚拟滚动每页显示数量
virtualScrollCurrentPage: 1, // 虚拟滚动当前页码
virtualScrollTotalPages: 1, // 虚拟滚动总页数
virtualScrollLoading: false, // 是否正在加载下一页
virtualScrollHasMore: true, // 是否还有更多数据
scrollTop: 0, // 滚动位置
isMapResetForTruck: true, // 车辆是否为重置地图状态
isMapResetForHydrogen: true, // 加氢站是否为重置地图状态
hasClickedBackRightForTruck: false, // 车辆是否已经点击过backRight
hasClickedBackRightForHydrogen: false, // 加氢站是否已经点击过backRight
};
},
computed: {
@@ -587,6 +721,22 @@ export default {
"vehicle" //按钮在基础信息菜单的车辆信息下面
);
},
// 虚拟滚动显示的数据
virtualClusterList() {
const endIndex =
this.virtualScrollCurrentPage * this.virtualScrollPageSize;
return this._clusterSelList.slice(0, endIndex);
},
// 虚拟滚动总页数
virtualScrollTotalPages() {
return Math.ceil(
this._clusterSelList.length / this.virtualScrollPageSize
);
},
// 是否还有更多数据
virtualScrollHasMore() {
return this.virtualClusterList.length < this._clusterSelList.length;
},
_showOrgPicker() {
return this.chooseCompany && this.current === 0;
},
@@ -617,6 +767,18 @@ export default {
});
return arr.filter((item) => 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;
}
}
}
</style>