160 lines
5.3 KiB
Vue
160 lines
5.3 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.statisticsDate }}</view>
|
||
</view>
|
||
<view class="detail-content">
|
||
<view class="detail-content-title mb20">基础信息</view>
|
||
<view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
|
||
<view class="mb5"> 项目名称：{{ detail.projectName }} </view>
|
||
<view class="mb5"> 设备名称：{{ detail.devName }} </view>
|
||
<view class="mb5"> 监测点名称：{{ detail.lineName }}</view>
|
||
<view class="mb5" style="display: flex">
|
||
越限详情：
|
||
<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
|
||
>
|
||
|
||
<uni-collapse accordion v-model="collapseValue">
|
||
<uni-collapse-item :title="item.targetName" v-for="item in list">
|
||
<view class="data-table">
|
||
<view class="table-header">
|
||
<text>时间</text>
|
||
<text>数据类型</text>
|
||
<text v-if="!item.harmDetailList[0].hasT">A相</text>
|
||
<text v-if="!item.harmDetailList[0].hasT">B相</text>
|
||
<text v-if="!item.harmDetailList[0].hasT">C相</text>
|
||
<text v-if="item.harmDetailList[0].hasT">总相</text>
|
||
<text>限值</text>
|
||
</view>
|
||
<view class="table-row" v-for="value in item.harmDetailList">
|
||
<text>{{ value.statisticsTime }}</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>
|
||
<text v-if="value.hasT">{{ value.dataT }}</text>
|
||
<text>{{ value.overLimitData }}</text>
|
||
</view>
|
||
</view>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
</view>
|
||
</view>
|
||
</Cn-page>
|
||
</template>
|
||
<script>
|
||
import { updateStatus, queryHarmonicDetail } from '@/common/api/message'
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
detail: {},
|
||
list: [],
|
||
collapseValue: '0',
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// console.log(options.detail)
|
||
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
|
||
this.init()
|
||
if (this.detail.isRead != 1) {
|
||
updateStatus({
|
||
eventIds: [this.detail.eventId],
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
init() {
|
||
queryHarmonicDetail({
|
||
lineId: this.detail.lineId,
|
||
time: this.detail.statisticsDate,
|
||
})
|
||
.then((res) => {
|
||
this.list = res.data
|
||
this.loading = false
|
||
})
|
||
.catch(() => {
|
||
this.loading = false
|
||
})
|
||
|
||
// }
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.detail {
|
||
padding: 20rpx 0;
|
||
|
||
.detail-content {
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
margin-bottom: 20rpx;
|
||
font-size: 26rpx;
|
||
|
||
.detail-content-title {
|
||
font-size: 30rpx;
|
||
color: #111;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
.limit {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: end;
|
||
width: 450rpx;
|
||
margin-left: auto;
|
||
}
|
||
.prompt {
|
||
font-size: 24rpx;
|
||
color: #111;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.data-table {
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
.table-header,
|
||
.table-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
text {
|
||
width: 100rpx;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
// 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;
|
||
}
|
||
</style>
|