gjt适配版地图

pages.json

@@ -118,22 +118,6 @@
         "onReachBottomDistance": 50
       }
     },
-    {
-      "path": "pages/audit/index",
-      "style": {
-        "navigationBarTitleText": "在线审批",
-        "enablePullDownRefresh": true,
-        "onReachBottomDistance": 50
-      }
-    },
-    {
-      "path": "pages/audit/detail",
-      "style": {
-        "navigationBarTitleText": "合同审批详情",
-        "enablePullDownRefresh": true,
-        "onReachBottomDistance": 50
-      }
-    },
     {
       "path": "pages/unusualActionApply/index",
       "style": {

pages/audit/index.vue

@@ -1,290 +0,0 @@
-<template>
-  <view>
-    <u-sticky>
-      <view style="background-color: #fff">
-        <u-subsection
-          mode="subsection"
-          :list="list"
-          :current="current"
-          @change="sectionChange"
-          activeColor="#7ba746"
-          :fontSize="30"
-        >
-        </u-subsection>
-      </view>
-      <u-search
-        placeholder="请输入"
-        v-model="keyword"
-        :showAction="false"
-        @search="searchList()"
-      ></u-search>
-    </u-sticky>
-    <view class="list">
-      <view class="item" v-for="item in dataList" :key="item.id">
-        <view class="line">
-          <view class="text-normal" v-if="current == 0 || item.approvalName"
-            >@{{ item.approvalName }}，请处理待处理审批单:
-          </view>
-        </view>
-        <view class="block">
-          <view class="line">
-            <view class="text-small">
-              {{ item.createName }}提交的{{ item.contractTypeName }}申请</view
-            >
-          </view>
-
-          <view class="line">
-            <view class="text-small"> {{ item.customerName }}</view>
-          </view>
-          <view class="line">
-            <view class="text-small">等待</view>
-            <view class="text-small hot">{{ item.waitTime || "--" }}</view>
-            <view class="text-small">小时</view>
-          </view>
-        </view>
-        <view class="line" style="justify-content: flex-end">
-          <view class="buttons">
-            <!--deliveryPermit为1的时候准许交车  -->
-            <button
-              @tap="goto"
-              v-if="current == 0"
-              :data-url="`/pages/audit/detail?id=${item.id}`"
-            >
-              处理
-            </button>
-            <button
-              v-else
-              @tap="goto"
-              :data-url="`/pages/audit/detail?id=${item.id}&isRead=1`"
-            >
-              查看
-            </button>
-          </view>
-        </view>
-        <view class="line">
-          <view class="line" style="justify-content: space-between">
-            <view class="text-small left"
-              >合同提交时间: {{ formatDateTime(item.createTime) }}</view
-            >
-          </view>
-        </view>
-      </view>
-
-      <view class="no-more" v-if="noMoreData">没有更多数据了</view>
-    </view>
-    <view
-      clas="line"
-      style="margin-top: 150rpx"
-      v-if="!dataList || dataList.length === 0"
-    >
-      <u-empty mode="search" text="暂无数据" width="400" textSize="16">
-      </u-empty
-    ></view>
-    <u-loading-page
-      bg-color="#ffffff"
-      :loading="loading"
-      color="#7ba746"
-      font-size="24"
-    ></u-loading-page>
-  </view>
-</template>
-
-<script>
-import stora from "@/utils/storage";
-export default {
-  options: {
-    styleIsolation: "shared", // 解除样式隔离
-  },
-  data() {
-    return {
-      keyword: "",
-      current: 0,
-      list: ["待审批", "审批通过"],
-      queryPage: {
-        pageNo: 1, // 页码
-        pageSize: 10, //每页查询条数
-        total: 0, //总页数
-        pages: -1, //总页数
-        // contractStatus: "2", // 交车许可 1表示 准许交车
-      },
-      dataList: [],
-      pageNo: 1,
-      noMoreData: false,
-      loading: false,
-    };
-  },
-  methods: {
-    // 新增的搜索方法
-    searchList() {
-      this.queryPage.customerName = this.keyword.trim(); // 设置车牌号条件
-      this.queryPage.pageNo = 1; // 重置页码为1
-      this.dataList = []; // 清空数据列表
-      this.noMoreData = false; // 重置没有更多数据的标志
-      this.loadmore(); // 重新加载数据
-    },
-    sectionChange(index) {
-      this.queryPage.customerName = "";
-      this.keyword = "";
-      this.current = index;
-      //   if (index == 1) {
-      //     // 全部 （准许交车 + 已交车）
-      //     this.queryPage.contractStatus = "3";
-      //   } else {
-      //     // 仅显示准许交车
-      //     this.queryPage.contractStatus = "2";
-      //   }
-
-      this.queryPage.pageNo = 1;
-      this.dataList = [];
-      this.loadmore();
-    },
-    formatDateTime(obj) {
-      if (obj == null) {
-        return "";
-      }
-      let date = new Date(obj);
-      let y = 1900 + date.getYear();
-      let m = "0" + (date.getMonth() + 1);
-      let d = "0" + date.getDate();
-      return (
-        y +
-        "-" +
-        m.substring(m.length - 2, m.length) +
-        "-" +
-        d.substring(d.length - 2, d.length)
-      );
-    },
-    loadmore() {
-      this.loading = true;
-      if (this.current == 0) {
-        this.$api.audit
-          .queryAuditList(this.queryPage)
-          .then((res) => {
-            console.log(res);
-            this.queryPage.pageNo = res.data.current;
-            this.queryPage.pages = res.data.pages;
-            this.queryPage.total = res.data.total;
-            this.dataList.push(...(res.data.records || []));
-            this.loading = false;
-          })
-          .catch((errors) => {
-            this.loading = false;
-          });
-      } else {
-        this.$api.audit
-          .queryAuditedList(this.queryPage)
-          .then((res) => {
-            console.log(res);
-            this.queryPage.pageNo = res.data.current;
-            this.queryPage.pages = res.data.pages;
-            this.queryPage.total = res.data.total;
-            this.dataList.push(...(res.data.records || []));
-            this.loading = false;
-          })
-          .catch((errors) => {
-            this.loading = false;
-          });
-      }
-    },
-    goto(e) {
-      uni.navigateTo({ url: e.target.dataset.url });
-    },
-  },
-  onLoad() {},
-  onPullDownRefresh() {
-    this.sectionChange(this.current);
-    uni.stopPullDownRefresh(); //刷新数据之后停止刷新效果
-  },
-  destroyed() {
-    //页面销毁删除掉数据缓存
-    stora.remove("fault_fromData");
-  },
-  onReachBottom() {
-    console.log("触底了");
-    //当前页数小于总页数
-    if (this.queryPage.pageNo < this.queryPage.pages) {
-      this.queryPage.pageNo++;
-      this.loadmore();
-    } else {
-      this.noMoreData = true;
-      console.log("没有更多数据了");
-    }
-  },
-  onShow() {
-    this.sectionChange(this.current);
-  },
-};
-</script>
-
-<style lang="less" scoped>
-/deep/ .u-search {
-  background: #d7d7d7 !important;
-  padding: 20rpx 10rpx !important;
-}
-// /deep/ .u-search__content__input {
-//   height: 50rpx !important;
-//   padding-top: 20rpx !important; /* 上边距 */
-//   padding-bottom: 20rpx !important; /* 下边距 */
-// }
-.list {
-  background: #d7d7d7;
-  padding: 0 20px 20rpx;
-
-  .item {
-    background: white;
-    padding: 20rpx;
-    margin-bottom: 20rpx;
-    position: relative;
-    border-radius: 15rpx;
-    .block {
-      display: flex;
-      line-height: 1.5;
-      padding: 10px;
-      flex-direction: column;
-      align-items: left;
-      margin-bottom: 15rpx;
-      border: 1px solid #ccc;
-    }
-    .hot {
-      color: red;
-    }
-    .line {
-      display: flex;
-      align-items: center;
-      margin-bottom: 15rpx;
-
-      .left {
-        margin-right: 50rpx;
-        width: 300rpx;
-      }
-
-      .text-small {
-        font-size: x-small;
-      }
-
-      .text-normal {
-        font-size: small;
-      }
-    }
-
-    .buttons {
-      button {
-        width: 130rpx;
-        display: inline-block;
-        height: 50rpx;
-        padding: 12rpx 0;
-        font-size: 26rpx;
-        line-height: 26rpx;
-        margin-bottom: 10rpx;
-      }
-    }
-  }
-
-  .no-more {
-    width: 100%;
-    text-align: center;
-    font-size: xx-small;
-    color: white;
-  }
-}
-</style>

pages/map/index.vue

@@ -63,7 +63,7 @@
       </view>
       <ba-tree-picker
         ref="treePicker"
-        :isShowOrgPicker="_showOrgPicker"
+        :isShowOrgPicker="false"
         @select-change="selectChange"
         @emitOrgId="emitOrgId"
         :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>
-            <view class="optionItem">
+                  </template>
+                </u-input>
+              </view>
+            </view>
+            <!-- <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 v-else class="tableOption">
+          </view>
+          <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>
-          <scroll-view scroll-y="true" style="height: calc(100vh - 200px)">
+          </view>
+          <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;
@@ -419,7 +534,7 @@
             style="width: 40rpx; height: 40rpx; margin-right: 5px"
           ></cover-image>
           <cover-view style="flex: 1">{{
-            currMarker.plateNumber || currMarker.name
+            currMarker.plateNumber || currMarker.shortName || currMarker.name
           }}</cover-view>
           <cover-image
             v-if="current === 0"
@@ -449,7 +564,7 @@
         </cover-view>
       </cover-view>
       <cover-view class="popup-content">
-        <cover-view style="display: flex">
+        <cover-view style="display: flex; white-space: normal">
           <u-icon
             name="map"
             size="45"
@@ -473,6 +588,15 @@
           </cover-view>
         </cover-view>
         <cover-view v-else>
+          <cover-view
+            class="content-items"
+            style="text-align: left"
+            v-if="currMarker.shortName"
+          >
+            <cover-view style="flex: 1; white-space: normal">
+              加氢站全称：{{ currMarker.name || "--" }}
+            </cover-view>
+          </cover-view>
           <cover-view class="content-items" style="text-align: left">
             <cover-view style="flex: 1">
               氢源：{{ currMarker.hydrogenSource || "--" }}
@@ -567,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: {
@@ -578,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;
     },
@@ -608,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 =
@@ -632,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)
@@ -661,11 +834,11 @@ export default {
   onPullDownRefresh(event) {},
   mounted() {
     console.log("mounted");
-    this.$store.state.current = "map";
     this.sectionChange(this.current);
     this.getOrgList();
     this.getAreaList();
     this.getDepartList();
+    this.getTruckType();
     this.getCoopList();
     // this.getVehicleMarkers();
     //this.gotoMap();
@@ -676,15 +849,95 @@ export default {
       clearTimeout(this.popTimer);
       this.popTimer = null;
     }
+    // 清理backRight防抖定时器
+    if (this.backRightTimer) {
+      clearTimeout(this.backRightTimer);
+      this.backRightTimer = null;
+    }
     // 清理地图事件监听器
     if (this._mapContext) {
+      // 直接移除所有监听器，不需要传递回调函数
+      try {
         this._mapContext.off("markerClusterCreate");
         this._mapContext.off("markerClusterClick");
+      } catch (e) {
+        console.log("移除地图事件监听器失败:", e);
+      }
       this._mapContext = null;
     }
   },
 
   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("阻止事件穿透");
@@ -715,6 +968,9 @@ export default {
     clearClickDepart() {
       this.departName = ""; // 重置业务部门
     },
+    clearClickTruckType() {
+      this.truckTypeName = ""; // 重置车辆型号
+    },
     clearClick() {
       this.orgName = ""; // 重置组织名称
     },
@@ -752,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) => {
@@ -771,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 = "";
@@ -789,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; //返回聚合点视图
+      // 防抖处理
+      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() {
@@ -1144,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);
@@ -1154,8 +1474,12 @@ export default {
     createMapContext() {
       // 清理之前的地图上下文，防止重复创建
       if (this._mapContext) {
+        try {
           this._mapContext.off("markerClusterCreate");
           this._mapContext.off("markerClusterClick");
+        } catch (e) {
+          console.log("移除地图事件监听器失败:", e);
+        }
         this._mapContext = null;
       }
 
@@ -1233,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);
       });
     },
@@ -1272,7 +1615,7 @@ export default {
             iconPath = item.cooperate
               ? `/static/maph.png`
               : `/static/maph2.png`;
-            calloutText = item.stationName;
+            calloutText = item.shortName || item.stationName;
             break;
         }
         // let flag = false;
@@ -1624,6 +1967,7 @@ export default {
         justify-content: space-between;
         align-items: center;
         text-align: center;
+        margin: 8rpx;
         font-size: 24rpx;
         .item {
           flex: 1;
@@ -1636,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>