|
|
@@ -0,0 +1,467 @@
|
|
|
+<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}} <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.Address + '</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>
|
likang