shanxian-work-app/pages/index/index.vue

<template>
	<view class="page">
		<map id="map" :longitude='longitude' :latitude='latitude' :scale='scale' @markertap="marker" @tap="controltap"
		 @regionchange="regionchange" :show-location="location" :markers="markers" :polyline="polygons" style="height: 100vh;"
		 @labeltap='marker' @callouttap='marker'>
			<cover-view class="backTop"></cover-view>
			<cover-view class="topRight" @click.stop="search"></cover-view>
			<cover-view class="areaTop" @click="select">{{option[areaIndex].text}}</cover-view>
			<cover-image src="/static/img/search.png" style="width: 40upx;height: 40upx;" class="search"></cover-image>
			<cover-image src="http://resource.weilaibike.com/bike_yunwei/location.png" @click="posi" class="location"></cover-image>
			<cover-image src="http://resource.weilaibike.com/bike_yunwei/ref.png" @click="load" class="load"></cover-image>
			<cover-view class="sweepCode" @click="scanCode" :style="{lineHeight:lineHeight+'upx'}">扫描二维码</cover-view>
			<cover-view class="beijing" v-if="infoShow"></cover-view>
			<cover-view class="code" v-if="infoShow">{{bikeDetail.bike_no}}</cover-view>
			<cover-view class="dianliang" v-if="infoShow">剩余电量：{{bikeDetail.battery_power}}%</cover-view>
			<cover-view class="xiangqing" v-if="infoShow" @click="detail" :style="{lineHeight:lineHeight+'upx'}">详情</cover-view>
			<cover-image src="/static/img/xunling.png" style="width: 48upx;height: 48upx;" class="xunling" v-if="infoShow"
			 @click="xunling"></cover-image>
			<cover-view class="kaisuo" v-if="infoShow" @click="diankai" :style="{lineHeight:lineHeight+'upx'}">开电池锁</cover-view>
			<cover-view class="status" v-if="infoShow">{{bikeDetail.tab_name}}</cover-view>
			<cover-view class="lastPosi" v-if="infoShow">最后定位时间：{{bikeDetail.last_time}}</cover-view>
			<cover-view class="dianl" @click="dianl" :style="{lineHeight:lineHeight+'upx'}">{{allArr[dianIndex]}}</cover-view>
			<cover-view class="zhuangtai" @click="zhuangtai" :style="{lineHeight:lineHeight+'upx'}">{{arrState[arrIndex]}}</cover-view>
			<cover-view class="shiyong" @click="shiyong" :style="{lineHeight:lineHeight+'upx'}">{{arrDay[arrDayIndex]}}</cover-view>
		</map>
	</view>
</template>
<script>
	var app = getApp();
	import {
		BluetoothManager,
		BtErrorCode,
		CMD
	} from '../../static/js/bluWKM.js';
	import {
		preUrl,
	} from "../../static/js/config.js";
	import {
		MapUtil
	} from "../../static/js/MapUtil.js";
	import {
		getLocation,
	} from '../../static/js/util.js';
	import {
		baseRequest
	} from "../../static/js/loadToastUtil.js";
	const bluM = new BluetoothManager;
	let baseUtil, mapUtil = null,
		homeUtil = null,
		oriMarkerList = [],
		currentStationId = '',
		centerLongitude = '',
		centerlatitude = '',
		currentScale = '',
		currentNor = '',
		currentSou = '';
	export default {
		data() {
			return {
				curVal1: "", //下标
				location: true,
				mapTOP: 0, //地图据顶部高度
				bike_no: '', //车牌号
				mess: "", //父组件向子组件穿的值
				markers: [], //显示单车、停车的P
				markers1:[{
					// id:0,
	                latitude: 34.78289468414873,//经度
	                longitude: 113.7859707019119,//纬度
	                iconPath: '/static/img/cluMarkerIcon.png',//显示的图标
			   　　 rotate:0,   // 旋转度数
			   　　 width:20,   //宽
			   　　 height:20,   //高
			  　　  title:'你在哪了',//标注点名
			  　　  alpha:0.5,   //透明
					callout:{
						content:'花园宝宝',
						color:'#FFFFFF',
						fontSize:14,
						borderRadius:2,
						bgColor:'#00c16f',
						display:'ALWAYS'
					},
					label:{
						content:'河南商丘',
						color:'#FFFFFF',
						fontSize:14,
						borderRadius:2,
						bgColor:'#00c16f',
						display:'ALWAYS'
					}
	            },],
				polygons: [], //区域
				longitude: '',
				latitude: '',
				allArea: [],
				area: 0,
				show: false, //车子详情的布尔值
				id: '', //停车区域的ID
				polygons1: [], //可骑行区域 先用这个变量代表
				box_no: '', //中控编号
				bikeDetail: [],
				bikeId: '',
				areaID: '',
				low_power: '',
				state: '',
				use_state: '',
				parkAreaShow: false, //还车点是否显示
				noParkAreaShow: true, //禁停区是否显示
				areas: [],
				parking: [],
				parking_points: [],
				no_parking: [],
				no_parking_points: [],
				infoShow: false,
				allEle: [{
						text: '全部电量',
						value: 0,
						areaID: ''
					},
					{
						text: '70%以下',
						value: 1,
						areaID: '70'
					},
					{
						text: '60%以下',
						value: 2,
						areaID: '60'
					},
					{
						text: '50%以下',
						value: 3,
						areaID: '50'
					},
					{
						text: '30%以下',
						value: 4,
						areaID: '30'
					},
					{
						text: '20%以下',
						value: 5,
						areaID: '20'
					},
				],
				allArr: ['全部电量', '70%以下', '60%以下', '50%以下', '30%以下', '20%以下'],
				allStatus: [{
					text: '全部状态',
					value: 0,
					areaID: ''
				}],
				arrDay: ['使用状态', '1天未使用', '3天未使用', '7天未使用'],
				arrDayIndex: 0,
				allDay: [{
						text: '使用状态',
						value: 0
					},
					{
						text: '1天未使用',
						value: 1
					},
					{
						text: '3天未使用',
						value: 2
					},
					{
						text: '7天未使用',
						value: 3
					}
				],
				dianIndex: 0,
				arrState: ['全部状态'],
				arrIndex: 0,
				option: [{
					areaID: '',
					text: '全部区域',
					value: -1,
				}],
				areaIndex: 0,
				lineHeight: '',
				allState: '',
				statusBarHeight: app.systemInfo.statusBarHeight,
				lang: app.systemInfo.lang,
				dataType: 'map',
				mapData: [],
				scrollHeight: app.systemInfo.screenHeight - app.systemInfo.statusBarHeight - 45 - 55 - 91,
				searchType: 0, //0 初始状态 1 搜索半径 2 用户筛选
				currentRadius: '5 km',
				scale: 13,
				searchItem: {},
				stationInfo: {},
			}
		},
		onShow() {
			// console.log("z这是数据235676677898899")
			var that = this;
			setTimeout(function() {
				this.mess = uni.getStorageSync('allArea')
				this.curVal1 = uni.getStorageSync('curVal') ? uni.getStorageSync('curVal') : 0
			}, 2000)
		},
		methods: {
			controltap: function(e) {
				let that = this;
				currentStationId = '';
				oriMarkerList.forEach(item => {
					item.isSelect = false
				});
				that.infoShow = false;
				that.markers = mapUtil.getFortMatMarkerList(currentNor, currentSou, currentScale, oriMarkerList)
			},
			regionchange: function(e) {
				let that = this;
				console.log('缩放了')
				console.log(e)
				if (e.type === "regionchange") {
					// that.setData({markers:''})
					that.mapCtx.getCenterLocation({
						success: function(res) {
							console.log(res)
							centerLongitude = res.longitude;
							centerlatitude = res.latitude;
							uni.setStorageSync('centerLongitude', centerLongitude);
							uni.setStorageSync('centerlatitude', centerlatitude);
							that.mapCtx.getScale({
								success: res => {
									let scale = res.scale;
									console.log(scale)
									that.mapCtx.getRegion({
										success: res => {
											currentNor = res.northeast;
											currentSou = res.southwest;
											if (scale <= 10) {
												that.markers = mapUtil.getFortMatMarkerList(res.northeast, res.southwest, scale, oriMarkerList)
												console.log(that.markers)
												return;
											}
											currentScale = scale;
											console.log(mapUtil)
											if (mapUtil == null) {
												mapUtil = new MapUtil(res.northeast, res.southwest, scale);
												that.loadMapData(markers => {
													markers.forEach(item => {
														item.isSelect = item.id == currentStationId;
													});
													oriMarkerList = markers;
													that.markers = mapUtil.getFortMatMarkerList(res.northeast, res.southwest, scale, oriMarkerList)
													console.log(that.markers)
												});
												return;
											}
											if (mapUtil.checkRefresh(res.northeast, res.southwest)) {
												that.loadMapData(markers => {
													markers.forEach(item => {
														item.isSelect = item.id == currentStationId;
													});
													oriMarkerList = markers;
													that.markers = mapUtil.getFortMatMarkerList(res.northeast, res.southwest, scale, oriMarkerList)
													console.log(that.markers)
												});
												mapUtil.setInitData(res.northeast, res.southwest, scale);
											} else {
												oriMarkerList.forEach(item => {
													item.isSelect = item.id == currentStationId;
												});
												that.markers = mapUtil.getFortMatMarkerList(res.northeast, res.southwest, scale, oriMarkerList)
												console.log(that.markers)
											}
										}
									})
									// console.log(that.markers)
								}
							})
						}
					})
				}
			},
			loadMapData: function(callBack1) {
				var that = this;
				var areaId = that.areaID;
				//     console.log(areaId)
				var low_power = that.low_power;
				var state = that.state;
				var use_state = that.use_state;
				let time = parseInt(use_state / 1000)
				if (time === 0) {
					time = ''
				}
				var data = {
					'put_area_id': areaId,
					'battery_power': low_power,
					'all_states': state,
					'last_use_bike_end_time': time
				};
				// console.log(baseUtil)
				baseUtil(data, res => {
					// console.log(res)
					callBack1(res);
				})
			},
			initMapData: function() {
				let that = this;
				that.markers = ''
				that.loadMapData(markers => {
					// console.log(markers)
					markers.forEach(item => {
						item.isSelect = item.id == currentStationId;
					});
					oriMarkerList = markers;
					that.markers = mapUtil.getFortMatMarkerList(currentNor, currentSou, currentScale, oriMarkerList)
					console.log(that.markers)
				});
			},
			getBike_info: function(bikeId) {
				console.log(bikeId)
				uni.showLoading({
					title: '加载中...',
				})
				app.request('bike/getBikeInfo?bike_no=' + bikeId, '', 'GET').then(res => {
					uni.hideLoading();
					console.log(res, '获取车辆信息')
					if (res.data.bike_info == '') {
						this.infoShow = false;
						uni.showToast({
							title: '暂无该车辆信息~',
						})
					} else {
						console.log(res.data, '车辆信息')
						this.bikeDetail = res.data.bike_info;
						this.infoShow = true;
					}
				})
			},
			dianl: function() {
				var that = this;
				uni.showActionSheet({
					itemList: that.allArr,
					success: function(res) {
						this.markers = [];
						console.log(res, "pppppp")
						that.dianIndex = res.tapIndex;
						that.low_power = that.allEle[res.tapIndex].areaID
						console.log(that.low_power, "iiiiii")
						that.initMapData()
					},
					fail: function(res) {}
				})
			},
			zhuangtai: function() {
				var that = this;
				console.log(that.arrState, "iiiiiiiiiii")
				uni.showActionSheet({
					itemList: that.arrState,
					success: function(res) {
						that.markers = [];
						console.log(res)
						that.arrIndex = res.tapIndex;
						that.state = that.allState[res.tapIndex].areaID
						that.initMapData()
					},
					fail: function(res) {}
				})
			},
			select: function() {
				// console.log('11111')
				var that = this;
				var arr = []
				console.log(that.option)
				for (let i = 0; i < that.option.length; i++) {
					arr = arr.concat(that.option[i].text)
				}
				console.log(arr)
				uni.showActionSheet({
					itemList: arr,
					success: function(res) {
						console.log(res)
						that.markers = [];
						let index = res.tapIndex
						that.areaIndex = index;
						that.areaID = that.option[index].areaID;
						that.curVal = res.tapIndex
						that.initMapData(1)
						that.initData(1)
					},
					fail: function(res) {}
				})
			},
			shiyong: function() {
				var that = this;
				uni.showActionSheet({
					itemList: that.arrDay,
					success: function(res) {
						console.log(res)
						this.markers = [];
						that.arrDayIndex = res.tapIndex;
						// console.log(that.allArr[res.tapIndex])
						var time = new Date().getTime();
						if (res.tapIndex == 0) {
							time = "";
						} else if (res.tapIndex == 1) {
							time = time - 86400000 * 1;
						} else if (res.tapIndex == 2) {
							time = time - 86400000 * 3;
						} else if (res.tapIndex == 3) {
							time = time - 86400000 * 7;
						}
						that.use_state = time;
						that.initMapData()
					},
					fail: function(res) {}
				})
			},
			search: function() {
				console.log('11')
				uni.navigateTo({
					url: './bikeTest',
					success() {

					},
					fail(err) {
						console.log(err)
					}
				})
			},
			detail: function() {
				this.infoShow = false;
				uni.navigateTo({
					url: './bike_detail?bike_no=' + this.bikeId
				})
			},
			maptap: function(e) {
				// console.log(e)
				this.infoShow = false;
			},
			diankai: function() {
				var that = this;
				bluM.connectDeivece(that.bikeDetail.box_no, CMD.batteryUnlock);
				app.request('bike/openBatteryLock?bike_id=' + that.bikeDetail.id, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						uni.showToast({
							title: '开电池锁成功',
							icon: 'none'
						})
					}
				})
			},
			xunling: function() {
				var that = this;
				bluM.connectDeivece(that.bikeDetail.box_no, CMD.bell)
				app.request('bike/bikeBell?bike_id=' + that.bikeDetail.id, '', 'GET').then(res => {
					if (res.statusCode == 200) {
						uni.showToast({
							title: '响铃成功',
							icon: 'none'
						})
					}
				})
			},
			async initData(isLoad = false) {
				var that = this;
				this.markers = [];
				uni.showLoading({
					title: '加载中...',
				})
				await app.request('getAreas?put_area_id=' + that.areaID, '', 'GET').then(res => {
					uni.hideLoading();
					// console.log(res, 'quyu');
					let data = res.data
					that.ridding_area = data.ridding_area;
					that.no_parking = data.no_parking_area;
					that.no_parking_points = data.no_parking_points;
					that.parking = data.parking_area;
					that.parking_points = data.parking_points;
					if (isLoad) {
						this.showArea(1)
						if (this.noParkAreaShow) this.showNoParking(0)
						if (this.parkAreaShow) this.showParking(0)
					}
				})
			},
			showArea: function(type = 0) {
				if (type) {
					var ridding_area = this.ridding_area;
					this.polygons = ridding_area;
				} else {
					this.polygons = this.polygons.concat(this.ridding_area);
				}
			},
			clear: function(type = 0) {
				if (type === 0) {
					let polygons = this.polygons.filter((polygons) => {
						if (polygons.id.slice(0, 1) === 'A') {
							return false
						}
						return true
					})
					this.polygons = polygons;
				}
				if (type === 1) {
					let polygons = this.polygons.filter((polygons) => {
						if (polygons.id.slice(0, 1) !== 'P') {
							return true
						}
						return false
					})
					let markers = this.markers.filter((polygons) => {
						if (polygons.id.slice(0, 1) !== 'p') {
							return true
						}
						return false
					})
					this.polygons = polygons;
					this.markers = markers;
				}
				if (type === 2) {
					let polygons = this.polygons.filter((polygons) => {
						if (polygons.id.slice(0, 1) !== 'N') {
							return true
						}
						return false
					})
					let markers = this.markers.filter((polygons) => {
						if (polygons.id.slice(0, 1) !== 'n') {
							return true
						}
						return false
					})
					this.polygons = polygons;
					this.markers = markers;
				}
			},
			//显示还车点 0：追加停车点 1：只显示停车点 2：删除停车点
			showParking: function(type = 0) {
				if (type === 0) {
					this.polygons = this.polygons.concat(this.parking);
					// this.markers = this.markers.concat(this.parking_points);
				}
				if (type === 1) {
					this.polygons = this.parking;
					// this.markers = this.markers;
				}

				if (type === 2) {
					this.clear(1)
				}
			},
			showNoParking: function(type = 0) {
				if (type === 0) {
					this.polygons = this.polygons.concat(this.no_parking);
					// this.markers = this.markers.concat(this.no_parking_points);
				}
				if (type === 1) {
					this.polygons = this.no_parking;
					// this.markers = this.no_parking_points;
				}
				if (type === 2) {
					this.clear(2)
				}
			},
			scanCode: function() {
				var that = this;
				console.log('scanCode')
				uni.scanCode({
					success: function(res) {
						let index = res.result.lastIndexOf("\=");
						var code = res.result.substring(index + 1, res.result.length);
						that.bikeId = code;
						console.log(that.bikeId)
						that.getBike_info(code)
					},
					fail: function() {
						uni.showToast({
							title: '扫码失败请重试',
							icon: 'none'
						})
					}
				})
			},
			getBikes: function(clear = 0) {
				uni.showLoading({
					title: '加载中...',
				})
				var that = this;
				var areaId = that.areaID;
				var low_power = that.low_power;
				var state = that.state;
				var use_state = that.use_state;
				let time = parseInt(use_state / 1000);
				// this.markers = '';
				if (time === 0) {
					time = ''
				}
				var data = {
					put_area_id: areaId,
					battery_power: low_power,
					all_states: state,
					last_use_bike_end_time: time
				};

				app.request('getBikes', data, 'POST').then(res => {
					uni.hideLoading();
					// console.log(res, 'bikes')
					var markers = that.markers
					if (clear) {
						markers = that.markers.filter((marker) => {
							if (marker.id.slice(0, 1) === 'B') {
								return false
							}
							return true
						})
					}
					that.markers = markers.concat(res.data);
				})
			},
			load: function() {
				var that = this;
				uni.showLoading({
					title: '刷新中...',
				})
				console.log('load')
				this.markers = [];
				if (this.noParkAreaShow) {
					this.showNoParking(0);
				} else {
					this.showNoParking(2);
				}
				if (this.parkAreaShow) {
					this.showParking(0)
				} else {
					this.showParking(2)
				}
				that.initMapData()
				setTimeout(function() {
					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							console.log(res, '定位信息')
							that.longitude = res.longitude;
							that.latitude = res.latitude;
							that.markers.unshift({
								// "id": "B10010010006",
								"iconPath": "/static/img/bike_yunwei/111.jpg",
								"typer": "lixian",
								"width": 38,
								"height": 38,
								"zIndex": 1101,
								longitude: res.longitude,
								latitude: res.latitude,

							})
							uni.hideLoading();
							// console.log(that.markers, "当前位置")
						},
						fail: function(err) {
							uni.hideLoading();
							console.log(err)
						}
					})
				}, 500)
			},
			posi: function() {
				// console.log(this.markers)
				// this.markers.splice(0, 1)
				// console.log(this.markers)
				uni.showLoading({
					title: '定位中...',
					mask: true
				})
				console.log('posi')
				//点击定位  
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {

						console.log(res, '定位信息')
						that.longitude = res.longitude;
						that.latitude = res.latitude;
						// that.markers.unshift({
						// 	// "id": "B10010010006",
						// 	"iconPath": "/static/img/bike_yunwei/111.jpg",
						// 	"typer": "lixian",
						// 	"width": 38,
						// 	"height": 38,
						// 	"zIndex": 1101,
						// 	longitude: res.longitude,
						// 	latitude: res.latitude,

						// })
						uni.hideLoading();
					},
					fail: function(err) {
						uni.hideLoading();
						console.log(err)
					}
				})
			},
			marker: function(e) {
				console.log(e)
				// return;
				var that = this;
				// let type = markerId.slice(0, 1)
				//车辆索引
				// if (type === 'B') {

				// }
				var id = e.detail.markerId;
				// id = id.substring(1, id.length);
				// that.bikeId = id;
				// that.getBike_info(id)
				for (let i = 0; i < that.markers.length; i++) {
					let item = that.markers[i];
					item.setCheckStatus(id == item.id && item.callout == undefined && item.label == undefined);
					if (id == item.id) {
						if (item.callout == undefined && item.label == undefined) {
							if (currentStationId == id) {
								return;
							}
							that.getBike_info(id.slice(1))
							that.bikeId = id.slice(1);
						} else {
							that.latitude = item.latitude;
							that.longitude = item.longitude;
							that.scale = currentScale + 1
						}
					}
				}
				that.markers = that.markers
			},
			parkShow1: function() {
				this.parkAreaShow = !this.parkAreaShow;
				console.log('parkshow1')
				if (this.parkAreaShow) {
					this.showParking(0)
				} else {
					this.showParking(2)
				}
			},
			forbidShow: function() {
				this.noParkAreaShow = !this.noParkAreaShow
				if (this.noParkAreaShow) {
					this.showNoParking(0);
				} else {
					this.showNoParking(2);
				}
			},
		},
		mounted() {
			// this.allData()
			// if (uni.getStorageSync('curVal')) {
			// 	//    let active = this.swiperTabIdx;
			// 	// let areaId = uni.getStorageSync('curId');
			// 	console.log("这是初始加载数据")
			// 	this.allData()
			// 	// console.log(this.bike,"这是车辆数据")

			// } else {
			// 	// console.log(this.list)
			// 	// this.areaID = this.list[0].areaID;
			// 	// console.log(this.areaID, '12345678')
			// 	this.allData()
			// }
		},
		// 获取车辆信息
		onLoad(options) {
			// console.log(app.request())
			var that = this;
			setTimeout(function() {
				var arr = uni.getStorageSync('allArea');
				console.log(arr, "ooooooo")
				that.option = that.option.concat(arr);
			}, 500)
			app.request('index', '', 'GET').then(res => {
				console.log(res.data, 'index')
				var data = res.data;
				var arr2 = []
				for (var i = 0; i < data.wx_bikeStates.length; i++) {
					data.wx_bikeStates[i].value = i + 1
					console.log(data.wx_bikeStates[i].text, "lllll")
					arr2.push(data.wx_bikeStates[i].text)
					// console.log(arr2, "kkkkkk")
				}
				var arr1 = [{
					areaID: '',
					value: 0,
					text: '全部状态'
				}]
				var allState = arr1.concat(data.wx_bikeStates);
				console.log(allState, "pppppp")
				var zhuangtai = data.bike_states;
				let arr = Object.values(zhuangtai)
				setTimeout(function() {
					that.allState = allState;
					that.arrState = that.arrState.concat(arr2);
<<<<<<< HEAD
				}, 500)
			})
			that.getBikes();
			console.log(that.arrState, "车辆位置")
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					console.log('客户端是Android')
					that.lineHeight = '75'
					break;
				case 'ios':
					console.log('客户端是iOS')
					that.lineHeight = '80'
					break;
			}
			that.posi(); //获取当前位置
			that.mapCtx = uni.createMapContext('map');
			this.initData(1)
			console.log(that.mapCtx)
			// that.posi(); //获取当前位置
			// console.log(baseRequest)
			baseUtil = baseRequest;
			// console.log(baseUtil)
			// console.log(getLocation)
			getLocation(baseUtil, (lat, lng) => {
				that.latitude = lat;
				that.longitude = lng;
			})
			that.initMapData()
		}
	}
</script>
<style>
	@import url('/static/base.css');
</style>
<style>
	page {
		width: 100%;
		height: 100%;
	}

	uni-page-body {
		width: 100%;
		height: 100%;
	}

	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: hidden;
		position: relative;
	}

	.search {
		position: absolute;
		top: 60upx;
		right: 40upx;
		z-index: 9999;
	}

	.areaTop {
		position: absolute;
		top: 60upx;
		left: 30upx;
		z-index: 9999;
		height: 50upx;
		line-height: 30upx;
		/* 	padding: 10upx; */
		color: black;
		font-size: 30upx;
		width: 200upx;
	}

	.backTop {
		width: 100%;
		position: absolute;
		top: 0upx;
		left: 0upx;
		z-index: 999;
		background: #F5F8FE;
		height: 120upx;
	}

	.topRight {
		width: 200upx;
		position: absolute;
		top: 0upx;
		right: 0upx;
		z-index: 99999;
		height: 100upx;
	}

	map {
		position: absolute;
		bottom: 0;
		width: 100%;
		/* height:80%; */
		margin-top: 20%;
	}

	.dianl {
		position: absolute;
		width: 250upx;
		height: 80upx;
		text-align: center;
		font-size: 28upx;
		top: 120upx;
		left: 0upx;
		background: white;
	}

	.zhuangtai {
		position: absolute;
		width: 250upx;
		height: 80upx;
		text-align: center;
		font-size: 28upx;
		top: 120upx;
		left: 250upx;
		background: white;
		box-sizing: border-box;
		border-left: 2upx solid red;
		border-right: 2upx solid red;
	}

	.shiyong {
		position: absolute;
		width: 250upx;
		height: 80upx;
		text-align: center;
		font-size: 28upx;
		top: 120upx;
		right: 0upx;
		background: white;
	}

	.location {
		width: 72upx;
		height: 72upx;
		position: absolute;
		bottom: 5%;
		left: 50upx;
	}

	.load {
		width: 72upx;
		height: 72upx;
		position: absolute;
		bottom: 5%;
		right: 50upx;
	}

	.sweepCode {
		width: 300upx;
		height: 90upx;
		border-radius: 50upx;
		background: #1AEAC9;
		font-size: 32upx;
		color: white;
		text-align: center;
		line-height: 80upx;
		position: absolute;
		bottom: 5%;
		left: 57%;
		margin-left: -200upx;
	}

	.beijing {
		position: absolute;
		width: 700upx;
		height: 280upx;
		top: 210upx;
		left: 50%;
		margin-left: -350upx;
		background: white;
		z-index: 10;
		border-radius: 20upx;
	}

	.code {
		position: absolute;
		z-index: 20;
		color: black;
		font-weight: bold;
		font-size: 32upx;
		top: 230upx;
		left: 50upx;
		width: 200upx;
	}

	.dianliang {
		position: absolute;
		z-index: 20;
		color: #E34B6E;
		font-size: 32upx;
		top: 230upx;
		left: 260upx;
	}

	.xiangqing {
		position: absolute;
		z-index: 20;
		color: #E34B6E;
		font-size: 32upx;
		top: 370upx;
		left: 50upx;
		width: 200upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		border: #212121 2upx solid;
		border-radius: 50upx;
	}

	.kaisuo {
		position: absolute;
		z-index: 20;
		color: white;
		font-size: 32upx;
		top: 370upx;
		right: 50upx;
		width: 200upx;
		height: 80upx;
		text-align: center;
		background: #FF5F5D;
		border-radius: 50upx;
	}

	.status {
		position: absolute;
		z-index: 20;
		color: #E34B6E;
		font-size: 32upx;
		top: 230upx;
		right: 60upx;
	}

	.xunling {
		position: absolute;
		z-index: 20;
		top: 390upx;
		right: 280upx;
	}

	.lastPosi {
		position: absolute;
		z-index: 20;
		color: #858585;
		font-size: 28upx;
		top: 300upx;
		left: 50upx;
	}
=======
				
					
				},500)
			})
			that.getBikes();
			console.log(that.arrState, "车辆位置")
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					console.log('客户端是Android')
					that.lineHeight = '75'
					break;
				case 'ios':
					console.log('客户端是iOS')
					that.lineHeight = '80'
					break;
			}
			that.posi(); //获取当前位置
			this.initData(1)
		}
	}
</script>
<style>
	@import url('/static/base.css');
</style>
<style>
	page {
		width: 100%;
		height: 100%;
	}

	uni-page-body {
		width: 100%;
		height: 100%;
	}

	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: hidden;
		position: relative;
	}

	.search {
		position: absolute;
		top: 40upx;
		right: 40upx;
		z-index: 9999;
	}

	.areaTop {
		position: absolute;
		top: 60upx;
		left: 30upx;
		z-index: 9999;
		height: 50upx;
		line-height: 30upx;
	/* 	padding: 10upx; */
		color: black;
		font-size: 30upx;
		width: 200upx;
	}

	.backTop {
		width: 100%;
		position: absolute;
		top: 0upx;
		left: 0upx;
		z-index: 999;
		background: #F5F8FE;
		height: 120upx;
	}

	.topRight {
		width: 200upx;
		position: absolute;
		top: 0upx;
		right: 0upx;
		z-index: 99999;
		height: 100upx;
	}

	map {
		position: absolute;
		bottom: 0;
		width: 100%;
		/* height:80%; */
		margin-top: 20%;
	}

	.dianl {
		position: absolute;
		width: 250upx;
		height: 80upx;
		text-align: center;
		font-size: 28upx;
		top: 120upx;
		left: 0upx;
		background: white;
	}

	.zhuangtai {
		position: absolute;
		width: 250upx;
		height: 80upx;
		text-align: center;
		font-size: 28upx;
		top: 120upx;
		left: 250upx;
		background: white;
		box-sizing: border-box;
		border-left: 2upx solid red;
		border-right: 2upx solid red;
	}

	.shiyong {
		position: absolute;
		width: 250upx;
		height: 80upx;
		text-align: center;
		font-size: 28upx;
		top: 120upx;
		right: 0upx;
		background: white;
	}

	.location {
		width: 72upx;
		height: 72upx;
		position: absolute;
		bottom: 5%;
		left: 50upx;
	}

	.load {
		width: 72upx;
		height: 72upx;
		position: absolute;
		bottom: 5%;
		right: 50upx;
	}

	.sweepCode {
		width: 300upx;
		height: 90upx;
		border-radius: 50upx;
		background: #1AEAC9;
		font-size: 32upx;
		color: white;
		text-align: center;
		line-height: 80upx;
		position: absolute;
		bottom: 5%;
		left: 57%;
		margin-left: -200upx;
	}

	.beijing {
		position: absolute;
		width: 700upx;
		height: 280upx;
		top: 210upx;
		left: 50%;
		margin-left: -350upx;
		background: white;
		z-index: 10;
		border-radius: 20upx;
	}

	.code {
		position: absolute;
		z-index: 20;
		color: black;
		font-weight: bold;
		font-size: 32upx;
		top: 230upx;
		left: 50upx;
		width: 200upx;
	}

	.dianliang {
		position: absolute;
		z-index: 20;
		color: #E34B6E;
		font-size: 32upx;
		top: 230upx;
		left: 260upx;
	}

	.xiangqing {
		position: absolute;
		z-index: 20;
		color: #E34B6E;
		font-size: 32upx;
		top: 370upx;
		left: 50upx;
		width: 200upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		border: #212121 2upx solid;
		border-radius: 50upx;
	}

	.kaisuo {
		position: absolute;
		z-index: 20;
		color: white;
		font-size: 32upx;
		top: 370upx;
		right: 50upx;
		width: 200upx;
		height: 80upx;
		text-align: center;
		background: #FF5F5D;
		border-radius: 50upx;
	}

	.status {
		position: absolute;
		z-index: 20;
		color: #E34B6E;
		font-size: 32upx;
		top: 230upx;
		right: 60upx;
	}

	.xunling {
		position: absolute;
		z-index: 20;
		top: 390upx;
		right: 280upx;
	}

	.lastPosi {
		position: absolute;
		z-index: 20;
		color: #858585;
		font-size: 28upx;
		top: 300upx;
		left: 50upx;
	}
>>>>>>> b5b7e5b494eb95cb74e074d52b1baeff3f73835b
</style>