|
|
@@ -1,11 +1,35 @@
|
|
|
<template>
|
|
|
<view class="app-container">
|
|
|
- <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'"
|
|
|
- src="http://192.168.183.216:8088/"
|
|
|
- @message="handleMessage"
|
|
|
- ></web-view>
|
|
|
- <Device v-if="PageCur == 'device'" />
|
|
|
+ ref="iframe"
|
|
|
+ src="http://182.92.126.35:8098/"
|
|
|
+ @load="viewLoad"
|
|
|
+ :style="{
|
|
|
+ height: wvHeight + 'px',
|
|
|
+ width: wvWidth + 'px',
|
|
|
+ marginTop: wvTop + 'px',
|
|
|
+ border: 'none',
|
|
|
+ background: '#000',
|
|
|
+ }"
|
|
|
+ ></iframe>
|
|
|
+ <Device
|
|
|
+ v-if="PageCur == 'device'"
|
|
|
+ :style="{ marginTop: wvTop + 20 + 'px' }"
|
|
|
+ />
|
|
|
<filecenter :cur="PageCur" v-if="PageCur == 'filecenter'"></filecenter>
|
|
|
<warndata v-if="PageCur == 'warndata'" :cur="PageCur"></warndata>
|
|
|
<u-tabbar
|
|
|
@@ -40,6 +64,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { nextTick } from "vue";
|
|
|
import Device from "../device/index.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -47,107 +72,65 @@ 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";
|
|
|
- },
|
|
|
-
|
|
|
- mounted: function () {
|
|
|
+ onLoad() {
|
|
|
this.changeWV();
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
+ 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({
|
|
|
// 获取当前设备的具体信息
|
|
|
success: (sysinfo) => {
|
|
|
- statusbar = isLandScape ? 0 : sysinfo.statusBarHeight + 20;
|
|
|
- height = isLandScape
|
|
|
+ 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;
|
|
|
- width = isLandScape ? sysinfo.windowWidth : sysinfo.windowWidth;
|
|
|
+ _this.wvWidth = _this.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)
|
|
|
- }
|
|
|
+ console.log("屏幕模式--->", _this.isLandScape ? "横屏" : "竖屏");
|
|
|
+ console.log(_this.wvTop, _this.wvWidth, _this.wvHeight);
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
@@ -159,9 +142,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>
|
