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 class="mb5" > 落点区域：{{ detail.landPoint != null && detail.landPoint !== '' ? detail.landPoint : '未知' }}</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 v-if="listWaveData.length > 0">
                        <waveform v-for="(value, ind) in listWaveData" :index="ind" :unit="unit" :data="value"
                            style="height: 150px;" />
                    </view>
                    <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 v-if="listRmsData.length > 0">
                        <waveform v-for="(value, ind) in listRmsData" :index="ind" :unit="unit" :data="value"
                            style="height: 150px;" />
                    </view>
                    <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'
import waveform from './waveform.vue'
import { analyseWave } from '@/common/api/harmonic.js';

export default {
    components: { ITIC, F47, waveform },
    data() {
        return {
            loading: true,
            detail: {},
            detailTab: 0,
            listWaveData: [],
            listRmsData: [],
            unit: [],
            list: {},

        }
    },
    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) {
        console.log("🚀 ~ options:", 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],
            })
        }
        analyseWave({
            eventId: this.detail.id,
            isApp: true
        }).then(res => {
            this.list = res.data
            this.uni = []
            // 数据
            this.listWaveData = this.bindChartClickEvent(this.list.listWaveData)
            this.listRmsData = this.bindChartClickEvent(this.list.listRmsData)
            // 单位 
            this.unit = this.list.waveTitle.slice(1).reduce((acc, _, i, arr) => {
                if (i % 3 === 0) {
                    const group = arr.slice(i, i + 3);
                    const type = group[0]?.startsWith('U') ? 'kV' :
                        group[0]?.startsWith('I') ? 'A' : '';
                    acc.push(type);
                }
                return acc;
            }, []);
        })





    },
    methods: {
        onDetailTabChange(e) {
            this.detailTab = e.currentIndex
        },
        previewImage(url) {
            uni.navigateTo({
                url: `/pages/message1/comp/preview?url=${encodeURIComponent(url)}`,
            })
        },
        bindChartClickEvent(data) {
            let unit = this.list.waveTitle.slice(1).reduce((acc, _, i, arr) => {
                const group = arr.slice(i, i + 3);
                const type = group[0]?.startsWith('U') ? 'kV' :
                    group[0]?.startsWith('I') ? 'A' : '';
                acc.push(type);
                return acc;

            }, []);

            const result = [];
            // 从第2列开始遍历（索引1），每3个一列分组
            for (let i = 1; i < data[0].length; i += 3) {


                const group = {
                    A: data.map(row => [row[0], this.calculate(row[i], unit[i])]),     // 每组第1个 → A
                    B: data.map(row => [row[0], this.calculate(row[i + 1], unit[i])]), // 每组第2个 → B
                    C: data.map(row => [row[0], this.calculate(row[i + 2], unit[i])]), // 每组第3个 → C
                };
                result.push(group);
            }
            return result;
        },
        calculate(num, key) {
            if (num === null) return null
            let nums = ''
            switch (key) {
                case 'kV':
                    nums = num * Number(this.list.pt) / 1000
                    break
                case 'A':
                    nums = num * Number(this.list.ct)
                    break
            }
            return nums
        }

    },
}
</script>
<style lang="scss">
.detail {
    padding: 20rpx 0;

    .detail-content {
        padding: 20rpx;
        background: #fff;
        margin-bottom: 20rpx;
        font-size: 28rpx;

        .detail-content-title {
            display: inline-flex;
            align-items: center;
            position: relative;
            padding-left: 20rpx;
            font-size: 30rpx;
            color: #111;
            font-weight: 700;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 8rpx;
                height: 28rpx;
                background: $uni-theme-color;
                border-radius: 3rpx;
            }
        }
    }

    .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>