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

feat(ueScreen): 更新界面样式并添加操作统计数据

Browse Source 
- 替换背景图片并调整样式
- 添加发电效率和工单统计进度条组件
- 重构发电量数据显示为循环渲染
- 更新字体配置和样式细节
- 删除无用图片资源
This commit is contained in:
re-JZzzz
2025-11-15 14:16:44 +08:00
parent 59308dd898
commit f1f820cd80
7 changed files with 199 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/fonts/fonts.scss
View File

@ -50,16 +50,16 @@
// font-style: normal;
// }
// @font-face {
// font-family: 'SourceHanSansCN-Normal';
// src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//暂时没用
// font-weight: normal;
// font-style: normal;
// }
@font-face {
font-family: 'SourceHanSansCN-Normal';
src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//思源正常
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SourceHanSansCN-Regular';
src: url('./ReflectTi/SourceHanSansCN-Regular.otf');
src: url('./ReflectTi/SourceHanSansCN-Regular.otf');//思源常规
font-weight: normal;
font-style: normal;
}

BIN
src/assets/ueimg/Rectangle 766.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
src/assets/ueimg/bj.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 MiB

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
src/assets/ueimg/xuyi.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 502 KiB

229
src/views/ueScreen/components/leftPage.vue
View File

@ -1,20 +1,57 @@
<template>
<div class="leftpageContainer">
<!-- 头部图表 -->
<div class="topInfoContainer">
<div class="left">
<span class="top">
<span class="num">365</span>
<span class="unit">day</span>
</span>
<span class="desc">
运行天数
</span>
</div>
<div class="right">
</div>
</div>
<div class="topInfoContainer">
<div class="left">
<span class="top">
<span class="num">365</span>
<span class="unit">day</span>
</span>
<span class="desc">
运行天数
</span>
</div>
<div class="right">
<div class="operationStats">
<div class="statItem">
<div class="statLabel">
<span class="title">计划发电/实际发电</span>
<div class="progressText"><span class="actual">{{ operationData.efficiencyActual }}</span>/{{
operationData.efficiencyPlan }} <span class="unit"> kWh</span></div>
</div>
<div class="progressBar">
<div class="progressTrack">
<div class="progressFill status"
:style="{ width: (operationData.efficiencyActual / operationData.efficiencyPlan * 100) + '%' }">
</div>
</div>
<div class="progressCircle"
:style="{ left: (operationData.efficiencyActual / operationData.efficiencyPlan * 100) + '%' }">
</div>
</div>
</div>
<div class="statItem">
<div class="statLabel">
<span>待处理工单数量</span>
<div class="progressText"><span class="actual">{{ operationData.gdNum }}</span>/{{ operationData.gdNumTotal }}
<span class="unit"> 个</span>
</div>
</div>
<div class="progressBar">
<div class="progressTrack">
<div class="progressFill status"
:style="{ width: (operationData.gdNum / operationData.gdNumTotal * 100) + '%' }">
</div>
</div>
<div class="progressCircle"
:style="{ left: (operationData.gdNum / operationData.gdNumTotal * 100) + '%' }">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 中部图表 -->
<div class="middleInfo">
<SmallTitle :title="'光伏电站总览'" />
@ -29,31 +66,13 @@
</div>
</div>
<div class="electricity">
<div class="dayNumbox">
<div v-for="item in powerGenerationData" :key="item.type" class="powerGenerationBox">
<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 class="title">{{ item.title }}</div>
<div class="num">{{ item.value }} <span class="unit">{{ item.unit }}</span></div>
</div>
</div>
</div>
@ -85,6 +104,15 @@
<script lang="ts" setup>
import SmallTitle from './smalltitle.vue';
import { ref } from 'vue';
// 模拟数据量，用于拖动条渲染
const operationData = ref({
efficiencyPlan: 1500,
efficiencyActual: 125,
gdNumTotal: 100,
gdNum: 50,
});
const infoList = ref([
{
name: '变压器220KV',
@ -118,15 +146,40 @@ const infoList = ref([
},
])
// 发电量数据
const powerGenerationData = ref([
{
type: 'day',
title: '日发电量',
value: 2649,
unit: 'kWh'
},
{
type: 'month',
title: '月发电量',
value: 2649,
unit: 'kWh'
},
{
type: 'year',
title: '年发电量',
value: 2649,
unit: 'kWh'
}
])
</script>
<style scoped lang="scss">
@import '@/views/ueScreen/gis.scss';
.leftpageContainer {
// 头部图表
.topInfoContainer {
width: vw(467);
width: 100%;
height: vh(128);
display: flex;
.left {
width: vw(180);
height: vh(140);
@ -138,28 +191,105 @@ const infoList = ref([
justify-content: center;
align-items: center;
position: relative;
.top {
position: absolute;
top: vh(14);
.num {
font-size: vh(24);
}
.unit {
font-size: vh(12);
font-size: vh(16);
color: rgba(255, 255, 255, 0.7);
}
}
.desc {
font-size: vh(12);
}
}
.right {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: vw(10);
font-family: 'SourceHanSansCN-Regular';
.operationStats {
width: 100%;
.statItem {
margin-bottom: vh(20);
.statLabel {
font-size: vh(16);
color: rgba(255, 255, 255, 0.87);
margin-bottom: vh(10);
display: flex;
align-items: center;
justify-content: space-between;
.title {
// width: vw(140);
}
.progressText {
padding-right: vw(4);
.actual {
color: rgba(125, 246, 255, 1)
}
}
}
.progressBar {
position: relative;
margin-bottom: vh(20);
.progressTrack {
height: vh(10);
background: rgba(255, 255, 255, 0.15);
overflow: hidden;
margin-bottom: vh(8);
position: relative;
.progressFill {
height: 100%;
transition: width 0.5s ease;
&.status {
background: linear-gradient(259.28deg, rgba(41, 241, 250, 1) 0%, rgba(41, 241, 250, 0) 100%);
}
}
}
.progressCircle {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: vh(24);
height: vh(24);
border-radius: 50%;
background: linear-gradient(135deg, #7df6ff 0%, #29f1fa 100%);
box-shadow: 0 0 vh(10) rgba(41, 241, 250, 0.8);
border: vh(2) solid rgba(255, 255, 255, 0.9);
z-index: 10;
transition: left 0.5s ease;
}
}
}
}
}
}
// 中部信息
.middleInfo {
.middleInfoContainer {
// margin-top: vh(12);
width: vw(467);
width: 100%;
height: vh(313);
// padding: vw(8);
box-sizing: border-box;
@ -167,18 +297,23 @@ const infoList = ref([
background-image: url('@/assets/ueimg/bg.png');
background-size: 100% 100%;
margin-bottom: vh(12);
.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);
font-size: vh(16);
}
}
@ -194,13 +329,13 @@ const infoList = ref([
justify-content: space-around;
position: absolute;
bottom: vh(27.51);
.dayNumbox,
.monthNumBox,
.yearNumBox {
.powerGenerationBox {
display: flex;
align-items: center;
height: vh(60);
font-family: 'SourceHanSansCN-Regular';
color: rgba(255, 255, 255, 1);
.left {
img {
width: vw(48);
@ -212,6 +347,7 @@ const infoList = ref([
.title {
font-size: vh(16);
}
.num {
margin-top: vh(10.28);
font-family: 'D-Din';
@ -234,14 +370,15 @@ const infoList = ref([
.infoItem {
display: flex;
align-items: center;
width: vw(467);
width: 100%;
height: vh(74);
background-image: url('@/assets/ueimg/item.png');
background-size: cover;
padding: vw(8);
margin-top: vh(12);
box-sizing: border-box;
font-family: 'SourceHanSansCN-Regular';
color: rgba(255, 255, 255, 1);
.infoIcon {
img {
width: vw(42);
@ -257,13 +394,13 @@ const infoList = ref([
}
.infoValue {
margin-left: vw(82);
margin-left: vw(62);
font-size: vh(20);
}
.infoUnit {
margin-left: vw(34);
font-size: vh(20);
font-size: vh(18);
color: rgba(125, 255, 253, 1);
}
}

7
src/views/ueScreen/components/smalltitle.vue
View File

@ -20,10 +20,11 @@ const props = defineProps({
@import '@/views/ueScreen/gis.scss';
.title {
background-image: url('@/assets/ueimg/title.png');
background-image: url('@/assets/ueimg/Rectangle 766.png');
background-size: cover;
border: vw(1) solid rgba(255, 255, 255, 1);
width: vw(467);
background-repeat: no-repeat;
border: vw(1) solid rgba(255, 255, 255, 0.1);
width: 100%;
height: vh(40);
display: flex;
align-items: center;

6
src/views/ueScreen/index.vue
View File

@ -32,7 +32,11 @@ $vh_base: 1080;
.ueScreen {
width: 100vw;
height: 100vh;
background-color: rgba(4, 7, 17, 0.8);
// background-color: rgba(4, 7, 17, 0.8);
background-image: url('@/assets/ueimg/bj.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
}