app-govern/pages/device/APF/comp/basic.vue

<template>
    <view class="basic">
        <view class="grid-card">
            <view class="grid-card-title">电网电流</view>
            <view class="grid-card-content-3">
                <view class="item item-title">名称</view>
                <view class="item item-title">有效值(A)</view>
                <view class="item item-title">THDI(%)</view>
                <template v-for="(item, index) in renderData.电网电流">
                    <view class="item">{{ item.phase }}</view>
                    <view class="item">{{ item['Apf_RmsI_Sys(A)'] || '-' }}</view>
                    <view class="item">{{ item['Apf_ThdA_Sys(%)'] || '-' }}</view>
                </template>
            </view>
        </view>
        <view class="grid-card">
            <view class="grid-card-title">电网电压</view>
            <view class="grid-card-content-4">
                <view class="item item-title">名称</view>
                <view class="item item-title">电压(V)</view>
                <view class="item item-title">频率(Hz)</view>
                <view class="item item-title">THDU(%)</view>
                <template v-for="(item, index) in renderData.电网电压">
                    <view class="item">{{ item.phase }}</view>
                    <view class="item">{{ item['Apf_PhV_Sys(V)'] || '-' }}</view>
                    <view class="item">{{ item['Apf_Freq(Hz)'] || '-' }}</view>
                    <view class="item">{{ item['Apf_ThdU_Sys(%)'] || '-' }}</view>
                </template>
            </view>
        </view>
        <view class="grid-card">
            <view class="grid-card-title">负载电流</view>
            <view class="grid-card-content-3">
                <view class="item item-title">名称</view>
                <view class="item item-title">有效值(A)</view>
                <view class="item item-title">THDI(%)</view>
                <template v-for="(item, index) in renderData.负载电流">
                    <view class="item">{{ item.phase }}</view>
                    <view class="item">{{ item['Apf_RmsI_Load(A)'] || '-' }}</view>
                    <view class="item">{{ item['Apf_ThdA_Load(%)'] || '-' }}</view>
                </template>
            </view>
        </view>
        <view class="grid-card">
            <view class="grid-card-title">补偿电流</view>
            <view class="grid-card-content-3">
                <view class="item item-title">名称</view>
                <view class="item item-title">有效值(A)</view>
                <view class="item item-title">负载率(%)</view>
                <template v-for="(item, index) in renderData.补偿电流">
                    <view class="item">{{ item.phase }}</view>
                    <view class="item">{{ item['Apf_RmsI_TolOut(A)'] || '-' }}</view>
                    <view class="item">-</view>
                </template>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            renderData: {
                电网电流: [],
                电网电压: [],
                负载电流: [],
                补偿电流: [],
                未知:[]
            },
        }
    },
    props: {
        basicData: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    watch: {
        basicData: {
            handler: function (newVal, oldVal) {

                newVal.forEach(item => {
                    if (item.phase === 'avg') {
                        return
                    }
                    let key = ''
                    switch (item.statisticalName) {
                        case 'Apf_RmsI_Sys(A)':
                            key = '电网电流'
                            break
                        case 'Apf_ThdA_Sys(%)':
                            key = '电网电流'
                            break
                        case 'Apf_PhV_Sys(V)':
                            key = '电网电压'
                            break
                        case 'Apf_Freq(Hz)':
                            key = '电网电压'
                            break
                        case 'Apf_ThdU_Sys(%)':
                            key = '电网电压'
                            break
                        case 'Apf_RmsI_Load(A)':
                            key = '负载电流'
                            break
                        case 'Apf_ThdA_Load(%)':
                            key = '负载电流'
                            break
                        case 'Apf_RmsI_TolOut(A)':
                            key = '补偿电流'
                            break
                        case 'Apf_PhV_Sys(V)':
                            key = '补偿电流'
                            break
                        case 'Apf_PhV_Sys(V)':
                            key = '补偿电流'
                            break
                        default:
                            key = '未知'
                            break
                    }

                    let index = this.renderData[key].findIndex((item2) => {
                        return item2.phase === item.phase
                    })
                    if (index > -1) {
                        this.renderData[key][index][item.statisticalName] = item.statisticalData || '-'
                    } else {
                        this.renderData[key].push({
                            phase: item.phase,
                            [item.statisticalName]: item.statisticalData || '-',
                        })
                    }
                })
                console.log(this.renderData)
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
    },
}
</script>
<style lang="scss">
.basic {
}
</style>