From 36ca71eaff11519ef34eb6e4fb192f24bf3bf47c Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期四, 12 十月 2023 11:24:24 +0800
Subject: [PATCH] 新增大屏车间管理页面并基本实现基础功能（除车间删除与批量删除与查询）
---
src/views/WorkshopSignage.vue | 275 ++++++++++++++++++++++++++++++++----------------------
1 files changed, 164 insertions(+), 111 deletions(-)
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index cddcdfe..fc8a61f 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -3,60 +3,82 @@
<header class="page-header">
{{getWorkshopName}}
<div class="header-right">
- <a-button type="primary" icon="save" size="large" @click="saveDevicePositionByApi">淇濆瓨浣嶇疆</a-button>
+ <a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi"
+ v-has="'home:saveDevicePositionAndSize'">淇濆瓨浣嶇疆
+ </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">
+ <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="100"
+ :minh="100"
+ :id="item.equipmentId"
+ :stickSize="6"
+ >
+ <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>
- <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>-->
+ </VueDragResize>
+ <div class="device-status-info">
+ <div v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
+ <div>{{item.label}}</div>
+ <div class="status-square" :style="{backgroundColor:item.color}"></div>
+ <div>{{getDeviceNumberByStatus(item.value)}}</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>
+ 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: '',
+ // 璁惧淇℃伅鍒楄〃
deviceList: [
{
- equipmentId: '123213213123232',
- equipmentImageUrl: require('@/assets/8.png'),
- top: 200,
- left: 100,
- status: 1
+ equipmentId: '123213213123232',// 璁惧ID
+ equipmentImageUrl: require('@/assets/8.png'), // 璁惧鍥剧墖
+ top: 200, // 鎷栨嫿鍏冪礌璺濈洅瀛愰《璺濈
+ left: 100, // 鎷栨嫿鍏冪礌璺濈洅瀛愬乏渚ц窛绂�
+ vw: 100, // 缂╂斁鍏冪礌瀹藉害
+ vh: 100, // 缂╂斁鍏冪礌楂樺害
+ fontSize: 12, // 缂╂斁鍏冪礌瀛椾綋澶у皬
+ status: 1 // 璁惧鐘舵�� 0:寰呮満 1:鎶ヨ 2:鍏虫満 3:杩愯
},
{
equipmentId: '512346789561232',
equipmentImageUrl: require('@/assets/8.png'),
top: 500,
left: 753,
+ vw: 100,
+ vh: 100,
+ fontSize: 12,
status: 0
},
{
@@ -64,6 +86,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 300,
left: 860,
+ vw: 100,
+ vh: 100,
+ fontSize: 12,
status: 2
},
{
@@ -71,6 +96,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 100,
left: 380,
+ vw: 100,
+ vh: 100,
+ fontSize: 12,
status: 3
},
{
@@ -78,7 +106,33 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 200,
left: 1500,
+ vw: 100,
+ vh: 100,
+ fontSize: 12,
status: 2
+ }
+ ],
+ // 璁惧鐘舵�佹寚绀虹伅鍒楄〃
+ deviceStatusList: [
+ {
+ label: '鍏虫満',
+ value: 2,
+ color: '#A8A8A8'
+ },
+ {
+ label: '寰呮満',
+ value: 0,
+ color: '#FFFF00'
+ },
+ {
+ label: '杩愯',
+ value: 3,
+ color: '#00EE00'
+ },
+ {
+ label: '鎶ヨ',
+ value: 1,
+ color: '#FF0000'
}
]
}
@@ -101,76 +155,46 @@
},
methods: {
/**
- * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇璁惧鍒楄〃
+ * 閫氳繃杞﹂棿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() {
+ saveDevicePositionAndSizeByApi() {
console.log('淇濆瓨浣嶇疆')
-
+ },
+ /**
+ * 璁惧鎷栨嫿鎴栫缉鏀炬椂瑙﹀彂浜嬩欢
+ * @param newRect 鎷栨嫿鎴栫缉鏀惧悗鐨勫昂瀵稿強璺濈
+ * @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍�
+ */
+ resize(newRect, index) {
+ console.log('newRect', newRect)
+ if (newRect.width > 100) {
+ if (newRect.width / newRect.height < 2) {
+ this.deviceList[index].fontSize = newRect.width / 10
+ } else {
+ this.deviceList[index].fontSize = newRect.height / 5
+ }
+ } else {
+ this.deviceList[index].fontSize = 12
+ }
+ this.deviceList[index].vw = newRect.width
+ this.deviceList[index].vh = newRect.height
+ this.deviceList[index].top = newRect.top
+ this.deviceList[index].left = newRect.left
+ },
+ /**
+ * 鏍规嵁璁惧鐘舵�佸�艰幏鍙栧搴旇澶囨暟閲�
+ * @param value 璁惧鐘舵�佸��
+ * @returns {number} 璁惧鏁伴噺
+ */
+ getDeviceNumberByStatus(value) {
+ return this.deviceList.filter(item => item.status === value).length
}
},
mounted() {
@@ -196,6 +220,7 @@
font-size: 50px;
text-align: center;
position: relative;
+
.header-right {
position: absolute;
right: 200px;
@@ -205,6 +230,31 @@
.content-container {
position: relative;
+
+ .device-status-info {
+ width: 400px;
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .single-status-info {
+ width: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .status-square {
+ width: 14px;
+ height: 14px;
+ border: 1px solid #fff;
+ border-radius: 2px;
+ }
+ }
+ }
+
.single-device {
position: absolute;
border: 1px solid transparent;
@@ -214,30 +264,33 @@
align-items: center;
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;
- }
- /*.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>
\ No newline at end of file
--
Gitblit v1.9.3