mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
系统总览页面
This commit is contained in:
ym1026
411
web/src/views/sub/Home.vue
Normal file
411
web/src/views/sub/Home.vue
Normal file
@@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<div class="Home">
|
||||
<div class="content-left">
|
||||
<div v-for="(item, i) in leftList" :key="i" :class="`grid-item ${item.class}`">
|
||||
<div class="tool">
|
||||
<div class="title">
|
||||
<i class="iconfont icon-hebing linear-text"></i>
|
||||
<span class="linear-text">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tianditu">
|
||||
<Map></Map>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div v-for="(item, i) in rightList" :key="i" :class="`grid-item ${item.class}`">
|
||||
<div class="tool">
|
||||
<div class="title">
|
||||
<i class="iconfont icon-hebing linear-text"></i>
|
||||
<span class="linear-text">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import onLine from '@/components/Home/onLine.vue'
|
||||
import Operational from '@/components/Home/Operational.vue'
|
||||
import Energy from '@/components/Home/Energy.vue'
|
||||
import Charge from '@/components/Home/Charge.vue'
|
||||
import Pv from '@/components/Home/Pv.vue'
|
||||
import Alarm from '@/components/Home/Alarm.vue'
|
||||
import Map from '@/components/Home/Map.vue'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {Map},
|
||||
data() {
|
||||
return {
|
||||
deviceInfo: {},
|
||||
list: [
|
||||
{
|
||||
title: '运行状况',
|
||||
class: 'online-status',
|
||||
componentId: onLine,
|
||||
infoKey: 'onLine'
|
||||
},
|
||||
{
|
||||
title: '运行分析',
|
||||
class: 'stats-cards',
|
||||
componentId: Operational,
|
||||
infoKey: 'stats'
|
||||
},
|
||||
{
|
||||
title: '储能设备',
|
||||
class: 'energy-status',
|
||||
componentId: Energy,
|
||||
infoKey: 'energy'
|
||||
},
|
||||
{
|
||||
title: '充电设备',
|
||||
class: 'charge-analysis',
|
||||
componentId: Charge,
|
||||
infoKey: 'charge'
|
||||
},
|
||||
|
||||
{
|
||||
title: '光伏设备',
|
||||
class: 'work-order',
|
||||
componentId: Pv,
|
||||
infoKey: 'pv'
|
||||
},
|
||||
{
|
||||
title: '告警信息',
|
||||
class: 'alarm-stats',
|
||||
componentId: Alarm,
|
||||
infoKey: 'alarm'
|
||||
}
|
||||
],
|
||||
|
||||
sysName: '',
|
||||
user: JSON.parse(localStorage.getItem('user')) || {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
leftList() {
|
||||
return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
|
||||
},
|
||||
rightList() {
|
||||
return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.deviceInfo = {
|
||||
alarm: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: 0,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-17',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
}
|
||||
],
|
||||
energy: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
}
|
||||
],
|
||||
charge: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
}
|
||||
],
|
||||
pv: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: '2',
|
||||
key2: '2'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.Home {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tianditu {
|
||||
width: calc(100% - 520px * 2) ;
|
||||
height: 100%;
|
||||
margin: 0px 15px;
|
||||
|
||||
}
|
||||
|
||||
.content-left,
|
||||
.content-right {
|
||||
height: 100%;
|
||||
width: 520px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: calc(33% - 10px);
|
||||
z-index: 20;
|
||||
|
||||
.tool {
|
||||
background: linear-gradient(180deg, rgba(0, 10, 6, 0) 0%, rgba(0, 76, 112, 1) 100%);
|
||||
border-bottom: 2px solid transparent;
|
||||
border-image: linear-gradient(90deg, rgba(3, 220, 255, 1) 0%, rgba(0, 19, 13, 0) 100%) 0 0 2 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
|
||||
.linear-text {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(40, 235, 231, 1) 100%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.text_right {
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
|
||||
div {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.mark {
|
||||
margin: 0px 2px;
|
||||
font-weight: bold;
|
||||
color: #43cf7c;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 186, 173, 0.15) 0%,
|
||||
rgba(61, 254, 250, 0.15) 49.2%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
display: inline-block;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user