diff --git a/src/lang/device-flow-messages.js b/src/lang/device-flow-messages.js
index 92a332f..8e3698e 100644
--- a/src/lang/device-flow-messages.js
+++ b/src/lang/device-flow-messages.js
@@ -44,10 +44,50 @@ const deviceFlowMessages = {
           pointCount: "已展示轨迹点",
           totalLimit: "共 {total} 条，当前仅展示最近 {count} 条",
         },
+        page: {
+          title: {
+            deviceList: "设备列表",
+            map: "轨迹地图",
+            detail: "轨迹详情",
+          },
+          placeholder: {
+            sn: "请输入序列号",
+            alias: "请输入名称",
+            remark: "请输入备注",
+            activationStatus:"请输入设备状态"
+          },
+          button: {
+            search: "搜索",
+            reset: "重置",
+            queryTrack: "查询轨迹",
+          },
+          empty: {
+            deviceList: "暂无设备",
+            selectFromList: "请先选择左侧设备",
+            selectDevice: "请选择设备",
+          },
+          status: {
+            enabled: "启用",
+            disabled: "禁用",
+          },
+          list: {
+            sn: "SN",
+            updateTime: "更新时间",
+            remark: "备注",
+          },
+          detail: {
+            device: "设备",
+            status: "状态",
+            latestAddress: "最新地址",
+            latestTime: "最新时间",
+          },
+          summary: "轨迹点数：{count} | 开始：{start} | 结束：{end}",
+        },
         filter: {
           locationTime: "位置时间",
           startPlaceholder: "开始时间",
           endPlaceholder: "结束时间",
+
         },
         tabs: {
           map: "地图轨迹",
@@ -134,6 +174,44 @@ const deviceFlowMessages = {
           pointCount: "Displayed Points",
           totalLimit: "Total {total}, currently showing the latest {count}",
         },
+        page: {
+          title: {
+            deviceList: "Device List",
+            map: "Trajectory Map",
+            detail: "Trajectory Details",
+          },
+          placeholder: {
+            sn: "Enter serial no.",
+            alias: "Enter name",
+            remark: "Enter remark",
+          },
+          button: {
+            search: "Search",
+            reset: "Reset",
+            queryTrack: "Query Trajectory",
+          },
+          empty: {
+            deviceList: "No devices",
+            selectFromList: "Please select a device from the left list",
+            selectDevice: "Please select a device",
+          },
+          status: {
+            enabled: "Enabled",
+            disabled: "Disabled",
+          },
+          list: {
+            sn: "SN",
+            updateTime: "Updated Time",
+            remark: "Remark",
+          },
+          detail: {
+            device: "Device",
+            status: "Status",
+            latestAddress: "Latest Address",
+            latestTime: "Latest Time",
+          },
+          summary: "Trajectory points: {count} | Start: {start} | End: {end}",
+        },
         filter: {
           locationTime: "Location Time",
           startPlaceholder: "Start Time",
@@ -224,6 +302,44 @@ const deviceFlowMessages = {
           pointCount: "Points affiches",
           totalLimit: "Total {total}, seuls les {count} plus recents sont affiches",
         },
+        page: {
+          title: {
+            deviceList: "Liste des appareils",
+            map: "Carte de trajectoire",
+            detail: "Details de trajectoire",
+          },
+          placeholder: {
+            sn: "Saisir le numero de serie",
+            alias: "Saisir le nom",
+            remark: "Saisir la remarque",
+          },
+          button: {
+            search: "Rechercher",
+            reset: "Reinitialiser",
+            queryTrack: "Rechercher trajectoire",
+          },
+          empty: {
+            deviceList: "Aucun appareil",
+            selectFromList: "Veuillez d'abord selectionner un appareil a gauche",
+            selectDevice: "Veuillez selectionner un appareil",
+          },
+          status: {
+            enabled: "Active",
+            disabled: "Desactive",
+          },
+          list: {
+            sn: "SN",
+            updateTime: "Heure de mise a jour",
+            remark: "Remarque",
+          },
+          detail: {
+            device: "Appareil",
+            status: "Statut",
+            latestAddress: "Derniere adresse",
+            latestTime: "Derniere heure",
+          },
+          summary: "Points de trajectoire : {count} | Debut : {start} | Fin : {end}",
+        },
         filter: {
           locationTime: "Heure de position",
           startPlaceholder: "Heure de debut",
@@ -314,6 +430,44 @@ const deviceFlowMessages = {
           pointCount: "Puntos mostrados",
           totalLimit: "Total {total}, actualmente solo se muestran los ultimos {count}",
         },
+        page: {
+          title: {
+            deviceList: "Lista de dispositivos",
+            map: "Mapa de trayectoria",
+            detail: "Detalle de trayectoria",
+          },
+          placeholder: {
+            sn: "Ingrese el numero de serie",
+            alias: "Ingrese el nombre",
+            remark: "Ingrese la observacion",
+          },
+          button: {
+            search: "Buscar",
+            reset: "Restablecer",
+            queryTrack: "Consultar trayectoria",
+          },
+          empty: {
+            deviceList: "No hay dispositivos",
+            selectFromList: "Seleccione primero un dispositivo de la lista izquierda",
+            selectDevice: "Seleccione un dispositivo",
+          },
+          status: {
+            enabled: "Habilitado",
+            disabled: "Deshabilitado",
+          },
+          list: {
+            sn: "SN",
+            updateTime: "Hora de actualizacion",
+            remark: "Observacion",
+          },
+          detail: {
+            device: "Dispositivo",
+            status: "Estado",
+            latestAddress: "Ultima direccion",
+            latestTime: "Ultima hora",
+          },
+          summary: "Puntos de trayectoria: {count} | Inicio: {start} | Fin: {end}",
+        },
         filter: {
           locationTime: "Hora de ubicacion",
           startPlaceholder: "Hora de inicio",
@@ -404,6 +558,44 @@ const deviceFlowMessages = {
           pointCount: "Pontos exibidos",
           totalLimit: "Total {total}, atualmente sao exibidos apenas os ultimos {count}",
         },
+        page: {
+          title: {
+            deviceList: "Lista de dispositivos",
+            map: "Mapa de trajetoria",
+            detail: "Detalhes da trajetoria",
+          },
+          placeholder: {
+            sn: "Digite o numero de serie",
+            alias: "Digite o nome",
+            remark: "Digite a observacao",
+          },
+          button: {
+            search: "Pesquisar",
+            reset: "Redefinir",
+            queryTrack: "Consultar trajetoria",
+          },
+          empty: {
+            deviceList: "Nenhum dispositivo",
+            selectFromList: "Selecione primeiro um dispositivo na lista da esquerda",
+            selectDevice: "Selecione um dispositivo",
+          },
+          status: {
+            enabled: "Ativado",
+            disabled: "Desativado",
+          },
+          list: {
+            sn: "SN",
+            updateTime: "Horario de atualizacao",
+            remark: "Observacao",
+          },
+          detail: {
+            device: "Dispositivo",
+            status: "Status",
+            latestAddress: "Ultimo endereco",
+            latestTime: "Ultimo horario",
+          },
+          summary: "Pontos da trajetoria: {count} | Inicio: {start} | Fim: {end}",
+        },
         filter: {
           locationTime: "Horario da posicao",
           startPlaceholder: "Horario inicial",
diff --git a/src/views/device/device/index.vue b/src/views/device/device/index.vue
index 995e514..465b8f5 100644
--- a/src/views/device/device/index.vue
+++ b/src/views/device/device/index.vue
@@ -124,7 +124,7 @@
                 </el-tag>
             </template>
         </el-table-column>
-        <el-table-column :label="$t('device.table.activationStatusTime')" align="center" min-width="170">
+        <el-table-column :label="$t('device.table.activationStatusTime')" align="center" min-width="100">
             <template slot-scope="scope">
                 <span>{{ formatActivationStatusTime(scope.row) }}</span>
             </template>
diff --git a/src/views/device/device/trajectory/index.vue b/src/views/device/device/trajectory/index.vue
index 34a21eb..7f55660 100644
--- a/src/views/device/device/trajectory/index.vue
+++ b/src/views/device/device/trajectory/index.vue
@@ -1,491 +1,777 @@
-<template>
-  <div class="app-container trajectory-page">
-    <div class="trajectory-layout">
-      <section class="panel left">
-        <div class="panel-title">设备列表</div>
-
-        <el-form :model="query" label-position="top" class="query-form" @submit.native.prevent>
-          <el-form-item label="序列号">
-            <el-input
-              v-model="query.sn"
-              size="small"
-              clearable
-              placeholder="请输入序列号"
-              @keyup.enter.native="searchDevices"
-            />
-          </el-form-item>
-          <el-form-item label="名称">
-            <el-input
-              v-model="query.alias"
-              size="small"
-              clearable
-              placeholder="请输入名称"
-              @keyup.enter.native="searchDevices"
-            />
-          </el-form-item>
-          <el-form-item label="备注">
-            <el-input
-              v-model="query.remark"
-              size="small"
-              clearable
-              placeholder="请输入备注"
-              @keyup.enter.native="searchDevices"
-            />
-          </el-form-item>
-          <div class="query-actions">
-            <el-button type="primary" size="mini" @click="searchDevices">搜索</el-button>
-            <el-button size="mini" @click="resetDevices">重置</el-button>
-          </div>
-        </el-form>
-
-        <div class="device-list" v-loading="loadingDevices">
-          <el-empty v-if="!loadingDevices && !devices.length" description="暂无设备" :image-size="66" />
-          <el-scrollbar v-else class="device-scroll">
-            <div
-              v-for="item in devices"
-              :key="item.id"
-              class="device-item"
-              :class="{ active: currentDevice && currentDevice.id === item.id }"
-              @click="selectDevice(item)"
-            >
-              <div class="device-item__top">
-                <span>{{ item.alias || item.sn || "-" }}</span>
-                <el-tag size="mini" :type="item.activationStatus ? 'success' : 'info'">
-                  {{ item.activationStatus ? "启用" : "禁用" }}
-                </el-tag>
-              </div>
-              <div class="device-item__line">SN：{{ item.sn || "-" }}</div>
-              <div class="device-item__line">更新时间：{{ formatTime(item.lastLocationTime) }}</div>
-              <div class="device-item__line ellipsis">备注：{{ item.remark || "-" }}</div>
+<template>
+<div class="app-container trajectory-page" ref="pageRoot">
+    <div class="trajectory-layout" :style="{ height: layoutHeight + 'px' }">
+        <section class="panel left">
+            <div class="panel-title">{{ $t("device.trajectory.page.title.deviceList") }}</div>
+
+            <el-form :model="query" class="query-form" @submit.native.prevent>
+                <el-form-item class="query-compact-item">
+                    <el-input v-model="query.sn" size="mini" clearable :placeholder="$t('device.trajectory.page.placeholder.sn')" @keyup.enter.native="searchDevices" />
+                </el-form-item>
+                <el-form-item class="query-compact-item">
+                    <el-input v-model="query.alias" size="mini" clearable :placeholder="$t('device.trajectory.page.placeholder.alias')" @keyup.enter.native="searchDevices" />
+                </el-form-item>
+                <el-form-item class="query-compact-item">
+                    <el-input v-model="query.remark" size="mini" clearable :placeholder="$t('device.trajectory.page.placeholder.remark')" @keyup.enter.native="searchDevices" />
+                </el-form-item>
+                <el-form-item class="query-compact-item query-status-item">
+                    <el-select
+                        v-model="query.activationStatus"
+                        size="mini"
+                        clearable
+                        :placeholder="$t('device.placeholder.activationStatus')"
+                        @keyup.enter.native="searchDevices"
+                    >
+                        <el-option :label="$t('device.status.all')" :value="ACTIVATION_STATUS_ALL" />
+                        <el-option :label="$t('device.status.disabled')" :value="0" />
+                        <el-option :label="$t('device.status.enabled')" :value="1" />
+                    </el-select>
+                </el-form-item>
+
+                <div class="query-actions">
+                    <el-button type="primary" size="mini" @click="searchDevices">{{ $t("device.trajectory.page.button.search") }}</el-button>
+                    <el-button size="mini" @click="resetDevices">{{ $t("device.trajectory.page.button.reset") }}</el-button>
+                </div>
+            </el-form>
+
+            <div class="device-list" v-loading="loadingDevices">
+                <el-empty v-if="!loadingDevices && !devices.length" :description="$t('device.trajectory.page.empty.deviceList')" :image-size="66" />
+                <el-scrollbar v-else class="device-scroll">
+                    <div v-for="item in devices" :key="item.id" class="device-item" :class="{ active: currentDevice && currentDevice.id === item.id }" @click="selectDevice(item)">
+                        <div class="device-item__top">
+                            <span>{{ item.alias || item.sn || "-" }}</span>
+                            <el-tag size="mini" :type="item.activationStatus ? 'success' : 'info'">
+                                {{ item.activationStatus ? $t("device.trajectory.page.status.enabled") : $t("device.trajectory.page.status.disabled") }}
+                            </el-tag>
+                        </div>
+                        <div class="device-item__line">{{ $t("device.trajectory.page.list.sn") }}: {{ item.sn || "-" }}</div>
+                        <div class="device-item__line">{{ $t("device.trajectory.page.list.updateTime") }}: {{ formatTime(item.lastLocationTime) }}</div>
+                        <div class="device-item__line ellipsis">{{ $t("device.trajectory.page.list.remark") }}: {{ item.remark || "-" }}</div>
+                    </div>
+                </el-scrollbar>
+            </div>
+
+            <div class="panel-pagination" v-show="total > 0">
+                <pagination :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" layout="prev, pager, next" :pager-count="5" :auto-scroll="false" @pagination="getDevices" />
+            </div>
+        </section>
+
+        <section class="panel center">
+            <div class="panel-title">{{ $t("device.trajectory.page.title.map") }}</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">{{ $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" size="small" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :start-placeholder="$t('device.trajectory.filter.startPlaceholder')" :end-placeholder="$t('device.trajectory.filter.endPlaceholder')" :clearable="false" class="range" />
+                <el-button type="primary" size="mini" :loading="loadingTrack" @click="loadTrack">{{ $t("device.trajectory.page.button.queryTrack") }}</el-button>
+            </div>
+            <el-alert v-if="mapError" :title="mapError" type="warning" :closable="false" show-icon class="map-error" />
+            <div class="map-shell" v-loading="loadingTrack || loadingMap">
+                <el-empty v-if="!currentDevice" :description="$t('device.trajectory.page.empty.selectFromList')" :image-size="84" />
+                <el-empty v-else-if="!points.length" :description="$t('device.trajectory.empty')" :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>
-          </el-scrollbar>
-        </div>
-
-        <div class="panel-pagination" v-show="total > 0">
-          <pagination
-            :total="total"
-            :page.sync="query.pageNum"
-            :limit.sync="query.pageSize"
-            layout="prev, pager, next"
-            :pager-count="5"
-            :auto-scroll="false"
-            @pagination="getDevices"
-          />
-        </div>
-      </section>
-
-      <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">{{ $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"
-            size="small"
-            type="datetimerange"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            :clearable="false"
-            class="range"
-          />
-          <el-button type="primary" size="mini" :loading="loadingTrack" @click="loadTrack">查询轨迹</el-button>
-        </div>
-        <el-alert v-if="mapError" :title="mapError" type="warning" :closable="false" show-icon class="map-error" />
-        <div class="map-shell" v-loading="loadingTrack || loadingMap">
-          <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>
-
-      <section class="panel right">
-        <div class="panel-title">轨迹详情</div>
-        <el-empty v-if="!currentDevice" description="请选择设备" :image-size="66" />
-        <template v-else>
-          <el-descriptions :column="1" size="mini" border class="detail-box">
-            <el-descriptions-item label="设备">{{ currentDevice.alias || currentDevice.sn || "-" }}</el-descriptions-item>
-            <el-descriptions-item label="SN">{{ currentDevice.sn || "-" }}</el-descriptions-item>
-            <el-descriptions-item label="状态">{{ currentDevice.activationStatus ? "启用" : "禁用" }}</el-descriptions-item>
-            <el-descriptions-item label="最新地址">{{ currentDevice.lastAddress || "-" }}</el-descriptions-item>
-            <el-descriptions-item label="最新时间">{{ formatTime(currentDevice.lastLocationTime) }}</el-descriptions-item>
-          </el-descriptions>
-          <div class="summary">轨迹点数：{{ points.length }} | 开始：{{ startTime }} | 结束：{{ endTime }}</div>
-          <el-table :data="points" border size="mini" height="460">
-            <el-table-column type="index" width="35"  />
-            <el-table-column label="位置时间" min-width="130">
-              <template slot-scope="scope">{{ pointTime(scope.row) }}</template>
-            </el-table-column>
-                     <el-table-column prop="address" label="地址" min-width="250" show-overflow-tooltip />
-            <el-table-column label="经纬度" min-width="100">
-              <template slot-scope="scope">{{ pointCoord(scope.row) }}</template>
-            </el-table-column>
-   
-          </el-table>
-        </template>
-      </section>
+        </section>
+
+        <section class="panel right">
+            <div class="panel-title">{{ $t("device.trajectory.page.title.detail") }}</div>
+            <el-empty v-if="!currentDevice" :description="$t('device.trajectory.page.empty.selectDevice')" :image-size="66" />
+            <template v-else>
+                <el-descriptions :column="1" size="mini" border class="detail-box">
+                    <el-descriptions-item :label="$t('device.trajectory.page.detail.device')">{{ currentDevice.alias || currentDevice.sn || "-" }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('device.trajectory.summary.sn')">{{ currentDevice.sn || "-" }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('device.trajectory.page.detail.status')">{{ currentDevice.activationStatus ? $t("device.trajectory.page.status.enabled") : $t("device.trajectory.page.status.disabled") }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('device.trajectory.page.detail.latestAddress')">{{ currentDevice.lastAddress || "-" }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('device.trajectory.page.detail.latestTime')">{{ formatTime(currentDevice.lastLocationTime) }}</el-descriptions-item>
+                </el-descriptions>
+                <div class="summary">{{ $t("device.trajectory.page.summary", { count: points.length, start: startTime, end: endTime }) }}</div>
+                <el-table :data="points" border size="mini" :height="detailTableHeight">
+                    <el-table-column type="index" width="35" label="#" />
+                    <el-table-column :label="$t('device.trajectory.table.time')" min-width="130">
+                        <template slot-scope="scope">{{ pointTime(scope.row) }}</template>
+                    </el-table-column>
+                    <el-table-column prop="address" :label="$t('device.trajectory.table.address')" min-width="250" show-overflow-tooltip />
+                    <el-table-column :label="$t('device.trajectory.table.coordinates')" min-width="100">
+                        <template slot-scope="scope">{{ pointCoord(scope.row) }}</template>
+                    </el-table-column>
+
+                </el-table>
+            </template>
+        </section>
     </div>
-  </div>
+</div>
 </template>
 
 <script>
-import { listTrajectoryDevices, getDeviceTrajectory, getDeviceTrajectoryMapConfig } from "@/api/device/device";
-import { loadAMap } from "@/utils/loadAMap";
-import { loadLeaflet } from "@/utils/loadLeaflet";
+import {
+    listTrajectoryDevices,
+    getDeviceTrajectory,
+    getDeviceTrajectoryMapConfig
+} from "@/api/device/device";
+import {
+    loadAMap
+} from "@/utils/loadAMap";
+import {
+    loadLeaflet
+} from "@/utils/loadLeaflet";
 
 const GOOGLE_TILE_URL = "https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}";
 const MAPTILER_URL = "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=";
+const ACTIVATION_STATUS_ALL = "__ALL__";
 
 export default {
-  name: "DeviceTrajectoryPage",
-  data() {
-    return {
-      query: { pageNum: 1, pageSize: 10, sn: null, alias: null, remark: null },
-      devices: [],
-      total: 0,
-      loadingDevices: false,
-      currentDevice: null,
-      points: [],
-      loadingTrack: false,
-      range: [],
-      provider: "google",
-      mapConfig: {},
-      loadingMap: false,
-      mapError: "",
-      map: null,
-      mapVendor: "",
-      mapsApi: null,
-      tileLayer: null,
-      overlays: []
-    };
-  },
-  computed: {
-    hasAmap() {
-      return !!(this.mapConfig && this.mapConfig.gaodeKey);
-    },
-    hasMaptiler() {
-      return !!(this.mapConfig && this.mapConfig.maptilerKey);
-    },
-    startTime() {
-      return this.points.length ? this.pointTime(this.points[this.points.length - 1]) : "-";
+    name: "DeviceTrajectoryPage",
+    data() {
+        return {
+            query: {
+                pageNum: 1,
+                pageSize: 10,
+                sn: null,
+                alias: null,
+                remark: null,
+                activationStatus: 1
+            },
+            devices: [],
+            total: 0,
+            loadingDevices: false,
+            currentDevice: null,
+            points: [],
+            loadingTrack: false,
+            range: [],
+            provider: "google",
+            mapConfig: {},
+            loadingMap: false,
+            mapError: "",
+            map: null,
+            mapVendor: "",
+            mapsApi: null,
+            tileLayer: null,
+            overlays: [],
+            availableHeight: 760
+        };
     },
-    endTime() {
-      return this.points.length ? this.pointTime(this.points[0]) : "-";
-    }
-  },
-  async created() {
-    this.initRange();
-    await this.fetchMapConfig();
-    await this.getDevices();
-  },
-  beforeDestroy() {
-    this.destroyMap();
-  },
-  methods: {
-    initRange() {
-      const now = new Date();
-      const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
-      const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
-      const format = (date) => this.parseTime(date, "{y}-{m}-{d} {h}:{i}:{s}");
-      this.range = [format(start), format(end)];
-    },
-    async fetchMapConfig() {
-      try {
-        const res = await getDeviceTrajectoryMapConfig();
-        this.mapConfig = (res && res.data) || {};
-        this.provider = "google";
-      } catch (e) {
-        this.mapConfig = {};
-      }
-    },
-    async getDevices() {
-      this.loadingDevices = true;
-      try {
-        const res = await listTrajectoryDevices(this.query);
-        const data = (res && res.data) || res || {};
-        this.devices = Array.isArray(data.list) ? data.list : Array.isArray(data.rows) ? data.rows : [];
-        this.total = Number(data.total || 0);
-        if (this.devices.length && (!this.currentDevice || !this.devices.find((x) => x.id === this.currentDevice.id))) {
-          await this.selectDevice(this.devices[0]);
+    computed: {
+        hasAmap() {
+            return !!(this.mapConfig && this.mapConfig.gaodeKey);
+        },
+        hasMaptiler() {
+            return !!(this.mapConfig && this.mapConfig.maptilerKey);
+        },
+        startTime() {
+            return this.points.length ? this.pointTime(this.points[this.points.length - 1]) : "-";
+        },
+        endTime() {
+            return this.points.length ? this.pointTime(this.points[0]) : "-";
+        },
+        layoutHeight() {
+            return Math.max(640, this.availableHeight);
+        },
+        detailTableHeight() {
+            return Math.max(360, this.layoutHeight - 300);
         }
-      } finally {
-        this.loadingDevices = false;
-      }
-    },
-    searchDevices() {
-      this.query.pageNum = 1;
-      this.getDevices();
     },
-    resetDevices() {
-      this.query = { pageNum: 1, pageSize: 10, sn: null, alias: null, remark: null };
-      this.getDevices();
+    async created() {
+        this.initRange();
+        await this.fetchMapConfig();
+        await this.getDevices();
     },
-    async selectDevice(item) {
-      this.currentDevice = item;
-      await this.loadTrack();
+    mounted() {
+        this.bindViewportResize();
     },
-    async loadTrack() {
-      if (!this.currentDevice) return;
-      this.loadingTrack = true;
-      this.mapError = "";
-      try {
-        const res = await getDeviceTrajectory(this.currentDevice.id, {
-          startLocationTime: this.range[0],
-          endLocationTime: this.range[1]
-        });
-        const source = Array.isArray(res && res.data) ? res.data : [];
-        this.points = source.map((point) => ({
-          ...point,
-          latNum: this.norm(point.lat, "lat"),
-          lngNum: this.norm(point.lng, "lng")
-        }));
-        await this.renderMap();
-      } catch (e) {
-        this.points = [];
-        this.mapError = (e && e.message) || "轨迹加载失败";
-        this.clearOverlays();
-      } finally {
-        this.loadingTrack = false;
-      }
+    beforeDestroy() {
+        this.unbindViewportResize();
+        this.destroyMap();
     },
-    async renderMap() {
-      if (!this.points.length) {
-        this.clearOverlays();
-        return;
-      }
-      if (this.provider === "amap") {
-        await this.renderAmap();
-        return;
-      }
-      await this.renderLeaflet(this.provider === "maptiler");
-    },
-    async renderLeaflet(useMaptiler) {
-      this.loadingMap = true;
-      try {
-        const L = await loadLeaflet();
-        if (!this.map || this.mapVendor !== "leaflet") {
-          this.destroyMap();
-          this.map = L.map(this.$refs.map, { center: [31.2304, 121.4737], zoom: 5, zoomControl: true });
-          this.mapVendor = "leaflet";
-          this.mapsApi = L;
-        }
-        this.clearOverlays();
-        if (this.tileLayer) this.map.removeLayer(this.tileLayer);
-
-        const tileUrl = useMaptiler ? MAPTILER_URL + encodeURIComponent(this.mapConfig.maptilerKey || "") : GOOGLE_TILE_URL;
-        this.tileLayer = L.tileLayer(tileUrl, { maxZoom: 18, detectRetina: false, tileSize: 256 });
-        this.tileLayer.addTo(this.map);
-
-        const validPoints = this.points.filter((point) => point.latNum !== null && point.lngNum !== null);
-        const path = validPoints.map((point) => [point.latNum, point.lngNum]);
-        if (!path.length) return;
-
-        const startPoint = validPoints[validPoints.length - 1];
-        const endPoint = validPoints[0];
-        const startTimeText = this.pointTime(startPoint);
-        const endTimeText = this.pointTime(endPoint);
-
-        const line = L.polyline(path, { color: "#1a73e8", weight: 4 }).addTo(this.map);
-        const startMarker = L.marker([startPoint.latNum, startPoint.lngNum])
-          .addTo(this.map)
-          .bindPopup(`起点<br/>${startTimeText}`)
-          .bindTooltip(`起点 ${startTimeText}`, {
-            permanent: true,
-            direction: "top",
-            offset: [0, -12],
-            className: "trajectory-point-tooltip"
-          });
-        const endMarker = L.marker([endPoint.latNum, endPoint.lngNum])
-          .addTo(this.map)
-          .bindPopup(`终点<br/>${endTimeText}`)
-          .bindTooltip(`终点 ${endTimeText}`, {
-            permanent: true,
-            direction: "top",
-            offset: [0, -12],
-            className: "trajectory-point-tooltip"
-          });
-
-        this.overlays = [line, startMarker, endMarker];
-        this.map.fitBounds(L.latLngBounds(path), { padding: [30, 30], maxZoom: 16 });
-        this.map.invalidateSize(true);
-      } catch (e) {
-        this.mapError = (e && e.message) || "地图加载失败";
-      } finally {
-        this.loadingMap = false;
-      }
-    },
-    async renderAmap() {
-      this.loadingMap = true;
-      try {
-        if (!this.hasAmap) throw new Error("当前企业未配置高德地图 Key");
-        const AMap = await loadAMap({
-          key: this.mapConfig.gaodeKey,
-          securityJsCode: this.mapConfig.gaodeSecurityKey || "",
-          plugins: ["AMap.Scale"]
-        });
-        if (!this.map || this.mapVendor !== "amap") {
-          this.destroyMap();
-          this.map = new AMap.Map(this.$refs.map, { center: [121.4737, 31.2304], zoom: 5, resizeEnable: true });
-          this.mapVendor = "amap";
-          this.mapsApi = AMap;
+    methods: {
+        bindViewportResize() {
+            this.updateViewportHeight();
+            if (typeof window !== "undefined") {
+                window.addEventListener("resize", this.updateViewportHeight);
+            }
+        },
+        unbindViewportResize() {
+            if (typeof window !== "undefined") {
+                window.removeEventListener("resize", this.updateViewportHeight);
+            }
+        },
+        updateViewportHeight() {
+            if (typeof window === "undefined") return;
+            const root = this.$refs.pageRoot;
+            const rectTop = root && root.getBoundingClientRect ? root.getBoundingClientRect().top : 0;
+            const bottomGap = 12;
+            this.availableHeight = window.innerHeight - rectTop - bottomGap;
+            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();
+                }
+            });
+        },
+        initRange() {
+            const now = new Date();
+            const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
+            const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
+            const format = (date) => this.parseTime(date, "{y}-{m}-{d} {h}:{i}:{s}");
+            this.range = [format(start), format(end)];
+        },
+        async fetchMapConfig() {
+            try {
+                const res = await getDeviceTrajectoryMapConfig();
+                this.mapConfig = (res && res.data) || {};
+                this.provider = "google";
+            } catch (e) {
+                this.mapConfig = {};
+            }
+        },
+        async getDevices() {
+            this.loadingDevices = true;
+            try {
+                const res = await listTrajectoryDevices(this.buildDeviceQueryParams());
+                const data = (res && res.data) || res || {};
+                this.devices = Array.isArray(data.list) ? data.list : Array.isArray(data.rows) ? data.rows : [];
+                this.total = Number(data.total || 0);
+                if (this.devices.length && (!this.currentDevice || !this.devices.find((x) => x.id === this.currentDevice.id))) {
+                    await this.selectDevice(this.devices[0]);
+                }
+            } finally {
+                this.loadingDevices = false;
+            }
+        },
+        searchDevices() {
+            this.query.pageNum = 1;
+            this.getDevices();
+        },
+        resetDevices() {
+            this.query = {
+                pageNum: 1,
+                pageSize: 10,
+                sn: null,
+                alias: null,
+                remark: null,
+                activationStatus: 1
+            };
+            this.getDevices();
+        },
+        buildDeviceQueryParams() {
+            const requestQuery = {
+                ...this.query
+            };
+            if (
+                requestQuery.activationStatus === ACTIVATION_STATUS_ALL ||
+                requestQuery.activationStatus === undefined ||
+                requestQuery.activationStatus === null ||
+                requestQuery.activationStatus === ""
+            ) {
+                delete requestQuery.activationStatus;
+            }
+            return requestQuery;
+        },
+        async selectDevice(item) {
+            this.currentDevice = item;
+            await this.loadTrack();
+        },
+        async loadTrack() {
+            if (!this.currentDevice) return;
+            this.loadingTrack = true;
+            this.mapError = "";
+            try {
+                const res = await getDeviceTrajectory(this.currentDevice.id, {
+                    startLocationTime: this.range[0],
+                    endLocationTime: this.range[1]
+                });
+                const source = Array.isArray(res && res.data) ? res.data : [];
+                this.points = source.map((point) => ({
+                    ...point,
+                    latNum: this.norm(point.lat, "lat"),
+                    lngNum: this.norm(point.lng, "lng")
+                }));
+                await this.renderMap();
+            } catch (e) {
+                this.points = [];
+                this.mapError = (e && e.message) || this.$t("device.trajectory.message.trajectoryLoadFailed");
+                this.clearOverlays();
+            } finally {
+                this.loadingTrack = false;
+            }
+        },
+        async renderMap() {
+            if (!this.points.length) {
+                this.clearOverlays();
+                return;
+            }
+            if (this.provider === "amap") {
+                await this.renderAmap();
+                return;
+            }
+            await this.renderLeaflet(this.provider === "maptiler");
+        },
+        async renderLeaflet(useMaptiler) {
+            this.loadingMap = true;
+            try {
+                const L = await loadLeaflet();
+                if (!this.map || this.mapVendor !== "leaflet") {
+                    this.destroyMap();
+                    this.map = L.map(this.$refs.map, {
+                        center: [31.2304, 121.4737],
+                        zoom: 5,
+                        zoomControl: true
+                    });
+                    this.mapVendor = "leaflet";
+                    this.mapsApi = L;
+                }
+                this.clearOverlays();
+                if (this.tileLayer) this.map.removeLayer(this.tileLayer);
+
+                const tileUrl = useMaptiler ? MAPTILER_URL + encodeURIComponent(this.mapConfig.maptilerKey || "") : GOOGLE_TILE_URL;
+                this.tileLayer = L.tileLayer(tileUrl, {
+                    maxZoom: 18,
+                    detectRetina: false,
+                    tileSize: 256
+                });
+                this.tileLayer.addTo(this.map);
+
+                const validPoints = this.points.filter((point) => point.latNum !== null && point.lngNum !== null);
+                const path = validPoints.map((point) => [point.latNum, point.lngNum]);
+                if (!path.length) return;
+
+                const startPoint = validPoints[validPoints.length - 1];
+                const endPoint = validPoints[0];
+                const startTimeText = this.pointTime(startPoint);
+                const endTimeText = this.pointTime(endPoint);
+
+                const line = L.polyline(path, {
+                    color: "#1a73e8",
+                    weight: 4
+                }).addTo(this.map);
+                const startMarkerText = `${this.$t("device.trajectory.marker.startShort")} ${startTimeText}`;
+                const endMarkerText = `${this.$t("device.trajectory.marker.endShort")} ${endTimeText}`;
+                const startPopupText = `${this.$t("device.trajectory.message.startTime")}<br/>${startTimeText}`;
+                const endPopupText = `${this.$t("device.trajectory.message.endTime")}<br/>${endTimeText}`;
+                const startMarker = L.marker([startPoint.latNum, startPoint.lngNum])
+                    .addTo(this.map)
+                    .bindPopup(startPopupText)
+                    .bindTooltip(startMarkerText, {
+                        permanent: true,
+                        direction: "top",
+                        offset: [0, -12],
+                        className: "trajectory-point-tooltip"
+                    });
+                const endMarker = L.marker([endPoint.latNum, endPoint.lngNum])
+                    .addTo(this.map)
+                    .bindPopup(endPopupText)
+                    .bindTooltip(endMarkerText, {
+                        permanent: true,
+                        direction: "top",
+                        offset: [0, -12],
+                        className: "trajectory-point-tooltip"
+                    });
+
+                this.overlays = [line, startMarker, endMarker];
+                this.map.fitBounds(L.latLngBounds(path), {
+                    padding: [30, 30],
+                    maxZoom: 16
+                });
+                this.map.invalidateSize(true);
+            } catch (e) {
+                this.mapError = (e && e.message) || this.$t("device.trajectory.message.googleLoadFailed");
+            } finally {
+                this.loadingMap = false;
+            }
+        },
+        async renderAmap() {
+            this.loadingMap = true;
+            try {
+                if (!this.hasAmap) throw new Error(this.$t("device.trajectory.message.missingAmapKey"));
+                const AMap = await loadAMap({
+                    key: this.mapConfig.gaodeKey,
+                    securityJsCode: this.mapConfig.gaodeSecurityKey || "",
+                    plugins: ["AMap.Scale"]
+                });
+                if (!this.map || this.mapVendor !== "amap") {
+                    this.destroyMap();
+                    this.map = new AMap.Map(this.$refs.map, {
+                        center: [121.4737, 31.2304],
+                        zoom: 5,
+                        resizeEnable: true
+                    });
+                    this.mapVendor = "amap";
+                    this.mapsApi = AMap;
+                }
+                this.clearOverlays();
+
+                const validPoints = this.points.filter((point) => point.latNum !== null && point.lngNum !== null);
+                const path = validPoints.map((point) => [point.lngNum, point.latNum]);
+                if (!path.length) return;
+
+                const startPoint = validPoints[validPoints.length - 1];
+                const endPoint = validPoints[0];
+                const startTimeText = this.pointTime(startPoint);
+                const endTimeText = this.pointTime(endPoint);
+
+                const startMarkerText = `${this.$t("device.trajectory.marker.startShort")} ${startTimeText}`;
+                const endMarkerText = `${this.$t("device.trajectory.marker.endShort")} ${endTimeText}`;
+                const line = new AMap.Polyline({
+                    path,
+                    strokeColor: "#1a73e8",
+                    strokeOpacity: 0.9,
+                    strokeWeight: 5,
+                    showDir: true
+                });
+                const startMarker = new AMap.Marker({
+                    position: [startPoint.lngNum, startPoint.latNum],
+                    label: {
+                        content: startMarkerText,
+                        direction: "top"
+                    }
+                });
+                const endMarker = new AMap.Marker({
+                    position: [endPoint.lngNum, endPoint.latNum],
+                    label: {
+                        content: endMarkerText,
+                        direction: "top"
+                    }
+                });
+
+                this.map.add([line, startMarker, endMarker]);
+                this.overlays = [line, startMarker, endMarker];
+                this.map.setFitView(this.overlays, false, [50, 50, 50, 50]);
+            } catch (e) {
+                this.mapError = (e && e.message) || this.$t("device.trajectory.message.amapLoadFailed");
+            } finally {
+                this.loadingMap = false;
+            }
+        },
+        clearOverlays() {
+            if (!this.map || !this.overlays.length) return;
+            if (this.mapVendor === "leaflet") {
+                this.overlays.forEach((overlay) => this.map.removeLayer(overlay));
+            } else if (this.mapVendor === "amap") {
+                this.map.remove(this.overlays);
+            }
+            this.overlays = [];
+        },
+        destroyMap() {
+            this.clearOverlays();
+            if (!this.map) return;
+            if (this.mapVendor === "leaflet") this.map.remove();
+            else if (this.mapVendor === "amap") this.map.destroy();
+            this.map = null;
+            this.mapVendor = "";
+            this.mapsApi = null;
+            this.tileLayer = null;
+        },
+        formatTime(value) {
+            return value ? this.parseTime(value, "{y}-{m}-{d} {h}:{i}:{s}") : "-";
+        },
+        pointTime(point) {
+            return this.formatTime(point.locationTime || point.reportedTime || point.createTime);
+        },
+        pointCoord(point) {
+            const lat = point && (point.lat !== undefined ? point.lat : point.latNum);
+            const lng = point && (point.lng !== undefined ? point.lng : point.lngNum);
+            return `${this.formatCoordinateValue(lat)} / ${this.formatCoordinateValue(lng)}`;
+        },
+        formatCoordinateValue(value) {
+            if (value === null || value === undefined) return "-";
+            const strValue = String(value).trim();
+            if (!strValue || strValue === "-") return "-";
+            const match = strValue.match(/^([+-]?\d+)(?:\.(\d+))?$/);
+            if (!match) return "-";
+            const integerPart = match[1];
+            const decimalPart = match[2] || "";
+            const fixedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
+            return `${integerPart}.${fixedDecimal}`;
+        },
+        norm(value, type) {
+            if (value === undefined || value === null || value === "") return null;
+            const num = Number(value);
+            if (!Number.isFinite(num)) return null;
+            const max = type === "lat" ? 90 : 180;
+            const normalized = Math.abs(num) > max ? num / 10000000 : num;
+            if (Math.abs(normalized) > max) return null;
+            return Number(normalized.toFixed(7));
         }
-        this.clearOverlays();
-
-        const validPoints = this.points.filter((point) => point.latNum !== null && point.lngNum !== null);
-        const path = validPoints.map((point) => [point.lngNum, point.latNum]);
-        if (!path.length) return;
-
-        const startPoint = validPoints[validPoints.length - 1];
-        const endPoint = validPoints[0];
-        const startTimeText = this.pointTime(startPoint);
-        const endTimeText = this.pointTime(endPoint);
-
-        const line = new AMap.Polyline({
-          path,
-          strokeColor: "#1a73e8",
-          strokeOpacity: 0.9,
-          strokeWeight: 5,
-          showDir: true
-        });
-        const startMarker = new AMap.Marker({
-          position: [startPoint.lngNum, startPoint.latNum],
-          label: { content: `起点 ${startTimeText}`, direction: "top" }
-        });
-        const endMarker = new AMap.Marker({
-          position: [endPoint.lngNum, endPoint.latNum],
-          label: { content: `终点 ${endTimeText}`, direction: "top" }
-        });
-
-        this.map.add([line, startMarker, endMarker]);
-        this.overlays = [line, startMarker, endMarker];
-        this.map.setFitView(this.overlays, false, [50, 50, 50, 50]);
-      } catch (e) {
-        this.mapError = (e && e.message) || "高德地图加载失败";
-      } finally {
-        this.loadingMap = false;
-      }
-    },
-    clearOverlays() {
-      if (!this.map || !this.overlays.length) return;
-      if (this.mapVendor === "leaflet") {
-        this.overlays.forEach((overlay) => this.map.removeLayer(overlay));
-      } else if (this.mapVendor === "amap") {
-        this.map.remove(this.overlays);
-      }
-      this.overlays = [];
-    },
-    destroyMap() {
-      this.clearOverlays();
-      if (!this.map) return;
-      if (this.mapVendor === "leaflet") this.map.remove();
-      else if (this.mapVendor === "amap") this.map.destroy();
-      this.map = null;
-      this.mapVendor = "";
-      this.mapsApi = null;
-      this.tileLayer = null;
-    },
-    formatTime(value) {
-      return value ? this.parseTime(value, "{y}-{m}-{d} {h}:{i}:{s}") : "-";
-    },
-    pointTime(point) {
-      return this.formatTime(point.locationTime || point.reportedTime || point.createTime);
-    },
-    pointCoord(point) {
-      const lat = point && (point.lat !== undefined ? point.lat : point.latNum);
-      const lng = point && (point.lng !== undefined ? point.lng : point.lngNum);
-      return `${this.formatCoordinateValue(lat)} / ${this.formatCoordinateValue(lng)}`;
-    },
-    formatCoordinateValue(value) {
-      if (value === null || value === undefined) return "-";
-      const strValue = String(value).trim();
-      if (!strValue || strValue === "-") return "-";
-      const match = strValue.match(/^([+-]?\d+)(?:\.(\d+))?$/);
-      if (!match) return "-";
-      const integerPart = match[1];
-      const decimalPart = match[2] || "";
-      const fixedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
-      return `${integerPart}.${fixedDecimal}`;
-    },
-    norm(value, type) {
-      if (value === undefined || value === null || value === "") return null;
-      const num = Number(value);
-      if (!Number.isFinite(num)) return null;
-      const max = type === "lat" ? 90 : 180;
-      const normalized = Math.abs(num) > max ? num / 10000000 : num;
-      if (Math.abs(normalized) > max) return null;
-      return Number(normalized.toFixed(7));
     }
-  }
 };
 </script>
 
 <style scoped>
-.trajectory-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr) 380px; gap: 14px; min-height: calc(100vh - 170px); }
-.panel { background: #fff; border: 1px solid #e8edf3; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(31,45,61,.05); }
-.left { display: flex; flex-direction: column; min-height: 0; }
-.panel-title { font-size: 16px; font-weight: 600; color: #1f2d3d; padding: 14px 16px; border-bottom: 1px solid #eef2f7; background: linear-gradient(180deg,#f8fbff 0,#fff 100%); }
-.query-form { padding: 12px 14px 0; }
-.query-actions { display: flex; gap: 8px; margin-bottom: 10px; }
-.device-list { flex: 1; min-height: 240px; padding: 0 10px 10px; overflow: hidden; }
-.device-scroll { height: 100%; }
-.panel-pagination { flex: 0 0 auto; padding: 8px 10px 10px; border-top: 1px solid #eef2f7; background: #fff; }
-.panel-pagination :deep(.pagination-container) { margin-top: 0; }
-.panel-pagination :deep(.el-pagination) { display: flex; justify-content: center; }
-.device-item { border: 1px solid #eef2f7; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; transition: all .2s ease; }
-.device-item:hover { border-color: #c6e2ff; box-shadow: 0 2px 8px rgba(64,158,255,.12); }
-.device-item.active { border-color: #409eff; background: #ecf5ff; }
-.device-item__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #303133; }
-.device-item__line { font-size: 12px; line-height: 1.6; color: #606266; }
-.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eef2f7; }
-.range { width: 380px; max-width: 100%; }
-.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-layout {
+    display: grid;
+    grid-template-columns: 320px minmax(0, 1fr) 380px;
+    gap: 14px;
+    height: 760px;
+    align-items: stretch;
+}
+
+.panel {
+    background: #fff;
+    border: 1px solid #e8edf3;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(31, 45, 61, .05);
+}
+
+.left {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.center {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.right {
+    height: 100%;
+}
+
+.panel-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2d3d;
+    padding: 12px 14px;
+    border-bottom: 1px solid #eef2f7;
+    background: linear-gradient(180deg, #f8fbff 0, #fff 100%);
+}
+
+.query-form {
+    padding: 2px 10px 0;
+}
+
+.query-form .query-compact-item {
+    margin-bottom: 4px !important;
+}
+
+.query-form :deep(.el-form-item__content) {
+    line-height: 28px !important;
+}
+
+.query-form :deep(.el-input--mini .el-input__inner) {
+    height: 28px !important;
+    line-height: 28px !important;
+    padding: 0 10px;
+}
+
+.query-form :deep(.el-input--mini .el-input__icon) {
+    line-height: 28px !important;
+}
+
+.query-actions {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 2px;
+}
+
+.query-actions :deep(.el-button--mini) {
+    padding: 3px 8px;
+}
+
+.device-list {
+    flex: 1;
+    min-height: 0;
+    padding: 0 10px 10px;
+    overflow: hidden;
+}
+
+.device-scroll {
+    height: 100%;
+}
+
+.panel-pagination {
+    flex: 0 0 auto;
+    padding: 6px 10px 8px;
+    border-top: 1px solid #eef2f7;
+    background: #fff;
+}
+
+.panel-pagination :deep(.pagination-container) {
+    margin-top: 0;
+}
+
+.panel-pagination :deep(.el-pagination) {
+    display: flex;
+    justify-content: center;
+}
+
+.device-item {
+    border: 1px solid #eef2f7;
+    border-radius: 8px;
+    padding: 10px 12px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    transition: all .2s ease;
+}
+
+.device-item:hover {
+    border-color: #c6e2ff;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, .12);
+}
+
+.device-item.active {
+    border-color: #409eff;
+    background: #ecf5ff;
+}
+
+.device-item__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+}
+
+.device-item__line {
+    font-size: 12px;
+    line-height: 1.6;
+    color: #606266;
+}
+
+.ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.map-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border-bottom: 1px solid #eef2f7;
+}
+
+.range {
+    width: 380px;
+    max-width: 100%;
+}
+
+.map-error {
+    margin: 8px 12px 0;
+}
+
+.map-shell {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    margin: 8px 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; }
-:deep(.map.leaflet-container) { position: absolute; inset: 0; width: 100% !important; height: 100% !important; overflow: hidden; }
+    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;
+}
+
+:deep(.map.leaflet-container) {
+    position: absolute;
+    inset: 0;
+    width: 100% !important;
+    height: 100% !important;
+    overflow: hidden;
+}
+
 :deep(.map .leaflet-tile),
 :deep(.map .leaflet-marker-icon),
-:deep(.map .leaflet-marker-shadow) { max-width: none !important; max-height: none !important; }
+:deep(.map .leaflet-marker-shadow) {
+    max-width: none !important;
+    max-height: none !important;
+}
+
 :deep(.trajectory-point-tooltip) {
-  background: rgba(32, 45, 64, 0.9);
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-  padding: 3px 6px;
-  font-size: 12px;
-  line-height: 1.3;
-}
-:deep(.trajectory-point-tooltip:before) { border-top-color: rgba(32, 45, 64, 0.9); }
+    background: rgba(32, 45, 64, 0.9);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    padding: 3px 6px;
+    font-size: 12px;
+    line-height: 1.3;
+}
+
+:deep(.trajectory-point-tooltip:before) {
+    border-top-color: rgba(32, 45, 64, 0.9);
+}
+
 @media (max-width: 1280px) {
-  .trajectory-layout { grid-template-columns: 1fr; min-height: auto; }
-  .left { min-height: 0; }
-  .device-list { min-height: 320px; }
-  .map-shell { min-height: 460px; }
+    .trajectory-layout {
+        grid-template-columns: 1fr;
+        height: auto;
+        min-height: auto;
+    }
+
+    .left,
+    .center,
+    .right {
+        height: auto;
+        min-height: 0;
+    }
+
+    .device-list {
+        min-height: 320px;
+    }
+
+    .map-shell {
+        min-height: 460px;
+    }
 }
 </style>
+
+
+
+
+