<template>
|
<dv-full-screen-container class="full-screen-container">
|
<header class="page-header">
|
测试车间
|
<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'}" @mousedown="handleMouseDown" :id="item.equipmentId">
|
<img :src="item.equipmentImageUrl" draggable="false">
|
<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>
|
</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属性值
|
deviceList: [
|
{
|
equipmentId: '123213213123232',
|
equipmentStatus: 0,
|
equipmentImageUrl: require('../assets/8.png'),
|
top: 200,
|
left: 100,
|
status: 1
|
},
|
{
|
equipmentId: '512346789561232',
|
equipmentStatus: 0,
|
equipmentImageUrl: require('../assets/8.png'),
|
top: 500,
|
left: 753,
|
status: 0
|
},
|
{
|
equipmentId: '64746965647653',
|
equipmentStatus: 0,
|
equipmentImageUrl: require('../assets/8.png'),
|
top: 300,
|
left: 860,
|
status: 2
|
},
|
{
|
equipmentId: '33548976965462',
|
equipmentStatus: 0,
|
equipmentImageUrl: require('../assets/8.png'),
|
top: 100,
|
left: 380,
|
status: 3
|
},
|
{
|
equipmentId: '85484913549253',
|
equipmentStatus: 0,
|
equipmentImageUrl: require('../assets/8.png'),
|
top: 200,
|
left: 1500,
|
status: 2
|
}
|
]
|
}
|
},
|
methods: {
|
/**
|
* 拖拽对象鼠标按键按下事件
|
* @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)
|
},
|
/**
|
* 文档对象鼠标移动事件
|
* @param event
|
*/
|
handleMouseMove(event) {
|
if (this.dragging) {
|
const deltaX = event.clientX - this.mouseX
|
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
|
}
|
})
|
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(){
|
|
}
|
},
|
mounted() {
|
// 禁止用户选中内容
|
document.onselectstart = () => false
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.full-screen-container {
|
background-image: url('../assets/Bj.jpg');
|
color: #fff;
|
width: 100vw;
|
height: 100vh;
|
position: relative;
|
.page-header {
|
font-size: 50px;
|
text-align: center;
|
position: relative;
|
.header-right{
|
position: absolute;
|
right: 200px;
|
top: 0;
|
}
|
}
|
.content-container {
|
.single-device {
|
position: absolute;
|
border: 1px solid transparent;
|
padding: 5px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
&:active {
|
border: 1px solid #00b3ff;
|
}
|
.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>
|
