<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="saveDevicePositionByApi">保存位置</a-button>
|
</div>
|
</header>
|
|
<dv-border-box-8 class="content-container">
|
<!--<div v-for="item in deviceList" :key="item.equipmentId" class="single-device"-->
|
<!--:style="{top:item.top+'px',left:item.left+'px',height:'135px',width:'175px'}" @mousedown="handleMouseDown"-->
|
<!--:id="item.equipmentId">-->
|
<!--<div class="device-status">-->
|
<!--<img v-if="item.status==0" src="@/assets/yellow.png" draggable="false">-->
|
<!--<img v-if="item.status==1" src="@/assets/red.png" draggable="false">-->
|
<!--<img v-if="item.status==2" src="@/assets/gray.png" draggable="false">-->
|
<!--<img v-if="item.status==3" src="@/assets/green.png" draggable="false">-->
|
<!--<img :src="item.equipmentImageUrl" draggable="false">-->
|
<!--</div>-->
|
<!--<div class="device-id">{{item.equipmentId}}</div>-->
|
<!--<!–<div draggable="false" class="device-info">–>-->
|
<!--<!–<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>–>-->
|
<!--<!–<div v-if="item.status==1" class="status-square" style="background-color: red"></div>–>-->
|
<!--<!–<div v-if="item.status==2" class="status-square" style="background-color: green"></div>–>-->
|
<!--<!–<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>–>-->
|
<!--<!–<div class="device-id">{{item.equipmentId}}</div>–>-->
|
<!--<!–</div>–>-->
|
<!--<!–</div>–>-->
|
<!--</div>-->
|
<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="175"
|
:minh="135"
|
:id="item.equipmentId"
|
|
>
|
<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 draggable="false" class="device-info">-->
|
<!--<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>-->
|
<!--<div v-if="item.status==1" class="status-square" style="background-color: red"></div>-->
|
<!--<div v-if="item.status==2" class="status-square" style="background-color: green"></div>-->
|
<!--<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>-->
|
<!--<div class="device-id">{{item.equipmentId}}</div>-->
|
<!--</div>-->
|
</div>
|
</VueDragResize>
|
</dv-border-box-8>
|
</dv-full-screen-container>
|
</template>
|
|
<script>
|
import VueDragResize from 'vue-drag-resize'
|
|
export default {
|
components: {
|
VueDragResize
|
},
|
data() {
|
return {
|
mouseX: 0, // 鼠标在元素内的X坐标
|
mouseY: 0, // 鼠标在元素内的Y坐标,
|
dragging: false, //是否在拖拽中
|
elementId: '',// 被拖拽元素的id属性值
|
elementWidth: '',
|
elementHeight: '',
|
deviceList: [
|
{
|
equipmentId: '123213213123232',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 200,
|
left: 100,
|
vw: 175,
|
vh: 135,
|
fontSize: 20,
|
status: 1
|
},
|
{
|
equipmentId: '512346789561232',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 500,
|
left: 753,
|
vw: 175,
|
vh: 135,
|
fontSize: 20,
|
status: 0
|
},
|
{
|
equipmentId: '64746965647653',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 300,
|
left: 860,
|
vw: 175,
|
vh: 135,
|
fontSize: 20,
|
status: 2
|
},
|
{
|
equipmentId: '33548976965462',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 100,
|
left: 380,
|
vw: 175,
|
vh: 135,
|
fontSize: 20,
|
status: 3
|
},
|
{
|
equipmentId: '85484913549253',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 200,
|
left: 1500,
|
vw: 175,
|
vh: 135,
|
fontSize: 20,
|
status: 2
|
}
|
]
|
}
|
},
|
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)
|
},
|
/**
|
* 拖拽对象鼠标按键按下事件
|
* @param event
|
*/
|
handleMouseDown(event) {
|
this.dragging = true
|
this.mouseX = event.clientX
|
this.mouseY = event.clientY
|
this.elementId = event.currentTarget.id
|
this.top = event.currentTarget.offsetTop
|
this.left = event.currentTarget.offsetLeft
|
document.addEventListener('mousemove', this.handleMouseMove)
|
document.addEventListener('mouseup', this.handleMouseUp)
|
this.elementWidth = +event.currentTarget.style.width.replace('px', '')
|
this.elementHeight = +event.currentTarget.style.height.replace('px', '')
|
},
|
/**
|
* 文档对象鼠标移动事件
|
* @param event
|
*/
|
handleMouseMove(event) {
|
if (this.dragging) {
|
// x方向鼠标偏移量
|
const deltaX = event.clientX - this.mouseX
|
// y方向鼠标偏移量
|
const deltaY = event.clientY - this.mouseY
|
this.left += deltaX
|
this.top += deltaY
|
this.deviceList.forEach(item => {
|
if (item.equipmentId === this.elementId) {
|
item.top = this.top
|
item.left = this.left
|
// 限制拖拽超出区域(缩放浏览器窗口后距四周距离出现问题)
|
if (item.top < 0) {
|
item.top = 0
|
} else if (item.top + this.elementHeight + 80 > window.innerHeight) {
|
item.top = window.innerHeight - this.elementHeight
|
}
|
if (item.left < 0) {
|
item.left = 0
|
} else if (item.left + this.elementWidth > window.innerWidth) {
|
item.left = window.innerWidth - this.elementWidth
|
}
|
}
|
})
|
this.mouseX = event.clientX
|
this.mouseY = event.clientY
|
}
|
},
|
/**
|
* 文档对象鼠标按键弹起事件
|
* @param event
|
*/
|
handleMouseUp(event) {
|
this.dragging = false
|
document.removeEventListener('mousemove', this.handleMouseMove)
|
document.removeEventListener('mouseup', this.handleMouseUp)
|
},
|
/**
|
* 点击保存按钮调用接口保存拖拽后的位置
|
*/
|
saveDevicePositionByApi() {
|
console.log('保存位置')
|
},
|
/**
|
* 设备拖拽或缩放时触发事件
|
* @param newRect 拖拽或缩放后的尺寸及距离
|
* @param index 拖拽设备在数组中的下标
|
*/
|
resize(newRect, index) {
|
console.log('newRect', newRect)
|
if (newRect.width > 200) {
|
this.deviceList[index].fontSize = newRect.width / 10
|
} else {
|
this.deviceList[index].fontSize = 20
|
}
|
this.deviceList[index].top = newRect.top
|
this.deviceList[index].left = newRect.left
|
this.deviceList[index].vw = newRect.width
|
this.deviceList[index].vh = newRect.height
|
}
|
},
|
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;
|
.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%;
|
}
|
}
|
.device-id {
|
/*font-size: 20px;*/
|
}
|
/*.device-info {*/
|
/*width: 100%;*/
|
/*display: flex;*/
|
/*align-items: center;*/
|
/*justify-content: space-between;*/
|
/*.status-square {*/
|
/*width: 14px;*/
|
/*height: 14px;*/
|
/*border: 1px solid #fff;*/
|
/*border-radius: 2px;*/
|
/*}*/
|
/*}*/
|
}
|
}
|
}
|
</style>
|
