<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 style="width: 175px;height: 135px;background-color: red;position: absolute;top: 200px;left: 100px"></div>-->
|
</dv-border-box-8>
|
</dv-full-screen-container>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
mouseX: 0, // 鼠标在元素内的X坐标
|
mouseY: 0, // 鼠标在元素内的Y坐标,
|
dragging: false, //是否在拖拽中
|
left: 0, // 元素左上角距离父容器左侧的距离
|
top: 0, // 元素左上角距离父容器顶部的距离,
|
elementId: '',// 被拖拽元素的id属性值
|
elementWidth: '',
|
elementHeight: '',
|
deviceList: [
|
{
|
equipmentId: '123213213123232',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 200,
|
left: 100,
|
status: 1
|
},
|
{
|
equipmentId: '512346789561232',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 500,
|
left: 753,
|
status: 0
|
},
|
{
|
equipmentId: '64746965647653',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 300,
|
left: 860,
|
status: 2
|
},
|
{
|
equipmentId: '33548976965462',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 100,
|
left: 380,
|
status: 3
|
},
|
{
|
equipmentId: '85484913549253',
|
equipmentImageUrl: require('@/assets/8.png'),
|
top: 200,
|
left: 1500,
|
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('保存位置')
|
|
}
|
},
|
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 #00b3ff;
|
}
|
.device-status {
|
width: 145px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.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>
|
