修改表单构建
parent
07b88747a6
commit
b0f153e9d2
@ -0,0 +1,522 @@
|
|||||||
|
<template>
|
||||||
|
<div class="board">
|
||||||
|
<div class="title">
|
||||||
|
微电网能源管理系统
|
||||||
|
</div>
|
||||||
|
<div class="rightTop">
|
||||||
|
<span>今日告警:</span>
|
||||||
|
<span style="color: #ff0000">2234</span>
|
||||||
|
<br>
|
||||||
|
<span>累计告警:</span>
|
||||||
|
<span style="color: #4F98B8">3392</span>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="left: 0.3%;background-color: #DD8F78">
|
||||||
|
<div class="cardTitle">上网电量</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
日上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
103.2
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
累计上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
36371
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="left: 16.9%;background-color: #DD8F78">
|
||||||
|
<div class="cardTitle">上网电量</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
日上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
103.2
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
累计上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
36371
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="left: 33.5%;background-color: #DD8F78">
|
||||||
|
<div class="cardTitle">上网电量</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
日上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
103.2
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
累计上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
36371
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="left: 50.1%;background-color: #DD8F78">
|
||||||
|
<div class="cardTitle">上网电量</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
日上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
103.2
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
累计上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
36371
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="left: 66.7%;background-color: #DD8F78">
|
||||||
|
<div class="cardTitle">上网电量</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
日上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
103.2
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
累计上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
36371
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="left: 83.3%;background-color: #DD8F78">
|
||||||
|
<div class="cardTitle">上网电量</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
日上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
103.2
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
累计上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
36371
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomLeftTop">
|
||||||
|
<div class="card1" style="margin-top: 1%;margin-bottom: 2%">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="card1" style="margin-top: 1%;margin-bottom: 2%">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="card1">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="card1">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomLeftMid">
|
||||||
|
<div class="title2">光伏/市电日电量占比</div>
|
||||||
|
<div class="num2">100</div>
|
||||||
|
<div class="span2">%</div>
|
||||||
|
<div class="num3">100</div>
|
||||||
|
<div class="span3">%</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomLeftBottom">
|
||||||
|
<div class="title3">气象信息</div>
|
||||||
|
<div class="card2">
|
||||||
|
<div class="icon2"></div>
|
||||||
|
<div class="card2Title">光照</div>
|
||||||
|
<div class="card2Span">
|
||||||
|
<span>
|
||||||
|
0.00
|
||||||
|
</span>
|
||||||
|
<span style="position:absolute;right: 0">
|
||||||
|
lx
|
||||||
|
</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="card2">
|
||||||
|
<div class="icon2"></div>
|
||||||
|
<div class="card2Title">光照</div>
|
||||||
|
<div class="card2Span">
|
||||||
|
<span>
|
||||||
|
0.00
|
||||||
|
</span>
|
||||||
|
<span style="position:absolute;right: 0">
|
||||||
|
lx
|
||||||
|
</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="card2">
|
||||||
|
<div class="icon2"></div>
|
||||||
|
<div class="card2Title">光照</div>
|
||||||
|
<div class="card2Span">
|
||||||
|
<span>
|
||||||
|
0.00
|
||||||
|
</span>
|
||||||
|
<span style="position:absolute;right: 0">
|
||||||
|
lx
|
||||||
|
</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="card2">
|
||||||
|
<div class="icon2"></div>
|
||||||
|
<div class="card2Title">光照</div>
|
||||||
|
<div class="card2Span">
|
||||||
|
<span>
|
||||||
|
0.00
|
||||||
|
</span>
|
||||||
|
<span style="position:absolute;right: 0">
|
||||||
|
lx
|
||||||
|
</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomMid">
|
||||||
|
</div>
|
||||||
|
<div class="bottomRightTop">
|
||||||
|
<div class="card1" style="margin-top: 1%;margin-bottom: 2%">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="card1" style="margin-top: 1%;margin-bottom: 2%">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="card1">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="card1">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="bottomRightMid">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="bottomRightBottom">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.board {
|
||||||
|
background-color: #020A3A;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: absolute;
|
||||||
|
top: 2%;
|
||||||
|
left: 2%;
|
||||||
|
font-size: 1vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTop {
|
||||||
|
position: absolute;
|
||||||
|
top: 2%;
|
||||||
|
right: 2%;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
width: 16%;
|
||||||
|
height: 15%;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
border-radius: 10px;
|
||||||
|
line-height: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardTitle {
|
||||||
|
margin-left: 0.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardItem {
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomLeftTop {
|
||||||
|
position: absolute;
|
||||||
|
top: 26%;
|
||||||
|
left: 0.3%;
|
||||||
|
width: 25%;
|
||||||
|
height: 24%;
|
||||||
|
background-color: #141B4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomLeftMid {
|
||||||
|
position: absolute;
|
||||||
|
top: 50.6%;
|
||||||
|
left: 0.3%;
|
||||||
|
width: 25%;
|
||||||
|
height: 24%;
|
||||||
|
background-color: #141B4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomLeftBottom {
|
||||||
|
position: absolute;
|
||||||
|
top: 75.2%;
|
||||||
|
left: 0.3%;
|
||||||
|
width: 25%;
|
||||||
|
height: 24%;
|
||||||
|
background-color: #141B4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomMid {
|
||||||
|
position: absolute;
|
||||||
|
top: 26%;
|
||||||
|
left: 25.5%;
|
||||||
|
width: 49%;
|
||||||
|
height: 73.4%;
|
||||||
|
background-color: #141B4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomRightTop {
|
||||||
|
position: absolute;
|
||||||
|
top: 26%;
|
||||||
|
right: 0.3%;
|
||||||
|
width: 25%;
|
||||||
|
height: 24%;
|
||||||
|
background-color: #141B4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomRightMid {
|
||||||
|
position: absolute;
|
||||||
|
top: 50.6%;
|
||||||
|
right: 0.3%;
|
||||||
|
width: 25%;
|
||||||
|
height: 24%;
|
||||||
|
background-color: #141B4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomRightBottom {
|
||||||
|
position: absolute;
|
||||||
|
top: 75.2%;
|
||||||
|
right: 0.3%;
|
||||||
|
width: 25%;
|
||||||
|
height: 24%;
|
||||||
|
background-color: #141B4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card1 {
|
||||||
|
width: 48%;
|
||||||
|
height: 45%;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 1%;
|
||||||
|
vertical-align: top;
|
||||||
|
border: 0.5px solid #fff2;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon1 {
|
||||||
|
position: absolute;
|
||||||
|
width: 10%;
|
||||||
|
top: 10%;
|
||||||
|
right: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num1 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10%;
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span1 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10%;
|
||||||
|
right: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 5%;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: 30%;
|
||||||
|
font-size: 1.2vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: 45%;
|
||||||
|
font-size: 1.2vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.num3 {
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: 75%;
|
||||||
|
font-size: 1.2vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span3 {
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: 90%;
|
||||||
|
font-size: 1.2vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
line-height: 2.4vh;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card2 {
|
||||||
|
width: 46%;
|
||||||
|
height: 45%;
|
||||||
|
margin: 0 2%;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon2 {
|
||||||
|
background-color: #00afff;
|
||||||
|
position: absolute;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
top: 50%;
|
||||||
|
left: 10%;
|
||||||
|
width: 3vw;
|
||||||
|
height: 3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card2Title {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 10% - 3vw);
|
||||||
|
height: 1.5vw;
|
||||||
|
line-height: 1.5vw;
|
||||||
|
top: 50%;
|
||||||
|
left: calc(10% + 3vw);
|
||||||
|
transform: translateY(-100%);
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card2Span {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 10% - 3vw - 20px);
|
||||||
|
height: 1.5vw;
|
||||||
|
top: 50%;
|
||||||
|
left: calc(10% + 3vw + 10px);
|
||||||
|
line-height: 1.5vw;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,422 @@
|
|||||||
|
<template>
|
||||||
|
<div class="board">
|
||||||
|
<div class="title">
|
||||||
|
微电网能源管理系统
|
||||||
|
</div>
|
||||||
|
<div class="rightTop">
|
||||||
|
<span>今日告警:</span>
|
||||||
|
<span style="color: #ff0000">2234</span>
|
||||||
|
<br>
|
||||||
|
<span>累计告警:</span>
|
||||||
|
<span style="color: #4F98B8">3392</span>
|
||||||
|
</div>
|
||||||
|
<div class="bottomLeftTop">
|
||||||
|
<div class="card1" style="margin-top: 1%;margin-bottom: 2%">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="card1" style="margin-top: 1%;margin-bottom: 2%">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="card1">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="card1">
|
||||||
|
<div class="title1">系统收益</div>
|
||||||
|
<div class="icon1"></div>
|
||||||
|
<div class="num1">1.11</div>
|
||||||
|
<div class="span1">万元</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomLeftMid">
|
||||||
|
<div class="title2">光伏/市电日电量占比</div>
|
||||||
|
<div class="num2">100</div>
|
||||||
|
<div class="span2">%</div>
|
||||||
|
<div class="num3">100</div>
|
||||||
|
<div class="span3">%</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomLeftBottom">
|
||||||
|
<div class="title3">气象信息</div>
|
||||||
|
<div class="card2">
|
||||||
|
<div class="icon2"></div>
|
||||||
|
<div class="card2Title">光照</div>
|
||||||
|
<div class="card2Span">
|
||||||
|
<span>
|
||||||
|
0.00
|
||||||
|
</span>
|
||||||
|
<span style="position:absolute;right: 0">
|
||||||
|
lx
|
||||||
|
</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="card2">
|
||||||
|
<div class="icon2"></div>
|
||||||
|
<div class="card2Title">光照</div>
|
||||||
|
<div class="card2Span">
|
||||||
|
<span>
|
||||||
|
0.00
|
||||||
|
</span>
|
||||||
|
<span style="position:absolute;right: 0">
|
||||||
|
lx
|
||||||
|
</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="card2">
|
||||||
|
<div class="icon2"></div>
|
||||||
|
<div class="card2Title">光照</div>
|
||||||
|
<div class="card2Span">
|
||||||
|
<span>
|
||||||
|
0.00
|
||||||
|
</span>
|
||||||
|
<span style="position:absolute;right: 0">
|
||||||
|
lx
|
||||||
|
</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="card2">
|
||||||
|
<div class="icon2"></div>
|
||||||
|
<div class="card2Title">光照</div>
|
||||||
|
<div class="card2Span">
|
||||||
|
<span>
|
||||||
|
0.00
|
||||||
|
</span>
|
||||||
|
<span style="position:absolute;right: 0">
|
||||||
|
lx
|
||||||
|
</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card" style="left: 0%;background-color: #DD8F78">
|
||||||
|
<div class="cardTitle">上网电量</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
日上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
103.2
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
累计上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
36371
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="left: 25%;background-color: #DD8F78">
|
||||||
|
<div class="cardTitle">上网电量</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
日上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
103.2
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
累计上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
36371
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="left: 50%;background-color: #DD8F78">
|
||||||
|
<div class="cardTitle">上网电量</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
日上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
103.2
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
累计上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
36371
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card" style="left: 75%;background-color: #DD8F78">
|
||||||
|
<div class="cardTitle">上网电量</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
日上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
103.2
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cardInfo">
|
||||||
|
<div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
|
||||||
|
累计上网电量
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 20%;font-size: 1.2vw">
|
||||||
|
36371
|
||||||
|
</div>
|
||||||
|
<div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
|
||||||
|
kwh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomRight">
|
||||||
|
<div class="title3">逆变器参数</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.board {
|
||||||
|
background-color: #020A3A;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: absolute;
|
||||||
|
top: 2%;
|
||||||
|
left: 2%;
|
||||||
|
font-size: 1vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTop {
|
||||||
|
position: absolute;
|
||||||
|
top: 2%;
|
||||||
|
right: 2%;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
position: absolute;
|
||||||
|
top: 8%;
|
||||||
|
left: 25.6%;
|
||||||
|
width: 74%;
|
||||||
|
height: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
position: absolute;
|
||||||
|
top: 0%;
|
||||||
|
width: 24.5%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
border-radius: 10px;
|
||||||
|
line-height: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardTitle {
|
||||||
|
margin-left: 0.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardItem {
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomLeftTop {
|
||||||
|
position: absolute;
|
||||||
|
top: 8%;
|
||||||
|
left: 0.3%;
|
||||||
|
width: 25%;
|
||||||
|
height: 30%;
|
||||||
|
background-color: #141B4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomLeftMid {
|
||||||
|
position: absolute;
|
||||||
|
top: 38.6%;
|
||||||
|
left: 0.3%;
|
||||||
|
width: 25%;
|
||||||
|
height: 30%;
|
||||||
|
background-color: #141B4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomLeftBottom {
|
||||||
|
position: absolute;
|
||||||
|
top: 69.2%;
|
||||||
|
left: 0.3%;
|
||||||
|
width: 25%;
|
||||||
|
height: 30%;
|
||||||
|
background-color: #141B4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomRight {
|
||||||
|
position: absolute;
|
||||||
|
top: 23.5%;
|
||||||
|
left: 25.6%;
|
||||||
|
width: 73.5%;
|
||||||
|
height: 76%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card1 {
|
||||||
|
width: 48%;
|
||||||
|
height: 45%;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 1%;
|
||||||
|
vertical-align: top;
|
||||||
|
border: 0.5px solid #fff2;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon1 {
|
||||||
|
position: absolute;
|
||||||
|
width: 10%;
|
||||||
|
top: 10%;
|
||||||
|
right: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num1 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10%;
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span1 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10%;
|
||||||
|
right: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 5%;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: 30%;
|
||||||
|
font-size: 1.2vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: 45%;
|
||||||
|
font-size: 1.2vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.num3 {
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: 75%;
|
||||||
|
font-size: 1.2vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span3 {
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: 90%;
|
||||||
|
font-size: 1.2vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
line-height: 2.4vh;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card2 {
|
||||||
|
width: 46%;
|
||||||
|
height: 45%;
|
||||||
|
margin: 0 2%;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon2 {
|
||||||
|
background-color: #00afff;
|
||||||
|
position: absolute;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
top: 50%;
|
||||||
|
left: 10%;
|
||||||
|
width: 3vw;
|
||||||
|
height: 3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card2Title {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 10% - 3vw);
|
||||||
|
height: 1.5vw;
|
||||||
|
line-height: 1.5vw;
|
||||||
|
top: 50%;
|
||||||
|
left: calc(10% + 3vw);
|
||||||
|
transform: translateY(-100%);
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card2Span {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 10% - 3vw - 20px);
|
||||||
|
height: 1.5vw;
|
||||||
|
top: 50%;
|
||||||
|
left: calc(10% + 3vw + 10px);
|
||||||
|
line-height: 1.5vw;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<el-form-item :label="options.name" :required="options.required">
|
||||||
|
|
||||||
|
<el-input-number v-model="formData[options.key || ('input-number-'+options.uuid)]" :disabled="options.disabled"
|
||||||
|
:step="options.step" :min="options.min || -Infinity" :max="options.max || Infinity"
|
||||||
|
:controls-position="options.controlsPosition?'right':'' "
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'hw-input-view'
|
||||||
|
});
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
options: Object,
|
||||||
|
formData: Object
|
||||||
|
});
|
||||||
|
const { options, formData } = toRefs(props);
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue