Merge remote-tracking branch 'origin/master'

jiangping

2024-12-18 4b8fda000f9f600ba5187e738278b340b55ebd7c

 h5/pages/waybill/waybillDetail.vue

@@ -1,7 +1,7 @@
<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">
@@ -25,7 +25,8 @@
               </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 class="val" @click="callPhone(info.driverTel)">{{ info.driverName  }} <text

                        class="primaryColor ml12">{{info.driverTel}}</text> </view>

               </view>
               <view class="line">
                  <view class="la">车辆位置</view>
@@ -33,7 +34,7 @@
               </view>
               <view class="line">
                  <view class="la">预计到达</view>
                  <view class="val">{{info.plannedArrivedDate}}</view>
                  <view class="val primaryColor" v-if="info.plannedArrivedDate">{{info.plannedArrivedDate.slice(0,11)}}</view>

               </view>
            </view>
         </view>
@@ -89,6 +90,7 @@


            latitude: 31.783205,

            longitude: 117.262635,

            scale: 5,

            markers: [],

            includePoints: [

               // {latitude: 31.783205, longitude: 117.262635}, {latitude: 36.783205, longitude: 118.10},

@@ -153,13 +155,57 @@
                        bgColor: '#FF0000'

                     }

                  })

                  this.latitude = (Number(this.markers[0].latitude) + Number(this.markers[1].latitude)) / 2 - 8

                  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)

                  }

               }

            })

         },

         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({
@@ -176,18 +222,18 @@
   }



   .main_app {
      padding: 0;

      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,6 +254,7 @@
         margin-bottom: 20rpx;

         position: relative;

         z-index: 999;



         .separate {
            height: calc( 100% - 250rpx );
            width: 1rpx;
@@ -217,6 +264,7 @@
            top: 102rpx;
            z-index: -1;
         }



         .title {

            font-weight: 500;

            font-size: 32rpx;

@@ -235,18 +283,21 @@


            .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;
@@ -254,27 +305,30 @@
               z-index: 2;
            }
         }



         .item {

            position: relative;

            color: #999999;

            margin-bottom: 30rpx;


            .text{
               color: #666666;
            }



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



            .h2 {

               display: flex;

               align-items: center;

               height: 48rpx;

            }



            .h1 {

            }

            .h1 {}



            .time {

               padding-left: 78rpx;