<template>
<view class="page">
<u-navbar title="地图" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
height='36'></u-navbar>
<view class="slider">
<view class="tit">
电量区间
</view>
<slider-range :value="rangeValue" :min="rangeMin" :max="rangMax" :step="1" :bar-height="3" :block-size="20"
background-color="#EEEEF6" active-color="#4C97E7" :format="format" :decorationVisible="true"
@change="handleRangeChange"></slider-range>
</view>
<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="btn_box">
<view class="btn1">
车辆扫码
</view>
<view class="btn2">
车辆搜索
</view>
</view>
<view class="decice_cont">
<view class="cont">
<view class="text">
全部设备
</view>
<view class="text">
1
</view>
</view>
</view>
<tab-bar :indexs='1' style=""></tab-bar>
</view>
</template>
<script>
import SliderRange from '@/pages_admin/components/primewind-sliderrange/index.vue'
export default {
data() {
return {
bgc: {
backgroundColor: "#F7FAFE",
},
latitude: '26.940805',
longitude: '120.356157',
isMap: false,
zoomSize: 15,
markers: [],
polyline: [],
polygons: [],
fixdata: [],
eledata: [],
listData: [],
infonum: {},
rangeMin: 0,
rangMax: 100,
rangeValue: [0, 100]
}
},
components: {
SliderRange
},
onShow() {
this.$store.dispatch('userInfo', this.$u).then(() => {
// 执行其他操作...
});
this.getArea()
this.getParking()
this.getmarks()
this.getordernum()
},
computed: {
userId() {
return this.$store.getters.userId;
},
},
methods: {
format(val) {
return val + '%'
},
handleRangeChange(e) {
this.rangeValue = e
},
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;
.decice_cont{
display: flex;
align-items: center;
padding: 22rpx 28rpx;
.cont{
width: 120rpx;
.text{
text-align: center;
font-weight: 500;
font-size: 24rpx;
line-height: 38rpx;
color: #3D3D3D;
}
}
}
.btn_box{
width: 100%;
display: flex;
flex-wrap: nowrap;
.btn1{
display: flex;
align-items: center;
justify-content: center;
width: 376rpx;
height: 74rpx;
background: #D4ECFF;
font-weight: 500;
font-size: 40rpx;
color: #4C97E7;
}
.btn2{
display: flex;
align-items: center;
justify-content: center;
width: 374rpx;
height: 74rpx;
background: #4C97E7;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
}
}
.slider{
.tit{
font-weight: 500;
font-size: 28rpx;
color: #3D3D3D;
}
width: 752rpx;
height: 150rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0,0,0,0.07);
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.map {
width: 750rpx;
height: 906rpx;
}
}
</style>