11
This commit is contained in:
parent
1627996c8a
commit
d47f9ecfe9
|
|
@ -1,15 +1,15 @@
|
|||
const install = (Vue, vm) => {
|
||||
|
||||
|
||||
uni.setStorageSync('deptId', 101);
|
||||
uni.setStorageSync('deptId', 100);
|
||||
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://dianche.chuantewulian.cn/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,
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"libVersion" : "latest",
|
||||
"appid" : "wx4d178f8c80348214",
|
||||
"appid" : "wx3428c498d5061192",
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"minified" : true
|
||||
|
|
|
|||
|
|
@ -777,7 +777,7 @@
|
|||
if (res.code == 200) {
|
||||
if(this.orderinfo.areaId==res.data.areaId){
|
||||
this.deviceinfo = res.data
|
||||
this.deviceinfo.onlineStatus=0
|
||||
// this.deviceinfo.onlineStatus=0
|
||||
}else{
|
||||
uni.showToast({
|
||||
title: '换车设备和当前运营区不同，请使用其他车辆换车',
|
||||
|
|
|
|||
|
|
@ -12,14 +12,19 @@
|
|||
<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>
|
||||
: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" :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">
|
||||
<image src="/static/center-point.png" style="width: 30px; height: 30px;" />
|
||||
</view>
|
||||
</map>
|
||||
<view class="park" @click="toggleIconAndCallout">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" mode=""></image>
|
||||
|
|
@ -27,7 +32,7 @@
|
|||
<view class="park" @click="showdevList=!showdevList" style="bottom: 600rpx;">
|
||||
<image src=" https://lxnapi.ccttiot.com/bike/img/static/uSMkyrHwO1sybH8diPuF" mode=""></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view @touchmove.stop.prevent="() => {}">
|
||||
<view class="btn_box">
|
||||
<view class="btn1" @click="qecodelock()">
|
||||
|
|
@ -38,7 +43,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="decice_cont">
|
||||
|
||||
|
||||
<!-- <view class="cont" @click="changeidx(0)">
|
||||
<view class="text" :class="statusidx==0?'act1':''">
|
||||
未上架
|
||||
|
|
@ -47,14 +52,14 @@
|
|||
1
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="cont" @click="changeidx('-0')">
|
||||
<view class="text" :class="statusidx=='-0'?'act1':''">
|
||||
投放中
|
||||
<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="text" :class="statusidx=='-0'?'act1':''">
|
||||
{{deviceNum.inOperation}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx('1')">
|
||||
<view class="text" :class="statusidx==1?'act1':''">
|
||||
待租
|
||||
|
|
@ -140,26 +145,29 @@
|
|||
<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">
|
||||
<!-- <view class="left_img">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uEW2Zm3sO8E5eqOf2wwl" mode=""></image>
|
||||
</view> -->
|
||||
<view class="right_cont">
|
||||
<view class="right_top">
|
||||
<view class="right_top_right">
|
||||
牌:{{item.vehicleNum}}
|
||||
牌:{{item.vehicleNum}}
|
||||
</view>
|
||||
<view class="right_top_left">
|
||||
<image src=" https://lxnapi.ccttiot.com/bike/img/static/u9pggdTCxcZgUTNsEvXQ" mode="" v-if="item.remainingPower<=39" ></image>
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uu1004113wsUShxo11X9" mode="" v-if="item.remainingPower>=40&&item.remainingPower<=69"></image>
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uRI1LMpzqfIM060BO7np" mode="" v-if="item.remainingPower>=70&&item.remainingPower<=100"></image>
|
||||
<image src=" https://lxnapi.ccttiot.com/bike/img/static/u9pggdTCxcZgUTNsEvXQ" mode=""
|
||||
v-if="item.remainingPower<=39"></image>
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uu1004113wsUShxo11X9" mode=""
|
||||
v-if="item.remainingPower>=40&&item.remainingPower<=69"></image>
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uRI1LMpzqfIM060BO7np" mode=""
|
||||
v-if="item.remainingPower>=70&&item.remainingPower<=100"></image>
|
||||
{{item.remainingPower}}%
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="right_bot">
|
||||
SN:{{item.sn}}
|
||||
<span >{{status(item)}}</span>
|
||||
|
||||
<span>{{status(item)}}</span>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -172,6 +180,7 @@
|
|||
<script>
|
||||
import SliderRange from '@/pages_admin/components/primewind-sliderrange/index.vue'
|
||||
let timerId;
|
||||
var appMap = null;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -201,17 +210,17 @@
|
|||
status9: [], //离线
|
||||
markdata: {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
statusidx: '-0',
|
||||
deviceNum: {},
|
||||
areaId: 0,
|
||||
showIconAndCallout: false,
|
||||
nearbyMarkers: [],
|
||||
showdevList:false,
|
||||
showdevList: false,
|
||||
circles: [], // 用于存储圆形区域的数据
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -226,7 +235,7 @@
|
|||
|
||||
|
||||
// this.getareaid()
|
||||
|
||||
|
||||
this.getmarks()
|
||||
this.allVehicleNum()
|
||||
|
||||
|
|
@ -237,9 +246,10 @@
|
|||
if (uni.getStorageSync('adminAreaid')) {
|
||||
this.areaId = uni.getStorageSync('adminAreaid')
|
||||
this.getArea()
|
||||
|
||||
|
||||
}
|
||||
|
||||
appMap = uni.createMapContext("map", this).$getAppMap();
|
||||
appMap.showUserLocation(true);
|
||||
let that = this
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
|
|
@ -292,19 +302,13 @@
|
|||
return '禁用中'
|
||||
}
|
||||
},
|
||||
onMapRegionChange(event) {
|
||||
// console.log('regionchange', event)
|
||||
// console.log('当前地图缩放级别：', event.detail.scale);
|
||||
if (event.detail.type == 'end'&&event.detail.scale>17) {
|
||||
this.getCenterLanLat()
|
||||
}
|
||||
// 你可以在这里执行你需要的操作
|
||||
},
|
||||
|
||||
|
||||
|
||||
onMapRegionChange(event) {
|
||||
// console.log('regionchange', event)
|
||||
if (event.detail.type == 'end') {
|
||||
this.getCenterLanLat()
|
||||
this.getCenterLocation()
|
||||
// this.getCenter()
|
||||
}
|
||||
// 你可以在这里执行你需要的操作
|
||||
},
|
||||
|
|
@ -316,47 +320,95 @@
|
|||
// console.log("当前地图中心的经纬度", res)
|
||||
// that.deviceGps.latitude = res.latitude;
|
||||
// that.deviceGps.longitude = res.longitude;
|
||||
this.getNearbyMarkers(res.latitude, res.longitude);
|
||||
|
||||
//其他逻辑
|
||||
},
|
||||
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 = [];
|
||||
}
|
||||
// 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
|
||||
|
|
@ -406,7 +458,7 @@
|
|||
},
|
||||
})
|
||||
},
|
||||
tapsn(sn){
|
||||
tapsn(sn) {
|
||||
uni.navigateTo({
|
||||
url: '/pages_admin/order/device_detail?id=' + sn
|
||||
})
|
||||
|
|
@ -432,22 +484,23 @@
|
|||
this.sn = sn
|
||||
if (this.sn != '') {
|
||||
this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
|
||||
console.log(res,'rererer');
|
||||
console.log(res, 'rererer');
|
||||
if (res.code === 200) {
|
||||
// console.log(this.areaId,);
|
||||
if(res.data.areaId==this.areaId){
|
||||
if (res.data.areaId == this.areaId) {
|
||||
uni.navigateTo({
|
||||
url: '/pages_admin/order/device_detail?id=' + this.sn
|
||||
url: '/pages_admin/order/device_detail?id=' + this
|
||||
.sn
|
||||
})
|
||||
}else{
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '无效车辆',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
|
|
@ -455,7 +508,7 @@
|
|||
});
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
|
@ -526,7 +579,7 @@
|
|||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
todetail() {
|
||||
for (let item of this.fixdata) {
|
||||
if (item.sn == this.sn) {
|
||||
|
|
@ -560,11 +613,11 @@
|
|||
// this.areaInfo = res.data
|
||||
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
|
||||
this.polyline.push(polylines)
|
||||
|
||||
setTimeout(()=>{
|
||||
|
||||
setTimeout(() => {
|
||||
this.getParking()
|
||||
},500)
|
||||
|
||||
}, 500)
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
|
|
@ -633,9 +686,9 @@
|
|||
width: 20,
|
||||
height: 23,
|
||||
// iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u6jBvj7S50FPgsHaHXai',
|
||||
iconPath: item.onlineStatus == 0
|
||||
? 'https://lxnapi.ccttiot.com/bike/img/static/uQRng4QNKA38Amk8Wgt5'
|
||||
: 'https://lxnapi.ccttiot.com/bike/img/static/uocjFo8Ar2BJVpzC2G2f',
|
||||
iconPath: item.onlineStatus == 0 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/uQRng4QNKA38Amk8Wgt5' :
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/uocjFo8Ar2BJVpzC2G2f',
|
||||
callout: {
|
||||
content: '' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
|
|
@ -647,7 +700,7 @@
|
|||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX
|
||||
// https://lxnapi.ccttiot.com/bike/img/static/u4UKmB47AxOj3YKIaajM
|
||||
this.status1.forEach(item => {
|
||||
|
|
@ -657,11 +710,11 @@
|
|||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 20,
|
||||
// joinCluster: true,
|
||||
// joinCluster: true,
|
||||
height: 23,
|
||||
iconPath: item.onlineStatus == 0
|
||||
? 'https://lxnapi.ccttiot.com/bike/img/static/uzhMeExOQJbMcZtrfGUV'
|
||||
: 'https://lxnapi.ccttiot.com/bike/img/static/uheL17wVZn24BwCwEztT',
|
||||
iconPath: item.onlineStatus == 0 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/uzhMeExOQJbMcZtrfGUV' :
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/uheL17wVZn24BwCwEztT',
|
||||
// iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uAajBTcihvOr9HttyWck',
|
||||
callout: {
|
||||
content: '' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
|
|
@ -681,11 +734,11 @@
|
|||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 20,
|
||||
|
||||
|
||||
height: 23,
|
||||
iconPath: item.onlineStatus == 0
|
||||
? 'https://lxnapi.ccttiot.com/bike/img/static/uR3DQEssiK62ovhh88y8'
|
||||
: 'https://lxnapi.ccttiot.com/bike/img/static/u460R1NKWHEpHbt0U4H7',
|
||||
iconPath: item.onlineStatus == 0 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/uR3DQEssiK62ovhh88y8' :
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/u460R1NKWHEpHbt0U4H7',
|
||||
// iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/um0qXpcbA32WdwqtHbxy',
|
||||
callout: {
|
||||
content: '' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
|
|
@ -706,10 +759,10 @@
|
|||
// title: item.deviceName,
|
||||
width: 20,
|
||||
height: 23,
|
||||
// joinCluster: true,
|
||||
iconPath: item.onlineStatus == 0
|
||||
? 'https://lxnapi.ccttiot.com/bike/img/static/uG13E7BpUFF44wVYC9no'
|
||||
: 'https://lxnapi.ccttiot.com/bike/img/static/uHQIdWCTmtUztl49wBKU',
|
||||
// joinCluster: true,
|
||||
iconPath: item.onlineStatus == 0 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/uG13E7BpUFF44wVYC9no' :
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/uHQIdWCTmtUztl49wBKU',
|
||||
// iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/ur1ZrncDJ1WwuPJeiMG6',
|
||||
callout: {
|
||||
content: '' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
|
|
@ -730,10 +783,10 @@
|
|||
// title: item.deviceName,
|
||||
width: 20,
|
||||
height: 23,
|
||||
// joinCluster: true,
|
||||
iconPath: item.onlineStatus == 0
|
||||
? 'https://lxnapi.ccttiot.com/bike/img/static/uRod2zf3t9dAOYafWoWt'
|
||||
: 'https://lxnapi.ccttiot.com/bike/img/static/uZpXq3TBtM5gVgJJeImY',
|
||||
// joinCluster: true,
|
||||
iconPath: item.onlineStatus == 0 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/uRod2zf3t9dAOYafWoWt' :
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/uZpXq3TBtM5gVgJJeImY',
|
||||
// iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uN4ksL0Z2HM4C07fKEOF',
|
||||
callout: {
|
||||
content: '' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
|
|
@ -741,7 +794,7 @@
|
|||
fontSize: 10, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#D4ECFF', // 修改为气泡背景颜色
|
||||
padding:1 , // 修改为气泡内边距
|
||||
padding: 1, // 修改为气泡内边距
|
||||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||||
}
|
||||
})
|
||||
|
|
@ -754,10 +807,10 @@
|
|||
// title: item.deviceName,
|
||||
width: 20,
|
||||
height: 23,
|
||||
// joinCluster: true,
|
||||
iconPath: item.onlineStatus == 0
|
||||
? 'https://lxnapi.ccttiot.com/bike/img/static/uhZudZM3nEKj0tYKlho2'
|
||||
: 'https://lxnapi.ccttiot.com/bike/img/static/ujur6TezvPf4buFAqPHo',
|
||||
// joinCluster: true,
|
||||
iconPath: item.onlineStatus == 0 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/uhZudZM3nEKj0tYKlho2' :
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/ujur6TezvPf4buFAqPHo',
|
||||
// iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uxbI6ZclpS3WQCfPO1zr',
|
||||
callout: {
|
||||
content: '' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
|
|
@ -778,17 +831,17 @@
|
|||
// title: item.deviceName,
|
||||
width: 20,
|
||||
height: 23,
|
||||
iconPath: item.onlineStatus == 0
|
||||
? 'https://lxnapi.ccttiot.com/bike/img/static/ucBKG3ebYRAToVweJihu'
|
||||
: 'https://lxnapi.ccttiot.com/bike/img/static/uyK7Vg4Lu8xb3oNVuG2l',
|
||||
iconPath: item.onlineStatus == 0 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/ucBKG3ebYRAToVweJihu' :
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/uyK7Vg4Lu8xb3oNVuG2l',
|
||||
// iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uYIFwg5IJ4Axh7TfJ7q6',
|
||||
callout: {
|
||||
content:'' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
content: '' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 10, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#000000', // 修改为气泡背景颜色
|
||||
padding:1, // 修改为气泡内边距
|
||||
padding: 1, // 修改为气泡内边距
|
||||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||||
}
|
||||
})
|
||||
|
|
@ -826,7 +879,7 @@
|
|||
this.status4 = [];
|
||||
this.status8 = [];
|
||||
this.status9 = [];
|
||||
this.status6 = [];
|
||||
this.status6 = [];
|
||||
let data = {
|
||||
powerStart: this.rangeValue[0],
|
||||
powerEnd: this.rangeValue[1],
|
||||
|
|
@ -843,7 +896,7 @@
|
|||
// if (item.onlineStatus == 0) {
|
||||
// this.status9.push(item);
|
||||
// } else {
|
||||
|
||||
|
||||
// }
|
||||
if (item.status == 0) {
|
||||
this.status0.push(item);
|
||||
|
|
@ -855,9 +908,9 @@
|
|||
this.status3.push(item);
|
||||
} else if (item.status == 4) {
|
||||
this.status4.push(item);
|
||||
}else if (item.status == 6) {
|
||||
} else if (item.status == 6) {
|
||||
this.status6.push(item);
|
||||
} else if (item.status == 8) {
|
||||
} else if (item.status == 8) {
|
||||
this.status8.push(item);
|
||||
}
|
||||
// console.log(this.status1,'status1status1');
|
||||
|
|
@ -869,28 +922,28 @@
|
|||
}).catch(error => {
|
||||
// Handle request error
|
||||
});
|
||||
} else if (this.statusidx == 7 ) {
|
||||
} 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);
|
||||
}
|
||||
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();
|
||||
} else {
|
||||
|
|
@ -899,29 +952,29 @@
|
|||
}).catch(error => {
|
||||
// Handle request error
|
||||
});
|
||||
}else if ( this.statusidx == 9) {
|
||||
} else if (this.statusidx == 9) {
|
||||
data.status = '-0'
|
||||
data.onlineStatus=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);
|
||||
}
|
||||
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();
|
||||
} else {
|
||||
|
|
@ -931,43 +984,46 @@
|
|||
// 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
|
||||
},
|
||||
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;
|
||||
this.markers.forEach(marker => {
|
||||
|
|
@ -1074,6 +1130,13 @@
|
|||
|
||||
.page {
|
||||
width: 750rpx;
|
||||
.center-marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%); /* 定位在中心点上方 */
|
||||
pointer-events: none; /* 使其不可点击 */
|
||||
}
|
||||
.fixdivce {
|
||||
padding: 12rpx 22rpx 12rpx 22rpx;
|
||||
position: fixed;
|
||||
|
|
@ -1084,31 +1147,33 @@
|
|||
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;
|
||||
|
|
@ -1116,31 +1181,29 @@
|
|||
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_top_right {}
|
||||
}
|
||||
|
||||
|
||||
.right_bot {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -1152,6 +1215,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.decice_cont {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user