<template>
|
<dv-full-screen-container class="full-screen-container">
|
<header class="page-header">
|
{{getWorkshopName}}
|
<div class="header-right">
|
<a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi"
|
v-has="'home:saveDevicePositionAndSize'">保存位置
|
</a-button>
|
</div>
|
</header>
|
|
<dv-border-box-8 class="content-container">
|
<VueDragResize v-for="(item,index) in deviceList" :key="item.equipmentId" :w="item.vw"
|
:h="item.vh" :x="item.left" :y="item.top"
|
v-on:resizing="resize($event,index)"
|
v-on:dragging="resize($event,index)"
|
:parentLimitation="true"
|
:minw="100"
|
:minh="100"
|
: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.status==0"
|
:style="{backgroundImage:`url(${require('@/assets/yellow.png')})`}" class="status-image"></div>
|
<div v-if="item.status==1" :style="{backgroundImage:`url(${require('@/assets/red.png')})`}"
|
class="status-image"></div>
|
<div v-if="item.status==2" :style="{backgroundImage:`url(${require('@/assets/gray.png')})`}"
|
class="status-image"></div>
|
<div v-if="item.status==3" :style="{backgroundImage:`url(${require('@/assets/green.png')})`}"
|
class="status-image"></div>
|
<div
|
:style="{backgroundImage:`url(${item.equipmentImageUrl})`}" 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>
|
</dv-border-box-8>
|
</dv-full-screen-container>
|
</template>
|
|
<script>
|
import VueDragResize from 'vue-drag-resize'
|
|
export default {
|
components: {
|
VueDragResize
|
},
|
data() {
|
return {
|
// 设备信息列表
|
deviceList: [
|
{
|
equipmentId: '123213213123232',// 设备ID
|
equipmentImageUrl: require('@/assets/8.png'), // 设备图片
|
top: 200, // 拖拽元素距盒子顶距离
|
left: 100, // 拖拽元素距盒子左侧距离
|
vw: 100, // 缩放元素宽度
|
vh: 100, // 缩放元素高度
|
fontSize: 12, // 缩放元素字体大小
|
status: 1 // 设备状态 0:待机 1:报警 2:关机 3:运行
|
},
|
{
|
equipmentId: '512346789561232',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 500,
|
left: 753,
|
vw: 100,
|
vh: 100,
|
fontSize: 12,
|
status: 0
|
},
|
{
|
equipmentId: '64746965647653',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 300,
|
left: 860,
|
vw: 100,
|
vh: 100,
|
fontSize: 12,
|
status: 2
|
},
|
{
|
equipmentId: '33548976965462',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 100,
|
left: 380,
|
vw: 100,
|
vh: 100,
|
fontSize: 12,
|
status: 3
|
},
|
{
|
equipmentId: '85484913549253',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 200,
|
left: 1500,
|
vw: 100,
|
vh: 100,
|
fontSize: 12,
|
status: 2
|
}
|
],
|
// 设备状态指示灯列表
|
deviceStatusList: [
|
{
|
label: '关机',
|
value: 2,
|
color: '#A8A8A8'
|
},
|
{
|
label: '待机',
|
value: 0,
|
color: '#FFFF00'
|
},
|
{
|
label: '运行',
|
value: 3,
|
color: '#00EE00'
|
},
|
{
|
label: '报警',
|
value: 1,
|
color: '#FF0000'
|
}
|
]
|
}
|
},
|
computed: {
|
getWorkshopName() {
|
switch (this.$route.params.workshopId) {
|
case '5321':
|
return '长沙车间'
|
case '6312':
|
return '天津车间'
|
case '3463':
|
return '武汉车间'
|
case '8421':
|
return '北京车间'
|
default:
|
return '测试车间'
|
}
|
}
|
},
|
methods: {
|
/**
|
* 通过车间Id调用接口获取设备信息列表
|
* @param workshopId 车间Id
|
*/
|
getDeviceListByApi(workshopId) {
|
console.log('车间Id', workshopId)
|
},
|
/**
|
* 点击保存按钮调用接口保存拖拽后的位置与设备图标尺寸
|
*/
|
saveDevicePositionAndSizeByApi() {
|
console.log('保存位置')
|
},
|
/**
|
* 设备拖拽或缩放时触发事件
|
* @param newRect 拖拽或缩放后的尺寸及距离
|
* @param index 拖拽设备在数组中的下标
|
*/
|
resize(newRect, index) {
|
console.log('newRect', newRect)
|
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].top = newRect.top
|
this.deviceList[index].left = newRect.left
|
},
|
/**
|
* 根据设备状态值获取对应设备数量
|
* @param value 设备状态值
|
* @returns {number} 设备数量
|
*/
|
getDeviceNumberByStatus(value) {
|
return this.deviceList.filter(item => item.status === value).length
|
}
|
},
|
mounted() {
|
// 禁止用户选中内容
|
document.onselectstart = () => false
|
},
|
created() {
|
if (this.$route.params.workshopId) {
|
this.getDeviceListByApi(this.$route.params.workshopId)
|
}
|
}
|
}
|
</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 {
|
position: absolute;
|
right: 200px;
|
top: 0;
|
}
|
}
|
|
.content-container {
|
position: relative;
|
|
.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>
|
