From f2aa6f75d70cc7df54bfd0cf33af46fe96401856 Mon Sep 17 00:00:00 2001 From: qingyiay <2386314947@qq.com> Date: 星期四, 12 十月 2023 15:33:04 +0800 Subject: [PATCH] 放空逻辑修改 提煤单状态显示字段修改 --- pages/public-page/mapRoute/mapRoute.vue | 473 +++++++++++++++++++++++++++++++--------------------------- 1 files changed, 250 insertions(+), 223 deletions(-) diff --git a/pages/public-page/mapRoute/mapRoute.vue b/pages/public-page/mapRoute/mapRoute.vue index 43ffafb..996618c 100644 --- a/pages/public-page/mapRoute/mapRoute.vue +++ b/pages/public-page/mapRoute/mapRoute.vue @@ -1,8 +1,16 @@ <template> <view> - <view class="page-body" style="margin-top: 4rpx;"> + <view class="page-body" + style="margin-top: 4rpx;"> <view class="page-section page-section-gap"> - <map style="width: 100%; height: 600px;" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline"></map> + <map style="width: 100%; height: 600px;" + :latitude="latitude" + :longitude="longitude" + :markers="markers" + :polyline="polyline" + @markertap="awaken" + @callouttap="awaken" + @tap="awaken"></map> </view> </view> <view class="tip"> @@ -15,250 +23,269 @@ <text>{{ duration || '' }}</text> </view> </view> - <view class="open-button" @click="awaken"><u-button type="primary">浣跨敤鎵嬫満鍦板浘</u-button></view> + <view class="open-button" + @click="awaken"><u-button type="primary">浣跨敤鎵嬫満鍦板浘</u-button></view> </view> </template> <script> -export default { - data() { - return { - latitude: 38.04606544104117, - longitude: 114.48735479816793, - customerId: '', - filedId: '', - orderType: '', - toFiledId: '', - // 璧风偣缁忕含搴� - originlongitude: 39.909, - originlatitude: 116.39742, - // 缁堢偣 - finishlongitude: null, - finishlatitude: null, - markers: [ - { - latitude: null, - longitude: null, - iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png', - width: 23, - height: 33, - id: 0, - callout: { - content: '璧风偣', //鏂囨湰 - color: '#000000', //鏂囧瓧棰滆壊 - fontSize: 14, //鏂囨湰澶у皬 - borderRadius: 15, //杈规鍦嗚 - borderWidth: '10', - bgColor: '#e51860', //鑳屾櫙棰滆壊 - display: 'ALWAYS' //甯告樉 + export default { + data() { + return { + latitude: 38.04606544104117, + longitude: 114.48735479816793, + customerId: '', + filedId: '', + orderType: '', + toFiledId: '', + // 璧风偣缁忕含搴� + originlongitude: 39.909, + originlatitude: 116.39742, + // 缁堢偣 + finishlongitude: null, + finishlatitude: null, + markers: [{ + latitude: null, + longitude: null, + iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png', + width: 23, + height: 33, + id: 0, + callout: { + content: '璧风偣', //鏂囨湰 + color: '#ffffff', //鏂囧瓧棰滆壊 + fontSize: 10, //鏂囨湰澶у皬 + borderRadius: 12, //杈规鍦嗚 + borderWidth: '10', + bgColor: '#08b078', //鑳屾櫙棰滆壊 + display: 'ALWAYS' //甯告樉 + } + }, + { + latitude: null, + longitude: null, + iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png', + width: 23, + height: 33, + id: 1, + callout: { + content: '缁堢偣', //鏂囨湰 + color: '#ffffff', //鏂囧瓧棰滆壊 + fontSize: 10, //鏂囨湰澶у皬 + borderRadius: 12, //杈规鍦嗚 + borderWidth: '10', + bgColor: '#fc645c', //鑳屾櫙棰滆壊 + display: 'ALWAYS' //甯告樉 + } } - }, - { - latitude: null, - longitude: null, - iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png', - width: 23, - height: 33, - id: 1, - callout: { - content: '缁堢偣', //鏂囨湰 - color: '#ffffff', //鏂囧瓧棰滆壊 - fontSize: 14, //鏂囨湰澶у皬 - borderRadius: 15, //杈规鍦嗚 - borderWidth: '10', - bgColor: '#e51860', //鑳屾櫙棰滆壊 - display: 'ALWAYS' //甯告樉 - } - } - ], - polyline: [ - { + ], + polyline: [{ // 姣忎釜鐐圭殑缁忕含搴� - points: [{ latitude: 38.04606544104117, longitude: 114.48735479816793 }, { latitude: 38.049531, longitude: 114.53521899999998 }], + points: [{ latitude: 38.04606544104117, longitude: 114.48735479816793 }, { + latitude: 38.049531, + longitude: 114.53521899999998 + }], // 棰滆壊 color: '#0091ff', // 瀹藉害 width: 10 - } - ], - distance: null, - duration: null, - fromLocation: {}, - toLocation: {} - }; - }, - methods: { - getLocation() { - uni.showLoading({ - title: '鍔犺浇涓��' - }); - let QQMapWX = require('../../../utils/qqmap-wx-jssdk.js'); - let qqmapsdk = new QQMapWX({ - key: 'HTNBZ-LZGRQ-YDB5S-B4KAS-KLHJH-GHBUE' // 蹇呭~ - }); - const params = this.toFiledId ? { filedId: this.filedId, toFiledId: this.toFiledId } : { customerId: this.customerId, filedId: this.filedId }; - this.$reqGet('getAppLocation', params).then(result => { - console.log(result, '鑵捐缁忕含搴�'); - let _this = this; - console.log(_this.orderType, '绫诲瀷'); - let fromLocation; - let toLocation; - if (_this.orderType == '澶栬喘' || _this.orderType == '澶栭攢') { - fromLocation = { - longitude: result.data.customerLongitude, - latitude: result.data.customerLatitude - }; - toLocation = { - longitude: result.data.filedLongitude, - latitude: result.data.filedLatitude - }; - } else if (_this.orderType == '鍐呰喘' || _this.orderType == '鍐呴攢') { - fromLocation = { - longitude: result.data.filedLongitude, - latitude: result.data.filedLatitude - }; - toLocation = { - longitude: result.data.customerLongitude, - latitude: result.data.customerLatitude - }; - } else { - fromLocation = { - longitude: result.data.filedLongitude, - latitude: result.data.filedLatitude - }; - toLocation = { - longitude: result.data.toFiledLongitude, - latitude: result.data.toFiledLatitude - }; + }], + distance: null, + duration: null, + fromLocation: {}, + toLocation: {} + }; + }, + methods: { + getLocation() { + uni.showLoading({ + title: '鍔犺浇涓��' + }); + let QQMapWX = require('../../../utils/qqmap-wx-jssdk.js'); + let qqmapsdk = new QQMapWX({ + key: 'HTNBZ-LZGRQ-YDB5S-B4KAS-KLHJH-GHBUE' // 蹇呭~ + }); + const params = this.toFiledId ? { filedId: this.filedId, toFiledId: this.toFiledId } : { + customerId: this + .customerId, + filedId: this.filedId + }; + this.$reqGet('getAppLocation', params).then(result => { + console.log(result, '鑵捐缁忕含搴�'); + let _this = this; + console.log(_this.orderType, '绫诲瀷'); + let fromLocation; + let toLocation; + if (_this.orderType == '澶栬喘' || _this.orderType == '澶栭攢') { + fromLocation = { + longitude: result.data.customerLongitude, + latitude: result.data.customerLatitude + }; + toLocation = { + longitude: result.data.filedLongitude, + latitude: result.data.filedLatitude + }; + } + // else if (_this.orderType == '鍐呰喘' || _this.orderType == '鍐呴攢') { + // fromLocation = { + // longitude: result.data.filedLongitude, + // latitude: result.data.filedLatitude + // }; + // toLocation = { + // longitude: result.data.customerLongitude, + // latitude: result.data.customerLatitude + // }; + // } + else { + fromLocation = { + longitude: result.data.filedLongitude, + latitude: result.data.filedLatitude + }; + toLocation = { + longitude: result.data.toFiledLongitude, + latitude: result.data.toFiledLatitude + }; + // _this.fromLocation = fromLocation; + // _this.toLocation = toLocation; + } + console.log(fromLocation, toLocation); _this.fromLocation = fromLocation; _this.toLocation = toLocation; - } - _this.fromLocation = fromLocation; - _this.toLocation = toLocation; - //璋冪敤璺濈璁$畻鎺ュ彛 - qqmapsdk.direction({ - mode: 'driving', - //from鍙傛暟涓嶅~榛樿褰撳墠鍦板潃 - from: fromLocation, - to: toLocation, - success: function(res) { - console.log(res); - let ret = res; - let coors = ret.result.routes[0].polyline, - pl = []; - //鍧愭爣瑙e帇锛堣繑鍥炵殑鐐逛覆鍧愭爣锛岄�氳繃鍓嶅悜宸垎杩涜鍘嬬缉锛� - let kr = 1000000; - for (let i = 2; i < coors.length; i++) { - coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr; - } - //灏嗚В鍘嬪悗鐨勫潗鏍囨斁鍏ョ偣涓叉暟缁刾l涓� - for (let i = 0; i < coors.length; i += 2) { - pl.push({ latitude: coors[i], longitude: coors[i + 1] }); - } - console.log(pl); - //璁剧疆polyline灞炴�э紝灏嗚矾绾挎樉绀哄嚭鏉�,灏嗚В鍘嬪潗鏍囩涓�涓暟鎹綔涓鸿捣鐐� - _this.longitude = pl[0].longitude; - _this.latitude = pl[0].latitude; - _this.polyline = [ - { + //璋冪敤璺濈璁$畻鎺ュ彛 + qqmapsdk.direction({ + mode: 'driving', + //from鍙傛暟涓嶅~榛樿褰撳墠鍦板潃 + from: fromLocation, + to: toLocation, + success: function(res) { + console.log(res); + let ret = res; + let coors = ret.result.routes[0].polyline, + pl = []; + //鍧愭爣瑙e帇锛堣繑鍥炵殑鐐逛覆鍧愭爣锛岄�氳繃鍓嶅悜宸垎杩涜鍘嬬缉锛� + let kr = 1000000; + for (let i = 2; i < coors.length; i++) { + coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr; + } + //灏嗚В鍘嬪悗鐨勫潗鏍囨斁鍏ョ偣涓叉暟缁刾l涓� + for (let i = 0; i < coors.length; i += 2) { + pl.push({ latitude: coors[i], longitude: coors[i + 1] }); + } + console.log(pl); + //璁剧疆polyline灞炴�э紝灏嗚矾绾挎樉绀哄嚭鏉�,灏嗚В鍘嬪潗鏍囩涓�涓暟鎹綔涓鸿捣鐐� + _this.longitude = pl[0].longitude; + _this.latitude = pl[0].latitude; + _this.polyline = [{ points: pl, - color: '#FF0000DD', + color: '#04b474', width: 4, arrowLine: true + }]; + if (_this.orderType == '澶栬喘' || _this.orderType == '澶栭攢') { + _this.$set(_this.markers[0], 'longitude', result.data + .customerLongitude); + _this.$set(_this.markers[0], 'latitude', result.data.customerLatitude); + _this.$set(_this.markers[1], 'longitude', result.data.filedLongitude); + _this.$set(_this.markers[1], 'latitude', result.data.filedLatitude); } - ]; - if (_this.orderType == '澶栬喘' || _this.orderType == '澶栭攢') { - _this.$set(_this.markers[0], 'longitude', result.data.customerLongitude); - _this.$set(_this.markers[0], 'latitude', result.data.customerLatitude); - _this.$set(_this.markers[1], 'longitude', result.data.filedLongitude); - _this.$set(_this.markers[1], 'latitude', result.data.filedLatitude); - } else if (_this.orderType == '鍐呰喘' || _this.orderType == '鍐呴攢') { - _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude); - _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude); - _this.$set(_this.markers[1], 'longitude', result.data.customerLongitude); - _this.$set(_this.markers[1], 'latitude', result.data.customerLatitude); - } else { - _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude); - _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude); - _this.$set(_this.markers[1], 'longitude', result.data.toFiledLongitude); - _this.$set(_this.markers[1], 'latitude', result.data.toFiledLatitude); + // else if (_this.orderType == '鍐呰喘' || _this.orderType == '鍐呴攢') { + // _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude); + // _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude); + // _this.$set(_this.markers[1], 'longitude', result.data + // .customerLongitude); + // _this.$set(_this.markers[1], 'latitude', result.data.customerLatitude); + // } + else { + _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude); + _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude); + _this.$set(_this.markers[1], 'longitude', result.data + .toFiledLongitude); + _this.$set(_this.markers[1], 'latitude', result.data.toFiledLatitude); + } + }, + fail: function(error) { + console.error(error); + }, + complete: function(res) { + console.log(res); + uni.hideLoading(); + _this.distance = res.result.routes[0].distance; + _this.distance = (_this.distance / 1000).toFixed(2); + _this.duration = _this.handleTime(res.result.routes[0].duration); } - }, - fail: function(error) { - console.error(error); - }, - complete: function(res) { - console.log(res); - uni.hideLoading(); - _this.distance = res.result.routes[0].distance; - _this.distance = (_this.distance / 1000).toFixed(2); - _this.duration = _this.handleTime(res.result.routes[0].duration); - } + }); }); - }); + }, + // + handleTime(time) { + let now = new Date(); // 鑾峰彇褰撳墠鏃堕棿 + now.setMinutes(now.getMinutes() + time); + let hours = now + .getHours() + .toString() + .padStart(2, '0'); + let minutes = now + .getMinutes() + .toString() + .padStart(2, '0'); + return hours + ':' + minutes; + }, + // 鍞ら啋 + awaken() { + uni.openLocation({ + latitude: this.markers[1].latitude, + longitude: this.markers[1].longitude, + name: '鐩殑鍦�', + address: '鐩殑鍦�' + }); + } }, - // - handleTime(time) { - let now = new Date(); // 鑾峰彇褰撳墠鏃堕棿 - now.setMinutes(now.getMinutes() + time); - let hours = now - .getHours() - .toString() - .padStart(2, '0'); - let minutes = now - .getMinutes() - .toString() - .padStart(2, '0'); - return hours + ':' + minutes; + onLoad(params) { + this.customerId = params.customerId; + this.filedId = params.filedId; + this.orderType = params.orderType; + if (params.toFiledId) { + this.toFiledId = params.toFiledId; + } }, - // 鍞ら啋 - awaken() { - uni.openLocation({ - latitude: this.markers[1].latitude, - longitude: this.markers[1].longitude, - name: '鐩殑鍦颁綅缃�', - address: '鐩殑鍦颁綅缃�' - }); + onShow() { + this.getLocation(); + // this.awaken(); } - }, - onLoad(params) { - this.customerId = params.customerId; - this.filedId = params.filedId; - this.orderType = params.orderType; - if (params.toFiledId) { - this.toFiledId = params.toFiledId; - } - }, - onShow() { - this.getLocation(); - // this.awaken(); - } -}; + }; </script> -<style lang="scss" scoped> -.tip { - margin-top: 60rpx; - width: 94%; - height: 40rpx; - font-size: 40rpx; - display: flex; - justify-content: space-around; - .first { - color: #c78a64; - text { - font-size: 45rpx; - color: #f81414; +<style lang="scss" + scoped> + .tip { + width: 94%; + font-size: 40rpx; + margin: vww(22) auto; + display: flex; + justify-content: space-around; + + .first { + color: #515151; + + text { + font-size: 45rpx; + color: #f81414; + } } } -} -.open-button { - width: 100%; - margin: 40rpx 0; - display: flex; - justify-content: center; - /deep/.u-button { - width: 300rpx; + + .open-button { + width: 100%; + margin: 40rpx 0; + display: flex; + justify-content: center; + + /deep/.u-button { + width: 300rpx; + border: 1px solid #3b56eb; + border-radius: 37rpx 37rpx 37rpx 37rpx; + background-color: transparent; + color: #3b56eb; + } } -} -</style> +</style> \ No newline at end of file -- Gitblit v1.9.1