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

<template>
    <view class='basic'>
        <view class="grid-card">
            <view class="grid-card-title">温度</view>
            <view class="grid-card-content-4">
                <template v-for="item in renderData">
                    <view class="item item-title">{{ item[0].clDid }}
                        <template v-if="item[0].clDid "> (°C)</template>
                    </view>
                    <view class="item item-title">{{ item[1].clDid }}
                        <template v-if="item[1].clDid "> (°C)</template>
                    </view>
                    <view class="item item-title">{{ item[2].clDid }}
                        <template v-if="item[2].clDid "> (°C)</template>
                    </view>
                    <view class="item item-title">{{ item[3].clDid }}
                        <template v-if="item[3].clDid "> (°C)</template>
                    </view>
                    <view class="item">{{ item[0].clDid ? item[0].value || '-' : '' }}</view>
                    <view class="item">{{ item[1].clDid ? item[1].value || '-' : '' }}</view>
                    <view class="item">{{ item[2].clDid ? item[2].value || '-' : '' }}</view>
                    <view class="item">{{ item[3].clDid ? item[3].value || '-' : '' }}</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">干接点1</view>-->
        <!--                <view class="item item-title">干接点2</view>-->
        <!--                <view class="item item-title"></view>-->
        <!--                <view class="item item-title"></view>-->
        <!--                <view class="item">正常</view>-->
        <!--                <view class="item">正常</view>-->
        <!--                <view class="item"></view>-->
        <!--                <view class="item"></view>-->
        <!--            </view>-->
        <!--        </view>-->
    </view>
</template>
<script>
export default {
    data() {
        return {}
    },
    props: {
        IOData: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    computed: {
        renderData() {
            let arr = []
            // 把IOData转换成每4个一组的二维数组
            for (let i = 0; i < this.IOData.length; i += 4) {
                arr.push(this.IOData.slice(i, i + 4))
            }
            // 把每组的长度补齐到4
            arr.forEach((item) => {
                if (item.length < 4) {
                    let length = 4 - item.length
                    for (let i = 0; i < length; i++) {
                        item.push({})
                    }
                }
            })
            console.warn(arr)
            return arr
        }
    },
    methods: {}
}
</script>
<style lang='scss'>
.basic {
}
</style>