1，首页布局修改，增加二维通风系统图

2. 各页面顶部设置边距

manifest.json

@@ -6,6 +6,18 @@
     "versionCode" : 1,
     "transformPx" : false,
     "app-plus" : {
+		"orientation" : [
+			//竖屏正方向
+			"portrait-primary",
+			//竖屏反方向
+			"portrait-secondary",
+			//横屏正方向
+			"landscape-primary",
+			//横屏反方向
+			"landscape-secondary",
+			//自然方向
+			"default"
+		],
         /* 5+App特有相关 */
         "modules" : {
             "Maps" : {},

pages.json

@@ -208,7 +208,8 @@
     "navigationBarBackgroundColor": "#0081ff",
     "navigationBarTitleText": "JEECG BOOT",
     "navigationStyle": "custom",
-    "navigationBarTextStyle": "white"
+    "navigationBarTextStyle": "white",
+	"pageOrientation": "auto" // 屏幕自动切换
   },
   "usingComponts": true,
   "condition": {

pages/device/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <view>
+	<u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
+	
+	<view class="">
+		<home cur="home" v-if="PageCur == '0'" :key="0"></home>
+		<history
+		  :key="1"
+		  cur="history"
+		  v-if="PageCur == '1'"
+		></history>
+		<operation :key="2" cur="operation" v-if="PageCur == '2'"></operation>
+	</view>
+    
+    <!-- <u-tabbar
+      :value="PageCur"
+      @change="(name) => (PageCur = name)"
+      :fixed="true"
+      :placeholder="true"
+      :safeAreaInsetBottom="true"
+    >
+      <u-tabbar-item
+        text="设备监测"
+        name="home"
+        icon="list-dot"
+        @click="NavChange('home')"
+      ></u-tabbar-item>
+      <u-tabbar-item
+        text="历史数据"
+        name="history"
+        icon="calendar"
+        @click="NavChange('history')"
+      ></u-tabbar-item>
+      <u-tabbar-item
+        text="操作记录"
+        icon="setting"
+        name="operation"
+        @click="NavChange('operation')"
+      ></u-tabbar-item>
+      <u-tabbar-item
+        text="预警分析"
+        icon="plus-circle"
+        name="warndata"
+        @click="NavChange('warndata')"
+      ></u-tabbar-item>
+      <u-tabbar-item
+        text="文件中心"
+        icon="file-text"
+        name="filecenter"
+        @click="NavChange('filecenter')"
+      ></u-tabbar-item>
+    </u-tabbar> -->
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      PageCur: "0",
+	  tabList: [
+		  {
+			name: '设备监测'
+		  },
+		  {
+			name: '历史数据'
+		  },
+		  {
+			name: '操作记录'
+		  },
+		 //  {
+			// name: '预警分析'
+		 //  },
+	  ],
+    };
+  },
+  onLoad: function () {
+    this.PageCur = "0";
+  },
+
+  methods: {
+    NavChange: function (item) {
+      this.PageCur = item.index;
+    },
+
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+	.devic-box-tab{
+		margin-top: 50px;
+	}
+</style>

pages/filecenter/filecenter.vue

@@ -2,8 +2,7 @@
   <view class="container">
     <u-navbar
       title="文件中心"
-      :safeAreaInsetTop="false"
-      style="margin-top: 30px"
+      :safeAreaInsetTop="true"
       leftIcon=""
     >
     </u-navbar>
@@ -123,11 +122,8 @@ export default {
 </script>
 
 <style scoped>
->>> .u-navbar--fixed {
-  margin-top: 20px;
-}
 .main {
-  margin-top: 100rpx;
+  /* margin-top: 100rpx; */
   display: flex;
   flex-direction: column;
 }

pages/history/Historymodel.vue

@@ -2,10 +2,9 @@
   <view class="container">
     <!-- 建议放在外层 -->
     <u-navbar
-      title="历史数据"
+      title="设备中心"
       @leftClick="devicemenuShow"
-      :safeAreaInsetTop="false"
-      style="margin-top: 30px"
+      :safeAreaInsetTop="true"
     >
       <view class="u-nav-slot" slot="left">
         <u-icon name="list" size="20"> </u-icon>
@@ -251,7 +250,7 @@ export default {
       deviceID: "", //设备ID
       deviceType: "", //设备类型
       skip: 8, //时间间隔
-      dataTime: dayjs().toDate(),
+      dataTime: dayjs().toDate().format('YYYY-MM-DD HH:mm:ss'),
       historyData: [], //历史数据
     };
   },
@@ -403,11 +402,8 @@ export default {
 </script>
 
 <style>
->>> .u-navbar--fixed {
-  margin-top: 20px;
-}
 .main {
-  margin-top: 100rpx;
+  /* margin-top: 100rpx; */
   display: flex;
   flex-direction: column;
 }

pages/home/detail/autodoor/autodoor.vue

@@ -483,7 +483,7 @@ passwordPopup {
   background-color: #ffffff;
 }
 .main {
-  margin-top: 100rpx;
+  /* margin-top: 100rpx; */
 }
 .container {
   display: flex;

pages/home/devicemenu/treeMenu/typeMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view class="device-type-modal">
     <scroll-view>
       <!-- 通风设备 -->
       <view v-for="(typeitem, index) in typeList" :key="index">
@@ -113,9 +113,12 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.device-type-modal{
+	margin-top: 30rpx;
+}
 .cu-list.grid > .cu-item {
-  padding: 0px 0px;
+  padding: 0rpx 0rpx;
   background: linear-gradient(
     to right,
     rgba(55, 135, 254, 0.08),
@@ -124,15 +127,15 @@ export default {
   );
 }
 .line2-icon {
-  width: 60px;
-  height: 60px;
+  width: 60rpx;
+  height: 60rpx;
 }
 .icon {
   position: absolute;
-  top: 5px;
+  top: 5rpx;
   left: 50%;
   transform: translateX(-50%);
-  width: 20px;
-  height: 20px;
+  width: 20rpx;
+  height: 20rpx;
 }
 </style>

pages/home/firstmodel.vue

@@ -2,10 +2,9 @@
   <view class="container">
     <!-- 建议放在外层 -->
     <u-navbar
-      title="设备监测"
+      title="设备中心"
       @leftClick="devicemenuShow"
-      :safeAreaInsetTop="false"
-      style="margin-top: 30px"
+      :safeAreaInsetTop="true"
     >
       <view class="u-nav-slot" slot="left">
         <u-icon name="list" size="20"> </u-icon>
@@ -299,10 +298,10 @@ export default {
 
 <style>
 >>> .u-navbar--fixed {
-  margin-top: 20px;
+  /* margin-top: 20px; */
 }
 .main {
-  margin-top: 100rpx;
+  /* margin-top: 100rpx; */
   display: flex;
   flex-direction: column;
 }

pages/home/firstmodel.vue.bak

@@ -4,7 +4,7 @@
     <u-navbar
       title="设备监测"
       @leftClick="devicemenuShow"
-      :safeAreaInsetTop="false"
+      :safeAreaInsetTop="true"
     >
       <view class="u-nav-slot" slot="left">
         <u-icon name="list" size="20"> </u-icon>

pages/index/index.vue

@@ -1,85 +1,172 @@
 <template>
-  <view>
-    <home :cur="PageCur" v-if="PageCur == 'home'" :key="commponent1Key"></home>
-    <history
-      :cur="PageCur"
-      v-if="PageCur == 'history'"
-      :key="commponent2Key"
-    ></history>
-    <warndata
-      :cur="PageCur"
-      v-if="PageCur == 'warndata'"
-      :key="commponent3Key"
-    ></warndata>
-    <operation v-if="PageCur == 'operation'" :key="commponent4Key"></operation>
-    <filecenter
-      :cur="PageCur"
-      v-if="PageCur == 'filecenter'"
-      :key="commponent5Key"
-    ></filecenter>
+  <view class='app-container'>
+	<web-view v-if="PageCur == 'tun2D'" src="http://192.168.10.104:8088" @message="handleMessage"></web-view>
+	<Device v-if="PageCur == 'device'"/>
+	<filecenter
+	  :cur="PageCur"
+	  v-if="PageCur == 'filecenter'"
+	></filecenter>
+	<warndata
+	  v-if="PageCur == 'warndata'"
+	  :cur="PageCur"
+	></warndata>
     <u-tabbar
       :value="PageCur"
-      @change="(name) => (PageCur = name)"
+      @change="NavChange"
       :fixed="true"
-      :placeholder="true"
-      :safeAreaInsetBottom="true"
+	  :placeholder="true"
+	  :safeAreaInsetBottom="true"
     >
       <u-tabbar-item
-        text="设备监测"
-        name="home"
+        text="通风系统图"
+        name="tun2D"
         icon="list-dot"
-        @click="NavChange('home')"
+
       ></u-tabbar-item>
       <u-tabbar-item
-        text="历史数据"
-        name="history"
+        text="设备中心"
+        name="device"
         icon="calendar"
-        @click="NavChange('history')"
-      ></u-tabbar-item>
-      <u-tabbar-item
-        text="操作记录"
-        icon="setting"
-        name="operation"
-        @click="NavChange('operation')"
-      ></u-tabbar-item>
-      <u-tabbar-item
-        text="预警分析"
-        icon="plus-circle"
-        name="warndata"
-        @click="NavChange('warndata')"
-      ></u-tabbar-item>
-      <u-tabbar-item
-        text="文件中心"
-        icon="file-text"
-        name="filecenter"
-        @click="NavChange('filecenter')"
       ></u-tabbar-item>
+	  <u-tabbar-item
+	    text="预警分析"
+	    name="warndata"
+	    icon="plus-circle"
+	  ></u-tabbar-item>
+	  <u-tabbar-item
+	    text="文件共享"
+	    name="filecenter"
+	    icon="file-text"
+	  ></u-tabbar-item>
     </u-tabbar>
+	
   </view>
 </template>
 
 <script>
+import Device from '../device/index.vue'
 export default {
+	components: {
+	  Device,
+	},
   data() {
     return {
-      PageCur: "home",
-      commponent1Key: 0,
-      commponent2Key: 1,
-      commponent3Key: 2,
-      commponent4Key: 3,
-      commponent5Key: 4
+      PageCur: "tun2D",
+	  tun3DPage: null,
+	  wv: null, // 定义(app)webview对象节点
+	  webV:{}, // 定义(H5)webview对象节点
     };
   },
+  
   onLoad: function () {
-    this.PageCur = "home";
+	this.PageCur = "tun2D";
+	
+		
+	
+  },
+
+  mounted:function(){
+	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)
+				
+			}
+			
+		}  
+  	})
   },
   methods: {
     NavChange: function (e) {
       this.PageCur = e;
+	  if(e == 'tun2D'){
+		this.changeWV()
+	  }
     },
+	handleMessage(e) {
+		
+	},
+	// 发送消息到 HTML
+	sendRequestData(res) {
+		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
+		
+		
+	},
+	changeWV(isLandScape) {
+		const _this = this
+		  let height = 0; // 动态高度变量
+		  let width = 0; // 动态高度变量
+		  let statusbar = 0; // 动态状态栏高度
+		  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)
+				}
+				
+			}
+		  });
+		
+	}
   },
 };
 </script>
 
 <style>
+.app-container{
+	width: 100%;
+	height: 100%;
+	padding-left: 10rpx;
+	padding-right: 10rpx;
+}
+.tun3D-box{
+}
 </style>

pages/operation/operationModel.vue

@@ -2,10 +2,9 @@
   <view class="container">
     <!-- 建议放在外层 -->
     <u-navbar
-      title="操作记录"
+      title="设备中心"
       @leftClick="devicemenuShow"
-      :safeAreaInsetTop="false"
-      style="margin-top: 30px"
+	  :safeAreaInsetTop="true"
     >
       <view class="u-nav-slot" slot="left">
         <u-icon name="list" size="20"> </u-icon>
@@ -113,7 +112,7 @@ export default {
       TabCur: "gate",
       dataShow: false,
       dataShow1: false,
-      dataTime: dayjs().toDate(),
+      dataTime: dayjs().toDate().format('YYYY-MM-DD HH:mm:ss'),
       deviceType: "gate", //设备类型
       StartTime: "",
       EndTime: "",
@@ -196,18 +195,14 @@ export default {
 </script>
 
 <style>
->>> .u-navbar--fixed {
-  margin-top: 20px;
-}
 .main {
-  margin-top: 100rpx;
   display: flex;
   flex-direction: column;
 }
 .menupage {
   position: absolute;
   z-index: 2;
-  top: 40rpx;
+  /* top: 40rpx; */
   height: calc(100% - 40rpx);
   width: 100%;
 }

pages/warndata/warndata.vue

@@ -2,8 +2,7 @@
   <view class="container">
     <u-navbar
       title="预警分析"
-      :safeAreaInsetTop="false"
-      style="margin-top: 30px"
+      :safeAreaInsetTop="true"
       left-icon=""
     >
     </u-navbar>
@@ -312,12 +311,7 @@ export default {
 .container {
   display: flex;
   flex-direction: column;
-  height: 100%;
-}
->>> .u-navbar--fixed {
-  padding-top: 20px;
-  width: 100%;
-}
+
 .main {
   display: flex;
   flex-direction: column;