|
|
@@ -26,7 +26,23 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <el-row>
|
|
|
+ <el-button type="primary" @click="slow">慢速</el-button>
|
|
|
+ <el-button type="success" @click="middle">中速</el-button>
|
|
|
+ <el-button type="danger" @click="fast">快速</el-button>
|
|
|
+ <el-button type="success" @click="addIndex" plain>快进</el-button>
|
|
|
+ <el-button type="danger" @click="stop" plain>暂停</el-button>
|
|
|
+ <el-button type="success" @click="play" plain>开始</el-button>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -75,7 +91,77 @@ export default {
|
|
|
sliderVal:0,
|
|
|
times:1,
|
|
|
totalTime:"11",
|
|
|
- speedList:["1倍数","2倍数","3倍数"],
|
|
|
+ speed:10000,
|
|
|
+ //选择停车时长
|
|
|
+ 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分钟"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 36000000,
|
|
|
+ label: "关闭"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //离线图标
|
|
|
+ leaveMark: [],
|
|
|
+ //停车图标
|
|
|
+ parkMark: [],
|
|
|
+ //选择离线时长
|
|
|
+ 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分钟"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 36000000,
|
|
|
+ label: "关闭"
|
|
|
+ }
|
|
|
+ ],
|
|
|
//已行驶轨迹
|
|
|
runRoute:
|
|
|
{
|
|
|
@@ -186,7 +272,102 @@ export default {
|
|
|
|
|
|
},
|
|
|
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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //字符串转为Date
|
|
|
+ stringToDate(dateString) {
|
|
|
+ console.log(dateString)
|
|
|
+ let dateStr = dateString.replace("年", "-").replace("月", "-").replace("日", "");
|
|
|
+ return Date.parse(dateStr);
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ //停车所有离线图标
|
|
|
+ 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();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ slow(){
|
|
|
+ console.log("slow")
|
|
|
+ let that=this;
|
|
|
+ that.pathNavigator.setSpeed(1000);
|
|
|
+ },
|
|
|
+ middle(){
|
|
|
+ console.log("middle")
|
|
|
+ let that=this;
|
|
|
+ that.pathNavigator.setSpeed(10000);
|
|
|
+ },
|
|
|
+ fast(){
|
|
|
+ console.log("fast")
|
|
|
+ let that=this;
|
|
|
+ that.pathNavigator.setSpeed(100000);
|
|
|
+ },
|
|
|
play(){
|
|
|
let that =this;
|
|
|
that.pathNavigator.resume();
|
|
|
@@ -196,7 +377,6 @@ export default {
|
|
|
that.pathNavigator.pause();
|
|
|
},
|
|
|
addIndex(){
|
|
|
- console.log("1123")
|
|
|
|
|
|
let that =this;
|
|
|
let increment=(that.listPath[0].runPath.length*0.1)
|
|
|
@@ -210,6 +390,45 @@ export default {
|
|
|
let that=this;
|
|
|
that.sliderVal=value;
|
|
|
},
|
|
|
+ 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);
|
|
|
+ },
|
|
|
initData(orderNumber){
|
|
|
let that=this;
|
|
|
that.axios.post("/api/v1/otms/fullPath?orderNumber="+orderNumber).then((res) => {
|
|
|
@@ -373,7 +592,7 @@ export default {
|
|
|
// 创建巡航器
|
|
|
that.pathNavigator = that.pathSimplifierIns.createPathNavigator(0, {
|
|
|
loop: true, // 是否循环
|
|
|
- speed: 10000 ,// 速度(km/h)
|
|
|
+ speed: that.speed ,// 速度(km/h)
|
|
|
pathNavigatorStyle: {
|
|
|
width: 20,
|
|
|
height: 40,
|
|
|
@@ -464,6 +683,11 @@ export default {
|
|
|
position: relative;
|
|
|
top: 50px;
|
|
|
}
|
|
|
+.driving_information3 {
|
|
|
+ position: absolute;z-index:99;top:0;left:0;
|
|
|
+ position: relative;
|
|
|
+ top: 50px;
|
|
|
+}
|
|
|
|
|
|
/* 进度条 */
|
|
|
.mySlider {
|
Tiroble