80 lines
3.0 KiB
Vue
80 lines
3.0 KiB
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> |