From de0d853f5d199389508054e330340995d9da858b Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期二, 10 十月 2023 11:33:49 +0800
Subject: [PATCH] 1、优化部分页面布局问题 2、完善车间看板设备缩放以及拖拽功能
---
src/views/WorkshopSignage.vue | 136 ++++++++++++++++++++++++++++++++++++--------
1 files changed, 110 insertions(+), 26 deletions(-)
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index cddcdfe..d77fc20 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -8,39 +8,79 @@
</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 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>
- <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>-->
+ </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, // 榧犳爣鍦ㄥ厓绱犲唴鐨刋鍧愭爣
mouseY: 0, // 榧犳爣鍦ㄥ厓绱犲唴鐨刌鍧愭爣,
dragging: false, //鏄惁鍦ㄦ嫋鎷戒腑
- left: 0, // 鍏冪礌宸︿笂瑙掕窛绂荤埗瀹瑰櫒宸︿晶鐨勮窛绂�
- top: 0, // 鍏冪礌宸︿笂瑙掕窛绂荤埗瀹瑰櫒椤堕儴鐨勮窛绂�,
elementId: '',// 琚嫋鎷藉厓绱犵殑id灞炴�у��
elementWidth: '',
elementHeight: '',
@@ -50,6 +90,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 200,
left: 100,
+ vw: 175,
+ vh: 135,
+ fontSize: 20,
status: 1
},
{
@@ -57,6 +100,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 500,
left: 753,
+ vw: 175,
+ vh: 135,
+ fontSize: 20,
status: 0
},
{
@@ -64,6 +110,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 300,
left: 860,
+ vw: 175,
+ vh: 135,
+ fontSize: 20,
status: 2
},
{
@@ -71,6 +120,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 100,
left: 380,
+ vw: 175,
+ vh: 135,
+ fontSize: 20,
status: 3
},
{
@@ -78,6 +130,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 200,
left: 1500,
+ vw: 175,
+ vh: 135,
+ fontSize: 20,
status: 2
}
]
@@ -143,7 +198,7 @@
if (item.top < 0) {
item.top = 0
} else if (item.top + this.elementHeight + 80 > window.innerHeight) {
- item.top = window.innerHeight- this.elementHeight
+ item.top = window.innerHeight - this.elementHeight
}
if (item.left < 0) {
item.left = 0
@@ -170,7 +225,23 @@
*/
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() {
@@ -215,15 +286,28 @@
justify-content: space-between;
cursor: default;
&:active {
- border: 1px solid #00b3ff;
+ border: 1px solid #1890ff;
}
.device-status {
- width: 145px;
+ 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;
+ /*font-size: 20px;*/
}
/*.device-info {*/
/*width: 100%;*/
--
Gitblit v1.9.3