App/app-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

绘制电脑治理信息页面

Browse Source
This commit is contained in:
guanj
2026-05-27 10:10:19 +08:00
parent 17e47c1f07
commit 7bcc68a9df
35 changed files with 2910 additions and 1492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
pages/message1/comp/alarmDetails.vue
View File

@@ -13,10 +13,8 @@
<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'"
>
<view class="event-icon"
:class="item.devType == 'Direct_Connected_Device' ? 'zl-bgc' : 'jc-bgc'">
<!-- 动态图标：根据类型切换 -->
<!-- <uni-icons
custom-prefix="iconfont"
@@ -25,46 +23,55 @@
color="#FF0000"
></uni-icons> -->
<!-- <Cn-icon-transient :name="`运行告警`" /> -->
<Cn-icon-transient
:name="item.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备'"
/>
<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
>
<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 v-if="item.dataDetails.onlineRate.isAbnormal">在线率：{{
item.dataDetails.onlineRate.value }}%　限值：{{ item.dataDetails.onlineRate.threshold
}}% </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 v-if="item.dataDetails.onlineRate.isAbnormal">
<text>在线率：
{{item.dataDetails.onlineRate.value }}%　
</text>
</view>
<view v-if="item.warnCounts">
<view v-if="hasIntegrityAbnormal(item)" class="mt10">
数据完整性：
<view class="data-table">
<view class="table-header">
<text>监测点名称</text>
<text>完整性</text>
</view>
<view class="table-row"
v-for="value in item.dataDetails.integrity.monitorPoints.filter((p) => p.isAbnormal === true)">
<text>{{ value.monitorName }}</text>
<text>{{ value.value }}%</text>
</view>
</view>
</view>
<view v-if="item.warnCounts" class="mt10">
终端告警 {{ item.warnCounts }} 次，详情如下：
<view class="textBox">
<view v-for="val in item.warnDetails" class="textBox mb5">
{{ val.warnEventTime + '发生' + val.warnEventDesc }}
</view></view
>
</view>
</view>
</view>
</view>
</uni-card>
@@ -97,6 +104,11 @@ export default {
}
},
methods: {
hasIntegrityAbnormal(item) {
const points = item?.dataDetails?.integrity?.monitorPoints
if (!Array.isArray(points) || !points.length) return false
return points.every((p) => p.isAbnormal === true)
},
init() {
queryAlarmDetail({
devList: this.detail.devIds,
@@ -115,6 +127,7 @@ export default {
</script>
<style lang="scss" scoped>
@import '../index.scss';
.detail {
padding: 20rpx 0;
@@ -130,60 +143,102 @@ export default {
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;
}
.data-table {
margin-top: 10rpx;
background-color: #fff;
overflow: hidden;
.table-header,
.table-row {
display: flex;
justify-content: space-between;
padding: 15rpx 0rpx;
border-bottom: 1rpx solid #eee;
height: 20px;
text {
text-align: center;
font-size: 28rpx;
flex: 1;
}
}
.table-header {
padding: 0rpx;
padding-bottom: 10rpx;
}
}
</style>