| | |
| | | <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> |
| | |
| | | </div> |
| | | </div> |
| | | </VueDragResize> |
| | | |
| | | </div> |
| | | </dv-border-box-8> |
| | | |
| | |
| | | }, |
| | | 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, // 是否开启缩放 |
| | |
| | | value: 22, |
| | | color: '#FF0000' |
| | | } |
| | | ] // 设备状态指示灯列表 |
| | | ]// 设备状态指示灯列表, |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView( |
| | | this.workshopDetails.backgroundImage |
| | | )})` |
| | | |
| | | |
| | | this.$refs.deviceContainerRef.style.height = this.normalPageHeight |
| | | }) |
| | | }, |
| | | |
| | |
| | | // },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) |
| | |
| | | document.onselectstart = () => false |
| | | }, |
| | | beforeDestroy() { |
| | | // 确保销毁定时器及回收资源 |
| | | // 确保销毁定时器、事件及回收资源 |
| | | clearInterval(this.timingAcquisition) |
| | | this.timingAcquisition = null |
| | | } |
| | |
| | | color: #fff; |
| | | |
| | | .page-header { |
| | | height: 80px; |
| | | font-size: 50px; |
| | | text-align: center; |
| | | position: relative; |
| | |
| | | |
| | | .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; |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | align-items:end ; |
| | | |
| | | align-items: end; |
| | | |
| | | .status-image { |
| | | background-size: 100% 100%; |