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-style: normal;
// } // }
// @font-face { @font-face {
// font-family: 'SourceHanSansCN-Normal'; font-family: 'SourceHanSansCN-Normal';
// src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//暂时没用 src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//思源正常
// font-weight: normal; font-weight: normal;
// font-style: normal; font-style: normal;
// } }
@font-face { @font-face {
font-family: 'SourceHanSansCN-Regular'; font-family: 'SourceHanSansCN-Regular';
src: url('./ReflectTi/SourceHanSansCN-Regular.otf'); src: url('./ReflectTi/SourceHanSansCN-Regular.otf');//思源常规
font-weight: normal; font-weight: normal;
font-style: 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> <template>
<div class="leftpageContainer"> <div class="leftpageContainer">
<!-- 头部图表 --> <!-- 头部图表 -->
<div class="topInfoContainer"> <div class="topInfoContainer">
<div class="left"> <div class="left">
<span class="top"> <span class="top">
<span class="num">365</span> <span class="num">365</span>
<span class="unit">day</span> <span class="unit">day</span>
</span> </span>
<span class="desc"> <span class="desc">
运行天数 运行天数
</span> </span>
</div> </div>
<div class="right"> <div class="right">
<div class="operationStats">
</div> <div class="statItem">
</div> <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"> <div class="middleInfo">
<SmallTitle :title="'光伏电站总览'" /> <SmallTitle :title="'光伏电站总览'" />
@ -29,31 +66,13 @@
</div> </div>
</div> </div>
<div class="electricity"> <div class="electricity">
<div class="dayNumbox"> <div v-for="item in powerGenerationData" :key="item.type" class="powerGenerationBox">
<div class="left"> <div class="left">
<img src="@/assets/ueimg/icon-2.png" alt=""> <img src="@/assets/ueimg/icon-2.png" alt="">
</div> </div>
<div class="right"> <div class="right">
<div class="title">日发电量</div> <div class="title">{{ item.title }}</div>
<div class="num">2649 <span class="unit">kWh</span></div> <div class="num">{{ item.value }} <span class="unit">{{ item.unit }}</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>
@ -85,6 +104,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import SmallTitle from './smalltitle.vue'; import SmallTitle from './smalltitle.vue';
import { ref } from 'vue'; import { ref } from 'vue';
// 模拟数据量，用于拖动条渲染
const operationData = ref({
efficiencyPlan: 1500,
efficiencyActual: 125,
gdNumTotal: 100,
gdNum: 50,
});
const infoList = ref([ const infoList = ref([
{ {
name: '变压器220KV', 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/views/ueScreen/gis.scss'; @import '@/views/ueScreen/gis.scss';
.leftpageContainer { .leftpageContainer {
// 头部图表 // 头部图表
.topInfoContainer { .topInfoContainer {
width: vw(467); width: 100%;
height: vh(128); height: vh(128);
display: flex;
.left { .left {
width: vw(180); width: vw(180);
height: vh(140); height: vh(140);
@ -138,28 +191,105 @@ const infoList = ref([
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
.top { .top {
position: absolute; position: absolute;
top: vh(14); top: vh(14);
.num { .num {
font-size: vh(24); font-size: vh(24);
} }
.unit { .unit {
font-size: vh(12); font-size: vh(16);
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
} }
} }
.desc { .desc {
font-size: vh(12); 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 { .middleInfo {
.middleInfoContainer { .middleInfoContainer {
// margin-top: vh(12); // margin-top: vh(12);
width: vw(467); width: 100%;
height: vh(313); height: vh(313);
// padding: vw(8); // padding: vw(8);
box-sizing: border-box; box-sizing: border-box;
@ -167,18 +297,23 @@ const infoList = ref([
background-image: url('@/assets/ueimg/bg.png'); background-image: url('@/assets/ueimg/bg.png');
background-size: 100% 100%; background-size: 100% 100%;
margin-bottom: vh(12); margin-bottom: vh(12);
.totalView { .totalView {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.totalNum { .totalNum {
margin-top: vh(31); margin-top: vh(31);
.num { .num {
font-size: vh(36); font-size: vh(36);
font-family: 'LCDFont'; font-family: 'LCDFont';
} }
.unit { .unit {
margin-left: vw(11); margin-left: vw(11);
font-size: vh(16);
} }
} }
@ -194,13 +329,13 @@ const infoList = ref([
justify-content: space-around; justify-content: space-around;
position: absolute; position: absolute;
bottom: vh(27.51); bottom: vh(27.51);
.dayNumbox,
.monthNumBox, .powerGenerationBox {
.yearNumBox {
display: flex; display: flex;
align-items: center; align-items: center;
height: vh(60); height: vh(60);
font-family: 'SourceHanSansCN-Regular';
color: rgba(255, 255, 255, 1);
.left { .left {
img { img {
width: vw(48); width: vw(48);
@ -212,6 +347,7 @@ const infoList = ref([
.title { .title {
font-size: vh(16); font-size: vh(16);
} }
.num { .num {
margin-top: vh(10.28); margin-top: vh(10.28);
font-family: 'D-Din'; font-family: 'D-Din';
@ -234,14 +370,15 @@ const infoList = ref([
.infoItem { .infoItem {
display: flex; display: flex;
align-items: center; align-items: center;
width: vw(467); width: 100%;
height: vh(74); height: vh(74);
background-image: url('@/assets/ueimg/item.png'); background-image: url('@/assets/ueimg/item.png');
background-size: cover; background-size: cover;
padding: vw(8); padding: vw(8);
margin-top: vh(12); margin-top: vh(12);
box-sizing: border-box; box-sizing: border-box;
font-family: 'SourceHanSansCN-Regular';
color: rgba(255, 255, 255, 1);
.infoIcon { .infoIcon {
img { img {
width: vw(42); width: vw(42);
@ -257,13 +394,13 @@ const infoList = ref([
} }
.infoValue { .infoValue {
margin-left: vw(82); margin-left: vw(62);
font-size: vh(20); font-size: vh(20);
} }
.infoUnit { .infoUnit {
margin-left: vw(34); margin-left: vw(34);
font-size: vh(20); font-size: vh(18);
color: rgba(125, 255, 253, 1); 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'; @import '@/views/ueScreen/gis.scss';
.title { .title {
background-image: url('@/assets/ueimg/title.png'); background-image: url('@/assets/ueimg/Rectangle 766.png');
background-size: cover; background-size: cover;
border: vw(1) solid rgba(255, 255, 255, 1); background-repeat: no-repeat;
width: vw(467); border: vw(1) solid rgba(255, 255, 255, 0.1);
width: 100%;
height: vh(40); height: vh(40);
display: flex; display: flex;
align-items: center; align-items: center;

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

@ -32,7 +32,11 @@ $vh_base: 1080;
.ueScreen { .ueScreen {
width: 100vw; width: 100vw;
height: 100vh; 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; color: #fff;
} }