Skip to content

D
DoorLock
Commit 3b4bc53c by 朱建香
Options

首页优化

parent 9b947d6b
Showing with 274 additions and 22 deletions
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment