From c810ff144beaa0fe0f0f995120a44aedc68d2b50 Mon Sep 17 00:00:00 2001 From: Sliverber <2622874537@qq.com> Date: Tue, 25 Jun 2024 18:02:39 +0800 Subject: [PATCH] 11 --- page_fix/fix_index.vue | 135 ++++---- page_fix/repair/repair_index.vue | 16 +- page_user/good_list.vue | 2 +- page_user/khfw/khfw.vue | 2 +- page_user/xcjs.vue | 193 ++++++------ pages/index/index.vue | 353 ++++++++++++++------- pages_admin/admin_index.vue | 12 +- pages_admin/admin_order.vue | 21 +- pages_admin/admin_worke.vue | 71 ++++- pages_admin/order/device_detail.vue | 466 +++++++++++++++------------- pages_admin/order/order_detail.vue | 316 ++++++++++--------- 11 files changed, 930 insertions(+), 657 deletions(-) diff --git a/page_fix/fix_index.vue b/page_fix/fix_index.vue index 4ff0fc6..7c7c4c2 100644 --- a/page_fix/fix_index.vue +++ b/page_fix/fix_index.vue @@ -6,6 +6,10 @@ height='45'> + + + @@ -81,6 +85,44 @@ }, }, methods: { + toggleIconAndCallout() { + this.showIconAndCallout = !this.showIconAndCallout; + if (this.showIconAndCallout) { + const newMarkers = []; + this.parkingList.forEach(item => { + newMarkers.push({ + id: parseFloat(item.parkingId), + latitude: parseFloat(item.latitude), + longitude: parseFloat(item.longitude), + width: 20, + height: 28.95, + iconPath: item.type == 1 ? + 'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item + .type == 2 ? + 'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' : + ' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq', + callout: { + content: item.parkingName, + color: '#ffffff', + fontSize: 14, + borderRadius: 10, + bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' : + '#FF473E', + padding: 6, + display: 'ALWAYS' + }, + isCalloutVisible: true // 添加标记 + }); + }); + this.$set(this, 'markers', [...this.markers, ...newMarkers]); + } else { + // 过滤掉所有气泡显示的标记 + this.$set(this, 'markers', this.markers.filter(marker => !marker.isCalloutVisible)); + } + + }, + + onMarkerTap(e) { console.log('点击了标记：', e); this.sn = e.detail.markerId; @@ -92,7 +134,10 @@ }); }, getmarks() { - this.$u.get(`/appVerify/adminOrder/list?adminId=` + this.userId).then((res) => { + let data ={ + areaId:this.areaId + } + this.$u.get(`/appVerify/adminOrder/list?adminId=` ,data).then((res) => { if (res.code == 200) { console.log('调用了'); this.listData = res.rows; @@ -259,8 +304,11 @@ }, getParking() { - // 发送请求获取数据 - this.$u.get('/app/parking/list').then((res) => { + // 发送请求获取数据\ + let data ={ + areaId:this.areaId + } + this.$u.get('/app/parking/list?',data).then((res) => { if (res.code === 200) { // 处理接口返回的数据 const type1Data = []; @@ -294,66 +342,7 @@ this.polyline = this.polyline.concat(polylines); // console.log(this.polyline); - res.rows.forEach(item => { - if(item.type==1){ - this.markers.push({ - id: parseFloat(item.parkingId), - latitude: parseFloat(item.latitude), - longitude: parseFloat(item.longitude), - width: 20, - height: 40, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne', - callout: { - content: item.parkingName, // 修改为你想要显示的文字内容 - color: '#ffffff', // 修改为文字颜色 - fontSize: 14, // 修改为文字大小 - borderRadius: 10, // 修改为气泡圆角大小 - bgColor: '#3A7EDB', // 修改为气泡背景颜色 - padding: 6, // 修改为气泡内边距 - display: 'ALWAYS' // 修改为气泡的显示策略 - } - }); - }else if(item.type==2){ - this.markers.push({ - id: parseFloat(item.parkingId), - latitude: parseFloat(item.latitude), - longitude: parseFloat(item.longitude), - width: 20, - height: 40, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne', - callout: { - content: item.parkingName, // 修改为你想要显示的文字内容 - color: '#ffffff', // 修改为文字颜色 - fontSize: 14, // 修改为文字大小 - borderRadius: 10, // 修改为气泡圆角大小 - bgColor: '#FFC107', // 修改为气泡背景颜色 - padding: 6, // 修改为气泡内边距 - display: 'ALWAYS' // 修改为气泡的显示策略 - } - }); - }else if(item.type==3){ - this.markers.push({ - id: parseFloat(item.parkingId), - latitude: parseFloat(item.latitude), - longitude: parseFloat(item.longitude), - width: 20, - height: 40, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne', - callout: { - content: item.parkingName, // 修改为你想要显示的文字内容 - color: '#ffffff', // 修改为文字颜色 - fontSize: 14, // 修改为文字大小 - borderRadius: 10, // 修改为气泡圆角大小 - bgColor: '#FF473E', // 修改为气泡背景颜色 - padding: 6, // 修改为气泡内边距 - display: 'ALWAYS' // 修改为气泡的显示策略 - } - }); - } - }) - setTimeout(()=>{ - - },200) + this.parkingList = res.rows } }).catch(error => { @@ -387,8 +376,28 @@ width: 750rpx; .map { + position: relative; width: 750rpx; height: 1250rpx; + + .park { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + right: 30rpx; + bottom: 200rpx; + // background-color: #fff; + border-radius: 50%; + width: 82rpx; + height: 82rpx; + z-index: 10; + + .img { + width: 82rpx; + height: 82rpx; + } + } } .bot { diff --git a/page_fix/repair/repair_index.vue b/page_fix/repair/repair_index.vue index 0aced88..f82f9e0 100644 --- a/page_fix/repair/repair_index.vue +++ b/page_fix/repair/repair_index.vue @@ -63,9 +63,12 @@ 故障部位 - + {{item.faultTypeStr}} + + -- + @@ -134,16 +137,19 @@ 已完成 - + + 已完成 + + 待换电 - + 待维修 - + 换电中 - + 维修中 diff --git a/page_user/good_list.vue b/page_user/good_list.vue index 94ad931..b049d73 100644 --- a/page_user/good_list.vue +++ b/page_user/good_list.vue @@ -21,7 +21,7 @@ 时长：{{ item.duration }} - 距离：{{item.distance}}公里 + 距离：{{ (item.distance / 1000).toFixed(2) }} 公里 距离：--公里 diff --git a/page_user/khfw/khfw.vue b/page_user/khfw/khfw.vue index e6cfc6a..8a88aec 100644 --- a/page_user/khfw/khfw.vue +++ b/page_user/khfw/khfw.vue @@ -163,7 +163,7 @@ }, getword(id) { - this.$u.get("/app/article/list??classifyId="+id ).then((res) => { + this.$u.get("/app/article/list?classifyId="+id ).then((res) => { if (res.code == 200) { this.wordlist = res.rows diff --git a/page_user/xcjs.vue b/page_user/xcjs.vue index 06de7cd..6bb84c9 100644 --- a/page_user/xcjs.vue +++ b/page_user/xcjs.vue @@ -4,7 +4,9 @@ height='45'> - + + + @@ -54,7 +56,8 @@ 骑行距离 - {{orderInfo.distance}}公里 + + {{ (orderInfo.distance / 1000).toFixed(2) }} 公里 --公里 @@ -100,6 +103,7 @@ orderId: '', orderInfo: {}, loading: false, + showIconAndCallout:false } }, @@ -257,7 +261,10 @@ }, getParking() { // 发送请求获取数据 - this.$u.get('/app/parking/list').then((res) => { + let data={ + areaId:this.orderInfo.areaId + } + this.$u.get('/app/parking/list?',data).then((res) => { if (res.code === 200) { // 处理接口返回的数据 const type1Data = []; @@ -291,70 +298,48 @@ this.polygons = this.polygons.concat(polylines); // console.log(this.polyline); - res.rows.forEach(item => { - if(item.type==1){ - this.markers.push({ - id: parseFloat(item.parkingId), - latitude: parseFloat(item.latitude), - longitude: parseFloat(item.longitude), - width: 20, - height: 40, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne', - callout: { - content: item.parkingName, // 修改为你想要显示的文字内容 - color: '#ffffff', // 修改为文字颜色 - fontSize: 14, // 修改为文字大小 - borderRadius: 10, // 修改为气泡圆角大小 - bgColor: '#3A7EDB', // 修改为气泡背景颜色 - padding: 6, // 修改为气泡内边距 - display: 'ALWAYS' // 修改为气泡的显示策略 - } - }); - }else if(item.type==2){ - this.markers.push({ - id: parseFloat(item.parkingId), - latitude: parseFloat(item.latitude), - longitude: parseFloat(item.longitude), - width: 20, - height: 40, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne', - callout: { - content: item.parkingName, // 修改为你想要显示的文字内容 - color: '#ffffff', // 修改为文字颜色 - fontSize: 14, // 修改为文字大小 - borderRadius: 10, // 修改为气泡圆角大小 - bgColor: '#FFC107', // 修改为气泡背景颜色 - padding: 6, // 修改为气泡内边距 - display: 'ALWAYS' // 修改为气泡的显示策略 - } - }); - }else if(item.type==3){ - this.markers.push({ - id: parseFloat(item.parkingId), - latitude: parseFloat(item.latitude), - longitude: parseFloat(item.longitude), - width: 20, - height: 40, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne', - callout: { - content: item.parkingName, // 修改为你想要显示的文字内容 - color: '#ffffff', // 修改为文字颜色 - fontSize: 14, // 修改为文字大小 - borderRadius: 10, // 修改为气泡圆角大小 - bgColor: '#FF473E', // 修改为气泡背景颜色 - padding: 6, // 修改为气泡内边距 - display: 'ALWAYS' // 修改为气泡的显示策略 - } - }); - } - }) + + this.parkingList = res.rows } }).catch(error => { console.error("Error fetching parking data:", error); }); }, + toggleIconAndCallout() { + this.showIconAndCallout = !this.showIconAndCallout; + if (this.showIconAndCallout) { + const newMarkers = []; + this.parkingList.forEach(item => { + newMarkers.push({ + id: parseFloat(item.parkingId), + latitude: parseFloat(item.latitude), + longitude: parseFloat(item.longitude), + width: 20, + height: 28.95, + iconPath: item.type == 1 ?'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3':item.type == 2 ?'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq', + callout: { + content: item.parkingName, + color: '#ffffff', + fontSize: 14, + borderRadius: 10, + bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' : + '#FF473E', + padding: 6, + display: 'ALWAYS' + }, + isCalloutVisible: true // 添加标记 + }); + }); + this.$set(this, 'markers', [...this.markers, ...newMarkers]); + } else { + // 过滤掉所有气泡显示的标记 + this.$set(this, 'markers', this.markers.filter(marker => !marker.isCalloutVisible)); + } + + }, getArea() { - + // this.$u.get("/app/area/" + this.orderInfo.areaId).then((res) => { + this.$u.get("/app/area/" + this.orderInfo.areaId).then((res) => { if (res.code == 200) { @@ -400,39 +385,42 @@ this.loading = true; this.getArea(); - let abb; - try { - abb = JSON.parse(res.data.tripRouteStr); - } catch (error) { - console.error("Error parsing tripRouteStr:", error); - return; - } - if (abb.length > 2) { - this.latitude = parseFloat(abb[0][1]); - this.longitude = parseFloat(abb[0][0]); - this.polyline[0].points = abb.map(coord => ({ - latitude: coord[1], - longitude: coord[0] - })); - this.markers.push({ - id: 0, - latitude: abb[0][1], - longitude: abb[0][0], - width: 25, - height: 38, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u06paUGiHLvL08Pw7BGr' - }, { - id: 1, - latitude: abb[abb.length - 1][1], - longitude: abb[abb.length - 1][0], - width: 25, - height: 38, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uwpAj9vYtPRmhtTOtflx' - }); - }else{ - this.latitude = parseFloat(abb[0][1]); - this.longitude = parseFloat(abb[0][0]); + if(res.data.tripRouteStr){ + let abb; + try { + abb = JSON.parse(res.data.tripRouteStr); + } catch (error) { + console.error("Error parsing tripRouteStr:", error); + return; + } + if (abb.length > 2) { + this.latitude = parseFloat(abb[0][1]); + this.longitude = parseFloat(abb[0][0]); + this.polyline[0].points = abb.map(coord => ({ + latitude: coord[1], + longitude: coord[0] + })); + this.markers.push({ + id: 0, + latitude: abb[0][1], + longitude: abb[0][0], + width: 25, + height: 38, + iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u06paUGiHLvL08Pw7BGr' + }, { + id: 1, + latitude: abb[abb.length - 1][1], + longitude: abb[abb.length - 1][0], + width: 25, + height: 38, + iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uwpAj9vYtPRmhtTOtflx' + }); + }else{ + this.latitude = parseFloat(abb[0][1]); + this.longitude = parseFloat(abb[0][0]); + } } + uni.hideLoading(); } }).catch(error => { @@ -456,7 +444,24 @@ width: 750rpx; height: 100vh; } - + .park { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + right: 30rpx; + bottom: 500rpx; + // background-color: #fff; + border-radius: 50%; + width: 82rpx; + height: 82rpx; + z-index: 10; + + .img { + width: 82rpx; + height: 82rpx; + } + } .bot { display: flex; justify-content: center; diff --git a/pages/index/index.vue b/pages/index/index.vue index c29a7ee..22f3d09 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -4,9 +4,9 @@ - {{areaInfo.areaName}} + {{areaInfo.areaName}} - + 嵛你出行 @@ -14,7 +14,7 @@ title-size='36' height='36'> --> + @markertap="onMarkerTap" @tap="onMapTap" @regionchange="onMapRegionChange"> @@ -232,7 +232,7 @@ 确认开锁 - + 确认预约 @@ -262,7 +262,7 @@ 可继续行驶{{OrderdeviceInfos.remainingMileage}}公里 - + @@ -301,11 +301,11 @@ @click="unloackdevices()"> 解锁用车 - + 还车 - + @@ -373,9 +373,12 @@ - + + + + @@ -583,6 +586,27 @@ + + + + + 温馨提示 + + + 为了避免误触，请问是否确定还车 + + + + + 取消 + + + 确定 + + + + + @@ -680,7 +704,8 @@ isnoline: false, carstause: false, - isbackdevice: false + isbackdevice: false, + isbackcar:false } }, @@ -690,11 +715,11 @@ // console.log('userId 发生变化', newValue, oldValue); this.getisInOrder() }, - + }, onLoad(e) { - this.gps.deptId= uni.getStorageSync('deptId'); + this.gps.deptId = uni.getStorageSync('deptId'); console.log(e, 'eeeeeeeeeeeeeeeeeee'); if (e.q) { this.qParam = e.q @@ -703,17 +728,17 @@ } if (e.qParam) { this.qParam = e.qParam - - + + } - if(this.gps.deptId==101){ - if(this.showagre){ + if (this.gps.deptId == 101) { + if (this.showagre) { uni.redirectTo({ - url:'/page_user/agreement?needback=true&qParam='+this.qParam + url: '/page_user/agreement?needback=true&qParam=' + this.qParam }) } } - + if (e.sn) { this.sn = e.sn if (this.sn != '') { @@ -734,38 +759,38 @@ }, 500) }, onShow() { - this.timers = setInterval(() => { - // console.log('定时器运行中...'); - this.getmarks() - // 在这里执行你的逻辑 - }, 3000); // 每秒执行一次 - + // this.timers = setInterval(() => { + // // console.log('定时器运行中...'); + // this.getmarks() + // // 在这里执行你的逻辑 + // }, 3000); // 每秒执行一次 + if (this.seeDetail == false) { - + let that = this uni.getLocation({ - type: 'wgs84', + type: 'gcj02', success: function(lb) { - that.latitude = 23.440359 - that.longitude =117.074552 - that.gps.latitude =23.440359 - that.gps.longitude = 117.074552; - - - - // that.gps.latitude = lb.latitude; - // that.gps.longitude = lb.longitude; - - // that.latitude = Number(lb.latitude.toFixed(5)) - 0.005 - // that.longitude = Number(lb.longitude.toFixed(5)) + 0.005 - - + // that.latitude = 23.440359 + // that.longitude = 117.074552 + // that.gps.latitude = 23.440359 + // that.gps.longitude = 117.074552; + + + + that.gps.latitude = lb.latitude; + that.gps.longitude = lb.longitude; + + that.latitude = Number(lb.latitude.toFixed(5)) - 0.005 + that.longitude = Number(lb.longitude.toFixed(5)) + 0.005 + + console.log(that.areaInfo, 'that.areaInfo'); that.getArea() - if (that.qParam!='null'&&that.showagre==false) { + if (that.qParam != 'null' && that.showagre == false) { let qParam = that.qParam - console.log(qParam,'qParamqParamqParam'); + console.log(qParam, 'qParamqParamqParam'); // 第2步: URL解码q参数 let decodedUrl = decodeURIComponent(qParam); @@ -882,16 +907,103 @@ isMeal() { return this.$store.getters.isMeal; }, - + showagre() { return this.$store.getters.showagre; }, }, methods: { + backDevicecar(){ + this.isbackcar=true + }, + gotowzysd() { + uni.navigateToMiniProgram({ + appId: 'wxd7c0bb79b9d616c3', //目标小程序appid + path: '/pages/index/index', //需要打开的目标路径 + extraData: { + 'data1': 'test' + }, + envVersion: 'trial', //小程序版本：develop（开发版），trial（体验版），release（正式版） + success(res) { + // 打开成功 + } + }) + }, + + + onMapRegionChange(event) { + console.log('regionchange', event) + if (event.detail.type == 'end') { + // this.getCenterLanLat() + } + // 你可以在这里执行你需要的操作 + }, + getCenterLanLat() { + let that = this + uni.createMapContext("map", this).getCenterLocation({ + type: 'gcj02', + success: (res) => { + console.log("当前地图中心的经纬度", res) + that.gps.latitude = res.latitude; + that.gps.longitude = res.longitude; + that.getAreas() + //其他逻辑 + }, + fail: (err) => {} + }) + }, + getAreas() { + + this.$u.get('/app/area/info?', this.gps).then((res) => { + this.showmap = true + if (res.code === 200) { + + // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构 + const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr) + // console.log(polylines,'polylinespolylinespolylines'); + // .filter(area => area.boundaryStr) // 过滤掉boundary为空的数据 + // .map(area => this.convertBoundaryToPolyline(area.boundaryStr)); + // 更新折线数据 + this.areaInfo = res.data + this.polyline.push(polylines) + console.log(); + // console.log(this.areaInfo, 'areaInfoareaInfo'); + uni.setStorageSync('areaId', res.data.areaId); + // this.getinfo() + // this.getmarks() + // this.getlist() + this.getParking() + + + + + // this.setMapScale() + // if(!hasShownPopup){ + // console.log(typeof(hasShownPopup),'hasShownPopuphasShownPopup'); + // this.showTips=uni.getStorageSync('hasShownPopup') + // }else{ + // this.showTips=true + // uni.setStorageSync('hasShownPopup', true); + // } + + // this.$store.commit('SET_SHOWTIPS', true); + // console.log(this.polyline); + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }).catch(error => { + console.error("Error fetching area data:", error); + }); + }, + keepback() { let that = this uni.getLocation({ - type: 'wgs84', + type: 'gcj02', success: function(lb) { @@ -927,7 +1039,7 @@ duration: 1000 }); setTimeout(() => { - that.isbackdevice=false + that.isbackdevice = false that.isnoline = true }, 1300) } @@ -950,7 +1062,7 @@ onlinebackDevice() { let that = this uni.getLocation({ - type: 'wgs84', + type: 'gcj02', success: function(lb) { @@ -1093,7 +1205,7 @@ 'isStart': false }); setTimeout(() => { - + if (this.devicesList.length == 0) { uni.showToast({ title: '暂无发现对应设备,请靠近设备', @@ -1124,8 +1236,8 @@ } }); } - - + + }, 200) // 判断是否存在浇花器设备 @@ -1245,7 +1357,7 @@ setTimeout(() => { let that = this uni.getLocation({ - type: 'wgs84', + type: 'gcj02', success: function(lb) { @@ -1345,20 +1457,22 @@ setTimeout(() => { let that = this uni.getLocation({ - type: 'wgs84', + type: 'gcj02', success: function(lb) { - - + + let data = { latitude: lb.latitude, longitude: lb.longitude, areaId: that.areaInfo.areaId } - that.$u.post('/appVerify/device/lock?sn=' + that.OrderdeviceInfos.sn + '&orderNo=' + + that.$u.post('/appVerify/device/lock?sn=' + that.OrderdeviceInfos + .sn + '&orderNo=' + that .orderinfo - .orderNo + '&isBluetooth=true'+ '&lon=' + lb.longitude + '&lat='+lb.latitude).then((res) => { - + .orderNo + '&isBluetooth=true' + '&lon=' + lb.longitude + + '&lat=' + lb.latitude).then((res) => { + if (res.code === 200) { that.getisInOrder() } else { @@ -1375,10 +1489,10 @@ duration: 2000 }); } - + } }) - + }, fail: function(error) { uni.showToast({ @@ -1389,9 +1503,9 @@ // that.getmarks() // 在这里处理获取位置信息失败的情况 } - + }) - + }, 300) } else { uni.showToast({ @@ -1443,12 +1557,11 @@ console.log("连接回调：" + JSON.stringify(options)); if (options.result) { // uni.hideLoading(); - + uni.showToast({ title: '连接成功', icon: 'none' - }); - { + }); { xBlufi.notifyInitBleEsp32({ deviceId: options.data.deviceId @@ -1532,9 +1645,9 @@ deviceId: e.deviceId, name }); - setTimeout(()=>{ + setTimeout(() => { uni.hideLoading() - },3000) + }, 3000) // for (var i = 0; i < this.devicesList.length; i++) { // if (e.deviceId === this.devicesList[i].deviceId) { @@ -1656,7 +1769,7 @@ this.OrderdeviceInfos = res.data // this.OrderdeviceInfos.onlineStatus ='0' - if (this.OrderdeviceInfos.onlineStatus == 0&&this.orderinfo.status != 3) { + if (this.OrderdeviceInfos.onlineStatus == 0 && this.orderinfo.status != 3) { this.mac = this.OrderdeviceInfos.mac if (this.carstause == false) { @@ -1665,22 +1778,22 @@ } // 直接从OrderdeviceInfos对象创建一个新的标记，并标记为设备特定标记 - const newMarker = { - id: parseFloat(this.OrderdeviceInfos.sn), - latitude: parseFloat(this.OrderdeviceInfos.latitude), - longitude: parseFloat(this.OrderdeviceInfos.longitude), - width: 40, - height: 28, - isDeviceMarker: true, // 添加标识属性 - iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7', - }; + // const newMarker = { + // id: parseFloat(this.OrderdeviceInfos.sn), + // latitude: parseFloat(this.OrderdeviceInfos.latitude), + // longitude: parseFloat(this.OrderdeviceInfos.longitude), + // width: 40, + // height: 28, + // isDeviceMarker: true, // 添加标识属性 + // iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7', + // }; - // 保留显示气泡的标记和设备特定标记 - const preservedMarkers = this.markers.filter(marker => marker.isCalloutVisible || marker - .isDeviceMarker); - // 使用单个新标记更新markers数组，如果需要保留之前的标记也可以加入 - this.markers = [newMarker, ...preservedMarkers]; - this.oldMarkers = [...this.markers]; + // // 保留显示气泡的标记和设备特定标记 + // const preservedMarkers = this.markers.filter(marker => marker.isCalloutVisible || marker + // .isDeviceMarker); + // // 使用单个新标记更新markers数组，如果需要保留之前的标记也可以加入 + // this.markers = [newMarker, ...preservedMarkers]; + // this.oldMarkers = [...this.markers]; } else { // 处理接口返回错误的情况 @@ -2006,9 +2119,9 @@ this.freeListIndex = index }, // 无套餐取消预约 - + // 套餐取消预约 - + backDevice() { if (this.OrderdeviceInfos.onlineStatus == 1) { uni.showLoading({ @@ -2231,7 +2344,7 @@ } }) }, - + sub5() { if (this.orderinfo.ruleId) { @@ -2765,7 +2878,7 @@ console.log('点击了标记：', e.markerId); // 这里可以根据需要处理点击标记的逻辑 // 阻止事件冒泡\ - + const markerExists = this.listData.some(item => item.sn == e.markerId); if (markerExists) { @@ -2782,8 +2895,8 @@ } }, - - + + toggleIconAndCallout() { this.showIconAndCallout = !this.showIconAndCallout; if (this.showIconAndCallout) { @@ -2795,7 +2908,11 @@ longitude: parseFloat(item.longitude), width: 20, height: 28.95, - iconPath: item.type == 1 ?'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3':item.type == 2 ?'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq', + iconPath: item.type == 1 ? + 'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item + .type == 2 ? + 'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' : + ' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq', callout: { content: item.parkingName, color: '#ffffff', @@ -2938,7 +3055,7 @@ this.$u.get('/app/area/info?', this.gps).then((res) => { this.showmap = true if (res.code === 200) { - + // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构 const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr) // console.log(polylines,'polylinespolylinespolylines'); @@ -2963,7 +3080,7 @@ if (hasShownPopup === '' || hasShownPopup === null) { console.log('1111111111'); - + this.showTips = true; this.startCountdown(); uni.setStorageSync('hasShownPopup', true); @@ -2972,10 +3089,10 @@ this.showTips = uni.getStorageSync('hasShownPopup'); console.log(this.showTips, 'this.showTips'); this.startCountdown(); - + } - - this.setMapScale() + + // this.setMapScale() // if(!hasShownPopup){ // console.log(typeof(hasShownPopup),'hasShownPopuphasShownPopup'); // this.showTips=uni.getStorageSync('hasShownPopup') @@ -3153,14 +3270,14 @@ // url:'' // }) } else if (num == 1) { - + uni.showLoading({ - + }) if (uni.getStorageSync('token')) { if (this.areaInfo.authentication == 1) { this.$u.get("/getAppInfo").then(res => { - + if (res.code == 200) { this.userinfo = res.user; this.$store.commit('SET_USERID', res.user.userId); @@ -3197,10 +3314,10 @@ }); this.showYjTip = false } - - + + } else { - + let that = this; wx.login({ success(res) { @@ -3224,7 +3341,7 @@ if (res.user.isAuthentication == 0) { uni.hideLoading() that.seeDetail = true; - + uni.navigateTo({ url: "/page_user/idcard_test" }); @@ -3298,12 +3415,12 @@ console.error('微信登录接口调用失败：', err); } }); - - + + this.showYjTip = false - + } - + } else if (num == 2) { uni.navigateTo({ url: '/page_user/jfgz' @@ -3320,9 +3437,9 @@ url: '/page_user/bhks' }) } - + } else if (num == 5) { - + uni.navigateTo({ url: '/page_user/gzsb' }) @@ -3330,7 +3447,7 @@ uni.navigateTo({ url: '/pages/my' }) - + } else if (num == 7) { uni.navigateTo({ url: '/page_user/gzsb?sn=' + this.sn @@ -3347,11 +3464,11 @@ }, deviceInfo(num) { if (uni.getStorageSync('token')) { - + this.$u.get('/app/device/info?sn=' + this.sn).then((res) => { if (res.code === 200) { this.deviceInfos = res.data; - + if (num == 0) { this.showdevice = true; this.type = 0; @@ -3438,12 +3555,12 @@ // uni.hideLoading(); if (res.code == 200) { uni.setStorageSync('token', res.token); - + this.getinfo() this.$u.get('/app/device/info?sn=' + this.sn).then(( res) => { if (res.code === 200) { this.deviceInfos = res.data; - + if (num == 0) { this.showdevice = true; this.type = 0; @@ -3534,15 +3651,15 @@ }); } }); - + } - + } }, }); } }, - + }, } @@ -3613,7 +3730,7 @@ .txts { position: absolute; - left: 150rpx; + left: 300rpx; bottom: 90rpx; font-weight: 500; font-size: 36rpx; @@ -4075,7 +4192,8 @@ .card { - width: 500rpx !important; // 确保宽度被应用 + // max-width: 600rpx !important; // 确保宽度被应用 + width: 450rpx !important; height: 288rpx; margin-right: 20rpx; position: relative; @@ -4098,7 +4216,8 @@ justify-content: center; position: absolute; bottom: 0; - width: 350rpx; + // width: 350rpx; + width: 100%; height: 70rpx; background: #4C97E7; border-radius: 0rpx 0rpx 16rpx 16rpx; @@ -4314,7 +4433,7 @@ margin-top: 18rpx; width: 226rpx; height: 22rpx; - background: #ccc; + background: red; border-radius: 16rpx 16rpx 16rpx 16rpx; .speeds { diff --git a/pages_admin/admin_index.vue b/pages_admin/admin_index.vue index 2db8d80..c9648e2 100644 --- a/pages_admin/admin_index.vue +++ b/pages_admin/admin_index.vue @@ -125,7 +125,7 @@ latitude: 0, longitude: 0, isMap: false, - zoomSize: 15, + zoomSize: 13, markers: [], polyline: [], polygons: [], @@ -135,7 +135,7 @@ infonum: {}, rangeMin: 0, rangMax: 100, - rangeValue: [1, 99], + rangeValue: [1, 100], status0: [], //未上架 status1: [], //正常 status2: [], //预约中 @@ -184,10 +184,10 @@ success: function(lb) { - that.latitude = Number(lb.latitude.toFixed(5)) - 0.005 - that.longitude = Number(lb.longitude.toFixed(5)) + 0.005 + // that.latitude = Number(lb.latitude.toFixed(5)) - 0.005 + // that.longitude = Number(lb.longitude.toFixed(5)) + 0.005 console.log(that.areaInfo, 'that.areaInfo'); - that.setMapScale() + // that.setMapScale() // that.getmarks() @@ -669,6 +669,8 @@ this.$u.get("/app/area/" + id).then((res) => { if (res.code == 200) { + this.latitude =res.data.latitude + this.longitude = res.data.longitude // this.areaInfo = res.data const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr) this.polyline.push(polylines) diff --git a/pages_admin/admin_order.vue b/pages_admin/admin_order.vue index 535c017..62de7bb 100644 --- a/pages_admin/admin_order.vue +++ b/pages_admin/admin_order.vue @@ -86,8 +86,17 @@ - 订单费用：{{item.totalFee}}元 + + 订单费用：{{item.totalFee}}元 + + + + 有无退款：无 + 有 + + + 开关时间：{{item.unlock_time}} {{ item.return_time ? item.return_time : '--' }} @@ -284,9 +293,17 @@ 租赁时长：{{computedList(item)}} - + + 订单费用：{{item.totalFee}}元 + + + 有无退款：无 + 有 + + + 开关时间：{{item.unlock_time}} {{ item.return_time ? item.return_time : '--' }} diff --git a/pages_admin/admin_worke.vue b/pages_admin/admin_worke.vue index 7e7eaff..f5795e1 100644 --- a/pages_admin/admin_worke.vue +++ b/pages_admin/admin_worke.vue @@ -1,7 +1,10 @@ @@ -59,7 +62,11 @@ bgc: { backgroundColor: "#FFFFFF", }, - sn:'' + sn:'', + areaId:0, + areaInfo:{}, + list: [], + show: false } }, @@ -68,6 +75,11 @@ // 执行其他操作... }); + if(uni.getStorageSync('adminAreaid')){ + this.areaId = uni.getStorageSync('adminAreaid') + this.getArea() + this.getareaList() + } }, computed: { @@ -76,6 +88,51 @@ }, }, methods: { + shows(){ + + if(this.list.length<2){ + + }else{ + this.show =true + } + }, + getareaList(){ + + + this.$u.get('/appVerify/getAreaList').then((res) => { + if(res.code==200){ + this.list = res.data.map(item => ({ + value: item.areaId, + label: item.areaName + })); + } + }).catch(error => { + console.error("Error fetching area data:", error); + }); + }, + confirm(e){ + // console.log(e); + uni.setStorageSync('adminAreaid', e[0].value); + + + + }, + getArea() { + + let id = this.areaId + this.$u.get("/app/area/" + id).then((res) => { + + if (res.code == 200) { + this.areaInfo=res.data + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + duration: 2000 + }); + } + }); + }, topage(num){ if(num==0){ uni.navigateTo({ @@ -146,7 +203,11 @@ .page { width: 750rpx; - + .toptit{ + margin-top: 100rpx; + margin-left: 100rpx; + font-size: 38rpx; + } .cont_box{ padding: 46rpx 50rpx; margin: 68rpx auto; diff --git a/pages_admin/order/device_detail.vue b/pages_admin/order/device_detail.vue index 0d0da07..9700666 100644 --- a/pages_admin/order/device_detail.vue +++ b/pages_admin/order/device_detail.vue @@ -6,21 +6,22 @@ --> - - + :show-location="true" :markers="markers" :polygons="polyline"> + + - - - + + + 设备信息 - - + + 车牌号：{{deviceInfos.vehicleNum}} @@ -45,11 +46,11 @@ {{deviceInfos.areaName}} -- - + - + 车辆状态：{{status()}} @@ -58,7 +59,7 @@ 续航里程： {{deviceInfos.remainingMileage}} KM -- - + @@ -68,12 +69,12 @@ -- - - - - - + + - 最后定位坐标 + 最后定位坐标： {{deviceInfos.latitude}},{{deviceInfos.longitude}} -- @@ -105,21 +106,21 @@ - + - 订单信息 + 最后订单信息 - - + + - 当前用户： + 最后用户： {{deviceInfos.etOrders[0].phonenumber}} -- - 当前订单编号： + 最后订单编号： {{deviceInfos.etOrders[0].orderNo}} -- @@ -128,34 +129,41 @@ {{deviceInfos.etOrders[0].createTime}} -- + + + + 订单状态：{{statuss()}} + + + 开锁 - + 关锁 - + 车辆禁用 - + 车辆解禁 - + 响铃寻车 - + 蓝牙链接 - + 蓝牙开锁 - + 蓝牙关锁 - + 设备重启 @@ -171,22 +179,18 @@ 修改车牌号 - + - 车牌号 + 车牌号 - - 元 + + 元 - + @@ -236,16 +240,16 @@ name: '', orderinfo: {}, dl: 0, - czmoney:true, - iscz:true, - - - + czmoney: true, + iscz: true, + + + bgc: { backgroundColor: "#F7FAFE", }, - show:true, - showgj:true, + show: true, + showgj: true, searchKeyword: '11', latitude: 39.916527, longitude: 116.397128, @@ -255,20 +259,20 @@ polyline: [], polygons: [], cardId: '001区域', - sn:'', - deviceInfos:{}, - carstause:false - - - + sn: '', + deviceInfos: {}, + carstause: false + + + } }, onLoad(e) { - this.sn=e.id + this.sn = e.id this.deviceInfo() - this.getArea() - + + }, onUnload: function() { xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent); @@ -276,27 +280,44 @@ 'isStart': false }); }, - onHide(){ + onHide() { xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent); xBlufi.notifyStartDiscoverBle({ 'isStart': false }); }, - onBeforeUnmount(){ + onBeforeUnmount() { xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent); xBlufi.notifyStartDiscoverBle({ 'isStart': false }); }, watch: { - - - + + + }, methods: { - Binddevice(){ + + statuss() { + if (this.deviceInfos.etOrders[0] != '') { + if (this.deviceInfos.etOrders[0].status == 0) { + return '预约中' + } else if (this.deviceInfos.etOrders[0].status == 1) { + return '取消预约' + } else if (this.deviceInfos.etOrders[0].status == 2) { + return '骑行中' + } else if (this.deviceInfos.etOrders[0].status == 3) { + return '骑行结束' + } else if (this.deviceInfos.etOrders[0].status == 4) { + return '订单完成' + } + } + + }, + Binddevice() { uni.showLoading({ - title:'连接中..' + title: '连接中..' }) xBlufi.initXBlufi(1); console.log("xBlufi", xBlufi.XMQTT_SYSTEM); @@ -304,14 +325,14 @@ xBlufi.notifyStartDiscoverBle({ 'isStart': true }); - - + + // 两秒后停止蓝牙搜索 setTimeout(() => { xBlufi.notifyStartDiscoverBle({ 'isStart': false }); - setTimeout(()=>{ + setTimeout(() => { uni.hideLoading() if (this.devicesList.length == 0) { uni.showToast({ @@ -320,14 +341,14 @@ }); } else { let uniqueDevicesList = Array.from(new Set(this.devicesList)); - + // 将去重后的数组重新赋值给 this.devicesList this.devicesList = uniqueDevicesList; - console.log(this.devicesList,'this.devicesListthis.devicesList'); + console.log(this.devicesList, 'this.devicesListthis.devicesList'); this.devicesList.forEach(device => { // 从设备名称中提取 MAC 地址（假设 MAC 地址是设备名称的后6个字符） let macFromName = device.name.substring(device.name.length - 12); - console.log(macFromName,'macFromNamemacFromName'); + console.log(macFromName, 'macFromNamemacFromName'); // 与 this.mac 进行比较 if (macFromName == this.mac) { // 如果相同，则将 this.ishave 设置为 true @@ -335,22 +356,22 @@ this.deviceInfoss = device // this.ishave = true; this.createBLEConnection(device) - + console.log('对比正确1111111111'); } else { console.log('对比错误'); - + } }); } - },200) + }, 200) // 判断是否存在浇花器设备 - + // this.status = true }, 2000) - + }, - reboot(){ + reboot() { let vm = this; // 将外部的 this 绑定到 vm 上 uni.getNetworkType({ success(res) { @@ -366,7 +387,7 @@ // vm.remakr() }, fail(err) { - uni.hideLoading() + uni.hideLoading() console.error('获取已连接蓝牙设备信息失败：', err); } }); @@ -376,7 +397,7 @@ } }); }, - open(){ + open() { let vm = this; // 将外部的 this 绑定到 vm 上 uni.getNetworkType({ success(res) { @@ -392,7 +413,7 @@ // vm.remakr() }, fail(err) { - uni.hideLoading() + uni.hideLoading() console.error('获取已连接蓝牙设备信息失败：', err); } }); @@ -402,7 +423,7 @@ } }); }, - close(){ + close() { let vm = this; // 将外部的 this 绑定到 vm 上 uni.getNetworkType({ success(res) { @@ -418,7 +439,7 @@ // vm.remakr() }, fail(err) { - uni.hideLoading() + uni.hideLoading() console.error('获取已连接蓝牙设备信息失败：', err); } }); @@ -428,36 +449,36 @@ } }); }, - + btnyc() { this.titleflag = false }, - + // 解析自定义数据 - + funListenDeviceMsgEvent: function(options) { switch (options.type) { case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS: if (options.result) { let devicesarr = options.data // this.devicesList = options.data - + devicesarr.forEach(device => { - - - // this.$u.get(`/app/device/${mac}/isBind`, data).then((res) => { - // if (res.data == false) { - this.devicesList.push(device); - - let uniqueDevicesList = Array.from(new Set(this.devicesList)); - - // 将去重后的数组重新赋值给 this.devicesList - this.devicesList = uniqueDevicesList; - + + + // this.$u.get(`/app/device/${mac}/isBind`, data).then((res) => { + // if (res.data == false) { + this.devicesList.push(device); + + let uniqueDevicesList = Array.from(new Set(this.devicesList)); + + // 将去重后的数组重新赋值给 this.devicesList + this.devicesList = uniqueDevicesList; + }); } break; - + case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED: console.log("连接回调：" + JSON.stringify(options)); if (options.result) { @@ -466,13 +487,13 @@ title: '连接成功', icon: 'none' }); { - + xBlufi.notifyInitBleEsp32({ deviceId: options.data.deviceId }); - + xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvents); - + this.deviceIds = options.data.deviceId this.name = options.data.name // 连接成功绑定设备 @@ -483,7 +504,7 @@ let systemInfo = uni.getSystemInfoSync(); if (systemInfo.platform === 'android') { // 当前设备是 Android - + } else if (systemInfo.platform === 'ios') { // 当前设备是 iOS // uni.navigateTo({ @@ -493,27 +514,27 @@ } } } - + break; case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA: - + // this.ver_data = this.parseCustomData(options.data) - if(options.data){ - this.carstause=true + if (options.data) { + this.carstause = true } // console.log("1收到设备发来的自定义数据结果：", this.ver_data); break; case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP: if (options.result) { let uniqueDevicesList = Array.from(new Set(this.devicesList)); - + // 过滤出名称字段的前五个字母为 "CTPOW" 的项 let filteredDevices = uniqueDevicesList.filter(device => device.name.substring(0, 4) === "BBLE"); - + // 将过滤后的数组重新赋值给 this.devicesList this.devicesList = filteredDevices; - + // console.log('蓝牙停止搜索ok',this.devicesList); } else { //蓝牙停止搜索失败 @@ -523,12 +544,11 @@ // _this.setData({ // searching: false // }); - + break; } }, - - + //4、建立连接 createBLEConnection(e) { console.log('调用了'); @@ -548,7 +568,7 @@ }); // for (var i = 0; i < this.devicesList.length; i++) { // if (e.deviceId === this.devicesList[i].deviceId) { - + // uni.showLoading({ // title: '连接蓝牙设备中...' // }); @@ -592,16 +612,16 @@ } }, 2000) } - - + + }, funListenDeviceMsgEvents: function(options) { let that = this; switch (options.type) { case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: { console.log('状态', options.result) - if( options.result==false){ - this.carstause=false + if (options.result == false) { + this.carstause = false uni.showToast({ title: '设备断开链接，请重新点击蓝牙链接', icon: 'none' @@ -617,11 +637,11 @@ // } // }); // this.statusflag = false - uni.hideLoading(); + uni.hideLoading(); } } break; - + case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA: this.loadPercent = options.data; this.loadText = '文件读取中' @@ -631,19 +651,19 @@ // this.isband = true // this.ver_data = this.parseCustomData(options.data) console.log("1收到设备发来的自定义数据结果：", options.data); - if(options.data){ - this.carstause=true + if (options.data) { + this.carstause = true } break; - + case xBlufi.XBLUFI_TYPE.TYPE_INIT_ESP32_RESULT: uni.hideLoading(); if (options.result) { console.log('初始化成功'); } else { console.log('初始化失败'); - - + + } break; } @@ -653,9 +673,9 @@ this.tishiflag = false }, - btn(num){ - if(num==0){ - this.$u.post('/appVerify/admin/unlocking?sn='+this.sn).then((res) => { + btn(num) { + if (num == 0) { + this.$u.post('/appVerify/admin/unlocking?sn=' + this.sn).then((res) => { if (res.code === 200) { // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构 this.deviceInfo() @@ -663,8 +683,8 @@ }).catch(error => { console.error("Error fetching area data:", error); }); - }else if(num==1){ - this.$u.post('/appVerify/admin/lock?sn='+this.sn).then((res) => { + } else if (num == 1) { + this.$u.post('/appVerify/admin/lock?sn=' + this.sn).then((res) => { if (res.code === 200) { // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构 this.deviceInfo() @@ -672,8 +692,8 @@ }).catch(error => { console.error("Error fetching area data:", error); }); - }else if(num==2){ - this.$u.post('/appVerify/device/offline?sn='+this.sn).then((res) => { + } else if (num == 2) { + this.$u.post('/appVerify/device/offline?sn=' + this.sn).then((res) => { if (res.code === 200) { // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构 this.deviceInfo() @@ -681,8 +701,8 @@ }).catch(error => { console.error("Error fetching area data:", error); }); - }else if(num==3){ - this.$u.post('/appVerify/device/online?sn='+this.sn).then((res) => { + } else if (num == 3) { + this.$u.post('/appVerify/device/online?sn=' + this.sn).then((res) => { if (res.code === 200) { // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构 this.deviceInfo() @@ -690,41 +710,42 @@ }).catch(error => { console.error("Error fetching area data:", error); }); - }else if(num==4){ + } else if (num == 4) { this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => { if (res.code === 200) { - + } }) } }, - status(){ - if(this.deviceInfos.onlineStatus==0){ + status() { + if (this.deviceInfos.onlineStatus == 0) { return '离线' - }else{ - if(this.deviceInfos.status==0){ + } else { + if (this.deviceInfos.status == 0) { return '未上架' - }else if(this.deviceInfos.status==1){ + } else if (this.deviceInfos.status == 1) { return '待租' - }else if(this.deviceInfos.status==2){ + } else if (this.deviceInfos.status == 2) { return '预约中' - }else if(this.deviceInfos.status==3){ + } else if (this.deviceInfos.status == 3) { return '骑行中' - }else if(this.deviceInfos.status==4){ + } else if (this.deviceInfos.status == 4) { return '临时锁车中' - }else if(this.deviceInfos.status==8){ + } else if (this.deviceInfos.status == 8) { return '下线' } } - + }, deviceInfo() { this.$u.get('/app/device/info?sn=' + this.sn).then((res) => { if (res.code === 200) { this.deviceInfos = res.data - this.mac=res.data.mac - this.latitude= parseFloat(this.deviceInfos.latitude) - this.longitude= parseFloat(this.deviceInfos.longitude ) + this.mac = res.data.mac + this.latitude = parseFloat(this.deviceInfos.latitude) + this.longitude = parseFloat(this.deviceInfos.longitude) + this.getArea() if (this.deviceInfos.status == 0) { this.markers.push({ id: parseFloat(this.deviceInfos.sn), @@ -743,12 +764,12 @@ padding: 6, // 修改为气泡内边距 display: 'ALWAYS', // 修改为气泡的显示策略 } - }) + }) } else if (this.deviceInfos.status == 1) { this.markers.push({ - id: parseFloat(this.deviceInfos.sn), - latitude: parseFloat(this.deviceInfos.latitude), - longitude: parseFloat(this.deviceInfos.longitude), + id: parseFloat(this.deviceInfos.sn), + latitude: parseFloat(this.deviceInfos.latitude), + longitude: parseFloat(this.deviceInfos.longitude), // title: item.deviceName, width: 40, height: 40, @@ -784,9 +805,9 @@ }) } else if (this.deviceInfos.status == 3) { this.markers.push({ - id: parseFloat(this.deviceInfos.sn), - latitude: parseFloat(this.deviceInfos.latitude), - longitude: parseFloat(this.deviceInfos.longitude), + id: parseFloat(this.deviceInfos.sn), + latitude: parseFloat(this.deviceInfos.latitude), + longitude: parseFloat(this.deviceInfos.longitude), // title: item.deviceName, width: 40, height: 40, @@ -803,9 +824,9 @@ }) } else if (this.deviceInfos.status == 4) { this.markers.push({ - id: parseFloat(this.deviceInfos.sn), - latitude: parseFloat(this.deviceInfos.latitude), - longitude: parseFloat(this.deviceInfos.longitude), + id: parseFloat(this.deviceInfos.sn), + latitude: parseFloat(this.deviceInfos.latitude), + longitude: parseFloat(this.deviceInfos.longitude), // title: item.deviceName, width: 40, height: 40, @@ -822,9 +843,9 @@ }) } else if (this.deviceInfos.status == 8) { this.markers.push({ - id: parseFloat(this.deviceInfos.sn), - latitude: parseFloat(this.deviceInfos.latitude), - longitude: parseFloat(this.deviceInfos.longitude), + id: parseFloat(this.deviceInfos.sn), + latitude: parseFloat(this.deviceInfos.latitude), + longitude: parseFloat(this.deviceInfos.longitude), // title: item.deviceName, width: 40, height: 40, @@ -860,18 +881,18 @@ } }) } - + } }) }, convertBoundaryToPolyline(boundary) { if (!boundary) return null; - + const points = JSON.parse(boundary).map(coord => ({ latitude: coord[1], longitude: coord[0] })); - + const polyline = { points: points, fillColor: "#55888840", //填充颜色 @@ -879,11 +900,11 @@ strokeWidth: 2, //描边宽度 zIndex: 1, //层级 }; - + return polyline; }, - convertBoundaryToPolylines(boundaries,num) { - if(num==1){ + convertBoundaryToPolylines(boundaries, num) { + if (num == 1) { console.log('判断'); return boundaries.map(boundary => { if (!boundary) return null; @@ -908,10 +929,10 @@ strokeColor: "#3A7EDB", //描边颜色 strokeWidth: 2, //描边宽度 zIndex: 1, //层级 - + }; }).filter(polyline => polyline !== null); // 过滤掉无效的折线数据 - }else if(num==2){ + } else if (num == 2) { return boundaries.map(boundary => { if (!boundary) return null; let coords; @@ -935,10 +956,10 @@ strokeColor: "#FFC107", //描边颜色 strokeWidth: 2, //描边宽度 zIndex: 1, //层级 - + }; }).filter(polyline => polyline !== null); // 过滤掉无效的折线数据 - }else if(num==3){ + } else if (num == 3) { return boundaries.map(boundary => { if (!boundary) return null; let coords; @@ -962,11 +983,11 @@ strokeColor: "#FF473E", //描边颜色 strokeWidth: 2, //描边宽度 zIndex: 1, //层级 - + }; }).filter(polyline => polyline !== null); // 过滤掉无效的折线数据 } - + }, toggleIconAndCallout() { this.showIconAndCallout = !this.showIconAndCallout; @@ -979,7 +1000,11 @@ longitude: parseFloat(item.longitude), width: 20, height: 28.95, - iconPath: item.type == 1 ?'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3':item.type == 2 ?'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq', + iconPath: item.type == 1 ? + 'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item + .type == 2 ? + 'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' : + ' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq', callout: { content: item.parkingName, color: '#ffffff', @@ -998,17 +1023,21 @@ // 过滤掉所有气泡显示的标记 this.$set(this, 'markers', this.markers.filter(marker => !marker.isCalloutVisible)); } - + }, + getParking() { // 发送请求获取数据 - this.$u.get('/app/parking/list').then((res) => { + let data = { + areaId: this.deviceInfos.areaId + } + this.$u.get('/app/parking/list?', data).then((res) => { if (res.code === 200) { // 处理接口返回的数据 const type1Data = []; const type2Data = []; const type3Data = []; - + res.rows.forEach(row => { if (row.type == 1) { type1Data.push(row); @@ -1020,23 +1049,23 @@ }); const validBoundaries = type1Data.map(row => row.boundaryStr).filter(boundary => typeof boundary === 'string' && boundary.trim() !== ''); - const polylines = this.convertBoundaryToPolylines(validBoundaries,1); - - + const polylines = this.convertBoundaryToPolylines(validBoundaries, 1); + + const validBoundaries1 = type2Data.map(row => row.boundaryStr).filter(boundary => typeof boundary === 'string' && boundary.trim() !== ''); - const polylines1 = this.convertBoundaryToPolylines(validBoundaries1,2); - + const polylines1 = this.convertBoundaryToPolylines(validBoundaries1, 2); + const validBoundaries2 = type3Data.map(row => row.boundaryStr).filter(boundary => typeof boundary === 'string' && boundary.trim() !== ''); - const polylines2 = this.convertBoundaryToPolylines(validBoundaries2,3); + const polylines2 = this.convertBoundaryToPolylines(validBoundaries2, 3); // 将处理后的数据添加到 this.polyline 中 - this.polyline = this.polyline.concat(polylines2); + this.polyline = this.polyline.concat(polylines2); this.polyline = this.polyline.concat(polylines1); this.polyline = this.polyline.concat(polylines); this.parkingList = res.rows // console.log(this.polyline); - + } }).catch(error => { console.error("Error fetching parking data:", error); @@ -1044,16 +1073,16 @@ }, getArea() { // 发送请求获取数据 - this.$u.get('/app/area/list').then((res) => { + + let id = this.deviceInfos.areaId + this.$u.get("/app/area/" + id).then((res) => { if (res.code === 200) { // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构 - const polylines = res.rows - .filter(area => area.boundaryStr) // 过滤掉boundary为空的数据 - .map(area => this.convertBoundaryToPolyline(area.boundaryStr)); + const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr) // 更新折线数据 - this.polyline = polylines; + this.polyline.push(polylines) // console.log(this.polyline); - this.getParking() + this.getParking() } }).catch(error => { console.error("Error fetching area data:", error); @@ -1077,6 +1106,7 @@ position: relative; width: 750rpx; height: 752rpx; + .park { position: absolute; display: flex; @@ -1089,14 +1119,14 @@ width: 82rpx; height: 82rpx; z-index: 10; - + .img { width: 82rpx; height: 82rpx; } } } - + .tip_box { position: fixed; left: 72rpx; @@ -1107,20 +1137,24 @@ border-radius: 30rpx 30rpx 30rpx 30rpx; z-index: 110; padding-bottom: 100rpx; + .top { padding: 52rpx 38rpx 42rpx 36rpx; - .ipt_box{ + + .ipt_box { margin-top: 22rpx; display: flex; flex-wrap: nowrap; align-items: center; - .text{ + + .text { width: 96rpx; font-weight: 400; font-size: 32rpx; color: #3D3D3D; } - .ipt{ + + .ipt { padding: 10rpx 18rpx; display: flex; align-items: center; @@ -1130,18 +1164,21 @@ height: 64rpx; border-radius: 0rpx 0rpx 0rpx 0rpx; border: 2rpx solid #979797; - .input{ + + .input { width: 80%; } } } - .tip{ + + .tip { width: 100%; text-align: center; font-weight: 700; font-size: 32rpx; color: #3D3D3D; } + .txt { margin-top: 32rpx; width: 100%; @@ -1151,16 +1188,17 @@ color: #3D3D3D; } } - + .bot { position: absolute; - + width: 610rpx; // border-top: 2rpx solid #D8D8D8; display: flex; flex-wrap: nowrap; // height: 100%; bottom: -20rpx; + .bot_left { border-radius: 0rpx 0rpx 0rpx 30rpx; width: 50%; @@ -1173,9 +1211,9 @@ color: #3D3D3D; background: #EEEEEE; } - + .bot_right { - border-radius: 0rpx 0rpx 30rpx 0rpx; + border-radius: 0rpx 0rpx 30rpx 0rpx; width: 50%; height: 86rpx; background: #4C97E7; @@ -1187,12 +1225,13 @@ font-weight: 500; font-size: 32rpx; // color: #4C97E7; - + } - + } } - .bot_btn{ + + .bot_btn { position: fixed; bottom: 0; display: flex; @@ -1202,12 +1241,14 @@ // height: 230rpx; background: #fff; // background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); - box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08); + box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08); border-radius: 0rpx 0rpx 0rpx 0rpx; + .btn:nth-child(4n) { - margin-right: 0; + margin-right: 0; } - .btn{ + + .btn { margin-top: 10rpx; margin-right: 18rpx; display: flex; @@ -1223,6 +1264,7 @@ color: #3D3D3D; } } + .info_card { background: #FFFFFF; @@ -1262,6 +1304,7 @@ span { color: #3D3D3D; } + white-space: nowrap; /* 禁止换行 */ overflow: hidden; @@ -1271,8 +1314,8 @@ line-height: 48rpx; .half_infoli { - display: flex; - flex-wrap: nowrap; + display: flex; + flex-wrap: nowrap; width: 50%; font-weight: 400; font-size: 28rpx; @@ -1281,7 +1324,8 @@ span { color: #3D3D3D; } - .input{ + + .input { width: 30%; } } @@ -1289,6 +1333,6 @@ } } - + } \ No newline at end of file diff --git a/pages_admin/order/order_detail.vue b/pages_admin/order/order_detail.vue index cb3451a..e34c827 100644 --- a/pages_admin/order/order_detail.vue +++ b/pages_admin/order/order_detail.vue @@ -3,7 +3,12 @@ + :show-location='true' :markers="markers" :polygons="polygons" :polyline="polyline"> + + + + 基本信息 @@ -36,9 +41,7 @@ 行驶距离：{{orderInfo.distance/1000}}Km - - 订单状态：{{status()}} - + @@ -211,9 +214,9 @@ width: 8, arrowLine: true, color: '#00AF99' - // strokeWidth: 2, - // strokeColor: '#00AF99', - // fillColor: '#00AF99' + // strokeWidth: 2, + // strokeColor: '#00AF99', + // fillColor: '#00AF99' }, ], polygons: [], @@ -236,53 +239,91 @@ }, methods: { - callPhone(){ + toggleIconAndCallout() { + this.showIconAndCallout = !this.showIconAndCallout; + if (this.showIconAndCallout) { + const newMarkers = []; + this.parkingList.forEach(item => { + newMarkers.push({ + id: parseFloat(item.parkingId), + latitude: parseFloat(item.latitude), + longitude: parseFloat(item.longitude), + width: 20, + height: 28.95, + iconPath: item.type == 1 ? + 'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item + .type == 2 ? + 'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' : + ' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq', + callout: { + content: item.parkingName, + color: '#ffffff', + fontSize: 14, + borderRadius: 10, + bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' : + '#FF473E', + padding: 6, + display: 'ALWAYS' + }, + isCalloutVisible: true // 添加标记 + }); + }); + this.$set(this, 'markers', [...this.markers, ...newMarkers]); + } else { + // 过滤掉所有气泡显示的标记 + this.$set(this, 'markers', this.markers.filter(marker => !marker.isCalloutVisible)); + } + + }, + + + callPhone() { uni.makePhoneCall({ - phoneNumber:this.orderInfo.phonenumber + phoneNumber: this.orderInfo.phonenumber }) }, computedList(item) { - if(item.status==0||item.status==2){ - const createTime = new Date(item.createTime); - const payTime = Date.now(); - const timeDifference = Math.abs(createTime - payTime); - - const hours = Math.floor(timeDifference / (1000 * 60 * 60)); - const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)); - const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000); - - let result = ''; - if (hours > 0) { - result += `${hours}小时`; - } - if (minutes > 0 || hours > 0) { // 显示分钟条件：有小时或者有分钟 - result += `${minutes}分`; - } - // result += `${seconds}秒`; // 始终显示秒 - - return result; - }else{ + if (item.status == 0 || item.status == 2) { const createTime = new Date(item.createTime); - const payTime = new Date(item.returnTime); - const timeDifference = Math.abs(createTime - payTime); - - const hours = Math.floor(timeDifference / (1000 * 60 * 60)); - const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)); - const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000); - - let result = ''; - if (hours > 0) { - result += `${hours}小时`; - } - if (minutes > 0 || hours > 0) { // 显示分钟条件：有小时或者有分钟 - result += `${minutes}分`; - } - // result += `${seconds}秒`; // 始终显示秒 - - return result; - + const payTime = Date.now(); + const timeDifference = Math.abs(createTime - payTime); + + const hours = Math.floor(timeDifference / (1000 * 60 * 60)); + const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000); + + let result = ''; + if (hours > 0) { + result += `${hours}小时`; + } + if (minutes > 0 || hours > 0) { // 显示分钟条件：有小时或者有分钟 + result += `${minutes}分`; + } + // result += `${seconds}秒`; // 始终显示秒 + + return result; + } else { + const createTime = new Date(item.createTime); + const payTime = new Date(item.returnTime); + const timeDifference = Math.abs(createTime - payTime); + + const hours = Math.floor(timeDifference / (1000 * 60 * 60)); + const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000); + + let result = ''; + if (hours > 0) { + result += `${hours}小时`; + } + if (minutes > 0 || hours > 0) { // 显示分钟条件：有小时或者有分钟 + result += `${minutes}分`; + } + // result += `${seconds}秒`; // 始终显示秒 + + return result; + } - + }, convertBoundaryToPolyline(boundary) { if (!boundary) return null; @@ -302,7 +343,7 @@ return polyline; }, - + convertBoundaryToPolylines(boundaries, num) { if (num == 1) { console.log('判断'); @@ -391,7 +432,11 @@ }, getParking() { // 发送请求获取数据 - this.$u.get('/app/parking/list').then((res) => { + + let data = { + areaId: this.orderInfo.areaId + } + this.$u.get('/app/parking/list?', data).then((res) => { if (res.code === 200) { // 处理接口返回的数据 const type1Data = []; @@ -425,79 +470,22 @@ this.polygons = this.polygons.concat(polylines); // console.log(this.polyline); - res.rows.forEach(item => { - if(item.type==1){ - this.markers.push({ - id: parseFloat(item.parkingId), - latitude: parseFloat(item.latitude), - longitude: parseFloat(item.longitude), - width: 20, - height: 40, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne', - callout: { - content: item.parkingName, // 修改为你想要显示的文字内容 - color: '#ffffff', // 修改为文字颜色 - fontSize: 14, // 修改为文字大小 - borderRadius: 10, // 修改为气泡圆角大小 - bgColor: '#3A7EDB', // 修改为气泡背景颜色 - padding: 6, // 修改为气泡内边距 - display: 'ALWAYS' // 修改为气泡的显示策略 - } - }); - }else if(item.type==2){ - this.markers.push({ - id: parseFloat(item.parkingId), - latitude: parseFloat(item.latitude), - longitude: parseFloat(item.longitude), - width: 20, - height: 40, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne', - callout: { - content: item.parkingName, // 修改为你想要显示的文字内容 - color: '#ffffff', // 修改为文字颜色 - fontSize: 14, // 修改为文字大小 - borderRadius: 10, // 修改为气泡圆角大小 - bgColor: '#FFC107', // 修改为气泡背景颜色 - padding: 6, // 修改为气泡内边距 - display: 'ALWAYS' // 修改为气泡的显示策略 - } - }); - }else if(item.type==3){ - this.markers.push({ - id: parseFloat(item.parkingId), - latitude: parseFloat(item.latitude), - longitude: parseFloat(item.longitude), - width: 20, - height: 40, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne', - callout: { - content: item.parkingName, // 修改为你想要显示的文字内容 - color: '#ffffff', // 修改为文字颜色 - fontSize: 14, // 修改为文字大小 - borderRadius: 10, // 修改为气泡圆角大小 - bgColor: '#FF473E', // 修改为气泡背景颜色 - padding: 6, // 修改为气泡内边距 - display: 'ALWAYS' // 修改为气泡的显示策略 - } - }); - } - }) + this.parkingList = res.rows } }).catch(error => { console.error("Error fetching parking data:", error); }); }, - + getArea() { // 发送请求获取数据 - this.$u.get('/app/area/list').then((res) => { + let id = this.orderInfo.areaId + this.$u.get("/app/area/" + id).then((res) => { if (res.code === 200) { // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构 - const polylines = res.rows - .filter(area => area.boundaryStr) // 过滤掉boundary为空的数据 - .map(area => this.convertBoundaryToPolyline(area.boundaryStr)); + const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr) // 更新折线数据 - this.polygons = polylines; + this.polygons.push(polylines) this.getParking() // console.log(this.polyline); } @@ -526,6 +514,8 @@ if (res.code === 200) { // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构 this.orderInfo = res.data + this.getArea() + this.loading = true this.latitude = parseFloat(this.orderInfo.latitude) this.longitude = parseFloat(this.orderInfo.longitude) @@ -535,36 +525,35 @@ })); let abb; try { - abb = JSON.parse(res.data.tripRouteStr); + abb = JSON.parse(res.data.tripRouteStr); } catch (error) { - console.error("Error parsing tripRouteStr:", error); - return; + console.error("Error parsing tripRouteStr:", error); + return; } if (abb.length > 2) { - this.latitude = parseFloat(abb[0][1]); - this.longitude = parseFloat(abb[0][0]); - this.polyline[0].points = abb.map(coord => ({ - latitude: coord[1], - longitude: coord[0] - })); - this.markers.push({ - id: 0, - latitude: abb[0][1], - longitude: abb[0][0], - width: 25, - height: 38, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u06paUGiHLvL08Pw7BGr' - }, { - id: 1, - latitude: abb[abb.length - 1][1], - longitude: abb[abb.length - 1][0], - width: 25, - height: 38, - iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uwpAj9vYtPRmhtTOtflx' - }); + this.latitude = parseFloat(abb[0][1]); + this.longitude = parseFloat(abb[0][0]); + this.polyline[0].points = abb.map(coord => ({ + latitude: coord[1], + longitude: coord[0] + })); + this.markers.push({ + id: 0, + latitude: abb[0][1], + longitude: abb[0][0], + width: 25, + height: 38, + iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u06paUGiHLvL08Pw7BGr' + }, { + id: 1, + latitude: abb[abb.length - 1][1], + longitude: abb[abb.length - 1][0], + width: 25, + height: 38, + iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uwpAj9vYtPRmhtTOtflx' + }); } } - this.getArea() // console.log(points,''); // this.polyline[0].points=points @@ -585,6 +574,7 @@ .page { padding-bottom: 200rpx; width: 750rpx; + .tip_box { position: fixed; left: 72rpx; @@ -595,23 +585,23 @@ border-radius: 30rpx 30rpx 30rpx 30rpx; z-index: 110; padding-bottom: 100rpx; - + .top { padding: 52rpx 38rpx 42rpx 36rpx; - + .ipt_box { margin-top: 22rpx; display: flex; flex-wrap: nowrap; align-items: center; - + .text { width: 96rpx; font-weight: 400; font-size: 32rpx; color: #3D3D3D; } - + .ipt { padding: 10rpx 18rpx; display: flex; @@ -622,13 +612,13 @@ height: 64rpx; border-radius: 0rpx 0rpx 0rpx 0rpx; border: 2rpx solid #979797; - + .input { width: 80%; } } } - + .tip { width: 100%; text-align: center; @@ -636,7 +626,7 @@ font-size: 32rpx; color: #3D3D3D; } - + .txt { margin-top: 32rpx; width: 100%; @@ -646,17 +636,17 @@ color: #3D3D3D; } } - + .bot { position: absolute; - + width: 610rpx; // border-top: 2rpx solid #D8D8D8; display: flex; flex-wrap: nowrap; // height: 100%; bottom: -20rpx; - + .bot_left { border-radius: 0rpx 0rpx 0rpx 30rpx; width: 50%; @@ -669,7 +659,7 @@ color: #3D3D3D; background: #EEEEEE; } - + .bot_right { border-radius: 0rpx 0rpx 30rpx 0rpx; width: 50%; @@ -683,16 +673,35 @@ font-weight: 500; font-size: 32rpx; // color: #4C97E7; - + } - + } } - - + + .map { + position: relative; width: 750rpx; height: 752rpx; + .park { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + right: 30rpx; + bottom: 40rpx; + // background-color: #fff; + border-radius: 50%; + width: 82rpx; + height: 82rpx; + z-index: 10; + + .img { + width: 82rpx; + height: 82rpx; + } + } } .info_card { @@ -771,6 +780,7 @@ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; + .text { display: inline; // width: 70%;