mobile_h5/actMgt/pages/actManage/track.vue

<!-- 
场控
http://localhost:5173/actMgt/#/pages/actManage/track?compId=80 
https://oss-mbh5.colormaprun.com/actMgt/#/pages/actManage/track?compId=80
 -->
<template>
	<view class="body">
		<view class="content uni-column">
			<view class="uni-column top" :style="getBannerStyle()">
				<my-topbar :title="actRs.config.matchInfo.compName" @btnBackClick="btnBack"></my-topbar>
				<view class="top-content uni-row">
				</view>
			</view>

			<view class="main uni-column">
				<view class="selectBox uni-row uni-jcse">
					<view class="select">
						<e-select v-model="mapId" maxHeight="300px" :props="selectMapProps" :options="mapList"
							:search="false" :inputClick="false" :clearable="false" @getText="getESelectText"
							@change="selectMapChange"></e-select>
					</view>
					<view class="select">
						<e-select v-model="actionId" maxHeight="300px" :props="selectActionProps" :options="actionList"
							:search="false" :inputClick="false" :clearable="false" @getText="getESelectText"
							@change="selectActionChange"></e-select>
					</view>
				</view>

				<view id="map" class="map"></view>

				<view v-show="popupShow" class="popup"
					:style="{ height: popupHeight + 'px', width: popupWidth + 'px' }">
					<!-- <uni-section class="section" title="活动路线列表" type="line">
						<uni-data-picker class="actionsTree" :style="{ width: popupWidth + 'px' }" placeholder="请选择活动" popup-title="请选择活动路线" :localdata="actionsTree"
							v-model="sltActRoute" @change="onActionChange" @popupopened="onActionsTreePopupOpened" @popupclosed="onActionsTreePopupClosed"></uni-data-picker>
					</uni-section> -->

					<uni-section class="section" title="玩家列表" type="line">
						<view class="norecord" v-if="players == null || players.length == 0">暂无记录</view>
						<scroll-view :scroll-top="0" scroll-y="true" :style="{ height: popupHeight - 43 + 'px'}">
							<uni-list v-for="(item, index) in players" :key="index" :border="true" class="list">
								<uni-list-item :clickable="true" @click="onPlayerListItemClick(item)" class="list-item"
									:class="{ 
									'list-item-focus': focusPlayerId == item.id 
									}">
									<template v-slot:header>
										<!-- <image class="slot-image" src="/static/logo.png" mode="widthFix"></image> -->
										<div class="slot-image" :style="'background-color:' + getPlayerColor(item.id)">
										</div>
									</template>
									<template v-slot:body>
										<view class="slot-box">
											<view class="slot-title">
												<!-- <span class="slot-sn" :style="'background-color:' + getPlayerColor(item.id)">{{index+1}}</span> -->
												[{{index+1}}]<span class="slot-phone" @click="onPhoneClick(item.phone)">
													{{item.name}}
													<uni-icons v-if="admin" type="phone" size="14"></uni-icons>
												</span>
												打点 {{item.EffectiveNum}}/{{item.TotalControlNum}} &nbsp; 目标点
												{{item.nextControlPoint.orderNO}} &nbsp; 百味豆 {{item.sysPoint}}
											</view>
											<view class="slot-note">
												距离 {{tools.fmtDistanctKm(item.distance)}}km &nbsp; 配速
												{{tools.convertSecondsToHMS(item.pace, 2)}}
												&nbsp; Cal {{Math.round(item.Calorie/1000)}} &nbsp; | &nbsp; 心率
												{{item.lastHr}} &nbsp; 平均 {{item.avgHr}} &nbsp; 最大 {{item.maxHr}}
												<!-- &nbsp; | &nbsp;  Ck {{item.Ck}} Ei {{Math.round(item.Ei*100)/100}}-->
											</view>
										</view>
									</template>
									<!-- <template v-slot:footer>
										<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
									</template> -->
								</uni-list-item>
							</uni-list>
						</scroll-view>
					</uni-section>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import tools from '/utils/tools.js';
	import card from '/utils/card.js';
	import 'leaflet/dist/leaflet.css';
	import '/utils/map/leafletHelper.css'
	import leafletHelper from '/utils/map/leafletHelper';
	import mapHelper from '/utils/map/mapHelper';
	import {
		apiCompInfoDetail,
		apiMapList,
		apiMapDetail,
		apiActionList,
		apiActionDetail,
		apiUsersInGameDetail,
		apiUsersInGameGpsQuery,
		checkResCode
	} from '/utils/api.js';

	export default {
		data() {
			return {
				tools: tools,
				queryObj: {},
				queryString: "",
				interval: null,
				refreshTime: 300000, // 刷新时间 ms
				admin: true, // 是否场控管理员

				compId: 0, // 赛事ID
				actRs: card.actRs, // 赛事详情

				mapList: [], // 地图列表
				mapId: 0, // (当前选中的)地图ID
				mapDetail: {}, // (当前选中的)地图详情
				mapInfo: {}, // (当前选中的)地图信息 mapDetail.mapInfo
				mapUrl: null, // (当前选中的)地图图片URL
				mapConfig: "", // (当前选中的)地图图片的地理参考信息

				actionList: [], // 活动列表
				actionId: 0, // (当前选中的)活动ID
				actionDetail: {}, // (当前选中的)活动详情

				selectMapProps: {
					value: 'id',
					text: 'name',
					// disabled: 'noallowed'
				},
				selectActionProps: {
					value: 'id',
					text: 'name',
					// disabled: 'noallowed'
				},

				map: null,
				checkPoints: [],
				players: [],
				players_position: [],
				focusPlayerId: 0,
				trailTime: 0,

				popupHeight: 360,
				popupWidth: 0,
				popupType: 'bottom',
				popupShow: false,
			}
		},
		computed: {
			...mapState([
				'username', // 映射 this.username 为 store.state.username
				'userlevel',
				'token'
			]),
			...mapGetters([
				'metadata'
			]),
		},
		onLoad(query) {
			// console.log(query);
			this.queryObj = query;
			this.queryString = tools.objectToQueryString(this.queryObj);
			// console.log(queryString);
			this.compId = query["compId"] ?? 0;

			this.compInfoDetail();
			this.getMapList();
		},
		mounted() {
			console.log("mounted");
			this.$global.getWindowInfo();
			uni.$on('windowResize', this.reLoad);
			this.popupShow = this.$store.state.mapPopupShow;
			this.layoutInit()
		},
		beforeDestroy() {
			console.log("beforeDestroy")
			clearInterval(this.interval)
			leafletHelper.free()
		},
		methods: {
			getBannerStyle() {
				return card.getBannerStyle(this.actRs);
			},
			reLoad() {
				this.savePlayersData()

				var fullPath = this.$route.fullPath
				console.log("[windowResize] reLaunch: " + fullPath)
				uni.redirectTo({
					url: fullPath
				});
			},
			// 布局初始化 设置地图高度
			layoutInit() {
				this.popupWidth = this.$global.windowWidth
				/* this.windowHeight = this.$global.windowHeight
				this.windowWidth = this.$global.windowWidth
				if (this.$global.deviceOrientation == 'portrait') { // 竖屏
					this.flexDirection = 'column'
					this.mapWidth = this.$global.windowWidth
					this.mapHeight = this.$global.windowHeight
					
					this.popupHeight = this.popupHeightPortrait
					this.popupWidth = this.$global.windowWidth
				} else { // 横屏
					this.flexDirection = 'row'
					this.mapHeight = this.$global.windowHeight
					this.mapWidth = this.$global.windowWidth
					
					this.popupHeight = this.$global.windowHeight
					this.popupWidth = this.popupWidthlandscape
					// console.log("横屏 popupHeight", this.popupHeight)
				} */
			},
			popupToggle() {
				this.popupShow = !this.popupShow
				this.$store.commit('setMapPopupShow', this.popupShow)
				// this.layoutInit()
			},
			async loadMap() {
				await mapHelper.handleMapInfo(this, this.mapInfo);
				this.mapUrl = mapHelper.mapUrl;
				this.mapConfig = mapHelper.mapConfig;
			},
			async initMap() {
				const zoomNum = this.mapInfo.DefScale;
				const mapOptions = {
					zoom: zoomNum
				};
				if (this.mapUrl != undefined && this.mapUrl.length > 0) {
					// console.log("[initMap] mapUrl", this.mapUrl);
					await leafletHelper.init(this, 'map', this.mapUrl, this.mapConfig, mapOptions);
				}
			},
			async loadData() {
				await this.loadMap();

				await this.initMap();
				this.handleMapDrawRoute();
				if (this.interval != null) {
					clearInterval(this.interval);
				}

				let that = this;
				that.players = await that.getUsersInGameDetail();
				console.log('players', that.players)
				// leafletHelper.global.setPlayers(this.players)

				that.players_position = await that.usersInGameGpsQuery();
				// leafletHelper.global.setPlayersPosition(this.players_position)

				that.handleMapDrawPlayer();
				that.handleMapDrawTrail();

				this.interval = setInterval(async function() {
					that.players = await that.getUsersInGameDetail();
					that.players_position = await that.usersInGameGpsQuery();
					//// leaflet.leafletHelper.global.setPlayers(that.players);
					// leafletHelper.global.setPlayersPosition(that.players_position);
					that.handleMapDrawPlayer();
					that.handleMapDrawTrail();
				}, that.refreshTime);

				// await mapHelper.handleMapInfo(this, this.mapInfo)
				this.handleMapToggle();
			},
			handleWindowResize() {
				leafletHelper.onWindowResize()
			},
			handleMapDrawRoute() {
				// console.log("this.actionDetail.routes", this.actionDetail.routes);
				// leafletHelper.global.setCheckPoints(this.checkPoints)
				leafletHelper.global.setRoutes(this.actionDetail.routes)

				// leafletHelper.checkPoint.drawAllCheckPoints()
				// leafletHelper.checkPoint.drawPath()
				leafletHelper.route.drawAllRoutes()
				leafletHelper.route.drawAllPath()
			},
			handleMapDrawPlayer() {
				leafletHelper.global.setPlayers(this.players)
				leafletHelper.global.setPlayersPosition(this.players_position)
				leafletHelper.player.drawAllPlayers()

				leafletHelper.global.dealStaleData()
			},
			handleMapDrawTrail() {
				this.trailTime = leafletHelper.config.trailTime
				// leafletHelper.player.drawOneTrail(2, 10000)
				// leafletHelper.player.drawOneTrail(3, 10000)
				// leafletHelper.player.drawOneTrail(2, 0, false)
				leafletHelper.player.drawAllTrails(this.trailTime)
			},
			handleMapToggle() {
				// leafletHelper.checkPoint.toggle(true)
				// leafletHelper.route.toggle(true)
				// leafletHelper.player.togglePlayer(true)
				// leafletHelper.player.toggleTooltip(true)
				// leafletHelper.player.toggleTrail(true)

				leafletHelper.route.toggle(this.$store.state.mapControlRoute)
				leafletHelper.player.togglePlayer(this.$store.state.mapControlPlayer)
				leafletHelper.player.toggleTooltip(this.$store.state.mapControlTooltip)
				leafletHelper.player.toggleTrail(this.$store.state.mapControlTrail)
			},
			handlePlayerListItemClick(item) {
				this.focusPlayerId = item.id
				leafletHelper.player.handleFocusPlayer(this.focusPlayerId)
			},
			getPlayerColor(playerId) {
				if (playerId != this.focusPlayerId)
					return leafletHelper.player.getPlayerColor(playerId)
				else
					return leafletHelper.config.gStyle.marker.focus.fillColor
			},
			// 页面reLoad前调用本方法，将用户数据先保存，页面重载后再进行数据恢复
			savePlayersData() {
				leafletHelper.global.savePlayersData()
			},
			// 自助赛事详情查询
			compInfoDetail() {
				uni.request({
					url: apiCompInfoDetail,
					header: this.metadata,
					method: "POST",
					data: {
						compId: this.compId
					},
					success: (res) => {
						// console.log("[compInfoDetail] res", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.actRs = data;
						}
					},
					fail: (err) => {
						console.log("[compInfoDetail] err", err);
					},
				});
			},
			// 自助赛事详情查询
			getMapList() {
				uni.request({
					url: apiMapList,
					header: this.metadata,
					method: "POST",
					data: {
						compId: this.compId
					},
					success: (res) => {
						console.log("[getMapList] res", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.mapList = data.list;
							this.mapId = data.list[0].id;
							this.selectMapChange();
						}
					},
					fail: (err) => {
						console.log("[getMapList] err", err);
					},
				});
			},
			// 赛事监控地图详情
			getMapDetail() {
				uni.request({
					url: apiMapDetail,
					header: this.metadata,
					method: "POST",
					data: {
						compId: this.compId,
						mapId: this.mapId
					},
					success: (res) => {
						console.log("[getMapDetail] res", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.mapDetail = data;
							this.mapInfo = data.mapInfo;
							// this.mapUrl = data.mapInfo.mapUrl;
							// console.log("[getMapDetail] mapInfo", this.mapInfo);
						}
					},
					fail: (err) => {
						console.log("[getMapDetail] err", err);
					},
				});
			},
			// 赛事监控地图下的活动列表
			getActionList() {
				uni.request({
					url: apiActionList,
					header: this.metadata,
					method: "POST",
					data: {
						compId: this.compId,
						mapId: this.mapId
					},
					success: (res) => {
						console.log("[getActionList] res", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.actionList = data.list;
							this.actionId = data.list[0].id;
							this.selectActionChange();
						}
					},
					fail: (err) => {
						console.log("[getActionList] err", err);
					},
				});
			},
			// 赛事监控地图下的活动详情
			getActionDetail() {
				uni.request({
					url: apiActionDetail,
					header: this.metadata,
					method: "POST",
					data: {
						actId: this.actionId
					},
					success: (res) => {
						console.log("[getActionDetail] res", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.actionDetail = data;

							this.loadData();
						}
					},
					fail: (err) => {
						console.log("[getActionDetail] err", err);
					},
				});
			},
			//场控端_活动详情
			/* async getActionDetail() {
				try {
					return new Promise((resolve, reject) => {
						uni.request({
							url: apiActionDetail,
							header: this.metadata,
							method: "POST",
							data: {
								actId: this.actionId
							},
							success: (res) => {
								console.log("getActionDetail", res);
								if (checkResCode(res)) {
									resolve(res);
								} else {
									reject(res);
								}
							},
							fail: (err) => {
								console.log("getActionDetail err", err);
								reject(err);
							},
						});
					});
				} catch (e) {
					console.log('[getActionDetail] err', e)
					reject(e)
				}
			}, */
			//场控端_正在进行中所有用户实时信息
			async getUsersInGameDetail() {
				try {
					return new Promise((resolve, reject) => {
						uni.request({
							url: apiUsersInGameDetail,
							header: this.metadata,
							method: "POST",
							data: {
								actId: this.actionId
							},
							success: (res) => {
								console.log("getUsersInGameDetail", res);
								if (checkResCode(res)) {
									resolve(res.data.data.users);
								} else {
									reject(res);
								}
							},
							fail: (err) => {
								console.log("getUsersInGameDetail err", err);
								reject(err);
							},
						});
					});
				} catch (e) {
					console.log('[getUsersInGameDetail] err', e)
					reject(e)
				}
			},
			//场控端_正在进行中所有用户实时gps查询
			async usersInGameGpsQuery() {
				try {
					return new Promise((resolve, reject) => {
						uni.request({
							url: apiUsersInGameGpsQuery,
							header: this.metadata,
							method: "POST",
							data: {
								actId: this.actionId
							},
							success: (res) => {
								console.log("usersInGameGpsQuery", res);
								if (checkResCode(res)) {
									resolve(res.data.data.gpsInfo);
								} else {
									reject(res);
								}
							},
							fail: (err) => {
								console.log("usersInGameGpsQuery err", err);
								reject(err);
							},
						});
					});
				} catch (e) {
					console.log('[usersInGameGpsQuery] err', e)
					reject(e)
				}
			},
			onActionChange(e) {
				const value = e.detail.value
				console.log("onActionChange", value)
			},
			onPlayerListItemClick(item) {
				// console.log("onListItemClick", item)
				this.handlePlayerListItemClick(item)
			},
			onPhoneClick(phoneNumber) {
				if (!this.admin) {
					return;
				}
				if (phoneNumber.length == 11) {
					uni.makePhoneCall({
						phoneNumber: phoneNumber
					})
				} else {
					uni.showToast({
						title: '手机号码不正确',
						icon: 'none'
					})
				}
			},
			fullScreenToggle() {
				this.$global.fullscreen();
				// this.layoutInit();
			},
			// 获取输入框中值
			getESelectText(data) {
				// console.log("getESelectText:", data);
			},
			selectMapChange(data) {
				// console.log("selectMapChange:", data);
				this.getMapDetail();
				this.getActionList();
			},
			selectActionChange(data) {
				// console.log("selectActionChange:", data);
				this.getActionDetail();
			},
			btnBack() {
				const url = "/pages/actManage/actDetail?" + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			},
		}
	}
</script>

<style scoped>
	.content {
		height: 100vh;
	}

	.top {
		height: 36px;
		padding-top: 16px;
		flex-shrink: 0;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.selectBox {
		width: 100%;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.select {
		width: 48%;
	}

	.map {
		width: 100%;
		flex: 1 1 auto;
		background-color: white;
		z-index: 0;
	}

	.popup {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f5f5f5;
		/* border-left: #dedede solid 1px; */
		border-top: #dedede solid 1px;
	}

	.section {
		width: 100%;
	}

	.scroll {
		overflow: scroll;
	}

	.section-title {
		font-size: 14px;
		color: #424242;
		line-height: 20px;
		padding: 10px 0 10px 10px;
	}

	.section-content {
		width: 100%;
		height: 100%;
	}

	/* .section-content-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 46px;
	} */

	/* .actionsTree {
		/deep/ .input-value-border {
		    border-top: 1px solid #e5e5e5;
		    border-bottom: 1px solid #e5e5e5;
		    border-radius: 0px;
		}
		
		/deep/ .uni-scroll-view {
		    overflow: unset !important;
		}
	} */

	.list {
		margin-left: -6px;
	}

	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 46px;
	}

	.slot-box {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 330px;
		max-width: 350px;
	}

	.slot-image {
		display: block;
		margin-right: 6px;
		width: 3px;
		height: 33px;
		align-self: center;
	}

	.slot-title {
		flex: 1;
		font-size: 13px;
		color: #424242;
		line-height: 18px;
		white-space: nowrap;
	}

	.slot-sn {
		display: inline-flex;
		width: 15px;
		height: 15px;
		border-radius: 50%;
	}

	.slot-note {
		flex: 1;
		margin-left: 20px;
		font-size: 12px;
		color: #7d8da7;
		line-height: 18px;
		white-space: nowrap;
	}

	.slot-phone {
		padding: 0 5px;
		color: #000;
		font-weight: bold;
	}

	.norecord {
		font-weight: 500;
		color: #818181;
		font-size: 14px;
		text-align: center;
		line-height: 50px;
	}

	/* /deep/ .uni-data-tree-dialog {
		top: 39px;
	} */
</style>