sisMobilePhone/pages/weatherProphet7/WeatherProphet7.vue

<template>
	<view>
		<!-- @tap="common.navTo('/components/addressSelect/AddressSelect?option='+address)" -->
		<view @tap="common.navTo('/components/addressSelect/AddressSelect?option='+address)">
			<cu-custom bgColor="bg-gradual-earkblue" :isBack="false">
				<block slot="backText">
					<view style="height: 80rpx;line-height: 80rpx;">返回</view>
				</block>
				<block slot="content">
					<text :class="'cuIcon-locationfill'"></text>
				</block>
				<block slot="content">{{address}}</block>
				<block slot="content">
					<image style="width: 15px;height: 15px;margin-left: 4px;" src="../../static/picture/SanJiao.png">
				</block>
			</cu-custom>
		</view>


		<div>
			<WeatherTemperatureWindSpeedCard_7 ref='WeatherTemperatureWindSpeedCard_7' @listenEven="changeTap"></WeatherTemperatureWindSpeedCard_7>
		</div>

		<div class="weatherDayAndNightButton">
			<div :class="[weatherSwitch==true?'dayButtonWhite':'dayButtonBlack']" @click="weatherDaySwitch()">白天</div>
			<div :class="[weatherSwitch==false?'nightButtonWhite':'nightButtonBlack']" :style="{'margin-left':nightmarginleft}" @click="weatherNightSwitch()">夜间</div>

		</div>
		ㅤㅤ
		<!-- ㅤ</br></br> -->
		<div v-if="weatherSwitch">
		<scroll-view scroll-y scroll-with-animation class="scrollList" :style="{'height':height}">
			<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']" style="background-color: rgba(0, 0, 0, 0);">
				<view class="cu-item">
					<div class="cu-listAll"  :style="{'width':width}">
						<div class="cuIcon" :style="{'height':xianHeight}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[6].cuIcon,'text-'+ cuIconList[0].color]"></view><a class="wenZhi"
							 :style="{'font-size':fontSize}">白气象</br>{{weatherInformation.weather1}}</a>
						</div>
		
						<div class="cuIcon" :style="{'height':xianHeight}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[7].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							 class="wenZhi" :style="{'font-size':fontSize}">白气温</br>{{weatherInformation.temperature1}}℃</a>
						</div>
						<div class="cuIcon" :style="{'height':xianHeight}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[8].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							class="wenZhi" :style="{'font-size':fontSize}">白体感</br>{{weatherInformation.realfeel1}}℃</a>
						</div>
						<div class="cuIcon4">
							<view class="icon iconfont" :class="['icon-' + cuIconList[9].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							 class="wenZhi" :style="{'font-size':fontSize}">白降水</br>{{weatherInformation.precipitation1}}m/s</a>
						</div>
					</div>
		
					<div class="cu-listAllTwo"  :style="{'width':width,'margin-top':margintop}">
						<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[10].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							class="wenZhi" :style="{'font-size':fontSize}">白风向</br>{{weatherInformation.winddirection1}}</a>
						</div>
		
						<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[11].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							class="wenZhi" :style="{'font-size':fontSize}">白风速</br>{{weatherInformation.speed1}}km/h</a>
						</div>
						<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[12].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							class="wenZhi" :style="{'font-size':fontSize}">白阵风速</br>{{weatherInformation.gust1}}km/h</a>
						</div>
						<div class="cuIcon4" :style="{'margin-top':margintop}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[0].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							class="wenZhi" :style="{'font-size':fontSize}">天气</br>{{weatherInformation.weather}}</a>
						</div>
		
					</div>
					<div class="cu-listAllTThree"  :style="{'width':width,'margin-top':margintopThree}">
						<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[1].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							class="wenZhi" :style="{'font-size':fontSize}">最高温度</br>{{weatherInformation.maximumtem}}℃</a>
						</div>
		
						<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[2].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							class="wenZhi" :style="{'font-size':fontSize}">最低温度</br>{{weatherInformation.minimumtem}}℃</a>
						</div>
						<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[3].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							class="wenZhi" :style="{'font-size':fontSize}">日出</br>{{weatherInformation.sunrise}}</a>
						</div>
						<div class="cuIcon4" :style="{'margin-top':margintopThree}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[4].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							class="wenZhi" :style="{'font-size':fontSize}">日落</br>{{weatherInformation.sunset}}</a>
						</div>
					</div>
					<div class="cu-listAllTFour"  :style="{'width':width,'margin-top':margintopThree}">
						<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
							<view class="icon iconfont" :class="['icon-' + cuIconList[5].cuIcon,'text-'+ cuIconList[0].color]"></view><a
							class="wenZhi" :style="{'font-size':fontSize}">持续时间</br>{{weatherInformation.sunduration}}</a>
						</div>
						<div class="cuIcon2">
						</div>
						<div class="cuIcon2">
						</div>
						<div class="cuIcon2">
						</div>
		
					</div>
				</view>
			</view>
		</scroll-view>
			</div> 

		<view v-if=!weatherSwitch>
			<scroll-view scroll-y scroll-with-animation class="scrollList" :style="{'height':height}">
				<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']" style="background-color: rgba(0, 0, 0, 0);">
					<view class="cu-item">
						<div class="cu-listAll"  :style="{'width':width}">
							<div class="cuIcon" :style="{'height':xianHeight}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[6].cuIcon,'text-'+ cuIconList[0].color]"></view><a class="wenZhi"
								 :style="{'font-size':fontSize}">夜气象</br>{{weatherInformation.weather2}}</a>
							</div>
			
							<div class="cuIcon" :style="{'height':xianHeight}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[7].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								 class="wenZhi" :style="{'font-size':fontSize}">夜气温</br>{{weatherInformation.temperature2}}℃</a>
							</div>
							<div class="cuIcon" :style="{'height':xianHeight}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[8].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								class="wenZhi" :style="{'font-size':fontSize}">夜体感</br>{{weatherInformation.realfeel2}}℃</a>
							</div>
							<div class="cuIcon4">
								<view class="icon iconfont" :class="['icon-' + cuIconList[9].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								 class="wenZhi" :style="{'font-size':fontSize}">夜降水</br>{{weatherInformation.precipitation2}}m/s</a>
							</div>
						</div>
			
						<div class="cu-listAllTwo"  :style="{'width':width,'margin-top':margintop}">
							<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[10].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								class="wenZhi" :style="{'font-size':fontSize}">夜风向</br>{{weatherInformation.winddirection2}}</a>
							</div>
			
							<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[11].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								class="wenZhi" :style="{'font-size':fontSize}">夜风速</br>{{weatherInformation.speed2}}km/h</a>
							</div>
							<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[12].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								class="wenZhi" :style="{'font-size':fontSize}">夜阵风速</br>{{weatherInformation.gust2}}km/h</a>
							</div>
							<div class="cuIcon4" :style="{'margin-top':margintop}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[0].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								class="wenZhi" :style="{'font-size':fontSize}">天气</br>{{weatherInformation.weather}}</a>
							</div>
			
						</div>
						<div class="cu-listAllTThree"  :style="{'width':width,'margin-top':margintopThree}">
							<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[1].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								class="wenZhi" :style="{'font-size':fontSize}">最高温度</br>{{weatherInformation.maximumtem}}℃</a>
							</div>
			
							<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[2].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								class="wenZhi" :style="{'font-size':fontSize}">最低温度</br>{{weatherInformation.minimumtem}}℃</a>
							</div>
							<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[3].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								class="wenZhi" :style="{'font-size':fontSize}">日出</br>{{weatherInformation.sunrise}}</a>
							</div>
							<div class="cuIcon4" :style="{'margin-top':margintopThree}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[4].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								class="wenZhi" :style="{'font-size':fontSize}">日落</br>{{weatherInformation.sunset}}</a>
							</div>
						</div>
						<div class="cu-listAllTFour"  :style="{'width':width,'margin-top':margintopThree}">
							<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
								<view class="icon iconfont" :class="['icon-' + cuIconList[5].cuIcon,'text-'+ cuIconList[0].color]"></view><a
								class="wenZhi" :style="{'font-size':fontSize}">持续时间</br>{{weatherInformation.sunduration}}</a>
							</div>
							<div class="cuIcon2">
							</div>
							<div class="cuIcon2">
							</div>
							<div class="cuIcon2">
							</div>
			
						</div>
					</view>
				</view>
			</scroll-view>
		</view>




	</view>
	</view>
</template>

<script>
	import WeatherTemperatureWindSpeedCard_7 from '../../components/weatherTemperatureWindSpeedCard_7/WeatherTemperatureWindSpeedCard_7.vue'
	export default {
		components: {
			"WeatherTemperatureWindSpeedCard_7": WeatherTemperatureWindSpeedCard_7
		},
		data() {
			return {
				weatherInformation: {},
				cuIconList: [{
					cuIcon: 'weather',
					color: 'white',
					name: '天气',
				}, {
					cuIcon: 'maxTemperature',
					color: 'white',
					name: '最高温度',
				}, {
					cuIcon: 'minTemperature',
					color: 'white',
					name: '最低温度',
				}, {
					cuIcon: 'sunRise',
					color: 'white',
					name: '日出',
				}, {
					cuIcon: 'sunSet',
					color: 'white',
					name: '日落',
				}, {
					cuIcon: 'sunDuration',
					color: 'white',
					name: '持续时间',
				}, {
					cuIcon: 'dayWeather',
					color: 'white',
					name: '白气象',
				}, {
					cuIcon: 'dayTemperature',
					color: 'white',
					name: '白气温',
				}, {
					cuIcon: 'dayRealFeel',
					color: 'white',
					name: '白体感',
				}, {
					cuIcon: 'dayPrecipitation',
					color: 'white',
					name: '白降水',
				}, {
					cuIcon: 'dayWindDirection',
					color: 'white',
					name: '白风向',
				}, {
					cuIcon: 'dayWindSpeed',
					color: 'white',
					name: '白风速',
				}, {
					cuIcon: 'dayGust',
					color: 'white',
					name: '白阵风速',
				}, {
					cuIcon: 'nightWeather',
					color: 'white',
					name: '夜气象',
				}, {
					cuIcon: 'nightTemperature',
					color: 'white',
					name: '夜温度',
				}, {
					cuIcon: 'nightRealFeel',
					color: 'white',
					name: '夜体感',
				}, {
					cuIcon: 'nightPrecipitation',
					color: 'white',
					name: '夜降水',
				}, {
					cuIcon: 'nightWindDirection',
					color: 'white',
					name: '夜风向',
				}, {
					cuIcon: 'nightWindSpeed',
					color: 'white',
					name: '夜风速',
				}, {
					cuIcon: 'nightGust',
					color: 'white',
					name: '夜阵风速',
				}],
				assemblyWidth: '',
				assemblyHeight: '',
				address: "",
				modalName: null,
				gridCol: 4,
				gridBorder: false,
				weatherSwitch: true,
				windPowerStationId: "SBQ_FDC",
				weatherProphetDataAll_7: [],
				weatherProphetData_7: [],
				weatherIconsDay: [],
				weatherIconsNight: [],
				classNameDay: [],
				classNameNight: [],
				height: "",
				width:"",
				windowWidth:"",
				windowHeight:"",
				ziHeight:'',
				fontSize:'',
				xianHeight:'',
				nightmarginleft:'',
			};
		},
		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;
			this.height = parseInt(uni.getSystemInfoSync().windowHeight - 550) + "px"
			this.width = parseInt(uni.getSystemInfoSync().windowWidth) + "px"
			if(this.windowWidth>=768){
				this.margintop="60px";
				this.margintopThree="80px";
				this.messageTop="10px";
				this.fontSize="18px";
				this.xianHeight="168px";
				this.nightmarginleft="20px";
			}else{
				this.margintop="10px";
				this.margintopThree="10px";
				this.fontSize="14px";
				this.xianHeight="92px";
				this.nightmarginleft="20px";
			}
		},
		onShow() {
			this.address = this.getWindPowerStationNameToSessionStorage();
			this.windPowerStationId=uni.getStorageSync('windPowerStationId');
			this.getWeatherData();
		},
		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://49.4.78.143:8081/websocket/pageNumber_3/functionNumber_1",
					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);
						_this.weatherProphetDataAll_7 = res.data;
						_this.weatherProphetDataAll_7 = JSON.parse(res.data);
						_this.weatherProphetData_7 = [];
						//判断风场id 40天
						for (let i = 0; i < _this.weatherProphetDataAll_7.length; i++) {
							if (_this.weatherProphetDataAll_7[i].windpowerstationid == _this.windPowerStationId) {
								_this.weatherProphetData_7.push(_this.weatherProphetDataAll_7[i]);
							}
						}
						// console.log(_this.weatherProphetData_7);
						_this.$refs.WeatherTemperatureWindSpeedCard_7.weatherInformationCard('100', '100', _this.classNameDay, _this
							.classNameNight,
							_this.weatherProphetData_7);
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
				})
			},

			changeTap: function(item) {
				this.weatherInformation = JSON.parse(item); //vue json转object
			},

			weatherDaySwitch: function() {
				this.weatherSwitch = true;
			},
			weatherNightSwitch: function() {
				this.weatherSwitch = false;
			},
			closeSocket: function() {
				this.socket.onclose;
			},
			openSocket: function() {
				this.socket.onOpen;
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
		background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#2F698E), color-stop(0.15, #5C757C), to(#004C90));
		overflow-x: hidden;
	}

	.weatherDayAndNightButton {
		margin-left: 20px;
		width: 120px;
		height: 20px;
		// border-bottom: 1px solid white;
		margin-top: 400px;
		// position: absolute;

	}

	.border-left {
		border-style: solid;
		border-top-width: 0px;
		border-right-width: 1px;
		border-bottom-width: 0px;
		border-left-width: 0px;
		border-right-color: white;
	}

	.border-right {
		border-style: solid;
		border-top-width: 0px;
		border-right-width: 0px;
		border-bottom-width: 0px;
		border-left-width: 0px;
		border-right-color: #19B5BC;
	}

	.scrollList {
		// height:20%;
		height: 130px;
		width: 95%;
		margin: 0px auto;
		// margin-top: 500px;

	}

	.dayButtonWhite {
		height: 25px;
		margin-top: -4px;
		margin-left: 20px;
		color: white;
		font-size: 18px;
		border-style: solid;
		border-top-width: 0px;
		border-right-width: 0px;
		border-bottom-width: 3px;
		border-bottom-color: #FFEE35;
		border-left-width: 0px;
		font-family: "microsoft yahei";
		float: left;
	}

	.dayButtonBlack {
		height: 25px;
		margin-top: -4px;
		margin-left: 20px;
		color: #DEDEDE;
		font-size: 18px;
		font-family: "microsoft yahei";
		float: left;
	}

	.nightButtonWhite {
		height: 25px;
		margin-top: -4px;
		border-style: solid;
		border-top-width: 0px;
		border-right-width: 0px;
		border-bottom-width: 3px;
		border-left-width: 0px;
		border-bottom-color: #FFEE35;
		color: white;
		margin-left: 50rpx;
		font-size: 18px;
		font-family: "microsoft yahei";
		float: left;
	}

	.nightButtonBlack {
		height: 25px;
		margin-top: -4px;
		color: #DEDEDE;
		margin-left: 50rpx;
		font-size: 18px;
		font-family: "microsoft yahei";
		float: left;
	}

	.cuIcon {
		border-right: 1px solid white;
		height: 92px;
		//        float: left;
		//  width:100%;
		//  height:100px;
		//  margin-top:-20px;
		// padding-right: -20px; 
		//  box-sizing: border-box;
		//  padding-left:20px;
	}
.icon {
		font-size: 50upx;
	}
	.cu-listAll {
		// width: 100%;
		height: 100px;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
		margin-top: -20px;
		float: left;
		// margin-left: -5px;
	}

	.cu-listAllTwo {
		// width: 100%;
		height: 100px;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
	}

	.cu-listAllTThree {
		// width: 100%;
		height: 100px;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
	}

	.cu-listAllTFour {
		// width: 100%;
		height: 100px;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
		// justify-content: space-around;
	}
.wenZhi{
	color: white;
}
	.cuIcon1 {
		margin-top: 20px;
	}
	.cu-item{
		width: 100%;
		margin-left: -15px;
	}

</style>