手环界面，手环页面展示。

common/store.js

@@ -5,7 +5,7 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
     state: {
-		wholeSituationBackStageIp:'10.155.32.124',
+		wholeSituationBackStageIp:'127.20.10.9',
 		wholeSituationBackStagePort:'8082',
 		windpowerstationNameToId:{
            "宁夏新能源公司":"0","麻黄山风电场":"MHS_FDC","牛首山风电场":"NSS_FDC","青山风电场":"SBQ_FDC","石板泉风电场":"QS_FDC","香山风电场":"QS_FDC"

components/detail/Detail.vue

@@ -38,7 +38,7 @@
 <script>
 import uCharts from '../../components/tools/u-charts/u-charts.js';
 import res from '../../common/data.json';
-var _self;
+var _self=this;
 var canvaLineA;
 var canvaColumn = null;
 
@@ -53,9 +53,10 @@ export default {
 			pointKey:"MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0087",
 			targetdetail_visable: { targetdetail_target: true, targetdetail_curve: true, targetdetail_histogram: true},
 			targetdetail: { targetdetail_target: '', targetdetail_curve: '', targetdetail_histogram: ''},
-			socketTask_targetdetail_target:"",
+			socketTask_bracelet:"",
 			socketTask_targetdetail_curve:"",
 			socketTask_targetdetail_histogram:"",
+			socketTask_targetdetail_histogram:"",
 			cWidth: '',
 			cHeight: '',
 			pixelRatio: 1,
@@ -67,13 +68,7 @@ export default {
 
 
 
-	created: function() {
-/* 		this.address = this.getWindPowerStationNameToSessionStorage();
-		this.windPowerStationId = uni.getStorageSync('windPowerStationId');
-		this.targetdetail_target();
-		this.targetdetail_curve();
-		this.targetdetail_histogram(); */
-	},
+	
 	onShow() {
 		this.windPowerStationId = uni.getStorageSync('windPowerStationId');
 		this.address = this.getWindPowerStationNameToSessionStorage();
@@ -116,7 +111,9 @@ export default {
 			this.targetdetail_target();
 			this.targetdetail_curve();
 			this.targetdetail_histogram();
-		},async targetdetail_target() {
+		},
+		
+		async targetdetail_target() {
 			let ip;
 			uni.request({
 			    url:'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/targetdetail_target?pointKey='+this.pointKey,

components/windStationCardDetail/WindStationCardDetail.vue

@@ -588,7 +588,7 @@
 								max: 40,
 								position: 'left',
 								axisLineColor: '#2E2E2E',
-								title: '风速:(m/s)',
+								title: 'y轴',
 								titleFontColor: 'silver'
 							},
 							{

pages.json

@@ -59,7 +59,16 @@
 		   "path":"components/monitor/WindMonitor",
 		   "style":{}
 		  }
-        
+        ,{
+            "path" : "components/bracelet/braceletHistoryCurve",
+            "style" : {}
+        }
+        ,{
+            "path" : "components/bracelet/raceletDetails/heartbeatDetails",
+            "style" : {}
+        }
+		
+		
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/forecast/Forecast.vue

@@ -1,206 +1,823 @@
 <template>
+	 
 	<view class="content">
-		<cu-custom bgColor="bg-blacks" :isBack="false">
-		    <block slot="right">
-				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image>
-			</block>
-			<block slot="right">	
+		 <!-- <third-comp :key="menuKey"></third-comp> -->
+		<view>
+			<cu-custom bgColor="bg-blacks" :isBack="false">
+				<block slot="right"><image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image></block>
+				<block slot="right">
 					<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
 						<view class="cu-tag looknumber" style="margin-top: -2%;">
 							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
 						</view>
 					</view>
-			</block>
-			<block slot="right">
+				</block>
+				<block slot="right"></block>
+				<block slot="content">{{ address }}</block>
+				<block slot="right"><view class="plus" @tap="showModal" data-target="viewModal">+</view></block>
+			</cu-custom>
+		</view>
+		<!-- 地图组件 -->
+		<view>
+			<div><drawer ref="drawer" ></drawer></div>
+			<div class="plusDrawer" @tap="hideModal"><plusDrawer ref="plusDrawer"></plusDrawer></div>
+			<view class="page-body">
+				<view class="page-section page-section-gap">
+					<map  style="width: 100%; height: 253px;"
 					
-			</block>
-		    <block slot="content">{{address}}</block>
-			<block slot="right">
-				<view class="plus" @tap="showModal" data-target="viewModal">+</view>
-			</block>
-		</cu-custom>
-		<!-- 抽屉组件 -->
-		<div>
-			<drawer ref="drawer"></drawer>
-		</div>
-		<div class="plusDrawer" @tap="hideModal">
-			<plusDrawer ref="plusDrawer"></plusDrawer>
-		</div>
+						:controls="controls"
+						:circles="circles"
+						:polyline="polyline"
+						:scale="scale"
+						:latitude="latitude"
+						:longitude="longitude"
+						:markers="covers"
+					></map>
+				</view>
+			</view>
+		</view>
+		<!--经纬度组件-->
+		<view class="InformationCard">
+			<view class="informationCardAll">
+				<view class="informationCardTextOne">
+					<view class="informationCardText">
+						<view class="textSilver">经度:</view>
+						<view class="textWhite">{{  mapEnd_1 }}</view>
+					</view>
+				</view>
+				<view class="informationCardTextOne">
+					<view class="informationCardText">
+						<view class="textSilver">纬度:</view>
+						<view class="textWhite">{{ mapEnd_2 }}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 个人信息组件 -->
+		<view class="Personal_information_W">
+				<view class="name">姓名：李占国</view>
+
+				<view class="history"  @click="mapDate"> <span ></span> </view>
+
+				<view class="skills">技能：电力类，机械类</view>
+		</view>
+		<!-- 历史曲线组件 -->
+		<view class="curve">
+			<view class="curve_l">健康情况</view>
+			<view class="curve_r" @tap="common.navTo('/components/bracelet/braceletHistoryCurve?braceletCurve=' + braceletCurve)">历史曲线</view>
+			<div class="greater"></div>
+		</view>
+		<!-- 健康详情组件 -->
+		<view class="healthy">
+			
+			<view class="healthy_H">
+				<view class="details_z">心跳频率:({{ bracelet[deviceName][targetName_xtpl][targetName_xtpl_size].value }})</view>
+				<view class="details_m">步数:({{ bracelet[deviceName][targetName_bs][targetName_bs_size].value }})</view>
+				<view class="details_y">收缩频率:({{ bracelet[deviceName][targetName_ssxy][targetName_ssxy_size].value }})</view>
+			</view>
+			<view class="healthy_N">
+				<view class="details_z">舒张压:({{ bracelet[deviceName][targetName_szxy][targetName_szxy_size].value }})</view>
+				<view class="details_m">疲劳度:({{ bracelet[deviceName][targetName_pld][targetName_pld_size].value }})</view>
+				<view class="details_y">血氧浓度:({{ bracelet[deviceName][targetName_xynd][targetName_xynd_size].value }})</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import res from '../../common/data.json';
-	import drawer from '../../components/drawer/threeLineDrawer.vue'
-	import plusDrawer from '../../components/drawer/plusDrawer.vue';
-	
-	export default {
-		components: {
-			"drawer": drawer,
-			plusDrawer: plusDrawer
-		},
-		data:function(){
-			return{
-				badge: 22,
-				inconList:["form","favor","question","edit"],
-				modalName:null,
-				address: '宁夏新能源公司',
-				drawerList: [{
-						"name": "首页"
-					},
-					{
-						"name": "状态监视"
-					},
-					{
-						"name": "矩阵监视"
-					},
-					{
-						"name": "风场监视"
-					},
-					{
-						"name": "人员监视"
-					},
-				],
-				plusDrawerList: [{
-						name: '宁夏新能源公司',
-						windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
-					},
-					{
-						name: '牛首山风电场',
-						windPowerStationId: 'NSS_FDC'
+import res from '../../common/data.json';
+import drawer from '../../components/drawer/forecastThreeLineDrawer.vue';
+import plusDrawer from '../../components/drawer/plusDrawer.vue';
+var _self;
+export default {
+	components: {
+		drawer: drawer,
+		plusDrawer: plusDrawer
+	},
+	data: function() {
+		return {
+			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' //文本对齐方式。
 					},
-					{
-						name: '香山风电场',
-						windPowerStationId: 'XS_FDC'
+					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: [
+				{
+					name: '气象预测'
+				}
+				/* 	{
+						"name": ""
 					},
 					{
-						name: '石板泉风电场',
-						windPowerStationId: 'SBQ_FDC'
+						"name": ""
 					},
 					{
-						name: '青山风电场',
-						windPowerStationId: 'QS_FDC'
+						"name": ""
 					},
 					{
-						name: '麻黄山风电场',
-						windPowerStationId: 'MHS_FDC'
-					}
-				],
-				
-			}
+						"name": ""
+					}, */
+			],
+			plusDrawerList: [
+				{
+					name: '宁夏新能源公司',
+					windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
+				},
+				{
+					name: '牛首山风电场',
+					windPowerStationId: 'NSS_FDC'
+				},
+				{
+					name: '香山风电场',
+					windPowerStationId: 'XS_FDC'
+				},
+				{
+					name: '石板泉风电场',
+					windPowerStationId: 'SBQ_FDC'
+				},
+				{
+					name: '青山风电场',
+					windPowerStationId: 'QS_FDC'
+				},
+				{
+					name: '麻黄山风电场',
+					windPowerStationId: 'MHS_FDC'
+				}
+			]
+		};
+	},
+
+	onHide() {
+		this.$refs.drawer.closeDrawer();
+		this.hideModal();
+	},
+	onShow() {
+		this.windPowerStationId = uni.getStorageSync('windPowerStationId');
+		this.address = this.getWindPowerStationNameToSessionStorage();
+	},
+	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';
 		},
-		onHide() {
-			this.$refs.drawer.closeDrawer();
-			this.hideModal();
+		targetName_xtpl_size: function() {
+			return this.bracelet[this.deviceName][this.targetName_xtpl].length - 1;
 		},
-		onShow(){
-			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
-			this.address = this.getWindPowerStationNameToSessionStorage();
+		targetName_pld: function() {
+			return this.deviceName + '_PLD';
 		},
-		methods:{
-			openDrawer:function(){
-				this.$refs.drawer.openDrawer(250,this.drawerList,this.inconList);
-			},
-			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');
-			},
-			openDrawer: function() {
-				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
-			},
-			showModal(e) {
-				this.modalName = e.currentTarget.dataset.target;
-				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
-			},
-			hideModal() {
-				this.modalName = null;
-				this.$refs.plusDrawer.hideModal(this.modalName);
+		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: {
+		mapDate(){
+			
+		
+			
+			
+				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");
+					
+				}
+					/* 定义地图经纬度中心 */
+					/* this.latitude =  parseFloat(this.mapBegin_2)+parseFloat(this.mapEnd_2)/2;
+					this.longitude =  parseFloat(this.mapBegin_1)+parseFloat(this.mapEnd_1)/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.bool = true;
+						
+					
+				}
+				this.$forceUpdate();
 			},
+		openDrawer: function() {
+			this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+		},
+		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');
+		},
+		openDrawer() {
+			this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+		},
+		showModal(e) {
+			this.modalName = e.currentTarget.dataset.target;
+			this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
+		},
+		hideModal() {
+			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 09:26:27&&endDate=2020-04-25 09: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',
+				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.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: 20px;
-		color: silver;
-		background: #000;
-	}
-	
-	@font-face {
-		font-family: '方正兰亭细黑_GBK';
-		src: url(../../static/fzltxh.TTF);
-	}
+body {
+	font-family: '方正兰亭细黑_GBK';
+	font-size: 20px;
+	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;
 	
-	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;
-	}
+}
+.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: 30px;
+	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-top: 6%;
+	margin-left: 3%;
+	height: 200px;
+	width: 95%;/* 
+	background-color:#242424; */
+	text-align: center;
+	color: #B8B7B7;
+	font-size: 12px;
+	line-height:50px ;
+	font-weight: 1000;
+}
+.healthy_H,
+.healthy_N,
+.healthy_W {
+	position: relative;
+	width: 100%;
+	height: 28%;
+	text-align: center;
+	margin-top: 3%;
+}
 
-	.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;
+.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%;	
+	height: 93%;
+	left:3%;
+	top: 12%;
+}
+.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: 93%;
+	top: 12%;
+}
+.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: 93%;
+	top: 12%;
+	/* 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;
-		line-height: 45px;
-		margin-top: 11px;
-		font-size: 18px;
-	}
+		 text-align: center;
+		padding-top: 10px;
+	background-color: #ffffff;
+	font-size: 12px;
+	padding-bottom: 4px;
+	line-height: 13px;
 
-	.notice {
-		width: 50px;
-		height: 45px;
-		float: left;
-	}
+	border-radius: 5px;
+	padding-top: 8px; */
+}
 
-	.plus {
-		width: 30px;
-		height: 45px;
+span::after {
+	content: url(../../static/picture/forcast/position.png);
+}
+	/* .greater {
+	           position: relative;
+	            width: 249px;
+	            height: 35px;
+	            border: 1px solid #000;
+	        } */
+    .greater{
 		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;
-	}
-	
+            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);
+			
+        }
 </style>