sisMobilePhone/components/weatherProphethomepage/WeatherProphethomepage.vue

<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">	
					<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="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>
		<scroll-view scroll-y class="DrawerPage" :class="modalName == 'viewModal' ? 'show' : ''">
			<!--点击天数选项卡-->
			<view class="clickThedaystab">
				<view :class="[weatherTodaybutton?'weatherTodaywhite':'weatherToday']" @click="weatherToday()">今天</view>
				<view :class="[weatherSevendaybutton?'weatherSevendaywhite':'weatherSevenday']" @click="weatherSevenday()">7天</view>
				<view :class="[weatherFromeighttofifteendaysbutton?'weatherFromeighttofifteendayswhite':'weatherFromeighttofifteendays']"
				 @click="weatherFromeighttofifteendays()">8~15天</view>
				<view :class="[weatherFortydaysbutton?'weatherFortydayswhite':'weatherFortydays']" @click="weatherFortydays()">40天</view>
			</view>
				
			<!--风场选项卡-->
			<view class="windStationNameAndChoice">
				
				<view class="windStationName"></view>
				<!--<view class="windStationName">{{ windStationName }}</view>
				<view class="windStationChoice"><a @click="showCenterVisible = true">其他ㅤ〉</a></view>-->
			</view>
			<s-popup custom-class="center-popup" position="center" v-model="showCenterVisible">
				<view class="s-popup-wrapper" :style="{'height': spopupWrapperHeight}">
					<view class="s-popup-title">
						<view class="s-popup-word">选择您想查看的风场</view>
						<view class="s-popup-cha"><a @tap="showCenterVisible = false">×</a></view>
					</view>
					<view class="windStationList" :style="{ 'height': windStationListHeight}">
						<view class="windStationItemContainer" v-for="(item,index) in windStation" :key="index" :class="[choiceIndex==index?'windStationItemContainerBlack':'windStationItemContainer']">
							<view class="windStationItem" @tap="choiceWindStation(item,index)">{{item}}</view>
						</view>
					</view>
				</view>
			</s-popup>

			<!-- 今天气象卡片 -->
			<view v-if="weatherTodaybutton">
				<div class="ThermometerCard">
					<ThermometerCard ref="thermometerCard" @listenEven="weatherDayNightSwitch"></ThermometerCard>
				</div>
				<div class="weatherDetails">
					<div class="weatherText"><strong>气象指标</strong></div>
					<div class="detailsText" @tap="common.navTo('../../components/weatherProphethomepage/weatherDetail/Detail')">详情ㅤ〉</div>
				</div>
				<view v-if="weatherSwitch==true">
					<scroll-view scroll-y scroll-with-animation class="scrollList" :style="{'height':heightToday}">
						<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']" style="background-color: #242424;">
							<view class="cu-item">
								<div class="cu-listAll" :style="{'width':widthToday}">
									<div class="cuIcon" :style="{'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[6].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">白气象</br>{{weatherProphetData_1[0].weather1}}</a>
									</div>

									<div class="cuIcon" :style="{'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[7].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">白气温</br>{{weatherProphetData_1[0].temperature1}}℃</a>
									</div>
									<div class="cuIcon" :style="{'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[8].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">白体感</br>{{weatherProphetData_1[0].realfeel1}}℃</a>
									</div>
									<div class="cuIcon4">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[9].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">白降水</br>{{weatherProphetData_1[0].precipitation1}}m/s</a>
									</div>
								</div>

								<div class="cu-listAllTwo" :style="{'width':widthToday,'margin-top':margintop}">
									<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[10].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">白风向</br>{{weatherProphetData_1[0].winddirection1}}</a>
									</div>

									<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[11].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">白风速</br>{{weatherProphetData_1[0].speed1}}km/h</a>
									</div>
									<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[12].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">白阵风速</br>{{weatherProphetData_1[0].gust1}}km/h</a>
									</div>
									<div class="cuIcon4" :style="{'margin-top':margintop}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[0].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">天气</br>{{weatherProphetData_1[0].weather}}</a>
									</div>

								</div>
								<div class="cu-listAllTThree" :style="{'width':widthToday,'margin-top':margintopThree}">
									<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[1].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">最高温度</br>{{weatherProphetData_1[0].maximumtem}}℃</a>
									</div>

									<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[2].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">最低温度</br>{{weatherProphetData_1[0].minimumtem}}℃</a>
									</div>
									<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[3].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">日出</br>{{weatherProphetData_1[0].sunrise}}</a>
									</div>
									<div class="cuIcon4" :style="{'margin-top':margintopThree}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[4].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">日落</br>{{weatherProphetData_1[0].sunset}}</a>
									</div>
								</div>
								<div class="cu-listAllTFour" :style="{'width':widthToday,'margin-top':margintopThree}">
									<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[5].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">持续时间</br>{{weatherProphetData_1[0].sunduration}}</a>
									</div>
									<div class="cuIcon2">
									</div>
									<div class="cuIcon2">
									</div>
									<div class="cuIcon2">
									</div>
								</div>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="weatherSwitch==false">
					<scroll-view scroll-y scroll-with-animation class="scrollList" :style="{'height':heightToday}">
						<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']" style="background-color: #242424;">
							<view class="cu-item">
								<div class="cu-listAll" :style="{'width':widthToday}">
									<div class="cuIcon" :style="{'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[6].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">夜气象</br>{{weatherProphetData_1[0].weather2}}</a>
									</div>

									<div class="cuIcon" :style="{'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[7].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">夜气温</br>{{weatherProphetData_1[0].temperature2}}℃</a>
									</div>
									<div class="cuIcon" :style="{'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[8].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">夜体感</br>{{weatherProphetData_1[0].realfeel2}}℃</a>
									</div>
									<div class="cuIcon4">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[9].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">夜降水</br>{{weatherProphetData_1[0].precipitation2}}m/s</a>
									</div>
								</div>

								<div class="cu-listAllTwo" :style="{'width':widthToday,'margin-top':margintop}">
									<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[10].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">夜风向</br>{{weatherProphetData_1[0].winddirection2}}</a>
									</div>

									<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[11].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">夜风速</br>{{weatherProphetData_1[0].speed2}}km/h</a>
									</div>
									<div class="cuIcon" :style="{'margin-top':margintop,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[12].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">夜阵风速</br>{{weatherProphetData_1[0].gust2}}km/h</a>
									</div>
									<div class="cuIcon4" :style="{'margin-top':margintop}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[0].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">天气</br>{{weatherProphetData_1[0].weather}}</a>
									</div>

								</div>
								<div class="cu-listAllTThree" :style="{'width':widthToday,'margin-top':margintopThree}">
									<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[1].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">最高温度</br>{{weatherProphetData_1[0].maximumtem}}℃</a>
									</div>

									<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[2].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">最低温度</br>{{weatherProphetData_1[0].minimumtem}}℃</a>
									</div>
									<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[3].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">日出</br>{{weatherProphetData_1[0].sunrise}}</a>
									</div>
									<div class="cuIcon4" :style="{'margin-top':margintopThree}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[4].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">日落</br>{{weatherProphetData_1[0].sunset}}</a>
									</div>
								</div>
								<div class="cu-listAllTFour" :style="{'width':widthToday,'margin-top':margintopThree}">
									<div class="cuIcon" :style="{'margin-top':margintopThree,'height':xianHeight}">
										<view class="icon1 iconfont" :class="['icon-' + cuIconList[5].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize}">持续时间</br>{{weatherProphetData_1[0].sunduration}}</a>
									</div>
									<div class="cuIcon2">
									</div>
									<div class="cuIcon2">
									</div>
									<div class="cuIcon2">
									</div>
								</div>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 7天气象卡片 -->
			<view v-if="weatherSevendaybutton">
				<div>
					<WeatherTemperatureWindSpeedCard_7 ref='WeatherTemperatureWindSpeedCard_7' @listenEven="changeTap"></WeatherTemperatureWindSpeedCard_7>
				</div>
				<div class="weatherDayAndNightButton7">
					<div :class="[weatherSwitch7==true?'dayButtonWhite7':'dayButtonBlack7']" @click="weatherDaySwitch7()">白天</div>
					<div :class="[weatherSwitch7==false?'nightButtonWhite7':'nightButtonBlack7']" :style="{'margin-left':nightmarginleft7}"
					 @click="weatherNightSwitch7()">夜间</div>
				</div>
				<div v-if="weatherSwitch7">
					<scroll-view scroll-y scroll-with-animation class="scrollList7" :style="{'height':height7}">
						<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-listAll7" :style="{'width':width7}">
									<div class="cuIcon7" :style="{'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[6].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">白气象</br>{{weatherInformation.weather1}}</a>
									</div>

									<div class="cuIcon7" :style="{'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[7].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">白气温</br>{{weatherInformation.temperature1}}℃</a>
									</div>
									<div class="cuIcon7" :style="{'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[8].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">白体感</br>{{weatherInformation.realfeel1}}℃</a>
									</div>
									<div class="cuIcon4">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[9].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">白降水</br>{{weatherInformation.precipitation1}}m/s</a>
									</div>
								</div>

								<div class="cu-listAllTwo7" :style="{'width':width7,'margin-top':margintop7}">
									<div class="cuIcon7" :style="{'margin-top':margintop7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[10].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">白风向</br>{{weatherInformation.winddirection1}}</a>
									</div>

									<div class="cuIcon7" :style="{'margin-top':margintop7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList[11].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">白风速</br>{{weatherInformation.speed1}}km/h</a>
									</div>
									<div class="cuIcon7" :style="{'margin-top':margintop7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[12].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">白阵风速</br>{{weatherInformation.gust1}}km/h</a>
									</div>
									<div class="cuIcon4" :style="{'margin-top':margintop7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList[0].cuIcon,'text-'+ cuIconList[0].color]"></view><a
										 class="wenZhi" :style="{'font-size':fontSize7}">天气</br>{{weatherInformation.weather}}</a>
									</div>

								</div>
								<div class="cu-listAllTThree7" :style="{'width':width7,'margin-top':margintopThree7}">
									<div class="cuIcon7" :style="{'margin-top':margintopThree7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[1].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">最高温度</br>{{weatherInformation.maximumtem}}℃</a>
									</div>

									<div class="cuIcon7" :style="{'margin-top':margintopThree7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[2].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">最低温度</br>{{weatherInformation.minimumtem}}℃</a>
									</div>
									<div class="cuIcon7" :style="{'margin-top':margintopThree7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[3].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">日出</br>{{weatherInformation.sunrise}}</a>
									</div>
									<div class="cuIcon4" :style="{'margin-top':margintopThree7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[4].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">日落</br>{{weatherInformation.sunset}}</a>
									</div>
								</div>
								<div class="cu-listAllTFour7" :style="{'width':width7,'margin-top':margintopThree7}">
									<div class="cuIcon7" :style="{'margin-top':margintopThree7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[5].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">持续时间</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="weatherSwitch7==false">
					<scroll-view scroll-y scroll-with-animation class="scrollList7" :style="{'height':height7}">
						<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-listAll7" :style="{'width':width7}">
									<div class="cuIcon7" :style="{'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[6].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">夜气象</br>{{weatherInformation.weather2}}</a>
									</div>
									<div class="cuIcon7" :style="{'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[7].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">夜气温</br>{{weatherInformation.temperature2}}℃</a>
									</div>
									<div class="cuIcon7" :style="{'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[8].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">夜体感</br>{{weatherInformation.realfeel2}}℃</a>
									</div>
									<div class="cuIcon4">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[9].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">夜降水</br>{{weatherInformation.precipitation2}}m/s</a>
									</div>
								</div>

								<div class="cu-listAllTwo7" :style="{'width':width7,'margin-top':margintop7}">
									<div class="cuIcon7" :style="{'margin-top':margintop7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[10].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">夜风向</br>{{weatherInformation.winddirection2}}</a>
									</div>

									<div class="cuIcon7" :style="{'margin-top':margintop7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[11].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">夜风速</br>{{weatherInformation.speed2}}km/h</a>
									</div>
									<div class="cuIcon7" :style="{'margin-top':margintop7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[12].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">夜阵风速</br>{{weatherInformation.gust2}}km/h</a>
									</div>
									<div class="cuIcon4" :style="{'margin-top':margintop7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[0].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">天气</br>{{weatherInformation.weather}}</a>
									</div>

								</div>
								<div class="cu-listAllTThree7" :style="{'width':width7,'margin-top':margintopThree7}">
									<div class="cuIcon7" :style="{'margin-top':margintopThree7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[1].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">最高温度</br>{{weatherInformation.maximumtem}}℃</a>
									</div>

									<div class="cuIcon7" :style="{'margin-top':margintopThree7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[2].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">最低温度</br>{{weatherInformation.minimumtem}}℃</a>
									</div>
									<div class="cuIcon7" :style="{'margin-top':margintopThree7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[3].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">日出</br>{{weatherInformation.sunrise}}</a>
									</div>
									<div class="cuIcon4" :style="{'margin-top':margintopThree7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[4].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">日落</br>{{weatherInformation.sunset}}</a>
									</div>
								</div>
								<div class="cu-listAllTFour7" :style="{'width':width7,'margin-top':margintopThree7}">
									<div class="cuIcon7" :style="{'margin-top':margintopThree7,'height':xianHeight7}">
										<view class="icon7 iconfont" :class="['icon-' + cuIconList7[5].cuIcon,'text-'+ cuIconList7[0].color]"></view><a
										 class="wenZhi7" :style="{'font-size':fontSize7}">持续时间</br>{{weatherInformation.sunduration}}</a>
									</div>
									<div class="cuIcon2">
									</div>
									<div class="cuIcon2">
									</div>
									<div class="cuIcon2">
									</div>
								</div>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 8~15天气象卡片 -->
			<view v-if="weatherFromeighttofifteendaysbutton">
				<view class="cu-card case" :class="isCard?'no-card':''">
					<view class="cardContenter">
						<view class="weather8_15">
							<view class="weather8_15_text">{{startDate}}~{{endDate}}</view>
							<view class="choice">
								<div :class="[speedFlag==true?'speedButtonWhite':'speedButtonBlack']" :style="{'font-size':choiceFontSize,'margin-top':choiceMarginTop}"
								 @click="speedSwitch()">风速</div>
								<div :class="[temperatureFlag==true?'temperatureButtonWhite':'temperatureButtonBlack']" :style="{'font-size':choiceFontSize,'margin-top':choiceMarginTop}"
								 @click="temperatureSwitch()">温度</div>
								<div :class="[realFeelFlag==true?'realFeelButtonWhite':'realFeelButtonBlack']" :style="{'font-size':choiceFontSize,'margin-top':choiceMarginTop}"
								 @click="realFeelSwitch()">体感温度</div>
							</view>
						</view>

						<scroll-view scroll-x scroll-with-animation :scroll-left=scrollposition class="scrollUcharts" @touchstart="topblock" @scroll="uChartsScrollEvent"
						 :scroll-into-view="'uCharts-'+mainCur">
							<view class="qiun-charts" >
								<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"></canvas>
							</view>
						</scroll-view>

					</view>
				</view>
				<div>

					<scroll-view scroll-y scroll-with-animation :scroll-top=scrollpositiontmp class="scrollList" :style="{'height': scrollHeight }"  @touchstart="bottomblock"
					 @scroll="listScrollEvent">					
						<weatherCalendarCardList8_15 ref="weatherCalendarCardList8_15"></weatherCalendarCardList8_15>
					
					</scroll-view>

				</div>
			</view>
			<!-- 40天气象卡片 -->
			<view v-if="weatherFortydaysbutton">
				<view class="cu-card case" :class="isCard40?'no-card':''">
					<view class="cardContenter40">
						<view class="dateAndChoice">
							<view class="date">
								{{startDate40}}~{{endDate40}}
							</view>
							<view class="choice40">
								<div :class="[speedFlag40==true?'speedButtonWhite40':'speedButtonBlack40']" :style="{'font-size':choiceFontSize40,'margin-top':choiceMarginTop40}"
								 @click="speedSwitch40()">风速</div>
								<div :class="[temperatureFlag40==true?'temperatureButtonWhite40':'temperatureButtonBlack40']" :style="{'font-size':choiceFontSize40,'margin-top':choiceMarginTop40}"
								 @click="temperatureSwitch40()">温度</div>
								<div :class="[realFeelFlag40==true?'realFeelButtonWhite40':'realFeelButtonBlack40']" :style="{'font-size':choiceFontSize40,'margin-top':choiceMarginTop40}"
								 @click="realFeelSwitch40()">体感温度</div>
							</view>
						</view>
						<view @tap="topblock_40">
							<scroll-view scroll-x scroll-with-animation :scroll-left=scrollposition_uCharts class="scrollUcharts40" @touchstart="topblock_40" @scroll="uChartsScrollEvent40"
							 :scroll-into-view="'uCharts-'+mainCur40">
								<view class="qiun-charts40">
									<canvas canvas-id="canvasLineA40" id="canvasLineA40" class="charts40"></canvas>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view @tap="topbottom_40">
					<scroll-view scroll-y scroll-with-animation :scroll-top=scrollposition_list class="scrollList40" :style="{'height': scrollListHeight40 }"
					 @scroll="listScrollEvent40" @touchstart="bottomblock_40" >
						<weatherCalendarCardList40 ref="weatherCalendarCardList40"></weatherCalendarCardList40>
					</scroll-view>
				</view>
			</view>
		</scroll-view>
		<view class="DrawerClose" :class="modalName == 'viewModal' ? 'show' : ''" @tap="hideModal"><text class="cuIcon-pullright"></text></view>
	</view>

</template>

<script>
	import uCharts from '../../components/tools/u-charts/u-charts.js';
	import utils from '../../components/tools/shoyu-date/utils.filter.js';
	import res from '../../common/data.json';
	import drawer from '../../components/drawer/threeLineDrawer.vue';
	import plusDrawer from '../../components/drawer/plusDrawer.vue';
	import ThermometerCard from '../../components/weatherProphethomepage/weathercomponents/thermometerCard/ThermometerCard.vue';
	import WeatherTemperatureWindSpeedCard_7 from '../../components/weatherProphethomepage/weathercomponents/weatherTemperatureWindSpeedCard_7/WeatherTemperatureWindSpeedCard_7.vue';
	import weatherCalendarCardList8_15 from '../../components/weatherProphethomepage/weathercomponents/weatherCalendarCardList8_15/weatherCalendarCardList8_15.vue';
	import weatherCalendarCardList40 from '../../components/weatherProphethomepage/weathercomponents/weatherCalendarCardList40/weatherCalendarCardList40.vue';
	import sPopup from '@/s-popup';
	export default {
		components: {
			drawer: drawer,
			plusDrawer: plusDrawer,
			weatherCalendarCardList8_15: weatherCalendarCardList8_15,
			weatherCalendarCardList40: weatherCalendarCardList40,
			sPopup: sPopup,
			ThermometerCard: ThermometerCard,
			WeatherTemperatureWindSpeedCard_7: WeatherTemperatureWindSpeedCard_7
		},
		data() {
			return {
				userid:'',
				name:[],
				windId:[],
				socketTaskHourId:'',
				outThreeLineDrawerIsShow:false,
				badge: 22,
				modalName: null,
				inconList: ["form", "favor", "question", "edit"],
				address: '',
				weatherTodaybutton: true,
				weatherSevendaybutton: false,
				weatherFromeighttofifteendaysbutton: false,
				weatherFortydaysbutton: false,
				windStationName: '',
				showCenterVisible: false,
				windStation: [],
				choiceIndex: -1,
				clickFlag: 'jieRu',
				cardCur: 0,
				spopupWrapperHeight: "",
				windStationListHeight: '',
				drawerList: [],
				leftNavigationtitle:'预测功能分组',
				plusDrawerList: [],
				utils: utils,
				margintop: '',
				margintopThree: '',
				messageTop: '',
				// 直接使用需要进行声明
				// 直接使用需要进行声明 End
				date: '2020/03/27 08:00:00',
				timestamp: "",
				option: '',
				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: '夜阵风速',
				}],
				gridCol: 4,
				gridBorder: false,
				weatherProphetDataAll_17Hour: [],
				weatherProphetData_17Hour: [{
					date: '',
					id: '',
					realfeel: '',
					region: '',
					speed: '',
					temperature: '',
					weather: '',
					winddirection: '',
					windpowerstationid: ''
				}],
				weatherProphetDataAll_1: [],
				weatherProphetData_1: [{
					weather1: '',
					gust1: '',
					gust2: '',
					id: '',
					maximumtem: '',
					minimumtem: '',
					precipitation1: "",
					precipitation2: '',
					realfeel1: '',
					realfeel1: '',
					recodedata: '',
					region: '',
					speed1: '',
					speed2: '',
					sunduration: "",
					sunrise: '',
					sunset: '',
					temperature1: '',
					temperature2: '',
					weather: '',
					weather1: '',
					weather2: "",
					winddirection1: '',
					winddirection2: '',
					windpowerstationid: '',
				}],
				weatherSwitch: true,
				FDC: "MHS_FDC",
				windPowerStations: [],
				widthToday: '',
				heightToday: '',
				width: '',
				height: '',
				windowWidth: "",
				windowHeight: "",
				windowWidth7: "",
				windowHeight7:"",
				windowWidth8_15: "",
				windowHeight8_15:"",
				windowWidth40: "",
				windowHeight40:"",
				ziHeight: '',
				fontSize: '',
				xianHeight: '',
				marginleftBiao: '',
				scrollHeight: '',
				choiceFontSize: "",
				choiceMarginTop: "",
				xAxisFontSize: "",
				seriesTextSize: "",
				cardWidth: "",
				cardHeight: "",
				isToday: false,
				scrollposition: 0,
				scrollpositiontmp: 0,
				weatherProphetDataAll_8_15: [],
				weatherProphetData_8_15: [],
				socket: "",
				startDate: "",
				isCard: false,
				endDate: "",
				cWidth: '',
				cHeight: '',
				cWidth40: '',
				cHeight40: '',
				pixelRatio: 1,
				pixelRatio40: 1,
				realFeelFlag: true,
				temperatureFlag: false,
				speedFlag: false,
				tabCur: 0,
				mainCur: 0,
				scrollposition_uCharts: 0,
				scrollposition_list: 0,
				isCard40: false,
				weatherProphetData_40: [],
				weatherProphetDataAll_40: [],
				startDate40: "",
				endDate40: "",
				realFeelFlag40: true,
				temperatureFlag40: false,
				speedFlag40: false,
				tabCur40: 0,
				mainCur40: 0,
				choiceFontSize40: "",
				choiceMarginTop40: "",
				xAxisFontSize40: "",
				seriesTextSize40: "",
				cardWidth40: "",
				cardHeight40: "",
				scrollListHeight40: "",
				socketTask8_15: '',
				socketTask40: '',
				socketTask: '',
				weatherInformation: {},
				cuIconList7: [{
					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: '夜阵风速',
				}],
				assemblyWidth7: '',
				assemblyHeight7: '',
				weatherSwitch7: true,
				weatherProphetDataAll_7: [],
				weatherProphetData_7: [],
				weatherIconsDay7: [],
				weatherIconsNight7: [],
				classNameDay7: [],
				classNameNight7: [],
				height7: "",
				width7: "",
				ziHeight7: '',
				fontSize7: '',
				xianHeight7: '',
				nightmarginleft7: '',
				socketTask7: '',
				userCanviewthewindfarm:[],
				permissionsInformation:[],
				timer:null
			}
		},
		created: function() {
			// this.pushWindPowerStationNameToSessionStorage("麻黄山");
			this.viewUserid();
			this.monitoringAuthority();
			
			this.address = this.dataprocessing.getWindPowerStationName();
			
			this.FDC=this.dataprocessing.getWindPowerStationNameByWeatherId(this.address);

	
			
			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('风电场', '');
			
			this.windStationListHeight = this.windStation.length * 50 + 40 + 'px';
			this.spopupWrapperHeight = this.windStation.length * 50 + 90 + 'px';
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			if (this.windowWidth >= 768) {
				this.margintop="60px";
				this.margintopThree="80px";
				this.messageTop="10px";
				this.fontSize="18px";
				this.xianHeight="168px";
				this.marginleftBiao="50px";
			} else {
				this.margintop="3.5%";
				this.margintopThree="3.5%";
				this.fontSize="14px";
				this.xianHeight="85%";
				this.marginleftBiao="26px";
			}
			this.heightToday = parseInt(uni.getSystemInfoSync().windowHeight - 440) + "px";
			this.widthToday = parseInt(uni.getSystemInfoSync().windowWidth) + "px";
			
			this.windowWidth7 = uni.getSystemInfoSync().windowWidth;
			this.windowHeight7 = uni.getSystemInfoSync().windowHeight;
			if(this.windowWidth7>=768){
				this.margintop7="60px";
				this.margintopThree7="80px";
				this.messageTop7="10px";
				this.fontSize7="18px";
				this.xianHeight7="168px";
				this.nightmarginleft7="20px";
			}else{
				this.margintop7="3.5%";
				this.margintopThree7="3.5%";
				this.fontSize7="14px";
				this.xianHeight7="85%";
				this.nightmarginleft7="20px";
			}
			this.height7 = parseInt(uni.getSystemInfoSync().windowHeight - 440) + "px";
			this.width7 = parseInt(uni.getSystemInfoSync().windowWidth) + "px";
			
			this.windowWidth8_15 = uni.getSystemInfoSync().windowWidth;
			this.windowHeight8_15 = uni.getSystemInfoSync().windowHeight;
			if(this.windowWidth8_15>=768){
				this.width="99";
				this.choiceFontSize="22px";
				this.choiceMarginTop="27.5px";
				this.xAxisFontSize=18;
				this.seriesTextSize=18;
				this.cardWidth=100;
				this.cardHeight=130;
				this.scrollHeight=(this.windowHeight8_15-550)+"px";
			}
			else{
				this.width="100";
				this.choiceFontSize="15px";
				this.choiceMarginTop="0";
				this.xAxisFontSize=12;
				this.seriesTextSize=12;
				this.cardWidth=100;
				this.cardHeight=100;
				this.scrollHeight=(this.windowHeight8_15-360)+"px";
			}
			this.windowWidth40 = uni.getSystemInfoSync().windowWidth;
			this.windowHeight40 = uni.getSystemInfoSync().windowHeight;
			if(this.windowWidth40>=768){
				this.choiceFontSize40="22px";
				this.choiceMarginTop40="27.5px";
				this.xAxisFontSize40=18;
				this.seriesTextSize40=18;
				this.cardWidth40=100;
				this.cardHeight40=130;
				this.scrollListHeight40=(this.windowHeight40-550)+"px";
			}else{
				this.choiceFontSize40="15px";
				this.choiceMarginTop40="0";
				this.xAxisFontSize40=12;
				this.seriesTextSize40=12;
				this.cardWidth40=100;
				this.cardHeight40=100;
				this.scrollListHeight40=(this.windowHeight40-360)+"px";
			}
		},
		onShow() {
			
		this.address = this.dataprocessing.getWindPowerStationName();
		
			this.FDC=this.dataprocessing.getWindPowerStationNameByWeatherId(this.address);
		

			
			this.getWeatherData();
			this.getWeatherDataToday();
			this.getWeatherData7();
		},
		onLoad: function() {
			this.address = this.getWindPowerStationNameToSessionStorage();
			this.cWidth = uni.upx2px(2000);
			this.cHeight = uni.upx2px(350);
			this.getServerData();
			this.cWidth40 = uni.upx2px(5000);
			this.cHeight40 = uni.upx2px(350);
			this.getServerData40();
		},
		onHide() {
			debugger
			//this.$refs.drawer.closeDrawer();
			this.hideModal();
		},
		computed: {
					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_we');
			},
			monitoringAuthority: function() {
				this.drawerList=uni.getStorageSync('leftlist3');
			},
			openDrawer: function() {
				this.outThreeLineDrawerIsShow=true;
				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList,this.leftNavigationtitle);
			},
			closeDrawer: function() {
				this.drawerIsShow = false;
			},
			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);
				this.choiceIndex = -1;
			},
			onHide() {
				debugger
				//this.$refs.drawer.closeDrawer();
				this.hideModal();
			},
			choiceWindStation: function(item, index) {
				this.choiceIndex = index;
				this.windStationName = item.replace('风电场', '');
				this.modalWindStationName = item.replace('风电场', '');
				this.address = item;
				this.pushWindPowerStationNameToSessionStorage(item);
				let _this = this;
				setTimeout(function() {
					// _this.hideModal();
					_this.showCenterVisible = false;
					_this.choiceIndex = -1;
					_this.cardCur = index;
				}, 1000);
				
				this.FDC =this.dataprocessing.getWindPowerStationNameByWeatherId(item);

				this.dataprocessing.putWindPowerStationId(this.FDC);
				//uni.setStorageSync('windPowerStationId',this.FDC);
				if (this.weatherTodaybutton == true) {

					this.getWeatherDataToday();
				}
				if (this.weatherSevendaybutton == true) {
					this.getWeatherData7();
				}
				if (this.weatherFromeighttofifteendaysbutton == true) {
					this.getWeatherData();
				}
				if (this.weatherFortydaysbutton == true) {
					this.getWeatherData40();
				}
			},
			cardSwiper(e) {
				let _this = this;
				this.cardCur = e.detail.current;
				for (let i = 0; i < this.windStation.length; i++) {
					if (this.cardCur == i) {
						// if (this.address == '宁夏新能源公司' || this.address == '河北能源集团' ) {
						// 	this.windStationName = this.windStation[i].replace('风电场', '');
						// 	this.modalWindStationName = this.windStation[i].replace('风电场', '');
						// }
						if (this.address.search('风电场') != -1) {
							if (this.windStation[i].search('风电场') != -1) {
								this.windStationName = this.windStation[i].replace('风电场', '');
							} else {
								this.windStationName = this.windStation[i];
							}
							this.modalWindStationName = this.windStation[i];
						}
						this.windMotorMatrixDetailAll = this.windMotorMatrixDetailMaHuagShan;
						this.getWindMotorStatusCard();
						this.clickWindMotorStatusCard(this.clickFlag);
						this.getBackgroundColor();
						this.showCardModal('Modal');
						setTimeout(function() {
							_this.hideCardModal();
						}, 1000);
					}
				}
			},
			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');
			},
			getWeatherDataToday: function() {
				//得到数据
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				// 按小时数据
				this.socketTaskHour = 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.socketTaskToday = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_2/functionNumber_1',
					success(data) {
						console.log("websocket连接成功");
					},
				});


				this.socketTaskToday.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTaskToday.onMessage((res) => {
						//console.log("收到服务器内容：" + res.data);
						_this.weatherProphetDataAll_1 = res.data;
						_this.weatherProphetDataAll_1 = JSON.parse(res.data);
						_this.weatherProphetData_1 = [];
						//判断风场id 40天
						//debugger
						for (let i = 0; i < _this.weatherProphetDataAll_1.length; i++) {
							if (_this.weatherProphetDataAll_1[i].windpowerstationid == _this.FDC) {
								//debugger
								_this.weatherProphetData_1.push(_this.weatherProphetDataAll_1[i]);
							}
						}
						_this.$nextTick(function() {
							if (_this.$refs.thermometerCard == undefined) {

							} else {
								_this.$refs.thermometerCard.getHourWeatherData("90", "260", _this.weatherProphetData_17Hour, _this.weatherProphetData_1);
							}
						})
					});
				})
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTaskHour.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTaskHour.onMessage((res) => {
						//console.log("收到服务器内容：" + res.data);
						_this.weatherProphetDataAll_17Hour = res.data;
						_this.weatherProphetDataAll_17Hour = JSON.parse(res.data);
						
						if(_this.weatherProphetDataAll_17Hour.length!=0)
						{
							_this.weatherProphetData_17Hour = [];
							//判断风场id 40天
							for (let i1 = 0; i1 < _this.weatherProphetDataAll_17Hour.length; i1++) {
								if (_this.weatherProphetDataAll_17Hour[i1].windpowerstationid == _this.FDC) {
									//debugger
									_this.weatherProphetData_17Hour.push(_this.weatherProphetDataAll_17Hour[i1]);
								}
							}
							// console.log(_this.weatherProphetData_17Hour)
							_this.$nextTick(function() {
								if (_this.$refs.thermometerCard == undefined) {
							
								} else {
									_this.$refs.thermometerCard.getHourWeatherData("90", "260", _this.weatherProphetData_17Hour, _this.weatherProphetData_1);
								}
							})
						}
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTaskHour.onClose(() => {
					console.log("已经被关闭了")
				})
				this.socketTaskToday.onClose(() => {
					console.log("已经被关闭了")
				})
			},
			getWeatherData7: function() {
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask7 = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_3/functionNumber_1',
					success(data) {
						console.log("websocket连接成功");
					},
				});

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

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask7.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.FDC) {
								_this.weatherProphetData_7.push(_this.weatherProphetDataAll_7[i]);
							}
						}
						// console.log(_this.weatherProphetData_7);
						if (_this.$refs.WeatherTemperatureWindSpeedCard_7 == undefined) {

						} else {
							_this.$refs.WeatherTemperatureWindSpeedCard_7.weatherInformationCard('110', '80', _this.classNameDay7,
								_this
								.classNameNight7,
								_this.weatherProphetData_7);
						}
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask7.onClose(() => {
					console.log("已经被关闭了")
				})
			},
			weatherDayNightSwitch: function(flag) {
				if (flag == "day") {
					this.weatherSwitch = true;
				} else if (flag == "night") {
					this.weatherSwitch = false;
				}
			},
			getWeatherData: function() {
				let _this = this;
				this.socketTask8_15 = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_4/functionNumber_1',
					success(data) {
						console.log("websocket连接成功");
					},
				});
				this.socketTask8_15.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask8_15.onMessage((res) => {
						_this.weatherProphetDataAll_8_15 = JSON.parse(res.data);
						_this.weatherProphetData_8_15 = [];

						//判断风场id 8~15天
						for (let i = 0; i < _this.weatherProphetDataAll_8_15.length; i++) {
							if (_this.weatherProphetDataAll_8_15[i].windpowerstationid == _this.FDC) {
								_this.weatherProphetData_8_15.push(_this.weatherProphetDataAll_8_15[i]);
							}
						}
						if (_this.$refs.weatherCalendarCardList8_15 == undefined) {

						} else {
							_this.$refs.weatherCalendarCardList8_15.getWeatherData(_this.width, "400", _this.weatherProphetData_8_15);
						}
						_this.getWeatherDataUchart();

					})
				})
				this.socketTask8_15.onClose(() => {
					console.log("已经被关闭了")
				})
			},
			getWeatherDataUchart: function() {
				let startMonth = new Date(this.weatherProphetData_8_15[0].recodedata).getMonth() + 1;
				let startDay = new Date(this.weatherProphetData_8_15[0].recodedata).getDate();
				this.startDate = startMonth + "月" + startDay + "日";
				let endMonth = new Date(this.weatherProphetData_8_15[this.weatherProphetData_8_15.length - 1].recodedata).getMonth() +
					1;
				let endDay = new Date(this.weatherProphetData_8_15[this.weatherProphetData_8_15.length - 1].recodedata).getDate();
				this.endDate = endMonth + "月" + endDay + "日";
				this.getServerData();
			},
			getWeatherData40: function() {
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask40 = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_5/functionNumber_1',
					success(data) {
						console.log("websocket连接成功");
					},
				});

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

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask40.onMessage((res) => {
						//console.log("收到服务器内容：" + res.data);
						_this.weatherProphetDataAll_40 = res.data;
						_this.weatherProphetDataAll_40 = JSON.parse(res.data);
						_this.weatherProphetData_40 = [];
						//判断风场id 40天
						for (let i = 0; i < _this.weatherProphetDataAll_40.length; i++) {
							if (_this.weatherProphetDataAll_40[i].windpowerstationid == _this.FDC) {
								_this.weatherProphetData_40.push(_this.weatherProphetDataAll_40[i]);
							}
						}
						//console.log(_this.weatherProphetData_40);
						let startMonth40 = new Date(_this.weatherProphetData_40[0].recodedata).getMonth() + 1;
						let startDay40 = new Date(_this.weatherProphetData_40[0].recodedata).getDate();
						_this.startDate40 = startMonth40 + "月" + startDay40 + "日";
						let endMonth40 = new Date(_this.weatherProphetData_40[_this.weatherProphetData_40.length - 1].recodedata).getMonth() +
							1;
						let endDay40 = new Date(_this.weatherProphetData_40[_this.weatherProphetData_40.length - 1].recodedata).getDate();
						_this.endDate40 = endMonth40 + "月" + endDay40 + "日";
						if (_this.$refs.weatherCalendarCardList40 == undefined) {

						} else {
							_this.$refs.weatherCalendarCardList40.getWeatherData40(this.cardWidth40, this.cardHeight40, _this.weatherProphetData_40);
						}
						_this.getServerData40();
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask40.onClose(() => {
					console.log("已经被关闭了")
				})
			},

			realFeelSwitch() {
				this.realFeelFlag = true;
				this.temperatureFlag = false;
				this.speedFlag = false;
				this.getServerData();
			},
			temperatureSwitch() {
				this.realFeelFlag = false;
				this.temperatureFlag = true;
				this.speedFlag = false;
				this.getServerData();
			},
			speedSwitch() {
				this.realFeelFlag = false;
				this.temperatureFlag = false;
				this.speedFlag = true;
				this.getServerData();
			},
			realFeelSwitch40() {
				this.realFeelFlag40 = true;
				this.temperatureFlag40 = false;
				this.speedFlag40 = false;
				this.getServerData40();
			},
			temperatureSwitch40() {
				this.realFeelFlag40 = false;
				this.temperatureFlag40 = true;
				this.speedFlag40 = false;
				this.getServerData40();
			},
			speedSwitch40() {
				this.realFeelFlag40 = false;
				this.temperatureFlag40 = false;
				this.speedFlag40 = true;
				this.getServerData40();
			},
			getServerData() {
				let LineA = {
					categories: ['02/21', '02/22', '02/23', '02/24', '02/25', '02/26', '02/27'],
					series: [{
						name: '体感温度',
						data: [12, 13, 12, 11, 16, 14, 12],
						color: '#F3F3F3',
						textColor: '#FFFFFF',
						textSize: this.seriesTextSize,
						format: (val) => {
							return val + '℃'
						}
					}, {
						name: '温度',
						data: [70, 40, 65, 100, 44, 68],
						color: '#FFFFFF',
						textColor: "#FFFFFF",
						textSize: this.seriesTextSize,
						format: (val) => {
							return val + '℃'
						}
					}, {
						name: '风速',
						data: [100, 80, 95, 150, 112, 132],
						color: '#FFFFFF',
						textColor: "#FFFFFF",
						textSize: this.seriesTextSize,
						format: (val) => {
							return val + 'km/h'
						}
					}]
				};
				LineA.categories = [];
				LineA.series[0].data = [];
				LineA.series[1].data = [];
				LineA.series[2].data = [];
				if (this.realFeelFlag) {
					for (let i = 0; i < this.weatherProphetData_8_15.length; i++) {
						let xAxisMonth = new Date(this.weatherProphetData_8_15[i].recodedata).getMonth() + 1;
						let xAxisData = new Date(this.weatherProphetData_8_15[i].recodedata).getDate();
						if (xAxisMonth < 10) {
							xAxisMonth = "0" + xAxisMonth;
						}
						if (xAxisData < 10) {
							xAxisData = "0" + xAxisData;
						}
						LineA.categories.push(xAxisMonth + '/' + xAxisData);
						LineA.series[0].data.push(this.weatherProphetData_8_15[i].realfeel1);
					}
				} else if (this.temperatureFlag) {
					for (let i = 0; i < this.weatherProphetData_8_15.length; i++) {
						let xAxisMonth = new Date(this.weatherProphetData_8_15[i].recodedata).getMonth() + 1;
						let xAxisData = new Date(this.weatherProphetData_8_15[i].recodedata).getDate();
						if (xAxisMonth < 10) {
							xAxisMonth = "0" + xAxisMonth;
						}
						if (xAxisData < 10) {
							xAxisData = "0" + xAxisData;
						}
						LineA.categories.push(xAxisMonth + '/' + xAxisData);
						LineA.series[1].data.push(this.weatherProphetData_8_15[i].temperature1);
					}
				} else if (this.speedFlag) {
					for (let i = 0; i < this.weatherProphetData_8_15.length; i++) {
						let xAxisMonth = new Date(this.weatherProphetData_8_15[i].recodedata).getMonth() + 1;
						let xAxisData = new Date(this.weatherProphetData_8_15[i].recodedata).getDate();
						if (xAxisMonth < 10) {
							xAxisMonth = "0" + xAxisMonth;
						}
						if (xAxisData < 10) {
							xAxisData = "0" + xAxisData;
						}
						LineA.categories.push(xAxisMonth + '/' + xAxisData);
						LineA.series[2].data.push(this.weatherProphetData_8_15[i].speed1);
					}
				}
				//LineA.categories=res.data.data.LineA.categories;
				// LineA.series=res.data.data.LineA.series;

				this.showLineA("canvasLineA", LineA);
			},
			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.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disableGrid: true,
						type: 'grid',
						fontColor: '#FFFFFF',
						gridColor: '#FFFFFF',
						gridType: 'dash',
						dashLength: 1,
						fontSize: _self.xAxisFontSize
					},
					yAxis: {
						disableGrid: true,
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 1,
						disabled: true,
						splitNumber: 5,
						min: -40,
						max: 50,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			getServerData40() {
				let LineA40 = {
					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
					series: [{
						name: '体感温度',
						data: [35, 20, 25, 37, 4, 20],
						color: '#FFFFFF',
						textColor: "#FFFFFF",
						textSize: this.seriesTextSize40,
						format: (val) => {
							return val + '℃'
						}
					}, {
						name: '温度',
						data: [70, 40, 65, 100, 44, 68],
						color: '#FFFFFF',
						textColor: "#FFFFFF",
						textSize: this.seriesTextSize40,
						format: (val) => {
							return val + '℃'
						}
					}, {
						name: '风速',
						data: [100, 80, 95, 150, 112, 132],
						color: '#FFFFFF',
						textColor: "#FFFFFF",
						textSize: this.seriesTextSize40,
						format: (val) => {
							return val + 'km/h'
						}
					}]
				};
				LineA40.categories = [];
				LineA40.series[0].data = [];
				LineA40.series[1].data = [];
				LineA40.series[2].data = [];
				if (this.realFeelFlag40) {
					for (let i = 0; i < this.weatherProphetData_40.length; i++) {
						let xAxisMonth40 = new Date(this.weatherProphetData_40[i].recodedata).getMonth() + 1;
						let xAxisData40 = new Date(this.weatherProphetData_40[i].recodedata).getDate();
						if (xAxisMonth40 < 10) {
							xAxisMonth40 = "0" + xAxisMonth40;
						}
						if (xAxisData40 < 10) {
							xAxisData40 = "0" + xAxisData40;
						}
						LineA40.categories.push(xAxisMonth40 + '/' + xAxisData40);
						LineA40.series[0].data.push(this.weatherProphetData_40[i].realfeel1);
					}
				} else if (this.temperatureFlag40) {
					for (let i = 0; i < this.weatherProphetData_40.length; i++) {
						let xAxisMonth40 = new Date(this.weatherProphetData_40[i].recodedata).getMonth() + 1;
						let xAxisData40 = new Date(this.weatherProphetData_40[i].recodedata).getDate();
						if (xAxisMonth40 < 10) {
							xAxisMonth40 = "0" + xAxisMonth40;
						}
						if (xAxisData40 < 10) {
							xAxisData40 = "0" + xAxisData40;
						}
						LineA40.categories.push(xAxisMonth40 + '/' + xAxisData40);
						LineA40.series[1].data.push(this.weatherProphetData_40[i].temperature1);
					}
				} else if (this.speedFlag40) {
					for (let i = 0; i < this.weatherProphetData_40.length; i++) {
						let xAxisMonth40 = new Date(this.weatherProphetData_40[i].recodedata).getMonth() + 1;
						let xAxisData40 = new Date(this.weatherProphetData_40[i].recodedata).getDate();
						if (xAxisMonth40 < 10) {
							xAxisMonth40 = "0" + xAxisMonth40;
						}
						if (xAxisData40 < 10) {
							xAxisData40 = "0" + xAxisData40;
						}
						LineA40.categories.push(xAxisMonth40 + '/' + xAxisData40);
						LineA40.series[2].data.push(this.weatherProphetData_40[i].speed1);
					}
				}

				this.showLineA40("canvasLineA40", LineA40);


			},
			showLineA40(canvasId, chartData) {
				var _self = this;
				var canvaLineA40 = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: false
					}, //图例
					dataLabel: true, //数据点标签
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio40,
					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.xAxisFontSize40
					},
					yAxis: {
						data: {
							disabled: false //y轴轴线
						},
						disableGrid: true, //网格线
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: -40,
						max: 50,
						format: (val) => {
							return val.toFixed(0) + '元'
						}
					},
					width: _self.cWidth40 * _self.pixelRatio40,
					height: _self.cHeight40 * _self.pixelRatio40,
					padding: [0, 0, 10, -30], //画布填充边距，顺序为上右下左，同css，但必须4位
					extra: {
						line: {
							type: 'curve' //曲线
						}
					}
				});
			},
			topblock(){
				this.block = "top";
			},
			bottomblock(){
				this.block = "bottom";
			},
			topblock_40(){
				this.block_40 = "top";
			},
			bottomblock_40(){
				this.block_40 = "bottom";
			},
			uChartsScrollEvent(e) {
				//this.topblock();
               if(this.block=="top"){
				   this.scrollpositiontmp = e.detail.scrollLeft;
			   }
			   
				// let scrollposition2 = scrollposition*0.98;
			},
			listScrollEvent(e) {
				//this.bottomblock();
				if(this.block=="bottom"){
				   this.scrollposition = e.detail.scrollTop;
				}
			},
			uChartsScrollEvent40(e) {
				if(this.block_40=="top"){
				// this.scrollposition_uCharts = e.detail.scrollLeft;
				if (e.detail.scrollLeft < 237) {
					this.scrollposition_list = 0;
				} else if (e.detail.scrollLeft < 487 && e.detail.scrollLeft > 237) {
					this.scrollposition_list = 104;
				} else if (e.detail.scrollLeft < 737 && e.detail.scrollLeft > 487) {
					this.scrollposition_list = 208;
				} else if (e.detail.scrollLeft < 987 && e.detail.scrollLeft > 737) {
					this.scrollposition_list = 312;
				} else if (e.detail.scrollLeft < 1237 && e.detail.scrollLeft > 987) {
					this.scrollposition_list = 416;
				} else if (e.detail.scrollLeft < 1487 && e.detail.scrollLeft > 1237) {
					this.scrollposition_list = 520;
				} else if (e.detail.scrollLeft < 1737 && e.detail.scrollLeft > 1487) {
					this.scrollposition_list = 624;
				} else if (e.detail.scrollLeft > 1737) {
					this.scrollposition_list = 656;
				}
				}
			},
			listScrollEvent40(e) {
				if(this.block_40=="bottom"){
				// this.scrollposition_list = e.detail.scrollTop;
				if (e.detail.scrollTop < 104) {
					this.scrollposition_uCharts = 0;
				} else if (e.detail.scrollTop < 208 && e.detail.scrollTop > 104) {
					this.scrollposition_uCharts = 237;
				} else if (e.detail.scrollTop < 312 && e.detail.scrollTop > 208) {
					this.scrollposition_uCharts = 487;
				} else if (e.detail.scrollTop < 416 && e.detail.scrollTop > 312) {
					this.scrollposition_uCharts = 737;
				} else if (e.detail.scrollTop < 520 && e.detail.scrollTop > 416) {
					this.scrollposition_uCharts = 987;
				} else if (e.detail.scrollTop < 624 && e.detail.scrollTop > 520) {
					this.scrollposition_uCharts = 1237;
				} else if (e.detail.scrollTop < 656 && e.detail.scrollTop > 624) {
					this.scrollposition_uCharts = 1487;
				}
				}
			},
			changeTap: function(item) {
				this.weatherInformation = JSON.parse(item); //vue json转object
			},

			weatherDaySwitch7: function() {
				this.weatherSwitch7 = true;
			},
			weatherNightSwitch7: function() {
				this.weatherSwitch7 = false;
			},
			closeSocket: function() {
				this.socket.onclose;
			},
			openSocket: function() {
				this.socket.onOpen;
			},
			weatherToday() {
				this.weatherSevendaybutton = false;
				this.weatherFromeighttofifteendaysbutton = false;
				this.weatherFortydaysbutton = false;
				this.$nextTick(function() {
					this.weatherTodaybutton = true;
					this.getWeatherDataToday();
				});
			},
			weatherSevenday() {
				this.weatherTodaybutton = false;
				this.weatherFromeighttofifteendaysbutton = false;
				this.weatherFortydaysbutton = false;
				this.$nextTick(function() {
					this.weatherSevendaybutton = true;
					this.getWeatherData7();
				})
			},
			weatherFromeighttofifteendays() {
				this.weatherTodaybutton = false;
				this.weatherSevendaybutton = false;
				this.weatherFortydaysbutton = false;
				this.$nextTick(function() {
					this.weatherFromeighttofifteendaysbutton = true;
					this.getWeatherData();
				})
			},
			weatherFortydays() {
				this.weatherTodaybutton = false;
				this.weatherSevendaybutton = false;
				this.weatherFromeighttofifteendaysbutton = false;
				this.$nextTick(function() {
					this.weatherFortydaysbutton = true;
					this.getWeatherData40();
				})

			},
		},

	}
</script>

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

	@font-face {
		font-family: '方正兰亭细黑_GBK';
		src: url(../../static/fzltxh.TTF);
	}

	page {
		background-color: #1f1f1f;
		font-family: '方正兰亭细黑_GBK';
		overflow-x: hidden;
		overflow-y: hidden;
	}
	.notice {
		width: 50px;
		height: 45px;
		float: left;
	}
	.icon{
		font-size: 40upx;
	}
	.plus {
		width: 30px;
		height: 45px;
		float: right;
		color: white;
		font-size: 35px;
		line-height: 45px;
		text-align: right;
		margin-right: 2.5%;
	}
	
	.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;
	}
	
	.DrawerWindow {
		position: absolute;
		width: 85vw;
		height: 100vh;
		left: 0;
		top: 0;
		transform: scale(0.9, 0.9) translateX(-100%);
		opacity: 0;
		pointer-events: none;
		transition: all 0.4s;
		padding: 100upx 0;
	}
	
	.DrawerWindow.show {
		transform: scale(1, 1) translateX(0%);
		opacity: 1;
		pointer-events: all;
	}
	
	.DrawerClose {
		position: absolute;
		width: 40vw;
		height: 100vh;
		right: 0;
		top: 0;
		color: transparent;
		padding-bottom: 30upx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
		letter-spacing: 5px;
		font-size: 50upx;
		opacity: 0;
		pointer-events: none;
		transition: all 0.4s;
	}
	
	.DrawerClose.show {
		opacity: 1;
		pointer-events: all;
		width: 15vw;
		color: #fff;
	}
	
	.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;
	}

	.clickThedaystab {
		width: 100%;
		height: 40px;
		background-color: #242424;
	}

	.weatherToday {
		width: 25%;
		height: 40px;
		float: left;
		text-align: center;
		line-height: 40px;
		color: #DEDFE3;
	}

	.weatherTodaywhite {
		width: 25%;
		height: 40px;
		float: left;
		text-align: center;
		line-height: 40px;
		color: white;
		background-color: #3B3B3B;
	}

	.weatherSevenday {
		width: 25%;
		height: 40px;
		float: left;
		text-align: center;
		line-height: 40px;
		color: #DEDFE3;
	}

	.weatherSevendaywhite {
		width: 25%;
		height: 40px;
		float: left;
		text-align: center;
		line-height: 40px;
		color: white;
		background-color: #3B3B3B;
	}

	.weatherFromeighttofifteendays {
		width: 25%;
		height: 40px;
		float: left;
		text-align: center;
		line-height: 40px;
		color: #DEDFE3;
	}

	.weatherFromeighttofifteendayswhite {
		width: 25%;
		height: 40px;
		float: left;
		text-align: center;
		line-height: 40px;
		color: white;
		background-color: #3B3B3B;
	}

	.weatherFortydays {
		width: 25%;
		height: 40px;
		float: left;
		text-align: center;
		line-height: 40px;
		color: #DEDFE3;
	}

	.weatherFortydayswhite {
		width: 25%;
		height: 40px;
		float: left;
		text-align: center;
		line-height: 40px;
		color: white;
		background-color: #3B3B3B;
	}

	.cardContenter {
		border-radius: 20px;
		margin-left: 20px;
		width: 90%;
		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);
	}

	.weather8_15 {
		width: 100%;
		height: 100upx;
	}

	.weather8_15_text {
		width: 40%;
		height: 100upx;
		line-height: 100upx;
		color: white;
		margin-left: 5px;
		float: left;
	}


	.leftInnerMatrix {
		width: 100%;
		height: 100%;
	}

	.qiun-charts {
		width: 2000upx;
		height: 350upx;
	}

	.charts {
		width: 2000upx;
		height: 350upx;
	}

	.choice {
		width: calc(60% - 5px);
		height: 100upx;
		float: right;
	}

	.realFeelButtonWhite {
		height: 37px;
		line-height: 44px;
		color: white;
		font-size: 15px;
		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: right;
	}

	.realFeelButtonBlack {
		height: 37px;
		line-height: 44px;
		color: #DEDEDE;
		font-size: 15px;
		font-family: "microsoft yahei";
		float: right;
	}

	.temperatureButtonWhite {
		height: 37px;
		line-height: 44px;
		margin-left: 20px;
		color: white;
		font-size: 15px;
		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: right;
	}

	.temperatureButtonBlack {
		height: 37px;
		line-height: 44px;
		margin-left: 20px;
		color: #DEDEDE;
		font-size: 15px;
		font-family: "microsoft yahei";
		float: right;
	}

	.speedButtonWhite {
		height: 37px;
		line-height: 44px;
		margin-left: 20px;
		margin-right: 20px;
		color: white;
		font-size: 15px;
		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: right;
	}

	.speedButtonBlack {
		height: 37px;
		line-height: 44px;
		margin-left: 20px;
		margin-right: 20px;
		color: #DEDEDE;
		font-size: 15px;
		font-family: "microsoft yahei";
		float: right;
	}

	.scrollUcharts {
		white-space: nowrap;
	}

	.scrollList {
		height: 750upx;
		margin-top: 40upx ;
	}

	.cardContenter40 {
		border-radius: 20px;
		margin-left: 20px;
		width: 90%;
		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);
	}

	.dateAndChoice {
		width: 100%;
		height: 100upx;
	}

	.date {
		width: 40%;
		height: 100upx;
		line-height: 100upx;
		color: white;
		margin-left: 5px;
		float: left;
	}

	.choice40 {
		width: calc(60% - 5px);
		height: 100upx;
		float: right;
	}

	.realFeelButtonWhite40 {
		height: 37px;
		line-height: 44px;
		color: white;
		font-size: 15px;
		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: right;
	}

	.realFeelButtonBlack40 {
		height: 37px;
		// margin-top: 3px;
		line-height: 44px;
		/* margin-left: 20px; */
		color: #DEDEDE;
		font-size: 15px;
		font-family: "microsoft yahei";
		float: right;
	}

	.temperatureButtonWhite40 {
		height: 37px;
		// margin-top: 3px;
		line-height: 44px;
		margin-left: 20px;
		color: white;
		font-size: 15px;
		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: right;
	}

	.temperatureButtonBlack40 {
		height: 37px;
		line-height: 44px;
		margin-left: 20px;
		color: #DEDEDE;
		font-size: 15px;
		font-family: "microsoft yahei";
		float: right;
	}

	.speedButtonWhite40 {
		height: 37px;
		line-height: 44px;
		margin-left: 20px;
		margin-right: 20px;
		color: white;
		font-size: 15px;
		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: right;
	}

	.speedButtonBlack40 {
		height: 37px;
		line-height: 44px;
		margin-left: 20px;
		margin-right: 20px;
		color: #DEDEDE;
		font-size: 15px;
		font-family: "microsoft yahei";
		float: right;
	}

	.scrollUcharts40 {
		white-space: nowrap;
	}

	.scrollList40 {
		height: 330px;
	}

	.qiun-charts40 {
		width: 5000upx;
		height: 350upx;
		float: left;
	}

	.charts40 {
		width: 5000upx;
		height: 350upx;
	}

	.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;
	}

	

	.weatherDetails {
		margin-top: 0%;
		width: 100%;
		height: 25px;
		float: left;
	}

	.weatherText {
		width: 20%;
		height: 25px;
		float: left;
		font-size: 14px;
		color: white;
		margin-left: 9.5%;
	}

	.detailsText {
		width: 20%;
		height: 25px;
		float: right;
		font-size: 14px;
		color: white;
		margin-right: 5.5%;
		text-align: right;
	}

	.ThermometerCard {
		margin-top: -10%;
		height: 308px;
		width: 100%;
	}

	.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;
	} */

	.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: 80px;
	}

	.icon7 {
		font-size: 50upx;
	}

	.cu-listAll {
		// width: 100%;
		height: 100px;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
		margin-top: -20px;
		float: left;
	}

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

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

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

	.wenZhi {
		color: white;
	}

	.cuIcon1 {
		margin-top: 20px;
	}

	.cu-item {
		width: 100%;
		margin-left: -15px;
	}

	.weatherDayAndNightButton7 {
		margin-left: 20px;
		width: 120px;
		height: 20px;
	}

	.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;
	}

	.scrollList7 {
		float: left;
		height: 130px;
		width: 95%;
		margin-left: 2.5%;
	}

	.dayButtonWhite7 {
		height: 25px;
		margin-top: -9%;
		margin-left: 20px;
		color: white;
		font-size: 15px;
		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;
	}

	.dayButtonBlack7 {
		height: 25px;
		margin-top: -9%;
		margin-left: 20px;
		color: #DEDEDE;
		font-size: 15px;
		font-family: "microsoft yahei";
		float: left;
	}

	.nightButtonWhite7 {
		height: 25px;
		margin-top: -9%;
		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: 15px;
		font-family: "microsoft yahei";
		float: left;
	}

	.nightButtonBlack7 {
		height: 25px;
		margin-top: -9%;
		color: #DEDEDE;
		margin-left: 50rpx;
		font-size: 15px;
		font-family: "microsoft yahei";
		float: left;
	}

	.cuIcon7 {
		border-right: 1px solid white;
		height: 92px;
	}

	.icon1 {
		font-size: 50upx;
	}

	.cu-listAll7 {
		height: 100px;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
		margin-top: -20px;
		float: left;
	}

	.cu-listAllTwo7 {
		height: 100px;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
		margin-top: 0%;
	}

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

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

	.wenZhi7 {
		color: white;
	}

	.cuIcon1 {
		margin-top: 20px;
	}

	.cu-item {
		width: 100%;
		margin-left: -15px;
	}
</style>