xzzn/emsapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式优化

Browse Source
This commit is contained in:
白菜
2026-01-15 17:51:09 +08:00
parent b558282529
commit 2f1e29dccd
14 changed files with 501 additions and 717 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
pages/work/bmsdcc/index.vue
View File

@ -1,49 +1,66 @@
<template>
<view class="page-container">
<uni-collapse ref="collapse" accordion v-if="list.length > 0">
<uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'bmsdcc'" :open="index===0"
:title="`${index+1}#${item.parentDeviceName?`${item.parentDeviceName} —> ` : ''}${item.deviceName}`"
:class="item.workStatus === '0' ? 'running' :'danger'">
<view>
<uni-group mode="card" class="work-group">
<uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'bmscc'" :open="index===0"
class="common-collapse-item" :class="{
'timing-collapse-item':!['0','2'].includes(item.workStatus),
'warning-collapse-item':item.workStatus === '2',
'running-collapse-item':item.workStatus === '0'
}">
<template v-slot:title>
<view class='title-wrapper'>
<view class="top">
<view class="status">{{workStatusOptions[item.workStatus] || '暂无数据'}}</view>
<text
class="name">{{`${item.parentDeviceName?`${item.parentDeviceName} -> ` : ''}${item.deviceName}`}}</text>
</view>
</view>
</template>
<view class='content'>
<!-- 设备状态栏 -->
<uni-group mode="card" class="status-card-group">
<uni-grid :column="3" :showBorder="false">
<uni-grid-item>
<view class="grid-item-box">
<view class="title">工作状态</view>
<text class="text status">{{workStatusOptions[item.workStatus]}}</text>
<text
class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<view class="title">与PCS通信</view>
<text
class="text">{{communicationStatusOptions[item.pcsCommunicationStatus]}}</text>
class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<view class="title">与EMS通信</view>
<text
class="text">{{communicationStatusOptions[item.emsCommunicationStatus]}}</text>
class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
</view>
</uni-grid-item>
</uni-grid>
</uni-group>
<uni-group mode="card">
<uni-grid :column="3" :showBorder="false">
<uni-grid-item v-for="(infoDataItem,infoDataIndex) in infoData"
:key="infoDataIndex+'infoData'">
<view class="grid-item-box">
<view class="title">{{infoDataItem.label}}</view>
<text class="text">{{item[infoDataItem.attr] | formatNumber}}
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
</text>
<!-- 设备数据 -->
<uni-group mode="card" class="data-card-group">
<uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
class="data-row">
<uni-col :span="8">
<view class="title">{{infoDataItem.label}}</view>
</uni-col>
<uni-col :span="16">
<view class="value">{{item[infoDataItem.attr] | formatNumber}}
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
</view>
</uni-grid-item>
</uni-grid>
</uni-col>
</uni-row>
</uni-group>
<uni-group mode="card" style="margin-bottom: 25px;">
<uni-table border stripe emptyText="暂无数据">
<!-- 子设备表格 -->
<uni-group mode="card" class="child-card-group" style="margin-bottom:20rpx;">
<uni-table border stripe emptyText="暂无数据" class="child-table">
<!-- 表头行 -->
<uni-tr>
<uni-th align="center">名称</uni-th>
@ -188,62 +205,4 @@
})
}
}
</script>
<style lang="scss" scoped>
.page-container {}
.grid-item-box {
flex: 1;
// position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
background-color: #fff;
.title {
font-size: 14px;
color: #666;
}
.text {
margin-top: 10px;
font-size: 16px;
font-weight: 500;
color: #666;
overflow-wrap: anywhere;
}
}
::v-deep {
.uni-collapse-item__wrap {
background-color: #eee;
}
.running {
.uni-collapse-item__title-text {
color: #05AEA3;
}
.status {
color: #05AEA3;
}
}
.danger {
.uni-collapse-item__title-text {
color: #FC6B69;
}
.status {
color: #FC6B69;
}
}
}
</style>
</script>