订单详情
This commit is contained in:
parent
6f83e8078c
commit
6411c17fe5
246
src/components/Map/TrajectoryMap.vue
Normal file
246
src/components/Map/TrajectoryMap.vue
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
<template>
|
||||
<div class="place-search-map" :style="{width: width, height: height}" v-loading="loading">
|
||||
<div id="container"></div>
|
||||
<div class="input-card">
|
||||
<h4>轨迹回放控制</h4>
|
||||
<div class="input-item">
|
||||
<input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()" />
|
||||
<input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()" />
|
||||
</div>
|
||||
<div class="input-item">
|
||||
<input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()" />
|
||||
<input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import globalConfig from '@/utils/config/globalConfig'
|
||||
import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
|
||||
export default {
|
||||
name: "TrajectoryMap",
|
||||
components: { AreaTextSelect },
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: "100%"
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "100%"
|
||||
},
|
||||
initLng: {
|
||||
type: String,
|
||||
default: '120.250452'
|
||||
},
|
||||
initLat: {
|
||||
type: String,
|
||||
default: '27.101745'
|
||||
},
|
||||
tripRouteStr: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
AMap: null,
|
||||
map: null, // 地图实例
|
||||
placeSearch: null, // POI查询
|
||||
geocoder: null, // 逆地理编码
|
||||
loading: false,
|
||||
keyword: null,
|
||||
markers: [],
|
||||
line:[],
|
||||
area: {
|
||||
province: '福建省',
|
||||
city: '宁德市',
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initAMap();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroyMap();
|
||||
},
|
||||
methods: {
|
||||
destroyMap() {
|
||||
this.map?.destroy();
|
||||
},
|
||||
initAMap() {
|
||||
AMapLoader.load({
|
||||
key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.MoveAnimation"]
|
||||
}).then((AMap) => {
|
||||
this.AMap = AMap;
|
||||
this.map = new AMap.Map("container", {
|
||||
// 设置地图容器id
|
||||
resizeEnable: true,
|
||||
viewMode: "3D", // 是否为3D地图模式
|
||||
zoom: 16, // 初始化地图级别
|
||||
center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
|
||||
});
|
||||
this.trajectory(); //轨迹
|
||||
|
||||
}).catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
// 显示轨迹
|
||||
trajectory() {
|
||||
console.log("this.tripRouteStr-----------------"+JSON.stringify(this.tripRouteStr))
|
||||
this.line = JSON.parse(this.tripRouteStr)
|
||||
let line = this.line;
|
||||
console.log("this.tripRouteStr-----------------"+JSON.parse(this.tripRouteStr))
|
||||
if (Array.isArray(line)) {
|
||||
// this.lineArr 是数组
|
||||
console.log("this.lineArr-是数组");
|
||||
} else {
|
||||
// this.lineArr 不是数组
|
||||
console.log("this.lineArr-不是数组");
|
||||
}
|
||||
this.marker = new AMap.Marker({
|
||||
map: this.map,
|
||||
position: line[0],
|
||||
icon: globalConfig.icon.blue,
|
||||
offset: new AMap.Pixel(-26, -15),
|
||||
autoRotation: true,
|
||||
angle: -90
|
||||
});
|
||||
// 绘制轨迹
|
||||
let polyline = new AMap.Polyline({
|
||||
map: this.map,
|
||||
path: line,
|
||||
showDir: true,
|
||||
strokeColor: "#28F", //线颜色
|
||||
// strokeOpacity: 1, //线透明度
|
||||
strokeWeight: 6 //线宽
|
||||
// strokeStyle: "solid" //线样式
|
||||
});
|
||||
|
||||
let passedPolyline = new AMap.Polyline({
|
||||
map: this.map,
|
||||
// path: this.lineArr,
|
||||
strokeColor: "#AF5", //线颜色
|
||||
// strokeOpacity: 1, //线透明度
|
||||
strokeWeight: 6 //线宽
|
||||
// strokeStyle: "solid" //线样式
|
||||
});
|
||||
|
||||
this.marker.on("moving", function (e) {
|
||||
passedPolyline.setPath(e.passedPath);
|
||||
});
|
||||
|
||||
this.map.setFitView();
|
||||
},
|
||||
// /**
|
||||
// * 获取区域对角线的两点坐标，即这个区域内的最小坐标值和最大坐标值
|
||||
// *
|
||||
// * @param pointerArray [[a,b],[c,d]]
|
||||
// * @return Array {min:number[a,b], max:number[c,d]}
|
||||
// */
|
||||
// getMaxBoundsPointer(pointerArray){
|
||||
// console.log("JSON-------------"+JSON.stringify(pointerArray))
|
||||
// let lngArray = pointerArray.map(item => item[0])
|
||||
// let latArray = pointerArray.map(item => item[1])
|
||||
// console.log("lngArray-------------"+lngArray)
|
||||
// console.log("latArray-------------"+latArray)
|
||||
// return {
|
||||
// min: [Math.min(...lngArray), Math.min(...latArray)],
|
||||
// max: [Math.max(...lngArray), Math.max(...latArray)],
|
||||
// }
|
||||
// },
|
||||
startAnimation() {
|
||||
this.marker.moveAlong(this.line, 200);
|
||||
},
|
||||
pauseAnimation() {
|
||||
this.marker.pauseMove();
|
||||
},
|
||||
resumeAnimation() {
|
||||
this.marker.resumeMove();
|
||||
},
|
||||
stopAnimation() {
|
||||
this.marker.stopMove();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.place-search-map {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
#container {
|
||||
height: 1000px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-card .btn {
|
||||
margin-right: 1.2rem;
|
||||
width: 9rem;
|
||||
}
|
||||
|
||||
.input-card .btn:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border: 1px solid transparent;
|
||||
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: #25A5F7;
|
||||
border-color: #25A5F7;
|
||||
padding: .25rem .5rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 1rem;
|
||||
-webkit-appearance: button;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.input-item {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.input-card {
|
||||
position: absolute !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border-radius: .25rem;
|
||||
width: 22rem;
|
||||
border-width: 0;
|
||||
border-radius: 0.4rem;
|
||||
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
/>
|
||||
|
||||
<!-- 添加或修改订单对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
|
||||
<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
|
||||
<el-form ref="form" :model="form" label-width="110px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
|
|
@ -153,10 +153,11 @@
|
|||
<!-- 显示路径 -->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<location-map
|
||||
<trajectory-map
|
||||
v-if="showPlaceSearchMap"
|
||||
ref="map"
|
||||
height="400px"
|
||||
:trip-route-str="form.tripRouteStr"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -217,12 +218,12 @@
|
|||
|
||||
<script>
|
||||
import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/system/order";
|
||||
import LocationMap from '@/components/Map/location/LocationMap'
|
||||
import TrajectoryMap from '@/components/Map/TrajectoryMap'
|
||||
|
||||
export default {
|
||||
name: "Order",
|
||||
dicts: ['et_order_type', 'et_pay_type', 'et_order_status'],
|
||||
components: {LocationMap },
|
||||
components: {TrajectoryMap },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
|
|
@ -244,6 +245,7 @@ export default {
|
|||
showPlaceSearchMap: false,
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
vehicleNum: null,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
|
|
@ -266,6 +268,8 @@ export default {
|
|||
payType: null,
|
||||
payFee: null,
|
||||
appointmentFee: null,
|
||||
tripRouteStr: null,
|
||||
vehicleNum: null
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
|
|
@ -362,7 +366,8 @@ export default {
|
|||
duration: null,
|
||||
distance: null,
|
||||
status: null,
|
||||
createTime: null
|
||||
createTime: null,
|
||||
vehicleNum: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
|
|
@ -394,7 +399,7 @@ export default {
|
|||
const orderId = row.orderId || this.ids
|
||||
getOrder(orderId).then(response => {
|
||||
this.form = response.data;
|
||||
console.log("111111111111111111111111---------------"+JSON.stringify(response.data))
|
||||
// console.log("111111111111111111111111---------------"+JSON.stringify(response.data))
|
||||
this.showPlaceSearchMap = true;
|
||||
this.open = true;
|
||||
this.title = "订单详情";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user