bug

src/main.js

@@ -26,6 +26,19 @@ Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 })
 
+window.addEventListener('message', event => {
+  const data = event.data
+
+  switch (data.iframeClick) {
+    case 'getParams':
+      // eslint-disable-next-line no-case-declarations
+      const localStorageParam = data.params
+      for (const [k, v] of Object.entries(localStorageParam)) {
+        localStorage.setItem(k, v)
+      }
+  }
+})
+
 // 动画过度效果
 /* window.addEventListener('popstate', function (e) {
   router.isBack = true

src/views/home/index.vue

@@ -13,7 +13,7 @@
             <van-dropdown-item v-model="tradeStatus" :options="tradeStatusList" @change="dropLoad" />
             <van-dropdown-item v-model="runStatus" :options="runStatusList" @change="dropLoad" />
           </van-dropdown-menu>
-          <div><van-icon name="search" @click="searchEvent" /></div>
+          <div @click="searchEvent()"><van-icon name="search" /></div>
         </div>
       </div>
     </div>
@@ -24,7 +24,7 @@
       <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>
     <div v-else-if="showType === 2" class="list-wrap">
-      <div class="list-wrap__item" v-for="(item, index) in truckList" :key="index" @click.native="clickTruckEvent(item)">
+      <div class="list-wrap__item" v-for="(item, index) in truckList" :key="index" @click="clickTruckEvent(item)">
         <div class="item-header">
           <div class="text-bold">{{ item.carNumber }}<span class="text-normal">({{ item.linked === 1 ? '其他' : '自营' }})</span></div>
           <div>今日里程<span class="color-blue">{{ item.mileage || '-' }}</span>公里</div>
@@ -171,6 +171,7 @@ export default {
       return angleVal
     },
     searchEvent() {
+      console.log(2222)
       this.$router.push({ path: '/list' })
     },
     mapToListEvent() {

src/views/home/list.vue

@@ -3,7 +3,7 @@
     <div class="list-wrap" style="background-color: #ffffff;padding: 0;border-radius: 4px;height: 100%;">
       <van-search v-model="keyword" shape="round" @input="onLoad" placeholder="请输入车牌号或驾驶员姓名"/>
       <div v-if="cloneTruckList.length <= 0" class="list-404" style="border-top: 1px solid #dfdfdf;">没有找到"{{ keyword }}"的相关车辆</div>
-      <div class="list-wrap__item" v-for="(item, index) in cloneTruckList" :key="index" style="border-top: 1px solid #dfdfdf;">
+      <div class="list-wrap__item" v-for="(item, index) in cloneTruckList" :key="index" @click="clickTruckEvent(item)" style="border-top: 1px solid #dfdfdf;">
         <div class="item-header">
           <div class="text-bold">{{ item.carNumber }}<span class="text-normal">({{ item.linked === 1 ? '其他' : '自营' }})</span></div>
           <div>今日里程<span class="color-blue">{{ item.mileage || '-' }}</span>公里</div>
@@ -64,6 +64,17 @@ export default {
         this.cloneTruckList = [...this.truckList]
       }
     },
+    clickTruckEvent(item) {
+      this.$router.push({
+        path: '/truck',
+        query: {
+          lat: item.lat,
+          lng: item.lng,
+          linked: item.linked,
+          carNumber: item.carNumber
+        }
+      })
+    },
     async queryCurrAddress(location) {
       const data = await axios.post(process.env.VUE_APP_BAIDU_URL + '?output=json&ak=BrOh2W3mLGpsn4ML9k48XLfE4hXFAuKK&coordtype=wgs84ll&location=' + location).then(response => {
         return response.data

src/views/home/trail.vue

@@ -68,9 +68,9 @@
           <div>总减碳 {{ truckTrialInfo.carbon }}公斤</div>
         </div>
         <div style="width: 100%;padding: 30px 0 10px;">
-          <van-slider v-model="backValue" bar-height="4px" disabled>
+          <van-slider v-model="slider.value" :min="slider.min" :max="slider.max" bar-height="4px" disabled >
             <template #button>
-              <div class="slider-custom-button"> </div>
+              <div class="slider-custom-button"></div>
             </template>
           </van-slider>
         </div>
@@ -99,6 +99,12 @@ export default {
       timeStatus: 1,
       showStatus: true,
       playStatus: 1,
+      slider: {
+        status: true,
+        value: 0,
+        min: 0,
+        max: 100
+      },
       datatime: {
         startTime: formatDate((new Date().getTime() - 86400000), 'yyyy-MM-dd hh:mm:ss'),
         endTime: formatDate(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss')
@@ -211,11 +217,57 @@ export default {
       if (this.playStatus === 1) {
         this.playStatus = 2
         this.lushu.start()
+        if (this.slider.value >= this.slider.max) {
+          this.slider.value = 0
+        }
+        this.timer = setInterval(() => {
+          this.sliderPlayLushu()
+        }, 100)
       } else {
         this.playStatus = 1
         this.lushu.pause()
       }
     },
+    sliderPlayLushu() {
+      const index = this.lushu.i + 1
+      const len = this.lushu.path.length
+      const max = this.slider.max
+      let tmpSoliderValue = Number(this.slider.value)
+
+      console.log(len, tmpSoliderValue)
+      if (len > 0) {
+        tmpSoliderValue = tmpSoliderValue > max * (index / len) ? tmpSoliderValue : max * (index / len)
+        tmpSoliderValue += (index / (len * 10))
+      } else {
+        tmpSoliderValue += 0
+      }
+
+      if (tmpSoliderValue >= max) {
+        this.playStatus = 1
+        clearInterval(this.timer)
+      }
+      this.slider.value = tmpSoliderValue >= max ? max : tmpSoliderValue
+    },
+    mapLuShuSpeed() {
+      let speed = 50
+      const mileage = this.truckTrialInfo.mileage
+      this.slider.max = mileage * 1000
+      if (mileage > 100) {
+        speed = 5000
+      } else if (mileage > 80 && mileage <= 100) {
+        speed = 2000
+      } else if (mileage > 50 && mileage <= 80) {
+        speed = 1000
+      } else if (mileage > 20 && mileage <= 50) {
+        speed = 500
+      } else if (mileage > 5 && mileage <= 20) {
+        speed = 100
+      } else {
+        speed = 50
+      }
+
+      return speed
+    },
     async initTrailData() {
       this.initData()
       const truckInfo = await this.truckTrailInfo()
@@ -251,7 +303,7 @@ export default {
               defaultContent: '', // 覆盖物中的内容 "从天安门到百度大厦"
               autoView: true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
               icon: new BMapGL.Icon(require('@/assets/images/home/red@2x.png'), new BMapGL.Size(15, 15), { anchor: new BMapGL.Size(10, 10) }),
-              speed: 10, // 覆盖物移动速度，单位米/秒
+              speed: this.mapLuShuSpeed(), // 覆盖物移动速度，单位米/秒
               enableRotation: true // 是否设置marker随着道路的走向进行旋转
               // landmarkPois: [
               //   { lng: 116.314782, lat: 39.913508, html: '加油站', pauseTime: 2 },
@@ -276,43 +328,6 @@ export default {
         return '-'
       }
     },
-    angle(start, end) {
-      // 通过 a、b 确定角度所处的象限
-      const a = start[0] - end[0]
-      const b = start[1] - end[1]
-      // eslint-disable-next-line camelcase
-      const a_c = Math.abs(a)
-      // eslint-disable-next-line camelcase
-      const b_c = Math.abs(b)
-      // 获取得三角形的斜边 Math.hypot();
-      const c = Math.hypot(a_c, b_c)
-      // 计算弧度
-      // eslint-disable-next-line camelcase
-      const radina = Math.acos(a_c / c)
-      // 计算角度
-      let angleVal = Math.floor(radina * 180 / Math.PI)
-      // 处理最终需要旋转的角度
-      if (a > 0) {
-        // 第二、三象限
-        if (b > 0) {
-          // 三
-          angleVal = 90 + 90 - angleVal
-        } else {
-          angleVal = -180 + angleVal
-        }
-      } else {
-        // 一、四象限
-        if (b > 0) {
-          // 四
-          // eslint-disable-next-line no-self-assign
-          angleVal = angleVal
-        } else {
-          // 一
-          angleVal = -angleVal
-        }
-      }
-      return angleVal
-    },
     async truckTrailInfo() {
       const params = {
         carNumber: this.queryTruckInfo.carNumber,