From 31ad43837d22f6ff773a39106ca3a68e360edc5b Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Wed, 10 Dec 2025 21:07:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mapTest/allTrajectories.vue | 42 +++++++++++++++++++++++++++
 src/views/mapTest/index.vue           | 30 +++++++++++++++++++
 src/views/mapTest/trajectory.vue      | 42 +++++++++++++++++++++++++++
 3 files changed, 114 insertions(+)

diff --git a/src/views/mapTest/allTrajectories.vue b/src/views/mapTest/allTrajectories.vue
index de530f7..35286e4 100644
--- a/src/views/mapTest/allTrajectories.vue
+++ b/src/views/mapTest/allTrajectories.vue
@@ -36,6 +36,11 @@
     
     <div id="allTrajectoriesMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
     
+    <!-- 系统名称 -->
+    <div class="system-title">
+      <h1>海面油膜微型跟踪定位装置轨迹跟踪查询系统</h1>
+    </div>
+    
     <!-- 移动端折叠按钮 - 独立于面板外部 -->
     <div class="mobile-collapse-btn" @click="toggleDevicePanel">
       <el-icon class="toggle-icon">
@@ -858,6 +863,30 @@ onBeforeUnmount(() => {
     width: 100%;
   }
   
+  // 系统名称样式
+  .system-title {
+    position: absolute;
+    top: 80px;
+    left: 350px; // 左侧留出设备面板的位置
+    z-index: 100;
+    background: linear-gradient(135deg, rgba(91, 143, 249, 0.95) 0%, rgba(123, 163, 255, 0.95) 100%);
+    padding: 16px 28px;
+    border-radius: 12px;
+    box-shadow: 0 4px 16px rgba(91, 143, 249, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    
+    h1 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 700;
+      color: #fff;
+      letter-spacing: 1px;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      white-space: nowrap;
+    }
+  }
+  
   .device-panel {
     position: absolute;
     top: 80px;
@@ -1271,6 +1300,19 @@ onBeforeUnmount(() => {
 // 移动端适配
 @media (max-width: 768px) {
   .all-trajectories-container {
+    // 系统名称移动端样式
+    .system-title {
+      top: 70px;
+      left: 10px;
+      right: 10px;
+      padding: 12px 16px;
+      
+      h1 {
+        font-size: 14px;
+        letter-spacing: 0.5px;
+      }
+    }
+    
     // 显示移动端折叠按钮
     .mobile-collapse-btn {
       display: flex !important;
diff --git a/src/views/mapTest/index.vue b/src/views/mapTest/index.vue
index 00322b9..3d505bd 100644
--- a/src/views/mapTest/index.vue
+++ b/src/views/mapTest/index.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="map-test-container">
     <div id="mapContainer" class="map-container" v-loading="loading" element-loading-text="加载设备数据中..."></div>
+    
+    <!-- 系统名称 -->
+    <div class="system-title">
+      <h1>海面油膜微型跟踪定位装置轨迹跟踪查询系统</h1>
+    </div>
+    
     <div class="info-panel">
       <h3>地图信息</h3>
       <p>总点位数: {{ points.length }}</p>
@@ -494,6 +500,30 @@ onBeforeUnmount(() => {
     height: 100%;
   }
   
+  // 系统名称样式
+  .system-title {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    z-index: 100;
+    background: linear-gradient(135deg, rgba(91, 143, 249, 0.95) 0%, rgba(123, 163, 255, 0.95) 100%);
+    padding: 16px 28px;
+    border-radius: 12px;
+    box-shadow: 0 4px 16px rgba(91, 143, 249, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    
+    h1 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 700;
+      color: #fff;
+      letter-spacing: 1px;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      white-space: nowrap;
+    }
+  }
+  
   .info-panel {
     position: absolute;
     top: 20px;
diff --git a/src/views/mapTest/trajectory.vue b/src/views/mapTest/trajectory.vue
index 17aec7f..6be7f2d 100644
--- a/src/views/mapTest/trajectory.vue
+++ b/src/views/mapTest/trajectory.vue
@@ -37,6 +37,11 @@
     
     <div id="trajectoryMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
     
+    <!-- 系统名称 -->
+    <div class="system-title">
+      <h1>海面油膜微型跟踪定位装置轨迹跟踪查询系统</h1>
+    </div>
+    
     <div class="info-panel">
       <h3>轨迹信息</h3>
       <p>轨迹点数: {{ trajectoryPoints.length }}</p>
@@ -590,6 +595,30 @@ onBeforeUnmount(() => {
     width: 100%;
   }
   
+  // 系统名称样式
+  .system-title {
+    position: absolute;
+    top: 80px;
+    left: 20px;
+    z-index: 100;
+    background: linear-gradient(135deg, rgba(91, 143, 249, 0.95) 0%, rgba(123, 163, 255, 0.95) 100%);
+    padding: 16px 28px;
+    border-radius: 12px;
+    box-shadow: 0 4px 16px rgba(91, 143, 249, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    
+    h1 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 700;
+      color: #fff;
+      letter-spacing: 1px;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      white-space: nowrap;
+    }
+  }
+  
   .info-panel {
     position: absolute;
     top: 80px;
@@ -628,6 +657,19 @@ onBeforeUnmount(() => {
 // 移动端适配
 @media (max-width: 768px) {
   .trajectory-container {
+    // 系统名称移动端样式
+    .system-title {
+      top: 70px;
+      left: 10px;
+      right: 10px;
+      padding: 12px 16px;
+      
+      h1 {
+        font-size: 14px;
+        letter-spacing: 0.5px;
+      }
+    }
+    
     .header-bar {
       padding: 12px;
       gap: 8px;