| | |
| | | <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-right" v-has="'home:saveDevicePositionAndSize'"> |
| | | <div class="header-left" v-has="'home:saveDevicePositionAndSize'"> |
| | | <a-space> |
| | | <span v-if="!isSwitchChecked">开启功能</span> |
| | | <span v-else>关闭功能</span> |
| | |
| | | /> |
| | | </a-space> |
| | | <a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi">保存位置</a-button> |
| | | </div> |
| | | <div class="device-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> |
| | | </a-space> |
| | | </div> |
| | | </header> |
| | | |
| | |
| | | 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" |
| | |
| | | </div> |
| | | </div> |
| | | </VueDragResize> |
| | | <div class="device-status-info"> |
| | | <div 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> |
| | | </div> |
| | | </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; |
| | | |
| | | .header-right { |
| | | .header-left { |
| | | width: 450px; |
| | | position: absolute; |
| | | right: 0px; |
| | | left: 0px; |
| | | top: 35px; |
| | | display: flex; |
| | | justify-content: space-evenly; |
| | | align-items: center; |
| | | font-size: 16px; |
| | | } |
| | | } |
| | | |
| | | .content-container { |
| | | width: 100%; |
| | | height: calc(100% - 80px); |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | |
| | | .device-status-info { |
| | | font-size: 16px; |
| | | width: 400px; |
| | | position: absolute; |
| | | top: 5px; |
| | | right: 5px; |
| | | top: 40px; |
| | | right: 40px; |
| | | display: flex; |
| | | align-items: center; |
| | | 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; |
| | |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content-container { |
| | | width: 100%; |
| | | /*height: calc(100% - 200px);*/ |
| | | /*height: 100%;*/ |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | |
| | | .single-device { |
| | | position: absolute; |
| | |
| | | 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 { |