+
{
+ 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: 'home' },
+ { name: '人口分布', tab: 'person' },
+ { name: '基础设施', tab: 'device' }
+ ].map((s, index) => {
+ return
{ setTab(s.tab) }}
+ >
+
+
{s.name}
+
+ })
+ }
+
+ {/* 左上角图例 */}
+ {renderLeftTop()}
+ {renderRightBottom()}
+ {/* 四周遮罩 */}
+
+
+
+
);
}
diff --git a/super-screen/client/src/sections/community-safty/containers/gis.less b/super-screen/client/src/sections/community-safty/containers/gis.less
new file mode 100644
index 0000000..f9854f4
--- /dev/null
+++ b/super-screen/client/src/sections/community-safty/containers/gis.less
@@ -0,0 +1,408 @@
+.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: 10%;
+ 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%);
+}
+
+.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');
+ }
+
+
+}
+
+.gis-button2 {
+ position: absolute;
+ left: 48%;
+ bottom: -3%;
+ 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/personbutton.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ width: 76.95px;
+ height: 64px;
+ }
+
+ .button_img_select {
+ background: url('/assets/images/homePage/communtity/personbuttonselect.png');
+ }
+}
+
+.gis-button3 {
+ 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;
+ }
+ }
+}
+
+.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/homePage/containers/homePage.js b/super-screen/client/src/sections/homePage/containers/homePage.js
index ec4a71b..bfddad1 100644
--- a/super-screen/client/src/sections/homePage/containers/homePage.js
+++ b/super-screen/client/src/sections/homePage/containers/homePage.js
@@ -8,13 +8,15 @@ function homePage(props) {
const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
const cardHeight = document.body.clientHeight * 0.896 * 0.32
const cardContentHeight = cardHeight - 42 - 13
- return
+ return
-
{ dispatch(push('/waterprevention')) }}>
+
{
+ // dispatch(push('/waterprevention'))
+ }}>
{ dispatch(push('/communitysafty')) }}>
diff --git a/super-screen/client/src/sections/homePage/containers/style.less b/super-screen/client/src/sections/homePage/containers/style.less
index 129aafd..bf3b8bd 100644
--- a/super-screen/client/src/sections/homePage/containers/style.less
+++ b/super-screen/client/src/sections/homePage/containers/style.less
@@ -1,10 +1,10 @@
-.homepage {
+.enter_homepage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
- background: url('/assets/images/homePage/enter/bg.png');
+ background: url('/assets/images/homePage/enter/bg.png') !important;
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;