app-govern/pages/message1/comp/transientDetails.vue

<template>
    <Cn-page :loading="loading">
        <view class="detail" slot="body">
            <view class="detail-content" style="font-size: 32rpx">
                <view>{{ detail.startTime }}</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.equipmentName }}</view>
                <view class="mb5"> 监测点名称：{{ detail.lineName }}</view>
                <view class="mb5"> 暂态类型：{{ detail.showName }}</view>
                <view class="mb5" v-if="detail.evtParamTm"> 持续时间：{{ detail.evtParamTm }}s</view>
                <view class="mb5" v-if="detail.evtParamVVaDepth"> 幅值：{{ detail.evtParamVVaDepth }}%</view>
                <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" />
            </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)" />
                    <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>
            <view v-if="detailTab == 1" class="chart-wrapper">
                <ITIC :store="eventStore" style="height: calc(100vh - 360px);" />
            </view>
            <view v-if="detailTab == 2" class="chart-wrapper">
                <F47 :store="eventStore" style="height: calc(100vh - 360px);" />
            </view>
        </view>
    </Cn-page>
</template>
<script>
import { updateStatus } from '@/common/api/message'
import ITIC from './ITIC.vue'
import F47 from './F47.vue'

export default {
    components: { ITIC, F47 },
    data() {
        return {
            loading: true,
            detail: {},
            detailTab: 0,
        }
    },
    computed: {
        eventStore() {
            const hasData = this.detail && (this.detail.id || this.detail.equipmentId)
            if (!hasData) {
                return { data: [], status: 'noMore' }
            }
            const item = {
                ...this.detail,
                evtParamTm: this.detail.evtParamTm || '0s',
                evtParamVVaDepth: this.detail.evtParamVVaDepth || '0%',
            }
            return {
                data: [item],
                status: 'noMore',
            }
        },
    },
    onLoad(options) {
        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: {
        onDetailTabChange(e) {
            this.detailTab = e.currentIndex
        },
        previewImage(url) {
            uni.navigateTo({
                url: `/pages/message1/comp/preview?url=${encodeURIComponent(url)}`,
            })
        },
    },
}
</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;
        }
    }

    .detail-tabs {
        padding: 0 20rpx;
        margin-bottom: 20rpx;
    }

    .chart-container {
        min-height: 600rpx;
    }

    .chart-wrapper {
        background: #fff;
        margin-bottom: 20rpx;
        padding: 20rpx;
    }
}

.segmented-control {
    flex: 1;
    margin-right: 24rpx;
    height: 60rpx;
}
</style>