<template>
|
<div>
|
<div class="guideline guidelineX" :style="{top:guidelineXTop+'px',display:showGuideline}"></div>
|
<div class="guideline guidelineY" :style="{left:guidelineYLeft+'px',display:showGuideline}"></div>
|
<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"
|
:parentH="1065"
|
:parentW="1500"
|
:minw="70"
|
:minh="70"
|
:isDraggable="true"
|
:isResizable="true"
|
:stickSize="6"
|
@deactivated="showGuideline = 'none'"
|
>
|
<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/default.png')})` }"
|
class="device-image"
|
></div>
|
</div>
|
<div
|
:style="{ color:workshopDetails.equipmentIdColor?workshopDetails.equipmentIdColor:'#fff',marginTop:'10px' }">
|
{{ item.equipmentId }}
|
</div>
|
</div>
|
</VueDragResize>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'DeviceDragLayout',
|
components: {},
|
props: {
|
deviceList: {
|
type: Array
|
}
|
},
|
data() {
|
return {
|
showGuideline: 'none',
|
guidelineXTop: 0,
|
guidelineYLeft: 0
|
}
|
},
|
methods: {
|
/**
|
* 设备拖拽或缩放时触发事件
|
* @param newRect 拖拽或缩放后的尺寸及距离
|
* @param index 拖拽设备在数组中的下标
|
*/
|
resize(newRect, index) {
|
this.showGuideline = 'block'
|
this.deviceList[index].vw = newRect.width
|
this.deviceList[index].vh = newRect.height
|
this.deviceList[index].coordinateTop = newRect.top
|
this.deviceList[index].coordinateLeft = newRect.left
|
this.guidelineXTop = newRect.top + newRect.height / 2
|
this.guidelineYLeft = newRect.left + newRect.width / 2
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.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;
|
-webkit-align-items: flex-end;
|
-moz-align-items: flex-end;
|
-ms-align-items: flex-end;
|
|
.status-image {
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 10px;
|
height: 80%;
|
margin-right: 5px;
|
}
|
|
.device-image {
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.guideline {
|
position: absolute;
|
border: 1px dashed #ccc;
|
}
|
|
.guidelineX {
|
width: 9999px;
|
left: 0;
|
}
|
|
.guidelineY {
|
top: 0;
|
height: 9999px;
|
}
|
</style>
|
