sis手机端代码

App.vue

@@ -0,0 +1,44 @@
+<script>
+	import Vue from 'vue';
+	export default {
+		onLaunch: function() {
+			uni.getSystemInfo({
+			        success: function(e) {
+			            // #ifndef MP
+			            Vue.prototype.StatusBar = e.statusBarHeight;
+			            if (e.platform == 'android') {
+			                Vue.prototype.CustomBar = e.statusBarHeight + 50;
+			            } else {
+			                Vue.prototype.CustomBar = e.statusBarHeight + 45;
+			            };
+			            // #endif
+			            // #ifdef MP-WEIXIN
+			            Vue.prototype.StatusBar = e.statusBarHeight;
+			            let custom = wx.getMenuButtonBoundingClientRect();
+			            Vue.prototype.Custom = custom;
+			            Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
+			            // #endif       
+			            // #ifdef MP-ALIPAY
+			            Vue.prototype.StatusBar = e.statusBarHeight;
+			            Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
+			            // #endif
+			        }
+			    })
+			console.log('App Launch')
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+	}
+</script>
+
+<style>
+	    @import "colorui/main.css";
+	    @import "colorui/icon.css";
+		@import "weatherIcon/iconfont.css";
+	    /* @import "app.css"; *//* 你的项目css */
+	/*每个页面公共css */
+</style>

applefile/CertificateSigningRequest.certSigningRequest

@@ -0,0 +1,16 @@
+-----BEGIN CERTIFICATE REQUEST-----
+MIICjTCCAXUCAQAwSDElMCMGCSqGSIb3DQEJARYWZ3Vhbmd5YW9kaWFubGlAMTYz
+LmNvbTESMBAGA1UEAwwJ546L5ZiJ5paHMQswCQYDVQQGEwJDTjCCASIwDQYJKoZI
+hvcNAQEBBQADggEPADCCAQoCggEBAL9M7fkGbd4ZtZDS1o/xvdGqOgz+fhxBYguI
+n3GTUGrB1G85oZCkq1Sy05mbBLi1cJ3d6bB6MyByEqKAYiyYxszlzpFYA1zEkAQS
+nZyifyiHlp74LdmNS6i49CFlatXxW2mObiI2R53LvZqfJKp+Y9JA5EE/U72KrA7U
+AfF+ldRmnXIrrcNjtVnqj8vU0onLCoalZy4fq8gTmKAn2BlvrNpoD7Ouok3/9rv2
+35fVd683FTFb6cspmZqONvcaYxBFbRhw0hayQsxQuLNUhDeS0IRnZpsbhxeTaOoO
+I4lipOSl7Yp31ZTEdp/XUEOL+T+PJ8mYCNuFQ/WfslF7jFE3hOsCAwEAAaAAMA0G
+CSqGSIb3DQEBCwUAA4IBAQAN7wJNOh6O+2OELocHqgmmyjKxOG41sb8HbFhhvI4e
+RnpR4OgAz5WbyM/ciIv+Dc/mO4zWVccMgRB0K+BMhR+eA6EWvWJp0YOl2BWpSPnS
+mXyFf5+0XaFHVe3QWx4mBvabeTCh1OZUJZeSX1OYfS4iADlpgYZ11KOk4IsFJaLs
+h2yqsBwdZOZ5uNC4E+Jcl7s78qqfanr2T0l1Xhg3Ljww1/zI5I74hIYMJJ1bYWLm
+TlsHvYsL8NBJK9WaVFcIH7oBNO3Tm3B3GO8XaMckQwx5bmwBrTBq/hR33RdkKUzb
+iBKP+1bAEPNDHl1SkVblCxLNtelIZKrUnEJS5p/hifaE
+-----END CERTIFICATE REQUEST-----

colorui/animation.css

@@ -0,0 +1,184 @@
+/* 
+  Animation 微动画  
+  基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
+ */
+
+/* css 滤镜 控制黑白底色gif的 */
+.gif-black{  
+  mix-blend-mode: screen;  
+}
+.gif-white{  
+  mix-blend-mode: multiply; 
+}
+
+
+/* Animation css */
+[class*=animation-] {
+    animation-duration: .5s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both
+}
+
+.animation-fade {
+    animation-name: fade;
+    animation-duration: .8s;
+    animation-timing-function: linear
+}
+
+.animation-scale-up {
+    animation-name: scale-up
+}
+
+.animation-scale-down {
+    animation-name: scale-down
+}
+
+.animation-slide-top {
+    animation-name: slide-top
+}
+
+.animation-slide-bottom {
+    animation-name: slide-bottom
+}
+
+.animation-slide-left {
+    animation-name: slide-left
+}
+
+.animation-slide-right {
+    animation-name: slide-right
+}
+
+.animation-shake {
+    animation-name: shake
+}
+
+.animation-reverse {
+    animation-direction: reverse
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+@keyframes scale-up {
+    0% {
+        opacity: 0;
+        transform: scale(.2)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes scale-down {
+    0% {
+        opacity: 0;
+        transform: scale(1.8)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes slide-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes slide-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    10% {
+        transform: translateX(-9px)
+    }
+
+    20% {
+        transform: translateX(8px)
+    }
+
+    30% {
+        transform: translateX(-7px)
+    }
+
+    40% {
+        transform: translateX(6px)
+    }
+
+    50% {
+        transform: translateX(-5px)
+    }
+
+    60% {
+        transform: translateX(4px)
+    }
+
+    70% {
+        transform: translateX(-3px)
+    }
+
+    80% {
+        transform: translateX(2px)
+    }
+
+    90% {
+        transform: translateX(-1px)
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}

colorui/components/cu-custom.vue

@@ -0,0 +1,65 @@
+<template>
+	<view>
+		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
+			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
+				<view class="action" @tap="BackPage" v-if="isBack">
+					<text class="cuIcon-back"></text>
+					<slot name="backText"></slot>
+				</view>
+				<view class="content" :style="[{top:StatusBar + 'px'}]">
+					<slot name="content"></slot>
+				</view>
+				<slot name="right"></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				StatusBar: this.StatusBar,
+				CustomBar: this.CustomBar
+			};
+		},
+		name: 'cu-custom',
+		computed: {
+			style() {
+				var StatusBar= this.StatusBar;
+				var CustomBar= this.CustomBar;
+				var bgImage = this.bgImage;
+				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
+				if (this.bgImage) {
+					style = `${style}background-image:url(${bgImage});`;
+				}
+				return style
+			}
+		},
+		props: {
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			isBack: {
+				type: [Boolean, String],
+				default: false
+			},
+			bgImage: {
+				type: String,
+				default: ''
+			},
+		},
+		methods: {
+			BackPage() {
+				uni.navigateBack({
+					delta: 1
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

common/common.js

@@ -0,0 +1,45 @@
+class Common{
+	constructor() {
+	    
+	}
+	
+	//跳转
+	navTo(url){
+		uni.navigateTo({
+			url:url
+		})
+	}
+	
+	goback(url){
+	 var page = getCurrentPages();
+	 let windpowerstationName =  uni.getStorageSync('windpowerstationName');
+	 page[0].$vm.address = windpowerstationName;
+  //    uni.showModal({
+		// 		title: '提示',
+		// 		content: page,
+		// 		success: function (res) {
+		// 			if (res.confirm) {
+		// 				console.log('用户点击确定');
+		// 			} else if (res.cancel) {
+		// 				console.log('用户点击取消');
+		// 			}
+		// 		}
+		// 	});
+		
+		uni.switchTab({
+			
+			url: url,success: function(e) {				
+				//if (page[0] == undefined || page[0] == null) return;
+					page[page.length-1].onLoad();
+				}
+				
+		})
+		
+		
+	}
+	
+	
+}
+
+let common = new Common();
+export default common;

components/addressSelect/AddressSelect.vue

@@ -0,0 +1,392 @@
+<template>
+	<view>
+		<view class="fixed">
+			<cu-custom bgColor="bg-gradual-earkblue" :isBack="true">
+				<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>
+
+		<view class="VerticalBox">
+		
+			<scroll-view class="VerticalNav nav " scroll-y scroll-with-animation :scroll-top="verticalNavTop"   style="height:100vh;">
+				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in adresslist" :key="index" @tap="TabSelect"
+				 :data-id="index" :style="{'height':leftHeight}">
+				 
+					{{item.name}}
+				</view>
+				
+			</scroll-view>
+                <!-- 右侧菜单 -->
+				
+			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:100vh;padding-top:100upx"
+			
+			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
+			 
+				<view class="padding-top padding-lr" v-for="(item,index) in adresslist" :key="index" :id="'main-'+index">
+					<div v-if="(item.name=='吉林')">
+					<view class="cu-bar bg-white">
+						<view class="action" >
+							<text class="cuIcon-title text-green" style="margin-left:-10px"></text> {{item.name}}</view>
+					</view>
+					<view class="cu-list menu-avatar " >
+					          <!--item-->
+						<view class="cu-item" :style="{height:item.height+'upx'}" style="padding-bottom: 560px;">
+							<view class="row">
+								<view class="col-8" :style="{'width':nameWidth}" v-for="(val,key) in (item.item)" :key="key" @tap="pushWindPowerStationNameToSessionStorage(val.title,val.windPowerStationId);" >	
+								<a style="margin-left: 20px;">{{val.address}}</a>
+								<a style=" float: right ">{{val.title}}</a>
+								</view>
+							</view>
+					          </view>
+						</view>
+						</div>
+						<div v-if="(item.name!='吉林')">
+							<view class="cu-bar bg-white">
+								<view class="action" >
+									<text class="cuIcon-title text-green" style="margin-left:-10px"></text> {{item.name}}</view>
+							</view>
+							<view class="cu-list menu-avatar " >
+							          <!--item-->
+								<view class="cu-item" :style="{height:item.height+'upx'}" >
+									<view class="row">
+										<view class="col-8" :style="{'width':nameWidth}"  v-for="(val,key) in (item.item)" :key="key" @tap="pushWindPowerStationNameToSessionStorage(val.title,val.windPowerStationId);" >	
+										<a style="margin-left: 20px;">{{val.address}}</a>
+										<a style=" float: right ">{{val.title}}</a></br>
+										</view>
+									</view>
+							          </view>
+								</view>
+						</div>
+
+				</view>
+			</scroll-view>
+			
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				adresslist: [],
+				tabCur: 0,
+				mainCur: 0,
+				adressObject:[],
+				heBeiList:[],
+				verticalNavTop: 0,
+				load: true,
+				address:'',
+				windpowerstationIds:[],
+				province:[],
+				provinceAdressList:[],
+				windpowerstationAdressList:[],
+				provinceFlag:false,
+				windowWidth:"",
+				windowHeight:"",
+				leftHeight:'',
+				nameWidth:'',
+			};
+		},
+		created:function(){
+			this.windowWidth=uni.getSystemInfoSync().windowWidth;
+			this.windowHeight=uni.getSystemInfoSync().windowHeight;
+			if(this.windowWidth>=768){
+				this.leftHeight="100px";
+				this.nameWidth="500px"
+			}else{
+				this.leftHeight="50px";
+				this.nameWidth="253px";
+			}
+		},
+		onLoad(option) {
+			this.windpowerstationIds=JSON.parse(uni.getStorageSync('windpowerstationNames'));
+			console.log(this.windpowerstationIds);
+			this.address = option.option;
+			uni.showLoading({
+				title: '加载中...',
+				mask: true,
+			});
+			
+			this.selectWindPowerStation();
+			// let heBeiList = [
+			// 	{
+			// 		id:2,
+			// 		name:'河北',
+			// 		item:[
+			// 			{id:1,title:'崇礼',address:"河北省张家口崇礼市四台嘴乡"},
+			// 			{id:2,title:'康保',address:"河北省张家口市照阳河镇郝家营村"},
+			// 			{id:3,title:'雁门关',address:"山西省忻州市代县雁门关乡"}
+			// 		]
+			// 	}
+			// ];
+			// this.heBeiList = heBeiList;
+			// this.heBeiListCur = heBeiList[0];
+			// this.mainHeBeiList = this.heBeiList[this.tabCur];
+			
+			
+		},
+		onReady() {
+			uni.hideLoading()
+		},
+		methods: {
+			TabSelect(e) {
+				this.tabCur = e.currentTarget.dataset.id;
+				//this.adressObject = this.adresslist[this.tabCur]
+				this.mainCur = e.currentTarget.dataset.id;
+			    this.verticalNavTop = (e.currentTarget.dataset.id + 1) * 50
+				//this.verticalNavTop = 700;
+				// this.mainHeBeiList=this.heBeiList[this.tabCur]
+				
+				
+				// this.mainCur = e.currentTarget.dataset.id;
+				// this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
+			},
+			pushWindPowerStationNameToSessionStorage(windpowerstationName,windPowerStationId){
+				uni.setStorageSync('windpowerstationName',windpowerstationName);
+				uni.setStorageSync('windPowerStationId',windPowerStationId);
+				this.common.goback('/pages/index/Index');
+			},
+			getWindPowerStationNamesToSessionStorage() {
+				uni.getStorageSync('windpowerstationNames');
+				console.log(uni.getStorageSync('windpowerstationNames'));
+				return uni.getStorageSync('windpowerstationNames');
+			},
+			VerticalMain(e) {
+				// #ifdef MP-ALIPAY
+				   return false  //支付宝小程序暂时不支持双向联动 
+				// #endif
+				let that = this;
+				let tabHeight = 0;
+				if (this.load) {
+					for (let i = 0; i < this.adresslist.length; i++) {
+						let view = uni.createSelectorQuery().select("#main-" + this.adresslist[i].id);
+						view.fields({
+							size: true
+						}, data => {
+							this.adresslist[i].top = tabHeight;
+							tabHeight = tabHeight + data.height;
+							this.adresslist[i].bottom = tabHeight;
+						}).exec();
+					}
+					this.load = false
+				}
+				let scrollTop = e.detail.scrollTop + 10;
+				for (let i = 0; i < this.adresslist.length; i++) {
+					if (scrollTop > this.adresslist[i].top && scrollTop < this.adresslist[i].bottom) {
+						this.verticalNavTop = (this.adresslist[i].id - 1) * 50
+						this.tabCur = this.adresslist[i].id
+						console.log(scrollTop)
+						return false
+					}
+				}
+			},
+			selectWindPowerStation:function(){
+				let adresslist = [
+					{
+						id:0,
+						name:'宁夏'	,
+						height:455,
+						item:[
+							{id:1,title:'牛首山',address:"宁夏省吴忠市青铜峡市",windPowerStationId:"NSS_FDC"},
+							{id:2,title:'香山',address:"宁夏省中卫市沙坡头区",windPowerStationId:"XS_FDC"},
+							{id:3,title:'石板泉',address:"宁夏省吴忠市利通区",windPowerStationId:"SBQ_FDC"},
+							{id:4,title:'青山',address:"宁夏省吴忠市盐池县",windPowerStationId:"QS_FDC"},
+							{id:5,title:'麻黄山',address:"宁夏省吴忠市盐池县",windPowerStationId:"MHS_FDC"}
+						]
+				   },
+				   {
+				   	id:1,
+				    name:'河北',
+				   	height:300,
+				   	 item:[
+				   	{id:1,title:'崇礼',address:"河北省崇礼市四台嘴乡",windPowerStationId:"CL_FDC"},
+				   	{id:2,title:'康保',address:"河北省照阳河镇郝家营村",windPowerStationId:"KB_FDC"},
+				   	{id:3,title:'雁门关',address:"山西省忻州市代县",windPowerStationId:"YMG_FDC"}
+				   ]
+				   },
+				 {
+						id:2,
+						name:'内蒙',
+						height:200,
+						item:[
+							{id:1,title:'天源',address:"内蒙古省突泉县太平乡",windPowerStationId:"TY_FDC"},
+							{id:2,title:'熬伦',address:"内蒙古省通辽市库伦旗",windPowerStationId:"AL_FDC"},
+						]
+					},
+					{
+					id:3,
+					name:'辽宁',
+					height:600,
+					item:[
+					{id:1,title:'调兵山',address:"辽宁省铁岭调兵山市",windPowerStationId:"DBS_FDC"},
+					{id:2,title:'北镇',address:"辽宁省北镇市广宁乡",windPowerStationId:"BZ_FDC"},
+					{id:3,title:'兴城',address:"辽宁省葫芦岛兴城市",windPowerStationId:"XC_FDC"},
+					{id:4,title:'芳山',address:"辽宁省锦州市芳山镇",windPowerStationId:"FS_FDC"},
+					{id:5,title:'凌海',address:"辽宁省锦州市青松村",windPowerStationId:"LH_FDC"},
+					{id:6,title:'西八千',address:"辽宁省西八千乡南圈河村",windPowerStationId:"XBQ_FDC"},
+					{id:7,title:'台子山',address:"辽宁省铁岭市官台工业园区",windPowerStationId:"TZS_FDC"}
+					]
+					},
+				    {
+				      id:4,
+						name:'吉林',
+						height:1350,
+						item:[
+							{id:1,title:'永茂',address:"吉林省洮南市永茂乡",windPowerStationId:"YM_FDC"},
+							{id:2,title:'万发',address:"吉林省大安市红岗子乡",windPowerStationId:"WF_FDC"}
+						]
+					},
+					
+				
+				];
+				// for (let i = 0; i < 26; i++) {
+				// 	list[i] = {};
+				// 	list[i].name = String.fromCharCode(65 + i);
+				// 	list[i].id = i;
+				// }
+				//判断省份
+				for(let i=0;i<adresslist.length;i++){
+					for(let j=0;j<adresslist[i].item.length;j++){
+						for(let k=0;k<this.windpowerstationIds.length;k++){
+							if(adresslist[i].item[j].windPowerStationId==this.windpowerstationIds[k]){
+								if(this.province.length==0){
+									this.province.push(adresslist[i].name);
+								}else{
+									this.provinceFlag=false;
+									for(let l=0;l<this.province.length;l++){
+										if(this.province[l]==adresslist[i].name){
+											this.provinceFlag=true;										
+										}									
+									}
+									if(this.provinceFlag==false){
+										this.province.push(adresslist[i].name);
+									}	
+								}
+								
+							}
+						}
+						
+					}
+				}
+				for(let i1=0;i1<this.province.length;i1++){
+					for(let j1=0;j1<adresslist.length;j1++){
+						if(this.province[i1]==adresslist[j1].name){
+							this.provinceAdressList.push(adresslist[j1]);	
+																					
+						}
+					}
+				}
+				
+				//windpowerstationAdressList=this.provinceAdressList;
+				// for(let i3=0;i3<this.provinceAdressList.length;i3++){
+				// 	this.$set(this.windpowerstationAdressList,i3,this.provinceAdressList[i3]);
+				// }
+				this.windpowerstationAdressList=JSON.parse(JSON.stringify(this.provinceAdressList));
+				
+				
+				//判断风电场
+				for(let i2=0;i2<this.provinceAdressList.length;i2++){
+					this.windpowerstationAdressList[i2].item=[];
+					console.log(this.provinceAdressList);
+					for(let j2=0;j2<this.provinceAdressList[i2].item.length;j2++){
+						for(let k2=0;k2<this.windpowerstationIds.length;k2++){
+							if(this.windpowerstationIds[k2]==this.provinceAdressList[i2].item[j2].windPowerStationId){
+								this.windpowerstationAdressList[i2].item.push(this.provinceAdressList[i2].item[j2]);
+							}
+						}
+					}
+				}
+				//调整高度
+				for(let i3=0;i3<this.windpowerstationAdressList.length;i3++){
+					this.windpowerstationAdressList[i3].height=90*this.windpowerstationAdressList[i3].item.length;
+				}
+				
+				
+				this.adresslist = this.windpowerstationAdressList;
+				this.listCur = adresslist[0];
+				this.adressObject = this.adresslist[this.tabCur];
+			}
+		},
+	}
+</script>
+
+<style>
+	.fixed {
+		position: fixed;
+		z-index: 99;
+	}
+
+	.VerticalNav.nav {
+		width: 200upx;
+		padding-top: 150upx;
+		background-color: white;
+		/* background-color: #64A0D6; */
+		white-space: initial;
+	}
+
+	.VerticalNav.nav .cu-item {
+		width: 100%;
+		text-align: center;
+		background-color: #fff;
+		/* background-color: #64A0D6; */
+		margin: 0;
+		border: none;
+		height: 50px;
+		position: relative;
+	}
+
+	.VerticalNav.nav .cu-item.cur {
+		background-color: #f1f1f1;
+	    /* background-color: #64A0D6; */
+	}
+
+	.VerticalNav.nav .cu-item.cur::after {
+		content: "";
+		width: 8upx;
+		height: 30upx;
+		border-radius: 10upx 0 0 10upx;
+		position: absolute;
+		background-color: currentColor;
+		/* background-color: #64A0D6; */
+		top: 0;
+		right: 0upx;
+		bottom: 0;
+		margin: auto;
+	}
+
+	.VerticalBox {
+		display: flex;
+		margin-top: 25px;
+	}
+
+	.VerticalMain {
+		background-color: #f1f1f1;
+/* 	background-color: #64A0D6;	 */
+		flex: 1;
+	}
+	.col-8{
+/* 		margin-right: 10upx;
+		display: flex;
+		flex-direction: row;
+	    justify-content: space-between; */
+		width: 253px;
+		padding-top: 30upx;
+		padding-bottom: 10px;
+		border-bottom: 1upx solid lightgray
+		/* background-color: #64A0D6; */
+	
+		
+	}
+
+</style>

components/detail/Detail.vue

@@ -0,0 +1,604 @@
+<template>
+	<view class="content">
+		<!-- <image class="logo" src="/static/logo.png"></image> -->
+		<!--导航栏-->
+		<view>
+			<cu-custom bgColor="bg-gradual-earkblue" :isBack="true">
+				<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" ></image>
+				</block>
+			</cu-custom>
+		</view>
+		
+		<!-- 卡片 -->
+		<view class="cu-card case" :class="isCard?'no-card':''">
+			<view class="cardContenter">	
+				<view class="timeAndTitle">
+					<view class="time" :style="{'font-size':timeFontSize}">
+						{{startDate}}~{{endDate}}
+					</view>
+					<view class="title" :style="{'font-size':titleFontSize}">
+						温度/体感
+					</view>				
+				</view>
+				<!-- uCharts柱状图 -->
+				<scroll-view scroll-x="true" class="scrollUcharts">
+					<view class="qiun-charts-column" >
+						<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts-column"></canvas>
+					</view>
+				</scroll-view>									
+			</view>
+		</view>
+		
+		<!-- 卡片 -->
+		<view class="cu-card case" :class="isCard?'no-card':''">
+			<view class="cardContenter">	
+				<view class="timeAndTitle">
+					<view class="time" :style="{'font-size':timeFontSize}">
+						{{startDate}}~{{endDate}}
+					</view>
+					<view class="title" :style="{'font-size':titleFontSize}">
+						风速/风向
+					</view>
+				</view>					
+				<!-- uCharts折线图 -->
+				<scroll-view scroll-x="true" class="scrollUcharts">
+					<view class="hours">
+						<view class="hour" :style="{'font-size':hourFontSize}" v-for="(item,index) in hours" :key="index">
+							{{item}}时
+						</view>
+					</view>
+					<view class="qiun-charts-lineA">
+						<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts-lineA"></canvas>
+					</view>
+				</scroll-view>									
+			</view>
+		</view>
+		
+	 </view>
+</template>
+
+<script>
+	import uCharts from '../../components/tools/u-charts/u-charts.js';
+	export default {
+		data() {
+			return {
+				address: '',
+				option: '',
+				isCard: false,
+				cWidthLineA:'',
+				cHeightLineA:'',
+				pixelRatioLineA:1,
+				cWidthColumn:'',
+				cHeightColumn:'',
+				pixelRatioColumn:1,
+				weatherProphetData_17Hour:[
+					{
+						'data': '2020/02/25 00:00:00',
+						'temperature': '15',
+						'realfeel': '8',
+						'winddirection': '东北',
+						'speed': '3',
+					},
+					{
+						'data': '2020/02/25 01:00:00',
+						'temperature': '15',
+						'realfeel': '10',
+						'winddirection': '东北',
+						'speed': '4',
+					},
+					{
+						'data': '2020/02/25 02:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '东北',
+						'speed': '5',
+					},
+					{
+						'data': '2020/02/25 03:00:00',
+						'temperature': '15',
+						'realfeel': '9',
+						'winddirection': '东北',
+						'speed': '4',
+					},
+					{
+						'data': '2020/02/25 04:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '东北',
+						'speed': '3',
+					},
+					{
+						'data': '2020/02/25 05:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '东北',
+						'speed': '4',
+					},
+					{
+						'data': '2020/02/25 06:00:00',
+						'temperature': '15',
+						'realfeel': '13',
+						'winddirection': '东北',
+						'speed': '5',
+					},
+					{
+						'data': '2020/02/25 07:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '东北',
+						'speed': '4',
+					},
+					{
+						'data': '2020/02/25 08:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '东北',
+						'speed': '3',
+					},
+					{
+						'data': '2020/02/25 09:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '东北',
+						'speed': '4',
+					},
+					{
+						'data': '2020/02/25 10:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '东北',
+						'speed': '5',
+					},
+					{
+						'data': '2020/02/25 11:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '东北',
+						'speed': '4',
+					},
+					{
+						'data': '2020/02/25 12:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '东北',
+						'speed': '3',
+					},
+					{
+						'data': '2020/02/25 13:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '东北',
+						'speed': '4',
+					},
+					{
+						'data': '2020/02/25 14:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '东北',
+						'speed': '5',
+					},
+					{
+						'data': '2020/02/25 15:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '西南偏西',
+						'speed': '4',
+					},
+					{
+						'data': '2020/02/25 16:00:00',
+						'temperature': '15',
+						'realfeel': '15',
+						'winddirection': '西南偏西',
+						'speed': '3',
+					}
+				],								
+				startDate:"",
+				endDate:"",
+				hours:[],
+				weatherProphetDataAll_17Hour:[],
+				windPowerStationId:"MHS_FDC",
+				windowWidth:"",
+				windowHeight:"",
+				timeFontSize:"",
+				titleFontSize:"",
+				hourFontSize:"",
+				xAxisFontSize:"",
+				seriesTextSize:""
+			};
+		},
+		created: function() {
+			//this.pushWindPowerStationNameToSessionStorage("麻黄山");
+			this.address = this.getWindPowerStationNameToSessionStorage();
+			this.windPowerStationId=uni.getStorageSync('windPowerStationId');
+			this.getWeatherData();
+			this.windowWidth=uni.getSystemInfoSync().windowWidth;
+			this.windowHeight=uni.getSystemInfoSync().windowHeight;
+			if(this.windowWidth>=768){
+				this.timeFontSize="22px";
+				this.titleFontSize="22px";
+				this.hourFontSize="22px";
+				this.xAxisFontSize=18;
+				this.seriesTextSize=18;
+			}else{
+				this.timeFontSize="15px";
+				this.titleFontSize="15px";
+				this.hourFontSize="15px";
+				this.xAxisFontSize=12;
+				this.seriesTextSize=12;
+			}
+		},
+		onShow() {
+			this.address = this.getWindPowerStationNameToSessionStorage();
+			this.windPowerStationId=uni.getStorageSync('windPowerStationId');
+			this.getWeatherData();
+		},
+		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_2",
+					success(data) {
+						console.log("websocket连接成功");
+					},
+				});		
+				
+				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
+				this.socketTask.onOpen((res) => {
+					console.log("WebSocket连接正常打开中...！");
+					this.is_open_socket = true;
+				
+					// 注：只有连接正常打开中 ，才能正常收到消息
+					this.socketTask.onMessage((res) => {
+						//console.log("收到服务器内容：" + res.data);
+						_this.weatherProphetDataAll_17Hour =res.data;
+						_this.weatherProphetDataAll_17Hour=JSON.parse(res.data);
+						_this.weatherProphetData_17Hour = [];
+						//判断风场id 40天
+						for(let i = 0; i < _this.weatherProphetDataAll_17Hour.length; i++) {
+							if(_this.weatherProphetDataAll_17Hour[i].windpowerstationid == _this.windPowerStationId) {								
+								_this.weatherProphetData_17Hour.push(_this.weatherProphetDataAll_17Hour[i]);
+							}
+						}
+						//console.log(_this.weatherProphetData_17Hour);
+						let startMonth = new Date(_this.weatherProphetData_17Hour[0].date).getMonth() + 1;
+						let startDay = new Date(_this.weatherProphetData_17Hour[0].date).getDate() ;
+						let startHour = new Date(_this.weatherProphetData_17Hour[0].date).getHours() ;
+						_this.startDate = startMonth + "月" + startDay+"日" + startHour+"时";
+						let endMonth = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getMonth() + 1;
+						let endDay = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getDate() ;
+						let endHour = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getHours() ;
+						_this.endDate = endMonth + "月" + endDay+"日" + endHour+"时";
+						_this.hours=[];
+						for(let i=0;i<_this.weatherProphetData_17Hour.length;i++){
+							_this.hours.push(new Date(_this.weatherProphetData_17Hour[i].date).getHours());
+						}
+						_this.getServerData();
+					});
+				})
+				// 这里仅是事件监听【如果socket关闭了会执行】
+				this.socketTask.onClose(() => {
+					console.log("已经被关闭了")
+				})
+				
+				
+				
+				// let _this = this;
+				// if(typeof(WebSocket) == "undefined") {
+				// 	console.log("您的浏览器不支持WebSocket");
+				// } else {
+				// 	console.log("您的浏览器支持WebSocket");
+				// 	//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
+				// 	this.socket = new WebSocket("ws://49.4.78.143:8081/websocket/pageNumber_3/functionNumber_2");
+				// 	this.openSocket();
+				// 	//获得消息事件
+				// 	this.socket.onmessage = function onMessage(message) {
+				// 		_this.weatherProphetDataAll_17Hour = eval(message.data);
+				// 		_this.weatherProphetData_17Hour = [];
+				// 		//判断风场id
+				// 		for(let i = 0; i < _this.weatherProphetDataAll_17Hour.length; i++) {
+				// 			if(_this.weatherProphetDataAll_17Hour[i].windpowerstationid == _this.windPowerStationId) {
+				// 				_this.weatherProphetData_17Hour.push(_this.weatherProphetDataAll_17Hour[i]);
+				// 			}
+				// 		}
+				// 		console.log(_this.weatherProphetData_17Hour);
+				// 		let startMonth = new Date(_this.weatherProphetData_17Hour[0].date).getMonth() + 1;
+				// 		let startDay = new Date(_this.weatherProphetData_17Hour[0].date).getDate() ;
+				// 		let startHour = new Date(_this.weatherProphetData_17Hour[0].date).getHours() ;
+				// 		_this.startDate = startMonth + "月" + startDay+"日" + startHour+"时";
+				// 		let endMonth = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getMonth() + 1;
+				// 		let endDay = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getDate() ;
+				// 		let endHour = new Date(_this.weatherProphetData_17Hour[_this.weatherProphetData_17Hour.length-1].date).getHours() ;
+				// 		_this.endDate = endMonth + "月" + endDay+"日" + endHour+"时";
+				// 		_this.hours=[];
+				// 		for(let i=0;i<_this.weatherProphetData_17Hour.length;i++){
+				// 			_this.hours.push(new Date(_this.weatherProphetData_17Hour[i].date).getHours());
+				// 		}
+				// 		_this.getServerData();
+				// 	}
+				// }	
+			},
+			getServerData(){			
+				//柱状图
+				let Column={
+					 "categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
+					  "series": [{
+						"name": "成交量1",
+						"data": [15, {"value": 20,"color": "#f04864"}, 45, 37, 43, 34],
+						"color": '#f04864',
+						"textColor":"#FFFFFF",
+						"textSize":this.seriesTextSize,
+						format:(val)=>{return val+'℃ㅤ'}
+					  }, {
+						"name": "成交量2",
+						"data": [30, {"value": 40,"color": "#facc14"}, 25, 14, 34, 18],
+						"color": '#facc14',
+						"textColor":"#FFFFFF",
+						"textSize":this.seriesTextSize,
+						format:(val)=>{return 'ㅤ'+val+'℃'}
+					  }]
+				};
+				Column.categories=[];
+				Column.series[0].data=[];
+				Column.series[1].data=[];
+				for(let i=0;i<this.weatherProphetData_17Hour.length;i++){		
+					let xAxisHours = new Date(this.weatherProphetData_17Hour[i].date).getHours();					
+					Column.categories.push(xAxisHours+"时");
+					Column.series[0].data.push(this.weatherProphetData_17Hour[i].temperature);
+					Column.series[1].data.push(this.weatherProphetData_17Hour[i].realfeel);
+				}	
+				this.showColumn("canvasColumn",Column);
+				
+				//折线图
+				let LineA={
+					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
+					series: [{
+						name: '风速',
+						data: [35, 20, 25, 37, 4, 20],
+						color: '#FFFFFF',
+						textColor:"#FFFFFF",
+						textSize:this.seriesTextSize,
+						format:(val)=>{return val+'km/h'}
+					}]
+				};
+				LineA.categories=[];
+				LineA.series[0].data=[];									
+				for(let i=0;i<this.weatherProphetData_17Hour.length;i++){		
+					LineA.categories.push(this.weatherProphetData_17Hour[i].winddirection );
+					LineA.series[0].data.push(this.weatherProphetData_17Hour[i].speed);
+				}										
+				this.showLineA("canvasLineA",LineA);	
+				
+			},
+			showColumn(canvasId,chartData){
+				var _self = this;
+				var canvaColumn=new uCharts({
+					$this:_self,
+					canvasId: canvasId,
+					type: 'column',
+					legend:{show:false},
+					fontSize:11,
+					background:'#FFFFFF',
+					pixelRatio:_self.pixelRatioColumn,
+					animation: true,
+					categories: chartData.categories,
+					series: chartData.series,
+					xAxis: {
+						disableGrid:true,
+						fontColor:"#FFFFFF",
+						fontSize:_self.xAxisFontSize
+					},
+					yAxis: {
+						disabled:true,
+						disableGrid:true,
+						min:-40,
+						max:40,
+					},
+					dataLabel: true,
+					width: _self.cWidthColumn*_self.pixelRatioColumn,
+					height: _self.cHeightColumn*_self.pixelRatioColumn,
+					padding:[0,10,15,10],//画布填充边距，顺序为上右下左，同css，但必须4位
+					extra: {
+						column: {
+							type:'group',
+							width: _self.cWidthColumn*_self.pixelRatioColumn*0.25/chartData.categories.length					
+						}
+					  }
+				});			
+							
+			},
+			showLineA(canvasId,chartData){
+				var _self = this;
+				var canvaLineA=new uCharts({
+					$this:_self,
+					canvasId: canvasId,
+					type: 'line',
+					fontSize:11,
+					legend:{show:false},//图例
+					dataLabel:true,//数据点标签
+					dataPointShape:true,
+					background:'#FFFFFF',
+					pixelRatio:_self.pixelRatioLineA,
+					categories: chartData.categories,
+					series: chartData.series,
+					animation: true,
+					xAxis: {
+						type:'grid',
+						gridColor:'#CCCCCC',
+						gridType:'dash',
+						dashLength:8,
+						disableGrid:true,//网格线
+						axisLine:true,//x轴轴线
+						fontColor:"#FFFFFF",
+						fontSize:_self.xAxisFontSize
+					},
+					yAxis: {	
+						data:{
+							disabled:false//y轴轴线
+						},			
+						disableGrid:true,//网格线
+						gridType:'dash',
+						gridColor:'#CCCCCC',
+						dashLength:8,
+						splitNumber:5,
+						min:-40,
+						max:40,
+						format:(val)=>{return val.toFixed(0)+'元'}
+					},
+					width: _self.cWidthLineA*_self.pixelRatioLineA,
+					height: _self.cHeightLineA*_self.pixelRatioLineA,
+					padding:[0,0,15,-25],//画布填充边距，顺序为上右下左，同css，但必须4位
+					extra: {
+						line:{
+							type: 'curve'//曲线
+						}
+					}
+				});
+			},
+			closeSocket: function() {
+				this.socket.onclose;
+			},
+			openSocket: function() {
+				this.socket.onOpen;
+			}
+		},
+		onLoad(option) {		
+			this.cWidthLineA=uni.upx2px(2000);
+			this.cHeightLineA=uni.upx2px(300);
+			this.cWidthColumn=uni.upx2px(2000);
+			this.cHeightColumn=uni.upx2px(350);
+			//this.getServerData();
+			this.address = this.getWindPowerStationNameToSessionStorage();;
+		
+		}
+	}
+</script>
+
+<style>
+page {
+		background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#2F698E), color-stop(0.15, #5C757C), to(#004C90));
+		/* background-color: #108ADA; */
+	}	
+.cu-card{
+	width: 90%;
+	height: 450upx;
+	margin: 15px auto;
+}
+.cardContenter{	
+	border-radius: 20px;
+	/* margin: 20px auto; */
+	width: 100%;
+	height: 450upx;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
+	background: rgba(0, 0, 0, 0.1);
+}
+.timeAndTitle{
+	width: 90%;
+	margin-left: 20px;
+	height: 100upx;
+	font-family: "microsoft yahei";
+	font-size: 15px;
+	color: white;
+}
+.time{
+	float: left;
+	height: 100upx;
+	line-height: 100upx;
+}
+.title{
+	float: right;
+	text-align: right;
+	height: 100upx;
+	line-height: 100upx;
+}
+.hours{
+	width: 2000upx;
+	height: 50upx;
+	margin-left: 27px;
+	color: white;
+}
+.hour{
+	width: 50upx;
+	float: left;
+	margin-right: 32px;
+}
+.scrollUcharts{
+	white-space: nowrap;
+}
+
+.qiun-charts-lineA {
+		width: 2000upx;
+		height: 300upx;
+		/* background-color: #FFFFFF; */
+	}
+	
+	.charts-lineA {
+		width: 2000upx;
+		height: 300upx;
+		/* background-color: #FFFFFF; */
+	}
+.qiun-padding{
+	padding:2%;
+	width:96%;
+}
+.qiun-wrap{
+	display:flex; 
+	flex-wrap:wrap;
+}
+.qiun-rows{
+	display:flex; 
+	flex-direction:row !important;
+}
+.qiun-columns{
+	display:flex; 
+	flex-direction:column !important;
+}
+.qiun-common-mt{
+	margin-top:10upx;
+}
+.qiun-bg-white{
+	background:#FFFFFF;
+}
+.qiun-title-bar{
+	width:96%; 
+	padding:10upx 2%; 
+	flex-wrap:nowrap;
+}
+.qiun-title-dot-light{
+	border-left: 10upx solid #0ea391; 
+	padding-left: 10upx; 
+	font-size: 32upx;
+	color: #000000
+}
+.qiun-charts-column{
+	width: 2000upx; 
+	height:350upx;
+	/* background-color: #FFFFFF; */
+}
+.charts-column{
+	width: 2000upx; 
+	height:350upx;
+	/* background-color: #FFFFFF; */
+}	
+	
+	
+</style>

components/login/Login.vue

@@ -0,0 +1,314 @@
+<template>
+	<view>
+		<div class="container">
+			<view class="title"><h3>云端气象采集预测</h3></view>
+			<view class="usernameContainer" :style="{'margin-left':marginLeft}">
+				<span :style="{'font-size':fontSize}">用户名：</span><input type="text" v-model="username" class="username"/>
+			</view>
+			<view class="passwordContainer" :style="{'margin-left':marginLeft}">
+				<span :style="{'font-size':fontSize}">密&nbsp;&nbsp;&nbsp;&nbsp;码：</span><input type="password" v-model="password" class="password"/>
+			</view>
+			<view class="noLogin" :style="{'width':noLoginWidth,'font-size':noLoginFontSize,'margin-top':noLoginMarginTop}">
+				<a href="#" @tap="noLogin">免登录，以游客身份浏览</a>
+			</view>
+			<button class="cu-btn bg-blue lg" @tap="login" :style="{'margin-top':loginMarginTop}">登录</button>
+			
+
+		</div>
+	</view>
+</template>
+
+<script>
+	export default{
+		data:function(){
+			return{
+				username:"",
+				password:"",
+				lastUserName:"",
+				lastPassWord:"",
+				windPowerStations:[],
+				windPowerStationId:"",
+				windpowerstationName:"",
+				windowWidth:"",
+				windowHeight:"",
+				fontSize:"",
+				marginLeft:"",
+				loginMarginTop:"",
+				noLoginMarginTop:"",
+				noLoginFontSize:"",
+				loginFalg:false,
+				noLoginWidth:""
+			}
+		},
+		created() {
+			this.windowWidth=uni.getSystemInfoSync().windowWidth;
+			this.windowHeight=uni.getSystemInfoSync().windowHeight;
+			//console.log(this.windowWidth);
+			if(this.windowWidth>=768){
+				this.fontSize="25px";
+				this.marginLeft="5%";
+				this.loginMarginTop="10%";
+				this.noLoginMarginTop="5%";
+				this.noLoginFontSize="22px";
+				this.noLoginWidth="calc(70% + 147px)";
+			}else{
+				this.fontSize="18px";
+				this.marginLeft="0";
+				this.loginMarginTop="0";
+				this.noLoginMarginTop="0";
+				this.noLoginFontSize="14px";
+				this.noLoginWidth="calc(70% + 84px)";
+			}
+		},
+		methods:{
+			login:function(){
+				let _this=this;
+				uni.request({
+					url: 'http://49.4.78.143:8081/admin/appLogin?username='+this.username+'&password='+this.password,
+						data:{
+						},
+						method:'GET',
+						success: function(res) {
+							console.log(res.data)
+							if(res.data.code==200){
+								_this.loginFalg=true;
+								_this.getUser();
+															
+							}else{
+								uni.showModal({
+								 content: '用户名密码输入错误，请核对',								
+								}); 
+								_this.username="";
+								_this.password="";
+							}
+						},
+						fail: () => {
+							_this.tips="网络错误，小程序端请检查合法域名";
+						},
+					});
+			},
+			getUser:function(){
+				let _this=this;
+				uni.request({
+					url: 'http://49.4.78.143:8081/UserauthorityController/getUserSession',
+						data:{
+						},
+						method:'GET',
+						success: function(res) {					
+							_this.lastUserName=res.data[0];
+							_this.lastPassWord=res.data[1];
+							_this.getWindPowerStation();
+						},
+						fail: () => {
+							_this.tips="网络错误，小程序端请检查合法域名";
+						},
+					});
+			},
+			getWindPowerStation:function(){
+				let _this=this;
+				uni.request({
+					url: 'http://49.4.78.143:8081/UserauthorityController/selectuserauthority?userName='+this.lastUserName+'&password='+this.lastPassWord,
+						data:{
+						},
+						method:'GET',
+						success: function(res) {					
+							_this.windPowerStations=res.data;
+							//console.log(_this.windPowerStations);
+							_this.windPowerStationId=_this.windPowerStations[0];
+							if(_this.loginFalg){
+								if(_this.windPowerStationId=="MHS_FDC"){
+									_this.windpowerstationName="麻黄山";
+								}
+								if(_this.windPowerStationId=="NSS_FDC"){
+									_this.windpowerstationName="牛首山";
+								}
+								if(_this.windPowerStationId=="XS_FDC"){
+									_this.windpowerstationName="香山";
+								}
+								if(_this.windPowerStationId=="SBQ_FDC"){
+									_this.windpowerstationName="石板泉";
+								}
+								if(_this.windPowerStationId=="QS_FDC"){
+									_this.windpowerstationName="青山";
+								}
+								if(_this.windPowerStationId=="CL_FDC"){
+									_this.windpowerstationName="崇礼";
+								}
+								if(_this.windPowerStationId=="KB_FDC"){
+									_this.windpowerstationName="康保";
+								}
+								if(_this.windPowerStationId=="YMG_FDC"){
+									_this.windpowerstationName="雁门关";
+								}
+								if(_this.windPowerStationId=="TY_FDC"){
+									_this.windpowerstationName="天源";
+								}
+								if(_this.windPowerStationId=="AL_FDC"){
+									_this.windpowerstationName="熬伦";
+								}
+								if(_this.windPowerStationId=="DBS_FDC"){
+									_this.windpowerstationName="调兵山";
+								}
+								if(_this.windPowerStationId=="BZ_FDC"){
+									_this.windpowerstationName="北镇";
+								}
+								if(_this.windPowerStationId=="XC_FDC"){
+									_this.windpowerstationName="兴城";
+								}
+								if(_this.windPowerStationId=="FS_FDC"){
+									_this.windpowerstationName="芳山";
+								}
+								if(_this.windPowerStationId=="LH_FDC"){
+									_this.windpowerstationName="凌海";
+								}
+								if(_this.windPowerStationId=="XBQ_FDC"){
+									_this.windpowerstationName="西八千";
+								}
+								if(_this.windPowerStationId=="TZS_FDC"){
+									_this.windpowerstationName="台子山";
+								}
+								if(_this.windPowerStationId=="YM_FDC"){
+									_this.windpowerstationName="永茂";
+								}
+								if(_this.windPowerStationId=="WF_FDC"){
+									_this.windpowerstationName="万发";
+								}
+							}else{
+								_this.windpowerstationName="游客身份浏览";
+							}
+							
+							_this.pushWindPowerStationNameToSessionStorage(_this.windpowerstationName);
+							
+						},
+						fail: () => {
+							_this.tips="网络错误，小程序端请检查合法域名";
+							
+						},
+					});
+			},
+			pushWindPowerStationNameToSessionStorage(windpowerstationName) {
+				uni.setStorageSync('windpowerstationName',windpowerstationName);			
+				uni.setStorageSync('windpowerstationNames',JSON.stringify(this.windPowerStations));
+				uni.setStorageSync('windPowerStationId',this.windPowerStationId);
+				uni.switchTab({
+				     url: '/pages/index/Index'
+				});
+				//sessionStorage.setItem('windpowerstationName', windpowerstationName);
+				//alert("v"+ sessionStorage.getItem("windpowerstationName"));
+				//this.common.goback('/pages/index/Index');
+			},
+			noLogin:function(){
+				let _this=this;
+				
+				uni.request({
+					url: 'http://49.4.78.143:8081/admin/appLogin?username=abc&password=123',
+						data:{
+						},
+						method:'GET',
+						success: function(res) {
+							console.log(res.data)
+							if(res.data.code==200){
+								_this.loginFalg=false;
+								_this.getUser();			
+							}
+						},
+						fail: () => {
+							_this.tips="网络错误，小程序端请检查合法域名";
+						},
+					});
+			}
+		}
+	}
+</script>
+
+<style>
+	page {
+		height: 100%;
+		background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#2F698E), color-stop(0.15, #5C757C), to(#004C90));		
+	}
+	.container{
+		border-radius: 20px;
+		width: 90%;
+		height: 700upx;
+		margin: 0px auto;
+		position: absolute;
+		top: 20%;
+		left: 5%;
+		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
+		background: rgba(0, 0, 0, 0.1);
+	}
+	.title{
+		width: 100%;
+		height: 50px;
+		color: white;
+		line-height: 50px;
+		text-align: center;
+		margin-top: 5%;
+	}
+	.usernameContainer{
+		width: 100%;
+		height: 40px;
+		line-height: 40px;
+		margin-top: 10%;
+	}
+	.usernameContainer span{
+		float: left;
+		font-size: 18px;
+		color: white;
+		margin-left: 10px;
+	}
+	.username{
+		width: 70%;
+		height: 40px;
+		border: 1px solid white;
+		float: left;
+		border-radius: 5px;
+		
+	}	
+	.passwordContainer{
+		width: 100%;
+		height: 40px;
+		line-height: 40px;
+		margin-top: 10%;
+	}
+	.passwordContainer span{
+		float: left;
+		font-size: 18px;
+		color: white;
+		margin-left: 10px;
+	}
+	.password{
+		width: 70%;
+		height: 40px;
+		border: 1px solid white;
+		float: left;
+		border-radius: 5px;
+	}
+	.noLogin{
+		width: calc(70% + 84px);
+		height: 40px;
+		text-align: right;
+		color: white;
+		/* margin-left:15% ; */
+		/* margin-right: 10px; */
+		line-height: 40px;
+	}
+	.noLogin a:link{
+		color: white;
+	}
+	.noLogin a:hover{
+		color: white;
+	}
+	.noLogin a:visited{
+		color: white;
+	}
+	.noLogin a:active{
+		color: white;
+	}
+	.cu-btn{
+		width: 80%;
+		height: 50px;
+		margin-left: 10%;
+		/* margin-top: 10%; */
+	}
+</style>

components/thermometerCard/ThermometerCard.vue

@@ -0,0 +1,572 @@
+<template>
+	<div>
+		<div class="thermometerContainer" :style="{'width':width,'height':height,'margin-left':marginLeft}">
+			<!-- <div class="container" :style="{'width':width,'height':height}"> -->
+				<div class="time" :style="{'font-size':fontSize,'margin-left':marginleftTime}">
+					{{nowTime}} 实况
+				</div>
+				<div class="thermometerAndTemperature">
+					<div class="temperature" :style="{'margin-left':marginleftTemper,'margin-top':marginbottom}">
+						{{weatherProphetData_17Hour[0].temperature}}<span>℃</span>
+					</div>
+					<div :class="[thermometerClassName,totalClassName]" :style="{'margin-left':marginleftPicture}">
+					</div>
+				</div>
+				<div class="realFeelWindDirectionSpeed" :style="{'margin-left':marginleftThree}">
+					<div class="realFeel" :style="{'margin-left':marginleftThree,'font-size':fontSize}">
+						<div class="realFeelIcon"></div>&nbsp;体感温度：{{weatherProphetData_17Hour[0].realfeel}}℃
+					</div>
+					<div class="windDirection" :style="{'margin-left':marginleftThree,'font-size':fontSize}">
+						<div class="windDirectionIcon"></div>&nbsp;风向：{{weatherProphetData_17Hour[0].winddirection}}
+					</div>
+					<div class="speed" :style="{'margin-left':marginleftSpeed,'font-size':fontSize}">
+						<div class="speedIcon"></div>&nbsp;风速：{{weatherProphetData_17Hour[0].speed}}km/h
+					</div>
+				</div>
+				<div class="weatherDayTemperatureSunrise" :style="{'font-size':fontSize}"  v-show="weatherSwitch==true">
+					<div class="dayTemperature" :style="{'font-size':fontSize,'width':widths,'margin-left':marginleftTemperature}">
+						<div class="dayTemperatureIcon"></div>&nbsp;温度：{{weatherProphetData_1[0].temperature1}}℃
+					</div>
+					<div class="daySunrise" :style="{'font-size':fontSize,'width':widths,'margin-left':marginleftSunrise}">
+						<div class="daySunriseIcon"></div>&nbsp;日出：{{weatherProphetData_1[0].sunrise}}
+					</div>
+					<div class="weatherDayAndNightButton">
+						<div :class="[weatherSwitch==true?'dayButtonWhite':'dayButtonBlack']" @click="weatherDaySwitch()">白天</div>
+						<div :class="[weatherSwitch==false?'nightButtonWhite':'nightButtonBlack']" @click="weatherNightSwitch()">夜间</div>
+					</div>
+				</div>
+				<div class="weatherNightTemperatureSunrise" :style="{'font-size':fontSize}" v-show="weatherSwitch==false">
+					<div class="nightTemperature" :style="{'font-size':fontSize,'width':widths,'margin-left':marginleftTemperature}">
+						<div class="nightTemperatureIcon"></div>&nbsp;温度：{{weatherProphetData_1[0].temperature2}}℃
+					</div>
+					<div class="nightSunrise" :style="{'font-size':fontSize,'width':widths,'margin-left':marginleftSunrise}">
+						<div class="nightSunriseIcon"></div>&nbsp;日落：{{weatherProphetData_1[0].sunset}}
+					</div>
+					<div class="weatherDayAndNightButton">
+						<div :class="[weatherSwitch==true?'dayButtonWhite':'dayButtonBlack']"  @click="weatherDaySwitch()">白天</div>
+						<div :class="[weatherSwitch==false?'nightButtonWhite':'nightButtonBlack']"  @click="weatherNightSwitch()">夜间</div>
+					</div>
+				</div>
+				
+			<!-- </div> -->
+		</div>
+	</div>
+</template>
+<script>
+	Date.prototype.Format = function(fmt) {
+		var o = {
+			"M+": this.getMonth() + 1, //月份
+			"d+": this.getDate(), //日
+			"h+": this.getHours(), //小时
+			"m+": this.getMinutes(), //分
+			"s+": this.getSeconds(), //秒
+			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
+			"S": this.getMilliseconds() //毫秒
+		};
+		if (/(y+)/.test(fmt))
+			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+		for (var k in o)
+			if (new RegExp("(" + k + ")").test(fmt))
+				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+		return fmt;
+	};
+	//调用--
+	// var mytime=new Date(后台传来的毫秒格式的时间);
+	// var newtime=mytime.Format("需转化的时间格式比如--yyyy-MM-hh");
+
+	export default {
+		data: function() {
+			return {
+				nowTime: "",
+				weatherProphetData_17Hour: [{
+					realfeel:'',
+					speed:'',
+					temperature:'',
+					winddirection:'',
+				}],
+				weatherProphetData_1: [{
+					speed:'',
+					temperature1:'',
+					sunrise:'',
+					temperature2:'',
+					sunset:''
+				}],
+				thermometerClassName: "",
+				totalClassName: "thermometer",
+				width: "",
+				height: "",
+				weatherSwitch:true,
+				windowWidth:"",
+				windowHeight:"",
+				marginLeft:'',
+				marginleft:'',
+				marginLEft:'',
+				fontSize:"",
+				marginLEFT:'',
+				widths:'',
+				marginleftThree:'',
+				marginleftPicture:'',
+				marginbottom:'',
+				marginleftTemper:'',
+				marginleftTemperature:'',
+				choiceMarginRight:'',
+				marginleftTime:'',
+				marginleftSunrise:'',
+				marginleftSpeed:'',
+				
+			}
+		},
+		created: function() {
+			this.windowWidth=uni.getSystemInfoSync().windowWidth;
+			this.windowHeight=uni.getSystemInfoSync().windowHeight;
+			let that = this;
+			setInterval(function() {
+				that.getNowTime();
+			}, 1000);
+			if(this.windowWidth>=768){
+				this.marginLeft="5%";
+				this.marginleftThree="5%"
+				this.marginleft="30%";
+				this.marginLEft="10%";
+				this.fontSize="16px";
+				this.marginLEFT="20%";
+				this.widths=100+"px";
+				this.marginbottom="-1%";
+				this.marginleftPicture="35%";
+				this.marginleftTemper="20%";
+				this.marginleftTemperature="60px";
+				this.marginleftTime="50px";
+				this.marginleftSunrise="106px";
+				this.marginleftSpeed="80px";
+			}else{
+				this.marginLeft="5%";
+				this.marginLEft="0";
+				this.marginleft="0";
+				this.marginLEFT="0";
+			    this.fontSize="14px";
+				this.marginbottom="0";
+				this.widths=80+"px";
+				this.marginleftTime="0";
+				this.marginleftTime="30px";
+			}
+			// this.getHourWeatherData("90", "360", this.weatherProphetData_17Hour,this.weatherProphetData_1)
+
+		},
+		methods: {
+			weatherDaySwitch:function(){
+				this.weatherSwitch=true;
+				this.$emit("listenEven","day");
+			},
+			weatherNightSwitch:function(){
+				this.weatherSwitch=false;
+				this.$emit("listenEven","night");
+			},
+			getNowTime: function() {
+				var nowTime = new Date(new Date().getTime()).Format("hh:mm");
+				this.nowTime = nowTime;
+			},
+			// getDayWeatherData:function(weatherProphetData_1){
+			//     this.weatherProphetData_1 = weatherProphetData_1;
+			// 	console.log(this.weatherProphetData_1)
+			// },
+			getHourWeatherData: function(width, height, weatherProphetData_17Hour,weatherProphetData_1) {
+				console.log(width);
+				this.weatherProphetData_1=weatherProphetData_1;
+				this.weatherProphetData_17Hour = weatherProphetData_17Hour;
+				this.width = width + "%";
+				this.height = height + "px";
+				//判断温度计的度数,list[0].maximumtem%5后 1、2取0 ， 3、4取5				
+				if (parseInt(weatherProphetData_17Hour[0].temperature) % 5 == 0) {
+					this.thermometerClassName = "thermometer_" + parseInt(weatherProphetData_17Hour[0].temperature);
+				} else if (parseInt(weatherProphetData_17Hour[0].temperature) % 5 == 1 || parseInt(weatherProphetData_17Hour[0].temperature) %
+					5 == 2) {
+					this.thermometerClassName = "thermometer_" + (parseInt(weatherProphetData_17Hour[0].temperature / 5) * 5);
+				} else if (parseInt(weatherProphetData_17Hour[0].temperature) % 5 == 3 || parseInt(weatherProphetData_17Hour[0].temperature) %
+					5 == 4) {
+					this.thermometerClassName = "thermometer_" + ((parseInt(weatherProphetData_17Hour[0].temperature / 5) + 1) * 5);
+				} else if (parseInt(weatherProphetData_17Hour[0].temperature) % 5 == -1 || parseInt(weatherProphetData_17Hour[0].temperature) %
+					5 == -2) {
+					this.thermometerClassName = "thermometer_" + (parseInt(weatherProphetData_17Hour[0].temperature / 5) * -5);
+				} else if (parseInt(weatherProphetData_17Hour[0].temperature) % 5 == -3 || parseInt(weatherProphetData_17Hour[0].temperature) %
+					5 == -4) {
+					this.thermometerClassName = "thermometer_" + ((parseInt(weatherProphetData_17Hour[0].temperature / 5) + 1) * -5);
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	.thermometerContainer {
+		width: 65%;
+		height: 100%;
+		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
+		background: rgba(0, 0, 0, 0.1);
+		
+		float: left;
+		margin: 0px auto;
+		border-radius: 20px;
+		margin: 20px;
+	}
+
+	.container {
+		width: 370px;
+		height: 370px;
+		margin: 0px auto;
+	}
+
+	.time {
+		width: 100px;
+		height: 30px;
+		color: white;
+		font-size: 16px;
+		margin-left: 30px;
+		margin-top: 30px;
+		
+		font-family: "microsoft yahei";
+	}
+
+	.thermometerAndTemperature {
+		width: 100%;
+		height: 200px;
+	}
+
+	.temperature {
+		width: 100px;
+		height: 100px;
+		float: left;
+		margin-top: 40px;
+		margin-left: 20px;
+		font-size: 68px;
+		font-family: "microsoft yahei";
+		text-align: center;
+		line-height: 140px;
+		color: white;
+	}
+
+	.temperature span {
+		font-size: 37px;
+		font-family: "microsoft yahei";
+	}
+
+	.thermometer {
+		width: 104px;
+		height: 186px;
+		margin-left: 85px;
+		float: left;
+		margin-top: -30px;
+	}
+
+	.realFeelWindDirectionSpeed {
+		width: 100%;
+		height: 80px;
+		font-size: 15px;
+		margin-top: -30px;
+		margin-left: 15px;
+	}
+
+	.realFeel {
+		width: 150px;
+		height: 40px;
+		float: left;
+		margin-left: 20px;
+		line-height: 40px;
+		font-size: 14px;
+		font-family: "microsoft yahei";
+		color: white;
+	}
+
+	.realFeelIcon {
+		width: 20px;
+		height: 20px;
+		margin-top: 10px;
+		float: left;
+		background: url(../../static/picture/thermometerCard/pic_tu_01.png) no-repeat;
+	}
+
+	.windDirection {
+		width: 150px;
+		height: 40px;
+		float: left;
+		line-height: 40px;
+		margin-left: 3px;
+		font-size: 14px;
+		font-family: "microsoft yahei";
+		color: white;
+	}
+
+	.windDirectionIcon {
+		width: 20px;
+		height: 20px;
+		margin-top: 10px;
+		margin-left: 15px;
+		float: left;
+		background: url(../../static/picture/thermometerCard/pic_tu_02.png) no-repeat;
+	}
+
+	.weatherDayTemperatureSunrise {
+		width: 90%;
+		height: 30px;
+		font-size: 15px;
+		margin-top: 10px;
+		margin-left: 14px;
+		float: left;
+	}
+	
+	.weatherDayAndNightButton{
+		width: 100px;
+		height: 20px;
+		font-size: 15px;
+		text-align: right;
+		/* margin-top: 10px; */
+		/* margin-left: 14px; */
+		float: right;
+	}
+	
+	.dayButtonWhite{
+		margin-left: 15px;
+		text-align: center;
+		line-height: 20px;
+		width: 28%;
+		height: 20px;
+		color: white;
+		font-size: 14px;
+		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{
+		margin-left: 15px;
+		line-height: 20px;
+		text-align: center;
+		width: 28%;
+		height: 20px;
+		color: #DEDEDE;
+		font-size: 14px;
+		font-family: "microsoft yahei";
+		float: left;
+	}
+	.nightButtonWhite{
+		margin-left: 15px;
+		text-align: center;
+		line-height: 20px;
+		width: 28%;
+		height: 20px;
+		color: white;
+		font-size: 14px;
+		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;
+	}
+	.nightButtonBlack{
+		margin-left: 15px;
+		line-height: 20px;
+		text-align: center;
+		width: 28%;
+		height: 20px;
+		color: #DEDEDE;
+		font-size: 14px;
+		font-family: "microsoft yahei";
+		float: left;
+	}
+	.dayTemperature {
+		width: 85px;
+		height: 40px;
+		float: left;
+		margin-left: 20px;
+		margin-top: -10px;
+		line-height: 40px;
+		font-size: 14px;
+		font-family: "microsoft yahei";
+		color: white;
+	}
+	.daySunrise {
+		width: 85px;
+		height: 40px;
+		float: left;
+		margin-top: -10px;
+		/* margin-left: -60px; */
+		line-height: 40px;
+		font-size: 14px;
+		font-family: "microsoft yahei";
+		color: white;
+	}
+	.weatherNightTemperatureSunrise {
+		width: 90%;
+		height: 30px;
+		font-size: 15px;
+		margin-top: 10px;
+		margin-left: 14px;
+		float: left;
+	}
+	.nightTemperature {
+		width: 85px;
+		height: 40px;
+		float: left;
+		margin-left: 20px;
+		margin-top: -10px;
+		line-height: 40px;
+		font-size: 14px;
+		font-family: "microsoft yahei";
+		color: white;
+	}
+	.nightSunrise {
+		width: 85px;
+		height: 40px;
+		float: left;
+		margin-top: -10px;
+		/* margin-left: -60px; */
+		line-height: 40px;
+		font-size: 14px;
+		font-family: "microsoft yahei";
+		color: white;
+	}
+
+	.speed {
+		width: 150px;
+		height: 40px;
+		float: left;
+		margin-left: 20px;
+		line-height: 40px;
+		font-size: 14px;
+		font-family: "microsoft yahei";
+		color: white;
+	}
+
+	.speedIcon {
+		width: 20px;
+		height: 20px;
+		margin-top: 10px;
+		float: left;
+		background: url(../../static/picture/thermometerCard/pic_tu_03.png) no-repeat;
+	}
+
+
+	/*0℃*/
+
+	.thermometer_0 {
+		background: url(../../static/picture/thermometerCard/thermometer/0C.png) no-repeat 0px 0px;
+	}
+
+
+	/*5℃*/
+
+	.thermometer_5 {
+		background: url(../../static/picture/thermometerCard/thermometer/5C.png) no-repeat 0px 0px;
+	}
+
+
+	/*-5℃*/
+
+	.thermometer_-5 {
+		background: url(../../static/picture/thermometerCard/thermometer/-5C.png) no-repeat 0px 0px;
+	}
+
+
+	/*10℃*/
+
+	.thermometer_10 {
+		background: url(../../static/picture/thermometerCard/thermometer/10C.png) no-repeat 0px 0px;
+	}
+
+
+	/*-10℃*/
+
+	.thermometer_-10 {
+		background: url(../../static/picture/thermometerCard/thermometer/-10C.png) no-repeat 0px 0px;
+	}
+
+
+	/*15℃*/
+
+	.thermometer_15 {
+		background: url(../../static/picture/thermometerCard/thermometer/15C.png) no-repeat 0px 0px;
+	}
+
+
+	/*-15℃*/
+
+	.thermometer_-15 {
+		background: url(../../static/picture/thermometerCard/thermometer/-15C.png) no-repeat 0px 0px;
+	}
+
+
+	/*20℃*/
+
+	.thermometer_20 {
+		background: url(../../static/picture/thermometerCard/thermometer/20C.png) no-repeat 0px 0px;
+	}
+
+
+	/*-20℃*/
+
+	.thermometer_-20 {
+		background: url(../../static/picture/thermometerCard/thermometer/-20C.png) no-repeat 0px 0px;
+	}
+
+
+	/*30℃*/
+
+	.thermometer_30 {
+		background: url(../../static/picture/thermometerCard/thermometer/30C.png) no-repeat 0px 0px;
+	}
+
+
+	/*-30℃*/
+
+	.thermometer_-30 {
+		background: url(../../static/picture/thermometerCard/thermometer/-30C.png) no-repeat 0px 0px;
+	}
+
+
+	/*40℃*/
+
+	.thermometer_40 {
+		background: url(../../static/picture/thermometerCard/thermometer/40C.png) no-repeat 0px 0px;
+	}
+
+
+	/*-40℃*/
+
+	.thermometer_-40 {
+		background: url(../../static/picture/thermometerCard/thermometer/-40C.png) no-repeat 0px 0px;
+	}
+
+
+	/*45℃*/
+
+	.thermometer_45 {
+		background: url(../../static/picture/thermometerCard/thermometer/45C.png) no-repeat 0px 0px;
+	}
+
+
+	/*-45℃*/
+
+	.thermometer_-45 {
+		background: url(../../static/picture/thermometerCard/thermometer/-45C.png) no-repeat 0px 0px;
+	}
+
+
+	/*50℃*/
+
+	.thermometer_50 {
+		background: url(../../static/picture/thermometerCard/thermometer/50C.png) no-repeat 0px 0px;
+	}
+
+
+	/*-50℃*/
+
+	.thermometer_-50 {
+		background: url(../../static/picture/thermometerCard/thermometer/-50C.png) no-repeat 0px 0px;
+	}
+</style>

components/tools/scroll-choose/scroll-choose.vue

@@ -0,0 +1,185 @@
+<template>
+	<view class="scroll-choose-all">
+		<view class="middleLine"></view>
+		<scroll-view class="scroll-choose" scroll-x="true" upper-threshold="5" lower-threshold="5" 
+		:scroll-left="scrollLeftInit" show-scrollbar="false" @scroll="scroll" @scrolltoupper="upper" 
+		@scrolltolower="lower" scroll-with-animation="true">
+			<view class="scroll-con" :style="{width: scrollWid}">
+				<view class="topLine">
+					<view class="allLine" :style="{'marginRight': maginL + 'px'}" :class="item.type" v-for="(item,index) in scrollList" :key="index"></view>
+				</view>
+				<view class="bottomNum" :style="{'paddingLeft': allNumLeft}">
+					<text class="allNum" :style="{width: (maginL + 2) * 10 + 'px',left: -((maginL + 2) * 5) + 'px'}" v-for="(item,index) in scrollNumList" :key="index">
+						{{item}}
+					</text>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'ScrollChoose',
+		props: {
+			//起始值和终止值差距不要过大，否则会影响页面性能(暂不支持设置小数)
+			/**
+			 * 初始值（注意：初始值应在起始值和终止值之间）
+			 */
+			scrollLeft: {
+				type: Number,
+				default: 0
+			},
+			/**
+			 * 滚动区域起始值（注意：起始值不能大于终止值）
+			 */
+			scrollStart: {
+				type: Number,
+				default: 0
+			},
+			/**
+			 * 滚动区域终止值
+			 */
+			scrollEnd: {
+				type: Number,
+				default: 100
+			},
+			/**
+			 * 线间距
+			 */
+			maginL: {
+				type: Number,
+				default: 5
+			},
+		},
+		data() {
+			return {
+				scrollList:[],
+				scrollNumList:[],
+				scrollWid: '100vw',
+				scrollLeftInit: 0,
+				allNumLeft: ''
+			}
+		},
+		mounted() {
+			this.init();
+		},
+		computed:{
+			
+		},
+		methods: {
+			init(){
+				for(let i = this.scrollStart; i < (this.scrollEnd + 1); i++){
+					let _line = {};
+					if(i%5 == 0){
+						if(i%10 == 0){
+							this.scrollNumList.push(i);
+							_line.type = 'LLine'
+						}else{
+							_line.type = 'MLine'
+						}
+					}else{
+						_line.type = 'SLine'
+					}
+					this.scrollList.push(_line);
+				}
+				this.scrollWid = uni.upx2px(750) + (this.scrollEnd - this.scrollStart) * (this.maginL + 2)  + 'px';
+				if(this.scrollStart % 10 != 0){
+					if(this.scrollStart > 0){
+						this.allNumLeft = (10 - this.scrollStart % 10) * (this.maginL + 2) + uni.upx2px(372) + 'px';
+					}else{
+						this.allNumLeft = Math.abs(this.scrollStart % 10) * (this.maginL + 2) + uni.upx2px(372) + 'px';
+					}
+				}
+				setTimeout(()=>{
+					this.setNowLeft();
+				},100)
+			},
+			setNowLeft(){
+				this.scrollLeftInit = (this.scrollLeft - this.scrollStart) * (this.maginL + 2);
+			},
+			upper: function(e) {
+				setTimeout(()=>{
+					this.$emit('scroll',this.scrollStart);
+				},50)
+			},
+			lower: function(e) {
+				setTimeout(()=>{
+					this.$emit('scroll',this.scrollEnd);
+				},50)
+			},
+			scroll: function(e) {
+				this.$emit('scroll',Math.round(e.detail.scrollLeft/(this.maginL + 2)) + this.scrollStart);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+@charset "UTF-8";
+.scroll-choose-all{
+	width: 750rpx;
+	height: 70px;
+	background: #f8f8f8;
+	margin: 10px 0;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #ccc;
+	position: relative;
+}
+.middleLine{
+	position: absolute;
+	width: 4px;
+	height: 40px;
+	background: #83DC42;
+	left: 375rpx;
+	margin-left: -2px;
+	z-index: 1;
+}
+.scroll-choose{
+	width: 750rpx;
+	height: 70px;
+	.scroll-con{
+		height: 70px;
+		overflow: hidden;
+		.topLine{
+			height: 30px;
+			padding: 0 372rpx;
+		}
+		.bottomNum{
+			height: 30px;
+			padding: 0 0 0 372rpx;
+			width: 100%;
+			// display: flex;
+			// flex-wrap: nowrap;
+			.allNum{
+				display: inline-block;
+				position: relative;
+				// width: 70px;
+				// left: -35px;
+				text-align: center;
+			}
+		}
+		.allLine{
+			display: inline-block;
+			// margin-right: 5px;
+			width: 2px;
+			background: #999;
+			position: relative;
+		}
+		.allLine:last-child{
+			margin-right: 0px !important;
+		}
+		.LLine{
+			height: 30px;
+		}
+		.MLine{
+			height: 20px;
+			top: -10px;
+		}
+		.SLine{
+			height: 15px;
+			top: -15px;
+		}
+	}
+}
+</style>

components/tools/shoyu-date/shoyu-date.vue

@@ -0,0 +1,34 @@
+<template>
+	<view>
+		<view>{{ utils.friendlyDate(timestamp) }}</view>
+	</view>
+</template>
+
+<script>
+import utils from './utils.filter.js';
+
+export default {
+	name: 'UniDate',
+	data() {
+		return {
+			utils: utils
+		};
+	},
+	created() {
+		console.log(this.timestr);
+		
+		// 如果传递来的是时间戳
+		// this.timestamp = this.timestr;
+
+		this.timestamp = new Date(this.timestr).getTime();
+	},
+	props: {
+		timestr: {
+			type: [String],
+			default: ''
+		}
+	}
+};
+</script>
+
+<style lang="scss"></style>

components/tools/shoyu-date/shoyu-format.vue

@@ -0,0 +1,37 @@
+<template>
+	<view>
+		<view>{{ utils.timeTodate(format, timestamp) }}</view>
+	</view>
+</template>
+
+<script>
+import utils from './utils.filter.js';
+
+export default {
+	name: 'UniFomat',
+	data() {
+		return {
+			utils: utils
+		};
+	},
+	created() {
+		console.log(this.timestr);
+		
+		// 如果传递来的是时间戳
+		// this.timestamp = this.timestr;
+		this.timestamp = new Date(this.timestr).getTime();
+	},
+	props: {
+		format: {
+			type: [String],
+			default: 'Y-m-d H:i:s'
+		},
+		timestr: {
+			type: [String],
+			default: ''
+		}
+	}
+};
+</script>
+
+<style lang="scss"></style>

components/tools/shoyu-date/shuoming.md

@@ -0,0 +1,142 @@
+参考链接   https://ext.dcloud.net.cn/plugin?id=827
+
+
+<template>
+    <view class="e-page">
+        {{ utils.friendlyDate(timestamp) }}
+    </view>
+</template>
+
+
+// 直接使用办法
+import utils from '@/components/shoyu-date/utils.filter.js';
+// 直接使用办法 End
+export default {
+    data() {
+        return {
+            // 直接使用需要进行声明
+            utils: utils,
+            // 直接使用需要进行声明 End
+            date: '2019-10-01 08:00:00'
+        };
+    },
+    onLoad() {
+        let that = this;
+        // 时间转换为时间戳
+        // 如果是时间戳直接传递，无需转换
+        that.timestamp = new Date(this.date).getTime();
+        console.log(that.timestamp);
+    },
+    methods: {}
+};
+
+
+
+
+
+
+
+
+<template>
+    <view class="e-page">
+        <uni-date class="inline" :timestr="date"></uni-date>
+    </view>
+</template>
+
+
+// 组件引用办法
+import uniDate from '@/components/shoyu-date/uni-date.vue';
+// 组件引用办法 End
+
+export default {
+    components: { uniDate },
+    data() {
+        return {
+            // 如果不传小时的话，计算以每天8点开始计算
+            date: '2019-10-01 08:00:00',
+        };
+    },
+    onLoad() {
+        let that = this;
+    },
+    methods: {}
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+<template>
+    <view class="e-page">
+        {{ utils.timeTodate('Y-m-d H:i:s index', timestamp) }}
+    </view>
+</template>
+
+
+// 直接使用办法
+import utils from '@/components/shoyu-date/utils.filter.js';
+// 直接使用办法 End
+export default {
+    data() {
+        return {
+            // 直接使用需要进行声明
+            utils: utils,
+            // 直接使用需要进行声明 End
+            date: '2019/10/01 08:00:00'
+        };
+    },
+    onLoad() {
+        let that = this;
+        // 时间转换为时间戳
+        // 如果是时间戳直接传递，无需转换
+        that.timestamp = new Date(this.date).getTime();
+        console.log(that.timestamp);
+    },
+    methods: {}
+};
+
+
+
+
+
+
+
+
+
+<template>
+    <view class="e-page">
+        <uni-format class="inline" format="Y-m-d H:i:s index" :timestr="date"></uni-format>
+    </view>
+</template>
+
+
+// 组件引用办法
+import uniDate from '@/components/shoyu-date/uni-date.vue';
+// 组件引用办法 End
+
+export default {
+    components: { uniDate },
+    data() {
+        return {
+            // 如果不传小时的话，计算以每天8点开始计算
+            date: '2019-10-01 08:00:00',
+        };
+    },
+    onLoad() {
+        let that = this;
+    },
+    methods: {}
+};
+
+
+
+
+

components/tools/shoyu-date/utils.filter.js

@@ -0,0 +1,81 @@
+export default {
+	friendlyDate: (timestamp) => {
+		var formats = {
+			'year': '%n% 年前',
+			'month': '%n% 月前',
+			'day': '%n% 天前',
+			'hour': '%n% 小时前',
+			'minute': '%n% 分钟前',
+			'second': '%n% 秒前',
+		};
+		var now = Date.now();
+		var seconds = Math.floor((now - parseInt(timestamp)) / 1000);
+		var minutes = Math.floor(seconds / 60);
+		var hours = Math.floor(minutes / 60);
+		var days = Math.floor(hours / 24);
+		var months = Math.floor(days / 30);
+		var years = Math.floor(months / 12);
+
+		var diffType = '';
+		var diffValue = 0;
+		if (years > 0) {
+			diffType = 'year';
+			diffValue = years;
+		} else {
+			if (months > 0) {
+				diffType = 'month';
+				diffValue = months;
+			} else {
+				if (days > 0) {
+					diffType = 'day';
+					diffValue = days;
+				} else {
+					if (hours > 0) {
+						diffType = 'hour';
+						diffValue = hours;
+					} else {
+						if (minutes > 0) {
+							diffType = 'minute';
+							diffValue = minutes;
+						} else {
+							diffType = 'second';
+							diffValue = seconds === 0 ? (seconds = 1) : seconds;
+						}
+					}
+				}
+			}
+		}
+		return formats[diffType].replace('%n%', diffValue);
+	},
+	timeTodate: (format, timestamp) => {
+		
+		var myDate = new Date();  
+		myDate.getYear(); //获取当前年份(2位)  
+		myDate.getFullYear(); //获取完整的年份(4位,1970-????)  
+		myDate.getMonth(); //获取当前月份(0-11,0代表1月)         // 所以获取当前月份是myDate.getMonth()+1;   
+		myDate.getDate(); //获取当前日(1-31)  
+		myDate.getDay(); //获取当前星期X(0-6,0代表星期天)  
+		myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)  
+		myDate.getHours(); //获取当前小时数(0-23)  
+		myDate.getMinutes(); //获取当前分钟数(0-59)  
+		myDate.getSeconds(); //获取当前秒数(0-59)  
+		myDate.getMilliseconds(); //获取当前毫秒数(0-999)  
+		myDate.toLocaleDateString(); //获取当前日期  
+		var mytime=myDate.toLocaleTimeString(); //获取当前时间  
+		myDate.toLocaleString( ); //获取日期与时间  
+
+		// 2019-10-01 23:08:35
+		var tmpDate = new Date(timestamp);
+		var seconds = tmpDate.getSeconds();
+		var minutes = ('0' + tmpDate.getMinutes()).substr(-2);
+		var hours = tmpDate.getHours();
+		var days = ('0' + tmpDate.getDate()).substr(-2);
+		var months = ('0' + (tmpDate.getMonth() + 1)).substr(-2);
+		var years = tmpDate.getFullYear();
+		
+		var value = '自定义替换值';
+		// 输出格式为 .replace(被替换字符, 计算后值)
+
+		return format.replace('Y', years).replace('m', months).replace('d', days).replace('H', hours).replace('i', minutes).replace('s', seconds).replace('index', value);
+	}
+}

components/tools/u-charts/component.vue

@@ -0,0 +1,165 @@
+<template>
+	<canvas v-if="canvasId" :id="canvasId" :canvasId="canvasId" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
+	 @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error">
+	</canvas>
+</template>
+
+<script>
+	import uCharts from './u-charts.js';
+	var canvases = {};
+	
+	export default {
+		props: {
+			chartType: {
+				required: true,
+				type: String,
+				default: 'column'
+			},
+			opts: {
+				required: true,
+				type: Object,
+				default () {
+					return null;
+				},
+			},
+			canvasId: {
+				type: String,
+				default: 'u-canvas',
+			},
+			cWidth: {
+				default: 375,
+			},
+			cHeight: {
+				default: 250,
+			},
+			pixelRatio: {
+				type: Number,
+				default: 1,
+			},
+		},
+		mounted() {
+			this.init();
+		},
+		methods: {
+			init() {
+				switch (this.chartType) {
+					case 'column':
+						this.initColumnChart();
+						break;
+					case 'line':
+						this.initLineChart();
+						break;
+					default:
+						break;
+				}
+			},
+			initColumnChart() {
+				canvases[this.canvasId] = new uCharts({
+					$this: this,
+					canvasId: this.canvasId,
+					type: 'column',
+					legend: true,
+					fontSize: 11,
+					background: '#FFFFFF',
+					pixelRatio: this.pixelRatio,
+					animation: true,
+					categories: this.opts.categories,
+					series: this.opts.series,
+					enableScroll: true,
+					xAxis: {
+						disableGrid: true,
+						itemCount: 4,
+						scrollShow: true
+					},
+					yAxis: {
+						//disabled:true
+					},
+					dataLabel: true,
+					width: this.cWidth * this.pixelRatio,
+					height: this.cHeight * this.pixelRatio,
+					extra: {
+						column: {
+							type: 'group',
+						}
+					}
+				});
+			},
+			initLineChart() {
+				canvases[this.canvasId] = new uCharts({
+					$this: this,
+					canvasId: this.canvasId,
+					type: 'line',
+					fontSize: 11,
+					legend: true,
+					dataLabel: false,
+					dataPointShape: true,
+					background: '#FFFFFF',
+					pixelRatio: this.pixelRatio,
+					categories: this.opts.categories,
+					series: this.opts.series,
+					animation: true,
+					enableScroll: true,
+					xAxis: {
+						type: 'grid',
+						gridColor: '#CCCCCC',
+						gridType: 'dash',
+						dashLength: 8,
+						itemCount: 4,
+						scrollShow: true
+					},
+					yAxis: {
+						gridType: 'dash',
+						gridColor: '#CCCCCC',
+						dashLength: 8,
+						splitNumber: 5,
+						min: 10,
+						max: 180,
+						format: (val) => {
+							return val.toFixed(0) + '元'
+						}
+					},
+					width: this.cWidth * this.pixelRatio,
+					height: this.cHeight * this.pixelRatio,
+					extra: {
+						line: {
+							type: 'straight'
+						}
+					}
+				});
+			},
+			// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
+			changeData(cid,newdata) {
+				canvases[cid].updateData({
+					series: newdata.series,
+					categories: newdata.categories
+				});
+			},
+			touchStart(e) {
+				canvases[this.canvasId].showToolTip(e, {
+					format: function(item, category) {
+						return category + ' ' + item.name + ':' + item.data
+					}
+				});
+				canvases[this.canvasId].scrollStart(e);
+			},
+			touchMove(e) {
+				canvases[this.canvasId].scroll(e);
+			},
+			touchEnd(e) {
+				canvases[this.canvasId].scrollEnd(e);
+			},
+			error(e) {
+				console.log(e)
+			}
+		},
+	};
+</script>
+
+<style scoped>
+	.charts {
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		background-color: #FFFFFF;
+	}
+</style>

components/tools/u-charts/shuoming.md

@@ -0,0 +1,105 @@
+/* 数据格式以及调用案例
+http://doc.ucharts.cn/1172183
+： */
+
+template
+
+<view class="qiun-charts">
+        <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"></canvas>
+</view>
+import => u-chart.js
+
+data:
+cWidth:'',
+cHeight:'',
+pixelRatio:1,
+
+
+methods:
+getServerData(){
+									
+					let LineA={
+						categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
+						series: [{
+							name: '成交量A',
+							data: [35, 20, 25, 37, 4, 20],
+							color: '#000000'
+						}, {
+							name: '成交量B',
+							data: [70, 40, 65, 100, 44, 68]
+						}, {
+							name: '成交量C',
+							data: [100, 80, 95, 150, 112, 132]
+						}]
+					};
+					//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:true},
+					dataLabel:false,
+					dataPointShape:true,
+					background:'#FFFFFF',
+					pixelRatio:_self.pixelRatio,
+					categories: chartData.categories,
+					series: chartData.series,
+					animation: true,
+					xAxis: {
+						type:'grid',
+						gridColor:'#CCCCCC',
+						gridType:'dash',
+						dashLength:8
+					},
+					yAxis: {
+						gridType:'dash',
+						gridColor:'#CCCCCC',
+						dashLength:8,
+						splitNumber:5,
+						min:10,
+						max:180,
+						format:(val)=>{return val.toFixed(0)+'元'}
+					},
+					width: _self.cWidth*_self.pixelRatio,
+					height: _self.cHeight*_self.pixelRatio,
+					extra: {
+						line:{
+							type: 'straight'
+						}
+					}
+				});
+				console.log(canvaLineA.categories);
+			}
+
+
+
+onLoad() {
+			this.cWidth=uni.upx2px(1500);
+			this.cHeight=uni.upx2px(500);
+			this.getServerData();			
+		}
+
+
+
+
+style:
+.qiun-charts {
+		width: 1500upx;
+		height: 500upx;
+		background-color: #FFFFFF;
+	}
+	
+	.charts {
+		width: 1500upx;
+		height: 500upx;
+		background-color: #FFFFFF;
+	}

components/tools/wiszx-tabs/shuoming.md

@@ -0,0 +1,64 @@
+```html
+
+<template>
+    <Tabs
+        :TabList="TabList"
+        :currentTab="current"
+        @tabs="tabsChange"
+    >
+        <TabPane>
+            <view>1</view>
+        </TabPane>
+        <TabPane>
+            <view>2</view>
+        </TabPane>
+        <TabPane>
+            <view>3</view>
+        </TabPane>
+    </Tabs>
+</template>   
+<script>  
+/**
+ * 使用stylus预处理器，可能需要自己添加一下
+ * 引入tabs 和tabPane组件  
+    为tabs 传入 
+    tablist（tab标题），
+    currentTab（选中的tab）， 
+    @tabs事件  改变选中的tabs
+    TabList:[
+        {title:'商品介绍'},
+        {title:'规格参数'},
+        {title:'售后保障'}
+    ]  
+    TabPane 根据 tab的多少添加。  
+    更新：  
+        在tabPane区域添加了滑动手指事件。横向滑动切换tab。  
+        在tabs.vue中的  tabChange方法中发布了全局事件，不需要可以注释掉。这里主要方便tabpane中的内容监听 tabs的切换做出响应。  
+*/
+import Tabs from './components/tabs/tabs.vue'
+import TabPane from './components/tabs/tabPane.vue'
+
+export default {
+    data(){
+        return{
+            current:0,
+            TabList:[
+                {title:'商品介绍'},
+                {title:'规格参数'},
+                {title:'售后保障'}
+            ]
+        }
+    },
+    methods:{
+        tabsChange(index){
+            this.current = index
+        }
+    },
+    components:{
+        Tabs,
+        TabPane
+    }
+}
+</script>
+
+```

components/tools/wiszx-tabs/tabPane.vue

@@ -0,0 +1,28 @@
+<template>
+    <view 
+        class='tab-pane-item'>
+        <slot></slot>
+    </view>
+</template>
+<script>
+export default {
+    name:'TabPane',
+    props:{
+        current:{
+            default:0,
+            type:Number
+        }
+    }
+}
+</script>
+<style lang="stylus">
+.tab-pane-item
+    width: 100%;
+    height 100%
+    display: inline-block
+    white-space: initial;
+    vertical-align: top;
+    font-size: 24upx;
+    box-sizing: border-box;
+    overflow: auto
+</style>

components/tools/wiszx-tabs/tabs.vue

@@ -0,0 +1,159 @@
+
+<template>
+    <view 
+        class="tabs"
+    >
+        <scroll-view class="active-switch" scroll-x :scroll-into-view="id" scroll-with-animation>
+            <view class="switch-container" >
+                <view 
+                v-for="(item,index) in TabList" :key="index"
+                :class="['active-item',currentTab==index&&'focus',TabList.length==3&&'fix']"
+                @tap="tabChange(index)"
+                :id='`tab_${index}`'
+                >
+                    <view class="item">{{item.title}}</view>
+                </view>
+                <view class="focus-line"
+                    :class="[TabList.length==3&&'fix']"
+                    :style="{transform:transformX}"
+                >
+                </view>
+            </view>
+        </scroll-view>
+        <view class="tab-pane-view"
+            @touchstart='touchstart'
+            @touchend='touchend'
+        >
+            <view 
+              class="tab-pane-group"
+              :style="{transform:transformXx}"  
+            >
+            <slot></slot>
+            </view>
+        </view>
+    </view>    
+</template>
+<script>
+export default {
+    name:'Tabs',
+    data(){
+        return {
+            id:'tab_0',
+            start:0
+        }
+    },
+    props:{
+        TabList:{
+            default:()=>{
+                return []
+            },
+            type:Array
+        },
+        currentTab:{
+            default:0,
+            type:Number
+        }
+    },
+    computed:{
+        transformX(){
+            let currentTab = this.currentTab;
+            return `translate3d(${currentTab*100}%, 0px, 0px)`
+        },
+        transformXx(){
+            let currentTab = this.currentTab;
+            return `translate3d(-${currentTab*100}%, 0px, 0px)`
+        }
+    },
+    methods:{
+        tabChange(index){
+            if(this.currentTab!=index){
+                console.log(`emit:${index}`);
+                this.$emit('tabs',index);
+                this.bus.$emit('tabs',index)  //事件，这里触发tabs事件
+                this.id = `tab_${index}`
+            }
+        },
+        touchstart(e){
+            this.start = e.touches[0].clientX;
+        },
+        touchend(e){
+            let end = e.changedTouches[0].clientX;
+            if(end-this.start>100&&this.currentTab>=1){
+                this.tabChange(this.currentTab-1)
+            }else if(this.start-end>100&&this.currentTab<this.TabList.length-1){
+                this.tabChange(this.currentTab+1)
+            }
+        }
+    }
+}
+</script>
+<style lang="stylus">
+.tabs
+    position relative
+    height 100vh
+    display flex
+    flex-direction column
+    .active-switch
+        overflow scroll
+        .switch-container
+            position relative
+            display flex
+            flex-direction row
+            .focus-line
+                flex 1
+                width 160upx
+                position absolute
+                bottom 0
+                border-bottom 4upx solid #f07
+                transition 0.3s
+                &.fix
+                    width 250upx
+        .active-item
+            position relative
+            min-width 160upx
+            width 160upx
+            flex 1
+            height 100upx
+            transition .3s
+            background-color: #fff
+            color #000
+            text-align: center
+            display: flex 
+            flex-direction: column
+            justify-content: space-around
+            border-bottom 1upx solid rgba(0,0,0,0.5)
+            &.focus
+                background #fff
+                color #f07
+                transition-duration: .3s
+            &.fix
+                width 250upx
+            .item
+                // width: 220upx
+                padding: 0 5upx
+                overflow hidden
+                font-size: 28upx
+    .tab-pane-view
+        overflow hidden
+        background-color: #f7f7f7
+        flex 1
+        .tab-pane-group
+            display: block;
+            white-space: nowrap;
+            -webkit-transition: all .3s;
+            transition: all .3s;
+            width: 100%;
+            overflow: visible;
+            will-change: transform,left,top;
+            min-height 100upx
+            height 100%
+            .tab-pane-item
+                width: 100%;
+                min-height 100upx
+                display: inline-block
+                white-space: initial;
+                vertical-align: top;
+                font-size: 24upx;
+                box-sizing: border-box;
+                overflow: auto
+</style>

components/weatherCalendarCardList40/weatherCalendarCard40/weatherCalendarCard40.vue

@@ -0,0 +1,884 @@
+<template>
+	<view>
+		<div :class="container" :style="{ 'width': width, 'height': height }">
+			<div :class="date" :style="{'font-size':dateFontSize,'margin-top':marginTop}">{{ newDate }}</div>
+			<div class="temperature" :style="{'font-size':otherFontSize,'margin-top':marginTop}">{{ weatherProphetData_40.temperature1 }}/{{ weatherProphetData_40.temperature2 }}℃</div>
+			<div class="weather" :style="{'font-size':otherFontSize, height: weatherHeight,'margin-top':marginTop}">
+				<div :class="[weatherClassName, weatherIconTotalClass]" :style="{ width: iconWidth, height: iconHeight }"></div>
+				{{ weather }}
+			</div>
+			<div class="wind" :style="{'font-size':otherFontSize,'margin-top':marginTop}">{{ weatherProphetData_40.winddirection1 }}风</div>
+		</div>
+	</view>
+</template>
+
+<script>
+	import utils from '@/components/tools/shoyu-date/utils.filter.js';
+	
+Date.prototype.Format = function(fmt) {
+	var o = {
+		'M+': this.getMonth() + 1, //月份
+		'd+': this.getDate(), //日
+		'h+': this.getHours(), //小时
+		'm+': this.getMinutes(), //分
+		's+': this.getSeconds(), //秒
+		'q+': Math.floor((this.getMonth() + 3) / 3), //季度
+		S: this.getMilliseconds() //毫秒
+	};
+	if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
+	for (var k in o) if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
+	return fmt;
+};
+//调用--
+// var mytime=new Date(后台传来的毫秒格式的时间);
+// var newtime=mytime.Format("需转化的时间格式比如--yyyy-MM-hh");
+export default {
+	data() {
+		return {
+			container: '',
+			date: 'dateGray',
+			newDate: '',
+			classNameWeatherBackgroundColor: "threeGradeBlue",
+			weatherIconTotalClass: 'WeatherIconTotalClass',
+			weatherClassName: '',
+			width: '',
+			height: '',
+			margin: '2px',
+			weatherProphetData_40:"",
+			weather:"",
+			// 直接使用需要进行声明
+			utils: utils,
+			// 直接使用需要进行声明 End
+			timestamp:"",
+			windowWidth:"",
+			windowHeight:"",
+			dateFontSize:"",
+			otherFontSize:"",
+			weatherHeight:"",
+			iconWidth:"",
+			iconHeight:"",
+			marginTop:""
+		};
+	},
+	created:function(){
+		//this.getWeatherData("79","100",this.classNameWeatherBackgroundColor,this.weatherClassName,this.weatherProphetData_40)
+		this.windowWidth=uni.getSystemInfoSync().windowWidth;
+		this.windowHeight=uni.getSystemInfoSync().windowHeight;
+		if(this.windowWidth>=768){
+			this.dateFontSize="20px";
+			this.otherFontSize="16px";
+			this.weatherHeight="34px";
+			this.iconWidth="40px";
+			this.iconHeight="34px";
+			this.marginTop="5px";
+		}else{
+			this.dateFontSize="16px";
+			this.otherFontSize="12px";
+			this.weatherHeight="30px";
+			this.iconWidth="29px";
+			this.iconHeight="30px";
+			this.marginTop="0";
+		}
+	},
+	methods: {
+		getWeatherData: function(width, height, classNameWeatherBackgroundColor, classNameWeatherIcon, weatherProphetData_40) {
+			this.width = "calc("+width+"% - 4px)";
+			this.height = height + 'px';
+			this.classNameWeatherBackgroundColor = classNameWeatherBackgroundColor;
+			this.weatherClassName = classNameWeatherIcon;
+			this.weatherProphetData_40 = weatherProphetData_40;
+			if(this.weatherProphetData_40.weather.search("大部分") != -1){
+				this.weather=this.weatherProphetData_40.weather;
+				this.weather=this.weather.replace("大部分","")
+			}else if(this.weatherProphetData_40.weather.search("间歇性") != -1){
+				this.weather=this.weatherProphetData_40.weather;
+				this.weather=this.weather.replace("间歇性","")
+			}else{
+				this.weather=this.weatherProphetData_40.weather;
+			}
+			this.setDate();
+			this.setBackgroundColor();
+		},
+		setDate: function() {
+			// var newDate = new Date(this.weatherProphetData_40.recodedata).Format("dd");
+			// this.newDate = newDate;
+			this.timestamp = new Date(this.weatherProphetData_40.recodedata).getTime();
+			this.newDate=this.utils.timeTodate('d',this.timestamp);
+			//console.log(this.newDate);
+			//this.timestamp = 1582560000000;
+			//console.log(this.timestamp);
+		},
+		setBackgroundColor: function() {
+			if (this.classNameWeatherBackgroundColor == 'firstGradeBlue') {
+				this.container = 'containerFirstGradeBlue';
+			} else if (this.classNameWeatherBackgroundColor == 'twoGradeBlue') {
+				this.container = 'containerTwoGradeBlue';
+			} else if (this.classNameWeatherBackgroundColor == 'threeGradeBlue') {
+				this.container = 'containerThreeGradeBlue';
+			} else if (this.classNameWeatherBackgroundColor == 'white') {
+				this.container = 'containerWhite';
+				this.date = 'dateBlack';
+			}
+		}
+	}
+};
+</script>
+
+<style scoped>
+.containerFirstGradeBlue {
+	width: 103px;
+	height: 132px;
+	margin: 2px;
+	background-color: #205ac6;
+	color: white;
+}
+
+.containerTwoGradeBlue {
+	width: 103px;
+	height: 132px;
+	margin: 2px;
+	background-color: #427ce8;
+	color: white;
+}
+
+/* .containerThreeGradeBlue {
+	width: 103px;
+	height: 132px;
+	margin: 2px;
+	background-color: transparent;	
+	color: white;
+	border: 0.5px solid #698086;
+} */
+
+.containerThreeGradeBlue {
+	/* width: 90px; */
+	/* height: 132px; */
+	margin: 2px;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
+	background: rgba(0, 0, 0, 0.1);
+	color: white;
+}
+
+.containerWhite {
+	width: 103px;
+	height: 132px;
+	margin: 2px;
+	background-color: white;
+	color: #757575;
+}
+
+.dateBlack {
+	width: 30px;
+	height: 25px;
+	/* margin-left: 2px; */
+	text-align: center;
+	font-family: 'microsoft yahei';
+	font-size: 16px;
+	font-weight: bold;
+	line-height: 25px;
+	color: black;
+}
+
+.dateGray {
+	width: 30px;
+	height: 25px;
+	/* margin-left: 2px; */
+	text-align: center;
+	font-family: 'microsoft yahei';
+	font-size: 16px;
+	font-weight: bold;
+	line-height: 25px;
+}
+
+.temperature {
+	width: 99%;
+	height: 23px;
+	text-align: right;
+	line-height: 23px;
+	font-family: 'microsoft yahei';
+	font-size: 12px;
+}
+
+.weather {
+	width: 99%;
+	height: 30px;
+	text-align: right;
+	font-family: 'microsoft yahei';
+	font-size: 12px;
+	line-height: 30px;
+	margin-right: 8px;
+}
+
+.WeatherIconTotalClass {
+	width: 29px;
+	height: 30px;
+	float: left;
+	/* margin-left: 6px; */
+}
+.wind {
+	width: 99%;
+	height: 25px;
+	text-align: right;
+	font-family: 'microsoft yahei';
+	font-size: 12px;
+	line-height: 25px;
+}
+
+/*blue22第一行*/
+
+.weatherCardList40_weatherCard40_blue22_taiYang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat 4px 2px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunTaiyang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -75px 2px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunYun {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -156px 2px;
+}
+
+.weatherCardList40_weatherCard40_blue22_taiYangYunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -235px 2px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShanDian {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -314px 2px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShanDianShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -396px 2px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShuiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -476px 2px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -556px 2px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -635px 2px;
+}
+
+.weatherCardList40_weatherCard40_blue22_sanHengGang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -715px 2px;
+}
+
+.weatherCardList40_weatherCard40_blue22_liangdianliangyuan {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -798px 2px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunYunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -876px 2px;
+}
+/*blue22第二行*/
+
+.weatherCardList40_weatherCard40_blue22_yunSanShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat 4px -78px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunYunSiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -75px -78px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunYunWuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -156px -78px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunYunLiuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -235px -78px;
+}
+
+.weatherCardList40_weatherCard40_blue22_taiYangYunXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -314px -78px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -396px -78px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -476px -78px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunSanXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -556px -78px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunYunSiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -635px -78px;
+}
+
+.weatherCardList40_weatherCard40_blue22_sanHengGang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -715px -78px;
+}
+
+.weatherCardList40_weatherCard40_blue22_sanDianSanYuan {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -798px -78px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunYunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -876px -78px;
+}
+/*blue22第三行*/
+
+.weatherCardList40_weatherCard40_blue22_sanHengGang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat 4px -157px;
+}
+
+.weatherCardList40_weatherCard40_blue22_boLang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -75px -157px;
+}
+
+.weatherCardList40_weatherCard40_blue22_sYouJianTou {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -156px -157px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -235px -157x;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunSanShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -314px -157px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunYunSiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -396px -157px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunYunWuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -476px -157px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunyunLiuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -556px -157px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -635px -157px;
+}
+
+.weatherCardList40_weatherCard40_blue22_sanHengGang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -715px -157px;
+}
+/*blue22第四行*/
+
+.weatherCardList40_weatherCard40_blue22_yunSanXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat 4px -237px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunYunSiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -75px -237px;
+}
+
+.weatherCardList40_weatherCard40_blue22_s {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -156px -237px;
+}
+
+.weatherCardList40_weatherCard40_blue22_sShangJianTou {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -235px -237px;
+}
+
+.weatherCardList40_weatherCard40_blue22_sYouJianTou {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -314px -237px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -396px -237px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -476px -237px;
+}
+
+.weatherCardList40_weatherCard40_blue22_quanQuan {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -556px -237px;
+}
+/*blue22第五行*/
+
+.weatherCardList40_weatherCard40_blue22_yueLiang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat 4px -318px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yueLiangYun {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -75px -318px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yueLiangYunYun {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -156px -318px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yueLiangYunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -235px -318px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShanDianShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -314px -318px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShanDianShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -396px -318px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShuiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -476px -318px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -556px -318px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -635px -318px;
+}
+
+.weatherCardList40_weatherCard40_blue22_yunYunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -876px -318px;
+}
+/*blue22第六行*/
+
+.weatherCardList40_weatherCard40_blue22_yueLiangYunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/blue22.png) no-repeat -314px -396px;
+}
+/*white22第一行*/
+
+.weatherCardList40_weatherCard40_white22_taiYang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat 4px 2px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunTaiyang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -75px 2px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunYun {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -156px 2px;
+}
+
+.weatherCardList40_weatherCard40_white22_taiYangYunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -235px 2px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShanDian {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -314px 2px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShanDianShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -396px 2px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShuiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -476px 2px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -556px 2px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -635px 2px;
+}
+
+.weatherCardList40_weatherCard40_white22_sanHengGang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -715px 2px;
+}
+
+.weatherCardList40_weatherCard40_white22_liangdianliangyuan {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -798px 2px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunYunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -876px 2px;
+}
+/*white22第二行*/
+
+.weatherCardList40_weatherCard40_white22_yunSanShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat 4px -78px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunYunSiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -75px -78px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunYunWuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -156px -78px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunYunLiuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -235px -78px;
+}
+
+.weatherCardList40_weatherCard40_white22_taiYangYunXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -314px -78px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -396px -78px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -476px -78px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunSanXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -556px -78px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunYunSiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -635px -78px;
+}
+
+.weatherCardList40_weatherCard40_white22_sanHengGang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -715px -78px;
+}
+
+.weatherCardList40_weatherCard40_white22_sanDianSanYuan {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -798px -78px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunYunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -876px -78px;
+}
+/*white22第三行*/
+
+.weatherCardList40_weatherCard40_white22_sanHengGang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat 4px -157px;
+}
+
+.weatherCardList40_weatherCard40_white22_boLang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -75px -157px;
+}
+
+.weatherCardList40_weatherCard40_white22_sYouJianTou {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -156px -157px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -235px -157x;
+}
+
+.weatherCardList40_weatherCard40_white22_yunSanShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -314px -157px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunYunSiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -396px -157px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunYunWuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -476px -157px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunyunLiuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -556px -157px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -635px -157px;
+}
+
+.weatherCardList40_weatherCard40_white22_sanHengGang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -715px -157px;
+}
+/*white22第四行*/
+
+.weatherCardList40_weatherCard40_white22_yunSanXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat 4px -237px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunYunSiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -75px -237px;
+}
+
+.weatherCardList40_weatherCard40_white22_s {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -156px -237px;
+}
+
+.weatherCardList40_weatherCard40_white22_sShangJianTou {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -235px -237px;
+}
+
+.weatherCardList40_weatherCard40_white22_sYouJianTou {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -314px -237px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -396px -237px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -476px -237px;
+}
+
+.weatherCardList40_weatherCard40_white22_quanQuan {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -556px -237px;
+}
+/*white22第五行*/
+
+.weatherCardList40_weatherCard40_white22_yueLiang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat 4px -318px;
+}
+
+.weatherCardList40_weatherCard40_white22_yueLiangYun {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -75px -318px;
+}
+
+.weatherCardList40_weatherCard40_white22_yueLiangYunYun {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -156px -318px;
+}
+
+.weatherCardList40_weatherCard40_white22_yueLiangYunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -235px -318px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShanDianShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -314px -318px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShanDianShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -396px -318px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShuiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -476px -318px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -556px -318px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -635px -318px;
+}
+
+.weatherCardList40_weatherCard40_white22_yunYunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -715px -318px;
+}
+/*white22第六行*/
+
+.weatherCardList40_weatherCard40_white22_yueLiangYunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white22.png) no-repeat -314px -396px;
+}
+
+/*white30第一行*/
+
+.weatherCardList40_weatherCard40_white30_taiYang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat 4px 2px;
+}
+
+.weatherCardList40_weatherCard40_white30_taiYangYun {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -75px 2px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYun {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -156px 2px;
+}
+
+.weatherCardList40_weatherCard40_white30_taiYangYunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -235px 2px;
+}
+
+.weatherCardList40_weatherCard40_white30_taiYangShanDianShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -314px 2px;
+}
+
+.weatherCardList40_weatherCard40_white30_taiYangShanDianShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -396px 2px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunShuiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -476px 2px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -556px 2px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunLiangShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -635px 2px;
+}
+
+.weatherCardList40_weatherCard40_white30_sanHengGang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -715px 2px;
+}
+
+.weatherCardList40_weatherCard40_white30_liangDianLiangQuan {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -796px 2px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -876px 2px;
+}
+
+
+/*white30第二行*/
+
+.weatherCardList40_weatherCard40_white30_yunSanShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat 4px -78px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYunSiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -75px -78px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYunWuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -156px -78px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYunLiuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -235px -78px;
+}
+
+.weatherCardList40_weatherCard40_white30_taiYangYunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -314px -78px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -396px -78px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -476px -78px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunSanXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -556px -78px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYunSiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -635px -78px;
+}
+
+.weatherCardList40_weatherCard40_white30_sanHengGang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -715px -78px;
+}
+
+.weatherCardList40_weatherCard40_white30_sanDianSanQuan {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -798px -78px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -876px -78px;
+}
+
+
+/* white30第三行*/
+
+.weatherCardList40_weatherCard40_white30_sanHengGang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat 4px -157px;
+}
+
+.weatherCardList40_weatherCard40_white30_boLang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -75px -157px;
+}
+
+.weatherCardList40_weatherCard40_white30_sYouJianTou {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -156px -157px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -235px -157px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunSanShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -314px -157px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYunSiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -396px -157px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYunWuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -476px -157px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYunLiuShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -556px -157px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -635px -157px;
+}
+
+
+/*  white30第四行*/
+
+.weatherCardList40_weatherCard40_white30_yunSanXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat 0px -237px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYunSiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -75px -237px;
+}
+
+.weatherCardList40_weatherCard40_white30_s {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -156px -237px;
+}
+
+.weatherCardList40_weatherCard40_white30_sShangJianTou {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -235px -237px;
+}
+
+.weatherCardList40_weatherCard40_white30_sYouJianTou {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -314px -237px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -396px -237px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -476px -237px;
+}
+
+
+/*white30第五行*/
+
+.weatherCardList40_weatherCard40_white30_yueLiang {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat 4px -318px;
+}
+
+.weatherCardList40_weatherCard40_white30_yueLiangYun {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -75px -318px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYueLiangYun {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -156px -318px;
+}
+
+.weatherCardList40_weatherCard40_white30_yueLiangYunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -235px -318px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunShanDianShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -314px -318px;
+}
+
+.weatherCardList40_weatherCard40_white30_yueShanDianShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -396px -318px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunShuiXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -476px -318px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -556px -318px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -635px -318px;
+}
+
+.weatherCardList40_weatherCard40_white30_yunYunShuiShui {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -876px -318px;
+}
+
+
+/* white30第六行*/
+
+.weatherCardList40_weatherCard40_white30_yueLiangYunXueXue {
+	background: url(../../../static/picture/weatherProphet_40/weatherCalendarCardList40/weatherCalendarCard40/white30.png) no-repeat -314px -396px;
+}
+</style>

components/weatherCalendarCardList40/weatherCalendarCardList40.vue

@@ -0,0 +1,105 @@
+<template>
+	<view class="container">
+		<div class="weatherCard" v-for="(item,index) in weatherProphetData_40" :key="index">
+			<weatherCalendarCard40 ref="weatherCalendarCard40"></weatherCalendarCard40>
+		</div>
+	</view>
+</template>
+
+<script>
+	import weatherCalendarCard40 from '../../components/weatherCalendarCardList40/weatherCalendarCard40/weatherCalendarCard40.vue'
+export default {
+	components: {
+		"weatherCalendarCard40":weatherCalendarCard40
+	},
+	data() {
+		return {
+			width:"",
+			height:"",
+			weatherProphetData_40:[],
+			classNameWeatherBackgroundColor: "threeGradeBlue",
+			weatherIcons: [],
+			classNameWeatherIconWhite:[],
+			windowWidth:"",
+			windowHeight:"",
+			url:""
+		};
+	},
+	created() {
+		this.windowWidth=uni.getSystemInfoSync().windowWidth;
+		this.windowHeight=uni.getSystemInfoSync().windowHeight;
+		if(this.windowWidth>=768){
+			this.url="http://49.4.78.143:8081/WeatherfdController/weatherInformationChangePictureName?model=weatherCardList40,weatherCard40,white30&weatherInformation="
+		}else{
+			this.url="http://49.4.78.143:8081/WeatherfdController/weatherInformationChangePictureName?model=weatherCardList40,weatherCard40,white22&weatherInformation="
+		}
+	},
+	methods: {
+		getWeatherData(width,height,weatherProphetData_40){
+			let _this=this;
+			this.width=width;
+			this.height=height;
+			this.weatherProphetData_40 = weatherProphetData_40;
+			//console.log(weatherProphetData_40);
+			this.weatherIcons=[];
+			for(let i = 0; i < this.weatherProphetData_40.length; i++) {
+				this.weatherIcons.push(this.weatherProphetData_40[i].weather);
+			}
+			this.commitData();			
+			
+			
+		},
+		commitData:async function() {
+			//获取图标请求
+			let _this=this;
+			await uni.request({
+				url: this.url+ this.weatherIcons,
+					data:{
+					},
+					method:'GET',
+					success: function(res) {
+						//console.log(res.data)
+						_this.classNameWeatherIconWhite=[];
+						for(let i=0;i<res.data.length;i++){
+							_this.classNameWeatherIconWhite.push(res.data[i]);
+						}
+						for(let i=0;i<_this.weatherProphetData_40.length;i++){
+							_this.$nextTick(function() {
+								this.$refs.weatherCalendarCard40[i].getWeatherData(this.width,this.height,this.classNameWeatherBackgroundColor, this.classNameWeatherIconWhite[i], this.weatherProphetData_40[i]);
+							})
+						}
+					},
+					fail: () => {
+						_this.tips="网络错误，小程序端请检查合法域名";
+					},
+				});	
+			
+		},	
+		pushWeatherData(){
+			let _this=this;
+			for(let i=0;i<this.weatherProphetData_40.length;i++){
+				this.$nextTick(function() {
+					console.log(_this.classNameWeatherIconWhite[0]);
+					//this.$refs.weatherCalendarCard40[i].getWeatherData(this.width,this.height,this.classNameWeatherBackgroundColor, this.classNameWeatherIconWhite[i], this.weatherProphetData_40[i]);
+				})
+			}
+		}
+	}
+};
+</script>
+
+<style scoped>
+	.container{
+		margin: 0px auto;
+		width: 90%;
+		height: auto;
+		/* margin-left: 22px; */
+		
+		/* border: 0.5px solid #698086; */
+	}
+	.weatherCard{
+		width: 25%;
+		float: left;
+		/* margin-left: 6px; */
+	}
+</style>

components/weatherCalendarCardList8_15/weatherCalendarCard8_15/weatherCalendarCard8_15.vue

@@ -0,0 +1,504 @@
+<template>
+	<div class="weatherProphet8_15" :style="{'width':weatherProphet8_15Width,'height':weatherProphet8_15Height}">
+		<div class="date" :style="{'font-size':dateSize}">{{month}}月{{day}}</div>
+		<div class="cardContaine" :style="{'height':cardContaineHeight}">
+			<div class="time" :style="{'line-height':timeLineHeight,'background-color':timeBackgroundColor,'font-size':timeSize,'height':timeHeight,'width':timeDayWidth}">
+				{{week}}&nbsp;{{day}}
+			</div>
+			<div class="weatherIcon" :style="{'background-color':weatherIconBackgroundColor,'width':timeWidth,'height':weatherIconHeight}">
+				<div :class="[dayWeatherClassName,dayWeatherIconTotalClass]" :style="{'margin-top':dayWeatherIconTotalClassMarginTop,'margin-left':dayWeatherIconTotalClassMarginLeft}"></div>
+				<div :class="[nightWeatherClassName,nightWeatherIconTotalClass]" :style="{'margin-top':dayWeatherIconTotalClassMarginTop,'margin-right':dayWeatherIconTotalClassMarginRight}"></div>
+			</div>
+			<div class="weatherAndTemperatureAndWinddirectionAndSpeedClass">
+				<div class="weather" :style="{'line-height':timeLineHeight,'font-size':weatherSize}">
+					{{weatherProphetData_8_15.weather}}
+				</div>
+				<div class="temperature" :style="{'line-height':timeLineHeight,'font-size':temperatureSize}">
+					<span>{{weatherProphetData_8_15.temperature1}}℃</span>/{{weatherProphetData_8_15.temperature2}}℃
+				</div>
+				<div class="winddirection" :style="{'line-height':timeLineHeight,'font-size':winddirectionSize}">
+					{{weatherProphetData_8_15.winddirection1}}
+				</div>
+				<div class="speed" :style="{'line-height':timeLineHeight,'font-size':speedSize}">
+					{{weatherProphetData_8_15.speed1}}km/h
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import utils from '../../tools/shoyu-date/utils.filter.js';
+	export default {
+		data: function() {
+			return {
+				windowWidth:'',
+				windowHeight:'',
+				timeDayWidth:"",
+				dateSize:'',
+				timeWidth:'',
+				timeHeight:'',
+				timeSize:'',
+				weatherSize:'',
+				temperatureSize:'',
+				weatherProphet8_15Width:'',
+				weatherProphet8_15Height:'',
+				dayWeatherIconTotalClassMarginLeft:'',
+				dayWeatherIconTotalClassMarginRight:'',
+				dayWeatherIconTotalClassMarginTop:'',
+				winddirectionSize:'',
+				speedSize:'',
+				cardContaineHeight:'',
+				timeLineHeight:'',
+				weatherIconHeight:'',
+				weatherProphetData_8_15: "",
+				width: "",
+				height: "",
+				week: "",
+				day: "",
+				month:"",
+				newDate: '',
+				utils: utils,
+				timestamp:"",
+				dayWeatherIconTotalClass: "dayWeatherIconTotalClass",
+				dayWeatherClassName: "",
+				nightWeatherIconTotalClass: "nightWeatherIconTotalClass",
+				nightWeatherClassName: "",
+				classNameweatherIconBackgroundColor: "",
+				weatherIconBackgroundColor: "",
+				timeBackgroundColor: "",
+				iconMarginTop: ""
+			}
+		},
+		created:function(){
+			this.windowWidth=uni.getSystemInfoSync().windowWidth;
+			this.windowHeight=uni.getSystemInfoSync().windowHeight;
+			if(this.windowWidth>=768){
+				this.dateSize="24px";
+				this.timeDayWidth="22%";
+				this.timeWidth="15%";
+				this.timeSize="20px";
+				this.timeHeight="70px";
+				this.weatherSize="20px";
+				this.temperatureSize="20px";
+				this.weatherProphet8_15Width="88%";
+				this.weatherProphet8_15Height="140px";
+				this.winddirectionSize="20px";
+				this.speedSize="20px";
+				this.cardContaineHeight="70px";
+				this.timeLineHeight="70px";
+				this.weatherIconHeight="70px";
+				this.dayWeatherIconTotalClassMarginLeft="10px";
+				this.dayWeatherIconTotalClassMarginTop="20px";
+				this.dayWeatherIconTotalClassMarginRight="10px";
+			}
+			else{
+				this.dateSize="14px";
+				this.timeDayWidth="16%";
+				this.timeWidth="22%";
+				this.timeSize="10px";
+				this.timeHeight="40px";
+				this.weatherSize="10px";
+				this.temperatureSize="10px";
+				this.weatherProphet8_15Width="86%";
+				this.weatherProphet8_15Height="100px";
+				this.winddirectionSize="10px";
+				this.speedSize="10px";
+				this.cardContaineHeight="40px";
+				this.timeLineHeight="40px";
+				this.weatherIconHeight="40px";
+				this.dayWeatherIconTotalClassMarginLeft="3px";
+				this.dayWeatherIconTotalClassMarginTop="3px";
+				this.dayWeatherIconTotalClassMarginRight="4px";
+			}
+		},
+		methods: {
+			getWeatherData: function(width, height, classNameweatherIconBackgroundColor, classNameDay, classNameNight,
+				weatherProphetData_8_15) {
+				this.width = width + "%";
+				this.height = height + "px";
+				this.iconMarginTop = (height - 31) / 2 + "px";
+				this.weatherProphetData_8_15 = weatherProphetData_8_15;
+				this.dayWeatherClassName = classNameDay;
+				this.nightWeatherClassName = classNameNight;
+				this.classNameweatherIconBackgroundColor = classNameweatherIconBackgroundColor;
+				this.setTime();
+				this.setBackgroundColor();
+			},
+			setTime: function() {
+				let newWeek = new Date(this.weatherProphetData_8_15.recodedata).getDay();
+				if (newWeek == 0) {
+					this.week = "周日";
+				}
+				if (newWeek == 1) {
+					this.week = "周一";
+				}
+				if (newWeek == 2) {
+					this.week = "周二";
+				}
+				if (newWeek == 3) {
+					this.week = "周三";
+				}
+				if (newWeek == 4) {
+					this.week = "周四";
+				}
+				if (newWeek == 5) {
+					this.week = "周五";
+				}
+				if (newWeek == 6) {
+					this.week = "周六";
+				}
+				let newDay = new Date(this.weatherProphetData_8_15.recodedata).getDate();
+				this.day = newDay + "日";
+				this.timestamp = new Date(this.weatherProphetData_8_15.recodedata).getTime();
+				this.month = this.utils.timeTodate('m',this.timestamp);
+			},
+			setBackgroundColor: function() {
+				if (this.classNameweatherIconBackgroundColor == "firstGradeBlue") {
+					this.timeBackgroundColor = "#2F5EB0";
+					this.weatherIconBackgroundColor = "#597EC0";
+				} else if (this.classNameweatherIconBackgroundColor == "fourGradeBlue") {
+					this.timeBackgroundColor = "#60B9E3";
+					this.weatherIconBackgroundColor = "#9ED2EC";
+				} else if (this.classNameweatherIconBackgroundColor == "threeGradeBlue") {
+					this.timeBackgroundColor = "#50A5F2";
+					this.weatherIconBackgroundColor = "#73B7F5";
+				} else if (this.classNameweatherIconBackgroundColor == "twoGradeBlue") {
+					this.timeBackgroundColor = "#427CE8";
+					this.weatherIconBackgroundColor = "#6896ED";
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	.date {
+		margin-top: 10px;
+		width: 100%;
+		height: 25px;
+		font-size: 14px;
+		font-family: "microsoft yahei";
+		color: white;
+
+	}
+
+	.weatherProphet8_15 {
+		margin-left: 7%;
+		width: 86%;
+		float: left;
+
+	}
+
+	.cardContaine {
+		line-height: 40px;
+		height: 70px;
+		margin-top: 2%;
+		border-radius: 10px;
+		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
+		background: rgba(0, 0, 0, 0.1);
+	}
+
+	.weatherAndTemperatureAndWinddirectionAndSpeedClass {
+		width: 100%;
+		height: 100%;
+	}
+
+	.time {
+		width: 16%;
+		height: 40px;
+		line-height: 40px;
+		text-align: center;
+		font-size: 16px;
+		font-family: "microsoft yahei";
+		float: left;
+		color: white;
+		border-radius: 10px 0px 0px 10px;
+		opacity:0.8
+	}
+
+	.weatherIcon {
+		height: 40px;
+		float: left;
+		background: rgba(0, 0, 0, 0.1);
+		opacity:0.8
+	}
+
+	.dayWeatherIconTotalClass {
+		width: 32px;
+		height: 31px;
+		margin-left: 3px;
+		margin-top: 3px;
+		float: left;
+	}
+
+	.nightWeatherIconTotalClass {
+		width: 31px;
+		height: 31px;
+		margin-top: 3px;
+		margin-right: 4px;
+		float: right;
+	}
+
+	.weather {
+		width: 15%;
+		height: 100%;
+		float: left;
+		text-align: center;
+		color: white;
+		font-family: "microsoft yahei";
+	}
+
+	.temperature {
+		width: 14%;
+		height: 100%;
+		float: left;
+		text-align: center;
+		font-size: 10px;
+		color: white;
+		font-family: "microsoft yahei";
+	}
+
+	.temperature span {
+		color: red;
+	}
+
+	.winddirection {
+		width: 16%;
+		height: 100%;
+		float: left;
+		text-align: center;
+		color: white;
+		font-family: "microsoft yahei";
+	}
+
+	.speed {
+		width: 17%;
+		height: 100%;
+		float: left;
+		color: white;
+		text-align: center;
+		font-family: "microsoft yahei";
+	}
+
+
+	/*white30第一行*/
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYang {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat 0px 2px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYangYun {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -79px 2px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYun {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -160px 2px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYangYunShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -239px 2px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYangShanDianShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -318px 2px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYangShanDianShuiShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -400px 2px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShuiXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -480px 2px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -560px 2px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunLiangShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -639px 2px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sanHengGang {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -719px 2px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_liangDianLiangQuan {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -800px 2px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunShuiShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -880px 2px;
+	}
+
+
+	/*white30第二行*/
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunSanShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat 0px -78px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunSiShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -79px -78px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunWuShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -160px -78px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunLiuShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -239px -78px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYangYunXueXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -318px -78px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -400px -78px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunXueXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -480px -78px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunSanXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -560px -78px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunSiXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -639px -78px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sanHengGang {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -719px -78px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sanDianSanQuan {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -800px -78px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunXueXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -880px -78px;
+	}
+
+
+	/* white30第三行*/
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sanHengGang {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat 0px -157px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_boLang {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -79px -157px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sYouJianTou {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -160px -157px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShuiShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -239px -157px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunSanShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -318px -157px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunSiShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -400px -157px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunWuShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -480px -157px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunLiuShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -560px -157px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunXueXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -639px -157px;
+	}
+
+	/*  white30第四行*/
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunSanXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat 0px -237px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunSiXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -79px -237px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_s {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -160px -237px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sShangJianTou {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -239px -237px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sYouJianTou {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -31p8x -237px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShuiShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -400px -237px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunXueXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -480px -237px;
+	}
+
+
+	/*white30第五行*/
+
+		.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yueLiang {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat 0px -318px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yueLiangYun {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -79px -318px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYueLiangYun {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -160px -318px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yueLiangYunShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -239px -318px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShanDianShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -318px -318px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yueShanDianShuiShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -400px -318px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShuiXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -480px -318px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -560px -318px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShuiShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -639px -318px;
+	}
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunShuiShui {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -880px -318px;
+	}
+
+
+	/* white30第六行*/
+
+	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yueLiangYunXueXue {
+		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -318px -396px;
+	}
+</style>

components/weatherCalendarCardList8_15/weatherCalendarCardList8_15.vue

@@ -0,0 +1,117 @@
+<template>
+	<view class="zt">
+		<div class="container" :style="{'width':width,'height':height}">
+			<div class="leftInnerMatrix">
+				<div v-for="(item,index) in weatherProphetData_8_15" :key="index">
+					<weatherCalendarCard8_15 ref="weatherCalendarCard8_15"></weatherCalendarCard8_15>
+				</div>
+			</div>
+		</div>
+	</view>
+</template>
+
+<script>
+	import weatherCalendarCard8_15 from '../../components/weatherCalendarCardList8_15/weatherCalendarCard8_15/weatherCalendarCard8_15.vue'
+	export default {
+		components: {
+			"weatherCalendarCard8_15": weatherCalendarCard8_15
+		},
+		data: function() {
+			return {
+				width: "",
+				height: "",
+				weatherProphetData_8_15: [],
+				// innerMatrixWidth: "",
+				// innerMatrixHeight: "",
+				weatherIconsDay: [],
+				weatherIconsNight: [],
+				classNameDay: "",
+				classNameNight: "",
+				classNameWeatherIconBackgroundColor: []
+
+			}
+		},
+		created: function() {
+
+		},
+		methods: {
+			getWeatherData: function(width, height, weatherProphetData_8_15) {			
+				this.width = width + "%";
+				this.height = height + "px";
+				this.weatherProphetData_8_15 = weatherProphetData_8_15;
+				this.weatherIconsDay = [];
+				this.weatherIconsNight = [];
+				for (let i = 0; i < weatherProphetData_8_15.length; i++) {
+					this.weatherIconsDay.push(weatherProphetData_8_15[i].weather1);
+					this.weatherIconsNight.push(weatherProphetData_8_15[i].weather2);
+				}
+				this.commitData();
+			},
+			commitData: async function() {
+				let _this = this;
+				await uni.request({
+					url: "http://49.4.78.143:8081/WeatherfdController/weatherInformationChangePictureName?model=weatherTemperatureWindSpeedCardList_8_15,weatherTemperatureWindSpeedCard_8_15,white30&weatherInformation=" +
+						this.weatherIconsDay, //仅为示例，并非真实接口地址。
+					data: {
+
+					},
+					method: 'GET',
+					success: function(res) {
+						//_this.classNameDay = "";
+						_this.classNameDay = res.data;
+					},
+					fail: (e) => {
+						console.log(e);
+					}
+				});
+				await uni.request({
+					url: "http://49.4.78.143:8081/WeatherfdController/weatherInformationChangePictureName?model=weatherTemperatureWindSpeedCardList_8_15,weatherTemperatureWindSpeedCard_8_15,white30&weatherInformation=" +
+						this.weatherIconsNight, //仅为示例，并非真实接口地址。
+					data: {
+
+					},
+					method: 'GET',
+					success: function(res) {
+						//_this.classNameNight = "";
+						_this.classNameNight = res.data;
+						_this.setWeatherIcon();
+					},
+					fail: (e) => {
+						console.log(e);
+					}
+				});
+				
+			},
+			setWeatherIcon: function() {
+				this.classNameWeatherIconBackgroundColor = [];
+				for (let i = 0; i < this.classNameDay.length; i++) {
+					if (this.classNameDay[i].toLowerCase().search("taiyang") != -1) {
+						this.classNameWeatherIconBackgroundColor.push("firstGradeBlue");
+					} else if (this.classNameDay[i].toLowerCase().search("xue") != -1) {
+						this.classNameWeatherIconBackgroundColor.push("fourGradeBlue");
+					} else if (this.classNameDay[i].toLowerCase().search("shui") != -1 || this.classNameDay[i].toLowerCase().search(
+							"sanhenggang") != -1) {
+						this.classNameWeatherIconBackgroundColor.push("threeGradeBlue");
+					} else {
+						this.classNameWeatherIconBackgroundColor.push("twoGradeBlue");
+					}
+				}
+				this.pushWeatherData();
+			},
+			pushWeatherData: function() {
+				
+				for (let i = 0; i < this.weatherProphetData_8_15.length; i++) {
+					this.$nextTick(function(){
+						this.$refs.weatherCalendarCard8_15[i].getWeatherData(this.width, this.height,
+							this.classNameWeatherIconBackgroundColor[i], this.classNameDay[i], this.classNameNight[i], this.weatherProphetData_8_15[
+								i]);
+					})
+					
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

components/weatherTemperatureWindSpeedCard_7/WeatherTemperatureWindSpeedCard_7.vue

@@ -0,0 +1,433 @@
+<template>
+	<div>
+		<div class="weatherDay7" :style="{'margin-left':marginleft}">
+			<div :key="index" class="weatherParentComponent" :style="{'width':width7}" @tap="changeTap(item)" v-for="(item,index) in weatherProphetData_7">
+				<div :class="[classNameweatherIconBackgroundColor,bgcolor]" :style="{'width':assemblyWidth,'height':assemblyHeight}">
+					<div class="assembly_time l" :style="{'margin-left':timeleft}"> {{ utils.timeTodate('d', item.recodedata) }}日</div>
+					<!--<div class="today_time l">今天</div>-->
+					<div :class="[classNameDay[index],assembly_1_page]" :style="{'margin-left':tuleft}"></div>
+					<div :class="[classNameNight[index],assembly_2_page]" :style="{'margin-left':tuleft}"></div>
+					<div class="assembly_weather l" :style="{'margin-left':weatherleft}">{{item.weather}}</div>
+					<div class="assembly_temperature l" :style="{'margin-left':temperleft}">{{item.temperature2}}~{{item.temperature1}}℃</div>
+					<div class="assembly_wind l" :style="{'margin-left':weatherleft}">{{item.speed1}}km/h</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+</template>
+
+<script>
+	import utils from '@/components/tools/shoyu-date/utils.filter.js';
+	export default {
+		data: function() {
+			return {
+				classNameweatherIconBackgroundColor: [],
+				bgcolor: "lightBlue",
+				assemblyWidth: '',
+				assemblyHeight: '',
+				weatherProphetData_7: [],
+				assembly_1_page: "assembly_1",
+				classNameDay: [],
+				classNameNight: [],
+				assembly_2_page: "assembly_2",
+				weatherIconsDay:[],
+				weatherIconsNight:[],
+				// 直接使用需要进行声明
+				utils: utils,
+				// 直接使用需要进行声明 End
+				timestamp: "",
+				windowWidth:"",
+				windowHeight:"",
+				marginleft:'',
+				width7:'',
+				timeleft:'',
+				tuleft:'',
+				weatherleft:'',
+				temperleft:'',
+			}
+		},
+		created: function() {
+			this.windowWidth=uni.getSystemInfoSync().windowWidth;
+			this.windowHeight=uni.getSystemInfoSync().windowHeight;
+			if(this.windowWidth>=768){
+				this.marginleft="5%";
+				this.width7="150px";
+				this.timeleft="30px";
+				this.tuleft="62px";
+				this.weatherleft="27px"
+				this.temperleft="28px";
+			}else{
+				this.marginleft="20px";
+			}
+		},
+		methods: {
+			changeTap: function(item) {
+				let itemString = JSON.stringify(item);
+				this.$emit("listenEven", itemString);
+			},
+			setDate: function() {
+				// var newDate = new Date(this.weatherProphetData_40.recodedata).Format("dd");
+				// this.newDate = newDate;
+				this.timestamp = new Date(this.weatherProphetData_7.recodedata).getTime();
+				this.newDate = this.utils.timeTodate('d', this.timestamp);
+				// this.timestamp = 1582560000000;
+				// console.log(this.timestamp);
+			},
+			weatherInformationCard: function(assemblyWidth, assemblyHeight, classNameDay, classNameNight, weatherProphetData_7) {
+				//console.log(this.weatherProphetData_7);
+				let _this = this;
+				this.assemblyWidth = assemblyWidth + "px";;
+				this.assemblyHeight = assemblyHeight + "%";
+				this.classNameDay = classNameDay;
+				this.classNameNight = classNameNight;
+				this.weatherIconsDay = [];
+				this.weatherIconsNight = [];
+				this.weatherProphetData_7 = weatherProphetData_7;
+				for (let i = 0; i < _this.weatherProphetData_7.length; i++) {
+					_this.weatherIconsDay.push(_this.weatherProphetData_7[i].weather1);
+					_this.weatherIconsNight.push(_this.weatherProphetData_7[i].weather2);
+					// console.log(_this.weatherIconsNight)
+				}
+				uni.request({
+					url: 'http://49.4.78.143:8081/WeatherfdController/weatherInformationChangePictureName?model=weatherProphet_7,weatherDataTable_7,white30&weatherInformation=' +
+						this.weatherIconsDay,
+					success: function(res) {
+						_this.classNameDay = [];
+						for (let i = 0; i < res.data.length; i++) {
+							_this.classNameDay.push(res.data[i]);
+						}
+					},
+					fail: (e) => {
+						_this.tips = "网络错误"
+					},
+				});
+				uni.request({
+					url:'http://49.4.78.143:8081/WeatherfdController/weatherInformationChangePictureName?model=weatherProphet_7,weatherDataTable_7,white30&weatherInformation=' + this.weatherIconsNight,
+					success: function(res) {
+						_this.classNameNight = [];
+						for (let i = 0; i < res.data.length; i++) {
+							_this.classNameNight.push(res.data[i]);
+						}
+						// console.log(_this.classNameNight)
+					},
+					fail: (e) => {
+						_this.tips = "网络错误"
+					},
+				});
+				this.setDate();
+				this.changeTap(this.weatherProphetData_7[0]);
+
+			},
+		},
+	}
+</script>
+
+<style scoped="scoped">
+	.assembly_time {
+		height: 23px;
+		width: 102px;
+		border: 0px;
+		font-size: 16px;
+		color: #FFF;
+		text-decoration: none;
+		font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
+		text-align: center;
+		margin-top: 30px;
+	}
+
+	.assembly_2 {
+		height: 31px;
+		width: 31px;
+		border: 0px;
+		margin-top: 30px;
+		margin-left: 36px;
+		/*	background-image: url(../week/white30.png);*/
+		background-position: 0px 0px;
+	}
+
+	.assembly_1 {
+		height: 31px;
+		width: 31px;
+		border: 0px;
+		margin-top: 30px;
+		margin-left: 36px;
+		/*background-image: url(../week/white30.png);*/
+		background-position: 0px 80px;
+	}
+
+	.assembly_weather {
+		height: 23px;
+		width: 102px;
+		border: 0px;
+		font-size: 16px;
+		color: #FFF;
+		text-decoration: none;
+		font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
+		text-align: center;
+		margin-top: 30px;
+		font-weight: bold;
+	}
+
+	.assembly_temperature {
+		height: 23px;
+		width: 102px;
+		border: 0px;
+		font-size: 16px;
+		color: #FFF;
+		text-decoration: none;
+		font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
+		text-align: center;
+		margin-top: 40px;
+		font-weight: bold;
+
+	}
+
+	.assembly_wind {
+		height: 23px;
+		width: 102px;
+		border: 0px;
+		font-size: 16px;
+		color: #FFF;
+		text-decoration: none;
+		font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
+		text-align: center;
+		margin-top: 40px;
+		font-weight: normal;
+	}
+
+	.weatherParentComponent {
+		border-right: 1rpx solid white;
+		border-left: 1rpx solid white;
+		/* border:1px solid white; */
+		
+
+	}
+
+	.weatherDay7 {
+		width: 90%;
+		height: 380px;
+		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
+		background: rgba(0, 0, 0, 0.1);
+		float: left;
+		/* margin: 0px auto; */
+		/* border-radius: 20px; */
+		margin-top: 5px;
+		margin-left: 20px;
+		margin-bottom: 20px;
+		margin-right: 20px;
+		display: -webkit-box;
+		overflow-x: auto;
+		/* position:fixed; */
+		/*适应苹果*/
+		-webkit-overflow-scrolling: touch;
+
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_taiYang {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -560px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYun {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -160px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_taiYang {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_taiYangYun {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYun {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -160px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_taiYangYunShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -238px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_taiYangShanDianShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_taiYangShanDianShuiShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -396px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunShuiXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -480px 0px;
+	}
+	.weatherProphet_7_weatherDataTable_7_white30_yunLiangShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -638px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_sanHengGang {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -718px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_liangDianLiangQuan {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -798px 0px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYunShuiShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -880px 0px;
+	}
+
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunSanShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYunSiShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -76px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYunWuShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -152px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYunLiuShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -232px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_taiYangYunXueXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -396px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30__yunXueXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -476px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunSanXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -556px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYunSiXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -638px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_sanHengGang {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -718px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_sanDianSanQuan {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -798px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYunXueXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -876px -76px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_sanHengGang {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px -152px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_boLang {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -76px -152px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_sYouJianTou {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -152px -152px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunShuiShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -232px -152px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunSanShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px -152px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYunSiShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -396px -152px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYunWuShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -476px -152px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYunLiuShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -556px -152px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunXueXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -638px -152px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunSanXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px -232px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYunSiXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -76px -232px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_s {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -152px -232px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_sShangJianTou {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -232px -232px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_sYouJianTou {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px -232px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunShuiShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -396px -232px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunXueXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -476px -232px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yueLiang {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px -314px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yueLiangYun {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -76px -314px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYueLiangYun {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -152px -314px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yueLiangYunShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -232px -314px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunShanDianShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px -314px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yueShanDianShuiShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -396px -314px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunShuiXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -481px -318px;
+	}
+	.weatherProphet_7_weatherDataTable_7_white30_yunShuiShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -638px -314px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yunYunShuiShui {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -876px -314px;
+	}
+
+	.weatherProphet_7_weatherDataTable_7_white30_yueLiangYunXueXue {
+		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px -396px;
+	}
+</style>

components/zy-search/zy-search.vue

@@ -0,0 +1,283 @@
+<template name="zy-search">
+	<view>
+		<view class="search">
+			<!-- #ifdef APP-PLUS -->
+				<image src="../../static/zy-search/voice.svg" mode="aspectFit" @click="startRecognize()" class="voice-icon"></image>
+			<!-- #endif -->
+			<template v-if="isFocus">
+				<input maxlength="20" focus type="text" value="" confirm-type="search" @confirm="searchStart()" placeholder="请输入关键词搜索" v-model.trim="searchText"/>
+			</template>
+			<template v-else>
+				<input maxlength="20" type="text" value="" confirm-type="search" @confirm="searchStart()" placeholder="请输入关键词搜索" v-model.trim="searchText"/>
+			</template>
+			<image src="../../static/zy-search/search.svg" mode="aspectFit" @click="searchStart()" class="search-icon"></image>
+		</view>
+		<view :class="'s-' + theme" v-if="hList.length > 0">
+			<view class="header">
+				历史记录
+				<image src="../../static/zy-search/delete.svg" mode="aspectFit" @click="delhistory"></image>
+			</view>
+			<view class="list">
+				<view v-for="(item,index) in hList" :key="index" @click="keywordsClick(item)">{{item}}</view>
+			</view>
+		</view>
+		<view :class="'wanted-' + theme" v-if="showWant">
+			<view class="header">猜你想搜的</view>
+			<view class="list">
+				<view v-for="(item,index) in hotList" :key="index" @click="keywordsClick(item)">{{item}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		name:"zy-search",
+		props:{
+			isFocus:{	//是否自动获取焦点
+				type: Boolean,
+				default: false
+			},
+			theme:{	//选择块级显示还是圆形显示
+				type: String,
+				default: 'block'
+			},
+			showWant:{	//是否展示推荐菜单
+				type: Boolean,
+				default: false
+			},
+			hotList: { //推荐列表数据
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			speechEngine: { //语音引擎=>讯飞:iFly,百度:'baidu'
+				type: String,
+				default: 'baidu'
+			}
+		},
+		data() {
+			return {
+				searchText:'',								//搜索关键词
+				hList:uni.getStorageSync('search_cache')		//历史记录
+			};
+		},
+		methods: {
+			searchStart: function() {	//触发搜索
+				let _this = this;
+				if (_this.searchText == '') {
+					uni.showToast({
+						title: '请输入关键字',
+						icon: 'none',
+						duration: 1000
+					});
+				}else{
+					_this.$emit('getSearchText', _this.searchText);
+					uni.getStorage({
+						key:'search_cache',
+						success(res){
+							let list = res.data;
+							if(list.length > 5){
+								for(let item of list){
+									if(item == _this.searchText){
+										return;
+									}
+								}
+								list.pop();
+								list.unshift(_this.searchText);
+							}else{
+								for(let item of list){
+									if(item == _this.searchText){
+										return;
+									}
+								}
+								list.unshift(_this.searchText);
+							}
+							_this.hList = list;
+							uni.setStorage({
+								key: 'search_cache',
+								data: _this.hList
+							});
+						},
+						fail() {
+							_this.hList = [];
+							_this.hList.push(_this.searchText);
+							uni.setStorage({
+								key: 'search_cache',
+								data: _this.hList
+							});
+							_this.$emit('getSearchText', _this.searchText);
+						}
+					})
+				}
+			},
+			keywordsClick (item) {	//关键词搜索与历史搜索
+				this.searchText = item;
+				this.searchStart();
+			},
+			delhistory () {		//清空历史记录
+				this.hList = [];
+				uni.setStorage({
+					key: 'search_cache',
+					data: []
+				});
+			},
+			startRecognize: function() {	//语音输入
+				let _this = this;
+				let options = {};
+				options.engine = _this.speechEngine;
+				options.punctuation = false; // 是否需要标点符号 
+				options.timeout = 10 * 1000;
+				plus.speech.startRecognize(options, function(s) {
+					_this.searchText = _this.searchText + s;
+				});
+			}
+		}
+	}
+</script>
+
+<style  scoped>
+	.search{
+		width: 640upx;
+		margin: 30upx auto 0;
+		position: relative;
+		input{
+			background-color: #F7F7F7;
+			padding: 10upx 74upx;
+			font-size: 28upx;
+			border-radius: 50upx;
+		}
+		.voice-icon{
+			width: 36upx;
+			height: 36upx;
+			padding: 16upx 20upx 16upx 0;
+			position: absolute;
+			left: 16upx;
+			top: 4upx;
+			z-index: 10;
+		}
+		.search-icon{
+			width: 36upx;
+			height: 36upx;
+			padding: 16upx 20upx 16upx 0;
+			position: absolute;
+			right: 0;
+			top: -2upx;
+			z-index: 10;
+		}
+	}
+	.s-block{
+		margin-top: 30upx;
+		.header{
+			font-size: 32upx;
+			padding: 30upx;
+			position: relative;
+			image{
+				width: 36upx;
+				height: 36upx;
+				padding: 10upx;
+				position: absolute;
+				right: 40upx;
+				top: 24upx;
+			}
+		}
+		.list{
+			display: flex;
+			flex-wrap: wrap;
+			view{
+				width: 50%;
+				color: #8A8A8A;
+				font-size: 28upx;
+				box-sizing: border-box;
+				text-align: center;
+				padding: 20upx 0;
+				border-top: 2upx solid #FFF;
+    			border-left: 2upx solid #FFF;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				background-color: #F7F7F7;
+			}
+		}
+	}
+	.s-circle{
+		margin-top: 30upx;
+		.header{
+			font-size: 32upx;
+			padding: 30upx;
+			border-bottom: 2upx solid #F9F9F9;
+			position: relative;
+			image{
+				width: 36upx;
+				height: 36upx;
+				padding: 10upx;
+				position: absolute;
+				right: 40upx;
+				top: 24upx;
+			}
+		}
+		.list{
+			display: flex;
+			flex-wrap: wrap;
+			padding: 0 30upx 20upx;
+			view{
+				padding: 8upx 30upx;
+				margin: 20upx 30upx 0 0;
+				font-size: 28upx;
+				color: #8A8A8A;
+				background-color: #F7F7F7;
+				box-sizing: border-box;
+				text-align: center;
+				border-radius: 20upx;
+			}
+		}
+	}
+	.wanted-block{
+		margin-top: 30upx;
+		.header{
+			font-size: 32upx;
+			padding: 30upx;
+		}
+		.list{
+			display: flex;
+			flex-wrap: wrap;
+			view{
+				width: 50%;
+				color: #8A8A8A;
+				font-size: 28upx;
+				box-sizing: border-box;
+				text-align: center;
+				padding: 20upx 0;
+				border-top: 2upx solid #FFF;
+				border-left: 2upx solid #FFF;
+				background-color: #F7F7F7;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+	.wanted-circle{
+		margin-top: 30upx;
+		.header{
+			font-size: 32upx;
+			padding: 30upx;
+		}
+		.list{
+			display: flex;
+			flex-wrap: wrap;
+			padding: 0 30upx 20upx;
+			view{
+				padding: 8upx 30upx;
+				margin: 20upx 30upx 0 0;
+				font-size: 28upx;
+				color: #8A8A8A;
+				background-color: #F7F7F7;
+				box-sizing: border-box;
+				text-align: center;
+				border-radius: 20upx;
+			}
+		}
+	}
+</style>

main.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import App from './App'
+import cuCustom from './colorui/components/cu-custom.vue'
+Vue.component('cu-custom',cuCustom)
+Vue.config.productionTip = false
+
+App.mpType = 'app'
+
+import Common from './common/common.js';
+Vue.prototype.common = Common;
+const app = new Vue({
+    ...App
+})
+app.$mount()

manifest.json

@@ -0,0 +1,111 @@
+{
+    "name" : "云端气象采集预测",
+    "appid" : "__UNI__68611FF",
+    "description" : "用来采集气象数据信息",
+    "versionName" : "1.0.1",
+    "versionCode" : 101,
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {
+                "idfa" : true
+            },
+            /* SDK配置 */
+            "sdkConfigs" : {
+                "ad" : {}
+            },
+            "icons" : {
+                "android" : {
+                    "hdpi" : "unpackage/res/icons/1187084.png",
+                    "xhdpi" : "unpackage/res/icons/1187084.png",
+                    "xxhdpi" : "unpackage/res/icons/1187084.png",
+                    "xxxhdpi" : "unpackage/res/icons/1187084.png"
+                },
+                "ios" : {
+                    "iphone" : {
+                        "app@2x" : "unpackage/res/icons/1187084.png",
+                        "app@3x" : "unpackage/res/icons/1187084.png",
+                        "spotlight@2x" : "unpackage/res/icons/1187084.png",
+                        "spotlight@3x" : "unpackage/res/icons/1187084.png",
+                        "settings@2x" : "unpackage/res/icons/1187084.png",
+                        "settings@3x" : "unpackage/res/icons/1187084.png",
+                        "notification@2x" : "unpackage/res/icons/1187084.png",
+                        "notification@3x" : "unpackage/res/icons/1187084.png"
+                    },
+                    "appstore" : "unpackage/res/icons/1187084.png",
+                    "ipad" : {
+                        "app" : "unpackage/res/icons/1187084.png",
+                        "app@2x" : "unpackage/res/icons/1187084.png",
+                        "proapp@2x" : "unpackage/res/icons/1187084.png",
+                        "spotlight" : "unpackage/res/icons/1187084.png",
+                        "spotlight@2x" : "unpackage/res/icons/1187084.png",
+                        "settings" : "unpackage/res/icons/1187084.png",
+                        "settings@2x" : "unpackage/res/icons/1187084.png",
+                        "notification" : "unpackage/res/icons/1187084.png",
+                        "notification@2x" : "unpackage/res/icons/1187084.png"
+                    }
+                }
+            }
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    }
+}

pages.json

@@ -0,0 +1,80 @@
+{
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages	
+		{
+		    "path" : "components/login/Login",
+		    "style" : {
+				"navigationBarTitleText": "登录"
+			}
+		},
+		{
+			"path": "pages/index/Index",
+			"style": {
+				"navigationBarTitleText": "按小时气象预测"
+			}
+		}
+	    ,{
+            "path" : "pages/weatherProphet7/WeatherProphet7",
+            "style" : {
+				"navigationBarTitleText": "7天气象预测"
+			}
+        }
+        ,{
+            "path" : "pages/weatherProphet8_15/WeatherProphet8_15",
+            "style" : {
+            	"navigationBarTitleText": "8-15天气象预测"
+            }
+        },{
+            "path" : "pages/weatherProphet40/WeatherProphet40",
+            "style" : {
+            	"navigationBarTitleText": "40天气象预测"
+            }
+        },
+		{
+			"path": "components/addressSelect/AddressSelect",
+			"style": {
+				"navigationBarTitleText": "地址选择"
+			}
+		}
+        ,{
+            "path" : "components/detail/Detail",
+            "style" : {}
+        }
+		
+		
+        
+    ],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "气象预测项目手机版",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8",
+		"navigationStyle": "custom"
+	},
+	"tabBar": {
+	    "color": "#DEDFE3",
+	    "selectedColor": "white",
+	    "borderStyle": "black",
+	    "backgroundColor": "#20587D",
+	    "list": [{
+	        "pagePath": "pages/index/Index",
+/* 	        "iconPath": "static/logo1.png",
+	        "selectedIconPath": "static/logo.png", */
+	        "text": "现在"
+	    }, {
+	        "pagePath": "pages/weatherProphet7/WeatherProphet7",
+/* 	        "iconPath": "static/logo1.png",
+	        "selectedIconPath": "static/logo.png", */
+	        "text": "7天"
+	    }, {
+	        "pagePath": "pages/weatherProphet8_15/WeatherProphet8_15",
+/* 	        "iconPath": "static/logo1.png",
+	        "selectedIconPath": "static/logo.png", */
+	        "text": "8-15天"
+	    }, {
+	        "pagePath": "pages/weatherProphet40/WeatherProphet40",
+/* 	        "iconPath": "static/logo1.png",
+	        "selectedIconPath": "static/logo.png", */
+	        "text": "40天"
+	    }]
+	}
+}

pages/index/Index.vue

@@ -0,0 +1,638 @@
+<template>
+	<view class="content">
+		<!-- <image class="logo" src="/static/logo.png"></image> -->
+		<!--导航栏-->
+		<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 class="ThermometerCard">
+			<!-- <scroll-view scroll-y scroll-with-animation  class="scrollList"> -->
+			<ThermometerCard ref="thermometerCard" @listenEven="weatherDayNightSwitch"></ThermometerCard>
+			<!-- </scroll-view> -->
+		</div>
+		<div class="weatherDetails">
+			<div class="weatherText" :style="{'margin-left':marginleftBiao}"><strong>气象指标</strong></div>
+			<div class="detailsText" @tap="common.navTo('/components/detail/Detail')">详情ㅤ〉</div>
+		</div>
+		<view v-if="weatherSwitch==true">
+			<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="[index%4==3?'border-right':'border-left']"> -->
+						<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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{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':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="[index%4==3?'border-right':'border-left']"> -->
+						<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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{weatherProphetData_1[0].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>{{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>
+
+</template>
+
+<script>
+	import utils from '../../components/tools/shoyu-date/utils.filter.js';
+	// 直接使用办法
+	import ThermometerCard from '../../components/thermometerCard/ThermometerCard.vue'
+	/* 	import thermometerCard from '../../components/thermometerCard/ThermometerCard.vue' */
+	export default {
+		components: {
+			"ThermometerCard": ThermometerCard
+		},
+		data: function() {
+			return {
+				utils: utils,
+				margintop:'',
+				margintopThree:'',
+				messageTop:'',
+				// 直接使用需要进行声明
+				// 直接使用需要进行声明 End
+				date: '2020/03/27 08:00:00',
+				timestamp: "",
+				address: '',
+				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: '夜阵风速',
+				}],
+				modalName: null,
+				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,
+				windPowerStationId: "MHS_FDC",
+				windPowerStations: [],			
+                width:'',
+			    height:'',
+				windowWidth:"",
+				windowHeight:"",
+				ziHeight:'',
+				fontSize:'',
+				xianHeight:'',
+				marginleftBiao:'',
+			}
+		},
+		created: function() {
+			//this.pushWindPowerStationNameToSessionStorage("麻黄山");
+			this.address = this.getWindPowerStationNameToSessionStorage();
+			this.windPowerStationId=uni.getStorageSync('windPowerStationId');
+			this.windowWidth=uni.getSystemInfoSync().windowWidth;
+			this.windowHeight=uni.getSystemInfoSync().windowHeight;
+			// this.getTodayWeatherData();
+			this.$nextTick(function(){
+				this.getWeatherData();
+			});
+			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="10px";
+				this.margintopThree="10px";
+				this.fontSize="14px";
+				this.xianHeight="92px";
+				this.marginleftBiao="26px";
+			}
+			this.height = parseInt(uni.getSystemInfoSync().windowHeight - 500) + "px"
+			this.width = parseInt(uni.getSystemInfoSync().windowWidth) + "px"
+			//alert(this.address);
+			
+		},		
+		onShow() {
+			this.windPowerStationId=uni.getStorageSync('windPowerStationId');
+			this.address = this.getWindPowerStationNameToSessionStorage();
+			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.socketTaskHour = uni.connectSocket({
+					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
+					url: "ws://49.4.78.143:8081/websocket/pageNumber_3/functionNumber_2",
+					success(data) {
+						console.log("websocket连接成功");
+					},
+				});
+				// 今天数据
+				this.socketTaskToday = uni.connectSocket({
+					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
+					url: "ws://49.4.78.143:8081/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天
+						for (let i = 0; i < _this.weatherProphetDataAll_1.length; i++) {
+							if (_this.weatherProphetDataAll_1[i].windpowerstationid == _this.windPowerStationId) {
+								_this.weatherProphetData_1.push(_this.weatherProphetDataAll_1[i]);
+							}
+						}
+						console.log(_this.weatherProphetData_1)
+						_this.$nextTick(function(){
+							console.log(_this.$refs.thermometerCard);
+							_this.$refs.thermometerCard.getHourWeatherData("90","360",_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);
+						_this.weatherProphetData_17Hour = [];
+						//判断风场id 40天
+						for (let i1 = 0; i1 < _this.weatherProphetDataAll_17Hour.length; i1++) {
+							if (_this.weatherProphetDataAll_17Hour[i1].windpowerstationid == _this.windPowerStationId) {
+								_this.weatherProphetData_17Hour.push(_this.weatherProphetDataAll_17Hour[i1]);
+							}
+						}
+						// console.log(_this.weatherProphetData_17Hour)
+						_this.$nextTick(function(){
+							console.log(_this.$refs.thermometerCard);
+							_this.$refs.thermometerCard.getHourWeatherData("90","360",_this.weatherProphetData_17Hour,_this.weatherProphetData_1);
+						})
+							
+						
+					});
+				})
+				// 这里仅是事件监听【如果socket关闭了会执行】
+				this.socketTaskHour.onClose(() => {
+					console.log("已经被关闭了")
+				})
+				this.socketTaskToday.onClose(() => {
+					console.log("已经被关闭了")
+				})
+
+
+
+			},
+			weatherDayNightSwitch: function(flag) {
+				if (flag == "day") {
+					this.weatherSwitch = true;
+				} else if (flag == "night") {
+					this.weatherSwitch = false;
+				}
+			}
+
+
+		},
+		onLoad() {
+			let that = this;
+			// 时间转换为时间戳
+			// 如果是时间戳直接传递，无需转换					
+			//that.timestamp = new Date(this.date).getTime();
+			//console.log(that.timestamp);
+			this.address = this.getWindPowerStationNameToSessionStorage();					
+			// this.getHourWeatherData();
+		}
+	}
+</script>
+
+<style>
+	page {
+		height: 100%;
+		background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#2F698E), color-stop(0.15, #5C757C), to(#004C90));
+		overflow-x: hidden;
+		overflow-y: hidden;
+	}
+
+	.ThermometerCard {
+		margin-top: -10px;
+		height: 400px;
+		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: 210px;
+		// white-space: nowrap;
+	}
+
+	.content {
+
+		/* display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center; */
+	}
+
+	.weatherDetails {
+		width: 100%;
+		height: 25rpx;
+		float: left;
+
+	}
+.wenZhi{
+	color: white;
+}
+	.weatherText {
+		width: 40%;
+		height: 10px;
+		float: left;
+		font-size: 14px;
+		color: white;
+		margin-left: 26px;
+		margin-top: -15px;
+	}
+
+	.detailsText {
+		width: 40%;
+		height: 10px;
+		float: right;
+		font-size: 14px;
+		color: white;
+		margin-right: 5%;
+		text-align: right;
+		margin-top: -15px;
+	}
+
+	.logo {
+		height: 200rpx;
+		width: 200rpx;
+		margin-top: 200rpx;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 50rpx;
+	}
+
+	.icon {
+		font-size: 50upx;
+	}
+
+	.cuIcon {
+		border-right: 1px solid white;
+		height: 92px;
+
+	}
+
+	.cu-listAll {
+		width: 390px;
+		height: 100px;
+		display: -webkit-flex;
+		display: flex;
+		justify-content: space-around;
+		margin-top: -20px;
+	}
+
+	.cu-listAllTwo {
+		width: 390px;
+		height: 100px;
+		display: -webkit-flex;
+		display: flex;
+		justify-content: space-around;
+		margin-top: 10px;
+	}
+
+	.cu-listAllTThree {
+		width: 390px;
+		height: 100px;
+		display: -webkit-flex;
+		display: flex;
+		justify-content: space-around;
+		margin-top: 10px;
+	}
+
+	.cu-listAllTFour {
+		width: 390px;
+		height: 100px;
+		display: -webkit-flex;
+		display: flex;
+		justify-content: space-around;
+		margin-top: 10px;
+		// justify-content: space-around;
+	}
+
+	.cuIcon1 {
+		margin-top: 20px;
+	}
+</style>

pages/weatherProphet7/WeatherProphet7.vue

@@ -0,0 +1,573 @@
+<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>

pages/weatherProphet8_15/WeatherProphet8_15.vue

@@ -0,0 +1,480 @@
+<template>
+	<view>
+		<!--导航栏-->
+		<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>
+		<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" @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=scrollposition class="scrollList" :style="{'height':scrollHeight}" @scroll="listScrollEvent">
+				<weatherCalendarCardList8_15 ref="weatherCalendarCardList8_15"></weatherCalendarCardList8_15>
+			</scroll-view>
+		</div>
+	</view>
+</template>
+
+<script>
+	import weatherCalendarCardList8_15 from '../../components/weatherCalendarCardList8_15/weatherCalendarCardList8_15.vue'
+	import uCharts from '../../components/tools/u-charts/u-charts.js';
+	export default {
+		components: {
+			"weatherCalendarCardList8_15": weatherCalendarCardList8_15
+		},
+		data: function() {
+			return {
+				windowWidth:'',
+				windowHeight:'',
+				scrollHeight:'',
+				width:'',
+				height:'',
+				choiceFontSize:"",
+			    choiceMarginTop:"",
+				xAxisFontSize:"",
+				seriesTextSize:"",
+				cardWidth:"",
+				cardHeight:"",
+				isToday: false,
+				scrollposition: 0,
+				windPowerStationId: "SBQ_FDC",
+				weatherProphetDataAll_8_15: [],
+				weatherProphetData_8_15: [],
+				socket: "",
+				address: '',
+				startDate: "",
+				isCard: false,
+				option: '',
+				endDate: "",
+				cWidth: '',
+				cHeight: '',
+				pixelRatio: 1,
+				realFeelFlag: true,
+				temperatureFlag: false,
+				speedFlag: false,
+				tabCur: 0,
+				mainCur: 0
+			};
+		},
+		created: function() {
+			// this.pushWindPowerStationNameToSessionStorage("麻黄山");
+			this.address = this.getWindPowerStationNameToSessionStorage();
+			this.windPowerStationId=uni.getStorageSync('windPowerStationId');
+			this.getWeatherData();
+			this.windowWidth=uni.getSystemInfoSync().windowWidth;
+			this.windowHeight=uni.getSystemInfoSync().windowHeight;
+			if(this.windowWidth>=768){
+				this.width="99";
+				this.choiceFontSize="22px";
+				this.choiceMarginTop="27.5px";
+				this.xAxisFontSize=18;
+				this.seriesTextSize=18;
+				this.cardWidth=100;
+				this.cardHeight=130;
+				this.scrollHeight=(this.windowHeight-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.windowHeight-360)+"px";
+			}
+			//alert(this.address);
+		},
+		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 = uni.connectSocket({
+					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
+					url: "ws://49.4.78.143:8081/websocket/pageNumber_4/functionNumber_1",
+					success(data) {
+						console.log("websocket连接成功");
+					},
+				});
+				this.socketTask.onOpen((res) => {
+					console.log("WebSocket连接正常打开中...！");
+					this.is_open_socket = true;
+
+					// 注：只有连接正常打开中 ，才能正常收到消息
+					this.socketTask.onMessage((res) => {
+						_this.weatherProphetDataAll_8_15 = res.data;
+						_this.weatherProphetDataAll_8_15 = JSON.parse(res.data);
+						_this.weatherProphetData_8_15 = [];
+
+						//判断风场id 7天
+						for (let i = 0; i < _this.weatherProphetDataAll_8_15.length; i++) {
+							if (_this.weatherProphetDataAll_8_15[i].windpowerstationid == _this.windPowerStationId) {
+								_this.weatherProphetData_8_15.push(_this.weatherProphetDataAll_8_15[i]);
+							}
+						}
+						_this.$refs.weatherCalendarCardList8_15.getWeatherData(_this.width,"350", _this.weatherProphetData_8_15);
+						_this.getWeatherDataUchart();
+
+					})
+				})
+				this.socketTask.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();
+			},
+			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();
+			},
+			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;
+						}
+						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;
+						}
+						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;
+						}
+						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: 0,
+						max: 35,
+					},
+					width: _self.cWidth * _self.pixelRatio,
+					height: _self.cHeight * _self.pixelRatio,
+					extra: {
+						line: {
+							type: 'straight'
+						}
+					}
+				});
+			},
+			uChartsScrollEvent(e) {
+				this.scrollposition = e.detail.scrollLeft;
+				// let scrollposition2 = scrollposition*0.98;
+			},
+			listScrollEvent(e) {
+				this.scrollposition = e.detail.scrollTop;
+			},
+			closeSocket: function() {
+				this.socket.onclose;
+			},
+			openSocket: function() {
+				this.socket.onOpen;
+			}
+		},
+		onLoad() {
+			this.address = this.getWindPowerStationNameToSessionStorage();
+			this.cWidth = uni.upx2px(1300);
+			this.cHeight = uni.upx2px(350);
+			this.getServerData();
+			// this.getHourWeatherData();
+		}
+	}
+</script>
+
+<style>
+	page {
+		height: 100%;
+		background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#2F698E), color-stop(0.15, #5C757C), to(#004C90));
+		overflow-x: hidden;
+	}
+
+	.cardContenter {
+		border-radius: 20px;
+		margin: 20px auto;
+		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: 1300upx;
+		height: 350upx;
+		float: left;
+	}
+
+	.charts {
+		width: 1300upx;
+		height: 350upx;
+	}
+
+	.choice {
+		width: calc(60% - 5px);
+		// margin-top: -55px;
+		height: 100upx;
+		float: right;
+	}
+
+	.realFeelButtonWhite {
+		height: 37px;
+		// margin-top: 3px;
+		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;
+		// margin-top: 3px;
+		line-height: 44px;
+		color: #DEDEDE;
+		font-size: 15px;
+		font-family: "microsoft yahei";
+		float: right;
+	}
+
+	.temperatureButtonWhite {
+		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;
+	}
+
+	.temperatureButtonBlack {
+		height: 37px;
+		// margin-top: 3px;
+		line-height: 44px;
+		margin-left: 20px;
+		color: #DEDEDE;
+		font-size: 15px;
+		font-family: "microsoft yahei";
+		float: right;
+	}
+
+	.speedButtonWhite {
+		height: 37px;
+		// margin-top: 3px;
+		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;
+		// margin-top: 3px;
+		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: 330px;
+		// white-space: nowrap;
+	}
+</style>

uni.scss

@@ -0,0 +1,76 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333;//基本色
+$uni-text-color-inverse:#fff;//反色
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:24rpx;
+$uni-font-size-base:28rpx;
+$uni-font-size-lg:32rpx;
+
+/* 图片尺寸 */
+$uni-img-size-sm:40rpx;
+$uni-img-size-base:52rpx;
+$uni-img-size-lg:80rpx;
+
+/* Border Radius */
+$uni-border-radius-sm: 4rpx;
+$uni-border-radius-base: 6rpx;
+$uni-border-radius-lg: 12rpx;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 10px;
+$uni-spacing-row-base: 20rpx;
+$uni-spacing-row-lg: 30rpx;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 8rpx;
+$uni-spacing-col-base: 16rpx;
+$uni-spacing-col-lg: 24rpx;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:40rpx;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:36rpx;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:30rpx;

unpackage/dist/build/app-plus/__uniappview.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var __UniViewStartTime__ = Date.now();
+      document.addEventListener('DOMContentLoaded', function() {
+          document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
+      })
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title>View</title>
+    <link rel="stylesheet" href="view.css" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="__uniappes6.js"></script>
+    <script src="view.umd.min.js"></script>
+    <script src="app-view.js"></script>
+  </body>
+
+</html>