v1.0.3

pages/AO/mapShow.vue

@@ -1,33 +1,24 @@
 <template>
-	<view>
-		<view id="map" :style="{ height: mapHeight + 'px' }" class='map' />
+	<view class="page" :style="{ height: pageHeight + 'px', flexDirection: flexDirection }">
+		<view id="map" :style="{ height: pageHeight + 'px' }" class='map' />
 
 		<!-- <view class="fab">
 			<uni-fab ref="fab" :pattern="fab.pattern" :content="fab.content" :horizontal="fab.horizontal"
 				:vertical="fab.vertical" :direction="fab.direction" @trigger="trigger" @fabClick="fabClick" />
 		</view> -->
 
-		<!-- <div ref="testdiv" class="dragLayer" :class="testdiv" :style="{top: topSize + 'rpx' }"
-			@touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchmove="handleTouchMove"> -->
-		<view :v-show="popupShow" :style="{ height: popupHeight + 'px' }">
+		<view v-show="popupShow" :style="{ height: popupHeight + 'px' }" class="popup">
 			<uni-list v-for="(item, index) in players" :key="index" :border="true">
 				<!-- 右侧带角标 -->
 				<!-- <uni-list-chat :title="item.name" avatar="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
 					note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat> -->
-				<uni-list-item :title="item.name + ' 打点数: ' + item.effectivenum + ' / ' + item.totalcontrolnum + ' 距离: ' + item.distance + '米 配速: ' + item.pace" 
+				<uni-list-item
+					:title="item.name + ' 打点数: ' + item.effectivenum + ' / ' + item.totalcontrolnum + ' 距离: ' + item.distance + '米 配速: ' + item.pace"
 					:note="'平均心率: ' + item.avghr + ' 最大心率: ' + item.maxhr + ' CAL: ' + item.calorie + ' Ck: ' + item.ck + ' Ei: ' + item.ei">
 				</uni-list-item>
 			</uni-list>
-			<!-- </div> -->
 		</view>
 
-		<!-- 普通弹窗 -->
-		<!-- <uni-popup ref="popup" :is-mask-click="false" background-color="#fff" @change="onPopupChange">
-			<view class="popup-content"
-				:class="{ 'popup-bottom': popupType === 'bottom', 'popup-right': popupType === 'right' }">
-				<text class="text">popup 内容</text>
-			</view>
-		</uni-popup> -->
 	</view>
 </template>
 
@@ -35,13 +26,65 @@
 	import 'leaflet/dist/leaflet.css'
 	import '@/utils/map/leafletHelper.css'
 
+	// import mapHelper from '@/utils/mapHelper'
+	import leafletHelper from '@/utils/map/leafletHelper'
+
+	export default {
+		components: {},
+		// data() {
+		// 	return {},
+		// },
+		beforeDestroy() {
+			// console.log("beforeDestroy")
+			// clearInterval(this.interval)
+			leafletHelper.free()
+		},
+		methods: {
+			initMap() {
+				// leafletHelper.init(this, 'map', [36.67175772119628, 117.12792580603369], 17)
+			
+				// const mapid = this.actionDetail.mapinfo.lid
+				const mapurl = this.actionDetail.mapinfo.mapurl
+				const centPoint = [this.actionDetail.mapinfo.centerlatitude, this.actionDetail.mapinfo.centerlongitude]
+				const zoomNum = this.actionDetail.mapinfo.defscale
+				leafletHelper.init(this, 'map', centPoint, zoomNum)
+				leafletHelper.addMapLayer(mapurl)
+			},
+			handleMapDrawRoute() {
+				// leafletHelper.global.setCheckPoints(this.checkPoints)
+				leafletHelper.global.setRoutes(this.actionDetail.routesList)
+			
+				// 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.player.drawOneTrail(1, 10000, true)
+				// leafletHelper.player.drawOneTrail(2, 0, false)
+				leafletHelper.player.drawAllTrails(5000)
+			},
+			handleMapToggle() {
+				// leafletHelper.checkPoint.toggle(true)
+				leafletHelper.route.toggle(true)
+				leafletHelper.player.togglePlayer(true)
+				leafletHelper.player.toggleTooltip(true)
+				leafletHelper.player.toggleTrail(true)
+			},
+		},
+	}
+</script>
+
+<script>
 	import {
 		DefaultRequest,
 		IdRequest
 	} from "@/grpc/base_pb.js"
 
-	// import mapHelper from '@/utils/mapHelper'
-	import leafletHelper from '@/utils/map/leafletHelper'
 
 	export default {
 		components: {},
@@ -51,8 +94,10 @@
 
 				systemInfo: null,
 				deviceOrientation: 'portrait', // 设备方向（竖屏 portrait | 横屏 landscape）
-				mapHeight: 0,
-				popupHeight: 100,
+				flexDirection: 'column',
+				pageHeight: 0,
+				// mapHeight: 0,
+				popupHeight: 200,
 				popupType: 'bottom',
 				popupShow: false,
 
@@ -169,39 +214,6 @@
 						longitude: 117.127873
 					}
 				],
-
-				// fab: {
-				// 	horizontal: 'left',
-				// 	vertical: 'bottom',
-				// 	direction: 'horizontal',
-				// 	pattern: {
-				// 		color: '#7A7E83',
-				// 		backgroundColor: '#fff',
-				// 		selectedColor: '#007AFF',
-				// 		buttonColor: '#007AFF',
-				// 		iconColor: '#fff'
-				// 	},
-				// 	is_color_type: false,
-				// 	content: [{
-				// 			iconPath: '/static/image.png',
-				// 			selectedIconPath: '/static/image-active.png',
-				// 			text: '玩家',
-				// 			active: false
-				// 		},
-				// 		{
-				// 			iconPath: '/static/home.png',
-				// 			selectedIconPath: '/static/home-active.png',
-				// 			text: '统计',
-				// 			active: false
-				// 		},
-				// 		{
-				// 			iconPath: '/static/star.png',
-				// 			selectedIconPath: '/static/star-active.png',
-				// 			text: '设置',
-				// 			active: false
-				// 		}
-				// 	]
-				// },
 			}
 		},
 		computed: {},
@@ -215,9 +227,9 @@
 		onShow() {
 			console.log('[onShow]')
 			uni.onWindowResize(res => {
-				console.log('[onWindowResize]', res)
-				this.deviceOrientation = res.deviceOrientation
-				console.log('[onWindowResize] deviceOrientation', this.deviceOrientation)
+				// console.log('[onWindowResize]', res)
+				// this.deviceOrientation = res.deviceOrientation
+				// console.log('[onWindowResize] deviceOrientation', this.deviceOrientation)
 
 				this.layoutInit()
 			});
@@ -225,34 +237,34 @@
 		beforeDestroy() {
 			// console.log("beforeDestroy")
 			clearInterval(this.interval)
-			leafletHelper.free()
+			// leafletHelper.free()
 		},
 		methods: {
 			// 布局初始化 设置地图高度
 			layoutInit() {
 				this.systemInfo = uni.getSystemInfoSync()
-				console.log('[layoutInit] systemInfo', this.systemInfo)
+				// console.log('[layoutInit] systemInfo', this.systemInfo)
+				this.pageHeight = this.systemInfo.windowHeight
 				this.deviceOrientation = this.systemInfo.deviceOrientation
-				this.mapHeight = this.systemInfo.windowHeight
-			},
-			popupToggle() {
-				this.popupShow = !this.popupShow
 
-				if (this.deviceOrientation == 'portrait') { // 竖屏 
-					console.log('[popupToggle] 竖屏')
-					if (this.popupShow) {
-						this.mapHeight = this.systemInfo.windowHeight - this.popupHeight
-					} else {
-						this.mapHeight = this.systemInfo.windowHeight
-					}
+				if (this.deviceOrientation == 'portrait') { // 竖屏
+					console.log('[layoutInit] 竖屏')
+					this.flexDirection = 'column'
+					// if (this.popupShow) {
+					// 	this.mapHeight = this.pageHeight - this.popupHeight
+					// } else {
+					// 	this.mapHeight = this.pageHeight
+					// }
 				} else if (this.deviceOrientation == 'landscape') { // 横屏
-					console.log('[popupToggle] 横屏')
-					if (this.popupShow) {
-						this.mapHeight = this.systemInfo.windowHeight - this.popupHeight
-					} else {
-						this.mapHeight = this.systemInfo.windowHeight
-					}
+					console.log('[layoutInit] 横屏')
+					this.flexDirection = 'row'
+					// this.mapHeight = this.pageHeight
 				}
+
+			},
+			popupToggle() {
+				// console.log('[popupToggle]')
+				this.popupShow = !this.popupShow
 			},
 			async loadData() {
 				this.actionDetail = await this.getToActionDetail(this.actionId)
@@ -271,18 +283,18 @@
 				let that = this
 				that.players = await that.getToUsersInGameDetail(that.actionId)
 				// console.log('players', that.players)
-				leafletHelper.global.setPlayers(this.players)
+				// leafletHelper.global.setPlayers(this.players)
 
 				that.players_position = await that.getToUsersInGameGpsQuery(that.actionId)
-				leafletHelper.global.setPlayersPosition(this.players_position)
+				// leafletHelper.global.setPlayersPosition(this.players_position)
 
 				that.handleMapDrawPlayer()
 
 				this.interval = setInterval(async function() {
 
 					that.players_position = await that.getToUsersInGameGpsQuery(that.actionId)
-					// leafletHelper.global.setPlayers(that.players)
-					leafletHelper.global.setPlayersPosition(that.players_position)
+					//// leaflet.leafletHelper.global.setPlayers(that.players)
+					// leafletHelper.global.setPlayersPosition(that.players_position)
 
 				}, 1000);
 
@@ -364,120 +376,52 @@
 					reject(e)
 				}
 			},
-			initMap() {
-				// leafletHelper.init(this, 'map', [36.67175772119628, 117.12792580603369], 17)
-
-				// const mapid = this.actionDetail.mapinfo.lid
-				const mapurl = this.actionDetail.mapinfo.mapurl
-				const centPoint = [this.actionDetail.mapinfo.centerlatitude, this.actionDetail.mapinfo.centerlongitude]
-				const zoomNum = this.actionDetail.mapinfo.defscale
-				leafletHelper.init(this, 'map', centPoint, zoomNum)
-				leafletHelper.addMapLayer(mapurl)
-			},
-			handleMapDrawRoute() {
-				// leafletHelper.global.setCheckPoints(this.checkPoints)
-				leafletHelper.global.setRoutes(this.actionDetail.routesList)
-
-				// 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.player.drawOneTrail(1, 10000, true)
-				// leafletHelper.player.drawOneTrail(2, 0, false)
-				leafletHelper.player.drawAllTrails(5000)
-			},
-			handleMapToggle() {
-				// leafletHelper.checkPoint.toggle(true)
-				leafletHelper.route.toggle(true)
-				leafletHelper.player.togglePlayer(true)
-				leafletHelper.player.toggleTooltip(true)
-				leafletHelper.player.toggleTrail(true)
-			},
-			trigger(e) {
-				console.log(e)
-				this.content[e.index].active = !e.item.active
-				uni.showModal({
-					title: '提示',
-					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
-					success: function(res) {
-						if (res.confirm) {
-							console.log('用户点击确定')
-						} else if (res.cancel) {
-							console.log('用户点击取消')
-						}
-					}
-				})
-			},
-			fabClick() {
-				uni.showToast({
-					title: '点击了悬浮按钮',
-					icon: 'none'
-				})
-			},
-			//type: 弹出方式 [ top center bottom left right ]
-			popup(type) {
-				this.type = type
-				if (!this.popupShow) {
-					this.$refs.popup.open(type)
-					this.popupShow = true
-				} else {
-					this.$refs.popup.close()
-					this.popupShow = false
-				}
-			},
-			onPopupChange(e) {
-				console.log('[onPopupChange] 当前模式：' + e.type + ', 状态：' + e.show);
-			},
+			// trigger(e) {
+			// 	console.log(e)
+			// 	this.content[e.index].active = !e.item.active
+			// 	uni.showModal({
+			// 		title: '提示',
+			// 		content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
+			// 		success: function(res) {
+			// 			if (res.confirm) {
+			// 				console.log('用户点击确定')
+			// 			} else if (res.cancel) {
+			// 				console.log('用户点击取消')
+			// 			}
+			// 		}
+			// 	})
+			// },
+			// fabClick() {
+			// 	uni.showToast({
+			// 		title: '点击了悬浮按钮',
+			// 		icon: 'none'
+			// 	})
+			// },
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.map {
-		z-index: 0;
-		width: 100vw;
-		// height: 95vh;
+	.page {
+		background-color: red;
 		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: white;
 	}
 
-	.fab {
-		z-index: 1000;
-		width: 20px;
+	.map {
+		flex: 1 1 auto;
+		background-color: white;
+		z-index: 0;
+		// display: flex;
+		// justify-content: center;
+		// align-items: center;
 	}
 
-	// @mixin flex {
-	// 	/* #ifndef APP-NVUE */
-	// 	display: flex;
-	// 	/* #endif */
-	// 	flex-direction: row;
-	// }
-
-	// @mixin height {
-	// 	/* #ifndef APP-NVUE */
-	// 	height: 100%;
-	// 	/* #endif */
-	// 	/* #ifdef APP-NVUE */
-	// 	flex: 1;
-	// 	/* #endif */
-	// }
-
-	.popup-bottom {
-		width: 100%;
-		height: 200px;
+	.popup {
+		// height: 200px;
 	}
 
-	.popup-right {
-		// @include height;
-		width: 200px;
-		height: 100%;
-	}
+	// .fab {
+	// 	z-index: 1000;
+	// 	width: 20px;
+	// }
 </style>

unpackage/dist/dev/app-plus/app-config-service.js

@@ -1,7 +1,7 @@
 
 var isReady=false;var onReadyCallbacks=[];
 var isServiceReady=false;var onServiceReadyCallbacks=[];
-var __uniConfig = {"pages":["pages/AO/mapShow","pages/nfc/nfc","pages/verify/verify"],"window":{"navigationBarTextStyle":"white","navigationBarTitleText":"小飞龙定向助手","navigationBarBackgroundColor":"#1888ff","backgroundColor":"#F8F8F8","background":"#efeff4"},"tabBar":{"color":"#7A7E83","selectedColor":"#007AFF","borderStyle":"black","backgroundColor":"#FFFFFF","list":[{"pagePath":"pages/verify/verify","iconPath":"static/tabbar/verify.png","selectedIconPath":"static/tabbar/verify_active.png","text":"核销"},{"pagePath":"pages/nfc/nfc","iconPath":"static/tabbar/nfc.png","selectedIconPath":"static/tabbar/nfc_active.png","text":"NFC"}]},"darkmode":false,"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"定向场控","compilerVersion":"3.7.9","entryPagePath":"pages/AO/mapShow","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
+var __uniConfig = {"pages":["pages/AO/mapShow","pages/nfc/nfc","pages/verify/verify"],"window":{"navigationBarTextStyle":"white","navigationBarTitleText":"小飞龙定向助手","navigationBarBackgroundColor":"#1888ff","backgroundColor":"#F8F8F8","background":"#efeff4"},"tabBar":{"color":"#7A7E83","selectedColor":"#007AFF","borderStyle":"black","backgroundColor":"#FFFFFF","list":[{"pagePath":"pages/verify/verify","iconPath":"static/tabbar/verify.png","selectedIconPath":"static/tabbar/verify_active.png","text":"核销"},{"pagePath":"pages/nfc/nfc","iconPath":"static/tabbar/nfc.png","selectedIconPath":"static/tabbar/nfc_active.png","text":"NFC"}]},"darkmode":false,"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"定向场控","compilerVersion":"3.7.11","entryPagePath":"pages/AO/mapShow","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
 var __uniRoutes = [{"path":"/pages/AO/mapShow","meta":{"isQuit":true},"window":{"navigationBarTitleText":"场控地图","enablePullDownRefresh":false}},{"path":"/pages/nfc/nfc","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"NFC管理","enablePullDownRefresh":false}},{"path":"/pages/verify/verify","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"核销管理","enablePullDownRefresh":false}}];
 __uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
 __uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});