productDev/dmvisit.git

			@@ -1,77 +1,78 @@
			<template>
			<view class="main_app">
			<!-- <image class="bg" src="@/static/wuliuche_bg@2x.png" mode="widthFix"></image> -->
			<map id="map" :latitude="latitude" :longitude="longitude" :polyline="polyline" :markers="markers" :scale="4">
			<map id="map" :latitude="latitude" :longitude="longitude" :polyline="polyline" :markers="markers" :scale="scale">

			</map>
			<view class="main_content">
			<view class="info">
			<view class="head">
			<view class="code">{{info.contractNumber}}</view>
			<view class="status">{{info.orderStatusDesc}}</view>
			</view>
			<view class="content">
			<view class="line">
			<view class="la">发货地</view>
			<view class="val">{{info.deliveryEnterprise \|\| '-'}}</view>
			</view>
			<view class="line">
			<view class="la">到货地</view>
			<view class="val">{{info.receiveEnterprise \|\| '-'}}</view>
			</view>
			<view class="line">
			<view class="la">车牌号</view>
			<view class="val">{{info.plateName \|\| '-'}}</view>
			</view>
			<view class="line">
			<view class="la">司机信息</view>
			<view class="val" @click="callPhone(info.driverTel)">{{ info.driverName }} <text class="primaryColor ml12">{{info.driverTel}}</text> </view>
			</view>
			<view class="line">
			<view class="la">车辆位置</view>
			<view class="val">{{'-'}}</view>
			</view>
			<view class="line">
			<view class="la">预计到达</view>
			<view class="val">{{info.plannedArrivedDate}}</view>
			</view>
			</view>
			</view>
			<view class="drive_info">
			<view class="title">物流信息</view>
			<view class="drive_list" v-for="dri,k in info.cicleStatusList">
			<view class="separate"></view>
			<view class="item_title">
			<view class="icon_wrap">
			<image v-if="dri.key == 0 && k != 0" src="@/static/waybill/ic_dingdan@2x.png" class="icon"></image>
			<image v-if="dri.key == 0 && k == 0" src="@/static/waybill/ic_dingdan_sel@2x.png" class="icon"></image>
			<image v-if="dri.key == 1 && k != 0" src="@/static/waybill/ic_peizai@2x.png" class="icon"></image>
			<image v-if="dri.key == 1 && k == 0" src="@/static/waybill/ic_peizai_sel@2x.png" class="icon"></image>
			<image v-if="dri.key == 2 && k != 0" src="@/static/waybill/ic_cangku@2x.png" class="icon"></image>
			<image v-if="dri.key == 2 && k == 0" src="@/static/waybill/ic_cangku_sel@2x.png" class="icon"></image>
			<image v-if="dri.key == 3 && k != 0" src="@/static/waybill/ic_yunshu@2x.png" class="icon"></image>
			<image v-if="dri.key == 3 && k == 0" src="@/static/waybill/ic_yunshu_sel@2x.png" class="icon"></image>
			<image v-if="dri.key == 4" src="@/static/waybill/ic_daohuo_sel@2x.png" class="icon"></image>
			<image v-if="dri.key == 5" src="@/static/waybill/ic_ruku.png" class="icon"></image>
			</view>
			<view class="" :class="{primaryColor: k == 0}">{{dri.name}}</view>
			</view>
			<view class="item" v-for="item,i in dri.secondList">
			<view class="h2" v-if="item.orderStatusDes">
			<view class="icon_wrap" v-if="i != 0">
			<image src="@/static/driver/ic_mostarted.png" class="icon"></image>
			</view>
			<view v-else class="icon_wrap"></view>
			<view class="text" :class="{placeholder3: k==0 && i== 0}" >
			{{item.orderStatusDes}}
			<text v-if="item.tel">，发货仓库电话：</text>
			<text v-if="item.tel" @click="callPhone(item.tel)" class="primaryColor">{{item.tel}}</text>
			</view>
			</view>
			<view class="time">{{item.recordDate}}</view>
			</view>
			</view>
			</view>
			<view class="main_content">
			<view class="info">
			<view class="head">
			<view class="code">{{info.contractNumber}}</view>
			<view class="status">{{info.orderStatusDesc}}</view>
			</view>
			<view class="content">
			<view class="line">
			<view class="la">发货地</view>
			<view class="val">{{info.deliveryEnterprise \|\| '-'}}</view>
			</view>
			<view class="line">
			<view class="la">到货地</view>
			<view class="val">{{info.receiveEnterprise \|\| '-'}}</view>
			</view>
			<view class="line">
			<view class="la">车牌号</view>
			<view class="val">{{info.plateName \|\| '-'}}</view>
			</view>
			<view class="line">
			<view class="la">司机信息</view>
			<view class="val" @click="callPhone(info.driverTel)">{{ info.driverName }} <text
			class="primaryColor ml12">{{info.driverTel}}</text> </view>
			</view>
			<view class="line">
			<view class="la">车辆位置</view>
			<view class="val">{{'-'}}</view>
			</view>
			<view class="line">
			<view class="la">预计到达</view>
			<view class="val primaryColor" v-if="info.plannedArrivedDate">{{info.plannedArrivedDate.slice(0,11)}}</view>
			</view>
			</view>
			</view>
			<view class="drive_info">
			<view class="title">物流信息</view>
			<view class="drive_list" v-for="dri,k in info.cicleStatusList">
			<view class="separate"></view>
			<view class="item_title">
			<view class="icon_wrap">
			<image v-if="dri.key == 0 && k != 0" src="@/static/waybill/ic_dingdan@2x.png" class="icon"></image>
			<image v-if="dri.key == 0 && k == 0" src="@/static/waybill/ic_dingdan_sel@2x.png" class="icon"></image>
			<image v-if="dri.key == 1 && k != 0" src="@/static/waybill/ic_peizai@2x.png" class="icon"></image>
			<image v-if="dri.key == 1 && k == 0" src="@/static/waybill/ic_peizai_sel@2x.png" class="icon"></image>
			<image v-if="dri.key == 2 && k != 0" src="@/static/waybill/ic_cangku@2x.png" class="icon"></image>
			<image v-if="dri.key == 2 && k == 0" src="@/static/waybill/ic_cangku_sel@2x.png" class="icon"></image>
			<image v-if="dri.key == 3 && k != 0" src="@/static/waybill/ic_yunshu@2x.png" class="icon"></image>
			<image v-if="dri.key == 3 && k == 0" src="@/static/waybill/ic_yunshu_sel@2x.png" class="icon"></image>
			<image v-if="dri.key == 4" src="@/static/waybill/ic_daohuo_sel@2x.png" class="icon"></image>
			<image v-if="dri.key == 5" src="@/static/waybill/ic_ruku.png" class="icon"></image>
			</view>
			<view class="" :class="{primaryColor: k == 0}">{{dri.name}}</view>
			</view>
			<view class="item" v-for="item,i in dri.secondList">
			<view class="h2" v-if="item.orderStatusDes">
			<view class="icon_wrap" v-if="i != 0">
			<image src="@/static/driver/ic_mostarted.png" class="icon"></image>
			</view>
			<view v-else class="icon_wrap"></view>
			<view class="text" :class="{placeholder3: k==0 && i== 0}">
			{{item.orderStatusDes}}
			<text v-if="item.tel">，发货仓库电话：</text>
			<text v-if="item.tel" @click="callPhone(item.tel)" class="primaryColor">{{item.tel}}</text>
			</view>
			</view>
			<view class="time">{{item.recordDate}}</view>
			</view>
			</view>
			</view>
			</view>
			</view>
			</template>
			@@ -88,7 +89,8 @@
			param: {},

			latitude: 31.783205,
			longitude: 117.262635,
			longitude: 117.262635,
			scale: 5,
			markers: [],
			includePoints: [
			// {latitude: 31.783205, longitude: 117.262635}, {latitude: 36.783205, longitude: 118.10},
			@@ -153,18 +155,62 @@
			bgColor: '#FF0000'
			}
			})
			this.latitude = (Number(this.markers[0].latitude) + Number(this.markers[1].latitude)) / 2 - 8
			this.longitude = (Number(this.markers[0].longitude) + Number(this.markers[1].longitude)) / 2
			this.latitude = (Number(this.markers[0].latitude) + Number(this.markers[1].latitude)) / 2 - 4
			this.longitude = (Number(this.markers[0].longitude) + Number(this.markers[1].longitude)) / 2
			const distance = this.distance()
			console.log('distance', distance);
			if(distance > 1500000){
			this.scale = 4
			}else if(distance < 600000){
			this.scale = 6
			}else{
			this.scale = 5
			}
			}
			if (res.data && res.data.gisList && res.data.gisList.length > 0) {
			this.gisInfo = res.data.gisList[0]
			if (this.gisInfo && this.gisInfo.gisList && this.gisInfo.gisList.length > 0) {
			this.polyline = []
			let temp = {
			color: '#ff0000',
			width: 3,
			points: this.gisInfo.gisList.map(item => {
			return {
			latitude: item.lat,
			longitude: item.lon,
			}
			})
			}
			this.polyline.push(temp)
			}
			}
			})
			},
			callPhone(phone){
			uni.makePhoneCall({
			phoneNumber: phone
			});
			},
			distance() {
			const {
			latitude: lat1,
			longitude: lng1
			} = this.markers[0];
			const {
			latitude: lat2,
			longitude: lng2
			} = this.markers[1];
			const radLat1 = this.rad(lat1);
			const radLat2 = this.rad(lat2);
			const a = radLat1 - radLat2;
			const b = this.rad(lng1) - this.rad(lng2);
			const Haversin = Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2),
			2);
			const radius = 6378137; // 地球半径
			return 2 * radius * Math.asin(Math.sqrt(Haversin));
			},
			rad(d) {
			return d * Math.PI / 180.0;
			},
			callPhone(phone) {
			uni.makePhoneCall({
			phoneNumber: phone
			});
			}
			}
			}
			@@ -175,19 +221,19 @@
			background-color: #f7f7f7;
			}

			.main_app {
			padding: 0;
			.main_app {
			padding-top: 45vh;
			.main_content{
			height: 55vh ;
			overflow: auto;
			padding: 20rpx 30rpx 0;
			position: relative;
			z-index: 999;
			}

			// .main_content{
			// height: 55vh ;
			// overflow: auto;
			// padding: 20rpx 30rpx 0;
			// position: relative;
			// z-index: 999;
			// }
			#map {
			width: 750rpx;
			position: absolute;
			position: fixed;
			left: 0;
			top: 0;
			height: 105vh;
			@@ -208,15 +254,17 @@
			margin-bottom: 20rpx;
			position: relative;
			z-index: 999;
			.separate {
			height: calc( 100% - 250rpx );
			width: 1rpx;
			border: 1rpx dashed #CCCCCC;
			position: absolute;
			left: 53rpx;
			top: 102rpx;
			z-index: -1;

			.separate {
			height: calc(100% - 250rpx);
			width: 1rpx;
			border: 1rpx dashed #CCCCCC;
			position: absolute;
			left: 53rpx;
			top: 102rpx;
			z-index: -1;
			}

			.title {
			font-weight: 500;
			font-size: 32rpx;
			@@ -235,46 +283,52 @@

			.val {}
			}
			.item_title{
			font-weight: 600;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			}
			.icon_wrap {
			width: 48rpx;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon {
			width: 48rpx;
			height: 48rpx;
			position: relative;
			z-index: 2;
			}

			.item_title {
			font-weight: 600;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			}

			.icon_wrap {
			width: 48rpx;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
			width: 48rpx;
			height: 48rpx;
			position: relative;
			z-index: 2;
			}
			}

			.item {
			position: relative;
			color: #999999;
			margin-bottom: 30rpx;
			.text{
			color: #666666;
			margin-bottom: 30rpx;

			.text {
			color: #666666;
			}
			.icon {
			width: 20rpx;
			height: 20rpx;
			position: relative;
			z-index: 2;

			.icon {
			width: 20rpx;
			height: 20rpx;
			position: relative;
			z-index: 2;
			}

			.h2 {
			display: flex;
			align-items: center;
			height: 48rpx;
			}

			.h1 {
			}
			.h1 {}

			.time {
			padding-left: 78rpx;