|
@@ -5,7 +5,7 @@
|
|
<div class="in_transit_information">
|
|
<div class="in_transit_information">
|
|
<span class="item_details">车牌号:</span>
|
|
<span class="item_details">车牌号:</span>
|
|
<el-input style="width: 120px;" class="inputStyle" v-model.trim="carNumber"> </el-input>
|
|
<el-input style="width: 120px;" class="inputStyle" v-model.trim="carNumber"> </el-input>
|
|
- <el-button type="primary" class="searchstyle" @click="initData">查询</el-button>
|
|
|
|
|
|
+ <el-button type="primary" class="searchstyle" @click="initData();initTimer()">查询</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -43,37 +43,53 @@ export default {
|
|
carNumber: "",
|
|
carNumber: "",
|
|
//地图组件
|
|
//地图组件
|
|
map:null,
|
|
map:null,
|
|
-
|
|
|
|
|
|
+ path:[],
|
|
|
|
+ pointmarker:null,
|
|
|
|
+ //定时器
|
|
|
|
+ timer: null,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
let that =this;
|
|
let that =this;
|
|
that.initMap(105.602725,37.076636)
|
|
that.initMap(105.602725,37.076636)
|
|
},
|
|
},
|
|
- mounted() {},
|
|
|
|
|
|
+ mounted() {
|
|
|
|
+
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
|
|
|
|
|
|
|
|
//初始化数据
|
|
//初始化数据
|
|
initData() {
|
|
initData() {
|
|
let that = this;
|
|
let that = this;
|
|
|
|
+ let regExp = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/;
|
|
if (that.carNumber == "") {
|
|
if (that.carNumber == "") {
|
|
this.$message.error("车牌号不能为空!");
|
|
this.$message.error("车牌号不能为空!");
|
|
return;
|
|
return;
|
|
|
|
+ }else if(!regExp.test(that.carNumber)){
|
|
|
|
+ this.$message.error("请输入正确的车牌号!");
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
that.axios
|
|
that.axios
|
|
.get("/api/v1/otms/getCurrentLocation?capcityNumber="+that.carNumber)
|
|
.get("/api/v1/otms/getCurrentLocation?capcityNumber="+that.carNumber)
|
|
.then(res => {
|
|
.then(res => {
|
|
console.log(res.data.data)
|
|
console.log(res.data.data)
|
|
if(res.data.data=='-1'){
|
|
if(res.data.data=='-1'){
|
|
- this.$message.error('自提车辆无权查看!');
|
|
|
|
|
|
+ this.$message.error('运输订单未关闭,自提车辆无权查看!');
|
|
}else if(res.data.data.status!='1006'){
|
|
}else if(res.data.data.status!='1006'){
|
|
- console.log("res.data.data.status")
|
|
|
|
- that.map.setCenter([res.data.data.result.lon,res.data.data.result.lat]);
|
|
|
|
- //画车
|
|
|
|
- that.initMarkes( 45,60, require("@/assets/img/car1.png"),res.data.data.result.lon,res.data.data.result.lat,"现在所在位置");
|
|
|
|
- //显示窗体
|
|
|
|
- that.initCustomMarkes(that.carNumber,res.data.data.result.adr,res.data.data.result.lon,res.data.data.result.lat);
|
|
|
|
|
|
+ that.map.setCenter([res.data.data.result.lon,res.data.data.result.lat]);
|
|
|
|
+ //画车
|
|
|
|
+ that.initMarkes( 45,60, require("@/assets/img/car1.png"),res.data.data.result.lon,res.data.data.result.lat,"现在所在位置");
|
|
|
|
+ //给路径加点
|
|
|
|
+ let point=new AMap.LngLat(res.data.data.result.lon, res.data.data.result.lat);
|
|
|
|
+ if(that.path.length<=0 || !that.path[that.path.length-1].equals(point)){
|
|
|
|
+ that.path.push(point);
|
|
|
|
+ }
|
|
|
|
+ console.log(that.path);
|
|
|
|
+ //初始化轨迹
|
|
|
|
+ that.initPolyline();
|
|
|
|
+ //显示窗体
|
|
|
|
+ that.initCustomMarkes(that.carNumber,res.data.data.result.adr,res.data.data.result.lon,res.data.data.result.lat);
|
|
}else{
|
|
}else{
|
|
this.$message.error("车辆暂时无GPS");
|
|
this.$message.error("车辆暂时无GPS");
|
|
}
|
|
}
|
|
@@ -112,6 +128,7 @@ export default {
|
|
title: title
|
|
title: title
|
|
});
|
|
});
|
|
// 将创建的点标记添加到已有的地图实例:
|
|
// 将创建的点标记添加到已有的地图实例:
|
|
|
|
+ that.pointmarker=pointmarker;
|
|
that.map.add(pointmarker);
|
|
that.map.add(pointmarker);
|
|
},
|
|
},
|
|
|
|
|
|
@@ -135,6 +152,38 @@ export default {
|
|
// 打开信息窗体
|
|
// 打开信息窗体
|
|
infoWindow.open(that.map, [lon, lat]);
|
|
infoWindow.open(that.map, [lon, lat]);
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+ //初始化轨迹
|
|
|
|
+ initPolyline() {
|
|
|
|
+ let that = this;
|
|
|
|
+ // 创建一个 Polyline 实例:
|
|
|
|
+ var polyline = new AMap.Polyline({
|
|
|
|
+ path: that.path,
|
|
|
|
+ borderWeight: 2, // 线条宽度,默认为 1
|
|
|
|
+ strokeColor: '#18BFA6', // 线条颜色
|
|
|
|
+ lineJoin: 'round' ,// 折线拐点连接处样式
|
|
|
|
+ arrowIconPath: require("@/assets/img/traffic_texture_darkred-pass.png")//箭头图片,似乎不支持
|
|
|
|
+ });
|
|
|
|
+ // 将创建的线路添加到已有的线路中去:
|
|
|
|
+ that.map.add(polyline);
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //定时取得当前位置并加入轨迹中去,点击查询时触发,同时清除path和旧的定时器
|
|
|
|
+ initTimer(){
|
|
|
|
+ let that=this;
|
|
|
|
+ //清除旧的定时器
|
|
|
|
+ clearTimeout(this.timer);
|
|
|
|
+ //清除path
|
|
|
|
+ that.path=[];
|
|
|
|
+ //清除所有覆盖物
|
|
|
|
+ that.map.clearMap();
|
|
|
|
+ //设置定时器
|
|
|
|
+ that.timer=setInterval(()=>{
|
|
|
|
+ //清除之前车的图标
|
|
|
|
+ that.map.remove(that.pointmarker);
|
|
|
|
+ that.initData();
|
|
|
|
+ },4000);
|
|
|
|
+ }
|
|
|
|
|
|
}
|
|
}
|
|
};
|
|
};
|