1. 优化首页通风系统图加载样式

App.vue

@@ -143,7 +143,7 @@
 		},
 		onHide: function() {
 			console.log('App Hide')
-				    clearInterval(this.$store.state.timer); // 假设定时器存储在 Vuex 的状态管理中
+			clearInterval(this.$store.state.timer); // 假设定时器存储在 Vuex 的状态管理中
 		},
 
 	}

pages/home/detail/autodoor/autodoor.vue

@@ -469,7 +469,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
 passwordPopup {
   height: 300rpx;
   background-color: #fff;

pages/index/index.vue

@@ -1,6 +1,9 @@
 <template>
   <view class='app-container'>
-	<web-view v-if="PageCur == 'tun2D'" src="http://192.168.10.104:8088" @message="handleMessage"></web-view>
+	<view v-if="iframeloading" class="loadding-box" :style="{'height': wvHeight+'px', 'width': wvWidth+'px', 'marginTop': wvTop+'px', border: 'none', background: '#000' }">
+		<u-loading-icon></u-loading-icon>
+	</view>
+	<iframe v-if="PageCur == 'tun2D'" ref="iframe" src="http://192.168.183.216:8088/"  @load="viewLoad" :style="{'height': wvHeight+'px', 'width': wvWidth+'px', 'marginTop': wvTop+'px', border: 'none', background: '#000' }"></iframe>
 	<Device v-if="PageCur == 'device'"/>
 	<filecenter
 	  :cur="PageCur"
@@ -44,6 +47,7 @@
 </template>
 
 <script>
+import { nextTick } from "vue";
 import Device from '../device/index.vue'
 export default {
 	components: {
@@ -51,109 +55,62 @@ export default {
 	},
   data() {
     return {
+	  isLandScape: '',
       PageCur: "tun2D",
 	  tun3DPage: null,
-	  wv: null, // 定义(app)webview对象节点
-	  webV:{}, // 定义(H5)webview对象节点
+	  wvHeight: getApp().globalData.windowHeight,
+	  wvWidth: getApp().globalData.windowWidth,
+	  wvTop: 0,
+	  iframeloading: true
     };
   },
-  
-  onLoad: function () {
-	this.PageCur = "tun2D";
-	
-		
+  onLoad() {
+  	this.changeWV()
+  },
+  mounted(){
 	
   },
-
-  mounted:function(){
-	this.changeWV()
+  onShow() {
+  	// this.changeWV()
   },
   onResize(){
-  	let _this = this
-  	uni.getSystemInfo({  
-		success: function(res) {
-			if (res.windowWidth > res.windowHeight) {  
-			   // 横屏
-				// _this.isLandScape = true
-				console.log('横屏')
-				_this.changeWV(true)
-				
-			} else {  
-			   // 竖屏
-				// _this.isLandScape = false
-				console.log('竖屏')
-				_this.changeWV(false)
-				
-			}
-			
-		}  
-  	})
+  	this.changeWV()
   },
   methods: {
     NavChange: function (e) {
       this.PageCur = e;
 	  if(e == 'tun2D'){
-		this.changeWV()
+		// this.changeWV()
+		this.iframeloading = true
 	  }
     },
-	handleMessage(e) {
-		
-	},
-	// 发送消息到 HTML
-	sendRequestData(res) {
+	viewLoad(event) {
 		const _this = this
-		let param = {type:'orientationchange'}
-		// App端
-		// #ifdef APP-PLUS
-		// 页面栈最顶层就是当前webview
-		let currentWebview = _this.$scope.$getAppWebview();
-		_this.wv = currentWebview.children()[0]
-		this.wv.evalJS(`requestData(${param})`);
-		
-		// #endif
-		
-		// H5端
-		// #ifdef H5
-		
-		window.addEventListener('message',e => {
-			_this.webV = e.source  // window的对象
-			console.log(e.data.data.arg,'接收h5页面发来的消息'); // 接收h5页面发来的消息(11)  ====>H5端
-		},false)
-		
-		if(this.webV.postMessage){
-			this.webV.postMessage(param)
-		}
-		
-		// #endif
-		
-		
+		setTimeout(() => {
+			_this.iframeloading = false
+		}, 2000)
 	},
-	changeWV(isLandScape) {
+	changeWV() {
 		const _this = this
-		  let height = 0; // 动态高度变量
-		  let width = 0; // 动态高度变量
-		  let statusbar = 0; // 动态状态栏高度
-		  uni.getSystemInfo({ // 获取当前设备的具体信息
+	    uni.getSystemInfo({ // 获取当前设备的具体信息
 			success: (sysinfo) => {
-				statusbar = isLandScape ? 0 : sysinfo.statusBarHeight + 20;
-				height = isLandScape ? sysinfo.windowHeight - sysinfo.statusBarHeight - 20 : sysinfo.windowHeight - sysinfo.statusBarHeight  - sysinfo.statusBarHeight - 38;
-				width = isLandScape ? sysinfo.windowWidth : sysinfo.windowWidth
-					
-				let currentWebview = _this.$scope.$getAppWebview(); // 获取当前web-view
-				if(currentWebview){
-					var wv = currentWebview.children()[0]; // 获取web-view的子节点（即需要设置样式的元素）
-					wv.setStyle({ // 设置web-view距离顶部的距离以及自己的高度,单位为px
-						top: statusbar, // 距离顶部的高度,应该是你页面的头部
-						height: height ,// webview的高度
-						width: width
-					});
-					wv.reload()
-					console.log( width, height, statusbar)
-					// _this.sendRequestData([], 1)
+				if (sysinfo.windowWidth > sysinfo.windowHeight) {
+				   // 横屏
+					_this.isLandScape = true
+				
+				} else {  
+				   // 竖屏
+					_this.isLandScape = false
 				}
 				
+				_this.wvTop = _this.isLandScape ? 0 : sysinfo.statusBarHeight + 20;
+				_this.wvHeight = _this.isLandScape ? sysinfo.windowHeight - sysinfo.statusBarHeight - 20 : sysinfo.windowHeight - sysinfo.statusBarHeight  - sysinfo.statusBarHeight - 38;
+				_this.wvWidth = _this.isLandScape ? sysinfo.windowWidth : sysinfo.windowWidth
+				
+				console.log('屏幕模式--->', _this.isLandScape? '横屏':'竖屏')
+				console.log(_this.wvTop, _this.wvWidth, _this.wvHeight )
 			}
-		  });
+		});
 		
 	}
   },
@@ -164,9 +121,11 @@ export default {
 .app-container{
 	width: 100%;
 	height: 100%;
-	padding-left: 10rpx;
-	padding-right: 10rpx;
 }
-.tun3D-box{
+.loadding-box{
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 </style>

pages/warndata/warndata.vue

@@ -307,11 +307,11 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .container {
   display: flex;
   flex-direction: column;
-
+}
 .main {
   display: flex;
   flex-direction: column;