From 4dda1f6c996b493477dd7e48714b87e84e25063c Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期一, 10 三月 2025 09:08:48 +0800
Subject: [PATCH] 1、调整车间看板页面设备编号背景色随设备状态变化 2、调整车间看板页面设备编号与设备图片之间的距离 3、调整车间看板页面布局方式，将左侧图表区域宽度固定，若内容超出屏幕则增加横向滚动条
---
src/views/mdc/base/WorkshopSignage.vue | 93 +------------
src/views/mdc/base/modules/WorkshopSignage/DeviceDragLayout.vue | 275 +++++++++++++++++++++-----------------
2 files changed, 159 insertions(+), 209 deletions(-)
diff --git a/src/views/mdc/base/WorkshopSignage.vue b/src/views/mdc/base/WorkshopSignage.vue
index 83acb27..7a124a2 100644
--- a/src/views/mdc/base/WorkshopSignage.vue
+++ b/src/views/mdc/base/WorkshopSignage.vue
@@ -169,7 +169,6 @@
<style lang="less">
.full-screen {
- width: 100%;
height: 1080px;
background-color: #000;
display: flex;
@@ -181,12 +180,15 @@
width: 100%;
height: 100%;
display: flex;
- justify-content: space-between;
+ /*justify-content: space-between;*/
align-items: center;
overflow: auto;
+ flex-wrap: nowrap;
.left-col {
- flex: 1;
+ width: 412px;
+ flex-shrink: 0;
+ /*flex: 1;*/
height: 100%;
display: flex;
padding: 0.5%;
@@ -234,95 +236,14 @@
.right-col {
position: relative;
+ flex-shrink: 0;
width: 1500px;
- height: 1080px;
+ height: 100%;
/*background-image: url("../../../assets/WorskhopSignage/103.png");*/
background-color: #000;
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
-
- .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;
-
- .device-image {
- background-size: 100% 100%;
- background-repeat: no-repeat;
- width: 100%;
- height: 100%;
- position: relative;
- margin-bottom: 10px;
-
- .status-image {
- position: absolute;
- top: 25%;
- left: 25%;
- background-size: 100% 100%;
- background-repeat: no-repeat;
- width: 50%;
- height: 50%;
- }
- }
- }
-
- & > div:last-child {
- color: #fff;
- font-weight: bold;
- font-size: 0.6vw;
- }
- }
-
- .guideline {
- position: absolute;
- border: 1px dashed #fff;
- }
-
- .guidelineX {
- width: 9999px;
- left: 0;
- }
-
- .guidelineY {
- top: 0;
- height: 9999px;
- }
-
- form {
- position: absolute;
- right: 0;
- bottom: 0.5%;
-
- label {
- color: #fff;
- }
-
- .ant-switch {
- background-color: #999;
- }
-
- .ant-switch-checked {
- background-color: #1890FF;
- }
- }
}
}
}
diff --git a/src/views/mdc/base/modules/WorkshopSignage/DeviceDragLayout.vue b/src/views/mdc/base/modules/WorkshopSignage/DeviceDragLayout.vue
index bba3cf5..3eaacc8 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/DeviceDragLayout.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/DeviceDragLayout.vue
@@ -31,7 +31,7 @@
></div>
</div>
</div>
- <div :style="{backgroundColor:item.equipmentStatus!==0?'#f00':''}">{{ item.equipmentId }}</div>
+ <div :style="{backgroundColor:item.equipmentStatus!==0?'#f00':'rgba(0,0,0,.4)'}">{{ item.equipmentId }}</div>
</div>
</VueDragResize>
@@ -56,156 +56,185 @@
</template>
<script>
- import signageApi from '@/api/signage'
- import VueDragResize from 'vue-drag-resize'
+import signageApi from '@/api/signage'
+import VueDragResize from 'vue-drag-resize'
- export default {
- name: 'DeviceDragLayout',
- components: {
- VueDragResize
+export default {
+ name: 'DeviceDragLayout',
+ components: {
+ VueDragResize
+ },
+ props: {
+ currentProductionId: {
+ type: String
},
- props: {
- currentProductionId: {
- type: String
- },
- getImgView: {
- type: Function
- },
- equipmentStatusList: {
- type: Array
- }
+ getImgView: {
+ type: Function
},
- data() {
- return {
- deviceList: [],
- isShowGuideline: false,
- guidelineXTop: 0,
- guidelineYLeft: 0,
- isSwitchChecked: false,
- isHasResizeOrDragDevice: false
- }
+ equipmentStatusList: {
+ type: Array
+ }
+ },
+ data() {
+ return {
+ deviceList: [],
+ isShowGuideline: false,
+ guidelineXTop: 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
+ })
},
- 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
- })
- },
- handleSwitchChange(checked) {
- console.log('checked--------', checked)
- this.$emit('handleTimeIntervalForShortOpen', checked)
- },
+ handleSwitchChange(checked) {
+ console.log('checked--------', checked)
+ this.$emit('handleTimeIntervalForShortOpen', checked)
+ },
- /**
- * 璁惧鎷栨嫿鎴栫缉鏀炬椂瑙﹀彂浜嬩欢
- * @param newRect 鎷栨嫿鎴栫缉鏀惧悗鐨勫昂瀵稿強璺濈
- * @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍�
- */
- resize(newRect, index) {
- 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
- }
+ /**
+ * 璁惧鎷栨嫿鎴栫缉鏀炬椂瑙﹀彂浜嬩欢
+ * @param newRect 鎷栨嫿鎴栫缉鏀惧悗鐨勫昂瀵稿強璺濈
+ * @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍�
+ */
+ resize(newRect, index) {
+ 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
}
+ // 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
}
}
+}
</script>
<style scoped lang="less">
- .single-device {
- position: absolute;
- border: 1px solid transparent;
- padding: 10px;
+
+.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;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- cursor: default;
+ -webkit-align-items: flex-end;
+ -moz-align-items: flex-end;
+ -ms-align-items: flex-end;
- &:active {
- border: 1px solid #1890ff;
- }
-
- .device-status {
+ .device-image {
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
width: 100%;
height: 100%;
- display: flex;
- -webkit-align-items: flex-end;
- -moz-align-items: flex-end;
- -ms-align-items: flex-end;
+ position: relative;
+ margin-bottom: 2px;
.status-image {
+ position: absolute;
+ top: 25%;
+ left: 25%;
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%;
+ width: 50%;
+ height: 50%;
}
}
}
- .guideline {
- position: absolute;
- border: 1px dashed #ccc;
+ & > div:last-child {
+ color: #fff;
+ font-weight: bold;
+ font-size: 0.6vw;
+ }
+}
+
+.guideline {
+ position: absolute;
+ border: 1px dashed #fff;
+}
+
+.guidelineX {
+ width: 9999px;
+ left: 0;
+}
+
+.guidelineY {
+ top: 0;
+ height: 9999px;
+}
+
+form {
+ position: absolute;
+ right: 0;
+ bottom: 0.5%;
+
+ /deep/.ant-form-item-label > label{
+ color: #fff;
}
- .guidelineX {
- width: 9999px;
- left: 0;
+ .ant-switch {
+ background-color: #999;
}
- .guidelineY {
- top: 0;
- height: 9999px;
+ .ant-switch-checked {
+ background-color: #1890FF;
}
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3