From 3432c3100ccb4c3b78dc0a5f7f242bdcda503a63 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期三, 18 六月 2025 10:45:49 +0800
Subject: [PATCH] 1、终端程序呼叫页面呼叫原因组件由输入框改为多行文本域 2、设备管理页面新增设备图片字段同时在新增和编辑设备时添加设备图片 3、设备监控以及设备看板页面新增故障状态同时替换设备图片为设备管理页面中维护的设备图片而不再是设备所属设备类型图片以及三色灯增加故障状态灯
---
src/views/mdc/base/MdcWorkshopSignage.vue | 219 +++++++++++-------------------------------------------
1 files changed, 44 insertions(+), 175 deletions(-)
diff --git a/src/views/mdc/base/MdcWorkshopSignage.vue b/src/views/mdc/base/MdcWorkshopSignage.vue
index 57586b7..6525c5b 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,23 +58,7 @@
@click="openDetail(item)">
<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')})` }"
+ :style="{ backgroundImage: `url(${getStatusImgUrl(item.equipmentStatus)})` }"
class="status-image"
></div>
<div
@@ -91,8 +66,7 @@
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 // 鍦ㄧ埗鍏冪礌楂樺害璁剧疆鍚庡啀璁剧疆闄愬埗鎷栨嫿鍖哄煙锛屼笉杩欐牱鏈夋鐜囧鑷寸埗鍏冪礌楂樺害鏈缃氨闄愬埗鎷栨嫿
})
@@ -280,15 +232,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 +247,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 +261,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 +300,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 +323,6 @@
document.documentElement.clientHeight ||
document.body.clientHeight
- // 鍒ゆ柇娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︽槸鍚︾瓑浜庡垎杈ㄧ巼锛岃嫢鐩哥瓑鍒欒〃绀鸿繘鍏ユ椂娴忚鍣ㄤ负鍏ㄥ睆妯″紡
- // if (this.windowHeight === screen.height) this.isFullScreen = true
-
window.addEventListener('resize', this.handleWindowSizeChange)
},
beforeDestroy() {
@@ -457,10 +340,6 @@
color: #fff;
.page-header {
- /*font-size: 50px;*/
- /*text-align: center;*/
- /*position: relative;*/
-
.header-left {
height: 100%;
display: flex;
@@ -485,7 +364,6 @@
.single-status-info {
margin: 10px;
- cursor: pointer;
.status-square {
width: 14px;
@@ -526,11 +404,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 +431,5 @@
}
}
}
- }
-
- /deep/ .ant-checkbox-inner {
- background-color: transparent;
- border-color: #fff;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3