From 6609e507632acfcdf0fef9e4251d74d9fd707323 Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Mon, 23 Dec 2024 10:02:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=A8=E8=BF=B9=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/http.interceptor.js          |   4 +-
 pages.json                          |   9 +
 pages_admin/order/device_detail.vue |  27 +-
 pages_admin/order/order_detail.vue  |  27 +-
 pages_adminSet/bike_track.vue       | 885 ++++++++++++++++++++++++++++
 5 files changed, 948 insertions(+), 4 deletions(-)
 create mode 100644 pages_adminSet/bike_track.vue

diff --git a/common/http.interceptor.js b/common/http.interceptor.js
index 69d8b28..21a6bb2 100644
--- a/common/http.interceptor.js
+++ b/common/http.interceptor.js
@@ -5,11 +5,11 @@ const install = (Vue, vm) => {
     Vue.prototype.$u.http.setConfig({
         // baseUrl: 'http://61.174.243.28:15861',
         // baseUrl: 'http://192.168.2.46:8080',
-        baseUrl: 'https://che.chuangtewl.com/prod-api',
+        // baseUrl: 'https://che.chuangtewl.com/prod-api',
 		// 测试环境
         // baseUrl: 'https://dianche.chuantewulian.cn/prod-api',
 		// 俞山岛
-        // baseUrl: 'https://dche.ccttiot.com/prod-api',
+        baseUrl: 'https://dche.ccttiot.com/prod-api',
 		// 创特
         loadingText: '努力加载中~',  
         loadingTime: 10000,
diff --git a/pages.json b/pages.json
index ce8d971..f92fa9e 100644
--- a/pages.json
+++ b/pages.json
@@ -396,6 +396,15 @@
 						"navigationStyle": "custom",
 						"enablePullDownRefresh" : false
 					}
+				},
+				{
+					"path" : "bike_track",
+					"style" : 
+					{
+						"navigationBarTitleText" : "",
+						"navigationStyle": "custom",
+						"enablePullDownRefresh" : false
+					}
 				}
 			
 				
diff --git a/pages_admin/order/device_detail.vue b/pages_admin/order/device_detail.vue
index 216180a..14789c1 100644
--- a/pages_admin/order/device_detail.vue
+++ b/pages_admin/order/device_detail.vue
@@ -11,6 +11,10 @@
 				<cover-image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW"
 					mode=""></cover-image>
 			</cover-view>
+			<cover-view class="track" @click="toTrack">
+				<cover-image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/ufaAAtlirJYs1QwJF25P"
+					mode=""></cover-image>
+			</cover-view>
 		</map>
 
 
@@ -458,6 +462,11 @@
 
 		},
 		methods: {
+			toTrack(){
+				uni.navigateTo({
+					url:'/pages_adminSet/bike_track?sn='+this.deviceInfos.sn+'&type=1'
+				})
+			},
 			changeShwoList(){
 				console.log('diaoyongle ');
 				this.showModelList=true
@@ -2046,7 +2055,23 @@
 			position: relative;
 			width: 750rpx;
 			height: 752rpx;
-
+			.track {
+				position: absolute;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				left: 30rpx;
+				bottom: 40rpx;
+				// background-color: #fff;
+				border-radius: 50%;
+				width: 82rpx;
+				height: 82rpx;
+				// z-index: 1;
+				.img {
+					width: 82rpx;
+					height: 82rpx;
+				}
+			}
 			.park {
 				position: absolute;
 				display: flex;
diff --git a/pages_admin/order/order_detail.vue b/pages_admin/order/order_detail.vue
index a3f92ce..38d21b0 100644
--- a/pages_admin/order/order_detail.vue
+++ b/pages_admin/order/order_detail.vue
@@ -8,6 +8,10 @@
 				<cover-image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW"
 					mode=""></cover-image>
 			</cover-view>
+			<cover-view class="track" @click="toTrack">
+				<cover-image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/ufaAAtlirJYs1QwJF25P"
+					mode=""></cover-image>
+			</cover-view>
 		</map>
 		<view class="info_card">
 			<view class="info_tit">
@@ -614,6 +618,11 @@
 
 		},
 		methods: {
+			toTrack(){
+				uni.navigateTo({
+					url:'/pages_adminSet/bike_track?sn='+this.orderInfo.sn+'&type=2'+'&startTime='+this.orderInfo.unlockTime+'&endTime='+this.orderInfo.returnTime
+				})
+			},
 			backpass() {
 				this.showload = true
 				uni.showLoading({
@@ -1653,7 +1662,23 @@
 			position: relative;
 			width: 750rpx;
 			height: 752rpx;
-
+			.track {
+				position: absolute;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				left: 30rpx;
+				bottom: 40rpx;
+				// background-color: #fff;
+				border-radius: 50%;
+				width: 82rpx;
+				height: 82rpx;
+				// z-index: 1;
+				.img {
+					width: 82rpx;
+					height: 82rpx;
+				}
+			}
 			.park {
 				position: absolute;
 				display: flex;
diff --git a/pages_adminSet/bike_track.vue b/pages_adminSet/bike_track.vue
new file mode 100644
index 0000000..b81d06b
--- /dev/null
+++ b/pages_adminSet/bike_track.vue
@@ -0,0 +1,885 @@
+<template>
+	<view class="page">
+		<u-navbar title="轨迹" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='45'>
+		</u-navbar>
+
+		<!-- 地图容器 -->
+		<view class="map-container">
+			<map id="map" class="map" :latitude="latitude" :longitude="longitude" :polyline="currentPolyline"
+				:markers="markers" :scale="17" :polygons="polygon">
+				<cover-view class="park" @click="toggleIconAndCallout">
+					<cover-image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW"
+						mode=""></cover-image>
+				</cover-view>
+			</map>
+		</view>
+
+		<!-- 轨迹信息面板 -->
+		<view class="track-panel">
+			<!-- 时间范围选择 -->
+			<view class="time-range" v-if="type == 1">
+				<view class="time-picker" @click="time1 = true">
+					<text>{{ startTime }}</text>
+					<u-icon name="arrow-down" size="14" color="#666"></u-icon>
+				</view>
+				<text class="separator">至</text>
+				<view class="time-picker" @click="time2 = true">
+					<text>{{ endTime }}</text>
+					<u-icon name="arrow-down" size="14" color="#666"></u-icon>
+				</view>
+			</view>
+
+			<!-- 快捷时间选择器 -->
+			<view class="time-selector" v-if="type == 1">
+				<view class="time-btn" v-for="(item, index) in timeOptions" :key="index"
+					:class="{ active: activeTime === item.value }" @tap="selectTime(item.value)">
+					{{ item.label }}
+				</view>
+			</view>
+
+			<!-- 设备信息 -->
+			<view class="device-info">
+				<view class="device-item">
+					<text class="device-number">{{ deviceNumber }}</text>
+					<!-- <text class="device-type">· 小程序</text> -->
+				</view>
+				<view class="device-item">
+					<text class="label">速度：</text>
+					<text class="value">{{ currentSpeed }}km/h</text>
+				</view>
+				<view class="device-item">
+					<text class="label">电压：</text>
+					<text class="value">{{ voltage }}V</text>
+				</view>
+				<view class="device-item">
+					<text class="label">定位：</text>
+					<text class="value">{{ location }}</text>
+				</view>
+			</view>
+
+			<!-- 轨迹回放控制面板 -->
+			<view class="playback-panel">
+				<view class="playback-controls">
+					<!-- 进度条行 -->
+					<view class="progress-row">
+						<slider class="progress-slider" :value="currentProgress" :min="0" :max="trackPoints.length - 1"
+							:step="1" @change="onSliderChange" @changing="onSliderChanging" />
+					</view>
+
+					<!-- 控制按钮行 -->
+					<view class="control-row">
+						<view class="left-controls">
+							<view class="play-btn" @tap="togglePlay">
+								<text>{{ isPlaying ? '暂停' : '播放' }}</text>
+							</view>
+
+							<view class="speed-control">
+								<text class="speed-label">{{ playbackSpeed }}x</text>
+								<view class="speed-buttons">
+									<text @tap="changeSpeed('down')" class="speed-btn">-</text>
+									<text @tap="changeSpeed('up')" class="speed-btn">+</text>
+								</view>
+							</view>
+						</view>
+
+						<view class="point-info">
+							<text>{{ currentPointTime }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 时间选择器组件 -->
+			<u-picker mode="time" v-model="time1" :params="params" :default-time="startTime" @confirm="confirm1"
+				:start-year="startYear" :end-year="endYear" title="选择开始时间"></u-picker>
+
+			<u-picker mode="time" v-model="time2" :params="params" :default-time="endTime" @confirm="confirm2"
+				:start-year="startYear" :end-year="endYear" title="选择结束时间"></u-picker>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			bgc: {
+				backgroundColor: "#fff",
+			},
+			latitude: 39.909,
+			longitude: 116.397,
+			currentPolyline: [], // 当前显示的轨迹线
+			polygon: [], // 用于存储区域多边形
+			markers: [],
+			activeTime: '3',
+			deviceNumber: '',
+			speed: '0.00',
+			voltage: '0.000',
+			location: '',
+
+			// 区域和停车场相关数据
+			parkingList: [],
+			showIconAndCallout: false,
+			areaId: '',
+
+			// 轨迹回放相关数据
+			trackPoints: [], // 存储轨迹点数据
+			currentProgress: 0, // 当前进度
+			isPlaying: false, // 是否正在播放
+			playbackTimer: null, // 回放定时器
+			currentPointTime: '', // 当前点的时间
+			playbackSpeed: 1, // 播放速度倍数
+			speedOptions: [0.5, 1, 2, 4, 8], // 可选的播放速度
+			currentSpeedIndex: 1, // 当前速度索引
+			currentSpeed: '0.00', // 当前估算速度
+			playbackInterval: 1000, // 播放间隔（毫秒）
+
+			// 时间选择相关
+			time1: false,
+			time2: false,
+			params: {
+				year: true,
+				month: true,
+				day: true,
+				hour: true,
+				minute: true,
+				second: false
+			},
+			startYear: 2022,
+			endYear: new Date().getFullYear(),
+			startTime: '',
+			endTime: '',
+			sn: '',
+			timeOptions: [
+				{ label: '1小时', value: '1' },
+				{ label: '3小时', value: '3' },
+				{ label: '6小时', value: '6' },
+				{ label: '12小时', value: '12' }
+			],
+			type: ''
+		}
+	},
+
+	onLoad(e) {
+
+		this.sn = e.sn
+		this.type = e.type
+		if (e.type == 1) {
+			const now = new Date()
+			const threeHoursAgo = new Date(now - 3 * 60 * 60 * 1000)
+
+			this.startTime = this.formatDateTime(threeHoursAgo)
+			this.endTime = this.formatDateTime(now)
+		} else {
+			this.startTime = e.startTime
+			this.endTime = e.endTime
+		}
+
+
+		this.getDeviceInfo()
+		this.updateTrackData()
+	},
+
+	methods: {
+		getDeviceInfo() {
+			this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
+				if (res.code === 200) {
+					this.deviceNumber = res.data.sn
+					this.voltage = res.data.voltage
+					this.areaId = res.data.areaId
+					this.latitude = res.data.latitude
+					this.longitude = res.data.longitude
+					this.getArea()
+				}
+			})
+		},
+		getParking() {
+			let data = {
+				areaId: this.areaId
+			}
+			this.$u.get('/app/parking/list?', data).then((res) => {
+				if (res.code === 200) {
+					const type1Data = [];
+					const type2Data = [];
+					const type3Data = [];
+
+					res.rows.forEach(row => {
+						if (row.type == 1) type1Data.push(row);
+						else if (row.type == 2) type2Data.push(row);
+						else if (row.type == 3) type3Data.push(row);
+					});
+
+					const validBoundaries = type1Data.map(row => row.boundaryStr).filter(boundary =>
+						typeof boundary === 'string' && boundary.trim() !== '');
+					const polygons = this.convertBoundaryToPolygons(validBoundaries, 1);
+
+					const validBoundaries1 = type2Data.map(row => row.boundaryStr).filter(boundary =>
+						typeof boundary === 'string' && boundary.trim() !== '');
+					const polygons1 = this.convertBoundaryToPolygons(validBoundaries1, 2);
+
+					const validBoundaries2 = type3Data.map(row => row.boundaryStr).filter(boundary =>
+						typeof boundary === 'string' && boundary.trim() !== '');
+					const polygons2 = this.convertBoundaryToPolygons(validBoundaries2, 3);
+
+					this.polygon = [...this.polygon, ...polygons2, ...polygons1, ...polygons];
+					this.parkingList = res.rows;
+				}
+			}).catch(error => {
+				console.error("Error fetching parking data:", error);
+			});
+		},
+
+		// 获取区域数据
+		getArea() {
+			this.$u.get("/app/area/" + this.areaId).then((res) => {
+				if (res.code === 200) {
+					const polygons = this.convertBoundaryToPolygon(res.data.boundaryStr)
+					if (polygons) {
+						this.polygon.push(polygons)
+					}
+					this.getParking()
+				}
+			}).catch(error => {
+				console.error("Error fetching area data:", error);
+			});
+		},
+		updateTrackData() {
+			console.log(this.startTime, this.endTime)
+			const formattedStartTime = this.startTime
+			const formattedEndTime = this.endTime
+
+			this.$u.post('/appVerify/trajectoryDetails?sn=' + this.sn + '&startTime=' + formattedStartTime + '&endTime=' + formattedEndTime).then((res) => {
+				if (res.code === 200) {
+					if (!res.data || res.data.length === 0) {
+						// 使用 uni.showToast 显示无轨迹数据的提示
+						uni.showToast({
+							title: '该时间段内无轨迹数据',
+							icon: 'none',
+							duration: 2000
+						});
+						// 清空现有轨迹数据
+						this.trackPoints = [];
+						this.currentPolyline = [];
+						this.markers = [];
+						return;
+					}
+
+					this.trackPoints = res.data.map(point => ({
+						latitude: parseFloat(point.latitude),
+						longitude: parseFloat(point.longitude),
+						time: point.at,
+						status: point.status,
+						onlineStatus: point.onlineStatus,
+						remainingPower: point.bat || 0
+					}));
+
+					if (this.trackPoints.length > 0) {
+						this.currentProgress = 0;
+						this.updateMapPoint(0);
+					}
+				}
+			}).catch(error => {
+				uni.showToast({
+					title: '获取轨迹数据失败',
+					icon: 'none',
+					duration: 2000
+				});
+				console.error("Error fetching track data:", error);
+			});
+		},
+		// 转换多个边界数据为多边形
+		convertBoundaryToPolygons(boundaries, num) {
+			if (!boundaries || !boundaries.length) return [];
+
+			const colors = {
+				1: { fill: "#3A7EDB40", stroke: "#3A7EDB" },
+				2: { fill: "#FFF5D640", stroke: "#FFC107" },
+				3: { fill: "#FFE0E040", stroke: "#FF473E" }
+			};
+
+			return boundaries.map(boundary => {
+				if (!boundary) return null;
+				let coords;
+				try {
+					coords = JSON.parse(boundary);
+				} catch (error) {
+					console.error("Error parsing boundary JSON:", error);
+					return null;
+				}
+
+				if (!Array.isArray(coords)) {
+					console.error("Parsed boundary is not an array:", coords);
+					return null;
+				}
+
+				const points = coords.map(coord => ({
+					latitude: coord[1],
+					longitude: coord[0]
+				}));
+
+				return {
+					points: points,
+					fillColor: colors[num].fill,
+					strokeColor: colors[num].stroke,
+					strokeWidth: 2,
+					zIndex: 1
+				};
+			}).filter(Boolean);
+		},
+		// 切换图标和标注显示
+		toggleIconAndCallout() {
+			this.showIconAndCallout = !this.showIconAndCallout;
+			if (this.showIconAndCallout) {
+				const newMarkers = [];
+				this.parkingList.forEach(item => {
+					newMarkers.push({
+						id: parseFloat(item.parkingId),
+						latitude: parseFloat(item.latitude),
+						longitude: parseFloat(item.longitude),
+						width: 20,
+						height: 28.95,
+						iconPath: item.type == 1 ?
+							'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item.type == 2 ?
+								'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :
+								'https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
+						callout: {
+							content: item.parkingName,
+							color: '#ffffff',
+							fontSize: 14,
+							borderRadius: 10,
+							bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' : '#FF473E',
+							padding: 6,
+							display: 'ALWAYS'
+						}
+					});
+				});
+				this.markers = newMarkers;
+			} else {
+				this.markers = [];
+			}
+		},
+		// 转换边界数据为多边形
+		convertBoundaryToPolygon(boundary) {
+			if (!boundary) return null;
+
+			const points = JSON.parse(boundary).map(coord => ({
+				latitude: coord[1],
+				longitude: coord[0]
+			}));
+
+			return {
+				points: points,
+				fillColor: "#55888840",
+				strokeColor: "#22FF00",
+				strokeWidth: 2,
+				zIndex: 1
+			};
+		},
+		updateMapPoint(index) {
+			if (!this.trackPoints[index]) return;
+
+			const currentPoint = this.trackPoints[index];
+			const prevPoint = index > 0 ? this.trackPoints[index - 1] : null;
+
+			// 计算速度
+			if (prevPoint) {
+				const distance = this.calculateDistance(
+					prevPoint.latitude,
+					prevPoint.longitude,
+					currentPoint.latitude,
+					currentPoint.longitude
+				);
+				const timeGap = (new Date(currentPoint.time) - new Date(prevPoint.time)) / 1000;
+				this.currentSpeed = timeGap > 0 ? ((distance / timeGap) * 3.6).toFixed(1) : '0.00';
+			} else {
+				this.currentSpeed = '0.00';
+			}
+
+			// 更新信息显示
+			this.currentPointTime = currentPoint.time;
+			this.location = `${currentPoint.longitude}, ${currentPoint.latitude}`;
+
+			// 更新轨迹线
+			this.currentPolyline = [{
+				points: this.trackPoints.slice(0, index + 1),
+				width: 8,
+				arrowLine: true,
+				color: '#00AF99'
+			}];
+
+			// 选择图标
+			let iconPath = '';
+			let calloutColor = '#2679D1';
+			let calloutBgColor = '#D4ECFF';
+
+			switch (currentPoint.status) {
+				case '0':
+					iconPath = currentPoint.onlineStatus == '0' ?
+						'https://lxnapi.ccttiot.com/bike/img/static/uQRng4QNKA38Amk8Wgt5' :
+						'https://lxnapi.ccttiot.com/bike/img/static/uocjFo8Ar2BJVpzC2G2f';
+					calloutColor = '#ffffff';
+					calloutBgColor = '#000000';
+					break;
+				case '1':
+					iconPath = currentPoint.onlineStatus == '0' ?
+						'https://lxnapi.ccttiot.com/bike/img/static/uzhMeExOQJbMcZtrfGUV' :
+						'https://lxnapi.ccttiot.com/bike/img/static/uheL17wVZn24BwCwEztT';
+					break;
+				case '2':
+					iconPath = currentPoint.onlineStatus == '0' ?
+						'https://lxnapi.ccttiot.com/bike/img/static/uR3DQEssiK62ovhh88y8' :
+						'https://lxnapi.ccttiot.com/bike/img/static/u460R1NKWHEpHbt0U4H7';
+					break;
+				case '3':
+					iconPath = currentPoint.onlineStatus == '0' ?
+						'https://lxnapi.ccttiot.com/bike/img/static/uG13E7BpUFF44wVYC9no' :
+						'https://lxnapi.ccttiot.com/bike/img/static/uHQIdWCTmtUztl49wBKU';
+					break;
+				case '4':
+					iconPath = currentPoint.onlineStatus == '0' ?
+						'https://lxnapi.ccttiot.com/bike/img/static/uRod2zf3t9dAOYafWoWt' :
+						'https://lxnapi.ccttiot.com/bike/img/static/uZpXq3TBtM5gVgJJeImY';
+					break;
+				case '6':
+					iconPath = currentPoint.onlineStatus == '0' ?
+						'https://lxnapi.ccttiot.com/bike/img/static/uhZudZM3nEKj0tYKlho2' :
+						'https://lxnapi.ccttiot.com/bike/img/static/ujur6TezvPf4buFAqPHo';
+					break;
+				case '8':
+					iconPath = currentPoint.onlineStatus == '0' ?
+						'https://lxnapi.ccttiot.com/bike/img/static/ucBKG3ebYRAToVweJihu' :
+						'https://lxnapi.ccttiot.com/bike/img/static/uyK7Vg4Lu8xb3oNVuG2l';
+					calloutColor = '#ffffff';
+					calloutBgColor = '#000000';
+					break;
+				default:
+					iconPath = 'https://lxnapi.ccttiot.com/bike/img/static/uzhMeExOQJbMcZtrfGUV';
+			}
+
+			// 更新markers
+			this.markers = [{
+				id: 1,
+				latitude: currentPoint.latitude,
+				longitude: currentPoint.longitude,
+				width: 40,
+				height: 47,
+				iconPath: iconPath,
+				callout: {
+					content: `${currentPoint.remainingPower}% | ${this.currentSpeed}km/h`,
+					color: calloutColor,
+					fontSize: 10,
+					borderRadius: 10,
+					bgColor: calloutBgColor,
+					padding: 2,
+					display: 'ALWAYS'
+				}
+			}];
+		},
+
+		calculateDistance(lat1, lon1, lat2, lon2) {
+			const R = 6371000;
+			const φ1 = this.toRadians(lat1);
+			const φ2 = this.toRadians(lat2);
+			const Δφ = this.toRadians(lat2 - lat1);
+			const Δλ = this.toRadians(lon2 - lon1);
+
+			const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+				Math.cos(φ1) * Math.cos(φ2) *
+				Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
+			const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+			return R * c;
+		},
+
+		toRadians(degrees) {
+			return degrees * Math.PI / 180;
+		},
+
+		changeSpeed(direction) {
+			if (direction === 'up' && this.currentSpeedIndex < this.speedOptions.length - 1) {
+				this.currentSpeedIndex++;
+			} else if (direction === 'down' && this.currentSpeedIndex > 0) {
+				this.currentSpeedIndex--;
+			}
+
+			this.playbackSpeed = this.speedOptions[this.currentSpeedIndex];
+			this.playbackInterval = 1000 / this.playbackSpeed;
+
+			if (this.isPlaying) {
+				this.stopPlayback();
+				this.startPlayback();
+			}
+		},
+
+		onSliderChange(e) {
+			const index = parseInt(e.detail.value);
+			this.currentProgress = index;
+			this.updateMapPoint(index);
+		},
+
+		onSliderChanging(e) {
+			const index = parseInt(e.detail.value);
+			this.updateMapPoint(index);
+		},
+
+		togglePlay() {
+			this.isPlaying = !this.isPlaying;
+			if (this.isPlaying) {
+				this.startPlayback();
+			} else {
+				this.stopPlayback();
+			}
+		},
+
+		startPlayback() {
+			if (this.playbackTimer) return;
+
+			this.playbackTimer = setInterval(() => {
+				if (this.currentProgress >= this.trackPoints.length - 1) {
+					this.stopPlayback();
+					return;
+				}
+
+				this.currentProgress++;
+				this.updateMapPoint(this.currentProgress);
+			}, this.playbackInterval);
+		},
+
+		stopPlayback() {
+			if (this.playbackTimer) {
+				clearInterval(this.playbackTimer);
+				this.playbackTimer = null;
+			}
+			this.isPlaying = false;
+		},
+
+		formatDateTime(date) {
+			const year = date.getFullYear()
+			const month = (date.getMonth() + 1).toString().padStart(2, '0')
+			const day = date.getDate().toString().padStart(2, '0')
+			const hour = date.getHours().toString().padStart(2, '0')
+			const minute = date.getMinutes().toString().padStart(2, '0')
+			const second = '00'
+			return `${year}-${month}-${day} ${hour}:${minute}:${second}`
+		},
+
+		confirm1(e) {
+			this.activeTime=0
+			const selectedTime = new Date(e.year, e.month - 1, e.day, e.hour, e.minute)
+			this.startTime = this.formatDateTime(selectedTime)
+			this.updateTrackData()
+		},
+
+		confirm2(e) {
+			this.activeTime=0
+			const selectedTime = new Date(e.year, e.month - 1, e.day, e.hour, e.minute)
+			this.endTime = this.formatDateTime(selectedTime)
+			this.updateTrackData()
+		},
+
+		selectTime(time) {
+			this.activeTime = time
+			const hours = parseInt(time)
+			const now = new Date()
+			const startTime = new Date(now - hours * 60 * 60 * 1000)
+
+			this.startTime = this.formatDateTime(startTime)
+			this.endTime = this.formatDateTime(now)
+			this.updateTrackData()
+		}
+	}
+}
+</script>
+
+
+<style lang="scss" scoped>
+.page {
+	width: 100%;
+	height: 100vh;
+	background-color: #f5f7fa;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+.map-container {
+	width: 100%;
+	height: 45vh;
+	position: relative;
+	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+	flex-shrink: 0;
+
+	.map {
+		width: 100%;
+		height: 100%;
+	}
+
+	.park {
+		position: absolute;
+		right: 24rpx;
+		bottom: 48rpx;
+		width: 88rpx;
+		height: 88rpx;
+		z-index: 999;
+		transition: transform 0.2s ease;
+
+		&:active {
+			transform: scale(0.95);
+		}
+
+		.img {
+			width: 100%;
+			height: 100%;
+			border-radius: 16rpx;
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+		}
+	}
+}
+
+.track-panel {
+	flex: 1;
+	background: #fff;
+	border-radius: 32rpx 32rpx 0 0;
+	margin-top: -30rpx;
+	position: relative;
+	z-index: 2;
+	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
+	padding: 24rpx;
+	display: flex;
+	flex-direction: column;
+}
+
+.time-range {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 16rpx;
+	gap: 16rpx;
+
+	.time-picker {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: #f8fafc;
+		padding: 16rpx;
+		border-radius: 12rpx;
+		border: 2rpx solid #e2e8f0;
+		transition: all 0.3s ease;
+
+		&:active {
+			background: #f1f5f9;
+		}
+
+		text {
+			margin-right: 12rpx;
+			font-size: 24rpx;
+			color: #334155;
+		}
+	}
+
+	.separator {
+		padding: 0 16rpx;
+		color: #64748b;
+		font-size: 24rpx;
+	}
+}
+
+.time-selector {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 16rpx;
+	gap: 12rpx;
+
+	.time-btn {
+		flex: 1;
+		padding: 12rpx 20rpx;
+		border-radius: 32rpx;
+		font-size: 24rpx;
+		color: #64748b;
+		background: #f1f5f9;
+		transition: all 0.3s ease;
+		text-align: center;
+
+		&.active {
+			background: #3b82f6;
+			color: #fff;
+			box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
+		}
+
+		&:active {
+			transform: scale(0.98);
+		}
+	}
+}
+
+.device-info {
+	padding: 16rpx;
+	background: #f8fafc;
+	border-radius: 16rpx;
+	margin-bottom: 16rpx;
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
+
+	.device-item {
+		display: flex;
+		align-items: center;
+		margin-bottom: 12rpx;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		.device-number {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #1e293b;
+		}
+
+		.device-type {
+			font-size: 24rpx;
+			color: #64748b;
+			margin-left: 12rpx;
+		}
+
+		.label {
+			width: 100rpx;
+			font-size: 24rpx;
+			color: #64748b;
+		}
+
+		.value {
+			flex: 1;
+			font-size: 24rpx;
+			color: #334155;
+			font-weight: 500;
+		}
+	}
+}
+
+.playback-panel {
+	background: #fff;
+	border-radius: 16rpx;
+	padding: 16rpx;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+
+	.playback-controls {
+		display: flex;
+		flex-direction: column;
+		gap: 16rpx;
+
+		.progress-row {
+			padding: 0 8rpx;
+			margin-bottom: 8rpx;
+		}
+
+		.control-row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 8rpx;
+
+			.left-controls {
+				display: flex;
+				align-items: center;
+				gap: 20rpx;
+			}
+
+			.play-btn {
+				width: 72rpx;
+				height: 72rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background: #3b82f6;
+				border-radius: 50%;
+				box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
+				transition: all 0.2s ease;
+
+				&:active {
+					transform: scale(0.95);
+					box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.2);
+				}
+
+				text {
+					color: #fff;
+					font-size: 24rpx;
+					font-weight: 500;
+				}
+			}
+
+			.speed-control {
+				display: flex;
+				align-items: center;
+				background: #f8fafc;
+				padding: 8rpx 16rpx;
+				border-radius: 32rpx;
+				border: 2rpx solid #e2e8f0;
+
+				.speed-label {
+					font-size: 24rpx;
+					color: #334155;
+					font-weight: 500;
+					margin-right: 12rpx;
+					min-width: 44rpx;
+					text-align: center;
+				}
+
+				.speed-buttons {
+					display: flex;
+					align-items: center;
+					gap: 8rpx;
+
+					.speed-btn {
+						width: 60rpx;
+						height: 60rpx;
+						line-height: 60rpx;
+						text-align: center;
+						background: #fff;
+						border-radius: 50%;
+						font-size: 28rpx;
+						color: #334155;
+						font-weight: 500;
+						box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+						transition: all 0.2s ease;
+
+						&:active {
+							background: #f1f5f9;
+							transform: scale(0.95);
+						}
+					}
+				}
+			}
+
+			.point-info {
+				font-size: 24rpx;
+				color: #64748b;
+				background: #f8fafc;
+				padding: 8rpx 16rpx;
+				border-radius: 24rpx;
+			}
+		}
+	}
+}
+
+// 自定义滑块样式
+::v-deep .uni-slider {
+	margin: 0;
+}
+
+::v-deep .uni-slider-handle {
+	width: 28rpx;
+	height: 28rpx;
+	background-color: #3b82f6;
+	box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
+	transition: transform 0.2s ease;
+
+	&:active {
+		transform: scale(1.1);
+	}
+}
+
+::v-deep .uni-slider-track {
+	height: 4rpx;
+	background-color: #3b82f6;
+}
+</style>
\ No newline at end of file