分支自 mobile/lbdry-uniapp
pages/tabBar/components/realWarning.vue
@@ -22,7 +22,12 @@ <view class="fault-inner"> <view class="fault-info" v-for="(item,index) in realFaults" :style="getFaultItemStyle(item)"> <view class="fault-info" v-for="(item,index) in realFaults" :style="{ position: 'absolute', top: item.position.top + 'rpx', left: item.position.left + 'rpx', fontSize: '24rpx' }"> <view :class="['fault-animal', item.type === 1 ? 'fault-marker' : 'warn-marker']"></view> <view :class="['fault-tag', item.type === 1 ? 'fault-text' : 'warn-text']">{{item.name}}</view> </view> @@ -88,41 +93,320 @@ return { dataList: [], //实时报警数据更新时间（一般10s） refreshTime: '', realFaults:[], allFaults: [{ id: 1, name: '设备急停（总）', type: 1, position: {top: 70,left: 230},show: false}, { id: 2, name: '左前急停', type: 1, position: {top: 100,left: 250},show: false}, { id: 3, name: '出料急停', type: 1, position: {top: 130,left: 230},show: false}, { id: 4, name: '面板急停', type: 1, position: {top: 160,left: 250},show: false}, { id: 5, name: '风箱升超时', type: 1, position: {top: 190,left: 230},show: false}, { id: 6, name: '风箱降超时', type: 1, position: {top: 220,left: 250},show: false}, { id: 7, name: '风机过流', type: 1, position: {top: 250,left: 230},show: false}, { id: 8, name: '滚筒升超时', type: 1, position: {top: 280,left: 250},show: false}, { id: 9, name: '滚筒降超时', type: 1, position: {top: 310,left: 230},show: false}, { id: 10, name: '滚筒电机过流', type: 1, position: {top: 340,left: 250},show: false}, { id: 11, name: '温度失控', type: 1, position: {top: 370,left: 230},show: false}, { id: 12, name: '左前门报警', type: 2, position: {top: 100,left: 0},show: false}, { id: 13, name: '左后门报警', type: 2, position: {top: 130,left: 20},show: false}, { id: 14, name: '右前门报警', type: 2, position: {top: 160,left: 0},show: false}, { id: 15, name: '右后门报警', type: 2, position: {top: 190,left: 20},show: false}, { id: 16, name: '滚筒不在高位', type: 2, position: {top: 220,left: 0},show: false}, { id: 17, name: '风箱不在高位', type: 2, position: {top: 250,left: 20},show: false}, { id: 18, name: '风箱不在低位', type: 2, position: {top: 280,left: 0},show: false}, { id: 19, name: '加热位传感器报警', type: 2, position: {top: 310,left: 20},show: false}, { id: 20, name: '左前风箱高位', type: 2, position: {top: 340,left: 0},show: false}, { id: 21, name: '左前风箱低位', type: 2, position: {top: 370,left: 20},show: false}, { id: 22, name: '左后风箱高位', type: 2, position: {top: 100,left: 430},show: false}, { id: 23, name: '左后风箱低位', type: 2, position: {top: 130,left: 450},show: false}, { id: 24, name: '右前风箱高位', type: 2, position: {top: 160,left: 430},show: false}, { id: 25, name: '右前风箱低位', type: 2, position: {top: 190,left: 450},show: false}, { id: 26, name: '右后风箱高位', type: 2, position: {top: 220,left: 430},show: false}, { id: 27, name: '右后风箱低位', type: 2, position: {top: 250,left: 450},show: false}, { id: 28, name: '左前滚筒低位', type: 2, position: {top: 280,left: 430},show: false}, { id: 29, name: '左后滚筒低位', type: 2, position: {top: 310,left: 450},show: false}, { id: 30, name: '右前滚筒低位', type: 2, position: {top: 340,left: 430},show: false}, { id: 31, name: '右后滚筒低位', type: 2, position: {top: 370,left: 450},show: false}, ], refreshTime: '', realFaults: [], allFaults: [{ id: 1, name: '设备急停（总）', type: 1, position: { top: 70, left: 230 }, show: false }, { id: 2, name: '左前急停', type: 1, position: { top: 100, left: 250 }, show: false }, { id: 3, name: '出料急停', type: 1, position: { top: 130, left: 230 }, show: false }, { id: 4, name: '面板急停', type: 1, position: { top: 160, left: 250 }, show: false }, { id: 5, name: '风箱升超时', type: 1, position: { top: 190, left: 230 }, show: false }, { id: 6, name: '风箱降超时', type: 1, position: { top: 220, left: 250 }, show: false }, { id: 7, name: '风机过流', type: 1, position: { top: 250, left: 230 }, show: false }, { id: 8, name: '滚筒升超时', type: 1, position: { top: 280, left: 250 }, show: false }, { id: 9, name: '滚筒降超时', type: 1, position: { top: 310, left: 230 }, show: false }, { id: 10, name: '滚筒电机过流', type: 1, position: { top: 340, left: 250 }, show: false }, { id: 11, name: '温度失控', type: 1, position: { top: 370, left: 230 }, show: false }, { id: 12, name: '左前门报警', type: 2, position: { top: 100, left: 0 }, show: false }, { id: 13, name: '左后门报警', type: 2, position: { top: 130, left: 20 }, show: false }, { id: 14, name: '右前门报警', type: 2, position: { top: 160, left: 0 }, show: false }, { id: 15, name: '右后门报警', type: 2, position: { top: 190, left: 20 }, show: false }, { id: 16, name: '滚筒不在高位', type: 2, position: { top: 220, left: 0 }, show: false }, { id: 17, name: '风箱不在高位', type: 2, position: { top: 250, left: 20 }, show: false }, { id: 18, name: '风箱不在低位', type: 2, position: { top: 280, left: 0 }, show: false }, { id: 19, name: '加热位传感器报警', type: 2, position: { top: 310, left: 20 }, show: false }, { id: 20, name: '左前风箱高位', type: 2, position: { top: 340, left: 0 }, show: false }, { id: 21, name: '左前风箱低位', type: 2, position: { top: 370, left: 20 }, show: false }, { id: 22, name: '左后风箱高位', type: 2, position: { top: 100, left: 430 }, show: false }, { id: 23, name: '左后风箱低位', type: 2, position: { top: 130, left: 450 }, show: false }, { id: 24, name: '右前风箱高位', type: 2, position: { top: 160, left: 430 }, show: false }, { id: 25, name: '右前风箱低位', type: 2, position: { top: 190, left: 450 }, show: false }, { id: 26, name: '右后风箱高位', type: 2, position: { top: 220, left: 430 }, show: false }, { id: 27, name: '右后风箱低位', type: 2, position: { top: 250, left: 450 }, show: false }, { id: 28, name: '左前滚筒低位', type: 2, position: { top: 280, left: 430 }, show: false }, { id: 29, name: '左后滚筒低位', type: 2, position: { top: 310, left: 450 }, show: false }, { id: 30, name: '右前滚筒低位', type: 2, position: { top: 340, left: 430 }, show: false }, { id: 31, name: '右后滚筒低位', type: 2, position: { top: 370, left: 450 }, show: false }, ], } }, mounted() { @@ -149,13 +433,13 @@ if (wdata.length === 0) return false; this.dataList = wdata this.refreshTime = "更新时间:" + dayjs().format('HH:mm:ss'); const realFaultNames = this.dataList.map(item => item.faultName); const realFaults = this.allFaults.filter(item=> realFaultNames.some(name => name.startsWith(item.name) )) this.realFaults = realFaults const realFaultNames = this.dataList.map(item => item.faultName); const realFaults = this.allFaults.filter(item => realFaultNames.some(name => name.startsWith(item.name) )) this.realFaults = realFaults //处理数据统计 this.$emit('handleData', this.dataList) break @@ -193,7 +477,7 @@ }, deviceId() { return uni.getStorageSync(this.$constant.DEVICE_ID); } } }, } @@ -336,54 +620,60 @@ right: 0; bottom: 0; padding: 20rpx 0; background: transparent; background: transparent; overflow: hidden; .fault-info { position: absolute; display: flex; align-items: center; justify-content: center; justify-content: center; } .fault-tag { display: flex; align-items: center; .fault-tag { display: flex; align-items: center; margin-left: 6rpx; height: 28rpx; height: 28rpx; padding: 0 10rpx; background: gray; border-radius: 5rpx; border-radius: 5rpx; font-size: 22rpx; font-weight: bold; color: red; white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分用省略号表示 */ color: red; white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分用省略号表示 */ } .fault-marker{ width: 20rpx; height: 20rpx; background: red; border-radius: 50%; } .warn-marker{ width: 24rpx; height: 24rpx; background: orange; border-radius: 50%; } .fault-text{ color: red; } .warn-text{ color: orange; } .fault-marker { width: 20rpx; height: 20rpx; background: red; border-radius: 50%; } .warn-marker { width: 24rpx; height: 24rpx; background: orange; border-radius: 50%; } .fault-text { color: red; } .warn-text { color: orange; } .fault-animal { -webkit-animation: scaleout 2s infinite ease-in-out; animation: scaleout 2s infinite ease-in-out; }
