Skip to content

上
上药订单生命周期升级
Commit 8daf1cdc authored by 琉璃丶c's avatar 琉璃丶c
Browse files
Options

1.去除vue-amap引用 

2.使用原始的AMap
3.完成 物流信息 页面的地图初步线路绘制
parent 84bcbeb2
Hide whitespace changes
Inline Side-by-side
Showing with 257 additions and 110 deletions
index.html
View file @ 8daf1cdc
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>上药ERP</title> <title>上药ERP</title>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=061c2a328572b71e2b26d9dc1a0cc703"></script> <script type="text/javascript" src="http://webapi.amap.com/maps?v=2.0&key=061c2a328572b71e2b26d9dc1a0cc703&plugin=AMap.GraspRoad"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
package-lock.json
View file @ 8daf1cdc
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",
"vant": "^2.12.10", "vant": "^2.12.10",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-amap": "^0.5.10",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vue-template-compiler": "^2.6.10", "vue-template-compiler": "^2.6.10",
"vuex": "^3.1.1" "vuex": "^3.1.1"
...@@ -17695,22 +17694,6 @@ ...@@ -17695,22 +17694,6 @@
"integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
"dev": true "dev": true
}, },
"node_modules/uppercamelcase": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
"integrity": "sha1-Mk2YprOvx+iolT4QZBUJsOTiP5c=",
"dependencies": {
"camelcase": "^1.2.1"
}
},
"node_modules/uppercamelcase/node_modules/camelcase": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
"integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/uri-js": { "node_modules/uri-js": {
"version": "4.2.2", "version": "4.2.2",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
...@@ -17897,19 +17880,6 @@ ...@@ -17897,19 +17880,6 @@
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz", "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
"integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc=" "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
}, },
"node_modules/vue-amap": {
"version": "0.5.10",
"resolved": "https://registry.npmjs.org/vue-amap/-/vue-amap-0.5.10.tgz",
"integrity": "sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==",
"dependencies": {
"uppercamelcase": "^1.1.0"
},
"engines": {
"core-js": "^2.5.0",
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
},
"node_modules/vue-eslint-parser": { "node_modules/vue-eslint-parser": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
...@@ -33843,21 +33813,6 @@ ...@@ -33843,21 +33813,6 @@
"integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
"dev": true "dev": true
}, },
"uppercamelcase": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
"integrity": "sha1-Mk2YprOvx+iolT4QZBUJsOTiP5c=",
"requires": {
"camelcase": "^1.2.1"
},
"dependencies": {
"camelcase": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
"integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
}
}
},
"uri-js": { "uri-js": {
"version": "4.2.2", "version": "4.2.2",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
...@@ -34027,14 +33982,6 @@ ...@@ -34027,14 +33982,6 @@
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz", "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
"integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc=" "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
}, },
"vue-amap": {
"version": "0.5.10",
"resolved": "https://registry.npmjs.org/vue-amap/-/vue-amap-0.5.10.tgz",
"integrity": "sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==",
"requires": {
"uppercamelcase": "^1.1.0"
}
},
"vue-eslint-parser": { "vue-eslint-parser": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
src/components/AMapView.vue 0 → 100644
View file @ 8daf1cdc
<template>
<div id="aMapContainer">
</div>
</template>
<script>
export default {
name: 'AMapView',
props: {
pointList: {
type: Array,
default: () => {
return []
}
},
drivePoint: {
type: Object,
default: () => {
return {
startPoint: {
address: '',
longitude: 0,
latitude: 0
},
endPoint: {
address: '',
longitude: 0,
latitude: 0
}
}
}
}
},
mounted () {
this.initAMap()
},
methods: {
initAMap() {
let map = new AMap.Map('aMapContainer', {
resizeEnable: true
})
// this.drawDriveLine(map)
this.drawPointLine(map)
},
/* 根据点数组画线 */
drawPointLine(map) {
let _this = this
let pathParam = []
_this.pointList.forEach(point => {
pathParam.push({
'x': parseFloat(point.longitude),
'y': parseFloat(point.latitude),
'sp': parseInt(point.speed),
'ag': parseInt(point.direction),
'tm': point.tm
})
})
let pathLength = pathParam.length
// 由于高德地图对每次数据数量500的限制，需要将数据进行每500分段
// 按500分组时先计算有多少组,不足500的同样为一组，故向上取整
let group = Math.ceil(pathLength / 500)
// 定义高德 数据纠偏 对象
let graspRoad = new AMap.GraspRoad()
// 定义一个二维数组,开始对每组数据进行操作
let tdGroup = []
for (let i = 0; i < group; i++) {
// 每500一组切割，塞入二维数组中
tdGroup.push(pathParam.slice(i * 500, (i + 1) * 500))
}
// 遍历二维数组，对数组中的每个一维数组进行高德点转换
tdGroup.forEach((itemArr, tdIndex) => {
// 用于转换的高德定位临时数组
let aMapTemp = []
itemArr.forEach(item => {
let aMapLngLat = new AMap.LngLat(item.x, item.y)
aMapTemp.push(aMapLngLat)
})
// gps定位数据转换为高德数据
AMap.convertFrom(aMapTemp, 'gps', function (status, result) {
if (result.info === 'ok') {
let aMapLngLat = result.locations
console.log(aMapLngLat)
// 转换成高德数据后，替换源数据
aMapLngLat.forEach((lngLat, i) => {
itemArr[i].x = lngLat.lng
itemArr[i].y = lngLat.lat
})
// 绘制起点
if (tdIndex === 0) {
let startMarker = new AMap.Marker({
position: aMapLngLat[0]
})
startMarker.setLabel({
offset: new AMap.Pixel(4, 0), //设置文本标注偏移量
content: `<div class='marker'>${_this.drivePoint.startPoint.address}</div>`, //设置文本标注内容
direction: 'right' //设置文本标注方位
})
map.add(startMarker)
}
if (tdIndex === tdGroup.length - 1) {
let endMarker = new AMap.Marker({
position: aMapLngLat[aMapLngLat.length - 1]
})
endMarker.setLabel({
offset: new AMap.Pixel(4, 0), //设置文本标注偏移量
content: `<div class='marker'>${_this.drivePoint.endPoint.address}</div>`, //设置文本标注内容
direction: 'right' //设置文本标注方位
})
map.add(endMarker)
}
// 开始进行对轨迹纠偏
if (!graspRoad) {
graspRoad = new AMap.GraspRoad()
}
graspRoad.driving(pathParam, function(error, result) {
if (!error) {
let path2 = []
let newPath = result.data.points
for (let i = 0; i < newPath.length; i += 1) {
path2.push([newPath[i].x, newPath[i].y])
}
// 绘制线数据到地图上
let newLine = new AMap.Polyline({
path: path2,
strokeWeight: 8,
strokeOpacity: 0.8,
strokeColor: '#0091ea',
showDir: true
})
map.add(newLine)
map.setFitView()
} else {
console.log(error)
}
})
}
})
})
},
/* 根据起点和终点绘制线路 */
drawDriveLine(map) {
// 构造路线导航类
let driving = new AMap.Driving({
map: map,
showTraffic: false
})
let startPoint = new AMap.LngLat(this.drivePoint.startPoint.longitude, this.drivePoint.startPoint.latitude)
let endPoint = new AMap.LngLat(this.drivePoint.endPoint.longitude, this.drivePoint.endPoint.latitude)
// let startPoint = new AMap.LngLat(parseFloat(this.pointList[this.pointList.length - 1].longitude), parseFloat(this.pointList[this.pointList.length - 1].latitude))
// let endPoint = new AMap.LngLat(parseFloat(this.pointList[0].longitude), parseFloat(this.pointList[0].latitude))
console.log('start=> ', startPoint, ' end=> ', endPoint)
// 根据起终点经纬度规划驾车导航路线
driving.search(startPoint, endPoint, function(status, result) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考
if (status === 'complete') {
console.log('绘制驾车路线完成')
} else {
console.log('获取驾车数据失败：' + result)
}
})
}
}
}
</script>
<style lang="scss" >
#aMapContainer{
height: 300px;
width: 100%;
}
.amap-marker-label{
border: 0;
background-color: transparent;
}
.marker{
border-radius: 2px;
padding: 3px 4px;
background-color: #fff;
width: auto;
box-shadow: 0 2px 6px 0 rgb(114,124,245 / 50%);
}
</style>
src/components/MapView.vue
View file @ 8daf1cdc
<template> <template>
<div class="amap-container"> <div class="amap-container">
<el-amap
vid="amap-order"
class = "amap-box"
:resizeEnable="mapInfo.resizeEnable"
:amap-manager="mapInfo.amapManager"
:zoom="mapInfo.zoom"
:center="mapInfo.center"
:events="mapInfo.events"
></el-amap>
</div> </div>
</template> </template>
<script> <script>
// 引入高德地图ui组件
// eslint-disable-next-line import/no-duplicates
// import {lazyAMapApiLoaderInstance} from 'vue-amap'
// eslint-disable-next-line import/no-duplicates
import VueAMap from 'vue-amap'
//
let amapManager = new VueAMap.AMapManager()
export default { export default {
name: 'MapView', name: 'MapView',
...@@ -27,28 +11,16 @@ export default { ...@@ -27,28 +11,16 @@ export default {
value: { value: {
type: Number, type: Number,
default: 0 default: 0
},
pointList: {
type: Array,
default: () => {
return []
}
} }
}, },
data() { data() {
return { return {
mapInfo: {
resizeEnable: true, // 是否监控地图容器尺寸变化
zoom: 13, // 地图缩放
amapManager,
center: [116.379028, 39.865042],
events: {
init(o) {
// lazyAMapApiLoaderInstance.load().then(() => {
//
// })
// eslint-disable-next-line no-undef
let marker = new AMap.Marker({ // 点图标
position: [116.379028, 39.865042]
})
marker.setMap(o)
}
}
}
} }
}, },
watch: { watch: {
...@@ -57,10 +29,14 @@ export default { ...@@ -57,10 +29,14 @@ export default {
} }
}, },
mounted() { mounted() {
// console.log(this.pointList)
}, },
methods: { methods: {
action() { action() {
this.$emit('action', '') this.$emit('action', '')
},
calcRealPosition() {
} }
} }
} }
......
src/main.js
View file @ 8daf1cdc
...@@ -8,15 +8,7 @@ import Container from '@/components/Container' ...@@ -8,15 +8,7 @@ import Container from '@/components/Container'
import './assets/styles/common_vant.scss' import './assets/styles/common_vant.scss'
import './assets/styles/common.scss' import './assets/styles/common.scss'
import 'font-awesome/css/font-awesome.min.css' import 'font-awesome/css/font-awesome.min.css'
//引入高德地图
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
key: '061c2a328572b71e2b26d9dc1a0cc703',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
v: '2.0',
uiVersion: '1.0'
})
// import './assets/styles/variable.scss' // import './assets/styles/variable.scss'
import { Button, Toast, Field, Row, Col, NavBar, Search, Uploader, Empty, import { Button, Toast, Field, Row, Col, NavBar, Search, Uploader, Empty,
......
src/views/myOrder/components/logisticsStep.vue
View file @ 8daf1cdc
...@@ -14,7 +14,7 @@ export default { ...@@ -14,7 +14,7 @@ export default {
} }
}, },
mounted () { mounted () {
this.calcStepLine() // this.calcStepLine()
}, },
methods: { methods: {
calcStepLine () { calcStepLine () {
......
src/views/myOrder/components/stepItem.vue
View file @ 8daf1cdc
...@@ -33,6 +33,7 @@ export default { ...@@ -33,6 +33,7 @@ export default {
date: '2020-03-10', date: '2020-03-10',
time: '10:08:08', time: '10:08:08',
type: '状态名称', type: '状态名称',
typeCode: '100',
text: '内容信息', text: '内容信息',
showLine: true showLine: true
} }
...@@ -43,6 +44,25 @@ export default { ...@@ -43,6 +44,25 @@ export default {
stepState: function () { stepState: function () {
return this.$parent.$children[0]._uid === this._uid ? 'normal' : 'history' return this.$parent.$children[0]._uid === this._uid ? 'normal' : 'history'
} }
},
methods: {
calcStateIcon(typeCode) {
let resIcon = ''
switch (typeCode) {
// 已开单
case '100':
break
// 已出库
case '220':
break
// 运输中
case '300':
break
case '400':
break
default:
}
}
} }
} }
</script> </script>
...@@ -50,8 +70,9 @@ export default { ...@@ -50,8 +70,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.step-container { .step-container {
display: flex; display: flex;
align-items: center; margin-top: 20px;
height:60px; //align-items: center;
//height:60px;
//border-bottom: 1px solid $line; //border-bottom: 1px solid $line;
/*时间 选中*/ /*时间 选中*/
.step-time { .step-time {
...@@ -72,7 +93,7 @@ export default { ...@@ -72,7 +93,7 @@ export default {
font-size: 18px; font-size: 18px;
position:relative; position:relative;
text-align: center; text-align: center;
margin-top:-12px; //margin-top:-12px;
.state-icon{ .state-icon{
z-index: 100; z-index: 100;
...@@ -86,7 +107,7 @@ export default { ...@@ -86,7 +107,7 @@ export default {
right: 0; right: 0;
top: 16px; top: 16px;
width: 2px; width: 2px;
height: 50px; height: 120%;
margin: 0 auto; margin: 0 auto;
background-size: 2px 11px; background-size: 2px 11px;
background-repeat: repeat-y; background-repeat: repeat-y;
...@@ -104,11 +125,13 @@ export default { ...@@ -104,11 +125,13 @@ export default {
margin-left: 2px; margin-left: 2px;
.step-type { .step-type {
font-weight: bold; font-weight: bold;
font-size: 15px; font-size: 14px;
} }
.step-text { .step-text {
font-size: 12px; font-size: 12px;
color: $txtGray9; color: $txtGray9;
margin-top:2px;
margin-right: 10px;
} }
} }
} }
......
src/views/myOrder/detail/logisticsDetail.vue
View file @ 8daf1cdc
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<van-empty description="暂无数据" <van-empty description="暂无数据"
v-if="!shippingInfo&&!shippingInfo.shippingNo&& v-if="!shippingInfo&&!shippingInfo.shippingNo&&
(!stepList|| stepList.length<0)&&(!mapPointList||mapPointList.length < 0)"/> (!stepList|| stepList.length<0)&&(!mapPointList||mapPointList.length < 0)"/>
<map-view v-if="mapPointList&&mapPointList.length > 0"/> <!-- <map-view :point-list="mapPointList" v-if="mapPointList&&mapPointList.length > 0"/>-->
<a-map-view :point-list="mapPointList" :drive-point="driveLine" v-if="mapPointList&&mapPointList.length > 0"/>
<div class="logistics-header" v-if="shippingInfo&&shippingInfo.shippingNo"> <div class="logistics-header" v-if="shippingInfo&&shippingInfo.shippingNo">
<div class="header-title"> <div class="header-title">
<van-icon class="logistic-logo" :name="icons.logo"/> <van-icon class="logistic-logo" :name="icons.logo"/>
...@@ -46,10 +47,11 @@ import {getShippingInfo, getTrackInfo, getGpsMapPoint} from '@/api/myOrder' ...@@ -46,10 +47,11 @@ import {getShippingInfo, getTrackInfo, getGpsMapPoint} from '@/api/myOrder'
import MapView from '../../../components/MapView' import MapView from '../../../components/MapView'
import LogisticsStep from '../components/logisticsStep' import LogisticsStep from '../components/logisticsStep'
import StepItem from '../components/stepItem' import StepItem from '../components/stepItem'
import AMapView from '../../../components/AMapView'
export default { export default {
name: 'logisticsDetail', name: 'logisticsDetail',
components: {StepItem, LogisticsStep, MapView}, components: {AMapView, StepItem, LogisticsStep, MapView},
data() { data() {
return { return {
orderInfo: this.$route.query, orderInfo: this.$route.query,
...@@ -58,6 +60,18 @@ export default { ...@@ -58,6 +60,18 @@ export default {
}, },
shippingInfo: {}, shippingInfo: {},
mapPointList: [], mapPointList: [],
driveLine: {
startPoint: {
address: '',
longitude: 0,
latitude: 0
},
endPoint: {
address: '',
longitude: 0,
latitude: 0
}
},
stepList: [] stepList: []
} }
}, },
...@@ -92,7 +106,6 @@ export default { ...@@ -92,7 +106,6 @@ export default {
}, },
/* 获取运单信息 */ /* 获取运单信息 */
getShippingData() { getShippingData() {
console.log(this.orderInfo)
let data = { let data = {
'orderId': '', 'orderId': '',
'orderNo': this.orderInfo.orderNo, // '879202103190016', 'orderNo': this.orderInfo.orderNo, // '879202103190016',
...@@ -107,7 +120,13 @@ export default { ...@@ -107,7 +120,13 @@ export default {
if (rt.code === 200 && rt.data && rt.data.code === '00000' && if (rt.code === 200 && rt.data && rt.data.code === '00000' &&
rt.data.entity && rt.data.entity.shippingList && rt.data.entity.shippingList.length > 0) { rt.data.entity && rt.data.entity.shippingList && rt.data.entity.shippingList.length > 0) {
this.shippingInfo = rt.data.entity.shippingList[0] this.shippingInfo = rt.data.entity.shippingList[0]
// 定义驾驶规划参数
this.driveLine.startPoint.address = this.shippingInfo.pickingLocationDesc
this.driveLine.startPoint.longitude = parseFloat(this.shippingInfo.pickLongitude)
this.driveLine.startPoint.latitude = parseFloat(this.shippingInfo.pickLatitude)
this.driveLine.endPoint.address = this.shippingInfo.clientAddress
this.driveLine.endPoint.longitude = parseFloat(this.shippingInfo.longitude)
this.driveLine.endPoint.latitude = parseFloat(this.shippingInfo.latitude)
this.getGpsPoint() this.getGpsPoint()
} else { } else {
console.log('运单信息', '请求无数据') console.log('运单信息', '请求无数据')
...@@ -140,6 +159,7 @@ export default { ...@@ -140,6 +159,7 @@ export default {
date: item.opDate.split(' ')[0], date: item.opDate.split(' ')[0],
time: item.opDate.split(' ')[1], time: item.opDate.split(' ')[1],
type: item.orderStatus, type: item.orderStatus,
typeCode: item.orderStatusCode,
text: item.statusMsg, text: item.statusMsg,
showLine: index !== (trackData.orderStatusInfoVoList.length - 1) showLine: index !== (trackData.orderStatusInfoVoList.length - 1)
}) })
...@@ -156,11 +176,14 @@ export default { ...@@ -156,11 +176,14 @@ export default {
'orderType': this.orderInfo.orderType, // 'SALE', 'orderType': this.orderInfo.orderType, // 'SALE',
'shippingNo': this.shippingInfo.shippingNo, // '3S1255202103190010', 'shippingNo': this.shippingInfo.shippingNo, // '3S1255202103190010',
'sourceDb': this.orderInfo.sourceDb, // 'SHYY', 'sourceDb': this.orderInfo.sourceDb, // 'SHYY',
'gisTime': '', 'gisTime': this.shippingInfo.actualArrivalTime,
'orderNo': this.orderInfo.orderNo // '879202103190016' 'orderNo': this.orderInfo.orderNo // '879202103190016'
} }
getGpsMapPoint(data).then(res => { getGpsMapPoint(data).then(res => {
if (res.code === 200 && res.data.code === '00000' &&
res.data.entity && res.data.entity.gisMapInfoList) {
this.mapPointList = res.data.entity.gisMapInfoList
}
}).catch(err => { }).catch(err => {
console.log('GPS信息', err) console.log('GPS信息', err)
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment