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

36
pages/message1/alarm.vue
View File

@@ -3,23 +3,12 @@
<!-- 运行告警 -->
<!-- 卡片 -->
<scroll-view
scroll-y="true"
@refresherrefresh="refresherrefresh"
@scrolltolower="scrolltolower"
:refresher-triggered="triggered"
refresher-enabled="true"
class="event-list"
:style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }"
>
<scroll-view scroll-y="true" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower"
:refresher-triggered="triggered" refresher-enabled="true" class="event-list"
:style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }">
<!-- 循环渲染事件项 -->
<uni-card
class="event-item boxClick"
:class="item.type"
v-for="(item, index) in this.store.data"
:key="index"
@click="jump(item)"
>
<uni-card class="event-item boxClick" :class="item.type" v-for="(item, index) in this.store.data"
:key="index" @click="jump(item)">
<!-- 头部：图标 + 信息 + 操作 -->
<view class="event-header">
<view class="event-icon">
@@ -39,8 +28,9 @@
</view>
<view class="event-desc">
<text>告警终端总数：{{ item.warnNums }}台</text>
<text>质量指标告警终端数：{{ item.interruptCounts }}次</text>
<text>事件触发告警终端数：{{ item.warnCounts }}次</text>
<text v-if="item.onlineRateIsWarn ">在线率偏低</text>
<text v-if="item.integrityIsWarn">完整性偏低</text>
<text v-if="item.warnCounts > 0">事件触发终端告警：{{ item.warnCounts }}次</text>
</view>
</view>
@@ -52,10 +42,8 @@
<text> 告警终端总数{{ item.warnNums }}台 </text>
</view> -->
</uni-card>
<uni-load-more
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
:status="store.status"
></uni-load-more>
<uni-load-more v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
:status="store.status"></uni-load-more>
<Cn-empty v-else style="top: 20%"></Cn-empty>
</scroll-view>
</view>
@@ -102,8 +90,9 @@ export default {
},
jump(item) {
let str = JSON.stringify(item).replace(/%/g, '百分比')
item.status = '1'
uni.navigateTo({ url: '/pages/message1/comp/alarmDetails?detail=' + encodeURIComponent(str) })
item.isRead = 1
},
// 下拉
refresherrefresh() {
@@ -138,6 +127,7 @@ export default {
<style lang="scss" scoped>
@import './index.scss';
/* 列表容器 */
.event-list {
margin-top: 20rpx;

2
pages/message1/comp/F47.vue
View File

@@ -225,7 +225,7 @@ export default {
// 点击查看详情
let item = params.value[3]
let str = JSON.stringify(item).replace(/%/g, '百分比')
uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
// uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
})
},
},

2
pages/message1/comp/ITIC.vue
View File

@@ -217,7 +217,7 @@ export default {
// 点击查看详情
let item = params.value[3]
let str = JSON.stringify(item).replace(/%/g, '百分比')
uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
// uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
})
},
},

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>

25
pages/message1/comp/steadyStateDetails.vue
View File

@@ -13,13 +13,11 @@
<view class="mb5"> 监测点名称：{{ detail.lineName }}</view>
<view class="mb5" style="display: flex">
越限详情：
<view style="flex: 1" class="details">{{ detail.overLimitDesc }}</view></view
>
<view style="flex: 1" class="details">{{ detail.overLimitDesc }}</view>
</view>
</view>
<view class="detail-content">
<view class="detail-content-title mb20"
>指标越限详情<text class="prompt">（仅显示最严重的10组数据）</text></view
>
<view class="detail-content-title mb20">指标越限详情<text class="prompt">（仅显示最严重的10组数据）</text></view>
<uni-collapse accordion v-model="collapseValue">
<uni-collapse-item :title="item.targetName" v-for="item in list">
@@ -35,7 +33,7 @@
</view>
<view class="table-row" v-for="value in item.harmDetailList">
<text>{{ value.statisticsTime }}</text>
<text>{{ value.valueType }}</text>
<text>{{ value.valueType || '/' }}</text>
<text v-if="!value.hasT">{{ value.dataA }}</text>
<text v-if="!value.hasT">{{ value.dataB }}</text>
<text v-if="!value.hasT">{{ value.dataC }}</text>
@@ -105,6 +103,7 @@ export default {
font-weight: 700;
}
}
.limit {
display: flex;
align-items: center;
@@ -112,46 +111,58 @@ export default {
width: 450rpx;
margin-left: auto;
}
.prompt {
font-size: 24rpx;
color: #111;
font-weight: 500;
}
}
.data-table {
margin-top: 20rpx;
background-color: #fff;
overflow: hidden;
color: #666;
.table-header,
.table-row {
display: flex;
justify-content: space-between;
padding: 20rpx 0rpx;
padding: 15rpx 0rpx;
height: 20px;
border-bottom: 1rpx solid #eee;
text {
width: 100rpx;
text-align: center;
font-size: 28rpx;
// color: #333;
&:nth-child(1) {
flex: 1;
}
&:nth-child(2) {
flex: 1;
}
}
}
.table-header {
padding: 0rpx;
padding-bottom: 10rpx;
}
}
/deep/ .uni-collapse-item__title-text {
font-weight: 700;
span {
font-size: 28rpx;
}
}
.details {
max-height: 70px;
overflow-y: auto;

36
pages/message1/comp/transientDetails.vue
View File

@@ -16,42 +16,28 @@
<view class="mb5" v-if="detail.evtParamPhase"> 相别：{{ detail.evtParamPhase }}</view>
</view>
<view class="detail-tabs">
<uni-segmented-control
:current="detailTab"
active-color="#376cf3"
:values="['波形图', 'ITIC', 'F47']"
@clickItem="onDetailTabChange"
/>
<uni-segmented-control :current="detailTab" active-color="#376cf3" :values="['波形图', 'ITIC', 'F47']"
@clickItem="onDetailTabChange" />
</view>
<view v-if="detailTab == 0">
<view class="detail-content">
<view class="detail-content-title mb20">瞬时波形图</view>
<image
style="width: 100%"
:src="detail.instantPics"
mode="widthFix"
v-if="detail.instantPics"
@click="previewImage(detail.instantPics)"
/>
<image style="width: 100%" :src="detail.instantPics" mode="widthFix" v-if="detail.instantPics"
@click="previewImage(detail.instantPics)" />
<text v-else>暂无</text>
</view>
<view class="detail-content">
<view class="detail-content-title mb20">RMS波形图</view>
<image
style="width: 100%"
:src="detail.rmsPics"
mode="widthFix"
v-if="detail.rmsPics"
@click="previewImage(detail.rmsPics)"
/>
<image style="width: 100%" :src="detail.rmsPics" mode="widthFix" v-if="detail.rmsPics"
@click="previewImage(detail.rmsPics)" />
<text v-else>暂无</text>
</view>
</view>
<view v-if="detailTab == 1" class="chart-wrapper">
<ITIC :store="eventStore" style="min-height: 600rpx;" />
<ITIC :store="eventStore" style="height: calc(100vh - 360px);" />
</view>
<view v-if="detailTab == 2" class="chart-wrapper">
<F47 :store="eventStore" style="min-height: 600rpx;" />
<F47 :store="eventStore" style="height: calc(100vh - 360px);" />
</view>
</view>
</Cn-page>
@@ -143,4 +129,10 @@ export default {
padding: 20rpx;
}
}
.segmented-control {
flex: 1;
margin-right: 24rpx;
height: 60rpx;
}
</style>

6
pages/message1/steadyState.vue
View File

@@ -4,8 +4,8 @@
<view class="transientBox">
<view class="statistics pd20">
<view
class="box"
:class="{ boxClick: item.label == filterValue }"
class="box boxClick"
:class="{ boxClick1: item.label == filterValue }"
v-for="item in list"
@click="
filterValue = item.label
@@ -235,7 +235,7 @@ export default {
jump(item) {
let str = JSON.stringify(item).replace(/%/g, '百分比')
item.status = '1'
item.isRead = '1'
uni.navigateTo({ url: '/pages/message1/comp/steadyStateDetails?detail=' + encodeURIComponent(str) })
},

12
pages/message1/transient.vue
View File

@@ -17,7 +17,7 @@
<text class="label">{{ item.label }}</text>
</view>
</view>
<view class="smallLabel"> </view>
<!-- <view class="smallLabel"> </view> -->
</view>
<!-- 卡片 -->
<scroll-view
@@ -112,6 +112,10 @@ export default {
type: Object,
// default: () => {},
},
sortIndex: {
type: [Number,String],
// default: () => {},
},
},
mixins: [list],
data() {
@@ -150,7 +154,7 @@ export default {
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
this.store.params.type = 0
// this.store.params.pageSize = 10000
this.store.params.sortField = this.sort
this.store.params.sortField = this.sortIndex
this.store.params.engineeringid = this.selectValue.engineeringId
this.store.params.projectId = this.selectValue.projectId
this.store.params.deviceId = this.selectValue.deviceId
@@ -224,7 +228,9 @@ export default {
uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
},
setSort(index) {
this.sort = index
console.log(123,this.sortIndex);
// this.sort = index
this.init()
},
// 下拉