时间

src/components/device/TrajectoryDialog.vue

@@ -32,6 +32,8 @@
         :start-placeholder="$t('device.trajectory.filter.startPlaceholder')"
         :end-placeholder="$t('device.trajectory.filter.endPlaceholder')"
         :clearable="false"
+        :editable="false"
+        :picker-options="locationTimePickerOptions"
         unlink-panels
         class="trajectory-filter__picker"
       />
@@ -133,6 +135,7 @@ import { getDeviceTrajectory, getDeviceTrajectoryMapConfig } from "@/api/device/
 import { loadAMap } from "@/utils/loadAMap";
 import { loadGoogleMaps } from "@/utils/loadGoogleMaps";
 import { loadLeaflet } from "@/utils/loadLeaflet";
+import { getQueryDayLimitDays } from "@/utils/queryDayLimit";
 
 // Default map centers before trajectory points load.
 const AMAP_DEFAULT_CENTER = [121.4737, 31.2304];
@@ -186,6 +189,7 @@ export default {
       mapsApi: null,
       mapConfig: null,
       locationTimeRange: [],
+      queryDayLimitDays: null,
       viewportHeight: typeof window !== "undefined" ? window.innerHeight : 900,
       dialogWrapperEl: null,
     };
@@ -220,6 +224,11 @@ export default {
     tableMaxHeight() {
       return TRAJECTORY_TABLE_HEIGHT;
     },
+    locationTimePickerOptions() {
+      return {
+        disabledDate: (time) => this.isDateOutOfQueryDayLimit(time),
+      };
+    },
   },
   beforeDestroy() {
     this.unbindViewportResize();
@@ -230,6 +239,7 @@ export default {
       this.bindViewportResize();
       this.bindDialogWrapper();
       this.activePanel = "map";
+      await this.loadQueryDayLimitConfig();
       this.initDefaultLocationTimeRange();
       if (!this.device || !this.device.id) {
         this.loadError = this.$t("device.trajectory.message.missingDevice");
@@ -258,6 +268,33 @@ export default {
       this.mapConfig = null;
       this.locationTimeRange = [];
     },
+    async loadQueryDayLimitConfig() {
+      const limitDays = await getQueryDayLimitDays();
+      this.queryDayLimitDays = Number.isFinite(limitDays) ? limitDays : null;
+    },
+    getHistoryMinTime() {
+      if (!Number.isFinite(this.queryDayLimitDays) || this.queryDayLimitDays <= 0) {
+        return null;
+      }
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), now.getDate() - this.queryDayLimitDays + 1, 0, 0, 0).getTime();
+    },
+    getTodayEndTime() {
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999).getTime();
+    },
+    isDateOutOfQueryDayLimit(time) {
+      if (!(time instanceof Date)) {
+        return false;
+      }
+      const minTime = this.getHistoryMinTime();
+      if (minTime === null) {
+        return false;
+      }
+      const current = time.getTime();
+      const endTime = this.getTodayEndTime();
+      return current < minTime || current > endTime;
+    },
     bindViewportResize() {
       this.handleViewportResize();
       if (typeof window !== "undefined") {

src/views/device/device/history/index.vue

@@ -41,6 +41,8 @@
               :start-placeholder="$t('device.trajectory.filter.startPlaceholder')"
               :end-placeholder="$t('device.trajectory.filter.endPlaceholder')"
               :clearable="true"
+              :editable="false"
+              :picker-options="rangePickerOptions"
               class="range"
             />
           </el-form-item>
@@ -107,6 +109,7 @@
 
 <script>
 import { listHistoryTrajectory, listHistoryTrajectoryDetail } from "@/api/device/deviceLocation";
+import { getQueryDayLimitDays } from "@/utils/queryDayLimit";
 
 function getDefaultQuery() {
   return {
@@ -131,6 +134,7 @@ export default {
       loadingDetail: false,
       range: [],
       availableHeight: 760,
+      queryDayLimitDays: null,
     };
   },
   computed: {
@@ -140,8 +144,14 @@ export default {
     detailTableHeight() {
       return Math.max(360, this.layoutHeight - 120);
     },
+    rangePickerOptions() {
+      return {
+        disabledDate: (time) => this.isDateOutOfQueryDayLimit(time),
+      };
+    },
   },
-  created() {
+  async created() {
+    await this.loadQueryDayLimitConfig();
     this.initRange();
     this.getList();
   },
@@ -152,6 +162,33 @@ export default {
     this.unbindViewportResize();
   },
   methods: {
+    async loadQueryDayLimitConfig() {
+      const limitDays = await getQueryDayLimitDays();
+      this.queryDayLimitDays = Number.isFinite(limitDays) ? limitDays : null;
+    },
+    getHistoryMinTime() {
+      if (!Number.isFinite(this.queryDayLimitDays) || this.queryDayLimitDays <= 0) {
+        return null;
+      }
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), now.getDate() - this.queryDayLimitDays + 1, 0, 0, 0).getTime();
+    },
+    getTodayEndTime() {
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999).getTime();
+    },
+    isDateOutOfQueryDayLimit(time) {
+      if (!(time instanceof Date)) {
+        return false;
+      }
+      const minTime = this.getHistoryMinTime();
+      if (minTime === null) {
+        return false;
+      }
+      const current = time.getTime();
+      const endTime = this.getTodayEndTime();
+      return current < minTime || current > endTime;
+    },
     initRange() {
       const now = new Date();
       const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);

src/views/device/device/trajectory/index.vue

@@ -65,7 +65,7 @@
                     <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-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" :editable="false" :picker-options="rangePickerOptions" 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" />
@@ -120,6 +120,7 @@ import {
 import {
     loadLeaflet
 } from "@/utils/loadLeaflet";
+import { getQueryDayLimitDays } from "@/utils/queryDayLimit";
 
 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=";
@@ -159,7 +160,8 @@ export default {
             mapTrajectoryPoints: [],
             leafletZoomListener: null,
             amapZoomListener: null,
-            availableHeight: 760
+            availableHeight: 760,
+            queryDayLimitDays: null
         };
     },
     computed: {
@@ -180,9 +182,15 @@ export default {
         },
         detailTableHeight() {
             return Math.max(360, this.layoutHeight - 300);
+        },
+        rangePickerOptions() {
+            return {
+                disabledDate: (time) => this.isDateOutOfQueryDayLimit(time),
+            };
         }
     },
     async created() {
+        await this.loadQueryDayLimitConfig();
         this.initRange();
         await this.fetchMapConfig();
         await this.getDevices();
@@ -195,6 +203,31 @@ export default {
         this.destroyMap();
     },
     methods: {
+        async loadQueryDayLimitConfig() {
+            const limitDays = await getQueryDayLimitDays();
+            this.queryDayLimitDays = Number.isFinite(limitDays) ? limitDays : null;
+        },
+        getHistoryMinTime() {
+            if (!Number.isFinite(this.queryDayLimitDays) || this.queryDayLimitDays <= 0) {
+                return null;
+            }
+            const now = new Date();
+            return new Date(now.getFullYear(), now.getMonth(), now.getDate() - this.queryDayLimitDays + 1, 0, 0, 0).getTime();
+        },
+        getTodayEndTime() {
+            const now = new Date();
+            return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999).getTime();
+        },
+        isDateOutOfQueryDayLimit(time) {
+            if (!(time instanceof Date)) return false;
+            const minTime = this.getHistoryMinTime();
+            if (minTime === null) {
+                return false;
+            }
+            const current = time.getTime();
+            const endTime = this.getTodayEndTime();
+            return current < minTime || current > endTime;
+        },
         bindViewportResize() {
             this.updateViewportHeight();
             if (typeof window !== "undefined") {