增加分页

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js

@@ -104,11 +104,49 @@ export class MarkerCluster {
     );
     //data.length 大于 5 取前5个数, 否则直接返回data
     const pageSize = 6;
-    let pageNum = 1;
-    const dataFisrtPage =
-      data.length > pageSize
-        ? data.slice((pageNum - 1) * pageSize, pageSize)
-        : data;
+    let page = 1;
+    const totalPages = Math.ceil(data.length / pageSize);
+    const dataFirstPage =
+      totalPages > 1 ? data.slice((page - 1) * pageSize, pageSize) : data;
+    window.pageSize = pageSize;
+    window.page = page;
+    window.totalPages = totalPages;
+
+    function renderData(page) {
+      if (page < 1 || page > totalPages) return;
+      window.page = page;
+      const pageSize = window.pageSize;
+      const dataContainer = document.getElementById("dataContainer");
+
+      // 清空数据容器
+      dataContainer.innerHTML = "";
+
+      // 计算当前页起始索引和结束索引
+      const startIndex = (page - 1) * pageSize;
+      const endIndex = startIndex + pageSize;
+
+      // 截取当前页的数据
+      const currentPageData = data.slice(startIndex, endIndex);
+
+      const itemsTpl = currentPageData
+        .map(
+          (item) => `
+          <div style="cursor: pointer; padding: 3px 6px;display: flex;align-items: center; gap: 6px;" class="info-window-item">
+            <img  style="width: 18px;" src="${getIcon(item)}" />
+            <span>${
+              item.extData.deviceName ||
+              item.extData.warningTitle ||
+              item.config?.item.title
+            }</span>
+          </div>
+        `
+        )
+        .join("");
+      // 渲染当前页数据
+      dataContainer.innerHTML = itemsTpl;
+    }
+
+    window.renderData = renderData;
 
     this.infoWindow.setContent(`<div
     style="
@@ -125,8 +163,8 @@ export class MarkerCluster {
         <span>重叠</span>
         <img class="info-close" style="width: 12px;cursor: pointer;" src="${require("@screen/images/dialog/icon-close.svg")}" />
       </div>
-      <div style="padding: 15px 9px;flex: 1; overflow: auto;" class="info-window-content">
-        ${dataFisrtPage
+      <div id="dataContainer" style="padding: 15px 9px;flex: 1; overflow: auto;" class="info-window-content">
+        ${dataFirstPage
           .map(
             (item) => `
               <div style="cursor: pointer; padding: 3px 6px;display: flex;align-items: center; gap: 6px;" class="info-window-item">
@@ -141,6 +179,10 @@ export class MarkerCluster {
           )
           .join("")}
       </div>
+      <div id="paginationContainer" style="text-align:center;margin-bottom:5px;">
+      <button style="cursor: pointer;    background: #00B3CC;border-radius: 8px;border: 0px;" onclick="renderData(window.page-1)">上一页</button>
+      <button style="cursor: pointer;    background: #00B3CC;border-radius: 8px;border: 0px;" onclick="renderData(window.page+1)">下一页</button>
+      </div>
     </div>`);
 
     this.infoWindow.open(map, data[0].lnglat);