From 89f5f5bd10b9d3151c483d9e471ccb66ba800d27 Mon Sep 17 00:00:00 2001
From: ZhengMingKing <zhengmingking@163.com>
Date: Fri, 12 Jun 2026 23:30:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/equipment/alarmRecord.js     |  6 +++-
 src/api/equipment/list.js            |  6 +++-
 src/api/masterStation/equipment.js   |  6 +++-
 src/api/securityControl/alarmList.js |  6 +++-
 src/view/largeScreen2/index.vue      | 50 +++++++++++++++++++++++++---
 5 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/src/api/equipment/alarmRecord.js b/src/api/equipment/alarmRecord.js
index d46ea17..4824eeb 100644
--- a/src/api/equipment/alarmRecord.js
+++ b/src/api/equipment/alarmRecord.js
@@ -4,6 +4,10 @@ export const getAlarmRecordListByPage = (data) => {
   return service({
     url: '/device/getAlarmRecordListByPage',
     method: 'post',
-    data: data
+    data: {
+      ...data,
+      orderKey: 'CreatedAt',
+      order: 'desc'
+    }
   })
 }
diff --git a/src/api/equipment/list.js b/src/api/equipment/list.js
index a5f6d48..67282b3 100644
--- a/src/api/equipment/list.js
+++ b/src/api/equipment/list.js
@@ -36,7 +36,11 @@ export const getAlarmRecordListByPage = (data) => {
   return service({
     url: '/device/getAlarmRecordListByPage',
     method: 'post',
-    data: data
+    data: {
+      ...data,
+      orderKey: 'CreatedAt',
+      order: 'desc'
+    }
   })
 }
 
diff --git a/src/api/masterStation/equipment.js b/src/api/masterStation/equipment.js
index 5bdd52a..a04cc14 100644
--- a/src/api/masterStation/equipment.js
+++ b/src/api/masterStation/equipment.js
@@ -36,7 +36,11 @@ export const getAlarmRecordListByPage = (data) => {
   return service({
     url: '/device/getAlarmRecordListByPage',
     method: 'post',
-    data: data
+    data: {
+      ...data,
+      orderKey: 'CreatedAt',
+      order: 'desc'
+    }
   })
 }
 
diff --git a/src/api/securityControl/alarmList.js b/src/api/securityControl/alarmList.js
index d55292c..2381ced 100644
--- a/src/api/securityControl/alarmList.js
+++ b/src/api/securityControl/alarmList.js
@@ -20,6 +20,10 @@ export const getAlarmRecordListByPage = (data) => {
   return service({
     url: '/device/getAlarmRecordListByPage',
     method: 'post',
-    data: data
+    data: {
+      ...data,
+      orderKey: 'CreatedAt',
+      order: 'desc'
+    }
   })
 }
diff --git a/src/view/largeScreen2/index.vue b/src/view/largeScreen2/index.vue
index a8f04db..8ea8fb8 100644
--- a/src/view/largeScreen2/index.vue
+++ b/src/view/largeScreen2/index.vue
@@ -585,7 +585,7 @@
 
       const marker = new AMap.Marker({
         position: [longitude, latitude],
-        content: createMarkerContent(device.status),
+        content: createMarkerContent(device),
         anchor: 'bottom-center',
         zIndex: 120
       })
@@ -615,14 +615,29 @@
 
   const getMapStatusColor = (status) => mapStatusTheme[status] || mapStatusTheme.offline
 
-  const createMarkerContent = (status) => {
-    const color = getMapStatusColor(status)
-    const statusClass = status === 'online' ? 'online' : status === 'alarm' ? 'alarm' : 'offline'
+  const getDeviceLocationName = (device) => {
+    return device.gatewayAddress || device.gatewayName || device.gatewayMac || '未知位置'
+  }
+
+  const escapeMapHtml = (value) => {
+    return String(value ?? '')
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+  }
+
+  const createMarkerContent = (device) => {
+    const color = getMapStatusColor(device.status)
+    const statusClass = device.status === 'online' ? 'online' : device.status === 'alarm' ? 'alarm' : 'offline'
+    const locationName = escapeMapHtml(getDeviceLocationName(device))
     return `
       <div class="power-map-marker ${statusClass}" style="--marker-color: ${color};">
         <span class="marker-ripple"></span>
         <span class="marker-core"></span>
         <span class="marker-pin"></span>
+        <span class="marker-location-name">${locationName}</span>
       </div>
     `
   }
@@ -630,6 +645,7 @@
   const createInfoWindowContent = (device) => {
     const statusText = device.status === 'online' ? '在线' : device.status === 'alarm' ? '告警' : '离线'
     const statusColor = getMapStatusColor(device.status)
+    const locationName = escapeMapHtml(getDeviceLocationName(device))
 
     return `
       <div class="power-map-info" style="--status-color: ${statusColor};">
@@ -639,7 +655,7 @@
         </div>
         <div class="power-map-info__body">
           <div class="power-map-info__label">设备位置</div>
-          <div class="power-map-info__address">${device.gatewayAddress || '暂无地址'}</div>
+          <div class="power-map-info__address">${locationName}</div>
         </div>
       </div>
     `
@@ -2009,6 +2025,30 @@
     filter: drop-shadow(0 0 10px var(--marker-color));
   }
 
+  .marker-location-name {
+    position: absolute;
+    left: 50%;
+    bottom: 45px;
+    max-width: 140px;
+    padding: 4px 8px;
+    color: #e9fbff;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border: 1px solid rgba(0, 212, 255, 0.58);
+    border-radius: 999px;
+    background: linear-gradient(135deg, rgba(8, 47, 73, 0.9), rgba(2, 8, 23, 0.86));
+    box-shadow:
+      inset 0 0 12px rgba(0, 212, 255, 0.14),
+      0 0 12px rgba(0, 212, 255, 0.26);
+    text-shadow: 0 0 8px rgba(0, 212, 255, 0.46);
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+
   .marker-core {
     position: absolute;
     left: 50%;