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

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;