mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
705 lines
17 KiB
Vue
705 lines
17 KiB
Vue
<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>
|