From be590d48f66806716c990bdce18d0ed90bf18797 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期二, 04 三月 2025 15:52:28 +0800
Subject: [PATCH] 420项目： 1、大屏车间管理页面新增及编辑时随意输入车间名称调整为选择已有车间 2、增加车间看板拖拽及缩放功能权限功能 3、实现车间看板设备状态数量及图表数据由后台驱动 4、车间看板页面月、周、日利用率图表数据由后台驱动 5、车间看板页面报警信息列表数据由后台驱动 6、车间看板页面调整右侧设备状态判定，同时加入异常状态展示（设备编号背景色变为红色）
---
src/views/mdc/base/modules/WorkshopSignage/DeviceDragLayout.vue | 128 ++++++++++++++++++++++++++++++------------
1 files changed, 92 insertions(+), 36 deletions(-)
diff --git a/src/views/mdc/base/modules/WorkshopSignage/DeviceDragLayout.vue b/src/views/mdc/base/modules/WorkshopSignage/DeviceDragLayout.vue
index bce41c4..be81fb1 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/DeviceDragLayout.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/DeviceDragLayout.vue
@@ -1,7 +1,5 @@
<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"
@@ -16,77 +14,135 @@
:parentW="1500"
:minw="70"
:minh="70"
- :isDraggable="true"
- :isResizable="true"
+ :isDraggable="isSwitchChecked"
+ :isResizable="isSwitchChecked"
:stickSize="6"
- @deactivated="showGuideline = 'none'"
+ @deactivated="isShowGuideline = false"
>
<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')})` }"
+ :style="{ backgroundImage: `url(${getImgView(item.equipmentImage) || require('@/assets/WorskhopSignage/default.png')})` }"
class="device-image"
- ></div>
+ >
+ <div
+ :style="{ backgroundImage: `url(${getCurrentDeviceStatusImage(item.oporation)})` }"
+ class="status-image"
+ ></div>
+ </div>
</div>
- <div
- :style="{ color:workshopDetails.equipmentIdColor?workshopDetails.equipmentIdColor:'#fff',marginTop:'10px' }">
- {{ item.equipmentId }}
- </div>
+ <div :style="{backgroundColor:item.equipmentStatus!==0?'#f00':''}">{{ item.equipmentId }}</div>
</div>
</VueDragResize>
+
+ <template v-if="isShowGuideline">
+ <div class="guideline guidelineX" :style="{top:guidelineXTop+'px'}"></div>
+ <div class="guideline guidelineY" :style="{left:guidelineYLeft+'px'}"></div>
+ </template>
+
+ <a-form layout="inline" v-has="'isCanDragAndResize'">
+ <a-form-item label="鍔熻兘寮�鍏�">
+ <a-switch checked-children="寮�" un-checked-children="鍏�" v-model="isSwitchChecked"
+ :disabled="isHasResizeOrDragDevice"/>
+ </a-form-item>
+
+ <a-form-item label="淇濆瓨鍧愭爣">
+ <a-button type="primary" icon="save" @click="saveDevicePositionAndSizeByApi"
+ :disabled="!isHasResizeOrDragDevice">淇濆瓨
+ </a-button>
+ </a-form-item>
+ </a-form>
</div>
</template>
<script>
+ import signageApi from '@/api/signage'
+ import VueDragResize from 'vue-drag-resize'
+
export default {
name: 'DeviceDragLayout',
- components: {},
+ components: {
+ VueDragResize
+ },
props: {
- deviceList: {
+ currentProductionId: {
+ type: String
+ },
+ getImgView: {
+ type: Function
+ },
+ equipmentStatusList: {
type: Array
}
},
data() {
return {
- showGuideline: 'none',
+ deviceList: [],
+ isShowGuideline: false,
guidelineXTop: 0,
- guidelineYLeft: 0
+ guidelineYLeft: 0,
+ isSwitchChecked: false,
+ isHasResizeOrDragDevice: false
}
},
+ created() {
+ if (!this.currentProductionId) return
+ this.getDeviceListByApi()
+ },
methods: {
+ // 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇璁惧淇℃伅鍒楄〃
+ getDeviceListByApi() {
+ const that = this
+ signageApi.getDeviceListInWorkshopSignagePageApi(that.currentProductionId).then((res) => {
+ if (res.success && res.result && res.result.length > 0) that.deviceList = res.result
+ })
+ },
+
/**
* 璁惧鎷栨嫿鎴栫缉鏀炬椂瑙﹀彂浜嬩欢
* @param newRect 鎷栨嫿鎴栫缉鏀惧悗鐨勫昂瀵稿強璺濈
* @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍�
*/
resize(newRect, index) {
- this.showGuideline = 'block'
+ this.isShowGuideline = true
+ // 褰撹澶囩缉鏀炬垨鎷栨嫿鍚庣鐢╯witch缁勪欢骞跺紑鏀句繚瀛樻寜閽姛鑳斤紙閬垮厤鏃犳晥璇锋眰锛�
+ if (!this.isHasResizeOrDragDevice) {
+ if (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.isHasResizeOrDragDevice = true
+ }
+ }
+ // this.isHasResizeOrDragDevice = true
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
+ },
+
+ // 鐐瑰嚮淇濆瓨鎸夐挳璋冪敤鎺ュ彛淇濆瓨鎷栨嫿鍚庣殑浣嶇疆涓庤澶囧浘鏍囧昂瀵�
+ saveDevicePositionAndSizeByApi() {
+ const that = this
+ signageApi.saveDevicePositionAndSizeApi(that.deviceList)
+ .then((res) => {
+ if (!res.success) return
+ that.$notification.success({
+ message: '娑堟伅',
+ description: res.message
+ })
+ that.isSwitchChecked = that.isHasResizeOrDragDevice = false
+ that.getDeviceListByApi(that.currentProductionId)
+ })
+ },
+
+ /**
+ * 鑾峰彇褰撳墠璁惧鐘舵�佸浘鐗�
+ * @param oporation 鐘舵�佺爜
+ * @returns {any} 璁惧鐘舵�佸浘鐗囪祫婧�
+ */
+ getCurrentDeviceStatusImage(oporation) {
+ const currentStatus = this.equipmentStatusList.find(item => item.value.includes(oporation))
+ return currentStatus.statusImage
}
}
}
--
Gitblit v1.9.3