首页优化

dev/src/view/device/v_index.js

@@ -81,8 +81,10 @@ function init() {
             batteryState: '',
             //电量百分比
             batteryPercent: 100,
-            //响铃时间
-            ringingTime: null,
+            //消息时间
+            msgTime: null,
+            //消息文本提示
+            msgText: '',
             //门铃是否响起
             doorbellRingingFlag: false,
             ringTime: null,
@@ -110,6 +112,10 @@ function init() {
             opendoorRecordFlag: false,
             securityAlarmFlag: false,
             hijackAlarmFlag: false,
+            msgClass: "default_img",
+            warmingShowFlag: false,
+            normalApertureShow: false,
+            warmingApertureShow: false,
             //是否显示远程开门页面
             remoteOpendoorShowFlag: false,
             //远程开门密码
@@ -218,11 +224,17 @@ function init() {
             setBatteryPercent(percent){
             	this.batteryPercent = percent;
             },
-            getRingingTime(){
-            	return this.ringingTime;
+            getMsgTime(){
+            	return this.msgTime;
             },
-            setRingingTime(time){
-            	this.ringingTime = time
+            setMsgTime(time){
+            	this.msgTime = time
+            },
+            getMsgText(){
+            	return this.msgText;
+            },
+            setMsgText(text){
+            	this.msgText = text;
             },
             getDoorbellRingingFlag(){
             	return this.doorbellRingingFlag;
@@ -272,6 +284,30 @@ function init() {
             setLockInfo(info){
             	this.lockInfo = info;
             },
+            getMsgClass(){
+            	return this.msgClass;
+            },
+            setMsgClass(src){
+            	this.msgClass = src;
+            },
+            getWarmingShowFlag(){
+            	return this.warmingShowFlag;
+            },
+            setWarmingShowFlag(flag){
+            	this.warmingShowFlag = flag;
+            },
+            getNormalApertureShow(){
+            	return this.normalApertureShow;
+            },
+            setNormalApertureShow(flag){
+            	this.normalApertureShow = flag;
+            },
+            getWarmingApertureShow(){
+            	return this.warmingApertureShow;
+            },
+            setWarmingApertureShow(flag){
+            	this.warmingApertureShow = flag;
+            },
             getRemoteOpendoorShowFlag(){
             	return this.remoteOpendoorShowFlag;
             },
@@ -711,6 +747,16 @@ async function updateHistoryMap(self, historyRecord){
 		self.securityAlarmFlag = !response.notify.isReadFlag;
 		self.hijackAlarmFlag = !response.alarm.isReadFlag;
 		self.opendoorRecordFlag = !response.open.isReadFlag;
+		console.log(self.securityAlarmFlag);
+		if(self.hijackAlarmFlag == true){
+			//显示劫持报警
+			setMsgStatus(self, true, "hijack_img", false, true, moment(historyRecord.alarm,"YYYY-MM-DD hh:mm:ss").format("HH:mm"), Vue.t('device.hijackAlarm'));
+		}else if(self.securityAlarmFlag == true){
+			//显示安全报警
+			setMsgStatus(self, true, "securityAlarm_img", false, true, moment(historyRecord.notify,"YYYY-MM-DD hh:mm:ss").format("HH:mm"), Vue.t('device.securityAlarm'));
+		}else{
+			setMsgStatus(self, false, "default_img", false, false, '', '');
+		}
     }, () => {
     });
 }
@@ -883,6 +929,7 @@ async function sdsDataPorcessing(self, data){
 						        	self.setValueRemoteOpendoor(false);
 									self.setRemoteOpendoorDisabledFlag(true);
 									self.setRemoteOpendoorShowFlag(false);
+									setMsgStatus(self, false, "default_img", false, false, '', '');
 									window.clearTimeout(self.remoteTime);
 									uComponents.hideCommLoading(self);
 						        }
@@ -890,6 +937,7 @@ async function sdsDataPorcessing(self, data){
 						}else{
 							self.setValueRemoteOpendoor(false);
 							self.setRemoteOpendoorDisabledFlag(true);
+							setMsgStatus(self, false, "default_img", false, false, '', '');
 						}
 					break;
 				}
@@ -921,7 +969,8 @@ function setBellRing(self, time){
 	let now = moment(new Date(), "YYYY-MM-DD hh:mm:ss");
 	time = moment(time, "YYYY-MM-DD hh:mm:ss");
 	if(now.diff(time,'seconds') < config.ringBell_timeout && now.diff(time,'seconds') >= 0){
-		self.setRingingTime(now.format("HH:mm"));
+		self.setMsgTime(now.format("HH:mm"));
+		self.setMsgText(Vue.t('device.doorLockRinging'));
 		ringBell(self);
 	}
 }
@@ -934,19 +983,44 @@ function setRemoteOpendoor(self, time){
 	if(now.diff(time,'seconds') < config.remote_timeout && now.diff(time,'seconds') >= 0){
 		self.setValueRemoteOpendoor(true);
 		self.setRemoteOpendoorDisabledFlag(false);
+		setMsgStatus(self, false, "remoteOpendoor_img", true, false, time.format("HH:mm"), Vue.t('device.remoteOpendoor'));
+//		//设置当前为普通状态
+//		self.setWarmingShowFlag(false);
+//		//更换icon
+//		self.setMsgIconSrc("../../resources/image/green_remoteOpendoor_icon.png");
+//		//开启普通动画效果
+//		self.setNormalApertureShow(true);
+//		self.setMsgTime(time.format("HH:mm"));
+//		self.setMsgText(Vue.t('device.remoteOpendoor'));
 		setTimeout(function(){
 			self.setValueRemoteOpendoor(false);
 			self.setRemoteOpendoorDisabledFlag(true);
+			setMsgStatus(self, false, "default_img", false, false, '', '');
 		},(config.remote_timeout-now.diff(time,'seconds'))*1000);
 	}
 }
 
+//设置信息提示
+function setMsgStatus(self, warmingShow, imgClass, normalAperture, warmingAperture, msgTime, msgText){
+	//设置当前为普通状态
+	self.setWarmingShowFlag(warmingShow);
+	//更换icon
+	self.setMsgClass(imgClass);
+	//开启普通动画效果
+	self.setNormalApertureShow(normalAperture);
+	self.setWarmingApertureShow(warmingAperture);
+	self.setMsgTime(msgTime);
+	self.setMsgText(msgText);
+}
+
+
 //设置远程开门样式
 function setRemoteOpenDoorLoading(self, status, text, buttonText){
 	switch(status){
 		case 1:
 			self.setValueRemoteOpendoor(false);
 			self.setRemoteOpendoorDisabledFlag(true);
+			setMsgStatus(self,false, "default_img", false, false, '', '');
 		case 2:
 			window.clearTimeout(self.remoteTime);
 			uComponents.changeCommButtonText(self, buttonText);
@@ -970,6 +1044,12 @@ function ringBell(self){
 //	},config.await_time*2);
 	if(self.getDoorbellRingingFlag() === false){
 		self.setDoorbellRingingFlag(true);
+		//设置当前为普通状态
+		self.setWarmingShowFlag(false);
+		//更换icon
+		self.setMsgClass("doorbell_img");
+		//开启普通动画效果
+		self.setNormalApertureShow(true);
 		let p = plus.audio.createPlayer(config.audioUrl);
 		self.timeout = setTimeout(() => {
 			p = plus.audio.createPlayer(config.audioUrl);
@@ -990,6 +1070,7 @@ function ringBell(self){
 				console.log(self.timeout);
 				self.timeout  = setTimeout(() => {
 					self.setDoorbellRingingFlag(false);
+					self.setNormalApertureShow(false);
 					console.log(self.timeout);
 				},1500);
 			},2000);
@@ -1169,6 +1250,7 @@ function remoteOpendoorTap(self){
 				        text: Vue.t('dialog.confirm'), callback: function () {
 				        	self.setValueRemoteOpendoor(false);
 							self.setRemoteOpendoorDisabledFlag(true);
+							setMsgStatus(self, false, "default_img", false, false, '', '');
 				        }
 				    });
 	    		}
@@ -1199,6 +1281,7 @@ function doorlockManageTap(self){
 //tap 门铃(停止响铃)
 function stopDoorbellRing(self){
 	self.setDoorbellRingingFlag(false);
+	self.setNormalApertureShow(false);
 	self.setRingTime(0);
 	window.clearInterval(self.time);
 	window.clearTimeout(self.timeout);
@@ -1307,6 +1390,7 @@ function confirmButtonTap(self){
 				        	self.setRemoteOpendoorShowFlag(false);
 				        	self.setValueRemoteOpendoor(false);
 							self.setRemoteOpendoorDisabledFlag(true);
+							setMsgStatus(self, false, "default_img", false, false, '', '');
 				        }
 				    });
 				}

web/lib/less/device/device.less

@@ -105,10 +105,15 @@
 				left: 0;
 				right: 0;
 				margin: 0 auto;
-				.bgImgSize(40px,40px,"green_doorbell_icon.png",center,cover);
+//				.bgImgSize(40px,40px,"green_default_icon.png",center,cover);
 				.transform-origin(center 5px);
 			}
 	    }
+	    .active{
+            p{
+                .animation(shake 1s linear infinite);
+            }
+        }
 	}
 	.doorbellTip{
 		position: absolute;
@@ -123,6 +128,38 @@
 	}
 }
 
+.default_img{
+    .bgImgSize(40px,40px,"green_default_icon.png",center,cover);
+}
+
+.doorbell_img{
+    .bgImgSize(40px,40px,"green_doorbell_icon.png",center,cover);
+}
+
+.remoteOpendoor_img{
+    .bgImgSize(40px,40px,"green_remoteOpendoor_icon.png",center,cover);
+    .animation(remoteOpendoor .5s steps(3) infinite);
+}
+
+.hijack_img{
+    .bgImgSize(40px,40px,"red_hijack_icon.png",center,cover);
+}
+
+.securityAlarm_img{
+    .bgImgSize(40px,40px,"red_securityAlarm_icon.png",center,cover);
+}
+
+.redDoorbellBg{
+    .linear-gradient(#ff0066,#fff,#fff,#fff,#ff0066);
+    background: linear-gradient(#ff0066,#fff,#fff,#fff,#ff0066);
+    .doorbellCircle{
+        background-color: #2f2437;
+        .doorbell{
+            border: 2px solid #ff0066;/*no*/
+        }
+    }
+}
+
 .active .doorbellCircle .doorbell{
 	&:before,
 	&:after{
@@ -131,11 +168,27 @@
 	&:after{
 		.animation-delay(-1s);
 	}
-	p{
-		.animation(shake 1s linear infinite);
-	}
 }
 
+.warmingActive .doorbellCircle .doorbell{
+    &:before,
+    &:after{
+        .animation(redAperture 2s linear infinite);
+    }
+    &:after{
+        .animation-delay(-1s);
+    }
+}
+
+.keyframes(redAperture,{
+    0%{
+        .box-shadow(0 0 0 0 rgba(255,0,102,1));
+    }
+    100%{
+        .box-shadow(0 0 0 10px rgba(255,0,102,0));
+    }
+});
+
 .keyframes(shake,{
 	0%,50%,100%{
 		.transform(rotate(0deg));
@@ -148,6 +201,15 @@
 	}
 });
 
+.keyframes(remoteOpendoor,{
+    from{
+        background-position: 0 0;
+    }
+    to{
+        background-position: -120px 0;
+    }
+});
+
 .batteryState{
 	text-align: right;
 	padding-right: 25px;

web/view/device/device.css

@@ -1044,15 +1044,15 @@ p {
   left: 0;
   right: 0;
   margin: 0 auto;
-  width: 1.067rem;
-  height: 1.067rem;
-  background: url("../../resources/image/green_doorbell_icon.png") no-repeat center;
-  -webkit-background-size: cover;
-  background-size: cover;
   -webkit-transform-origin: center 0.133rem;
   transform-origin: center 0.133rem;
 }
 
+.doorbellBg .doorbellCircle .active p {
+  -webkit-animation: shake 1s linear infinite;
+  animation: shake 1s linear infinite;
+}
+
 .doorbellBg .doorbellTip {
   position: absolute;
   bottom: 0.453rem;
@@ -1066,6 +1066,61 @@ p {
   margin-right: 0.267rem;
 }
 
+.default_img {
+  width: 1.067rem;
+  height: 1.067rem;
+  background: url("../../resources/image/green_default_icon.png") no-repeat center;
+  -webkit-background-size: cover;
+  background-size: cover;
+}
+
+.doorbell_img {
+  width: 1.067rem;
+  height: 1.067rem;
+  background: url("../../resources/image/green_doorbell_icon.png") no-repeat center;
+  -webkit-background-size: cover;
+  background-size: cover;
+}
+
+.remoteOpendoor_img {
+  width: 1.067rem;
+  height: 1.067rem;
+  background: url("../../resources/image/green_remoteOpendoor_icon.png") no-repeat center;
+  -webkit-background-size: cover;
+  background-size: cover;
+  -webkit-animation: remoteOpendoor 0.5s steps(3) infinite;
+  animation: remoteOpendoor 0.5s steps(3) infinite;
+}
+
+.hijack_img {
+  width: 1.067rem;
+  height: 1.067rem;
+  background: url("../../resources/image/red_hijack_icon.png") no-repeat center;
+  -webkit-background-size: cover;
+  background-size: cover;
+}
+
+.securityAlarm_img {
+  width: 1.067rem;
+  height: 1.067rem;
+  background: url("../../resources/image/red_securityAlarm_icon.png") no-repeat center;
+  -webkit-background-size: cover;
+  background-size: cover;
+}
+
+.redDoorbellBg {
+  background: -webkit-linear-gradient(#ff0066, #fff, #fff, #fff, #ff0066);
+  background: linear-gradient(#ff0066, #fff, #fff, #fff, #ff0066);
+}
+
+.redDoorbellBg .doorbellCircle {
+  background-color: #2f2437;
+}
+
+.redDoorbellBg .doorbellCircle .doorbell {
+  border: 2px solid #ff0066;
+}
+
 .active .doorbellCircle .doorbell:before,
 .active .doorbellCircle .doorbell:after {
   -webkit-animation: aperture 2s linear infinite;
@@ -1077,9 +1132,39 @@ p {
   animation-delay: -1s;
 }
 
-.active .doorbellCircle .doorbell p {
-  -webkit-animation: shake 1s linear infinite;
-  animation: shake 1s linear infinite;
+.warmingActive .doorbellCircle .doorbell:before,
+.warmingActive .doorbellCircle .doorbell:after {
+  -webkit-animation: redAperture 2s linear infinite;
+  animation: redAperture 2s linear infinite;
+}
+
+.warmingActive .doorbellCircle .doorbell:after {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+
+@-webkit-keyframes redAperture {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 #ff0066;
+    box-shadow: 0 0 0 0 #ff0066;
+  }
+
+  100% {
+    -webkit-box-shadow: 0 0 0 0.267rem rgba(255, 0, 102, 0);
+    box-shadow: 0 0 0 0.267rem rgba(255, 0, 102, 0);
+  }
+}
+
+@keyframes redAperture {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 #ff0066;
+    box-shadow: 0 0 0 0 #ff0066;
+  }
+
+  100% {
+    -webkit-box-shadow: 0 0 0 0.267rem rgba(255, 0, 102, 0);
+    box-shadow: 0 0 0 0.267rem rgba(255, 0, 102, 0);
+  }
 }
 
 @-webkit-keyframes shake {
@@ -1116,6 +1201,26 @@ p {
   }
 }
 
+@-webkit-keyframes remoteOpendoor {
+  from {
+    background-position: 0 0;
+  }
+
+  to {
+    background-position: -3.2rem 0;
+  }
+}
+
+@keyframes remoteOpendoor {
+  from {
+    background-position: 0 0;
+  }
+
+  to {
+    background-position: -3.2rem 0;
+  }
+}
+
 .batteryState {
   text-align: right;
   padding-right: 0.667rem;

web/view/device/index.html

@@ -28,13 +28,14 @@
         <div class="content"> 
             <div class="topCpnt">
             	<div v-show="lockId">
-	            	<v-touch tag="div" class="doorbellBg" v-bind:class="{ active: doorbellRingingFlag }" v-on:tap="onStopDoorbellRing()">
+	            	<v-touch tag="div" class="doorbellBg" v-bind:class="[{ redDoorbellBg: warmingShowFlag },{ active: normalApertureShow },{warmingActive: warmingApertureShow}]" v-on:tap="onStopDoorbellRing()">
 	                    <div class="doorbellCircle">
-	                        <div class="doorbell">
-	                            <p></p>
+	                        <div class="doorbell" v-bind:class="{ active: doorbellRingingFlag }">
+	                            <!--<img :src="msgIconSrc">-->
+	                            <p :class=" msgClass "></p>
 	                        </div>
 	                    </div>
-	                    <div class="doorbellTip"><span>{{ ringingTime }}</span>{{ ringingTime ? $t('device.doorLockRinging'):'' }}</div>
+	                    <div class="doorbellTip"><span>{{ msgTime }}</span>{{ msgText }}</div>
 	               	</v-touch>
 	               	<p class="batteryState" :class="[{yellowWarning: batteryPercent<=20},{redWarning: batteryPercent<10}]"><span v-html="batteryState" ></span><span>{{ batteryPercent }}%</span></p>
 	            </div>