sisMobilePhone/components/weatherProphethomepage/weatherDetail/Detail.vue

<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<!--导航栏-->
		<view>
			<cu-custom bgColor="bg-blacks" :isBack="true">
				<block slot="backText">
					<view style="height: 80rpx;line-height: 80rpx;">返回</view>
				</block>
				<block slot="content">{{address}}</block>
			</cu-custom>
		</view>
		
		<!-- 卡片 -->
		<view class="cu-card case" :class="isCard?'no-card':''">
			<view class="cardContenter">	
				<view class="timeAndTitle">
					<view class="time" :style="{'font-size':timeFontSize}">
						{{startDate}}~{{endDate}}
					</view>
					<view class="title" :style="{'font-size':titleFontSize}">
						温度/体感
					</view>				
				</view>
				<!-- uCharts柱状图 -->
				<scroll-view scroll-x="true" class="scrollUcharts">
					<view class="qiun-charts-column" >
						<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts-column"></canvas>
					</view>
				</scroll-view>									
			</view>
		</view>
		
		<!-- 卡片 -->
		<view class="cu-card case" :class="isCard?'no-card':''">
			<view class="cardContenter">	
				<view class="timeAndTitle">
					<view class="time" :style="{'font-size':timeFontSize}">
						{{startDate}}~{{endDate}}
					</view>
					<view class="title" :style="{'font-size':titleFontSize}">
						风速/风向
					</view>
				</view>					
				<!-- uCharts折线图 -->
				<scroll-view scroll-x="true" class="scrollUcharts">
					<view class="hours">
						<view class="hour" :style="{'font-size':hourFontSize}" v-for="(item,index) in hours" :key="index">
							{{item}}时
						</view>
					</view>
					<view class="qiun-charts-lineA">
						<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts-lineA"></canvas>
					</view>
				</scroll-view>									
			</view>
		</view>
		
	 </view>
</template>

<script>
	import uCharts from '../../tools/u-charts/u-charts.js';
	export default {
		data() {
			return {
				address: '',
				option: '',
				isCard: false,
				cWidthLineA:'',
				cHeightLineA:'',
				pixelRatioLineA:1,
				cWidthColumn:'',
				cHeightColumn:'',
				pixelRatioColumn:1,
				weatherProphetData_17Hour:[
					{
						'data': '2020/02/25 00:00:00',
						'temperature': '15',
						'realfeel': '8',
						'winddirection': '东北',
						'speed': '3',
					},
					{
						'data': '2020/02/25 01:00:00',
						'temperature': '15',
						'realfeel': '10',
						'winddirection': '东北',
						'speed': '4',
					},
					{
						'data': '2020/02/25 02:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '东北',
						'speed': '5',
					},
					{
						'data': '2020/02/25 03:00:00',
						'temperature': '15',
						'realfeel': '9',
						'winddirection': '东北',
						'speed': '4',
					},
					{
						'data': '2020/02/25 04:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '东北',
						'speed': '3',
					},
					{
						'data': '2020/02/25 05:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '东北',
						'speed': '4',
					},
					{
						'data': '2020/02/25 06:00:00',
						'temperature': '15',
						'realfeel': '13',
						'winddirection': '东北',
						'speed': '5',
					},
					{
						'data': '2020/02/25 07:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '东北',
						'speed': '4',
					},
					{
						'data': '2020/02/25 08:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '东北',
						'speed': '3',
					},
					{
						'data': '2020/02/25 09:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '东北',
						'speed': '4',
					},
					{
						'data': '2020/02/25 10:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '东北',
						'speed': '5',
					},
					{
						'data': '2020/02/25 11:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '东北',
						'speed': '4',
					},
					{
						'data': '2020/02/25 12:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '东北',
						'speed': '3',
					},
					{
						'data': '2020/02/25 13:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '东北',
						'speed': '4',
					},
					{
						'data': '2020/02/25 14:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '东北',
						'speed': '5',
					},
					{
						'data': '2020/02/25 15:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '西南偏西',
						'speed': '4',
					},
					{
						'data': '2020/02/25 16:00:00',
						'temperature': '15',
						'realfeel': '15',
						'winddirection': '西南偏西',
						'speed': '3',
					}
				],								
				startDate:"",
				endDate:"",
				hours:[],
				weatherProphetDataAll_17Hour:[],
				windPowerStationId:"MHS_FDC",
				windowWidth:"",
				windowHeight:"",
				timeFontSize:"",
				titleFontSize:"",
				hourFontSize:"",
				xAxisFontSize:"",
				seriesTextSize:""
			};
		},
		created: function() {
			//this.pushWindPowerStationNameToSessionStorage("麻黄山");

			this.address = this.getWindPowerStationNameToSessionStorage();
			this.windPowerStationId=uni.getStorageSync('windPowerStationId');
			this.getWeatherData();
			this.windowWidth=uni.getSystemInfoSync().windowWidth;
			this.windowHeight=uni.getSystemInfoSync().windowHeight;
			if(this.windowWidth>=768){
				this.timeFontSize="22px";
				this.titleFontSize="22px";
				this.hourFontSize="22px";
				this.xAxisFontSize=18;
				this.seriesTextSize=18;
			}else{
				this.timeFontSize="15px";
				this.titleFontSize="15px";
				this.hourFontSize="15px";
				this.xAxisFontSize=12;
				this.seriesTextSize=12;
			}
		},
		onShow() {
			this.address = this.getWindPowerStationNameToSessionStorage();
			this.windPowerStationId=uni.getStorageSync('windPowerStationId');
			this.getWeatherData();
		},
		computed: {
					backStageIp: function() {
						return this.$store.state.wholeSituationBackStageIp;
					},
					backStagePort: function() {
						return this.$store.state.wholeSituationBackStagePort;
					},
					windpowerstationNameToId: function() {
						return this.$store.state.windpowerstationNameToId;
					}
				},
		methods:{
			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');
			},
			getWeatherData: function() {
				let _this = this;
					
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_3/functionNumber_2',
					success(data) {
						console.log("websocket连接成功");
					},
				});		

				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
				
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						//console.log("收到服务器内容：" + res.data);
						//debugger
						_this.weatherProphetDataAll_17Hour =res.data;
						_this.weatherProphetDataAll_17Hour=JSON.parse(res.data);
						_this.weatherProphetData_17Hour = [];
						//判断风场id 40天
						for(let i = 0; i < _this.weatherProphetDataAll_17Hour.length; i++) {
							if(_this.weatherProphetDataAll_17Hour[i].windpowerstationid == _this.windPowerStationId) {								
								_this.weatherProphetData_17Hour.push(_this.weatherProphetDataAll_17Hour[i]);
							}
						}
						//console.log(_this.weatherProphetData_17Hour);
						let startMonth = new Date(_this.weatherProphetData_17Hour[0].date).getMonth() + 1;
						let startDay = new Date(_this.weatherProphetData_17Hour[0].date).getDate() ;
						let startHour = new Date(_this.weatherProphetData_17Hour[0].date).getHours() ;
						_this.startDate = startMonth + "月" + startDay+"日" + startHour+"时";
						let endMonth = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getMonth() + 1;
						let endDay = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getDate() ;
						let endHour = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getHours() ;
						_this.endDate = endMonth + "月" + endDay+"日" + endHour+"时";
						_this.hours=[];
						for(let i=0;i<_this.weatherProphetData_17Hour.length;i++){
							_this.hours.push(new Date(_this.weatherProphetData_17Hour[i].date).getHours());
						}
						_this.getServerData();
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
				})
				
				
				
				// let _this = this;
				// if(typeof(WebSocket) == "undefined") {
				// 	console.log("您的浏览器不支持WebSocket");
				// } else {
				// 	console.log("您的浏览器支持WebSocket");
				// 	//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
				// 	this.socket = new WebSocket("ws://49.4.78.143:8081/websocket/pageNumber_3/functionNumber_2");
				// 	this.openSocket();
				// 	//获得消息事件
				// 	this.socket.onmessage = function onMessage(message) {
				// 		_this.weatherProphetDataAll_17Hour = eval(message.data);
				// 		_this.weatherProphetData_17Hour = [];
				// 		//判断风场id
				// 		for(let i = 0; i < _this.weatherProphetDataAll_17Hour.length; i++) {
				// 			if(_this.weatherProphetDataAll_17Hour[i].windpowerstationid == _this.windPowerStationId) {
				// 				_this.weatherProphetData_17Hour.push(_this.weatherProphetDataAll_17Hour[i]);
				// 			}
				// 		}
				// 		console.log(_this.weatherProphetData_17Hour);
				// 		let startMonth = new Date(_this.weatherProphetData_17Hour[0].date).getMonth() + 1;
				// 		let startDay = new Date(_this.weatherProphetData_17Hour[0].date).getDate() ;
				// 		let startHour = new Date(_this.weatherProphetData_17Hour[0].date).getHours() ;
				// 		_this.startDate = startMonth + "月" + startDay+"日" + startHour+"时";
				// 		let endMonth = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getMonth() + 1;
				// 		let endDay = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getDate() ;
				// 		let endHour = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getHours() ;
				// 		_this.endDate = endMonth + "月" + endDay+"日" + endHour+"时";
				// 		_this.hours=[];
				// 		for(let i=0;i<_this.weatherProphetData_17Hour.length;i++){
				// 			_this.hours.push(new Date(_this.weatherProphetData_17Hour[i].date).getHours());
				// 		}
				// 		_this.getServerData();
				// 	}
				// }	
			},
			getServerData(){			
				//柱状图
				let Column={
					 "categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
					  "series": [{
						"name": "成交量1",
						"data": [15, {"value": 20,"color": "#f04864"}, 45, 37, 43, 34],
						"color": '#f04864',
						"textColor":"#FFFFFF",
						"textSize":this.seriesTextSize,
						format:(val)=>{return val+'℃ㅤ'}
					  }, {
						"name": "成交量2",
						"data": [30, {"value": 40,"color": "#facc14"}, 25, 14, 34, 18],
						"color": '#facc14',
						"textColor":"#FFFFFF",
						"textSize":this.seriesTextSize,
						format:(val)=>{return 'ㅤ'+val+'℃'}
					  }]
				};
				Column.categories=[];
				Column.series[0].data=[];
				Column.series[1].data=[];
				for(let i=0;i<this.weatherProphetData_17Hour.length;i++){		
					let xAxisHours = new Date(this.weatherProphetData_17Hour[i].date).getHours();					
					Column.categories.push(xAxisHours+"时");
					Column.series[0].data.push(this.weatherProphetData_17Hour[i].temperature);
					Column.series[1].data.push(this.weatherProphetData_17Hour[i].realfeel);
				}	
				this.showColumn("canvasColumn",Column);
				
				//折线图
				let LineA={
					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
					series: [{
						name: '风速',
						data: [35, 20, 25, 37, 4, 20],
						color: '#FFFFFF',
						textColor:"#FFFFFF",
						textSize:this.seriesTextSize,
						format:(val)=>{return val+'km/h'}
					}]
				};
				LineA.categories=[];
				LineA.series[0].data=[];									
				for(let i=0;i<this.weatherProphetData_17Hour.length;i++){		
					LineA.categories.push(this.weatherProphetData_17Hour[i].winddirection );
					LineA.series[0].data.push(this.weatherProphetData_17Hour[i].speed);
				}										
				this.showLineA("canvasLineA",LineA);	
				
			},
			showColumn(canvasId,chartData){
				var _self = this;
				var canvaColumn=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					legend:{show:false},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatioColumn,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid:true,
						fontColor:"#FFFFFF",
						fontSize:_self.xAxisFontSize,
					},
					yAxis: {
						disabled:true,
						disableGrid:true,
						min:-40,
						max:50,
					},
					dataLabel: true,
					width: _self.cWidthColumn*_self.pixelRatioColumn,
					height: _self.cHeightColumn*_self.pixelRatioColumn,
					padding:[0,10,15,10],//画布填充边距，顺序为上右下左，同css，但必须4位
					extra: {
						column: {
							type:'group',
							width: '10'					
						}
					  }
				});			
							
			},
			showLineA(canvasId,chartData){
				var _self = this;
				var canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					legend:{show:false},//图例
					dataLabel:true,//数据点标签
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatioLineA,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
						disableGrid:true,//网格线
						axisLine:true,//x轴轴线
						fontColor:"#FFFFFF",
						fontSize:_self.xAxisFontSize
					},
					yAxis: {	
						data:{
							disabled:false//y轴轴线
						},			
						disableGrid:true,//网格线
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:-40,
						max:40,
						format:(val)=>{return val.toFixed(0)+'元'}
					},
					width: _self.cWidthLineA*_self.pixelRatioLineA,
					height: _self.cHeightLineA*_self.pixelRatioLineA,
					padding:[0,0,15,-25],//画布填充边距，顺序为上右下左，同css，但必须4位
					extra: {
						line:{
							type: 'curve'//曲线
						}
					}
				});
			},
			closeSocket: function() {
				this.socket.onclose;
			},
			openSocket: function() {
				this.socket.onOpen;
			}
		},
		onLoad(option) {		
			this.cWidthColumn=uni.upx2px(840);
			this.cHeightColumn=uni.upx2px(350);
			this.cWidthLineA=uni.upx2px(840);
			this.cHeightLineA=uni.upx2px(300);
			//this.getServerData();
			this.address = this.getWindPowerStationNameToSessionStorage();;
		
		}
	}
</script>

<style>
page {
		background-color: #1f1f1f;
		font-family: '方正兰亭细黑_GBK';
		overflow-x: hidden;
	}	
.cu-card{
	width: 90%;
	height: 450upx;
	margin: 15px auto;
}
.cardContenter{	
	border-radius: 20px;
	/* margin: 20px auto; */
	width: 100%;
	height: 450upx;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
	background: rgba(0, 0, 0, 0.1);
}
.timeAndTitle{
	width: 90%;
	margin-left: 20px;
	height: 100upx;
	font-family: "microsoft yahei";
	font-size: 15px;
	color: white;
}
.time{
	float: left;
	height: 100upx;
	line-height: 100upx;
}
.title{
	float: right;
	text-align: right;
	height: 100upx;
	line-height: 100upx;
}
.hours{
	width: 800upx;
	height: 50upx;
	margin-left: 27px;
	color: white;
}
.hour{
	width: 50upx;
	float: left;
	margin-right: 32px;
}
.scrollUcharts{
	white-space: nowrap;
}

.qiun-charts-lineA {
		width: 840upx;
		height: 300upx;
	}
	
	.charts-lineA {
		width: 840upx;
		height: 300upx;
	}
.qiun-padding{
	padding:2%;
	width:96%;
}
.qiun-wrap{
	display:flex; 
	flex-wrap:wrap;
}
.qiun-rows{
	display:flex; 
	flex-direction:row !important;
}
.qiun-columns{
	display:flex; 
	flex-direction:column !important;
}
.qiun-common-mt{
	margin-top:10upx;
}
.qiun-bg-white{
	background:#FFFFFF;
}
.qiun-title-bar{
	width:96%; 
	padding:10upx 2%; 
	flex-wrap:nowrap;
}
.qiun-title-dot-light{
	border-left: 10upx solid #0ea391; 
	padding-left: 10upx; 
	font-size: 32upx;
	color: #000000
}
.qiun-charts-column{
	width: 840upx; 
	height:350upx;
	/* background-color: #FFFFFF; */
}
.charts-column{
	width: 840upx; 
	height:350upx;
	/* background-color: #FFFFFF; */
}	
	
	
</style>