<template>
<view class="page">
<u-navbar title="地图" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
height='36'></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.getParking()
this.getmarks()
this.getordernum()
},
computed: {
userId() {
return this.$store.getters.userId;
},
},
methods: {
onMarkerTap(e) {
if (e.type === 'markertap') {
console.log('点击了标记：', e.markerId);
// 这里可以根据需要处理点击标记的逻辑
// 阻止事件冒泡
this.sn = e.markerId
this.todetail()
}
},
todetail() {
for (let item of this.fixdata) {
if (item.sn == this.sn) {
uni.navigateTo({
url:'/page_fix/repair/repair_detail?id='+item.id
})
}
}
for (let item of this.eledata) {
if (item.sn == this.sn) {
uni.navigateTo({
url:'/page_fix/repair/repair_detail?id='+item.id
})
}
}
console.log("no");
},
getmarks() {
this.$u.get(`/appVerify/adminOrder/list?adminId=` + 2).then((res) => {
if (res.code == 200) {
console.log('调用了');
this.listData = res.rows;
res.rows.forEach(item => {
if (item.type == 1) {
this.fixdata.push(item);
console.log(this.fixdata, 'this.fixdata');
} else if (item.type == 2) {
this.eledata.push(item);
}
// 可以在这里执行其他针对每个项的操作
});
setTimeout(() => {
this.fixdata.forEach(item => {
this.markers.push({
id: parseFloat(item.sn),
latitude: parseFloat(item.latitude),
longitude: parseFloat(item.longitude),
// title: item.deviceName,
width: 40,
height: 40,
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX',
})
})
}, 100)
setTimeout(() => {
this.eledata.forEach(item => {
this.markers.push({
id: parseFloat(item.sn),
latitude: parseFloat(item.latitude),
longitude: parseFloat(item.longitude),
// title: item.deviceName,
width: 40,
height: 40,
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u4UKmB47AxOj3YKIaajM',
})
})
console.log(this.markers, ' this.markers this.markers');
}, 200)
// this.markers = markers;
} else {
// 处理接口返回错误的情况
}
}).catch(error => {
// 处理接口请求失败的情况
});
},
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
// console.log(this.polyline);
}
}).catch(error => {
console.error("Error fetching area data:", error);
});
},
getArea() {
// 发送请求获取数据
this.$u.get('/app/area/list').then((res) => {
if (res.code === 200) {
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
const polylines = res.rows
.filter(area => area.boundaryStr) // 过滤掉boundary为空的数据
.map(area => this.convertBoundaryToPolyline(area.boundaryStr));
// 更新折线数据
this.polyline = polylines;
// console.log(this.polyline);
}
}).catch(error => {
console.error("Error fetching area data:", error);
});
},
convertBoundaryToPolylines(boundaries) {
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: "#55888840", //填充颜色
strokeColor: "#558888", //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
};
}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
},
getParking() {
// 发送请求获取数据
this.$u.get('/app/parking/list').then((res) => {
if (res.code === 200) {
// 处理接口返回的数据
const validBoundaries = res.rows.map(row => row.boundaryStr).filter(boundary =>
typeof boundary === 'string' && boundary.trim() !== '');
const polylines = this.convertBoundaryToPolylines(validBoundaries);
// 将处理后的数据添加到 this.polyline 中
this.polyline = this.polyline.concat(polylines);
console.log(this.polyline);
}
}).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]
}));
const polyline = {
points: points,
fillColor: "#55888840", //填充颜色
strokeColor: "#22FF00", //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
};
return polyline;
},
}
}
</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>