复制代码 <template> <view class="page"> <u-navbar title="地图" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36' height='45'></u-navbar> <map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude" :show-location="true" :markers="markers" :polygons="polyline" @markertap="onMarkerTap"> </map> <view class="bot"> <view class="btn" @click="topage()"> 维修换电 </view> <view class="info"> <view class="cont"> <view class="cont_top"> 全部工单 </view> <view class="cont_bot"> {{infonum.allNum}} </view> </view> <view class="cont"> <view class="cont_top"> 待换电 </view> <view class="cont_bot"> {{infonum.powerReplacementNum}} </view> </view> <view class="cont"> <view class="cont_top"> 待维修 </view> <view class="cont_bot"> {{infonum.repairNum}} </view> </view> </view> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#F7FAFE", }, latitude: '26.940805', longitude: '120.356157', isMap: false, zoomSize: 15, markers: [], polyline: [], polygons: [], fixdata: [], eledata: [], listData: [], infonum: {} } }, onShow() { this.$store.dispatch('userInfo', this.$u).then(() => { // 执行其他操作... }); this.getArea() this.getordernum() }, computed: { userId() { return this.$store.getters.userId; }, }, methods: { onMarkerTap(e) { console.log('点击了标记:', e); this.sn = e.detail.markerId; this.todetail(); }, todetail() { uni.navigateTo({ url: '/page_fix/repair/repair_index?id=' + this.sn }); }, getmarks() { this.$u.get(`/appVerify/adminOrder/list?adminId=` + 2).then((res) => { if (res.code == 200) { console.log('调用了'); this.listData = res.rows; this.fixdata = []; this.eledata = []; res.rows.forEach(item => { if (item.type == 1&&item.status==2) { this.fixdata.push(item); } else if (item.type == 2&&item.status==2) { this.eledata.push(item); } }); this.updateMarkers(); this.getParking() } else { console.error('接口返回错误:', res); } }).catch(error => { console.error("接口请求失败:", error); }); }, updateMarkers() { this.markers = []; const markerIds = new Set(); // 用于跟踪已添加的 id const addMarker = (item, iconPath) => { const id = parseFloat(item.sn); if (!markerIds.has(id)) { markerIds.add(id); this.markers.push({ id: id, latitude: parseFloat(item.latitude), longitude: parseFloat(item.longitude), width: 40, height: 40, iconPath: iconPath, }); } }; this.fixdata.forEach(item => { addMarker(item, 'https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX'); }); this.eledata.forEach(item => { addMarker(item, 'https://lxnapi.ccttiot.com/bike/img/static/u4UKmB47AxOj3YKIaajM'); }); console.log(this.markers, '更新后的标记'); }, topage() { uni.navigateTo({ url: '/page_fix/repair/repair_index' }); }, getordernum() { this.$u.get('/appVerify/adminOrder/num?adminId=' + 2).then((res) => { if (res.code === 200) { this.infonum = res.data; } }).catch(error => { console.error("获取订单数量数据失败:", error); }); }, getArea() { this.$u.get('/app/area/list').then((res) => { if (res.code === 200) { const polylines = res.rows.filter(area => area.boundaryStr) .map(area => this.convertBoundaryToPolyline(area.boundaryStr)); this.polyline = polylines; this.getmarks() } }).catch(error => { console.error("获取区域数据失败:", error); }); }, convertBoundaryToPolylines(boundaries,num) { if(num==1){ console.log('判断'); return boundaries.map(boundary => { if (!boundary) return null; let coords; try { coords = JSON.parse(boundary); } catch (error) { console.error("Error parsing boundary JSON:", error); return null; } if (!Array.isArray(coords)) { console.error("Parsed boundary is not an array:", coords); return null; } const points = coords.map(coord => ({ latitude: coord[1], longitude: coord[0] })); return { points: points, fillColor: "#3A7EDB40", //填充颜色 strokeColor: "#3A7EDB", //描边颜色 strokeWidth: 2, //描边宽度 zIndex: 1, //层级 }; }).filter(polyline => polyline !== null); // 过滤掉无效的折线数据 }else if(num==2){ return boundaries.map(boundary => { if (!boundary) return null; let coords; try { coords = JSON.parse(boundary); } catch (error) { console.error("Error parsing boundary JSON:", error); return null; } if (!Array.isArray(coords)) { console.error("Parsed boundary is not an array:", coords); return null; } const points = coords.map(coord => ({ latitude: coord[1], longitude: coord[0] })); return { points: points, fillColor: "#FFF5D640", //填充颜色 strokeColor: "#FFC107", //描边颜色 strokeWidth: 2, //描边宽度 zIndex: 1, //层级 }; }).filter(polyline => polyline !== null); // 过滤掉无效的折线数据 }else if(num==3){ return boundaries.map(boundary => { if (!boundary) return null; let coords; try { coords = JSON.parse(boundary); } catch (error) { console.error("Error parsing boundary JSON:", error); return null; } if (!Array.isArray(coords)) { console.error("Parsed boundary is not an array:", coords); return null; } const points = coords.map(coord => ({ latitude: coord[1], longitude: coord[0] })); return { points: points, fillColor: "#FFD1CF40", //填充颜色 strokeColor: "#FF473E", //描边颜色 strokeWidth: 2, //描边宽度 zIndex: 1, //层级 }; }).filter(polyline => polyline !== null); // 过滤掉无效的折线数据 } }, getParking() { // 发送请求获取数据 this.$u.get('/app/parking/list').then((res) => { if (res.code === 200) { // 处理接口返回的数据 const type1Data = []; const type2Data = []; const type3Data = []; res.rows.forEach(row => { if (row.type == 1) { type1Data.push(row); } else if (row.type == 2) { type2Data.push(row); } else if (row.type == 3) { type3Data.push(row); } }); const validBoundaries = type1Data.map(row => row.boundaryStr).filter(boundary => typeof boundary === 'string' && boundary.trim() !== ''); 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 validBoundaries2 = type3Data.map(row => row.boundaryStr).filter(boundary => typeof boundary === 'string' && boundary.trim() !== ''); const polylines2 = this.convertBoundaryToPolylines(validBoundaries2,3); // 将处理后的数据添加到 this.polyline 中 this.polyline = this.polyline.concat(polylines2); this.polyline = this.polyline.concat(polylines1); this.polyline = this.polyline.concat(polylines); // console.log(this.polyline); res.rows.forEach(item => { this.markers.push({ id: parseFloat(item.parkingId), latitude: parseFloat(item.latitude), longitude: parseFloat(item.longitude), // title: item.deviceName, width: 20, height: 40, iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne', callout: { content: item.parkingName, // 修改为你想要显示的文字内容 color: '#ffffff', // 修改为文字颜色 fontSize: 14, // 修改为文字大小 borderRadius: 10, // 修改为气泡圆角大小 bgColor: '#000000', // 修改为气泡背景颜色 padding: 6, // 修改为气泡内边距 display: 'ALWAYS', // 修改为气泡的显示策略 } }) }) setTimeout(()=>{ },200) } }).catch(error => { console.error("Error fetching parking data:", error); }); }, convertBoundaryToPolyline(boundary) { if (!boundary) return null; const points = JSON.parse(boundary).map(coord => ({ latitude: coord[1], longitude: coord[0] })); return { points: points, fillColor: "#55888840", strokeColor: "#22FF00", strokeWidth: 2, zIndex: 1, }; }, } } </script> <style lang="scss"> page { background-color: #F7FAFE; } .page { width: 750rpx; .map { width: 750rpx; height: 1250rpx; } .bot { padding: 40rpx 32rpx; position: fixed; bottom: 0; width: 750rpx; height: 272rpx; background: #fff; border-radius: 60rpx 60rpx 0 0; .btn { display: flex; align-items: center; justify-content: center; width: 686rpx; height: 90rpx; background: #4C97E7; border-radius: 54rpx 54rpx 54rpx 54rpx; font-weight: 500; font-size: 40rpx; color: #FFFFFF; } .info { margin-top: 24rpx; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-around; .cont { width: 112rpx; display: flex; flex-wrap: wrap; justify-content: center; .cont_top { text-align: center; width: 112rpx; font-weight: 500; font-size: 28rpx; color: #3D3D3D; } .cont_bot { text-align: center; width: 112rpx; font-weight: 500; font-size: 28rpx; color: #3D3D3D; } } } } } </style>