From 8c168889e5ef37b4d334827108615e762511c622 Mon Sep 17 00:00:00 2001 From: zhuzhuanzhuan Date: 星期二, 26 十二月 2023 11:39:25 +0800 Subject: [PATCH] 1、根页面网站标题由统计分析调整为MDC智慧车间 2、车间看板页面优化代码,去除冗余代码,试图解决新增车间后设备无法自由拖拽问题(未在现场调试,本地调试无问题) 3、车间看板页面全屏模式进入车间后车间背景图无法正常计算高度 4、车间看板与设备监控页面设备详情弹窗调整数据过长则省略的判定条件 5、首页优化布局方式,实现响应式布局 --- src/views/WorkshopSignage.vue | 46 +++++++++++++++++++++++++--------------------- 1 files changed, 25 insertions(+), 21 deletions(-) diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue index 6ef8d5b..53d8115 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> @@ -17,11 +17,11 @@ <a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi">淇濆瓨浣嶇疆</a-button> </div> <div class="device-status-info"> - <div v-for="item in deviceStatusList" :key="item.value" class="single-status-info"> + <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"> <div>{{ item.label }}</div> <div class="status-square" :style="{ backgroundColor: item.color }"></div> <div>{{ getDeviceNumberByStatus(item.value) }}</div> - </div> + </a-space> </div> </header> @@ -37,8 +37,8 @@ v-on:resizing="resize($event, index)" v-on:dragging="resize($event, index)" :parentLimitation="true" - :minw="100" - :minh="100" + :minw="70" + :minh="70" :isDraggable="isDraggable" :isResizable="isResizable" :stickSize="6" @@ -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,7 @@ value: 22, color: '#FF0000' } - ] // 璁惧鐘舵�佹寚绀虹伅鍒楄〃 + ]// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛� } }, watch: { @@ -185,8 +189,7 @@ this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView( this.workshopDetails.backgroundImage )})` - - + this.$refs.deviceContainerRef.style.height = this.normalPageHeight }) }, @@ -286,9 +289,10 @@ // },1000*10) } } - }, created() { + if (this.utilsBarHeight > 0) this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)` + else this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - 87px)` if (this.$route.params.id) { this.getDeviceListByApi(this.$route.params.id) this.getWorkshopDetailsByApi(this.$route.params.id) @@ -299,7 +303,7 @@ document.onselectstart = () => false }, beforeDestroy() { - // 纭繚閿�姣佸畾鏃跺櫒鍙婂洖鏀惰祫婧� + // 纭繚閿�姣佸畾鏃跺櫒銆佷簨浠跺強鍥炴敹璧勬簮 clearInterval(this.timingAcquisition) this.timingAcquisition = null } @@ -313,7 +317,6 @@ color: #fff; .page-header { - height: 80px; font-size: 50px; text-align: center; position: relative; @@ -340,10 +343,10 @@ justify-content: space-between; .single-status-info { - width: 60px; - display: flex; - align-items: center; - justify-content: space-between; + /*width: 70px;*/ + /*display: flex;*/ + /*align-items: center;*/ + /*justify-content: space-between;*/ .status-square { width: 14px; @@ -357,10 +360,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,13 +383,14 @@ width: 100%; height: 100%; display: flex; - justify-content: space-between; + align-items: end; .status-image { background-size: 100% 100%; background-repeat: no-repeat; - width: 45px; - margin-right: 10px; + width: 10px; + height: 60%; + margin-right: 5px; } .device-image { -- Gitblit v1.9.3