[Feat 0000] 风窗动画完成 tabbar跳转bug解决

api/api.js

@@ -43,6 +43,18 @@ const apiService = {
 	controlDevice(params){
 		return http.put('/ventanaly-device/safety/ventanalyMonitorData/devicecontrol',params)
 	},
+	//根据设备id 查询该设备关联的视频流url 
+	getCameraById(params){
+		const urlParams = new URLSearchParams(params);
+		const url = '/safety/ventanalyCamera/list?' + urlParams.toString();
+		return http.get(url);
+	},
+	//如果上面这个接口返回code码  则使用这个接口获取url
+	getCameraByCode(params){
+		const urlParams = new URLSearchParams(params);
+		const url = '/ventanaly-device/camera/queryByCameraCode?' + urlParams.toString();
+		return http.get(url);
+	},
 	/**
 	 * 获取文件访问路径
 	 * @param avatar

pages.json

@@ -175,10 +175,13 @@
     {
     	"path" : "pages/home/detail/autodoor/autodoor"
     },
-      
       {
       	"path" : "pages/home/detail/doorAnimate/doorAnimate"
-      }
+      },
+	  {
+	  	"path" : "pages/home/detail/windowAnimate/windowAnimate"
+	  }
+	    
     ],
   "globalStyle": {
     "mp-alipay": {

pages/history/Historymodel.vue

@@ -0,0 +1,20 @@
+<template>
+	<view class="container">
+	  <!-- 建议放在外层 -->
+	  <u-navbar
+	    title="历史数据"
+	    @leftClick="devicemenuShow"
+	    :safeAreaInsetTop="false"
+	  >
+	    <view class="u-nav-slot" slot="left">
+	      <u-icon name="list" size="20"> </u-icon>
+	    </view>
+	  </u-navbar>
+	  </view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/history/history.vue

@@ -1,81 +1,60 @@
 <template name="history">
-	 <view class="container">
-		 <u-navbar
-		   title="历史数据"
-		   @leftClick="devicemenuShow"
-		   :safeAreaInsetTop="false"
-		   
-		 >
-		   <view class="u-nav-slot" slot="left">
-		     <u-icon name="list" size="20"> </u-icon>
-		   </view>
-		 </u-navbar>
-		 
-		<!-- <view v-show="menushow" class="menupage">
-		   <DeviceMenu @menuClick="menuClick"></DeviceMenu>
-		 </view> -->
-		 <view class="menupage">
-		   <u-picker mode="time" v-model="show" :params="params"></u-picker>
-		 </view>
-	 </view>
+  <view>
+    <!-- 其他页面内容 -->
+    <Historymodel></Historymodel>
+  </view>
 </template>
 
 <script>
-import DeviceMenu from "../home/devicemenu/devicemenu.vue";
+import Historymodel from "../history/Historymodel.vue";
+import { mapActions } from "vuex";
 import api from "@/api/api";
-	export default {
-		name: 'history',
-		components: {
-		  DeviceMenu,
-		},
-		watch: {
-		},
-		data() {
-			return {
-				menushow: false,
-				currentRoute:'',
-				TabCur: "gate",
-				params: {
-					year: true,
-					month: true,
-					day: true,
-					hour: false,
-					minute: false,
-					second: false
-				},
-				show: true
-			}
-		},
-		created() {
-			// 获取当前页面的路由路径
-			    const currentRoute = this.$route.path;
-			    
-			    // 检查路由路径是否包含 "home"
-			    if (currentRoute.includes('history')) {
-			      console.log('当前页面包含 "home"');
-			    } else {
-			      console.log('当前页面不包含 "home"');
-			    }
-		},
-		methods: {
-			devicemenuShow(e) {
-			  this.menushow = true;
-			},
-			menuClick(id) {
-			  this.TabCur = id;
-			  // 选择设备分类，重新获取数据
-			  this.menushow = false;
-			},
-		}
-	}
+export default {
+  components: {
+    Historymodel,
+  },
+  name: "history",
+  watch: {},
+  data() {
+    return {
+      showColum: {},
+    };
+  },
+  methods: {
+    
+  },
+  created() {
+    
+  },
+  onLoad() {},
+};
 </script>
 
 <style scoped>
-	.menupage {
-	  position: absolute;
-	  z-index: 2;
-	  top: 40rpx;
-	  height: calc(100% - 40rpx);
-	  width: 100%;
-	}
+.cu-list.grid > .cu-item {
+  padding: 0px 0px;
+}
+.line2-icon {
+  width: 60px;
+  height: 60px;
+}
+.tab-bar {
+  display: flex;
+  justify-content: space-around;
+  padding: 10px;
+  background-color: #eee;
+}
+
+.tab-bar view {
+  flex: 1;
+  text-align: center;
+  padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.tab-bar view.active {
+  background-color: #007bff;
+  color: #fff;
+}
 </style>

pages/home/detail/autodoor/autodoor.vue

@@ -1,5 +1,5 @@
 <template>
-  <view style="overflow: auto; height: 100%;">
+  <view style="overflow: auto; height: 100%">
     <!-- 建议放在外层 -->
     <u-navbar :title="name" @leftClick="backPage" :bgImage="backPic">
       <view class="u-nav-slot" slot="left">
@@ -46,106 +46,63 @@
             @click="showPasswordDialog('sameTimeClose')"
           ></u-button>
         </div>
-        <div class="button-grid flcard" v-if="this.TabCur == 'window'">
-          <u-button type="primary" shape="circle" text="设定面积"></u-button>
+        <div
+          class="button-grid flcard"
+          v-if="this.TabCur == 'window' && this.nwindownum == 1"
+        >
+          <u-button
+            type="primary"
+            shape="circle"
+            text="设定面积"
+            @click="showPasswordDialog('frontSetValue')"
+          ></u-button>
+        </div>
+        <div
+          class="button-grid flcard"
+          v-if="this.TabCur == 'window' && this.nwindownum == 2"
+        >
+          <u-button
+            type="primary"
+            shape="circle"
+            text="设定前窗面积"
+            @click="showPasswordDialog('frontSetValue')"
+          ></u-button>
+          <u-button
+            type="primary"
+            shape="circle"
+            text="设定后窗面积"
+            @click="showPasswordDialog('rearSetValue')"
+          ></u-button>
         </div>
         <div class="flcard" v-if="this.TabCur == 'gate'">
-			<doorAnimate :gatestate1="frontGateStatus" :gatestate2="rearGateStatus" :height="height" :doorcount="ndoorcount"></doorAnimate>
-		</div>
+          <doorAnimate
+            :gatestate1="frontGateStatus"
+            :gatestate2="rearGateStatus"
+            :videoURL="viedeoUrl"
+            :height="height"
+            :doorcount="ndoorcount"
+          ></doorAnimate>
+        </div>
         <div
           class="flcard"
           v-if="this.TabCur == 'window' && this.nwindownum == 1"
         >
-          <div class="window-container">
-            <div class="autowindow_new">
-              <div
-                class="window_new_1"
-                id="subwindowpic11"
-                
-              ></div>
-              <div
-                class="window_new_2"
-                id="subwindowpic12"
-                
-              ></div>
-              <div
-                class="window_new_3"
-                id="subwindowpic13"
-                
-              ></div>
-              <div
-                class="window_new_4"
-                id="subwindowpic14"
-                
-              ></div>
-              <div
-                class="window_new_5"
-                id="subwindowpic15"
-                
-              ></div>
-            </div>
-          </div>
+          <windowAnimate
+            :windowAngle="windowAngle"
+            :height="height"
+            :windowcount="nwindownum"
+          ></windowAnimate>
         </div>
         <div
           class="flcard"
           v-if="this.TabCur == 'window' && this.nwindownum == 2"
         >
-          <div class="window-container">
-            <div class="autowindow_new">
-              <div
-                class="window_new_1"
-                id="subwindowpic11"
-                
-              ></div>
-              <div
-                class="window_new_2"
-                id="subwindowpic12"
-                
-              ></div>
-              <div
-                class="window_new_3"
-                id="subwindowpic13"
-                
-              ></div>
-              <div
-                class="window_new_4"
-                id="subwindowpic14"
-                
-              ></div>
-              <div
-                class="window_new_5"
-                id="subwindowpic15"
-                
-              ></div>
-            </div>
-            <div class="autowindow_new" style="margin-top: 20px">
-              <div
-                class="window_new_1"
-                id="subwindowpic11"
-                
-              ></div>
-              <div
-                class="window_new_2"
-                id="subwindowpic12"
-                
-              ></div>
-              <div
-                class="window_new_3"
-                id="subwindowpic13"
-                
-              ></div>
-              <div
-                class="window_new_4"
-                id="subwindowpic14"
-                
-              ></div>
-              <div
-                class="window_new_5"
-                id="subwindowpic15"
-                
-              ></div>
-            </div>
-          </div>
+          <windowAnimate
+            :windowAngle="windowAngle"
+            :windowAngle1="windowAngle1"
+            :height="height"
+            :windowcount="nwindownum"
+          ></windowAnimate>
         </div>
         <div class="flcard">
           <div class="flex-container">
@@ -223,6 +180,14 @@
         :round="14"
         :safeAreaInsetBottom="false"
       >
+        <view style="margin-top: 15px" v-if="this.TabCur == 'window'"
+          >风窗面积：</view
+        >
+        <u-input
+          style="margin-top: 15px"
+          v-model="windowArea"
+          v-if="this.TabCur == 'window'"
+        ></u-input>
         <view style="margin-top: 15px">请输入密码：</view>
         <u-input
           style="margin-top: 15px"
@@ -242,7 +207,8 @@
 
 <script>
 import api from "@/api/api";
-import doorAnimate from "../doorAnimate/doorAnimate.vue"
+import doorAnimate from "../doorAnimate/doorAnimate.vue";
+import windowAnimate from "../windowAnimate/windowAnimate.vue";
 export default {
   data() {
     return {
@@ -250,17 +216,18 @@ export default {
       typeList: [], //展示字段
       itemId: "", // 初始化 itemId
       name: "", // 初始化 name
+      deviceid: "", //初始化设备id
       TabCur: "",
       checked: [],
       backPic: "url(../../../../static/topnavbar.png)",
       frontAngle: "", //风窗打开角度
       nwindownum: "", //风窗道数
-	  ndoorcount:'',//风门道数
+      ndoorcount: "", //风门道数
       deviceType: "", //设备类型
       show: false, //密码弹窗是否显示
       password: "", //控制设备密码
       paramcode: "", //控制字段
-	  height:"200px",
+      height: "200px",
       popupStyle: {
         // 弹窗样式
         "background-color": "#fff",
@@ -269,32 +236,24 @@ export default {
       },
       frontGateStatus: "", //前门状态
       rearGateStatus: "", //后门状态
-	  animationData:{},
-      animationDuration: 500, // 动画持续时间
+      windowAngle: 0, //前窗打开角度
+      windowAngle1: 0, //后窗打开角度
+      windowArea: "", //风窗面积设定值
+      viedeoUrl: "", //监控url
     };
   },
   onLoad(query) {
-    // query 中包含传递过来的id
-    const id = query.id;
-    const name = query.name;
-    const type = query.type;
     //保存id到 data 中 可以在整个页面中使用
-    this.itemId = id;
-    this.name = name;
-    this.TabCur = type;
+    this.itemId = query.id;
+    this.name = query.name;
+    this.TabCur = query.type;
     this.getShowList();
-	ths.ndoorcount = 2
-  },
-  components: {doorAnimate},
-  onShow() {
-    var animation = uni.createAnimation({
-      duration: 1000,
-      timingFunction: "linear",
-    });
-    this.animation = animation;
+    this.ndoorcount = 2;
   },
+  components: { doorAnimate, windowAnimate },
   created() {
     this.getDeviceInfo(this.itemId);
+    this.getVideoUrlById(this.itemId);
   },
   mounted() {
     this.startTimer();
@@ -304,7 +263,6 @@ export default {
       this.timer = setInterval(() => {
         // 执行定时任务
         this.getDeviceInfo(this.itemId);
-        console.log("定时任务执行中...");
       }, 5000);
     },
     stopTimer() {
@@ -363,15 +321,39 @@ export default {
               }
               this.nwindownum =
                 response.data.result.msgTxt[0].datalist[0].nwindownum;
-			  this.ndoorcount = 
-			    response.data.result.msgTxt[0].datalist[0].ndoorcount;
+              this.ndoorcount =
+                response.data.result.msgTxt[0].datalist[0].ndoorcount;
               this.deviceType =
                 response.data.result.msgTxt[0].datalist[0].deviceType;
-              // this.tableData.push(
-              //   response.data.result.msgTxt[0].datalist[0].readTime
-              // );
               this.frontGateStatus = this.tableData.frontGateOpen;
               this.rearGateStatus = this.tableData.rearGateOpen;
+              var maxarea = response.data.result.msgTxt[0].datalist[0].maxarea;
+              this.windowAngle =
+                (this.tableData.forntArea / maxarea) * 100 * 0.9;
+              this.windowAngle1 =
+                (this.tableData.rearArea / maxarea) * 100 * 0.9;
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    //获取监控URL 通过ID获取
+    getVideoUrlById(ID) {
+      let IDString = String(ID); // 将 ID 转换为字符串
+      new Promise((resolve, reject) => {
+        api
+          .getCameraById({ deviceid: IDString })
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.viedeoUrl = response.data.result.records[0].addr;
+              console.log(
+                response.data.result.records[0].addr,
+                "csssssssssssssss"
+              );
             } else {
               resolve(response);
             }
@@ -389,7 +371,7 @@ export default {
         devicetype: this.deviceType,
         paramcode: this.paramcode,
         password: pass,
-        value: true,
+        value: this.windowArea,
       };
       new Promise((resolve, reject) => {
         api
@@ -421,37 +403,6 @@ export default {
       // 发起请求后关闭密码输入弹窗
       this.show = false;
     },
-
-    //风门打开
-    openDoor() {
-      if (!this.frontGateStatus) {
-		this.doorRotate()
-      }else if( !this.rearGateStatus){
-		this.doorRotate()
-	  };
-	  
-	    if (this.frontGateStatus) {
-	  	this.door1Rotate()
-	    }else if (this.rearGateStatus){
-	  	this.door1Rotate()
-	    };
-    },
-    //风门关闭
-    closeDoor() {
-      if (this.frontGateStatus) {
-		this.door1Rotate()
-      }else if (this.rearGateStatus){
-		this.door1Rotate()
-	  };
-    },
-	doorRotate(){
-		this.animation.rotateY(100).step()
-		this.animationData = this.animation.export()
-	},
-	door1Rotate(){
-		this.animation.rotateY(-100).step()
-		this.animationData = this.animation.export()
-	}
   },
   destroyed() {
     // 停止定时器

pages/home/detail/doorAnimate/doorAnimate.vue

@@ -1,94 +1,330 @@
 <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>
+  <view style="width: 100%; height: 100%">
+    <div class="door-container">
+      <div style="display: flex" 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>
+          <video src="videoURL" controls style="width: 100%"></video>
+        </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>
+          <video src="videoURL" controls style="width: 100%"></video>
+        </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>
+          <video src="videoURL" controls style="width: 100%"></video>
+        </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>
+          <video src="videoURL" controls style="width: 100%"></video>
+        </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) {
-		},
-	}
+export default {
+  data() {
+    return {
+      height: "200px",
+    };
+  },
+  props: [
+    "gatestate1",
+    "gatestate2",
+    "gatestate3",
+    "gatestate4",
+    "doorcount",
+    "videoURL",
+  ],
+  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%;
+  width: 50%;
   float: left;
   margin-left: 20%;
   background-image: url(../../../../static/door.png);
@@ -120,7 +356,7 @@ div.door4 {
 
 div.left_door {
   top: 12%;
-  left:10%;
+  left: 10%;
   width: 40.5%;
   height: 78%;
   box-sizing: border-box;
@@ -152,16 +388,16 @@ div.right_door {
   transform-origin: right center;
   border-left: 1px solid rgb(8, 8, 8);
 }
-.open_left{
+.open_left {
   transform: rotateY(100deg);
 }
-.open_right{
+.open_right {
   transform: rotateY(-100deg);
 }
-.close_left{
+.close_left {
   transform: rotateY(0);
 }
-.close_right{
+.close_right {
   transform: rotateY(0deg);
 }
 /*使用css变形功能

pages/home/detail/windowAnimate/windowAnimate.vue

@@ -0,0 +1,242 @@
+<template>
+  <view style="width: 100%; height: 100%">
+    <div class="door-container">
+      <div style="display: flex" v-show="windowcount == 1">
+        <div
+          class="autowindow_new"
+          v-show="windowcount == 1"
+          :style="{ height: height }"
+        >
+          <div
+            class="window_new_1"
+            :style="`transform: rotateX(${windowAngle}deg)`"
+            id="subwindowpic11"
+          ></div>
+          <div
+            class="window_new_2"
+            :style="`transform: rotateX(${windowAngle}deg)`"
+            id="subwindowpic12"
+          ></div>
+          <div
+            class="window_new_3"
+            :style="`transform: rotateX(${windowAngle}deg)`"
+            id="subwindowpic13"
+          ></div>
+          <div
+            class="window_new_4"
+            :style="`transform: rotateX(${windowAngle}deg)`"
+            id="subwindowpic14"
+          ></div>
+          <div
+            class="window_new_5"
+            :style="`transform: rotateX(${windowAngle}deg)`"
+            id="subwindowpic15"
+          ></div>
+        </div>
+        <div style="flex: 1">
+          <video controls style="width: 100%"></video>
+        </div>
+      </div>
+      <div style="" v-show="windowcount == 2">
+        <div
+          class="autowindow_new"
+          v-show="windowcount == 2"
+          :style="{ height: height }"
+        >
+          <div
+            class="window_new_1"
+            :style="`transform: rotateX(${windowAngle}deg)`"
+            id="subwindowpic11"
+          ></div>
+          <div
+            class="window_new_2"
+            :style="`transform: rotateX(${windowAngle}deg)`"
+            id="subwindowpic12"
+          ></div>
+          <div
+            class="window_new_3"
+            :style="`transform: rotateX(${windowAngle}deg)`"
+            id="subwindowpic13"
+          ></div>
+          <div
+            class="window_new_4"
+            :style="`transform: rotateX(${windowAngle}deg)`"
+            id="subwindowpic14"
+          ></div>
+          <div
+            class="window_new_5"
+            :style="`transform: rotateX(${windowAngle}deg)`"
+            id="subwindowpic15"
+          ></div>
+        </div>
+        <div
+          class="autowindow_new"
+          v-show="windowcount == 2"
+          :style="{ height: height }"
+        >
+          <div
+            class="window_new_1"
+            :style="`transform: rotateX(${windowAngle1}deg)`"
+            id="subwindowpic11"
+          ></div>
+          <div
+            class="window_new_2"
+            :style="`transform: rotateX(${windowAngle1}deg)`"
+            id="subwindowpic12"
+          ></div>
+          <div
+            class="window_new_3"
+            :style="`transform: rotateX(${windowAngle1}deg)`"
+            id="subwindowpic13"
+          ></div>
+          <div
+            class="window_new_4"
+            :style="`transform: rotateX(${windowAngle1}deg)`"
+            id="subwindowpic14"
+          ></div>
+          <div
+            class="window_new_5"
+            :style="`transform: rotateX(${windowAngle1}deg)`"
+            id="subwindowpic15"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      height: "200px",
+    };
+  },
+  props: ["windowAngle", "windowAngle1", "windowcount"],
+  methods: {},
+  watch: {
+    windownum(val) {
+      if (val == 1) {
+        this.height = "180px";
+      }
+      if (val == 2) {
+        this.height = "180px";
+      }
+    },
+  },
+  onLoad(query) {},
+};
+</script>
+
+<style scoped>
+/*风窗样式*/
+div.autowindow_new {
+  flex-shrink: 0;
+  width: 50%;
+  background-image: url(../../../../static/window/window-bk.png);
+  background-size: 100% 100%;
+  perspective: 800px;
+}
+/*风窗1 2 3 4*/
+
+div.window_new_1 {
+  margin-top: 2%;
+  margin-left: 4%;
+  width: 92%;
+  height: 15%;
+  background-color: crimson;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  transition: all 2s;
+  background-image: url(../../../../static/window/window_new1.png);
+  background-size: 100% 100%;
+}
+div.window_new_2 {
+  margin-top: 1%;
+  margin-left: 4%;
+  width: 92%;
+  height: 15%;
+  background-color: crimson;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  transition: all 2s;
+  background-image: url(../../../../static/window/window_new1.png);
+  background-size: 100% 100%;
+}
+div.window_new_3 {
+  margin-top: 1%;
+  margin-left: 4%;
+  width: 92%;
+  height: 15%;
+  background-color: crimson;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  transition: all 2s;
+  background-image: url(../../../../static/window/window_new1.png);
+  background-size: 100% 100%;
+}
+div.window_new_4 {
+  margin-top: 1%;
+  margin-left: 4%;
+  width: 92%;
+  height: 15%;
+  background-color: crimson;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  transition: all 2s;
+  background-image: url(../../../../static/window/window_new1.png);
+  background-size: 100% 100%;
+}
+div.window_new_5 {
+  margin-top: 1%;
+  margin-left: 4%;
+  width: 92%;
+  height: 15%;
+  background-color: crimson;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  transition: all 2s;
+  background-image: url(../../../../static/window/window_new1.png);
+  background-size: 100% 100%;
+}
+div.window_new_1 {
+  transition: all 2s ease;
+  transform-origin: center center;
+}
+div.window_new_2 {
+  transition: all 2s ease;
+  transform-origin: center center;
+}
+div.window_new_3 {
+  transition: all 2s ease;
+  transform-origin: center center;
+}
+div.window_new_4 {
+  transition: all 2s ease;
+  transform-origin: center center;
+}
+div.window_new_5 {
+  transition: all 2s ease;
+  transform-origin: center center;
+}
+.open {
+  transform: rotateX(100deg);
+}
+.close {
+  transform: rotateX(0deg);
+}
+/*使用css变形功能
+
+    div.door:hover div.left_door{
+        transform:rotateY(100deg);
+    }
+
+    div.door:hover div.right_door{
+        transform:rotateY(-100deg);
+    }*/
+</style>

pages/home/devicemenu/treeMenu/typeMenu.vue

@@ -58,7 +58,6 @@ export default {
     };
   },
   created() {
-	  
     this.loadData();
   },
   methods: {
@@ -74,7 +73,6 @@ export default {
                 )
                   this.typeList.push(response.data.result[i]);
               }
-              console.log(this.typeList, "数据数据");
             } else {
               resolve(response);
             }

pages/home/firstmodel.vue

@@ -187,7 +187,7 @@ export default {
     },
     stopTimer() {
       // 停止定时器
-     clearInterval(this.timer);
+      clearInterval(this.timer);
     },
     loadData(type) {
       new Promise((resolve, reject) => {
@@ -243,7 +243,7 @@ export default {
       this.menushow = false;
     },
     openNewPage(params) {
-	 this.$destroy();
+      this.$destroy();
       uni.navigateTo({
         url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
       });
@@ -251,7 +251,7 @@ export default {
   },
   destroyed() {
     // 停止定时器
-    this.stopTimer()
+    this.stopTimer();
   },
 };
 </script>

pages/index/index.vue

@@ -4,7 +4,6 @@
 		<history :cur="PageCur" v-if="PageCur=='history'" :key="commponent2Key"></history>
 		<warndata :cur="PageCur" v-if="PageCur=='warndata'" :key="commponent3Key"></warndata>
 		<people v-if="PageCur=='people'" :key="commponent4Key"></people>
-		<camera :cur="PageCur" v-if="PageCur=='camera'" :key="commponent5Key"></camera>
 		<u-tabbar
 			:value="PageCur"
 			@change="name => PageCur = name"
@@ -13,7 +12,7 @@
 			:safeAreaInsetBottom="true"
 		>
 			<u-tabbar-item text="设备监测" name="home" icon="file-text" @click="NavChange('home')"></u-tabbar-item>
-			<u-tabbar-item text="历史数据" icon="home" name="history" @click="NavChange('history')" ></u-tabbar-item>
+			<u-tabbar-item text="历史数据" name="history" icon="home"  @click="NavChange('history')" ></u-tabbar-item>
 			<u-tabbar-item text="预警分析" icon="play-right" name="warndata" @click="NavChange('warndata')" ></u-tabbar-item>
 			<u-tabbar-item text="操作记录" icon="account" name="people" @click="NavChange('people')" ></u-tabbar-item>
 		</u-tabbar>