Merge branch 'main' of https://gitea.lnh2e.com/yanglijie/gjt_mini into dev-ljyang

pages/map/index.vue

@@ -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
+                        ><cover-image
-                      :src="
+                          :src="
-                        current === 0 ? '/static/kachetou.png' : '/static/jiaqingzhan.png'
+                            current === 0 ? '/static/kachetou.png' : '/static/jiaqingzhan.png'
-                      "
+                          "
-                      style="width: 40rpx; height: 40rpx; margin: 5px"
+                          style="width: 40rpx; height: 40rpx; margin: 5px"
-                    ></cover-image
+                        ></cover-image
-                    >1111</cover-view
+                        >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; //返回聚合点视图
+      if (this.backRightTimer) {
-        this.checkListShow = true;
+        clearTimeout(this.backRightTimer);
-        this._mapContext.includePoints({
-          points: this.clusterSelList,
-          padding: [50, 50, 50, 50],
-        });
-        this.showPopup = false; //关闭底部弹窗
       }
+      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>