taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(光伏电站): 添加左侧面板组件及资源文件

Browse Source 
添加左侧面板组件leftPage.vue，包含光伏电站总览和主规模设备展示
新增smalltitle.vue组件用于标题展示
添加相关图片资源和字体文件
更新字体配置文件fonts.scss
This commit is contained in:
re-JZzzz
2025-11-14 19:20:32 +08:00
parent 20afedd3d1
commit 3a02236862
19 changed files with 291 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
src/views/ueScreen/components/leftPage.vue Normal file
View File

@ -0,0 +1,228 @@
<template>
<div class="leftpageContainer">
<!-- 头部图表 -->
<!-- 中部图表 -->
<div class="middleInfo">
<SmallTitle :title="'光伏电站总览'" />
<div class="middleInfoContainer">
<div class="totalView">
<div class="totalNum">
<span class="num">264966.00</span>
<span class="unit">kWh</span>
</div>
<div class="totalDesc">
累计总发电量
</div>
</div>
<div class="electricity">
<div class="dayNumbox">
<div class="left">
<img src="@/assets/ueimg/icon-2.png" alt="">
</div>
<div class="right">
<div class="title">日发电量</div>
<div class="num">2649 <span class="unit">kWh</span></div>
</div>
</div>
<div class="monthNumBox">
<div class="left">
<img src="@/assets/ueimg/icon-2.png" alt="">
</div>
<div class="right">
<div class="title">月发电量</div>
<div class="num">2649 <span class="unit">kWh</span></div>
</div>
</div>
<div class="yearNumBox">
<div class="left">
<img src="@/assets/ueimg/icon-2.png" alt="">
</div>
<div class="right">
<div class="title">年发电量</div>
<div class="num">2649 <span class="unit">kWh</span></div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部信息 -->
<div class="bottomInfo">
<SmallTitle :title="'主规模设备'" />
<div class="infoContainer">
<div v-for="item in infoList" :key="item.name" class="infoItem">
<div class="infoIcon">
<img :src="item.icon" alt="">
</div>
<div class="infoName">
{{ item.name }}
</div>
<div class="infoValue">
{{ item.value }}
</div>
<div class="infoUnit">
{{ item.unit }}
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import SmallTitle from './smalltitle.vue';
import { ref } from 'vue';
const infoList = ref([
{
name: '变压器220KV',
value: 564,
unit: '（台）',
icon: 'src/assets/ueimg/1.png',
},
{
name: '开关柜220KV',
value: 100,
unit: '（台）',
icon: 'src/assets/ueimg/2.png',
},
{
name: '接地变110v',
value: 564,
unit: '（台）',
icon: 'src/assets/ueimg/3.png',
},
{
name: '电缆110v',
value: 768,
unit: '（回）',
icon: 'src/assets/ueimg/4.png',
},
{
name: 'GIS',
value: 100,
unit: '（个）',
icon: 'src/assets/ueimg/5.png',
},
])
</script>
<style scoped lang="scss">
@import '@/views/ueScreen/gis.scss';
.leftpageContainer {
// 中部信息
.middleInfo {
.middleInfoContainer {
// margin-top: vh(12);
width: vw(467);
height: vh(313);
// padding: vw(8);
box-sizing: border-box;
position: relative;
background-image: url('@/assets/ueimg/circle1.png');
background-size: 100% 100%;
.totalView {
display: flex;
flex-direction: column;
align-items: center;
.totalNum {
margin-top: vh(31);
.num {
font-size: vh(36);
font-family: 'LCDFont';
}
.unit {
margin-left: vw(11);
}
}
.totalDesc {
font-size: vh(12);
margin-top: vh(8);
}
}
.electricity {
width: vw(462);
display: flex;
justify-content: space-around;
position: absolute;
bottom: vh(27.51);
.dayNumbox,
.monthNumBox,
.yearNumBox {
display: flex;
align-items: center;
height: vh(60);
.left {
img {
width: vw(48);
height: vh(48);
}
}
.right {
.title {
font-size: vh(16);
}
.num {
margin-top: vh(10.28);
font-family: 'D-Din';
font-size: vh(24);
text-shadow: 0px 0px 6px rgba(0, 255, 238, 1);
.unit {
font-size: vh(16);
}
}
}
}
}
}
}
// 底部信息
.bottomInfo {
.infoContainer {
.infoItem {
display: flex;
align-items: center;
width: vw(465.8);
height: vh(74);
background-image: url('@/assets/ueimg/item.png');
background-size: cover;
padding: vw(8);
margin-top: vh(12);
box-sizing: border-box;
.infoIcon {
img {
width: vw(42);
height: vh(42);
}
}
.infoName {
margin-left: vw(17);
font-size: vh(20);
width: vw(200);
height: vh(28);
}
.infoValue {
margin-left: vw(82);
font-size: vh(20);
}
.infoUnit {
margin-left: vw(34);
font-size: vh(20);
color: rgba(125, 255, 253, 1);
}
}
}
}
}
</style>