更新

src/view/largeScreen2/index.vue

@@ -360,6 +360,28 @@
     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 setRem = () => {
     const designWidth = 1920
     const designHeight = 1080
@@ -631,6 +653,8 @@
         addMarkers()
       }
     })
+
+    bindMapInfoWindowClick()
   }
 
   const addMarkers = () => {
@@ -710,11 +734,13 @@
       <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>
     `
   }
 
   onBeforeUnmount(() => {
+    unbindMapInfoWindowClick()
     window.removeEventListener('resize', setRem)
     if (resizeObserver) {
       resizeObserver.disconnect()
@@ -2100,6 +2126,29 @@
     text-shadow: 0 0 8px rgba(56, 189, 248, 0.48);
   }
 
+  .tech-map-info-btn {
+    display: block;
+    width: 100%;
+    margin-top: 10px;
+    padding: 6px 0;
+    color: #031424;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    border: 1px solid rgba(103, 232, 249, 0.74);
+    border-radius: 4px;
+    background: linear-gradient(135deg, #67e8f9, var(--tech-primary));
+    box-shadow: 0 0 12px rgba(0, 212, 255, 0.24);
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 0 16px rgba(0, 212, 255, 0.32);
+    }
+  }
+
   .map-container-full .amap-info-content {
     padding: 0;
     overflow: hidden;