统计分析接口联调

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -5,6 +5,8 @@
</template> </template>
<script> <script>
import {processData} from '@/utils/dealWithData'
export default { export default {
name: '', name: '',
props: { props: {
@@ -18,14 +20,14 @@ export default {
curList: [ curList: [
{ {
name: '日充电电量', name: '日充电电量',
key: 'key1', key: 'storage_elect_in',
lineColor: '#9BD801', lineColor: '#9BD801',
value: 0, value: 0,
d: 'kW·h' d: 'kW·h'
}, },
{ {
name: '日放电电量', name: '日放电电量',
key: 'key2', key: 'storage_elect_out',
lineColor: '#3DFEFA', lineColor: '#3DFEFA',
value: 0, value: 0,
d: 'kW·h' d: 'kW·h'
@@ -66,25 +68,11 @@ export default {
this.disChargeChart.resize() 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() { getDisChargeData() {
const arr = this.curList const arr = this.curList
const keyList = this.curList.map((item) => item.key) 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 this.disChargeChartData.xdata = result.dates
arr.forEach((item, index) => { arr.forEach((item, index) => {

View File

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

View File

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

View File

@@ -5,6 +5,8 @@
</template> </template>
<script> <script>
import {processData} from '@/utils/dealWithData'
export default { export default {
name: '', name: '',
props: { props: {
@@ -18,9 +20,8 @@ export default {
curList: [ curList: [
{ {
name: '日设备利用率', name: '日设备利用率',
key: 'key1', key: 'usage_rate',
lineColor: '#F69B52', lineColor: '#F69B52',
value: 0, value: 0,
d: 'kW·h' d: 'kW·h'
} }
@@ -60,25 +61,11 @@ export default {
this.utilizationChart.resize() 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() { getUtilizationData() {
const arr = this.curList const arr = this.curList
const keyList = this.curList.map((item) => item.key) 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 this.utilizationChartData.xdata = result.dates
arr.forEach((item, index) => { arr.forEach((item, index) => {

View File

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

View File

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

View File

@@ -33,6 +33,11 @@
@change="$emit('onSearch', formData)" @change="$emit('onSearch', formData)"
/> />
</div> </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'"> <div class="input" v-if="item.type == 'input'">
<a-input <a-input

View File

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

View File

@@ -35,7 +35,7 @@ export const routes = [
{ {
path: 'system', path: 'system',
name: 'system', name: 'system',
redirect: '/system/policy', redirect: '/main/system/user',
component: () => import(/* webpackChunkName: "system" */ '@/views/system/index.vue'), component: () => import(/* webpackChunkName: "system" */ '@/views/system/index.vue'),
children: [ children: [
{ {

View File

@@ -0,0 +1,37 @@
export function getRunDays(date) {
const launchDate = new Date(date)
const today = new Date() // 替换为当前日期
const timeDiff = today - launchDate // 毫秒差
const daysRun = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) // 转换为天数
console.log(`从 2023-01-01 到今天已经运行了 ${daysRun}`)
return daysRun
}
export function 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
}
}
export function getDateDaysAgo(daysAgo) {
const date = new Date()
date.setDate(date.getDate() - daysAgo)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}

View File

@@ -22,6 +22,7 @@
</div> </div>
<div class="main_content"> <div class="main_content">
<energyEchart <energyEchart
:key="activeKey"
:chart-options="echartsInfo[activeKey].chartOptions" :chart-options="echartsInfo[activeKey].chartOptions"
:chart-data="echartsInfo[activeKey].chartData" :chart-data="echartsInfo[activeKey].chartData"
:columns="tableList[activeKey].columns" :columns="tableList[activeKey].columns"
@@ -29,6 +30,7 @@
:table-data="tableList[activeKey].tableData" :table-data="tableList[activeKey].tableData"
@pagesizeChange="pagesizeChange()" @pagesizeChange="pagesizeChange()"
></energyEchart> ></energyEchart>
</div> </div>
</div> </div>
</template> </template>
@@ -36,7 +38,9 @@
<script> <script>
import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue' import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
import searchBox from '@/components/SearchBox.vue' import searchBox from '@/components/SearchBox.vue'
import { postReq } from '@/request/api' import { postReq, getReq } from '@/request/api'
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
export default { export default {
name: 'StatisicalAnView', name: 'StatisicalAnView',
components: { energyEchart, searchBox }, components: { energyEchart, searchBox },
@@ -64,7 +68,7 @@ export default {
searchOptions: [ searchOptions: [
{ {
label: '日期', label: '日期',
type: 'datePick', type: 'datePick1',
value: [], value: [],
key: 'time' key: 'time'
} }
@@ -77,8 +81,8 @@ export default {
type: 'bar', type: 'bar',
dataKey: 'sales', dataKey: 'sales',
infoKeys: [ infoKeys: [
{ key: 'key1', label: '日充电电量', lineColor: '#2A82E4' }, { key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' },
{ key: 'key2', label: '日放电电量', lineColor: '#5AABF2' } { key: 'storage_elect_out', label: '日放电电量', lineColor: '#5AABF2' }
] ]
}, },
{ {
@@ -86,7 +90,7 @@ export default {
type: 'bar', type: 'bar',
dataKey: 'users', dataKey: 'users',
infoKeys: [ infoKeys: [
{ key: 'key1', label: '日故障次数', lineColor: '#0CDAF5' }, { key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
{ key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' }, { key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
{ key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' } { key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
] ]
@@ -128,20 +132,135 @@ export default {
} }
], ],
chartData: {} chartData: {}
},
1: {
chartOptions: [
{
title: '发电电量分析',
type: 'bar',
dataKey: 'sales',
infoKeys: [
{ key: 'storage_elect_in', label: '日发电电量', lineColor: '#2A82E4' },
]
},
{
title: '运行状态分析',
type: 'bar',
dataKey: 'users',
infoKeys: [
{ key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
{ 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: {}
},
2: {
chartOptions: [
{
title: '充电分析',
type: 'bar',
dataKey: 'sales',
infoKeys: [
{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' },
]
},
{
title: '运行状态分析',
type: 'bar',
dataKey: 'users',
infoKeys: [
{ key: 'storage_num_err', label: '日充电次数', lineColor: '#0CDAF5' },
{ key: 'key3', label: '日故障次数', lineColor: '#5AABF2' },
{ 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: {}
} }
}, },
activeKey: 0, activeKey: 0,
tabList: [ tabList: [
{ {
key: '0', key: 0,
name: '储能设备' name: '储能设备'
}, },
{ {
key: '1', key: 1,
name: '光伏设备' name: '光伏设备'
}, },
{ {
key: '2', key: 2,
name: '充电设备' name: '充电设备'
} }
], ],
@@ -150,8 +269,8 @@ export default {
columns: [ columns: [
{ {
title: '设备ID', title: '设备ID',
dataIndex: 'key1', dataIndex: 'ID',
key: 'key1', key: 'ID',
width: 120, width: 120,
ellipsis: true ellipsis: true
}, },
@@ -171,8 +290,8 @@ export default {
}, },
{ {
title: '充电电量', title: '充电电量',
dataIndex: 'key4', dataIndex: 'storage_elect_in',
key: 'key4', key: 'storage_elect_in',
width: 120, width: 120,
ellipsis: true ellipsis: true
}, },
@@ -192,22 +311,22 @@ export default {
}, },
{ {
title: '放电电量', title: '放电电量',
dataIndex: 'key7', dataIndex: 'storage_elect_out',
key: 'key7', key: 'storage_elect_out',
width: 120, width: 120,
ellipsis: true ellipsis: true
}, },
{ {
title: '故障次数', title: '故障次数',
dataIndex: 'key8', dataIndex: 'storage_num_err',
key: 'key8', key: 'storage_num_err',
width: 120, width: 120,
ellipsis: true ellipsis: true
}, },
{ {
title: '日期', title: '日期',
dataIndex: 'key9', dataIndex: 'dt',
key: 'key9', key: 'dt',
width: 120, width: 120,
ellipsis: true ellipsis: true
} }
@@ -215,33 +334,173 @@ export default {
geturl: '', geturl: '',
tableData: [], tableData: [],
pageOption: { pageOption: {
current: 1, page: 1,
pageSize: 10, pageSize: 10,
total: 1 count: 1
}
},
1: {
columns: [
{
title: '设备ID',
dataIndex: 'ID',
key: 'ID',
width: 120,
ellipsis: true
},
{
title: '设备名称',
dataIndex: 'key2',
key: 'key2',
width: 120,
ellipsis: true
},
{
title: '设备类型',
dataIndex: 'key3',
key: 'key3',
width: 120,
ellipsis: true
},
{
title: '发电电量',
dataIndex: 'storage_elect_in',
key: 'storage_elect_in',
width: 120,
ellipsis: true
},
{
title: '发电时长',
dataIndex: 'key5',
key: 'key5',
width: 120,
ellipsis: true
},
{
title: '故障次数',
dataIndex: 'key6',
key: 'key6',
width: 120,
ellipsis: true
},
{
title: '日期',
dataIndex: 'dt',
key: 'dt',
width: 120,
ellipsis: true
}
],
geturl: '',
tableData: [],
pageOption: {
page: 1,
pageSize: 10,
count: 1
}
},
2: {
columns: [
{
title: '设备ID',
dataIndex: 'ID',
key: 'ID',
width: 120,
ellipsis: true
},
{
title: '设备名称',
dataIndex: 'key2',
key: 'key2',
width: 120,
ellipsis: true
},
{
title: '设备类型',
dataIndex: 'key3',
key: 'key3',
width: 120,
ellipsis: true
},
{
title: '充电电量',
dataIndex: 'storage_elect_in',
key: 'storage_elect_in',
width: 120,
ellipsis: true
},
{
title: '充电时长',
dataIndex: 'key5',
key: 'key5',
width: 120,
ellipsis: true
},
{
title: '充电次数',
dataIndex: 'key6',
key: 'key6',
width: 120,
ellipsis: true
},
{
title: '故障次数',
dataIndex: 'key6',
key: 'key6',
width: 120,
ellipsis: true
},
{
title: '日期',
dataIndex: 'dt',
key: 'dt',
width: 120,
ellipsis: true
}
],
geturl: '',
tableData: [],
pageOption: {
page: 1,
pageSize: 10,
count: 1
} }
} }
} }
} }
}, },
watch:{
activeKey(newVal, oldVal) {
console.log(newVal, oldVal,"activeKey")
// 清空旧数据(可选)
if( this.echartsInfo[oldVal]){
this.echartsInfo[oldVal].chartData = {};
this.tableList[oldVal].tableData = [];
// // 重新加载数据
this.getTableList()
this.getEchartsList()
}
}
},
async mounted() { async mounted() {
await Promise.all([ await Promise.all([this.getTableList(), this.getEchartsList()])
this.getTableList(),
this.getEchartsList()
])
}, },
beforeUnmount() {}, beforeUnmount() {},
methods: { methods: {
pagesizeChange(e) { pagesizeChange(e) {
console.log(e, 'eeeeeeeeeeeeeee')
this.tableList[this.activeKey].pageOption.pageSize = e.pageSize this.tableList[this.activeKey].pageOption.pageSize = e.pageSize
this.tableList[this.activeKey].pageOption.current = e.current this.tableList[this.activeKey].pageOption.page = e.page
this.getTableList() this.getTableList()
}, },
onSearch(data) { onSearch(data) {
this.paramsDate.startTime = data.time ? data.time[0] : '' this.paramsDate.start_date = data.time ? data.time[0] : ''
this.paramsDate.endTime = data.time ? data.time[1] : '' this.paramsDate.end_date = data.time ? data.time[1] : ''
this.pageOption.current = 1
this.tableList[this.activeKey].pageOption.page = 1
this.getTableList() this.getTableList()
this.getEchartsList() this.getEchartsList()
@@ -251,419 +510,23 @@ export default {
const query = { const query = {
...this.paramsDate, ...this.paramsDate,
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
// start_date: getDateDaysAgo(7 - 1),
// end_date: getDateDaysAgo(0)
} }
try { try {
const res = await postReq(query, '') const res = await getReq('/api/queryStatDayList', query)
if (res.code === 200) { if (res.errcode === 0) {
this.echartsInfo[this.activeKey].chartData= res.data this.echartsInfo[this.activeKey].chartData = res.data
console.log(
this.echartsInfo[this.activeKey].chartData,
' this.echartsInfo[this.activeKey].chartData'
)
} else { } else {
throw res throw res
} }
} catch (error) { } catch (error) {
this.echartsInfo[this.activeKey].chartData = { 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
}
]
}
} }
}, },
@@ -672,23 +535,23 @@ export default {
const query = { const query = {
...this.paramsDate, ...this.paramsDate,
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type, category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
pageSize: currentInfo.pageOption.pageSize, page_size: currentInfo.pageOption.pageSize,
pageNumber: currentInfo.pageOption.current pageNumber: currentInfo.pageOption.page
} }
try { try {
const res = await postReq(query, currentInfo.getUrl) const res = await getReq('/api/queryStatDayList', query)
if (res.code === 200) { if (res.errcode === 0) {
currentInfo.tableData = res.data.records currentInfo.tableData = res.data
currentInfo.pageOption = { currentInfo.pageOption = {
current: res.data.pageNumber, page: res.data.page,
pageSize: res.data.pageSize, pageSize: res.data.page_size,
total: res.data.totalRow count: res.data.count
} }
} else { } else {
throw res throw res
} }
} catch (error) { } catch (error) {
this.tableList[this.activeKey].tableData = [ currentInfo.tableData = [
{ {
key1: '1515151515', key1: '1515151515',
key2: '设备1111', key2: '设备1111',

View File

@@ -57,6 +57,8 @@ import Pv from '@/components/Home/Pv.vue'
import Alarm from '@/components/Home/Alarm.vue' import Alarm from '@/components/Home/Alarm.vue'
import Map from '@/components/Home/Map.vue' import Map from '@/components/Home/Map.vue'
import { getReq, postReq } from '@/request/api' import { getReq, postReq } from '@/request/api'
import {getRunDays,getDateDaysAgo} from '@/utils/dealWithData'
export default { export default {
name: 'Home', name: 'Home',
components: { Map }, components: { Map },
@@ -355,7 +357,7 @@ export default {
const res = await getReq('/api/queryStatSystem') const res = await getReq('/api/queryStatSystem')
if (res.errcode === 0) { if (res.errcode === 0) {
this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data)) this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
this.deviceInfo.onLine.runDays = this.getRunDays(res.data.launch_date) this.deviceInfo.onLine.runDays = getRunDays(res.data.launch_date)
console.log(JSON.parse(JSON.stringify(res.data)), this.deviceInfo.onLine, '111111111111') console.log(JSON.parse(JSON.stringify(res.data)), this.deviceInfo.onLine, '111111111111')
} else { } else {
throw res throw res
@@ -364,17 +366,7 @@ export default {
this.deviceInfo.onLine = {} this.deviceInfo.onLine = {}
} }
}, },
getRunDays(date) {
const launchDate = new Date(date)
const today = new Date() // 替换为当前日期
const timeDiff = today - launchDate // 毫秒差
const daysRun = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) // 转换为天数
console.log(`从 2023-01-01 到今天已经运行了 ${daysRun}`)
return daysRun
},
// 查询系统累计统计信息 // 查询系统累计统计信息
async getStatTotalList() { async getStatTotalList() {
try { try {
@@ -417,16 +409,7 @@ export default {
this.deviceInfo.allTotal.incomeCharge + this.deviceInfo.allTotal.incomeElect this.deviceInfo.allTotal.incomeCharge + this.deviceInfo.allTotal.incomeElect
} }
}, },
getDateDaysAgo(daysAgo) {
const date = new Date()
date.setDate(date.getDate() - daysAgo)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
},
// 示例获取7天前的日期 // 示例获取7天前的日期
// 查询场站日统计信息 // 查询场站日统计信息
@@ -439,8 +422,8 @@ export default {
const query = { const query = {
stationId: this.stationId, stationId: this.stationId,
category, category,
start_date: this.getDateDaysAgo(7 - 1), start_date: getDateDaysAgo(7 - 1),
end_date: this.getDateDaysAgo(0) end_date: getDateDaysAgo(0)
} }
const arr = { 1: 'energy', 2: 'charge', 3: 'pv' } const arr = { 1: 'energy', 2: 'charge', 3: 'pv' }
const res = await getReq('/api/queryStatDayList', query) const res = await getReq('/api/queryStatDayList', query)

View File

@@ -1,13 +1,21 @@
<template> <template>
<div > <div class="user">
<SearchBox></SearchBox>
<div class="table-content">
</div>
</div> </div>
</template> </template>
<script> <script>
import SearchBox from '@/components/SearchBox.vue'
export default { export default {
name: '', name: '',
components:{ components:{
SearchBox
}, },
props: { props: {