修改测试问题
This commit is contained in:
guanj
@@ -1,86 +1,70 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-load-more status="loading" v-if="IOData.length == 0"></uni-load-more>
|
||||
<view class="basic" v-else>
|
||||
<view class="grid-card">
|
||||
<text>
|
||||
<view class="grid-card-title grid-card-title-with-icon"></view>温度
|
||||
</text>
|
||||
<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 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 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>
|
||||
<!-- 运维管理员、工程用户 可看 -->
|
||||
<view class="grid-card"
|
||||
v-if="(userInfo.authorities == 'operation_manager' || userInfo.authorities == 'engineering_user') && moduleData.length > 0">
|
||||
<view class="grid-card-title">
|
||||
|
||||
<text><view class="grid-card-title-with-icon"></view>状态</text>
|
||||
|
||||
<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="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 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 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>
|
||||
<!-- <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>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { getModuleState } from '@/common/api/harmonic.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
IOData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
default: () => [],
|
||||
},
|
||||
ndid: {
|
||||
type: String,
|
||||
@@ -90,87 +74,174 @@ export default {
|
||||
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)
|
||||
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
|
||||
})
|
||||
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({})
|
||||
}
|
||||
while (group.length < 4) {
|
||||
group.push({})
|
||||
}
|
||||
})
|
||||
arr.push(group)
|
||||
}
|
||||
return arr
|
||||
},
|
||||
moduleData() {
|
||||
let arr = []
|
||||
// 把IOData转换成每4个一组的二维数组
|
||||
const arr = []
|
||||
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({})
|
||||
}
|
||||
const group = this.list.slice(i, i + 4)
|
||||
while (group.length < 4) {
|
||||
group.push({})
|
||||
}
|
||||
})
|
||||
console.warn(arr)
|
||||
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
|
||||
this.list = res.data || []
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||
|
||||
this.info()
|
||||
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">
|
||||
<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;
|
||||
padding-left: 20rpx;
|
||||
width: 8rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 12rpx;
|
||||
background: $uni-theme-color;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8rpx;
|
||||
height: 28rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user