1189 lines
31 KiB
Vue
1189 lines
31 KiB
Vue
<template>
|
|
<view class="page">
|
|
|
|
|
|
<u-navbar title="地图" :is-back='false' :border-bottom="false" :background="bgc" title-color='#2E4975'
|
|
title-size='36' height='45'></u-navbar>
|
|
<view @touchmove.stop.prevent="() => { }">
|
|
<view class="slider">
|
|
<view class="tit">
|
|
电量区间
|
|
</view>
|
|
<view style="width: 650rpx;margin: 0 auto;">
|
|
<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"
|
|
@regionchange="onMapRegionChange"></slider-range>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
|
:circles="circles" :show-location="true" :markers="markers" :polygon="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>
|
|
</map>
|
|
<view class="park" @click="toggleIconAndCallout">
|
|
<image src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="park" @click="showdevList = !showdevList" style="bottom: 600rpx;">
|
|
<image src="https://lxnapi.ccttiot.com/bike/img/static/uSMkyrHwO1sybH8diPuF" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<view @touchmove.stop.prevent="() => { }">
|
|
<view class="btn_box">
|
|
<view class="btn1" @click="qecodelock()">
|
|
车辆扫码
|
|
</view>
|
|
<view class="btn2" @click="topage()">
|
|
车辆搜索
|
|
</view>
|
|
</view>
|
|
<view class="decice_cont">
|
|
<view class="cont" @click="changeidx('-0')">
|
|
<view class="text" :class="statusidx == '-0' ? 'act1' : ''">投放中</view>
|
|
<view class="text" :class="statusidx == '-0' ? 'act1' : ''">{{ deviceNum.inOperation }}</view>
|
|
</view>
|
|
<view class="cont" @click="changeidx('1')">
|
|
<view class="text" :class="statusidx == 1 ? 'act1' : ''">待租</view>
|
|
<view class="text" :class="statusidx == 1 ? 'act1' : ''">{{ deviceNum.normalNum }}</view>
|
|
</view>
|
|
<view class="cont" @click="changeidx('2')">
|
|
<view class="text" :class="statusidx == 2 ? 'act1' : ''">预约中</view>
|
|
<view class="text" :class="statusidx == 2 ? 'act1' : ''">{{ deviceNum.inAppointmentNum }}</view>
|
|
</view>
|
|
<view class="cont" @click="changeidx('3')">
|
|
<view class="text" :class="statusidx == 3 ? 'act1' : ''">骑行中</view>
|
|
<view class="text" :class="statusidx == 3 ? 'act1' : ''">{{ deviceNum.ridingNum }}</view>
|
|
</view>
|
|
<view class="cont" @click="changeidx('4')">
|
|
<view class="text" :class="statusidx == 4 ? 'act1' : ''">临时锁车</view>
|
|
<view class="text" :class="statusidx == 4 ? 'act1' : ''">{{ deviceNum.temporarilyLockNum }}</view>
|
|
</view>
|
|
<view class="cont" @click="changeidx('8')">
|
|
<view class="text" :class="statusidx == 8 ? 'act1' : ''">禁用中</view>
|
|
<view class="text" :class="statusidx == 8 ? 'act1' : ''">{{ deviceNum.disabledNum }}</view>
|
|
</view>
|
|
<view class="cont" @click="changeidx('9')">
|
|
<view class="text" :class="statusidx == 9 ? 'act1' : ''">离线</view>
|
|
<view class="text" :class="statusidx == 9 ? 'act1' : ''">{{ deviceNum.offlineNum }}</view>
|
|
</view>
|
|
<view class="cont" @click="changeidx('0')">
|
|
<view class="text" :class="statusidx == '0' ? 'act1' : ''">仓库中</view>
|
|
<view class="text" :class="statusidx == '0' ? 'act1' : ''">{{ deviceNum.inStashNum }}</view>
|
|
</view>
|
|
<view class="cont" @click="changeidx('7')">
|
|
<view class="text" :class="statusidx == 7 ? 'act1' : ''">全部设备</view>
|
|
<view class="text" :class="statusidx == 7 ? 'act1' : ''">{{ deviceNum.allNum }}</view>
|
|
</view>
|
|
<view class="cont" @click="changeidx('6')">
|
|
<view class="text" :class="statusidx == 6 ? 'act1' : ''">调度中</view>
|
|
<view class="text" :class="statusidx == 6 ? 'act1' : ''">{{ deviceNum.dispatchNum }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fixdivce" v-if="nearbyMarkers.length > 1 && showdevList">
|
|
<view class="scrollable-content">
|
|
<view class="divce_li" v-for="(item, index) in nearbyMarkers" :key="index" @click="tapsn(item.sn)">
|
|
<!-- <view class="left_img">
|
|
<image src="https://lxnapi.ccttiot.com/bike/img/static/uEW2Zm3sO8E5eqOf2wwl" mode="aspectFit"></image>
|
|
</view> -->
|
|
<view class="right_cont">
|
|
<view class="right_top">
|
|
<view class="right_top_right">
|
|
牌:{{ item.vehicleNum }}
|
|
</view>
|
|
<view class="right_top_left">
|
|
<image src=" https://lxnapi.ccttiot.com/bike/img/static/u9pggdTCxcZgUTNsEvXQ"
|
|
mode="aspectFit" v-if="item.remainingPower <= 39"></image>
|
|
<image src="https://lxnapi.ccttiot.com/bike/img/static/uu1004113wsUShxo11X9"
|
|
mode="aspectFit" v-if="item.remainingPower >= 40 && item.remainingPower <= 69">
|
|
</image>
|
|
<image src="https://lxnapi.ccttiot.com/bike/img/static/uRI1LMpzqfIM060BO7np"
|
|
mode="aspectFit" v-if="item.remainingPower >= 70 && item.remainingPower <= 100">
|
|
</image>
|
|
{{ item.remainingPower }}%
|
|
</view>
|
|
|
|
</view>
|
|
<view class="right_bot">
|
|
SN:{{ item.sn }}
|
|
<span>{{ status(item) }}</span>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<tab-bar :indexs='1' style=""></tab-bar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import TabBar from '@/pages_admin/components/tab-bar/tab-bar.vue';
|
|
import SliderRange from '@/pages_admin/components/primewind-sliderrange/index.vue'
|
|
let timerId;
|
|
var appMap = null;
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#F7FAFE",
|
|
},
|
|
latitude: 0,
|
|
longitude: 0,
|
|
isMap: false,
|
|
zoomSize: 13,
|
|
markers: [],
|
|
polyline: [],
|
|
polygons: [],
|
|
fixdata: [],
|
|
eledata: [],
|
|
listData: [],
|
|
infonum: {},
|
|
rangeMin: 0,
|
|
rangMax: 100,
|
|
rangeValue: [0, 100],
|
|
status0: [], //未上架
|
|
status1: [], //正常
|
|
status2: [], //预约中
|
|
status3: [], //骑行中
|
|
status4: [], //临时锁车
|
|
status8: [], //下线
|
|
status9: [], //离线
|
|
markdata: {
|
|
|
|
|
|
|
|
},
|
|
statusidx: '-0',
|
|
deviceNum: {},
|
|
areaId: 0,
|
|
showIconAndCallout: false,
|
|
nearbyMarkers: [],
|
|
showdevList: false,
|
|
circles: [], // 用于存储圆形区域的数据
|
|
|
|
|
|
}
|
|
},
|
|
components: {
|
|
SliderRange, TabBar
|
|
},
|
|
onShow() {
|
|
this.$store.dispatch('userInfo', this.$u).then(() => {
|
|
|
|
// 执行其他操作...
|
|
});
|
|
|
|
|
|
// this.getareaid()
|
|
|
|
this.getmarks()
|
|
this.allVehicleNum()
|
|
|
|
|
|
// this.getmarks();
|
|
},
|
|
onLoad() {
|
|
if (uni.getStorageSync('adminAreaid')) {
|
|
this.areaId = uni.getStorageSync('adminAreaid')
|
|
this.getArea()
|
|
|
|
}
|
|
|
|
let that = this
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function (lb) {
|
|
|
|
|
|
// that.latitude = Number(lb.latitude.toFixed(5)) - 0.005
|
|
// that.longitude = Number(lb.longitude.toFixed(5)) + 0.005
|
|
console.log(that.areaInfo, 'that.areaInfo');
|
|
// that.setMapScale()
|
|
// that.getmarks()
|
|
|
|
|
|
//
|
|
},
|
|
fail: function (error) {
|
|
uni.showToast({
|
|
title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
// that.getmarks()
|
|
// 在这里处理获取位置信息失败的情况
|
|
}
|
|
|
|
})
|
|
},
|
|
computed: {
|
|
userId() {
|
|
return this.$store.getters.userId;
|
|
},
|
|
},
|
|
methods: {
|
|
status(item) {
|
|
if (item.status == 0) {
|
|
return '仓库中'
|
|
} else if (item.status == 1) {
|
|
return '待租'
|
|
} else if (item.status == 2) {
|
|
return '预约中'
|
|
} else if (item.status == 3) {
|
|
return '骑行中'
|
|
} else if (item.status == 4) {
|
|
return '临时锁车中'
|
|
} else if (item.status == 6) {
|
|
return '调度中'
|
|
} else if (item.status == 7) {
|
|
return '未绑定'
|
|
} else if (item.status == 8) {
|
|
return '禁用中'
|
|
}
|
|
},
|
|
|
|
|
|
onMapRegionChange(event) {
|
|
// console.log('regionchange', event)
|
|
this.getCenterLocation()
|
|
// 你可以在这里执行你需要的操作
|
|
},
|
|
getCenterLanLat() {
|
|
let that = this
|
|
uni.createMapContext("map", this).getCenterLocation({
|
|
type: 'gcj02',
|
|
success: (res) => {
|
|
|
|
},
|
|
fail: (err) => { }
|
|
})
|
|
},
|
|
getCenterLocation() {
|
|
const mapContext = uni.createMapContext('map');
|
|
mapContext.getCenterLocation({
|
|
success: (res) => {
|
|
console.log('中心点的经纬度：', res.longitude, res.latitude);
|
|
this.getNearbyMarkers(res.latitude, res.longitude);
|
|
},
|
|
fail: (err) => {
|
|
console.error('获取中心点定位失败：', err);
|
|
}
|
|
});
|
|
},
|
|
getCenter: function () {
|
|
var _that = this;
|
|
appMap.getCurrentCenter(
|
|
function (state, point) {
|
|
if (0 == state) {
|
|
// 反编码
|
|
var point = new plus.maps.Point(point["longitude"], point["latitude"]);
|
|
plus.maps.Map.reverseGeocode(point, {}, function (event) {
|
|
var address = event.address; // 转换后的地理位置
|
|
var coord = event.coord; // 转换后的坐标信息
|
|
var coordType = event.coordType; // 转换后的坐标系类型
|
|
console.log("Address:" + address);
|
|
console.log("coord", coord);
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "确定:" + address + "?",
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
// 业务逻辑...
|
|
} else if (res.cancel) { }
|
|
}
|
|
})
|
|
}, function (e) {
|
|
// console.log("Failed:" + JSON.stringify(e));
|
|
uni.showToast({
|
|
title: '反编码失败' + JSON.stringify(e)
|
|
});
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "获取经纬度失败!" + state
|
|
})
|
|
}
|
|
}
|
|
);
|
|
},
|
|
getNearbyMarkers(clickedLat, clickedLon) {
|
|
// console.log(clickedLat, clickedLon);
|
|
|
|
// 只有在 showdevList 为 true 的时候才显示圆形区域
|
|
if (this.showdevList) {
|
|
const nearbyMarkers = this.listData.filter(item => {
|
|
if (item.latitude && item.longitude) {
|
|
const distance = this.haversineDistance(
|
|
parseFloat(clickedLat),
|
|
parseFloat(clickedLon),
|
|
parseFloat(item.latitude),
|
|
parseFloat(item.longitude)
|
|
);
|
|
return distance <= 100;
|
|
}
|
|
return false;
|
|
});
|
|
|
|
// 更新 circles 数组来绘制淡灰色的圆形区域
|
|
this.circles = [{
|
|
latitude: clickedLat,
|
|
longitude: clickedLon,
|
|
color: '#fff', // 圆形边框颜色（淡灰色）
|
|
fillColor: '#00000010', // 圆形填充颜色（淡灰色）
|
|
radius: 100, // 圆的半径（单位：米）
|
|
strokeWidth: 1
|
|
}];
|
|
|
|
this.nearbyMarkers = nearbyMarkers;
|
|
// console.log('Nearby markers within 100 meters:', nearbyMarkers);
|
|
} else {
|
|
// 当 showdevList 为 false 时，清空 circles 数组
|
|
this.circles = [];
|
|
}
|
|
},
|
|
haversineDistance(lat1, lon1, lat2, lon2) {
|
|
const R = 6371e3; // Earth radius in meters
|
|
const toRad = angle => angle * Math.PI / 180;
|
|
const dLat = toRad(lat2 - lat1);
|
|
const dLon = toRad(lon2 - lon1);
|
|
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
|
Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
|
|
Math.sin(dLon / 2) * Math.sin(dLon / 2);
|
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
return R * c;
|
|
},
|
|
getareaid() {
|
|
this.$u.post('/appVerify/getAreaId').then((res) => {
|
|
if (res.code == 200) {
|
|
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
|
// this.areaId=res.data
|
|
|
|
// console.log(this.polyline);
|
|
} else {
|
|
this.areaId = 14
|
|
this.getArea()
|
|
|
|
this.allVehicleNum()
|
|
}
|
|
}).catch(error => {
|
|
|
|
});
|
|
},
|
|
async setMapScale(e, val) {
|
|
let mapContext = uni.createMapContext('map', this);
|
|
let setScale = () => {
|
|
return new Promise((resolve, reject) => {
|
|
mapContext.getScale({
|
|
success: r => {
|
|
resolve()
|
|
}
|
|
})
|
|
})
|
|
};
|
|
await setScale();
|
|
mapContext.moveToLocation({
|
|
success: (res) => {
|
|
const timer = setTimeout(() => {
|
|
clearTimeout(timer);
|
|
}, 500);
|
|
},
|
|
})
|
|
},
|
|
tapsn(sn) {
|
|
uni.navigateTo({
|
|
url: '/pages_admin/order/device_detail?id=' + sn
|
|
})
|
|
},
|
|
qecodelock() {
|
|
uni.scanCode({
|
|
onlyFromCamera: true,
|
|
scanType: ['qrCode'],
|
|
success: res => {
|
|
|
|
let sn = null;
|
|
let queryParams = res.result.split('?')[1];
|
|
if (queryParams) {
|
|
let params = queryParams.split('&');
|
|
params.forEach(param => {
|
|
let [key, value] = param.split('=');
|
|
if (key === 'sn') {
|
|
sn = value;
|
|
}
|
|
});
|
|
}
|
|
|
|
this.sn = sn
|
|
if (this.sn != '') {
|
|
this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
|
|
console.log(res, 'rererer');
|
|
if (res.code === 200) {
|
|
// console.log(this.areaId,);
|
|
if (res.data.areaId == this.areaId) {
|
|
uni.navigateTo({
|
|
url: '/pages_admin/order/device_detail?id=' + this
|
|
.sn
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '无效车辆',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
fail: err => {
|
|
console.error('扫描失败：', err);
|
|
uni.showToast({
|
|
title: '扫描失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
topage() {
|
|
uni.navigateTo({
|
|
url: '/pages_admin/order/search_device'
|
|
})
|
|
},
|
|
allVehicleNum() {
|
|
let data = {
|
|
powerStart: this.rangeValue[0],
|
|
powerEnd: this.rangeValue[1],
|
|
areaId: this.areaId
|
|
}
|
|
this.$u.get('/appVerify/allVehicleNum?', data).then((res) => {
|
|
if (res.code === 200) {
|
|
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
|
this.deviceNum = res.data
|
|
// console.log(this.polyline);
|
|
}
|
|
}).catch(error => {
|
|
console.error("Error fetching area data:", error);
|
|
});
|
|
},
|
|
changeidx(ids) {
|
|
this.statusidx = ids
|
|
this.getmarks()
|
|
},
|
|
|
|
format(val) {
|
|
return val + '%'
|
|
},
|
|
handleRangeChange(e) {
|
|
// 每次滑动时清除之前的定时器
|
|
clearTimeout(timerId);
|
|
// 设置一个新的定时器，在滑动停止后 500ms 执行 getmarks 方法
|
|
timerId = setTimeout(() => {
|
|
this.rangeValue = e;
|
|
this.getmarks();
|
|
}, 500);
|
|
},
|
|
onMarkerTap(e) {
|
|
if (e.type === 'markerTap') {
|
|
console.log('点击了标记：', e.markerId);
|
|
// 这里可以根据需要处理点击标记的逻辑
|
|
// 阻止事件冒泡
|
|
|
|
this.sn = e.markerId
|
|
for (let i = 0; i < this.listData.length; i++) {
|
|
|
|
if (this.listData[i].sn == this.sn) {
|
|
uni.navigateTo({
|
|
url: '/pages_admin/order/device_detail?id=' + this.sn
|
|
})
|
|
}
|
|
}
|
|
// this.listData
|
|
|
|
}
|
|
|
|
},
|
|
|
|
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
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
getArea() {
|
|
|
|
let id = this.areaId
|
|
this.$u.get("/app/area/" + id).then((res) => {
|
|
|
|
if (res.code == 200) {
|
|
this.latitude = res.data.latitude
|
|
this.longitude = res.data.longitude
|
|
// this.areaInfo = res.data
|
|
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
|
|
this.polyline.push(polylines)
|
|
|
|
setTimeout(() => {
|
|
this.getParking()
|
|
}, 500)
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
},
|
|
convertBoundaryToPolylines(boundaries, num) {
|
|
// const polyline = {
|
|
// points: points,
|
|
// color: "#22FF0090", // 使用 color 替代 fillColor
|
|
// fillColor: '#55888899', // 使用 borderWidth 替代 strokeWidth
|
|
|
|
// width: 1, // 使用 borderWidth 替代 strokeWidth
|
|
// zIndex: 1
|
|
// };
|
|
|
|
|
|
const colorMap = {
|
|
1: {
|
|
fillColor: "#3A7EDB70",
|
|
strokeColor: "#3A7EDB90"
|
|
},
|
|
2: {
|
|
fillColor: "#FFF5D670",
|
|
strokeColor: "#FFC10790"
|
|
},
|
|
3: {
|
|
fillColor: "#FFD1CF70",
|
|
strokeColor: "#FF473E90"
|
|
}
|
|
};
|
|
|
|
if (!colorMap[num]) {
|
|
console.error("Invalid type number:", num);
|
|
return [];
|
|
}
|
|
|
|
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: parseFloat(coord[1]),
|
|
longitude: parseFloat(coord[0])
|
|
}));
|
|
return {
|
|
points: points,
|
|
fillColor: colorMap[num].fillColor,
|
|
color: colorMap[num].strokeColor,
|
|
width: 1, //描边宽度
|
|
zIndex: 1, //层级
|
|
};
|
|
}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
|
|
|
|
},
|
|
markstause() {
|
|
const createMarker = (item, iconConfig) => {
|
|
return {
|
|
id: String(item.sn), // 支付宝要求 id 为字符串
|
|
latitude: Number(item.latitude),
|
|
longitude: Number(item.longitude),
|
|
width: 30,
|
|
height: 34,
|
|
iconPath: item.onlineStatus == 0 ? iconConfig.offline : iconConfig.online,
|
|
label: {
|
|
content: item.remainingPower + '%',
|
|
color: iconConfig.labelColor || '#ffffff',
|
|
fontSize: 12,
|
|
borderRadius: 6,
|
|
bgColor: iconConfig.labelBgColor || '#000000',
|
|
padding: 10,
|
|
display: 'BYCLICK',
|
|
// anchorX: -15,
|
|
anchorY: -30,
|
|
y: -30
|
|
}
|
|
}
|
|
}
|
|
|
|
const iconConfigs = {
|
|
status0: {
|
|
online: 'https://lxnapi.ccttiot.com/bike/img/static/uocjFo8Ar2BJVpzC2G2f',
|
|
offline: 'https://lxnapi.ccttiot.com/bike/img/static/uQRng4QNKA38Amk8Wgt5',
|
|
labelColor: '#ffffff',
|
|
labelBgColor: '#000000'
|
|
},
|
|
status1: {
|
|
online: 'https://lxnapi.ccttiot.com/bike/img/static/uheL17wVZn24BwCwEztT',
|
|
offline: 'https://lxnapi.ccttiot.com/bike/img/static/uzhMeExOQJbMcZtrfGUV',
|
|
labelColor: '#2679D1',
|
|
labelBgColor: '#D4ECFF'
|
|
},
|
|
status2: {
|
|
online: 'https://lxnapi.ccttiot.com/bike/img/static/u460R1NKWHEpHbt0U4H7',
|
|
offline: 'https://lxnapi.ccttiot.com/bike/img/static/uR3DQEssiK62ovhh88y8',
|
|
labelColor: '#2679D1',
|
|
labelBgColor: '#D4ECFF'
|
|
},
|
|
status3: {
|
|
online: 'https://lxnapi.ccttiot.com/bike/img/static/uHQIdWCTmtUztl49wBKU',
|
|
offline: 'https://lxnapi.ccttiot.com/bike/img/static/uG13E7BpUFF44wVYC9no',
|
|
labelColor: '#2679D1',
|
|
labelBgColor: '#D4ECFF'
|
|
},
|
|
status4: {
|
|
online: 'https://lxnapi.ccttiot.com/bike/img/static/uZpXq3TBtM5gVgJJeImY',
|
|
offline: 'https://lxnapi.ccttiot.com/bike/img/static/uRod2zf3t9dAOYafWoWt',
|
|
labelColor: '#2679D1',
|
|
labelBgColor: '#D4ECFF'
|
|
},
|
|
status6: {
|
|
online: 'https://lxnapi.ccttiot.com/bike/img/static/ujur6TezvPf4buFAqPHo',
|
|
offline: 'https://lxnapi.ccttiot.com/bike/img/static/uhZudZM3nEKj0tYKlho2',
|
|
labelColor: '#2679D1',
|
|
labelBgColor: '#D4ECFF'
|
|
},
|
|
status8: {
|
|
online: 'https://lxnapi.ccttiot.com/bike/img/static/uyK7Vg4Lu8xb3oNVuG2l',
|
|
offline: 'https://lxnapi.ccttiot.com/bike/img/static/ucBKG3ebYRAToVweJihu',
|
|
labelColor: '#ffffff',
|
|
labelBgColor: '#000000'
|
|
}
|
|
}
|
|
|
|
// 处理各状态的markers
|
|
this.status0.forEach(item => {
|
|
this.markers.push(createMarker(item, iconConfigs.status0))
|
|
})
|
|
|
|
this.status1.forEach(item => {
|
|
this.markers.push(createMarker(item, iconConfigs.status1))
|
|
})
|
|
|
|
this.status2.forEach(item => {
|
|
this.markers.push(createMarker(item, iconConfigs.status2))
|
|
})
|
|
|
|
this.status3.forEach(item => {
|
|
this.markers.push(createMarker(item, iconConfigs.status3))
|
|
})
|
|
|
|
this.status4.forEach(item => {
|
|
this.markers.push(createMarker(item, iconConfigs.status4))
|
|
})
|
|
|
|
this.status6.forEach(item => {
|
|
this.markers.push(createMarker(item, iconConfigs.status6))
|
|
})
|
|
|
|
this.status8.forEach(item => {
|
|
this.markers.push(createMarker(item, iconConfigs.status8))
|
|
})
|
|
},
|
|
|
|
getmarks() {
|
|
this.markers = [];
|
|
this.status0 = [];
|
|
this.status1 = [];
|
|
this.status2 = [];
|
|
this.status3 = [];
|
|
this.status4 = [];
|
|
this.status8 = [];
|
|
this.status9 = [];
|
|
this.status6 = [];
|
|
let data = {
|
|
powerStart: this.rangeValue[0],
|
|
powerEnd: this.rangeValue[1],
|
|
sort: 'desc',
|
|
areaId: this.areaId
|
|
};
|
|
if (this.statusidx != 7 && this.statusidx != 9) {
|
|
data.status = this.statusidx;
|
|
this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.showmap = true;
|
|
this.listData = res.data;
|
|
res.data.forEach(item => {
|
|
if (item.status == 0) {
|
|
this.status0.push(item);
|
|
} else if (item.status == 1) {
|
|
this.status1.push(item);
|
|
} else if (item.status == 2) {
|
|
this.status2.push(item);
|
|
} else if (item.status == 3) {
|
|
this.status3.push(item);
|
|
} else if (item.status == 4) {
|
|
this.status4.push(item);
|
|
} else if (item.status == 6) {
|
|
this.status6.push(item);
|
|
} else if (item.status == 8) {
|
|
this.status8.push(item);
|
|
}
|
|
});
|
|
this.markstause();
|
|
}
|
|
}).catch(error => {
|
|
// Handle request error
|
|
});
|
|
} else if (this.statusidx == 7) {
|
|
data.status = '';
|
|
this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.showmap = true;
|
|
this.listData = res.data;
|
|
res.data.forEach(item => {
|
|
if (item.status == 0) {
|
|
this.status0.push(item);
|
|
} else if (item.status == 1) {
|
|
this.status1.push(item);
|
|
} else if (item.status == 2) {
|
|
this.status2.push(item);
|
|
} else if (item.status == 3) {
|
|
this.status3.push(item);
|
|
} else if (item.status == 4) {
|
|
this.status4.push(item);
|
|
} else if (item.status == 6) {
|
|
this.status6.push(item);
|
|
} else if (item.status == 8) {
|
|
this.status8.push(item);
|
|
}
|
|
});
|
|
this.markstause();
|
|
}
|
|
}).catch(error => {
|
|
// Handle request error
|
|
});
|
|
} else if (this.statusidx == 9) {
|
|
data.status = '-0'
|
|
data.onlineStatus = 0
|
|
this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.showmap = true;
|
|
this.listData = res.data;
|
|
res.data.forEach(item => {
|
|
if (item.status == 0) {
|
|
this.status0.push(item);
|
|
} else if (item.status == 1) {
|
|
this.status1.push(item);
|
|
} else if (item.status == 2) {
|
|
this.status2.push(item);
|
|
} else if (item.status == 3) {
|
|
this.status3.push(item);
|
|
} else if (item.status == 4) {
|
|
this.status4.push(item);
|
|
} else if (item.status == 6) {
|
|
this.status6.push(item);
|
|
} else if (item.status == 8) {
|
|
this.status8.push(item);
|
|
}
|
|
});
|
|
this.markstause();
|
|
}
|
|
}).catch(error => {
|
|
// Handle request error
|
|
});
|
|
}
|
|
|
|
this.clusterMarkers(); // 调用聚合方法
|
|
},
|
|
clusterMarkers() {
|
|
this.markers.forEach(marker => {
|
|
let added = false;
|
|
for (let i = 0; i < this.clusters.length; i++) {
|
|
const cluster = this.clusters[i];
|
|
const distance = this.calculateDistance(cluster.latitude, cluster.longitude, marker
|
|
.latitude, marker.longitude);
|
|
if (distance < this.clusterRadius) {
|
|
// 合并到现有聚合
|
|
cluster.markers.push(marker);
|
|
cluster.latitude = (cluster.latitude * cluster.markers.length + marker.latitude) / (
|
|
cluster.markers.length + 1);
|
|
cluster.longitude = (cluster.longitude * cluster.markers.length + marker.longitude) / (
|
|
cluster.markers.length + 1);
|
|
added = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!added) {
|
|
// 创建新的聚合
|
|
this.clusters.push({
|
|
latitude: marker.latitude,
|
|
longitude: marker.longitude,
|
|
markers: [marker]
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 计算两点间的距离
|
|
calculateDistance(lat1, lon1, lat2, lon2) {
|
|
const p = 0.017453292519943295; // Math.PI / 180
|
|
const c = Math.cos;
|
|
const a = 0.5 - c((lat2 - lat1) * p) / 2 +
|
|
c(lat1 * p) * c(lat2 * p) *
|
|
(1 - c((lon2 - lon1) * p)) / 2;
|
|
return 12742 * Math.asin(Math.sqrt(a)); // 2 * R; R = 6371 km
|
|
},
|
|
toggleIconAndCallout() {
|
|
this.showIconAndCallout = !this.showIconAndCallout;
|
|
const updatedMarkers = this.markers.map(marker => {
|
|
if (marker.isParking) {
|
|
return {
|
|
...marker,
|
|
label: this.showIconAndCallout ? marker.originalLabel : null
|
|
};
|
|
}
|
|
return marker;
|
|
});
|
|
|
|
// 更新 markers 数组
|
|
this.$set(this, 'markers', updatedMarkers);
|
|
},
|
|
getParking() {
|
|
let data = {
|
|
areaId: this.areaId
|
|
};
|
|
this.$u.get('/app/parking/list?', data).then((res) => {
|
|
if (res.code === 200) {
|
|
const newMarkers = [];
|
|
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);
|
|
}
|
|
|
|
newMarkers.push({
|
|
id: String(row.parkingId),
|
|
latitude: parseFloat(row.latitude),
|
|
longitude: parseFloat(row.longitude),
|
|
width: 20,
|
|
height: 29,
|
|
iconPath: row.type == 1 ?
|
|
'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' :
|
|
row.type == 2 ?
|
|
'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :
|
|
'https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
|
|
label: null, // 初始设置为 null
|
|
originalLabel: { // 存储原始 label 信息
|
|
content: row.parkingName,
|
|
color: '#ffffff',
|
|
fontSize: 14,
|
|
bgColor: row.type == 1 ? '#3A7EDB' : row.type == 2 ?
|
|
'#FFC107' : '#FF473E',
|
|
padding: 6,
|
|
borderRadius: 10,
|
|
anchorX: 0.5,
|
|
anchorY: 1,
|
|
textAlign: 'center'
|
|
},
|
|
isParking: true
|
|
});
|
|
|
|
|
|
});
|
|
|
|
this.$set(this, 'markers', [...this.markers, ...newMarkers]);
|
|
|
|
const validBoundaries1 = type1Data.map(row => row.boundaryStr).filter(boundary =>
|
|
typeof boundary === 'string' && boundary.trim() !== '');
|
|
const polylines1 = this.convertBoundaryToPolylines(validBoundaries1, 1);
|
|
|
|
const validBoundaries2 = type2Data.map(row => row.boundaryStr).filter(boundary =>
|
|
typeof boundary === 'string' && boundary.trim() !== '');
|
|
const polylines2 = this.convertBoundaryToPolylines(validBoundaries2, 2);
|
|
|
|
const validBoundaries3 = type3Data.map(row => row.boundaryStr).filter(boundary =>
|
|
typeof boundary === 'string' && boundary.trim() !== '');
|
|
const polylines3 = this.convertBoundaryToPolylines(validBoundaries3, 3);
|
|
|
|
this.polyline = this.polyline.concat(polylines1, polylines2, polylines3);
|
|
|
|
} else {
|
|
console.error("Error fetching parking data:", res);
|
|
}
|
|
}).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,
|
|
color: "#22FF0090", // 使用 color 替代 fillColor
|
|
fillColor: '#55888899', // 使用 borderWidth 替代 strokeWidth
|
|
|
|
width: 1, // 使用 borderWidth 替代 strokeWidth
|
|
zIndex: 1
|
|
};
|
|
|
|
return polyline;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.page {
|
|
width: 750rpx;
|
|
|
|
.center-marker {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -80%);
|
|
/* 定位在中心点上方 */
|
|
pointer-events: none;
|
|
/* 使其不可点击 */
|
|
}
|
|
|
|
.fixdivce {
|
|
padding: 12rpx 22rpx 12rpx 22rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 25vh;
|
|
width: 280rpx;
|
|
height: 40vh;
|
|
background: #FFFFFF80;
|
|
border-radius: 0 40rpx 40rpx 0;
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
|
|
|
|
.scrollable-content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollable-content {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
|
|
.divce_li:last-child {
|
|
border-bottom: 1rpx solid #fff;
|
|
}
|
|
|
|
.divce_li {
|
|
padding: 10rpx 0;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #D8D8D8;
|
|
|
|
.left_img {
|
|
image {
|
|
width: 44rpx;
|
|
height: 70rpx;
|
|
}
|
|
}
|
|
|
|
.right_cont {
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #3D3D3D;
|
|
|
|
.right_top {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
|
|
.right_top_left {
|
|
margin-left: auto;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
|
|
image {
|
|
margin-right: 6rpx;
|
|
width: 12rpx;
|
|
height: 26rpx;
|
|
}
|
|
}
|
|
|
|
.right_top_right {}
|
|
}
|
|
|
|
.right_bot {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.decice_cont {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
padding: 10rpx 28rpx;
|
|
|
|
.cont {
|
|
margin-top: 8rpx;
|
|
margin-right: 9rpx;
|
|
width: 130rpx;
|
|
flex-shrink: 0; // 防止内容被压缩
|
|
|
|
.text {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
line-height: 38rpx;
|
|
color: #3D3D3D;
|
|
white-space: nowrap; // 防止文字换行
|
|
overflow: hidden; // 超出隐藏
|
|
text-overflow: ellipsis; // 超出显示省略号
|
|
}
|
|
|
|
.act1 {
|
|
color: #4C97E7;
|
|
}
|
|
}
|
|
|
|
// 每5个元素后的右边距清零
|
|
.cont:nth-child(5n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.park {
|
|
position: fixed;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
right: 30rpx;
|
|
bottom: 500rpx;
|
|
// background-color: #fff;
|
|
border-radius: 50%;
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
z-index: 10;
|
|
|
|
.img {
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
padding: 15rpx 0 0 15rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.tit {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
width: 752rpx;
|
|
height:160rpx;
|
|
background: #FFFFFF;
|
|
// box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.map {
|
|
width: 750rpx;
|
|
height: 50vh;
|
|
}
|
|
|
|
|
|
}
|
|
</style> |