<template>
|
<dv-full-screen-container class="full-screen-container">
|
<header class="page-header">
|
{{workshopDetails.workshopName}}
|
<div class="header-right" v-has="'home:saveDevicePositionAndSize'">
|
<a-space>
|
<span v-if="!isSwitchChecked">开启功能</span>
|
<span v-else>关闭功能</span>
|
<a-switch checked-children="开" un-checked-children="关" @change="handleSwitchChange"
|
v-model="isSwitchChecked" :disabled="isSwitchChecked"/>
|
</a-space>
|
<a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi"
|
>保存位置
|
</a-button>
|
</div>
|
</header>
|
|
<dv-border-box-8>
|
<div class="content-container" ref="deviceContainerRef">
|
<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="true"
|
:minw="100"
|
:minh="100"
|
:isDraggable="isDraggable"
|
:isResizable="isResizable"
|
:id="item.equipmentId"
|
:stickSize="6"
|
>
|
<div class="single-device"
|
:style="{width: item.vw+ 'px',height:item.vh+'px'}">
|
<div class="device-status">
|
<div v-if="item.equipmentStatus==2||item.equipmentStatus==1"
|
:style="{backgroundImage:`url(${require('@/assets/yellow.png')})`}" class="status-image"></div>
|
<div v-if="item.equipmentStatus==22" :style="{backgroundImage:`url(${require('@/assets/red.png')})`}"
|
class="status-image"></div>
|
<div v-if="item.equipmentStatus==0" :style="{backgroundImage:`url(${require('@/assets/gray.png')})`}"
|
class="status-image"></div>
|
<div v-if="item.equipmentStatus==3" :style="{backgroundImage:`url(${require('@/assets/green.png')})`}"
|
class="status-image"></div>
|
<div
|
:style="{backgroundImage:`url(${getImgView(item.equipmentImage)||require('@/assets/8.png')})`}"
|
class="device-image"></div>
|
</div>
|
<div class="device-id" :style="{fontSize: item.fontSize+'px'}">
|
{{item.equipmentId}}
|
</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>
|
</dv-full-screen-container>
|
</template>
|
|
<script>
|
import VueDragResize from 'vue-drag-resize'
|
import api from '@/api/mdc'
|
import { getFileAccessHttpUrl } from '@/api/manage'
|
|
export default {
|
components: {
|
VueDragResize
|
},
|
data() {
|
return {
|
// 车间详细信息,
|
workshopDetails: {},
|
isDraggable: false, // 是否开启拖拽
|
isResizable: false, // 是否开启缩放
|
isSwitchChecked: false, // 是否开启功能
|
timingAcquisition: null, // 定时刷新是否开启
|
deviceList: [
|
// {
|
// equipmentId: '123213213123232',// 设备ID
|
// equipmentImage: require('@/assets/8.png'), // 设备图片
|
// coordinateTop: 200, // 拖拽元素距盒子顶距离
|
// coordinateLeft: 100, // 拖拽元素距盒子左侧距离
|
// vw: 100, // 缩放元素宽度
|
// vh: 100, // 缩放元素高度
|
// fontSize: 12, // 缩放元素字体大小
|
// equipmentStatus: 1 // 设备状态 0:关机 22:报警 2:待机 3:运行 开机:1（没有四色灯标识归为待机）
|
// }
|
], // 设备信息列表
|
deviceStatusList: [
|
{
|
label: '关机',
|
value: 0,
|
color: '#A8A8A8'
|
},
|
{
|
label: '待机',
|
value: 2,
|
color: '#FFFF00'
|
},
|
{
|
label: '运行',
|
value: 3,
|
color: '#00EE00'
|
},
|
{
|
label: '报警',
|
value: 22,
|
color: '#FF0000'
|
}
|
] // 设备状态指示灯列表
|
}
|
},
|
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) {
|
console.log('重新刷新')
|
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.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(this.workshopDetails.backgroundImage)})`
|
})
|
},
|
|
/**
|
* 图片预览
|
* @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
|
}
|
}
|
})
|
} else {
|
this.$notification.warning({
|
message: '消息',
|
description: '请开启功能后再进行保存'
|
})
|
}
|
|
},
|
|
/**
|
* 设备拖拽或缩放时触发事件
|
* @param newRect 拖拽或缩放后的尺寸及距离
|
* @param index 拖拽设备在数组中的下标
|
*/
|
resize(newRect, index) {
|
// if (newRect.width > 100) {
|
// if (newRect.width / newRect.height < 2) {
|
// this.deviceList[index].fontSize = newRect.width / 10
|
// } else {
|
// this.deviceList[index].fontSize = newRect.height / 5
|
// }
|
// } else {
|
// this.deviceList[index].fontSize = 12
|
// }
|
this.deviceList[index].vw = newRect.width
|
this.deviceList[index].vh = newRect.height
|
this.deviceList[index].coordinateTop = newRect.top
|
this.deviceList[index].coordinateLeft = newRect.left
|
},
|
|
/**
|
* 根据设备状态值获取对应设备数量
|
* @param value 设备状态值
|
* @returns {number} 设备数量
|
*/
|
getDeviceNumberByStatus(value) {
|
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
|
}
|
},
|
created() {
|
if (this.$route.params.id) {
|
this.getDeviceListByApi(this.$route.params.id)
|
this.getWorkshopDetailsByApi(this.$route.params.id)
|
}
|
},
|
mounted() {
|
// 禁止用户选中内容
|
document.onselectstart = () => false
|
},
|
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 {
|
height: 80px;
|
font-size: 50px;
|
text-align: center;
|
position: relative;
|
|
.header-right {
|
width: 450px;
|
position: absolute;
|
right: 0px;
|
top: 35px;
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
font-size: 16px;
|
}
|
}
|
|
.content-container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
|
.device-status-info {
|
width: 400px;
|
position: absolute;
|
top: 5px;
|
right: 5px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.single-status-info {
|
width: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.status-square {
|
width: 14px;
|
height: 14px;
|
border: 1px solid #fff;
|
border-radius: 2px;
|
}
|
}
|
}
|
|
.single-device {
|
position: absolute;
|
border: 1px solid transparent;
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
cursor: default;
|
|
&:active {
|
border: 1px solid #1890ff;
|
}
|
|
.device-status {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
|
.status-image {
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 45px;
|
margin-right: 10px;
|
}
|
|
.device-image {
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
}
|
}
|
</style>
|
