<template>
|
<dv-full-screen-container class="full-screen-container">
|
<div>
|
<!--页头区域-->
|
<header class="page-header" :style="{height: pageHeaderHeight+'px'}">
|
<a-row style="height: 100%">
|
<a-col :span="7" class="header-left">
|
<a-space>
|
<span>功能开关</span>
|
<a-switch
|
checked-children="开"
|
un-checked-children="关"
|
@change="handleSwitchChange"
|
v-model="isSwitchChecked"
|
:disabled="isSwitchChecked"
|
/>
|
<a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi">保存位置</a-button>
|
</a-space>
|
</a-col>
|
|
<a-col :span="10" class="workshop-name">{{ workshopDetails.workshopName }}</a-col>
|
|
<a-col :span="7" class="device-status-info">
|
<a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
|
<div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>
|
<div class="status-square" :style="{ backgroundColor: item.color }"></div>
|
<div>{{getDeviceNumberByStatus(item.value) }}</div>
|
</a-space>
|
</a-col>
|
</a-row>
|
</header>
|
|
<!--拖拽设备区域-->
|
<div class="content-container" ref="deviceContainerRef" style="overflow: auto">
|
<img :src="imgSrc" width="1920" height="900">
|
<div class="guideline guidelineX" :style="{top:guidelineXTop+'px',display:showGuideline}"></div>
|
<div class="guideline guidelineY" :style="{left:guidelineYLeft+'px',display:showGuideline}"></div>
|
<VueDragResize
|
v-for="(item, index) in deviceList"
|
:key="item.equipmentId"
|
:w="item.vw"
|
:h="item.vh"
|
:x="item.coordinateLeft"
|
:y="item.coordinateTop"
|
v-on:resizing="resize($event, index)"
|
v-on:dragging="resize($event, index)"
|
:parentLimitation="parentLimitation"
|
:parentH="parentH"
|
:parentW="parentW"
|
:minw="70"
|
:minh="70"
|
:isDraggable="isDraggable"
|
:isResizable="isResizable"
|
:stickSize="6"
|
@deactivated="showGuideline = 'none'"
|
>
|
<div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }"
|
@click="openDetail(item)">
|
<div class="device-status">
|
<div
|
:style="{ backgroundImage: `url(${getStatusImgUrl(item.equipmentStatus)})` }"
|
class="status-image"
|
></div>
|
<div
|
:style="{ backgroundImage: `url(${getImgView(item.equipmentImage)})` }"
|
class="device-image"
|
></div>
|
</div>
|
<div :style="{ color:workshopDetails.equipmentIdColor }">
|
{{ item.equipmentId }}
|
</div>
|
</div>
|
</VueDragResize>
|
</div>
|
|
<EquipmentDetailModal ref="EquipmentDetailModal"></EquipmentDetailModal>
|
</div>
|
</dv-full-screen-container>
|
</template>
|
|
<script>
|
import VueDragResize from 'vue-drag-resize'
|
import api from '@/api/mdc'
|
import { getFileAccessHttpUrl } from '@/api/manage'
|
import EquipmentDetailModal from './modules/DeviceBaseInfo/EquipmentDetailModal.vue'
|
import { message } from 'ant-design-vue'
|
|
message.config({
|
maxCount: 3
|
})
|
|
export default {
|
components: {
|
VueDragResize,
|
EquipmentDetailModal
|
},
|
data() {
|
return {
|
pageHeaderHeight: 80,// 页头高度
|
workshopDetails: {}, // 车间详细信息,
|
isDraggable: false, // 是否开启拖拽
|
isResizable: false, // 是否开启缩放
|
isSwitchChecked: false, // 是否开启功能
|
timingAcquisition: null, // 定时刷新是否开启
|
parentH: 5000,//父级高度
|
parentW: 1920,//父级宽度
|
showGuideline: 'none',
|
guidelineXTop: 0,
|
guidelineYLeft: 0,
|
deviceList: [], // 设备信息列表
|
deviceStatusList: [
|
{
|
label: '关机',
|
value: 0,
|
color: '#A8A8A8'
|
},
|
{
|
label: '待机',
|
value: 2,
|
color: '#FFFF00'
|
},
|
{
|
label: '运行',
|
value: 3,
|
color: '#00EE00'
|
},
|
{
|
label: '报警',
|
value: 22,
|
color: '#FF0000'
|
},
|
{
|
label: '故障',
|
value: 5,
|
color: '#C11900'
|
}
|
],// 设备状态指示灯列表，
|
windowHeight: null,// 当前浏览器可视区域高度（（不包括工具栏、书签、底部任务栏）
|
isFullScreen: false,// 进入看板页面时是否为全屏模式，不包括正常模式进入后切换为全屏模式
|
parentLimitation: false,// 拖拽区域是否限制在父元素区域内,
|
checkedStatusCount: null,// 已勾选筛选状态个数
|
imgSrc: ''// 车间图纸地址
|
}
|
},
|
watch: {
|
isSwitchChecked: {
|
handler(newVal) {
|
if (!newVal) {
|
console.log('定时器开启中')
|
this.timingAcquisition = setInterval(() => {
|
this.getDeviceListByApi(this.$route.params.id)
|
}, 2000)
|
} else {
|
console.log('关闭定时器')
|
clearInterval(this.timingAcquisition)
|
this.timingAcquisition = null
|
}
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
/**
|
* 通过车间Id调用接口获取设备信息列表
|
* @param id 车间Id
|
*/
|
getDeviceListByApi(id) {
|
api.getDeviceListInWorkshopSignagePageApi(id).then((res) => {
|
if (res.result && res.result.length > 0) {
|
this.deviceList = res.result
|
}
|
})
|
},
|
|
/**
|
* 通过车间Id调用接口获取车间详细信息
|
* @param id 车间Id
|
*/
|
getWorkshopDetailsByApi(id) {
|
api.getWorkshopDetailByWorkshopIdApi(id).then((res) => {
|
this.workshopDetails = res.result
|
this.imgSrc = this.getImgView(this.workshopDetails.backgroundImage)
|
this.$refs.deviceContainerRef.style.height = (this.windowHeight - this.pageHeaderHeight) + 'px'
|
this.parentH = 900
|
this.parentLimitation = true // 在父元素高度设置后再设置限制拖拽区域，不这样有概率导致父元素高度未设置就限制拖拽
|
})
|
},
|
|
/**
|
* 图片预览
|
* @param text 图片地址
|
*/
|
getImgView(text) {
|
if (text && text.indexOf(',') > 0) {
|
text = text.substring(0, text.indexOf(','))
|
}
|
return getFileAccessHttpUrl(text)
|
},
|
|
/**
|
* 点击保存按钮调用接口保存拖拽后的位置与设备图标尺寸
|
*/
|
saveDevicePositionAndSizeByApi() {
|
console.log('触发保存')
|
if (this.isOperatingDevice) {
|
api.saveDevicePositionAndSizeApi(this.deviceList).then((res) => {
|
if (res.code === 200) {
|
this.$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
this.isOperatingDevice = false
|
if (this.isSwitchChecked) {
|
this.isSwitchChecked = false
|
this.isResizable = !this.isResizable
|
this.isDraggable = !this.isDraggable
|
}
|
this.getDeviceListByApi(this.$route.params.id)
|
}
|
})
|
} else {
|
this.$notification.warning({
|
message: '消息',
|
description: '请开启功能后再进行保存'
|
})
|
}
|
},
|
|
/**
|
* 设备拖拽或缩放时触发事件
|
* @param newRect 拖拽或缩放后的尺寸及距离
|
* @param index 拖拽设备在数组中的下标
|
*/
|
resize(newRect, index) {
|
this.showGuideline = 'block'
|
this.deviceList[index].vw = newRect.width
|
this.deviceList[index].vh = newRect.height
|
this.deviceList[index].coordinateTop = newRect.top
|
this.deviceList[index].coordinateLeft = newRect.left
|
this.guidelineXTop = newRect.top + newRect.height / 2
|
this.guidelineYLeft = newRect.left + newRect.width / 2
|
},
|
|
/**
|
* 根据设备状态值获取对应设备数量
|
* @param value 设备状态值
|
* @returns {number} 设备数量
|
*/
|
getDeviceNumberByStatus(value) {
|
if (value === 99) return this.deviceList.length
|
return this.deviceList.filter((item) => item.equipmentStatus === value).length
|
},
|
|
/**
|
* 开启功能触发事件
|
* @param checked 当前switch状态，是否开启，初始为false
|
*/
|
handleSwitchChange(checked) {
|
this.isOperatingDevice = true
|
this.isResizable = !this.isResizable
|
this.isDraggable = !this.isDraggable
|
},
|
|
/**
|
* 开启功能触发事件
|
* @param record 点击的设备信息
|
*/
|
openDetail(record) {
|
if (!this.isSwitchChecked) {
|
if (record.equipmentStatus == 0) {
|
this.$message.warning('设备处于关机状态！')
|
return false
|
}
|
this.$refs.EquipmentDetailModal.initData(record.equId)
|
this.$refs.EquipmentDetailModal.timerModel(record.equId)
|
}
|
},
|
|
/**
|
* 根据设备状态值获取对应三色灯图片地址
|
* @param imgStatus 设备状态值
|
*/
|
getStatusImgUrl(imgStatus) {
|
switch (imgStatus) {
|
case 1:
|
case 2:
|
return require('@/assets/yellow.png')
|
case 3:
|
return require('@/assets/green.png')
|
case 22:
|
return require('@/assets/red.png')
|
case 5:
|
return require('@/assets/orange.png')
|
default:
|
return require('@/assets/gray.png')
|
}
|
},
|
|
/**
|
* 浏览器尺寸发生改变时触发
|
*/
|
handleWindowSizeChange() {
|
const windowHeight =
|
window.innerHeight ||
|
document.documentElement.clientHeight ||
|
document.body.clientHeight
|
this.$refs.deviceContainerRef.style.height = (windowHeight - this.pageHeaderHeight) + 'px'
|
}
|
},
|
created() {
|
if (this.$route.params.id) {
|
this.getDeviceListByApi(this.$route.params.id)
|
this.getWorkshopDetailsByApi(this.$route.params.id)
|
}
|
this.checkedStatusCount = this.deviceStatusList.length - 1
|
},
|
mounted() {
|
// 禁止用户选中内容
|
document.onselectstart = () => false
|
|
this.windowHeight =
|
window.innerHeight ||
|
document.documentElement.clientHeight ||
|
document.body.clientHeight
|
|
window.addEventListener('resize', this.handleWindowSizeChange)
|
},
|
beforeDestroy() {
|
// 确保销毁定时器、事件及回收资源
|
clearInterval(this.timingAcquisition)
|
this.timingAcquisition = null
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.full-screen-container {
|
background-image: url('../../../assets/Bj.jpg');
|
background-size: 100% 100%;
|
color: #fff;
|
|
.page-header {
|
.header-left {
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding-top: 20px;
|
}
|
|
.workshop-name {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 50px;
|
}
|
|
.device-status-info {
|
height: 100%;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
padding-top: 20px;
|
|
.single-status-info {
|
margin: 10px;
|
|
.status-square {
|
width: 14px;
|
height: 14px;
|
border: 1px solid #fff;
|
border-radius: 3px;
|
}
|
}
|
}
|
}
|
|
.content-container {
|
width: 100%;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
position: relative;
|
|
.guideline {
|
position: absolute;
|
border: 1px dashed #ccc;
|
}
|
|
.guidelineX {
|
width: 1920px;
|
left: 0;
|
}
|
|
.guidelineY {
|
top: 0;
|
height: 900px;
|
}
|
|
.single-device {
|
position: absolute;
|
border: 1px solid transparent;
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
cursor: pointer;
|
|
.device-status {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
-webkit-align-items: flex-end;
|
-moz-align-items: flex-end;
|
-ms-align-items: flex-end;
|
|
.status-image {
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 10px;
|
height: 60%;
|
margin-right: 5px;
|
}
|
|
.device-image {
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
