feat 更新分页 页码

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

@@ -112,39 +112,40 @@ export class MarkerCluster {
     window.pageSize = pageSize;
     window.page = page;
     window.totalPages = totalPages;
-
+    let num = (page - 1) * pageSize;
     function renderData(page) {
       if (page < 1 || page > totalPages) return;
       window.page = page;
       const pageSize = window.pageSize;
       const dataContainer = document.getElementById("dataContainer");
-
+      const dataPage = document.getElementById("dataPage");
       // 清空数据容器
       // dataContainer.innerHTML = "";
 
       // 计算当前页起始索引和结束索引
       const startIndex = (page - 1) * pageSize;
       const endIndex = startIndex + pageSize;
-
+      let num = (page - 1) * pageSize;
       // 截取当前页的数据
       const currentPageData = data.slice(startIndex, endIndex);
       window.currentPageData = currentPageData;
       const itemsTpl = currentPageData
-        .map(
-          (item) => `
+        .map((item) => {
+          return `
           <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>${
+            ${++num}<img  style="width: 18px;" src="${getIcon(item)}" />
+            <span>${(
               item.extData.deviceName ||
               item.extData.warningTitle ||
               item.config?.item.title
-            }</span>
+            ).replace("G35 ", "")}</span>
           </div>
-        `
-        )
+        `;
+        })
         .join("");
       // 渲染当前页数据
       dataContainer.innerHTML = itemsTpl;
+      dataPage.innerHTML = `第${page}页`;
       bindItemClick();
     }
 
@@ -170,12 +171,12 @@ export class MarkerCluster {
           .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>${
+               ${++num} <img  style="width: 18px;" src="${getIcon(item)}" />
+                <span>${(
                   item.extData.deviceName ||
                   item.extData.warningTitle ||
                   item.config?.item.title
-                }</span>
+                ).replace("G35 ", "")}</span>
               </div>
             `
           )
@@ -186,6 +187,7 @@ export class MarkerCluster {
           ? `
       <div id="paginationContainer" style="text-align:center;margin-bottom:5px;">
       <button style="padding: 0 15px;background: #00B3CC;border-radius: 48px;cursor: pointer;opacity: 1;gap: 6px;font-size: 14px;font-weight: 500;color: #FFFFFF;border: 1px solid rgba(42, 217, 253, 0.6);" onclick="renderData(window.page-1)">上一页</button>
+      <span id="dataPage" style="font-size: 14px;font-weight: 500;color: #FFFFFF;"> 第${page} 页</span>
       <button style="padding: 0 15px;background: #00B3CC;border-radius: 48px;cursor: pointer;opacity: 1;gap: 6px;font-size: 14px;font-weight: 500;color: #FFFFFF;border: 1px solid rgba(42, 217, 253, 0.6);" onclick="renderData(window.page+1)">下一页</button>
       </div>`
           : ""