运营区设置页面
This commit is contained in:
parent
c4ab198423
commit
772bb2eab1
|
|
@ -5,11 +5,11 @@ const install = (Vue, vm) => {
|
|||
Vue.prototype.$u.http.setConfig({
|
||||
// baseUrl: 'http://61.174.243.28:15861',
|
||||
// baseUrl: 'http://192.168.2.46:8080',
|
||||
// baseUrl: 'https://che.chuangtewl.com/prod-api',
|
||||
baseUrl: 'https://che.chuangtewl.com/prod-api',
|
||||
// 测试环境
|
||||
// baseUrl: 'https://dianche.chuantewulian.cn/prod-api',
|
||||
// 俞山岛
|
||||
baseUrl: 'https://dche.ccttiot.com/prod-api',
|
||||
// baseUrl: 'https://dche.ccttiot.com/prod-api',
|
||||
// 创特
|
||||
loadingText: '努力加载中~',
|
||||
loadingTime: 10000,
|
||||
|
|
|
|||
|
|
@ -5,13 +5,15 @@
|
|||
back-icon-color='#fff' height='45'></u-navbar>
|
||||
</view>
|
||||
|
||||
<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uJVTiExwVDJJzYywmoLc" mode=""
|
||||
v-if="deptId == 101"></image>
|
||||
<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uvRt04OhPwHf2MRkU6mk" mode=""
|
||||
v-if="deptId == 100"></image>
|
||||
<view class="backimg-container">
|
||||
<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uJVTiExwVDJJzYywmoLc"
|
||||
mode="aspectFit" v-if="deptId == 101"></image>
|
||||
<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uvRt04OhPwHf2MRkU6mk"
|
||||
mode="aspectFit" v-if="deptId == 100"></image>
|
||||
</view>
|
||||
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
|
||||
<view class="statusBars" :style="{ height: navBarHeight + 'px' }"></view>
|
||||
<view class="topbg">
|
||||
<view class="topbg" style="z-index: 10;position: relative;">
|
||||
<view class="topbox">
|
||||
<view class="info">
|
||||
<image v-if="info.avatar != ''" :src='info.avatar' mode=""></image>
|
||||
|
|
@ -687,7 +689,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .uni-navbar {
|
||||
background: transparent !important; // 使用 !important 确保覆盖原样式
|
||||
|
|
|
|||
36
pages.json
36
pages.json
|
|
@ -360,6 +360,42 @@
|
|||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "map_set",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "ParkIngList",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "Parking_set",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "park_map",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
|
||||
<!-- <u-navbar :is-back="false" 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" show-location :key="mapKey" :latitude="latitude"
|
||||
<map class="map" id="map" ref="map" :scale="zoomSize" show-location :key="mapKey" :latitude="latitude"
|
||||
:longitude="longitude" :show-location="true" :markers="markers" :polygons="polyline" :polyline="mappolyline"
|
||||
@markertap="onMarkerTap" @tap="onMapTap" @regionchange="onMapRegionChange">
|
||||
|
||||
|
|
@ -485,7 +485,7 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="bottom_more" v-if="showindex == 1">
|
||||
<view class="close" @click="showindex = 0">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uM76uO46a5cZOkFlffnX" mode=""></image>
|
||||
|
|
@ -1089,8 +1089,8 @@ export default {
|
|||
},
|
||||
tozf: false,
|
||||
islogin: true,
|
||||
|
||||
mapKey:0,
|
||||
|
||||
mapKey: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -1241,8 +1241,8 @@ export default {
|
|||
that.gps.latitude = lb.latitude;
|
||||
that.gps.longitude = lb.longitude;
|
||||
|
||||
that.latitude = parseFloat(lb.latitude) ;
|
||||
that.longitude = parseFloat(lb.longitude);
|
||||
that.latitude = parseFloat(lb.latitude);
|
||||
that.longitude = parseFloat(lb.longitude);
|
||||
that.deviceGps.latitude = lb.latitude;
|
||||
that.deviceGps.longitude = lb.longitude;
|
||||
// console.log(that.areaInfo, 'that.areaInfo');
|
||||
|
|
@ -1383,129 +1383,129 @@ export default {
|
|||
})
|
||||
},
|
||||
getArea() {
|
||||
|
||||
// this.showmap = false
|
||||
// 发送请求获取数据
|
||||
this.areaInfo = {}
|
||||
// console.log(this.qParam, 'qParamqParamqParamqParam');
|
||||
this.polyline = []
|
||||
|
||||
if (/^\d{7}$/.test(this.qParam)) {
|
||||
this.gps.sn = this.qParam
|
||||
|
||||
}
|
||||
if (this.orderinfo.sn != '') {
|
||||
this.gps.sn = this.orderinfo.sn
|
||||
}
|
||||
if (this.deviceInfos.sn) {
|
||||
this.gps.sn = this.deviceInfos.sn
|
||||
}
|
||||
if (this.qParam != '' && this.qParam != null) {
|
||||
this.sn = this.getSNFromQRCode(this.qParam);
|
||||
|
||||
if (this.sn != 0 && this.sn != '' && this.sn != null) {
|
||||
this.gps.sn = this.sn
|
||||
|
||||
// this.showmap = false
|
||||
// 发送请求获取数据
|
||||
this.areaInfo = {}
|
||||
// console.log(this.qParam, 'qParamqParamqParamqParam');
|
||||
this.polyline = []
|
||||
|
||||
if (/^\d{7}$/.test(this.qParam)) {
|
||||
this.gps.sn = this.qParam
|
||||
|
||||
}
|
||||
if (this.orderinfo.sn != '') {
|
||||
this.gps.sn = this.orderinfo.sn
|
||||
}
|
||||
if (this.deviceInfos.sn) {
|
||||
this.gps.sn = this.deviceInfos.sn
|
||||
}
|
||||
if (this.qParam != '' && this.qParam != null) {
|
||||
this.sn = this.getSNFromQRCode(this.qParam);
|
||||
|
||||
if (this.sn != 0 && this.sn != '' && this.sn != null) {
|
||||
this.gps.sn = this.sn
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
this.$u.get('/app/area/info?', this.gps).then((res) => {
|
||||
|
||||
if (res.code === 200) {
|
||||
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
|
||||
this.mapKey += 1
|
||||
// 更新折线数据
|
||||
|
||||
this.areaInfo = res.data
|
||||
|
||||
setTimeout(() => {
|
||||
let abb = this.cleanedText()
|
||||
|
||||
|
||||
// 计算滚动时间，基于文本宽度
|
||||
this.duration = abb.length * 0.3; // 50 px/s 的速度
|
||||
}, 200)
|
||||
|
||||
this.polyline.push(polylines)
|
||||
|
||||
uni.setStorageSync('areaId', res.data.areaId);
|
||||
this.getinfo()
|
||||
this.getmarks()
|
||||
// this.getlist()
|
||||
this.getParking()
|
||||
if (uni.getStorageSync('token') && this.islogin) {
|
||||
this.getisInOrder()
|
||||
|
||||
}
|
||||
}
|
||||
this.$u.get('/app/area/info?', this.gps).then((res) => {
|
||||
|
||||
if (res.code === 200) {
|
||||
const hasShownPopup = uni.getStorageSync('hasShownPopup');
|
||||
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
|
||||
this.mapKey += 1
|
||||
// 更新折线数据
|
||||
|
||||
this.areaInfo = res.data
|
||||
|
||||
|
||||
if (hasShownPopup === '' || hasShownPopup === null) {
|
||||
|
||||
this.showTips = true;
|
||||
this.startCountdown();
|
||||
uni.setStorageSync('hasShownPopup', true);
|
||||
} else {
|
||||
|
||||
this.showTips = uni.getStorageSync('hasShownPopup');
|
||||
;
|
||||
this.startCountdown();
|
||||
|
||||
}
|
||||
if (this.gps.sn && /^\d{7}$/.test(this.gps.sn)) {
|
||||
setTimeout(() => {
|
||||
let abb = this.cleanedText()
|
||||
|
||||
if (this.orderinfo.status) {
|
||||
// this.showtcs = true
|
||||
} else {
|
||||
// if(this.showdevice==false&&){
|
||||
// console.log('进入的判断1');
|
||||
// this.deviceInfo(1)
|
||||
// this.qParam = null
|
||||
// }
|
||||
if (this.deviceInfos.sn) {
|
||||
|
||||
// 计算滚动时间，基于文本宽度
|
||||
this.duration = abb.length * 0.3; // 50 px/s 的速度
|
||||
}, 200)
|
||||
|
||||
this.polyline.push(polylines)
|
||||
|
||||
uni.setStorageSync('areaId', res.data.areaId);
|
||||
this.getinfo()
|
||||
this.getmarks()
|
||||
// this.getlist()
|
||||
this.getParking()
|
||||
if (uni.getStorageSync('token')&&this.islogin) {
|
||||
this.getisInOrder()
|
||||
|
||||
}
|
||||
const hasShownPopup = uni.getStorageSync('hasShownPopup');
|
||||
|
||||
|
||||
if (hasShownPopup === '' || hasShownPopup === null) {
|
||||
|
||||
this.showTips = true;
|
||||
this.startCountdown();
|
||||
uni.setStorageSync('hasShownPopup', true);
|
||||
} else {
|
||||
|
||||
this.showTips = uni.getStorageSync('hasShownPopup');
|
||||
;
|
||||
this.startCountdown();
|
||||
|
||||
}
|
||||
if (this.gps.sn && /^\d{7}$/.test(this.gps.sn)) {
|
||||
setTimeout(() => {
|
||||
if (this.orderinfo.status) {
|
||||
// this.showtcs = true
|
||||
} else {
|
||||
// if(this.showdevice==false&&){
|
||||
// console.log('进入的判断1');
|
||||
// this.deviceInfo(1)
|
||||
// this.qParam = null
|
||||
// }
|
||||
if (this.deviceInfos.sn) {
|
||||
|
||||
if (this.qParam) {
|
||||
console.log('进入的判断2');
|
||||
this.deviceInfo(1)
|
||||
this.qParam = null
|
||||
} else {
|
||||
if (this.qParam) {
|
||||
console.log('进入的判断2');
|
||||
this.deviceInfo(1)
|
||||
this.qParam = null
|
||||
} else {
|
||||
console.log('进入的判断3');
|
||||
// if(this.de)
|
||||
this.deviceInfo(0)
|
||||
this.qParam = null
|
||||
}
|
||||
console.log('进入的判断3');
|
||||
// if(this.de)
|
||||
this.deviceInfo(0)
|
||||
this.qParam = null
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}, 200)
|
||||
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
|
||||
}, 200)
|
||||
|
||||
}
|
||||
}).catch(error => {
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}).catch(error => {
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
deviceInfo(num) {
|
||||
if (!this.sn) return;
|
||||
|
||||
// 检查是否有进行中的订单
|
||||
if(this.orderinfo.sn){
|
||||
if (this.orderinfo.sn!=this.sn) {
|
||||
if (this.orderinfo.sn) {
|
||||
if (this.orderinfo.sn != this.sn) {
|
||||
uni.showToast({
|
||||
title: '您有正在进行的订单，请先完成当前订单',
|
||||
icon: 'none',
|
||||
|
|
@ -1513,9 +1513,9 @@ export default {
|
|||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.isqrcode = true
|
||||
|
|
@ -1528,10 +1528,10 @@ export default {
|
|||
|
||||
// 检查区域是否需要切换
|
||||
const areaChanged = this.areaInfo.areaId != res.data.areaId;
|
||||
console.log( this.areaInfo.areaId,res.data.areaId,'aaaaaaaaaaaaaaaaaaaaaa');
|
||||
console.log(this.areaInfo.areaId, res.data.areaId, 'aaaaaaaaaaaaaaaaaaaaaa');
|
||||
if (num == 0) {
|
||||
if (areaChanged) {
|
||||
|
||||
|
||||
// 区域不同，需要切换区域
|
||||
uni.setStorageSync('areaId', res.data.areaId);
|
||||
this.gps.sn = this.sn;
|
||||
|
|
@ -1594,7 +1594,7 @@ export default {
|
|||
},
|
||||
|
||||
mapFun() {
|
||||
|
||||
|
||||
uni.openLocation({
|
||||
latitude: parseFloat(this.parkinfo.latitude),
|
||||
//纬度 - 目的地/坐标点
|
||||
|
|
@ -1802,93 +1802,94 @@ export default {
|
|||
}
|
||||
},
|
||||
onMarkerTap(e) {
|
||||
|
||||
this.showdevice = false;
|
||||
this.deviceIndex = 0;
|
||||
this.type = 0;
|
||||
// this.freeInfo = {};
|
||||
// this.freeListIndex = 0;
|
||||
this.parkinfo = {}
|
||||
this.showparkinfo = false
|
||||
if (e.type === 'markertap') {
|
||||
console.log('Clicked marker:', e.markerId);
|
||||
// 处理停车点标记
|
||||
let parkmark = this.parkingList.some(item => item.parkingId == e.markerId);
|
||||
if (parkmark) {
|
||||
const matchingItem = this.parkingList.find(item => item.parkingId == e.markerId);
|
||||
this.showparkinfo = true
|
||||
this.parkinfo = matchingItem
|
||||
console.log(matchingItem, 'parkmarkparkmark');
|
||||
this.showparkinfo = true;
|
||||
this.parkinfo = matchingItem;
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理设备标记
|
||||
const markerExists = this.listData.some(item => item.sn == e.markerId);
|
||||
if (this.orderinfo.sn) {
|
||||
uni.showToast({
|
||||
title: '有进行中的订单，无法查看',
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
if (markerExists) {
|
||||
this.sn = e.markerId;
|
||||
this.deviceInfo(0);
|
||||
if (markerExists) {
|
||||
// 检查是否有进行中的订单
|
||||
if (this.orderinfo.sn) {
|
||||
uni.showToast({
|
||||
title: '有进行中的订单，无法查看',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Revert the last clicked marker to the default image and zIndex
|
||||
if (this.lastClickedMarkerId !== null) {
|
||||
this.markers = this.markers.map(marker => {
|
||||
if (marker.id === this.lastClickedMarkerId) {
|
||||
return {
|
||||
...marker,
|
||||
iconPath: this.defaultMarkerIconPath,
|
||||
width: 40,
|
||||
height: 28,
|
||||
// zIndex: 1 // Reset to default zIndex
|
||||
};
|
||||
}
|
||||
return marker;
|
||||
});
|
||||
}
|
||||
this.lastClickedMarkerId = e.markerId;
|
||||
// Update the clicked marker's image and zIndex
|
||||
// 立即更新UI状态
|
||||
this.showdevice = true;
|
||||
this.deviceIndex = 1;
|
||||
this.type = 1;
|
||||
this.sn = e.markerId;
|
||||
|
||||
// 更新标记样式
|
||||
if (this.lastClickedMarkerId !== null) {
|
||||
this.markers = this.markers.map(marker => {
|
||||
if (marker.id === e.markerId) {
|
||||
if (marker.id === this.lastClickedMarkerId) {
|
||||
return {
|
||||
...marker,
|
||||
iconPath: this.clickedMarkerIconPath,
|
||||
width: 50,
|
||||
height: 35
|
||||
// zIndex: 999 // Higher zIndex to bring it to the front
|
||||
iconPath: this.defaultMarkerIconPath,
|
||||
width: 40,
|
||||
height: 28
|
||||
};
|
||||
}
|
||||
return marker;
|
||||
});
|
||||
}
|
||||
|
||||
// Store the ID of the currently clicked marker
|
||||
|
||||
|
||||
// Get the latitude and longitude of the clicked marker
|
||||
const clickedMarker = this.markers.find(marker => marker.id === e.markerId);
|
||||
if (clickedMarker) {
|
||||
const {
|
||||
latitude,
|
||||
longitude
|
||||
} = clickedMarker;
|
||||
console.log(`Clicked marker location - Latitude: ${latitude}, Longitude: ${longitude}`);
|
||||
this.routePlanning(latitude, longitude)
|
||||
// Find nearby markers
|
||||
// this.getNearbyMarkers(latitude, longitude);
|
||||
// 更新当前点击的标记
|
||||
this.markers = this.markers.map(marker => {
|
||||
if (marker.id === e.markerId) {
|
||||
return {
|
||||
...marker,
|
||||
iconPath: this.clickedMarkerIconPath,
|
||||
width: 50,
|
||||
height: 35
|
||||
};
|
||||
}
|
||||
return marker;
|
||||
});
|
||||
|
||||
// console.log(this.markers, 'Updated markers');
|
||||
} else {
|
||||
console.log('Marker ID does not exist in the list data');
|
||||
this.lastClickedMarkerId = e.markerId;
|
||||
|
||||
// 获取设备详情
|
||||
this.deviceInfo(1);
|
||||
|
||||
// 规划路线
|
||||
const clickedMarker = this.markers.find(marker => marker.id === e.markerId);
|
||||
if (clickedMarker) {
|
||||
const { latitude, longitude } = clickedMarker;
|
||||
this.routePlanning(latitude, longitude);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Prevent event bubbling
|
||||
e.stopPropagation();
|
||||
}
|
||||
},
|
||||
|
||||
// 新增 showDeviceInfo 方法
|
||||
showDeviceInfo(device) {
|
||||
if (this.orderinfo.status) {
|
||||
this.showtcs = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.deviceIndex = 1;
|
||||
this.type = 1;
|
||||
this.showdevice = true;
|
||||
|
||||
// 获取设备详情
|
||||
this.deviceInfo(0);
|
||||
},
|
||||
getNearbyMarkers(clickedLat, clickedLon) {
|
||||
const nearbyMarkers = this.listData.filter(item => {
|
||||
if (item.latitude && item.longitude) {
|
||||
|
|
@ -2885,7 +2886,7 @@ export default {
|
|||
// 使用this.$set触发Vue的响应式更新
|
||||
this.$set(this, 'markers', this.markers);
|
||||
}
|
||||
console.log(this.markers,'aaa');
|
||||
console.log(this.markers, 'aaa');
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching device data:", error);
|
||||
|
|
|
|||
|
|
@ -19,15 +19,10 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
||||
:circles="circles" :show-location="true" :markers="markers" :polygons="polyline" @markertap="onMarkerTap"
|
||||
@regionchange="onMapRegionChange">
|
||||
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude" :circles="circles" :show-location="true" :markers="markers" :polygons="polyline" @markertap="onMarkerTap" @regionchange="onMapRegionChange">
|
||||
<view class="center-marker">
|
||||
<!-- https://lxnapi.ccttiot.com/bike/img/static/uZdgdHaduvMTKOpMKYxZ -->
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uZdgdHaduvMTKOpMKYxZ" style="width: 42rpx; height: 78rpx;" v-if="showdevList" />
|
||||
<!-- <image src="https://lxnapi.ccttiot.com/bike/img/static/uAwnNprackI9p9dXFg8C" style="width: 80rpx; height: 80rpx;" /> -->
|
||||
|
||||
</view>
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uZdgdHaduvMTKOpMKYxZ" style="width: 42rpx; height: 78rpx;" v-if="showdevList" />
|
||||
</view>
|
||||
</map>
|
||||
<view class="park" @click="toggleIconAndCallout">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" mode=""></image>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,9 @@
|
|||
</view>
|
||||
|
||||
<view class="cont" @click="topage(4)" v-if="hasMenuPermission('用户页面')">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uM4rBBaXc7b3TmsqQTvz" mode=""></image>
|
||||
<!-- <image src="https://lxnapi.ccttiot.com/bike/img/static/uM4rBBaXc7b3TmsqQTvz" mode=""></image> -->
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/ui9GMTP9k1K0YC9jlWHu" mode=""></image>
|
||||
|
||||
<view class="text">
|
||||
用户页面
|
||||
</view>
|
||||
|
|
@ -74,7 +76,14 @@
|
|||
style="width: 96rpx;height: 96rpx;"></image>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="cont" @click="topage(12)" v-if="hasMenuPermission('区域设置')">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uM4rBBaXc7b3TmsqQTvz" mode=""></image>
|
||||
<!-- <image src="https://lxnapi.ccttiot.com/bike/img/static/ui9GMTP9k1K0YC9jlWHu" mode=""></image> -->
|
||||
|
||||
<view class="text">
|
||||
区域设置
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-select v-model="show" :list="list" title='选择运营区' @confirm="confirm" v-if="list.length <= 5"></u-select>
|
||||
|
|
@ -308,6 +317,10 @@ export default {
|
|||
uni.navigateTo({
|
||||
url: '/pages_adminSet/sysSet'
|
||||
})
|
||||
} else if (num == 12) {
|
||||
uni.navigateTo({
|
||||
url: '/pages_adminSet/ParkIngList'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
314
pages_adminSet/ParkIngList.vue
Normal file
314
pages_adminSet/ParkIngList.vue
Normal file
|
|
@ -0,0 +1,314 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar title="地图绘制" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='45'>
|
||||
</u-navbar>
|
||||
|
||||
<!-- Tab切换 -->
|
||||
<u-tabs-swiper :list="tabList" :current="current" @change="tabChange" :is-scroll="false" active-color="#007AFF"
|
||||
bar-width="60" bar-height="6" item-width="250" :show-bar="true"></u-tabs-swiper>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<view class="content">
|
||||
<!-- 新增按钮 -->
|
||||
<view class="add-btn" @tap="goAdd">
|
||||
<u-icon name="plus" color="#007AFF" size="28"></u-icon>
|
||||
<text>新增{{ currentTabName }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 列表 -->
|
||||
<view class="list">
|
||||
<u-swipe-action v-for="(item, index) in parkingList " :key="index" :show="item.show" :index="index"
|
||||
@click="handleSwipeClick" :options="swipeOptions">
|
||||
<view class="list-item">
|
||||
<view class="item-left">
|
||||
<view class="item-name">{{ item.parkingName }}</view>
|
||||
<view class="item-info">
|
||||
<text>创建时间: {{ item.createTime }}</text>
|
||||
<text>误差距离: {{ item.error !== null ? item.error : 0 }}米</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<view class="custom-switch" @click="handleStatusChange(item)">
|
||||
<view class="switch-track" :class="{ 'switch-active': item.status == 0 }">
|
||||
<view class="switch-thumb"></view>
|
||||
</view>
|
||||
</view>
|
||||
<u-button type="primary" size="mini" @click="goEdit(item)">修改</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-swipe-action>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<u-empty v-if="parkingList.length === 0" text="暂无数据" mode="list"></u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
areaId: '',
|
||||
current: 0,
|
||||
tabList: [
|
||||
{ name: '停车区' },
|
||||
{ name: '禁停区' },
|
||||
{ name: '禁行区' }
|
||||
],
|
||||
parkingList: [],
|
||||
swipeOptions: [{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#dd524d'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentTabName() {
|
||||
return this.tabList[this.current]?.name || ''
|
||||
},
|
||||
currentType() {
|
||||
return String(this.current + 1)
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.areaId = uni.getStorageSync('adminAreaid')
|
||||
this.getParking()
|
||||
},
|
||||
methods: {
|
||||
// Tab切换
|
||||
tabChange(index) {
|
||||
this.current = index
|
||||
this.getParking()
|
||||
},
|
||||
|
||||
// 获取类型名称
|
||||
getTypeName(type) {
|
||||
const typeMap = {
|
||||
'1': '停车区',
|
||||
'2': '禁停区',
|
||||
'3': '禁行区'
|
||||
}
|
||||
return typeMap[type] || '未知'
|
||||
},
|
||||
|
||||
// 获取列表数据
|
||||
getParking() {
|
||||
let data = {
|
||||
areaId: this.areaId,
|
||||
type: this.currentType
|
||||
}
|
||||
this.$u.get('/appVerify/parking/list', data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.parkingList = res.data || []
|
||||
console.log(this.parkingList[0])
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg || '获取数据失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转新增页面
|
||||
goAdd() {
|
||||
uni.navigateTo({
|
||||
url: `/pages_adminSet/Parking_set?type=${this.currentType}`
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转编辑页面
|
||||
goEdit(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages_adminSet/Parking_set?type=${item.type}&parkingId=${item.parkingId}`
|
||||
})
|
||||
},
|
||||
|
||||
// 状态切换处理
|
||||
handleStatusChange(item) {
|
||||
const newStatus = item.status === 1 ? 0 : 1
|
||||
let data = {
|
||||
parkingId: item.parkingId,
|
||||
status: newStatus
|
||||
}
|
||||
|
||||
this.$u.put('/appVerify/parking/changeParkingStatus', data).then(res => {
|
||||
if (res.code === 200) {
|
||||
item.status = newStatus
|
||||
uni.showToast({
|
||||
title: '状态更新成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg || '状态更新失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 处理滑动删除点击
|
||||
handleSwipeClick(e) {
|
||||
console.log(e,'e');
|
||||
// const { index } = e;
|
||||
const item = this.parkingList[e];
|
||||
|
||||
console.log(item,'item');
|
||||
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除该记录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.deleteParking(item.parkingId);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 删除停车区域
|
||||
deleteParking(parkingId) {
|
||||
this.$u.delete(`/appVerify/parking/${parkingId}`).then(res => {
|
||||
if (res.code === 200) {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
this.getParking(); // 重新获取列表数据
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg || '删除失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
position: fixed;
|
||||
bottom: 100rpx;
|
||||
left: 60rpx;
|
||||
display: flex;
|
||||
width: 650rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
text {
|
||||
margin-left: 10rpx;
|
||||
color: #007AFF;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.list {
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
// margin-bottom: 20rpx;
|
||||
// 添加底部边框和背景色微调
|
||||
// border-bottom: 1px solid #f0f0f0;
|
||||
background-color: #fafafa;
|
||||
|
||||
.item-left {
|
||||
flex: 1;
|
||||
|
||||
.item-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
text {
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-switch {
|
||||
display: inline-block;
|
||||
|
||||
.switch-track {
|
||||
position: relative;
|
||||
width: 100rpx;
|
||||
height: 60rpx;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 30rpx;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
.switch-thumb {
|
||||
position: absolute;
|
||||
left: 4rpx;
|
||||
top: 4rpx;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&.switch-active {
|
||||
background-color: #007AFF;
|
||||
|
||||
.switch-thumb {
|
||||
transform: translateX(40rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
495
pages_adminSet/Parking_set.vue
Normal file
495
pages_adminSet/Parking_set.vue
Normal file
|
|
@ -0,0 +1,495 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar :title="getTitle" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
||||
height='45'>
|
||||
</u-navbar>
|
||||
|
||||
<view class="content">
|
||||
<view class="form-item">
|
||||
<text class="label">区域名称</text>
|
||||
<u-input v-model="formData.parkingName" placeholder="请输入区域名称" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">区域类型</text>
|
||||
<picker :range="typeList" range-key="text" @change="handleTypeChange">
|
||||
<view class="type-selector">
|
||||
<text>{{ getTypeName(formData.type) }}</text>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">误差范围(米)</text>
|
||||
<u-input v-model="formData.error" type="number" placeholder="请输入误差范围" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">区域图片</text>
|
||||
<view class="image-upload">
|
||||
<image v-if="formData.picture" :src="formData.picture" mode="aspectFill" class="preview-image"
|
||||
@tap="previewImage" />
|
||||
<view v-else class="upload-btn" @tap="chooseImage">
|
||||
<u-icon name="plus" size="40"></u-icon>
|
||||
</view>
|
||||
<view v-if="formData.picture" class="delete-btn" @tap="deletePic">
|
||||
<u-icon name="close" color="#fff" size="20"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">区域坐标</text>
|
||||
<view class="map-container">
|
||||
<map id="map" :latitude="mapCenter.latitude" :longitude="mapCenter.longitude" :polygons="polygons"
|
||||
scale="19"></map>
|
||||
</view>
|
||||
<!-- <view class="map-tips">点击地图添加坐标点，至少需要3个点形成区域</view> -->
|
||||
<view class="clear-btn" @tap="toSetmap">
|
||||
修改区域
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">备注</text>
|
||||
<u-input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" />
|
||||
</view>
|
||||
|
||||
<view class="btn-group">
|
||||
<u-button type="primary" @click="handleSubmit">保存</u-button>
|
||||
<u-button @click="goBack">取消</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
areaId: '',
|
||||
parkingId: '',
|
||||
typeList: [
|
||||
{ text: '停车区', value: '1' },
|
||||
{ text: '禁停区', value: '2' },
|
||||
{ text: '禁行区', value: '3' }
|
||||
],
|
||||
formData: {
|
||||
parkingName: '',
|
||||
type: '',
|
||||
error: '',
|
||||
picture: '',
|
||||
remark: '',
|
||||
boundary: '',
|
||||
boundaryStr: '',
|
||||
longitude: '',
|
||||
latitude: '',
|
||||
},
|
||||
mapCenter: {
|
||||
latitude: 27.105722,
|
||||
longitude: 120.25721
|
||||
},
|
||||
areaInfo: {},
|
||||
polygons: [],
|
||||
coordinates: [],
|
||||
token: '', // 添加七牛云token
|
||||
upurl: '', // 添加上传域名
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTitle() {
|
||||
const action = this.parkingId ? '修改' : '新增'
|
||||
return `${action}${this.getTypeName(this.formData.type)}`
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.parkingId = e.parkingId
|
||||
this.formData.type = e.type
|
||||
|
||||
|
||||
// 获取七牛云上传token
|
||||
this.getQiniuToken()
|
||||
this.areaId = uni.getStorageSync('adminAreaid')
|
||||
this.getArea()
|
||||
if (this.parkingId) {
|
||||
this.getParkingDetail()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取类型名称
|
||||
getTypeName(type) {
|
||||
const typeMap = {
|
||||
'1': '停车区',
|
||||
'2': '禁停区',
|
||||
'3': '禁行区'
|
||||
}
|
||||
return typeMap[type] || '请选择区域类型'
|
||||
},
|
||||
|
||||
// 处理类型选择
|
||||
handleTypeChange(e) {
|
||||
const index = e.detail.value
|
||||
this.formData.type = this.typeList[index].value
|
||||
},
|
||||
|
||||
// 获取详情
|
||||
getParkingDetail() {
|
||||
this.$u.get(`/app/parking/${this.parkingId}`).then(res => {
|
||||
if (res.code === 200) {
|
||||
const data = res.data
|
||||
this.formData = {
|
||||
parkingName: data.parkingName,
|
||||
type: data.type,
|
||||
error: data.error,
|
||||
picture: data.picture,
|
||||
remark: data.remark,
|
||||
boundary: data.boundary,
|
||||
boundaryStr: data.boundaryStr,
|
||||
longitude: data.longitude,
|
||||
latitude: data.latitude
|
||||
}
|
||||
|
||||
// 设置地图数据
|
||||
if (data.boundaryStr) {
|
||||
this.coordinates = JSON.parse(data.boundaryStr)
|
||||
this.updatePolygons()
|
||||
}
|
||||
|
||||
// 设置地图中心点
|
||||
if (data.latitude && data.longitude) {
|
||||
this.mapCenter = {
|
||||
latitude: Number(data.latitude),
|
||||
longitude: Number(data.longitude)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 选择图片
|
||||
chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
this.uploadImage(res.tempFilePaths[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 获取七牛云token
|
||||
getQiniuToken() {
|
||||
this.$u.get("/common/qiniu/uploadInfo").then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.token = res.token
|
||||
this.upurl = res.domain
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
uploadImage(filePath) {
|
||||
uni.showLoading({
|
||||
title: '上传中...'
|
||||
})
|
||||
|
||||
const math = 'static/' + this.$u.guid(20)
|
||||
|
||||
uni.uploadFile({
|
||||
url: 'https://up-z2.qiniup.com',
|
||||
filePath: filePath,
|
||||
name: 'file',
|
||||
formData: {
|
||||
token: this.token,
|
||||
key: 'bike/img/' + math
|
||||
},
|
||||
success: (res) => {
|
||||
const response = JSON.parse(res.data)
|
||||
if (response.key) {
|
||||
this.formData.picture = this.upurl + '/' + response.key
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 预览图片
|
||||
previewImage() {
|
||||
if (this.formData.picture) {
|
||||
uni.previewImage({
|
||||
urls: [this.formData.picture]
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 删除图片
|
||||
deletePic() {
|
||||
this.formData.picture = ''
|
||||
},
|
||||
|
||||
toSetmap() {
|
||||
if (this.formData.longitude && this.formData.latitude) {
|
||||
uni.navigateTo({
|
||||
url: `/pages_adminSet/park_map?type=${this.formData.type}&boundaryStr=${encodeURIComponent(this.formData.boundaryStr || '')}&longitude=${this.formData.longitude}&latitude=${this.formData.latitude}`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages_adminSet/park_map?type=${this.formData.type}&boundaryStr=${encodeURIComponent(this.formData.boundaryStr || '')}&longitude=${this.areaInfo.longitude}&latitude=${this.areaInfo.latitude}`
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 处理地图返回的数据
|
||||
handleMapDataReturn(boundaryStr) {
|
||||
this.formData.boundaryStr = boundaryStr
|
||||
const coordinates = JSON.parse(boundaryStr)
|
||||
|
||||
// 更新 boundary
|
||||
// this.formData.boundary = `POLYGON((${coordinates.map(coord => coord.join(' ')).join(',')}))`
|
||||
|
||||
// 计算并更新中心点
|
||||
// const center = this.calculateCenter(coordinates)
|
||||
// this.formData.latitude = String(center.latitude)
|
||||
// this.formData.longitude = String(center.longitude)
|
||||
|
||||
// 更新地图显示
|
||||
this.coordinates = coordinates
|
||||
this.updatePolygons()
|
||||
},
|
||||
|
||||
// 更新多边形
|
||||
updatePolygons() {
|
||||
if (this.coordinates.length >= 3) {
|
||||
this.polygons = [{
|
||||
points: this.coordinates.map(coord => ({
|
||||
latitude: coord[1],
|
||||
longitude: coord[0]
|
||||
})),
|
||||
strokeWidth: 2,
|
||||
strokeColor: '#007AFF',
|
||||
fillColor: '#007AFF20'
|
||||
}]
|
||||
|
||||
// 更新表单数据
|
||||
this.formData.boundaryStr = JSON.stringify(this.coordinates)
|
||||
this.formData.boundary = `POLYGON((${this.coordinates.map(coord => coord.join(' ')).join(',')}))`
|
||||
|
||||
// 计算中心点
|
||||
const center = this.calculateCenter()
|
||||
this.formData.latitude = String(center.latitude)
|
||||
this.formData.longitude = String(center.longitude)
|
||||
}
|
||||
},
|
||||
|
||||
// 计算中心点
|
||||
calculateCenter() {
|
||||
const lats = this.coordinates.map(coord => coord[1])
|
||||
const lngs = this.coordinates.map(coord => coord[0])
|
||||
return {
|
||||
latitude: (Math.max(...lats) + Math.min(...lats)) / 2,
|
||||
longitude: (Math.max(...lngs) + Math.min(...lngs)) / 2
|
||||
}
|
||||
},
|
||||
|
||||
// 提交表单
|
||||
handleSubmit() {
|
||||
if (!this.formData.parkingName) {
|
||||
return uni.showToast({
|
||||
title: '请输入区域名称',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
if (!this.formData.type) {
|
||||
return uni.showToast({
|
||||
title: '请选择区域类型',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
if (!this.formData.boundary) {
|
||||
return uni.showToast({
|
||||
title: '请在地图上绘制区域',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
const data = {
|
||||
...this.formData,
|
||||
areaId: this.areaId
|
||||
}
|
||||
|
||||
const request = this.parkingId ?
|
||||
this.$u.put('/appVerify/parking', { ...data, parkingId: this.parkingId }) :
|
||||
this.$u.post('/appVerify/parking', data)
|
||||
|
||||
request.then(res => {
|
||||
if (res.code === 200) {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.goBack()
|
||||
}, 1500)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg || '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.type-selector {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.image-upload {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.preview-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
|
||||
map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.map-tips {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
color: #007AFF;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
.u-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
523
pages_adminSet/components/CustomMap.vue
Normal file
523
pages_adminSet/components/CustomMap.vue
Normal file
|
|
@ -0,0 +1,523 @@
|
|||
<template>
|
||||
<view class="map-container">
|
||||
<u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
|
||||
<map id="map" class="map" :latitude="latitude" :longitude="longitude" :polygons="polygons" :markers="markers"
|
||||
:show-location="true" @tap="handleMapTap" @markertap="handleMarkerTap" @markerdragend="handleMarkerDrag"
|
||||
scale="14">
|
||||
</map>
|
||||
|
||||
<!-- 定位按钮 -->
|
||||
<cover-image class="location-btn" src="https://lxnapi.ccttiot.com/bike/img/static/uoxanRjBrBrtcYwRGXKa"
|
||||
@tap="moveToLocation"></cover-image>
|
||||
|
||||
<!-- 提示文本 -->
|
||||
<cover-view class="tip-text" v-if="isDrawing">
|
||||
{{ editMode ? '点击锚点进行删除' : '点击地图添加锚点，拖动锚点可调整位置' }}
|
||||
</cover-view>
|
||||
|
||||
<!-- 控制按钮组 -->
|
||||
<cover-view class="controls">
|
||||
<!-- 未开始绘制时显示开始按钮 -->
|
||||
<cover-view class="control-btn" @tap="startDrawing" v-if="!isDrawing">开始绘制</cover-view>
|
||||
|
||||
<!-- 绘制过程中显示的按钮组 -->
|
||||
<block v-else>
|
||||
<cover-view class="control-btn-group">
|
||||
<!-- 绘制锚点按钮 -->
|
||||
<cover-view class="control-btn control-btn-small" :class="{ 'control-btn-active': !editMode }"
|
||||
@tap="toggleEditMode('draw')">绘制锚点</cover-view>
|
||||
|
||||
<!-- 删除锚点按钮 -->
|
||||
<cover-view class="control-btn control-btn-small" :class="{ 'control-btn-active': editMode }"
|
||||
@tap="toggleEditMode('delete')">删除锚点</cover-view>
|
||||
</cover-view>
|
||||
|
||||
<cover-view class="control-btn-group">
|
||||
<!-- 完成按钮 -->
|
||||
<cover-view class="control-btn" @tap="finishDrawing" :class="{ 'btn-disabled': points.length < 3 }">完成绘制
|
||||
</cover-view>
|
||||
|
||||
<!-- 清除按钮 -->
|
||||
<cover-view class="control-btn control-btn-danger" @tap="clearPolygon">清除</cover-view>
|
||||
</cover-view>
|
||||
</block>
|
||||
</cover-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomMap',
|
||||
props: {
|
||||
areaInfo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.909,
|
||||
longitude: 116.397,
|
||||
points: [],
|
||||
polygons: [],
|
||||
markers: [],
|
||||
isDrawing: false,
|
||||
editMode: false,
|
||||
mapContext: null,
|
||||
initialCenter: {
|
||||
latitude: 39.909,
|
||||
longitude: 116.397
|
||||
},
|
||||
list: [
|
||||
'提示：点击"开始绘制"按钮开始绘制区域',
|
||||
'点击地图添加锚点',
|
||||
'点击锚点可删除',
|
||||
'至少需要3个锚点才能形成有效区域'
|
||||
],
|
||||
|
||||
// noticeText: '提示：点击"开始绘制"按钮开始绘制区域，点击地图添加锚点，拖动锚点可调整位置，点击锚点可删除。至少需要3个锚点才能形成有效区域。',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mapContext = uni.createMapContext('map', this)
|
||||
},
|
||||
watch: {
|
||||
areaInfo: {
|
||||
handler(newVal) {
|
||||
if (newVal.boundary && newVal.latitude && newVal.longitude) {
|
||||
this.initBoundary(newVal)
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化边界
|
||||
initBoundary(info) {
|
||||
this.initialCenter = {
|
||||
latitude: info.latitude,
|
||||
longitude: info.longitude
|
||||
}
|
||||
this.latitude = info.latitude
|
||||
this.longitude = info.longitude
|
||||
|
||||
// 解析边界字符串
|
||||
const points = info.boundaryStr.split('],[').map(pointStr => {
|
||||
// 清理首尾的方括号
|
||||
const cleanStr = pointStr.replace(/^\[|\]$/g, '')
|
||||
// 分割经纬度
|
||||
const [longitude, latitude] = cleanStr.split(',')
|
||||
|
||||
return {
|
||||
longitude: Number(longitude),
|
||||
latitude: Number(latitude)
|
||||
}
|
||||
})
|
||||
|
||||
console.log('解析后的点:', points)
|
||||
|
||||
// 设置点和标记
|
||||
this.points = points.filter(point =>
|
||||
!isNaN(point.latitude) && !isNaN(point.longitude)
|
||||
)
|
||||
|
||||
this.updateMarkers()
|
||||
this.updatePolygonWithNearestNeighbor()
|
||||
},
|
||||
|
||||
// 更新标记
|
||||
updateMarkers() {
|
||||
this.markers = this.points.map((point, index) => ({
|
||||
id: index,
|
||||
latitude: point.latitude,
|
||||
longitude: point.longitude,
|
||||
width: 20,
|
||||
height: 20,
|
||||
// callout: {
|
||||
// // content: `${index + 1}`,
|
||||
// color: '#ffffff',
|
||||
// fontSize: 14,
|
||||
// borderRadius: 4,
|
||||
// bgColor: '#007AFF',
|
||||
// padding: 4,
|
||||
// display: 'ALWAYS'
|
||||
// },
|
||||
draggable: true
|
||||
}))
|
||||
},
|
||||
|
||||
// 移动到当前位置
|
||||
async moveToLocation() {
|
||||
try {
|
||||
const [err, res] = await uni.getLocation({
|
||||
type: 'gcj02'
|
||||
});
|
||||
|
||||
if (err) {
|
||||
throw new Error('获取位置失败');
|
||||
}
|
||||
|
||||
this.latitude = res.latitude;
|
||||
this.longitude = res.longitude;
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
|
||||
this.mapContext.moveToLocation({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
success: () => {
|
||||
setTimeout(() => {
|
||||
this.mapContext.getScale({
|
||||
success: () => { }
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '定位失败,请检查定位权限',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 切换编辑模式
|
||||
toggleEditMode(mode) {
|
||||
this.editMode = mode === 'delete'
|
||||
uni.showToast({
|
||||
title: this.editMode ? '请点击锚点进行删除' : '请点击地图添加锚点',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
|
||||
// 开始绘制
|
||||
startDrawing() {
|
||||
// 保存当前中心点
|
||||
const currentCenter = {
|
||||
latitude: this.latitude,
|
||||
longitude: this.longitude
|
||||
}
|
||||
|
||||
// this.points = []
|
||||
// this.markers = []
|
||||
// this.polygons = []
|
||||
this.isDrawing = true
|
||||
this.editMode = false
|
||||
|
||||
// 恢复地图中心点
|
||||
this.$nextTick(() => {
|
||||
this.latitude = currentCenter.latitude
|
||||
this.longitude = currentCenter.longitude
|
||||
})
|
||||
|
||||
uni.showToast({
|
||||
title: '开始绘制区域',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
|
||||
// 检查点是否过近
|
||||
isPointTooClose(point1, point2, threshold = 0.0001) {
|
||||
const distance = Math.sqrt(
|
||||
Math.pow(point1.latitude - point2.latitude, 2) +
|
||||
Math.pow(point1.longitude - point2.longitude, 2)
|
||||
)
|
||||
return distance < threshold
|
||||
},
|
||||
|
||||
// 清理过近的点
|
||||
cleanNearbyPoints() {
|
||||
if (this.points.length < 2) return
|
||||
|
||||
let cleanedPoints = []
|
||||
let pointsToKeep = new Set()
|
||||
|
||||
// 第一遍：标记要保留的点
|
||||
for (let i = 0; i < this.points.length; i++) {
|
||||
let shouldKeep = true
|
||||
for (let j = 0; j < i; j++) {
|
||||
if (pointsToKeep.has(j) && this.isPointTooClose(this.points[i], this.points[j])) {
|
||||
shouldKeep = false
|
||||
break
|
||||
}
|
||||
}
|
||||
if (shouldKeep) {
|
||||
pointsToKeep.add(i)
|
||||
}
|
||||
}
|
||||
|
||||
// 第二遍：只保留标记的点
|
||||
pointsToKeep.forEach(index => {
|
||||
cleanedPoints.push(this.points[index])
|
||||
})
|
||||
|
||||
// 更新点
|
||||
this.points = cleanedPoints
|
||||
this.updateMarkers()
|
||||
},
|
||||
|
||||
// 处理地图点击
|
||||
handleMapTap(e) {
|
||||
if (!this.isDrawing || this.editMode) return
|
||||
|
||||
const { latitude, longitude } = e.detail
|
||||
|
||||
// 检查新点是否与现有点过近
|
||||
const newPoint = { latitude, longitude }
|
||||
for (let point of this.points) {
|
||||
if (this.isPointTooClose(newPoint, point)) {
|
||||
uni.showToast({
|
||||
title: '锚点位置过近',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 添加新的点
|
||||
this.points.push(newPoint)
|
||||
this.updateMarkers()
|
||||
|
||||
// 更新多边形
|
||||
this.updatePolygonWithNearestNeighbor()
|
||||
},
|
||||
|
||||
// 处理标记点击
|
||||
handleMarkerTap(e) {
|
||||
if (!this.editMode) return
|
||||
|
||||
const markerId = e.detail.markerId
|
||||
|
||||
// 删除对应的点
|
||||
this.points = this.points.filter((_, index) => index !== markerId)
|
||||
this.updateMarkers()
|
||||
|
||||
// 更新多边形
|
||||
this.updatePolygonWithNearestNeighbor()
|
||||
},
|
||||
|
||||
// 处理标记拖动
|
||||
handleMarkerDrag(e) {
|
||||
const { markerId, latitude, longitude } = e.detail
|
||||
|
||||
// 更新点的位置
|
||||
this.points[markerId] = { latitude, longitude }
|
||||
this.updateMarkers()
|
||||
|
||||
// 更新多边形
|
||||
this.updatePolygonWithNearestNeighbor()
|
||||
},
|
||||
|
||||
// 更新多边形
|
||||
updatePolygonWithNearestNeighbor() {
|
||||
if (this.points.length < 2) {
|
||||
this.polygons = []
|
||||
return
|
||||
}
|
||||
|
||||
// 清理过近的点
|
||||
this.cleanNearbyPoints()
|
||||
|
||||
// 如果点数太少，直接连接
|
||||
if (this.points.length < 3) {
|
||||
this.polygons = [{
|
||||
points: [...this.points],
|
||||
strokeWidth: 2,
|
||||
strokeColor: '#FF0000',
|
||||
fillColor: '#FF000050',
|
||||
zIndex: 1
|
||||
}]
|
||||
return
|
||||
}
|
||||
|
||||
// 计算中心点
|
||||
let centerLat = this.points.reduce((sum, p) => sum + p.latitude, 0) / this.points.length
|
||||
let centerLng = this.points.reduce((sum, p) => sum + p.longitude, 0) / this.points.length
|
||||
|
||||
// 按照与中心点的角度排序
|
||||
let sortedPoints = [...this.points].sort((a, b) => {
|
||||
let angleA = Math.atan2(a.latitude - centerLat, a.longitude - centerLng)
|
||||
let angleB = Math.atan2(b.latitude - centerLat, b.longitude - centerLng)
|
||||
return angleA - angleB
|
||||
})
|
||||
|
||||
// 闭合多边形
|
||||
sortedPoints.push(sortedPoints[0])
|
||||
|
||||
// 更新多边形
|
||||
this.polygons = [{
|
||||
points: sortedPoints,
|
||||
strokeWidth: 2,
|
||||
strokeColor: '#FF0000',
|
||||
fillColor: '#FF000050',
|
||||
zIndex: 1
|
||||
}]
|
||||
},
|
||||
|
||||
// 完成绘制
|
||||
finishDrawing() {
|
||||
if (this.points.length < 3) {
|
||||
uni.showToast({
|
||||
title: '至少需要3个锚点才能形成区域',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 最后清理一次过近的点
|
||||
this.cleanNearbyPoints()
|
||||
|
||||
// 计算中心点
|
||||
const centerLat = this.points.reduce((sum, p) => sum + Number(p.latitude), 0) / this.points.length
|
||||
const centerLng = this.points.reduce((sum, p) => sum + Number(p.longitude), 0) / this.points.length
|
||||
|
||||
// 按角度排序
|
||||
let sortedPoints = [...this.points].sort((a, b) => {
|
||||
let angleA = Math.atan2(a.latitude - centerLat, a.longitude - centerLng)
|
||||
let angleB = Math.atan2(b.latitude - centerLat, b.longitude - centerLng)
|
||||
return angleA - angleB
|
||||
})
|
||||
|
||||
// 格式化坐标点，保留5位小数
|
||||
const formattedPoints = sortedPoints.map(point => ({
|
||||
latitude: Number(Number(point.latitude).toFixed(5)),
|
||||
longitude: Number(Number(point.longitude).toFixed(5))
|
||||
}))
|
||||
|
||||
// 只关闭编辑模式，保留绘制结果
|
||||
this.isDrawing = false
|
||||
this.editMode = false
|
||||
|
||||
// 更新多边形显示
|
||||
this.polygons = [{
|
||||
points: formattedPoints,
|
||||
strokeWidth: 2,
|
||||
strokeColor: '#FF0000',
|
||||
fillColor: '#FF000050',
|
||||
zIndex: 1
|
||||
}]
|
||||
|
||||
// 发送给父组件
|
||||
this.$emit('on-polygon-complete', {
|
||||
points: formattedPoints,
|
||||
polygon: this.polygons[0]
|
||||
})
|
||||
},
|
||||
|
||||
// 清除绘制
|
||||
clearPolygon() {
|
||||
const currentCenter = {
|
||||
latitude: this.latitude,
|
||||
longitude: this.longitude
|
||||
}
|
||||
|
||||
this.points = []
|
||||
this.markers = []
|
||||
this.polygons = []
|
||||
this.isDrawing = false
|
||||
this.editMode = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.latitude = currentCenter.latitude
|
||||
this.longitude = currentCenter.longitude
|
||||
})
|
||||
|
||||
uni.showToast({
|
||||
title: '已清除绘制',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.location-btn {
|
||||
position: fixed;
|
||||
right: 30rpx;
|
||||
bottom: 300rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
position: fixed;
|
||||
top: 40rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: #ffffff;
|
||||
padding: 16rpx 30rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.control-btn-group {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.control-btn-small {
|
||||
min-width: 120rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: fixed;
|
||||
bottom: 60rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
pointer-events: auto;
|
||||
min-width: 200rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
margin: 0 10rpx;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.control-btn-danger {
|
||||
background-color: #ff4444;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.control-btn-active {
|
||||
background-color: #007AFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
opacity: 0.5;
|
||||
background-color: #cccccc;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
394
pages_adminSet/components/EditMap.vue
Normal file
394
pages_adminSet/components/EditMap.vue
Normal file
|
|
@ -0,0 +1,394 @@
|
|||
<template>
|
||||
<view class="map-container">
|
||||
<u-notice-bar mode="horizontal" :list="tipsList"></u-notice-bar>
|
||||
<map
|
||||
id="editMap"
|
||||
class="map"
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:polygons="polygons"
|
||||
:markers="markers"
|
||||
:show-location="true"
|
||||
@tap="handleMapTap"
|
||||
@markertap="handleMarkerTap"
|
||||
@markerdragend="handleMarkerDrag"
|
||||
scale="19"
|
||||
></map>
|
||||
|
||||
<!-- 定位按钮 -->
|
||||
<cover-image
|
||||
class="location-btn"
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uoxanRjBrBrtcYwRGXKa"
|
||||
@tap="moveToLocation"
|
||||
></cover-image>
|
||||
|
||||
<!-- 提示文本 -->
|
||||
<cover-view class="tip-text" v-if="isDrawing">
|
||||
{{ editMode ? '点击锚点进行删除' : '点击地图添加锚点，拖动锚点可调整位置' }}
|
||||
</cover-view>
|
||||
|
||||
<!-- 控制按钮组 -->
|
||||
<cover-view class="controls">
|
||||
<!-- 未开始绘制时显示开始按钮 -->
|
||||
<cover-view class="control-btn" @tap="startDrawing" v-if="!isDrawing">
|
||||
开始绘制
|
||||
</cover-view>
|
||||
|
||||
<!-- 绘制过程中显示的按钮组 -->
|
||||
<block v-else>
|
||||
<cover-view class="control-btn-group">
|
||||
<cover-view
|
||||
class="control-btn"
|
||||
:class="{'control-btn-active': !editMode}"
|
||||
@tap="toggleEditMode('draw')"
|
||||
>
|
||||
绘制锚点
|
||||
</cover-view>
|
||||
|
||||
<cover-view
|
||||
class="control-btn"
|
||||
:class="{'control-btn-active': editMode}"
|
||||
@tap="toggleEditMode('delete')"
|
||||
>
|
||||
删除锚点
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
|
||||
<cover-view class="control-btn-group">
|
||||
<cover-view
|
||||
class="control-btn"
|
||||
@tap="finishDrawing"
|
||||
:class="{'btn-disabled': points.length < 3}"
|
||||
>
|
||||
完成绘制
|
||||
</cover-view>
|
||||
|
||||
<cover-view
|
||||
class="control-btn control-btn-danger"
|
||||
@tap="clearPolygon"
|
||||
>
|
||||
清除
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</block>
|
||||
</cover-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EditMap',
|
||||
props: {
|
||||
boundaryStr: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
longitude: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
latitude: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// latitude: parseFloat(this.latitude),
|
||||
// longitude: parseFloat(this.longitude),
|
||||
points: [],
|
||||
polygons: [],
|
||||
markers: [],
|
||||
isDrawing: false,
|
||||
editMode: false,
|
||||
mapContext: null,
|
||||
tipsList: [
|
||||
'提示：点击"开始绘制"按钮开始绘制区域',
|
||||
'点击地图添加锚点',
|
||||
'点击锚点可删除',
|
||||
'至少需要3个锚点才能形成有效区域'
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mapContext = uni.createMapContext('editMap', this)
|
||||
this.initBoundary()
|
||||
},
|
||||
watch: {
|
||||
boundaryStr: {
|
||||
handler() {
|
||||
this.initBoundary()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化边界数据
|
||||
initBoundary() {
|
||||
if (!this.boundaryStr) return
|
||||
|
||||
try {
|
||||
const points = JSON.parse(this.boundaryStr)
|
||||
if (Array.isArray(points) && points.length > 0) {
|
||||
this.points = points.map(point => ({
|
||||
longitude: Number(point[0]),
|
||||
latitude: Number(point[1])
|
||||
})).filter(point =>
|
||||
!isNaN(point.latitude) && !isNaN(point.longitude)
|
||||
)
|
||||
|
||||
// 设置地图中心点
|
||||
|
||||
|
||||
this.updateMarkers()
|
||||
this.updatePolygonWithNearestNeighbor()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('解析边界数据失败:', error)
|
||||
}
|
||||
},
|
||||
|
||||
// 更新标记点
|
||||
updateMarkers() {
|
||||
this.markers = this.points.map((point, index) => ({
|
||||
id: index,
|
||||
latitude: point.latitude,
|
||||
longitude: point.longitude,
|
||||
width: 20,
|
||||
height: 20,
|
||||
draggable: true
|
||||
}))
|
||||
},
|
||||
|
||||
// 移动到当前位置
|
||||
async moveToLocation() {
|
||||
try {
|
||||
const [err, res] = await uni.getLocation({ type: 'gcj02' })
|
||||
if (err) throw new Error('获取位置失败')
|
||||
|
||||
this.latitude = res.latitude
|
||||
this.longitude = res.longitude
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 100))
|
||||
this.mapContext.moveToLocation({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude
|
||||
})
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '定位失败,请检查定位权限',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 开始绘制
|
||||
startDrawing() {
|
||||
this.isDrawing = true
|
||||
this.editMode = false
|
||||
if (this.points.length === 0) {
|
||||
uni.showToast({
|
||||
title: '请点击地图添加锚点',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 切换编辑模式
|
||||
toggleEditMode(mode) {
|
||||
this.editMode = mode === 'delete'
|
||||
uni.showToast({
|
||||
title: this.editMode ? '请点击锚点进行删除' : '请点击地图添加锚点',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
|
||||
// 处理地图点击
|
||||
handleMapTap(e) {
|
||||
if (!this.isDrawing || this.editMode) return
|
||||
|
||||
const { latitude, longitude } = e.detail
|
||||
this.points.push({ latitude, longitude })
|
||||
this.updateMarkers()
|
||||
this.updatePolygonWithNearestNeighbor()
|
||||
},
|
||||
|
||||
// 处理标记点击（删除）
|
||||
handleMarkerTap(e) {
|
||||
if (!this.editMode) return
|
||||
|
||||
const markerId = e.detail.markerId
|
||||
this.points = this.points.filter((_, index) => index !== markerId)
|
||||
this.updateMarkers()
|
||||
this.updatePolygonWithNearestNeighbor()
|
||||
},
|
||||
|
||||
// 处理标记拖动
|
||||
handleMarkerDrag(e) {
|
||||
const { markerId, latitude, longitude } = e.detail
|
||||
this.points[markerId] = { latitude, longitude }
|
||||
this.updateMarkers()
|
||||
this.updatePolygonWithNearestNeighbor()
|
||||
},
|
||||
|
||||
// 更新多边形
|
||||
updatePolygonWithNearestNeighbor() {
|
||||
if (this.points.length < 3) {
|
||||
this.polygons = []
|
||||
return
|
||||
}
|
||||
|
||||
// 计算中心点
|
||||
const centerLat = this.points.reduce((sum, p) => sum + p.latitude, 0) / this.points.length
|
||||
const centerLng = this.points.reduce((sum, p) => sum + p.longitude, 0) / this.points.length
|
||||
|
||||
// 按角度排序
|
||||
let sortedPoints = [...this.points].sort((a, b) => {
|
||||
let angleA = Math.atan2(a.latitude - centerLat, a.longitude - centerLng)
|
||||
let angleB = Math.atan2(b.latitude - centerLat, b.longitude - centerLng)
|
||||
return angleA - angleB
|
||||
})
|
||||
|
||||
// 闭合多边形
|
||||
sortedPoints.push(sortedPoints[0])
|
||||
|
||||
this.polygons = [{
|
||||
points: sortedPoints,
|
||||
strokeWidth: 2,
|
||||
strokeColor: '#FF0000',
|
||||
fillColor: '#FF000050',
|
||||
zIndex: 1
|
||||
}]
|
||||
},
|
||||
|
||||
// 完成绘制
|
||||
finishDrawing() {
|
||||
if (this.points.length < 3) {
|
||||
uni.showToast({
|
||||
title: '至少需要3个锚点才能形成区域',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 计算中心点
|
||||
const centerLat = this.points.reduce((sum, p) => sum + p.latitude, 0) / this.points.length
|
||||
const centerLng = this.points.reduce((sum, p) => sum + p.longitude, 0) / this.points.length
|
||||
|
||||
// 按角度排序
|
||||
let sortedPoints = [...this.points].sort((a, b) => {
|
||||
let angleA = Math.atan2(a.latitude - centerLat, a.longitude - centerLng)
|
||||
let angleB = Math.atan2(b.latitude - centerLat, b.longitude - centerLng)
|
||||
return angleA - angleB
|
||||
})
|
||||
|
||||
// 返回排序后的坐标点数组
|
||||
const coordinates = sortedPoints.map(point => [
|
||||
point.longitude,
|
||||
point.latitude
|
||||
])
|
||||
|
||||
this.$emit('on-complete', JSON.stringify(coordinates))
|
||||
|
||||
// 清除绘制状态但保留图形
|
||||
this.isDrawing = false
|
||||
this.editMode = false
|
||||
},
|
||||
|
||||
// 清除绘制
|
||||
clearPolygon() {
|
||||
this.points = []
|
||||
this.markers = []
|
||||
this.polygons = []
|
||||
this.isDrawing = false
|
||||
this.editMode = false
|
||||
|
||||
uni.showToast({
|
||||
title: '已清除绘制',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.location-btn {
|
||||
position: fixed;
|
||||
right: 30rpx;
|
||||
bottom: 300rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
position: fixed;
|
||||
top: 40rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: #ffffff;
|
||||
padding: 16rpx 30rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: fixed;
|
||||
bottom: 60rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.control-btn-group {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
min-width: 200rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.control-btn-active {
|
||||
background-color: #007AFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.control-btn-danger {
|
||||
background-color: #ff4444;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
opacity: 0.5;
|
||||
background-color: #cccccc;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
97
pages_adminSet/map_set.vue
Normal file
97
pages_adminSet/map_set.vue
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar title="停车区列表" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
||||
height='45'></u-navbar>
|
||||
<custom-map :areaInfo="areaInfo" @on-polygon-complete="handlePolygonComplete"></custom-map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomMap from './components/CustomMap.vue'
|
||||
export default {
|
||||
components: {
|
||||
CustomMap
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
areaId: '',
|
||||
areaInfo: {}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
if (e.areaId) {
|
||||
this.areaId = e.areaId
|
||||
this.getArea()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getArea() {
|
||||
this.$u.get(`/app/area/` + this.areaId).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.areaInfo = res.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg || '获取区域信息失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.showToast({
|
||||
title: '获取区域信息失败',
|
||||
icon: 'none'
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
handlePolygonComplete(data) {
|
||||
// 构造边界字符串
|
||||
const boundaryStr = data.points.map(point =>
|
||||
`[${point.longitude},${point.latitude}]`
|
||||
).join(',')
|
||||
|
||||
// 构造请求数据
|
||||
const params = {
|
||||
...this.areaInfo,
|
||||
boundaryStr: `[${boundaryStr}]` // 直接使用 boundaryStr
|
||||
}
|
||||
// 发送保存请求
|
||||
this.$u.put('/appVerify/areaEdit', params).then(res => {
|
||||
if (res.code === 200) {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg || '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
118
pages_adminSet/park_map.vue
Normal file
118
pages_adminSet/park_map.vue
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar :title="getTitle" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='45'>
|
||||
</u-navbar>
|
||||
|
||||
<edit-map
|
||||
:boundary-str="boundaryStr"
|
||||
:longitude="longitude"
|
||||
:latitude="latitude"
|
||||
@on-complete="handlePolygonComplete"
|
||||
></edit-map>
|
||||
|
||||
<view class="bottom-btn">
|
||||
<u-button type="primary" @click="confirmEdit">确认修改</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EditMap from './components/EditMap.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditMap
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
type: '',
|
||||
boundaryStr: '',
|
||||
newBoundaryStr: null,
|
||||
longitude: '',
|
||||
latitude: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTitle() {
|
||||
const typeMap = {
|
||||
'1': '停车区',
|
||||
'2': '禁停区',
|
||||
'3': '禁行区'
|
||||
}
|
||||
return `编辑${typeMap[this.type] || '区域'}坐标`
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.type = e.type
|
||||
|
||||
// 解析传入的边界数据
|
||||
if (e.boundaryStr) {
|
||||
try {
|
||||
this.boundaryStr = decodeURIComponent(e.boundaryStr)
|
||||
} catch (error) {
|
||||
console.error('解析边界数据失败:', error)
|
||||
}
|
||||
}
|
||||
this.longitude = parseFloat(e.longitude)
|
||||
this.latitude = parseFloat(e.latitude)
|
||||
},
|
||||
methods: {
|
||||
// 处理多边形绘制完成
|
||||
handlePolygonComplete(boundaryStr) {
|
||||
this.newBoundaryStr = boundaryStr
|
||||
// 自动点击确认按钮
|
||||
this.confirmEdit()
|
||||
},
|
||||
|
||||
// 确认修改
|
||||
confirmEdit() {
|
||||
if (!this.newBoundaryStr) {
|
||||
return uni.showToast({
|
||||
title: '请完成区域绘制',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 返回数据给上一页
|
||||
const pages = getCurrentPages()
|
||||
const prevPage = pages[pages.length - 2]
|
||||
if (prevPage && prevPage.$vm) {
|
||||
prevPage.$vm.handleMapDataReturn(this.newBoundaryStr)
|
||||
|
||||
// 添加延时确保数据传递完成
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 100)
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bottom-btn {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.u-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -297,6 +297,22 @@
|
|||
设置车辆电量低于多少时自动生成的换电维护工单
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_li" @click="toMap()">
|
||||
<view class="tops">
|
||||
<view class="card_left">
|
||||
电子围栏设置
|
||||
</view>
|
||||
<view class="card_right">
|
||||
<view class="iconfont icon-xiangyou1">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="tips" style="text-align: left;">
|
||||
设置车辆可以正常行驶的区域
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
|
@ -343,6 +359,11 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
toMap(){
|
||||
uni.navigateTo({
|
||||
url:'/pages_adminSet/map_set?areaId='+this.areaId
|
||||
})
|
||||
},
|
||||
addService() {
|
||||
if (this.customServices.length < 3) {
|
||||
this.customServices.push({
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user