327 lines
7.8 KiB
Vue
327 lines
7.8 KiB
Vue
<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> |