From 301e92196007850d6348a5f4d7d4441e23b47ef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cyu=E2=80=9D?= <“winebunny@163.com”>
Date: Tue, 16 Jul 2024 20:49:28 +0800
Subject: [PATCH] q
---
src/views/pages/homePage/index.vue | 218 ++++++++++++++++-------------
1 file changed, 122 insertions(+), 96 deletions(-)
diff --git a/src/views/pages/homePage/index.vue b/src/views/pages/homePage/index.vue
index 7818378..10f9b48 100644
--- a/src/views/pages/homePage/index.vue
+++ b/src/views/pages/homePage/index.vue
@@ -36,15 +36,15 @@
<img src="@/assets/images/mainPage/icon_title1.png" alt="" />
<span>源</span>
</div>
- <div class="content">
+ <div class="content content_top">
<div class="title_info margin1">资源概况</div>
<div class="source_load">
<div class="total_load_key">
<div class="area_kw">
- <span>{{ sumLoadrateds }}</span>
- <div class="r"> kW</div>
+ <span>16490.78</span>
+ <div class="r"> MW</div>
</div>
- <p>可调负荷</p>
+ <p>地区用户总运行容量</p>
</div>
<div class="total_load_3dEchart">
<div class="title_load fs40">负荷户数比例</div>
@@ -57,11 +57,11 @@
</div>
<div class="content_info">
<div class="name">
- <div class="cen"><div class="namebg">光伏</div></div>
+ <div class="cen"><div class="namebg">光伏（<div class="fs35">总装机容量：149.39MW</div>）</div></div>
</div>
<div class="name_box">
<img
- src="@/assets/images/mainPage/icon1_guangfu.png"
+ src="@/assets/images/homePage/v2img/s-pv.png"
alt=""
@click="alert_pvFlag = true"
/>
@@ -79,12 +79,8 @@
/>
</div>
<div class="photovoltaic_value1">
- <div class="kw">
- {{ unit35?.length }} <span>kW</span>
- </div>
- <div class="hu">
- {{ unit35?.count }} <span>座</span>
- </div>
+ <div class="kw">39.73 <span>MW</span></div>
+ <div class="hu">3 <span>户</span></div>
</div>
</div>
<div class="rowbox">
@@ -100,12 +96,8 @@
/>
</div>
<div class="photovoltaic_value1">
- <div class="kw">
- {{ unit10?.length }} <span>kW</span>
- </div>
- <div class="hu">
- {{ unit10?.count }} <span>座</span>
- </div>
+ <div class="kw">43.52 <span>MW</span></div>
+ <div class="hu">5 <span>户</span></div>
</div>
</div>
<div class="rowbox">
@@ -114,19 +106,15 @@
src="@/assets/images/mainPage/icon1_lefti.png"
alt=""
/>
- <div class="r"><span>380V</span>及以下</div>
+ <div class="r"><span>0.4kV</span></div>
<img
src="@/assets/images/mainPage/icon1_righti.png"
alt=""
/>
</div>
<div class="photovoltaic_value1">
- <div class="kw">
- {{ unit380lowarrLength }}<span> kW</span>
- </div>
- <div class="hu">
- {{ unit380lowarrCount }} <span>户</span>
- </div>
+ <div class="kw">66.14 <span>MW</span></div>
+ <div class="hu">393 <span>户</span></div>
</div>
</div>
</div>
@@ -162,8 +150,8 @@
<div class="total_load">
<div class="total_load_key">
<div class="area_kw">
- <span>{{ sumLoadrateds }}</span>
- <div class="r"> kW</div>
+ <span>308.99</span>
+ <div class="r"> MW</div>
</div>
<p>可调负荷</p>
</div>
@@ -178,7 +166,7 @@
</div>
<div class="posimg">
<img
- src="@/assets/images/mainPage/icon2_chongdianzhuang.png"
+ src="@/assets/images/homePage/v2img/l-cdz.png"
alt=""
/>
</div>
@@ -190,8 +178,8 @@
</div>
<div class="danwei centerpos">
<div class="v1">
- <div class="rkw">{{ loadchargingPilecount }}</div>
- <div class="rnumber"> 台</div>
+ <div class="rkw">35235</div>
+ <div class="rnumber"> 个</div>
</div>
</div>
</div>
@@ -201,8 +189,8 @@
</div>
<div class="danwei centerpos">
<div class="v1">
- <div class="rkw">{{ loadchargingPilecount }}</div>
- <div class="rnumber"> 台</div>
+ <div class="rkw">451</div>
+ <div class="rnumber"> 个</div>
</div>
</div>
</div>
@@ -214,10 +202,8 @@
</div>
<div class="danwei centerpos">
<div class="v1">
- <div class="rkw">
- {{ loadAirconditionercount }}
- </div>
- <div class="rnumber"> 台</div>
+ <div class="rkw">1</div>
+ <div class="rnumber"> 个</div>
</div>
</div>
</div>
@@ -227,10 +213,8 @@
</div>
<div class="danwei centerpos">
<div class="v1">
- <div class="rkw">
- {{ loadAirconditionercount }}
- </div>
- <div class="rnumber"> 台</div>
+ <div class="rkw">14336</div>
+ <div class="rnumber"> 个</div>
</div>
</div>
</div>
@@ -272,7 +256,7 @@
<span>网</span>
</div>
<div class="content network_box">
- <div class="tab_newwork">
+ <!-- <div class="tab_newwork">
<div
:class="[
networkFlag === '1' ? 'tab_active' : 'tab_default',
@@ -290,7 +274,7 @@
>
微网信息
</div>
- </div>
+ </div> -->
<div class="content_info" v-if="networkFlag === '1'">
<div>
@@ -298,14 +282,14 @@
<div class="cen">
<div class="namebg">
配网（
- <div class="fs25">线路总数：111条</div>
+ <div class="fs35">线路总数：1006条</div>
）
</div>
</div>
</div>
<div class="name_box">
<img
- src="@/assets/images/mainPage/icon3_feeder.png"
+ src="@/assets/images/homePage/v2img/n-feeder.png"
alt=""
/>
<div class="photovoltaic">
@@ -322,9 +306,7 @@
/>
</div>
<div class="photovoltaic_value1">
- <div class="hu">
- {{ networkFeer10Count }} <span>条</span>
- </div>
+ <div class="hu">70 <span>条</span></div>
</div>
</div>
<div class="rowbox">
@@ -340,9 +322,7 @@
/>
</div>
<div class="photovoltaic_value1">
- <div class="hu">
- {{ networkFeer380Count }} <span>条</span>
- </div>
+ <div class="hu">760 <span>条</span></div>
</div>
</div>
<div class="rowbox">
@@ -358,9 +338,7 @@
/>
</div>
<div class="photovoltaic_value1">
- <div class="hu">
- {{ networkFeer380Count }} <span>条</span>
- </div>
+ <div class="hu">2 <span>条</span></div>
</div>
</div>
</div>
@@ -371,17 +349,49 @@
<div class="cen">
<div class="namebg">
台区（
- <div class="fs25">线路总数：111条</div>
+ <div class="fs35">总数：18231个</div>
）
</div>
</div>
</div>
<div class="name_box">
<img
- src="@/assets/images/mainPage/icon4_xixiao.png"
+ src="@/assets/images/homePage/v2img/n-area.png"
alt=""
/>
<div class="photovoltaic">
+ <div class="rowbox">
+ <div class="photovoltaic_key1">
+ <img
+ src="@/assets/images/mainPage/icon1_lefti.png"
+ alt=""
+ />
+ <div class="r"><span>公变</span></div>
+ <img
+ src="@/assets/images/mainPage/icon1_righti.png"
+ alt=""
+ />
+ </div>
+ <div class="photovoltaic_value1">
+ <div class="hu">8427 <span>条</span></div>
+ </div>
+ </div>
+ <div class="rowbox">
+ <div class="photovoltaic_key1">
+ <img
+ src="@/assets/images/mainPage/icon1_lefti.png"
+ alt=""
+ />
+ <div class="r"><span>专变</span></div>
+ <img
+ src="@/assets/images/mainPage/icon1_righti.png"
+ alt=""
+ />
+ </div>
+ <div class="photovoltaic_value1">
+ <div class="hu">8036 <span>条</span></div>
+ </div>
+ </div>
<div class="rowbox">
<div class="photovoltaic_key1">
<img
@@ -395,9 +405,7 @@
/>
</div>
<div class="photovoltaic_value1">
- <div class="hu">
- {{ networkFeer10Count }} <span>条</span>
- </div>
+ <div class="hu">306 <span>个</span></div>
</div>
</div>
<div class="rowbox">
@@ -413,9 +421,7 @@
/>
</div>
<div class="photovoltaic_value1">
- <div class="hu">
- {{ networkFeer380Count }} <span>条</span>
- </div>
+ <div class="hu">3690 <span>个</span></div>
</div>
</div>
<div class="rowbox">
@@ -431,9 +437,7 @@
/>
</div>
<div class="photovoltaic_value1">
- <div class="hu">
- {{ networkFeer380Count }} <span>条</span>
- </div>
+ <div class="hu">2 <span>个</span></div>
</div>
</div>
</div>
@@ -446,7 +450,7 @@
</div>
<div class="name_box">
<img
- src="@/assets/images/mainPage/icon3_weiwang.png"
+ src="@/assets/images/homePage/v2img/c-user.png"
alt=""
/>
<div class="photovoltaic">
@@ -532,26 +536,26 @@
<div class="title_info margin2">资源概况</div>
<div class="content_info">
<div class="rowlist">
- <img src="@/assets/images/mainPage/icon4_user.png" alt="" />
+ <img src="@/assets/images/homePage/v2img/c-user.png" alt="" />
<div class="rbox">
<div class="key bshadow">
<div class="namebg">西小站</div>
</div>
<div class="colpos">
<div class="v1">
- 负荷功率
+ 储能容量
<div class="r_chu">
- <div class="rkw">{{ storedUserPartAreaRatedS }}</div>
- <div class="rnumber"> kW</div>
- </div>
+ <div class="rkw">100</div>
+ <div class="rnumber"> kW</div>
+ </div>
</div>
<div class="v1">
数量
<div class="r_chu">
- <div class="rkw">{{ storedUserPartAreaCount }}</div>
- <div class="rnumber"> 台</div>
- </div>
+ <div class="rkw">1</div>
+ <div class="rnumber"> 台</div>
+ </div>
</div>
</div>
</div>
@@ -1571,6 +1575,7 @@ const styleVar = computed(() => {
}
}
}
+
.content_left {
width: changeWidth(1146);
position: absolute;
@@ -1586,7 +1591,7 @@ const styleVar = computed(() => {
.sourceContent {
position: relative;
height: changeHeight(807.84);
-
+ border: 1px solid pink;
// 左 箭头收
.showPanel {
position: absolute;
@@ -1608,6 +1613,8 @@ const styleVar = computed(() => {
.source {
position: relative;
height: changeHeight(807.84);
+ height: changeHeight(933);
+
.icon_panel_left_on {
position: absolute;
background: url("@/assets/images/btnType/icon_panel_left.png") no-repeat;
@@ -1623,7 +1630,9 @@ const styleVar = computed(() => {
display: flex;
flex-direction: column;
width: 89%;
+ margin-top: 2%;
margin-left: changeWidth(59);
+
.name {
display: flex;
margin-bottom: changeHeight(20);
@@ -1658,11 +1667,15 @@ const styleVar = computed(() => {
}
.name_box {
display: flex;
-
+ height: changeHeight(300);
// align-items: center;
+
img {
+
+ margin-top: 5%;
width: changeWidth(228.25);
height: changeHeight(201.6);
+
}
.photovoltaic,
.new_energy {
@@ -1732,6 +1745,7 @@ const styleVar = computed(() => {
margin-left: 10%;
width: 80%;
height: changeHeight(263);
+
// background-color: pink;
display: flex;
justify-content: space-between;
@@ -1785,7 +1799,7 @@ const styleVar = computed(() => {
display: flex;
margin-bottom: changeHeight(80);
padding-left: changeWidth(120);
- // border: 1px solid red;
+ //
position: relative;
.title_load {
position: absolute;
@@ -1829,10 +1843,9 @@ const styleVar = computed(() => {
}
.load {
position: relative;
- margin-top: changeHeight(77.75);
-
- height: changeHeight(1014.74);
+ margin-top: changeHeight(57.75);
+ height: changeHeight(933);
.icon_panel_left_on {
position: absolute;
background: url("@/assets/images/btnType/icon_panel_left.png") no-repeat;
@@ -1854,10 +1867,10 @@ const styleVar = computed(() => {
position: absolute;
top: 50%;
- left: 35%;
+ left: 38%;
img {
- width: changeWidth(270.97);
- height: changeHeight(239.38);
+ width: changeWidth(227.77);
+ height: changeHeight(193.42);
}
}
.total_load {
@@ -1995,6 +2008,8 @@ const styleVar = computed(() => {
.network {
position: relative;
height: changeHeight(1010.86);
+ height: changeHeight(933);
+
.icon_panel_left_on {
position: absolute;
background: url("@/assets/images/btnType/icon_panel_right.png")
@@ -2090,8 +2105,8 @@ const styleVar = computed(() => {
}
.name_box {
display: flex;
-
- // align-items: center;
+ // border:1px solid #00c2ff;
+ align-items: center;
img {
width: changeWidth(227.77);
height: changeHeight(193.42);
@@ -2191,8 +2206,9 @@ const styleVar = computed(() => {
}
}
.storage {
- margin-top: changeHeight(77.4);
+ margin-top: changeHeight(57.4);
height: changeWidth(812.06);
+ height: changeHeight(933);
position: relative;
.icon_panel_left_on {
position: absolute;
@@ -2216,17 +2232,21 @@ const styleVar = computed(() => {
margin-left: changeWidth(60);
.rowlist {
width: 100%;
- height: changeHeight(400);
+ height: changeHeight(450);
display: flex;
// border: 1px solid red;
-
+
justify-content: space-between;
align-items: center;
img {
width: changeWidth(227.77);
- // height: changeHeight(130.17);
- margin-top: 8%;
+ height: changeHeight(130.17);
+ width: changeWidth(227.77);
+ height: changeHeight(193.42);
+ ////----
+
+ margin-top: 15%;
}
.rbox {
width: 65%;
@@ -2264,14 +2284,17 @@ const styleVar = computed(() => {
justify-content: space-around;
display: flex;
font-size: changeHeight(35);
+ align-items: center;
font-weight: 600;
// font-size: changeHeight(35);
width: changeHeight(640.16);
height: changeHeight(80.31);
-
- background: url("@/assets/images/homePage/bgdanwei.png") no-repeat;
- background-size: 100% 100%;
- .r_chu{
+ // height: changeHeight(80.31);
+
+ background: url("@/assets/images/homePage/bgdanwei.png")
+ no-repeat;
+ background-size: 100% 110%;
+ .r_chu {
display: flex;
}
.rnumber {
@@ -2385,7 +2408,7 @@ const styleVar = computed(() => {
// 运行检测
.runLisenPage_box {
- // border: 1px solid red;
+ //
// height: 100%;
// width: 100%;
}
@@ -2456,7 +2479,7 @@ const styleVar = computed(() => {
// 字体颜色
.el-select__placeholder {
color: #6ffbf7 !important;
- // border: 1px solid red;
+ //
font-size: changeHeight(35);
}
// 去除边框
@@ -2600,7 +2623,7 @@ const styleVar = computed(() => {
// 分页样式
:deep(.bottom) {
- // border: 1px solid red;
+ //
margin-right: changeHeight(27);
height: 8%;
display: flex;
@@ -2813,5 +2836,8 @@ const styleVar = computed(() => {
background-color: rgba(0, 0, 0, 0.6); /* 黑色透明度20% */
}
+ .content_top {
+ height: changeHeight(933);
+ }
}
</style>