From bc13e4264e270df40c3ec651a9ca8f3372b4cbbe Mon Sep 17 00:00:00 2001
From: xiaozhiyong <xiaozhiyong@sdxkhlw.cn>
Date: Tue, 16 Jun 2026 17:08:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/largeScreen2/index.vue | 828 +++++++++++++++++++-------------
 src/view/largeScreen2/ttes.js   | 212 ++++----
 2 files changed, 572 insertions(+), 468 deletions(-)

diff --git a/src/view/largeScreen2/index.vue b/src/view/largeScreen2/index.vue
index dd9f7d0..a1ce9eb 100644
--- a/src/view/largeScreen2/index.vue
+++ b/src/view/largeScreen2/index.vue
@@ -53,7 +53,7 @@
               :header-cell-style="largeScreenTableHeaderStyle"
               :cell-style="largeScreenTableCellStyle"
             >
-              <el-table-column prop="cbTypeName" label="设备名称" align="center" width="100" />
+              <el-table-column prop="cbTypeName" label="设备名称" align="center" />
               <el-table-column prop="type" label="设备状态" align="center" width="70">
                 <template #default="{ row }">
                   <span :class="getDeviceStatusClass(row.type)">{{
@@ -111,27 +111,27 @@
           </div>
         </div> -->
         <div class="title">智慧用电安全监控平台</div>
-        <div class="top2" :class="{ 'top2-tech-style': isMapTechStyle }">
+        <div class="top2">
           <div class="card map-card">
-            <div class="card-title" style="display: none">设备分布</div>
-            <div
-              class="map-container-full"
-              :class="[`map-mode-${mapDisplayMode.toLowerCase()}`, { 'map-tech-style': isMapTechStyle }]"
-              id="chinaMap"
-              ref="chinaMap"
-            >
-              <template v-if="isMapTechStyle">
-                <div class="map-corner top-left"></div>
-                <div class="map-corner top-right"></div>
-                <div class="map-corner bottom-left"></div>
-                <div class="map-corner bottom-right"></div>
-                <div class="map-depth-vignette"></div>
-                <div class="map-industrial-frame"></div>
-                <div class="map-title-bar">
-                  <span class="map-title-main">工业设备态势</span>
-                  <span class="map-title-sub">INDUSTRIAL MONITORING</span>
+            <div class="map-container-full" id="chinaMap" ref="chinaMap">
+              <div class="map-hud">
+                <div class="map-hud-item">
+                  <span>项目总数</span>
+                  <strong>{{ projectList.length }}</strong>
                 </div>
-              </template>
+                <div class="map-hud-item">
+                  <span>设备总数</span>
+                  <strong>{{ alarmSituation.device.total }}</strong>
+                </div>
+                <div class="map-hud-item">
+                  <span>在线设备</span>
+                  <strong class="success">{{ alarmSituation.device.online }}</strong>
+                </div>
+                <div class="map-hud-item">
+                  <span>离线设备</span>
+                  <strong class="offline">{{ alarmSituation.device.offline }}</strong>
+                </div>
+              </div>
               <div class="map-mode-switch">
                 <button
                   v-for="mode in mapModeOptions"
@@ -144,32 +144,6 @@
                   {{ mode.label }}
                 </button>
               </div>
-              <div class="map-control">
-                <div class="control-top">
-                  <div class="control-title">设备总数量</div>
-                  <div class="control-value">{{ totalDevices }}</div>
-                </div>
-                <div class="control-bottom">
-                  <div class="control-title">设备状态</div>
-                  <div class="status-list">
-                    <div class="status-item status-item-online">
-                      <div class="status-dot online"></div>
-                      <span>在线</span>
-                      <strong>{{ onlineDevices }}</strong>
-                    </div>
-                    <div class="status-item status-item-alarm">
-                      <div class="status-dot alarm"></div>
-                      <span>告警</span>
-                      <strong>{{ alarmDevices }}</strong>
-                    </div>
-                    <div class="status-item status-item-offline">
-                      <div class="status-dot offline"></div>
-                      <span>离线</span>
-                      <strong>{{ offlineDevices }}</strong>
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
         </div>
@@ -237,7 +211,7 @@
               <v-chart ref="alertDistributionChartRef" :option="alertDistributionOption" autoresize />
             </div>
             <div class="alert-list">
-              <div class="alert-item" v-for="(item, index) in alertTypes" :key="index">
+              <div class="alert-item" v-for="(item, index) in displayAlertTypes" :key="index">
                 <span class="alert-dot" :style="{ backgroundColor: item.color }"></span>
                 <span class="alert-name">{{ item.name }}</span>
                 <span class="alert-count">{{ item.count }}</span>
@@ -272,7 +246,10 @@
 <script setup>
   /* global AMap */
   import * as serve from '@/api/largeScreen'
+  import { getProjectList, getAlarmSituationSummary } from '@/api/masterStation/project'
+  import { getAlarmRecordListByPage, getAlarmCategorySummary, getAlarmTrend } from '@/api/securityControl/alarmList'
   import { useRouterStore } from '@/pinia/modules/router'
+  import { useProjectStore } from '@/pinia/modules/project'
 
   import { onMounted, onBeforeUnmount, ref, nextTick, computed } from 'vue'
   import { useRouter } from 'vue-router'
@@ -288,6 +265,7 @@
 
   const router = useRouter()
   const routerStore = useRouterStore()
+  const projectStore = useProjectStore()
   const ALL_ALARM_ROUTE_PATH = 'securityControl/alarmList'
   const EQUIPMENT_OVERVIEW_ROUTE_PATH = 'masterStation/equipment'
 
@@ -295,22 +273,33 @@
   const tableHeight = ref(180)
   let resizeObserver = null
   const mapInstance = ref(null)
-  let markerCluster = null
-  let deviceInfoWindow = null
-  const mapDisplayMode = ref('3D')
+  let infoWindow = null
+  let markers = []
+
+  const projectList = ref([])
+  const alarmTotal = ref(0)
+  const alarmSituation = ref({
+    device: { total: 0, online: 0, offline: 0 },
+    line: { total: 0, online: 0, offline: 0 },
+    alarm: { currentMonthTotal: 0, yesterdayTotal: 0, todayTotal: 0, todayDeviceCount: 0 },
+    preAlarm: { currentMonthTotal: 0 }
+  })
+
+  const defaultMapCenter = [116.4074, 39.9042]
+
+  const mapDisplayMode = ref('2D')
   const mapModeOptions = [
-    { label: '3D', value: '3D' },
     { label: '2D', value: '2D' },
+    { label: '3D', value: '3D' },
     { label: '卫星', value: 'satellite' }
   ]
-  const isMapTechStyle = computed(() => mapDisplayMode.value !== 'satellite')
+
   let satelliteLayer = null
   let buildingLayer = null
   let defaultMapLayers = null
   let satelliteLayersVisible = false
   let buildingLayerVisible = false
 
-  const default3DCenter = [120.153576, 30.287459]
   const default3DZoom = 17.6
   const default2DZoom = 12
   const techMapStyle = 'amap://styles/blue'
@@ -318,12 +307,8 @@
 
   const tableData = ref([])
 
-  const alertTypes = ref([
-    { name: '其他设备报警', count: 1, percent: 41.16, color: techChartSeriesColors[1] },
-    { name: '分合闸报警', count: 12, percent: 39.22, color: techChartSeriesColors[4] },
-    { name: '电压报警', count: 2, percent: 5.41, color: techChartSeriesColors[0] },
-    { name: '其他', count: 0, percent: 14.21, color: techChartSeriesColors[2] }
-  ])
+  const alertTypes = ref([])
+  const alarmTrendData = ref({ dates: [], series: [] })
 
   const GATEWAY_TYPE_ENUM = [
     { value: 1, label: '线路1' },
@@ -345,18 +330,24 @@
 
   const projectData = ref([])
 
-  const devices = ref([])
-
-  const totalDevices = computed(() => devices.value.length)
-  const onlineDevices = computed(() => devices.value.filter((device) => device.status === 'online').length)
-  const offlineDevices = computed(() => devices.value.filter((device) => device.status === 'offline').length)
-  const alarmDevices = computed(() => devices.value.filter((device) => device.status === 'alarm').length)
-
   const alarmPendingOption = computed(() => getAlarmPendingOption())
-  const alertDistributionOption = computed(() => getAlertDistributionOption(alertTypes.value))
+  const alertDistributionOption = computed(() => getAlertDistributionOption(displayAlertTypes.value))
+  const displayAlertTypes = computed(() => {
+    const allowed = ['平台报警', '分合闸报警', '运行报警']
+    return alertTypes.value.filter((item) => allowed.includes(item.name))
+  })
   const deviceStatOption = computed(() => getDeviceStatOption(deviceTypes.value))
   const projectBarOption = computed(() => getProjectBarOption(projectData.value))
-  const alertTrendOption = computed(() => getAlertTrendOption())
+  const alertTrendOption = computed(() => {
+    const allowedCategories = ['平台报警', '分合闸报警', '运行报警']
+    const filteredSeries = (alarmTrendData.value.series || []).filter((item) =>
+      allowedCategories.includes(item.category)
+    )
+    return getAlertTrendOption({
+      dates: alarmTrendData.value.dates,
+      series: filteredSeries
+    })
+  })
 
   const largeScreenTableHeaderStyle = {
     background: 'transparent',
@@ -394,28 +385,6 @@
     pushDynamicRoute(EQUIPMENT_OVERVIEW_ROUTE_PATH)
   }
 
-  const handleMapInfoWindowClick = (event) => {
-    const btn = event.target.closest('.tech-map-info-btn')
-    if (!btn) return
-    event.preventDefault()
-    event.stopPropagation()
-    goToEquipmentOverview()
-  }
-
-  let mapInfoClickBound = false
-
-  const bindMapInfoWindowClick = () => {
-    if (mapInfoClickBound) return
-    document.addEventListener('click', handleMapInfoWindowClick)
-    mapInfoClickBound = true
-  }
-
-  const unbindMapInfoWindowClick = () => {
-    if (!mapInfoClickBound) return
-    document.removeEventListener('click', handleMapInfoWindowClick)
-    mapInfoClickBound = false
-  }
-
   const calculateTableHeight = () => {
     nextTick(() => {
       if (bottomRef.value) {
@@ -428,7 +397,6 @@
     calculateTableHeight()
 
     getDeviceWarningList()
-
     getDeviceCategoryGroup()
     getDeviceChangeList()
     getProjectCategoryGroup()
@@ -437,7 +405,10 @@
       initMap()
     })
 
-    getDeviceGatewayList()
+    loadProjects()
+    loadAlarmSituation()
+    loadAlarmTotal()
+    loadAlarmCharts()
   })
 
   const getDeviceWarningList = () => {
@@ -480,43 +451,97 @@
     })
   }
 
-  const getDeviceGatewayList = () => {
-    return serve.getDeviceGatewayList().then((res) => {
-      if (res.code === 0) {
-        devices.value = res.data.map((item) => ({
-          ...item,
-          status: item.status || 'online'
-        }))
-        console.log('devices', devices.value)
+  const escapeHtml = (str) =>
+    String(str ?? '')
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+
+  const normalizeProject = (item) => ({
+    id: item.projectId,
+    name: item.projectName,
+    address: item.projectAddress,
+    lng: Number(item.projectLong),
+    lat: Number(item.projectLat),
+    projectUser: item.projectUser,
+    projectPhone: item.projectPhone
+  })
+
+  const getValidCenter = () => {
+    const first = projectList.value.find((p) => Number.isFinite(p.lng) && Number.isFinite(p.lat))
+    return first ? [first.lng, first.lat] : defaultMapCenter
+  }
+
+  const createMarkerContent = (name) => {
+    const safeName = escapeHtml(name)
+    return `
+      <div class="project-map-marker">
+        <span class="project-map-marker-pulse"></span>
+        <span class="project-map-marker-core"></span>
+        <span class="project-map-marker-label">${safeName}</span>
+      </div>
+    `
+  }
+
+  const createInfoWindowContent = (project) => `
+    <div class="project-map-info-window">
+      <div class="project-map-info-title">${escapeHtml(project.name)}</div>
+      <div class="project-map-info-row"><label>地址：</label><span>${escapeHtml(project.address) || '--'}</span></div>
+      <div class="project-map-info-row"><label>联系人：</label><span>${escapeHtml(project.projectUser) || '--'}</span></div>
+      <div class="project-map-info-row"><label>电话：</label><span>${escapeHtml(project.projectPhone) || '--'}</span></div>
+      <div class="project-map-info-row project-map-info-detail">
+        <a class="project-map-info-link" href="javascript:void(0)" data-project-id="${project.id}">查看详情</a>
+      </div>
+    </div>
+  `
+
+  const clearMarkers = () => {
+    if (mapInstance.value && markers.length) {
+      mapInstance.value.remove(markers)
+    }
+    markers = []
+  }
+
+  const renderProjectMarkers = () => {
+    if (!mapInstance.value) return
+    clearMarkers()
+    if (!infoWindow) {
+      infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -16), closeWhenClickMap: true })
+    }
+
+    projectList.value.forEach((project) => {
+      if (!Number.isFinite(project.lng) || !Number.isFinite(project.lat)) return
+      const marker = new AMap.Marker({
+        position: [project.lng, project.lat],
+        content: createMarkerContent(project.name),
+        offset: new AMap.Pixel(-10, -10),
+        zIndex: 10,
+        extData: project
+      })
+      marker.on('click', () => {
+        infoWindow.setContent(createInfoWindowContent(project))
+        infoWindow.open(mapInstance.value, [project.lng, project.lat])
         nextTick(() => {
-          if (mapInstance.value) {
-            mapInstance.value.setZoomAndCenter(getCurrentMapZoom(), getValidDeviceCenter(), true)
-            mapInstance.value.resize?.()
-            initMarkerCluster()
+          const link = document.querySelector('.project-map-info-link')
+          if (link) {
+            link.addEventListener('click', (e) => {
+              e.preventDefault()
+              projectStore.setCurrentProject(project)
+              router.push('/layout/masterStation/project')
+            })
           }
         })
-      }
-    })
-  }
-
-  const getValidDeviceCenter = () => {
-    const firstValidDevice = devices.value.find((device) => {
-      const longitude = Number(device.gatewayLong)
-      const latitude = Number(device.gatewayLat)
-      return Number.isFinite(longitude) && Number.isFinite(latitude)
+      })
+      markers.push(marker)
     })
 
-    if (!firstValidDevice) return default3DCenter
-    return [Number(firstValidDevice.gatewayLong), Number(firstValidDevice.gatewayLat)]
-  }
-
-  const getCurrentMapZoom = () => {
-    return mapDisplayMode.value === '3D' ? default3DZoom : default2DZoom
+    mapInstance.value.add(markers)
   }
 
   const ensureSatelliteLayers = () => {
     if (typeof AMap === 'undefined' || !AMap.TileLayer) return
-
     if (!satelliteLayer && AMap.TileLayer.Satellite) {
       satelliteLayer = new AMap.TileLayer.Satellite()
     }
@@ -524,35 +549,28 @@
 
   const showSatelliteLayers = () => {
     if (!mapInstance.value) return
-
     ensureSatelliteLayers()
     const layers = [satelliteLayer].filter(Boolean)
     if (!layers.length) return
-
     if (mapInstance.value.setLayers) {
       mapInstance.value.setLayers(layers)
     } else if (!satelliteLayersVisible) {
       layers.forEach((layer) => mapInstance.value.add(layer))
     }
-
     satelliteLayersVisible = true
   }
 
   const hideSatelliteLayers = () => {
     if (!mapInstance.value || !satelliteLayersVisible) return
-
     if (satelliteLayer) mapInstance.value.remove(satelliteLayer)
-
     if (defaultMapLayers?.length && mapInstance.value.setLayers) {
       mapInstance.value.setLayers(defaultMapLayers)
     }
-
     satelliteLayersVisible = false
   }
 
   const ensureBuildingLayer = () => {
     if (typeof AMap === 'undefined' || !AMap.Buildings) return
-
     if (!buildingLayer) {
       buildingLayer = new AMap.Buildings({
         zooms: [15, 20],
@@ -566,26 +584,22 @@
 
   const showBuildingLayer = () => {
     if (!mapInstance.value || buildingLayerVisible) return
-
     ensureBuildingLayer()
     if (!buildingLayer) return
-
     mapInstance.value.add(buildingLayer)
     buildingLayerVisible = true
   }
 
   const hideBuildingLayer = () => {
     if (!mapInstance.value || !buildingLayerVisible) return
-
     if (buildingLayer) mapInstance.value.remove(buildingLayer)
     buildingLayerVisible = false
   }
 
   const applyMapMode = () => {
     if (!mapInstance.value) return
-
     const mode = mapDisplayMode.value
-    const center = getValidDeviceCenter()
+    const center = getValidCenter()
     const is3D = mode === '3D'
     const isSatellite = mode === 'satellite'
 
@@ -619,25 +633,21 @@
 
   const switchMapMode = (mode) => {
     if (mapDisplayMode.value === mode) return
-
     mapDisplayMode.value = mode
     applyMapMode()
   }
 
   const initMap = () => {
-    if (mapInstance.value) return
-
     if (typeof AMap === 'undefined') {
       console.error('高德地图API未加载')
       return
     }
-
-    console.log('开始初始化地图')
+    if (mapInstance.value) return
 
     mapInstance.value = new AMap.Map('chinaMap', {
-      zoom: getCurrentMapZoom(),
+      zoom: mapDisplayMode.value === '3D' ? default3DZoom : default2DZoom,
       zooms: [3, 20],
-      center: getValidDeviceCenter(),
+      center: getValidCenter(),
       viewMode: '3D',
       pitch: mapDisplayMode.value === '3D' ? 68 : 0,
       rotation: mapDisplayMode.value === '3D' ? -28 : 0,
@@ -645,187 +655,112 @@
       rotateEnable: mapDisplayMode.value === '3D',
       dragEnable: true,
       zoomEnable: true,
-      mapStyle: isMapTechStyle.value ? techMapStyle : defaultMapStyle,
+      mapStyle: mapDisplayMode.value !== 'satellite' ? techMapStyle : defaultMapStyle,
       skyColor: '#031629'
     })
 
     defaultMapLayers = mapInstance.value.getLayers?.().slice() || null
-    if (mapDisplayMode.value === '3D') {
-      showBuildingLayer()
-    }
+
+    renderProjectMarkers()
+    applyMapMode()
 
     mapInstance.value.on('complete', () => {
-      mapInstance.value?.resize?.()
-      initMarkerCluster()
-    })
-
-    bindMapInfoWindowClick()
-  }
-
-  const clearMarkerCluster = () => {
-    if (!markerCluster) return
-
-    try {
-      if (typeof markerCluster.setMap === 'function') {
-        markerCluster.setMap(null)
-      } else if (typeof markerCluster.destroy === 'function') {
-        markerCluster.destroy()
-      }
-    } catch (err) {
-      console.warn('[largeScreen2] 清理点聚合失败', err)
-    }
-
-    markerCluster = null
-  }
-
-  const getClusterPointData = (context) => {
-    if (Array.isArray(context.data)) return context.data[0]
-    return context.data
-  }
-
-  const openDeviceInfoWindow = (device, position) => {
-    if (!mapInstance.value || !device) return
-
-    if (!deviceInfoWindow) {
-      deviceInfoWindow = new AMap.InfoWindow({
-        offset: new AMap.Pixel(0, -16)
+      nextTick(() => {
+        mapInstance.value?.resize?.()
+        if (markers.length) mapInstance.value?.setFitView?.(markers)
       })
-    }
-
-    deviceInfoWindow.setContent(createInfoWindowContent(device))
-    deviceInfoWindow.open(mapInstance.value, position)
+    })
   }
 
-  const buildClusterPoints = () => {
-    return devices.value
-      .map((device) => {
-        const longitude = Number(device.gatewayLong)
-        const latitude = Number(device.gatewayLat)
-        if (!Number.isFinite(longitude) || !Number.isFinite(latitude)) return null
-        return {
-          lnglat: [longitude, latitude],
-          extData: device
+  const loadProjects = async () => {
+    try {
+      const res = await getProjectList()
+      if (res.code === 0 && res.data) {
+        const seen = new Set()
+        projectList.value = res.data
+          .filter((item) => {
+            if (seen.has(item.projectId)) return false
+            seen.add(item.projectId)
+            return true
+          })
+          .map(normalizeProject)
+
+        if (mapInstance.value) {
+          renderProjectMarkers()
+          mapInstance.value.setCenter(getValidCenter())
+          nextTick(() => mapInstance.value?.setFitView?.(markers))
         }
-      })
-      .filter(Boolean)
-  }
-
-  const renderClusterMarker = (context) => {
-    const count = context.count
-    const size = Math.min(56, Math.max(36, 30 + Math.log10(count + 1) * 10))
-    const half = size / 2
-
-    context.marker.setContent(`
-      <div class="tech-map-cluster-marker" style="width:${size}px;height:${size}px">
-        <span class="tech-map-cluster-pulse"></span>
-        <span class="tech-map-cluster-core">${count}</span>
-      </div>
-    `)
-    context.marker.setOffset(new AMap.Pixel(-half, -half))
-  }
-
-  const renderSingleMarker = (context) => {
-    const pointData = getClusterPointData(context)
-    const device = pointData?.extData
-    if (!device || !context.marker) return
-
-    const markerStatus = getDeviceMarkerClass(device.status)
-
-    context.marker.setContent(
-      `<div class="tech-map-marker tech-map-marker-${markerStatus}"><i></i><b></b><span></span></div>`
-    )
-    context.marker.setOffset(new AMap.Pixel(-12, -12))
-    context.marker.setTitle(getDeviceLocationName(device))
-    context.marker.setExtData?.(device)
-    context.marker.off?.('click')
-    context.marker.on('click', () => {
-      openDeviceInfoWindow(device, context.marker.getPosition())
-    })
-  }
-
-  const createMarkerCluster = () => {
-    const points = buildClusterPoints()
-    if (!mapInstance.value || !points.length) return
-
-    clearMarkerCluster()
-
-    try {
-      markerCluster = new AMap.MarkerCluster(mapInstance.value, points, {
-        gridSize: 72,
-        maxZoom: 17,
-        renderClusterMarker,
-        renderMarker: renderSingleMarker
-      })
-    } catch (err) {
-      console.error('[largeScreen2] 点聚合创建失败', err)
-      markerCluster = null
-    }
-  }
-
-  const initMarkerCluster = () => {
-    if (!mapInstance.value || !devices.value?.length) return
-
-    const run = () => {
-      if (typeof AMap.MarkerCluster !== 'function') {
-        console.warn('[largeScreen2] MarkerCluster 插件未加载')
-        return
       }
-      createMarkerCluster()
+    } catch (err) {
+      console.error('加载项目列表失败', err)
     }
+  }
 
-    if (typeof mapInstance.value.plugin === 'function') {
-      mapInstance.value.plugin(['AMap.MarkerCluster'], run)
-      return
+  const loadAlarmSituation = async () => {
+    try {
+      const res = await getAlarmSituationSummary({})
+      if (res.code === 0 && res.data) {
+        alarmSituation.value = {
+          device: { total: 0, online: 0, offline: 0, ...res.data.device },
+          line: { total: 0, online: 0, offline: 0, ...res.data.line },
+          alarm: {
+            currentMonthTotal: 0,
+            yesterdayTotal: 0,
+            todayTotal: 0,
+            todayDeviceCount: 0,
+            ...res.data.alarm
+          },
+          preAlarm: { currentMonthTotal: 0, ...res.data.preAlarm }
+        }
+      }
+    } catch (err) {
+      console.error('加载警情情况失败', err)
     }
+  }
 
-    if (typeof AMap.plugin === 'function') {
-      AMap.plugin(['AMap.MarkerCluster'], run)
-      return
+  const loadAlarmTotal = async () => {
+    try {
+      const res = await getAlarmRecordListByPage({ page: 1, pageSize: 1 })
+      if (res.code === 0 && res.data) {
+        alarmTotal.value = res.data.total || 0
+      }
+    } catch (err) {
+      console.error('加载报警总数失败', err)
     }
-
-    run()
   }
 
-  const getDeviceLocationName = (device) => {
-    return device.gatewayAddress || device.gatewayName || device.gatewayMac || '未知位置'
-  }
-
-  const getDeviceMarkerClass = (status) => {
-    if (status === 'alarm') return 'alarm'
-    if (status === 'offline') return 'offline'
-    return 'online'
-  }
-
-  const escapeMapHtml = (value) => {
-    return String(value ?? '')
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#39;')
-  }
-
-  const createInfoWindowContent = (device) => {
-    const locationName = escapeMapHtml(getDeviceLocationName(device))
-
-    return `
-      <div class="tech-map-info-window">
-        <div class="tech-map-info-title">设备位置</div>
-        <div class="tech-map-info-value">${locationName}</div>
-        <button type="button" class="tech-map-info-btn">查看详情</button>
-      </div>
-    `
+  const loadAlarmCharts = async () => {
+    try {
+      const [categoryRes, trendRes] = await Promise.all([getAlarmCategorySummary(), getAlarmTrend()])
+      if (categoryRes.code === 0 && categoryRes.data) {
+        alertTypes.value = (categoryRes.data.items || []).map((item, index) => ({
+          name: item.category || '未知',
+          count: item.count || 0,
+          percent: item.percent || 0,
+          color: techChartSeriesColors[index % techChartSeriesColors.length]
+        }))
+      }
+      if (trendRes.code === 0 && trendRes.data) {
+        alarmTrendData.value = {
+          dates: trendRes.data.dates || [],
+          series: trendRes.data.series || []
+        }
+      }
+    } catch (err) {
+      console.error('加载报警图表数据失败', err)
+    }
   }
 
   onBeforeUnmount(() => {
-    unbindMapInfoWindowClick()
     if (resizeObserver) {
       resizeObserver.disconnect()
     }
-
+    if (infoWindow) {
+      infoWindow.close()
+      infoWindow = null
+    }
+    clearMarkers()
     if (mapInstance.value) {
-      clearMarkerCluster()
-      deviceInfoWindow = null
       hideBuildingLayer()
       hideSatelliteLayers()
       buildingLayer = null
@@ -869,7 +804,7 @@
       display: flex;
       flex-direction: column;
       padding: px2vw(90) 0;
-      width: px2vw(460);
+      width: px2vw(420);
       height: 100%;
       background: url('@/assets/img/largeScreen2/background-left.png') no-repeat;
       background-size: 100% 100%;
@@ -877,7 +812,8 @@
 
       .module-card {
         border-radius: 8px;
-        padding: px2vh(20) px2vw(20) px2vh(20) px2vw(40);
+        // padding: px2vh(20) px2vw(20) px2vh(20) px2vw(40);
+        padding-left: px2vh(20);
         display: flex;
         flex-direction: column;
         flex: 1;
@@ -1208,7 +1144,7 @@
       }
     }
     .right {
-      width: px2vw(460);
+      width: px2vw(420);
       height: 100%;
       background: url('@/assets/img/largeScreen2/background-right.png') no-repeat;
       background-size: 100% 100%;
@@ -1221,7 +1157,7 @@
         // background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(15, 23, 42, 0.8) 100%);
         // border: 1px solid rgba(59, 130, 246, 0.3);
         border-radius: 8px;
-        padding: px2vh(20) px2vw(20) px2vh(20) px2vw(40);
+        // padding: px2vh(20) px2vw(20) px2vh(20) px2vw(40);
         display: flex;
         flex-direction: column;
       }
@@ -1299,12 +1235,16 @@
 
       .alert-distribution-content {
         display: flex;
-        gap: px2vh(40);
+        align-items: center;
+        gap: px2vh(20);
         flex: 1;
       }
 
       .alert-ring-chart {
-        flex: 1;
+        flex: 0 0 px2vw(200);
+        width: px2vw(200);
+        height: px2vh(200);
+        min-width: px2vw(200);
         min-height: px2vh(200);
       }
 
@@ -1312,21 +1252,22 @@
         flex: 1;
         display: flex;
         flex-direction: column;
-        gap: px2vh(12);
+        justify-content: center;
+        gap: px2vh(8);
       }
 
       .alert-item {
         display: flex;
         align-items: center;
-        gap: px2vh(12);
-        font-size: px2vw(18);
+        gap: px2vh(8);
+        font-size: px2vw(14);
         font-weight: bold;
         white-space: nowrap;
       }
 
       .alert-dot {
-        width: px2vw(16);
-        height: px2vh(16);
+        width: px2vw(12);
+        height: px2vh(12);
         border-radius: 2px;
       }
 
@@ -1342,7 +1283,7 @@
       .alert-count {
         color: var(--tech-text);
         font-weight: bold;
-        font-size: px2vw(20);
+        font-size: px2vw(16);
         margin-right: px2vw(6);
         white-space: nowrap;
       }
@@ -1464,13 +1405,6 @@
       radial-gradient(circle at 78% 72%, rgba(245, 158, 11, 0.2), transparent 28%),
       radial-gradient(ellipse at 50% 100%, rgba(15, 23, 42, 0.78), transparent 52%),
       linear-gradient(180deg, rgba(3, 24, 52, 0.3), rgba(2, 14, 34, 0.56));
-    animation: techMapBreath 5.6s ease-in-out infinite;
-  }
-
-  .map-container-full.map-tech-style .amap-layer,
-  .map-container-full.map-tech-style .amap-maps,
-  .map-container-full.map-tech-style canvas {
-    filter: brightness(1.28) saturate(1.12) contrast(1.08) hue-rotate(-10deg);
   }
 
   .map-container-full.map-tech-style::before {
@@ -2406,6 +2340,216 @@
     color: #eefbff;
   }
 
+  .map-container-full .amap-info-content {
+    padding: 0;
+    overflow: hidden;
+    border-radius: 8px;
+    background: transparent;
+  }
+
+  .map-hud {
+    position: absolute;
+    top: px2vh(24);
+    left: px2vw(22);
+    z-index: 1000;
+    display: flex;
+    flex-wrap: wrap;
+    gap: px2vw(12);
+    max-width: calc(100% - px2vw(44));
+    pointer-events: none;
+  }
+
+  .map-hud-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: px2vw(86);
+    padding: px2vh(8) px2vw(12);
+    border: 1px solid rgba(0, 212, 255, 0.35);
+    border-radius: px2vw(8);
+    background:
+      linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(2, 8, 23, 0.9)),
+      radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.1), transparent 34%);
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
+      0 px2vw(8) px2vw(18) rgba(0, 0, 0, 0.35),
+      0 0 px2vw(10) rgba(0, 212, 255, 0.15);
+    backdrop-filter: blur(8px);
+    animation: mapHudBreathe 3s ease-in-out infinite;
+
+    span {
+      font-size: px2vw(12);
+      color: var(--tech-text-muted);
+    }
+
+    strong {
+      margin-top: px2vh(2);
+      font-size: px2vw(20);
+      font-weight: 800;
+      color: var(--tech-cyan);
+      text-shadow: 0 0 px2vw(12) rgba(0, 212, 255, 0.55);
+
+      &.success {
+        color: var(--tech-success);
+        text-shadow: 0 0 px2vw(12) rgba(16, 185, 129, 0.55);
+      }
+
+      &.offline {
+        color: #94a3b8;
+      }
+    }
+  }
+
+  @keyframes mapHudBreathe {
+    0%,
+    100% {
+      border-color: rgba(0, 212, 255, 0.3);
+      box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
+        0 px2vw(8) px2vw(18) rgba(0, 0, 0, 0.35),
+        0 0 px2vw(6) rgba(0, 212, 255, 0.1);
+    }
+
+    50% {
+      border-color: rgba(0, 212, 255, 0.6);
+      box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
+        0 px2vw(8) px2vw(18) rgba(0, 0, 0, 0.35),
+        0 0 px2vw(16) rgba(0, 212, 255, 0.3);
+    }
+  }
+
+  .project-map-marker {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: px2vw(20);
+    height: px2vh(20);
+    cursor: pointer;
+
+    .project-map-marker-core {
+      position: absolute;
+      width: px2vw(10);
+      height: px2vh(10);
+      border-radius: 50%;
+      background: var(--tech-cyan);
+      box-shadow: 0 0 px2vw(10) var(--tech-cyan);
+      border: 2px solid #fff;
+      animation: projectMarkerCoreBreathe 1.6s ease-in-out infinite;
+    }
+
+    .project-map-marker-pulse {
+      position: absolute;
+      width: px2vw(20);
+      height: px2vh(20);
+      border-radius: 50%;
+      background: rgba(0, 212, 255, 0.45);
+      animation: projectMarkerPulse 1.6s ease-out infinite;
+    }
+
+    .project-map-marker-label {
+      position: absolute;
+      top: px2vh(18);
+      left: 50%;
+      transform: translateX(-50%);
+      padding: px2vh(2) px2vw(8);
+      font-size: px2vw(12);
+      font-weight: 700;
+      white-space: nowrap;
+      color: #fff;
+      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
+      background: rgba(2, 8, 23, 0.85);
+      border: 1px solid rgba(0, 212, 255, 0.4);
+      border-radius: 4px;
+      pointer-events: none;
+    }
+  }
+
+  @keyframes projectMarkerCoreBreathe {
+    0%,
+    100% {
+      box-shadow: 0 0 px2vw(8) var(--tech-cyan);
+    }
+
+    50% {
+      box-shadow:
+        0 0 px2vw(18) var(--tech-cyan),
+        0 0 px2vw(28) rgba(0, 212, 255, 0.5);
+    }
+  }
+
+  @keyframes projectMarkerPulse {
+    0% {
+      transform: scale(0.6);
+      opacity: 0.8;
+    }
+
+    100% {
+      transform: scale(2.2);
+      opacity: 0;
+    }
+  }
+
+  .project-map-info-window {
+    min-width: 180px;
+    padding: px2vh(12) px2vw(12);
+    color: var(--tech-text);
+    background: rgba(2, 8, 23, 0.96);
+    border: 1px solid rgba(0, 212, 255, 0.45);
+    border-radius: 8px;
+    box-shadow:
+      0 px2vw(8) px2vw(24) rgba(0, 0, 0, 0.5),
+      0 0 px2vw(18) rgba(0, 212, 255, 0.2);
+
+    .project-map-info-title {
+      margin-bottom: px2vh(8);
+      font-size: px2vw(15);
+      font-weight: 800;
+      color: var(--tech-text-strong);
+      border-bottom: 1px solid rgba(0, 212, 255, 0.3);
+      padding-bottom: px2vh(6);
+      text-shadow: 0 0 px2vw(10) rgba(0, 212, 255, 0.35);
+    }
+
+    .project-map-info-row {
+      display: flex;
+      gap: px2vw(6);
+      margin-top: px2vh(6);
+      font-size: px2vw(13);
+      line-height: 1.4;
+
+      label {
+        flex: none;
+        color: var(--tech-text-muted);
+      }
+
+      span {
+        flex: 1;
+        color: var(--tech-text);
+      }
+    }
+
+    .project-map-info-detail {
+      justify-content: flex-end;
+      margin-top: px2vh(10);
+      padding-top: px2vh(8);
+      border-top: 1px solid rgba(0, 212, 255, 0.2);
+
+      .project-map-info-link {
+        color: #00d4ff;
+        text-decoration: none;
+        cursor: pointer;
+        transition: color 0.2s;
+
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+  }
+
   .top2 {
     flex: 1;
     min-height: 0;
@@ -2555,17 +2699,17 @@
     position: relative;
     min-height: px2vh(32);
 
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      right: 18%;
-      bottom: -px2vh(6);
-      height: 1px;
-      background: linear-gradient(90deg, rgba(0, 212, 255, 0.34), rgba(59, 130, 246, 0.08), transparent);
-      box-shadow: 0 0 px2vw(8) rgba(0, 212, 255, 0.18);
-      opacity: 0.55;
-    }
+    // &::after {
+    //   content: '';
+    //   position: absolute;
+    //   left: 0;
+    //   right: 18%;
+    //   bottom: -px2vh(6);
+    //   height: 1px;
+    //   background: linear-gradient(90deg, rgba(0, 212, 255, 0.34), rgba(59, 130, 246, 0.08), transparent);
+    //   box-shadow: 0 0 px2vw(8) rgba(0, 212, 255, 0.18);
+    //   opacity: 0.55;
+    // }
   }
 
   .container .module-title {
@@ -2583,16 +2727,16 @@
     box-shadow: 0 0 px2vw(12) rgba(0, 212, 255, 0.9);
     animation: iconPulse 1.8s ease-in-out infinite;
 
-    &::after {
-      content: '';
-      position: absolute;
-      left: px2vw(13);
-      top: 50%;
-      width: px2vw(42);
-      height: 1px;
-      background: linear-gradient(90deg, rgba(0, 212, 255, 0.9), transparent);
-      transform: translateY(-50%);
-    }
+    // &::after {
+    //   content: '';
+    //   position: absolute;
+    //   left: px2vw(13);
+    //   top: 50%;
+    //   width: px2vw(42);
+    //   height: 1px;
+    //   background: linear-gradient(90deg, rgba(0, 212, 255, 0.9), transparent);
+    //   transform: translateY(-50%);
+    // }
   }
 
   .container .center .title {
@@ -2823,6 +2967,10 @@
     padding: px2vh(4) px2vw(4);
   }
 
+  .container .alert-item {
+    padding: px2vh(3) px2vw(6);
+  }
+
   .container .device-dot,
   .container .alert-dot,
   .container .status-dot {
@@ -3015,16 +3163,6 @@
     }
   }
 
-  @keyframes techMapBreath {
-    0%,
-    100% {
-      filter: brightness(1) saturate(1);
-    }
-    50% {
-      filter: brightness(1.18) saturate(1.35);
-    }
-  }
-
   @keyframes mapDockRotate {
     0% {
       transform: rotate(0deg);
diff --git a/src/view/largeScreen2/ttes.js b/src/view/largeScreen2/ttes.js
index 58758bd..d529ee1 100644
--- a/src/view/largeScreen2/ttes.js
+++ b/src/view/largeScreen2/ttes.js
@@ -106,33 +106,43 @@ export const getAlarmPendingOption = () => ({
   ]
 })
 
-export const getAlertDistributionOption = (alertTypes) => ({
-  series: [
-    {
-      type: 'pie',
-      radius: ['45%', '70%'],
-      center: ['50%', '50%'],
-      avoidLabelOverlap: false,
-      itemStyle: pieItemStyle,
-      label: {
-        show: true,
-        position: 'center',
-        formatter: '{total|15}\n{name|报警总数}',
-        rich: createCenterLabelRich(28, 14)
-      },
-      labelLine: {
-        show: false
-      },
-      data: alertTypes.map((item) => ({
-        value: item.count,
-        name: item.name,
-        itemStyle: {
-          color: item.color
-        }
-      }))
-    }
-  ]
-})
+export const getAlertDistributionOption = (alertTypes) => {
+  const total = (alertTypes || []).reduce((sum, item) => sum + (item.count || 0), 0)
+  return {
+    grid: {
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      containLabel: false
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['42%', '68%'],
+        center: ['50%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: pieItemStyle,
+        label: {
+          show: true,
+          position: 'center',
+          formatter: `{total|${total}}\n{name|报警总数}`,
+          rich: createCenterLabelRich(16, 10)
+        },
+        labelLine: {
+          show: false
+        },
+        data: (alertTypes || []).map((item, index) => ({
+          value: item.count || 0,
+          name: item.name || '未知',
+          itemStyle: {
+            color: item.color || techChartSeriesColors[index % techChartSeriesColors.length]
+          }
+        }))
+      }
+    ]
+  }
+}
 
 export const getDeviceStatOption = (deviceTypes) => {
   const total = deviceTypes.reduce((sum, item) => sum + (item.count || item.value || 0), 0)
@@ -222,106 +232,21 @@ export const getProjectBarOption = (projectData) => ({
   ]
 })
 
-export const getAlertTrendOption = () => ({
-  tooltip: {
-    trigger: 'axis',
-    ...techChartTooltip
-  },
-  legend: {
-    data: ['二级报警', '报警', '预警'],
-    right: 10,
-    top: 0,
-    ...techChartLegend,
-    textStyle: {
-      ...techChartLegend.textStyle,
-      fontSize: 10
-    },
-    itemWidth: 10,
-    itemHeight: 10
-  },
-  grid: {
-    top: '15%',
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: ['01', '05', '10', '15', '20', '25', '30'],
-    axisLine: techChartAxisLine,
-    axisLabel: compactAxisLabel
-  },
-  yAxis: {
-    type: 'value',
-    name: '数量',
-    nameTextStyle: chartNameTextStyle,
-    splitLine: dashedSplitLine,
-    axisLine: techChartAxisLine,
-    axisLabel: compactAxisLabel
-  },
-  series: [
-    {
-      name: '二级报警',
-      data: [0, 1, 1, 2, 0, 0, 3],
+export const getAlertTrendOption = (payload = {}) => {
+  const dates = payload.dates || []
+  const seriesList = (payload.series || []).map((item, index) => {
+    const color = techChartSeriesColors[index % techChartSeriesColors.length]
+    return {
+      name: item.category || `系列${index + 1}`,
+      data: item.data || [],
       type: 'line',
       smooth: true,
       lineStyle: {
-        color: techChartSeriesColors[5],
+        color,
         width: 2
       },
       itemStyle: {
-        color: techChartSeriesColors[5]
-      },
-      markPoint: {
-        data: [
-          {
-            type: 'max',
-            name: 'Max'
-          },
-          {
-            type: 'min',
-            name: 'Min'
-          }
-        ]
-      }
-    },
-    {
-      name: '报警',
-      data: [1, 0, 0, 1, 1, 1, 0],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: techChartSeriesColors[3],
-        width: 2
-      },
-      itemStyle: {
-        color: techChartSeriesColors[3]
-      },
-      markPoint: {
-        data: [
-          {
-            type: 'max',
-            name: 'Max'
-          },
-          {
-            type: 'min',
-            name: 'Min'
-          }
-        ]
-      }
-    },
-    {
-      name: '预警',
-      data: [0, 1, 1, 0, 1, 1, 1],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: techChartSeriesColors[2],
-        width: 2
-      },
-      itemStyle: {
-        color: techChartSeriesColors[2]
+        color
       },
       markPoint: {
         data: [
@@ -336,5 +261,46 @@ export const getAlertTrendOption = () => ({
         ]
       }
     }
-  ]
-})
+  })
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      ...techChartTooltip
+    },
+    legend: {
+      data: seriesList.map((s) => s.name),
+      right: 10,
+      top: 0,
+      ...techChartLegend,
+      textStyle: {
+        ...techChartLegend.textStyle,
+        fontSize: 10
+      },
+      itemWidth: 10,
+      itemHeight: 10
+    },
+    grid: {
+      top: '15%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLine: techChartAxisLine,
+      axisLabel: compactAxisLabel
+    },
+    yAxis: {
+      type: 'value',
+      name: '数量',
+      nameTextStyle: chartNameTextStyle,
+      splitLine: dashedSplitLine,
+      axisLine: techChartAxisLine,
+      axisLabel: compactAxisLabel
+    },
+    series: seriesList
+  }
+}