lngtruck/src/views/home/list.vue

<template>
  <div class="battle-warp" style="padding: 10px 15px;height: 100%;">
    <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" @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>
        </div>
        <div class="item-info">
          <div class="label item-info__user" style="padding-left: 0" v-if="item.truckDriverList.length > 0">
            <div class="driver-wrap">
              <div v-for="(driver, driverIndex) in item.truckDriverList" :key="driverIndex" class="driver-list">{{ driver.driverName }}</div>
            </div>
<!--            <div>{{ truckToDriverMobile(item.truckDriverList[0].driverName) }}</div>-->
          </div>
          <div class="label speed">
            <span>{{ item.speed || '-' }}</span>公里/小时
            <span class="status" :class="'status__' + item.speedStatus">{{ truckStatusList[item.speedStatus] }}</span>
          </div>
          <div class="label local">{{ item.currAddress || '-' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import 'vue-bmap-gl/dist/style.css'
import axios from 'axios'
import { $gasdataGaugeAll } from '@/service/gasdata'
export default {
  name: 'battle',
  data() {
    return {
      truckStatusList: {
        0: '行驶中',
        1: '静止中',
        2: '离线中'
      },
      keyword: '',
      truckList: [],
      cloneTruckList: []
    }
  },
  watch: {},
  computed: {},
  created() {
    document.title = 'skkss'
    this.dragendPointer()
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    onLoad() {
      if (this.keyword) {
        this.cloneTruckList = this.truckList.filter(item => {
          const tmpKeyword = item.tmpKeyword.toLocaleUpperCase()
          const inputKeyword = this.keyword.toLocaleUpperCase()

          return tmpKeyword.indexOf(inputKeyword) !== -1
        })
      } else {
        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
      })

      if (data.hasOwnProperty('result')) {
        return data.result.addressComponent
      } else {
        return '-'
      }
    },
    truckToDriverUser(driver) {
      // 解释司机个人信息
      const driverUserInfo = driver.driverName ? driver.driverName.split('/') : []
      return driverUserInfo.length >= 1 ? driverUserInfo[0] : '-'
    },
    truckToDriverMobile(info) {
      if (info.indexOf('/') !== -1) {
        const userinfo = info.split('/')

        return userinfo[1] || '-'
      } else {
        return '-'
      }
    },
    dragendPointer() {
      $gasdataGaugeAll({}).then(response => {
        const data = response.carMonitorVos

        this.truckList = data
        data.forEach(async item => {
          // 根据金纬度获取地理位置信息
          const addressInfo = await this.queryCurrAddress(item.lat + ',' + item.lng)
          const currAddress = addressInfo.province + addressInfo.city + addressInfo.district + addressInfo.street

          if (item.hasOwnProperty('currAddress')) {
            item.currAddress = currAddress
          } else {
            this.$set(item, 'currAddress', currAddress)
          }

          // 解释司机信息
          const driverInfo = []
          if (item.hasOwnProperty('truckDriverList') && item.truckDriverList.length > 0) {
            item.truckDriverList.forEach(driver => {
              driverInfo.push(this.truckToDriverUser(driver))
            })
          }
          driverInfo.push(item.carNumber)

          if (item.hasOwnProperty('tmpKeyword')) {
            item.tmpKeyword = driverInfo.join('')
          } else {
            this.$set(item, 'tmpKeyword', driverInfo.join(''))
          }
        })
        this.cloneTruckList = [...this.truckList]
      })
    }
  }
}
</script>