app-govern/pages/message1/comp/steadyStateDetails.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: 28rpx;

        .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: 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;
}
</style>