wanzai_school_app/pages/track/track.vue

<template>
	<view class="container">
		<!-- 顶部筛选区域 -->
		<view class="search">
			<uni-datetime-picker v-model="datetimerangeValue" type="datetimerange" rangeSeparator="至" :clear-icon="false" @change="changeTime" />
		</view>

		<!-- 地图区域 -->
		<view class="map">
			<MapContainer />
		</view>

		<!-- 轨迹区域 -->
		<view class="track">
			<view class="track_title">全天状态</view>

			<!-- 步骤条区域 -->
			<uv-steps activeColor="#1E7DFB" direction="column" dot :current="list.length" v-if="list.length">
				<uv-steps-item v-for="item in list" :key="item.id" :customStyle="customStyle">
					<template v-slot:title>
						<view class="track_time">
							{{ item.type }}
						</view>
					</template>
					<template v-slot:desc>
						<view class="track_desc">地点：{{ item.location }}</view>
						<view class="track_desc">时间：{{ item.dateTime }}</view>
						<view class="track_desc" v-if="item.image">
							图片：
							<img class="img" mode="aspectFill" :src="item.image" @click="previewImage(item.image)" />
						</view>
					</template>
				</uv-steps-item>
			</uv-steps>

			<NoData v-else />
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import MapContainer from '@/components/MapContainer.vue'
import NoData from '@/components/noData.vue'
import { myRequest } from '@/utils/api.js'
import { previewImage } from '@/utils/previewImage.js'
import { decryptDes } from '@/utils/des.js'
import dayjs from 'dayjs'

onLoad((options) => {
	currentId.value = options.id

	datetimerangeValue.value = [dayjs(Date.now() - 24 * 3600 * 1000).format('YYYY-MM-DD hh:mm:ss'), dayjs(Date.now()).format('YYYY-MM-DD hh:mm:ss')]
	getData()
})

const currentId = ref()

const datetimerangeValue = ref()

// 学生轨迹数组
const list = ref([])

// 步骤条样式
const customStyle = {
	marginBottom: '30rpx'
}

const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartFaceDiscern/track',
		data: {
			id: currentId.value,
			startTime: datetimerangeValue.value[0],
			endTime: datetimerangeValue.value[1]
		}
	})
	// console.log(res)
	if (res.code == 200) {
		const result = JSON.parse(decryptDes(res.data))
		// console.log(result)
		list.value = result
	}
}

const changeTime = (e) => {
	// console.log(e)
	if (e.length) {
		getData()
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f1f6fe;

	// 顶部筛选区域样式
	.search {
		display: flex;
		justify-content: space-evenly;
		padding: 0 30rpx;
		margin: 30rpx 0;
		height: 65rpx;
	}
	// 地图区域样式
	.map {
		width: 750rpx;
		height: 469rpx;
	}
	// 轨迹区域样式
	.track {
		padding: 0 20rpx 20rpx 20rpx;

		.track_title {
			margin: 30rpx 0;
			font-size: 32rpx;
			font-weight: bold;
		}

		.track_time {
			font-size: 28rpx;
			font-weight: bold;
		}

		.track_desc {
			display: flex;
			margin-top: 10rpx;
			color: #808080;
			font-size: 24rpx;

			.img {
				width: 100rpx;
				height: 160rpx;
			}
		}
	}
}
</style>