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_box">
			<img mode="aspectFill" class="img" src="https://wanzai-1306339220.cos.ap-shanghai.myqcloud.com/excelModel/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240711164230.jpg" />
		</view>

		<canvas style="width: 750rpx; height: 480rpx" canvas-id="firstCanvas"></canvas>

		<!-- 轨迹区域 -->
		<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 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

	if (options.time) {
		datetimerangeValue.value = [options.time, options.time.slice(0, 10) + ' 23:59:59']
	} else {
		datetimerangeValue.value = [dayjs(Date.now()).format('YYYY-MM-DD') + ' 00:00:00', dayjs(Date.now()).format('YYYY-MM-DD') + ' 23:59:59']
	}

	// 获取轨迹数组数据
	getData()

	// 绘制地点
	drawAddress()

	// 绘制轨迹
	setTimeout(() => {
		drawTrack()
	}, 500)
})

// 当前学生id
const currentId = ref()
// 时间筛选框绑定数据
const datetimerangeValue = ref()

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

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

// 画布实例
const ctx = ref()

// 获取轨迹数组数据
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.reverse()

		// 获取设备宽度
		const system = uni.getSystemInfoSync()
		// 单位换算，算出1rpx = 多少px
		const w = system.windowWidth / 750

		// 处理数据
		list.value.forEach((ele) => {
			if (ele.location === '探学楼') {
				ele.x = 336 * w
				ele.y = 158 * w
			} else if (ele.location === '地下室出口' || ele.location === '地下室') {
				ele.x = 230 * w
				ele.y = 250 * w
			} else if (ele.location === '探问楼') {
				ele.x = 280 * w
				ele.y = 270 * w
			} else if (ele.location === '探理楼') {
				ele.x = 280 * w
				ele.y = 380 * w
			} else if (ele.location === '地下室入口') {
				ele.x = 344 * w
				ele.y = 356 * w
			} else if (ele.location === '探真楼') {
				ele.x = 384 * w
				ele.y = 276 * w
			} else if (ele.location === '学校大门') {
				ele.x = 370 * w
				ele.y = 396 * w
			} else if (ele.location === '消防通道') {
				ele.x = 510 * w
				ele.y = 380 * w
			} else if (ele.location === '文化连廊') {
				ele.x = 306 * w
				ele.y = 280 * w
			} else if (ele.location === '田径场') {
				ele.x = 580 * w
				ele.y = 218 * w
			}
		})
	}
}

// 时间筛选框切换时间回调
const changeTime = (e) => {
	// console.log(e)
	if (e.length) {
		getData()

		ctx.value.clearRect(0, 0, 750, 480)

		drawAddress()

		setTimeout(() => {
			drawTrack()
		}, 1000)
	}
}

// 绘制地点
const drawAddress = () => {
	ctx.value = uni.createCanvasContext('firstCanvas')

	// 获取设备宽度
	const system = uni.getSystemInfoSync()
	// 单位换算，算出1rpx = 多少px
	const w = system.windowWidth / 750

	ctx.value.beginPath()
	// 探学楼点位
	ctx.value.arc(336 * w, 158 * w, 4, 0, 2 * Math.PI)
	// 地下室出口
	ctx.value.arc(230 * w, 250 * w, 4, 0, 2 * Math.PI)
	ctx.value.setFillStyle('#409EFF')
	ctx.value.fill()

	ctx.value.beginPath()
	// 探问楼
	ctx.value.arc(280 * w, 270 * w, 4, 0, 2 * Math.PI)
	// 探理楼
	ctx.value.arc(280 * w, 380 * w, 4, 0, 2 * Math.PI)
	ctx.value.setFillStyle('#409EFF')
	ctx.value.fill()

	ctx.value.beginPath()
	// 地下室入口
	ctx.value.arc(344 * w, 356 * w, 4, 0, 2 * Math.PI)
	// 探真楼
	ctx.value.arc(384 * w, 276 * w, 4, 0, 2 * Math.PI)
	ctx.value.setFillStyle('#409EFF')
	ctx.value.fill()

	ctx.value.beginPath()
	// 学校大门
	ctx.value.arc(370 * w, 396 * w, 4, 0, 2 * Math.PI)
	// 消防通道
	ctx.value.arc(510 * w, 380 * w, 4, 0, 2 * Math.PI)
	ctx.value.setFillStyle('#409EFF')
	ctx.value.fill()

	ctx.value.beginPath()
	// 文化连廊
	ctx.value.arc(306 * w, 280 * w, 4, 0, 2 * Math.PI)
	// 田径场
	ctx.value.arc(580 * w, 218 * w, 4, 0, 2 * Math.PI)

	ctx.value.setFillStyle('#409EFF')
	ctx.value.fill()

	ctx.value.draw()
}

// 绘制轨迹
const drawTrack = () => {
	for (let i = 0; i < list.value.length; i++) {
		let a = list.value[i]?.x
		let b = list.value[i]?.y
		let c = list.value[i + 1]?.x
		let d = list.value[i + 1]?.y

		drawLine(a, b, c, d, i, list.value.length)
	}
}

// 根据点之间画线
const drawLine = (a, b, c, d, i, length) => {
	if (i == 0) {
		ctx.value.arc(a, b, 4, 0, 2 * Math.PI)
		ctx.value.setFillStyle('#fff')
		ctx.value.fill()
	}
	if (i === length - 1 && length > 1) {
		ctx.value.arc(a, b, 4, 0, 2 * Math.PI)
		ctx.value.setFillStyle('red')
		ctx.value.fill()
	}
	// 设置边框颜色
	ctx.value.setStrokeStyle('#00FEFE')

	// 把路径移动到画布中的指定点，不创建线条
	if (a && b) {
		ctx.value.moveTo(a, b)
	}
	if (c && d) {
		ctx.value.lineTo(c, d)
	}

	ctx.value.stroke()
	// 开始绘制
	ctx.value.draw(true)
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	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_box {
		position: absolute;
		top: 125rpx;
		left: 0;
		width: 750rpx;
		height: 480rpx;

		.img {
			width: 750rpx;
			height: 480rpx;
		}
	}

	// 轨迹区域样式
	.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>