jsyhsec/energy_storage
7
0
Fork 0
mirror of https://gitee.com/js-yhsec/energy_storage.git synced 2026-05-27 18:59:26 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
61ed4f355fd67a2664f7063dad1cbfdce7221275
energy_storage/web/src/views/statisticalAnalysis.vue

783 lines
18 KiB
Vue
Raw Normal View History

统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
<template>
<div class="statisicalAn">
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
<div style="display: flex; justify-content: space-between; height: 50px">
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
<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>
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
<div class="main_content">
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
<energyEchart
:chart-options="echartsInfo[activeKey].chartOptions"
:chart-data="echartsInfo[activeKey].chartData"
:columns="tableList[activeKey].columns"
:table-info="tableList[activeKey].tableInfo"
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
:table-data="tableList[activeKey].tableData"
@pagesizeChange="pagesizeChange()"
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
></energyEchart>
</div>
</div>
</template>
<script>
import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
import searchBox from '@/components/SearchBox.vue'
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
import { postReq } from '@/request/api'
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
export default {
name: 'StatisicalAnView',
components: { energyEchart, searchBox },
data() {
return {
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
categoryArr: [
{
type: 1,
label: '储能设备',
infoKey: 'energy'
},
{
type: 2,
label: '充电设备',
infoKey: 'charge'
},
{
type: 3,
label: '光伏设备',
infoKey: 'pv'
}
],
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
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)'
}
]
}
],
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
chartData: {}
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
}
},
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
activeKey: 0,
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
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
}
],
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
geturl: '',
tableData: [],
pageOption: {
current: 1,
pageSize: 10,
total: 1
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
}
}
}
}
},
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
async mounted() {
await Promise.all([
this.getTableList(),
this.getEchartsList()
])
},
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
beforeUnmount() {},
methods: {
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
pagesizeChange(e) {
console.log(e, 'eeeeeeeeeeeeeee')
this.tableList[this.activeKey].pageOption.pageSize = e.pageSize
this.tableList[this.activeKey].pageOption.current = e.current
this.getTableList()
},
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
onSearch(data) {
this.paramsDate.startTime = data.time ? data.time[0] : ''
this.paramsDate.endTime = data.time ? data.time[1] : ''
this.pageOption.current = 1
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
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
}
try {
const res = await postReq(query, '')
if (res.code === 200) {
this.echartsInfo[this.activeKey].chartData= res.data
} else {
throw res
}
} catch (error) {
this.echartsInfo[this.activeKey].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
}
]
}
}
},
async getTableList() {
const currentInfo = this.tableList[this.activeKey]
const query = {
...this.paramsDate,
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
pageSize: currentInfo.pageOption.pageSize,
pageNumber: currentInfo.pageOption.current
}
try {
const res = await postReq(query, currentInfo.getUrl)
if (res.code === 200) {
currentInfo.tableData = res.data.records
currentInfo.pageOption = {
current: res.data.pageNumber,
pageSize: res.data.pageSize,
total: res.data.totalRow
}
} else {
throw res
}
} catch (error) {
this.tableList[this.activeKey].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'
}
]
}
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
}
}
}
</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;
}
}
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
.main_content {
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
overflow: scroll;
height: calc(100% - 15px);
组件之间数据渲染逻辑
2025-09-03 15:41:12 +08:00
// margin-top: 10px;
统计分析模块储能设备开发
2025-09-02 17:05:10 +08:00
}
</style>
Reference in New Issue Copy Permalink