|
|
@@ -1,985 +0,0 @@
|
|
|
-<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