Merge branch 'lx' of http://192.168.110.2:3000/taoge_xiaodi/maintenance_system into szq
This commit is contained in:
273
src/views/ueScreen/components/leftPage.vue
Normal file
273
src/views/ueScreen/components/leftPage.vue
Normal file
@ -0,0 +1,273 @@
|
||||
<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="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 {
|
||||
// 头部图表
|
||||
.topInfoContainer {
|
||||
width: vw(467);
|
||||
height: vh(128);
|
||||
.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(12);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
font-size: vh(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 中部信息
|
||||
.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/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);
|
||||
}
|
||||
}
|
||||
|
||||
.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(467);
|
||||
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>
|
||||
41
src/views/ueScreen/components/smalltitle.vue
Normal file
41
src/views/ueScreen/components/smalltitle.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="leftpageContainer">
|
||||
<div class="bottomInfo">
|
||||
<div class="title">
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: Number||String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import '@/views/ueScreen/gis.scss';
|
||||
|
||||
.title {
|
||||
background-image: url('@/assets/ueimg/title.png');
|
||||
background-size: cover;
|
||||
border: vw(1) solid rgba(255, 255, 255, 1);
|
||||
width: vw(467);
|
||||
height: vh(40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
margin-left: vw(41.42);
|
||||
font-size: vh(20);
|
||||
font-weight: 400;
|
||||
letter-spacing: vw(1);
|
||||
line-height: vh(19.08);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
vertical-align: middle;
|
||||
font-family: 'ue_title';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="ueScreen">
|
||||
<Header />
|
||||
<LeftPage />
|
||||
</div>
|
||||
<div class="right">
|
||||
<Right />
|
||||
@ -9,7 +10,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import Header from './components/header.vue';
|
||||
import Right from './components/right.vue';
|
||||
import LeftPage from './components/leftPage.vue';
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user