Skip to content

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

1.引入echarts 

2.添加物流页面在冷链情况下，曲线图的显示
parent 9a89d8b8
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 22 deletions
package-lock.json
View file @ 7b0e210b
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
"dependencies": { "dependencies": {
"axios": "^0.18.1", "axios": "^0.18.1",
"crypto-js": "^4.0.0", "crypto-js": "^4.0.0",
"echarts": "^4.8.0", "echarts": "^4.9.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",
"vant": "^2.12.10", "vant": "^2.12.10",
...@@ -5033,11 +5033,11 @@ ...@@ -5033,11 +5033,11 @@
} }
}, },
"node_modules/echarts": { "node_modules/echarts": {
"version": "4.8.0", "version": "4.9.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.8.0.tgz", "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==", "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"dependencies": { "dependencies": {
"zrender": "4.3.1" "zrender": "4.3.2"
} }
}, },
"node_modules/editorconfig": { "node_modules/editorconfig": {
...@@ -18991,9 +18991,9 @@ ...@@ -18991,9 +18991,9 @@
"dev": true "dev": true
}, },
"node_modules/zrender": { "node_modules/zrender": {
"version": "4.3.1", "version": "4.3.2",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.1.tgz", "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ==" "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
} }
}, },
"dependencies": { "dependencies": {
...@@ -23331,11 +23331,11 @@ ...@@ -23331,11 +23331,11 @@
} }
}, },
"echarts": { "echarts": {
"version": "4.8.0", "version": "4.9.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.8.0.tgz", "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==", "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"requires": { "requires": {
"zrender": "4.3.1" "zrender": "4.3.2"
} }
}, },
"editorconfig": { "editorconfig": {
...@@ -34971,9 +34971,9 @@ ...@@ -34971,9 +34971,9 @@
} }
}, },
"zrender": { "zrender": {
"version": "4.3.1", "version": "4.3.2",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.1.tgz", "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ==" "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
} }
} }
} }
package.json
View file @ 7b0e210b
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
"dependencies": { "dependencies": {
"axios": "^0.18.1", "axios": "^0.18.1",
"crypto-js": "^4.0.0", "crypto-js": "^4.0.0",
"echarts": "^4.8.0", "echarts": "^4.9.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",
"vant": "^2.12.10", "vant": "^2.12.10",
......
src/api/myOrder.js
View file @ 7b0e210b
...@@ -87,6 +87,15 @@ export function getGpsMapPoint(params) { ...@@ -87,6 +87,15 @@ export function getGpsMapPoint(params) {
url: '/OrderLife/GisMapInfo', url: '/OrderLife/GisMapInfo',
method: 'post', method: 'post',
data: params, data: params,
loading: false
})
}
// 获取温度
export function getColdTemperatureList(params) {
return fetch({
url: '/OrderLife/TempRecord',
method: 'post',
data: params,
loading: true loading: true
}) })
} }
src/components/EchartsView.vue 0 → 100644
View file @ 7b0e210b
<template>
<div id="chartView" style="height: 300px;width:100%;background-color:#fff"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'EchartsView',
data() {
return {
xList: [],
yList: []
}
},
props: {
lineArray: {
type: Array,
default: () => []
},
carNo: {
type: String,
default: ''
}
},
mounted() {
this.calcData()
},
methods: {
calcData() {
if (this.lineArray && this.lineArray.length > 0) {
let tempX = []
let tempY = []
this.lineArray.forEach(item => {
if (item.temperature) {
// collectDate temperature
tempX.push(this.splitDate(item.collectDate))
tempY.push(item.temperature)
}
})
this.xList = tempX
this.yList = tempY
}
if (this.xList.length > 0) {
this.drawLine()
}
},
drawLine() {
let _this = this
let layout = document.getElementById('chartView')
let chart = echarts.init(layout)
let options = {
// animation: false,
color: '#02a7f0',
dataZoom: [
{
id: 'dataZoomX',
type: 'inside',
xAxisIndex: [0],
filterMode: 'none',
start: 0,
end: 2,
zoomLock: true
}
],
tooltip: {
trigger: 'axis',
formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
var relVal = params[0].name
for (var i = 0, l = params.length; i < l; i++) {
let circle = `<span style="margin-right:6px;
display:inline-block;
height:12px;
width:12px;
border-radius:6px;
background-color:${params[i].color}"></span>`
relVal += '<br/><div style="display:flex;align-items: center">' + circle + _this.carNo + ' : ' + params[i].value + '℃</div>'
}
return relVal
}
},
grid: {
left: '12%',
top: '10%',
height: '80%',
width: '86%'
},
xAxis: {
type: 'category',
data: this.xList,
axisLine: {
lineStyle: {
color: '#eeeeee'
}
},
axisLabel: {
color: '#999999'
},
axisTick: {
alignWithLabel: true
}
},
yAxis: {
name: '温度',
type: 'value',
// minInterval: 0.5,
// splitNumber: 7,
axisLine: {
lineStyle: {
color: '#eeeeee'
}
},
axisLabel: {
color: '#999999',
formatter: '{value} ℃',
interval: 0.5
},
splitLine: {
lineStyle: {
color: '#eeeeee'
}
},
nameTextStyle: {
color: '#000'
}
},
series: [{
data: this.yList, // [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
}
chart.setOption(options)
},
splitDate(oDate) {
let res = oDate.split(' ')[1].slice(0, 5)
return res
}
}
}
</script>
<style scoped>
</style>
src/views/myOrder/detail/logisticsDetail.vue
View file @ 7b0e210b
...@@ -42,22 +42,30 @@ ...@@ -42,22 +42,30 @@
<van-icon name="arrow-down"/> <van-icon name="arrow-down"/>
</div> </div>
</div> </div>
<!-- 冷链温度趋势 -->
<van-tabs v-model="temperatureActive" style="margin-top:18px;">
<van-tab :title="item.deviceNumber" v-for="(item,index) in coldInfo" :key="index">
<echarts-view :line-array="item.temperatureInfoList" :car-no="item.deviceNumber"/>
</van-tab>
</van-tabs>
</div> </div>
</template> </template>
<script> <script>
import {getShippingInfo, getTrackInfo, getGpsMapPoint} from '@/api/myOrder' import {getShippingInfo, getTrackInfo, getGpsMapPoint, getColdTemperatureList} 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' import AMapView from '../../../components/AMapView'
import EchartsView from '../../../components/EchartsView'
export default { export default {
name: 'logisticsDetail', name: 'logisticsDetail',
components: {AMapView, StepItem, LogisticsStep, MapView}, components: {EchartsView, AMapView, StepItem, LogisticsStep, MapView},
data() { data() {
return { return {
orderInfo: this.$route.query, orderInfo: this.$route.query,
temperatureActive: 0,
icons: { icons: {
logo: require('@/assets/img/u48.png') logo: require('@/assets/img/u48.png')
}, },
...@@ -77,7 +85,8 @@ export default { ...@@ -77,7 +85,8 @@ export default {
} }
}, },
stepInfo: {}, stepInfo: {},
stepList: [] stepList: [],
coldInfo: []
} }
}, },
mounted() { mounted() {
...@@ -96,6 +105,7 @@ export default { ...@@ -96,6 +105,7 @@ export default {
this.getShippingData() this.getShippingData()
this.getTrackInfoDetail() this.getTrackInfoDetail()
this.getTemperatureData()
}, },
destroyed() { destroyed() {
// 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件 // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
...@@ -134,7 +144,7 @@ export default { ...@@ -134,7 +144,7 @@ export default {
this.driveLine.endPoint.longitude = parseFloat(this.shippingInfo.longitude) this.driveLine.endPoint.longitude = parseFloat(this.shippingInfo.longitude)
this.driveLine.endPoint.latitude = parseFloat(this.shippingInfo.latitude) this.driveLine.endPoint.latitude = parseFloat(this.shippingInfo.latitude)
console.log('--->', this.orderInfo.orderStatusCode) // console.log('--->', this.orderInfo.orderStatusCode)
if (this.orderInfo.orderStatusCode > 300) { if (this.orderInfo.orderStatusCode > 300) {
this.sendType = this.orderInfo.orderStatusCode === '310' this.sendType = this.orderInfo.orderStatusCode === '310'
this.getGpsPoint() this.getGpsPoint()
...@@ -212,6 +222,25 @@ export default { ...@@ -212,6 +222,25 @@ export default {
console.log('GPS信息', err) console.log('GPS信息', err)
this.$toast('GIS信息获取失败') this.$toast('GIS信息获取失败')
}) })
},
getTemperatureData() {
let data = {
'order': 'desc',
'orderId': '',
'orderNo': this.orderInfo.orderNo, // '301202103261165',
'orderType': this.orderInfo.orderType, // 'SALE',
'pageNum': 1,
'pageSize': 1000,
'sort': 'COLLECTDATE',
'sourceDb': this.orderInfo.sourceDb// 'SHYY'
}
getColdTemperatureList(data).then(res => {
if (res.code === 200 && res.data.code === '00000' &&
res.data.entity && res.data.entity.temperatureRecordList &&
res.data.entity.temperatureRecordList.length > 0) {
this.coldInfo = res.data.entity.temperatureRecordList
}
})
} }
} }
} }
......
src/views/myOrder/detail/orderDetail.vue
View file @ 7b0e210b
...@@ -367,8 +367,8 @@ export default { ...@@ -367,8 +367,8 @@ export default {
'mdmClientCode': '', 'mdmClientCode': '',
'mdmGoodsCode': '', 'mdmGoodsCode': '',
'order': '', 'order': '',
'orderId': '', 'orderId': this.orderItem.orderId,
'orderNo': this.orderItem.orderNo, 'orderNo': '', // this.orderItem.orderNo,
'pageNum': 1, 'pageNum': 1,
'pageSize': 3, 'pageSize': 3,
'sort': '', 'sort': '',
......
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