sisMobilePhone/components/mine/chat/Chatindex.vue

<template>
	
		<!-- 抽屉组件 -->
		
		<!-- 地图组件 -->
		

    <view>
        <web-view :webview-styles="webviewStyles" src="https://192.168.1.105:4397/websocket/usercontroller/view?userid=admin"></web-view>
    </view>
		<!-- <view class="DrawerClose" :class="modalName == 'viewModal' ? 'show' : ''" @tap="hideModal"><text class="cuIcon-pullright"></text></view> -->
	</view>
</template>

<script>
import res from '../../../common/data.json';

var _self;
export default {
	components: {
       
	},
	data: function() {
		return {
			
			conflict:false,
			kg:true,
			leftNavigationtitle:'预测功能分组',
			leftbarkg:false,
			bs_computed:'',
			xtpl_computed:'',
			ssxy_computed:'',
			szxy_computed:'',
			pld_computed:'',
			xynd_computed:'',
			WeatherProphethomepagebool:true,
			toggleSwitch:false,
			menuKey:1,
			pointKey: 'MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0087',
			socketTask_bracelet: '',
			socketTask_close_bracelet: '',
			deviceName: 'Y1-A0BC',
			deviceNamePld: 'Y1-A0BC_PLD',
			deviceNameBs: 'Y1-A0BC_BS',
			deviceNameSsxy: 'Y1-A0BC_SSXY',
			deviceNameXtpl: 'Y1-A0BC_XTPL',
			deviceNameXynd: 'Y1-A0BC_XYND',
			deviceNameSzxy: 'Y1-A0BC_SZXY',
			deviceNameLng: 'Y1-A0BC_LNG',
			deviceNameLat: 'Y1-A0BC_LAT',
			bracelet: {
				deviceName: '',
				deviceNamePld: '',
				deviceNameBs: '',
				deviceNameSsxy: '',
				deviceNameXtpl: '',
				deviceNameXynd: '',
				deviceNameSzxy: '',
			},
			braceletCurve: {},
			mapBegin_1:'',
			mapEnd_1:'',
			mapBegin_2:'',
			mapEnd_2:'',
			points:[
				{
					latitude:'',
					longitude:''
				},
				{
					latitude:'',
					longitude:''
				}
			],
			list:{},
			braceletCurve_SSXY: [],
			braceletCurve_PLD: [],
			braceletCurve_SZXY: [],
			braceletCurve_XTPL: [],
			braceletCurve_BS: [],
			braceletCurve_XYND: [],
			braceletCurve_LNG: [],
			braceletCurve_LAT: [],
			/* targetdetail_visable: { targetdetail_target: true, targetdetail_curve: true, targetdetail_histogram: true},
				targetdetail: { targetdetail_target: '', targetdetail_curve: '', targetdetail_histogram: ''}, */
			targetName: '日发电量',
			targetUnit: '万kwh',
			
			bool:true,
			pld: '',
			ssxy: '',
			lng: '',
			szxy: '',
			lat: '',
			xtpl: '',
			bs: '',
			xynd: '',
			device_nam: '',
			title: 'map',
			latitude: 39.907,//定位中心
			longitude: 116.39742,//
			covers: [
				{
					
					latitude:39.909 , //纬度坐标点
					longitude:116.39742 , //经度
					iconPath: '../../static/picture/forcast/DingWei.png', //显示的图标
					title: '阿打算', //标注点名
					label: {
						//为标记点旁边增加标签
						content: '', //文本1
						color: '#F76350', //文本颜色
						anchorX: 0, //label的坐标，原点是 marker 对应的经纬度
						anchorY: -80, //label的坐标，原点是 marker 对应的经纬度
						// 					    x:39.909,//这个组件微信在1.2.0以后就废弃了
						// 					    y:116.39742,
						bgColor: '#fff', //背景色
						padding: 5, //文本边缘留白
						borderWidth: 1, //边框宽度
						borderColor: '#D84C29', //边框颜色
						textAlign: 'right' //文本对齐方式。
					},
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: '地点1',
						color: '#F76350',
						fontSize: 12,
						borderRadius: 5
					}
					// 					 anchor:{//经纬度在标注图标的锚点，默认底边中点
					// 						 x:5,
					// 						 y:1,
					// 					  }
				} , {
								    latitude:39.90   ,//最后点
								    longitude: 116.399,//
								    iconPath: '../../static/picture/forcast/DingWei.png',
									title:'阿迪达斯',
									x:'',//
									y: '',//116.399
									label:{
									        content:'',
									        color:'#F76350',
									        bgColor:'#fff',
									        padding:5,
									        borderRadius:4,
									 },
									 callout:{
									        content:'地点2',
									        color:'#F76350',
									        fontSize:12
									 }
								} 
			],
			scale: 15, //地图层级
			controls: [
				{
					//在地图上显示控件，控件不随着地图移动
					id: 1, //控件id
					/* iconPath: '../../static/picture/forcast/DingWei.png', *///显示的图标
					position: {
						//控件在地图的位置
						left: 15,
						top: 15,
						width: 40,
						height: 40
					}
				}
			],
			circles: [
				{
					//在地图上显示圆
					latitude: 39.9,
					longitude: 116.39,
					fillColor: '#FFC41F', //填充颜色
					color: '#12A1DD', //描边的颜色
					radius: 0, //半径
					strokeWidth: 2 //描边的宽度
				}
			],
			polyline: [
				{    /* .polyline[0].points */
					points:[{}],
					//指定一系列坐标点，从数组第一项连线至最后一项
					/* points: [{ latitude:this.mapBegin_1, longitude:this.mapBegin_2 }, { latitude: this.mapEnd_1, longitude:this.mapEnd_2 }], */
					/* points: [{ latitude: 0, longitude: 0 }, { latitude: 0, longitude: 0 }], */
					color: '#0000AA', //线的颜色
					width: 2, //线的宽度
					dottedLine: true, //是否虚线
					arrowLine: true //带箭头的线 开发者工具暂不支持该属性
				}
			],

			badge: 22,
			inconList: ['form', 'favor', 'question', 'edit'],
			modalName: null,
			address: '',
			drawerList: [],
			plusDrawerList: [],
			permissionsInformation:[]
		};
	},
	mounted() {
		//document.querySelector('body').setAttribute('style', 'background-color:#000000');
	},created: function() {
		// this.pushWindPowerStationNameToSessionStorage("麻黄山");
		this.viewUserid();
		this.monitoringAuthority();
		
		this.address = this.dataprocessing.getWindPowerStationName();
		this.FDC=this.dataprocessing.getWindPowerStationId();
		this.windPowerStationId =this.dataprocessing.getWindPowerStationId();
		

		this.$nextTick(function() {
			//this.getWeatherDataToday();
			//this.getWeatherData7();
		});
		this.cWidth = uni.upx2px(2000);
		this.cHeight = uni.upx2px(350);
		this.cWidth40 = uni.upx2px(5000);
		this.cHeight40 = uni.upx2px(350);
		
		

		this.windStation =this.dataprocessing.getWindPowerStationNameByNames(this.address);
		this.windStationName = this.windStation[0].replace('风电场', '');
		
		
		
	},
	
	onLoad(pointKey) {
		let _this = this;
		this.pointKey = pointKey.pointKey;
		this.targetName = pointKey.callTargetName;
		this.targetUnit = pointKey.callTargetUnit;
		this.braceletData();
		/* console.log(_this.bracelet[_this.deviceName]);
			console.log(_this.bracelet[_this.deviceName][_this.targetName_pld][0]); */
		/* uni.getLocation({//获取当前的位置坐标
							type: 'wgs84',
							success: function (res) {
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
							}
						}); */
	},
	onReady() {},

	computed: {
		
		targetName_xtpl: function() {
			return this.deviceName + '_XTPL';
		},
		targetName_xtpl_size: function() {
			return this.bracelet[this.deviceName][this.targetName_xtpl].length - 1;
		},
		targetName_pld: function() {
			return this.deviceName + '_PLD';
		},
		targetName_pld_size: function() {
			return this.bracelet[this.deviceName][this.targetName_pld].length - 1;
		},

		targetName_bs: function() {
			return this.deviceName + '_BS';
		},
		targetName_bs_size: function() {
			return this.bracelet[this.deviceName][this.targetName_bs].length - 1;
		},

		targetName_ssxy: function() {
			return this.deviceName + '_SSXY';
		},
		targetName_ssxy_size: function() {
			return this.bracelet[this.deviceName][this.targetName_ssxy].length - 1;
		},

		targetName_szxy: function() {
			return this.deviceName + '_SZXY';
		},
		targetName_szxy_size: function() {
			return this.bracelet[this.deviceName][this.targetName_szxy].length - 1;
		},

		targetName_xynd: function() {
			return this.deviceName + '_XYND';
		},
		targetName_xynd_size: function() {
			return this.bracelet[this.deviceName][this.targetName_xynd].length - 1;
		},

		backStageIp: function() {
			return this.$store.state.wholeSituationBackStageIp;
		},
		backStagePort: function() {
			return this.$store.state.wholeSituationBackStagePort;
		},
		windpowerstationNameToId: function() {
			return this.$store.state.windpowerstationNameToId;
		}
	},
	
	methods: {
		viewUserid: function() {
			this.plusDrawerList=uni.getStorageSync('plusList');
		},
		monitoringAuthority: function() {
			this.drawerList=uni.getStorageSync('leftlist3');
		},
		mapdelete(){
			//#ifdef H5
			
			   if(this.bool){
			   	
			   	this.$delete(this.polyline[0],'points');
			   	this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
			   	this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
			   	
			   	this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
			   	this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
			   	this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
			   	this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
			   	for(let val of this.polyline){
			   	
			   		this.$set(val,'points',this.points);					
			   		this.bool = false;
			   		console.log("true");
			   	
			   }
			   	/* 定义地图经纬度中心 */
			   	 var lat= parseFloat(this.mapBegin_2)+parseFloat(this.mapEnd_2);
			   	 var lng=  parseFloat(this.mapBegin_1)+parseFloat(this.mapEnd_1);
			   	 
			   	 this.latitude = lat/2;
			   	 this.longitude = lng/2;
			   }else{
			   	/* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
			   	this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
			   	
			   	this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
			   	this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
			   	this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
			   	this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
			   	 */
			   	
			   		/* this.$replace(this.polyline[0],'points'); */
			   		
			   	  /* this.latitude = this.mapBegin_2+this.mapEnd_2/2;
			   	   this.longitude = this.mapBegin_1+this.mapEnd_1/2; */
			   	   
			   		console.log("false");
			   		/* 还原定位中心位置 */
			   		this.latitude = this.mapBegin_2;
			   		this.longitude = this.mapBegin_1;	
			   			
			   		this.bool = true;
			   }
			   this.$forceUpdate();
			
			//#endif
			
			//#ifdef APP-PLUS
			  if(this.bool){
			  	
			  	this.$delete(this.polyline[0],'points');
			  	this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
			  	this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
			  	
			  	this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
			  	this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
			  	this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
			  	this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
			  	for(let val of this.polyline){
			  	
			  		this.$set(val,'points',this.points);					
			  		this.bool = false;
			  		console.log("true");
			  	
			  }
			  	/* 定义地图经纬度中心 */
			  	 var lat= parseFloat(this.mapBegin_2)+parseFloat(this.mapEnd_2);
			  	 var lng=  parseFloat(this.mapBegin_1)+parseFloat(this.mapEnd_1);
			  	 
			  	 this.latitude = lat/2;
			  	 this.longitude = lng/2;
			  }else{
			  	/* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
			  	this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
			  	
			  	this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
			  	this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
			  	this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
			  	this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
			  	 */
			  	
			  		this.$delete(this.polyline[0],'points');
			  		
			  	  /* this.latitude = this.mapBegin_2+this.mapEnd_2/2;
			  	   this.longitude = this.mapBegin_1+this.mapEnd_1/2; */
			  	   
			  		console.log("false");
			  		/* 还原定位中心位置 */
			  		this.latitude = this.mapBegin_2;
			  		this.longitude = this.mapBegin_1;	
			  			
			  		this.bool = true;
			  }
			  this.$forceUpdate();
			//#endif
		},
		mapDate(){
			
		
			
			
				
			},
		openDrawer: function() {
			this.monitoringAuthority();
			this.kg=false;
			if(this.$refs.drawer != undefined){
				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList,this.leftNavigationtitle);
			}else{
				console.log('雷霆嘎巴');
			}
		},
		closeDrawer: function() {
			
			this.drawerIsShow = false;
			
		},
		
		pushWindPowerStationNameToSessionStorage(windpowerstationName) {
			uni.setStorageSync('windpowerstationName', windpowerstationName);
			//sessionStorage.setItem('windpowerstationName', windpowerstationName);
			//alert("v"+ sessionStorage.getItem("windpowerstationName"));
			//this.common.goback('/pages/index/Index');
		},
		getWindPowerStationNameToSessionStorage() {
			uni.getStorageSync('windpowerstationName');
			return uni.getStorageSync('windpowerstationName');
		},
		leftbar(){
			
				this.kg=true;
			
			
		},
		onHide() {
			
			this.$refs.drawer.closeDrawer();
			this.hideModal();
		},
		onShow: function() {
			this.leftbar();
			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
			this.address = this.getWindPowerStationNameToSessionStorage();
			
			this.viewUserid();
			this.monitoringAuthority();
		},
		showModal(e) {
			this.conflict = true;
			this.viewUserid();
			this.kg=false;
			this.modalName = e.currentTarget.dataset.target;
			this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
		},
		hideModal() {
			this.conflict = false;
			this.leftbar();
			this.modalName = null;
			//this.$refs.plusDrawer.hideModal(this.modalName);
			
		},
		braceletData() {
			let _this = this;
			let ip;
			
			
			
			uni.request({
				url: 'http://' + _this.backStageIp + ':' + _this.backStagePort + '/bracelet/bracelet?beginDate=2020-04-20%2009:26:27&&endDate=2020-04-25%2009:26:29',
				success: res => {
					ip = res.data;
				}
			});

			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
			this.socketTask_bracelet = uni.connectSocket({
				/* 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】 */
				url: 'ws://' + _this.backStageIp + ':' + _this.backStagePort + '/websocket/pageNumber_9/functionNumber_1/all',
				success(data) {
					console.log('websocket连接成功');
				}
			});

			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
			this.socketTask_bracelet.onOpen(res => {
				console.log('WebSocket连接正常打开中...！');
				_this.is_open_socket = true;

				// 注：只有连接正常打开中 ，才能正常收到消息
				_this.socketTask_bracelet.onMessage(res => {
					//console.log("收到服务器内容：" + res.data);

					_this.bracelet = JSON.parse(res.data)[ip];
					_this.braceletCurve = JSON.stringify(_this.bracelet[_this.deviceName]);
					/* 获取起始经纬度 */
					_this.braceletCurve_LNG = _this.bracelet[_this.deviceName][_this.deviceNameLng];
					_this.braceletCurve_LAT = _this.bracelet[_this.deviceName][_this.deviceNameLat];
					_this.mapBegin_1 = (_this.bracelet[_this.deviceName][_this.deviceNameLng][0].value);
					_this.mapBegin_2 = (_this.bracelet[_this.deviceName][_this.deviceNameLat][0].value);
					_this.mapEnd_1 = (_this.bracelet[_this.deviceName][_this.deviceNameLng][_this.braceletCurve_LNG.length-1].value);
					_this.mapEnd_2 = (_this.bracelet[_this.deviceName][_this.deviceNameLat][_this.braceletCurve_LAT.length-1].value);
					
						
					
					_this.latitude = _this.mapBegin_2;
					_this.longitude = _this.mapBegin_1;
					
					_this.covers[0].latitude = _this.mapBegin_2;
					_this.covers[0].longitude = _this.mapBegin_1;
					_this.covers[1].latitude = _this.mapEnd_2;
					_this.covers[1].longitude = _this.mapEnd_1;
					
					_this.bs_computed = _this.bracelet[_this.deviceName][_this.targetName_bs][_this.targetName_bs_size].value;
					_this.xtpl_computed = _this.bracelet[_this.deviceName][_this.targetName_xtpl][_this.targetName_xtpl_size].value;
					_this.ssxy_computed = _this.bracelet[_this.deviceName][_this.targetName_ssxy][_this.targetName_ssxy_size].value;
					_this.szxy_computed = _this.bracelet[_this.deviceName][_this.targetName_szxy][_this.targetName_szxy_size].value;
					_this.pld_computed = _this.bracelet[_this.deviceName][_this.targetName_pld][_this.targetName_pld_size].value;
					_this.xynd_computed = _this.bracelet[_this.deviceName][_this.targetName_xynd][_this.targetName_xynd_size].value;
					/* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
					this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
					
					this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
					this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
					this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
					this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value; */
					/* _this.mapDate(); */
					/* _this.polyline[0].points[0].latitude=_this.mapBegin_2;
					_this.polyline[0].points[0].longitude=_this.mapBegin_1;
					_this.polyline[0].points[1].latitude=_this.mapEnd_2;
					_this.polyline[0].points[1].longitude=_this.mapEnd_1; */
					/* _this.braceletCurve_SSXY = _this.bracelet[_this.deviceName][_this.deviceNameSsxy];
						_this.braceletCurve_SZXY = _this.bracelet[_this.deviceName][_this.deviceNameSzxy];
						_this.braceletCurve_XYND = _this.bracelet[_this.deviceName][_this.deviceNameXynd];
						_this.braceletCurve_XTPL = _this.bracelet[_this.deviceName][_this.deviceNameXtpl];
						_this.braceletCurve_BS = _this.bracelet[_this.deviceName][_this.deviceNameBs];
						console.log(_this.braceletCurve_BS[0].value); */
				});
			});
			// 这里仅是事件监听【如果socket关闭了会执行】
			this.socketTask_bracelet.onClose(() => {
				uni.request({
					url: 'http://' + _this.backStageIp + ':' + _this.backStagePort + '/bracelet/close_bracelet?pointKey=' + _this.pointKey,
					success: res => {}
				});
			});
		}
	}
};
</script>

<style>
body {
	font-family: '方正兰亭细黑_GBK';
	font-size: 15px;
	color: silver;
	background: #000;
}

@font-face {
	font-family: '方正兰亭细黑_GBK';
	src: url(../../../static/fzltxh.TTF);
}
.content{
	//background-color: #000000;
}
page {
	background-color: #1f1f1f;
	font-family: '方正兰亭细黑_GBK';
	overflow-x: hidden;
}
.top {
	width: 100%;
	height: 130upx;
	padding-top: 5upx;
	background-color: #1f1f1f;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 100;
}

.threeLine {
	width: 50px;
	height: 45px;
	float: left;
}

.text {
	width: calc(100% - 100px);
	height: 45px;
	float: left;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	line-height: 45px;
	margin-top: 11px;
	font-size: 18px;
}

.notice {
	width: 50px;
	height: 45px;
	float: left;
}

.plus {
	width: 30px;
	height: 45px;
	float: right;
	color: white;
	font-size: 35px;
	line-height: 45px;
	text-align: right;
	margin-right: 2.5%;
}

.textWindpowerstation {
	width: 180px;
	height: 45px;
	float: left;
	text-align: center;
	margin-left: 18px;
}
.InformationCard {
	position: absolute;
	top: 50px;
	left: 0px;
	margin-top: 0px;
	width: 50%;
	height: 8%;
	background: rgba(0, 0, 0, 0);
	float: left;
}
.informationCardAll {
	width: 95%;
	margin-left: 2.5%;
	margin-top: 10px;
	height: 60px;
	float: left;
}
.informationCardTextOne {
	width: 100%;
	height: 35px;
	float: left;
	margin-top: -10px;
}
.informationCardText {
	/* margin-left: 2%; */
	width: 65px;
	height: 35px;
	line-height: 35px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 10px;
	transform: scale(0.975);
	float: left;
	font-weight: 1000;
}
.textSilver {
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: black;
	float: left;
}
.textWhite {
	color: black;
	float: right;
	width: 24px;
	font-size: 10px;
	margin-right: 13%;
	transform: scale(0.975);
	/* text-align: right; */
}
.Personal_information_W {
	position: relative;
	/* margin-top: 3%; */
	width: 90%;
	height: 80px;/* 
	background-color: #242424; */
	border-bottom: #BDBDBD solid 0.5px;
	transform: translateX(-50%);
	left: 50%;
	color: #B8B7B7;
}

.name{
	position: absolute;
	height: 30px;
	width: 130px;
	left: 3%;
	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
	text-align: left;
	line-height: 30px;
	margin-top: 1%;
	font-weight: 1000;
	
}
.history {
	position: absolute;
	margin-top: 6%;
	right: 3%;
	height: 30px;
	height: 20px;
	text-align: center;
	line-height: 30px;
}

.skills {
	position: absolute;
	top: 56%;
	left: 3%;
	height: 25px;
	width: 180px;/* 
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
	text-align: left;
	line-height: 30px;
}
.curve{
	position: relative;
	width: 90%;
	transform: translateX(-50%);
	left: 50%;
	height: 30px;
	margin-top: 3%;
	color: #B8B7B7;
	font-weight: 1000;
}
.curve_l{
	position: absolute;
	left: 3%;
}
.curve_r{
	position: absolute;
	right: 3%;
}
.healthy {
	margin-left: 3%;
	height: 180px;
	width: 95%;
	margin-bottom: 100px;
	text-align: center;
	color: #B8B7B7;
	font-size: 12px;
	line-height:65px ;
	font-weight: 1000;
	
}
.healthy_H,
.healthy_N,
.healthy_W {
	background-color:#242424;
	position: relative;
	width: 100%;
	height: 42%;
	text-align: center;
	/* padding-bottom: 1%; */
}


.details_z {
	position: absolute;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);	
	width: 30%;	
	left:3%;
	height: 60px;
	top: 3%;
	margin-top: 2%;
}
.details_m {
	position: absolute;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);	
	width: 30%;
	left: 35.5%;
	height: 60px;
	top: 3%;
	margin-top: 2%;
}
.details_y {
	position: absolute;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	width: 30%;
	left: 68%;
	height: 60px;
	top: 3%;
	margin-top: 2%;
	/* margin-bottom: 0.6%;
	margin-top: 0.6%;
	float: right;
	margin-left: 0.2%;
	margin-right: 1.2%;
	width: 31%;
	height: 100%;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
		color: silver;
		 text-align: center;
		padding-top: 10px;
	background-color: #ffffff;
	font-size: 12px;
	padding-bottom: 4px;
	line-height: 13px;

	border-radius: 5px;
	padding-top: 8px; */
}

.navigation::after {
	content: url(../../../static/picture/forcast/position.png);
}
	/* .greater {
	           position: relative;
	            width: 249px;
	            height: 35px;
	            border: 1px solid #000;
	        } */
    .greater{
		float: right;
            content: "";
			margin-top: 0.8%;
			margin-right: 0.8%;
           /* position: absolute; */
            /* top: 8px;
            right: 15px; */
            width: 8px;
            height: 8px;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg);
			
        }
		.windStationNameAndChoice {
					clear: both;
					width: 100%;
					height: 30px;
					margin-top: 1%;
					color: silver;
					/* border: 1px solid red; */
				}
				
				.windStationName {
					width: 50%;
					height: 100%;
					float: left;
					line-height: 30px;
					font-size: 14px;
					margin-left: 9.5%;
				}
				
				.windStationChoice {
					width: 20%;
					height: 100%;
					float: right;
					text-align: right;
					line-height: 30px;
					font-size: 14px;
					margin-right: 5%;
				}
				
				.s-popup-wrapper {
					width: 500rpx;
					background-color: #f0f0f0;
				
				}
				
				.s-popup-title {
					width: 100%;
					height: 50px;
					background-color: #211E21;
				}
				
				.s-popup-word {
					width: calc(100% - 65px);
					height: 50px;
					font-size: 14px;
					color: white;
					line-height: 50px;
					float: left;
					margin-left: 25px;
				}
				
				.s-popup-cha {
					width: 40px;
					height: 50px;
					text-align: center;
					line-height: 50px;
					float: right;
					font-size: 24px;
				}
				
				.windStationItemContainer {
					width: 100%;
				}
				
				.windStationItemContainerBlack {
					width: 100%;
					background-color: grey;
					color: white;
				}
				
				.windStationItem {
					width: 80%;
					height: 50px;
					border-bottom: 1px solid #c8c8c8;
					text-align: left;
					line-height: 50px;
					margin-left: 10%;
					color: #333333;
				}
				.DrawerPage {
					position: fixed;
					width: 100vw;
					height: 100vh;
					left: 0vw;
					background-color: #1f1f1f;
					transition: all 0.4s;
				}
				
				.DrawerPage.show {
					transform: scale(0.9, 0.9);
					left: 85vw;
					box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
					transform-origin: 0;
				}
				.DrawerPage .cu-bar.tabbar .action button.cuIcon {
					width: 64upx;
					height: 64upx;
					line-height: 64upx;
					margin: 0;
					display: inline-block;
				}
				
				.DrawerPage .cu-bar.tabbar .action .cu-avatar {
					margin: 0;
				}
				
				.DrawerPage .nav {
					flex: 1;
				}
				
				.DrawerPage .nav .cu-item.cur {
					border-bottom: 0;
					position: relative;
				}
				
				.DrawerPage .nav .cu-item.cur::after {
					content: '';
					width: 10upx;
					height: 10upx;
					background-color: currentColor;
					position: absolute;
					bottom: 10upx;
					border-radius: 10upx;
					left: 0;
					right: 0;
					margin: auto;
				}
				
				.DrawerPage .cu-bar.tabbar .action {
					flex: initial;
				}
</style>