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/system/modules/SelectDeviceModal.vue | 73 ++++++++++------------- src/views/WorkshopSignage.vue | 71 ++++++++++++++++++++--- src/views/system/WorkshopSignageManagement.vue | 3 src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue | 25 +++++-- 4 files changed, 113 insertions(+), 59 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) + + //鍏ㄥ睆鍒欏浘绾哥洅瀛愬彲瑙嗛珮搴﹀噺鍘婚〉澶撮珮搴︼紝姝e父绐楀彛鍒欏噺鍘婚〉澶淬�佸睆骞曞簳閮ㄤ换鍔℃爮浠ュ強娴忚鍣ㄥ伐鍏锋爮楂樺害 + 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%; diff --git a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue index e923eb5..cbb9217 100644 --- a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue +++ b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue @@ -19,7 +19,7 @@ </div> <div id="DeviceList"> <div class="openRateTrendDg"> - <div id="Efficiency" class="container" style="margin-top: 20px;"> + <div id="Efficiency" class="container"> <div class="table2"> <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap;text-align: left;"> @@ -31,7 +31,7 @@ 鍑虹幇娆℃暟 </th> <th class="thgu dong3 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"> - 鍚堣鎸佺画鏃堕棿锛堢锛� + 鍚堣鎸佺画鏃堕棿 </th> <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;"> 鎶ヨ淇℃伅 @@ -45,7 +45,8 @@ <tr class="mathData" v-for="(item, index) in dataList" @click="TableDraw(index,item)"> <td class="tdgu kaitou">{{item.alarmCode}}</td> <td class="tdgu1 kaitou">{{item.count}}</td> - <td class="tdgu2 kaitou">{{item.timeCount}}</td> + <td class="tdgu2 kaitou">{{getFormattedTime(item.timeCount)}} + <!--<td class="tdgu2 kaitou">{{item.timeCount}}</td>--> <td class="tdgu3 kaitou">{{item.alarmContent}}</td> <!--<template v-for="(tableHead, index) in item.dataList">--> <!--<td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td>--> @@ -56,7 +57,7 @@ </div> </div> </div> - <div style="width: 100%;height: 60%;display: flex;"> + <div style="width: 100%;height: 55%;display: flex;"> <div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div> <div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div> </div> @@ -429,6 +430,14 @@ ] } equipmentWarningLine.setOption(equipmentWarningLineOption, true) + }, + + getFormattedTime(seconds){ + var hours = Math.floor(seconds / 3600); + var minutes = Math.floor((seconds % 3600) / 60); + var secs = seconds % 60; + + return `${hours}灏忔椂 ${minutes}鍒� ${secs}绉抈 } } } @@ -591,28 +600,28 @@ @media screen and (min-width: 1920px) { #Efficiency { - height: 337px !important; + height: 258px !important; overflow: scroll; } } @media screen and (min-width: 1680px) and (max-width: 1920px) { #Efficiency { - height: 337px !important; + height: 258px !important; overflow: scroll; } } @media screen and (min-width: 1400px) and (max-width: 1680px) { #Efficiency { - height: 190px !important; + height: 160px !important; overflow: scroll; } } @media screen and (min-width: 1280px) and (max-width: 1400px) { #Efficiency { - height: 90px !important; + height: 60px !important; overflow: scroll; } } diff --git a/src/views/system/WorkshopSignageManagement.vue b/src/views/system/WorkshopSignageManagement.vue index b82332f..b413673 100644 --- a/src/views/system/WorkshopSignageManagement.vue +++ b/src/views/system/WorkshopSignageManagement.vue @@ -416,7 +416,7 @@ if (res.success) { that.$message.success(res.message) that.loadData2() - that.onClearSelected() + that.onClearSelected2() } else { that.$message.warning(res.message) } @@ -459,6 +459,7 @@ this.$refs.selectUserModal.selectedRowKeys = [] this.$refs.selectUserModal.selectedRows = [] this.$refs.selectUserModal.checkedKeys = [] + this.$refs.selectUserModal.expandAll() } }, diff --git a/src/views/system/modules/SelectDeviceModal.vue b/src/views/system/modules/SelectDeviceModal.vue index af931d0..ec57f16 100644 --- a/src/views/system/modules/SelectDeviceModal.vue +++ b/src/views/system/modules/SelectDeviceModal.vue @@ -1,12 +1,11 @@ <template> <div> - <a-modal + <a-drawer :title="title" :visible="visible" + width="650" @ok="handleOk" - @cancel="handleCancel" - cancelText="鍏抽棴" - centered + @close="handleCancel" > <!--<!– 鏌ヨ鍖哄煙 –>--> @@ -52,47 +51,41 @@ <a-form-item label="杞﹂棿灞傜骇锛�"> <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys" :treeData="treeDataSource" checkable @check="onCheck" v-model="checkedKeys" - :autoExpandParent="autoExpandParent" @expand="onExpand"> + @expand="onExpand"> </a-tree> </a-form-item> </a-form> </a-spin> - <template slot="footer"> - <div> - <div> - <a-dropdown - style="float: left" - :trigger="['click']" - placement="topCenter" - > - <a-menu slot="overlay"> - <a-menu-item key="1" @click="expandAll">灞曞紑鎵�鏈�</a-menu-item> - <a-menu-item key="2" @click="closeAll">鍚堝苟鎵�鏈�</a-menu-item> - <a-menu-item key="3" @click="refreshTree">鍒锋柊</a-menu-item> - </a-menu> - <a-button> - 鏍戞搷浣� - <a-icon type="up"/> - </a-button> - </a-dropdown> - </div> - <a-space> - <a-button - @click="handleCancel" - >鍏抽棴 - </a-button> - <a-button - @click="handleOk" - type="primary" - >纭畾 - </a-button> - </a-space> - </div> - </template> - </a-modal> + <div class="drawer-bottom-button"> + <a-dropdown + style="float: left" + :trigger="['click']" + placement="topCenter" + > + <a-menu slot="overlay"> + <a-menu-item key="1" @click="expandAll">灞曞紑鎵�鏈�</a-menu-item> + <a-menu-item key="2" @click="closeAll">鍚堝苟鎵�鏈�</a-menu-item> + <a-menu-item key="3" @click="refreshTree">鍒锋柊</a-menu-item> + </a-menu> + <a-button> + 鏍戞搷浣� + <a-icon type="up"/> + </a-button> + </a-dropdown> + <a-popconfirm title="纭畾鏀惧純缂栬緫锛�" @confirm="handleCancel" okText="纭畾" cancelText="鍙栨秷"> + <a-button style="margin-right: .8rem">鍏抽棴</a-button> + </a-popconfirm> + <a-button + @click="handleOk" + type="primary" + >纭畾 + </a-button> + </div> + + </a-drawer> </div> </template> @@ -133,8 +126,6 @@ getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction' }, dataList: [], - autoExpandParent: true, - checkStrictly: true, allTreeKeys: [], visible: false, dataSource: [] @@ -401,7 +392,7 @@ overflow-y: hidden } - .drawer-bootom-button { + .drawer-bottom-button { position: absolute; bottom: 0; width: 100%; -- Gitblit v1.9.3