样式优化
This commit is contained in:
白菜
@ -1,79 +1,83 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 顶部6个数据 -->
|
||||
<uni-grid class="info-grid" :column="2" :showBorder="false" style="margin-bottom: 10px;">
|
||||
<uni-grid class="info-grid" :square="false" :column="2" :showBorder="false">
|
||||
<uni-grid-item v-for="(item,index) in runningHeadData" :key="index+'head'">
|
||||
<view class="grid-item-box">
|
||||
<img :src="require('@/static/images/ems/pcs/'+item.img+'.jpg')" class="icon" alt="">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<text class="text">{{runningHeadInfo[item.attr] | formatNumber}}</text>
|
||||
<view class="text">{{runningHeadInfo[item.attr] | formatNumber}}</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
|
||||
<uni-collapse ref="collapse" accordion v-if="list.length > 0">
|
||||
<uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'pcs'" :open="index===0"
|
||||
class="device-list"
|
||||
:class="item.workStatus === '2' ? 'danger' : item.workStatus === '1' ? 'close' : 'running'">
|
||||
<uni-collapse-item v-for="(item,index) in list" :key="index+'pcs'" :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-row">
|
||||
<view class="title">{{index+1}}#{{item.deviceName || ''}}</view>
|
||||
<view class="msg">
|
||||
<view>{{communicationStatusOptions[item.communicationStatus] || ''}}</view>
|
||||
<view>数据更新时间：{{item.dataUpdateTime || ''}}</view>
|
||||
<view class='title-wrapper'>
|
||||
<view class="top">
|
||||
<view class="status">{{workStatusOptions[item.workStatus] || '暂无数据'}}</view>
|
||||
<text class="name">{{item.deviceName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view>
|
||||
<uni-group mode="card">
|
||||
<view class='content'>
|
||||
<!-- 设备状态栏 -->
|
||||
<uni-group mode="card" class="status-card-group no-wrapper-padding">
|
||||
<uni-grid :column="4" :showBorder="false">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<view class="title">工作状态</view>
|
||||
<text class="text"
|
||||
:class="item.workStatus === '0' ? 'status-running' : 'status-danger'">{{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">并网状态</view>
|
||||
<text class="text">{{gridStatusOptions[item.gridStatus]}}</text>
|
||||
<text class="text">{{gridStatusOptions[item.gridStatus] || '-'}}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<view class="title">设备状态</view>
|
||||
<text class="text"
|
||||
:class="item.deviceStatus === '1' ? 'status-running' : 'status-danger'">{{deviceStatusOptions[item.deviceStatus]}}</text>
|
||||
<text class="text">{{deviceStatusOptions[item.deviceStatus] || '-'}}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<view class="title">控制模式</view>
|
||||
<text class="text">{{controlModeOptions[item.controlMode]}}</text>
|
||||
<text class="text">{{controlModeOptions[item.controlMode] || '-'}}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-group>
|
||||
<!-- infoData -->
|
||||
<uni-group mode="card"
|
||||
<!-- 设备数据 -->
|
||||
<uni-group mode="card" class="data-card-group"
|
||||
:style="{marginBottom:!item.pcsBranchInfoList || item.pcsBranchInfoList.length === 0 ?'25px' : ''}">
|
||||
<uni-grid :column="2" showBorder class="info-grid">
|
||||
<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-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 class="pcs-branch-group" :title="`支路${pcsBranchIndex+1}`" mode="card"
|
||||
<uni-group class="branch-card-group" :title="`支路${pcsBranchIndex+1}`" mode="card"
|
||||
v-for="(pcsBranchItem,pcsBranchIndex) in item.pcsBranchInfoList"
|
||||
:key="pcsBranchIndex+'pcsBranchInfoList'">
|
||||
<uni-grid :column="3" :showBorder="false" class="info-grid">
|
||||
<uni-grid :column="3" :square="false" :showBorder="false">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<view class="title">直流功率</view>
|
||||
@ -132,27 +136,33 @@
|
||||
runningHeadData: [{
|
||||
title: '实时有功功率（kW）',
|
||||
bgColor: '#FFF2CB',
|
||||
attr: 'totalActivePower'
|
||||
attr: 'totalActivePower',
|
||||
img: 'ssyggl'
|
||||
}, {
|
||||
title: '实时无功功率（kVar）',
|
||||
bgColor: '#CBD6FF',
|
||||
attr: 'totalReactivePower'
|
||||
attr: 'totalReactivePower',
|
||||
img: 'sswggl'
|
||||
}, {
|
||||
title: '电池堆SOC',
|
||||
bgColor: '#DCCBFF',
|
||||
attr: 'soc'
|
||||
attr: 'soc',
|
||||
img: 'soc'
|
||||
}, {
|
||||
title: '电池堆SOH',
|
||||
bgColor: '#FFD4CB',
|
||||
attr: 'soh'
|
||||
attr: 'soh',
|
||||
img: 'soh'
|
||||
}, {
|
||||
title: '今日充电量（kWh）',
|
||||
bgColor: '#FFD6F8',
|
||||
attr: 'dayChargedCap'
|
||||
attr: 'dayChargedCap',
|
||||
img: 'jrcdl'
|
||||
}, {
|
||||
title: '今日放电量（kWh）',
|
||||
bgColor: '#E1FFCA',
|
||||
attr: 'dayDisChargedCap'
|
||||
attr: 'dayDisChargedCap',
|
||||
img: 'jrfdl'
|
||||
}],
|
||||
runningHeadInfo: {},
|
||||
list: [],
|
||||
@ -281,134 +291,40 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-row {
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
.info-grid {
|
||||
background: #fff;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
line-height: 50px;
|
||||
}
|
||||
.uni-grid-item {
|
||||
padding: 20rpx;
|
||||
|
||||
.msg {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.grid-item-box {
|
||||
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 20rpx;
|
||||
|
||||
// 九宫格
|
||||
.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;
|
||||
}
|
||||
|
||||
.status-danger {
|
||||
color: #FC6B69;
|
||||
}
|
||||
|
||||
.status-running {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//todo 列表
|
||||
.device-list {
|
||||
.uni-collapse-item__title-box {}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.info-grid {
|
||||
.uni-grid-item {
|
||||
height: 80px !important;
|
||||
|
||||
.grid-item-box {
|
||||
padding: 0;
|
||||
.title {
|
||||
color: #333;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uni-collapse-item__wrap {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.running {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.danger {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #FC6B69;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
color: #FC6B69;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
// 支路样式
|
||||
.pcs-branch-group {
|
||||
.uni-group__title {
|
||||
background-color: #959595;
|
||||
|
||||
.uni-group__title-text {
|
||||
color: #fff;
|
||||
.text {
|
||||
color: #000;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-group__content {
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
&.uni-group--card:last-child {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 100rpx;
|
||||
width: 100rpx;
|
||||
display: block;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user