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

189
pages/work/db/index.vue
View File

@ -1,43 +1,42 @@
<template>
<view class="page-container">
<uni-collapse ref="collapse">
<uni-collapse-item open v-for="(item,index) in list" :key="index+'dbList'"
:class="item.emsCommunicationStatus !== '0' ? 'danger' :'running'">
<uni-collapse ref="collapse" accordion v-if="list.length > 0">
<uni-collapse-item v-for="(item,index) in list" :key="index+'dbList'" :open="index===0"
class="common-collapse-item" :class="{
'timing-collapse-item':!['0','2'].includes(item.emsCommunicationStatus),
'warning-collapse-item':item.emsCommunicationStatus === '2',
'running-collapse-item':item.emsCommunicationStatus === '0'
}">
<template v-slot:title>
<view class="title-row">
<view class="title">{{index+1}}#{{item.deviceName || ''}}</view>
<view class="msg">
<view>{{communicationStatusOptions[item.emsCommunicationStatus] || ''}}</view>
<view>数据更新时间：{{item.dataUpdateTime || ''}}</view>
<view class='title-wrapper'>
<view class="top">
<view class="status">{{communicationStatusOptions[item.emsCommunicationStatus] || '暂无数据'}}
</view>
<text class="name">{{item.deviceName}}</text>
</view>
</view>
</template>
<uni-group mode="card">
<uni-grid :column="2" showBorder class="info-grid">
<uni-grid-item v-for="(tempDataItem,tempDataIndex) in
deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'">
<view class="grid-item-box">
<view class='content' v-if="deviceIdTypeMsg[item.deviceId]">
<uni-group mode="card" class="data-card-group">
<uni-row v-for="(tempDataItem,tempDataIndex) in
deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'" class="data-row">
<uni-col :span="8">
<view class="title">{{tempDataItem.name}}</view>
<text class="text">{{item[tempDataItem.attr]}}
</uni-col>
<uni-col :span="16">
<view class="value">{{item[tempDataItem.attr] | formatNumber}}
<!-- <text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text> -->
</text>
</view>
</uni-grid-item>
</uni-grid>
<!-- <uni-row v-for="(tempDataItem,tempDataIndex) in deviceIdTypeMsg[item.deviceId]"
:key="tempDataIndex+'dbTempData'">
<uni-col :span="8">
<view>{{tempDataItem.name}}</view>
</uni-col>
<uni-col :span="16">
<view>{{item[tempDataItem.attr]}}</view>
</uni-col>
</uni-row> -->
</uni-group>
</view>
</uni-col>
</uni-row>
</uni-group>
</view>
<view v-else class='unknow-bd-device'>未知的电表数据</view>
</uni-collapse-item>
</uni-collapse>
<view class="no-data" v-else>
暂无数据
</view>
</view>
</template>
@ -167,131 +166,13 @@
}
}
</script>
<style lang="scss" scoped>
.title-row {
padding: 0 15px;
position: relative;
height: 50px;
.title {
font-weight: 500;
line-height: 50px;
}
.msg {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
text-align: right;
}
}
.grid-item-box {
flex: 1;
// position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
.unknow-bd-device {
text-align: center;
padding: 20rpx;
font-size: 28rpx;
line-height: 50rpx;
background-color: #fff;
.title {
font-size: 14px;
color: #666;
}
.text {
margin-top: 10px;
font-size: 16px;
font-weight: 500;
color: #666;
overflow-wrap: anywhere;
}
.status-danger {
color: #FC6B69;
}
.status-running {
color: #05AEA3;
}
}
::v-deep {
.info-grid {
.uni-grid-item {
height: 80px !important;
.grid-item-box {
padding: 0;
}
}
}
.uni-group__title {
background-color: #959595;
.uni-group__title-text {
color: #fff;
}
}
.uni-collapse-item__wrap-content {
.uni-group--card:last-child {
margin-bottom: 25px;
}
}
// row-行样式
.uni-group__content {
padding: 10px 15px;
.uni-row {
padding: 5px 0;
}
}
// 折叠面板内容区域背景颜色
.uni-collapse-item__wrap {
background-color: #eee;
}
// 运行状态颜色区分
.running {
.uni-group__title {
background-color: #05AEA3;
}
.uni-collapse-item__title-text {
color: #05AEA3;
}
.title-row {
color: #05AEA3;
}
}
.danger {
.uni-group__title {
background-color: #FC6B69;
}
.uni-collapse-item__title-text {
color: #FC6B69;
}
.title-row {
color: #FC6B69;
}
}
color: #000;
}
</style>