<template>
|
<view>
|
<view class="card-box center dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view style="width: 100vw;" class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">设备 </view>
|
</view>
|
<view>
|
<!-- <text class="text-blue text-sm">更多></text> -->
|
</view>
|
|
</view>
|
|
</view>
|
<view class="fault-box">
|
|
<image style="width: 100%;border-radius: 20rpx; " src="../../../static/image/ganzaoji-x.png"
|
mode="aspectFit">
|
</image>
|
|
|
<view class="fault-inner">
|
<view class="fault-info" v-for="(item,index) in realFaults" :style="getFaultItemStyle(item)">
|
<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>
|
</view>
|
</view>
|
|
</view>
|
|
|
|
<view class="card-box center dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view style="width: 100vw;" class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">实时报警 </view>
|
</view>
|
<view>
|
<text class="text-blue text-sm">{{refreshTime}}</text>
|
</view>
|
|
</view>
|
|
</view>
|
<view class="borderTop" v-for="(item,index) in dataList">
|
<view style="height: 180rpx;display: flex;align-items: center;">
|
<view>
|
<image style="width: 80rpx;height: 80rpx;margin:20rpx;border-radius: 20rpx; "
|
src="../../../static/image/pic_gz.jpg"></image>
|
</view>
|
<view
|
style="display: flex;flex: 1;flex-direction: column; justify-content: space-between; ;height: 100%;padding: 20rpx;">
|
<view class="text-bold">
|
{{$lget(item,'faultName')}}
|
</view>
|
<view class="text-gray text-sm">
|
设备:{{$lget(item,'equName')}}
|
</view>
|
<view class="text-gray text-sm">
|
类型:{{checkFaultType($lget(item,'faultType'))}}
|
</view>
|
<view class="text-gray text-sm">
|
故障时间:{{coverTime($lget(item,'startTime'))}}
|
</view>
|
</view>
|
<view style="width: 100rpx;"></view>
|
|
</view>
|
</view>
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
<script>
|
import dayjs from 'dayjs'
|
export default {
|
data() {
|
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},
|
],
|
}
|
},
|
mounted() {
|
this.mqttData()
|
|
|
},
|
methods: {
|
mqttData() {
|
//处理实时报警数据
|
uni.$on(this.$constant.MQTT_TOPIC_MESSAGE, (data) => {
|
let json = JSON.parse(data);
|
if (json == null || json.data == null || json.topic == null) return false
|
let wdata = json.data
|
let topic = json.topic
|
const realFaultTopic = this.$constant.SERVICE_BROADCAST_TENANT_REAL_FAULT.replace('%s', this
|
.tenantId)
|
const oneceFaultTopic = this.$constant.SERVICE_ONECE_TENANT_REAL_FAULT.replace('%s', this
|
.deviceId)
|
switch (topic) {
|
//topic 实时报警
|
case realFaultTopic:
|
case oneceFaultTopic:
|
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
|
//处理数据统计
|
this.$emit('handleData', this.dataList)
|
break
|
}
|
});
|
},
|
getFaultItemStyle(item) {
|
return {
|
position: 'absolute',
|
top: `${item.position.top}rpx`,
|
left: `${item.position.left}rpx`,
|
fontSize: '24rpx',
|
};
|
},
|
|
checkFaultType(type) {
|
if (type === 1) {
|
return "故障";
|
} else if (type === 2) {
|
return "报警";
|
}
|
},
|
coverTime(timestamp) {
|
if (timestamp) {
|
return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
|
}
|
|
},
|
},
|
computed: {
|
tenantId() {
|
const userinfo = uni.getStorageSync('userinfo');
|
const tenantid = userinfo.loginTenantId
|
return tenantid + "";
|
},
|
deviceId() {
|
return uni.getStorageSync(this.$constant.DEVICE_ID);
|
}
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "components/table/helang-table";
|
|
.app {}
|
|
.card-box {
|
margin: 20rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
background-color: white;
|
border-radius: 20rpx;
|
font-family: Helvetica Neue, Helvetica, sans-serif;
|
|
}
|
|
|
.top {
|
margin: 0 20rpx;
|
border-radius: 0;
|
border-top-left-radius: 20rpx;
|
border-top-right-radius: 20rpx;
|
border-bot-left-radius: 0;
|
border-bot-right-radius: 0;
|
|
}
|
|
.center {
|
margin: 0 20rpx;
|
border-radius: 0;
|
|
}
|
|
.bot {
|
margin: 0 20rpx 20rpx 20rpx;
|
border-top-left-radius: 0;
|
border-top-right-radius: 0;
|
border-bot-left-radius: 20rpx;
|
border-bot-right-radius: 20rpx;
|
}
|
|
|
.title-box {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
font-weight: bold;
|
}
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
font-weight: bold;
|
}
|
}
|
}
|
|
.info-box {
|
margin-top: 20rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
}
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
}
|
}
|
}
|
|
|
.chartsMain {
|
width: 100%;
|
height: 320rpx;
|
padding-top: 15rpx;
|
background: #fff;
|
margin-bottom: 24rpx;
|
border-top: 2rpx solid #f2f2f2;
|
|
.charts {
|
width: 50%;
|
height: 450rpx;
|
box-sizing: border-box;
|
}
|
}
|
|
.tab-box {
|
display: flex;
|
justify-content: center;
|
/* 强制水平居中 */
|
}
|
|
.swiper {
|
height: 2116rpx;
|
}
|
|
.swiper-item-view {
|
height: 2116rpx;
|
|
|
}
|
|
.fault-box {
|
width: 100%;
|
height: 460rpx;
|
position: relative;
|
|
|
.fault-inner {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 20rpx 0;
|
background: transparent;
|
overflow: hidden;
|
|
.fault-info {
|
position: absolute;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
}
|
|
.fault-tag {
|
display: flex;
|
align-items: center;
|
margin-left: 6rpx;
|
height: 28rpx;
|
padding: 0 10rpx;
|
background: gray;
|
border-radius: 5rpx;
|
font-size: 22rpx;
|
font-weight: bold;
|
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-animal {
|
|
-webkit-animation: scaleout 2s infinite ease-in-out;
|
animation: scaleout 2s infinite ease-in-out;
|
}
|
|
@-webkit-keyframes scaleout {
|
0% {
|
-webkit-transform: scale(1);
|
}
|
|
100% {
|
-webkit-transform: scale(1.1);
|
opacity: 0;
|
}
|
}
|
|
@keyframes scaleout {
|
0% {
|
transform: scale(1);
|
-webkit-transform: scale(1);
|
}
|
|
100% {
|
transform: scale(1.1);
|
-webkit-transform: scale(1.1);
|
opacity: 0;
|
}
|
}
|
}
|
}
|
|
|
|
|
|
|
.picBox {
|
margin: 0 20rpx;
|
background-color: white;
|
|
image {
|
border-radius: 8rpx;
|
width: 100%;
|
|
}
|
}
|
|
.borderTop {
|
border-top: 2rpx solid #f2f2f2;
|
padding-top: 20rpx;
|
}
|
|
// 弹出层背景遮罩start
|
.dropdown-mask {
|
background: rgba(0, 0, 0, 0.5);
|
}
|
|
.lock-page {
|
height: 100vh;
|
width: 100vw;
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 998;
|
}
|
|
// 弹出层背景遮罩end
|
</style>
|
