轨迹回放

ebc-middle-platform/src/conf/services.js

@@ -193,7 +193,9 @@ export default {
    DEVICE_TRACK: '/device/queryOneDeviceLocationInfo' // 查询设备轨迹
  },
  trackAnalysis: {
    GET_TRACKANALYSIS: '/attendanceManagement/queryPageTrackRecord' // 查询轨迹分析
    GET_TRACKANALYSIS: '/trackManagement/queryPageTrackRecord', // 查询轨迹分析
    GET_SINGLE_TRACE: '/trackManagement/querySingleEmployeeTrace', // 单人轨迹回放
    GET_MORE_TRACE: '/trackManagement/queryMoreEmployeeTrace' // 多人轨迹回放
  },
  areaInOutRecord: {
    GET_ATTENDANCE: '/areaInOutRecord/queryPageAttendanceCount', // 分页查询考勤统计分析

ebc-middle-platform/src/modules/attendance/track.vue

@@ -6,7 +6,7 @@
          <div class="input-rule">
            <t-date-picker v-model="queryCondition.rangeDate"
                           align-right
                           style="width:250px;"
                           style="width:320px;"
                           type="dateTimeRange"
                           placeholder="选择时间段"
                           @date-change="onChange"></t-date-picker>

ebc-middle-platform/src/modules/orientation/orientation.scss

@@ -5,6 +5,7 @@
    padding-right: 0px;
    box-sizing: border-box;
    .top-container{
      //opacity: 0;
      display: flex;
      justify-content: space-between;
      line-height: 40px;
@@ -193,7 +194,7 @@
.track-label{
  position: absolute;
  z-index: 10;
  left: 240px;
  left: 40px;
  bottom: 50px;
  top: 130px;
  background-color: #ffffff;
@@ -205,6 +206,12 @@
  padding: 10px 5px 10px 5px;
  border-radius: 5px;
}
.track-span{
  padding: 5px 5px 0 8px;
}
.modal-body{
  padding: 0 15px 15px 15px;
}
.track-modal-container{
  display: flex;
  .track-modal-left{
@@ -220,7 +227,7 @@
  }
  .track-modal-right{
    height: 500px;
    width: 1000px;
    width: 100%;
    margin-left: 5px;
    .hidden{
      visibility: hidden;

ebc-middle-platform/src/modules/orientation/orientation.vue

@@ -22,10 +22,6 @@
        <div class="time">当前时间：{{ nowDate | dateFormat }}</div>
      </div>
      <div class="right-content">
        <!-- <div>
          <t-input placeholder="请输入名称或终端编号"></t-input>
        </div>
        <t-button color="success" icon="search-outline"></t-button> -->
        <t-button
          color="success"
          icon="map-marker-outline"
@@ -77,24 +73,33 @@
      :visibled.sync="trackModal"
      :footer-visibled="false"
      :mask-closable="false"
      :width="1200"
      :width="1400"
      :height="800"
      :cancel="stopPlayback"
      title="历史轨迹"
    >
      <div class="track-modal-container">
        <div class="track-modal-left">
          <t-input
            v-model="trackSearch"
            icon="search-outline"
            icon-placement="right"
            placeholder="请输入姓名或终端编号"
            style="width: 200px"
          ></t-input>
          <div>
            <div v-for="(item,index) in personList" :class="trackPerson.workEmployeeCode==item.workEmployeeCode?'active':''" :key="index" @click="personTrack(item)">{{ item.workEmployeeName }}</div>
          </div>
        </div>
        <div class="track-modal-right">
          <div style="display: flex">
          <t-button-group>
            <t-button
              v-for="(item, index) in trackTypeList"
              :class="
                index == trackTypeCondition.currentIndex ? 'active' : ''
              "
              :key="index"
              @click="changeTrackType(index)"
            >{{ item }}</t-button
            >
          </t-button-group>
          <div style="display: flex;padding: 5px 0px">
            <span class="track-span">人员</span>
            <t-select v-if="trackTypeCondition.currentIndex == 1" v-model="trackSearchs" multiple collapse-tags filterable placeholder="请选择人员" style="width: 300px" @change="personTrack()">
              <t-option v-for="(item, index) in personList" :key="index" :value="item">{{ item.workEmployeeName }}</t-option>
            </t-select>
            <t-select v-if="trackTypeCondition.currentIndex == 0" v-model="trackSearch" filterable placeholder="请选择人员" style="width: 200px" @change="personTrack()">
              <t-option v-for="(item, index) in personList" :key="index" :value="item">{{ item.workEmployeeName }}</t-option>
            </t-select>
            <span class="track-span">时间</span>
            <t-button-group>
              <t-button
                v-for="(item, index) in trackTimeList"
@@ -110,37 +115,32 @@
              :class="trackQueryCondition.currentIndex === 3?'':'hidden'"
              v-model="rangeDate"
              align-right
              style="width:350px"
              style="width:300px"
              type="dateTimeRange"
              placeholder="请选择时间"
              @date-change="onChangeDate">
            </t-date-picker>
            <!-- <div style="display: flex;line-height:32.5px;width: 120px;">
              <div>速度</div>
              <t-select>
                <t-option>1x</t-option>
                <t-option>2x</t-option>
              </t-select>
            </div> -->
            <t-button color="success" icon="video-outline" @click="playback()">回放</t-button>
            <t-button color="secondary" icon="upload-outline" @click="toExport"
            >导出至Excel</t-button
            >
            <span class="track-span">速度</span>
            <t-select v-model="playbackRate" placeholder="回放速度" style="width: 60px;">
              <t-option v-for="(item, index) in speeds" :key="index" :value="item">{{ item + 'X' }}</t-option>
            </t-select>
            <t-button v-if="!playbacking" color="success" icon="video-outline" @click="playback()">回放</t-button>
            <t-button v-if="playbacking" color="secondary" icon="video-outline" @click="stopPlayback()">停止</t-button>
            <span v-if="playbacking" class="track-span">回放时刻: {{ trackTime }}</span>
          </div>
          <div>
            <div id="track-map" style="height: 467.5px;"></div>
            <div class="track-label">
            <div id="track-map" style="height: 610px;"></div>
            <div v-if="trackTypeCondition.currentIndex == 0 && timelineList.length > 0" class="track-label">
              <t-timeline :horizontal="true">
                <t-timeline-item v-for="(item,index) in timelineList" :key="index" :time="item.time" >
                <t-timeline-item v-for="(item,index) in timelineList" :key="index" :time="item.inTime" :color="item.color">
                  <slot>
                    <div class="card card-has-border" style="width: 100px">
                      <div class="card-block">
                        <span class="card-block-name">{{ item.name }}</span>
                        <span class="card-block-time">{{ item.duration }}</span>
                        <span class="card-block-name">{{ item.areaName }}</span>
                        <span class="card-block-time">{{ item.durationTime }}min</span>
                        <div>
                          <t-progress :percent="item.proportion" hide-info></t-progress>
                          <t-progress :percent="item.proportion" :status="item.status" hide-info></t-progress>
                        </div>
                      </div>
                    </div>
@@ -213,7 +213,118 @@ export default {
  },
  data() {
    return {
      trackData: [{
        entityId: 1,
        name: '张三',
        icon: '',
        status: '',
        color: 'red',
        traceList: [{
          // entityId  人员ID
          // longitude  经度
          // latitude  维度
          // height  高度
          // createDate  定位时间
          // playDurationTime  播放时间
          // toolIndex  当前所在围栏 isStopPlay
          lng: 122.09930419921876,
          lat: 29.96089241772908,
          time: '2020-11-11 31312',
          second: 1,
          index: 0
        }, {
          lng: 122.09930419921876,
          lat: 30.06089241772908,
          time: '2020-11-11 2323',
          second: 2,
          index: 1
        }, {
          lng: 122.39930419921876,
          lat: 30.06089241772908,
          time: '2020-11-11 4433',
          second: 5,
          index: 2
        }, {
          lng: 122.59930419921876,
          lat: 30.26089241772908,
          time: '2020-11-11 111',
          second: 10,
          isStopPlay: true,
          index: 2
        }]
      }, {
        entityId: 2,
        name: '李四',
        icon: '',
        status: '',
        color: 'blue',
        traceList: [{
          lng: 122.59930419921876,
          lat: 29.96089241772908,
          time: '2020-11-11 233456',
          second: 3,
          index: 0
        }, {
          lng: 122.59930419921876,
          lat: 30.06089241772908,
          time: '2020-11-11 633',
          second: 4,
          index: 1
        }, {
          lng: 122.89930419921876,
          lat: 30.06089241772908,
          time: '2020-11-11 5445',
          second: 6,
          index: 2
        }, {
          lng: 122.99930419921876,
          lat: 30.26089241772908,
          time: '2020-11-11 23434',
          second: 8,
          index: 2
        }]
      }, {
        entityId: 3,
        name: '王五',
        icon: '',
        status: '',
        color: 'blue',
        traceList: [{
          lng: 122.59930419921876,
          lat: 29.96089241772908,
          time: '2020-11-11  242',
          second: 3,
          index: 0
        }, {
          lng: 122.59930419921876,
          lat: 30.06089241772908,
          time: '2020-11-11  1322',
          second: 4,
          index: 1
        }, {
          lng: 122.89930419921876,
          lat: 30.06089241772908,
          time: '2020-11-11 122112',
          second: 6,
          index: 2
        }, {
          lng: 122.89930419921876,
          lat: 30.26089241772908,
          time: '2020-11-11 12',
          second: 9,
          index: 2
        }]
      }],
      timeouts: [],
      speeds: [1, 4, 16, 24, 48],
      playbackRate: 1,
      playbacking: false,
      trackTime: '',
      map: null,
      layersGroup: new Ai.LayerGroup(),
      pointsGroup: new Ai.LayerGroup(),
      lineColors: ['#26B728', '#280e9e', '#dc8020', '#EAFF00',
        '#cc48ca', '#83b5ff', '#4D4128', '#08570c'], // 定义几种颜色多人轨迹回放使用,不够再取随机颜色
      tal: 32.465444444444444,
      switch1: true,
      pointsarr: null,
@@ -230,22 +341,24 @@ export default {
        sos: 0,
        normal: 0
      },
      polylinearr:
        '122.0352 32.4444,122.0372 32.4444,122.0400 32.4366,122.2922 32.4233',
      popup: null,
      shadow: false,
      dataList: [
      ],
      nowDate: new Date(),
      modal: false,
      trackModal: false,
      trackSearch: '',
      trackSearchs: [],
      trackTimeList: ['-10min', '-1h', '本日', '自定义'],
      trackTypeList: ['单人模式', '多人模式'],
      trackQueryCondition: {
        currentIndex: 0
      },
      trackTypeCondition: {
        currentIndex: 0
      },
      trackMap: null,
	    trackPath: null,
      trackPath: null,
      rangeDate: '',
      rescueModal: false,
      formValidate: {
@@ -285,26 +398,7 @@ export default {
        normal: true
      },
      personList: [],
      timelineList: [
        {
          time: '2020.11.30',
          name: '码头',
          duration: '15min',
          proportion: 25
        },
        {
          time: '2020.11.30',
          name: '1#船舶',
          duration: '56min',
          proportion: 80
        },
        {
          time: '2020.11.30',
          name: '1#风机',
          duration: '45min',
          proportion: 45
        }
      ],
      timelineList: [],
      rescuer: [],
      appointAlarmId: '',
      trackPerson: '',
@@ -324,28 +418,28 @@ export default {
  mounted() {
    // this.getGisToken().then(() => { // 获取gistoken后加载地图
    // })
    this.getTagType().then(() => {
      this.getToolType().then(() => {
    this.getTagType().then(() => { // 初始化区域类型
      this.getToolType().then(() => { // 初始化设备类型
        this.initMap()
        this.initTrackMap()
        this.initStatusCount()
        this.initStatusCount() // 初始化人数统计数据
      })
    })
    setInterval(() => { // 当前时间
      this.nowDate = new Date()
    }, 1000)
    EventBus.$on('person', (msg) => { // 获取镜屏推送消息
    EventBus.$on('person', (msg) => { // 获取镜屏推送消息,镜屏每次只推送一个元素的变化
      msg = JSON.parse(msg)
      console.log(msg)
      this.personStatistics = msg.data.countMap
      if (msg.data.aggregatedMapAreaList.length === 1 && msg.data.unaggregatedEntityPositionList.length === 0){
        this.removeUnaggregated(msg.data.currentEntityPosition)
      if (msg.data.aggregatedMapAreaList.length === 1 && msg.data.unaggregatedEntityPositionList.length === 0) {
        this.removeUnaggregated(msg.data.currentEntityPosition) // 删除离散的人员
      }
      if (msg.data.aggregatedMapAreaList) {
        this.changeLocation(msg.data.aggregatedMapAreaList)
        this.changeLocation(msg.data.aggregatedMapAreaList) // 改变区域和设备
      }
      if (msg.data.unaggregatedEntityPositionList) {
        this.changeUnaggregated(msg.data.unaggregatedEntityPositionList)
        this.changeUnaggregated(msg.data.unaggregatedEntityPositionList) // 改变离散的人员
      }
    })
    EventBus.$on('ship', (msg) => { // 获取镜屏推送消息
@@ -504,6 +598,13 @@ export default {
      })
    },
    switchChange(status) {
      for (var i = 0; i < 6; i++) {
        (function(i) {
          setTimeout(function() {
            console.log(i)
          }, (i + 1) * 1000)
        })(i)
      }
      if (status) {
        // this.layer.areaLayer.eachLayer((la) => {
        //   if (la.point) {
@@ -749,8 +850,8 @@ export default {
    },
    removeUnaggregated(po) { // 删除不聚合的人
      this.layer.personLayer.eachLayer((la) => {
        var e = undefined;
        if (po.entityId == la.getAttributes().elementId) {
        var e
        if (po.entityId === la.getAttributes().elementId) {
          console.log('删除' + po.name)
          this.map.closePopup(la.popup)
          la.popup.remove()
@@ -768,7 +869,8 @@ export default {
        case '040': // 手动告警 ------ 红色
          return 'sos'
          break
        case '030': // 离线 ------ 灰色
        case '030': // 超时离线 ------ 灰色
        case '035': // 关机离线报警 ------ 灰色
          return 'offline'
          break
        case '060': // 救援人员 ------ 黄色
@@ -814,14 +916,26 @@ export default {
      })
    },
    changeTrackTime(index) { // 速度选择
      this.stopPlayback()
      this.trackMap.removeLayer(this.layersGroup)
      this.trackMap.removeLayer(this.pointsGroup)
      this.trackQueryCondition.currentIndex = index
    },
    changeTrackType(index) { // 模式选择
      this.stopPlayback()
      this.trackMap.removeLayer(this.layersGroup)
      this.trackMap.removeLayer(this.pointsGroup)
      this.trackTypeCondition.currentIndex = index
      this.trackSearch = ''
      this.trackSearchs = []
    },
    initTrackMap() { // 加载轨迹地图
      if (this.trackMap != null && this.trackMap != '') {
        this.trackMap.remove()
      }
      this.trackMap = new Ai.Map('track-map', {
        ak: this.$store.getters.getGisToken,
        // ak: this.$store.getters.getGisToken,
        ak: 'MTYwNzQMTAwMU1UWXdOelE1TXpnME5EYzBOU015T0RFeE1UYz0_',
        center: [39.915599, 122.406568]
      })
      var maplayer = Ai.TileLayer(GIS_SEA_LAYER_URL)
@@ -833,6 +947,37 @@ export default {
      Ai.Zoom({type: 'small'}).addTo(this.trackMap)
      this.loadBindDevicePerson()
      this.loadNotBindEquipment()
      this.$test
        .post(services.alarm.LOAD_MAP_AREA_TOOL, {})
        .then((res) => {
          console.log(res)
          res.data.mapAreaList.forEach(e => {
            var typeObj = res.data.mapAreaTypeList.filter(type => {
              return e.businessType == type.mapAreaBusinessType
            })
            var polygon = Ai.Polygon(e.mapAreaContent, {color: typeObj[0].color, opacity: 1.0, weight: 1.2})
            this.trackMap.addLayer(polygon)
          })
          res.data.toolList.forEach(e => {
            var typeObj = res.data.toolTypeList.filter(type => {
              return e.resourceToolType == type.resourceToolType
            })
            var point = Ai.Point([e.latitude, e.longitude], {
              icon: Ai.Icon({
                // 设置图标URL路径
                iconUrl: typeObj[0].iconUrl,
                // 设置图标大小
                iconSize: [20, 20],
                // 设置点对象和图标的相对偏移量
                iconAnchor: [100, 100]
              })
            })
            this.trackMap.addLayer(point)
          })
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    loadBindDevicePerson() {
      this.$test
@@ -964,45 +1109,46 @@ export default {
        }
      })
    },
    personTrack(item) {
    personTrack() {
      this.stopPlayback()
      this.trackMap.removeLayer(this.layersGroup)
      this.trackMap.removeLayer(this.pointsGroup)
      var item
      if (this.trackTypeCondition.currentIndex == 0) {
        item = this.trackSearch
        this.timelineList = []
      } else {
        item = this.trackSearchs[0]
      }
      if (!item) {
        return
      }
      console.log(item)
      console.log(this.trackMap.hasLayer(this.trackPath))
      if (this.trackMap.hasLayer(this.trackPath)) {
        this.trackMap.removeLayer(this.trackPath)
        this.trackPath.hideTraceFrom(this.trackMap)
      }
      this.trackPerson = item
      if (this.orgId !== item.orgId) {
        this.$test
          .post(services.organization.FENCE_BY_DEPARTMENT, {entityId: item.orgId})
          .then((res) => {
            this.orgId = item.orgId
            console.log(res)
            var la = new Ai.FeatureGroup()
            res.data.forEach(e => {
              var wktstr = e.mapAreaContent
              var areaColor = ''
              this.markTypes.forEach(m => {
                if (m.mapAreaBusinessType == e.businessType) {
                  areaColor = m.color
                }
              })
              var polygon = Ai.Polygon(wktstr, {color: areaColor, opacity: 1.0, weight: 1.2})
              la.addLayer(polygon)
            })
            this.trackMap.addLayer(la)
          })
          .catch((res) => {
          // 请求失败处理...
          })
      }
    },
    playback() {
      if (this.trackMap.hasLayer(this.trackPath)) {
        this.trackMap.removeLayer(this.trackPath)
        this.trackPath.hideTraceFrom(this.trackMap)
      var entityIds
      if (this.trackTypeCondition.currentIndex == 0) {
        if (!this.trackSearch.workEmployeeId) {
          this.$Message.warning('请选择人员！')
          return
        }
        entityIds = this.trackSearch.workEmployeeId
      } else {
        if (this.trackSearchs.length == 0) {
          this.$Message.warning('请选择人员！')
          return
        }
        debugger
        entityIds = ''
        this.trackSearchs.forEach(e => {
          entityIds += e.workEmployeeId + ','
        })
        entityIds = entityIds.substring(0, entityIds.length - 1)
      }
      console.log(this.trackQueryCondition.currentIndex)
      var params = {}
      if (this.trackQueryCondition.currentIndex === 3) {
        if (!this.rangeDate) {
@@ -1010,54 +1156,236 @@ export default {
          return
        } else {
          params = {
            entityId: this.trackPerson.workEmployeeId,
            entityId: entityIds,
            timeType: (this.trackQueryCondition.currentIndex + 1),
            playbackRate: this.playbackRate,
            startTime: this.rangeDate[0],
            endTime: this.rangeDate[1]
          }
        }
      } else {
        params = {
          entityId: this.trackPerson.workEmployeeId,
          entityId: entityIds,
          playbackRate: this.playbackRate,
          timeType: (this.trackQueryCondition.currentIndex + 1)
        }
      }
      console.log(this.rangeDate)
      this.$test
        .post(services.organization.EMPLOYEE_TRACE, params)
        .then((res) => {
          console.log(res)
          var coords = res.data.coordArray
          var defaultOptions = {
            paused: false,
            reverse: false,
            delay: 800,
            dashArray: [10, 20],
            weight: 5,
            opacity: 0.9,
            color: '#0000ff',
            pulseColor: '#FFFFFF',
            playerTrack: true,
            traceTitle: false,
            traceIcon: new Ai.Icon({
              iconUrl: '/static/images/normalworker.png',
              iconSize: [16, 16],
              iconAnchor: [8, 8]
            }),
            titleOptions: {
              className: 'trace_title',
              iconSize: null,
              iconAnchor: [48, 57]
            }
          }
          this.trackPath = new Ai.DynamicPath(coords, defaultOptions)
          this.trackMap.addLayer(this.trackPath)
          this.trackMap.setViewPort([this.trackPath])
          this.trackPath.playTraceOn(this.trackMap)
      if (this.trackTypeCondition.currentIndex == 0) {
        this.$test
          .post(services.trackAnalysis.GET_SINGLE_TRACE, params)
          .then((res) => {
            debugger
            this.timelineList = res.data.toolRecordList
            this.timelineList.forEach(e => {
              e.inTime = e.inTime.split(' ')[1]
              e.color = 'info'
              e.status = 'normal'
            })
            this.trackData = [res.data]
            var mapOfPerson = {}
            this.personList.forEach(e => {
              mapOfPerson[e.workEmployeeId] = e.workEmployeeName
            })
            this.trackData.forEach(e => {
              e.entityName = mapOfPerson[e.entityId]
            })
            this.startPlayback()
          })
          .catch((res) => {
            // 请求失败处理...
          })
      } else {
        this.$test
          .post(services.trackAnalysis.GET_MORE_TRACE, params)
          .then((res) => {
            debugger
            this.trackData = res.data
            var mapOfPerson = {}
            this.personList.forEach(e => {
              mapOfPerson[e.workEmployeeId] = e.workEmployeeName
            })
            this.trackData.forEach(e => {
              e.entityName = mapOfPerson[e.entityId]
            })
            this.startPlaybackMulti()
          })
          .catch((res) => {
            // 请求失败处理...
          })
      }
    },
    startPlaybackMulti() {
      this.playbacking = true
      this.trackMap.removeLayer(this.layersGroup)
      this.layersGroup = new Ai.LayerGroup() // 定义图层数组
      this.trackMap.addLayer(this.layersGroup)
      this.trackMap.removeLayer(this.pointsGroup)
      this.pointsGroup = new Ai.LayerGroup() // 定义图层数组
      this.trackMap.addLayer(this.pointsGroup)
      this.trackData.forEach((e, index) => {
        var point = Ai.Point([e.traceList[0].latitude, e.traceList[0].longitude], {
          icon: Ai.Icon({
            // 设置图标URL路径
            iconUrl: 'static/images/track.png',
            // 设置图标大小
            iconSize: [40, 55],
            // 设置点对象和图标的相对偏移量
            iconAnchor: [20, 25]
          })
        })
        .catch((res) => {
          // 请求失败处理...
        point.entityId = e.entityId
        this.pointsGroup.addLayer(point)
        var popup = Ai.Popup({
          maxWidth: 60,
          minWidth: 50,
          offset: [-3, -45],
          autoClose: false,
          autoPan: false,
          closeButton: false
        })
        popup.setLatLng(point.getLatLng())
        // 设置弹出框弹出内容
        popup.setContent('<div style="text-align: center;color: white;">' + e.entityName + '</div>')
        popup.entityId = e.entityId
        this.pointsGroup.addLayer(popup)
        popup.openOn(this.trackMap) // 需要先显示
        var newLineWktStr = 'LINESTRING ( '
        e.traceList.forEach(el => {
          (function(i, that) {
            var task = setTimeout(function() {
              that.pointsGroup.eachLayer(layer => {
                if (layer.entityId == e.entityId) {
                  layer.setLatLng([el.latitude, el.longitude])
                }
              })
              that.trackTime = el.createDate
              newLineWktStr += el.longitude + ' ' + el.latitude + ','
              that.getNewLine(newLineWktStr, index, e.entityId)
              if (el.isStopPlay) {
                that.playbacking = false
              }
            }, (i) * 1000)
            that.timeouts.push(task)
          })(el.playDurationTime, this)
        })
      })
      var arr = []
      this.pointsGroup.eachLayer(layer => {
        arr.push(layer)
      })
      this.trackMap.setViewPort(arr)
      this.trackMap.setZoom(this.trackMap.getZoom() - 1)
    },
    stopPlayback() {
      this.playbacking = false
      this.timeouts.forEach(e => {
        clearTimeout(e)
      })
      this.timeouts = []
    },
    startPlayback() {
      for (let j = 0; j < this.timelineList.length; j++) {
        this.timelineList[j].color = 'info'
        this.timelineList[j].status = 'normal'
      }
      debugger
      this.playbacking = true
      this.trackMap.removeLayer(this.layersGroup)
      this.layersGroup = new Ai.LayerGroup() // 定义图层数组
      this.trackMap.addLayer(this.layersGroup)
      var lineWktStr = 'LINESTRING ( '
      this.trackData[0].traceList.forEach(e => {
        lineWktStr += e.longitude + ' ' + e.latitude + ','
      })
      lineWktStr = lineWktStr.substring(0, lineWktStr.length - 1)
      lineWktStr += ' )'
      var lineLayer = new Ai.Polyline(lineWktStr, {color: 'gray', opacity: 1.0})
      this.layersGroup.addLayer(lineLayer)
      this.trackMap.setViewPort([lineLayer])
      this.trackMap.setZoom(this.trackMap.getZoom() - 1)
      var point = Ai.Point([this.trackData[0].traceList[0].latitude, this.trackData[0].traceList[0].longitude], {
        icon: Ai.Icon({
          // 设置图标URL路径
          iconUrl: 'static/images/track.png',
          // 设置图标大小
          iconSize: [40, 55],
          // 设置点对象和图标的相对偏移量
          iconAnchor: [20, 25]
        })
      })
      var popup = Ai.Popup({
        maxWidth: 60,
        minWidth: 50,
        offset: [-3, -45],
        autoClose: false,
        autoPan: false,
        closeButton: false
      })
      popup.setLatLng(point.getLatLng())
      // 设置弹出框弹出内容
      popup.setContent('<div style="text-align: center;color: white;">' + this.trackData[0].entityName + '</div>')
      this.trackMap.removeLayer(this.pointsGroup)
      this.pointsGroup = new Ai.LayerGroup() // 定义图层数组
      this.trackMap.addLayer(this.pointsGroup)
      this.pointsGroup.addLayer(point)
      this.pointsGroup.addLayer(popup)
      popup.openOn(this.trackMap) // 需要先显示
      var lastOne = this.trackData[0].traceList[this.trackData[0].traceList.length - 1]
      var newLineWktStr = 'LINESTRING ( '
      this.trackData[0].traceList.forEach(e => {
        (function(i, that) {
          var task = setTimeout(function() {
            that.pointsGroup.eachLayer(layer => {
              layer.setLatLng([e.latitude, e.longitude])
            })
            that.trackTime = e.createDate
            newLineWktStr += e.longitude + ' ' + e.latitude + ','
            that.getNewLine(newLineWktStr, 1, that.trackData[0].entityId)
            if (e === lastOne) {
              that.playbacking = false
              that.timelineList[that.timelineList.length - 1].color = 'success'
              that.timelineList[that.timelineList.length - 1].status = 'normal'
            } else {
              for (let j = 0; j < that.timelineList.length; j++) {
                if (e.toolIndex > j) {
                  that.timelineList[j].color = 'success'
                } else {
                  that.timelineList[j].color = 'info'
                }
                if (e.toolIndex == j) {
                  that.timelineList[j].status = 'active'
                } else {
                  that.timelineList[j].status = 'normal'
                }
              }
            }
          }, (i) * 1000)
          that.timeouts.push(task)
        })(e.playDurationTime, this)
      })
    },
    getNewLine(newLineWktStr, colorIndex, entityId) {
      var color
      if (colorIndex < 8) {
        color = this.lineColors[colorIndex]
      } else {
        color = this.getRandomColor()
      }
      this.layersGroup.eachLayer(layer => {
        if (layer.entityId == entityId) {
          this.map.removeLayer(layer)
        }
      })
      newLineWktStr = newLineWktStr.substring(0, newLineWktStr.length - 1)
      newLineWktStr += ' )'
      var lineLayer = new Ai.Polyline(newLineWktStr, {color: color, opacity: 1.0})
      lineLayer.entityId = entityId
      this.layersGroup.addLayer(lineLayer)
    },
    getRandomColor() { // 获取随机颜色
      return '#' + Math.floor(Math.random() * 0xffffff).toString(16)
    }
  }
}