lzyd-map-h/pages/index/index.vue

<template>
	<div class="map-box">
		<div class="jiluBigBox" id='poster'>
			<div class="m-map">
				<!-- <div class="zhezhaoMap"></div> -->
				<div id="js-container" class="map"></div>
			</div>
			<div class="jiluBox1">
				<div class="userPhoto">
					<img crossorigin='anonymous' class="allImage" mode='aspectFill' :src="userInfo.user_avatar"></img>
				</div>

				<div class="uesrName">{{userInfo.username}}</div>
				<div class="distance">
					{{sportInfo && sportInfo.distance ? Math.round(sportInfo.distance/10)/100:0}}
					<span class="km">公里</span>
				</div>
				<div class="title">荔枝悦动:户外跑</div>
				<div class="creatTime">{{sportInfo.date_time}}</div>
				<div class="lineColor">
					<div class='lowSpeed'>慢</div>
					<div class='fastSpeed'>快</div>
				</div>
				<div class="sportData">
					<div class='dataBox'>
						<div class='dataNum'>{{sportInfo &&sportInfo.speed?sportInfo.speed:0}}</div>
						<div class='dataName'>平均配速</div>
					</div>
					<div class='dateLine'></div>
					<div class='dataBox'>
						<div class='dataNum'>{{sportInfo &&sportInfo.duration?Math.round(sportInfo.duration/60):0}}
						</div>
						<div class='dataName'>总时长(分钟)</div>
					</div>
					<div class='dateLine'></div>
					<div class='dataBox'>
						<div class='dataNum'>{{sportInfo &&sportInfo.kcal?sportInfo.kcal:0}}</div>
						<div class='dataName'>消耗千卡</div>
					</div>
				</div>
				<div class="boxLine"></div>
				<div class="sportData" style='top: 430rpx;'>
					<div class='dataBox'>
						<div class='dataNum'>{{sportInfo &&sportInfo.steps?sportInfo.steps:0}}</div>
						<div class='dataName'>总步数</div>
					</div>
					<div class='dateLine'></div>
					<div class='dataBox'>
						<div class='dataNum'>{{sportInfo &&sportInfo.cadence?sportInfo.cadence:0}}</div>
						<div class='dataName'>步频(步/分钟)</div>
					</div>
					<div class='dateLine'></div>
					<div class='dataBox'>
						<div class='dataNum'>{{sportInfo &&sportInfo.stride?sportInfo.stride:0}}</div>
						<div class='dataName'>步幅(厘米)</div>
					</div>
				</div>
			</div>
			<div class="jiluBox2">
				<div class='title'>配速</div>
				<div class='kmspeed'>公里 <span style='margin-left: 40rpx;'>配速</span></div>
				<div class='allSpeedBox'>
					<div class='speedLineBox' v-for="(item,index) in useTimeList" :key="index">
						<div class="lineNum">{{index+1}}</div>
						<div class="speedColor">
							<div class='speedLine' :class="item==minSpeed ? 'speedFast':'speedLow'"
								:style="{width:(item/maxSpeed*100)+'%'}"></div>
						</div>
						<!-- <div class="lineSpeed">{{item>60 ? Math.floor(item/60)+'’'+item%60+'”': item%60+'”' }}</div> -->
						
						<div class="lineSpeed">{{ Math.floor(item)+'’'+Math.floor((item - Math.floor(item))*60.0)+'”'}}</div>
					</div>

				</div>
			</div>
			<div class="jiluBox3">
				<div class='title'>步频</div>
				<div class='bupinDataBox'>
					<div class='bupinData'>
						<div class='bupinDataNum'>
							{{maxCadence}}
						</div>
						<div class='bupinDataName'>
							最快步频
						</div>
					</div>
					<div class='bupinData'>
						<div class='bupinDataNum'>
							{{sportInfo &&sportInfo.cadence?sportInfo.cadence:0}}
						</div>
						<div class='bupinDataName'>
							平均步频
						</div>
					</div>
				</div>
				<div class='danwei1'>
					(步/分钟）
				</div>
				<div class='danwei2'>
					（分钟）
				</div>
				<view class="line-chart">
					<view>
						<view class="mar-bot20">
							<canvas class="chart" id="line" canvas-id="line"></canvas>
						</view>
					</view>
				</view>
			</div>
		</div>

		// <div class='savePhoto' @click="toImg">
			保存长图
		</div>
		<div class='sharePhoto' @click="toShare">
			分享好友
		</div>
		<div class='shareBox'>
			
		</div>
		<div class='fenxiangImageBox' @touchmove.prevent v-if='showPhoto'>
			<div class='fenxiangImage'>
				<image class="allImage" style="height: 130%;" :src="base64" mode=""></image>
			</div>
			<div class='closePhoto' @click="closeImg">
				关闭图片
			</div>
		</div>

	</div>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import html2canvas from 'html2canvas';
	import {GetUserInfo,GetSportInfo,GetSportSummary,GetMapsInfo,uploadBase64} from '../../api/apis.js';
	
	const MapKey = '43fcce2baefbd309a4afe81279946689';
	const MapCityName = '北京';
	export default {
		props: ['lat', 'lng', 'defaultV'],
		data() {
			return {
				list: [],
				address: undefined,
				index: 0,
				placeSearch: null,
				dragStatus: false,
				AMapUI: null,
				AMap: null,
				lineList: [],
				centerLog: [118.786545, 32.057882],
				zoomNum: 17,
				speedList: [],
				base64: '',
				wdwidth: '',
				wdheight: '',
				showPhoto: false,
				userInfo: '',
				sportInfo: '',
				useTimeList: '',
				cadenceInfo: '',
				maxCadence: 0,
				averageCadence: 0,
				maxSpeed: 0,
				mapBase:'',
				minSpeed: 9999,

			};
		},
		watch: {
			defaultV() {
				console.log(this.defaultV);
				if (this.defaultV !== undefined) {
					console.log(this.defaultV);
				}
			}
		},
		beforeDestroy() {
			// #ifdef H5
			cancelAnimationFrame(this.timeR);
			cancelAnimationFrame(this.timR);
			cancelAnimationFrame(this.bollTimeR);
			// #endif
		},
		
		onReady() {

		},
		async created() {
			function remoteLoad(url, hasCallback) {
				return createScript(url);

				function createScript(url) {
					let scriptElement = document.createElement('script');
					document.body.appendChild(scriptElement);
					let promise = new Promise((resolve, reject) => {
						scriptElement.addEventListener(
							'load',
							e => {
								removeScript(scriptElement);
								if (!hasCallback) {
									resolve(e);
								}
							},
							false
						);

						scriptElement.addEventListener(
							'error',
							e => {
								removeScript(scriptElement);
								reject(e);
							},
							false
						);

						if (hasCallback) {
							window.____callback____ = function() {
								resolve();
								window.____callback____ = null;
							};
						}
					});

					if (hasCallback) {
						url += '&callback=____callback____';
					}

					scriptElement.src = url;

					return promise;
				}

				/**
				 * 移除script标签
				 * @param scriptElement script dom
				 */
				function removeScript(scriptElement) {
					document.body.removeChild(scriptElement);
				}

			}
			let data1 = {
				user_id:this.$route.query.user_id
			}
			this.GetUserInfo(data1)
			let data2 = {
				task_id:this.$route.query.task_id
			}
			this.GetSportInfo(data2)
			// uni.request({
			// 	// url: 'http://lzyd-front-sport-api.lizhiyuedong.com/api/correction/trackPointDbSearch?task_id='+this.$route.query.task_id,
			// 	url: 'https://lzyd-front-user-api.lizhiyuedong.com/customer/getInfo?user_id=' + this.$route
			// 		.query.user_id,
			// 	// url: 'http://192.168.0.111:4002/api/task/redis?task_id='+ this.$route.query.task_id,
			// 	method: 'GET',
			// 	success: res => {
			// 		this.userInfo = res.data.data

			// 		// console.log(res)
			// 		// let coverImg = res.data.data.user_avatar
			// 		// this.urlTobase64(coverImg);
			// 	}
			// });
			// uni.request({
			// 	// url: 'http://lzyd-front-sport-api.lizhiyuedong.com/api/correction/trackPointDbSearch?task_id='+this.$route.query.task_id,
			// 	url: 'http://lzyd-front-sport-api.lizhiyuedong.com/api/runData/speed?task_id=' + this.$route.query.task_id,
			// 	// url: 'http://192.168.0.101:4002/api/runData/speed?task_id='+ this.$route.query.task_id,
			// 	method: 'GET',
			// 	success: res => {
			// 		console.log(res)
			// 		this.useTimeList = res.data.data.speed

			// 		for (let k = 0; k < this.useTimeList.length; k++) {
			// 			if (this.useTimeList[k] > this.maxSpeed) {
			// 				this.maxSpeed = this.useTimeList[k]
			// 			}
			// 			if (this.useTimeList[k] < this.minSpeed) {
			// 				this.minSpeed = this.useTimeList[k]
			// 			}
			// 		}
			// 		this.cadenceInfo = res.data.data.cadence.cadence
			// 		let arrIndex = []
			// 		let maxCadence = 0
			// 		let averageCadence = 0
			// 		for (let i = 0; i < this.cadenceInfo.length; i++) {
			// 			arrIndex.push(i+1)
			// 			if (this.cadenceInfo[i] > maxCadence) {
			// 				maxCadence = this.cadenceInfo[i]
			// 			}
			// 			averageCadence = this.cadenceInfo[i] + averageCadence
			// 			if (i == this.cadenceInfo.length - 1) {
			// 				Math.ceil(averageCadence / this.cadenceInfo.length)
			// 			}
			// 			// console.log(arrIndex)
			// 		}
			// 		this.maxCadence = maxCadence
			// 		this.averageCadence = averageCadence
			// 		// console.log(arrIndex)
			// 		// console.log(this.cadenceInfo.length)
			// 		let that = this
			// 		let cadenceInfo = that.cadenceInfo
			// 		const query = uni.createSelectorQuery().in(this);
			// 		query.select('.chart').boundingClientRect((data, cadenceInfo) => {
			// 			this.lineDraw("line", data, that.cadenceInfo, arrIndex);
			// 		}).exec();
			// 		// this.timeListOther = res.data.data.speed
			// 	}
			// });


			let data = {
				"steps": this.$route.query.steps * 1,
				"task_id": this.$route.query.task_id,
				"user_id": this.$route.query.user_id
			}
			// this.GetSportSummary(data3)
			uni.request({
				// url: 'http://lzyd-front-sport-api.lizhiyuedong.com/api/correction/trackPointDbSearch?task_id='+this.$route.query.task_id,
				url: 'http://lzyd-front-sport-api.lizhiyuedong.com/api/runData/summary',
				// url: 'http://192.168.0.111:4002/api/task/redis?task_id='+ this.$route.query.task_id,
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				data: JSON.stringify(data),
				// dataType:'json',
				success: res => {
					// console.log(res.data.message)
					if (res.data.message == '运动距离过短') {
						// uniapp.showToast('')
						alert('运动距离过短，暂无数据哦')
					} else if (res.data.message == '不存在的task_id') {
						alert('不存在的task_id')
					} else {
						this.sportInfo = res.data.data
						// console.log(this.sportInfo)
					}

					// this.list = res.data.data
				}
			});
			// 已载入高德地图API，则直接初始化地图
			if (window.AMap && window.AMapUI) {
				// this.initMap();
				// uni.request({
				// 	// url: 'http://lzyd-front-sport-api.lizhiyuedong.com/api/correction/trackPointDbSearch?task_id='+this.$route.query.task_id,
				// 	url: 'http://lzyd-front-sport-api.lizhiyuedong.com/api/correction/trackPointAmpSearch?task_id=' +
				// 		this.$route.query.task_id,
				// 	// url: 'http://192.168.0.111:4002/api/correction/trackPointAmpSearch?task_id='+ this.$route.query.task_id,
				// 	method: 'GET',
				// 	success: res => {
				// 		this.list = res.data.data
				// 		this.list.map((item => {
				// 			this.lineList.push(item.split(','))
				// 		}))
				// 		this.initMap();
				// 	}
				// });
				this.GetMapsInfo({task_id:this.$route.query.task_id})
			} else {
				await remoteLoad(
					`https://webapi.amap.com/maps?v=1.4.4&key=${MapKey}&plugin=AMap.Geocoder,AMap.PlaceSearch,AMap.ToolBar`
				);
				await remoteLoad('https://webapi.amap.com/ui/1.0/main.js');
				this.GetMapsInfo({task_id:this.$route.query.task_id})
				// uni.request({
				// 	url: 'http://lzyd-front-sport-api.lizhiyuedong.com/api/correction/trackPointAmpSearch?task_id=' +
				// 		this.$route.query.task_id,
				// 	// url: 'http://192.168.0.111:4002/api/correction/trackPointAmpSearch?task_id='+ this.$route.query.task_id,
				// 	method: 'GET',
				// 	success: res => {
				// 		this.list = res.data.data
				// 		this.list.map((item => {
				// 			this.lineList.push(item.split(','))
				// 		}))
				// 		this.initMap();
				// 	}
				// });
			}


		},
		methods: {
			dataURLtoFile(dataurl, filename) { 
				    var arr = dataurl.split(','),
				        mime = arr[0].match(/:(.*?);/)[1],
				        bstr = atob(arr[1]),
				        n = bstr.length,
				        u8arr = new Uint8Array(n);
				    while (n--) {
				        u8arr[n] = bstr.charCodeAt(n);
				    }
				    return new File([u8arr], filename, { type: mime });
				},
			
			closeImg() {
				this.showPhoto = false
			},
			
			GetUserInfo(data) {
				GetUserInfo(data).then(res => {
					// console.log(res)
					this.userInfo = res.data
					// console.log(res.data.user_avatar.crossOrigin)
					
					
				})
			},
			GetMapsInfo(data) {
				GetMapsInfo(data).then(res => {
					this.list = res.data
					this.list.map((item => {
						this.lineList.push(item.split(','))
					}))
					this.initMap();
				})
			},
			
			GetSportSummary(data) {
				GetSportSummary(data).then(res => {
					console.log(res)
					// this.userInfo = res.data.data
					if (res.data.message == '运动距离过短') {
						// uniapp.showToast('')
						alert('运动距离过短，暂无数据哦')
					} else if (res.data.message == '不存在的task_id') {
						alert('不存在的task_id')
					} else {
						this.sportInfo = res.data
						console.log(this.sportInfo)
					}
					
				})
			},
			
			GetSportInfo(data) {
				GetSportInfo(data).then(res => {
					// console.log(res)
					this.useTimeList = res.data.speed
					
					for (let k = 0; k < this.useTimeList.length; k++) {
						if (this.useTimeList[k] > this.maxSpeed) {
							this.maxSpeed = this.useTimeList[k]
						}
						if (this.useTimeList[k] < this.minSpeed) {
							this.minSpeed = this.useTimeList[k]
						}
					}
					this.cadenceInfo = res.data.cadence.cadence
					let arrIndex = []
					let maxCadence = 0
					let averageCadence = 0
					for (let i = 0; i < this.cadenceInfo.length; i++) {
						arrIndex.push(i+1)
						if (this.cadenceInfo[i] > maxCadence) {
							maxCadence = this.cadenceInfo[i]
						}
						averageCadence = this.cadenceInfo[i] + averageCadence
						if (i == this.cadenceInfo.length - 1) {
							Math.ceil(averageCadence / this.cadenceInfo.length)
						}
						// console.log(arrIndex)
					}
					this.maxCadence = maxCadence
					this.averageCadence = averageCadence
					// console.log(arrIndex)
					// console.log(this.cadenceInfo.length)
					let that = this
					let cadenceInfo = that.cadenceInfo
					const query = uni.createSelectorQuery().in(this);
					query.select('.chart').boundingClientRect((data, cadenceInfo) => {
						this.lineDraw("line", data, that.cadenceInfo, arrIndex);
					}).exec();
					// this.userInfo = res.data.data
				})
			},
			toShare () {
				uni.showLoading({
				    title: '加载中',
				});
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				var dom = document.querySelector('#poster'); // 获取dom元素
				
				console.log(dom.clientHeight)
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					useCORS: true, //支持跨域，但好像没什么用
				}).then((canvas) => {
					// 将生产的canvas转为base64图片
					this.base64 = canvas.toDataURL('image/png')
					let imgName = new Date().getTime();
					var file = this.dataURLtoFile(this.base64, imgName)
					console.log(this.base64)
					
					var dom1 = document.querySelector('#js-container');
					html2canvas(dom1, {
						width: dom1.clientWidth, //dom 原始宽度
						height: dom1.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						
						this.mapBase = canvas.toDataURL('image/png')
						let dataBase = {
								"base64":this.base64,
								"task_id": this.$route.query.task_id,
								"user_id": this.$route.query.user_id,
								"map_base":this.mapBase,
							}
						let imgName = new Date().getTime() + "z"
						var file = this.dataURLtoFile(this.base64, imgName)
						uploadBase64(dataBase).then(res => {
							console.log(res)
							let data = {
								'type':1,
								'data':{
									'title' :'荔枝悦动',
									'content':'荔枝悦动',
									'link':'',
									'imageUrl':res.data.map_url
								}
							}
							
							uni.hideLoading();
							window.location.href="lzyd_web:"+JSON.stringify(data)
							
							// console.log(this.base64)
							// console.log(this.mapBase)
						})
								// 'mapBase':this.mapBase,
								// 'base64':this.base64,
						
					})
				});
			},
			toImg() {
				uni.showLoading({
				    title: '加载中',
				});
				// 使页面滑到顶部，避免顶部出现白边
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				var dom = document.querySelector('#poster'); // 获取dom元素
				
					
				// console.log(dom.clientHeight)
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					useCORS: true, //支持跨域，但好像没什么用
				}).then((canvas) => {
					
					this.base64 = canvas.toDataURL('image/png')
					
					let imgName = new Date().getTime();
					var file = this.dataURLtoFile(this.base64, imgName)
					
					
					var dom1 = document.querySelector('#js-container');
					html2canvas(dom1, {
						width: dom1.clientWidth, //dom 原始宽度
						height: dom1.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						
						this.mapBase = canvas.toDataURL('image/png')
						let dataBase = {
								"base64":this.base64,
								"task_id": this.$route.query.task_id,
								"user_id": this.$route.query.user_id,
								"map_base":this.mapBase,
							}
						let imgName = new Date().getTime() + "z"
						var file = this.dataURLtoFile(this.base64, imgName)
						uploadBase64(dataBase).then(res => {
							console.log(res)
							let data = {
								'type':0,
								'data':{
									'imageUrl':res.data.map_url
								}
							}
							uni.hideLoading();
							// window.location.href="lzyd_web:"+JSON.stringify(data)
							this.showPhoto = true
							
							// console.log(this.base64)
							// console.log(this.mapBase)
						})
								// 'mapBase':this.mapBase,
								// 'base64':this.base64,
						
					})
					// 将生产的canvas转为base64图片
					
					
					// uniapp.showToast('长按图片保存')
				});
			},

			getRoom(diff) {
				var room = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14);
				var diffArr = new Array(360, 180, 90, 45, 22, 11, 5, 2.5, 1.25, 0.6, 0.3, 0.15, 0.07, 0.03, 0);
				for (var i = 0; i < diffArr.length; i++) {
					if ((diff - diffArr[i]) >= 0) {
						return room[i] + 2;
					}
				}
				return 14;
			},
			getCenterPoint(maxJ, minJ, maxW, minW) { //通过经纬度获取中心位置和缩放级别  
				if (maxJ == minJ && maxW == minW) return [maxJ, maxW, 17];
				var diff = maxJ - minJ;
				if (diff < (maxW - minW)) diff = maxW - minW;
				diff = parseInt(10000 * diff) / 10000;
				var centerJ = minJ * 1000000 + 1000000 * (maxJ - minJ) / 2;
				var centerW = minW * 1000000 + 1000000 * (maxW - minW) / 2;
				var zoom = this.getRoom(diff);
				this.centerLog = [centerJ / 1000000, centerW / 1000000]
				this.zoomNum = zoom - 1
				// console.log((centerJ/1000000),centerW/1000000,zoom)
				return [(centerJ / 1000000), centerW / 1000000, zoom];
			},
			// 搜索
			handleSearch() {
				if (this.searchKey) {
					this.placeSearch.search(this.searchKey);
				}
			},

			// 实例化地图
			initMap() {
				let AMapUI = (this.AMapUI = window.AMapUI);
				let AMap = (this.AMap = window.AMap);
				let that = this;
				let list = this.lineList
				if (list[0]) {
					var maxjd = list[0][0]
					var minjd = list[0][0]
					var maxwd = list[0][1]
					var minwd = list[0][1]
				}
				AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {

					// console.log(this.lineList)
					list.filter((item) => {
						item[0] * 1 > maxjd
						maxjd = item[0] * 1
					})
					for (var i = 0; i < list.length; i++) {

						if (list[i][0] * 1 > maxjd) {
							maxjd = (list[i][0])
						}
						if (list[i][1] * 1 > maxwd) {
							maxwd = (list[i][1])
						}
						if (list[i][0] * 1 < minjd) {
							minjd = (list[i][0])
						}
						if (list[i][1] * 1 < minwd) {
							minwd = (list[i][1])
						}
					}
					that.getCenterPoint(maxjd, minjd, maxwd, minwd)
					let mapConfig = {
						zoom: that.zoomNum-1,
						center: that.centerLog,
						cityName: MapCityName
					};
					let map = new AMap.Map('js-container', mapConfig);
					// let map1 = new AMap.Map('js-container-1', mapConfig);
					// let list = this.lineList;
					
					let markers = [];
					for (var i = 0; i < list.length; i++) {
						if (i === 0) {
							var marker = new AMap.Marker({
								position: list[i],
								icon: new AMap.Icon({
									image: 'https://lzyd-app-image.lizhiyuedong.com/images/2021-04/bddada67de1d2c68192348ec1618388545.png',
									size: new AMap.Size(30, 30), //图标大小
									imageSize: new AMap.Size(20, 20)
								}),
								offset: new AMap.Pixel(0, 0)
							});

						} else if (i == list.length - 1) {
							var marker = new AMap.Marker({
								position: list[i],
								icon: new AMap.Icon({
									image: 'https://lzyd-app-image.lizhiyuedong.com/images/2021-04/1189fb2e36973cef09ff14be1618388569.png',
									size: new AMap.Size(30, 30), //图标大小
									imageSize: new AMap.Size(20, 20)
								}),
								offset: new AMap.Pixel(0, 0)
							});
						} else {
							// var marker = new AMap.Marker({
							// 	position: list[i],
							// 	icon: new AMap.Icon({
							// 		image: '',
							// 		// image: 'https://lzyd-image.lizhiyuedong.com/images/2021-03/cd4b33a0b3cf56942aad7cdb1616990068.png',
							// 		size: new AMap.Size(10, 10), //图标大小
							// 		imageSize: new AMap.Size(10, 10)
							// 	}),
							// 	offset: new AMap.Pixel(0, 0)
							// });
						}

						marker.setMap(map);

						// label默认蓝框白底左上角显示，样式className为：amap-marker-label
						marker.setLabel({
							offset: new AMap.Pixel(10, -30), //设置文本标注偏移量
							// content: "<div class='info' style='padding: 3px 5px;'>" + '' + '</div>', //设置文本标注内容
							direction: 'right' //设置文本标注方位
						});
						map.addControl(new AMap.ToolBar());
						marker.positon = list[i].id;
						markers.push(marker);
						// console.log(markers)
					}


					var polyline = new AMap.Polyline({
						path: list,
						strokeWeight: 6, // 线条宽度，默认为 1
						// strokeColor:'linear-gradient(270deg, #FF654C 0%, #FFC000 50%, #14D59C 100%);'
						strokeColor: "#14D59C", // 线条颜色
						lineJoin: "round", //折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角
						lineCap: "butt", //折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
						zIndex: 50,
					}); // 将折线添加至地图实例// 显示一条已创建的 polyline// polyline.show();
					map.add(polyline);

				});
			},
			sortFn(arr) { //按小到大排序数组
				let arr2 = arr.sort((a, b) => {
					return a - b;
				})
				return arr2;
			},
			toFixedNumber(n = 2, val) { //去小数点后2位
				if (typeof val == "number") {
					return val.toFixed(n) * 1
				}
			},
			//绘制线条 line chart
			lineDraw(ids, elem, cadenceInfo, arrIndex) {
				let ctx = uni.createCanvasContext(ids);
				let grid = {
						top: (12 * elem.height) / 100, //canvas标签的高度的12%（相对总高的百分比）
						bottom: ((100 - 18) * elem.height) / 100, //canvas图形距离底部的百分比 18%
						left: (12 * elem.width) / 100, //距离左侧的百分比（12%总宽度）
						right: ((100 - 8) * elem.width) / 100 //距离右侧百分比（8%总宽度）
					},
					lineColor = "#999", //x,y轴线颜色
					fillColor = "#5B5E67", //x,y轴number颜色
					yAxis = {
						textSize: 10, //刻度数字fontSize
						maxNumber:Math.ceil(this.maxCadence/10) * 10 , //分段的最大值
						splitNumber: 5, //分成几段
						splitLen: 5, //轴左侧的小横线 -|
						marginSplit: 5 //刻度文字与 “-|”的距离  
					},
					lineWidth = 1,
					xAxis = {
						textSize: 10, //刻度数字fontSize
						maxNumber: cadenceInfo.length ? cadenceInfo.length : 60,
						// maxNumber: 14,
						splitNumber: cadenceInfo.length ? Math.ceil(cadenceInfo.length / 2) : 6,
						// splitNumber: 7,
						splitLen: cadenceInfo.length ? Math.ceil(cadenceInfo.length / 2) : 6,
						// splitLen: 7,
						marginSplit: cadenceInfo.length ? Math.ceil(cadenceInfo.length / 2) : 6
						// marginSplit: 7
					},
					dotStyle = [{
						color: "#fff",
						arcR: 2, //半径
						dash: 0 //是否线条虚线 0实线 1以上虚线
					}],
					lineStyle = [{
						color: "#4caf50",
						lineDotType: "wave", //两圆点的连接线 line直线，wave二次贝塞尔曲线
						width: 2, //连线的width
						dash: 3 //是否线条虚线 0实线 1以上虚线
					}],
					dataJSON = [ //数据data
						{
							x: this.sortFn(arrIndex),
							y: cadenceInfo
						},
						// { x: this.sortFn([5, 23, 45, 39, 50, 28]), y: [9, 18, 70, 75, 56, 35] }
					];
				ctx.beginPath();
				ctx.setLineWidth(lineWidth);
				ctx.setTextAlign("right");
				ctx.setTextBaseline("middle");
				ctx.setStrokeStyle(lineColor);
				ctx.setFillStyle(fillColor);
				//y轴纵轴 |
				ctx.moveTo(grid.left, grid.top);
				ctx.lineTo(grid.left, grid.bottom);
				ctx.setFontSize(yAxis.textSize);
				for (let n = 1; n <= yAxis.splitNumber; n++) {
					//刻度
					ctx.moveTo(grid.left, grid.bottom - (grid.bottom - grid.top) / yAxis.splitNumber * n + lineWidth);
					ctx.lineTo(grid.left - yAxis.splitLen, grid.bottom - (grid.bottom - grid.top) / yAxis.splitNumber * n +
						lineWidth);
					ctx.fillText(this.toFixedNumber(1, yAxis.maxNumber / yAxis.splitNumber * n), grid.left - yAxis
						.splitLen - lineWidth - yAxis.marginSplit, grid.bottom - (grid.bottom - grid.top) / yAxis
						.splitNumber * n + lineWidth)
				}

				//x轴横轴 一
				ctx.moveTo(grid.left, grid.bottom);
				ctx.lineTo(grid.right, grid.bottom);
				ctx.setTextAlign("center");
				ctx.setTextBaseline("top");
				ctx.setFontSize(xAxis.textSize);
				for (let n = 1; n <= xAxis.splitNumber; n++) {
					//刻度
					ctx.moveTo(grid.left + (grid.right - grid.left) / xAxis.splitNumber * n - lineWidth, grid.bottom);
					ctx.lineTo(grid.left + (grid.right - grid.left) / xAxis.splitNumber * n - lineWidth, grid.bottom +
						xAxis.splitLen);
					ctx.fillText(this.toFixedNumber(1, xAxis.maxNumber / xAxis.splitNumber * n), grid.left + (grid.right -
							grid.left) / xAxis.splitNumber * n - lineWidth, grid.bottom + xAxis.splitLen + lineWidth +
						xAxis.marginSplit)
				}
				ctx.stroke();
				//绘制线条函数方法new function
				let drawLineData = (dataX, dataY, ix) => {
					dataX.forEach((ele, indx) => {
						let x = grid.left + (grid.right - grid.left) * (ele / xAxis.maxNumber) - lineWidth,
							y = grid.bottom - (grid.bottom - grid.top) * (dataY[indx] / yAxis.maxNumber) +
							lineWidth;
						if (indx >= dataX.length - 1) {} else {
							let x2 = grid.left + (grid.right - grid.left) * (dataX[indx + 1] / xAxis
									.maxNumber) - lineWidth,
								y2 = grid.bottom - (grid.bottom - grid.top) * (dataY[indx + 1] / yAxis
									.maxNumber) + lineWidth;
							let dis = {
								x: x + (x2 - x) / 3 + (x2 - x) / 2,
								y: y2 - y > 0 ? y + (y2 - y) / 3 - (y2 - y) / 5 : y + (y2 - y) / 3 + (y2 -
									y) / 5
							};
							//绘制圆点之间连线
							ctx.beginPath();
							ctx.setStrokeStyle(lineStyle[ix].color);
							ctx.setLineDash([lineStyle[ix].dash]);
							ctx.moveTo(x, y);
							if (lineStyle[ix].lineDotType == "line") { //直线连接
								ctx.lineTo(x2, y2);
							} else if (lineStyle[ix].lineDotType == "wave") { //二次贝塞尔曲线连接
								ctx.quadraticCurveTo(dis.x, dis.y, x2, y2);
							}
							ctx.stroke();
						}
						//绘制圆点arc
						ctx.beginPath();
						ctx.setFillStyle(dotStyle[ix].color);
						ctx.setLineDash([dotStyle[ix].dash]);
						ctx.arc(x, y, dotStyle[ix].arcR, 0, 2 * Math.PI);
						ctx.fill();
						ctx.stroke();
						//绘制圆点的文字坐标
						// ctx.beginPath();
						// ctx.setFillStyle("#2C405A");
						// ctx.fillText(ele+","+dataY[indx], x,y);
						// ctx.fill();
					})
				}
				//遍历折线数据
				dataJSON.forEach((e, v) => {
					drawLineData(e.x, e.y, v);
				})
				ctx.draw();
			}
		}
	};
</script>

<style lang="less">
	.amap-marker-label {
		background-color: rgb(255, 255, 255);
		border: 1px dashed rgb(255, 204, 102) !important;
	}

	.content-window-card {
		position: relative;
		box-shadow: none;
		bottom: 0;
		left: 0;
		width: auto;
		padding: 0;
	}

	.content-window-card p {
		height: 2rem;
	}

	.custom-info {
		border: solid 1px silver;
	}

	.info-top {
		position: relative;
		background: none repeat scroll 0 0 #f9f9f9;
		border-bottom: 1px solid #ccc;
		border-radius: 5px 5px 0 0;
	}

	.info-top div {
		display: inline-block;
		color: #333333;
		font-size: 14px;
		font-weight: bold;
		line-height: 31px;
		padding: 0 10px;
	}

	.info-top img {
		position: absolute;
		top: 10px;
		right: 10px;
		transition-duration: 0.25s;
	}

	.info-top img:hover {
		box-shadow: 0px 0px 5px #000;
	}

	.info-middle {
		font-size: 12px;
		padding: 10px 6px;
		line-height: 20px;
	}

	.info-bottom {
		height: 0px;
		width: 100%;
		clear: both;
		text-align: center;
	}

	.info-bottom img {
		position: relative;
		z-index: 104;
	}

	span {
		margin-left: 5px;
		font-size: 11px;
	}

	.info-middle img {
		float: left;
		margin-right: 6px;
	}

	.m-map {
		width: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;

		.zhezhaoMap {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9;
		}
	}

	.m-map .map {
		width: 100%;
		height: 170vh;
		text-align: center;
		position: relative;
		top: -50vh;
	}

	.m-map .search {
		overflow: scroll;
		position: absolute;
		top: 10px;
		left: 10px;
		width: 500px;
		height: 30px;
		padding-left: 5px;
		z-index: 1;
		border: 1px solid #ccc;
		line-height: 20px;
		outline: none;
	}

	.m-map .result {
		max-height: 300px;
		overflow: auto;
		margin-top: 10px;
	}

	.m-map1 {
		margin-left: 5vw;
	}

	#poster {
		// overflow: hidden;
		width: 100%;
		height: 100%;
	}

	.map-box {
		width: 100vw;
		height: 100%;
		display: flex;
		flex-flow: row nowrap;
		position: relative;
	}

	/deep/.amap-logo {
		display: none;
		opacity: 0 !important;
	}

	/deep/.amap-copyright {
		opacity: 0;
	}

	/deep/.amap-zoomcontrol {
		display: none !important;
		opacity: 0;
	}

	.jiluBigBox {
		// padding-top: 600rpx;
		width: 750rpx;
		/* height: 1000rpx; */
		// position: relative;
		// top: 1000rpx;
		padding-top: 900rpx;
		padding-bottom: 150rpx;

		// left:30rpx;
		/* background-color:#000000; */
		.jiluBox1 {
			width: 690rpx;
			height: 600rpx;
			left: 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			position: relative;
			background-color: #242529;

			.userPhoto {
				overflow: hidden;
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				top: -30rpx;
				right: 30rpx;
				border-radius: 50%;
				// background-color: blue;
			}

			.distance {
				position: absolute;
				top: 22rpx;
				left: 34rpx;
				height: 140rpx;
				font-size: 120rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 140rpx;
				letter-spacing: -3rpx;

				.km {
					width: 72rpx;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 400;
					color: #A2A5B9;
					line-height: 50rpx;
				}
			}

			.uesrName {
				// width: 140rpx;
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 42rpx;
				position: absolute;
				right: 27rpx;
				top: 100rpx;
			}

			.title {
				height: 33rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #5B5E67;
				line-height: 33rpx;
				position: absolute;
				top: 157rpx;
				left: 43rpx;
			}

			.creatTime {
				height: 33rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #5B5E67;
				line-height: 33rpx;
				position: absolute;
				top: 157rpx;
				right: 43rpx;
			}

			.lineColor {
				width: 690rpx;
				height: 6rpx;
				background: linear-gradient(270deg, #FF654C 0%, #FFC000 50%, #14D59C 100%);
				position: absolute;
				top: 223rpx;
				left: 1rpx;

				.lowSpeed {
					width: 104rpx;
					height: 28rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #14D59C;
					line-height: 28rpx;
					position: absolute;
					top: -11rpx;
					left: 43rpx;
					text-align: center;
				}

				.fastSpeed {
					width: 104rpx;
					height: 28rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #FF5049;
					line-height: 28rpx;
					position: absolute;
					text-align: center;
					top: -11rpx;
					right: 43rpx;
				}
			}

			.boxLine {
				width: 650rpx;
				height: 2rpx;
				background-color: #3F4047;
				position: absolute;
				top: 420rpx;
				left: 20rpx;
			}

			.sportData {
				width: 690rpx;
				height: 170rpx;
				position: absolute;
				top: 250rpx;
				font-weight: bold;
				color: #A2A5B9;
				line-height: 53px;
				display: flex;
				text-align: center;
				flex-flow: row nowrap;

				.dataBox {
					width: 228rpx;
					height: 100%;
					.dataNum {
						font-size: 46rpx;
						font-weight: bold;
						color: #A2A5B9;
						
					}
					.dataName {
						// width: 104px;
						height: 37rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #5B5E67;
						line-height: 37rpx;
					}
				}

				.dateLine {
					width: 2rpx;
					height: 80rpx;
					background: #3F4047;
					position: relative;
					top: 40rpx;
				}
			}
		}

		.jiluBox2 {
			width: 690rpx;
			left: 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			position: relative;
			background-color: #242529;
			padding-bottom: 20rpx;

			.title {
				width: 60rpx;
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: #A2A5B9;
				line-height: 42rpx;
				position: relative;
				top: 23rpx;
				left: 40rpx;
			}

			.kmspeed {
				width: 200rpx;
				height: 37rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #5B5E67;
				line-height: 37rpx;
				position: relative;
				top: 50rpx;
				left: 40rpx;
			}

			.allSpeedBox {
				width: 100%;
				margin-top: 80rpx;
				// position: relative;
				// top:68rpx;

			}

			.speedLineBox {
				width: 600rpx;
				height: 30rpx;
				display: flex;
				flex-flow: row nowrap;
				position: relative;
				left: 60rpx;
				margin-bottom: 30rpx;

				.lineNum {
					width: 27rpx;
					height: 37rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 37rpx;
				}

				.lineSpeed {
					width: 70rpx;
					height: 37rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 37rpx;
					margin-left: 20rpx;
				}

				.speedColor {
					width: 460rpx;
					height: 24rpx;
					position: relative;
					margin-top: 7rpx;
					background-color: #373B3C;
					margin-left: 20rpx;

					.speedLine {
						// width: 318rpx;
						height: 24rpx;
						border-radius: 4rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.speedFast {
						background: linear-gradient(270deg, #FF4D4C 0%, #FF8C00 100%);
					}

					.speedLow {
						background: #14D59C;
					}
				}
			}

			.fengexian {
				width: 560rpx;
				height: 2rpx;
				margin-top: 16rpx;
				margin-left: 100rpx;
				background-color: #3F4047;
			}

			.pinjunSpeed {
				width: 292rpx;
				height: 37rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #5B5E67;
				line-height: 37rpx;
				margin-top: 34rpx;
				margin-left: 100rpx;
			}
		}

		.jiluBox3 {
			width: 690rpx;
			left: 30rpx;
			// height: 621rpx;
			padding-bottom: 40rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			position: relative;
			background-color: #242529;

			.danwei1 {
				width: 180rpx;
				height: 28rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #666666;
				line-height: 28rpx;
				position: absolute;
				top: 177rpx;
				left: 20rpx;
				z-index: 9;
			}

			.danwei2 {
				width: 100rpx;
				height: 28rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #666666;
				line-height: 28rpx;
				position: absolute;
				bottom: 50rpx;
				right: 22rpx;
				z-index: 9;
			}

			.title {
				width: 60rpx;
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: #A2A5B9;
				line-height: 42rpx;
				position: relative;
				top: 23rpx;
				left: 40rpx;
			}

			.bupinDataBox {
				width: 460rpx;
				height: 100rpx;
				display: flex;
				flex-flow: row nowrap;
				position: relative;
				top: 40rpx;
				left: 115rpx;
				justify-content: space-around;

				.bupinData {
					text-align: center;

					.bupinDataNum {
						// width: 67rpx;
						height: 53rpx;
						font-size: 46rpx;
						font-weight: bold;
						color: #14D59C;
						line-height: 53rpx;
					}

					.bupinDataName {
						width: 104rpx;
						height: 37rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #5B5E67;
						line-height: 37rpx;
						margin-top: 10rpx;
					}
				}

			}
		}
	}

	.fenxiangImageBox {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.closePhoto {
		width: 450rpx;
		height: 86rpx;
		background: #373B3C;
		border-radius: 20rpx;
		position: absolute;
		bottom: 30rpx;
		left: 150rpx;
		text-align: center;
		letter-spacing: 4rpx;
		line-height: 86rpx;
		color: white;
		font-size: 28rpx;
	}
	.shareBox {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #1A1A1A;
		width: 100vw;
		height: 150rpx;
		z-index: 9;
	}
	.sharePhoto {
		width: 250rpx;
		height: 86rpx;
		// background: #373B3C;
		background-color: rgba(20, 213, 156, 1);
		border-radius: 20rpx;
		position: fixed;
		bottom: 30rpx;
		right: 80rpx;
		text-align: center;
		letter-spacing: 4rpx;
		line-height: 86rpx;
		color: white;
		font-size: 28rpx;
		z-index: 99;
	}
	.savePhoto {
		width: 250rpx;
		height: 86rpx;
		// background: #373B3C;
		background-color: #373B3C;
		border-radius: 20rpx;
		position: fixed;
		bottom: 30rpx;
		left: 80rpx;
		text-align: center;
		letter-spacing: 4rpx;
		line-height: 86rpx;
		color: white;
		z-index: 99;
		font-size: 28rpx;
	}

	.allImage {
		width: 100%;
		height: 100%;
	}

	.fenxiangImage {
		width: 600rpx;
		height: 1500rpx;
		left: 75rpx;
		// background-color: blue;
		position: absolute;
		top: 30rpx;
		// z-index: 99;
	}

	.text-center {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.mar-bot20 {
		margin-bottom: 20rpx;
	}

	.line-chart {
		padding: 20rpx;
		padding-top: 50rpx;
	}

	.chart {
		width: 100%;
		height: 360rpx;
		background: #242529;
		border-radius: 10rpx;
		// border: 1rpx solid #ccc;
		color: #5B5E67;
	}
</style>