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-03 15:41:12 +08:00
parent 1568677c8e
commit 369f7165cb
15 changed files with 1018 additions and 892 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/public/index.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_5010233_fpzrc14sfwj.css" /> <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_5010233_di79okor5xs.css" />
</head> </head>
<body> <body>
<noscript> <noscript>

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

@@ -8,7 +8,8 @@
<span class="linear-text">{{ item.title }}</span> <span class="linear-text">{{ item.title }}</span>
</div> </div>
</div> </div>
<component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component> <component :is="item.componentId" :props-total="deviceInfo.allTotal" :props-info="deviceInfo[item.infoKey]" ></component>
<!-- -->
</div> </div>
</div> </div>
@@ -20,7 +21,7 @@
<span class="linear-text">{{ item.title }}</span> <span class="linear-text">{{ item.title }}</span>
</div> </div>
</div> </div>
<component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component> <component :is="item.componentId" :props-total="deviceInfo.allTotal" :props-info="deviceInfo[item.infoKey]" ></component>
</div> </div>
</div> </div>
</div> </div>
@@ -34,6 +35,7 @@ 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 Operational from '@/components/Home/Operational.vue' import Operational from '@/components/Home/Operational.vue'
import { getReq, postReq } from '@/request/api'
import Charge from '@/components/Home/Charge.vue' import Charge from '@/components/Home/Charge.vue'
import Alarm from '@/components/Home/Alarm.vue' import Alarm from '@/components/Home/Alarm.vue'
@@ -105,7 +107,10 @@ export default {
} }
}, },
async mounted() { async mounted() {
this.deviceInfo = { await Promise.all([
this.getTotalList(),
( this.deviceInfo = {
alarm: [ alarm: [
{ {
date: '2025-08-30', date: '2025-08-30',
@@ -317,10 +322,39 @@ export default {
key2: '2' key2: '2'
} }
] ]
} }),
])
}, },
methods: {}
methods: {
async getTotalList(){
try {
// token: 用户TOKEN
const res = await getReq({}, '')
if (res.code === 200) {
this.deviceInfo.allTotal = res.data
} 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,
}
}
}
}
} }
</script> </script>

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

@@ -8,7 +8,7 @@
export default { export default {
name: '', name: '',
props: { props: {
deviceInfo: { propsInfo: {
type: Array, type: Array,
default: () => [] default: () => []
} }
@@ -41,7 +41,7 @@ export default {
} }
}, },
watch: { watch: {
deviceInfo: { propsInfo: {
handler(n) { handler(n) {
this.$nextTick(() => { this.$nextTick(() => {
this.drawLineChart() this.drawLineChart()
@@ -79,7 +79,7 @@ export default {
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.deviceInfo, keyList) const result = this.processData(this.propsInfo, keyList)
this.lineChartData.xdata = result.dates this.lineChartData.xdata = result.dates
arr.forEach((item, index) => { arr.forEach((item, index) => {

94
web/src/components/Home/Modal/EnvInfo.vue
View File

@@ -2,72 +2,71 @@
<div class="onLine"> <div class="onLine">
<div class="content"> <div class="content">
<div v-for="item in list" :key="item.key" :class="`item ${item.class}`"> <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
<a-image :preview="false" :src="item.iconPath" :width="25" class="left"> </a-image> <i
:class="`iconfont icon-${item.icon}`"
:style="`font-size:25px; cursor: pointer; color: ${item.color};`"
/>
<div class="right"> <div class="right">
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
<span>{{ item.value }} {{ item.d }}</span <span>{{ item.value }} {{ item.d }}</span>
> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'
export default { export default {
name: '', name: '',
props: { props: {
propsInfo: { propsTotal: {
type: Object, type: Object,
default: ()=>({ default: () => {}
name: '场站111', },
statusName:'充电' propsInfo: {
}) type: Array,
default: () => []
} }
}, },
data() { data() {
return { return {
list: [ list: [
{ {
key: 'tianshu', key: 'key1',
value: 26, value: '制冷',
d: 'Lux', d: '',
label: '光照', label: '冷机',
class: 'item-1', class: 'item-1',
iconPath: require('@/assets/home/guangzhao.png') icon: 'lengji',
color: '#F69B52'
}, },
{ {
key: 'shouyi', key: 'key2',
value: 25, value: '开机',
d: 'm/s', d: '',
label: '风速', label: '空调',
class: 'item-2', class: 'item-2',
iconPath: require('@/assets/home/fengsu.png') icon: 'kongdiaogongcheng',
color: '#9BD801'
}, },
{ {
key: 'shuliang', key: 'key3',
value: 24, value: 24,
d: '℃', d: '℃',
label: '环境温度', label: '环境温度',
class: 'item-3', class: 'item-3',
iconPath: require('@/assets/home/hj-wendu.png') icon: 'wenduji',
color: '#3DFEFA'
}, },
{ {
key: 'shuliang', key: 'key4',
value: 26, value: 26,
d: '%', d: '%',
label: '环境湿度', label: '环境湿度',
class: 'item-4', class: 'item-4',
iconPath: require('@/assets/home/hj-shidu.png') icon: 'shidu',
}, color: '#D83D6C'
}
] ]
} }
}, },
@@ -79,7 +78,19 @@ export default {
return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引 return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
} }
}, },
watch: {}, watch: {
propsTotal: {
handler(n) {
if (n) {
this.list.forEach((item) => {
item.value = this.propsTotal[item.key]
})
}
},
deep: true,
immediate: true
}
},
mounted() {}, mounted() {},
methods: {} methods: {}
} }
@@ -91,13 +102,11 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width:95%; width: 95%;
margin: auto; margin: auto;
} }
.content {
.content{
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
display: flex; display: flex;
@@ -105,8 +114,8 @@ export default {
justify-content: space-around; justify-content: space-around;
height: 100%; height: 100%;
.item{ .item {
height:50%; height: 50%;
width: 25%; width: 25%;
// height: 47px; // height: 47px;
box-sizing: border-box; box-sizing: border-box;
@@ -125,15 +134,10 @@ export default {
} }
} }
.right { .right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 20px; margin-left: 20px;
}
} }
}
</style> </style>

58
web/src/components/Home/Modal/OperationalInfo.vue
View File

@@ -5,32 +5,26 @@
<a-image :preview="false" :src="item.iconPath" :width="50" class="left"> </a-image> <a-image :preview="false" :src="item.iconPath" :width="50" class="left"> </a-image>
<div class="right"> <div class="right">
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
<span>{{ item.value }} {{ item.d }}</span <span>{{ item.value }} {{ item.d }}</span>
> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'
export default { export default {
name: '', name: '',
props: { props: {
propsInfo: { propsTotal: {
type: Object, type: Object,
default: ()=>({ default: () => {}
name: '场站111', },
statusName:'充电' propsInfo: {
}) type: Array,
} default: () => []
},
}, },
data() { data() {
return { return {
@@ -94,7 +88,19 @@ export default {
return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引 return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
} }
}, },
watch: {}, watch: {
propsTotal: {
handler(n) {
if (n) {
this.list.forEach((item) => {
item.value = this.propsTotal[item.key]
})
}
},
deep: true,
immediate: true
}
},
mounted() {}, mounted() {},
methods: {} methods: {}
} }
@@ -106,14 +112,11 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width:95%; width: 95%;
margin: auto; margin: auto;
} }
.content {
.content{
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
display: flex; display: flex;
@@ -121,8 +124,8 @@ export default {
justify-content: space-around; justify-content: space-around;
height: 100%; height: 100%;
.item{ .item {
height:50%; height: 50%;
width: 30%; width: 30%;
// height: 47px; // height: 47px;
box-sizing: border-box; box-sizing: border-box;
@@ -141,15 +144,10 @@ export default {
} }
} }
.right { .right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 20px; margin-left: 20px;
}
} }
}
</style> </style>

33
web/src/components/Home/Modal/PrefabCabin.vue
View File

@@ -3,7 +3,7 @@
<div class="content-left"> <div class="content-left">
<div v-for="item in leftList" :key="item.key" :class="`item ${item.class}`"> <div v-for="item in leftList" :key="item.key" :class="`item ${item.class}`">
<div> <div>
<span>{{ item.value }}</span <span>{{ item.value ? item.value :0}}</span
><span class="d">{{ item.d }}</span> ><span class="d">{{ item.d }}</span>
</div> </div>
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
@@ -11,13 +11,13 @@
</div> </div>
<div style="text-align: center;font-weight: 500;"> <div style="text-align: center;font-weight: 500;">
<div class="online-icon"></div> <div class="online-icon"></div>
<span>{{ propsInfo.statusName }}</span> <span>{{ curStatus }}</span>
</div> </div>
<div class="content-right"> <div class="content-right">
<div v-for="item in rightList" :key="item.key" :class="`item ${item.class}`"> <div v-for="item in rightList" :key="item.key" :class="`item ${item.class}`">
<div> <div>
<span>{{ item.value }}</span <span>{{ item.value ? item.value :0 }}</span
><span class="d">{{ item.d }}</span> ><span class="d">{{ item.d }}</span>
</div> </div>
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
@@ -27,21 +27,22 @@
</template> </template>
<script> <script>
import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'
export default { export default {
name: '', name: '',
props: { props: {
propsInfo: { propsTotal: {
type: Object, type: Object,
default: () => ({ default: () => {}
name: '场站111', },
statusName: '充电' propsInfo: {
}) type: Array,
default: () => []
} }
}, },
data() { data() {
return { return {
curStatus:'充电',
list: [ list: [
{ {
key: 'tianshu', key: 'tianshu',
@@ -96,7 +97,19 @@ export default {
return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引 return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
} }
}, },
watch: {}, watch: {
propsTotal: {
handler(n) {
if (n) {
this.list.forEach((item) => {
item.value = this.propsTotal[item.key]
})
}
},
deep: true,
immediate: true
}
},
mounted() {}, mounted() {},
methods: {} methods: {}
} }

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

@@ -8,7 +8,7 @@
export default { export default {
name: '', name: '',
props: { props: {
deviceInfo: { propsInfo: {
type: Array, type: Array,
default: () => [] default: () => []
} }
@@ -37,7 +37,7 @@ export default {
} }
}, },
watch: { watch: {
deviceInfo: { propsInfo: {
handler(n) { handler(n) {
this.$nextTick(() => { this.$nextTick(() => {
this.drawLineChart() this.drawLineChart()
@@ -75,7 +75,7 @@ export default {
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.deviceInfo, keyList) const result = this.processData(this.propsInfo, keyList)
this.lineChartData.xdata = result.dates this.lineChartData.xdata = result.dates
arr.forEach((item, index) => { arr.forEach((item, index) => {

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

@@ -2,7 +2,7 @@
<div class="onLine"> <div class="onLine">
<div class="content"> <div class="content">
<div v-for="item in list" :key="item.key" :class="`item ${item.class}`"> <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
<span>{{ item.value }} {{ item.d }}</span> <span>{{ item.value ? item.value : 0 }} {{ item.d }}</span>
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
</div> </div>
</div> </div>
@@ -10,11 +10,13 @@
</template> </template>
<script> <script>
import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'
export default { export default {
name: '', name: '',
props: { props: {
propsTotal: {
type: Object,
default: () => {}
},
propsInfo: { propsInfo: {
type: Object, type: Object,
default: () => ({ default: () => ({
@@ -77,7 +79,19 @@ export default {
return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引 return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
} }
}, },
watch: {}, watch: {
propsTotal: {
handler(n) {
if (n) {
this.list.forEach((item) => {
item.value = this.propsTotal[item.key]
})
}
},
deep: true,
immediate: true
}
},
mounted() {}, mounted() {},
methods: {} methods: {}
} }
@@ -89,7 +103,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width:95%; width: 95%;
margin: auto; margin: auto;
} }

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

@@ -8,7 +8,7 @@
export default { export default {
name: '', name: '',
props: { props: {
deviceInfo: { propsInfo: {
type: Array, type: Array,
default: () => [] default: () => []
} }
@@ -35,7 +35,7 @@ export default {
} }
}, },
watch: { watch: {
deviceInfo: { propsInfo: {
handler(n) { handler(n) {
this.$nextTick(() => { this.$nextTick(() => {
this.drawLineChart() this.drawLineChart()
@@ -73,7 +73,7 @@ export default {
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.deviceInfo, keyList) const result = this.processData(this.propsInfo, keyList)
this.lineChartData.xdata = result.dates this.lineChartData.xdata = result.dates
arr.forEach((item, index) => { arr.forEach((item, index) => {

2
web/src/components/Home/Operational.vue
View File

@@ -39,7 +39,7 @@ export default {
}, },
{ {
name: '利用率', name: '利用率',
key: 'connector_off', key: 'key2',
percentKey: 'connector_off_percent', percentKey: 'connector_off_percent',
lineColor: lineColor:
'linear-gradient(90deg, rgba(53, 120, 124, 1) 0%, rgba(102, 225, 223, 1) 100%);', 'linear-gradient(90deg, rgba(53, 120, 124, 1) 0%, rgba(102, 225, 223, 1) 100%);',

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

@@ -3,14 +3,20 @@
<div class="content-left"> <div class="content-left">
<div v-for="item in leftList" :key="item.key" :class="`item ${item.class}`"> <div v-for="item in leftList" :key="item.key" :class="`item ${item.class}`">
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
<div> <span>{{ item.value }}</span><span class="d">{{ item.d }}</span></div> <div>
<span>{{ item.value ? item.value : 0 }}</span
><span class="d">{{ item.d }}</span>
</div>
</div> </div>
</div> </div>
<div class="online-icon"></div> <div class="online-icon"></div>
<div class="content-right"> <div class="content-right">
<div v-for="item in rightList" :key="item.key" :class="`item ${item.class}`"> <div v-for="item in rightList" :key="item.key" :class="`item ${item.class}`">
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
<div> <span>{{ item.value }}</span><span class="d">{{ item.d }}</span></div> <div>
<span>{{ item.value ? item.value : 0 }}</span
><span class="d">{{ item.d }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -20,6 +26,10 @@
export default { export default {
name: '', name: '',
props: { props: {
total: {
type: Object,
default: () => {}
},
deviceInfo: { deviceInfo: {
type: Array, type: Array,
default: () => [] default: () => []
@@ -27,7 +37,7 @@ export default {
}, },
data() { data() {
return { return {
list: [ curList: [
{ {
key: 'launchDate', key: 'launchDate',
value: 20, value: 20,
@@ -75,13 +85,26 @@ export default {
}, },
computed: { computed: {
leftList() { leftList() {
return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引 return this.curList.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
}, },
rightList() { rightList() {
return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引 return this.curList.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
}
},
watch: {
total: {
handler(n) {
if (n) {
let that = this
that.curList.forEach((item) => {
item.value = that.total[item.key]
})
}
},
deep: true, // 深度监听
immediate: true
} }
}, },
watch: {},
mounted() {}, mounted() {},
methods: {} methods: {}
} }
@@ -111,12 +134,10 @@ export default {
font-size: 12px; font-size: 12px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.d{ .d {
margin-left: 1px; margin-left: 1px;
font-size: 12px; font-size: 12px;
} }
} }
.content-left, .content-left,

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

@@ -49,23 +49,23 @@ export default {
type: Object, type: Object,
default: () => ({}), // 默认空对象 default: () => ({}), // 默认空对象
required: false // 非必须 required: false // 非必须
},
tableData: {
type: Array,
default: () => ([]), // 默认空对象
} }
}, },
data() { data() {
return { return {
paramsDate: {}, paramsDate: {},
tableData: [],
tableOption: { tableOption: {
scroll: { scroll: {
x: 1500 x: 1500
} },
select: false,
}, },
tableH: 0, tableH: 0,
pageOption: {
current: 1,
pageSize: 15,
total: 1
},
// chartOptions: [ // chartOptions: [
// { // {
// title: '充放电分析', // title: '充放电分析',
@@ -233,45 +233,24 @@ export default {
chartInstances: [] // 存储 ECharts 实例 chartInstances: [] // 存储 ECharts 实例
} }
}, },
mounted() { watch:{
chartData: {
handler(n) {
this.$nextTick(() => { this.$nextTick(() => {
// 确保 DOM 完全渲染
this.initCharts() this.initCharts()
window.addEventListener('resize', this.handleResize) window.addEventListener('resize', this.handleResize)
}) })
}
}
},
mounted() {
}, },
beforeUnmount() { beforeUnmount() {
window.removeEventListener('resize', this.handleResize) window.removeEventListener('resize', this.handleResize)
this.chartInstances.forEach((chart) => chart && chart.dispose()) this.chartInstances.forEach((chart) => chart && chart.dispose())
}, },
methods: { 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() { initCharts() {
this.chartOptions.forEach((option, index) => { this.chartOptions.forEach((option, index) => {
const dom = this.$refs[`chartContainer${index}`][0] const dom = this.$refs[`chartContainer${index}`][0]
@@ -380,9 +359,10 @@ export default {
}, },
handlePagesizeChange(pageOption) { handlePagesizeChange(pageOption) {
this.pageOption.pageSize = pageOption.pageSize this.$emit('pagesizeChange_energy',pageOption)
this.pageOption.current = pageOption.current // this.pageOption.pageSize = pageOption.pageSize
this.getList() // this.pageOption.current = pageOption.current
// this.getList()
} }
} }
} }
@@ -390,7 +370,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
height: calc(100% - 38px); height: calc(100% - 10px);
overflow: scroll; overflow: scroll;
} }
.content-echarts { .content-echarts {

1
web/src/views/MainView.vue
View File

@@ -47,6 +47,7 @@ export default {
menuList: [ menuList: [
{ {
name: '系统总览', name: '系统总览',
path: '/main/',
icon: 'icon-xitongguanli' icon: 'icon-xitongguanli'
}, },
{ {

370
web/src/views/statisticalAnalysis.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="statisicalAn"> <div class="statisicalAn">
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between; height: 50px">
<div class="tab-header"> <div class="tab-header">
<div v-for="item in tabList" :key="item.key" class="tab"> <div v-for="item in tabList" :key="item.key" class="tab">
<span <span
@@ -20,12 +20,14 @@
> >
</searchBox> </searchBox>
</div> </div>
<div class="content"> <div class="main_content">
<energyEchart <energyEchart
: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"
:table-info="tableList[activeKey].tableInfo" :table-info="tableList[activeKey].tableInfo"
:table-data="tableList[activeKey].tableData"
@pagesizeChange="pagesizeChange()"
></energyEchart> ></energyEchart>
</div> </div>
</div> </div>
@@ -34,14 +36,31 @@
<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'
export default { export default {
name: 'StatisicalAnView', name: 'StatisicalAnView',
components: { energyEchart, searchBox }, components: { energyEchart, searchBox },
data() { data() {
return { return {
categoryArr: [
{
type: 1,
label: '储能设备',
infoKey: 'energy'
},
{
type: 2,
label: '充电设备',
infoKey: 'charge'
},
{
type: 3,
label: '光伏设备',
infoKey: 'pv'
}
],
paramsDate: {}, paramsDate: {},
searchOptions: [ searchOptions: [
{ {
label: '日期', label: '日期',
@@ -108,7 +127,142 @@ export default {
] ]
} }
], ],
chartData: { chartData: {}
}
},
activeKey: 0,
tabList: [
{
key: '0',
name: '储能设备'
},
{
key: '1',
name: '光伏设备'
},
{
key: '2',
name: '充电设备'
}
],
tableList: {
0: {
columns: [
{
title: '设备ID',
dataIndex: 'key1',
key: 'key1',
width: 120,
ellipsis: true
},
{
title: '设备名称',
dataIndex: 'key2',
key: 'key2',
width: 120,
ellipsis: true
},
{
title: '设备类型',
dataIndex: 'key3',
key: 'key3',
width: 120,
ellipsis: true
},
{
title: '充电电量',
dataIndex: 'key4',
key: 'key4',
width: 120,
ellipsis: true
},
{
title: '充电时长',
dataIndex: 'key5',
key: 'key5',
width: 120,
ellipsis: true
},
{
title: '放电时长',
dataIndex: 'key6',
key: 'key6',
width: 120,
ellipsis: true
},
{
title: '放电电量',
dataIndex: 'key7',
key: 'key7',
width: 120,
ellipsis: true
},
{
title: '故障次数',
dataIndex: 'key8',
key: 'key8',
width: 120,
ellipsis: true
},
{
title: '日期',
dataIndex: 'key9',
key: 'key9',
width: 120,
ellipsis: true
}
],
geturl: '',
tableData: [],
pageOption: {
current: 1,
pageSize: 10,
total: 1
}
}
}
}
},
async mounted() {
await Promise.all([
this.getTableList(),
this.getEchartsList()
])
},
beforeUnmount() {},
methods: {
pagesizeChange(e) {
console.log(e, 'eeeeeeeeeeeeeee')
this.tableList[this.activeKey].pageOption.pageSize = e.pageSize
this.tableList[this.activeKey].pageOption.current = e.current
this.getTableList()
},
onSearch(data) {
this.paramsDate.startTime = data.time ? data.time[0] : ''
this.paramsDate.endTime = data.time ? data.time[1] : ''
this.pageOption.current = 1
this.getTableList()
this.getEchartsList()
},
async getEchartsList() {
const currentInfo = this.echartsInfo[this.activeKey]
const query = {
...this.paramsDate,
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type
}
try {
const res = await postReq(query, '')
if (res.code === 200) {
this.echartsInfo[this.activeKey].chartData= res.data
} else {
throw res
}
} catch (error) {
this.echartsInfo[this.activeKey].chartData = {
sales: [ sales: [
{ {
date: '2025-08-30', date: '2025-08-30',
@@ -512,151 +666,75 @@ export default {
} }
} }
}, },
activeKey: '0',
tabList: [
{
key: '0',
name: '储能设备'
},
{
key: '1',
name: '光伏设备'
},
{
key: '2',
name: '充电设备'
}
],
tableList: {
0: {
columns: [
{
title: '设备ID',
dataIndex: 'key1',
key: 'key1',
width: 120,
ellipsis: true
},
{
title: '设备名称',
dataIndex: 'key2',
key: 'key2',
width: 120,
ellipsis: true
},
{
title: '设备类型',
dataIndex: 'key3',
key: 'key3',
width: 120,
ellipsis: true
},
{
title: '充电电量',
dataIndex: 'key4',
key: 'key4',
width: 120,
ellipsis: true
},
{
title: '充电时长',
dataIndex: 'key5',
key: 'key5',
width: 120,
ellipsis: true
},
{
title: '放电时长',
dataIndex: 'key6',
key: 'key6',
width: 120,
ellipsis: true
},
{
title: '放电电量',
dataIndex: 'key7',
key: 'key7',
width: 120,
ellipsis: true
},
{
title: '故障次数',
dataIndex: 'key8',
key: 'key8',
width: 120,
ellipsis: true
},
{
title: '日期',
dataIndex: 'key9',
key: 'key9',
width: 120,
ellipsis: true
}
],
tableInfo: {
tableId: '',
geturl: ''
}
// tableData:[ async getTableList() {
// { const currentInfo = this.tableList[this.activeKey]
// key1:'1515151515', const query = {
// key2:'设备1111', ...this.paramsDate,
// key3:'类型', category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
// key4:'电量', pageSize: currentInfo.pageOption.pageSize,
// key5:'时长', pageNumber: currentInfo.pageOption.current
// key6:'时长',
// key7:'dianl',
// key8:'时长',
// key9:'时长11',
// },
// {
// key1:'1515151515',
// key2:'设备1111',
// key3:'类型',
// key4:'电量',
// key5:'时长',
// key6:'时长',
// key7:'dianl',
// key8:'时长',
// key9:'时长11',
// },
// {
// key1:'1515151515',
// key2:'设备1111',
// key3:'类型',
// key4:'电量',
// key5:'时长',
// key6:'时长',
// key7:'dianl',
// key8:'时长',
// key9:'时长11',
// },
// {
// key1:'1515151515',
// key2:'设备1111',
// key3:'类型',
// key4:'电量',
// key5:'时长',
// key6:'时长',
// key7:'dianl',
// key8:'时长',
// key9:'时长11',
// },
// ]
} }
try {
const res = await postReq(query, currentInfo.getUrl)
if (res.code === 200) {
currentInfo.tableData = res.data.records
currentInfo.pageOption = {
current: res.data.pageNumber,
pageSize: res.data.pageSize,
total: res.data.totalRow
} }
} else {
throw res
} }
} catch (error) {
this.tableList[this.activeKey].tableData = [
{
key1: '1515151515',
key2: '设备1111',
key3: '类型',
key4: '电量',
key5: '时长',
key6: '时长',
key7: 'dianl',
key8: '时长',
key9: '时长11'
}, },
mounted() {}, {
beforeUnmount() {}, key1: '1515151515',
methods: { key2: '设备1111',
onSearch(data) { key3: '类型',
this.paramsDate.startTime = data.time ? data.time[0] : '' key4: '电量',
this.paramsDate.endTime = data.time ? data.time[1] : '' key5: '时长',
this.pageOption.current = 1 key6: '时长',
this.getList() key7: 'dianl',
key8: '时长',
key9: '时长11'
},
{
key1: '1515151515',
key2: '设备1111',
key3: '类型',
key4: '电量',
key5: '时长',
key6: '时长',
key7: 'dianl',
key8: '时长',
key9: '时长11'
},
{
key1: '1515151515',
key2: '设备1111',
key3: '类型',
key4: '电量',
key5: '时长',
key6: '时长',
key7: 'dianl',
key8: '时长',
key9: '时长11'
}
]
}
} }
} }
} }
@@ -696,9 +774,9 @@ export default {
background-color: $bg2-color; background-color: $bg2-color;
} }
} }
.content { .main_content {
overflow: scroll; overflow: scroll;
height: calc(100% - 15px); height: calc(100% - 15px);
margin-top: 10px; // margin-top: 10px;
} }
</style> </style>

31
web/src/views/sub/Home.vue
View File

@@ -344,7 +344,12 @@ export default {
throw res throw res
} }
} catch (error) { } catch (error) {
this.deviceInfo.onLine = {} this.deviceInfo.onLine = {
launchDate:11,
incomeTotal:12,
solarDeviceNum:10,
stationNum:15
}
} }
}, },
// 查询系统累计统计信息 // 查询系统累计统计信息
@@ -423,29 +428,7 @@ export default {
throw res throw res
} }
} catch (error) { } catch (error) {
// this.deviceInfo.allStatDayList = [] console.log(error)
// this.deviceInfo.allStatDayList = [
// {
// date: '2025-08-30',
// storageElectIn: 2,
// storageElectOut: 5,
// chargeElect: 4,
// chargeNum: 5,
// incomeCharge: 7,
// solarElectGen: 7,
// solarElectGrid: 7
// },
// {
// date: '2025-08-31',
// storageElectIn: 3,
// storageElectOut: 7,
// chargeElect: 5,
// chargeNum: 5,
// incomeCharge: 4,
// solarElectGen: 6,
// solarElectGrid: 8
// }
// ]
} }
} }
} }