风门动画

pages.json

@@ -174,8 +174,12 @@
     },
     {
     	"path" : "pages/home/detail/autodoor/autodoor"
-    }
-  ],
+    },
+      
+      {
+      	"path" : "pages/home/detail/doorAnimate/doorAnimate"
+      }
+    ],
   "globalStyle": {
     "mp-alipay": {
       /* 支付宝小程序特有相关 */

pages/home/detail/autodoor/autodoor.vue

@@ -49,78 +49,8 @@
         <div class="button-grid flcard" v-if="this.TabCur == 'window'">
           <u-button type="primary" shape="circle" text="设定面积"></u-button>
         </div>
-        <div class="flcard" v-if="this.TabCur == 'gate' && this.ndoorcount == 2">
-		<div class="door-container">
-          <div style="">
-			  <div class="door">
-			    <div
-			      class="left_door"
-			      id="leftdoor"
-			      :animation="animationData"
-			    ></div>
-			    <div
-			      class="right_door"
-			      id="rightdoor"
-			     :animation="animationData"
-			    ></div>
-			  </div>
-			  <div>
-				  <video src="" controls></video>
-			  </div>
-		  </div>
-          <div class="door">
-            <div
-              class="left_door"
-              id="leftdoor1"
-			  :animation="animationData"
-            ></div>
-            <div
-              class="right_door"
-              id="rightdoor1"
-			  :animation="animationData"
-            ></div>
-          </div>
-		  </div>
-        </div>
-		<div class="flcard" v-if="this.TabCur == 'gate' && this.ndoorcount == 3">
-		<div class="door-container">
-		  <div class="door">
-		    <div
-		      class="left_door"
-		      id="leftdoor"
-		      :animation="animationData"
-		    ></div>
-		    <div
-		      class="right_door"
-		      id="rightdoor"
-		     :animation="animationData"
-		    ></div>
-		  </div>
-		  <div class="door">
-		    <div
-		      class="left_door"
-		      id="leftdoor1"
-			  :animation="animationData"
-		    ></div>
-		    <div
-		      class="right_door"
-		      id="rightdoor1"
-			  :animation="animationData"
-		    ></div>
-		  </div>
-		  <div class="door">
-		    <div
-		      class="left_door"
-		      id="leftdoor1"
-			  :animation="animationData"
-		    ></div>
-		    <div
-		      class="right_door"
-		      id="rightdoor1"
-			  :animation="animationData"
-		    ></div>
-		  </div>
-		  </div>
+        <div class="flcard" v-if="this.TabCur == 'gate'">
+			<doorAnimate :gatestate1="frontGateStatus" :gatestate2="rearGateStatus" :height="height" :doorcount="ndoorcount"></doorAnimate>
 		</div>
         <div
           class="flcard"
@@ -312,6 +242,7 @@
 
 <script>
 import api from "@/api/api";
+import doorAnimate from "../doorAnimate/doorAnimate.vue"
 export default {
   data() {
     return {
@@ -329,6 +260,7 @@ export default {
       show: false, //密码弹窗是否显示
       password: "", //控制设备密码
       paramcode: "", //控制字段
+	  height:"200px",
       popupStyle: {
         // 弹窗样式
         "background-color": "#fff",
@@ -351,11 +283,12 @@ export default {
     this.name = name;
     this.TabCur = type;
     this.getShowList();
+	ths.ndoorcount = 2
   },
-  components: {},
+  components: {doorAnimate},
   onShow() {
     var animation = uni.createAnimation({
-      duration: 400,
+      duration: 1000,
       timingFunction: "linear",
     });
     this.animation = animation;
@@ -456,7 +389,7 @@ export default {
         devicetype: this.deviceType,
         paramcode: this.paramcode,
         password: pass,
-        value: "",
+        value: true,
       };
       new Promise((resolve, reject) => {
         api
@@ -496,6 +429,12 @@ export default {
       }else if( !this.rearGateStatus){
 		this.doorRotate()
 	  };
+	  
+	    if (this.frontGateStatus) {
+	  	this.door1Rotate()
+	    }else if (this.rearGateStatus){
+	  	this.door1Rotate()
+	    };
     },
     //风门关闭
     closeDoor() {
@@ -552,50 +491,6 @@ passwordPopup {
   background-color: #ffffff;
   margin-bottom: 5rpx;
 }
-.door-container {
-}
-.door {
-  background-image: url(../../../../static/door.png);
-  background-size: 100% 100%;
-  width: 200px;
-  height: 200px;
-  /* display: inline-block; */
-  vertical-align: top;
-  /* height: 24vh; */
-  flex: 1;
-  margin-right: 10px; /* 可以根据需要调整间距 */
-}
-.left_door {
-  margin-left: 8%;
-  margin-top: 8%;
-  width: 42%;
-  height: calc(19.5vh + 3px);
-  box-sizing: border-box;
-  float: left;
-  z-index: 1;
-  transition: all 4s ease;
-  background-image: url(../../../../static/left.png);
-  background-size: 100% 100%;
-}
-.right_door {
-    margin-top: 8%;
-  width: 42%;
-  height: calc(19.5vh + 3px);
-  box-sizing: border-box;
-  float: left;
-  z-index: 1;
-  transition: all 4s ease;
-  background-image: url(../../../../static/right.png);
-  background-size: 100% 100%;
-}
-.left_door {
-  transform-origin: left center;
-  border-right: 1px solid rgb(8, 8, 8);
-}
-.right_door {
-  transform-origin: right center;
-  border-left: 1px solid rgb(8, 8, 8);
-}
 .additional-div {
   grid-column: span 2; /* 让附加内容跨越三列 */
   display: flex;

pages/home/detail/doorAnimate/doorAnimate.vue

@@ -0,0 +1,176 @@
+<template>
+	<view style="width:100%;height:100%">
+			<div class="door-container">
+			  <div style="" v-show="doorcount==1">
+		            <div class="door1" v-show="doorcount==1" :style="{height:height}">
+		              <div class="left_door" v-bind:class="gatestate1 == '1' || gatestate1 == '开启' || gatestate1 == '打开' || gatestate1 == 'true'?'open_left':'close_left'" id="leftdoor1"></div>
+		              <div class="right_door" v-bind:class="gatestate1 == '1' || gatestate1 == '开启' || gatestate1 == '打开' || gatestate1 == 'true'?'open_right':'close_right'" id="rightdoor1"></div>
+		            </div>
+		            </div>
+			  <div style="" v-show="doorcount==2">
+		            <div class="door2" v-show="doorcount==2" :style="{height:height}">
+		              <div class="left_door" v-bind:class="gatestate1 == '1' || gatestate1 == '开启' || gatestate1 == '打开' || gatestate1 == 'true'?'open_left':'close_left'" id="leftdoor2"></div>
+		              <div class="right_door" v-bind:class="gatestate1 == '1' || gatestate1 == '开启' || gatestate1 == '打开' || gatestate1 == 'true'?'open_right':'close_right'" id="rightdoor2"></div>
+		            </div>
+		            <div class="door2" v-show="doorcount==2" :style="{height:height}">
+		              <div class="left_door" v-bind:class="gatestate2 == '1' || gatestate2 == '开启' || gatestate2 == '打开' || gatestate2 == 'true'?'open_left':'close_left'" id="leftdoor3"></div>
+		              <div class="right_door" v-bind:class="gatestate2 == '1' || gatestate2 == '开启' || gatestate2 == '打开' || gatestate2 == 'true'?'open_right':'close_right'" id="rightdoor3"></div>
+		            </div>
+		    </div>
+			  <div style="" v-show="doorcount==3">
+		            <div class="door3" v-show="doorcount==3" :style="{height:height}">
+		              <div class="left_door" v-bind:class="gatestate1 == '1' || gatestate1 == '开启' || gatestate1 == '打开' || gatestate1 == 'true'?'open_left':'close_left'" id="leftdoor4"></div>
+		              <div class="right_door" v-bind:class="gatestate1 == '1' || gatestate1 == '开启' || gatestate1 == '打开' || gatestate1 == 'true'?'open_right':'close_right'" id="rightdoor4"></div>
+		            </div>
+		            <div class="door3" v-show="doorcount==3" :style="{height:height}">
+		              <div class="left_door" v-bind:class="gatestate2 == '1' || gatestate2 == '开启' || gatestate2 == '打开' || gatestate2 == 'true'?'open_left':'close_left'" id="leftdoor5"></div>
+		              <div class="right_door" v-bind:class="gatestate2 == '1' || gatestate2 == '开启' || gatestate2 == '打开' || gatestate2 == 'true'?'open_right':'close_right'" id="rightdoor5"></div>
+		            </div>
+		            <div class="door3" v-show="doorcount==3" :style="{height:height}">
+		              <div class="left_door" v-bind:class="gatestate3 == '1' || gatestate3 == '开启' || gatestate3 == '打开' || gatestate3 == 'true'?'open_left':'close_left'" id="leftdoor6"></div>
+		              <div class="right_door" v-bind:class="gatestate3 == '1' || gatestate3 == '开启' || gatestate3 == '打开' || gatestate3 == 'true'?'open_right':'close_right'" id="rightdoor6"></div>
+		            </div>
+		    </div>
+			  <div style="" v-show="doorcount==4">
+		            <div class="door4" v-show="doorcount==4" :style="{height:height}">
+		              <div class="left_door" v-bind:class="gatestate1 == '1' || gatestate1 == '开启' || gatestate1 == '打开' || gatestate1 == 'true'?'open_left':'close_left'" id="leftdoor7"></div>
+		              <div class="right_door" v-bind:class="gatestate1 == '1' || gatestate1 == '开启' || gatestate1 == '打开' || gatestate1 == 'true'?'open_right':'close_right'" id="rightdoor7"></div>
+		            </div>
+		            <div class="door4" v-show="doorcount==4" :style="{height:height}">
+		              <div class="left_door" v-bind:class="gatestate2 == '1' || gatestate2 == '开启' || gatestate2 == '打开' || gatestate2 == 'true'?'open_left':'close_left'" id="leftdoor8"></div>
+		              <div class="right_door" v-bind:class="gatestate2 == '1' || gatestate2 == '开启' || gatestate2 == '打开' || gatestate2 == 'true'?'open_right':'close_right'" id="rightdoor8"></div>
+		            </div>
+		            <div class="door4" v-show="doorcount==4" :style="{height:height}">
+		              <div class="left_door" v-bind:class="gatestate3 == '1' || gatestate3 == '开启' || gatestate3 == '打开' || gatestate3 == 'true'?'open_left':'close_left'" id="leftdoor9"></div>
+		              <div class="right_door" v-bind:class="gatestate3 == '1' || gatestate3 == '开启' || gatestate3 == '打开' || gatestate3 == 'true'?'open_right':'close_right'" id="rightdoor9"></div>
+		            </div>
+		            <div class="door4" v-show="doorcount==4" :style="{height:height}">
+		              <div class="left_door" v-bind:class="gatestate4 == '1' || gatestate4 == '开启' || gatestate4 == '打开' || gatestate4 == 'true'?'open_left':'close_left'" id="leftdoor10"></div>
+		              <div class="right_door" v-bind:class="gatestate4 == '1' || gatestate4 == '开启' || gatestate4 == '打开' || gatestate4 == 'true'?'open_right':'close_right'" id="rightdoor10"></div>
+		            </div>
+		    </div>
+		</div>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				height:"200px"
+			}
+		},
+        props:['gatestate1','gatestate2','gatestate3','gatestate4','doorcount'],
+		methods: {
+			
+		},
+		watch:{
+			doorcount(val){
+				if(val == 1){
+					this.height = "180px";
+				}
+				if(val == 2){
+					this.height = "180px";
+				}
+				if(val == 3){
+					this.height = "110px";
+				}
+				if(val == 4){
+					this.height = "180px";
+				}
+			}
+		},
+		onLoad(query) {
+		},
+	}
+</script>
+
+<style scoped>
+/*门里面*/
+div.door1 {
+  width: 60%;
+  float: left;
+  margin-left: 20%;
+  background-image: url(../../../../static/door.png);
+  background-size: 100% 100%;
+  perspective: 800px;
+}
+div.door2 {
+  width: 50%;
+  float: left;
+  background-image: url(../../../../static/door.png);
+  background-size: 100% 100%;
+  perspective: 800px;
+}
+div.door3 {
+  width: 33.3%;
+  float: left;
+  background-image: url(../../../../static/door.png);
+  background-size: 100% 100%;
+  perspective: 400px;
+}
+div.door4 {
+  width: 50%;
+  float: left;
+  background-image: url(../../../../static/door.png);
+  background-size: 100% 100%;
+  perspective: 800px;
+}
+/*左门/右门*/
+
+div.left_door {
+  top: 12%;
+  left:10%;
+  width: 40.5%;
+  height: 78%;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  position: absolute;
+  transition: all 2s ease;
+  background-image: url(../../../../static/left.png);
+  background-size: 100% 100%;
+}
+div.right_door {
+  top: 12%;
+  right: 10%;
+  width: 40.2%;
+  height: 78%;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  position: absolute;
+  transition: all 2s ease;
+  background-image: url(../../../../static/left.png);
+  background-size: 100% 100%;
+}
+div.left_door {
+  transform-origin: left center;
+  border-right: 1px solid rgb(8, 8, 8);
+}
+div.right_door {
+  transform-origin: right center;
+  border-left: 1px solid rgb(8, 8, 8);
+}
+.open_left{
+  transform: rotateY(100deg);
+}
+.open_right{
+  transform: rotateY(-100deg);
+}
+.close_left{
+  transform: rotateY(0);
+}
+.close_right{
+  transform: rotateY(0deg);
+}
+/*使用css变形功能
+
+    div.door:hover div.left_door{
+        transform:rotateY(100deg);
+    }
+
+    div.door:hover div.right_door{
+        transform:rotateY(-100deg);
+    }*/
+</style>