<template>
<view style="width: 100vw; height: 100vh; position: relative;">
<map style="width: 100vw; height: 100vh;" id="navi_map" :longitude="longitude" :latitude="latitude" scale="10" :markers="markers" :polyline="polyline"></map>
<!--剩余公里数 -->
<view class="Highways">
<view class="stactInfo-title">
进行中
</view>
<view class="stactInfo-hend">
剩余里程<span>{{distance}}公里</span>
</view>
</view>
<!-- 送往到信息 -->
<view class="userInfo">
<!-- <img src="../../static/toes.png" alt="" /> -->
<view class="carInfp">
<img style="width: 32rpx;height: 32rpx;margin:0 20rpx;" src="/static/lindang.png" alt="" />
<view class="item" style="margin-right: 80rpx;">
车牌：{{userInfo.licencePlate || ''}}
</view>
<view class="item">
驾驶员：{{userInfo.driver || ''}}
</view>
</view>
<view class="doctorInfp">
<view class="stactInfo">
<view class="stactInfo-title">
进行中
</view>
<view class="logo">
<img style="" src="/static/toes.png" alt="" />
</view>
</view>
<!-- 医生 -->
<view class="doctor-name" style="margin-top: -30rpx;">
<view class="item">
操作人员：{{userInfo.doctorName || ''}} | 跟车人员：{{userInfo.nurseName || ''}}
</view>
</view>
<!-- 医院 -->
<view class="hospital" >
<img style="width: 32rpx;height: 32rpx;margin:0 20rpx;" src="/static/lindang.png" alt="" />
<view class="hospital-title">
送往{{userInfo.hospital || ''}}
</view>
</view>
<view class="patient">
<view> 患者信息<span>：{{PatientAray.name || ''}} <span style="margin: 0 10rpx;" v-if="PatientAray.sex == 0">男 </span><span style="margin: 0 10rpx;" v-if="PatientAray.sex == 1">女 </span> {{PatientAray.age || ''}}</span></view>
</view>
</view>
</view>
<!-- 到地方到对话框 完成-->
<u-modal :show="showModal" width="200px" :showConfirmButton="false">
<view class="slot-content">
<view class="slot-content-item">
<img src="/static/toes.png" style="width: 220rpx; height: 150rpx;" alt="" />
<view style="margin-top: 20rpx; margin-bottom: 40rpx;text-align: center;">
已到达医院
</view>
<u-button style="width: 183rpx;
height: 57rpx;
background: #5581FF;
border-radius: 29rpx 29rpx 29rpx 29rpx;"
type="primary" text="我已知晓" @click="showModal=false"></u-button>
</view>
</view>
</u-modal>
</view>
</template>
<script>
// 引入高德地图JSAPI（请替换你的API Key）
// 引入haversine库
import haversine from 'haversine-distance';
import {request} from '../../request/request.js'
export default {
data(){
return {
longitude:null,
latitude:null,
markers:null,
cost: '',
polyline: [],
showModal:false,
distance:'',//米
userInfo:{
},
PatientAray:{}
}
},
mounted() {
},
onLoad() {
this.getRouter()
this.getPatient()
console.log(longitude,latitude);
},
onUnload() {
// 页面销毁时的处理
// 比如取消网络请求、清除定时器、解绑事件等
clearInterval(this.walkInterval)
},
methods:{
Setpolyline(points){
this.polyline = [
{
points: points,
color: "#0091ff",
width: 6
}
]
},
// 计算公里数
onRegionChange(startCoords,endCoords){
// 使用haversine库计算距离
const distance = haversine(startCoords, endCoords);
const distance1 = distance.toFixed(1)
this.distance = (distance1 / 1000).toFixed(1); //计算公里数
},
// 添加标记点
setMarker(origin,currentLocation,points,location) {
const location1 = location.split(',')
const origin1 = origin.split(',')
const currentLocation1 = currentLocation.split(',')
const iconPathDoctor = "/static/toes.png";
const markerWidth = 23;
const markerHeight = 33;
this.markers = [
{
id: 0,
latitude: 116.434446 ,
longitude: 39.90816 ,
width: markerWidth,
height: markerHeight
},
{
id: 0,
latitude: 116.434446 ,
longitude: 39.90816 ,
width: markerWidth,
height: markerHeight
},
{
iconPath: "../../static/toes.png",
id: 2,
latitude: 116.434446 ,
longitude:39.90816 ,
width: 50,
height: 50
}
];
console.log( this.markers,' this.markers');
// 起点和终点的经纬度
const startCoords = { latitude: location1[0], longitude: location1[1] };
const endCoords = { latitude: currentLocation1[0], longitude: currentLocation1[1] };
// 行走动态图
this.getTrajectory(points,startCoords,endCoords,location)
},
getTrajectory(trajectory ,startCoords,endCoords ,location){
uni.hideLoading();
this.showModal = false
// // // 定义当前标记的索引
let currentIndex = 0;
this.onRegionChange(startCoords,endCoords)
// 定义行走速度（单位：毫秒）
const walkSpeed = 40000;
// 定义setInterval函数，每隔一定时间更新标记位置 怎么进行销毁
this.walkInterval = setInterval(async () => {
const res = await request({url:'/dispatchOrder'})
const location = res[0].location.split(',')
// 更新标记位置
const startCoords = {latitude: location[0], longitude: location[1]}
this.onRegionChange(startCoords,endCoords)
if (this.distance == 0.0) {
clearInterval(this.walkInterval); // 停止行走
this.showModal = true
} else {
currentIndex++; // 更新当前索引
}
}, walkSpeed);
},
// 唤醒
// 获取患者信息
async getPatient(){
const res = await request({url:'/patient'})
this.PatientAray = res
},
async getRouter(){
uni.showLoading({
title: '加载中’'
});
const _that = this
const res = await request({url:'/dispatchOrder'})
const location = res[0].location
console.log(location,'location');
_that.latitude = +location.split(',')[1]
_that.longitude = +location.split(',')[0]
var amapFile = require('../../utils/amap-wx.130.js');
var myAmapFun = new amapFile.AMapWX({key: 'd4d729753f518b7b925d2f1046fa2cf5'});
const origin = res[0].orderLocation
_that.userInfo = res[0]
const currentLocation = res[0].hospitalLocation
myAmapFun.getDrivingRoute({
origin: `${origin}`,
destination: `${currentLocation}`,
success:function(data){
console.log(data,'data');
var points = [];
if(data.paths && data.paths[0] && data.paths[0].steps){
var steps = data.paths[0].steps;
for(var i = 0; i < steps.length; i++){
var poLen = steps[i].polyline.split(';');
for(var j = 0;j < poLen.length; j++){
points.push({
longitude: parseFloat(poLen[j].split(',')[0]),
latitude: parseFloat(poLen[j].split(',')[1])
})
}
}
}
// 添加汽车标记
_that.setMarker(origin,currentLocation,points,location)
_that.Setpolyline(points)
},
fail: function(info){
console.log(info);
}
})
}
}
}
</script>
<style scoped lang="scss">
::v-deep .slot-content-item{
height: 300rpx;
width: 200rpx;
}
.Highways{
position: absolute;
left: 50%;
transform: translateX(-50%);
top:30rpx;
width: 363rpx;
height: 167rpx;
background: #FFFFFF;
box-shadow: 8rpx 0rpx 16rpx 0rpx #171B25;
border-radius: 8rpx 8rpx 8rpx 8rpx;
.stactInfo-title{
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 32rpx;
color: #2F3135;
margin: 30rpx 50rpx;
}
.stactInfo-hend{
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 26rpx;
color: #ADB0B8;
margin: -20rpx 50rpx;
span {
color: #51B343;
}
}
}
.userInfo{
position: absolute;
margin: 0 auto;
bottom: 20rpx;
// width: 670rpx;
padding: 30rpx;
.doctorInfp{
// width: 670rpx;
height: 265rpx;
background: #FFFFFF;
padding: 30rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 40rpx;
.patient{
margin-top: 30rpx;
view{
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
font-size: 22rpx;
color: #747474;
span{
font-size: 28rpx;
color: #5580FF;
}
}
}
.hospital{
display: flex;
margin-top: 30rpx;
width: 267rpx;
height: 30rpx;
background: rgba(255,117,42, .1);
border-radius: 3rpx 3rpx 3rpx 3rpx;
.hospital-title{
// margin-left: 10rpx;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
font-size: 22rpx;
color: #FF7529;
}
}
.doctor-name{
display: flex;
}
.stactInfo{
display: flex;
justify-content: space-between;
.stactInfo-title{
ont-family: SourceHanSansCN, SourceHanSansCN;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.logo{
width: 78rpx;
height: 78rpx;
margin-top: 20rpx;
border-radius: 2rpx 2rpx 2rpx 2rpx;
background-color: rgba(85,129,255,.1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
img{
width: 65rpx;
height: 46rpx;
}
}
}
}
.item{
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 28rpx;
color: #818387;
}
.carInfp{
width: 690rpx;
height: 100rpx;
background: #FFFFFF;
display: flex;
align-items: center;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
}
</style>