yyky_new_app/pages/index/index.vue

<template>
	<view>
		<!-- v-if="!deviceCode" -->
		<view class="map-box" v-if="!deviceCode">

			<!-- <view class="mp-header">
				<view class="sys-head" :style="'height:'+(statusBarHeight)+'px;'"></view>
				<view class="serch-box" :style="{height:barHeight+'px'}">
					<view class="serch-wrapper flex" @click="goEquList">
						<image class="logo" src='/static/img/addequ.png' mode="" />
						<view class="name">奶奶</view>
						<image class="arrow" src="/static/img/arrow.png" mode=""></image>
					</view>
				</view>
			</view> -->
			<!-- <map id='map' :latitude="latitude" :longitude="longitude" :markers="covers" :polyline="polyline"
				:scale="scale">
			</map> -->
			<!-- v-if="!deviceId" -->
			<view class="top-input" >
				<image src="../../static/img/noneEqu.png" mode=""></image>
				<view class="btn-box" @click="goEquList">
					<view class="btn">添加设备</view>
				</view>
			</view>
			<view class="info-box" v-if="deviceId" @click="goBindPage">
				<view class="scroll-view_H">
					<scroll-view class="scroll-view-content" scroll-x @scroll="scroll" scroll-left="0">
						<view id="demo1" class="scroll-view-item_H uni-bg-red" @click="toHeartRate">
							<image class="bg-image" src="../../static/img/heart.png" mode=""></image>
							<view class="text-wrapper">
								<view class="text-overlay black">
									<view class="top-box">
										<view class="top-left">
											<view class="english">Heart rate</view>
											<view class="chinese">心率</view>
										</view>
										<image class="top-right"
											src="https://app.tjzhxx.cn:11443/image/enterprise_icon.png" mode=""></image>
									</view>
									<view class="under-box">
										<view class="under-left">
											<view class="number">98</view>
											<view class="unit">bpm</view>
										</view>
										<view class="under-right">
											<view class="range">75～96 bpm</view>
											<view class="range-word">平局区间</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view id="demo2" class="scroll-view-item_H uni-bg-green">
							<image class="bg-image" src="../../static/img/sleep.png" mode=""></image>
							<view class="text-wrapper white">
								<view class="text-overlay">
									<view class="top-box">
										<view class="top-left">
											<view class="english">Sleep log</view>
											<view class="chinese">睡眠</view>
										</view>
									</view>
									<view class="under-box">
										<view class="under-left white">
											<view class="number">5h</view>
											<view class="unit">28 min</view>
										</view>
										<view class="under-left white">
											<view class="number">66%</view>
											<view class="unit">深睡</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view id="demo3" class="scroll-view-item_H uni-bg-blue">
							<image class="bg-image" src="../../static/img/breathe.png" mode=""></image>
							<view class="text-wrapper white">
								<view class="text-overlay">
									<view class="top-box">
										<view class="top-left">
											<view class="english">Breathe log</view>
											<view class="chinese">呼吸</view>
										</view>
									</view>
									<view class="under-box">
										<view class="under-left white">
											<view class="number">21次</view>
											<view class="unit">最高</view>
										</view>
										<view class="under-left white">
											<view class="number">17次</view>
											<view class="unit">平均呼吸</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="sos-btn">
					<image src="../../static/img/sos.png" mode=""></image>
				</view>
			</view>

			<view class="icon-box-right" v-if="showBtn">
				<image src="/static/image/calendarIcon.png" mode="" @click="showDayPicker = true"></image>
			</view>
			<van-loading class="loading" v-if="showLoading" type="spinner" color="#000" />
		</view>
		<!-- #ifdef APP-PLUS||H5 -->
		<view class="status_bar" v-if="deviceCode"></view>
		<view class="aaa" v-if="deviceCode" style="margin-top: var(--status-bar-height);margin-bottom: var(--status-bar-height);">
			<uni-nav-bar title="" height="var(--status-bar-height)" left-icon="left" backgroundColor="#F35546" color="#fff" @clickLeft="webviewback"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="" v-if="deviceCode">
			<!-- <web-view :src="h5url"></web-view> -->
			<!-- <web-view style="position: absolute; top: 100px;z-index: 2;" src="https://openapiweb.slaaplekker.cn/reportH5?accessToken=9f36cea4a4f64ba8bfb680ff98d98c1b&sn=289935886000036"></web-view> -->
			<web-view ref="webview" v-if="h5url"  style="position: absolute; top: 100px;z-index: 2;" :src="h5url"></web-view>
		</view>
<!-- 
		<van-popup :show="showDayPicker" position="bottom">
			<van-datetime-picker @cancel="showDayPicker=false" @confirm="onConfirm" :value="currentDay" type="date" />
		</van-popup> -->
	</view>
</template>

<script>
	// import AMapLoader from "@amap/amap-jsapi-loader";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import * as hrApi from '@/api/sleep/index.js';
	// import * as infoApi from '@/api/info/index.js';
	// import dayjs from "@/plugin/dayjs/dayjs.min.js";
	// #ifdef MP
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	// 获取导航栏高度
	const barHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
	// #endif
	// #ifdef APP-PLUS
	// import web from 'https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js'
	// const webview =web.webview
	// #endif
	export default {
		computed: mapGetters(['deviceCode', 'isLogin']),
		data() {
			return {
				statusBarHeight: statusBarHeight,
				barHeight: barHeight,
				showPage: false,
				aaa: [117.662369, 39.032391],
				showInfo: true,
				map: null,
				windowHeight: 0,
				mapHeight: 0,
				timer: null,
				showDayPicker: false, //日
				dateTime: '',
				navigationBarTitle: '定位',
				currentDay: new Date().getTime(),
				showLoading: false,

				isDisabled: false,
				isStart: false,
				playIndex: 1,
				showBtn: false, //展示右边日历按钮
				scale: 13,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.0313466,
				longitude: 117.6637305,
				// latitude: '',
				// longitude: '',
				// deviceCode: '',
				onlineForce: false,
				onlineStatus: false,
				gpsUpdateTime: '',
				addressDesc: '',
				// 标记点
				// covers: [{
				// 		id: 1,
				// 		width: 42,
				// 		height: 47,
				// 		// rotate: 270,
				// 		// latitude: '',
				// 		// longitude: '',
				// 		latitude: 39.0313466,
				// 		longitude: 117.6637305,
				// 		iconPath: "https://app.tjzhxx.cn:11443/image/enterprise_icon.png",
				// 		// callout: {
				// 		//         content: "陕A·88888", // 车牌信息
				// 		//         display: "ALWAYS",
				// 		//         fontWeight: "bold",
				// 		//         color: "#5A7BEE", //文本颜色
				// 		//         fontSize: "12px",
				// 		//         bgColor: "#ffffff", //背景色
				// 		//         padding: 5, //文本边缘留白
				// 		//         textAlign: "center",
				// 		// },
				// 		// anchor: {
				// 		//         x: 0.5,
				// 		//         y: 0.5,
				// 		// }
				// 	},
				// 	// 找到当前数据得id，在这个数据得前面造出一个没有id得json，用作北京图片，前提是经纬度一样
				// 	{
				// 		id: 2,
				// 		width: 47,
				// 		height: 49,
				// 		latitude: 39.037,
				// 		longitude: 117.660,
				// 		iconPath: "https://app.tjzhxx.cn:11443/image/gender_man.png",
				// 	},
				// 	{
				// 		// id: 3,
				// 		width: 40,
				// 		height: 45,
				// 		latitude: 39.037,
				// 		longitude: 117.660,
				// 		iconPath: "https://app.tjzhxx.cn:11443/image/enterprise_icon.png",
				// 	},
				// 	{
				// 		id: 3,
				// 		width: 42,
				// 		height: 47,
				// 		latitude: 39.052,
				// 		longitude: 117.657,
				// 		iconPath: "https://app.tjzhxx.cn:11443/image/enterprise_icon.png",
				// 	},

				// ],
				covers:[],

				// 线
				polyline: [],

				// 坐标数据
				coordinates: [{
						id: 1,
						latitude: 23.098994,
						longitude: 113.322520,
					},
					{
						id: 2,
						latitude: 23.097994,
						longitude: 113.323520,
						// iconPath: '/image/location.png',

					},

				],
				coordinate: [], //坐标数据

				posi: { // 汽车定位点的数据，后面只用改latitude、longitude即可
					id: 1,
					width: 32,
					height: 32,
					latitude: 0,
					longitude: 0,
					iconPath: "/static/image/positonimg.png",
					callout: {
						content: "陕A·85Q1Q", // 车牌信息
						display: "BYCLICK",
						fontWeight: "bold",
						color: "#5A7BEE", //文本颜色
						fontSize: "12px",
						bgColor: "#ffffff", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
					anchor: {
						x: 0.5,
						y: 0.5,
					},
				},
				h5url:'',// 当前H5页面的URL
			}
		},
		beforeCreate() {
			console.log('我只行啊')
			uni.setStorageSync('useSleep', true);
		},
		onReady() {
			// 创建map对象
			this.map = uni.createMapContext('map');
			// 获取屏幕高度
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight;
				}
			});
		},
		onShow() {
			// this.initAmap();
			this.getLocationInfo()
			// this.getHrdata()
			console.log(this.deviceCode,this.h5url,'deviceCodedeviceCode')
			if(this.deviceCode){
				this.geth5Url()
			}
		},
		onPageUnload: function() {

			uni.navigateBack({
				delta: 0
			})
		},
		onLoad() {
			let that =this

			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					console.log(res,'我是定位接口得返回数据')
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				},
				fail: function (error) {
				        console.log('获取位置信息失败:', error.errMsg);
				        // 或者将错误信息显示在页面上
				        // this.errorMessage = '获取位置信息失败: ' + error.errMsg;
				    }
			});
			// #ifdef APP-PLUS
			  this.setWebviewHeight()
			// #endif

		},
		onHide: function() {
			uni.setStorageSync('useSleep', false);
		},

		mounted() {

		},
		methods: {
			webviewback(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
				// webview.navigateBack({
				// 	delta:1
				// })
				// webview.postMessage({data:'deletefile'})
			},
		
			setWebviewHeight() {
			  // #ifdef APP-PLUS
			  let height = 0; //定义动态的高度变量，如高度为定值，可以直接写
			  uni.getSystemInfo({
			    //成功获取的回调函数，返回值为系统信息
			    success: sysinfo => {
			      height = sysinfo.windowHeight - 47; //自行修改，自己需要的高度
			    },
			  });
			  const currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
			  setTimeout(function() {
			      const wv = currentWebview.children()[0];
			      wv.setStyle({				
			      top: 68, //设置web-view距离顶部的距离以及自己的高度，单位为px
			      height: height
			    });
			  }, 1000); //如页面初始化调用需要写延迟
			  // #endif
			},
			geth5Url(){
				// this.h5url='https://openapiweb.slaaplekker.cn/reportH5?accessToken=9f36cea4a4f64ba8bfb680ff98d98c1b&sn=289935886000036'
				// return
				hrApi.geth5url({sn:this.deviceCode}).then(res=>{
					console.log(res,this.h5url,777)
					this.h5url=res.data.httpsURL
					this.$forceUpdate();
					// this.$set(this,"h5url",res.data.httpsURL)
				})
			},
			getHrdata(){
				hrApi.getHrInfo({sn:"B1E507CD076164C7",date:"2024-06-30"}).then(res=>{
					console.log('我是首页得心率数据',res)
				})
			},
			toHeartRate() {
				uni.navigateTo({
					url: '/pages/index/condition/heart_rate/index'
				})
			},
			goEquList() {
				console.log('走到这')
				// 记得放开
				if (!this.isLogin) {
					console.log('进来了')
					toLogin();
					return
				}
				console.log('点击了')
				uni.navigateTo({
					url: '/pages/equ_list/index',
				})
			},
			beforeleave() {
				console.log('出发了');
				this.showPage = false
				//判断是上一个页面进入(返回)，还是直接进入这个页面(回首页)
				let pages = getCurrentPages()
				console.log(pages.length, 5555);

				pages.length = 2
				console.log(pages.length, 6666);
				console.log(this.showBtn, '轨迹');
				console.log(!this.showBtn, '定位');
				if (pages.length == 2 && this.showBtn) {
					this.showPage = true
					uni.navigateTo({
						url: '/pages/index/map/index'
					})
				} else {
					this.showPage = true
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			onConfirm(e) {
				this.dateTime = this.formatDate(e.detail)
				this.showDayPicker = false
				this.initAmap(3)
			},
			getLocationInfo() {
				this.showLoading = true

				return
				infoApi.getLocationInfo({
					deviceId: this.deviceId
				}).then(res => {
					this.showLoading = false
					this.latitude = res.data.lat
					this.longitude = res.data.lng
					this.covers[0].latitude = res.data.lat
					this.covers[0].longitude = res.data.lng
					this.deviceCode = res.data.deviceCode
					this.onlineForce = res.data.onlineForce
					this.onlineStatus = res.data.onlineStatus
					this.gpsUpdateTime = this.formaTime(res.data.gpsUpdateTime)
					this.addressDesc = res.data.addressDesc
				})
			},
			formaTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			goFenceList() {
				let center = `${this.longitude},${this.latitude}`
				uni.navigateTo({
					url: `/pages/index/map/fencelist?center=${center}`,
				});
			},
			goBindPage() {

			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},

			initAmap(type) {
				let _this = this;
				// _this.addMarkers()
				if (type === 2) {
					this.showLoading = true
					infoApi.refreshLocation({
						deviceId: this.deviceId
					}).then(res => {
						this.showLoading = false
						this.latitude = res.data.lat
						this.longitude = res.data.lng
						this.covers[0].latitude = res.data.lat
						this.covers[0].longitude = res.data.lng
						this.gpsUpdateTime = this.formaTime(res.data.gpsUpdateTime)
						this.addressDesc = res.data.addressDesc
					})
				}
				if (type === 3) {
					uni.navigateTo({
						url: '/pages/index/map/driving'
					})
					// return
					// this.showBtn = true
					// this.scale = 18
					// wx.setNavigationBarTitle({
					// 	title: "轨迹"
					// })
					// // this.onLoad()//重新调方法 改标题，有问题
					// this.dateTime = this.dateTime ? this.dateTime : this.formatDate(new Date())
					// let params = {
					// 	deviceId: this.deviceId,
					// 	dateTime: this.dateTime,
					// 	// deviceId:this.deviceId,
					// 	// dateTime:this.formatDate(new Date())
					// }
					// infoApi.getLocationLocus(params).then(res => {
					// 	if (res.code === 0 && res.data.length) {
					// 		this.coordinate = res.data.map(item => {
					// 			console.log('11111');
					// 			return {
					// 				latitude: item.lat,
					// 				longitude: item.lng,
					// 			}
					// 		})
					// 		_this.polyline = [{
					// 			points: this.coordinate,
					// 			color: '#F35546',
					// 			width: 4,
					// 			dottedLine: false,
					// 		}];
					// 		// TODO 找相关api，将轨迹缩放到合适比例，将起点终点放上图标
					// 		_this.map.translateMarker({
					// 			markerId: 1,
					// 			fail(e) {
					// 				// 轨迹回放失败
					// 			},
					// 		});
					// 	} else {
					// 		_this.polyline = [{
					// 			points: [],
					// 			color: '#F35546',
					// 			width: 4,
					// 			dottedLine: false,
					// 		}];
					// 		this.$util.Tips({
					// 			title: `${this.dateTime}暂无轨迹数据`,
					// 		}, () => {

					// 		});
					// 	}

					// })

				}

			},
			//         start() {
			//                 this.isStart = true;
			//                 this.isDisabled = true;
			//                 let data = this.coordinate;
			//                 let len = data.length;
			//                 let datai = data[this.playIndex];
			//                 let _this = this;

			//                 _this.map.translateMarker({
			//                         markerId: 1,
			//                         autoRotate: true,
			//                         destination: {
			//                                 longitude: datai.longitude, // 车辆即将移动到的下一个点的经度
			//                                 latitude: datai.latitude, // 车辆即将移动到的下一个点的纬度
			//                         },
			//                         duration: 700,
			//                         complete: function() {
			//                                 _this.playIndex++;
			//                                 if (_this.playIndex < len) {
			//                                         _this.start(_this.playIndex, data);
			//                                 } else {
			//                                         console.log('okokok');
			//                                         uni.showToast({
			//                                                 title: '播放完成',
			//                                                 duration: 1400,
			//                                                 icon: 'none'
			//                                         });
			//                                         _this.playIndex = 0;
			//                                         _this.isStart = false;
			//                                         _this.isDisabled = false;
			//                                 }
			//                         },
			//                         animationEnd: function() {
			//                                 // 轨迹回放完成 处理H5端
			//                                 _this.playIndex++;
			//                                 if (_this.playIndex < len) {
			//                                         _this.start(_this.playIndex, data);
			//                                 } else {
			//                                         console.log('okokok');
			//                                         uni.showToast({
			//                                                 title: '播放完成',
			//                                                 duration: 1400,
			//                                                 icon: 'none'
			//                                         });
			//                                         _this.playIndex = 0;
			//                                         _this.isStart = false;
			//                                         _this.isDisabled = false;
			//                                 }
			//                         },
			//                         fail(e) {
			//                                 // 轨迹回放失败
			//                         },
			//                 });
			//         },
			// },

			// addMarkers() {
			//         let _this = this;
			//         const positions = [{
			//                 latitude: 23.099994,
			//                 longitude: 113.324520,
			//         }, {
			//                 latitude: 23.099994,
			//                 longitude: 113.322520,
			//         }, {
			//                 latitude: 23.099994,
			//                 longitude: 113.326520,
			//         }, {
			//                 latitude: 23.096994,
			//                 longitude: 113.329520,
			//         }]

			//         const markers = []

			//         positions.forEach((p, i) => {
			//                 console.log(i)
			//                 markers.push(
			//                         Object.assign({}, {
			//                                 id: i + 1,
			//                                 iconPath: "http://cdn.zhoukaiwen.com/car.png",
			//                                 width: 50,
			//                                 height: 50,
			//                                 joinCluster: true, // 指定了该参数才会参与聚合
			//                                 label: {
			//                                         width: 50,
			//                                         height: 30,
			//                                         borderWidth: 1,
			//                                         borderRadius: 10,
			//                                         bgColor: '#ffffff',
			//                                         content: `label ${i + 1}`
			//                                 }
			//                         }, p)
			//                 )
			//         })
			//         _this.map.addMarkers({
			//                 markers,
			//                 clear: false,
			//                 complete(res) {
			//                         console.log('addMarkers', res)
			//                 }
			//         })
			// },
			initmap(type) {
				AMapLoader.load({
						// key: '2d7215a1d0f8893f2417d134af7c3798',
						key: 'c968deab485d6e688e7c68689722ffb4',
						version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
						plugins: [
							'AMap.Autocomplete',
							'AMap.PlaceSearch',
							'AMap.Scale',
							'AMap.OverView',
							'AMap.ToolBar',
							'AMap.MapType',
							'AMap.PolyEditor',
							'AMap.CircleEditor',
							'MarkerClusterer',
							'AMap.Geocoder'
						]

					})
					.then((AMap) => {
						console.log('AMap', AMap)
						// 地图初始化
						// Map构造函数第一个传参的map为初始化地图的容器的id,第二个传参是配置对象
						var map = new AMap.Map('amap', {
							zoom: 15, //显示的缩放级别
							// zooms: [2, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
							// center: [108.954239, 34.265472], //todo 中心点坐标
							mapStyle: 'amap://styles/macaron', //todo 地图样式
							resizeEnable: true //是否监控地图容器尺寸变化
						});
						/** 定位 */
						let marker = new AMap.Marker();
						if (this.aaa.length) {
							map.setCenter(this.aaa);
							map.add(marker);
							marker.setPosition(this.aaa);
						}

						/** 轨迹 */
						if (type === 3) {
							this.showInfo = false
							console.log('进来');
							map.clearMap();
							marker?.hide()
							const historyList = [{
									"lat": 39.91055750509886,
									"lng": 116.4036806180665,
									"gpsTime": "2023-10-08 13:47:14",
									"gpsId": 867605051108718,
									"compensate": null
								},
								{
									"lat": 39.910380195191074,
									"lng": 116.74977990361894,
									"gpsTime": "2023-10-08 14:08:14",
									"gpsId": 867605051108718,
									"compensate": null
								},
								{
									"lat": 39.91055750509886,
									"lng": 116.4036806180665,
									"gpsTime": "2023-10-08 14:26:00",
									"gpsId": 867605051108718,
									"compensate": null
								},
								{
									"lat": 39.91055750509886,
									"lng": 116.4036806180665,
									"gpsTime": "2023-10-08 14:27:00",
									"gpsId": 867605051108718,
									"compensate": null
								},
								{
									"lat": 39.91055750509886,
									"lng": 116.4036806180665,
									"gpsTime": "2023-10-08 14:30:00",
									"gpsId": 867605051108718,
									"compensate": null
								},
								{
									"lat": 39.910557505765034,
									"lng": 116.40368361866521,
									"gpsTime": "2023-10-08 14:31:00",
									"gpsId": 867605051108718,
									"compensate": null
								},
								{
									"lat": 39.032391,
									"lng": 117.662369,
									"gpsTime": "2023-10-08 19:10:00",
									"gpsId": 867605051108718,
									"compensate": null
								}
							]
							AMap.plugin('AMap.Driving', function() {
								if (historyList.length >= 2) {
									var drivingOption = {
										policy: AMap.DrivingPolicy
											.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
										ferry: 1, // 是否可以使用轮渡
										province: '京', // 车牌省份的汉字缩写  
									}
									// 构造路线导航类
									var driving = new AMap.Driving(drivingOption)

									// 根据起终点经纬度规划驾车导航路线
									driving.search(new AMap.LngLat(historyList[0].lng, historyList[0]
											.lat),
										new AMap.LngLat(historyList[historyList.length - 1].lng,
											historyList[historyList.length - 1].lat),
										function(status, result) {
											if (status === 'complete') {
												if (result.routes && result.routes.length) {
													console.log(result.routes, 'result.routes');
													// 绘制第一条路线，也可以按需求绘制其它几条路线
													drawRoute(result.routes[0])
													console.log('绘制驾车路线完成')
												}
											} else {
												console.log('获取驾车数据失败：' + result)
											}
										});

									function drawRoute(route) {
										var path = parseRouteToPath(route)

										var startMarker = new AMap.Marker({
											position: path[0],
											icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
											map: map
										})

										var endMarker = new AMap.Marker({
											position: path[path.length - 1],
											icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
											map: map
										})

										var routeLine = new AMap.Polyline({
											path: path,
											isOutline: true,
											outlineColor: '#ffeeee',
											borderWeight: 2,
											strokeWeight: 5,
											strokeOpacity: 0.9,
											strokeColor: '#F35546',
											lineJoin: 'round'
										})

										map.add(routeLine);

										// 调整视野达到最佳显示区域
										map.setFitView([startMarker, endMarker, routeLine])
									}

									// 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
									// DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
									function parseRouteToPath(route) {
										var path = []

										for (var i = 0, l = route.steps.length; i < l; i++) {
											var step = route.steps[i]

											for (var j = 0, n = step.path.length; j < n; j++) {
												path.push(step.path[j])
											}
										}

										return path
									}

								}
							})
						}

					})
					.catch((e) => {
						console.error(e) //加载错误提示
					})
			},
		}
	};
</script>

<style lang="scss">
	.map-box {
		z-index: 888;
		width: 100%;
		height: 100vh;
		position: relative;

		.mp-header {
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			/* #ifdef H5 */
			padding-bottom: 20rpx;

			/* #endif */
			// background-color: $theme-color;
			.serch-box {
				height: 100%;
				width: 210rpx;
				background-color: #fff;
				border-radius: 35rpx;
				// margin: 33rpx 0 0 30rpx;
				margin: 0 0 0 30rpx;

				.serch-wrapper {
					height: 100%;
					align-items: center;
					padding: 19rpx;
					box-sizing: border-box;

					image {
						width: 118rpx;
						height: 42rpx;
					}

					.logo {
						width: 32rpx;
						height: 32rpx;
						display: flex;
					}

					.arrow {
						width: 48rpx;
						height: 48rpx;
					}

					.name {
						flex: 1;
						text-align: center;
						color: #7C7C7C;
						font-size: 36rpx;
						margin: 0 13rpx 0 18rpx;
						white-space: nowrap;
					}

					.input {
						display: flex;
						align-items: center;
						/* #ifdef MP */
						width: 305rpx;
						/* #endif */
						height: 50rpx;
						padding: 0 0 0 30rpx;
						background: rgba(247, 247, 247, 1);
						border: 1px solid rgba(241, 241, 241, 1);
						border-radius: 29rpx;
						color: #BBBBBB;
						font-size: 28rpx;

						.iconfont {
							margin-right: 20rpx;
						}
					}
				}
			}

		}

		#map {
			width: 100%;
			height: 100%;
		}

		::v-deep .uni-image[src^="https://app.tjzhxx.cn:11443/"] {
			border: 2px solid red;
			/* 添加2px宽的红色边框 */
			border-radius: 50%;
			/* 可选，设置为圆形边框 */
		}

		.custom-marker {
			position: relative;
			width: 42px;
			/* 根据您的标记点图标宽度调整 */
			height: 47px;
			/* 根据您的标记点图标高度调整 */
		}

		.custom-marker img {
			width: 100%;
			height: 100%;
			/* 在这里添加您需要的自定义CSS样式 */
			border: 1rpx solid red;
		}

		.loading {
			z-index: 999;
			width: 100%;
			top: 30%;
			// left:50%;
			position: absolute;
		}

		.top-input::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #FF0000;
			opacity: 0.1;
			filter: blur(50px);
			z-index: 66;
			pointer-events: none;
		}

		.top-input {
			width: 70%;
			height: 45%;
			top: 20%;
			left: 15%;
			text-align: center;
			position: absolute;
			box-sizing: border-box;
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
			// border: 1rpx solid red;
			padding: 119rpx 90rpx;

			image {
				width: 100%;
				height: 368rpx;
			}

			.btn-box {
				z-index: 999;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.btn {
					background: rgba(255, 247, 247, 0.3);
					border-radius: 35rpx;
					border: 3rpx solid #EC3534;
					margin-top: 42rpx;
					width: 236rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 600;
					font-size: 36rpx;
					color: #EC3534;
				}
			}
		}

		// .top-input {
		// 	width: 70%;
		// 	height: 45%;
		// 	top: 20%;
		// 	left: 15%;
		// 	text-align: center;
		// 	position: absolute;
		// 	box-sizing: border-box;
		// 	font-size: 32rpx;
		// 	font-weight: 500;
		// 	color: #000000;
		// 	border: 1rpx solid red;
		// 	background: #FF0000;
		// 	opacity: 0.4;
		// 	filter: blur(50px);
		// 	padding:119rpx 90rpx;
		// 	image{
		// 		width: 100%;
		// 		height: 368rpx;
		// 	}
		// 	.btn-box{
		// 		width: 100%;
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: center;
		// 		.btn{
		// 			background: rgba(255,247,247,0.3);
		// 			border-radius: 35rpx;
		// 			border: 3rpx solid #EC3534;
		// 			margin-top: 42rpx;
		// 			width: 236rpx;
		// 			height: 70rpx;
		// 			display: flex;
		// 			align-items: center;
		// 			justify-content: center;
		// 		}
		// 	}

		// }

		.info-box {
			width: 100%;
			height: 40%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			position: absolute;
			bottom: 75rpx;
			z-index: 1000;
			// background-color: #fff;
			padding: 0 30rpx 0;
			font-size: 32rpx;
			font-weight: 400;
			color: #000000;
			box-sizing: border-box;

			.scroll-view_H {
				width: 100%;
				height: 80%;

				/* 设置适当的高度 */
				.scroll-view-content {
					height: 100%;
					white-space: nowrap;
					font-size: 0;
					overflow-x: auto;

					.scroll-view-item_H {
						width: 50%;
						height: 100%;
						display: inline-block;
						font-size: 16px;
						margin-right: 15rpx;
						position: relative;

						.bg-image {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}

						.text-wrapper {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: flex-start;
							padding: 60rpx 30rpx 0;
						}

						.black {
							color: #2D2D2D;
						}

						.white {
							color: #fff;
						}

						.text-overlay {
							// color: white;
							font-size: 16px;
							width: 100%;
							overflow: hidden;

							.top-box {
								display: flex;
								justify-content: space-between;

								.top-left {
									.english {
										font-size: 24rpx;
									}

									.chinese {
										font-size: 32rpx;
									}
								}

								.top-right {
									width: 76rpx;
									height: 76rpx;
									border-radius: 50%;
								}
							}

							.under-box {
								margin-top: 8rpx;
								display: flex;
								justify-content: space-between;
								align-items: flex-end;

								.under-left {
									color: #EC3534;

									.number {
										font-size: 36rpx;
										font-weight: 600;
									}

									.unit {
										font-size: 28rpx;
										font-weight: 500;
									}
								}

								.under-right {
									font-weight: 500;

									.range {
										font-size: 24rpx;
									}

									.range-word {
										font-size: 24rpx;
									}
								}

								.white {
									color: #fff;
								}
							}
						}
					}
				}
			}

			.sos-btn {
				width: 100%;
				height: 140rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}









			.code {
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
			}

			.time {
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				margin: 10rpx 0 16rpx;
				display: flex;
				align-items: center;

				.online-box {
					margin-right: 25rpx;
					width: 55rpx;
					height: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.position {
				// margin-top: 16rpx;
			}
		}

		.icon-box {
			width: 10%;
			height: 30%;
			top: 20%;
			position: absolute;
			left: 5%;
			display: flex;
			background-color: #ECECEC;
			flex-direction: column;
			justify-content: space-between;
			border-radius: 10rpx;

			.img-box {
				text-align: center;
				height: 24.5%;
				line-height: 130rpx;
				background-color: #fff;

				image {
					width: 42rpx;
					height: 42rpx;
				}
			}

			.first {
				border-radius: 10rpx 10rpx 0 0;
			}

			.last {
				border-radius: 0 0 10rpx 10rpx;
			}

			image {
				width: 42rpx;
				height: 42rpx;
			}

		}

		.icon-box-right {
			width: 10%;
			height: 25%;
			top: 10%;
			position: absolute;
			right: 5%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
</style>