mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
646 lines
17 KiB
Vue
646 lines
17 KiB
Vue
<template>
|
|
<div class="statisicalAn">
|
|
<div style="display: flex; justify-content: space-between; height: 50px">
|
|
<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="main_content">
|
|
<energyEchart
|
|
:key="activeKey"
|
|
:chart-options="echartsInfo[activeKey].chartOptions"
|
|
:chart-data="echartsInfo[activeKey].chartData"
|
|
:columns="tableList[activeKey].columns"
|
|
:table-info="tableList[activeKey].tableInfo"
|
|
:table-data="tableList[activeKey].tableData"
|
|
@pagesizeChange="pagesizeChange()"
|
|
></energyEchart>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
|
|
import searchBox from '@/components/SearchBox.vue'
|
|
import { postReq, getReq } from '@/request/api'
|
|
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
|
|
|
|
export default {
|
|
name: 'StatisicalAnView',
|
|
components: { energyEchart, searchBox },
|
|
|
|
data() {
|
|
return {
|
|
categoryArr: [
|
|
{
|
|
type: 1,
|
|
label: '储能设备',
|
|
infoKey: 'energy'
|
|
},
|
|
{
|
|
type: 2,
|
|
label: '充电设备',
|
|
infoKey: 'charge'
|
|
},
|
|
{
|
|
type: 3,
|
|
label: '光伏设备',
|
|
infoKey: 'pv'
|
|
}
|
|
],
|
|
paramsDate: {},
|
|
searchOptions: [
|
|
{
|
|
label: '日期',
|
|
type: 'datePick1',
|
|
value: [],
|
|
key: 'time'
|
|
}
|
|
],
|
|
echartsInfo: {
|
|
0: {
|
|
chartOptions: [
|
|
{
|
|
title: '充放电分析',
|
|
type: 'bar',
|
|
dataKey: 'sales',
|
|
infoKeys: [
|
|
{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' },
|
|
{ key: 'storage_elect_out', label: '日放电电量', lineColor: '#5AABF2' }
|
|
]
|
|
},
|
|
{
|
|
title: '运行状态分析',
|
|
type: 'bar',
|
|
dataKey: 'users',
|
|
infoKeys: [
|
|
{ key: 'storage_num_err', 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: {}
|
|
},
|
|
1: {
|
|
chartOptions: [
|
|
{
|
|
title: '发电电量分析',
|
|
type: 'bar',
|
|
dataKey: 'sales',
|
|
infoKeys: [
|
|
{ key: 'storage_elect_in', label: '日发电电量', lineColor: '#2A82E4' },
|
|
]
|
|
},
|
|
{
|
|
title: '运行状态分析',
|
|
type: 'bar',
|
|
dataKey: 'users',
|
|
infoKeys: [
|
|
{ key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
|
|
{ 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: {}
|
|
},
|
|
2: {
|
|
chartOptions: [
|
|
{
|
|
title: '充电分析',
|
|
type: 'bar',
|
|
dataKey: 'sales',
|
|
infoKeys: [
|
|
{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' },
|
|
]
|
|
},
|
|
{
|
|
title: '运行状态分析',
|
|
type: 'bar',
|
|
dataKey: 'users',
|
|
infoKeys: [
|
|
{ key: 'storage_num_err', label: '日充电次数', lineColor: '#0CDAF5' },
|
|
{ key: 'key3', label: '日故障次数', lineColor: '#5AABF2' },
|
|
{ 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: {}
|
|
}
|
|
},
|
|
activeKey: 0,
|
|
tabList: [
|
|
{
|
|
key: 0,
|
|
name: '储能设备'
|
|
},
|
|
{
|
|
key: 1,
|
|
name: '光伏设备'
|
|
},
|
|
{
|
|
key: 2,
|
|
name: '充电设备'
|
|
}
|
|
],
|
|
tableList: {
|
|
0: {
|
|
columns: [
|
|
{
|
|
title: '设备ID',
|
|
dataIndex: 'ID',
|
|
key: 'ID',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '设备名称',
|
|
dataIndex: 'key2',
|
|
key: 'key2',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '设备类型',
|
|
dataIndex: 'key3',
|
|
key: 'key3',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '充电电量',
|
|
dataIndex: 'storage_elect_in',
|
|
key: 'storage_elect_in',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '充电时长',
|
|
dataIndex: 'key5',
|
|
key: 'key5',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '放电时长',
|
|
dataIndex: 'key6',
|
|
key: 'key6',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '放电电量',
|
|
dataIndex: 'storage_elect_out',
|
|
key: 'storage_elect_out',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '故障次数',
|
|
dataIndex: 'storage_num_err',
|
|
key: 'storage_num_err',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '日期',
|
|
dataIndex: 'dt',
|
|
key: 'dt',
|
|
width: 120,
|
|
ellipsis: true
|
|
}
|
|
],
|
|
geturl: '',
|
|
tableData: [],
|
|
pageOption: {
|
|
page: 1,
|
|
pageSize: 10,
|
|
count: 1
|
|
}
|
|
},
|
|
1: {
|
|
columns: [
|
|
{
|
|
title: '设备ID',
|
|
dataIndex: 'ID',
|
|
key: 'ID',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '设备名称',
|
|
dataIndex: 'key2',
|
|
key: 'key2',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '设备类型',
|
|
dataIndex: 'key3',
|
|
key: 'key3',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '发电电量',
|
|
dataIndex: 'storage_elect_in',
|
|
key: 'storage_elect_in',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '发电时长',
|
|
dataIndex: 'key5',
|
|
key: 'key5',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '故障次数',
|
|
dataIndex: 'key6',
|
|
key: 'key6',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
|
|
{
|
|
title: '日期',
|
|
dataIndex: 'dt',
|
|
key: 'dt',
|
|
width: 120,
|
|
ellipsis: true
|
|
}
|
|
],
|
|
geturl: '',
|
|
tableData: [],
|
|
pageOption: {
|
|
page: 1,
|
|
pageSize: 10,
|
|
count: 1
|
|
}
|
|
},
|
|
2: {
|
|
columns: [
|
|
{
|
|
title: '设备ID',
|
|
dataIndex: 'ID',
|
|
key: 'ID',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '设备名称',
|
|
dataIndex: 'key2',
|
|
key: 'key2',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '设备类型',
|
|
dataIndex: 'key3',
|
|
key: 'key3',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '充电电量',
|
|
dataIndex: 'storage_elect_in',
|
|
key: 'storage_elect_in',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '充电时长',
|
|
dataIndex: 'key5',
|
|
key: 'key5',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '充电次数',
|
|
dataIndex: 'key6',
|
|
key: 'key6',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '故障次数',
|
|
dataIndex: 'key6',
|
|
key: 'key6',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '日期',
|
|
dataIndex: 'dt',
|
|
key: 'dt',
|
|
width: 120,
|
|
ellipsis: true
|
|
}
|
|
],
|
|
geturl: '',
|
|
tableData: [],
|
|
pageOption: {
|
|
page: 1,
|
|
pageSize: 10,
|
|
count: 1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
watch:{
|
|
activeKey(newVal, oldVal) {
|
|
console.log(newVal, oldVal,"activeKey")
|
|
// 清空旧数据（可选）
|
|
if( this.echartsInfo[oldVal]){
|
|
this.echartsInfo[oldVal].chartData = {};
|
|
this.tableList[oldVal].tableData = [];
|
|
// // 重新加载数据
|
|
this.getTableList()
|
|
this.getEchartsList()
|
|
}
|
|
|
|
|
|
|
|
}
|
|
},
|
|
async mounted() {
|
|
await Promise.all([this.getTableList(), this.getEchartsList()])
|
|
},
|
|
beforeUnmount() {},
|
|
methods: {
|
|
pagesizeChange(e) {
|
|
this.tableList[this.activeKey].pageOption.pageSize = e.pageSize
|
|
this.tableList[this.activeKey].pageOption.page = e.page
|
|
this.getTableList()
|
|
},
|
|
onSearch(data) {
|
|
this.paramsDate.start_date = data.time ? data.time[0] : ''
|
|
this.paramsDate.end_date = data.time ? data.time[1] : ''
|
|
|
|
this.tableList[this.activeKey].pageOption.page = 1
|
|
|
|
this.getTableList()
|
|
this.getEchartsList()
|
|
},
|
|
async getEchartsList() {
|
|
const currentInfo = this.echartsInfo[this.activeKey]
|
|
|
|
const query = {
|
|
...this.paramsDate,
|
|
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
|
|
// start_date: getDateDaysAgo(7 - 1),
|
|
// end_date: getDateDaysAgo(0)
|
|
}
|
|
try {
|
|
const res = await getReq('/queryStatDayList', query)
|
|
if (res.errcode === 0) {
|
|
this.echartsInfo[this.activeKey].chartData = res.data
|
|
console.log(
|
|
this.echartsInfo[this.activeKey].chartData,
|
|
' this.echartsInfo[this.activeKey].chartData'
|
|
)
|
|
} else {
|
|
throw res
|
|
}
|
|
} catch (error) {
|
|
this.echartsInfo[this.activeKey].chartData = {}
|
|
}
|
|
},
|
|
|
|
async getTableList() {
|
|
const currentInfo = this.tableList[this.activeKey]
|
|
const query = {
|
|
...this.paramsDate,
|
|
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
|
|
page_size: currentInfo.pageOption.pageSize,
|
|
pageNumber: currentInfo.pageOption.page
|
|
}
|
|
try {
|
|
const res = await getReq('/queryStatDayList', query)
|
|
if (res.errcode === 0) {
|
|
currentInfo.tableData = res.data
|
|
currentInfo.pageOption = {
|
|
page: res.data.page,
|
|
pageSize: res.data.page_size,
|
|
count: res.data.count
|
|
}
|
|
} else {
|
|
throw res
|
|
}
|
|
} catch (error) {
|
|
currentInfo.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'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
.main_content {
|
|
overflow: scroll;
|
|
height: calc(100% - 15px);
|
|
// margin-top: 10px;
|
|
}
|
|
</style>
|