icore-pass/src/views/sale/components/offSiteTransportation/checkGPS.vue

<template>
    <div class="container">
        <div id="amap-container"></div>
         <div class="controller">
             <div class="in_transit_information">
                <span class="item_details">车牌号:</span> <el-input style="width: 100px;" class="inputStyle" v-model="carNumber"> </el-input>
             </div>
             <div class="in_transit_information2">
                <span class="item_details">时间段:</span>
                <el-date-picker
                class="date_picker_style"
                v-model="time"
                @change="changeTime"
                type="datetimerange"
                format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
                <el-button type="primary" class="searchstyle" @click="initData">查询</el-button>
             </div>
             <div class="driving_information">  
                <span class="item_details2">时间:{{runRoute.gtm}}</span>
                <br/>
                <span class="item_details2" >车速:{{runRoute.spd}}千米/小时</span>
                <br/>
             </div>
              <div class="map-control">
                <!--播放暂停按钮-->
                进度:
                <Icon v-if="!isPlay" class="play-icon play"  type="ios-play" @click="isPlay=true;play();"/>
                <Icon v-else class="play-icon pause" type="ios-pause" @click="isPlay=false;stop();navgControl('pause')"/>
                <Icon class="play-icon quickly"  type="ios-play" @click="addProgress()"/>
                <div class="mySlider"><Slider class="map-slider" v-model="sliderVal" :tip-format="hideFormat" :step="0.0001"></Slider></div>
                <!--速度-->
                <div class="mySlider2"><el-slider v-model="speedVal" show-input></el-slider></div>
            </div>
            <div class="in_transit_information3" v-if="listPath.length>0">
                <span class="item_details">停车时长:</span>
                <el-select style="width:100px" @change="changeParkingTime" v-model="parkingTime" placeholder="请选择">
                <el-option
                v-for="item in parkingOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
                </el-select>
            </div>
            <div class="in_transit_information3" v-if="listPath.length>0">
                <span class="item_details">离线时长:</span>
                <el-select style="width:100px" @change="changeLeaveTime" v-model="leaveTime" placeholder="请选择">
                <el-option
                v-for="item in parkingOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
                </el-select>
            </div>
         </div>
    </div>
</template>
<script>
import { shallowRef } from '@vue/reactivity'
import { lazyAMapApiLoaderInstance } from 'vue-amap';
import { sjTime,stringToDate } from "@/utils/sharedJsFile";
import Slider from './slider.vue'
Vue.use(Slider)
import Vue from 'vue';
export default {
    name: "PathView",
    setup(){
        const map = shallowRef(null);
        return{
            map,
        }
    },
     watch:{
        speedVal:{
            deep: true,
            handler(val, oldVal) {
                let that=this;
                 if(that.pathNavigator!=null){
                    that.pathNavigator.setSpeed(100*val)
                }
            }
        }
    },
    data() {
        return {
        //一、 查询相关
            //选择时间区间
            time:[],
            //查询车牌号
            carNumber:"",
            //选择停车时长
            parkingTime:null,
            //停车时长选择区间
            parkingOptions: [{
                value: 600000,
                label: '10分钟'
                }, {
                value: 1200000,
                label: '20分钟'
                }, {
                value: 1800000,
                label: '30分钟'
                }, {
                value: 2400000,
                label: '40分钟'
                }, {
                value: 3000000,
                label: '50分钟'
                }
                , {
                value: 3600000,
                label: '60分钟'
                }
            ],
            //选择离线时长
            leaveTime:null,
            //离线时长选择区间
            leaveOptions: [{
                value: 600000,
                label: '10分钟'
                }, {
                value: 1200000,
                label: '20分钟'
                }, {
                value: 1800000,
                label: '30分钟'
                }, {
                value: 2400000,
                label: '40分钟'
                }, {
                value: 3000000,
                label: '50分钟'
                }
                , {
                value: 3600000,
                label: '60分钟'
                }
            ],
        //二、 展示相关
            //离线图标
            leaveMark:[],
            //停车图标
            parkMark:[],
            //开始地址
            startPointName:"",
            //结束地址
            endPointName:"",
            //小车行驶当前点所在的位置
            runRoute:
            {
                //正北方向夹角  
                agl: "0",
                //当前的时间
                gtm: "0",
                //海拔
                hgt: "0",
                //进度
                lat: "0", 
                //纬度
                lon: "0",
                //累计行驶距离（是车辆GPS安装开始到现在的距离,如果你想要查询范围内的行驶距离，用开始的累计距离和结束点累计距离相减）
                mil: "0",
                //这个时间的速度
                spd: "0"
            },
            //小车行驶当前点下标
            point:"",
        //三、 播放相关
            //是否暂停
            isPlay:true,
            //播放进度值
            sliderVal:0,
            //播放速度值
            speedVal:10,
        //四、组件相关
            //自定义窗体信息
            // ctmarkes:{
            //     lat:"33.015888071433764",
            //     lon : "115.96995235868168",
            //     title:"豫SE8888",
            //     details:"安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米"
            // },
        //五、返回值相关
            //返回值集合
            listPath:[],
        //六、地图组件相关值
            //创建轨迹
            pathSimplifierIns:{},
            //巡回器
            pathNavigator:{},
            //初始化巡回器速度
            speed:1000,   
            //地图解析
            geocoder:null,
        };
    },
    created(){
      
    },
    mounted() {
        
    },
    methods: {
    
        //停车时间改变
        changeParkingTime(){
            let that=this;
            //清除之前的停车点
            that.hideParkingMark();
            //计算时间的点
            let calculationPoint=null;
            that.listPath[0].runRoute.forEach(function(item,indexOf){      
                if(indexOf+1<that.listPath[0].runRoute.length){
                    //判断calculationPoint是否为空，如果是空的说明当前没有在计算停车时间
                    if(calculationPoint==null&&item.spd=='0.0'){
                        calculationPoint=item
                    } else if(calculationPoint!=null&&item.spd!='0.0'){
                        let beforeTime=that.stringToDate(calculationPoint.gtm)
                        let item2=that.listPath[0].runRoute[indexOf];
                        let afterTime=that.stringToDate(item2.gtm);
                        let second=afterTime-beforeTime;
                        if(second>that.parkingTime){
                             let message='停车:'+second/60000;
                             that.initParkingMarkes(20,35,require('@/assets/img/start.png'),calculationPoint.lon,calculationPoint.lat,message.split('.')[0]+"分钟");
                        }
                        calculationPoint=null;
                    }
                }
            });
        },
        //停车所有离线图标
        hideParkingMark(){
            let that=this;
            that.parkMark.forEach(function(item,indexOf){    
                item.hide();
            });
        },
        //离线时间改变时获得超过时间的点信息
        changeLeaveTime(){
            let that=this;
            //关闭所有图标
            that.hideLeaveMark();
            that.listPath[0].runRoute.forEach(function(item,indexOf){      
                if(indexOf+1<that.listPath[0].runRoute.length){
                    let beforeTime=that.stringToDate(item.gtm)
                    let item2=that.listPath[0].runRoute[indexOf+1];
                    let afterTime=that.stringToDate(item2.gtm);
                    let second=afterTime-beforeTime;
                    if(second>that.leaveTime){
                        let message='离线:'+second/60000;
                        that.initLeaveMarkes(20,35,require('@/assets/img/start.png'),item2.lon,item2.lat,message.split('.')[0]+"分钟");
                    }
                }
            });
        },
        //关闭所有离线图标
        hideLeaveMark(){
            let that=this;
            that.leaveMark.forEach(function(item,indexOf){    
                item.hide();
            });
        },
        //字符串转为Date
        stringToDate(dateString){
            let dateStr=dateString.replace('年','-').replace('月','-').replace('日','');   
            return Date.parse(dateStr);
        },
        //校验查询时间
        changeTime(){
            let that=this;
            console.log((that.time[1]-that.time[0])-(86400000*3))
            if((that.time[1]-that.time[0])>86400000*3){
                 this.$message.error('时间查询范围不能超过3天');
                 that.time=[];
            }
        },
        //启动
        play(){
            let that =this;
            that.pathNavigator.resume();
        },
        //停止
        stop(){
            let that =this;
            that.pathNavigator.pause();
        },
        //添加进度
        addProgress(){
            let that =this;
            let increment=(that.listPath[0].runPath.length*0.1)
            that.pathNavigator.start(((that.point+increment)%that.listPath[0].runPath.length))
        },
        //进度监听
        hideFormat(value){
            let that=this;
            that.sliderVal=value;
        },
        //获得开始地址
        getStartPointName(lnglatXY){
            let that=this;
            console.log("start",that.geocoder)
            that.geocoder.getAddress(lnglatXY, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    that.startPointName = result.regeocode.formattedAddress;
                }
            });  
        },
         //获得结束地址
        getEndPointName(lnglatXY){
            let that=this;
            that.geocoder.getAddress(lnglatXY, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    that.endPointName = result.regeocode.formattedAddress;
                    that.initCustomMarkes(that.carNumber+"("+that.listPath[0].miled+")","起点："+that.startPointName+"<br/>"+"终点："+that.endPointName,lnglatXY[0],lnglatXY[1])
                }
            });  
        },
        //初始化数据
        initData(){
            let that=this;
            that.listPath=[];
            if(that.carNumber==""){
                this.$message.error('车牌号不能为空！');
                return;
            }
            if(that.time==[]){
                 this.$message.error('请选择时间');
            }
            that.axios.post("/api/v1/otms/fullPathVisualizationByCarNumber",{
                "capacityNumber":that.carNumber,
                "startTime":that.formatDate(that.time[0],"yyyy-MM-dd hh:mm:ss"),
                "endTime":that.formatDate(that.time[1],"yyyy-MM-dd hh:mm:ss"),
            }).then((res) => {
                 if(res.data.startAndEndRoutes!=''){
                     that.listPath=res.data.startAndEndRoutes;
                    that.initMap();
                 }else{
                     this.$message.error('车辆没有开启GPS');
                 }
            });
        },
        //初始化地图
        initMap(){
            lazyAMapApiLoaderInstance.load().then(() => {
                let that=this;
                that.map = new AMap.Map("amap-container",{  //设置地图容器id
                    viewMode:"2D",    //是否为2D地图模式
                    zoom:10,           //初始化地图级别
                    center:[105.602725,37.076636], //初始化地图中心点位置
                });
                //初始化
                that.initGeocoder();
                //初始化巡航轨迹和巡航器
                that.initPathSimplifier();
                //初始化起点、当前点、当前点
                that.initThreeMarker();
                //初始化当前点标记
                //that.initCustomMarkes(that.carNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
                //that.initEndline();
                
            });
        },
        //结束点
        initEndline(){
            let that=this;
            that.initPolyline(that.listPath[0].estimatePath,"#FF0000");
        },
        //创建起点终点当前点
        initThreeMarker(){
            let that=this;
            that.listPath.forEach((element,index) => {
                 //起点名称
                that.getStartPointName([element.startPoint.lon,element.startPoint.lat])
               
                
                //开始标记点
                if(element.startPoint.lon!=''&&element.startPoint.lat!=''){
                   
                    that.initMarkes(20,35,require('@/assets/img/start.png'),element.startPoint.lon,element.startPoint.lat,'起点');
                }
                //结束标记点
                if(element.endPoint!={}&&element.endPoint!=''&&element.endPoint!=null){
                    // that.initMarkes(20,35,require('@/assets/img/end.png'),element.endPoint.lon,element.endPoint.lat,'终点');
                     //终点名称
                    that.getEndPointName([element.endPoint.lon,element.endPoint.lat]);
                }else{
                    // that.initMarkes(20,35,require('@/assets/img/end.png'),element.runRoute[element.runRoute.length-1].lon,element.runRoute[element.runRoute.length-1].lat,'终点');
                     //终点名称
                    that.getEndPointName([element.runRoute[element.runRoute.length-1].lon,element.runRoute[element.runRoute.length-1].lat])
                }
               
            });
           
        },
        //初始化窗体
        initCustomMarkes(title,details,lon,lat){
             let that=this;
            //自定义窗体内容
            var content = [
                "<div  style='top:1px;width: 180px; background-color: rgba(0, 0, 0, 1);' ><font color='white'>"+title+"</font>",
                "<div style='background-color:rgba(255, 255, 255, 0.5);'><font color='white'>"+details+"</font></div></div>",
            ];
            // 创建 infoWindow 实例	
            var infoWindow = new AMap.InfoWindow({
                content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
            });
            // 打开信息窗体
            infoWindow.open(that.map,[lon,lat]);
        },
        //初始化预计轨迹
        initPolyline(path,color){
            let that=this;
             //预计轨迹
            var endLine = new AMap.Polyline({
                map:that.map,//地图组件
                path: path,//预计轨迹
                isOutline: true,
                outlineColor: color,//轨迹颜色
                borderWeight: 0,
                strokeColor: "#FF0000", 
                strokeOpacity: 1,
                strokeWeight: 5,
                // 折线样式还支持 'dashed'
                strokeStyle: "solid",
                // strokeStyle是dashed时有效
                strokeDasharray: [10, 5],
                lineJoin: 'round',
                lineCap: 'round',
                zIndex: 50,
            })
            that.map.setFitView([[ endLine ]])
        },
        initParkingMarkes(weight,height,image,lon,lat,title){
            let that=this;
            //图标标记点
            let pointicon = new AMap.Icon({
                size: new AMap.Size(weight, height), // 图标尺寸
                image: image, // Icon的图像
                imageOffset: new AMap.Pixel(0,0), // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
            });
            // 创建一个 Marker 实例：
            var pointmarker = new AMap.Marker({
                position: new AMap.LngLat(lon, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                icon: pointicon, 
                title: title
            });
            that.parkMark.push(pointmarker)
            // 将创建的点标记添加到已有的地图实例：
            that.map.add(pointmarker);
        },
        //创建离线和停车的标记
        initLeaveMarkes(weight,height,image,lon,lat,title){
            let that=this;
            //图标标记点
            let pointicon = new AMap.Icon({
                size: new AMap.Size(weight, height), // 图标尺寸
                image: image, // Icon的图像
                imageOffset: new AMap.Pixel(0,0), // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
            });
            // 创建一个 Marker 实例：
            var pointmarker = new AMap.Marker({
                position: new AMap.LngLat(lon, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                icon: pointicon, 
                title: title
            });
            that.leaveMark.push(pointmarker)
            // 将创建的点标记添加到已有的地图实例：
            that.map.add(pointmarker);
        },
        //创建简单的标记
        initMarkes(weight,height,image,lon,lat,title){
            let that=this;
            //图标标记点
            let pointicon = new AMap.Icon({
                size: new AMap.Size(weight, height), // 图标尺寸
                image: image, // Icon的图像
                imageOffset: new AMap.Pixel(0,0), // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
            });
            // 创建一个 Marker 实例：
            var pointmarker = new AMap.Marker({
                position: new AMap.LngLat(lon, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                icon: pointicon, 
                title: title
            });
            // 将创建的点标记添加到已有的地图实例：
            that.map.add(pointmarker);
        },
        //创建轨迹和巡航器
        initPathSimplifier() {
            let that=this;
            // ...你的操作
            new AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
                if (!PathSimplifier.supportCanvas) {
                    alert('当前环境不支持 Canvas！')
                    return
                }
                //创建轨迹和巡航器
                // 创建组件实例
                that.pathSimplifierIns = new PathSimplifier({
                    map: that.map,
                    zIndex: 100, // 图层叠加顺序
                    data: that.listPath, // 巡航路径
                    // 获取巡航路径中的路径坐标数组
                    getPath: (pathData, pathIndex) => {
                        return pathData.runPath;
                    },
                    //鼠标悬浮停时显示消息
                    getHoverTitle: function(pathData, pathIndex, pointIndex) {
                        //返回鼠标悬停时显示的信息
                        if (pointIndex >= 0) {
                            if(pathData.runRoute[pointIndex].gtm!=='undefined'){
                                 //鼠标悬停在某个轨迹节点上
                                return pathData.runRoute[pointIndex].gtm + '，速度'+ pathData.runRoute[pointIndex].spd+'千米/小时';
                            }
                        }
                    },
                    //设置轨迹样式
                    renderOptions: {
                        //轨迹线的样式
                        pathLineStyle: {
                            strokeStyle: 'black',//路径颜色
                            lineWidth: 6,
                            dirArrowStyle: true
                        }
                    }
                })
                // 创建巡航器
                that.pathNavigator = that.pathSimplifierIns.createPathNavigator(0, {
                    loop: true, // 是否循环
                    speed: that.speed ,// 速度(km/h)
                    pathNavigatorStyle: {
                        width: 20,//车辆图片宽度
                        height: 40,//车辆图片高度
                        content:PathSimplifier.Render.Canvas.getImageContent( require('@/assets/img/smallcar.png'), onload, onerror),//车辆图片
                        strokeStyle: null,
                        fillStyle: null
                    }
                })
                //开启巡航
                that.pathNavigator.start()
                
                //开始事件监听
                that.pathNavigator.on("start resume", function() {
                });

                //暂停事件监听
                that.pathNavigator.on("stop pause", function() {
                });

                //移动事件监听
                that.pathNavigator.on('move', function (data,value) {
                    that.updateLable(value)
                });
            })
        },
        //实时展示
        updateLable(value){
            let that=this;
            that.point=value.dataItem.pointIndex;
            that.runRoute=value.dataItem.pathData.runRoute[that.point];
            that.sliderVal=(value.dataItem.pointIndex/value.dataItem.pathData.runRoute.length)*100;
        },
        //逆解码函数
        initGeocoder(){
            let that=this;
            console.log("initGeocoder") ;
            AMap.plugin('AMap.Geocoder',function(){   
                that.geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: "all"
                });  
                
                console.log(that.geocoder)    
            })    
        },
        //时间格式转换
        formatDate (date, fmt) {
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
            }
            let o = {
                'M+': date.getMonth() + 1,
                'd+': date.getDate(),
                "h+": date.getHours(),
                "m+": date.getMinutes(),
                "s+": date.getSeconds(),
            }
            for (let k in o) {
                if (new RegExp(`(${k})`).test(fmt)) {
                    let str = o[k] + ''
                    fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length))
                }
            }
            return fmt
        },         
    }
};
</script>
<style>
.inputStyle{
    position: absolute;
    width: 200px;
    left: 50px;
}

.controller{
    width: 100%; height: 50px;
    background: white;
   position: absolute;z-index:99;top:0;left:0;
   
}
.in_transit_information{
   
    width: 200px;
    float: left;
     height: 40px;
}
.in_transit_information3{
    float: right;
    height: 40px;
    width: 180px;
}
.in_transit_information2 {
   
    height: 40px;
    float: left;
    width: 580px;
}
.container{
    width: 100%;
	height: 100%;
    
}
span.item_details2 {
    position: relative;
    top: 20px;
}
.date_picker_style{
    position: relative;
    left: 50px;
}
.item_details {
    position: relative;
    top: 5px;
    height: 0px;
    left: 0px;
}
#amap-container {
    position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}


/* 进度条 */
.mySlider {

    width: 150px;
    height: 20px;
    display: inline-block;
    position: relative;
    left: 32px;
}
/* 进度条 */
.mySlider2 {

    width: 400px;
    height: 20px;
    display: inline-block;
    position: relative;
    left: 32px;
}
.play {
    position: relative;
    left: 28px;
}
.quickly
{
    float: right;
    position: relative;
    left: -20px;
    top: 10px;
}
.pause {
    position: relative;
    left: 28px;
}
.passed-time{
    position: relative;
    left: 5px;
}
.end-time{
    position: relative;
    left: 5px;
}
.map-times {
    position: relative;
    width: 40px;
}
.searchstyle{
     position: relative;
    left: 5px;
}
.map-control{
     float: left;
     width: 270px;
}
.driving_information {
    height: 40px;
    width: 240px;
     float: left;
}
</style>