410 lines
13 KiB
Vue
410 lines
13 KiB
Vue
<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 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="'光伏电站总览'" />
|
|
<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 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">{{ item.title }}</div>
|
|
<div class="num">{{ item.value }} <span class="unit">{{ item.unit }}</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';
|
|
|
|
// 模拟数据量，用于拖动条渲染
|
|
const operationData = ref({
|
|
efficiencyPlan: 1500,
|
|
efficiencyActual: 125,
|
|
gdNumTotal: 100,
|
|
gdNum: 50,
|
|
});
|
|
|
|
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',
|
|
},
|
|
])
|
|
|
|
// 发电量数据
|
|
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: 100%;
|
|
height: vh(128);
|
|
display: flex;
|
|
|
|
.left {
|
|
width: vw(180);
|
|
height: vh(140);
|
|
background-image: url('@/assets/ueimg/bg1.png');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.top {
|
|
position: absolute;
|
|
top: vh(14);
|
|
|
|
.num {
|
|
font-size: vh(24);
|
|
}
|
|
|
|
.unit {
|
|
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: 1;
|
|
transition: left 0.5s ease;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 中部信息
|
|
.middleInfo {
|
|
|
|
.middleInfoContainer {
|
|
// margin-top: vh(12);
|
|
width: 100%;
|
|
height: vh(313);
|
|
// padding: vw(8);
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
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);
|
|
}
|
|
}
|
|
|
|
.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);
|
|
|
|
.powerGenerationBox {
|
|
display: flex;
|
|
align-items: center;
|
|
height: vh(60);
|
|
font-family: 'SourceHanSansCN-Regular';
|
|
color: rgba(255, 255, 255, 1);
|
|
.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 {
|
|
background-color: rgba(17, 25, 24, 0.3);
|
|
.infoContainer {
|
|
.infoItem {
|
|
display: flex;
|
|
align-items: center;
|
|
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);
|
|
height: vh(42);
|
|
}
|
|
}
|
|
|
|
.infoName {
|
|
margin-left: vw(17);
|
|
font-size: vw(16);
|
|
width: vw(200);
|
|
height: vh(28);
|
|
}
|
|
|
|
.infoValue {
|
|
margin-left: vw(62);
|
|
font-size: vw(16);
|
|
}
|
|
|
|
.infoUnit {
|
|
margin-left: vw(34);
|
|
font-size: vw(16);
|
|
color: rgba(125, 255, 253, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |