init

.env

@@ -1,5 +1,5 @@
 VUE_APP_BASE_URL=/api
-VUE_APP_BAIDU_URL=/baiduapi
+VUE_APP_BAIDU_URL=https://dlt.auyen.com/reverse_geocoding/v3/
 VUE_APP_FILE_URL=https://dwx.auyen.com/
 VUE_APP_BASE_URL_T=/t
 VUE_APP_WEBSS_URL=wss://dwx.auyen.com/

.env.dev

@@ -1,5 +1,5 @@
 NODE_ENV=dev
 VUE_APP_BASE_URL=https://dapi.auyen.com/
-VUE_APP_BAIDU_URL=https://api.map.baidu.com/reverse_geocoding/v3/
+VUE_APP_BAIDU_URL=https://dlt.auyen.com/reverse_geocoding/v3/
 VUE_APP_FILE_URL=https://dwx.auyen.com/
 VUE_APP_WEBSS_URL=wss://dwx.auyen.com/

.env.prod

@@ -1,5 +1,5 @@
 NODE_ENV=prod
 VUE_APP_BASE_URL=https://api.auyen.com/
-VUE_APP_BAIDU_URL=https://api.map.baidu.com/reverse_geocoding/v3/
+VUE_APP_BAIDU_URL=https://lt.auyen.com/reverse_geocoding/v3/
 VUE_APP_FILE_URL=https://wx.auyen.com/
 VUE_APP_WEBSS_URL=wss://wx.auyen.com/

.env.test

@@ -1,5 +1,5 @@
 .NODE_ENV=dev-test
 VUE_APP_BASE_URL=https://tapi.auyen.com/
-VUE_APP_BAIDU_URL=https://api.map.baidu.com/reverse_geocoding/v3/
+VUE_APP_BAIDU_URL=https://tlt.auyen.com/reverse_geocoding/v3/
 VUE_APP_FILE_URL=https://twx.auyen.com/
 VUE_APP_WEBSS_URL=wss://twx.auyen.com/

src/assets/index.scss

@@ -421,6 +421,16 @@
     align-items: center;
     justify-content: space-between;
   }
+  .popup-driver-wrap {
+    max-height: 200px;
+    .driver-phone {
+      height: 35px;
+      line-height: 35px;
+      .active {
+        color: #2979FF;
+      }
+    }
+  }
   .footer-wrap {
     height: 45px;
     width: 260px;
@@ -430,7 +440,7 @@
     background-color: #ffffff;
     left: 50%;
     margin-left: -130px;
-    z-index: 10000;
+    z-index: 900;
     box-shadow: 0px 0px 5px 1px rgba(28, 29, 33, 0.16);
 
     display: flex;
@@ -553,7 +563,15 @@
           background-size: 32px 32px;
           background-repeat: no-repeat;
           background-position: left center;
-          background-image: url(images/home/red@2x.png);
+          &.percent_1 {
+            background-image: url(images/home/percent_1@2x.png);
+          }
+          &.percent_2 {
+            background-image: url(images/home/percent_2@2x.png);
+          }
+          &.percent_3 {
+            background-image: url(images/home/percent_3@2x.png);
+          }
         }
       }
       .item-info .label {

src/views/home/index.vue

@@ -274,8 +274,14 @@ export default {
           boxShadow: '0px 0px 9px 1px rgba(28, 29, 33, 0.16)'
         }
       }
+      let iconURL = require('@/assets/images/navigation/navigation@2x.png')
+      if (item.speedStatus === 1) {
+        iconURL = require('@/assets/images/navigation/navigation_1@2x.png')
+      } else if (item.speedStatus === 2) {
+        iconURL = require('@/assets/images/navigation/navigation_2@2x.png')
+      }
       info.icon = {
-        url: require('@/assets/images/navigation/navigation@2x.png'),
+        url: iconURL,
         size: [20, 26]
       }
       info.position = [item.lng, item.lat]

src/views/home/trail.vue

@@ -22,14 +22,14 @@
           <div class="list-wrap__item truck">
             <div class="map-card-wrap__info-box">
               <div class="item">
-                <div class="name">今日里程</div>
-                <div class="value">{{ truckInfo.mileage.toFixed(0) }} <span class="unit">公里</span></div>
+                <div class="name">累计里程</div>
+                <div class="value">{{ cumulative.mileage.toFixed(0) }} <span class="unit">公里</span></div>
               </div>
             </div>
             <div class="item-info">
               <div class="label speed">
-                <span>{{ truckInfo.speed || '-' }}</span>公里/小时
-                <span class="status" :class="'status__' + truckInfo.speedStatus">{{ truckStatusList[truckInfo.speedStatus] }}</span>
+                <span>{{ cumulative.speed || '-' }}</span>公里/小时
+                <span class="status" :class="'status__' + cumulative.speedStatus">{{ truckStatusList[cumulative.speedStatus] }}</span>
               </div>
               <div class="label local">{{ truckInfo.currAddress || '-' }}</div>
             </div>
@@ -37,18 +37,17 @@
           <div class="list-wrap__item truck">
             <div class="map-card-wrap__info-box">
               <div class="item">
-                <div class="name">今日耗能</div>
-                <div class="value">{{ truckInfo.consumption }} <span class="unit">公斤</span></div>
+                <div class="name">累计耗能</div>
+                <div class="value">{{ cumulative.consumption }} <span class="unit">公斤</span></div>
               </div>
             </div>
-            <div class="volume">剩余气量：{{ truckInfo.filterPercent > 0 ? `${truckInfo.filterPercent}%` : '无' }}</div>
+            <div class="volume" :class="`percent_${ cumulativeStatus(cumulative.filterPercent) }`">剩余气量：{{ cumulative.filterPercent > 0 ? `${cumulative.filterPercent}%` : '无' }}</div>
             <div class="map-card-wrap__info-box">
               <div class="item">
-                <div class="name">今日减碳</div>
-                <div class="value">{{ truckInfo.carbon }} <span class="unit">公斤</span></div>
+                <div class="name">累计减碳</div>
+                <div class="value">{{ cumulative.carbon }} <span class="unit">公斤</span></div>
               </div>
             </div>
-
           </div>
         </template>
       </div>
@@ -105,6 +104,14 @@ export default {
         min: 0,
         max: 100
       },
+      cumulative: {
+        mileage: 0,
+        speed: 0,
+        carbon: 0,
+        consumption: 0,
+        speedStatus: '',
+        filterPercent: 0
+      },
       datatime: {
         startTime: formatDate((new Date().getTime() - 86400000), 'yyyy-MM-dd hh:mm:ss'),
         endTime: formatDate(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss')
@@ -130,15 +137,15 @@ export default {
       timer: null,
       mapHeight: 400,
       cardList: [{
-        name: '今日里程',
+        name: '累计里程',
         value: '0',
         unit: '公里'
       }, {
-        name: '今日耗能',
+        name: '累计耗能',
         value: '0',
         unit: '公斤'
       }, {
-        name: '今日减碳',
+        name: '累计减碳',
         value: '0',
         unit: '公斤'
       }],
@@ -184,6 +191,16 @@ export default {
         console.log('BMapGLLib.Lushu is loaded!')
       }
     },
+    // 剩余气量的状态
+    cumulativeStatus(value) {
+      if (value >= 0 && value < 10) {
+        return 1
+      } else if (value >= 10 && value < 30) {
+        return 2
+      } else if (value >= 30) {
+        return 3
+      }
+    },
     timeEvent(type) {
       this.timeStatus = Number(type)
 
@@ -233,8 +250,21 @@ export default {
       const len = this.lushu.path.length
       const max = this.slider.max
       let tmpSoliderValue = Number(this.slider.value)
+      const lushuItem = this.lushu.path[this.lushu.i]
 
-      this.center = [this.lushu.path[this.lushu.i].lng, this.lushu.path[this.lushu.i].lat]
+      // 累计
+      this.cardList[0].value = lushuItem.mileage1
+      this.cardList[1].value = lushuItem.consumption1
+      this.cardList[2].value = lushuItem.carbon1
+      this.cumulative = {
+        mileage: lushuItem.mileage1,
+        speed: lushuItem.speed,
+        carbon: lushuItem.carbon1,
+        consumption: lushuItem.consumption1,
+        speedStatus: lushuItem.speed > 0 ? 0 : 1,
+        filterPercent: lushuItem.literPercent
+      }
+      this.center = [lushuItem.lng, lushuItem.lat]
       if (len > 0) {
         tmpSoliderValue = tmpSoliderValue > max * (index / len) ? tmpSoliderValue : max * (index / len)
         tmpSoliderValue += (index / (len * 10))
@@ -350,10 +380,6 @@ export default {
       this.markers = []
       $gasdataTruckInfo(params).then(async response => {
         this.truckInfo = response
-        // 统计数据
-        this.cardList[0].value = response.mileage.toFixed(0)
-        this.cardList[1].value = response.consumption
-        this.cardList[2].value = response.carbon
 
         // 根据金纬度获取地理位置信息
         const addressInfo = await this.queryCurrAddress(response.lat + ',' + response.lng)

src/views/home/truck.vue

@@ -41,7 +41,7 @@
                 <div class="value">{{ truckInfo.consumption }} <span class="unit">公斤</span></div>
               </div>
             </div>
-            <div class="volume">剩余气量：{{ truckInfo.filterPercent > 0 ? `${truckInfo.filterPercent}%` : '无' }}</div>
+            <div class="volume" :class="`percent_${ cumulativeStatus(truckInfo.filterPercent) }`">剩余气量：{{ truckInfo.filterPercent > 0 ? `${truckInfo.filterPercent}%` : '无' }}</div>
             <div class="map-card-wrap__info-box">
               <div class="item">
                 <div class="name">今日减碳</div>
@@ -54,9 +54,15 @@
       </div>
     </div>
     <div class="footer-wrap">
-      <div class="phone">联系驾驶员</div>
+      <div class="phone" @click="phoneEvent()">联系驾驶员</div>
       <div class="stopwatch" @click="trailBackEvent">轨迹回放</div>
     </div>
+    <van-action-sheet v-model="phoneStatus" title="联系驾驶员" class="popup-driver-wrap">
+      <div v-for="(item, index) in truckInfo.truckDriverList" :key="index" class="driver-phone">
+        <a class="active" v-if="queryTruckPhone(item.driverName)" :href="'tel:' + queryTruckPhone(item.driverName)">{{ item.driverName }}</a>
+        <span v-else @click="onDialogPhone()">{{ item.driverName }}</span>
+      </div>
+    </van-action-sheet>
     <el-bmap vid="bmap" :zoom="zoom" :center="center" class="bm-view" :style="mapStyle">
       <el-bmap-marker v-for="(marker, index) in markers" :key="index" :icon="marker.icon" :visible="marker.visible" :position="marker.position" :title="marker.title" :label="marker.label" :events="marker.events" :vid="index" :enable-dragging="marker.enableDragging"></el-bmap-marker>
     </el-bmap>
@@ -66,10 +72,12 @@
 import 'vue-bmap-gl/dist/style.css'
 import axios from 'axios'
 import { $gasdataTruckInfo } from '@/service/gasdata'
+import { trim } from '@/utils/tools'
 export default {
   name: 'battle',
   data() {
     return {
+      phoneStatus: false,
       showStatus: true,
       truckInfo: {},
       queryTruckInfo: this.$route.query,
@@ -119,12 +127,41 @@ export default {
     clearInterval(this.timer)
   },
   methods: {
+    // 轨迹回放
     trailBackEvent() {
       this.$router.push({
         path: '/trail',
         query: this.queryTruckInfo
       })
     },
+    // 联系电话
+    phoneEvent() {
+      this.phoneStatus = true
+    },
+    // 获取司机电话号码
+    queryTruckPhone(driver) {
+      if (driver.indexOf('/') === -1) {
+        return false
+      } else {
+        const info = driver.split('/')
+        return trim(info[1])
+      }
+    },
+    // 剩余气量的状态
+    cumulativeStatus(value) {
+      if (value >= 0 && value < 10) {
+        return 1
+      } else if (value >= 10 && value < 30) {
+        return 2
+      } else if (value >= 30) {
+        return 3
+      }
+    },
+    onDialogPhone() {
+      this.$dialog.alert({
+        message: '司机未找到配置电话号码'
+      }).then(() => {})
+    },
     async queryCurrAddress(location) {
       const data = await axios.post(process.env.VUE_APP_BAIDU_URL + '?output=json&ak=Zvd6FzmertUwjhZih5Zfq0D8uTUhvqsH&coordtype=wgs84ll&location=' + location).then(response => {
         return response.data