-
-
{title}
+
+
{title}
+
+ {subtitle &&
}
-
- {children}
+
+ {children}
+
+
)
diff --git a/super-screen/client/src/sections/water-prevention/components/right-bottom.js b/super-screen/client/src/sections/water-prevention/components/right-bottom.js
new file mode 100644
index 0000000..904aafd
--- /dev/null
+++ b/super-screen/client/src/sections/water-prevention/components/right-bottom.js
@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react'
+import { Box } from '$components';
+import './style.less';
+
+
+function DataTop5(props) {
+
+
+ return
+
+
+}
+
+export default DataTop5;
+
+
diff --git a/super-screen/client/src/sections/water-prevention/components/right-top.js b/super-screen/client/src/sections/water-prevention/components/right-top.js
new file mode 100644
index 0000000..a9073d7
--- /dev/null
+++ b/super-screen/client/src/sections/water-prevention/components/right-top.js
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react'
+import { Box } from '$components';
+import './style.less';
+
+function CitySafty(props) {
+
+ return
+
+
+
点位名称
+
时间
+
水位
+
未来1小时趋势
+
+
+
+ {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((s, index) => {
+ return
+
+ 点位{index + 1}
+
+
2023-01-02 12:12:12
+
+
+
+ {index % 2 == 0 ? '正常' : '告警'}
+
+
+
+ })}
+
+
+}
+
+export default CitySafty;
+
+
diff --git a/super-screen/client/src/sections/water-prevention/components/style.less b/super-screen/client/src/sections/water-prevention/components/style.less
index b544be6..017147d 100644
--- a/super-screen/client/src/sections/water-prevention/components/style.less
+++ b/super-screen/client/src/sections/water-prevention/components/style.less
@@ -1,373 +1,661 @@
-@card-height: calc(100% - 42px - 13px); //左右卡片内容高度定义 目前卡片为等高
-
-//节点资源
-.node-resource-container {
+.item_left-container {
display: flex;
- height: @card-height;
width: 100%;
+ height: 100%;
+ text-align: center;
+ flex-direction: column;
align-items: center;
+ overflow: auto;
- ._item {
- width: 33%;
+ .alarm_time {
+ width: 98%;
+ height: 225px;
+ background: url('/assets/images/homePage/fire/alarmtime.png') no-repeat;
+ background-size: 100% 100%;
display: flex;
- flex-direction: column;
+ justify-content: center;
align-items: center;
+ font-family: YouSheBiaoTiHei;
+ font-size: 48px;
+ color: #ECF7FF;
+ }
- ._noderesource_data {
- font-family: D-DINExp-Bold;
- font-weight: 600;
- font-size: 24px;
- color: #FFFFFF;
- line-height: 43.2px;
- display: flex;
- align-items: center;
+ .end_event {
+ width: 202px;
+ height: 39px;
+ background-image: linear-gradient(180deg, #711313 0%, #b3000063 52%, #711313 100%);
+ border: 1.5px solid #A20000;
+ box-shadow: inset 0 1px 14px 0 #ff525259;
+ border-radius: 2px;
+ display: flex;
+ justify-self: center;
+ align-items: center;
+ color: #ECF7FF;
+ justify-content: center;
+ font-size: 18px;
+ }
- ._percent {
- opacity: 0.8;
- font-family: PingFangSC-Regular;
- font-weight: 400;
- font-size: 12px;
- color: #C8F0FF;
- text-align: left;
- line-height: 24px;
- }
+ .event_title {
+ color: #fff;
+ font-size: 16px;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ width: 81%;
+ margin-top: 30px;
+ margin-bottom: 10px;
+
+ .event_title_left {
+ width: 70px;
+ height: 2.37px;
+ background-image: linear-gradient(90deg, rgba(0, 102, 255, 0) 0%, #377EE8 97%);
}
- ._noderesource_title {
- font-family: YouSheBiaoTiHei;
- font-size: 20px;
- color: #D8F0FF;
- letter-spacing: 1.54px;
- text-align: center;
- text-shadow: 0 0 10px rgba(0, 145, 255, 0.5);
- margin-bottom: 17px;
+ .event_title_right {
+ width: 70px;
+ height: 2.37px;
+ transform: scaleX(-1);
+ background-image: linear-gradient(90deg, rgba(0, 102, 255, 0) 0%, #377EE8 97%);
+ }
+ }
+
+ .left_second_bg {
+ width: 95%;
+ height: 160px;
+ background: url('/assets/images/homePage/fire/secondbg.png') no-repeat;
+ background-size: 100% 100%;
+
+ }
+
+ .left_third_bg {
+ width: 95%;
+ height: 80px;
+ background: url('/assets/images/homePage/fire/bg3.png') no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ margin-bottom: 20px;
+
+ .left_item_left1 {
+ width: 50px;
+ height: 50px;
+ background: url('/assets/images/homePage/fire/lefticon1.png') no-repeat;
+ background-size: 100% 100%;
}
- .disk_icon {
- width: 68.73px;
- height: 62.77px;
- background: url('/assets/images/homePage/bigscreen/disk.png');
- background-repeat: no-repeat;
+ .left_item_left2 {
+ width: 50px;
+ height: 50px;
+ background: url('/assets/images/homePage/fire/lefticon2.png') no-repeat;
background-size: 100% 100%;
}
- .cpu_icon {
- width: 68.73px;
- height: 62.77px;
- background: url('/assets/images/homePage/bigscreen/cpu.png');
- background-repeat: no-repeat;
+ .left_item_left3 {
+ width: 50px;
+ height: 50px;
+ background: url('/assets/images/homePage/fire/lefticon3.png') no-repeat;
background-size: 100% 100%;
}
- .memory_icon {
- width: 68.73px;
- height: 62.77px;
- background: url('/assets/images/homePage/bigscreen/memory.png');
- background-repeat: no-repeat;
+ .left_item_left4 {
+ width: 50px;
+ height: 50px;
+ background: url('/assets/images/homePage/fire/lefticon4.png') no-repeat;
background-size: 100% 100%;
}
+
+ .left_item_right1 {
+ width: calc(100% - 70px);
+ color: rgba(236, 247, 255, 1);
+ }
}
+
}
-//接入数据统计
-.access_data {
+.fire_item_right_container {
display: flex;
- height: @card-height;
width: 100%;
- justify-content: center;
+ height: 100%;
+ text-align: center;
+ flex-direction: column;
+ align-items: center;
+ overflow: auto;
+ padding-top: 24px;
+
+ .fire_right_item {
+ padding-top: 16px;
+ padding-bottom: 16px;
+ width: 95%;
+ height: 183px;
+ background: url('/assets/images/homePage/fire/rightbgbig.png') no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #ECF7FF;
+ position: relative;
+ margin-bottom: 20px;
+
+ .item_left {
+ width: 50px;
+ height: 50px;
+ background: url('/assets/images/homePage/fire/iconhome.png') no-repeat;
+ background-size: 100% 100%;
+ }
- font-family: PingFangSC-Regular;
- font-weight: 400;
- font-size: 14px;
- color: #FFFFFF;
+ .item_right {
+ width: calc(100% - 100px);
+ display: flex;
+ flex-wrap: wrap;
- ._img {
- width: 230px;
- height: 95%;
- background: url('/assets/images/homePage/bigscreen/accessdata.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .data_unit {
- position: absolute;
- top: 27%;
- right: 21%;
+ .item_right_left {
+ width: 100px;
+ font-size: 14px;
+ color: #ECF7FF;
+ font-family: '';
+ }
- .data_number {
- line-height: 25px;
- font-family: D-DINExp-Bold;
- font-weight: 700;
- font-size: 20px;
- color: #3E86FF;
- letter-spacing: 0;
- }
- }
+ .item_right_right {
+ width: 180px;
+ font-size: 14px;
+ color: #9CF2FF;
+ letter-spacing: 0;
+ font-family: '';
+ text-align: left;
+ }
- .data_today {
- position: absolute;
- bottom: 13%;
- right: 79%;
- text-align: right;
- .data_number {
- line-height: 25px;
- font-family: D-DINExp-Bold;
- font-weight: 700;
- font-size: 20px;
- color: #00F6E4;
- letter-spacing: 0;
}
- }
- .data_total {
- position: absolute;
- bottom: 13%;
- left: 79%;
+ .position_bg {
+ position: absolute;
+ left: 0%;
+ bottom: 0%;
+ width: 85px;
+ height: 30px;
+ background: rgba(31, 237, 255, 0.1);
+ background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 80%, rgba(0, 255, 244, 0.98) 100%);
+ border-radius: 0 20px 0 0;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
- .data_number {
- line-height: 25px;
- font-family: D-DINExp-Bold;
- font-weight: 700;
- font-size: 20px;
- color: #FFDC4E;
- letter-spacing: 0;
+ .position_icon {
+ width: 12px;
+ height: 12px;
+ background: url('/assets/images/homePage/fire/position.png') no-repeat;
+ background-size: 100% 100%;
+ }
}
}
}
-.data_top5_unit {
- position: absolute;
- right: 4%;
- top: 18%;
- font-family: PingFangSC-Regular;
- font-weight: 400;
- font-size: 12px;
- color: #C8F0FF;
+
+.fire_item_right_container::-webkit-scrollbar {
+ width: 0 !important
}
-.hotspot_data_container {
- display: flex;
- height: @card-height;
+.item_left-container::-webkit-scrollbar {
+ width: 0 !important
+}
+
+
+//警情数据分析
+.alarm_data_analysis {
width: 100%;
- justify-content: center;
+ height: 100%;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
- font-family: PingFangSC-Regular;
- font-weight: 400;
- font-size: 14px;
- color: #FFFFFF;
+ ._item_left {
+ width: 209px;
+ height: 100%;
- ._img {
- width: 203px;
- height: 80%;
- background: url('/assets/images/homePage/bigscreen/hotspotdatabg.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
+ ._img {
+ width: 209px;
+ height: 209px;
+ background: url('/assets/images/homepage/fire/realalarmbg.png') no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: D-DINExp-Italic;
+ font-weight: Italic;
+ font-size: 48px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ }
- .hotspot_title {
- padding: 2px;
- padding-left: 6px;
- padding-right: 6px;
- background: rgba(77, 241, 227, 0.08);
- border: 1px solid rgba(77, 241, 227, 0.1);
- box-shadow: inset 0 0 20px 0 rgba(28, 185, 196, 0.23);
+ ._text {
+ font-family: YouSheBiaoTiHei;
+ font-size: 20px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ margin-top: -30px;
+ text-align: center;
+ }
}
+ ._item_right {
+ width: 200px;
- .hotspot_data_number {
- font-family: D-DINExp-Bold;
- font-weight: 700;
- font-size: 18px;
- color: #FFFFFF;
- }
+ ._iconphone {
+ width: 50.96px;
+ height: 45px;
+ background: url('/assets/images/homepage/fire/iconphone.png') no-repeat;
+ background-size: 100% 100%;
+ }
- ._top1 {
- position: absolute;
- top: 25%;
- right: 63%;
- text-align: right;
- }
+ ._iconreal {
+ width: 50.96px;
+ height: 45px;
+ background: url('/assets/images/homepage/fire/iconreal.png') no-repeat;
+ background-size: 100% 100%;
+ }
- ._top2 {
- position: absolute;
- bottom: 22%;
- right: 67%;
- text-align: center;
- }
+ ._iconmistake {
+ width: 50.96px;
+ height: 45px;
+ background: url('/assets/images/homepage/fire/iconmistake.png') no-repeat;
+ background-size: 100% 100%;
+ }
- ._top3 {
- position: absolute;
- bottom: 34%;
- left: 73%;
- }
-}
+ .right_item_right {
+ width: 155px;
+ margin-left: 16px;
-//数据共享
-.data_share {
- display: flex;
- height: @card-height;
+ .alarm_title {
+ font-size: 14px;
+ color: #ECF7FF;
+ letter-spacing: 0;
+ }
- ._left_content {
- width: 50%;
- height: 90%;
- padding-left: 30px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
+ .alarm_number {
+ font-family: D-DINExp-Italic;
+ font-weight: Italic;
+ font-size: 28px;
+ color: #24DCF7;
+ letter-spacing: 0;
+ margin-right: 50px;
+ }
- ._right_content {
- ._today_text {
- font-family: YouSheBiaoTiHei;
- font-size: 24px;
- color: #FFFFFF;
- letter-spacing: 0.5px;
- position: absolute;
- right: 6%;
- top: 21%;
+ .alarm_unit {
+ font-size: 14px;
+ color: #5999C8;
+ letter-spacing: 0;
+ }
}
- padding-top: 23px;
+
+ }
+}
+
+//实时数据
+.realtime_data {
+ height: 100%;
+ padding: 12px 30px 12px 30px;
+
+ .realtime_item {
display: flex;
- flex-direction: column;
- width: 47%;
- height: 95%;
- background: url(/assets/images/homePage/bigscreen/todaybg.png);
- background-repeat: no-repeat;
+ background: url('/assets/images/homePage/fire/realtimebg.png') no-repeat;
background-size: 100% 100%;
- justify-content: space-evenly;
+ height: 45%;
+ width: 100%;
+ margin-bottom: 5%;
align-items: center;
+ // padding: 16px 22px 16px 22px;
+
+ ._icon1 {
+ width: 80px;
+ height: 80px;
+ background: url('/assets/images/homePage/fire/icon1.png') no-repeat;
+ background-size: 100% 100%;
+ }
+
+ ._icon2 {
+ width: 80px;
+ height: 80px;
+ background: url('/assets/images/homePage/fire/icon2.png') no-repeat;
+ background-size: 100% 100%;
+ }
+ ._text {
+ width: calc(100% - 100px);
+ display: flex;
+ flex-direction: column;
+
+ ._row1 {
+ color: #C3E6FF;
+ width: 100%;
+ height: 22px;
+ background: rgba(0, 88, 204, 0.5);
+ justify-content: space-around;
+ display: flex;
+
+ }
+
+ ._row2 {
+ font-size: 14px;
+ color: #00FF87;
+ justify-content: space-around;
+ display: flex;
+ height: 42px;
+
+ ._number {
+ font-family: D-DIN-Italic;
+ font-weight: Italic;
+ font-size: 28px;
+ color: #ECF7FF;
+ margin-right: 6px;
+ }
+ }
+ }
}
+}
- ._item_content {
- display: flex;
+.realtime_data::-webkit-scrollbar {
+ width: 0 !important
+}
+.water_video_container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+
+ ._item {
+ width: 46%;
+ height: 32%;
+ background: url('/assets/images/homePage/fire/videobg.png') no-repeat;
+ background-size: 100% 100%;
+ position: relative;
+
+ .video_bottom {
+ position: absolute;
+ bottom: 9%;
+ left: 4%;
+ width: 91%;
+ height: 20px;
+ background: rgba(0, 0, 0, 0.4);
+ font-size: 12px;
+ color: #C3E6FF;
+ display: flex;
+ justify-content: space-between;
- ._item_icon1 {
- width: 52px;
- height: 52px;
- background: url('/assets/images/homePage/bigscreen/1.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
}
+ }
+}
+
+.today_real_alarm {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
- ._item_icon2 {
- width: 52px;
- height: 52px;
- background: url('/assets/images/homePage/bigscreen/2.png');
- background-repeat: no-repeat;
+ .today_item {
+ width: 91%;
+ height: 41px;
+ background: url('/assets/images/homePage/fire/alarmbg.png') no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ font-size: 14px;
+ color: #ECF7FF;
+ overflow: auto;
+
+ .column1_alarm1 {
+ width: 83px;
+ height: 24px;
+ background: url('/assets/images/homePage/fire/alarm1.png') no-repeat;
background-size: 100% 100%;
+ padding-left: 27px;
}
- ._item_icon3 {
- width: 52px;
- height: 52px;
- background: url('/assets/images/homePage/bigscreen/3.png');
- background-repeat: no-repeat;
+ .column1_alarm2 {
+ width: 83px;
+ height: 24px;
+ background: url('/assets/images/homePage/fire/alarm2.png') no-repeat;
background-size: 100% 100%;
+ padding-left: 27px;
}
- ._item_text {
- color: #C8F0FF;
- padding-left: 6px;
+ .text_blue {
+ width: 100px;
+ display: flex;
- .number_container {
- ._number {
- font-family: D-DINExp-Bold;
- font-weight: 700;
- font-size: 22px;
- color: #FFFFFF;
- }
+ ._icon1 {
+ width: 8px;
+ height: 8px;
+ background: url('/assets/images/homePage/fire/triangle1.png') no-repeat;
+ background-size: 100% 100%;
+ }
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- width: 112px;
- height: 28px;
- background-image: linear-gradient(227deg, #3196AB 0%, #2091cd00 100%);
+ ._icon2 {
+ width: 8px;
+ height: 8px;
+ background: url('/assets/images/homePage/fire/triangle2.png') no-repeat;
+ background-size: 100% 100%;
}
}
}
}
-//大屏中间上部分
-.center_top_data {
- ._center_card1 {
- width: 353px;
- height: 74px;
- font-family: YouSheBiaoTiHei;
- font-size: 22px;
- color: #FFFFFF;
- letter-spacing: 0.46px;
- text-align: center;
- position: absolute;
- top: -3%;
- left: 32%;
- background: url(/assets/images/homePage/bigscreen/centerdatabg1.png);
+//小区人流量排名
+.water_traffic_ranking {
+ height: 100%;
+ padding: 14px 8px 14px 8px;
+
+ ._rank_title {
+ height: 34.64px;
+ background: url('/assets/images/homePage/communtity/ranktitle.png');
background-repeat: no-repeat;
background-size: 100% 100%;
+ color: #FFFFFF;
+ font-size: 16px;
display: flex;
align-items: center;
- justify-content: center;
+ justify-content: space-around;
+
+ ._rank_item1 {
+ text-align: center;
+ width: 25%;
+ }
+
+ ._rank_item2 {
+ text-align: center;
+ width: 20%;
+ }
+
+ ._rank_item3 {
+ text-align: right;
+ width: 25%;
+ }
+
+ ._rank_item4 {
+ text-align: center;
+ width: 35%;
+ }
}
- ._center_card2 {
- width: 146px;
- height: 35px;
- font-family: YouSheBiaoTiHei;
- font-size: 16px;
- color: #35D0FF;
- letter-spacing: 0.46px;
- text-align: center;
- position: absolute;
- top: 26%;
- left: 42%;
- background: url(/assets/images/homePage/bigscreen/centerdatabg2.png);
+ .rank_content_overflow {
+ height: calc(100% - 35px);
+ overflow: auto;
+ }
+
+ ._rank_content {
+ margin-top: 12px;
+ height: 34.64px;
+ background: url('/assets/images/homePage/communtity/rankcontent.png');
background-repeat: no-repeat;
background-size: 100% 100%;
+ color: #E2F8FF;
+ font-size: 14px;
display: flex;
align-items: center;
- justify-content: center;
+ justify-content: space-around;
+
+ ._rank_item1 {
+ text-align: center;
+ width: 15%;
+ }
+
+ ._rank_item2 {
+ // text-align: center;
+ width: 40%;
+ }
+
+ ._rank_item3 {
+ // text-align: center;
+ width: 20%;
+
+ ._upicon {
+ background: url('/assets/images/homePage/water/up.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ width: 13px;
+ height: 13px;
+ display: inline-block;
+ margin-left: 3px;
+ }
+
+ ._downicon {
+ background: url('/assets/images/homePage/water/down.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ width: 13px;
+ height: 13px;
+ display: inline-block;
+ margin-left: 3px;
+ }
+ }
+
+ ._rank_item4 {
+ // text-align: center;
+ width: 20%;
+ padding-top: 8px;
+
+ .normalbg {
+ background: url('/assets/images/homePage/water/normal.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ width: 70px;
+ height: 21.64px;
+ padding-left: 30px;
+ line-height: 9px;
+ color: #24DCF7;
+ }
+
+ .warningbg {
+ background: url('/assets/images/homePage/water/warning.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ width: 70px;
+ height: 21.64px;
+ color: #FAC46E;
+ padding-left: 30px;
+ line-height: 9px;
+ }
+ }
}
- ._center_card3 {
- width: 146px;
- height: 35px;
- font-family: YouSheBiaoTiHei;
- font-size: 16px;
- color: #35D0FF;
- letter-spacing: 0.46px;
- text-align: center;
- position: absolute;
- top: 52%;
- left: 42%;
- background: url(/assets/images/homePage/bigscreen/centerdatabg2.png);
+ .topbg1 {
+ width: 28px;
+ height: 10px;
+ background: url('/assets/images/homePage/communtity/top1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
- display: flex;
- align-items: center;
- justify-content: center;
+ display: inline-block;
}
- ._center_card4 {
- width: 146px;
- height: 35px;
- font-family: YouSheBiaoTiHei;
- font-size: 16px;
- color: #35D0FF;
- letter-spacing: 0.46px;
- text-align: center;
- position: absolute;
- top: 74%;
- left: 42%;
- background: url(/assets/images/homePage/bigscreen/centerdatabg2.png);
+ .topbg2 {
+ width: 28px;
+ height: 10px;
+ background: url('/assets/images/homePage/communtity/top2.png');
background-repeat: no-repeat;
background-size: 100% 100%;
- display: flex;
- align-items: center;
- justify-content: center;
+ display: inline-block;
+ }
+
+ .topbg3 {
+ width: 28px;
+ height: 10px;
+ background: url('/assets/images/homePage/communtity/top3.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ display: inline-block;
+ }
+
+}
+
+
+//建设数据
+.type-chart-wrapper {
+ width: 220px;
+ height: 220px;
+ background-image: url("/assets/images/ring_chart_bg.png");
+ background-size: 100% 100%;
+}
+
+.type-leagle-wrapper {
+ padding-left: 30px;
+ padding-right: 36px;
+ width: 100%;
+ height: 100px;
+ flex-wrap: wrap;
+ align-content: space-between;
+
+ .type-leagle-item {
+ width: 157px;
+ height: 24px;
+ background-image: linear-gradient(90deg, #19222F 0%, rgba(30, 41, 56, 0) 100%);
+ padding: 0 30px 0 8px;
+ justify-content: space-between;
+
+ .type-leagle-dot {
+ width: 8px;
+ height: 8px;
+ margin-right: 6px;
+ }
+
+ .type-leagle-label {
+ color: rgba(212, 237, 253, 0.6);
+ font-size: 14px;
+ font-weight: 400;
+ letter-spacing: 0;
+ }
+
+ .type-leagle-value {
+ color: rgba(216, 240, 255, 1);
+ font-size: 16px;
+ font-weight: 400;
+ letter-spacing: 0;
+ }
+ }
+}
+
+.gis-search-select {
+ .ant-select-selector {
+ background-color: rgba(36, 220, 247, 0.3) !important;
+ border: rgba(36, 220, 247, 1) 1px solid !important;
+ height: 24px !important;
+ }
+
+ .ant-select-selection-item {
+ color: rgba(36, 220, 247, 1) !important;
+ line-height: 24px !important;
+ }
+
+ .ant-select-arrow {
+ color: inherit;
+ color: rgba(36, 220, 247, 1) !important;
}
}
\ No newline at end of file
diff --git a/super-screen/client/src/sections/water-prevention/containers/data.js b/super-screen/client/src/sections/water-prevention/containers/data.js
new file mode 100644
index 0000000..7e89bc1
--- /dev/null
+++ b/super-screen/client/src/sections/water-prevention/containers/data.js
@@ -0,0 +1,955 @@
+'use strict';
+
+export const data = {
+ "type": "FeatureCollection",
+ "features": [
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.882756, 28.515483
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.876061, 28.534185
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.897176, 28.545646
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.940155, 28.559386
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.874271, 28.412145
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.866911, 28.416826
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.835812, 28.597065
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.853493, 28.596462
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.965947, 28.445532
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.908495, 28.521435
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.861763, 28.530276
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.871634, 28.534348
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.90219, 28.55938
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 116.168147, 28.649128
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 116.16584, 28.648912
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 1
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 116.169467, 28.646074
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.92344, 28.561176
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.870911, 28.536749
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.876233, 28.512466
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.920693, 28.499945
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.958459, 28.511712
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.955369, 28.508393
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.954296, 28.560894
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.943288, 28.560309
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.868006, 28.41507
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.861397, 28.411485
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.840533, 28.595369
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.852592, 28.597178
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.970474, 28.448221
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.9688, 28.447702
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.865064, 28.557025
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.879959, 28.526732
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.881762, 28.562395
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.923647, 28.558626
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.856614, 28.595408
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.9484, 28.504994
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.941405, 28.502354
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.954022, 28.511066
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.953078, 28.520191
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.929474, 28.506013
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 116.070607, 28.798914
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 116.068397, 28.798176
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 116.143577, 28.657257
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 116.136303, 28.654546
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 116.110161, 28.654753
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 116.151446, 28.650158
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.939748, 28.551979
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.949189, 28.572182
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.92344, 28.561176
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.930306, 28.541122
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.949146, 28.559932
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.940155, 28.559386
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.864508, 28.41843
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.840533, 28.595369
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.860016, 28.61029
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.971493, 28.449494
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.881887, 28.559889
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.874334, 28.541946
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.864549, 28.553104
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 3
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.908495, 28.521435
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 4
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.950219, 28.55605
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 4
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.836713, 28.606522
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 4
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.899053, 28.538176
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 4
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.89871, 28.556874
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 4
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.884337, 28.522433
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 4
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.868287, 28.524017
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 4
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.868287, 28.524017
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 5
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.945584, 28.573991
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 5
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.896661, 28.520309
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 5
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.844304, 28.577308
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 5
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.927045, 28.540217
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 5
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.901982, 28.539614
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 5
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.949575, 28.558726
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 5
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.845039, 28.601888
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 5
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.851047, 28.605317
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 5
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.867527, 28.595181
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 5
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.857828, 28.594503
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 2
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 116.072222, 28.799295
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "count": 5
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 115.857007, 28.607604
+ ]
+ }
+ },
+ ]
+}
\ No newline at end of file
diff --git a/super-screen/client/src/sections/water-prevention/containers/gis.js b/super-screen/client/src/sections/water-prevention/containers/gis.js
new file mode 100644
index 0000000..dbd672a
--- /dev/null
+++ b/super-screen/client/src/sections/water-prevention/containers/gis.js
@@ -0,0 +1,530 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { render } from 'react-dom';
+import { data as heatmapData } from './data'
+import './gis.less'
+const MAPDOMID = 'fs-amap-container1';
+let map = null;
+let heatmap = null;
+let loca = null;
+let interval = null;
+const MARKER_IMG_NAME = {
+ markergreen: '回迁房',
+ markerblue: '城中村',
+ markeryellow: '廉租房',
+}
+function Map(props) {
+ const [delay, setDelay] = useState(true)
+ const [tab, setTab] = useState('overview')
+ // 地图初始化
+ const loadMap = () => {
+ // 图片图层 实现瓦片地图中国地图样式 bounds 第一个点为左下角 第二个点为右上角
+ const imageLayer = new AMap.ImageLayer({
+ url: '/assets/images/map1.svg',
+ bounds: new AMap.Bounds(
+ [115.800221, 28.225659],
+ [116.334849, 28.973298],
+ ),
+ zooms: [3, 14],
+ });
+
+ map = new AMap.Map(MAPDOMID, {
+ center: [116.054664, 28.538966],
+ zoomEnable: true,
+ dragEnable: true,
+ viewMode: '3D',
+ pitch: 22.9,
+ labelzIndex: 130,
+ zoom: 10.3,
+ cursor: 'pointer',
+ mapStyle: 'amap://styles/300b147a96946a4f1c1b1b8eb1f92f76',
+ layers: [
+ AMap.createDefaultLayer(),
+ imageLayer,
+ ],
+ });
+
+ map.on('complete', () => {
+ setTimeout(() => {
+ setDelay(false)
+ }, 1500);
+ });
+
+ map.on('click', (e) => {
+ if (!e && !e.lnglat) {
+ return
+ }
+
+ const zoom = map.getZoom();
+ const pitch = map.getPitch();
+ const center = map.getCenter();
+ const Rotation = map.getRotation();
+ console.log('zoom' + zoom)
+ console.log('pitch' + pitch)
+ console.log('center' + center)
+ console.log('Rotation' + Rotation)
+ console.log('e.lnglat' + e.lnglat)
+ })
+
+ loca = new Loca.Container({ map: map })
+ createText()
+
+ };
+
+ const createText = () => {
+ var text = new AMap.Text({
+ text: '南昌县',
+ anchor: 'center', // 设置文本标记锚点
+ draggable: false,
+ // cursor: 'pointer',
+ zooms: [3, 11],
+ style: {
+ 'padding': '.75rem 1.25rem',
+ 'margin-bottom': '1rem',
+ 'border-radius': '.25rem',
+ 'background-color': 'rgba(238,77,90,0.001)',
+ 'width': '8rem',
+ 'border-width': 0,
+ //'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .1)',
+ 'text-align': 'center',
+ 'font-size': '14px',
+ 'color': '#AFEFFF',
+ 'opacity': 1,
+ // 'font-weight': 'bold'
+ },
+ position: [115.934664, 28.538966]
+ });
+ text.setMap(map);
+
+ }
+ const drawBounds = () => {
+ let district = null;
+ let polygons = [];
+ //加载行政区划插件
+ if (!district) {
+ //实例化DistrictSearch
+ let opts = {
+ subdistrict: 0, //获取边界不需要返回下级行政区
+ extensions: 'all', //返回行政区边界坐标组等具体信息
+ level: 'district' //查询行政级别为 市
+ };
+ district = new AMap.DistrictSearch(opts);
+ }
+ //行政区查询
+ district.setLevel('district')
+ district.search('南昌县', function (status, result) {
+ map.remove(polygons)//清除上次结果
+ polygons = [];
+ let bounds = result.districtList[0].boundaries;
+ if (bounds) {
+ for (let i = 0, l = bounds.length; i < l; i++) {
+ //生成行政区划polygon
+ let polygon = new AMap.Polygon({
+ strokeWeight: 1,
+ path: bounds[i],
+ fillOpacity: 0.4,
+ fillColor: '#1F2F4D',
+ strokeColor: '#DE7B35',
+ fillOpacity: 0.35, //填充透明度
+ });
+ polygons.push(polygon);
+ }
+ }
+ map.add(polygons)
+ // map.setFitView(polygons);//视口自适应
+ });
+ }
+
+ // 初始化GIS 组件销毁清空定时器
+ useEffect(() => {
+ loadMap();
+ }, []);
+
+ const renderMarkers = () => {
+ map.clearMap();
+ map.setZoom(10.3)
+ map.setCenter([116.054664, 28.538966])
+ map.setPitch(22.9)
+ map.setRotation(1.7000)
+ if (loca && heatmap) loca.remove(heatmap)
+ if (tab == 'person') {
+
+ var geo = new Loca.GeoJSONSource({
+ data: heatmapData
+ });
+
+ heatmap = new Loca.HeatMapLayer({
+ // loca,
+ zIndex: 10,
+ opacity: 1,
+ visible: true,
+ zooms: [2, 22],
+ });
+
+ heatmap.setSource(geo, {
+ radius: 20,
+ unit: 'px',
+ height: 10,
+ // radius: 10,
+ // unit: 'px',
+ // height: 10,
+ gradient: {
+ 0.1: 'rgba(50,48,118,1)',
+ 0.2: 'rgba(127,60,255,1)',
+ 0.4: 'rgba(166,53,219,1)',
+ 0.6: 'rgba(254,64,95,1)',
+ 0.8: 'rgba(255,98,4,1)',
+ 1: 'rgba(236,220,79,1)',
+ },
+ value: function (index, feature) {
+ return feature.properties.count;
+ },
+ min: 0,
+ max: 10, //4.6
+ heightBezier: [0, .53, .37, .98],
+ });
+ loca.add(heatmap);
+
+ map.on('click', (e) => {
+ const feat = heatmap.queryFeature(e.pixel.toArray());
+ const random = Math.random()
+ if (feat) {
+ let infowindow = new AMap.InfoWindow({
+ isCustom: true, //使用自定义窗体
+ content: `
`,
+ offset: new AMap.Pixel(133, 260)
+ });
+
+ let position = map.getCenter();
+ infowindow.open(map, position);
+ setTimeout(() => {
+ if (document.getElementById(`contentidheatmap${random}`)) {
+ render(
+
{
+ map.clearInfoWindow();
+ }} />
+
+ 小区名称
+ 小区名称
+
+
+ 人口
+ 2344人
+
+
+ 新生儿
+ 23人
+
+
+ 老人
+ 342人
+
+
,
+ document.getElementById(`contentidheatmap${random}`));
+ }
+ }, 50)
+
+ }
+ });
+ } else {
+ //初始层级 zoom14以下显示聚合点
+ const data = [
+ { lng: 116.117906, lat: 28.678096, type: 'home', name: '廉租房1', kind: 'markergreen' },
+ { lng: 116.195238, lat: 28.842114, type: 'home', name: '廉租房2', kind: 'markerblue' },
+ { lng: 116.037227, lat: 28.558811, type: 'home', name: '廉租房3', kind: 'markeryellow' },
+ { lng: 115.925856, lat: 28.558811, type: 'home', name: '廉租房4', kind: 'markergreen' },
+ { lng: 115.989847, lat: 28.484411, type: 'home', name: '廉租房5', kind: 'markergreen' },
+
+ { lng: 116.054664, lat: 28.538966, type: 'device', name: '廉租房1', kind: 'markergreen' },
+ { lng: 116.074711, lat: 28.746745, type: 'device', name: '廉租房2', kind: 'markerblue' },
+ { lng: 116.111632, lat: 28.56532, type: 'device', name: '廉租房3', kind: 'markeryellow' },
+ { lng: 115.978519, lat: 28.56532, type: 'device', name: '廉租房4', kind: 'markergreen' },
+ { lng: 115.95792, lat: 28.417395, type: 'device', name: '廉租房5', kind: 'markergreen' },
+ ]
+
+ //zoom14以上显示详情
+ const databig = [
+ { lng: 115.924246, lat: 28.554835, type: 'device', name: '廉租房1', kind: 'markergreenbig' },
+ { lng: 115.921495, lat: 28.553053, type: 'device', name: '廉租房2', kind: 'markerbluebig' },
+ { lng: 115.919115, lat: 28.557256, type: 'device', name: '廉租房3', kind: 'markeryellowbig' },
+ ]
+ //初始点位显示
+ data.filter(s => s.type == tab).map((x, index) => {
+ var marker = new AMap.Marker({
+ position: new AMap.LngLat(x.lng, x.lat),
+ // 将一张图片的地址设置为 icon
+ icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
+ // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
+ offset: new AMap.Pixel(-13, -30),
+ zooms: [3, 14],
+ });
+ marker.setTitle(x.name);
+ map.add(marker);
+ marker.on('click', () => {
+ map.setZoom(17.4)
+ map.setCenter([115.922069, 28.554867])
+ map.setPitch(47.30)
+ map.setRotation(1.7000)
+ })
+ })
+ //下钻点位显示
+ databig.map((x, index) => {
+ var marker = new AMap.Marker({
+ position: new AMap.LngLat(x.lng, x.lat),
+ // 将一张图片的地址设置为 icon
+ icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
+ // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
+ offset: new AMap.Pixel(-13, -30),
+ zooms: [15, 19],
+ });
+ marker.setTitle(x.name);
+ map.add(marker);
+
+ let infowindow = new AMap.InfoWindow({
+ isCustom: true, //使用自定义窗体
+ content: `
`,
+ offset: new AMap.Pixel(233, 260)
+ });
+
+ marker.on('click', () => {
+ let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
+ infowindow.open(map, position);
+ map.setCenter(position)
+ setTimeout(() => {
+ if (document.getElementById(`contentid${x.name}`)) {
+ render(
+
{
+ map.setCenter([115.922069, 28.554867])
+ map.clearInfoWindow();
+ }} />
+
+ 小区名称
+ {x.name}
+
+
+ 人流量
+ 123次
+ 房龄
+ 9年
+
+
+ 租赁中房屋
+ 165套
+
+
+ 网格员
+ 张三
+
+
+ 手机号码
+ 15765845845
+
+
,
+ document.getElementById(`contentid${x.name}`));
+ }
+ }, 50)
+ })
+ })
+
+ if (tab == 'device') {
+ const data = [
+ { lng: 115.921895, lat: 28.556351, type: 'device', name: '廉租房1', kind: 'devicemarker' },
+ { lng: 115.920839, lat: 28.555323, type: 'device', name: '廉租房2', kind: 'devicemarker' },
+ { lng: 115.918329, lat: 28.55445, type: 'device', name: '廉租房3', kind: 'devicemarker' },
+ { lng: 115.919309, lat: 28.553166, type: 'device', name: '廉租房1', kind: 'devicemarker' },
+ { lng: 115.921585, lat: 28.553925, type: 'device', name: '廉租房2', kind: 'devicemarker' },
+ { lng: 115.92565, lat: 28.556996, type: 'device', name: '廉租房3', kind: 'devicemarker' },
+ { lng: 115.922671, lat: 28.558769, type: 'device', name: '廉租房1', kind: 'devicemarker' },
+ ]
+
+ data.filter(s => s.type == tab).map((x, index) => {
+ var marker = new AMap.Marker({
+ position: new AMap.LngLat(x.lng, x.lat),
+ // 将一张图片的地址设置为 icon
+ icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
+ // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
+ offset: new AMap.Pixel(-13, -30),
+ zooms: [15, 19],
+ });
+ marker.setTitle(x.name);
+ map.add(marker);
+ })
+ }
+ }
+
+ }
+
+ const renderAlarms = () => {
+ if (tab == 'person') {
+ return;
+ }
+
+ const alarms = [
+ { lng: 115.92365, lat: 28.557404, type: 'device', name: '廉租房1', kind: 'markeralarm' },
+ ]
+
+ alarms.map((x, index) => {
+ var marker = new AMap.Marker({
+ position: new AMap.LngLat(x.lng, x.lat),
+ // 将一张图片的地址设置为 icon
+ icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
+ // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
+ offset: new AMap.Pixel(-13, -30),
+ zooms: [15, 19],
+ });
+ marker.setTitle(x.name);
+ map.add(marker);
+
+ let infowindow = new AMap.InfoWindow({
+ isCustom: true, //使用自定义窗体
+ content: `
`,
+ offset: new AMap.Pixel(233, 260)
+ });
+
+ let alarmOk = new AMap.InfoWindow({
+ isCustom: true, //使用自定义窗体
+ // content: `
`,
+ offset: new AMap.Pixel(233, 440)
+ });
+
+ marker.on('click', () => {
+ let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
+ infowindow.open(map, position);
+ map.setCenter(position)
+ setTimeout(() => {
+ if (document.getElementById(`alarmcontentid${x.name}`)) {
+ render(
+
{
+ map.setCenter([115.922069, 28.554867])
+ map.clearInfoWindow();
+ }} />
+
+ 小区名称
+ {x.name}
+
+
+ 人流量
+ 123次
+ 房龄
+ 9年
+
+
+ 租赁中房屋
+ 165套
+
+
+ 网格员
+ 张三
+
+
+ 手机号码
+ 15765845845
+
+
+
人流量较大，确认是否安装消防设施？
+
+
,
+ document.getElementById(`alarmcontentid${x.name}`));
+ }
+ }, 50)
+ })
+ })
+ }
+
+ const renderLeftTop = () => {
+ return tab == 'person' ?
+
+
区域总人数
+
455 万
+
+
新生儿总数
+
45万
+
+
老人总数
+
45万
+
:
+
+
租赁房屋总数
+
4556
+
+
回迁房总数
+
4556
+
+
城中村总数
+
4556
+
+
廉租房
+
4556
+
+
+ }
+
+ const renderRightBottom = () => {
+ return
+ }
+
+ return (
+ <>
+ {/* 延缓加载遮罩 */}
+ {delay &&
+
}
+
+ {/* 地图容器 */}
+
+ {map && renderMarkers()}
+ {map && renderAlarms()}
+
+ {/* 底部按钮 */}
+ {!delay && [
+ { name: '房屋分布', tab: 'overview' },
+ // { name: '人口分布', tab: 'person' },
+ { name: '基础设施', tab: 'emergency' }
+ ].map((s, index) => {
+ return
{
+ setTab(s.tab)
+ props.changeTab(s.tab)
+ }}
+ >
+
+
{s.name}
+
+ })
+ }
+
+ {/* 左上角图例 */}
+ {renderLeftTop()}
+ {renderRightBottom()}
+ {/* 四周遮罩 */}
+
+
+
+
+
+ );
+}
+
+export default connect()(Map);
diff --git a/super-screen/client/src/sections/water-prevention/containers/gis.less b/super-screen/client/src/sections/water-prevention/containers/gis.less
new file mode 100644
index 0000000..2e3de89
--- /dev/null
+++ b/super-screen/client/src/sections/water-prevention/containers/gis.less
@@ -0,0 +1,434 @@
+.gis-left {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ width: 20%;
+ background: linear-gradient(270deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
+}
+
+.gis-right {
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 100%;
+ width: 20%;
+ background: linear-gradient(90deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
+}
+
+.gis-top {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 5%;
+ width: 100%;
+ background: linear-gradient(0deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
+}
+
+.gis-bottom {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ height: 10%;
+ width: 100%;
+ background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
+}
+
+.water-gis-button1 {
+ position: absolute;
+ left: 39%;
+ bottom: -5%;
+ font-family: YouSheBiaoTiHei;
+ font-size: 12px;
+ color: #ECF7FF;
+ letter-spacing: 0;
+ width: 76.95px;
+ text-align: center;
+ cursor: pointer;
+ z-index: 999;
+
+ .button_img {
+ background: url('/assets/images/homePage/communtity/home.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ width: 76.95px;
+ height: 64px;
+ }
+
+ .button_img_select {
+ background: url('/assets/images/homePage/communtity/homeselect.png');
+ }
+
+
+}
+
+
+.water-gis-button2 {
+ position: absolute;
+ left: 57%;
+ bottom: -5%;
+ font-family: YouSheBiaoTiHei;
+ font-size: 12px;
+ color: #ECF7FF;
+ letter-spacing: 0;
+ width: 76.95px;
+ text-align: center;
+ cursor: pointer;
+ z-index: 999;
+
+ .button_img {
+ background: url('/assets/images/homePage/communtity/devicebutton.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ width: 76.95px;
+ height: 64px;
+ }
+
+ .button_img_select {
+ background: url('/assets/images/homePage/communtity/devicebuttonselect.png');
+ }
+
+
+}
+
+.gis-infowindow {
+ width: 302px;
+ height: 420px;
+ background: url('/assets/images/homepage/communtity/infowindowbg.png') no-repeat;
+ background-size: 100% 100%;
+ opacity: 0.8;
+ padding-left: 69px;
+ padding-left: 22px;
+ padding-top: 157px;
+ color: #fff;
+
+ .gis_exit {
+ cursor: pointer;
+ position: absolute;
+ right: 9px;
+ top: 42px;
+ width: 30.75px;
+ height: 23px;
+ background: url('/assets/images/homepage/communtity/exit.png') no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .gis_item {
+ height: 35px;
+ background-image: linear-gradient(180deg, #0555a791 0%, #022a6f91 100%);
+ width: 93%;
+ display: flex;
+ align-items: center;
+ padding-left: 20px;
+
+ .gis_title {
+ font-family: SourceHanSansCN-Regular;
+ font-weight: 400;
+ font-size: 14px;
+ color: #C3E6FF;
+ letter-spacing: 0;
+ margin-right: 12px;
+ }
+
+ .gis_text {
+ font-family: SourceHanSansCN-Regular;
+ font-weight: 400;
+ font-size: 14px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ line-height: 21px;
+ }
+ }
+}
+
+.personinfowindow {
+ width: 302px;
+ height: 420px;
+ background: url('/assets/images/homepage/communtity/personinfowindow.png') no-repeat;
+ background-size: 100% 100%;
+ opacity: 0.8;
+ padding-left: 69px;
+ padding-left: 22px;
+ padding-top: 157px;
+ color: #fff;
+
+ .gis_exit {
+ cursor: pointer;
+ position: absolute;
+ right: 9px;
+ top: 42px;
+ width: 30.75px;
+ height: 23px;
+ background: url('/assets/images/homepage/communtity/exit.png') no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .gis_item {
+ height: 35px;
+ background-image: linear-gradient(180deg, #0555a791 0%, #022a6f91 100%);
+ width: 93%;
+ display: flex;
+ align-items: center;
+ padding-left: 20px;
+
+ .gis_title {
+ font-family: SourceHanSansCN-Regular;
+ font-weight: 400;
+ font-size: 14px;
+ color: #C3E6FF;
+ letter-spacing: 0;
+ margin-right: 12px;
+ }
+
+ .gis_text {
+ font-family: SourceHanSansCN-Regular;
+ font-weight: 400;
+ font-size: 14px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ line-height: 21px;
+ }
+ }
+}
+
+
+.gis-infowindow-alarm {
+ background: url('/assets/images/homepage/communtity/alarminfowindow.png') no-repeat;
+ height: 432px;
+ width: 311px;
+ padding-top: 107px;
+
+ .gis_exit {
+ cursor: pointer;
+ position: absolute;
+ right: 2px;
+ top: 15px;
+ width: 30.75px;
+ height: 23px;
+ background: url('/assets/images/homepage/communtity/exitalarm.png') no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .gis_item {
+ margin-bottom: 10px;
+ height: 35px;
+ background-image: linear-gradient(180deg, #a7050591 0%, #48010191 100%);
+ ;
+
+ }
+
+ .confirm_text {
+ font-family: SourceHanSansCN-Medium;
+ font-weight: 500;
+ font-size: 16px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ line-height: 21px;
+ }
+
+ .alarm_confirm {
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ margin-top: 15px;
+
+ .alarm_cancel {
+ width: 81px;
+ height: 30px;
+ background-image: linear-gradient(180deg, #C50000 1%, #b600006e 52%, #C50000 100%);
+ box-shadow: inset 0 1px 14px 0 #ff2b2b59;
+ border-radius: 4px;
+
+ font-family: SourceHanSansCN-Medium;
+ font-weight: 500;
+ font-size: 14px;
+ color: #FFE8E8;
+ text-align: center;
+ line-height: 30px;
+
+ background: url('/assets/images/homepage/communtity/alarmcancel.png') no-repeat;
+ background-size: 100% 100%;
+ cursor: pointer;
+ }
+
+ .alarm_ok {
+ text-align: center;
+ line-height: 30px;
+ width: 81px;
+ height: 30px;
+ background-image: linear-gradient(180deg, #C50000 1%, #b600006e 52%, #C50000 100%);
+ box-shadow: inset 0 1px 14px 0 #ff2b2b59;
+ border-radius: 4px;
+ font-family: SourceHanSansCN-Medium;
+ font-weight: 500;
+ font-size: 14px;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ }
+
+ .alarm_button {
+ width: 103px;
+ height: 30px;
+ margin-top: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: SourceHanSansCN-Medium;
+ font-weight: 500;
+ font-size: 14px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ background: url('/assets/images/homepage/communtity/alarmbutton.png') no-repeat;
+ background-size: 100% 100%;
+ margin-left: 89px;
+ cursor: pointer;
+
+ .alarm_icon {
+ width: 18px;
+ height: 18px;
+ background: url('/assets/images/homepage/communtity/alarmicon.png') no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+}
+
+
+.home_left {
+ position: absolute;
+ left: 26%;
+ top: 3%;
+ z-index: 999;
+ font-family: YouSheBiaoTiHei;
+ font-size: 16px;
+ color: #FFFFFF;
+ letter-spacing: 1.33px;
+ text-shadow: -2px 0 0 #0C5FA6;
+
+ .hometotalbg {
+ width: 126.45px;
+ height: 26.23px;
+ padding-left: 24px;
+ background: url('/assets/images/homepage/communtity/total.png') no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .home_total_number {
+ font-family: D-DIN-Italic;
+ font-weight: Italic;
+ font-size: 28px;
+ color: #EAF2FF;
+ letter-spacing: 0;
+ margin-left: 40px;
+ }
+
+ .hqtotal {
+ width: 126.45px;
+ height: 26.23px;
+ padding-left: 24px;
+ background: url('/assets/images/homepage/communtity/hqtotal.png') no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .cztotal {
+ width: 126.45px;
+ height: 26.23px;
+ padding-left: 24px;
+ background: url('/assets/images/homepage/communtity/cztotal.png') no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .lztotal {
+ width: 126.45px;
+ height: 26.23px;
+ padding-left: 24px;
+ background: url('/assets/images/homepage/communtity/lztotal.png') no-repeat;
+ background-size: 100% 100%;
+ }
+
+}
+
+.home_right {
+ position: absolute;
+ right: 26%;
+ bottom: 7%;
+ z-index: 999;
+ font-family: YouSheBiaoTiHei;
+ font-size: 14px;
+ background: #021d33ad;
+ // border: 1px solid rgba(2, 29, 51, 0.68);
+ padding: 7px 14px 7px 14px;
+ border: 1px solid;
+ border-image: linear-gradient(133deg, rgba(0, 197, 255, 0.53) 0%, rgba(0, 138, 255, 0.62)) 1;
+
+ ._lz {
+ display: flex;
+ align-items: center;
+
+ ._icon {
+ display: inline-block;
+ width: 15px;
+ height: 15px;
+ background: url('/assets/images/homepage/communtity/lzicon.png') no-repeat;
+ background-size: 100% 100%;
+ margin-right: 4px;
+ }
+
+ span {
+ font-family: YouSheBiaoTiHei;
+ font-size: 14px;
+ letter-spacing: 0;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(250, 196, 110, 1) 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+ }
+
+ ._hq {
+ display: flex;
+ align-items: center;
+ margin-top: 10px;
+
+ ._icon {
+ display: inline-block;
+ width: 15px;
+ height: 15px;
+ background: url('/assets/images/homepage/communtity/hqicon.png') no-repeat;
+ background-size: 100% 100%;
+ margin-right: 4px;
+ }
+
+ span {
+ font-family: YouSheBiaoTiHei;
+ font-size: 14px;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(36, 220, 247, 1) 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ letter-spacing: 0;
+ }
+ }
+
+ ._cz {
+ display: flex;
+ align-items: center;
+ margin-top: 10px;
+
+ ._icon {
+ display: inline-block;
+ width: 15px;
+ height: 15px;
+ background: url('/assets/images/homepage/communtity/czicon.png') no-repeat;
+ background-size: 100% 100%;
+ margin-right: 4px;
+ }
+
+ span {
+ font-family: YouSheBiaoTiHei;
+ font-size: 14px;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(1, 140, 255, 1) 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ letter-spacing: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/super-screen/client/src/sections/water-prevention/containers/homePage.js b/super-screen/client/src/sections/water-prevention/containers/homePage.js
index ef570f6..4c3d26b 100644
--- a/super-screen/client/src/sections/water-prevention/containers/homePage.js
+++ b/super-screen/client/src/sections/water-prevention/containers/homePage.js
@@ -1,60 +1,69 @@
import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
-import AccessData from '../components/accessData'
-import AlarmList from '../components/alarmList'
-import DataShare from '../components/dataShare'
-import DataTop5 from '../components/dataTop5'
-import HotspotData from '../components/hotspotData'
-import NodeResource from '../components/nodeResource'
-import AbnormalMonitoring from '../components/abnormalMonitoring'
-import CenterTop from '../components/centerTop'
+import LeftTop from '../components/left-top'
+import LeftBottom from '../components/left-bottom'
+import RightTop from '../components/right-top'
+import RightBottom from '../components/right-bottom'
+
+import EmergencyLeftTop from '../components/emergency-left-top'
+import EmergencyLeftBottom from '../components/emergency-left-bottom'
+import EmergencyRightTop from '../components/emergency-right-top'
+import EmergencyRightBottom from '../components/emergency-right-bottom'
+
+import Gis from './gis';
import './style.less'
function homePage(props) {
const { dispatch } = props;
- const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
+ const childStyle = { height: '49%', color: '#fff', marginBottom: 17 }
const cardHeight = document.body.clientHeight * 0.896 * 0.32
const cardContentHeight = cardHeight - 42 - 13
- return
-
-
{ dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >
进入后台
-
-
-
-
-
-
-
-
-
+ const [tab, setTab] = useState('overview');// overview emergency
+ const SCREEN_COMPONENTS = {
+ overview: { leftTop: LeftTop, leftBottom: LeftBottom, rightTop: RightTop, rightBottom: RightBottom },
+ emergency: { leftTop: EmergencyLeftTop, leftBottom: EmergencyLeftBottom, rightTop: EmergencyRightTop, rightBottom: EmergencyRightBottom }
+ }
+ const currentContainer = SCREEN_COMPONENTS[tab];
+ return <>
+
+
+
+ 水务防汛实时监测预警系统
+
{ dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >返回平台
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {
+ setTab(e)
+ }}
+ />
+
+
-
-
+
+
+
+
}
diff --git a/super-screen/client/src/sections/water-prevention/containers/style.less b/super-screen/client/src/sections/water-prevention/containers/style.less
index 129aafd..2cc8380 100644
--- a/super-screen/client/src/sections/water-prevention/containers/style.less
+++ b/super-screen/client/src/sections/water-prevention/containers/style.less
@@ -4,117 +4,40 @@
position: absolute;
top: 0;
left: 0;
- background: url('/assets/images/homePage/enter/bg.png');
+ background: url('/assets/images/homePage/communtity/bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ // display: flex;
+ // flex-direction: column;
+ // justify-content: center;
+ // align-items: center;
padding-top: 5%;
- ._enter_row1 {
- height: 302px;
-
- ._row1_item {
- width: 1434px;
- height: 241px;
- // opacity: 0.8;
- background: url('/assets/images/homePage/enter/row1.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- cursor: pointer;
- }
-
- ._row1_item:hover {
- width: 1434px;
- height: 302.6px;
- background: url('/assets/images/homePage/enter/row1-select.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- cursor: pointer;
- }
- }
-
- ._enter_row2 {
- height: 427px;
- display: flex;
+ .water_title_text {
+ position: absolute;
+ top: 0%;
width: 100%;
- padding-left: 4%;
-
- ._row2_item1 {
- width: 454px;
- height: 371px;
- // opacity: 0.8;
- background: url('/assets/images/homePage/enter/row2-1.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- cursor: pointer;
- margin-left: 60px;
- }
-
- ._row2_item1:hover {
- background: url('/assets/images/homePage/enter/row2-1-select.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- cursor: pointer;
- }
-
- ._row2_item2 {
- margin-left: 60px;
- width: 454px;
- height: 371px;
- // opacity: 0.8;
- background: url('/assets/images/homePage/enter/row2-2.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- cursor: pointer;
- }
-
- ._row2_item2:hover {
- background: url('/assets/images/homePage/enter/row2-2-select.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- cursor: pointer;
- }
-
- ._row2_item3 {
- margin-left: 60px;
- width: 454px;
- height: 371px;
- // opacity: 0.8;
- background: url('/assets/images/homePage/enter/row2-3.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- cursor: pointer;
- }
+ height: 62px;
+ font-family: YouSheBiaoTiHei;
+ font-size: 48px;
+ color: #FFFFFF;
+ letter-spacing: 1px;
+ z-index: 300;
+ display: flex;
+ align-items: center;
+ justify-content: center;
- ._row2_item3:hover {
- background: url('/assets/images/homePage/enter/row2-3-select.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- cursor: pointer;
+ ._title_dot {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ background-image: linear-gradient(180deg, #FFFFFF 0%, #0d71ef00 100%);
+ margin-left: 14px;
+ margin-right: 14px;
+ border-radius: 4px;
}
- }
- ._enter_title {
- position: absolute;
- top: 4%;
- left: 3%;
- width: 575.35px;
- height: 78px;
- background: url('/assets/images/homePage/enter/title.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
-
- ._title {
- width: 100%;
- height: 88px;
- background: url('/assets/images/homePage/bigscreen/top.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
}
._exit {
@@ -124,35 +47,33 @@
cursor: pointer;
color: #C8F0FF;
display: flex;
-
- ._icon {
- display: inline-block;
- width: 28px;
- height: 28px;
- background: url('/assets/images/homePage/bigscreen/exit.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- margin-right: 3px;
- }
+ width: 102px;
+ height: 33px;
+ background: url('/assets/images/homePage/bigscreen/exit.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ padding-left: 35px;
+ align-items: center;
+ z-index: 400;
}
.homepage-left {
width: 21.8%;
- height: 89.6%;
+ height: 84.6%;
position: absolute;
- top: 8.2%;
+ top: 10.1%;
z-index: 300;
}
.homepage-center {
- width: 49.16%;
- height: 89.6%;
+ width: 93.9%;
+ height: 84%;
position: absolute;
- bottom: 2.4%;
- left: 25.5%;
+ top: 10.4%;
+ left: 58px;
padding-left: 16px;
padding-right: 16px;
- z-index: 400;
+ z-index: 200;
._top {
margin-top: 5%;
@@ -165,11 +86,11 @@
}
.homepage-left-left {
- left: 48px;
+ left: 58px;
}
.homepage-left-right {
- right: 48px;
+ right: 58px;
}
}
@@ -321,4 +242,62 @@
margin-right: 11px;
margin-left: 10px;
}
+}
+
+.gis {
+ position: absolute;
+ width: 100vw;
+ height: calc(~"100% - 114px");
+ left: 0;
+ top: 114px;
+ z-index: 0;
+ display: flex;
+ justify-content: center;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+/* flex 基本布局样式 */
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+.flex-content-between {
+ justify-content: space-between;
+}
+
+.flex-content-around {
+ justify-content: space-around;
+}
+
+.flex-content-start {
+ justify-content: flex-start;
+}
+
+.flex-content-end {
+ justify-content: flex-end;
+}
+
+.flex-item-center {
+ align-items: center;
+}
+
+.flex-item-start {
+ align-items: flex-start;
+}
+
+.flex-item-end {
+ align-items: flex-end;
+}
+
+.flex-item-stretch {
+ align-items: stretch;
}
\ No newline at end of file