init

src/assets/index.scss

@@ -408,7 +408,7 @@
 
     background-repeat: no-repeat;
     background-position: center 10px;
-    background-size: 45%;
+    background-size: 40%;
     &.list {
       background-image: url(images/home/list-checkbox@2x.png);
     }
@@ -501,6 +501,9 @@
         padding: 10px 0;
         align-items: center;
         justify-content: space-between;
+        .edit {
+          border-bottom: 1px solid rgba(35, 121, 255, .5);
+        }
       }
     }
   }

src/components/CalendarTime.vue

@@ -0,0 +1,234 @@
+<template>
+  <van-popup v-model="show" position="left" safe-area-inset-bottom class="calendar" @closed="handleCalendarClosed"
+             @opened="handleCalendarOpened">
+    <van-calendar
+      ref="calendar"
+      :poppable="false"
+      allow-same-day
+      color="#101a52"
+      type="range"
+      @confirm="onCalendarConfirm"
+      @select="onCalendarSelect"
+      :default-date="null"
+      :minDate="minDate"
+      :maxDate="maxDate"
+    >
+      <div slot="title" class="calendar-header">
+        <van-icon class="icon" name="arrow-left" @click="handleBack" />
+        <div class="title">日期选择</div>
+        <span class="clear" v-show="startDate" @click.stop="handleClearDate">清除</span>
+      </div>
+      <div slot="footer" class="calendar-footer dis-flex flex-y-center">
+        <div class="flex-box f-14 text">
+          <p>开始时间：{{ start }}</p>
+          <p>结束时间：{{ end }}</p>
+        </div>
+        <van-button color="#101a52" :disabled="isDisabled" @click="onCalendarConfirm">确定</van-button>
+      </div>
+    </van-calendar>
+    <van-popup v-model="showPicker" round position="bottom" @opened="handlePopupOpen">
+      <van-picker
+        ref="picker"
+        show-toolbar
+        :columns="columns"
+        @cancel="showPicker = false"
+        @change="onPickerChange"
+        swipe-duration="500"
+        visible-item-count="5"
+      >
+        <div class="picker-title">{{ pickerText }}</div>
+      </van-picker>
+    </van-popup>
+  </van-popup>
+</template>
+
+<script>
+import { Popup, Picker, Calendar, Button } from 'vant'
+import moment from 'moment'
+
+function initData() {
+  return {
+    pickerText: '开始时间',
+    show: false,
+    isDisabled: true,
+    showPicker: false,
+    startDate: '',
+    endDate: '',
+    startTime: '',
+    endTime: ''
+  }
+}
+const columns = [
+  {
+    values: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
+    defaultIndex: 0
+  },
+  {
+    values: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
+    defaultIndex: 0
+  },
+  {
+    values: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
+    defaultIndex: 0
+  }
+]
+
+export default {
+  name: 'CalendarTime',
+  components: {
+    VanPopup: Popup,
+    VanPicker: Picker,
+    VanCalendar: Calendar,
+    VanButton: Button
+  },
+  data() {
+    return {
+      minDate: moment().subtract(90, 'day').toDate(),
+      maxDate: new Date(),
+      columns,
+      ...initData()
+    }
+  },
+  watch: {
+    startDate() {
+      this.isDisabled = true
+    },
+    endTime(val) {
+      if (!val) {
+        return
+      }
+      if (moment(this.end).isBefore(moment(this.start))) {
+        this.startTime = this.endTime
+      }
+      this.isDisabled = false
+    }
+  },
+  computed: {
+    start() {
+      return this.startDate + ' ' + this.startTime
+    },
+    end() {
+      return this.endDate + ' ' + this.endTime
+    }
+  },
+  methods: {
+    // 清除日历数据
+    handleClearDate() {
+      this.$refs.calendar.reset()
+      Object.assign(this.$data, {
+        pickerText: '开始时间',
+        isDisabled: true,
+        startDate: '',
+        endDate: '',
+        startTime: '',
+        endTime: ''
+      })
+    },
+    handleCalendarOpened() {
+      const calendarBody = document.getElementsByClassName('van-calendar__body')[0]
+      calendarBody.scrollTo({
+        top: calendarBody.scrollHeight,
+        behavior: 'smooth'
+      })
+    },
+    showCalender() {
+      this.show = true
+    },
+    handleCalendarClosed() {
+      this.$refs.calendar.reset()
+      Object.assign(this.$data, initData())
+    },
+    handleBack() {
+      this.show = false
+    },
+    handlePopupOpen() {
+      if (this.pickerText === '开始时间') {
+        this.$refs.picker.setIndexes([8, 0, 0])
+      }
+      const value = this.$refs.picker.getValues()
+      const str = value.join(':')
+      if (this.pickerText === '开始时间') {
+        this.startTime = str
+        return
+      }
+      this.endTime = str
+    },
+    onPickerChange(el, value) {
+      const str = value.join(':')
+      if (this.pickerText === '开始时间') {
+        this.startTime = str
+        return
+      }
+      this.endTime = str
+    },
+    onCalendarConfirm() {
+      this.$emit('confirm', { startTime: this.start, endTime: this.end })
+      this.show = false
+    },
+    onCalendarSelect(val) {
+      if (val[1]) {
+        this.endDate = moment(val[1]).format('YYYY-MM-DD')
+        this.pickerText = '结束时间'
+      } else {
+        if (this.end) {
+          this.endDate = ''
+          this.endTime = ''
+        }
+        this.startDate = moment(val[0]).format('YYYY-MM-DD')
+        this.pickerText = '开始时间'
+      }
+      this.showPicker = true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.calendar {
+  width: 100%;
+  height: 100%;
+  z-index: 10000 !important;
+
+  .calendar-header {
+    position: relative;
+
+    .icon {
+      position: absolute;
+      left: 8px;
+      top: 50%;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      padding: 0 6px;
+      transform: translateY(-50%);
+    }
+
+    .title {
+      text-align: center;
+    }
+
+    .clear {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      height: 24px;
+      line-height: 24px;
+      padding: 0 6px;
+      transform: translateY(-50%);
+    }
+  }
+
+  .calendar-footer {
+    padding: 6px 0;
+
+    .text {
+      line-height: 20px;
+    }
+  }
+
+  /deep/ .van-picker__toolbar {
+    justify-content: center;
+    font-weight: 500;
+  }
+}
+</style>

src/components/index.js

@@ -1,2 +1,3 @@
 export { default as TimeLineList } from './TimeLineList'
 export { default as MapPoint } from './MapPoint'
+export { default as CalendarTime } from './CalendarTime'

src/views/home/index.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
     <div class="list-icon" :class="showType === 1 ? 'list' : 'map'" @click="mapToListEvent">
-      <div style="font-size: 14px;margin-top: 42px;">{{ showType === 1 ? '列表' : '地图' }}</div>
+      <div style="font-size: 13px;margin-top: 35px;">{{ showType === 1 ? '列表' : '地图' }}</div>
     </div>
     <el-bmap v-if="showType === 1" 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>
@@ -232,7 +232,7 @@ export default {
 
         // 统计数据
         this.cardList[0].value = response.onLine + '/' + response.total
-        this.cardList[1].value = response.mileage.toFixed(0)
+        this.cardList[1].value = response.mileage.toFixed(2)
         this.cardList[2].value = response.consumption
         this.cardList[3].value = response.carbon
         this.truckList = data
@@ -282,7 +282,7 @@ export default {
       }
       info.icon = {
         url: iconURL,
-        size: [20, 26]
+        size: [20, 20]
       }
       info.position = [item.lng, item.lat]
 

src/views/home/trail.vue

@@ -23,7 +23,7 @@
             <div class="map-card-wrap__info-box">
               <div class="item">
                 <div class="name">累计里程</div>
-                <div class="value">{{ cumulative.mileage.toFixed(0) }} <span class="unit">公里</span></div>
+                <div class="value">{{ cumulative.mileage.toFixed(2) }} <span class="unit">公里</span></div>
               </div>
             </div>
             <div class="item-info">
@@ -74,12 +74,13 @@
           </van-slider>
         </div>
         <div class="back-time">
-          <div>{{ datatime.startTime }}</div>
+          <div :class="timeStatus === 9 ? 'edit' : ''" @click="calendarTimeEvent()">{{ datatime.startTime }}</div>
           <div @click="playTrailEvent()"><van-image width="28px" height="28px" fit="contain" :src="requestImages()"/></div>
-          <div>{{ datatime.endTime }}</div>
+          <div :class="timeStatus === 9 ? 'edit' : ''" @click="calendarTimeEvent()">{{ datatime.endTime }}</div>
         </div>
       </div>
     </div>
+    <calendar-time ref="calendar" @confirm="calendarTime"></calendar-time>
     <el-bmap vid="bmap" :min-zoom="8" :max-zoom="20" :zoom="zoom" :center="center" :bmap-manager="bmapManager" class="bm-view" :style="mapStyle" :events="events"></el-bmap>
   </div>
 </template>
@@ -89,9 +90,11 @@ import axios from 'axios'
 import { BMapManager } from 'vue-bmap-gl'
 import { $gasdataTruckInfo, $gasdataTruckTrajectory } from '@/service/gasdata'
 import { formatDate } from '@/utils/tools'
+import { CalendarTime } from '@/components'
 // import { transformFromWGSToGCJ, transformFromGCJToBaidu } from '@/utils/wscoordinate'
 export default {
   name: 'battle',
+  components: { CalendarTime },
   data() {
     return {
       backValue: 0,
@@ -201,6 +204,18 @@ export default {
         return 3
       }
     },
+    calendarTime(times) {
+      console.log(times)
+      this.datatime.startTime = times.startTime
+      this.datatime.endTime = times.endTime
+
+      this.initTrailData()
+    },
+    calendarTimeEvent() {
+      if (this.timeStatus === 9) {
+        this.$refs.calendar.showCalender()
+      }
+    },
     timeEvent(type) {
       this.timeStatus = Number(type)
 
@@ -257,7 +272,7 @@ export default {
       this.cardList[1].value = lushuItem.consumption1
       this.cardList[2].value = lushuItem.carbon1
       this.cumulative = {
-        mileage: lushuItem.mileage1,
+        mileage: lushuItem.mileage1.toFixed(2),
         speed: lushuItem.speed,
         carbon: lushuItem.carbon1,
         consumption: lushuItem.consumption1,
@@ -318,12 +333,12 @@ export default {
             this.map.clearOverlays()
             // 增加起点和终点坐标
             this.map.addOverlay(new BMapGL.Marker(start, {
-              offset: new BMapGL.Size(0, -12),
-              icon: new BMapGL.Icon(require('@/assets/images/home/begin@2x.png'), new BMapGL.Size(20, 26))
+              offset: new BMapGL.Size(0, -10),
+              icon: new BMapGL.Icon(require('@/assets/images/home/begin@2x.png'), new BMapGL.Size(20, 24))
             }))
             this.map.addOverlay(new BMapGL.Marker(end, {
-              offset: new BMapGL.Size(0, -12),
-              icon: new BMapGL.Icon(require('@/assets/images/home/end@2x.png'), new BMapGL.Size(20, 26))
+              offset: new BMapGL.Size(0, -10),
+              icon: new BMapGL.Icon(require('@/assets/images/home/end@2x.png'), new BMapGL.Size(20, 24))
             }))
 
             this.map.addOverlay(new BMapGL.Polyline(arrPois, { strokeColor: '#43bf91', strokeOpacity: 1 }))

src/views/home/truck.vue

@@ -23,7 +23,7 @@
             <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="value">{{ truckInfo.mileage.toFixed(2) }} <span class="unit">公里</span></div>
               </div>
             </div>
             <div class="item-info">
@@ -219,7 +219,7 @@ export default {
       $gasdataTruckInfo(params).then(async response => {
         this.truckInfo = response
         // 统计数据
-        this.cardList[0].value = response.mileage.toFixed(0)
+        this.cardList[0].value = response.mileage.toFixed(2)
         this.cardList[1].value = response.consumption
         this.cardList[2].value = response.carbon
 
@@ -253,9 +253,15 @@ 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'),
-        size: [20, 26]
+        url: iconURL,
+        size: [20, 20]
       }
       info.position = [item.lng, item.lat]