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>

466
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,222 +107,254 @@ export default {
} }
}, },
async mounted() { async mounted() {
this.deviceInfo = { await Promise.all([
alarm: [ this.getTotalList(),
{
date: '2025-08-30', ( this.deviceInfo = {
key1: 10, alarm: [
key2: 0, {
key3: 15, date: '2025-08-30',
key4: 5 key1: 10,
}, key2: 0,
{ key3: 15,
date: '2025-08-29', key4: 5
key1: 8, },
key2: 5, {
key3: 5, date: '2025-08-29',
key4: 7 key1: 8,
}, key2: 5,
{ key3: 5,
date: '2025-08-28', key4: 7
key1: 0, },
key2: 10, {
key3: 20, date: '2025-08-28',
key4: 4 key1: 0,
}, key2: 10,
{ key3: 20,
date: '2025-08-27', key4: 4
key1: 10, },
key2: 0, {
key3: 15, date: '2025-08-27',
key4: 5 key1: 10,
}, key2: 0,
{ key3: 15,
date: '2025-08-26', key4: 5
key1: 10, },
key2: 0, {
key3: 15, date: '2025-08-26',
key4: 5 key1: 10,
}, key2: 0,
{ key3: 15,
date: '2025-08-25', key4: 5
key1: 10, },
key2: 0, {
key3: 15, date: '2025-08-25',
key4: 5 key1: 10,
}, key2: 0,
{ key3: 15,
date: '2025-08-24', key4: 5
key1: 10, },
key2: 0, {
key3: 15, date: '2025-08-24',
key4: 5 key1: 10,
}, key2: 0,
{ key3: 15,
date: '2025-08-23', key4: 5
key1: 10, },
key2: 0, {
key3: 15, date: '2025-08-23',
key4: 5 key1: 10,
}, key2: 0,
{ key3: 15,
date: '2025-08-22', key4: 5
key1: 10, },
key2: 0, {
key3: 15, date: '2025-08-22',
key4: 5 key1: 10,
}, key2: 0,
{ key3: 15,
date: '2025-08-21', key4: 5
key1: 10, },
key2: 0, {
key3: 15, date: '2025-08-21',
key4: 5 key1: 10,
}, key2: 0,
{ key3: 15,
date: '2025-08-20', key4: 5
key1: 10, },
key2: 0, {
key3: 15, date: '2025-08-20',
key4: 5 key1: 10,
}, key2: 0,
{ key3: 15,
date: '2025-08-19', key4: 5
key1: 10, },
key2: 0, {
key3: 15, date: '2025-08-19',
key4: 5 key1: 10,
}, key2: 0,
{ key3: 15,
date: '2025-08-18', key4: 5
key1: 10, },
key2: 0, {
key3: 15, date: '2025-08-18',
key4: 5 key1: 10,
}, key2: 0,
{ key3: 15,
date: '2025-08-17', key4: 5
key1: 10, },
key2: 0, {
key3: 15, date: '2025-08-17',
key4: 5 key1: 10,
} key2: 0,
], key3: 15,
energy: [ key4: 5
{ }
date: '2025-08-30', ],
key1: '2', energy: [
key2: '2' {
}, date: '2025-08-30',
{ key1: '2',
date: '2025-08-29', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-29',
{ key1: '2',
date: '2025-08-28', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-28',
{ key1: '2',
date: '2025-08-27', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-27',
{ key1: '2',
date: '2025-08-26', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-26',
{ key1: '2',
date: '2025-08-25', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-25',
{ key1: '2',
date: '2025-08-24', key2: '2'
key1: '2', },
key2: '2' {
} date: '2025-08-24',
], key1: '2',
charge: [ key2: '2'
{ }
date: '2025-08-30', ],
key1: '2', charge: [
key2: '2' {
}, date: '2025-08-30',
{ key1: '2',
date: '2025-08-29', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-29',
{ key1: '2',
date: '2025-08-28', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-28',
{ key1: '2',
date: '2025-08-27', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-27',
{ key1: '2',
date: '2025-08-26', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-26',
{ key1: '2',
date: '2025-08-25', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-25',
{ key1: '2',
date: '2025-08-24', key2: '2'
key1: '2', },
key2: '2' {
} date: '2025-08-24',
], key1: '2',
pv: [ key2: '2'
{ }
date: '2025-08-30', ],
key1: '2', pv: [
key2: '2' {
}, date: '2025-08-30',
{ key1: '2',
date: '2025-08-29', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-29',
{ key1: '2',
date: '2025-08-28', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-28',
{ key1: '2',
date: '2025-08-27', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-27',
{ key1: '2',
date: '2025-08-26', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-26',
{ key1: '2',
date: '2025-08-25', key2: '2'
key1: '2', },
key2: '2' {
}, date: '2025-08-25',
{ key1: '2',
date: '2025-08-24', key2: '2'
key1: '2', },
key2: '2' {
} date: '2025-08-24',
] key1: '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) => {

132
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,35 +114,30 @@ 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;
display: flex; display: flex;
align-items: center; align-items: center;
// justify-content: center; // justify-content: center;
// text-align: center; // text-align: center;
& > span:nth-child(1) { & > span:nth-child(1) {
font-size: 12px; font-size: 12px;
margin-bottom: 10px; margin-bottom: 10px;
}
.d {
margin-left: 1px;
font-size: 12px;
}
} }
.d {
margin-left: 1px;
font-size: 12px;
}
}
.right { .right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 20px; margin-left: 20px;
}
} }
}
</style> </style>

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

@@ -4,33 +4,27 @@
<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="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,35 +124,30 @@ 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;
display: flex; display: flex;
align-items: center; align-items: center;
// justify-content: center; // justify-content: center;
// text-align: center; // text-align: center;
& > span:nth-child(1) { & > span:nth-child(1) {
font-size: 12px; font-size: 12px;
margin-bottom: 10px; margin-bottom: 10px;
}
.d {
margin-left: 1px;
font-size: 12px;
}
} }
.d {
margin-left: 1px;
font-size: 12px;
}
}
.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,

66
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 实例
} }
}, },
watch:{
chartData: {
handler(n) {
this.$nextTick(() => {
this.initCharts()
window.addEventListener('resize', this.handleResize)
})
}
}
},
mounted() { mounted() {
this.$nextTick(() => {
// 确保 DOM 完全渲染
this.initCharts()
window.addEventListener('resize', this.handleResize)
})
}, },
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'
}, },
{ {

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

File diff suppressed because it is too large Load Diff

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
// }
// ]
} }
} }
} }