sisMobilePhone/components/weatherProphethomepage/weathercomponents/thermometerCard/ThermometerCard.vue

<template>
	<div>
		<div class="thermometerContainer" :style="{'width':width,'height':height}">
			<!-- <div class="container" :style="{'width':width,'height':height}"> -->
				<div class="time" v-if="module">
					0 实况
				</div>
				<div class="time" v-if="module==false">
					{{nowTime}} 实况
				</div>
				<div class="thermometerAndTemperature">
					<div class="temperature" v-if="module">
						0<span>℃</span>
					</div>
					<div class="temperature" v-if="module==false">
						{{weatherProphetData_17Hour[0].temperature}}<span>℃</span>
					</div>
					<div :class="[thermometerClassName,totalClassName]" style="transform: scale(0.80);margin-left: 28%;margin-top: -14%;">
					</div>
				</div>
				<div class="realFeelWindDirectionSpeed">
					<div class="realFeel" v-if="module">
						<div class="realFeelIcon"></div>&nbsp;体感温度：0℃
					</div>
					<div class="realFeel" v-if="module==false">
						<div class="realFeelIcon"></div>&nbsp;体感温度：{{weatherProphetData_17Hour[0].realfeel}}℃
					</div>
					<div class="windDirection" v-if="module">
						<div class="windDirectionIcon"></div>&nbsp;风向：0风
					</div>
					<div class="windDirection" v-if="module==false">
						<div class="windDirectionIcon"></div>&nbsp;风向：{{weatherProphetData_17Hour[0].winddirection}}风
					</div>
					<div class="speed" v-if="module">
						<div class="speedIcon"></div>&nbsp;风速：0km/h
					</div>
					<div class="speed" v-if="module==false">
						<div class="speedIcon"></div>&nbsp;风速：{{weatherProphetData_17Hour[0].speed}}km/h
					</div>
				</div>
				<div class="weatherDayTemperatureSunrise" v-show="weatherSwitch==true">
					<div class="dayTemperature">
						<div class="dayTemperatureIcon"></div>&nbsp;温度：{{weatherProphetData_1[0].temperature1}}℃
					</div>
					<div class="daySunrise">
						<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"  v-show="weatherSwitch==false">
					<div class="nightTemperature">
						<div class="nightTemperatureIcon"></div>&nbsp;温度：{{weatherProphetData_1[0].temperature2}}℃
					</div>
					<div class="nightSunrise">
						<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,
				module:true
			}
		},
		created: function() {
			let that = this;
			setInterval(function() {
				that.getNowTime();
			}, 1000);
			// 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) {
				this.module = false;
				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: 90%;
		height: 260px;
		/* background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
		background: rgba(0, 0, 0, 0.1); */
		background-color: #535252;
		float: left;
		margin: 0px auto;
		border-radius: 20px;
		margin-top: 1%;
		margin-left: 5%;
	}

	.container {
		width: 370px;
		height: 370px;
		margin: 0px auto;
	}

	.time {
		width: 100px;
		height: 30px;
		color: white;
		font-size: 16px;
		margin-left: 7%;
		margin-top: 3%;
		
		font-family: "microsoft yahei";
	}

	.thermometerAndTemperature {
		width: 100%;
		height: 150px;
	}

	.temperature {
		width: 100px;
		height: 100px;
		float: left;
		margin-top: 4.5%;
		margin-left: 5%;
		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: -6%;
		margin-left: 15px;
	}

	.realFeel {
		width: 150px;
		height: 40px;
		float: left;
		margin-left: 1.5%;
		margin-top: -5%;
		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: right;
		margin-right: 6%;
		margin-top: 4.5%;
		line-height: 40px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;
	}

	.windDirectionIcon {
		width: 20px;
		height: 20px;
		margin-top: 10px;
		margin-left: 10%;
		float: left;
		background: url(../../../../static/picture/thermometerCard/pic_tu_02.png) no-repeat;
	}

	.weatherDayTemperatureSunrise {
		width: 100%;
		height: 30px;
		font-size: 15px;
		margin-top: -5%;
		float: left;
	}
	
	
	.weatherDayAndNightButton{
		width: 35%;
		height: 20px;
		font-size: 14px;
		float: left;
		margin-left: 1%;
	}
	
	.dayButtonWhite{
		margin-left: 25%;
		text-align: center;
		line-height: 20px;
		width: 29%;
		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: 25%;
		line-height: 20px;
		text-align: center;
		width: 29%;
		height: 20px;
		color: #DEDEDE;
		font-size: 14px;
		font-family: "microsoft yahei";
		float: left;
	}
	.nightButtonWhite{
		margin-left: 5%;
		text-align: center;
		line-height: 20px;
		width: 29%;
		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: 5%;
		line-height: 20px;
		text-align: center;
		width: 29%;
		height: 20px;
		color: #DEDEDE;
		font-size: 14px;
		font-family: "microsoft yahei";
		float: left;
	}
	.dayTemperature {
		width: 26%;
		height: 40px;
		float: left;
		margin-left: 5.5%;
		margin-top: -10px;
		line-height: 40px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;
	}
	.daySunrise {
		width: 26%;
		height: 40px;
		float: left;
		margin-top: -10px;
		/* margin-left: -60px; */
		line-height: 40px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;
	}
	.weatherNightTemperatureSunrise {
		width: 100%;
		height: 30px;
		font-size: 15px;
		margin-top: -5%;
		float: left;
	}
	.nightTemperature {
		width: 26%;
		height: 40px;
		float: left;
		margin-left: 5.5%;
		margin-top: -10px;
		line-height: 40px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;
	}
	.nightSunrise {
		width: 26%;
		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-top: -2%;
		margin-left: 1.5%;
		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;
	}

	/* 25℃*/
	
	.thermometer_25 {
		background: url(../../../../static/picture/thermometerCard/thermometer/25C.png) no-repeat 0px 0px;
	}
	
	/* -25℃*/
	
	.thermometer_-25 {
		background: url(../../../../static/picture/thermometerCard/thermometer/-25C.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>