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

统计分析接口联调

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

19
web/src/components/Home/Alarm.vue
View File

@@ -12,6 +12,7 @@
</template>
<script>
import {processData} from '@/utils/dealWithData'
export default {
name: '',
props: {
@@ -100,25 +101,11 @@ export default {
handleResize() {
this.faultChart.resize()
},
processData(data, keys) {
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
}
},
getChargeData() {
const arr = this.curList
const keyList = this.curList.map((item) => item.key)
const result = this.processData(this.deviceInfo, keyList)
const result = processData(this.deviceInfo, keyList)
this.lineChartData.xdata = result.dates
arr.forEach((item, index) => {

20
web/src/components/Home/Charge.vue
View File

@@ -12,6 +12,8 @@
</template>
<script>
import {processData} from '@/utils/dealWithData'
export default {
name: '',
props: {
@@ -110,25 +112,11 @@ export default {
this.chargeChart.resize()
}
},
processData(data, keys) {
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
}
},
getChargeData() {
const arr = this.curListEcharts
const keyList = this.curListEcharts.map((item) => item.key)
const result = this.processData(this.deviceInfo, keyList)
const result = processData(this.deviceInfo, keyList)
this.chargeChartData.xdata = result.dates
arr.forEach((item, index) => {

20
web/src/components/Home/Energy.vue
View File

@@ -14,6 +14,8 @@
</template>
<script>
import {processData} from '@/utils/dealWithData'
export default {
name: '',
props: {
@@ -92,25 +94,11 @@ export default {
this.energyChart.resize()
}
},
processData(data, keys) {
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
}
},
getChargeData() {
const arr = this.curList
const keyList = this.curList.map((item) => item.key)
const result = this.processData(this.deviceInfo, keyList)
const result = processData(this.deviceInfo, keyList)
this.energyChartData.xdata = result.dates
arr.forEach((item, index) => {

3
web/src/components/Home/Map.vue
View File

@@ -23,7 +23,7 @@
</template>
<div class="modal-content">
<div class="home-modal">
<Modal></Modal>
<Modal :station-id="changeStationId"></Modal>
</div>
</div>
</a-modal>
@@ -50,7 +50,6 @@ export default {
methods: {
async showModal(currentVal) {
this.changeStationId=currentVal.id
this.$emit('changeStation',this.changeStationId)
console.log(currentVal, 'cccccccccccccccccccccc')
this.showCtrModal = true
try {

253
web/src/components/Home/Modal.vue
View File

@@ -1,27 +1,31 @@
<template>
<div class="Home">
<div class="content-left">
<div v-for="(item, i) in leftList" :key="i" :class="`grid-item ${item.class}`">
<div v-for="item in leftList" :key="item.componentId" :class="`grid-item ${item.class}`">
<div class="tool">
<div class="title">
<span class="linear-text">{{ item.title }}</span>
</div>
</div>
<component :is="item.componentId" :props-total="deviceInfo.allTotal" :props-info="deviceInfo[item.infoKey]" ></component>
<component
:is="item.componentId"
:props-total="modalInfo.allTotal"
:props-info="modalInfo[item.infoKey]"
></component>
</div>
</div>
<div class="content-right">
<div v-for="(item, i) in rightList" :key="i" :class="`grid-item ${item.class}`">
<div v-for="item in rightList" :key="item.componentId" :class="`grid-item ${item.class}`">
<div class="tool">
<div class="title">
<span class="linear-text">{{ item.title }}</span>
</div>
</div>
<component :is="item.componentId" :props-total="deviceInfo.allTotal" :props-info="deviceInfo[item.infoKey]" ></component>
<component
:is="item.componentId"
:props-total="modalInfo.allTotal"
:props-info="modalInfo[item.infoKey]"
></component>
</div>
</div>
</div>
@@ -35,61 +39,66 @@ import Revenue from '@/components/Home/Modal/Revenue.vue'
import Utilization from '@/components/Home/Modal/Utilization.vue'
import DisCharge from '@/components/Home/Modal/DisCharge.vue'
import { getReq, postReq } from '@/request/api'
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
import EnvInfo from './Modal/EnvInfo.vue'
export default {
name: 'Home',
components: {},
props: {
stationId: {
type: String,
default: ''
}
},
data() {
return {
deviceInfo: {},
modalInfo: {},
list: [
{
title: '预制舱信息',
class: '',
componentId: PrefabCabin,
infoKey: 'prefabCabin'
infoKey: ''
},
{
title: '储能充放电量',
class: 'stats-cards',
componentId: DisCharge,
infoKey: 'alarm'
infoKey: 'energy'
},
{
title: '运行信息',
class: 'operation-status',
componentId: OperationalInfo,
infoKey: 'operation'
infoKey: ''
},
{
title: '场站收益情况',
class: 'revenue',
componentId: Revenue,
infoKey: 'alarm'
infoKey: 'energy'
},
{
title: '统计信息',
class: 'statistical',
componentId: StatisticalInfo,
infoKey: 'statisticalInfo'
infoKey: ''
},
{
title: '设备利用率',
class: '',
componentId: Utilization,
infoKey: 'alarm'
infoKey: 'energy'
},
{
title: '环境信息',
class: 'envInfo',
componentId: EnvInfo,
infoKey: 'envInfo'
infoKey: ''
}
],
sysName: '',
user: JSON.parse(localStorage.getItem('user')) || {}
}
@@ -104,142 +113,67 @@ export default {
},
async mounted() {
await Promise.all([
this.getTotalList(),
( this.deviceInfo = {
alarm: [
{
dt: '2025-08-30',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
dt: '2025-08-29',
key1: 8,
key2: 5,
key3: 5,
key4: 7
},
{
dt: '2025-08-28',
key1: 0,
key2: 10,
key3: 20,
key4: 4
},
{
dt: '2025-08-27',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
dt: '2025-08-26',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
dt: '2025-08-25',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
dt: '2025-08-24',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
dt: '2025-08-23',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
dt: '2025-08-22',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
dt: '2025-08-21',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
dt: '2025-08-20',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
dt: '2025-08-19',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
dt: '2025-08-18',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
dt: '2025-08-17',
key1: 10,
key2: 0,
key3: 15,
key4: 5
}
],
}),
this.getStatTotalList(),
this.getStatDayList(1),
])
},
methods: {
async getTotalList(){
// 查询系统累计统计信息
async getStatTotalList() {
try {
// token: 用户TOKEN
const res = await getReq({}, '')
if (res.code === 200) {
this.deviceInfo.allTotal = res.data
// date:日期
// station_id:场站ID，为0或不传查询所有场站总计
// category:类别，1:储能设备,2:充电设备,3:光伏设备,为0或不传查询所有类别总计
const query = {
date: getDateDaysAgo(0),
stationId: this.stationId,
category: 0
}
const res = await getReq('/api/queryStatTotal', query)
if (res.errcode === 0) {
this.modalInfo.allTotal = res.data
this.modalInfo.allTotal.runDays = getRunDays(res.data.launch_date)
const { income_charge: incomeCharge, income_elect: incomeElect } = this.modalInfo.allTotal
this.modalInfo.allTotal.incomeTotal = +incomeCharge + +incomeElect
} else {
throw res
}
} catch (error) {
this.deviceInfo.allTotal = {
tianshu:11,
shouyi:12,
shuliang:10,
fadianliang:15,
key2:11,
key1:12,
key3:10,
key4:15,
rongliang:15,
this.modalInfo.allTotal = {}
}
},
// 查询场站日统计信息
async getStatDayList(category) {
try {
// station_id: 场站ID
// category: 类别： 1：储能设备,2:充电设备,3:光伏设备
// start_date：开始日期，格式：yyyy-mm-dd
// end_date：结束日期，格式：yyyy-mm-dd
const query = {
stationId: this.stationId,
category,
start_date: getDateDaysAgo(7 - 1),
end_date: getDateDaysAgo(0)
}
const categoryObj = { 1: 'energy' }
const res = await getReq('/api/queryStatDayList', query)
if (res.errcode === 0) {
this.modalInfo[categoryObj[category]] = res.data.map((item) => {
const { income_charge: incomeCharge, income_elect: incomeElect } = item
return {
...item,
incomeTotal: +incomeCharge + +incomeElect
}
})
} else {
throw res
}
} catch (error) {
console.log(error)
}
}
}
}
</script>
@@ -253,8 +187,6 @@ export default {
justify-content: space-between;
}
.content-left,
.content-right {
height: 100%;
@@ -270,15 +202,15 @@ export default {
width: 100%;
height: calc(40% - 10px);
z-index: 20;
&:nth-child(2n){
&:nth-child(2n) {
// height:calc(33% - 10px)!important;
}
}
.tool {
background: url('@/assets/home/modal-header-bg.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: space-between;
@@ -286,7 +218,7 @@ export default {
height: 45px;
.linear-text {
margin-bottom: 7px;
margin-bottom: 7px;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(40, 235, 231, 1) 100%);
color: transparent;
-webkit-background-clip: text;
@@ -315,7 +247,7 @@ export default {
.title {
display: flex;
i {
margin-left: 10px;
}
@@ -336,19 +268,14 @@ export default {
color: transparent;
}
}
}
.operation-status{
.operation-status {
height: calc(25% - 10px);
}
.statistical{
}
.statistical {
height: calc(18% - 10px);
}
.envInfo{
height: calc(15% - 10px);
}
}
.envInfo {
height: calc(15% - 10px);
}
</style>

22
web/src/components/Home/Modal/DisCharge.vue
View File

@@ -5,6 +5,8 @@
</template>
<script>
import {processData} from '@/utils/dealWithData'
export default {
name: '',
props: {
@@ -18,14 +20,14 @@ export default {
curList: [
{
name: '日充电电量',
key: 'key1',
key: 'storage_elect_in',
lineColor: '#9BD801',
value: 0,
d: 'kW·h'
},
{
name: '日放电电量',
key: 'key2',
key: 'storage_elect_out',
lineColor: '#3DFEFA',
value: 0,
d: 'kW·h'
@@ -66,25 +68,11 @@ export default {
this.disChargeChart.resize()
}
},
processData(data, keys) {
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date)
})
const dates = data.map((item) => item.dt)
const values = []
keys.forEach((item, index) => {
values[index] = data.map((dataValue) => dataValue[keys[index]])
})
return {
dates,
values
}
},
getDisChargeData() {
const arr = this.curList
const keyList = this.curList.map((item) => item.key)
const result = this.processData(this.propsInfo, keyList)
const result = processData(this.propsInfo, keyList)
this.disChargeChartData.xdata = result.dates
arr.forEach((item, index) => {

23
web/src/components/Home/Modal/Revenue.vue
View File

@@ -5,6 +5,8 @@
</template>
<script>
import {processData} from '@/utils/dealWithData'
export default {
name: '',
props: {
@@ -19,7 +21,7 @@ export default {
curList: [
{
name: '日收益',
key: 'key1',
key: 'incomeTotal',
lineColor: '#00BBA3',
colorStart: ' rgba(10, 250, 106, 0.15)',
colorEnd: ' rgba(171, 255, 249, 0.3)',
@@ -64,26 +66,11 @@ export default {
this.revenueChart.resize()
}
},
processData(data, keys) {
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date)
})
const dates = data.map((item) => item.dt)
const values=[]
keys.forEach((item,index)=>{
values[index]= data.map((dataValue)=>dataValue[keys[index]])
})
return {
dates,
values,
}
},
getRevenueData() {
const arr=this.curList
const keyList=this.curList.map((item)=>item.key)
const result = this.processData(this.propsInfo, keyList)
const result = processData(this.propsInfo, keyList)
this.RevenueChartData.xdata = result.dates
arr.forEach((item, index) => {

12
web/src/components/Home/Modal/StatisticalInfo.vue
View File

@@ -29,7 +29,7 @@ export default {
return {
list: [
{
key: 'tianshu',
key: 'runDays',
value: 26,
d: '天',
label: '场站运行天数',
@@ -37,7 +37,7 @@ export default {
iconPath: require('@/assets/home/wendu.png')
},
{
key: 'shouyi',
key: 'storage_elect_in',
value: 25,
d: 'Kw·h',
label: '储能充电量',
@@ -45,7 +45,7 @@ export default {
iconPath: require('@/assets/home/shidu.png')
},
{
key: 'shuliang',
key: 'storage_elect_out',
value: 24,
d: 'Kw·h',
label: '储能放电量',
@@ -53,15 +53,15 @@ export default {
iconPath: require('@/assets/home/dianya.png')
},
{
key: 'shuliang',
key: 'incomeTotal',
value: 26,
d: '万元',
d: '元',
label: '场站累计收益',
class: 'item-4',
iconPath: require('@/assets/home/dianliu.png')
},
{
key: 'fadianliang',
key: 'usage_rate',
value: 20,
d: '%',
label: '设备利用率',

21
web/src/components/Home/Modal/Utilization.vue
View File

@@ -5,6 +5,8 @@
</template>
<script>
import {processData} from '@/utils/dealWithData'
export default {
name: '',
props: {
@@ -18,9 +20,8 @@ export default {
curList: [
{
name: '日设备利用率',
key: 'key1',
key: 'usage_rate',
lineColor: '#F69B52',
value: 0,
d: 'kW·h'
}
@@ -60,25 +61,11 @@ export default {
this.utilizationChart.resize()
}
},
processData(data, keys) {
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date)
})
const dates = data.map((item) => item.dt)
const values = []
keys.forEach((item, index) => {
values[index] = data.map((dataValue) => dataValue[keys[index]])
})
return {
dates,
values
}
},
getUtilizationData() {
const arr = this.curList
const keyList = this.curList.map((item) => item.key)
const result = this.processData(this.propsInfo, keyList)
const result = processData(this.propsInfo, keyList)
this.utilizationChartData.xdata = result.dates
arr.forEach((item, index) => {

19
web/src/components/Home/Pv.vue
View File

@@ -14,6 +14,7 @@
</template>
<script>
import {processData} from '@/utils/dealWithData'
export default {
name: '',
props: {
@@ -93,25 +94,11 @@ export default {
this.pvChart.resize()
}
},
processData(data, keys) {
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
}
},
getChargeData() {
const arr = this.curList
const keyList = this.curList.map((item) => item.key)
const result = this.processData(this.deviceInfo, keyList)
const result = processData(this.deviceInfo, keyList)
this.pvChartData.xdata = result.dates
arr.forEach((item, index) => {

4
web/src/components/Home/onLine.vue
View File

@@ -155,6 +155,10 @@ export default {
align-items: center;
justify-content: space-around;
height: 100%;
.item{
align-items: flex-start;
justify-content: center;
}
}
// .content-left{
// align-items: self-end;

5
web/src/components/SearchBox.vue
View File

@@ -33,6 +33,11 @@
@change="$emit('onSearch', formData)"
/>
</div>
<!-- 日期选择框 date-->
<div class="date-picker" v-if="item.type == 'datePick1'">
<a-range-picker v-model:value="formData[item.key]" value-format="YYYY-MM-DD" @change="$emit('onSearch', formData)" />
</div>
<!-- 输入框 -->
<div class="input" v-if="item.type == 'input'">
<a-input

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)
}
}
}