jsyhsec/energy_storage
7
0
Fork 0
mirror of https://gitee.com/js-yhsec/energy_storage.git synced 2026-05-28 03:09:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

统计分析模块储能设备开发

Browse Source
This commit is contained in:
ym1026
2025-09-02 17:05:10 +08:00
parent cc9a30e205
commit 75fcddb6b7
9 changed files with 1405 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

450
web/src/components/statisticalAnalysis/energyEchart.vue Normal file
View File

@@ -0,0 +1,450 @@
<template>
<div class="content">
<div class="content-echarts">
<div v-for="(chart, index) in chartOptions" :key="index">
<div class="content-header">
<div class="verline"></div>
<span>{{ chart.title }}</span>
</div>
<div :ref="`chartContainer${index}`" class="chart-container"></div>
</div>
</div>
<div class="content-table">
<ComTable
:columns="columns"
:table-data="tableData"
@handlePagesizeChange="handlePagesizeChange"
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
></ComTable>
</div>
</div>
</template>
<script>
import {postReq} from '@/request/api'
import ComTable from '@/components/ComTable'
export default {
name: 'StatisicalAnView',
components: { ComTable },
props: {
tableInfo:{
type: Object,
default: () => ({}), // 默认空对象
required: false, // 非必须
},
columns: {
type: Array,
default: () => [], // 默认空对象
required: false // 非必须
},
chartOptions: {
type: Array,
default: () => [], // 默认空对象
required: false // 非必须
},
chartData: {
type: Object,
default: () => ({}), // 默认空对象
required: false // 非必须
}
},
data() {
return {
paramsDate: {},
tableData: [],
tableOption: {
scroll: {
x: 1500
}
},
tableH: 0,
pageOption: {
current: 1,
pageSize: 15,
total: 1
},
// 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: [
// { value: 40, name: 'A' },
// { value: 60, name: 'B' }
// ],
// stock: [30, 50, 80],
// yearly: [100, 120, 90, 110]
// },
chartInstances: [] // 存储 ECharts 实例
}
},
mounted() {
this.$nextTick(() => {
// 确保 DOM 完全渲染
this.initCharts()
window.addEventListener('resize', this.handleResize)
})
},
beforeUnmount() {
window.removeEventListener('resize', this.handleResize)
this.chartInstances.forEach((chart) => chart && chart.dispose())
},
methods: {
async getList() {
let that = this
this.$refs.comTable.loading = true
const query = {
...this.paramsDate,
pageSize: this.pageOption.pageSize,
pageNumber: this.pageOption.current
}
try {
const res = await postReq(query, this.tableInfo.getUrl)
if (res.code === 200) {
this.$refs.comTable.loading = false
this.tableData = res.data.records
this.pageOption = {
current: res.data.pageNumber,
pageSize: res.data.pageSize,
total: res.data.totalRow
}
this.getScrollDateFail = false
} else {
throw res
}
} catch (error) {
that.tableData = []
that.$refs.comTable.loading = false
}
},
initCharts() {
this.chartOptions.forEach((option, index) => {
// Vue 2 的 $refs 在 v-for 中是数组，需要取 [0]
const dom = this.$refs[`chartContainer${index}`][0]
console.log(dom, 'ddddddddddddddd')
if (!dom) return
const chart = this.$echarts.init(dom)
this.chartInstances.push(chart) // 存储实例
// 设置图表配置
chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: 20,
textStyle: {
color: '#fff'
}
},
grid: {
left: '3%',
right: '3%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.processData(option.infoKeys, option.dataKey, this.chartData[option.dataKey])
.dates,
axisLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
color: '#fff'
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
color: '#fff'
}
},
series: option.infoKeys.map((info, i) => {
return {
name: info.label,
smooth: true,
type: option.type,
barWidth: 10,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: info.lineColor
},
emphasis: {
focus: 'series'
},
areaStyle: {
global: false,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: info.colorStart }, // 顶部颜色
{ offset: 1, color: info.colorEnd } // 底部颜色
]
}
},
global: false,
showSymbol: false,
data: this.processData(
option.infoKeys,
option.dataKey,
this.chartData[option.dataKey]
).values[i]
}
})
})
})
},
processData(keysList, dataKey, data) {
const keys = keysList.map((item) => item.key)
console.log(keys, dataKey, data, 'dddddddddddddddddddddddddddd')
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date)
})
const dates = data.map((item) => item.date)
const values = []
keys.forEach((item, index) => {
values[index] = data.map((dataValue) => dataValue[keys[index]])
})
console.log(dates, values, 'dates')
return {
dates,
values
}
},
handleResize() {
this.chartInstances.forEach((chart) => chart && chart.resize())
},
handlePagesizeChange(pageOption) {
this.pageOption.pageSize = pageOption.pageSize
this.pageOption.current = pageOption.current
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
.content {
height: calc(100% - 38px);
overflow: scroll;
}
.content-echarts {
display: flex;
flex-wrap: wrap;
height: calc(750px - 38px);
color: #fff;
& > div {
padding: 20px 5px;
// margin-right: 10px;
background-color: rgba(33, 105, 195, 0.12);
border-radius: 2px;
width: calc(50% - 15px);
height: calc(50% - 10px);
&:nth-child(odd) {
margin-right: 10px;
}
.chart-container {
width: 100%;
height: 100%;
}
.content-header {
font-size: 12px;
display: flex;
align-items: center;
margin-left: 3%;
.verline {
margin-right: 10px;
background: linear-gradient(
180deg,
rgba(0, 230, 172, 1) 0%,
rgba(0, 210, 255, 1) 98.78%,
rgba(0, 210, 255, 1) 100%
),
rgba(1, 223, 239, 1);
width: 4px;
height: 20px;
border-radius: 6px;
}
}
}
}
.content-table {
margin-top: 20px;
min-height: 500px;
width: 100%;
padding-right: 10px;
}
</style>