|
|
@@ -0,0 +1,985 @@
|
|
|
+<template>
|
|
|
+ <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="init">
|
|
|
+ <!-- <bml-marker-clusterer :averageCenter="true">
|
|
|
+ <bm-marker v-for="(marker,index) of markers" :key="index" :position="{lng: marker.position.lng, lat: marker.position.lat}"></bm-marker>
|
|
|
+ </bml-marker-clusterer> -->
|
|
|
+ <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT" :offset="mapTypeControlOffset"></bm-map-type>
|
|
|
+ <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" :offset="navigationControlOffset"></bm-navigation>
|
|
|
+
|
|
|
+ <bm-control anchor="BMAP_ANCHOR_TOP_LEFT" class="bottom_box" :offset="listControlOffset">
|
|
|
+ <div id="control-container">
|
|
|
+ <!-- <button @click="openDistanceTool">开启测距</button> -->
|
|
|
+ <!-- <div class="head_control_time" @click="openDistanceTool">{{flash_time}}秒</div> -->
|
|
|
+ <!-- <div class="head_control_btn" @click="openDistanceTool"><i class="el-icon-location-information"></i>跟踪</div> -->
|
|
|
+ <!-- <div class="head_control_btn" @click="openDistanceTool"><i class="el-icon-place"></i>轨迹</div> -->
|
|
|
+
|
|
|
+ <div class="head_control_btn" @click="openDistanceTool"><i class="el-icon-paperclip"></i>测距</div>
|
|
|
+ <div class="head_control_select" >
|
|
|
+ <el-radio-group v-model="route_radio" @change="RouteTypeChange">
|
|
|
+ <el-radio :label="1">轨迹回放</el-radio>
|
|
|
+ <el-radio :label="2">实时监控</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </bm-control>
|
|
|
+ <!-- 地图右边控件 设备列表 -->
|
|
|
+ <bm-control anchor="BMAP_ANCHOR_TOP_RIGHT" class="right_box" :offset="listControlOffset">
|
|
|
+ <div id="right-search-box">
|
|
|
+ <div class="search_title">
|
|
|
+ <div v-if="queryRouteParam.imei != ''">{{queryRouteParam.imei}}</div>
|
|
|
+ <div v-else>请先选择一个设备</div>
|
|
|
+ </div>
|
|
|
+ <div class="search_content" v-if="showSearchContent">
|
|
|
+ <el-select v-model="queryRouteInterval" size="mini" @change="handleTimeChange" class="time_select">
|
|
|
+ <el-option
|
|
|
+ v-for="item in timePickerOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="search_btn" @click="searchRoute" v-show="showSearchBtn"><i class="el-icon-search"></i> 搜索</div>
|
|
|
+ <div class="search_btn" @click="playRoute" v-show="showSearchBtn"><i class="el-icon-video-play"></i> 播放</div>
|
|
|
+ <div class="search_btn" @click="pauseRoute" v-show="showPauseBtn"><i class="el-icon-video-pause"></i> 暂停</div>
|
|
|
+ <div class="search_btn" @click="keepOnRoute" v-show="showkeepOnBtn"><i class="el-icon-video-play"></i> 继续</div>
|
|
|
+ <div class="search_btn" @click="stopRoute" v-show="!showSearchBtn"><i class="el-icon-switch-button"></i> 停止</div>
|
|
|
+ <div v-show="showTimeRange">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryRouteParam.time_range"
|
|
|
+ class="time_range_select"
|
|
|
+ type="datetimerange"
|
|
|
+ size="mini"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <el-select v-model="move_speed" size="mini" class="time_select">
|
|
|
+ <el-option
|
|
|
+ v-for="item in speedOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="search_content" v-else>
|
|
|
+ <div class="interval_title">每隔</div>
|
|
|
+ <el-select v-model="queryInterval" size="mini" class="interval_select">
|
|
|
+ <el-option
|
|
|
+ v-for="item in intervalPickerOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="search_btn" @click="FreshMonitorRoute"><i class="el-icon-refresh-right"></i> 刷新</div>
|
|
|
+ <div class="interval_title">计时</div>
|
|
|
+ <div class="interval_content">{{countdownInterval}}秒</div>
|
|
|
+ <!-- <div class="search_btn btn_onlyred" @click="StartCountDown"><i class="el-icon-caret-right"></i> 开始</div> -->
|
|
|
+ <div :class="[StartBtnReadOnly==true ?'search_btn btn_onlyred':'search_btn']" @click="StartCountDown"><i class="el-icon-caret-right"></i> 开始</div>
|
|
|
+ <div :class="[StopBtnReadOnly==true ?'search_btn btn_onlyred':'search_btn']" @click="StopCountDown"><i class="el-icon-switch-button"></i> 停止</div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button id="toggleListBtn" @click="toggleTabs" :icon="'el-icon-arrow-'+toggleIcon"></el-button>
|
|
|
+ <el-tabs type="card" @tab-click="clickTab" v-model="activeName" v-show="showTabs">
|
|
|
+ <el-tab-pane label="我的设备" name="deviceList">
|
|
|
+ <div id="student-container">
|
|
|
+ <el-table class="ontop-table" ref="multipleTable" row-key="id" :data="data" @row-click="currentRowClick" highlight-current-row>
|
|
|
+ <!-- <el-table-column type="selection" width="50" align="center" reserve-selection></el-table-column> -->
|
|
|
+ <el-table-column prop="status_icon" align="center" label="类型" width="45">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img :src="statusIcons[ scope.row.status_icon]" class="status_img">
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="imei" align="center" label="设备号">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.imei || scope.row.rfid}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status_text" label="状态" align="center" width="60"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ small
|
|
|
+ background
|
|
|
+ class="pagination-container"
|
|
|
+ hide-on-single-page
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="paginate.current"
|
|
|
+ :page-sizes="paginate.sizes"
|
|
|
+ :page-size="paginate.limit"
|
|
|
+ :pager-count="5"
|
|
|
+ layout="slot, prev, pager, next, total"
|
|
|
+ :total="paginate.total"/>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </bm-control>
|
|
|
+ <!-- 地图底部控件 -->
|
|
|
+ <bm-control anchor="BMAP_ANCHOR_BOTTOM_LEFT" class="bottom_box" :offset="listControlOffset">
|
|
|
+ <el-button id="bottomToggleBtn" @click="bottomToggleTabs" :icon="'el-icon-arrow-'+BotToggleIcon"></el-button>
|
|
|
+ <div id="route-container" v-show="bottomShowTabs">
|
|
|
+ <div class="route_content" >
|
|
|
+ <el-table :data="Routedata" class="route_table" v-show="showRouteContent" @row-click="clickRouteRow" highlight-current-row>
|
|
|
+ <el-table-column type="index" width="50"> </el-table-column>
|
|
|
+ <el-table-column prop="SignalType" align="center" label="定位类型"></el-table-column>
|
|
|
+ <el-table-column prop="PassTime" align="center" label="定位时间"></el-table-column>
|
|
|
+ <el-table-column prop="BatteryLevel" align="center" label="电量"></el-table-column>
|
|
|
+ <!-- <el-table-column prop="address" align="center" label="经纬度"></el-table-column> -->
|
|
|
+ <el-table-column label="经纬度" align="center" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div> {{scope.row.Longitude}},{{scope.row.Latitude}}
|
|
|
+ <span v-if="scope.row.Address">@{{scope.row.Address}}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="address" align="center" label="查看"></el-table-column> -->
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </bm-control>
|
|
|
+
|
|
|
+ <bml-lushu
|
|
|
+ @stop="resetRoute"
|
|
|
+ :path="path"
|
|
|
+ :icon="icon"
|
|
|
+ :play="playState"
|
|
|
+ :speed="move_speed"
|
|
|
+ :rotation="true">
|
|
|
+ </bml-lushu>
|
|
|
+ </baidu-map>
|
|
|
+
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
|
|
|
+import DistanceTool from '@/utils/DistanceTool'
|
|
|
+import {BmlMarkerClusterer} from 'vue-baidu-map'
|
|
|
+import userInfoDialog from "./userInfoDialog";
|
|
|
+import {BmlLushu} from 'vue-baidu-map'
|
|
|
+import $ from "jquery";
|
|
|
+export default {
|
|
|
+ mixins: [rlListOperate],
|
|
|
+ components:{BmlMarkerClusterer,userInfoDialog,BmlLushu},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ playState: false,
|
|
|
+ showSearchContent:true,
|
|
|
+ route_radio:1,
|
|
|
+ pointArr:[],
|
|
|
+ path: [],
|
|
|
+ move_speed:200,
|
|
|
+ icon: {
|
|
|
+ url: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/catch_fd/car/car_p_3.png',
|
|
|
+ size: {width: 36, height: 36},
|
|
|
+ opts: {anchor: {width: 18, height:13}}
|
|
|
+ },
|
|
|
+ activeName: 'deviceList',
|
|
|
+ loading: false,
|
|
|
+ center: '杭州市滨江区',
|
|
|
+ url:'map/queryDeviceList',
|
|
|
+ alarm_data:[],
|
|
|
+ StartBtnReadOnly:false,
|
|
|
+ StopBtnReadOnly:true,
|
|
|
+ infoWindow:{},
|
|
|
+ currentUserId:'',
|
|
|
+ showSearchBtn:true,
|
|
|
+ showPauseBtn:false,
|
|
|
+ showkeepOnBtn:false,
|
|
|
+ formVisible: false,
|
|
|
+ mapTypeControlOffset:{},
|
|
|
+ navigationControlOffset:{},
|
|
|
+ showTabs:true,
|
|
|
+ bottomShowTabs:false,
|
|
|
+ showRouteContent:true,
|
|
|
+ currentShowTab:'realinfo',
|
|
|
+ listControlOffset:{},
|
|
|
+ toggleIcon: 'right',
|
|
|
+ BotToggleIcon: 'up',
|
|
|
+ zoom: 13,
|
|
|
+ mapData: [],
|
|
|
+ show: false,
|
|
|
+ map: null,
|
|
|
+ markers:[],
|
|
|
+ pointArr:[],
|
|
|
+ content: "",
|
|
|
+ opts: null,
|
|
|
+ queryParam:{
|
|
|
+ limit:15
|
|
|
+ },
|
|
|
+
|
|
|
+ userFormVisible:false,
|
|
|
+ statusIcons:{
|
|
|
+ stop:'https://rlfd.oss-cn-hangzhou.aliyuncs.com/catch_fd/icon/stop.png',
|
|
|
+ alarm:'https://rlfd.oss-cn-hangzhou.aliyuncs.com/catch_fd/icon/alarm.png',
|
|
|
+ offline:'https://rlfd.oss-cn-hangzhou.aliyuncs.com/catch_fd/icon/offline.png',
|
|
|
+ online:'https://rlfd.oss-cn-hangzhou.aliyuncs.com/catch_fd/icon/online.png',
|
|
|
+ run:'https://rlfd.oss-cn-hangzhou.aliyuncs.com/catch_fd/icon/run.png',
|
|
|
+ unuse:'https://rlfd.oss-cn-hangzhou.aliyuncs.com/catch_fd/icon/unuse.png',
|
|
|
+ },
|
|
|
+ markerIcons: { // 覆盖物图标
|
|
|
+ car: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/catch_fd/car/car_2_0.png',
|
|
|
+ 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',
|
|
|
+ alarm: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/alarm_icon.png',
|
|
|
+ // node_gps: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/node_gps.png',
|
|
|
+ node: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/node_wifi.png',
|
|
|
+
|
|
|
+ },
|
|
|
+ currentRow: null,
|
|
|
+ alarmReasonList:[],
|
|
|
+ queryInterval:15,
|
|
|
+ countdownInterval:15,
|
|
|
+ intervalPickerOptions:[{
|
|
|
+ value: 5,
|
|
|
+ label: '5秒'
|
|
|
+ },{
|
|
|
+ value: 8,
|
|
|
+ label: '8秒'
|
|
|
+ },{
|
|
|
+ value: 10,
|
|
|
+ label: '10秒'
|
|
|
+ },{
|
|
|
+ value: 12,
|
|
|
+ label: '12秒'
|
|
|
+ },{
|
|
|
+ value: 15,
|
|
|
+ label: '15秒'
|
|
|
+ },{
|
|
|
+ value: 20,
|
|
|
+ label: '20秒'
|
|
|
+ },{
|
|
|
+ value: 25,
|
|
|
+ label: '25秒'
|
|
|
+ }, {
|
|
|
+ value: 30,
|
|
|
+ label: '30秒'
|
|
|
+ }],
|
|
|
+ timePickerOptions: [{
|
|
|
+ value: 3*3600,
|
|
|
+ label: '3小时内'
|
|
|
+ }, {
|
|
|
+ value: 6*3600,
|
|
|
+ label: '6小时内'
|
|
|
+ }, {
|
|
|
+ value: 12*3600,
|
|
|
+ label: '12小时内'
|
|
|
+ }, {
|
|
|
+ value: 24*3600,
|
|
|
+ label: '24小时内'
|
|
|
+ }, {
|
|
|
+ value: 48*3600,
|
|
|
+ label: '3天内'
|
|
|
+ }, {
|
|
|
+ value: 0,
|
|
|
+ label: '自定义'
|
|
|
+ }],
|
|
|
+ startDateTime:'',
|
|
|
+ queryRouteInterval:6*3600,
|
|
|
+ queryRouteParam: {
|
|
|
+ imei:'',
|
|
|
+ time:'',
|
|
|
+ time_range:'',
|
|
|
+ },
|
|
|
+ showTimeRange:false,
|
|
|
+ speedOptions:[{
|
|
|
+ value: 50,
|
|
|
+ label: '很慢(50)'
|
|
|
+ }, {
|
|
|
+ value: 100,
|
|
|
+ label: '慢速(100)'
|
|
|
+ }, {
|
|
|
+ value: 200,
|
|
|
+ label: '一般(200)'
|
|
|
+ }, {
|
|
|
+ value: 500,
|
|
|
+ label: '比较快(500)'
|
|
|
+ }, {
|
|
|
+ value: 1000,
|
|
|
+ label: '很快(1000)'
|
|
|
+ }, {
|
|
|
+ value: 5000,
|
|
|
+ label: '超快(5000)'
|
|
|
+ }],
|
|
|
+
|
|
|
+ trackMarkers:[],
|
|
|
+ Routedata:[],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ unmount () {
|
|
|
+ distanceTool && distanceTool.close()
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ let topTables = document.getElementsByClassName('ontop-table');
|
|
|
+ let routeTables = document.getElementsByClassName('route_table');
|
|
|
+ this.alarmReasonList=this.$appConfig["alarmReasonList"];
|
|
|
+ topTables.forEach((item,index) => {
|
|
|
+ item.onwheel = function(e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ routeTables.forEach((item,index) => {
|
|
|
+ item.onwheel = function(e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let params = this.$router.currentRoute.query
|
|
|
+ // this.queryParam.device_number=params.device_number
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ window.showUserInfo=this.showUserInfo;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init({ BMap, map }) {
|
|
|
+ this.map = map;
|
|
|
+ // 初始化地图,设置中心点坐标
|
|
|
+
|
|
|
+ this.mapTypeControlOffset= new BMap.Size(10, 40)
|
|
|
+ this.navigationControlOffset=new BMap.Size(10, 80)
|
|
|
+ this.listControlOffset=new BMap.Size(0, 0)
|
|
|
+ //开始测量
|
|
|
+ this.distanceTool = new BMapLib.DistanceTool(map);
|
|
|
+ // 添加鼠标滚动缩放
|
|
|
+ map.enableScrollWheelZoom();
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ openDistanceTool (e) {
|
|
|
+ const {distanceTool} = this
|
|
|
+ distanceTool && distanceTool.open()
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ showUserInfo(val){
|
|
|
+ this.currentUserId=val
|
|
|
+ this.userFormVisible=true
|
|
|
+ },
|
|
|
+ closeUserDialog(){
|
|
|
+ this.userFormVisible=false
|
|
|
+ },
|
|
|
+
|
|
|
+ currentRowClick(val){
|
|
|
+ this.map.clearOverlays()
|
|
|
+ this.addSingleMarker(val)
|
|
|
+ },
|
|
|
+
|
|
|
+ addSingleMarker(data){
|
|
|
+ let that=this
|
|
|
+ // 如果没有经纬度
|
|
|
+ if (!data.latitude || !data.longitude) {
|
|
|
+ this.queryRouteParam.imei='';
|
|
|
+ this.$message.warning('暂无定位数据');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.queryRouteParam.imei=data.imei;
|
|
|
+ var pt = new BMap.Point(data.longitude, data.latitude);
|
|
|
+ var opts = {
|
|
|
+ width : 320, // 信息窗口宽度
|
|
|
+ enableAutoPan:false
|
|
|
+ }
|
|
|
+ var myIcon = new BMap.Icon(this.markerIcons['car'], new BMap.Size(32, 32));
|
|
|
+ myIcon.setImageSize(new BMap.Size(32, 32));
|
|
|
+ var marker = new BMap.Marker(pt, {
|
|
|
+ icon: myIcon
|
|
|
+ }); // 创建标注
|
|
|
+
|
|
|
+ let windowContent=this.createMarkerContent(data)
|
|
|
+ this.infoWindow = new BMap.InfoWindow(windowContent,opts); // 创建信息窗口对象
|
|
|
+
|
|
|
+ marker.addEventListener("click", function(){
|
|
|
+ this.map.openInfoWindow(that.infoWindow, pt); //开启信息窗口
|
|
|
+ });
|
|
|
+ this.map.addOverlay(marker);
|
|
|
+
|
|
|
+ this.map.openInfoWindow(this.infoWindow, pt); //开启信息窗口
|
|
|
+ this.map.centerAndZoom(pt,13);
|
|
|
+ },
|
|
|
+ createMarkerContent(data){
|
|
|
+ let address
|
|
|
+ if(data['loc_mode'] && data['loc_mode'].toLowerCase() =='rfid'){
|
|
|
+ address=data['address']
|
|
|
+ }else{
|
|
|
+ var myGeo = new BMap.Geocoder();
|
|
|
+ // 根据坐标得到地址描述
|
|
|
+ myGeo.getLocation(new BMap.Point(data.longitude,data.latitude), function(result){
|
|
|
+ address=result.address
|
|
|
+ $('#marker_address').text(address);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ var content ='<div class="info_label">设备编号：' + (data.imei || data.rfid) + '</div>'
|
|
|
+ if(data.online_time){
|
|
|
+ content += '<div class="info_label">剩余电量：' + data.battery_level + '%</div>'
|
|
|
+ }else{
|
|
|
+ content += '<div class="info_label">剩余电量：--</div>'
|
|
|
+ }
|
|
|
+ content += '<div class="info_label">定位地址：<a id="marker_address">' + address + '</a></div>'
|
|
|
+ content += '<div class="info_label">定位类型：' + data.loc_mode + '</div>'
|
|
|
+ content += '<div class="info_label">在线时间：'+data.online_time+'</div>'
|
|
|
+
|
|
|
+ // if(data.alarm_state>0 && data.alarm_reason_list){
|
|
|
+ // content += '<div class="info_label">告警标签：'
|
|
|
+ // for (let i=0;i<data.alarm_reason_list.length;i++)
|
|
|
+ // {
|
|
|
+ // content+='<span class="el-tag el-tag--dark el-tag--small el-tag--light" style="border:0px;background-color:'+this.alarmReasonList[data.alarm_reason_list[i].value]+';">'+data.alarm_reason_list[i].text+'</span> '
|
|
|
+ // }
|
|
|
+ // content +='</div>'
|
|
|
+ // }
|
|
|
+
|
|
|
+ return content
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ clickTab(tab) {
|
|
|
+ let name = tab.name;
|
|
|
+ if (name == 'deviceList') {
|
|
|
+ this.url = 'map/queryDeviceList';
|
|
|
+ }
|
|
|
+ this.handleRefresh();
|
|
|
+ },
|
|
|
+
|
|
|
+ toggleTabs(e) {
|
|
|
+ this.showTabs = !this.showTabs
|
|
|
+ var toggleListBtn = document.getElementById('toggleListBtn')
|
|
|
+ var rightSearchBox = document.getElementById('right-search-box')
|
|
|
+
|
|
|
+ var list_container = document.getElementById('route-container')
|
|
|
+ var control_container = document.getElementById('control-container')
|
|
|
+
|
|
|
+ var bottomToggleBtn = document.getElementById('bottomToggleBtn')
|
|
|
+ if (this.showTabs) {
|
|
|
+
|
|
|
+ this.toggleIcon = 'right'
|
|
|
+ toggleListBtn && (toggleListBtn.style.right = '310px')
|
|
|
+ rightSearchBox && (rightSearchBox.style.right = '310px')
|
|
|
+ list_container && (list_container.style.width = 'calc(100% - 310px)')
|
|
|
+ control_container && (control_container.style.width = 'calc(100% - 310px)')
|
|
|
+ bottomToggleBtn && (bottomToggleBtn.style.left = 'calc(50% - 140px)')
|
|
|
+ } else {
|
|
|
+
|
|
|
+ this.toggleIcon = 'left'
|
|
|
+ toggleListBtn && (toggleListBtn.style.right = '0px')
|
|
|
+ rightSearchBox && (rightSearchBox.style.right = '0px')
|
|
|
+ list_container && (list_container.style.width = '100%')
|
|
|
+ control_container && (control_container.style.width = '100%')
|
|
|
+ bottomToggleBtn && (bottomToggleBtn.style.left = '50%')
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ bottomToggleTabs(e) {
|
|
|
+ this.bottomShowTabs = !this.bottomShowTabs
|
|
|
+ var bottomToggleBtn = document.getElementById('bottomToggleBtn')
|
|
|
+ if (this.bottomShowTabs) {
|
|
|
+ this.BotToggleIcon = 'down'
|
|
|
+ bottomToggleBtn && (bottomToggleBtn.style.bottom = '195px')
|
|
|
+ } else {
|
|
|
+
|
|
|
+ this.BotToggleIcon = 'up'
|
|
|
+ bottomToggleBtn && (bottomToggleBtn.style.bottom = '0px')
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ handleTimeChange(val){
|
|
|
+ if(val==0){
|
|
|
+ this.showTimeRange=true
|
|
|
+ }else{
|
|
|
+ this.showTimeRange=false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchRoute(){
|
|
|
+ this.playState=false
|
|
|
+ if(this.queryRouteParam.imei==''){
|
|
|
+ this.$message.error('请先选择设备');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.queryRouteParam.time=this.queryRouteInterval
|
|
|
+ if(this.queryRouteParam.time==0 && this.queryRouteParam.time_range==''){
|
|
|
+ this.$message.error('请选择自定义时间段');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.queryRouteGps()
|
|
|
+
|
|
|
+ },
|
|
|
+ queryRouteGps(){
|
|
|
+ this.loading = true;
|
|
|
+ this.$http.get('map/queryDeviceRouteGps',{ params: this.queryRouteParam,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]
|
|
|
+ item['index']=i
|
|
|
+ data[i]=item
|
|
|
+ }
|
|
|
+ this.DrawMapLine(data)
|
|
|
+ }
|
|
|
+ this.Routedata=data
|
|
|
+ this.loading = false;
|
|
|
+ var bottomToggleBtn = document.getElementById('bottomToggleBtn')
|
|
|
+ if(!this.bottomShowTabs){
|
|
|
+ this.bottomShowTabs = !this.bottomShowTabs
|
|
|
+ this.BotToggleIcon = 'down'
|
|
|
+ bottomToggleBtn && (bottomToggleBtn.style.bottom = '195px')
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(e => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //播放按钮
|
|
|
+ playRoute(){
|
|
|
+ this.path=this.pointArr
|
|
|
+ //显示暂停 停止按钮
|
|
|
+ this.showSearchBtn=false
|
|
|
+ this.showPauseBtn=true
|
|
|
+ this.playState=true
|
|
|
+ },
|
|
|
+ //播放结束回调
|
|
|
+ resetRoute(){
|
|
|
+ this.showSearchBtn=true
|
|
|
+ this.playState=false
|
|
|
+ this.showPauseBtn=false
|
|
|
+ this.showkeepOnBtn=false
|
|
|
+ },
|
|
|
+ //暂停
|
|
|
+ pauseRoute(){
|
|
|
+ this.showkeepOnBtn=true
|
|
|
+ this.showPauseBtn=false
|
|
|
+ this.playState=false
|
|
|
+ },
|
|
|
+ //继续
|
|
|
+ keepOnRoute(){
|
|
|
+ this.showkeepOnBtn=false
|
|
|
+ this.showPauseBtn=true
|
|
|
+ this.playState=true
|
|
|
+ },
|
|
|
+ //停止
|
|
|
+ stopRoute(){
|
|
|
+ this.path=[]
|
|
|
+ this.showSearchBtn=true
|
|
|
+ this.showkeepOnBtn=false
|
|
|
+ this.showPauseBtn=false
|
|
|
+ this.playState=false
|
|
|
+ },
|
|
|
+ //监控轨迹刷新
|
|
|
+ FreshMonitorRoute(){
|
|
|
+ if(this.queryRouteParam.imei==''){
|
|
|
+ this.$message.error('请先选择设备');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ // console.log('query');
|
|
|
+ var endDateTime = new Date();
|
|
|
+ var time = Math.round((endDateTime-this.startDateTime)/1000)
|
|
|
+ this.queryRouteParam.time=time
|
|
|
+ this.queryRouteGps()
|
|
|
+ },
|
|
|
+ //开始监控
|
|
|
+ StartCountDown(){
|
|
|
+ if(this.queryRouteParam.imei==''){
|
|
|
+ this.$message.error('请先选择设备');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.StartBtnReadOnly=true
|
|
|
+ this.StopBtnReadOnly=false
|
|
|
+ this.startDateTime = new Date();
|
|
|
+ console.log('start',this.startDateTime)
|
|
|
+ this.timer= setInterval(() => {
|
|
|
+ this.countdownInterval--
|
|
|
+ if(this.countdownInterval<0){
|
|
|
+ this.countdownInterval=this.queryInterval-1
|
|
|
+ //开始查询
|
|
|
+ this.FreshMonitorRoute()
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ //停止监控
|
|
|
+ StopCountDown(){
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.StartBtnReadOnly=false
|
|
|
+ this.StopBtnReadOnly=true
|
|
|
+ this.countdownInterval=this.queryInterval
|
|
|
+ },
|
|
|
+
|
|
|
+ DrawMapLine(data){
|
|
|
+
|
|
|
+ var pointType = "node";//点类型
|
|
|
+ var pointLogLat = new BMap.Point(data[0].Longitude, data[0].Latitude);//终点
|
|
|
+ this.pointArr=[]
|
|
|
+ var trackCount=data.length
|
|
|
+ var onLineCoordinates = [];
|
|
|
+ for (var i = trackCount-1; i >= 0; i--)
|
|
|
+ {
|
|
|
+ //线上的点
|
|
|
+ pointLogLat = new BMap.Point(data[i].Longitude, data[i].Latitude);
|
|
|
+
|
|
|
+ this.pointArr.push(pointLogLat)
|
|
|
+ onLineCoordinates.push(pointLogLat);
|
|
|
+ //描点
|
|
|
+ if (i == 0){
|
|
|
+ pointType = "terminus";
|
|
|
+ }else if (i==(trackCount - 1)){
|
|
|
+ pointType = "origin";
|
|
|
+ }else if (data[i].AlarmType >0 ){
|
|
|
+ pointType = "alarm";
|
|
|
+ }else{
|
|
|
+ pointType = "node";
|
|
|
+ }
|
|
|
+ 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,{margins: [0, 200, 100,0] ,zoomFactor:-1});
|
|
|
+ },
|
|
|
+ CreatePointMarkers(pointInfo, pType)
|
|
|
+ {
|
|
|
+ // console.log(pType)
|
|
|
+ var _this=this
|
|
|
+ var trackMarker;
|
|
|
+ var trackPoint = new BMap.Point(pointInfo.Longitude, pointInfo.Latitude);
|
|
|
+
|
|
|
+ if(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 = "";
|
|
|
+ trackMarker = new BMap.Marker(trackPoint, { icon: pointIcon });
|
|
|
+
|
|
|
+ if(pType=='node_gps'){
|
|
|
+ // trackMarker.setOffset(new BMap.Size(-1, -5));//大图标，偏移确定图片在点正上方
|
|
|
+ }else{
|
|
|
+ trackMarker.setOffset(new BMap.Size(-1, -15));//大图标，偏移确定图片在点正上方
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ trackMarker.addEventListener("click", function ()
|
|
|
+ {
|
|
|
+ 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><p>定位类型：' + pointInfo.SignalType + '</p>'
|
|
|
+ var opts = {
|
|
|
+ width : 320, // 信息窗口宽度
|
|
|
+ enableAutoPan:false
|
|
|
+ }
|
|
|
+ var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
|
|
|
+ _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;
|
|
|
+ },
|
|
|
+ clickRouteRow(row){
|
|
|
+ // console.log(row)
|
|
|
+ var _this=this
|
|
|
+ var myGeo = new BMap.Geocoder();
|
|
|
+ // 根据坐标得到地址描述
|
|
|
+ myGeo.getLocation(new BMap.Point(row.Longitude,row.Latitude), function(result){
|
|
|
+ let index=row['index']
|
|
|
+ row['Address']=result.address
|
|
|
+ _this.Routedata[index]=row
|
|
|
+ var trackPoint = new BMap.Point(row.Longitude, row.Latitude);
|
|
|
+ var content ='<p>经过时间：' + row.PassTime + '</p><p>地址：' + row.Address + '</p><p>定位类型：' + row.SignalType + '</p>'
|
|
|
+ var opts = {
|
|
|
+ width : 320, // 信息窗口宽度
|
|
|
+ enableAutoPan:false
|
|
|
+ }
|
|
|
+ var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
|
|
|
+ _this.map.centerAndZoom(trackPoint, 19);
|
|
|
+ _this.map.openInfoWindow(infoWindow,trackPoint);
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ RouteTypeChange(value){
|
|
|
+ // if(this.queryRouteParam.imei==''){
|
|
|
+ // this.$message.error('请先选择设备');
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ if(value==1){
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.showSearchContent=true
|
|
|
+ }else{
|
|
|
+ this.map.clearOverlays()
|
|
|
+ this.showSearchContent=false
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bm-view {
|
|
|
+ width: 100%;
|
|
|
+ // height: 100vh;
|
|
|
+ height: calc(100vh - 84px);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+#sole-input {
|
|
|
+ width: 250px;
|
|
|
+}
|
|
|
+#sole-input:focus {
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.app-container {
|
|
|
+ height: calc(100vh - 102px);
|
|
|
+}
|
|
|
+::v-deep .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+::v-deep .info_label{
|
|
|
+ padding-top:5px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+::v-deep .handle_btn{
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+#search-button{
|
|
|
+ margin-left:1px;
|
|
|
+}
|
|
|
+#student-container{
|
|
|
+ width:310px;
|
|
|
+ height: calc(100vh - 102px);
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.ontop-table{
|
|
|
+ width:100%;
|
|
|
+ height: calc(100% - 100px);
|
|
|
+ max-height: 700px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+#toggleListBtn {
|
|
|
+ background:#5c90d2 ;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 21px;
|
|
|
+ height: 50px;
|
|
|
+ width: 20px !important;
|
|
|
+ text-align: center !important;
|
|
|
+ position: absolute;
|
|
|
+ top:calc(50vh - 50px);
|
|
|
+ right: 310px;
|
|
|
+ padding:14px 0px !important;
|
|
|
+}
|
|
|
+#right-search-box{
|
|
|
+ background:#5c90d2 ;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 21px;
|
|
|
+ height: 145px;
|
|
|
+ border: 1px solid #5c90d2;
|
|
|
+ width: 280px;
|
|
|
+ position: absolute;
|
|
|
+ top:50px;
|
|
|
+ right: 310px;
|
|
|
+}
|
|
|
+.search_title{
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 27px;
|
|
|
+ padding-left: 10px;
|
|
|
+ width:100%;
|
|
|
+ height:28px;
|
|
|
+}
|
|
|
+.search_content{
|
|
|
+ width:100%;
|
|
|
+ height:115px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.time_select{
|
|
|
+ width:120px;
|
|
|
+ float: left;
|
|
|
+ margin-left:10px;
|
|
|
+ margin-top:5px;
|
|
|
+}
|
|
|
+.interval_select{
|
|
|
+ width:100px;
|
|
|
+ float: left;
|
|
|
+ margin-right:10px;
|
|
|
+ margin-top:5px;
|
|
|
+}
|
|
|
+
|
|
|
+.time_range_select{
|
|
|
+ width:260px;
|
|
|
+ float: left;
|
|
|
+ margin-left:10px;
|
|
|
+ margin-top:5px;
|
|
|
+}
|
|
|
+.interval_title{
|
|
|
+ width:40px;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: left;
|
|
|
+ height: 28px;
|
|
|
+ float: left;
|
|
|
+ color:#000;
|
|
|
+ margin-left:20px;
|
|
|
+ margin-top:5px;
|
|
|
+
|
|
|
+}
|
|
|
+.interval_content{
|
|
|
+ width:35px;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: left;
|
|
|
+ height: 28px;
|
|
|
+ float: left;
|
|
|
+ color:#000;
|
|
|
+ margin-left:10px;
|
|
|
+ margin-top:5px;
|
|
|
+ color:blue;
|
|
|
+}
|
|
|
+
|
|
|
+.search_btn{
|
|
|
+ width:55px;
|
|
|
+ padding: 1px;
|
|
|
+ background:#5c90d2 ;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ height: 28px;
|
|
|
+ float: left;
|
|
|
+ margin-left:10px;
|
|
|
+ margin-top:5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.search_btn:hover{
|
|
|
+ background:#5497f0 ;
|
|
|
+}
|
|
|
+#bottomToggleBtn{
|
|
|
+ background:#5c90d2 ;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 20px;
|
|
|
+ height: 21px;
|
|
|
+ width: 50px;
|
|
|
+ text-align: center !important;
|
|
|
+ position: absolute;
|
|
|
+ bottom:0px;
|
|
|
+ left: calc(50% - 140px);
|
|
|
+ padding:0px 14px !important;
|
|
|
+}
|
|
|
+#route-container{
|
|
|
+ background-color: #fff;
|
|
|
+ width:calc(100% - 310px);
|
|
|
+ height: 195px;
|
|
|
+}
|
|
|
+#control-container{
|
|
|
+ background-color: #fff;
|
|
|
+ width:calc(100% - 310px);
|
|
|
+ padding-right: 30px;
|
|
|
+ height: 30px;
|
|
|
+}
|
|
|
+.bottom_box{
|
|
|
+ z-index: 98 !important;
|
|
|
+ // border-top:2px #accdea solid;
|
|
|
+ width:100%;
|
|
|
+}
|
|
|
+.route_table{
|
|
|
+ height:192px;
|
|
|
+ width:100%;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.status_icon{
|
|
|
+ width:60px;
|
|
|
+ height: 100%;
|
|
|
+ text-align: left;
|
|
|
+ margin-right:5px ;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.status_img{
|
|
|
+ float: left;
|
|
|
+ margin-top:7px;
|
|
|
+}
|
|
|
+.el-radio{
|
|
|
+ margin-right: 10px !important;
|
|
|
+}
|
|
|
+.head_control_select{
|
|
|
+ width:200px;
|
|
|
+ height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-top: 3px;
|
|
|
+ margin-right: 5px;
|
|
|
+ float: right;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.head_control_btn{
|
|
|
+ width:60px;
|
|
|
+ height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-top: 3px;
|
|
|
+ margin-right: 5px;
|
|
|
+ float: right;
|
|
|
+ border: 1px solid #d64635;
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ background: #d64635;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.route_content{
|
|
|
+ // background-color: #eee;
|
|
|
+ border-top:1.5px #5c90d2 solid;
|
|
|
+ width:100%;
|
|
|
+}
|
|
|
+
|
|
|
+.right_box{
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 99 !important;
|
|
|
+ border-left:1px #accdea solid;
|
|
|
+}
|
|
|
+.btn_onlyred{
|
|
|
+ pointer-events: none;
|
|
|
+ cursor: default;
|
|
|
+ opacity: 0.6;
|
|
|
+}
|
|
|
+</style>
|
tongshanglei