From c05c7324fce5961fe1be64b331fed94d64a277b3 Mon Sep 17 00:00:00 2001
From: hx <190679152@qq.com>
Date: Wed, 25 Mar 2026 10:25:19 +0800
Subject: [PATCH] =?UTF-8?q?b=E7=AB=AF=E5=9B=BD=E9=99=85=E5=8C=96=20?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/device/TrajectoryDialog.vue   | 95 ++++++++++++++++++--
 src/lang/device-flow-messages.js             |  5 ++
 src/views/device/device/trajectory/index.vue | 25 +++++-
 3 files changed, 115 insertions(+), 10 deletions(-)

diff --git a/src/components/device/TrajectoryDialog.vue b/src/components/device/TrajectoryDialog.vue
index 7f74e23..84ae9f9 100644
--- a/src/components/device/TrajectoryDialog.vue
+++ b/src/components/device/TrajectoryDialog.vue
@@ -2,7 +2,9 @@
   <el-dialog
     :title="dialogTitle"
     :visible.sync="dialogVisible"
-    width="1100px"
+    width="88%"
+    top="4vh"
+    custom-class="trajectory-dialog"
     append-to-body
     @open="handleOpen"
     @close="handleClose"
@@ -68,13 +70,25 @@
           </el-radio-group>
         </div>
 
-        <div class="trajectory-map-shell" v-loading="loading || mapLoading">
+        <div
+          class="trajectory-map-shell"
+          v-loading="loading || mapLoading"
+          :style="{ minHeight: mapPanelHeight + 'px' }"
+        >
           <el-empty
             v-if="!loading && !mapLoading && !loadError && !trajectoryPoints.length"
             :description="$t('device.trajectory.empty')"
             :image-size="88"
           />
-          <div v-show="!loadError && trajectoryPoints.length" ref="map" class="trajectory-map"></div>
+          <div
+            v-show="!loadError && trajectoryPoints.length"
+            ref="map"
+            class="trajectory-map"
+            :style="{ height: mapPanelHeight + 'px' }"
+          ></div>
+          <div v-show="!loadError && trajectoryPoints.length" class="trajectory-map-disclaimer">
+            {{ $t("device.trajectory.message.disclaimer") || "Non-real-time location data, for reference only" }}
+          </div>
         </div>
       </el-tab-pane>
 
@@ -84,7 +98,7 @@
           :description="$t('device.trajectory.empty')"
           :image-size="88"
         />
-        <el-table v-else :data="trajectoryPoints" border size="mini" max-height="420" class="trajectory-table">
+        <el-table v-else :data="trajectoryPoints" border size="mini" :max-height="tableMaxHeight" class="trajectory-table">
           <el-table-column label="#" type="index" width="60" align="center" />
           <el-table-column :label="$t('device.trajectory.table.time')" min-width="100" align="center">
             <template slot-scope="scope">
@@ -170,6 +184,7 @@ export default {
       mapsApi: null,
       mapConfig: null,
       locationTimeRange: [],
+      viewportHeight: typeof window !== "undefined" ? window.innerHeight : 900,
     };
   },
   computed: {
@@ -196,9 +211,16 @@ export default {
     hasMaptilerKey() {
       return !!(this.mapConfig && this.mapConfig.maptilerKey);
     },
+    mapPanelHeight() {
+      return Math.min(460, Math.max(280, this.viewportHeight - 640));
+    },
+    tableMaxHeight() {
+      return Math.min(420, Math.max(220, this.viewportHeight - 660));
+    },
   },
   methods: {
     async handleOpen() {
+      this.bindViewportResize();
       this.activePanel = "map";
       this.initDefaultLocationTimeRange();
       if (!this.device || !this.device.id) {
@@ -217,6 +239,7 @@ export default {
       await this.renderCurrentProviderMap();
     },
     handleClose() {
+      this.unbindViewportResize();
       this.destroyMap(true);
       this.activePanel = "map";
       this.mapProvider = "amap";
@@ -226,6 +249,29 @@ export default {
       this.mapConfig = null;
       this.locationTimeRange = [];
     },
+    bindViewportResize() {
+      this.handleViewportResize();
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", this.handleViewportResize);
+      }
+    },
+    unbindViewportResize() {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", this.handleViewportResize);
+      }
+    },
+    handleViewportResize() {
+      if (typeof window !== "undefined") {
+        this.viewportHeight = window.innerHeight || 900;
+      }
+      this.$nextTick(() => {
+        if (this.mapVendor === "leaflet" && this.map && typeof this.map.invalidateSize === "function") {
+          this.map.invalidateSize();
+        } else if (this.mapVendor === "amap" && this.map && typeof this.map.resize === "function") {
+          this.map.resize();
+        }
+      });
+    },
     async handlePanelChange() {
       if (this.activePanel !== "map" || !this.trajectoryPoints.length) {
         return;
@@ -1102,7 +1148,7 @@ if (path.length > 1) {
 }
 
 .trajectory-tabs {
-  margin-top: 12px;
+  margin-top: 8px;
 }
 
 .trajectory-toolbar {
@@ -1114,7 +1160,8 @@ if (path.length > 1) {
 }
 
 .trajectory-map-shell {
-  min-height: 420px;
+  position: relative;
+  min-height: 280px;
   border: 1px solid #ebeef5;
   border-radius: 8px;
   overflow: hidden;
@@ -1123,6 +1170,40 @@ if (path.length > 1) {
 
 .trajectory-map {
   width: 100%;
-  height: 420px;
+  height: 280px;
+}
+
+.trajectory-map-disclaimer {
+  position: absolute;
+  right: 12px;
+  bottom: 10px;
+  z-index: 6000;
+  pointer-events: none;
+  font-size: 12px;
+  line-height: 1.3;
+  color: #1f2d3d;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid #d7dee8;
+  border-radius: 10px;
+  padding: 4px 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+/deep/ .trajectory-dialog {
+  margin-top: 4vh !important;
+  margin-bottom: 4vh;
+  max-height: 90vh;
+}
+
+/deep/ .trajectory-dialog .el-dialog__body {
+  max-height: calc(90vh - 120px);
+  overflow: hidden;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+/deep/ .trajectory-dialog .el-dialog__footer {
+  padding-top: 10px;
+  padding-bottom: 14px;
 }
 </style>
diff --git a/src/lang/device-flow-messages.js b/src/lang/device-flow-messages.js
index aee2e27..92a332f 100644
--- a/src/lang/device-flow-messages.js
+++ b/src/lang/device-flow-messages.js
@@ -84,6 +84,7 @@ const deviceFlowMessages = {
           amapConvertFailed: "高德坐标转换失败",
           startTime: "开始时间",
           endTime: "结束时间",
+          disclaimer: "非实时定位数据，仅供参考",
         },
       },
     },
@@ -173,6 +174,7 @@ const deviceFlowMessages = {
           amapConvertFailed: "Failed to convert Amap coordinates",
           startTime: "Start Time",
           endTime: "End Time",
+          disclaimer: "Non-real-time location data, for reference only",
         },
       },
     },
@@ -262,6 +264,7 @@ const deviceFlowMessages = {
           amapConvertFailed: "Echec de conversion des coordonnees Amap",
           startTime: "Heure de debut",
           endTime: "Heure de fin",
+          disclaimer: "Donnees de localisation non temps reel, a titre indicatif uniquement",
         },
       },
     },
@@ -351,6 +354,7 @@ const deviceFlowMessages = {
           amapConvertFailed: "No se pudieron convertir las coordenadas de Amap",
           startTime: "Hora de inicio",
           endTime: "Hora de fin",
+          disclaimer: "Datos de ubicacion no en tiempo real, solo de referencia",
         },
       },
     },
@@ -440,6 +444,7 @@ const deviceFlowMessages = {
           amapConvertFailed: "Falha ao converter as coordenadas do Amap",
           startTime: "Horario inicial",
           endTime: "Horario final",
+          disclaimer: "Dados de localizacao nao em tempo real, apenas para referencia",
         },
       },
     },
diff --git a/src/views/device/device/trajectory/index.vue b/src/views/device/device/trajectory/index.vue
index 10c9c3d..f6a1124 100644
--- a/src/views/device/device/trajectory/index.vue
+++ b/src/views/device/device/trajectory/index.vue
@@ -77,10 +77,11 @@
       <section class="panel center">
         <div class="panel-title">轨迹地图</div>
         <div class="map-toolbar">
+          <span class="page-inline-filter__label">{{ $t("device.trajectory.provider.label") }}</span>
           <el-radio-group v-model="provider" size="small" @change="renderMap">
-            <el-radio-button label="google">谷歌地图</el-radio-button>
-            <el-radio-button label="amap" :disabled="!hasAmap">高德地图</el-radio-button>
-            <el-radio-button label="maptiler" :disabled="!hasMaptiler">MapTiler</el-radio-button>
+            <el-radio-button label="google">{{ $t("device.trajectory.provider.google") }}</el-radio-button>
+            <el-radio-button label="amap" :disabled="!hasAmap">{{ $t("device.trajectory.provider.amap") }}</el-radio-button>
+            <el-radio-button label="maptiler" :disabled="!hasMaptiler">{{ $t("device.trajectory.provider.maptiler") }}</el-radio-button>
           </el-radio-group>
           <el-date-picker
             v-model="range"
@@ -99,6 +100,9 @@
           <el-empty v-if="!currentDevice" description="请先选择左侧设备" :image-size="84" />
           <el-empty v-else-if="!points.length" description="当前范围暂无轨迹" :image-size="84" />
           <div v-show="currentDevice && points.length" ref="map" class="map"></div>
+          <div v-show="currentDevice && points.length" class="trajectory-map-disclaimer">
+            {{ $t("device.trajectory.message.disclaimer") }}
+          </div>
         </div>
       </section>
 
@@ -445,6 +449,21 @@ export default {
 .map-error { margin: 10px 12px 0; }
 .map-shell { position: relative; min-height: 520px; margin: 10px 12px 12px; border: 1px solid #ebeef5; border-radius: 10px; background: #f7f9fc; overflow: hidden; }
 .map { position: absolute; inset: 0; width: 100%; height: 100%; }
+.trajectory-map-disclaimer {
+  position: absolute;
+  right: 10px;
+  bottom: 34px;
+  z-index: 1200;
+  pointer-events: none;
+  font-size: 11px;
+  line-height: 1.2;
+  color: rgba(31, 45, 61, 0.72);
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(220, 227, 236, 0.9);
+  border-radius: 10px;
+  padding: 4px 8px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
+}
 .detail-box { margin: 12px; }
 .summary { margin: 0 12px 12px; font-size: 12px; color: #606266; line-height: 1.6; background: #fafcff; border: 1px solid #e8edf3; border-radius: 8px; padding: 8px 10px; }
 .right :deep(.el-table) { margin: 0 12px 12px; }