From a4033aaf3f99bc475e9164f7b6601195e14d2222 Mon Sep 17 00:00:00 2001
From: qingzhengli <1204552371@qq.com>
Date: Mon, 18 Mar 2024 18:28:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/RoadAndEvents/utils/map.js     | 56 ++++++++++++++++---
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
index 9f7be8b9..1dbc227f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
+++ b/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);