From 237b5f107cf9fab2a6b730f1a036dbdcbfb63498 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期一, 27 十一月 2023 15:45:08 +0800
Subject: [PATCH] 1、车间看板页面非全屏模式下使图纸盒子占满底部，而不是被屏幕任务栏遮盖 2、报警分析页面调整右侧表格以及图表布局，调整表格合计持续字段展示格式为时分秒 3.大屏车间管理页面选择已有设备窗口弹出方式由模态窗改为右侧抽屉
---
src/views/WorkshopSignage.vue | 71 +++++++++++++++++++++++++++++++----
1 files changed, 62 insertions(+), 9 deletions(-)
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index 645ebbd..5dc5cb2 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -1,6 +1,6 @@
<template>
<dv-full-screen-container class="full-screen-container">
- <header class="page-header">
+ <header class="page-header" :style="{height: pageHeaderHeight+'px'}">
{{ workshopDetails.workshopName }}
<div class="header-left" v-has="'home:saveDevicePositionAndSize'">
<a-space>
@@ -77,7 +77,6 @@
</div>
</div>
</VueDragResize>
-
</div>
</dv-border-box-8>
@@ -103,6 +102,11 @@
},
data() {
return {
+ pageHeaderHeight: 80,// 椤靛ご楂樺害
+ taskBarHeight: window.screen.height - window.screen.availHeight,// 灞忓箷搴曢儴浠诲姟鏍忛珮搴�
+ utilsBarHeight: window.outerHeight - window.innerHeight,// 娴忚鍣ㄥ伐鍏锋爮楂樺害
+ normalPageHeight: 0,
+ fullScreenPageHeight: 0,
workshopDetails: {}, // 杞﹂棿璇︾粏淇℃伅,
isDraggable: false, // 鏄惁寮�鍚嫋鎷�
isResizable: false, // 鏄惁寮�鍚缉鏀�
@@ -141,7 +145,8 @@
value: 22,
color: '#FF0000'
}
- ] // 璁惧鐘舵�佹寚绀虹伅鍒楄〃
+ ],// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
+ isFullscreen: false
}
},
watch: {
@@ -186,7 +191,14 @@
this.workshopDetails.backgroundImage
)})`
+ this.fullScreenPageHeight = `calc(100% - ${this.pageHeaderHeight}px)`
+ this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`
+ if (this.isFullscreen) {
+ this.$refs.deviceContainerRef.style.height = this.fullScreenPageHeight
+ } else {
+ this.$refs.deviceContainerRef.style.height = this.normalPageHeight
+ }
})
},
@@ -285,6 +297,35 @@
// setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0)
// },1000*10)
}
+ },
+
+ onResize() {
+ // 鍒╃敤灞忓箷鍒嗚鲸鐜囧拰window瀵硅薄鐨勫唴楂樺害鏉ュ垽鏂吋瀹笽E
+ let winFlag = window.innerHeight === window.screen.height
+ // 鍒╃敤window鍏ㄥ睆鏍囪瘑鏉ュ垽鏂� -- IE鏃犳晥
+ let isFull = window.fullScreen || document.webkitIsFullScreen
+
+ if (isFull === undefined) {
+ this.isFullscreen = winFlag
+ } else {
+ this.isFullscreen = winFlag || isFull
+ }
+ console.log(winFlag) // true鍏ㄥ睆 false涓嶆槸鍏ㄥ睆
+ console.log('浠诲姟鏍忛珮搴�', this.taskBarHeight)
+ console.log('宸ュ叿鏍忛珮搴�', this.utilsBarHeight)
+
+ //鍏ㄥ睆鍒欏浘绾哥洅瀛愬彲瑙嗛珮搴﹀噺鍘婚〉澶撮珮搴︼紝姝ｅ父绐楀彛鍒欏噺鍘婚〉澶淬�佸睆骞曞簳閮ㄤ换鍔℃爮浠ュ強娴忚鍣ㄥ伐鍏锋爮楂樺害
+ if (winFlag) {
+ console.log('瑙﹀彂鍏ㄥ睆')
+ this.$refs.deviceContainerRef.style.height = this.fullScreenPageHeight
+
+ } else {
+ console.log('鍏抽棴鍏ㄥ睆')
+ // 濡傛灉鍒锋柊椤甸潰閲嶆柊鍔犺浇鍚庨粯璁ゅ浜庡叏灞忔ā寮忥紝鍒欏伐鍏锋爮楂樺害涓鸿礋鏁帮紝鍥犳闇�瑕侀��鍑哄叏灞忔ā寮忔椂閲嶇疆宸ュ叿鏍忛珮搴�
+ this.utilsBarHeight = window.outerHeight - window.innerHeight
+ this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`
+ this.$refs.deviceContainerRef.style.height = this.normalPageHeight
+ }
}
},
@@ -293,15 +334,29 @@
this.getDeviceListByApi(this.$route.params.id)
this.getWorkshopDetailsByApi(this.$route.params.id)
}
+
+
+ let winFlag = window.innerHeight === window.screen.height
+ // 鍒╃敤window鍏ㄥ睆鏍囪瘑鏉ュ垽鏂� -- IE鏃犳晥
+ let isFull = window.fullScreen || document.webkitIsFullScreen
+
+ if (isFull === undefined) {
+ this.isFullscreen = winFlag
+ } else {
+ this.isFullscreen = winFlag || isFull
+ }
+
+ // window.addEventListener('resize', this.onResize)
},
mounted() {
// 绂佹鐢ㄦ埛閫変腑鍐呭
document.onselectstart = () => false
},
beforeDestroy() {
- // 纭繚閿�姣佸畾鏃跺櫒鍙婂洖鏀惰祫婧�
+ // 纭繚閿�姣佸畾鏃跺櫒銆佷簨浠跺強鍥炴敹璧勬簮
clearInterval(this.timingAcquisition)
this.timingAcquisition = null
+ // window.removeEventListener('resize', this.onResize)
}
}
</script>
@@ -313,7 +368,6 @@
color: #fff;
.page-header {
- height: 80px;
font-size: 50px;
text-align: center;
position: relative;
@@ -357,10 +411,10 @@
.content-container {
width: 100%;
- height: calc(100% - 80px);
+ /*height: calc(100% - 200px);*/
+ /*height: 100%;*/
background-repeat: no-repeat;
background-size: 100% 100%;
-
.single-device {
position: absolute;
@@ -380,8 +434,7 @@
width: 100%;
height: 100%;
display: flex;
- align-items:end ;
-
+ align-items: end;
.status-image {
background-size: 100% 100%;
--
Gitblit v1.9.3