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-04 16:04:37 +08:00
parent 61ed4f355f
commit 1cc916c53c
18 changed files with 517 additions and 959 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
web/src/components/statisticalAnalysis/energyEchart.vue
View File

@@ -10,7 +10,6 @@
</div>
</div>
<div class="content-table">
<ComTable
:columns="columns"
:table-data="tableData"
@@ -24,16 +23,17 @@
</div>
</template>
<script>
import {postReq} from '@/request/api'
import { processData } from '@/utils/dealWithData'
import { postReq } from '@/request/api'
import ComTable from '@/components/ComTable'
export default {
name: 'StatisicalAnView',
components: { ComTable },
props: {
tableInfo:{
tableInfo: {
type: Object,
default: () => ({}), // 默认空对象
required: false, // 非必须
required: false // 非必须
},
columns: {
type: Array,
@@ -52,7 +52,7 @@ export default {
},
tableData: {
type: Array,
default: () => ([]), // 默认空对象
default: () => [] // 默认空对象
}
},
data() {
@@ -62,180 +62,17 @@ export default {
scroll: {
x: 1500
},
select: false,
select: false
},
tableH: 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: [
// { value: 40, name: 'A' },
// { value: 60, name: 'B' }
// ],
// stock: [30, 50, 80],
// yearly: [100, 120, 90, 110]
// },
chartInstances: [] // 存储 ECharts 实例
}
},
watch:{
watch: {
chartData: {
handler(n) {
console.log(n, 'nnnnnnnnnnnnnnnnnnnnnnn')
this.$nextTick(() => {
this.initCharts()
window.addEventListener('resize', this.handleResize)
@@ -244,7 +81,8 @@ export default {
}
},
mounted() {
// this.initCharts()
// window.addEventListener('resize', this.handleResize)
},
beforeUnmount() {
window.removeEventListener('resize', this.handleResize)
@@ -255,10 +93,9 @@ export default {
this.chartOptions.forEach((option, index) => {
const dom = this.$refs[`chartContainer${index}`][0]
if (!dom) return
const chart = this.$echarts.init(dom)
this.chartInstances.push(chart) // 存储实例
const keys= option.infoKeys.map((item) => item.key)
// 设置图表配置
chart.setOption({
tooltip: {
@@ -281,8 +118,9 @@ export default {
},
xAxis: {
type: 'category',
data: this.processData(option.infoKeys, option.dataKey, this.chartData[option.dataKey])
data: processData(this.chartData,keys)
.dates,
axisLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
@@ -328,41 +166,23 @@ export default {
},
global: false,
showSymbol: false,
data: this.processData(
option.infoKeys,
option.dataKey,
this.chartData[option.dataKey]
data: processData(
this.chartData,
keys
).values[i]
}
})
})
})
},
processData(keysList, dataKey, data) {
const keys = keysList.map((item) => item.key)
data.sort((a, b) => {
return new Date(a.dt) - new Date(b.dt)
})
const dates = data.map((item) => item.dt)
const values = []
keys.forEach((item, index) => {
values[index] = data.map((dataValue) => dataValue[keys[index]])
})
return {
dates,
values
}
},
handleResize() {
this.chartInstances.forEach((chart) => chart && chart.resize())
},
handlePagesizeChange(pageOption) {
this.$emit('pagesizeChange_energy',pageOption)
// this.pageOption.pageSize = pageOption.pageSize
// this.pageOption.current = pageOption.current
// this.getList()
this.$emit('pagesizeChange_energy', pageOption)
}
}
}