JP-ChargeTeam51/pages/searchPile/searchPile.vue

<template>
	<view class='font1'>
		<u-navbar :is-back="false" height="88" style="background-color: bisque;">
			<view style="display: flex;flex-direction: column; width: 100%;height: 100%;">
				<view style="display: flex;flex-direction: row; height: 100%; align-items: center;margin-top:0rpx;padding-top: 0rpx;padding-bottom: 20rpx;">
					<view style="margin-left:20rpx;width: 160rpx;">
						<uni-combox class='font2' ref="city" :border="false" v-model="area" :candidates="cities" @updateModel='updateCity' @updateSelector="updateCitySelector"></uni-combox> 
 					</view>
					<view style="margin-left: 20rpx;margin-right: 20rpx; flex:1" >
						<u-search :input-style='inputStyle' placeholder="搜索站点名称" v-model="keyword" :showAction="false"  @focus="navigate"></u-search></view>
					<view style="margin-right: 20rpx;" v-show="viewMode" @click="listMode">
						<text class="iconfont">&#xe613;</text> <text class="list font2">列表</text>
<!--						<u-icon name="list-dot" size="26" color="#c0c4cc"></u-icon>
						<label>列表</label>-->
					</view>
					<view style="margin-right: 20rpx;" v-show="!viewMode" @click="mapMode">
						<text class="iconfont">&#xe622;</text> <text class="list font2">地图</text>						
						<!--<u-icon name="map" size="26" color="#c0c4cc"></u-icon>
						<label>地图</label>
						-->
					</view>
				</view>

				<view style="display: flex;flex-direction: row;width:100%; justify-content: space-between;align-items: center;">
					<view style="margin-left:20rpx;width: 160rpx;">
						<uni-combox class='font2' ref="radius" style="width: 200rpx;" :border="false" v-model="radius" :candidates="radiuses"  @updateModel='updateRadius' @updateSelector="updateRadiusSelector"></uni-combox> 
 					</view>
<!--					
					<view style="margin-left: 20rpx;">
						<label class="arrow">{{ info.miles_type[preference.miles_index].text }}</label>
						<u-icon name="arrow-down-fill" size="13" color="#c0c4cc"></u-icon>
					</view>
					-->
					<view style="margin-left:20rpx;margin-right: 20rpx;flex:1">
						<uni-combox ref="type" class='font2' style="width: 200rpx;" :border="false" v-model="type" :candidates="types" @updateModel='updateType' @updateSelector="updateTypeSelector"></uni-combox> 
 					</view>
					
<!--					<view style="margin-left: 20rpx;margin-right: 20rpx;flex:1">
						<label class="arrow">{{ info.obc_type[preference.obc_type_index].text }}</label>
						<u-icon name="arrow-down-fill" size="13" color="#c0c4cc"></u-icon>
					</view>-->
					<view style="margin-right: 20rpx;" @click="open">
						<label class="arrow font2">{{ action }}</label>
						<u-icon v-if="show" name="arrow-down-fill" size="13" color="#00B962"></u-icon>
						<u-icon v-else name="arrow-down-fill" size="13" color="#c0c4cc"></u-icon>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="content" >
			<view v-if="show" class="preference" :style="show ? 'z-index:1024;top:'+navBarHeight+'px;' : 'z-index:0'" style="width: 100%;">
				<view class="content-s">
				<view class="preference_group">
					<view class="preference_group_item"><label class="preference_label">距离我</label></view>
					<view>
						<u-tag
							class="preference_item"
							v-for="(item, index) in info.miles_type"
							:key="index"
							:style="index == preference.miles_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
							shape="circle"
							:text="item.text"
							@click="selectMiles(index)"
						></u-tag>
					</view>
				</view>
				<view class="preference_group">
					<view class="preference_group_item"><label class="preference_label">充电站类型</label></view>
					<view>
						<u-tag
							class="preference_item_medium"
							v-for="(item, index) in info.obc_type"
							:key="index"
							:style="index == preference.obc_type_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
							shape="circle"
							:text="item.text"
							@click="selectOBSType(index)"
						></u-tag>
					</view>
				</view>
			
				<view class="preference_group">
					<view class="preference_group_item"><label class="preference_label">是否对外开放</label></view>
					<view>
						<u-tag
							class="preference_item_plus"
							v-for="(item, index) in info.obc_status"
							:key="index"
							:style="index == preference.obc_status_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
							shape="circle"
							:text="item.text"
							@click="selectOBSStatus(index)"
						></u-tag>
					</view>
				</view>
				<view class="preference_group">
					<view class="preference_group_item"><label class="preference_label">充电桩电压 (V)</label></view>
					<view>
						<u-tag
							class="preference_item_plus"
							v-for="(item, index) in info.obc_voltage"
							:key="index"
							:style="index == preference.obc_voltage_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
							shape="circle"
							:text="item.text"
							@click="selectOBCVoltage(index)"
						></u-tag>
					</view>
				</view>
				<view class="preference_group">
					<view class="preference_group_item"><label class="preference_label">充电桩电压 (kW)</label></view>
					<view style="height: 50rpx;margin-left: 30rpx;">
						<DoubleSlider
							ref="obc_voltage"
							sliderHeight="15rpx"
							blockSize="36rpx"
							:minValue="info.obc_power.minValue"
							:maxValue="info.obc_power.maxValue"
							v-model="preference.obc_power"
							:currentMinValue="preference.obc_power.minValue"
							:currentMaxValue="preference.obc_power.maxValue"
							labelColor="#B8C9C5"
							borderRadius="25rpx"
							borderColor="#00B962"
							borderStyle="solid"
							borderWidth="3rpx"
							blockColor="#FFFFFF"
							activeColor="#00B962"
							indicatorColor="#DBDBDB"
							@change="handlerDoubleSlider"
					>	</DoubleSlider>
					</view>
				</view>
				<view class="preference_group">
					<view style="margin-left: 30rpx;"><u-checkbox shape="circle" v-model="preference.save_preference" @change="radioChange">保存偏好设置</u-checkbox></view>
				</view>
			
				</view>
				<view class="pre-btn" style="display: flex;flex-direction: row;">
					<view class="btn-1 font3" @click="reset" style="width: 30%;">重置</view>
					<view class="btn-2 font3" @click="close" style="width: 70%;background-color: #00B962;color: #fff;">确定</view>
				</view>
				
			</view>
				<u-mask :show="show" @click="show = false"></u-mask>
			<view v-show="!viewMode" >
				 
				<view v-for="(item,index) in stationslist" :key="item.id" class="charing-slow"   @click="stationDetail(item)">
					<text :class="item.type == '快充' ? 'fast-charge':(item.type == '慢充' ? 'trickle-charge':'fast-trickle-charge')">{{item.type}}</text> <text class="station-items">{{item.name}}</text>
					<view class="address">
						{{item.position}}
					</view>
					<view class="price">
						<view class="num">{{item.price}}</view>
						<view class="unit">
							 元/度 起
						</view>
					</view>
					<view class="park">
						<text class="park-p" style="color: #FFFFFF;">p</text>
						<text class="park-text">2小时免费停车</text>
					</view>
					<view class="free">
						<view class="free-num">
							<text style="color:#009143;">空闲{{item.idleNum}}</text>/总数{{item.total}}
						</view>
						<view class="distance">
							<text class="iconfont distance-font">&#xe615;</text>{{item.distance.toFixed(2)}}公里 {{item.time.toFixed(0)}}分钟
						</view>
					</view>
				</view>
				 
				<u-divider margin-top="20" bg-color="#F2F4F4">已经到底了</u-divider>
				 
				
				
			</view>
			<view v-show="viewMode">					
				<view>
					<Chargermap @onMoveStart="moveStart"   @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked" @onload="mapdown" @clickMap="clickMap"></Chargermap>
					<!--@location="location"-->
					<u-image style='position:absolute;z-index:1023;right:20px;bottom:260px;' src="@/static/img/location.png" width="30px" height="30px" @click="setCenter"></u-image>
					 
				</view>
				<view v-if="stationsmap.length>0" class="chargerCard" style="border-radius: 20rpx;"> 
					<swiper :current="currentIndex" @change="swiperChange" @transition="swiperTransition" style="height: 100%;">
					 	<swiper-item v-for="(item,index) in stationsmap" :key="item.id" style="height: 100%;">							 
							
							<view class="swiper-item" style="height: 100%; background-color: #ffffff;" @click="stationDetail(item)">
								<view class="card_item" style="padding-top: 5rpx;">
									<view style="display: flex;flex-direction: row;">
										<view :class="item.type == '快充' ? 'fast-charge':(item.type == '慢充' ? 'trickle-charge':'fast-trickle-charge')" >
											{{item.type}}
										</view>
										<view class="font-weight3"  >
											{{item.name}}											
										</view>
										
									</view>
								</view>		
								<view class="card_item" style="color:#8898A9;">
									{{item.position}}
								</view>
								
								<view class="card_item2" >
 									<view style="color:#FF6573;margin-right: 10rpx;">
										{{item.price}}
									</view>
									<view style="display: flex; justify-content: center;align-items: center">
									 元/度 起									
									</view>
								</view>
								<view class="card_item" style="border-bottom: #F1F4F3; border-bottom-width: 2rpx;border-style: solid;border-top-width: 0rpx;border-left-width: 0rpx;border-right-width:0rpx; padding-bottom:20rpx">
									<view style="display: flex;flex-direction: row;">
										<view style="background-color: #7DB1FF;padding-left: 10rpx;padding-right: 10rpx;color: #FFFFFF;">
											P
										</view>
										<label>{{item.park}}</label>
									</view>
									<view style="display: flex;flex-direction: row;">
										<view style="color: #00B962;" class="font-weight2">
											空闲{{item.idleNum}}
										</view>
										
										<view class="font-weight2">
											/总数{{item.total}}
										</view>
									</view>
								</view>
								
								<view class="card_item" style="padding-bottom: 20rpx;">
									<u-button shape='circle' style="color: #00B962;" @click="getScanCode" >
										<u-icon name="scan" size="26" color="#00B962" style="margin-right: 20rpx;"></u-icon>
										<label>扫码充电</label>
									</u-button>
									
									<view class="round" @click.stop="navigateTo(item)"> 
											<text class="iconfont distance-font">&#xe615;</text>
											<view  style="margin-right: 10rpx;">
												{{item.distance!=null?item.distance.toFixed(2):''}}公里											
											</view>
											<view  style="margin-right: 10rpx;">
												{{item.time!=null?item.time.toFixed(0):''}}分钟
											</view> 
									</view>
									
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>

			</view>
		</view>
		 
		
		<Tabbar :current="1"></Tabbar> 
	</view>
</template>

<script>
//	import api from './site-index.js'
//	export default   api
import * as indexAPI from '@/apis/index.js'
import * as api from '@/apis/site.js';
import Chargermap from '@/components/Chargermap.vue';
import DoubleSlider from '@/components/double-slider/DoubleSlider.vue';
import Tabbar from '@/components/Tabbar.vue';
import uniCombox from '@/components/uni-combox/components/uni-combox/uni-combox.vue'
import * as WxJsApi from '@/utils/wxJsApi.js'
//import * as Map from '@/utils/openMap.js'

//import MapLoader from '@/utils/AMap'
//import xflSelect from '@/components/xfl-select/xfl-select.vue'

let _self;
export default {
	components: {
		Chargermap,
		DoubleSlider,
		Tabbar, 
		uniCombox,
	//	xflSelect
	},
	data() {
		return { 
			inputStyle:{
				backgroundColor: 'transparent',
				"font-size":'18px',
				"font-weight":"normal"
			},
			elderMode:false,
			showCity:false,
			showType:false,
			showRadius:false,
			cities: [ '荆州市'], 			
			radiuses:['1公里','2公里','5公里','10公里','20公里','50公里','100公里','200公里'],
			types:['交流快充','直流慢充'],			
			area: '荆州市',
			radius:'',
			type:'',
			centerImg:'@/static/img/location.png',
			currentIndex:-1,
			navBarHeight:88,
			viewMode: true, //地图
			keyword: '',
			show: false,
			mapopen: false,
			isReady: false,
			id: '',
			longitude: 112.28308,
			latitude: 30.312084,
			name:'荆鹏软件园',
			//			longitude: '',
			//			latitude: '',
			nearbyStationInfo: {
				nearbyShiftDTOList: []
			},
			action: '筛选',
			preference: {
				miles_index: 3,
				obc_type_index: 0,
				obc_status_index: 0,
				obc_voltage_index: 0,
				save_preference: false,
				obc_power: { minValue: 0, maxValue: 500 }
			},
			stationsmap:[
/*				{name:'荆鹏软件园充电站',position:'湖北省荆州市沙市区江津东路附155号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'慢充'},
				{name:'荆鹏软件园充电站2',position:'湖北省荆州市沙市区江津东路附156号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'快充'},
				{name:'荆鹏软件园充电站3',position:'湖北省荆州市沙市区江津东路附157号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'慢充'},
				{name:'荆鹏大道求助站充电站',position:'湖北省荆州市沙市区江津东路附158号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'快充'},
	*/			
			],
			first:true,
			timer:null,
			swipping:false,			
			stationslist:[],
			info: {
				miles_type: [
					{ distance: 1, text: '1公里' },
					{ distance: 2, text: '2公里' },
					{ distance: 5, text: '5公里' },
					{ distance: 10, text: '10公里' },
					{ distance: 20, text: '20公里' },
					{ distance: 50, text: '50公里' },
					{ distance: 100, text: '100公里' },
					{ distance: 200, text: '200公里' }
				],
				obc_type: [{ value: 0, text: '直流快充' }, { value: 1, text: '交流慢充' }],
				obc_status: [{ value: 0, text: '对外开放' }, { value: 1, text: '不对外开放' }],
				obc_voltage: [{ value: 0, text: '低于700V' }, { value: 1, text: '700V及以上' }],
				obc_power: { minValue: 0, maxValue: 1000 }
			},
			userId:'',
		};
	},
	onLoad(op) {
		_self = this;
		console.log('longitude0  ' + _self.longitude);
		console.log('latitude0  ' + _self.latitude);
		if (op != null) {
			if (op.longitude != null) this.longitude = op.longitude;
			if (op.latitude != null) this.latitude = op.latitude;
			if (op.id != null) this.id = op.id;
		}
		if(this.elderMode)
		{
			window.document.getElementsByTagName('body')[0].style.setProperty('--theme', 1);			
		}
		 			
		//navigation.getPoint();
		
	},
	onReady() {
		console.log('长者模式'+JSON.stringify(this.carhelp.get("getElderModeClass")));
		this.elderMode = this.carhelp.get('getElderModeClass');
		
		//this.elderMode = true;
		if(this.elderMode)
			this.theme('elder')
		else
			this.theme('standard')
			
		 if (this.carhelp.getPersonInfo()) {
		 	this.userId = this.carhelp.getPersonInfo().id;
			
		 }
		 
		 let preference = this.carhelp.get('preference',this.preference)  
		 if(preference.save_preference)
		 {
			 this.preference = preference;
			console.log('preference'+JSON.stringify(preference))
		 }
		 this.types = [];
		 for(let i = 0;i< this.info.obc_type.length;i++){
			 this.types.push(this.info.obc_type[i].text);
		 }
		 this.radiuses = [];
		 for(let i = 0;i< this.info.miles_type.length;i++){
			 this.radiuses.push(this.info.miles_type[i].text);
		 }
		 this.type = this.info.obc_type[this.preference.obc_type_index].text;
		 this.radius = this.info.miles_type[this.preference.miles_index].text;
		 
		 WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
		 	// console.log(res)
		 }).catch(error => {
		 	console.log(res)
		 })
		  
		 
		//		console.log('longitude2  '+this.longitude)
		//		console.log('latitude2  '+this.latitude)
		this.$refs.amap.init();
		//this.getPositionByLonLats();
//		this.$refs.amap.setMyStyle("height:1500rpx;width:100%;");
//	this.$refs.amap.setMyStyle("height:calc(100%-176rpx);width:100%;");
				
		//		console.log('longitude3  '+this.longitude)
		//		console.log('latitude3  '+this.latitude)
	},
	onShow() {
		
		console.log('onShow')
		if (this.isReady) {
			 
		}
	},
	onHide(){
		this.end();
	},
	methods: {
		updateCitySelector(){
			console.log('updateCitySelector');
			this.$refs.type.closeSelector();
			this.$refs.radius.closeSelector();
			//this.$refs.city.closeSelector();
			this.show = false;	
			
		},
		updateTypeSelector(){
			console.log('updateTypeSelector');
			//this.$refs.type.closeSelector();
			this.$refs.radius.closeSelector();
			this.$refs.city.closeSelector();
			this.show = false;	
			
		},
		updateRadiusSelector(){
			console.log('updateRadiusSelector');
			this.$refs.type.closeSelector();
			//this.$refs.radius.closeSelector();
			this.$refs.city.closeSelector();
			this.show = false;	
			
		},
		updateCity(e){
			this.close();
		},
		updateRadius(e){
			this.preference.miles_index = e.value;
			this.close();
			console.log('updateRadius'+JSON.stringify(e))
		},
		updateType(e){
			this.preference.obc_type_index = e.value;
			this.close();
			console.log('updateType'+JSON.stringify(e))
		},
		setCenter(){
			console.log('getPoint')
			WxJsApi.getLocation().then((res) => {
				
				_self.latitude = parseFloat(res.latitude);
				_self.longitude = parseFloat(res.longitude);
				//let data = {position:{latitude:latitude,longitude:longitude}};
			 
				 let posCenter= {longitude: _self.longitude,latitude: _self.latitude};
				 this.$refs.amap.setCenter(posCenter);
			}).catch(error => {
				uni.showToast({
					title:JSON.stringify(error)
				})					
			})
			
//			console.log('setCenter')
		},
		getScanCode() {
			
			if(!this.isEnabled())
				return;
			if (this.userId) {
				WxJsApi.scanQRCode(1).then(res => {
					if(res) {
						indexAPI.scanCode(res).then((response) => {
					
						}).catch(error => {
							uni.showToast({
								title: error,
								icon: "none"
							})
						})
					}
				}).catch(error => {
		
				})
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		//导航
		guide(signMap,item) {
		        let self = this;
		        if (item.position && item.position != '') {
		            //景点位置partnerAddress 景点经纬度lng lat
		            var lng = self.lng;
		            var lat = self.lat;
		            if (signMap == 'gd') {
		                // 高德地图
						console.log('signMap')
		                if (self.customBrowserVersion().android) {
		                    window.location.href = "androidamap://viewMap?sourceApplication=appname&poiname=" + item.position +
		                        "&lat=" + item.latitude + "&lon=" + item.longitude + "&dev=0";
		                    //判断是否跳转
		                    setTimeout(function () {
		                        let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||
		                            window.document.webkitHidden
		                        if (typeof hidden == "undefined" || hidden == false) {
		                            //调用高德地图
		                            window.location.href = "https://uri.amap.com/marker?position=" + item.longitude + "," + item.latitude +
		                                "&name=" + item.position;
		                        }
		                    }, 2000);
		                } else if (self.customBrowserVersion().ios) {
		                    window.location.href = "iosamap://viewMap?sourceApplication=appname&poiname=" + item.position +
		                        "&lat=" + item.latitude + "&lon=" + item.longitude + "&dev=0";
		                    //判断是否跳转
		                    setTimeout(function () {
		                        let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||
		                            window.document.webkitHidden
		                        if (typeof hidden == "undefined" || hidden == false) {
		                            //调用高德地图
		                            window.location.href = "https://uri.amap.com/marker?position=" + item.longitude + "," + item.latitude +
		                                "&name=" + item.position;
		                        }
		                    }, 2000);
		                }
		            } else if (signMap == 'bd') {
		                // 百度地图
		                if (self.customBrowserVersion().android) {
		                    //安卓操作系统
		                    let d = new Date();
		                    let t0 = d.getTime();
		                    window.location.href = "androidamap://viewMap?sourceApplication=appname&poiname=" + item.position+
		                        "&lat=" + item.latitude + "&lon=" + item.longitude + "&dev=0";
		                    //由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
		                    var delay = setInterval(function () {
		                        var d = new Date();
		                        var t1 = d.getTime();
		                        if (t1 - t0 < 3000 && t1 - t0 > 2000) {
		                            window.location.href = "http://api.map.baidu.com/marker?location=" + item.latitude + "," +
		                                item.longitude + "&title=" + item.position +
		                                "&content=充电桩&output=html&src=webapp.baidu.openAPIdemo";
		                        }
		                        if (t1 - t0 >= 3000) {
		                            clearInterval(delay);
		                        }
		                    }, 1000);
		                }
		                if (self.customBrowserVersion().ios) {
		                    //ios操作系统
		                    let d = new Date();
		                    let t0 = d.getTime();
		                    window.location.href = "iosamap://viewMap?sourceApplication=appname&poiname=" + self.partnerAddress +
		                        "&lat=" + lat + "&lon=" + lng + "&dev=0";
		                    //由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
		                    let delay = setInterval(function () {
		                        var d = new Date();
		                        var t1 = d.getTime();
		                        if (t1 - t0 < 3000 && t1 - t0 > 2000) {
		                            window.location.href = "http://api.map.baidu.com/marker?location=" + item.latitude + "," +
		                                item.longitude + "&title=" + item.position +
		                                "&content=充电桩&output=html&src=webapp.baidu.openAPIdemo";
		                        }
		                        if (t1 - t0 >= 3000) {
		                            clearInterval(delay);
		                        }
		                    }, 1000);
		                }
		            }
		        } else {
		           uni.showToast({
		           	title:'暂时不知道充电桩位置'
		           })
		        }
		    },
		    //区分设备
		    customBrowserVersion() {
		        var u = navigator.userAgent;
		        return {
		            trident: u.indexOf('Trident') > -1, //IE内核
		            presto: u.indexOf('Presto') > -1, //opera内核
		            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
		            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
		            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
		            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
		            android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
		            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
		            iPad: u.indexOf('iPad') > -1, //是否iPad
		            webApp: u.indexOf('Safari') == -1, //是否web应用程序，没有头部与底部
		            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
		            qq: u.match(/\sQQ/i) == " qq", //是否QQ
		            isBaidu: u.indexOf('baiduboxapp') !== -1, //是否为百度浏览器
		            isqqBrowser: u.indexOf('mqqbrowser') !== -1, //是否为qq浏览器
		            isWxBrowser: u.indexOf('micromessenger') !== -1, //是否为微信浏览器
		            isUc: u.indexOf('ucbrowser') !== -1, //是否为uc浏览器
		        };
		    },

		navigateTo(item){
			/*
			this.elderMode = !this.elderMode;
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
			return;
			*/
			//this.guide('gd',item);
			//console.log('导航'+JSON.stringify(item))
			window.location.href="https://uri.amap.com/marker?position="+ item.longitude+","+item.latitude+"&name="+item.name;
			
			//Map.getRoute(item);
			//Map.openMap(this.latitude, this.longitude, this.name, 'wgs84')
			 //var startLngLat = [this.longitude, this.latitude]
			 //var endLngLat = [item.longitude, item.latitude]
			 ///let platform = uni.getSystemInfoSync().platform
			 //console.log('platform'+JSON.stringify(platform))
			 //this.$refs.amap.navigate(startLngLat,endLngLat);
		},
		navigate(){
			console.log('naviage to ')
			uni.navigateTo({
				url:'/pages/search/search?stationlist='+encodeURIComponent(JSON.stringify(_self.stationsmap))
					 
			})
		},		
		getPoint() {
			 
			  
			 
//			console.log('getPoint')
			WxJsApi.getLocation().then((res) => {
				
				var latitude = parseFloat(res.latitude);
				var longitude = parseFloat(res.longitude);
				let data = {position:{latitude:latitude,longitude:longitude}};

				_self.location(data);
				
				if(_self.first)
				{
					var obj = {
									longitude: longitude,
									latitude: latitude
								};
					this.$refs.amap.setPerson(obj);	
					//let data = {latitude:latitude,longtitude:longitude};
					//this.getChargingStationData(data);
					this.getNearbyStationInfo();
					_self.first = false;
					//this.$refs.amap.listenMove();
				}
				
				
				console.log('当前位置' +JSON.stringify(data))
				
				//this.latitude2 = latitude;
				//this.longitude2 = longitude;
				/*uni.showToast({
					title:JSON.stringify(res)
				})*/
				//this.message=JSON.stringify(res)
			}).catch(error => {
				uni.showToast({
					title:JSON.stringify(error)
				})					
			})
		},
		start() {
			let self = this;
		  // 将定时器名字赋值到变量中
		  this.timer = setInterval(() => {
			//console.log("开始---");
			
			//self.$refs.amap.getLocation1();
			//self.$refs.amap.getLocation ();
		  }, 10000);
		},
		end() {
		  clearInterval(this.timer);
		  this.timer = null // 这里最好清除一下，回归默认值
		  // 众所周知，定时器返回一个随机整数，用于表示定时器的编号，后面通过名字可以取消这个定时器的执行。
		  console.log(this.timer);
		},
		isEnabled(){
			if(this.viewMode)
			{
				if(this.show)
					return false;
			}
			return true;
		},
		stationDetail(item){
			if(!this.isEnabled())
				return;
			console.log('stationDetail'+JSON.stringify(item))
			uni.navigateTo({
				url:'stationAndPile/stationDetails?id='+item.id
			})
				/*
			uni.navigateTo({
				url:'stationAndPile/stationDetails?station='+encodeURIComponent(JSON.stringify(item))
			})
			*/
//			console.log('stationDetail'+JSON.stringify(item))
		},
		location(e){
			if(e.position){
				//this.$refs.amap.getPositionByLonLats(e.position);
				if(e.position.latitude && e.position.longitude)
				if(this.latitude != e.position.latitude || 
					this.longitude != e.position.longitude)
					{
						this.longitude = e.position.longitude;
						this.latitude = e.position.latitude;
						
						let data = {latitude:this.latitude,longtitude:this.longitude,findType:"1"};
						this.getChargingStationData(data);
						console.log('获取定位'+JSON.stringify(e));
						
					}
			}
		},
		getChargingStationData(pos){
			//return;
			if(pos == null)
				return ;			
//			console.log('getChargingStationData'+JSON.stringify(pos))
			let data1 = { pageIndex:0,pageSize:20};
			if(this.info.obc_type[this.preference.obc_type_index].text.indexOf('直流快充')>=0)
				data1.type = "1";
			else if(this.info.obc_type[this.preference.obc_type_index].text.indexOf('交流慢充')>=0)
				data1.type = "2";
			if(pos.longtitude != null)
				data1.longitude = pos.longtitude.toString();
			if(pos.latitude != null)
				data1.latitude = pos.latitude.toString(); 
			if(this.info.miles_type[this.preference.miles_index].distance!=null)
				data1.radius = this.info.miles_type[this.preference.miles_index].distance.toString();
			//data1.online = "0";//在线	
			if(pos.findType != null)
				data1.findType = pos.findType;
			else
				data1.findType = "0";
			
			if(this.preference.obc_power.minValue!=null)
				data1.powerStart = this.preference.obc_power.minValue.toString();
			if(this.preference.obc_power.maxValue!=null)
				data1.powerEnd = this.preference.obc_power.maxValue.toString();
			
//			console.log('data1'+JSON.stringify(data1))
			api.getChargingStationData(data1).then(function(res){
				
				console.log('data1'+JSON.stringify(res))
				if(!res.result || !res.data || !res.data.data)
				{
					console.log('getChargingStationData res nulll')
					return;					
				}
				let items = res.data.data;
				

				if(data1.findType == "0")
				{					
//					console.log('getChargingStationData res1'+JSON.stringify(res));
					_self.stationsmap = [];
					for(let i = 0;i<items.length;i++)
					{
						let obj = {
									name:'',
									position:'',
									price:1.2,
									idleNum:10,
									total:10,									
									type: data1.type == "2" ? '慢充':'快充',
									id: i,									
									distance:0.9,
									time:9,
									park: '以实际费用为准',
//									longitude: 112.28541 + i * 0.001,
//									latitude: 30.308354 + i * 0.01
									};
						if(items[i].id != null)
							obj.id = items[i].id;
						else
							continue;
						if(items[i].type.indexOf("1")>=0 && items[i].type.indexOf("2")>=0)
						{
							obj.type = '快/慢'
						}
						if(items[i].name!=null)
							obj.name = items[i].name;
						if(items[i].address!=null)
							obj.position = items[i].address;
						if(items[i].costPrice!=null)
							obj.price = items[i].costPrice;
						if(items[i].availableNum!=null)
							obj.idleNum = items[i].availableNum;
						if(items[i].totalNum!=null)
							obj.total = items[i].totalNum;
						if(items[i].longitude!=null)
							obj.longitude = items[i].longitude;
						if(items[i].latitude!=null)
							obj.latitude = items[i].latitude;
						if(items[i].distance!=null)
							obj.distance = items[i].distance;
						if(items[i].time != null){
							obj.time = items[i].time;
						}
						if(items[i].park != null)
							obj.park = items[i].park;
						/*
						let obj = {name:items[i].name,
									position:items[i].address,
									price:items[i].costPrice,									
									idleNum:items[i].availableNum,
									total:items[i].totalNum,
									distance:0.1,
									time:1,
									type:'慢充',
									id: items[i].id,
									park: i%2 == 0? '以实际费用为准':'2小时免费停车',
									longitude: items[i].longitude,
									latitude: items[i].latitude
									};*/
						_self.stationsmap.push(obj);						
					}
					_self.$refs.amap.calcDistances([_self.longitude, _self.latitude],_self.stationsmap)
 					_self.$refs.amap.setChargerList(_self.stationsmap);
					if(_self.stationsmap.length>0)
					{
						_self.$refs.amap.updateCharger(_self.stationsmap[0]); 
					}
				}else if(data1.findType == "1")
				{
					_self.stationslist = [];
//					console.log('getChargingStationData res2'+JSON.stringify(res));
					for(let i = 0;i<items.length;i++)
					{
						
						let obj = {
								name:'',
								position:'',
								price:1.2,
								idleNum:10,
								total:10,									
								type: data1.type == "2" ? '慢充':'快充',
								id: i,									
								distance:0.9,
								time:9,
								park: '以实际费用为准',
	//									longitude: 112.28541 + i * 0.001,
	//									latitude: 30.308354 + i * 0.01
								};
							if(items[i].id != null)
								obj.id = items[i].id;
							else
								continue;
							if(items[i].type.indexOf("1")>=0 && items[i].type.indexOf("2")>=0)
							{
								obj.type = '快/慢'
							}
							if(items[i].name!=null)
								obj.name = items[i].name;
							if(items[i].address!=null)
								obj.position = items[i].address;
							if(items[i].costPrice!=null)
								obj.price = items[i].costPrice;
							if(items[i].availableNum!=null)
								obj.idleNum = items[i].availableNum;
							if(items[i].totalNum!=null)
								obj.total = items[i].totalNum;
							if(items[i].longitude!=null)
								obj.longitude = items[i].longitude;
							if(items[i].latitude!=null)
								obj.latitude = items[i].latitude;
							if(items[i].distance!=null)
								obj.distance = items[i].distance;
							if(items[i].time != null){
								obj.time = items[i].time;
							}
							if(items[i].park != null)
								obj.park = items[i].park;
									//arr.push(obj);
							_self.stationslist.push(obj);
					}
					_self.$refs.amap.calcDistances([_self.longitude, _self.latitude],_self.stationslist)
					
	//				console.log(' getChargingStationData stations'+JSON.stringify(_self.stationslist))
					 
				}
			},function(err){
				console.log('getChargingStationData err'+JSON.stringify(err))
			}
			)
//			console.log('getChargingStationData end')
		},		
		/*
		charge(item){
			 console.log('扫码充电')
			//#ifdef MP-WEIXIN
			uni.scanCode({
				success:function(res){
					uni.navigateTo({
						url:'chargingPileDetails?pile='+encodeURIComponent(JSON.stringify(data))
					})
					
				}
			}) 
			return;
			//#endif
			 
			 console.log('扫码充电1')
			 uni.navigateTo({
			 	url:'stationAndPile/chargingPileDetails'
			 })
			
		},	*/	
		moveEnd(e){ 
			this.close_all();
			let posCenter = this.$refs.amap.logMapInfo();
			//console.log('posCenter'+JSON.stringify(posCenter))			
			let data = {latitude:e.center.lat,longtitude:e.center.lng};
			this.getChargingStationData(data);
		},
		moveStart(e){
			this.close_all();
		},
		clickTabItem (index) {
			
			this.currentIndex = index
		},
		swiperChange (e) {
//			console.log('swiperChange'+JSON.stringify(e))
			this.currentIndex = e.detail.current
			let station = this.stationsmap[this.currentIndex];
			
			let posCenter= {longitude: station.longitude,latitude: station.latitude};
//			console.log('currentIndex'+JSON.stringify(this.currentIndex))
//			console.log('currentIndex'+JSON.stringify(posCenter))
			console.log('station'+JSON.stringify(station))
			let bounds = this.$refs.amap.logMapInfo();
			/*if( (posCenter.latitude<bounds.bounds.northeast.lat && posCenter.latitude>bounds.bounds.sourthwest.lat)
			&&  (posCenter.longitude<bounds.bounds.northeast.lng && posCenter.longitude>bounds.bounds.sourthwest.lng)
			){
				console.log('bounds'+JSON.stringify(bounds));
				
			}else{			
				this.$refs.amap.setCenter(posCenter);				
			}*/
			this.$refs.amap.updateCharger(station);
			this.$refs.amap.setCenter(posCenter);
			  
		},
		swiperTransition (e) {
			// console.log(e)
		},
		listMode() {
			this.close_all();
			this.viewMode = false
		},
		mapMode() {
			this.close_all();
			this.viewMode = true
		},
		radioChange(e) {
			//			console.log('e'+JSON.stringify(e))
			this.preference.save_preference = e.value;
			//			 console.log('save_preference '+this.preference.save_preference);
		},
		handlerDoubleSlider(e) {
			//			console.log('e'+JSON.stringify(e))
			this.preference.obc_power = e;
			//this.preference.obc_power.minValue = e.minValue;
			//this.preference.obc_power.maxValue = e.maxValue;
		},
		selectOBSType(index) {
			this.preference.obc_type_index = index;
		},
		selectOBSStatus(index) {
			this.preference.obc_status_index = index;
		},
		selectOBCVoltage(index) {
			this.preference.obc_voltage_index = index;
		},
		selectMiles(index) {
			this.preference.miles_index = index;
		},
		reset() {
			this.preference.obc_status_index = 0;
			this.preference.obc_voltage_index = 0;
			this.preference.obc_type_index = 0;
			this.preference.miles_index = 3;
			this.preference.save_preference = false;
			//			this.$refs.obc_voltage.currentValue = [0,100];
			this.preference.obc_power.minValue = 0;
			this.preference.obc_power.maxValue = 500;
			this.preference.obc_power.minP = Math.floor((this.preference.obc_power.minValue / (this.info.obc_power.maxValue - this.info.obc_power.minValue)) * 100);
			this.preference.obc_power.maxP = Math.floor((this.preference.obc_power.maxValue / (this.info.obc_power.maxValue - this.info.obc_power.minValue)) * 100);
			//            console.log('minP'+this.preference.obc_power.minP)
			//            console.log('maxP'+this.preference.obc_power.maxP)
			this.$refs.obc_voltage.reset(this.preference.obc_power);
			//			this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
			// 			console.log('reset')
		},
		close_all(){
			this.$refs.type.closeSelector();
			this.$refs.radius.closeSelector();
			this.$refs.city.closeSelector();
			this.show = false;			
		},
		open() {
			this.$refs.type.closeSelector();
			this.$refs.radius.closeSelector();
			this.$refs.city.closeSelector();
			this.show = !this.show;
			//this.$refs.obc_voltage.currentMinValue = this.preference.obc_power[0];
			//this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
			console.log('open');
		},
		close() {
			console.log('偏好设置' + JSON.stringify(this.preference));
			this.close_all();
//			this.show = false;
			let data = {latitude:this.latitude,longtitude:this.longitude};	
			this.type = this.info.obc_type[this.preference.obc_type_index].text;
			this.radius  = this.info.miles_type[this.preference.miles_index].text;
			if(this.preference.save_preference)
				this.carhelp.set('preference',this.preference)  
			
			this.getChargingStationData(data);
			// console.log('close');
		},
		onClicked(e){
			this.close_all();
			//console.log('onClicked e'+JSON.stringify(e))
		},
		// 获取当前位置
		clickMap(obj) {
			this.show=false;
			//this.currentIndex = 5;
//			console.log('longitude1  ' + _self.longitude);
//			console.log('latitude1  ' + _self.latitude);
			if (obj == null || obj.type == null) return;
			if (obj.type == 'charger') {
				api.getChargerInfoById(obj).then(
					function(data) {
						if (obj.obj != null) {
							//obj.obj.price = 2.25;
							//obj.obj.idleNum = 12;
							_self.$refs.amap.updateCharger(obj.obj);
							let index = _self.stationsmap.findIndex(item => item.id == obj.obj.id);
							_self.currentIndex = index;
							console.log('find Index'+index);
						}
						//					console.log('点击1'+JSON.stringify(obj));
					},
					function(err) {
						console.log('点击2' + JSON.stringify(obj));
					}
				);
			}
		},
		mapdown() { 
			//console.log('this'+JSON.stringify(this))
//			console.log('longitude1  ' + this.longitude);
//			console.log('latitude1  ' + this.latitude);
			//this.start();
			//this.$refs.amap.getLocation1();
			this.getNearbyStationInfo();
			this.isReady = true;
			//this.$refs.amap.getLocation ();
			//let state = {};
			uni.getSystemInfo({
				success: (res) => {
					// #ifndef MP
					let navbarH = 0
					// #endif
					// #ifdef MP
					let navbarH = uni.upx2px(90)
					// #endif
					/*state.status_width = res.windowWidth;
					console.log('window width'+state.status_width);*/
					
					let scrollH = res.windowHeight;// - uni.upx2px(88) - navbarH
					let scrollW = res.windowWidth;
 	//				console.log('布局结果'+ JSON.stringify(res));
					console.log('scrollW'+scrollW)
					//#ifdef MP-WEIXIN
					const {
						statusBarHeight,
						windowWidth,
					} = uni.getSystemInfoSync();
					scrollW = windowWidth;
	//				console.log('height ' + statusBarHeight);
					//this.status_height = uni.getStatusbarHeight();
					let res1 =  uni.getMenuButtonBoundingClientRect()
	//				console.log('layout selectHeight '+JSON.stringify(res1))
					//state.selectHeight = (res1.top-res.statusBarHeight)*2+ res1.height;
					//#endif
					//console.log('status height'+state.status_height)
					_self.$refs.amap.setMyStyle("height:"+(scrollH-88-50)+ "px;width:"+scrollW+"px;");
				}
			})
			
		
			
			this.getPoint();
			
 		},
		gotoLine(item, downid) {
			uni.navigateTo({
				url: '/pages/route/index?id=' + item.routeId + '&upid=' + item.startStationId + '&downid=' + downid
			});
		},
		mapopenBtn() {
			this.mapopen = !this.mapopen;
			if (this.mapopen) {
				this.$refs.amap.setMyStyle('width: 100%; height: 340px;');
			} else {
				this.$refs.amap.setMyStyle('width: 100%; height: 140px;');
			}
		},

		getNearbyStationInfo() {
			
			let data1 = {latitude:this.latitude,longtitude:this.longitude,findType:"1"};
			this.getChargingStationData(data1);
			let data2 = {latitude:this.latitude,longtitude:this.longitude,findType:"0"};
			this.getChargingStationData(data2);

			 
		},
		theme(type) {
			
		  if(type == 'elder')	
		  {
			document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
			let data = {
				backgroundColor: 'transparent',
				"font-size":'18px',
				"font-weight":"bold!important"
			};
			this.inputStyle = data;
 		  }
		  else
		  {
			document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
			let data  ={
				backgroundColor: 'transparent',
				"font-size":'16px',
				"font-weight":"normal"
			};
			this.inputStyle = data;
 			  
		  } 
		}
	}
};
</script>

 <style lang="scss" scoped>
	@import "@/_theme.scss";
	
	.uni-combox__no-border{
		white-space: nowrap;
	}
	.u-mask {
		position: fixed;
		left: 0;
		top: 576px;
		}
		
	.content-s{
		height: 440px;
		overflow-y:scroll;
	}
.cj-slider {
	width: 90%;
	margin: auto;
}

.cj-slide__text {
	text-align: center;
	padding: 20rpx;
}
.preference_group_item {
	padding: 15rpx;
}
.preference_group {
	padding-bottom: 20rpx;
}
.preference {
	background-color: #ffffff;
	left: 0rpx;
	position: absolute

}
.preference_item {
	margin-bottom: 10rpx;
	margin-left: 20rpx;
	text-align: center;
	border-style: none;
	width: 20%;
	height: 28px;
	@include themeify{
		font-size: themed('font-size1');
		line-height: themed('font-size2');
	}
/*	line-height: 14px;*/
}

.preference_item_medium {
	margin-bottom: 10rpx;
	margin-left: 20rpx;
	text-align: center;
	border-style: none;
	width: 22%;
	height: 28px;
	@include themeify{
		font-size: themed('font-size1');
		line-height: themed('font-size2');
	}
/*	line-height: 14px;*/
}
.preference_item_plus {
	margin-bottom: 10rpx;
	margin-left: 20rpx;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 28%;
	border-style: none;
	height: 28px;
	@include themeify{
		font-size: themed('font-size1');
		line-height: themed('font-size2');
	}
/*	line-height: 14px;*/
}
.preference_label {
	@include themeify{
		color:themed('font_colorLabel');
		font-size: themed('font-size1');
		font-weight: themed('fontWeight');
	}
	margin-left: 20rpx;
	margin-bottom: 100rpx;
}
.pre-btn{
	width: 100%;
	height: 48px;
	z-index: 999;
}

.btn-1,.btn-2{
	height: 48px;
	line-height: 48px;
	text-align: center;
	border-top: 1px solid rgba(225, 228, 232, 100);
}
.map{
	background-color: #ffffff;
	left: 0rpx;
	position: absolute;
	
}
.chargerCard{
/*	background-color: #fff;
	margin: 0 12px;
	border-radius: 8px;
	padding: 10px 12px 0px;
	position: absolute;
	bottom: 68px;
	left: 0;
	right: 0;
	z-index:1021
*/
	background-color: #fff;
	margin: 0 12px;
	border-radius: 8px;
	padding: 10px 12px 0px;
	bottom: 68px;
	left: 0;
	right: 0;	
	position: fixed; 
	@include themeify{
		height:themed('cardHeight'); 
	} 
	/*
	z-index: 1021; 
	width: 80%;
	margin-left: 10%;
	bottom: 50rpx;
	
	*/
}
.arrow{
	margin-right: 15rpx;
}
.card_item{
	display: flex;
	flex-direction: row;
	@include themeify{
 		font-size: themed('font-size2');
 	}
	justify-content: space-between;
	margin-left: 20rpx;
	margin-right: 20rpx;
	margin-bottom: 10rpx;
}
.card_item2{
	display: flex;
	flex-direction: row;
	@include themeify{
 		font-size: themed('font-size2');
 	}
	margin-left: 20rpx;
	margin-right: 20rpx;
	margin-bottom: 10rpx;
}
.round{
	border-radius:50rpx; 
	background-color: #00B962;
	color: #ffffff;
	text-align: center;
	justify-content: center;
	align-items: center;
	@include themeify{
		font-size: themed('font-size2');
		width:themed('buttonWidth')
	}
	
/*	width: 250rpx;*/
	display: flex;
	flex-direction: row;
}
.round2{
	border-radius:50rpx; 
	background-color: #00B962;
	color: #ffffff;
	text-align: center;
	justify-content: center;
	align-items: center;
	width:125rpx;
  }

.swiper-item{
 }
 
 .list {
 	margin-left: 2px;
 
 }
 
 .charing-slow {
 	background-color: #fff;
	margin: 20rpx;
	border-radius: 8px;
 	padding: 10px 12px 0px;
 	position: relative;
 	left: 0;
 	right: 0;
}
 	.fast-charge {
 		display: inline-block;
 		width: 44px;
/* 		height: 20px;
 		line-height: 20px;*/
 		border-radius: 50px;
 		background-color: #9d9fff;
 		color: rgba(255, 255, 255, 100);
		@include themeify{
			font-size: themed('font-size1');
			line-height: themed('font-size5');
			height: themed('font-size5');
		}
 		text-align: center;
 	}
	
	.fast-trickle-charge {
		display: inline-block;
		width: 66px;
/*		height: 20px;
		line-height: 20px;*/
		border-radius: 50px;
		background-color: #00BAC8;
		color: rgba(255, 255, 255, 100); 
		@include themeify{
			font-size: themed('font-size1');
			line-height: themed('font-size5');
			height: themed('font-size5');
		}
		text-align: center;
	}
	.trickle-charge {
		display: inline-block;
		width: 44px;
/*		height: 20px;
		line-height: 20px;*/
		border-radius: 50px;
		background-color: rgba(0, 185, 98, 100);
		color: rgba(255, 255, 255, 100);
		@include themeify{
			font-size: themed('font-size1');
			line-height: themed('font-size5');
			height: themed('font-size5');
		}
		text-align: center;
	}
 
 	.station-items {
 		display: inline-block;
/* 		height: 16px;
 		line-height: 16px;*/
		@include themeify{
			font-size: themed('font-size3');
			font-weight: themed('fontWeight');
			line-height: themed('font-size3');
			height: themed('font-size3');
		}
/* 		font-size: 16px;*/
 		margin-left: 4px;
 		color: #101010;
 
 
 	}
	
	.fast-charge {
		display: inline-block;
		width: 44px;
/*		height: 20px;
		line-height: 20px;*/
		border-radius: 50px;
		background-color: #9d9fff;
		color: rgba(255, 255, 255, 100);
/*		font-size: 12px;*/
		
		@include themeify{
			font-size: themed('font-size1');
 			line-height: themed('font-size5');
			height: themed('font-size5');
		}
		text-align: center;
	}
 
 	.address {
 		margin-top: 8px;
/* 		line-height: 16px;*/
		@include themeify{
			font-size: themed('font-size1');
			line-height: themed('font-size3');
		}
/* 		font-size: 11px;*/
 		color: rgba(119, 119, 119, 100);
 	}
 
 	.price {
 		display: flex;
 		height: 20px;
 
 	}
 
 
 .num {
/* 	height: 20px;*/
 	color: rgba(255, 98, 0, 100);
 /*	font-size: 20px;*/
	 @include themeify{
		font-size: themed('font-size5');
		height: themed('font-size5');
	 }
 	text-align: left;
 	font-family: Roboto-medium;
 }
  
 .unit {
 /*	height: 14px;
 	line-height: 14px;*/
 	color: rgba(102, 102, 102, 100);
	@include themeify{
			font-size: themed('font-size2');
			height: themed('font-size2');
			line-height: themed('font-size2');
	}
/* 	font-size: 14px;*/
 	text-align: left;
 	font-family: AlibabaPuHui-regular;
 	margin-top: 6px;
 	margin-left: 4px;
 }
 	.park {
 		margin-top: 8px;
 		display: flex;
 
 		
 
 		
 	}
	.park-p {
		display: inline-block;
		width: 20px;
/*		height: 18px;
		line-height: 12px;*/
		@include themeify{
			line-height: themed('font-size1');
			height: themed('font-size4');
		}
		text-align: center;
		background-color: rgba(125, 177, 255, 100);
		color: #fff;
	}
	.park-text {
		display: inline-block;
		width: 300px;
/*		height: 17px;*/
		color: rgba(102, 102, 102, 100);
		@include themeify{
			font-size: themed('font-size1');
			height:themed('font-size4');
		}
/*		font-size: 12px;*/
		text-align: left;
		margin-left: 4px;
		margin-top: 2px;
	}
	
	 .map {
		width: 100%;
	 
		height: 100%;
		position: relative;
	}
	#container {
	  width: 100%;
	  height: 100%;
	}
 	.free {
 		display: flex;
 		justify-content: space-between;
 		height: 52px;
 		border-top: 1px solid rgba(238, 242, 240, 100);
 		margin-top: 10px;
 
 		
 	} 
	.free-num {
		line-height: 52px;
		@include themeify{
			font-size: themed('font-size3');
			font-weight: themed('fontWeight');
		}
/*		font-size: 16px*/
	} 
	.distance {
		width: 130px;
/*		height: 28px;
		line-height: 28px;*/
		color: rgba(255, 255, 255, 100);
		@include themeify{
			font-size: themed('font-size2');
			line-height: themed('font-size9');
			height: themed('font-size9');
		}
		/*
		font-size: 14px;*/
		background-color: #00b962;
		border-radius: 50px;
		margin: 12px;
		text-align: center;

		

	}
	.distance-font {
		@include themeify{
				font-size: themed('font-size3');
		}
/*		font-size: 16px*/
	}
	
	.position{
		color: #1677ff;
		@include themeify{
				font-size: themed('font-size2');
		}
/*		font-size: 14px*/
	}
	.position-box{
		position:absolute;
		top: 341px;
		right: 118px;
		width: 16px;
		height: 16px;
		/* line-height: 20px; */
		background-color: rgba(22, 119, 255, 100);
		text-align: center;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4);
		border: 2px solid rgba(255, 255, 255, 100);
		border-radius: 999px;
	}
</style>