|
|
@@ -0,0 +1,488 @@
|
|
|
+<template>
|
|
|
+
|
|
|
+ <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"
|
|
|
+ class="searchbox-content-common"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ align="right">
|
|
|
+ </el-date-picker>
|
|
|
+ <input
|
|
|
+ id="sole-input"
|
|
|
+ class="searchbox-content-common1"
|
|
|
+ v-model="device_number"
|
|
|
+ type="text"
|
|
|
+ name="word"
|
|
|
+ autocomplete="off"
|
|
|
+ maxlength="256"
|
|
|
+ placeholder="请输入设备号"
|
|
|
+
|
|
|
+ value
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <el-button type="info" id="search-button" @click="queryDeviceRoute" >搜索</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 #header>
|
|
|
+
|
|
|
+ <el-select size="mini" style="display:inline-blocd;width:100px;" v-model="route_type" @change="queryDeviceRoute">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-checkbox v-model="filterTrack" style="display:inline-blocd;width:100px;margin-left:10px;">
|
|
|
+ 全部数据
|
|
|
+ <el-tooltip class="item" effect="dark" content="勾选后将不过滤任何数据，数据多时会导致加载慢" placement="top-end">
|
|
|
+ <i class="el-icon-info" style="color:#409eff;"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </el-checkbox>
|
|
|
+ </template> -->
|
|
|
+ <template slot-scope="record">
|
|
|
+ <div>
|
|
|
+ {{record.row.RF_DATE}} <br/>
|
|
|
+ <!-- <div v-if="record.row.WifiAddress"> {{record.row.WifiAddress}}</div> -->
|
|
|
+ <div> {{record.row.DEVICE_NAME}}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </bm-control>
|
|
|
+
|
|
|
+ </baidu-map>
|
|
|
+
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ dialog: false,
|
|
|
+ title:'轨迹地图',
|
|
|
+ Routedata:[],
|
|
|
+ map: null,
|
|
|
+ center: '杭州市滨江区',
|
|
|
+ device_number:'',
|
|
|
+ zoom: 13,
|
|
|
+ searchControlOffset:{},
|
|
|
+ listControlOffset:{},
|
|
|
+ route_type:'All',
|
|
|
+ filterTrack:false,
|
|
|
+ options: [{
|
|
|
+ value: 'All',
|
|
|
+ label: '所有轨迹'
|
|
|
+ }, {
|
|
|
+ value: 'WiFi',
|
|
|
+ label: 'WiFi轨迹'
|
|
|
+ }, {
|
|
|
+ value: 'GPS',
|
|
|
+ label: 'GPS轨迹'
|
|
|
+ }],
|
|
|
+ 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)],
|
|
|
+ markerIcons: { // 覆盖物图标
|
|
|
+ origin: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/origin_icon.png',
|
|
|
+ terminus: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/terminus_icon.png',
|
|
|
+
|
|
|
+ node_gps: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/node_gps.png',
|
|
|
+ node_wifi: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/node_wifi.png',
|
|
|
+
|
|
|
+ },
|
|
|
+ trackMarkers:[],
|
|
|
+ currentRow: null,
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+
|
|
|
+ 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("杭州市滨江区", 14);
|
|
|
+ this.searchControlOffset=new BMap.Size(20, 20)
|
|
|
+ this.listControlOffset=new BMap.Size(20, 40)
|
|
|
+ // 添加鼠标滚动缩放
|
|
|
+ map.enableScrollWheelZoom();
|
|
|
+ },
|
|
|
+ queryDeviceRoute(){
|
|
|
+ this.loading = true;
|
|
|
+
|
|
|
+ const query = { device_number: this.device_number,time_range:this.timeRange,}
|
|
|
+ this.$http.get('map/queryDeviceRouteOracle',{ params: query,timeout:60000}).then(res=>{
|
|
|
+ this.map.clearOverlays()
|
|
|
+ let data=[]
|
|
|
+ let trackLength=res.data.length
|
|
|
+ console.log(trackLength)
|
|
|
+ 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_gps";//点类型
|
|
|
+ var pointLogLat = new BMap.Point(data[0].GPS_X, data[0].GPS_Y);//终点
|
|
|
+ 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].GPS_X, data[i].GPS_Y);
|
|
|
+ onLineCoordinates.push(pointLogLat);
|
|
|
+ //描点
|
|
|
+ if (i == 0)
|
|
|
+ pointType = "terminus";
|
|
|
+ else if (i==(trackCount - 1))
|
|
|
+ pointType = "origin";
|
|
|
+ // else if (data[i].SignalType=="WIFI")
|
|
|
+ // pointType = "node_wifi";
|
|
|
+ else
|
|
|
+ pointType = "node_gps";
|
|
|
+
|
|
|
+ var pointMarker = this.CreatePointMarkers(data[i], pointType);
|
|
|
+
|
|
|
+ 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, pType)
|
|
|
+ {
|
|
|
+ console.log(pType)
|
|
|
+
|
|
|
+ var _this=this
|
|
|
+ var trackMarker;
|
|
|
+ var trackPoint = new BMap.Point(pointInfo.Longitude, pointInfo.Latitude);
|
|
|
+
|
|
|
+ if(pType=='node_wifi' || pType=='node_gps'){
|
|
|
+ var pointIcon = new BMap.Icon(this.markerIcons[pType], new BMap.Size(20, 20))
|
|
|
+ pointIcon.setImageSize(new BMap.Size(20, 20));
|
|
|
+
|
|
|
+ }else{
|
|
|
+ var pointIcon = new BMap.Icon(this.markerIcons[pType], new BMap.Size(27, 32));
|
|
|
+ }
|
|
|
+ // var pointIcon = new BMap.Icon(this.markerIcons[pType], new BMap.Size(27, 32));
|
|
|
+ //描点，创建标注
|
|
|
+ pointIcon.iconAnchor = new BMap.Point(5, 5);
|
|
|
+ pointIcon.shadow = "";
|
|
|
+ console.log(pointIcon)
|
|
|
+ trackMarker = new BMap.Marker(trackPoint, { icon: pointIcon });
|
|
|
+
|
|
|
+ if(pType=='node_wifi' || pType=='node_gps'){
|
|
|
+ // trackMarker.setOffset(new BMap.Size(-1, -5));//大图标，偏移确定图片在点正上方
|
|
|
+ }else{
|
|
|
+ trackMarker.setOffset(new BMap.Size(-1, -15));//大图标，偏移确定图片在点正上方
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ trackMarker.addEventListener("click", function ()
|
|
|
+ {
|
|
|
+ // if(pointInfo.SignalType=='WiFi'){
|
|
|
+ // var content ='<p>经过时间：' + pointInfo.PassTime + '</p><p>地址：' + pointInfo.WifiAddress + '</p><p>定位类型：' + pointInfo.SignalType + '</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.GPS_X,pointInfo.GPS_Y), function(result){
|
|
|
+ let index=pointInfo['index']
|
|
|
+ pointInfo['Address']=result.address
|
|
|
+ _this.Routedata[index]=pointInfo
|
|
|
+ var trackPoint = new BMap.Point(pointInfo.GPS_X, pointInfo.GPS_Y);
|
|
|
+ var content ='<p>经过时间：' + pointInfo.RF_DATE + '</p><p>地址：' + pointInfo.Address + '</p><p>基站名称：' + pointInfo.DEVICE_NAME + '</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['WifiAddress']
|
|
|
+ // that.Routedata[index]=item
|
|
|
+ // var trackPoint = new BMap.Point(row['Longitude'], row['Latitude']);
|
|
|
+ // var content ='<p>经过时间：' + item.PassTime + '</p><p>地址：' + item.Address + '</p><p>定位类型：' + item.SignalType + '</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.GPS_X,item.GPS_Y), function(result){
|
|
|
+ item['Address']=result.address
|
|
|
+ that.Routedata[index]=item
|
|
|
+ var trackPoint = new BMap.Point(item.GPS_X, item.GPS_Y);
|
|
|
+ var content ='<p>经过时间：' + item.RF_DATE + '</p><p>地址：' + item.Address + '</p><p>经过基站</p>：' + item.DEVICE_NAME + '</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: 564px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 5;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+#searchbox #searchbox-container {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ pointer-events: auto;
|
|
|
+ width: 500px;
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+#sole-searchbox-content {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.searchbox-content {
|
|
|
+ width: 500px;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+.searchbox-content-common{
|
|
|
+ width:350px !important;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.searchbox-content-common1{
|
|
|
+ width:150px !important;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+#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>
|
tongshanglei