样式优化
This commit is contained in:
白菜
@ -114,6 +114,7 @@
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
position: relative;
|
||||
background-color: #f5f6f7;
|
||||
|
||||
.no-data {
|
||||
padding-top: 180rpx;
|
||||
@ -131,9 +132,8 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
padding: 40rpx 30rpx;
|
||||
padding-bottom: 60rpx;
|
||||
background: linear-gradient(to bottom, #9fc1f3, #f7fbff 80%, rgba(255, 255, 255, 0) 100%);
|
||||
padding: 30rpx 30rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.btns {
|
||||
border: none;
|
||||
@ -142,22 +142,18 @@
|
||||
font-size: 26rpx;
|
||||
line-height: 64rpx;
|
||||
color: #19242d;
|
||||
background: linear-gradient(to bottom, #d9e7fc, #f7fbff);
|
||||
background: #d9e7fc;
|
||||
|
||||
&.active-btn {
|
||||
background: linear-gradient(to bottom, #4c7af3, #4b7bf4);
|
||||
background: #4c7af3;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-y {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
padding: 170rpx 40rpx 120rpx 40rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 工单列表
|
||||
@ -169,6 +165,7 @@
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border: 1px solid #eee;
|
||||
background: #ffffff;
|
||||
|
||||
// 标题
|
||||
.item-title {
|
||||
|
||||
@ -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">
|
||||
<!-- 设备数据 -->
|
||||
<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>
|
||||
<text class="text">{{item[infoDataItem.attr] | formatNumber}}
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view class="value">{{item[infoDataItem.attr] | formatNumber}}
|
||||
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
|
||||
</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>
|
||||
@ -189,61 +206,3 @@
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@ -2,47 +2,64 @@
|
||||
<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+'bmszl'" :open="index===0"
|
||||
:title="`${index+1}#${item.deviceName}`" :class="item.workStatus === '0' ? 'running' :'danger'">
|
||||
<view>
|
||||
<uni-group mode="card" class="work-group">
|
||||
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.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">
|
||||
<!-- 设备数据 -->
|
||||
<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>
|
||||
<text class="text">{{item[infoDataItem.attr] | formatNumber}}
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view class="value">{{item[infoDataItem.attr] | formatNumber}}
|
||||
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
|
||||
</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>
|
||||
@ -194,59 +211,3 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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>
|
||||
@ -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="title">{{tempDataItem.name}}</view>
|
||||
<text class="text">{{item[tempDataItem.attr]}}
|
||||
<!-- <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'">
|
||||
<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>{{tempDataItem.name}}</view>
|
||||
<view class="title">{{tempDataItem.name}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view>{{item[tempDataItem.attr]}}</view>
|
||||
<view class="value">{{item[tempDataItem.attr] | formatNumber}}
|
||||
<!-- <text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text> -->
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row> -->
|
||||
</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>
|
||||
@ -1,186 +0,0 @@
|
||||
<template>
|
||||
<uni-popup ref="popup" type="center" @maskClick="show = false" :animation="false">
|
||||
<view class="chart-popup">
|
||||
<uni-datetime-picker v-model="range" type="daterange" :end="end" rangeSeparator="至" @change="changeTime"
|
||||
style="margin-bottom: 10px;" />
|
||||
<!-- <view class="button-group" style="text-align: center;margin-top:20px;">
|
||||
<button type="default" size="mini" @click="onReset">重置</button>
|
||||
<button type="primary" size="mini" @click="onSearch" style="margin-left: 20px;">搜索</button>
|
||||
</view> -->
|
||||
<view class="chart-container">
|
||||
<!-- <qiun-data-charts type="line" :reload="show" :opts="options" :optsWatch='false'
|
||||
:inScrollView="true" :pageScrollTop="pageScrollTop" :ontouch="true" :chartData="chartsData" /> -->
|
||||
<qiun-data-charts type="line" :reshow="show" :optsWatch='false' :opts="options" :chartData="chartsData"
|
||||
:ontouch="true" :inScrollView="true" :pageScrollTop="pageScrollTop" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getSingleBatteryData
|
||||
} from '@/api/ems/site.js'
|
||||
export default {
|
||||
props: {
|
||||
pageScrollTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// {update:true,enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true,scrollAlign:'current'}}
|
||||
options: {
|
||||
// xAxis: {
|
||||
// scrollShow: true,
|
||||
// itemCount: 3,
|
||||
// disableGrid: true,
|
||||
// scrollAlign: 'current'
|
||||
// },
|
||||
// enableScroll: true,
|
||||
// update: true,
|
||||
dataLabel: false,
|
||||
enableScroll: true,
|
||||
xAxis: {
|
||||
scrollShow: true,
|
||||
itemCount: 3,
|
||||
disableGrid: true
|
||||
},
|
||||
duration: 0,
|
||||
animation: false,
|
||||
},
|
||||
show: false,
|
||||
range: [],
|
||||
end: Date.now(),
|
||||
siteId: '',
|
||||
deviceId: '',
|
||||
clusterDeviceId: '',
|
||||
dataType: '', //展示的数据类型 空值展示所有数据
|
||||
loading: false,
|
||||
chartsData: {},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
open({
|
||||
siteId,
|
||||
clusterDeviceId,
|
||||
deviceId
|
||||
}, dataType) {
|
||||
this.$refs.popup.open()
|
||||
this.loading = false
|
||||
this.siteId = siteId
|
||||
this.clusterDeviceId = clusterDeviceId
|
||||
this.deviceId = deviceId
|
||||
this.dataType = dataType
|
||||
this.range = []
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
this.getData()
|
||||
// setTimeout(() => {
|
||||
|
||||
// }, 300)
|
||||
})
|
||||
},
|
||||
changeTime(val) {
|
||||
this.range = val || []
|
||||
this.getData()
|
||||
},
|
||||
onReset() {
|
||||
this.range = []
|
||||
this.getData()
|
||||
},
|
||||
onSearch() {
|
||||
this.getData()
|
||||
},
|
||||
getData() {
|
||||
if (this.loading) return
|
||||
this.loading = true;
|
||||
const {
|
||||
siteId,
|
||||
deviceId,
|
||||
clusterDeviceId,
|
||||
range: [startDate = '', endDate = '']
|
||||
} = this;
|
||||
this.chartsData = {}
|
||||
return getSingleBatteryData({
|
||||
siteId,
|
||||
deviceId,
|
||||
clusterDeviceId,
|
||||
startDate,
|
||||
endDate
|
||||
}).then(response => {
|
||||
console.log('单体电池图表返回数据', response.data)
|
||||
this.handledata(response?.data || [])
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
},
|
||||
handledata(data) {
|
||||
let obj = {
|
||||
voltage: '电压',
|
||||
temperature: '温度',
|
||||
soc: 'SOC',
|
||||
soh: 'SOH',
|
||||
},
|
||||
categories = [],
|
||||
dataTypeList = []
|
||||
if (this.dataType) {
|
||||
dataTypeList = [{
|
||||
attr: this.dataType,
|
||||
title: obj[this.dataType],
|
||||
data: []
|
||||
}]
|
||||
} else {
|
||||
dataTypeList = Object.entries(obj).map(([key, value]) => {
|
||||
return {
|
||||
attr: key,
|
||||
title: value,
|
||||
data: []
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
data.forEach(item => {
|
||||
categories.push(item.dataTimestamp)
|
||||
dataTypeList.forEach(i => {
|
||||
i.data.push(item[i.attr] || undefined)
|
||||
})
|
||||
})
|
||||
const series = dataTypeList.map(item => {
|
||||
return {
|
||||
"name": item.title,
|
||||
"data": item.data
|
||||
}
|
||||
})
|
||||
this.chartsData = JSON.parse(JSON.stringify({
|
||||
categories,
|
||||
series
|
||||
}))
|
||||
console.log('this.chartsData', this.chartsData)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-popup {
|
||||
width: 360px;
|
||||
background-color: #fff;
|
||||
padding: 10px 15px;
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
uni-canvas {
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-icon" @click="openSearch">
|
||||
<uni-icons type="search" size="40" color="#fff"></uni-icons>
|
||||
<uni-icons type="search" size="25" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<view class="list-container">
|
||||
<view class="no-data" v-if="list.length === 0">暂无数据</view>
|
||||
@ -10,7 +10,7 @@
|
||||
<template v-slot:header>
|
||||
<view class="list-header">
|
||||
单体编号:{{item.deviceId}}
|
||||
<button type="primary" size="mini" class="charts" @click="toDetail(item)">图表</button>
|
||||
<button type="primary" size="mini" class="charts-btn" @click="toDetail(item)">图表</button>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
@ -19,16 +19,17 @@
|
||||
<uni-col :span="8">
|
||||
<view>簇号</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right">{{item.clusterDeviceId}}</view>
|
||||
<uni-col :span="16">
|
||||
<view class="right">{{item.clusterDeviceId || '-'}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>电压（V）</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'voltage')">{{item.voltage}}
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text @click="toDetail(item,'voltage')">{{item.voltage | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
@ -36,9 +37,10 @@
|
||||
<uni-col :span="8">
|
||||
<view>温度（℃）</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'temperature')">
|
||||
{{item.temperature}}
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text
|
||||
@click="toDetail(item,'temperature')">{{item.temperature | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
@ -46,16 +48,20 @@
|
||||
<uni-col :span="8">
|
||||
<view>SOC（%）</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'soc')">{{item.soc}}</view>
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text @click="toDetail(item,'soc')">{{item.soc | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>SOH（%）</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'soh')">{{item.soh}}</view>
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text @click="toDetail(item,'soh')">{{item.soh | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
@ -382,21 +388,18 @@
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
|
||||
// position: fixed;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// overflow-y: auto;
|
||||
.search-icon {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
bottom: 40rpx;
|
||||
right: 40rpx;
|
||||
z-index: 1;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 60rpx;
|
||||
width: 60rpx;
|
||||
background-color: #007aff;
|
||||
border-radius: 100%;
|
||||
line-height: 50px;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -407,20 +410,26 @@
|
||||
}
|
||||
|
||||
.list-container {
|
||||
// z-index: 10;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 50px;
|
||||
background: #ffffff;
|
||||
padding-top: 40rpx;
|
||||
padding-bottom: 100rpx;
|
||||
background: transparent;
|
||||
|
||||
::v-deep {
|
||||
.uni-list {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.uni-list-item {
|
||||
padding: 12px 15px;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.uni-list-item__container {
|
||||
background-color: #ffffff;
|
||||
padding: 0;
|
||||
display: block;
|
||||
box-shadow: 0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 1px 16rpx 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||
}
|
||||
|
||||
.uni-list--border-top,
|
||||
@ -431,61 +440,63 @@
|
||||
}
|
||||
|
||||
.list-header {
|
||||
background-color: #05AEA3;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20rpx 30rpx;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
color: #333;
|
||||
|
||||
.charts {
|
||||
.charts-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
right: 20rpx;
|
||||
transform: translateY(-50%);
|
||||
// background-color: #ff7300;
|
||||
background-color: #4c7af3;
|
||||
}
|
||||
}
|
||||
|
||||
.list-body {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #eee;
|
||||
border-top: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
padding: 10rpx 0;
|
||||
|
||||
>.uni-row {
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #000;
|
||||
padding: 12rpx 30rpx;
|
||||
|
||||
.left {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
color: #000;
|
||||
text-align: right;
|
||||
|
||||
&.color {
|
||||
color: #4c7af3;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.uni-row {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-popup {
|
||||
width: 360px;
|
||||
width: 720rpx;
|
||||
background-color: #fff;
|
||||
padding: 10px 15px;
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin-top: 20px;
|
||||
height: 500rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
uni-canvas {
|
||||
height: 250px;
|
||||
height: 500rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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">
|
||||
<uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
|
||||
class="data-row">
|
||||
<uni-col :span="8">
|
||||
<view class="title">{{infoDataItem.label}}</view>
|
||||
<text class="text">{{item[infoDataItem.attr] | formatNumber}}
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view class="value">{{item[infoDataItem.attr] | formatNumber}}
|
||||
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
|
||||
</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 {
|
||||
flex: 1;
|
||||
// position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
color: #333;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
overflow-wrap: anywhere;
|
||||
color: #000;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-danger {
|
||||
color: #FC6B69;
|
||||
}
|
||||
|
||||
.status-running {
|
||||
color: #05AEA3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//todo 列表
|
||||
.device-list {
|
||||
.uni-collapse-item__title-box {}
|
||||
.icon {
|
||||
height: 100rpx;
|
||||
width: 100rpx;
|
||||
display: block;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.info-grid {
|
||||
.uni-grid-item {
|
||||
height: 80px !important;
|
||||
|
||||
.grid-item-box {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-group__content {
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
&.uni-group--card:last-child {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
BIN
static/images/ems/pcs/jrcdl.jpg
Normal file
BIN
static/images/ems/pcs/jrcdl.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
static/images/ems/pcs/jrfdl.jpg
Normal file
BIN
static/images/ems/pcs/jrfdl.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
static/images/ems/pcs/soc.jpg
Normal file
BIN
static/images/ems/pcs/soc.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
static/images/ems/pcs/soh.jpg
Normal file
BIN
static/images/ems/pcs/soh.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
static/images/ems/pcs/sswggl.jpg
Normal file
BIN
static/images/ems/pcs/sswggl.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
static/images/ems/pcs/ssyggl.jpg
Normal file
BIN
static/images/ems/pcs/ssyggl.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@ -99,3 +99,248 @@
|
||||
height: 100px;
|
||||
font-size: 18px;
|
||||
}
|
||||
// 九宫格
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
// position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
}
|
||||
// 设备详情页面 状态公共样式
|
||||
.common-collapse-item{
|
||||
.content{
|
||||
background: linear-gradient(to bottom, #22bb5873, #45db7a26);
|
||||
padding: 1rpx 0 1rpx 0;
|
||||
}
|
||||
// 标题
|
||||
.title-wrapper{
|
||||
// 设备状态栏
|
||||
padding:20rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
.top{
|
||||
.status{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color:#fff;
|
||||
padding:4rpx 10rpx;
|
||||
margin-right: 10rpx;
|
||||
font-size: 22rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.name{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 设备状态卡片
|
||||
.status-card-group{
|
||||
&.no-wrapper-padding{
|
||||
.uni-group__content{
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
.uni-group__content{
|
||||
padding-top:0;
|
||||
padding-bottom:0;
|
||||
}
|
||||
// 设备状态九宫格
|
||||
.grid-item-box{
|
||||
background-color: transparent;
|
||||
.title{
|
||||
color:#333;
|
||||
}
|
||||
.text{
|
||||
color:#000;
|
||||
font-weight: bolder;
|
||||
&.work-status-color{
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// 设备数据卡片
|
||||
.data-card-group{
|
||||
.uni-group__content{
|
||||
padding-top:0;
|
||||
padding-bottom:0;
|
||||
}
|
||||
// 数据列表
|
||||
.data-row{
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #000;
|
||||
padding:24rpx 0;
|
||||
&:not(:last-child){
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
}
|
||||
.title{
|
||||
color:#333;
|
||||
text-align: left;
|
||||
}
|
||||
.value{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 子设备表格卡片
|
||||
.child-card-group{
|
||||
.child-table{
|
||||
.uni-table-th{
|
||||
color:#333;
|
||||
}
|
||||
.uni-table-td{
|
||||
color:#000;
|
||||
}
|
||||
.table--border{
|
||||
border-color:#ebedf0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 支路卡片
|
||||
.branch-card-group{
|
||||
.uni-group__title {
|
||||
background-color: #959595;
|
||||
height: 70rpx;
|
||||
.uni-group__title-text {
|
||||
color: #fff;
|
||||
font-size:26rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
.uni-group__content {
|
||||
padding: 0;
|
||||
.title{
|
||||
color:#333;
|
||||
}
|
||||
.text{
|
||||
color:#000;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&.uni-group--card:last-child {
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
//运行中
|
||||
.running-collapse-item{
|
||||
// 标题
|
||||
.title-wrapper{
|
||||
.top{
|
||||
.status{
|
||||
background-color: #30be95;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
background: linear-gradient(to bottom, #22bb5873, #45db7a26);
|
||||
}
|
||||
// 状态九宫格
|
||||
.status-card-group{
|
||||
.grid-item-box{
|
||||
.text{
|
||||
&.work-status-color{
|
||||
color:#30be95;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
//支路设备
|
||||
.branch-card-group{
|
||||
.uni-group__title {
|
||||
background-color: #30be95;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//故障
|
||||
.warning-collapse-item{
|
||||
// 标题
|
||||
.title-wrapper{
|
||||
.top{
|
||||
.status{
|
||||
background-color: #ed7876;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
background: linear-gradient(to bottom, #f5604e73, #f5604e26);
|
||||
}
|
||||
// 状态九宫格
|
||||
.status-card-group{
|
||||
.grid-item-box{
|
||||
.text{
|
||||
&.work-status-color{
|
||||
color:#ed7876;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
//支路设备
|
||||
.branch-card-group{
|
||||
.uni-group__title {
|
||||
background-color: #ed7876;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// 停机
|
||||
.timing-collapse-item{
|
||||
// 标题
|
||||
.title-wrapper{
|
||||
.top{
|
||||
.status{
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
background: linear-gradient(to bottom, #8c8c8c73, #8c8c8c26);
|
||||
}
|
||||
// 状态九宫格
|
||||
.status-card-group{
|
||||
.grid-item-box{
|
||||
.text{
|
||||
&.work-status-color{
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
//支路设备
|
||||
.branch-card-group{
|
||||
.uni-group__title {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user