app-govern/pages/message/transientDetail.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.startTime }}</view>
            </view>
            <view class="detail-content">
                <view class="detail-content-title mb20">基础信息</view>
                <view class="mb5"> 设备名称：{{ detail.equipmentName }}</view>
                <view class="mb5"> 项目名称：{{ detail.projectName }} </view>
                <view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
                <view class="mb5"> 事件名称：{{ detail.showName }}</view>
                <view class="mb5" v-for="(item, textIndex) in detail.dataSet" :key="textIndex">
                    {{ item.showName + ':' + (item.value == 3.1415926 ? '-' : item.value) + (item.unit || '') }}
                </view>
            </view>
            <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)"
                />
                <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)"
                />
                <text v-else>暂无</text>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import { updateStatus } from '@/common/api/message'

export default {
    data() {
        return {
            loading: true,
            detail: {},
        }
    },
    onLoad(options) {
        console.log(options.detail)
        this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
        this.detail.rmsPics && (this.detail.rmsPics = this.$config.static + this.detail.rmsPics)
        this.detail.instantPics && (this.detail.instantPics = this.$config.static + this.detail.instantPics)
        this.loading = false
        if (this.detail.status != 1) {
            updateStatus({
                eventIds: [this.detail.id],
            })
        }
    },
    methods: {
        previewImage(url) {
            uni.previewImage({
                urls: [url],
            })
        },
    },
}
</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: 32rpx;
            color: #111;
            font-weight: 700;
        }
    }
}
</style>