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
@@ -51,7 +51,11 @@ export default {
|
||||
},
|
||||
{
|
||||
name: '运行监控',
|
||||
path: '/monitor'
|
||||
path: '/main/monitor'
|
||||
},
|
||||
{
|
||||
name: '统计分析',
|
||||
path: '/main/statisticalAnalysis'
|
||||
},
|
||||
{
|
||||
name: '系统管理',
|
||||
|
||||
704
web/src/views/statisticalAnalysis.vue
Normal file
704
web/src/views/statisticalAnalysis.vue
Normal file
@@ -0,0 +1,704 @@
|
||||
<template>
|
||||
<div class="statisicalAn">
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div class="tab-header">
|
||||
<div v-for="item in tabList" :key="item.key" class="tab">
|
||||
<span
|
||||
:class="[activeKey == item.key ? 'actived' : 'uactived']"
|
||||
@click="activeKey = item.key"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<searchBox
|
||||
class="searchBox"
|
||||
ref="searchBox"
|
||||
:btn-option-list="[]"
|
||||
:search-options="searchOptions"
|
||||
:title-option="{ title: '', info: '' }"
|
||||
@onSearch="onSearch"
|
||||
>
|
||||
</searchBox>
|
||||
</div>
|
||||
<div class="content">
|
||||
<energyEchart
|
||||
:chart-options="echartsInfo[activeKey].chartOptions"
|
||||
:chart-data="echartsInfo[activeKey].chartData"
|
||||
:columns="tableList[activeKey].columns"
|
||||
:table-info="tableList[activeKey].tableInfo"
|
||||
></energyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
|
||||
import searchBox from '@/components/SearchBox.vue'
|
||||
export default {
|
||||
name: 'StatisicalAnView',
|
||||
components: { energyEchart, searchBox },
|
||||
|
||||
data() {
|
||||
return {
|
||||
paramsDate: {},
|
||||
|
||||
searchOptions: [
|
||||
{
|
||||
label: '日期',
|
||||
type: 'datePick',
|
||||
value: [],
|
||||
key: 'time'
|
||||
}
|
||||
],
|
||||
echartsInfo: {
|
||||
0: {
|
||||
chartOptions: [
|
||||
{
|
||||
title: '充放电分析',
|
||||
type: 'bar',
|
||||
dataKey: 'sales',
|
||||
infoKeys: [
|
||||
{ key: 'key1', label: '日充电电量', lineColor: '#2A82E4' },
|
||||
{ key: 'key2', label: '日放电电量', lineColor: '#5AABF2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '运行状态分析',
|
||||
type: 'bar',
|
||||
dataKey: 'users',
|
||||
infoKeys: [
|
||||
{ key: 'key1', label: '日故障次数', lineColor: '#0CDAF5' },
|
||||
{ key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
|
||||
{ key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '电压与电流分析',
|
||||
type: 'line',
|
||||
dataKey: 'stock',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'key1',
|
||||
label: '电压',
|
||||
lineColor: '#3F80F2',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
label: '电流',
|
||||
lineColor: '#A9A6FF',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '功率分析',
|
||||
type: 'line',
|
||||
dataKey: 'yearly',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'key1',
|
||||
label: '功率',
|
||||
lineColor: '#00FFFB',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chartData: {
|
||||
sales: [
|
||||
{
|
||||
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
|
||||
}
|
||||
],
|
||||
users: [
|
||||
{
|
||||
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
|
||||
}
|
||||
],
|
||||
stock: [
|
||||
{
|
||||
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
|
||||
}
|
||||
],
|
||||
yearly: [
|
||||
{
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
activeKey: '0',
|
||||
tabList: [
|
||||
{
|
||||
key: '0',
|
||||
name: '储能设备'
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
name: '光伏设备'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '充电设备'
|
||||
}
|
||||
],
|
||||
tableList: {
|
||||
0: {
|
||||
columns: [
|
||||
{
|
||||
title: '设备ID',
|
||||
dataIndex: 'key1',
|
||||
key: 'key1',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'key2',
|
||||
key: 'key2',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'key3',
|
||||
key: 'key3',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '充电电量',
|
||||
dataIndex: 'key4',
|
||||
key: 'key4',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '充电时长',
|
||||
dataIndex: 'key5',
|
||||
key: 'key5',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '放电时长',
|
||||
dataIndex: 'key6',
|
||||
key: 'key6',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '放电电量',
|
||||
dataIndex: 'key7',
|
||||
key: 'key7',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '故障次数',
|
||||
dataIndex: 'key8',
|
||||
key: 'key8',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'key9',
|
||||
key: 'key9',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
}
|
||||
],
|
||||
tableInfo: {
|
||||
tableId: '',
|
||||
geturl: ''
|
||||
}
|
||||
|
||||
// tableData:[
|
||||
// {
|
||||
// key1:'1515151515',
|
||||
// key2:'设备1111',
|
||||
// key3:'类型',
|
||||
// key4:'电量',
|
||||
// key5:'时长',
|
||||
// key6:'时长',
|
||||
// key7:'dianl',
|
||||
// key8:'时长',
|
||||
// key9:'时长11',
|
||||
// },
|
||||
// {
|
||||
// key1:'1515151515',
|
||||
// key2:'设备1111',
|
||||
// key3:'类型',
|
||||
// key4:'电量',
|
||||
// key5:'时长',
|
||||
// key6:'时长',
|
||||
// key7:'dianl',
|
||||
// key8:'时长',
|
||||
// key9:'时长11',
|
||||
// },
|
||||
// {
|
||||
// key1:'1515151515',
|
||||
// key2:'设备1111',
|
||||
// key3:'类型',
|
||||
// key4:'电量',
|
||||
// key5:'时长',
|
||||
// key6:'时长',
|
||||
// key7:'dianl',
|
||||
// key8:'时长',
|
||||
// key9:'时长11',
|
||||
// },
|
||||
// {
|
||||
// key1:'1515151515',
|
||||
// key2:'设备1111',
|
||||
// key3:'类型',
|
||||
// key4:'电量',
|
||||
// key5:'时长',
|
||||
// key6:'时长',
|
||||
// key7:'dianl',
|
||||
// key8:'时长',
|
||||
// key9:'时长11',
|
||||
// },
|
||||
// ]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
beforeUnmount() {},
|
||||
methods: {
|
||||
onSearch(data) {
|
||||
this.paramsDate.startTime = data.time ? data.time[0] : ''
|
||||
this.paramsDate.endTime = data.time ? data.time[1] : ''
|
||||
this.pageOption.current = 1
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import url(@/style/color.scss);
|
||||
.statisicalAn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
background: $bg1-color;
|
||||
border-radius: 15px;
|
||||
.tab-header {
|
||||
display: flex;
|
||||
|
||||
.tab {
|
||||
& > span {
|
||||
font-size: 14px;
|
||||
margin-right: 15px;
|
||||
display: inline-block;
|
||||
padding: 10px 50px;
|
||||
cursor: pointer;
|
||||
border: 1px solid $tab-border;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actived {
|
||||
color: #ffffff;
|
||||
|
||||
background-color: $green;
|
||||
}
|
||||
.uactived {
|
||||
color: #a6b8dd;
|
||||
background-color: $bg2-color;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
overflow: scroll;
|
||||
height: calc(100% - 15px);
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user