From 2f519ead537a0b38019bbf64a6075cbb6e08f9b4 Mon Sep 17 00:00:00 2001
From: hyingbo <1363390067@qq.com>
Date: 星期三, 09 七月 2025 13:53:01 +0800
Subject: [PATCH] 车间大屏看板设置设备默认图片
---
src/views/mdc/base/MdcWorkshopSignage.vue | 235 ++++++++++++++--------------------------------------------
1 files changed, 59 insertions(+), 176 deletions(-)
diff --git a/src/views/mdc/base/MdcWorkshopSignage.vue b/src/views/mdc/base/MdcWorkshopSignage.vue
index 57586b7..21b8bc5 100644
--- a/src/views/mdc/base/MdcWorkshopSignage.vue
+++ b/src/views/mdc/base/MdcWorkshopSignage.vue
@@ -6,8 +6,7 @@
<a-row style="height: 100%">
<a-col :span="7" class="header-left">
<a-space>
- <span v-if="!isSwitchChecked">寮�鍚姛鑳�</span>
- <span v-else>鍏抽棴鍔熻兘</span>
+ <span>鍔熻兘寮�鍏�</span>
<a-switch
checked-children="寮�"
un-checked-children="鍏�"
@@ -22,17 +21,9 @@
<a-col :span="10" class="workshop-name">{{ workshopDetails.workshopName }}</a-col>
<a-col :span="7" class="device-status-info">
- <!--<a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"-->
- <!--@click="handleScreenDevive(item)">-->
- <!--<div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>-->
- <!--<div class="status-square" :style="{ backgroundColor: item.color }"></div>-->
- <!--<!–<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>–>-->
- <!--<div>{{getDeviceNumberByStatus(item.value) }}</div>-->
- <!--</a-space>-->
<a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
<div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>
<div class="status-square" :style="{ backgroundColor: item.color }"></div>
- <!--<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>-->
<div>{{getDeviceNumberByStatus(item.value) }}</div>
</a-space>
</a-col>
@@ -67,32 +58,15 @@
@click="openDetail(item)">
<div class="device-status">
<div
- v-if="item.equipmentStatus == 2 || item.equipmentStatus == 1"
- :style="{ backgroundImage: `url(${require('@/assets/yellow.png')})` }"
+ :style="{ backgroundImage: `url(${getStatusImgUrl(item.equipmentStatus)})` }"
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)})` }"
+ :style="{ backgroundImage: `url(${getImgEquipmentView(item.equipmentImage)})` }"
class="device-image"
></div>
</div>
- <div class="device-id" id="deviceId"
- :style="{ color:workshopDetails.equipmentIdColor }">
+ <div :style="{ color:workshopDetails.equipmentIdColor }">
{{ item.equipmentId }}
</div>
</div>
@@ -133,48 +107,32 @@
showGuideline: 'none',
guidelineXTop: 0,
guidelineYLeft: 0,
- deviceList: [
- // {
- // equipmentId: '123213213123232',// 璁惧ID
- // equipmentImage: require('@/assets/8.png'), // 璁惧鍥剧墖
- // coordinateTop: 200, // 鎷栨嫿鍏冪礌璺濈洅瀛愰《璺濈
- // coordinateLeft: 100, // 鎷栨嫿鍏冪礌璺濈洅瀛愬乏渚ц窛绂�
- // vw: 100, // 缂╂斁鍏冪礌瀹藉害
- // vh: 100, // 缂╂斁鍏冪礌楂樺害
- // equipmentStatus: 1 // 璁惧鐘舵�� 0:鍏虫満 22:鎶ヨ 2:寰呮満 3:杩愯 寮�鏈�:1锛堟病鏈夊洓鑹茬伅鏍囪瘑褰掍负寰呮満锛�
- // }
- ], // 璁惧淇℃伅鍒楄〃
- deviceList_copy: [],
+ deviceList: [], // 璁惧淇℃伅鍒楄〃
deviceStatusList: [
- // {
- // label: '鍏ㄩ儴',
- // value: 99,
- // color: '#fff',
- // checked: true
- // },
{
label: '鍏虫満',
value: 0,
- color: '#A8A8A8',
- checked: false
+ color: '#A8A8A8'
},
{
label: '寰呮満',
value: 2,
- color: '#FFFF00',
- checked: false
+ color: '#FFFF00'
},
{
label: '杩愯',
value: 3,
- color: '#00EE00',
- checked: false
+ color: '#00EE00'
},
{
label: '鎶ヨ',
value: 22,
- color: '#FF0000',
- checked: false
+ color: '#FF0000'
+ },
+ {
+ label: '鏁呴殰',
+ value: 5,
+ color: '#C11900'
}
],// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
windowHeight: null,// 褰撳墠娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︼紙锛堜笉鍖呮嫭宸ュ叿鏍忋�佷功绛俱�佸簳閮ㄤ换鍔℃爮锛�
@@ -207,11 +165,9 @@
* @param id 杞﹂棿Id
*/
getDeviceListByApi(id) {
- console.log('閲嶆柊鍒锋柊')
api.getDeviceListInWorkshopSignagePageApi(id).then((res) => {
if (res.result && res.result.length > 0) {
this.deviceList = res.result
- this.deviceList_copy = res.result
}
})
},
@@ -223,12 +179,8 @@
getWorkshopDetailsByApi(id) {
api.getWorkshopDetailByWorkshopIdApi(id).then((res) => {
this.workshopDetails = res.result
- // this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(
- // this.workshopDetails.backgroundImage
- // )})`
this.imgSrc = this.getImgView(this.workshopDetails.backgroundImage)
this.$refs.deviceContainerRef.style.height = (this.windowHeight - this.pageHeaderHeight) + 'px'
- // this.parentH = this.windowHeight - this.pageHeaderHeight
this.parentH = 900
this.parentLimitation = true // 鍦ㄧ埗鍏冪礌楂樺害璁剧疆鍚庡啀璁剧疆闄愬埗鎷栨嫿鍖哄煙锛屼笉杩欐牱鏈夋鐜囧鑷寸埗鍏冪礌楂樺害鏈缃氨闄愬埗鎷栨嫿
})
@@ -241,6 +193,20 @@
getImgView(text) {
if (text && text.indexOf(',') > 0) {
text = text.substring(0, text.indexOf(','))
+ }
+ return getFileAccessHttpUrl(text)
+ },
+ /**
+ * 璁惧鍥剧墖棰勮
+ * @param text 鍥剧墖鍦板潃
+ */
+ getImgEquipmentView(text) {
+ if (text && text.indexOf(',') > 0) {
+ text = text.substring(0, text.indexOf(','))
+ }
+
+ if (text == null || text == '') {
+ return require('../../../assets/default.png')
}
return getFileAccessHttpUrl(text)
},
@@ -280,15 +246,6 @@
* @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍�
*/
resize(newRect, index) {
- // 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.showGuideline = 'block'
this.deviceList[index].vw = newRect.width
this.deviceList[index].vh = newRect.height
@@ -304,8 +261,8 @@
* @returns {number} 璁惧鏁伴噺
*/
getDeviceNumberByStatus(value) {
- if (value === 99) return this.deviceList_copy.length
- return this.deviceList_copy.filter((item) => item.equipmentStatus === value).length
+ if (value === 99) return this.deviceList.length
+ return this.deviceList.filter((item) => item.equipmentStatus === value).length
},
/**
@@ -318,19 +275,38 @@
this.isDraggable = !this.isDraggable
},
- openDetail(item) {
+ /**
+ * 寮�鍚姛鑳借Е鍙戜簨浠�
+ * @param record 鐐瑰嚮鐨勮澶囦俊鎭�
+ */
+ openDetail(record) {
if (!this.isSwitchChecked) {
- if (item.equipmentStatus == 0) {
+ if (record.equipmentStatus == 0) {
this.$message.warning('璁惧澶勪簬鍏虫満鐘舵�侊紒')
return false
}
- console.log(item)
- console.log(this.$refs.EquipmentDetailModal)
- this.$refs.EquipmentDetailModal.initData(item.equId)
- this.$refs.EquipmentDetailModal.timerModel(item.equId)
- // this.equipMessageTimer = setInterval(() => {
- // setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0)
- // },1000*10)
+ this.$refs.EquipmentDetailModal.initData(record.equId)
+ this.$refs.EquipmentDetailModal.timerModel(record.equId)
+ }
+ },
+
+ /**
+ * 鏍规嵁璁惧鐘舵�佸�艰幏鍙栧搴斾笁鑹茬伅鍥剧墖鍦板潃
+ * @param imgStatus 璁惧鐘舵�佸��
+ */
+ getStatusImgUrl(imgStatus) {
+ switch (imgStatus) {
+ case 1:
+ case 2:
+ return require('@/assets/yellow.png')
+ case 3:
+ return require('@/assets/green.png')
+ case 22:
+ return require('@/assets/red.png')
+ case 5:
+ return require('@/assets/orange.png')
+ default:
+ return require('@/assets/gray.png')
}
},
@@ -338,87 +314,11 @@
* 娴忚鍣ㄥ昂瀵稿彂鐢熸敼鍙樻椂瑙﹀彂
*/
handleWindowSizeChange() {
- // this.isFullScreen = !this.isFullScreen
- // if (!this.isFullScreen) location.reload() // 濡傛灉涓哄叏灞忔ā寮忥紝鍒欏湪鍒囨崲妯″紡鏃堕噸鏂板姞杞介〉闈互閲嶆柊鑾峰彇娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴�
const windowHeight =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight
- // this.parentH = 99999
- // const scaleRate = windowHeight / this.windowHeight
- // this.windowHeight = windowHeight
this.$refs.deviceContainerRef.style.height = (windowHeight - this.pageHeaderHeight) + 'px'
- // const timer = setTimeout(() => {
- // this.deviceList.forEach(item => {
- // item.coordinateTop = item.coordinateTop * scaleRate
- // item.vh = item.vh * scaleRate
- // console.log('vh', item.vh)
- // })
- // this.parentH = windowHeight - this.pageHeaderHeight
- // console.log('changeDeviceList', this.deviceList)
- // }, 500)
- // console.log('scaleRate', scaleRate)
- },
-
- checkboxChange(obj) {
- //闇�瑕佸垽鏂槸鍚﹀紑鍚姛鑳斤紝鐩殑鏄负浜嗗叧闂畾鏃跺櫒閬垮厤绛涢�夊悗璁惧琚畾鏃跺埛鏂扮殑鏂拌澶囪鐩�
- if (this.isOperatingDevice) {
- obj.checked = !obj.checked
- if (obj.value !== 99) {
- if (obj.checked) this.checkedStatusCount++
- else this.checkedStatusCount--
- }
-
- if (obj.value == 99) {
- this.deviceStatusList.forEach(item => {
- if (item.value !== obj.value) item.checked = obj.checked
- })
- if (obj.checked) {
- this.deviceList = this.deviceList_copy
- this.checkedStatusCount = this.deviceStatusList.length - 1
- } else {
- this.deviceList = []
- this.checkedStatusCount = 0
- }
- } else {
- this.deviceStatusList.forEach(item => {
- if (item.value === 99) {
- if (this.checkedStatusCount !== this.deviceStatusList.length - 1 || this.checkedStatusCount === 0) item.checked = false
- if (this.checkedStatusCount === this.deviceStatusList.length - 1) item.checked = true
- }
- })
- if (obj.checked) {
- this.deviceList.push(...this.deviceList_copy.filter(item => item.equipmentStatus === obj.value))
- } else {
- this.deviceList = this.deviceList.filter(item => item.equipmentStatus !== obj.value)
- }
- }
- } else {
- this.$notification.warning({
- message: '娑堟伅',
- description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛岀瓫閫�'
- })
- }
- },
-
- handleScreenDevive(obj) {
- //闇�瑕佸垽鏂槸鍚﹀紑鍚姛鑳斤紝鐩殑鏄负浜嗗叧闂畾鏃跺櫒閬垮厤绛涢�夊悗璁惧琚畾鏃跺埛鏂扮殑鏂拌澶囪鐩�
- if (this.isOperatingDevice) {
- obj.checked = true
- this.deviceList = this.deviceList_copy
- this.deviceStatusList.forEach(item => {
- if (item.value !== obj.value) item.checked = false
- })
-
- if (obj.value == 99) this.deviceList = this.deviceList_copy
- else this.deviceList = this.deviceList.filter(item => item.equipmentStatus === obj.value)
-
- } else {
- this.$notification.warning({
- message: '娑堟伅',
- description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛岀瓫閫�'
- })
- }
}
},
created() {
@@ -437,9 +337,6 @@
document.documentElement.clientHeight ||
document.body.clientHeight
- // 鍒ゆ柇娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︽槸鍚︾瓑浜庡垎杈ㄧ巼锛岃嫢鐩哥瓑鍒欒〃绀鸿繘鍏ユ椂娴忚鍣ㄤ负鍏ㄥ睆妯″紡
- // if (this.windowHeight === screen.height) this.isFullScreen = true
-
window.addEventListener('resize', this.handleWindowSizeChange)
},
beforeDestroy() {
@@ -457,10 +354,6 @@
color: #fff;
.page-header {
- /*font-size: 50px;*/
- /*text-align: center;*/
- /*position: relative;*/
-
.header-left {
height: 100%;
display: flex;
@@ -485,7 +378,6 @@
.single-status-info {
margin: 10px;
- cursor: pointer;
.status-square {
width: 14px;
@@ -526,11 +418,7 @@
flex-direction: column;
align-items: center;
justify-content: space-between;
- cursor: default;
-
- &:active {
- border: 1px solid #1890ff;
- }
+ cursor: pointer;
.device-status {
width: 100%;
@@ -557,10 +445,5 @@
}
}
}
- }
-
- /deep/ .ant-checkbox-inner {
- background-color: transparent;
- border-color: #fff;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3