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

<template>
    <view>
        <uni-load-more status="loading" v-if="IOData.length == 0"></uni-load-more>
        <view class="basic mt10" v-else>
            <view class="params-wrap">
                <view class="section-title-row">
                    <view class="section-title">
                        <view class="grid-card-title-with-icon"></view>
                        <text>温度</text>
                    </view>
                </view>
                <view class="params-section">
                    <view
                        v-for="(rowItems, rowIdx) in chunkedChildren(temperatureCards)"
                        :key="'temp-' + rowIdx"
                        class="double-row"
                    >
                        <view v-for="(child, childIdx) in rowItems" :key="childIdx" class="param-group">
                            <view class="param-title">
                                <text>{{ child.name }}</text>
                            </view>
                            <view class="param-value-wrap">
                                <text class="param-value">{{ child.value }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="params-wrap" v-if="showModuleSection">
                <view class="section-title-row">
                    <view class="section-title">
                        <view class="grid-card-title-with-icon"></view>
                        <text>状态</text>
                    </view>
                </view>
                <view class="params-section">
                    <view
                        v-for="(rowItems, rowIdx) in chunkedChildren(moduleCards)"
                        :key="'module-' + rowIdx"
                        class="double-row"
                    >
                        <view v-for="(child, childIdx) in rowItems" :key="childIdx" class="param-group">
                            <view class="param-title">
                                <text>{{ child.name }}</text>
                            </view>
                            <view class="param-value-wrap">
                                <text
                                    class="param-value"
                                    :class="{ 'param-value--offline': child.value === '离线' }"
                                >{{ child.value }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import { getModuleState } from '@/common/api/harmonic.js'

export default {
    props: {
        IOData: {
            type: Array,
            default: () => [],
        },
        ndid: {
            type: String,
        },
    },
    data() {
        return {
            list: [],
            userInfo: {},
        }
    },
    computed: {
        renderData() {
            const arr = []
            const data = this.IOData || []
            for (let i = 0; i < data.length; i += 4) {
                const group = data.slice(i, i + 4).map((item) => {
                    const next = { ...item }
                    if (!Number.isInteger(next.value) && next.value !== '') {
                        next.value = (next.value - 0).toFixed(2)
                    }
                    return next
                })
                while (group.length < 4) {
                    group.push({})
                }
                arr.push(group)
            }
            return arr
        },
        moduleData() {
            const arr = []
            for (let i = 0; i < this.list.length; i += 4) {
                const group = this.list.slice(i, i + 4)
                while (group.length < 4) {
                    group.push({})
                }
                arr.push(group)
            }
            return arr
        },
        temperatureCards() {
            const cards = []
            this.renderData.forEach((row) => {
                row.forEach((item) => {
                    if (!item.clDid) return
                    cards.push({
                        name: `${item.clDid} (°C)`,
                        value: Math.round(item.value) ,
                    })
                })
            })
            return cards
        },
        moduleCards() {
            const cards = []
            this.moduleData.forEach((row) => {
                row.forEach((item) => {
                    if (!item.moduleName) return
                    cards.push({
                        name: item.moduleName,
                        value: item.moduleState ,
                    })
                })
            })
            return cards
        },
        showModuleSection() {
            return (
                (this.userInfo.authorities === 'operation_manager' ||
                    this.userInfo.authorities === 'engineering_user') &&
                this.moduleCards.length > 0
            )
        },
    },
    mounted() {
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
        this.info()
    },
    methods: {
        info() {
            getModuleState({
                id: this.ndid,
            }).then((res) => {
                this.list = res.data || []
            })
        },
        chunkedChildren(children) {
            const result = []
            for (let i = 0; i < children.length; i += 2) {
                result.push(children.slice(i, i + 2))
            }
            return result
        },
    },
}
</script>
<style lang="scss" scoped>
.basic {
    .params-wrap {
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 10rpx;
        overflow: hidden;
    }

    .section-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12rpx;
        padding: 20rpx 20rpx 0;
    }

    .section-title {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
    }

    .grid-card-title-with-icon {
        display: inline-flex;
        align-items: center;
        position: relative;
        width: 8rpx;
        height: 28rpx;
        margin-right: 12rpx;
        background: $uni-theme-color;
        border-radius: 3rpx;
    }

    .params-section {
        padding: 16rpx 16rpx 20rpx;
    }

    .double-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16rpx;
        margin-bottom: 16rpx;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .param-group {
        min-width: 0;
        background: #f3f3f3;
        border-radius: 16rpx;
        padding: 16rpx 8rpx 12rpx;
    }

    .param-title {
        font-size: 26rpx;
        color: #666666;
        margin-bottom: 8rpx;
        padding-left: 4rpx;
    }

    .param-value-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4rpx;
    }

    .param-value {
        font-size: 28rpx;
        font-weight: 700;
        color: #333;

        &--offline {
            color: #ff3b30;
        }
    }
}
</style>