zzkj/smart_storage_web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

光伏功能页面

Browse Source
This commit is contained in:
huangjp
2025-11-12 10:55:55 +08:00
parent d5c01162f6
commit 2ff46c5cbc
57 changed files with 12168 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
src/views/new-screen-zz-pv/components/left-top.vue Normal file
View File

@ -0,0 +1,180 @@
<template>
<div class="left-top-warp">
<item :title="$t('screen.groupData')">
<dv-loading v-if="loading">Loading...</dv-loading>
<div v-else class="top-all-box">
<div class="value-box">
<el-tooltip class="item" effect="dark" :content="$t('screen.capacity')" placement="top">
<div class="title">{{ $t('screen.capacity') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.capacity |kwhFormat" placement="top">
<div class="value">{{ info.capacity |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.capacity | kwhUnitFormat }}</div>
</div>
<div class="value-box">
<el-tooltip class="item" effect="dark" :content="$t('screen.stationNum')" placement="top">
<div class="title">{{ $t('screen.stationNum') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.stationNumber" placement="top">
<div class="value">{{ info.stationNumber }}</div>
</el-tooltip>
<div class="unit">{{ lang === 'zh'? '个':'' }}</div>
</div>
<div class="value-box" style="width:100%">
<el-tooltip class="item" effect="dark" :content="$t('screen.dailyPowerGeneration')" placement="top">
<div class="title" style="min-width:170px;max-width:170px;">{{ $t('screen.dailyPowerGeneration') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.dayCharge |kwhFormat" placement="top">
<div class="value" style="min-width:170px;max-width:170px;">{{ info.dayCharge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.dayCharge |kwhUnitFormat }}</div>
</div>
<div class="value-box" style="width:100%">
<el-tooltip class="item" effect="dark" :content="$t('screen.yearlyPowerGeneration')" placement="top">
<div class="title" style="min-width:170px;max-width:170px;">{{ $t('screen.yearlyPowerGeneration') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.dayDischarge |kwhFormat" placement="top">
<div class="value" style="min-width:170px;max-width:170px;">{{ info.dayDischarge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.dayDischarge |kwhUnitFormat }}</div>
</div>
<div class="value-box" style="width:100%">
<el-tooltip class="item" effect="dark" :content="$t('screen.cumulativePowerGeneration')" placement="top">
<div class="title" style="min-width:170px;max-width:170px;">{{ $t('screen.cumulativePowerGeneration') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.yearCharge |kwhFormat" placement="top">
<div class="value" style="min-width:170px;max-width:170px;">{{ info.yearCharge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.yearCharge |kwhUnitFormat }}</div>
</div>
<!-- <div class="value-box">
<el-tooltip class="item" effect="dark" :content="$t('screen.yearDisCharge')" placement="top">
<div class="title">{{ $t('screen.yearDisCharge') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.yearDischarge |kwhFormat" placement="top">
<div class="value">{{ info.yearDischarge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.yearDischarge |kwhUnitFormat }}</div>
</div>
<div class="value-box">
<el-tooltip class="item" effect="dark" :content="$t('screen.totalCharge')" placement="top">
<div class="title">{{ $t('screen.totalCharge') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.totalCharge |kwhFormat" placement="top">
<div class="value">{{ info.totalCharge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.totalCharge |kwhUnitFormat }}</div>
</div>
<div class="value-box">
<el-tooltip class="item" effect="dark" :content="$t('screen.totalDisCharge')" placement="top">
<div class="title">{{ $t('screen.totalDisCharge') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.totalDischarge |kwhFormat" placement="top">
<div class="value">{{ info.totalDischarge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.totalDischarge |kwhUnitFormat }}</div>
</div> -->
</div>
</item>
</div>
</template>
<script>
import item from './item-warp.vue'
export default {
components: { item },
props: {
info: {
type: Object,
default: () => null
}
},
data() {
return {
loading: true
}
},
computed: {
lang() {
return this.$store.getters.language
}
},
watch: {
info: {
handler(val) {
if (val) {
this.loading = false
} else {
this.loading = true
}
},
immediate: true,
deep: true
}
},
created() {
},
mounted() {
this.getData()
},
methods: {
getData() {
}
}
}
</script>
<style lang="scss" scoped>
.left-top-warp {
width: 100%;
height: 100%;
.top-all-box {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
height: 100%;
padding: 10px 0;
.value-box{
width: 50%;
height: 32px;
background: url(../../../assets/new-screen/top-left-bg.png)no-repeat;
background-size: 120% 100%;
display: flex;
align-items: center;
.title{
color: rgba(179, 221, 253, 1);
overflow: hidden;
text-overflow: ellipsis;
min-width: 90px;
max-width: 90px;
padding-left: 16px;
white-space: nowrap;
}
.value{
color: rgba(255, 184, 0, 1);
padding-left: 10px;
min-width: 70px;
max-width: 70px;
text-align: right;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.unit{
color: rgba(183, 193, 201, 1);
padding-right: 20px;
padding-left: 5px;
font-size: 12px;
}
}
}
}
</style>