xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

站点首页优化

Browse Source
This commit is contained in:
白菜
2026-01-22 17:27:03 +08:00
parent 823c0949d0
commit fb90d81bb3
6 changed files with 350 additions and 1423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
src/views/ems/dzjk/home/index.vue
View File

@ -1,7 +1,8 @@
<template>
<div v-loading="loading">
<el-row style="background: #fff" class="row-container" :gutter="15">
<el-col :xs="24" :sm="24" :lg="8">
<el-col :xs="24" :sm="24" :lg="5">
<!-- 站点信息-->
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
@ -9,49 +10,86 @@
<div slot="header">
<span class="card-title">站点信息</span>
<div class="alarm-msg" v-if="tableData.length > 0" @click="toAlarm">
<i class="el-icon-message-solid"></i>
<i class="el-icon-message-solid"></i> 设备告警
</div>
</div>
<div
style="box-sizing: border-box; height: 250px; padding: 20px 15px"
style="box-sizing: border-box; height: 218px; padding: 20px 15px"
>
<el-descriptions class="home-normal-info" :column="1">
<el-descriptions-item
size="mini"
v-for="(item, index) in singleZdInfo"
:key="index + 'singleZdInfo'"
:label="item.title"
>{{ info[item.attr] | formatNumber }}
</el-descriptions-item
<!-- 地址、运行时间-->
<div class="site-info site-info-address">
<div class="title">
<i class="el-icon-location"></i>
</div>
<div class="value">{{ info.siteAddress }}</div>
</div>
<div class="site-info">
<div class="title">
<i class="el-icon-date"></i>
</div>
<div class="value">{{ info.runningTime || '-' }}</div>
</div>
<!-- 装机功率、容量 -->
<el-row :gutter="10" style="margin-top:20px;">
<el-col
:span="12"
class="sjgl-col power-col"
>
</el-descriptions>
<div class="sjgl-wrapper">
<div class="sjgl-title">装机功率(MW)</div>
<div class="sjgl-value">
{{ info.installPower | formatNumber }}
</div>
</div>
</el-col>
<el-col
:span="12"
class="sjgl-col power-col"
>
<div class="sjgl-wrapper">
<div class="sjgl-title">装机容量(MW)</div>
<div class="sjgl-value">
{{ info.installCapacity | formatNumber }}
</div>
</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :lg="16">
<cl-info :info="runningInfo.strategyTempInfo"/>
</el-col>
<el-col :xs="24" :sm="24" :lg="12">
<!--策略信息-->
<!-- <el-col :xs="24" :sm="24" :lg="16">-->
<!-- <cl-info :info="runningInfo.strategyTempInfo"/>-->
<!-- </el-col>-->
<!-- 总累计运行数据-->
<el-col :xs="24" :sm="24" :lg="19">
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header">
<span class="card-title">总累计运行数据</span>
<div class="total-count">
<span class="title">总收入</span>
<span class="value">{{ runningInfo.totalRevenue | formatNumber }}</span>
<span class="unit">元</span>
</div>
</div>
<div
style="box-sizing: border-box; height: 250px; padding: 20px 15px"
style="box-sizing: border-box; height: 218px; padding: 20px 15px"
>
<el-row :gutter="20">
<el-row :gutter="10">
<el-col
:span="12"
:span="6"
v-for="(item, index) in sjglData"
:key="index + 'sjglData'"
class="sjgl-data"
class="sjgl-col"
>
<div class="sjgl-title">{{ item.title }}</div>
<div class="sjgl-value">
{{ runningInfo[item.attr] | formatNumber }}
<div class="sjgl-wrapper">
<div class="sjgl-title">{{ item.title }}</div>
<div class="sjgl-value" :style="{color:item.color}">
{{ runningInfo[item.attr] | formatNumber }}
</div>
</div>
</el-col>
</el-row>
@ -59,37 +97,9 @@
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :lg="12">
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header">
<span class="card-title">收入对比数据</span>
</div>
<div
style="box-sizing: border-box; height: 250px; padding: 20px 15px"
>
<el-row :gutter="20">
<el-col
v-for="(item, index) in revenueData"
:key="index + 'revenueData'"
:span="index === 2 ? 24 : 12"
class="sjgl-data"
:style="{marginTop:index === 2 ? '40px' : 0}"
>
<div class="sjgl-title">{{ item.title }}</div>
<div class="sjgl-value">
{{ runningInfo[item.attr] | formatNumber }}
</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :lg="24">
<week-chart ref="weekChart"/>
</el-col>
<el-col :xs="24" :sm="24" :lg="24">
<el-col :xs="24" :sm="24" :lg="12">
<active-chart ref="activeChart"/>
</el-col>
</el-row>
@ -113,62 +123,46 @@ export default {
data() {
return {
loading: false,
singleZdInfo: [
{
title: "电站位置",
attr: "siteAddress",
},
{
title: "投运时间",
attr: "runningTime",
},
{
title: "装机功率(MW)",
attr: "installPower",
},
{
title: "装机容量(MW)",
attr: "installCapacity",
},
],
sjglData: [
{
title: "今日充电量（kWh）",
attr: "dayChargedCap",
color: '#4472c4'
},
{
title: "今日放电量（kWh）",
attr: "dayDisChargedCap",
},
{
title: "昨日充电量（kWh）",
attr: "todo",
},
{
title: "昨日放电量（kWh）",
attr: "todo",
color: '#70ad47'
},
{
title: "总充电量（kWh）",
attr: "totalChargedCap",
color: '#4472c4'
},
{
title: "今日实时收入（元）",
attr: "dayRevenue",
color: '#f67438'
},
{
title: "昨日充电量（kWh）",
attr: "todo",
color: '#4472c4'
},
{
title: "昨日放电量（kWh）",
attr: "todo",
color: '#70ad47'
},
{
title: "总放电量（kWh）",
attr: "totalDischargedCap",
},
],
revenueData: [
{
title: "当日实时收入（元）",
attr: "dayRevenue",
color: '#70ad47'
},
{
title: "昨日实时收入（元）",
attr: "todo",
},
{
title: "总收入（元）",
attr: "totalRevenue",
color: '#f67438'
},
],
info: {}, //基本信息
@ -217,21 +211,73 @@ export default {
</script>
<style scoped lang="scss">
//设备告警
.alarm-msg {
background: #ffcec6;
width: 32px;
border-radius: 17px;
text-align: center;
font-size: 22px;
line-height: 30px;
background: #ff4949;
padding: 2px 5px;
font-size: 10px;
font-weight: bolder;
border-radius: 3px;
line-height: 20px;
cursor: pointer;
color: #ff4949;
color: #fff;
position: absolute;
right: 20px;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
//基本信息-地址 运行️时间
.site-info {
display: flex;
font-size: 12px;
line-height: 20px;
margin-bottom: 10px;
align-items: center;
&.site-info-address {
height: 40px;
}
.title {
color: #1791ff;
font-size: 18px;
line-height: 20px;
margin-right: 7px;
}
.value {
color: #000;
font-size: 12px;
max-height: 40px;
overflow: hidden;
}
}
//总收入
.total-count {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
font-weight: bolder;
color: #333;
line-height: 14px;
.unit {
font-style: italic;
}
.value {
font-size: 22px;
font-weight: bolder;
color: #ed2f1d;
font-style: italic;
padding: 0 5px;
}
}
.row-container {
& > .el-col {
margin-bottom: 20px;
@ -239,28 +285,47 @@ export default {
}
//数据概览
.sjgl-data {
text-align: center;
.sjgl-col {
.sjgl-wrapper {
text-align: left;
padding: 15px 20px;
background-color: #f2f7fb;
}
&:nth-child(1),
&.power-col {
.sjgl-wrapper {
padding: 10px;
.sjgl-value {
color: #c44444;
}
}
}
&:nth-child(4),
&:nth-child(2),
&:nth-child(3),
&:nth-child(4) {
margin-bottom: 25px;
margin-bottom: 10px;
}
.sjgl-title {
color: #666666;
color: #717171;
line-height: 14px;
font-weight: bold;
}
.sjgl-value {
color: rgba(51, 51, 51, 1);
font-size: 26px;
font-size: 22px;
line-height: 26px;
font-weight: 500;
font-weight: bolder;
font-style: italic;
margin-top: 14px;
word-wrap: break-word;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
</style>