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 ? Math.round(item[0].value) || '-' : '' }}</view>
					<view class="item">{{ item[1].clDid ? Math.round(item[1].value) || '-' : '' }}</view>
					<view class="item">{{ item[2].clDid ? Math.round(item[2].value) || '-' : '' }}</view>
					<view class="item">{{ item[3].clDid ? Math.round(item[3].value) || '-' : '' }}</view>
				</template>
			</view>
		</view>
		<!-- 运维管理员、工程用户 可看 -->
		<view class="grid-card" v-if="userInfo.authorities=='operation_manager'||userInfo.authorities=='engineering_user'">
			<view class="grid-card-title">状态</view>
			<view class="grid-card-content-4">
				<template v-for="(item, index) in moduleData">
					<view class="item item-title">{{ item[0].moduleName }}
						<template v-if="item[0].moduleName"></template>
					</view>
					<view class="item item-title">{{ item[1].moduleName }}
						<template v-if="item[1].moduleName"></template>
					</view>
					<view class="item item-title">{{ item[2].moduleName }}
						<template v-if="item[2].moduleName"></template>
					</view>
					<view class="item item-title">{{ item[3].moduleName }}
						<template v-if="item[3].moduleName"></template>
					</view>
					<!-- <uni-tag :text="item[0].moduleState" :type=" item[0].moduleState=='离线'?'error' : 'success'" /> -->
					<view class="item">{{ item[0].moduleState }}</view>
					<view class="item">{{ item[1].moduleState }}</view>
					<view class="item">{{ item[2].moduleState }}</view>
					<view class="item">{{ item[3].moduleState }}</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>
	import {
		getModuleState
	} from '@/common/api/harmonic.js'
	export default {

		props: {
			IOData: {
				type: Array,
				default: () => {
					return []
				},
			},
			ndid: {
				type: String,
			},
		},
		data() {
			return {
				list: [],
				userInfo: {},
				flag: false
			}
		},
		computed: {
			renderData() {
				let arr = []
				// 把IOData转换成每4个一组的二维数组
				for (let i = 0; i < this.IOData.length; i += 4) {
					this.IOData.slice(i, i + 4).forEach((item) => {
						if (Number.isInteger(item.value) || item.value == '') {} else {
							item.value = (item.value - 0).toFixed(2)
						}
					})
					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
			},
			moduleData() {
				let arr = []
				// 把IOData转换成每4个一组的二维数组
				for (let i = 0; i < this.list.length; i += 4) {
					arr.push(this.list.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: {
			info() {
				getModuleState({
					id: this.ndid
				}).then((res) => {
					this.list = res.data
				})
			},
		},
		mounted() {
			this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
			
			this.info()
		},
	}
</script>
<style lang="scss">
	.basic {}
</style>