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

17
pages/index.vue
View File

@ -114,6 +114,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
position: relative; position: relative;
background-color: #f5f6f7;
.no-data { .no-data {
padding-top: 180rpx; padding-top: 180rpx;
@ -131,9 +132,8 @@
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 2; z-index: 2;
padding: 40rpx 30rpx; padding: 30rpx 30rpx;
padding-bottom: 60rpx; background: #ffffff;
background: linear-gradient(to bottom, #9fc1f3, #f7fbff 80%, rgba(255, 255, 255, 0) 100%);
.btns { .btns {
border: none; border: none;
@ -142,22 +142,18 @@
font-size: 26rpx; font-size: 26rpx;
line-height: 64rpx; line-height: 64rpx;
color: #19242d; color: #19242d;
background: linear-gradient(to bottom, #d9e7fc, #f7fbff); background: #d9e7fc;
&.active-btn { &.active-btn {
background: linear-gradient(to bottom, #4c7af3, #4b7bf4); background: #4c7af3;
color: #fff; color: #fff;
} }
} }
} }
.scroll-y {
z-index: 1;
}
.content { .content {
background-color: #ffffff;
padding: 170rpx 40rpx 120rpx 40rpx; padding: 170rpx 40rpx 120rpx 40rpx;
z-index: 1;
} }
// 工单列表 // 工单列表
@ -169,6 +165,7 @@
line-height: 40rpx; line-height: 40rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
border: 1px solid #eee; border: 1px solid #eee;
background: #ffffff;
// 标题 // 标题
.item-title { .item-title {

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

@ -1,49 +1,66 @@
<template> <template>
<view class="page-container"> <view class="page-container">
<uni-collapse ref="collapse" accordion v-if="list.length > 0"> <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" <uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'bmscc'" :open="index===0"
:title="`${index+1}#${item.parentDeviceName?`${item.parentDeviceName} —> ` : ''}${item.deviceName}`" class="common-collapse-item" :class="{
:class="item.workStatus === '0' ? 'running' :'danger'"> 'timing-collapse-item':!['0','2'].includes(item.workStatus),
<view> 'warning-collapse-item':item.workStatus === '2',
<uni-group mode="card" class="work-group"> '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 :column="3" :showBorder="false">
<uni-grid-item> <uni-grid-item>
<view class="grid-item-box"> <view class="grid-item-box">
<view class="title">工作状态</view> <view class="title">工作状态</view>
<text class="text status">{{workStatusOptions[item.workStatus]}}</text> <text
class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
</view> </view>
</uni-grid-item> </uni-grid-item>
<uni-grid-item> <uni-grid-item>
<view class="grid-item-box"> <view class="grid-item-box">
<view class="title">与PCS通信</view> <view class="title">与PCS通信</view>
<text <text
class="text">{{communicationStatusOptions[item.pcsCommunicationStatus]}}</text> class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
</view> </view>
</uni-grid-item> </uni-grid-item>
<uni-grid-item> <uni-grid-item>
<view class="grid-item-box"> <view class="grid-item-box">
<view class="title">与EMS通信</view> <view class="title">与EMS通信</view>
<text <text
class="text">{{communicationStatusOptions[item.emsCommunicationStatus]}}</text> class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
</view> </view>
</uni-grid-item> </uni-grid-item>
</uni-grid> </uni-grid>
</uni-group> </uni-group>
<uni-group mode="card"> <!-- 设备数据 -->
<uni-grid :column="3" :showBorder="false"> <uni-group mode="card" class="data-card-group">
<uni-grid-item v-for="(infoDataItem,infoDataIndex) in infoData" <uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
:key="infoDataIndex+'infoData'"> class="data-row">
<view class="grid-item-box"> <uni-col :span="8">
<view class="title">{{infoDataItem.label}}</view> <view class="title">{{infoDataItem.label}}</view>
<text class="text">{{item[infoDataItem.attr] | formatNumber}} </uni-col>
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text> <uni-col :span="16">
</text> <view class="value">{{item[infoDataItem.attr] | formatNumber}}
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
</view> </view>
</uni-grid-item> </uni-col>
</uni-grid> </uni-row>
</uni-group> </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-tr>
<uni-th align="center">名称</uni-th> <uni-th align="center">名称</uni-th>
@ -188,62 +205,4 @@
}) })
} }
} }
</script> </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>

113
pages/work/bmszl/index.vue
View File

@ -2,47 +2,64 @@
<view class="page-container"> <view class="page-container">
<uni-collapse ref="collapse" accordion v-if="list.length > 0"> <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" <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'"> class="common-collapse-item" :class="{
<view> 'timing-collapse-item':!['0','2'].includes(item.workStatus),
<uni-group mode="card" class="work-group"> '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 :column="3" :showBorder="false">
<uni-grid-item> <uni-grid-item>
<view class="grid-item-box"> <view class="grid-item-box">
<view class="title">工作状态</view> <view class="title">工作状态</view>
<text class="text status">{{workStatusOptions[item.workStatus]}}</text> <text
class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
</view> </view>
</uni-grid-item> </uni-grid-item>
<uni-grid-item> <uni-grid-item>
<view class="grid-item-box"> <view class="grid-item-box">
<view class="title">与PCS通信</view> <view class="title">与PCS通信</view>
<text <text
class="text">{{communicationStatusOptions[item.pcsCommunicationStatus]}}</text> class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
</view> </view>
</uni-grid-item> </uni-grid-item>
<uni-grid-item> <uni-grid-item>
<view class="grid-item-box"> <view class="grid-item-box">
<view class="title">与EMS通信</view> <view class="title">与EMS通信</view>
<text <text
class="text">{{communicationStatusOptions[item.emsCommunicationStatus]}}</text> class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
</view> </view>
</uni-grid-item> </uni-grid-item>
</uni-grid> </uni-grid>
</uni-group> </uni-group>
<uni-group mode="card"> <!-- 设备数据 -->
<uni-grid :column="3" :showBorder="false"> <uni-group mode="card" class="data-card-group">
<uni-grid-item v-for="(infoDataItem,infoDataIndex) in infoData" <uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
:key="infoDataIndex+'infoData'"> class="data-row">
<view class="grid-item-box"> <uni-col :span="8">
<view class="title">{{infoDataItem.label}}</view> <view class="title">{{infoDataItem.label}}</view>
<text class="text">{{item[infoDataItem.attr] | formatNumber}} </uni-col>
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text> <uni-col :span="16">
</text> <view class="value">{{item[infoDataItem.attr] | formatNumber}}
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
</view> </view>
</uni-grid-item> </uni-col>
</uni-grid> </uni-row>
</uni-group> </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-tr>
<uni-th align="center">簇号</uni-th> <uni-th align="center">簇号</uni-th>
@ -193,60 +210,4 @@
}) })
} }
} }
</script> </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>

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

@ -1,43 +1,42 @@
<template> <template>
<view class="page-container"> <view class="page-container">
<uni-collapse ref="collapse"> <uni-collapse ref="collapse" accordion v-if="list.length > 0">
<uni-collapse-item open v-for="(item,index) in list" :key="index+'dbList'" <uni-collapse-item v-for="(item,index) in list" :key="index+'dbList'" :open="index===0"
:class="item.emsCommunicationStatus !== '0' ? 'danger' :'running'"> 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> <template v-slot:title>
<view class="title-row"> <view class='title-wrapper'>
<view class="title">{{index+1}}#{{item.deviceName || ''}}</view> <view class="top">
<view class="msg"> <view class="status">{{communicationStatusOptions[item.emsCommunicationStatus] || '暂无数据'}}
<view>{{communicationStatusOptions[item.emsCommunicationStatus] || ''}}</view> </view>
<view>数据更新时间：{{item.dataUpdateTime || ''}}</view> <text class="name">{{item.deviceName}}</text>
</view> </view>
</view> </view>
</template> </template>
<uni-group mode="card"> <view class='content' v-if="deviceIdTypeMsg[item.deviceId]">
<uni-grid :column="2" showBorder class="info-grid"> <uni-group mode="card" class="data-card-group">
<uni-grid-item v-for="(tempDataItem,tempDataIndex) in <uni-row v-for="(tempDataItem,tempDataIndex) in
deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'"> deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'" class="data-row">
<view class="grid-item-box"> <uni-col :span="8">
<view class="title">{{tempDataItem.name}}</view> <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 v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text> -->
</text> </view>
</view> </uni-col>
</uni-grid-item> </uni-row>
</uni-grid> </uni-group>
</view>
<!-- <uni-row v-for="(tempDataItem,tempDataIndex) in deviceIdTypeMsg[item.deviceId]" <view v-else class='unknow-bd-device'>未知的电表数据</view>
: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>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse> </uni-collapse>
<view class="no-data" v-else>
暂无数据
</view>
</view> </view>
</template> </template>
@ -167,131 +166,13 @@
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.title-row { .unknow-bd-device {
padding: 0 15px; text-align: center;
position: relative; padding: 20rpx;
height: 50px; font-size: 28rpx;
line-height: 50rpx;
.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;
background-color: #fff; background-color: #fff;
color: #000;
.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;
}
}
} }
</style> </style>

186
pages/work/dtdc/Chart.vue
View File

@ -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>

121
pages/work/dtdc/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view class="container"> <view class="container">
<view class="search-icon" @click="openSearch"> <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>
<view class="list-container"> <view class="list-container">
<view class="no-data" v-if="list.length === 0">暂无数据</view> <view class="no-data" v-if="list.length === 0">暂无数据</view>
@ -10,7 +10,7 @@
<template v-slot:header> <template v-slot:header>
<view class="list-header"> <view class="list-header">
单体编号:{{item.deviceId}} 单体编号:{{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> </view>
</template> </template>
<template v-slot:body> <template v-slot:body>
@ -19,16 +19,17 @@
<uni-col :span="8"> <uni-col :span="8">
<view>簇号</view> <view>簇号</view>
</uni-col> </uni-col>
<uni-col :span="14"> <uni-col :span="16">
<view class="right">{{item.clusterDeviceId}}</view> <view class="right">{{item.clusterDeviceId || '-'}}</view>
</uni-col> </uni-col>
</uni-row> </uni-row>
<uni-row> <uni-row>
<uni-col :span="8"> <uni-col :span="8">
<view>电压（V）</view> <view>电压（V）</view>
</uni-col> </uni-col>
<uni-col :span="14"> <uni-col :span="16">
<view class="right color" @click="toDetail(item,'voltage')">{{item.voltage}} <view class="right color">
<text @click="toDetail(item,'voltage')">{{item.voltage | formatNumber}}</text>
</view> </view>
</uni-col> </uni-col>
</uni-row> </uni-row>
@ -36,9 +37,10 @@
<uni-col :span="8"> <uni-col :span="8">
<view>温度（℃）</view> <view>温度（℃）</view>
</uni-col> </uni-col>
<uni-col :span="14"> <uni-col :span="16">
<view class="right color" @click="toDetail(item,'temperature')"> <view class="right color">
{{item.temperature}} <text
@click="toDetail(item,'temperature')">{{item.temperature | formatNumber}}</text>
</view> </view>
</uni-col> </uni-col>
</uni-row> </uni-row>
@ -46,16 +48,20 @@
<uni-col :span="8"> <uni-col :span="8">
<view>SOC（%）</view> <view>SOC（%）</view>
</uni-col> </uni-col>
<uni-col :span="14"> <uni-col :span="16">
<view class="right color" @click="toDetail(item,'soc')">{{item.soc}}</view> <view class="right color">
<text @click="toDetail(item,'soc')">{{item.soc | formatNumber}}</text>
</view>
</uni-col> </uni-col>
</uni-row> </uni-row>
<uni-row> <uni-row>
<uni-col :span="8"> <uni-col :span="8">
<view>SOH（%）</view> <view>SOH（%）</view>
</uni-col> </uni-col>
<uni-col :span="14"> <uni-col :span="16">
<view class="right color" @click="toDetail(item,'soh')">{{item.soh}}</view> <view class="right color">
<text @click="toDetail(item,'soh')">{{item.soh | formatNumber}}</text>
</view>
</uni-col> </uni-col>
</uni-row> </uni-row>
</view> </view>
@ -382,21 +388,18 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
position: relative; position: relative;
background: #f5f5f5;
// position: fixed;
// width: 100%;
// height: 100%;
// overflow-y: auto;
.search-icon { .search-icon {
position: fixed; position: fixed;
bottom: 20px; bottom: 40rpx;
right: 20px; right: 40rpx;
z-index: 1; z-index: 1;
height: 50px; height: 60rpx;
width: 50px; width: 60rpx;
background-color: #007aff; background-color: #007aff;
border-radius: 100%; border-radius: 100%;
line-height: 50px; line-height: 60rpx;
text-align: center; text-align: center;
} }
@ -407,20 +410,26 @@
} }
.list-container { .list-container {
// z-index: 10; padding-top: 40rpx;
padding-top: 20px; padding-bottom: 100rpx;
padding-bottom: 50px; background: transparent;
background: #ffffff;
::v-deep { ::v-deep {
.uni-list {
background: transparent;
}
.uni-list-item { .uni-list-item {
padding: 12px 15px; padding: 10rpx 30rpx;
background-color: transparent !important;
} }
.uni-list-item__container { .uni-list-item__container {
background-color: #ffffff;
padding: 0; padding: 0;
display: block; 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, .uni-list--border-top,
@ -431,61 +440,63 @@
} }
.list-header { .list-header {
background-color: #05AEA3; border-radius: 14rpx 14rpx 0 0;
color: #fff; border-bottom: 1px solid #eee;
padding: 10px 15px; padding: 20rpx 30rpx;
border-radius: 5px 5px 0 0; font-weight: 700;
position: relative; position: relative;
color: #333;
.charts { .charts-btn {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 15px; right: 20rpx;
transform: translateY(-50%); transform: translateY(-50%);
// background-color: #ff7300; background-color: #4c7af3;
} }
} }
.list-body { .list-body {
padding: 10px 15px; padding: 10rpx 0;
border: 1px solid #eee;
border-top: none;
border-radius: 0 0 5px 5px;
font-size: 14px;
color: #666;
.right { >.uni-row {
font-size: 26rpx;
line-height: 36rpx;
color: #000; color: #000;
} padding: 12rpx 30rpx;
.color { .left {
color: #007aff; color: #333;
} text-align: left;
}
.uni-row { .right {
margin-bottom: 10px; text-align: right;
&:last-child { &.color {
margin-bottom: 0; color: #4c7af3;
font-weight: 700;
}
} }
} }
} }
} }
.chart-popup { .chart-popup {
width: 360px; width: 720rpx;
background-color: #fff; background-color: #fff;
padding: 10px 15px; padding: 20rpx 30rpx;
.chart-container { .chart-container {
width: 100%; width: 100%;
height: 250px; height: 500rpx;
margin-top: 20px; margin-top: 40rpx;
} }
::v-deep { ::v-deep {
uni-canvas { uni-canvas {
height: 250px; height: 500rpx;
width: 100%; width: 100%;
} }
} }

228
pages/work/pcs/index.vue
View File

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

BIN
static/images/ems/pcs/jrcdl.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
static/images/ems/pcs/jrfdl.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
static/images/ems/pcs/soc.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
static/images/ems/pcs/soh.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
static/images/ems/pcs/sswggl.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
static/images/ems/pcs/ssyggl.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

245
static/scss/global.scss
View File

@ -98,4 +98,249 @@
line-height: 100px; line-height: 100px;
height: 100px; height: 100px;
font-size: 18px; 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;
}
}
} }