station-test-ui/src/views/map/gpsRouteDialog.vue

<template>
  <el-dialog
    @closed="closedDialog"
   :visible.sync="dialog" 
   append-to-body
   direction="rtl" 
   :fullscreen=true
  >
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="init"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
    <bm-control :offset="searchControlOffset">
      <div id="searchbox">
        <div id="searchbox-container">
          <div id="sole-searchbox-content" class="searchbox-content">
            <el-date-picker
              v-model="timeRange"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </div>
        </div>
        <el-button type="info" id="search-button" @click="queryStudentRoute" >搜索</el-button>
      </div>
    </bm-control>
    <bm-control anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="listControlOffset">
     <div id="route-container">
        <el-table
          class="ontop-route-table"
          ref="singleTable"
          :data="Routedata"
           height="480"
          highlight-current-row
           @row-click="clickStudentRow"

          @current-change="handleCurrentChange"
          style="width: 100%">
          <el-table-column
            type="index"
            width="40"
           
            align="center">
          </el-table-column>

          <el-table-column label="定位列表" >
            <template slot-scope="record">
              <div>
                {{record.row.PassTime}}&nbsp;&nbsp;<i v-if="record.row.WifiAddress" class="wifi_icon">W</i><i v-else class="gps_icon">G</i><br/> 
               <div v-if="record.row.WifiAddress"> {{record.row.WifiAddress}}</div> 
               <div v-else> {{record.row.Address}}</div> 
              </div>
            </template>
          </el-table-column>
        </el-table>
       

      </div>
    </bm-control>

  </baidu-map>
  </el-dialog>
</template>
<script>

export default {
  props: ["displayVisible","activeRfid"],

  data() {
    return {
      loading: false,
      dialog: false,
      title:'轨迹地图',
      Routedata:[
        {
          PassTime:'2022-05-25 15:11:11',
          Address:'浙江省杭州市滨江区华城和瑞科技广场',
          Latitude:30.192001,
          Longitude:120.20121,
        },
        {
          PassTime:'2022-05-25 15:11:11',
          Address:'浙江省杭州市滨江区滨安路跟江虹路交叉口',
          Latitude:30.192797,
          Longitude:120.207067,
        },
        {
          PassTime:'2022-05-24 15:11:11',
          Address:'浙江省杭州市滨江区江虹小区东门',
          Latitude:30.202219,
          Longitude:120.208827,
        },
        
      ],
      map: null,
      center: '杭州市滨江区',
      zoom: 19,
      searchControlOffset:{},
      listControlOffset:{},
      route_type:'All',
      filterTrack:false,
      markerIcons: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/smart_tool/beng.png',
      pickerOptions: {
          shortcuts: [
           {
            text: '3小时内',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 3);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '6小时内',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 6);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '12小时内',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 12);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '24小时内',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '2天内',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '3天内',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        timeRange: [new Date(new Date().toLocaleDateString()), new Date(new Date(new Date().toLocaleDateString()).getTime() + (24 * 60 * 60 * 1000)-1000)],

        trackMarkers:[],
        currentRow: null,
     
    };
  },
  mounted(){

    this.dialog = this.displayVisible;
    


    this.$nextTick(() => {
      
      // const query = { device_number: this.activeRfid}
      // this.$http.get('map/queryDeviceCurLocation',{ params: query }).then(res=>{
      //     let pointInfo=res.data
      //     var trackPoint = new BMap.Point(pointInfo.longitude, pointInfo.latitude);
      //     let pointType = "terminus";
      //     var pointIcon = new BMap.Icon(this.markerIcons[pointType], new BMap.Size(27, 32));
      //     pointIcon.iconAnchor = new BMap.Point(5, 5);
      //     pointIcon.shadow = "";
      //     let trackMarker = new BMap.Marker(trackPoint, { icon: pointIcon });
      //     this.map.addOverlay(trackMarker);
      //     this.center=trackPoint
      //     //this.map.centerAndZoom(trackPoint, 19);
      //     this.queryStudentRoute();
      // }).catch(e => {
      //   // this.loading = false;
      // });
      let topTables = document.getElementsByClassName('ontop-route-table');
      topTables.forEach(item => {
        item.onwheel = function(e) {
          e.stopPropagation();
        }
      })
    })
  },
  methods: {
    init({ BMap, map }) {
      this.map = map;
      // 初始化地图,设置中心点坐标
      // map.centerAndZoom("杭州市滨江区", 15);
      this.searchControlOffset=new BMap.Size(20, 20)
      this.listControlOffset=new BMap.Size(20, 40)
      // 添加鼠标滚动缩放
      map.enableScrollWheelZoom();
      //临时写的
      this.queryStudentRoute()
      
    },
    queryStudentRoute(){
      let that=this
      this.loading = true;
      setTimeout(function(){ 
        that.DrawMapLine(that.Routedata);
       that.loading = false;
      }, 2000);
      
      // const query = { active_rfid: this.activeRfid,time_range:this.timeRange,route_type:this.route_type,filter_track:this.filterTrack,}
      // this.$http.get('map/queryStudentRouteGps',{ params: query,timeout:60000}).then(res=>{
      //     this.map.clearOverlays()
      //     let data=[]
      //     let trackLength=res.data.length
      //     if(trackLength>0){
      //       for (var i = 0; i < trackLength; i++){
      //           let item=res.data[i]
      //           // var myGeo = new BMap.Geocoder();      
      //           // // 根据坐标得到地址描述    
      //           // myGeo.getLocation(new BMap.Point(item.Longitude,item.Latitude), function(result){          
      //           //       item['Address']=result.address
      //           // });
      //           // data.push(item)
      //           item['index']=i
      //           data[i]=item
      //       }
      //       this.DrawMapLine(data)
      //     }
      //     this.Routedata=data
           
      //     this.loading = false;
          
      // })
      // .catch(e => {
      //   this.loading = false;
      // });
    },
    DrawMapLine(data){
        var pointType = "node";//点类型
        var pointLogLat = new BMap.Point(data[0].Longitude, data[0].Latitude);//终点
        var trackCount=data.length
       // this.center=pointLogLat
        this.map.centerAndZoom(pointLogLat, 19);
        var onLineCoordinates = [];
        for (var i = trackCount-1; i >= 0; i--)
        {
            //线上的点
            pointLogLat = new BMap.Point(data[i].Longitude, data[i].Latitude);
            onLineCoordinates.push(pointLogLat);

            var pointMarker = this.CreatePointMarkers(data[i]);

            this.trackMarkers.push(pointMarker);
            
        }
        var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
            scale: 0.6,//图标缩放大小
            strokeColor:'#fff',//设置矢量图标的线填充颜色
            strokeWeight: '2',//设置线宽
        });
        var icons = new BMap.IconSequence(sy, '10', '30');
        //画线
        // var polyline = new BMap.Polyline(onLineCoordinates,{
        //   enableEditing: false,//是否启用线编辑，默认为false
        //   enableClicking: true,//是否响应点击事件，默认为true
        //   icons:[icons],
        //   strokeWeight:'4',//折线的宽度，以像素为单位
        //   strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
        //   strokeColor:"blue" //折线颜色
        // });
        // this.map.addOverlay(polyline);
        //最佳视野
        this.map.setViewport(onLineCoordinates);
    },
    CreatePointMarkers(pointInfo)
    {
        // console.log(pType)
        var _this=this
        var trackMarker;
        var trackPoint = new BMap.Point(pointInfo.Longitude, pointInfo.Latitude);


          var pointIcon = new BMap.Icon(this.markerIcons, new BMap.Size(32, 32));

        pointIcon.setImageSize(new BMap.Size(32, 32));
        // var pointIcon = new BMap.Icon(this.markerIcons[pType], new BMap.Size(27, 32));
            //描点，创建标注 
        pointIcon.iconAnchor = new BMap.Point(5, 5);
        pointIcon.shadow = "";
        trackMarker = new BMap.Marker(trackPoint, { icon: pointIcon });

        
        trackMarker.addEventListener("click", function ()
        {
            // if(pointInfo.SignalType=='WiFi'){
              var content ='<p>经过时间：' + pointInfo.PassTime + '</p><p>地址：' + pointInfo.WifiAddress + '</p>'
              var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象  
              _this.map.centerAndZoom(trackPoint, 19);
              _this.map.openInfoWindow(infoWindow,trackPoint);
            // }else{
            //   var myGeo = new BMap.Geocoder();      
            //     // 根据坐标得到地址描述    
            //   myGeo.getLocation(new BMap.Point(pointInfo.Longitude,pointInfo.Latitude), function(result){     
            //               let index=pointInfo['index']     
            //               pointInfo['Address']=result.address
            //               _this.Routedata[index]=pointInfo
            //               var trackPoint = new BMap.Point(pointInfo.Longitude, pointInfo.Latitude);
            //               var content ='<p>经过时间：' + pointInfo.PassTime + '</p><p>地址：' + pointInfo.Address + '</p>'
            //               var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象  
            //               _this.map.centerAndZoom(trackPoint, 19);
            //               _this.map.openInfoWindow(infoWindow,trackPoint);
            //   });
            //   // var content ='<p>经过时间：' + pointInfo.PassTime + '</p><p>地址：' + pointInfo.Address + '</p><p>定位类型：' + pointInfo.SignalType + '</p>'
            // }
            
           
        });
        this.map.addOverlay(trackMarker);

        return trackMarker;
    },

    clickStudentRow(row, column, event){
        let that=this
        let index=row['index']
        let item=row
        // if(row['WifiAddress']){
            item['Address']=row['Address']
            that.Routedata[index]=item
            var trackPoint = new BMap.Point(row['Longitude'], row['Latitude']);
            var content ='<p>经过时间：' + item.PassTime + '</p><p>地址：' + item.Address + '</p>'
            var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象  
            that.map.centerAndZoom(trackPoint, 19);
            // that.map.panTo(trackPoint)
            that.map.openInfoWindow(infoWindow,trackPoint);
        // }else{
        //     var myGeo = new BMap.Geocoder();      
        //         // 根据坐标得到地址描述    
        //     myGeo.getLocation(new BMap.Point(item.Longitude,item.Latitude), function(result){          
        //                 item['Address']=result.address
        //                 that.Routedata[index]=item
        //                 var trackPoint = new BMap.Point(item.Longitude, item.Latitude);
        //                 var content ='<p>经过时间：' + item.PassTime + '</p><p>地址：' + item.Address + '</p>'
        //                 var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象  
        //                 that.map.centerAndZoom(trackPoint, 19);
        //                 // that.map.panTo(trackPoint)
        //                 that.map.openInfoWindow(infoWindow,trackPoint);
        //     });
        // }

    },
    handleCurrentChange(val) {
        this.currentRow = val;
    },
    closedDialog() {
      // this.dialog = false;
      this.$emit("formCancel");  
    }
  }
};
</script>
<style>
.el-select-dropdown{
  z-index:9999 !important;
}
</style>
<style lang="scss" scoped>

.el-drawer span:focus {
  outline: none;
}
.bm-view {
  width: 100%;
  height: calc(100vh - 40px);
  margin-top:10px;
}
#route-container{
  width:280px;
  height: 500px;
  background-color: #fafafa;
}

#searchbox {
  border-radius: 2px;
  width: 464px;
  position: relative;
  z-index: 5;
  display: flex;
}
#searchbox #searchbox-container {
  display: flex;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  width: 400px;
  float: left;
  
  box-sizing: border-box;
  
}

#sole-searchbox-content {
  position: relative;
}
.searchbox-content {
  width: 400px;
  border-bottom:none !important;
  border-radius: 2px 0 0 2px;
  background: #fff;
}
#sole-searchbox-content #sole-input,
#searchType {
  box-sizing: border-box;
  border: 0;
  padding: 9px 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  line-height: 20px;
  font-size: 14px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 2px 0 0 2px;
}
#sole-input {
  width: 250px;
}
#sole-input:focus {
  outline: none;
}
#search-button{
  border-top-left-radius:0px !important;
  border-bottom-left-radius:0px !important;
}
.wifi_icon{
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:9px;
  background:#1296db;
  color:#FFF;
  text-align:center;
  line-height:18px;
}
.gps_icon{
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:9px;
  background:#1afa29;
  color:#FFF;
  text-align:center;
  line-height:18px;
}
</style>