zhaoqiang
/
v3tianjin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

q

master
“yu” 2024-07-16 20:49:28 +08:00
parent f7f8a51bc4
commit 301e921960
1 changed files with 122 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
src/views/pages/homePage/index.vue
View File

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