190 lines
6.4 KiB
Vue
190 lines
6.4 KiB
Vue
<template>
|
||
<Cn-page :loading="loading">
|
||
<view class="detail" slot="body">
|
||
<view class="detail-content" style="font-size: 32rpx">
|
||
<!-- <view class="detail-content-title mb20">发生时间</view> -->
|
||
<view>{{ detail.date }}</view>
|
||
</view>
|
||
<view class="detail-content" style="padding: 0px">
|
||
<view class="detail-content-title pb20 pt20 pl20">终端告警列表</view>
|
||
</view>
|
||
|
||
<view class="event-list">
|
||
<uni-card class="event-item" :class="item.type" v-for="(item, index) in list" :key="index">
|
||
<!-- 头部：图标 + 信息 + 操作 -->
|
||
<view class="event-header">
|
||
<view
|
||
class="event-icon"
|
||
:class="item.devType == 'Direct_Connected_Device' ? 'zl-bgc' : 'jc-bgc'"
|
||
>
|
||
<!-- 动态图标：根据类型切换 -->
|
||
<!-- <uni-icons
|
||
custom-prefix="iconfont"
|
||
type="icon-terminal-box-fill"
|
||
size="35"
|
||
color="#FF0000"
|
||
></uni-icons> -->
|
||
<!-- <Cn-icon-transient :name="`运行告警`" /> -->
|
||
<Cn-icon-transient
|
||
:name="item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备'"
|
||
/>
|
||
<view class="badge1" v-if="item.status == 0"> </view>
|
||
</view>
|
||
<view class="event-info">
|
||
<view class="event-title">
|
||
<text class="event-id">{{ item.devName }}</text>
|
||
<text
|
||
class="event-tag"
|
||
:class="item.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'"
|
||
>{{ item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}</text
|
||
>
|
||
</view>
|
||
<view class="event-desc">
|
||
<text>工程名称：{{ item.engineeringName }}</text>
|
||
<text>项目名称：{{ item.projectName }}</text>
|
||
<!-- <text>事件时间：{{ item.startTime }}</text> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 详情区域 -->
|
||
<view class="event-detail">
|
||
<view v-if="item.interruptCounts">
|
||
通讯中断 {{ item.interruptCounts }} 次，详情如下：
|
||
<view class="textBox">
|
||
<view
|
||
v-for="date in String(item.interruptDetails || '').split('，')"
|
||
class="textBox mb5"
|
||
>{{ date }}</view
|
||
></view
|
||
>
|
||
</view>
|
||
<view v-if="item.warnCounts">
|
||
终端告警 {{ item.warnCounts }} 次，详情如下：
|
||
<view class="textBox">
|
||
<view v-for="val in item.warnDetails" class="textBox mb5">
|
||
{{ val.warnEventTime + '发生' + val.warnEventDesc }}
|
||
</view></view
|
||
>
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
</view>
|
||
</view>
|
||
</Cn-page>
|
||
</template>
|
||
<script>
|
||
import { updateStatus, queryAlarmDetail } from '@/common/api/message'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
detail: {},
|
||
limit: '',
|
||
collapseValue: '0',
|
||
|
||
list: [],
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.loading = true
|
||
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
|
||
this.init()
|
||
if (this.detail.isRead != 1) {
|
||
updateStatus({
|
||
eventIds: [this.detail.eventId],
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
init() {
|
||
queryAlarmDetail({
|
||
devList: this.detail.devIds,
|
||
time: this.detail.date,
|
||
})
|
||
.then((res) => {
|
||
this.list = res.data
|
||
this.loading = false
|
||
})
|
||
.catch(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '../index.scss';
|
||
.detail {
|
||
padding: 20rpx 0;
|
||
|
||
.detail-content {
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
margin-bottom: 20rpx;
|
||
font-size: 28rpx;
|
||
|
||
.detail-content-title {
|
||
font-size: 30rpx;
|
||
color: #111;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
.collapseTop {
|
||
padding: 10rpx 0;
|
||
margin-left: 15px;
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
}
|
||
}
|
||
.frequency {
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
// color: #666666;
|
||
}
|
||
}
|
||
.textBox {
|
||
// border-bottom: 1px solid #eee;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
text-indent: 2em;
|
||
}
|
||
.event-list {
|
||
// background: #fff;
|
||
padding-bottom: 10rpx;
|
||
// .event-icon {
|
||
// background-color: #376cf320;
|
||
// }
|
||
.zl-bgc {
|
||
background-color: #376cf320;
|
||
}
|
||
.jc-bgc {
|
||
background-color: #376cf320;
|
||
}
|
||
.zl-tag {
|
||
background-color: #007aff20;
|
||
color: #007aff;
|
||
}
|
||
.jc-tag {
|
||
background-color: #007aff20;
|
||
color: #007aff;
|
||
}
|
||
}
|
||
/deep/ .uni-collapse-item__title-box {
|
||
padding: 0 15px 0 0;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
font-size: 26rpx !important;
|
||
color: #666666;
|
||
span {
|
||
font-size: 26rpx !important;
|
||
}
|
||
}
|
||
.textBox {
|
||
max-height: 120rpx;
|
||
overflow-y: auto;
|
||
}
|
||
</style>
|