diff --git a/super-screen/client/assets/images/homepage/communtity/monitor.png b/super-screen/client/assets/images/homepage/communtity/monitor.png
new file mode 100644
index 0000000..777a567
Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/monitor.png differ
diff --git a/super-screen/client/assets/images/homepage/enter/bg.gif b/super-screen/client/assets/images/homepage/enter/bg.gif
new file mode 100644
index 0000000..c5a5bf0
Binary files /dev/null and b/super-screen/client/assets/images/homepage/enter/bg.gif differ
diff --git a/super-screen/client/assets/images/homepage/enter/bg.png b/super-screen/client/assets/images/homepage/enter/bg.png
deleted file mode 100644
index e31d45b..0000000
Binary files a/super-screen/client/assets/images/homepage/enter/bg.png and /dev/null differ
diff --git a/super-screen/client/assets/images/homepage/fire/add.png b/super-screen/client/assets/images/homepage/fire/add.png
new file mode 100644
index 0000000..fad3be7
Binary files /dev/null and b/super-screen/client/assets/images/homepage/fire/add.png differ
diff --git a/super-screen/client/assets/images/homepage/fire/location_infowindow.png b/super-screen/client/assets/images/homepage/fire/location_infowindow.png
new file mode 100644
index 0000000..9a65e91
Binary files /dev/null and b/super-screen/client/assets/images/homepage/fire/location_infowindow.png differ
diff --git a/super-screen/client/assets/images/homepage/fire/reportbg.png b/super-screen/client/assets/images/homepage/fire/reportbg.png
new file mode 100644
index 0000000..7b91309
Binary files /dev/null and b/super-screen/client/assets/images/homepage/fire/reportbg.png differ
diff --git a/super-screen/client/assets/images/homepage/water/_monitor.png b/super-screen/client/assets/images/homepage/water/_monitor.png
new file mode 100644
index 0000000..038118c
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/_monitor.png differ
diff --git a/super-screen/client/assets/images/homepage/water/back.png b/super-screen/client/assets/images/homepage/water/back.png
new file mode 100644
index 0000000..4a0faae
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/back.png differ
diff --git a/super-screen/client/assets/images/homepage/water/bncs.png b/super-screen/client/assets/images/homepage/water/bncs.png
new file mode 100644
index 0000000..8a30e50
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/bncs.png differ
diff --git a/super-screen/client/assets/images/homepage/water/bncsselect.png b/super-screen/client/assets/images/homepage/water/bncsselect.png
new file mode 100644
index 0000000..b389d55
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/bncsselect.png differ
diff --git a/super-screen/client/assets/images/homepage/water/devicebutton.png b/super-screen/client/assets/images/homepage/water/devicebutton.png
new file mode 100644
index 0000000..33f50cf
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/devicebutton.png differ
diff --git a/super-screen/client/assets/images/homepage/water/devicebuttonselect.png b/super-screen/client/assets/images/homepage/water/devicebuttonselect.png
new file mode 100644
index 0000000..a2eacbb
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/devicebuttonselect.png differ
diff --git a/super-screen/client/assets/images/homepage/water/docbg.png b/super-screen/client/assets/images/homepage/water/docbg.png
new file mode 100644
index 0000000..1143c54
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/docbg.png differ
diff --git a/super-screen/client/assets/images/homepage/water/dotbg.png b/super-screen/client/assets/images/homepage/water/dotbg.png
new file mode 100644
index 0000000..2298d8b
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/dotbg.png differ
diff --git a/super-screen/client/assets/images/homepage/water/high_risk.png b/super-screen/client/assets/images/homepage/water/high_risk.png
new file mode 100644
index 0000000..3c1321d
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/high_risk.png differ
diff --git a/super-screen/client/assets/images/homepage/water/home.png b/super-screen/client/assets/images/homepage/water/home.png
new file mode 100644
index 0000000..b25d171
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/home.png differ
diff --git a/super-screen/client/assets/images/homepage/water/homeselect.png b/super-screen/client/assets/images/homepage/water/homeselect.png
new file mode 100644
index 0000000..e5e2fde
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/homeselect.png differ
diff --git a/super-screen/client/assets/images/homepage/water/left.png b/super-screen/client/assets/images/homepage/water/left.png
new file mode 100644
index 0000000..821f0de
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/left.png differ
diff --git a/super-screen/client/assets/images/homepage/water/low_risk.png b/super-screen/client/assets/images/homepage/water/low_risk.png
new file mode 100644
index 0000000..ed0b83f
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/low_risk.png differ
diff --git a/super-screen/client/assets/images/homepage/water/middle_risk.png b/super-screen/client/assets/images/homepage/water/middle_risk.png
new file mode 100644
index 0000000..fe8fb1a
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/middle_risk.png differ
diff --git a/super-screen/client/assets/images/homepage/water/off.png b/super-screen/client/assets/images/homepage/water/off.png
new file mode 100644
index 0000000..3c55d1b
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/off.png differ
diff --git a/super-screen/client/assets/images/homepage/water/on.png b/super-screen/client/assets/images/homepage/water/on.png
new file mode 100644
index 0000000..3eaa80e
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/on.png differ
diff --git a/super-screen/client/assets/images/homepage/water/realrightbg.png b/super-screen/client/assets/images/homepage/water/realrightbg.png
new file mode 100644
index 0000000..6647744
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/realrightbg.png differ
diff --git a/super-screen/client/assets/images/homepage/water/realtitle.png b/super-screen/client/assets/images/homepage/water/realtitle.png
new file mode 100644
index 0000000..a5740d3
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/realtitle.png differ
diff --git a/super-screen/client/assets/images/homepage/water/right.png b/super-screen/client/assets/images/homepage/water/right.png
new file mode 100644
index 0000000..84e6f47
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/right.png differ
diff --git a/super-screen/client/assets/images/homepage/water/waterinfowindow.png b/super-screen/client/assets/images/homepage/water/waterinfowindow.png
new file mode 100644
index 0000000..fcdb41d
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/waterinfowindow.png differ
diff --git a/super-screen/client/assets/images/homepage/water/waterwarningbg.png b/super-screen/client/assets/images/homepage/water/waterwarningbg.png
new file mode 100644
index 0000000..ee6055e
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/waterwarningbg.png differ
diff --git a/super-screen/client/assets/images/homepage/water/weather.png b/super-screen/client/assets/images/homepage/water/weather.png
new file mode 100644
index 0000000..6e65e7a
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/weather.png differ
diff --git a/super-screen/client/assets/images/homepage/water/yjdw.png b/super-screen/client/assets/images/homepage/water/yjdw.png
new file mode 100644
index 0000000..fba3f47
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/yjdw.png differ
diff --git a/super-screen/client/assets/images/homepage/water/yjdwselect.png b/super-screen/client/assets/images/homepage/water/yjdwselect.png
new file mode 100644
index 0000000..83ea79b
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/yjdwselect.png differ
diff --git a/super-screen/client/assets/images/homepage/water/yjjg.png b/super-screen/client/assets/images/homepage/water/yjjg.png
new file mode 100644
index 0000000..9939c6e
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/yjjg.png differ
diff --git a/super-screen/client/assets/images/homepage/water/yjjgselect.png b/super-screen/client/assets/images/homepage/water/yjjgselect.png
new file mode 100644
index 0000000..8fc7ff0
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/yjjgselect.png differ
diff --git a/super-screen/client/assets/images/homepage/water/yjzj.png b/super-screen/client/assets/images/homepage/water/yjzj.png
new file mode 100644
index 0000000..e635b54
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/yjzj.png differ
diff --git a/super-screen/client/assets/images/homepage/water/yjzjselect.png b/super-screen/client/assets/images/homepage/water/yjzjselect.png
new file mode 100644
index 0000000..8c3610a
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/yjzjselect.png differ
diff --git a/super-screen/client/assets/images/homepage/water/yljg.png b/super-screen/client/assets/images/homepage/water/yljg.png
new file mode 100644
index 0000000..32b1f79
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/yljg.png differ
diff --git a/super-screen/client/assets/images/homepage/water/yljgselect.png b/super-screen/client/assets/images/homepage/water/yljgselect.png
new file mode 100644
index 0000000..425f4c4
Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/yljgselect.png differ
diff --git a/super-screen/client/src/components/public/index.less b/super-screen/client/src/components/public/index.less
index dbc079e..b998586 100644
--- a/super-screen/client/src/components/public/index.less
+++ b/super-screen/client/src/components/public/index.less
@@ -93,6 +93,7 @@
 		border: 1px solid #12B2E5;
 		background-color: rgba(91, 193, 255, 0.2);
 		margin-right: 3px;
+		cursor: pointer;
 	}
 
 	._item {
@@ -104,5 +105,21 @@
 		border: 1px solid #0B6AEA;
 		background-color: rgba(35, 108, 254, 0.3);
 		margin-right: 3px;
+		cursor: pointer;
 	}
+}
+
+.children-container {
+	height: calc(100% - 42px);
+	background-image: linear-gradient(180deg, #04377ecc 1%, #001241 100%);
+}
+
+.box_header_bg {
+	background: url(/assets/images/homePage/bigscreen/headertitlebg.png) no-repeat;
+	background-size: 100% 100%;
+	height: 42px;
+	padding-top: 4px;
+	word-break: keep-all;
+	white-space: nowrap;
+	width: 100%;
 }
\ No newline at end of file
diff --git a/super-screen/client/src/components/public/table-card.js b/super-screen/client/src/components/public/table-card.js
index d538efd..4a19012 100644
--- a/super-screen/client/src/components/public/table-card.js
+++ b/super-screen/client/src/components/public/table-card.js
@@ -1,45 +1,43 @@
 'use strict'
 
-import React from 'react'
+import React, { useState } from 'react'
 import './index.less'
-class Box extends React.Component {
-    render() {
-        const { title, height = '100%', children, margin, overflow, subtitle, subtitleSelect } = this.props
+function Box(props) {
+    const [range, setRange] = useState('week');
+    const { title, height = '100%', children, margin, overflow, subtitle, subtitleSelect } = props
 
-        const headerbg = {
-            background: 'url(/assets/images/homePage/bigscreen/headertitlebg.png) no-repeat',
-            backgroundSize: '100% 100%',
-        }
-        return (
-            <div style={{ height, width: '100%', margin: margin || "0px 0px 28px" }}>
-                <div style={{
-                    height: height, listStyle: 'none', overflow: overflow || 'hidden',
+    return (
+        <div style={{ height, width: '100%', margin: margin || "0px 0px 28px" }}>
+            <div style={{
+                height: height, listStyle: 'none', overflow: overflow || 'hidden',
 
-                }}>
-                    <div style={{ height: 42, paddingTop: '4px', wordBreak: 'keep-all', whiteSpace: 'nowrap', width: '100%', ...headerbg, }}>
-                        <span className='card-title'>{title}</span>
+            }}>
+                <div className='box_header_bg'  >
+                    <span className='card-title'>{title}</span>
 
-                        {subtitle && <div className='subtitle_'>
-                            <div className='_item_select'>本周</div>
-                            <div className='_item'>本月</div>
-                            <div className='_item'>本年</div>
-                        </div>}
-
-                        {subtitleSelect && <div className='subtitle_' style={{ textAlign: 'right' }}>
-                            {subtitleSelect}
-                        </div>}
-                    </div>
-                    <div style={{
-                        height: 'calc(100% - 42px)',
-                        backgroundImage: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)',
-                    }}>
-                        {children}
-                    </div>
+                    {subtitle && <div className='subtitle_'>
+                        {[
+                            { key: 'week', name: '本周' },
+                            { key: 'month', name: '本月' },
+                            { key: 'year', name: '本年' }
+                        ].map(s => {
+                            return <div
+                                onClick={() => { setRange(s.key) }}
+                                className={range == s.key ? '_item_select' : '_item'}>{s.name}</div>
+                        })}
+                    </div>}
 
+                    {subtitleSelect && <div className='subtitle_' style={{ textAlign: 'right' }}>
+                        {subtitleSelect}
+                    </div>}
+                </div>
+                <div className='children-container'>
+                    {children}
                 </div>
             </div>
-        )
-    }
+        </div>
+    )
 }
+
 export default Box
 
diff --git a/super-screen/client/src/sections/community-safty/containers/gis.js b/super-screen/client/src/sections/community-safty/containers/gis.js
index 955a333..f7e766c 100644
--- a/super-screen/client/src/sections/community-safty/containers/gis.js
+++ b/super-screen/client/src/sections/community-safty/containers/gis.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { render } from 'react-dom';
 import { data as heatmapData } from './data'
 import './gis.less'
+
 const MAPDOMID = 'fs-amap-container';
 let map = null;
 let heatmap = null;
@@ -141,7 +142,7 @@ function Map(props) {
                                 <div className='gis_exit' onClick={() => {
                                     map.clearInfoWindow();
                                 }} />
-                                <div className='gis_item'>
+                                <div className='gis_item' style={{ marginTop: 20 }}>
                                     <span className='gis_title'>小区名称</span>
                                     <span className='gis_text'>小区名称</span>
                                 </div>
@@ -404,20 +405,39 @@ function Map(props) {
     }
 
     const renderRightBottom = () => {
-        return <div className='home_right'>
-            <div className='_lz'>
-                <div className='_icon' />
-                <span>廉租房</span>
-            </div>
-            <div className='_hq'>
-                <div className='_icon' />
-                <span>回迁房</span>
-            </div>
-            <div className='_cz'>
-                <div className='_icon' />
-                <span>城中村</span>
+        return tab == 'person' ?
+            <div className='person_home_right'>
+                <div className='_right_row1'>
+                    <div className='_monitor' /><span className='monitor_text'>特殊人群</span></div>
+
+                <div className='flex-row flex-content-around flex-item-center' style={{ marginTop: 6, marginBottom: 6 }}>
+                    <span className='_title_1'>新生儿热力图</span>
+                    <span className='_title_2'>单位：人/平方公里</span>
+                </div>
+
+                <div className='legend_color'></div>
+                <div className='flex-row flex-content-around' style={{ color: 'rgba(147, 171, 192, 1)', marginTop: 6 }}>
+                    <span>0</span>
+                    <span>10</span>
+                    <span>20</span>
+                    <span>30</span>
+                    <span>40</span>
+                </div>
+            </div> :
+            <div className='home_right'>
+                <div className='_lz'>
+                    <div className='_icon' />
+                    <span>廉租房</span>
+                </div>
+                <div className='_hq'>
+                    <div className='_icon' />
+                    <span>回迁房</span>
+                </div>
+                <div className='_cz'>
+                    <div className='_icon' />
+                    <span>城中村</span>
+                </div>
             </div>
-        </div>
     }
 
     return (
diff --git a/super-screen/client/src/sections/community-safty/containers/gis.less b/super-screen/client/src/sections/community-safty/containers/gis.less
index e0d7ee0..f817e6f 100644
--- a/super-screen/client/src/sections/community-safty/containers/gis.less
+++ b/super-screen/client/src/sections/community-safty/containers/gis.less
@@ -456,4 +456,64 @@
             letter-spacing: 0;
         }
     }
+}
+
+.person_home_right {
+    position: absolute;
+    right: 26%;
+    bottom: 7%;
+    z-index: 999;
+    width: 224px;
+    height: 96px;
+    background-image: linear-gradient(270deg, rgba(4, 55, 126, 0.65) 0%, rgba(0, 18, 65, 0.69) 50%, rgba(0, 18, 65, 0.65) 96%);
+    padding-left: 5px;
+
+    ._right_row1 {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        padding-right: 22px;
+        justify-content: flex-end;
+
+        .monitor_text {
+            background: linear-gradient(180deg, #FFFFFF, rgba(17, 124, 213, 1));
+            background-clip: border-box;
+            -webkit-background-clip: text;
+            color: transparent;
+            font-family: YouSheBiaoTiHei;
+            font-size: 16px;
+            letter-spacing: 0;
+        }
+
+        ._monitor {
+            width: 7.39px;
+            height: 6px;
+            background: url('/assets/images/homepage/communtity/monitor.png') no-repeat;
+            background-size: 100% 100%;
+            margin-right: 13px;
+        }
+    }
+
+    .legend_color {
+        width: 210.77px;
+        height: 3px;
+        background-image: linear-gradient(90deg, #A1FF00 1%, #FFF800 23%, #EF8C00 74%, #FF0000 100%);
+    }
+
+    ._title_1 {
+        background: linear-gradient(180deg, #FFFFFF, rgba(17, 124, 213, 1));
+        background-clip: border-box;
+        -webkit-background-clip: text;
+        color: transparent;
+        font-family: YouSheBiaoTiHei;
+        font-size: 16px;
+    }
+
+    ._title_2 {
+        font-family: SourceHanSansCN-Medium;
+        font-weight: 500;
+        font-size: 12px;
+        color: #93ABC0;
+    }
+
 }
\ No newline at end of file
diff --git a/super-screen/client/src/sections/community-safty/containers/homePage.js b/super-screen/client/src/sections/community-safty/containers/homePage.js
index 9a28aaa..cdb10cb 100644
--- a/super-screen/client/src/sections/community-safty/containers/homePage.js
+++ b/super-screen/client/src/sections/community-safty/containers/homePage.js
@@ -8,6 +8,7 @@ import RightTop from '../components/city-safty'
 import RightMiddle from '../components/special-person'
 import RightBottom from '../components/traffic-ranking'
 import Gis from './gis';
+import Weather from '../../water-prevention/components/weather';
 import './style.less'
 
 function homePage(props) {
@@ -23,7 +24,8 @@ function homePage(props) {
                     <div className='_title_dot'></div>
                     <span>流动人口</span>
                 </div>
-                <div onClick={() => { dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >返回平台</div>
+                <Weather />
+                <div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
             </div>
             <div className='homepage-left homepage-left-left'>
                 <div className="list">
diff --git a/super-screen/client/src/sections/community-safty/containers/style.less b/super-screen/client/src/sections/community-safty/containers/style.less
index 9b1cbaf..3befb10 100644
--- a/super-screen/client/src/sections/community-safty/containers/style.less
+++ b/super-screen/client/src/sections/community-safty/containers/style.less
@@ -257,4 +257,5 @@
     left: 0;
     width: 100%;
     height: 100%;
-}
\ No newline at end of file
+}
+
diff --git a/super-screen/client/src/sections/fire-control/components/item-left.js b/super-screen/client/src/sections/fire-control/components/item-left.js
index 46b8ab2..6c86b1b 100644
--- a/super-screen/client/src/sections/fire-control/components/item-left.js
+++ b/super-screen/client/src/sections/fire-control/components/item-left.js
@@ -11,7 +11,18 @@ function BasicInfo(props) {
             <div className='end_event' onClick={() => { props.endEvent() }}>结束案件</div>
             <div className='event_title'><div className='event_title_left' /><span>南昌县第一消防大队</span><div className='event_title_right' /></div>
             <div className='left_second_bg'>
-
+                <div className='_second_item1'>
+                    <div className='_title'>着火场所</div>
+                    <div className='_content' style={{ marginBottom: 9 }}>住宅</div>
+                    <div className='_title'>人员分布情况</div>
+                    <div className='_content'>密集</div>
+                </div>
+                <div className='_second_item2'>
+                    <div className='_title'>着火物质</div>
+                    <div className='_content' style={{ marginBottom: 9 }}>煤气</div>
+                    <div className='_title' >是否需要救援</div>
+                    <div className='_content'>否</div>
+                </div>
             </div>
             <div className='left_third_bg'>
                 <div className='left_item_left1'>
diff --git a/super-screen/client/src/sections/fire-control/components/item-right.js b/super-screen/client/src/sections/fire-control/components/item-right.js
index 8c285a8..56b6a59 100644
--- a/super-screen/client/src/sections/fire-control/components/item-right.js
+++ b/super-screen/client/src/sections/fire-control/components/item-right.js
@@ -1,7 +1,15 @@
 import React from 'react'
 import { Box } from '$components';
 
-function BasicInfo() {
+function BasicInfo(props) {
+    const { emengencyTab } = props;
+    const tab_name = {
+        yjjg: '应急机构',
+        yjdw: '应急队伍',
+        yjzj: '应急专家',
+        yljg: '医疗机构',
+        bncs: '避难场所',
+    }
 
     return <Box title={"避难场所"} >
         <div className='fire_item_right_container'>
@@ -12,7 +20,7 @@ function BasicInfo() {
                         <div className='item_right'>
                             <div className='flex-row'>
                                 <div className='item_right_left'>场所名称</div>
-                                <div className='item_right_right'>南昌县人民公园中心市场</div>
+                                <div className='item_right_right'>{tab_name[emengencyTab] + s}</div>
                             </div>
                             <div className='flex-row'>
                                 <div className='item_right_left'>场所地点</div>
diff --git a/super-screen/client/src/sections/fire-control/components/style.less b/super-screen/client/src/sections/fire-control/components/style.less
index e6551dd..c181374 100644
--- a/super-screen/client/src/sections/fire-control/components/style.less
+++ b/super-screen/client/src/sections/fire-control/components/style.less
@@ -20,6 +20,17 @@
         color: #ECF7FF;
     }
 
+    @media screen and (min-height:1080px) {
+
+        .alarm_time {
+            height: 185px;
+        }
+
+        .event_title {
+            margin-top: 30px;
+        }
+    }
+
     .end_event {
         width: 202px;
         height: 39px;
@@ -42,7 +53,7 @@
         justify-content: space-around;
         align-items: center;
         width: 81%;
-        margin-top: 30px;
+        margin-top: 15px;
         margin-bottom: 10px;
 
         .event_title_left {
@@ -64,7 +75,43 @@
         height: 160px;
         background: url('/assets/images/homePage/fire/secondbg.png') no-repeat;
         background-size: 100% 100%;
+        display: flex;
+        justify-content: space-between;
+
+        ._title {
+            font-size: 14px;
+            color: #5999C8;
+        }
+
+        ._content {
+            font-size: 16px;
+            color: #ECF7FF;
+        }
 
+        ._second_item1 {
+            width: 95px;
+            height: 100%;
+            text-align: right;
+            padding-top: 12px;
+
+        }
+
+        ._second_item2 {
+            width: 155px;
+            height: 100%;
+            padding-top: 12px;
+        }
+
+        @media screen and (min-height:1080px) {
+
+            ._second_item1 {
+                padding-top: 24px;
+            }
+
+            ._second_item2 {
+                padding-top: 24px;
+            }
+        }
     }
 
     .left_third_bg {
diff --git a/super-screen/client/src/sections/fire-control/constant/index.js b/super-screen/client/src/sections/fire-control/constant/index.js
new file mode 100644
index 0000000..ceb1435
--- /dev/null
+++ b/super-screen/client/src/sections/fire-control/constant/index.js
@@ -0,0 +1,130 @@
+115.921049, 28.559176
+115.926542, 28.559327
+115.921218, 28.555168
+115.926311, 28.55532
+export const heatmapData = {
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "count": 6
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    115.921049, 28.559176
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "count": 3
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    115.922049, 28.556176
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "count": 2
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    115.923049, 28.556176
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "count": 2
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    115.924049, 28.557176
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "count": 5
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    115.925049, 28.558176
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "count": 7
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    115.926049, 28.556176
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "count": 8
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    115.92365, 28.557404
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "count": 8
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    115.92465, 28.555404
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "count": 8
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    115.92465, 28.556404
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "count": 8
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    115.92565, 28.557404
+                ]
+            }
+        },
+    ]
+}
+
diff --git a/super-screen/client/src/sections/fire-control/containers/gis.js b/super-screen/client/src/sections/fire-control/containers/gis.js
index cae8946..981d0d4 100644
--- a/super-screen/client/src/sections/fire-control/containers/gis.js
+++ b/super-screen/client/src/sections/fire-control/containers/gis.js
@@ -1,22 +1,34 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { render } from 'react-dom';
-import { Row, Col } from 'antd';
-import { data as heatmapData } from './data'
+import { Row, Col, Modal, Form, Input, Select } from 'antd';
+import { heatmapData } from '../constant/index'
 import './gis.less'
 const MAPDOMID = 'fs-amap-container';
+const LOCATION_MAP_ID = 'location_map_id';
 let map = null;
 let heatmap = null;
 let loca = null;
 let interval = null;
-const MARKER_IMG_NAME = {
-    markergreen: '回迁房',
-    markerblue: '城中村',
-    markeryellow: '廉租房',
-}
+
+const tabs = [
+    { name: '应急机构', tab: 'yjjg', className: 'emergency_button' },
+    { name: '应急队伍', tab: 'yjdw', className: 'emergency_button' },
+    { name: '应急专家', tab: 'yjzj', className: 'emergency_button' },
+    { name: '医疗机构', tab: 'yljg', className: 'emergency_button' },
+    { name: '避难场所', tab: 'bncs', className: 'emergency_button' },
+]
+
+const { Option } = Select;
+
 function Map(props) {
     const [delay, setDelay] = useState(true)
-    const [tab, setTab] = useState('home')
+    const [tab, setTab] = useState('yjjg')
+    const [visible, setVisible] = useState(false)
+    const [level, setLevel] = useState('I')
+    const [alarmData, setAlarmData] = useState()
+    const [locationVisible, setLocationVisible] = useState(false)
+    const [lnglat, setLnglat] = useState()
     // 地图初始化
     const loadMap = () => {
         // 图片图层 实现瓦片地图中国地图样式 bounds 第一个点为左下角 第二个点为右上角
@@ -81,8 +93,42 @@ function Map(props) {
     // 初始化GIS 组件销毁清空定时器
     useEffect(() => {
         loadMap();
+        map && renderAlarms()
+        loca && renderHeapLayer()
     }, []);
 
+    useEffect(() => {
+        if (alarmData) renderAlarmInfowindow(alarmData)
+    }, [level])
+
+
+    useEffect(() => {
+
+        setTimeout(() => {
+            if (locationVisible && document.getElementById(LOCATION_MAP_ID)) {
+                const locationMap = new AMap.Map(LOCATION_MAP_ID, {
+                    // center: [116.054664, 28.538966],
+                    zoomEnable: true,
+                    dragEnable: true,
+                    cursor: 'pointer',
+                });
+
+                locationMap.on('click', (e) => {
+                    locationMap.clearMap();
+                    const marker = new AMap.Marker({
+                        icon: '/assets/images/homepage/fire/position.png',
+                        position: e.lnglat,
+                        offset: new AMap.Pixel(-5, -15)
+                    });
+                    marker.setMap(locationMap);
+                    setLnglat(e.lnglat.lng + ',' + e.lnglat.lat)
+                })
+            }
+        }, 200);
+
+
+    }, [locationVisible])
+
     const renderMarkers = () => {
         map.clearMap();
         map.setZoom(10.3)
@@ -300,7 +346,7 @@ function Map(props) {
     }
 
     const renderAlarms = () => {
-        map.clearMap();
+        // map.clearMap();
         const alarms = [
             { lng: 115.92365, lat: 28.557404, type: 'device', name: '廉租房1', kind: 'markeralarm' },
         ]
@@ -317,9 +363,27 @@ function Map(props) {
             marker.setTitle(x.name);
             map.add(marker);
 
+            var circle = new AMap.Circle({
+                center: [x.lng, x.lat],
+                radius: 300, //半径
+                borderWeight: 3,
+                strokeColor: "#AE0000",
+                strokeOpacity: 1,
+                strokeWeight: 6,
+                strokeOpacity: 0.8,
+                fillOpacity: 0.2,
+                // strokeStyle: 'dashed',
+                strokeDasharray: [10, 10],
+                // 线样式还支持 'dashed'
+                fillColor: 'rgba(243, 0, 0, 0.15)',
+                zIndex: 50,
+            })
+
+            map.add(circle);
+
             let infowindow = new AMap.InfoWindow({
                 isCustom: true,  //使用自定义窗体
-                content: `<div id="map-content" class="gis-infowindow gis-infowindow-alarm">
+                content: `<div id="map-content" class="fire-gis-infowindow fire-gis-infowindow-alarm">
                     <div style="height:${360}px;" id="alarmcontentid${x.name}"></div></div>`,
                 offset: new AMap.Pixel(233, 260)
             });
@@ -335,88 +399,164 @@ function Map(props) {
                 let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
                 infowindow.open(map, position);
                 map.setCenter(position)
+                setAlarmData(x)
                 setTimeout(() => {
                     if (document.getElementById(`alarmcontentid${x.name}`)) {
-                        render(<div>
-                            <div className='gis_exit' onClick={() => {
-                                map.setCenter([115.922069, 28.554867])
-                                map.clearInfoWindow();
-                            }} />
-
-                            <div className='gis_item'>
-                                <span className='gis_title'>地址信息：</span>
-                                <span className='gis_text'>南湖大道</span>
-                            </div>
-                            <div className='gis_item'>
-                                <span className='gis_title'>告警来源：</span>
-                                <span className='gis_text'>烟雾报警</span>
-                            </div>
-                            <div className='gis_item'>
-                                <span className='gis_title'>告警内容</span>
-                                <span className='gis_text'>火情</span>
-                            </div>
-
-
-                            <div><span className='confirm_text'>请根据火灾态势，选择应急预案等级</span></div>
-                            <Row>
-                                <Col span={6}>I级</Col>
-                                <Col span={6}>II级</Col>
-                                <Col span={6}>III级</Col>
-                                <Col span={6}>IV级</Col>
-                            </Row>
-                            <div className='alarm_confirm'>
-                                <div className='alarm_cancel'>否</div>
-                                <div className='alarm_ok' onClick={() => { props.alarmOk() }}>是</div>
-                            </div>
-                        </div>,
-                            document.getElementById(`alarmcontentid${x.name}`));
+                        renderAlarmInfowindow(x)
                     }
                 }, 50)
             })
         })
     }
 
-    const renderLeftTop = () => {
-        return tab == 'person' ?
-            <div className='home_left'>
-                <div className='hometotalbg'>区域总人数</div>
-                <div className='home_total_number'>455 <span style={{ fontSize: 12 }}>万</span></div>
+    const renderHeapLayer = () => {
+        var geo = new Loca.GeoJSONSource({
+            data: heatmapData
+        });
 
-                <div className='hqtotal'>新生儿总数</div>
-                <div className='home_total_number'>45<span style={{ fontSize: 12 }}>万</span></div>
+        heatmap = new Loca.HeatMapLayer({
+            // loca,
+            zIndex: 60,
+            opacity: 1,
+            visible: true,
+            zooms: [2, 22],
+        });
 
-                <div className='cztotal'>老人总数</div>
-                <div className='home_total_number'>45<span style={{ fontSize: 12 }}>万</span></div>
-            </div> :
-            <div className='home_left'>
-                <div className='hometotalbg'>租赁房屋总数</div>
-                <div className='home_total_number'>4556</div>
+        heatmap.setSource(geo, {
+            radius: 50,
+            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);
+    }
 
-                <div className='hqtotal'>回迁房总数</div>
-                <div className='home_total_number'>4556</div>
+    const renderAlarmInfowindow = (x) => {
+        return x && render(<div>
+            <div className='gis_exit' onClick={() => {
+                map.setCenter([115.922069, 28.554867])
+                map.clearInfoWindow();
+            }} />
 
-                <div className='cztotal'>城中村总数</div>
-                <div className='home_total_number'>4556</div>
+            <div className='gis_item'>
+                <span className='gis_title'>地址信息：</span>
+                <span className='gis_text'>南湖大道</span>
+            </div>
+            <div className='gis_item'>
+                <span className='gis_title'>告警来源：</span>
+                <span className='gis_text'>烟雾报警</span>
+            </div>
+            <div className='gis_item'>
+                <span className='gis_title'>告警内容</span>
+                <span className='gis_text'>火情</span>
+            </div>
+
+            <div className='clear_alarm'>消除警情</div>
+
+            <div><span className='confirm_text'>请根据火灾态势，选择应急预案等级</span></div>
+            <Row style={{ paddingLeft: 16, paddingRight: 16, marginTop: 12 }}>
+                {['I', 'II', 'III', 'IV'].map(s => {
+                    return <Col
+                        onClick={() => { setLevel(s) }}
+                        span={6}
+                        style={{
+                            border: level == s ? '1px solid #fff' : '',
+                            textAlign: 'center'
+                        }}>{s}</Col>
+                })}
+            </Row>
+            <div className='alarm_confirm'>
+                <div className='alarm_cancel'>否</div>
+                <div className='alarm_ok' onClick={() => { props.alarmOk() }}>是</div>
+            </div>
+        </div>,
+            document.getElementById(`alarmcontentid${x.name}`));
+    }
+    const renderLeftTop = () => {
+        return <div className='home_left_add' onClick={() => { setVisible(true) }} />
+    }
 
-                <div className='lztotal'>廉租房</div>
-                <div className='home_total_number'>4556</div>
+    const layout = {
+        labelCol: { span: 8 },
+        wrapperCol: { span: 12 },
+    };
 
+    const renderInfowindow = () => {
+        return <div className='report_container'>
+            <div className='gis_exit' onClick={() => { setVisible(false) }} />
+            <Form
+                {...layout}
+                name="control-hooks"
+                style={{ maxWidth: 600 }}
+            >
+                <Form.Item name="时间" label="时间">
+                    <Select placeholder="请选择事件时间" > </Select>
+                </Form.Item>
+                <Form.Item onFocus={() => {
+                    setLocationVisible(true)
+                }}
+                    name="地点" label="地点" >
+                    {/* <Select placeholder="请选择事件地点" > </Select> */}
+                    <div
+                        onClick={() => { setLocationVisible(true) }}
+                        style={{ color: 'rgba(89, 153, 200, 1)', paddingLeft: 12 }}>请选择事件地点</div>
+                </Form.Item>
+                <Form.Item name="场所" label="场所" >
+                    <Select placeholder="请选择事件场所" > </Select>
+                </Form.Item>
+                <Form.Item name="燃烧物质" label="燃烧物质" >
+                    <Select placeholder="请选择事件燃烧物质" > </Select>
+                </Form.Item>
+                <Form.Item name="危险等级" label="危险等级" >
+                    <Select placeholder="请选择事件危险等级" > </Select>
+                </Form.Item>
+            </Form>
+
+            <div className='flex-row flex-content-around'>
+                <div className='cancel_button'>取消</div>
+                <div className='report_button'>上报</div>
             </div>
+
+        </div >
     }
 
-    const renderRightBottom = () => {
-        return <div className='home_right'>
-            <div className='_lz'>
-                <div className='_icon' />
-                <span>廉租房</span>
+    const renderLocationInfowindow = () => {
+        return <div className='location_infowindow'>
+            <div className='gis_exit' onClick={() => { setLocationVisible(false) }} />
+
+            <div className='info_div'>
+                <span className='location_title'>经纬度:</span>
+                <span>{lnglat}</span>
             </div>
-            <div className='_hq'>
-                <div className='_icon' />
-                <span>回迁房</span>
+            <div className='info_div'>
+                <span className='location_title'>坐标点位置:</span>
+                <Input style={{ width: '70%' }} />
             </div>
-            <div className='_cz'>
-                <div className='_icon' />
-                <span>城中村</span>
+            <div id={LOCATION_MAP_ID} className='location_map'></div>
+
+            <div className='location_btn_container'>
+                <div className='reset_btn'>
+                    重置点位
+                </div>
+                <div className='ok_btn'>
+                    确认选择
+                </div>
             </div>
         </div>
     }
@@ -433,31 +573,64 @@ function Map(props) {
             {/* 地图容器 */}
             <div className="gis" id={MAPDOMID} />
             {/* {map && renderMarkers()} */}
-            {map && renderAlarms()}
+
 
             {/* 底部按钮 */}
-            {/* {!delay && [
-                { name: '房屋分布', tab: 'home' },
-                { name: '人口分布', tab: 'person' },
-                { name: '基础设施', tab: 'device' }
-            ].map((s, index) => {
-                return <div className={'gis-button' + (index + 1)}
-                    onClick={() => { setTab(s.tab) }}
-                >
-                    <div className={`button_img ${tab == s.tab ? 'button_img_select' : ''}`} />
-                    <div>{s.name}</div>
-                </div>
+            {props.propTab == 'item' && tabs.map((s, index) => {
+                return <>
+                    <div className={s.className ? `${s.className} ${s.className}${index + 1}` : 'water-gis-button' + (index + 1)}
+                        onClick={() => {
+                            setTab(s.tab)
+                            s.className ? props.changeEmengencyTab(s.tab) : props.changeTab(s.tab)
+                        }}
+                    >
+                        <div className={
+                            s.className ? `button_${s.tab} ${tab == s.tab ? 'button_' + s.tab + '_select' : ''}` :
+                                `button_img ${tab == s.tab ? 'button_img_select' : ''}`} />
+                        <div>{s.name}</div>
+                        {s.className && <div className='dotbg'>7</div>}
+                    </div>
+                    <div className='icon_left'></div>
+                    <div className='icon_right'></div>
+                </>
             })
-            } */}
+            }
 
             {/* 左上角图例 */}
-            {/* {renderLeftTop()}
-            {renderRightBottom()} */}
+            {renderLeftTop()}
             {/* 四周遮罩 */}
             <div className='gis-left'></div>
             <div className='gis-right'></div>
             <div className='gis-top'></div>
             <div className='gis-bottom'></div>
+
+            <Modal
+                maskClosable={false}
+                wrapClassName="custom-modal"
+                visible={visible}
+                closable={false}
+                width="360px"
+                centered
+                footer={null}
+                bodyStyle={{}}
+                destroyOnClose
+            >
+                {renderInfowindow()}
+            </Modal>
+
+            <Modal
+                maskClosable={false}
+                wrapClassName="custom-modal"
+                visible={locationVisible}
+                closable={false}
+                width="569px"
+                centered
+                footer={null}
+                bodyStyle={{}}
+                destroyOnClose
+            >
+                {renderLocationInfowindow()}
+            </Modal>
         </>
     );
 }
diff --git a/super-screen/client/src/sections/fire-control/containers/gis.less b/super-screen/client/src/sections/fire-control/containers/gis.less
index f9854f4..9b9c68e 100644
--- a/super-screen/client/src/sections/fire-control/containers/gis.less
+++ b/super-screen/client/src/sections/fire-control/containers/gis.less
@@ -116,7 +116,7 @@
 
 }
 
-.gis-infowindow {
+.fire-gis-infowindow {
     width: 302px;
     height: 420px;
     background: url('/assets/images/homepage/communtity/infowindowbg.png') no-repeat;
@@ -124,7 +124,7 @@
     opacity: 0.8;
     padding-left: 69px;
     padding-left: 22px;
-    padding-top: 157px;
+    padding-top: 127px;
     color: #fff;
 
     .gis_exit {
@@ -164,9 +164,25 @@
             line-height: 21px;
         }
     }
+
+    .clear_alarm {
+        width: 92px;
+        height: 30px;
+        background-image: linear-gradient(180deg, #3072D2 0%, rgba(0, 41, 117, 0.43) 51%, #163FA6 100%);
+        border: 1.5px solid #005AB7;
+        box-shadow: inset 0 1px 14px 0 rgba(18, 142, 232, 0.35);
+        border-radius: 4px;
+        font-size: 14px;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 27px;
+        margin-bottom: 20px;
+        cursor: pointer;
+        margin-left: 87px;
+    }
 }
 
-.gis-infowindow-alarm {
+.fire-gis-infowindow-alarm {
     background: url('/assets/images/homepage/communtity/alarminfowindow.png') no-repeat;
     height: 432px;
     width: 311px;
@@ -268,58 +284,16 @@
 }
 
 
-.home_left {
+.home_left_add {
     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%;
-    }
-
+    width: 112px;
+    height: 51px;
+    background: url('/assets/images/homepage/fire/add.png') no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
 }
 
 .home_right {
@@ -405,4 +379,167 @@
             letter-spacing: 0;
         }
     }
+}
+
+.custom-modal {
+    .ant-modal-content {
+        background-color: transparent !important;
+        box-shadow: none !important;
+    }
+}
+
+.report_container {
+    width: 360px;
+    height: 455px;
+    background: url('/assets/images/homepage/fire/reportbg.png') no-repeat;
+    background-size: 100% 100%;
+    color: rgba(195, 230, 255, 1);
+    padding-top: 124px;
+
+    .gis_exit {
+        cursor: pointer;
+        position: absolute;
+        right: -16px;
+        top: 50px;
+        width: 30.75px;
+        height: 23px;
+        background: url('/assets/images/homepage/communtity/exit.png') no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
+    }
+
+    .cancel_button {
+        width: 92px;
+        height: 30px;
+        background-image: linear-gradient(180deg, #3072D2 0%, rgba(0, 41, 117, 0.43) 51%, #163FA6 100%);
+        border: 1.5px solid #005AB7;
+        box-shadow: inset 0 1px 14px 0 rgba(18, 142, 232, 0.35);
+        border-radius: 4px;
+        text-align: center;
+        line-height: 26px;
+        cursor: pointer;
+    }
+
+    .report_button {
+        width: 92px;
+        height: 30px;
+        background-image: linear-gradient(180deg, #00ACC5 1%, rgba(0, 158, 182, 0.43) 52%, #00ACC5 100%);
+        border: 1.5px solid #009DB4;
+        box-shadow: inset 0 1px 14px 0 rgba(43, 240, 255, 0.35);
+        border-radius: 4px;
+        text-align: center;
+        line-height: 26px;
+        cursor: pointer;
+    }
+
+    .ant-form-item-label>label {
+        color: rgba(195, 230, 255, 1) !important;
+    }
+
+    .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+        background-color: transparent !important;
+        border: 1px solid transparent !important;
+    }
+
+    .ant-select-selection-placeholder {
+        color: rgba(89, 153, 200, 1) !important;
+    }
+
+    .ant-select-arrow {
+        color: rgba(89, 153, 200, 1);
+    }
+
+    .ant-input {
+        background-color: transparent !important;
+        border: 1px solid transparent !important;
+        color: rgba(89, 153, 200, 1);
+    }
+
+    .ant-input-placeholder {
+        color: rgba(89, 153, 200, 1) !important;
+    }
+}
+
+.location_infowindow {
+    width: 569px;
+    height: 580px;
+    background: url('/assets/images/homepage/fire/location_infowindow.png') no-repeat;
+    background-size: 100% 100%;
+    padding-top: 150px;
+    display: flex;
+    flex-direction: column;
+    padding-left: 20px;
+
+    .gis_exit {
+        cursor: pointer;
+        position: absolute;
+        right: -17px;
+        top: 49px;
+        width: 30.75px;
+        height: 23px;
+        background: url('/assets/images/homepage/communtity/exit.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .location_map {
+        width: 529px;
+        height: 222px;
+        margin-top: 20px;
+    }
+
+    .info_div {
+        border-bottom: 1px solid rgba(5, 85, 167, 0.57);
+        color: rgba(255, 255, 255, 1);
+        font-size: 14px;
+        margin-top: 18px;
+
+        .location_title {
+            color: rgba(195, 230, 255, 1);
+            margin-right: 12px;
+        }
+    }
+
+    .ant-input {
+        background-color: transparent !important;
+        border: 1px solid transparent !important;
+        color: rgba(255, 255, 255, 1);
+    }
+
+    .ant-input-placeholder {
+        color: rgba(89, 153, 200, 1) !important;
+
+    }
+
+    .location_btn_container {
+        display: flex;
+        width: 100%;
+        justify-content: space-around;
+        margin-top: 15px;
+
+        .reset_btn {
+            width: 92px;
+            height: 30px;
+            background-image: linear-gradient(180deg, #3072D2 0%, rgba(0, 41, 117, 0.43) 51%, #163FA6 100%);
+            border: 1.5px solid #005AB7;
+            box-shadow: inset 0 1px 14px 0 rgba(18, 142, 232, 0.35);
+            border-radius: 4px;
+            color: #fff;
+            text-align: center;
+            line-height: 30px;
+            cursor: pointer;
+        }
+
+        .ok_btn {
+            width: 92px;
+            height: 30px;
+            background-image: linear-gradient(180deg, #00ACC5 1%, rgba(0, 158, 182, 0.43) 52%, #00ACC5 100%);
+            border: 1.5px solid #009DB4;
+            box-shadow: inset 0 1px 14px 0 rgba(43, 240, 255, 0.35);
+            border-radius: 4px;
+            color: #fff;
+            text-align: center;
+            line-height: 30px;
+            cursor: pointer;
+        }
+    }
 }
\ No newline at end of file
diff --git a/super-screen/client/src/sections/fire-control/containers/homePage.js b/super-screen/client/src/sections/fire-control/containers/homePage.js
index 150ab21..b481139 100644
--- a/super-screen/client/src/sections/fire-control/containers/homePage.js
+++ b/super-screen/client/src/sections/fire-control/containers/homePage.js
@@ -11,13 +11,14 @@ import RightMiddle from '../components/right-middle'
 import RightBottom from '../components/right-bottom'
 import Gis from './gis';
 import './style.less'
-
+import Weather from '../../water-prevention/components/weather';
 function homePage(props) {
     const { dispatch } = props;
     const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
     const cardHeight = document.body.clientHeight * 0.896 * 0.32
     const cardContentHeight = cardHeight - 42 - 13
     const [tab, setTab] = useState('overview')
+    const [emengencyTab, setEmengencyTab] = useState('yjjg');
     return <>
         <div className='homepage'>
             <div className='_title'>
@@ -26,7 +27,8 @@ function homePage(props) {
                     <div className='_title_dot'></div>
                     <span>一键护航</span>
                 </div>
-                <div onClick={() => { dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >返回平台</div>
+                <Weather />
+                <div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
             </div>
             <div className='homepage-left homepage-left-left'>
                 <div div className="list">
@@ -53,9 +55,13 @@ function homePage(props) {
             </div>
             <div className='homepage-center'>
                 <Gis
+                    propTab={tab}
                     alarmOk={() => {
                         setTab('item')
                     }}
+                    changeEmengencyTab={(e) => {
+                        setEmengencyTab(e)
+                    }}
                 />
             </div>
             <div className='homepage-left homepage-left-right'>
@@ -71,7 +77,7 @@ function homePage(props) {
                     </div>
                 </div> :
                     <div className='child' style={{ height: '100%' }} >
-                        <Right cardContentHeight={document.body.clientHeight * 0.896} />
+                        <Right emengencyTab={emengencyTab} cardContentHeight={document.body.clientHeight * 0.896} />
                     </div>
                 }
             </div>
diff --git a/super-screen/client/src/sections/homePage/containers/homePage copy.js b/super-screen/client/src/sections/homePage/containers/homePage copy.js
deleted file mode 100644
index ef570f6..0000000
--- a/super-screen/client/src/sections/homePage/containers/homePage copy.js	
+++ /dev/null
@@ -1,74 +0,0 @@
-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 './style.less'
-
-function homePage(props) {
-    const { dispatch } = props;
-    const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
-    const cardHeight = document.body.clientHeight * 0.896 * 0.32
-    const cardContentHeight = cardHeight - 42 - 13
-    return <div className='homepage'>
-        <div className='_title'>
-            <div onClick={() => { dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' ><div className='_icon' />进入后台</div>
-        </div>
-        <div className='homepage-left homepage-left-left'>
-            <div className="list">
-                <div className='child' style={childStyle}>
-                    <AccessData />
-                </div>
-                <div className='child' style={childStyle}>
-                    <NodeResource />
-                </div>
-                <div className='child' style={childStyle}>
-                    <AlarmList cardContentHeight={cardContentHeight} />
-                </div>
-            </div>
-        </div>
-        <div className='homepage-center'>
-            <CenterTop />
-            <div className="list">
-                <div className='child-top'>
-                    <AbnormalMonitoring />
-                </div>
-            </div>
-        </div>
-        <div className='homepage-left homepage-left-right'>
-            <div className="list">
-                <div className='child-right' style={childStyle}>
-                    <DataShare />
-                </div>
-                <div className='child-right' style={childStyle}>
-                    <DataTop5 cardContentHeight={cardContentHeight} />
-                </div>
-                <div className='child-right' style={childStyle}>
-                    <HotspotData />
-                </div>
-            </div>
-        </div>
-    </div>
-
-}
-
-function mapStateToProps(state) {
-    const {
-        auth, global
-    } = state;
-    return {
-        clientHeight: global.clientHeight,
-        actions: global.actions,
-
-    };
-}
-
-export default connect(mapStateToProps)(homePage);
-
-
diff --git a/super-screen/client/src/sections/homePage/containers/style.less b/super-screen/client/src/sections/homePage/containers/style.less
index bf3b8bd..851669c 100644
--- a/super-screen/client/src/sections/homePage/containers/style.less
+++ b/super-screen/client/src/sections/homePage/containers/style.less
@@ -4,7 +4,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    background: url('/assets/images/homePage/enter/bg.png') !important;
+    background: url('/assets/images/homePage/enter/bg.gif') !important;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     overflow: hidden;
diff --git a/super-screen/client/src/sections/water-prevention/components/emergency-left-top.js b/super-screen/client/src/sections/water-prevention/components/emergency-left-top.js
index bcded96..2317d81 100644
--- a/super-screen/client/src/sections/water-prevention/components/emergency-left-top.js
+++ b/super-screen/client/src/sections/water-prevention/components/emergency-left-top.js
@@ -3,8 +3,33 @@ import { Box } from '$components';
 
 function BasicInfo() {
 
+    const data = [
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+        { title: '防汛I级应急预案', url: '' },
+    ]
     return <Box title={"防汛预案"} subtitle={true} >
-    
+        <div className='prevent_doc'>
+            {data.map(s => {
+                return <div className='doc_container'>
+                    <div className='doc_bg'>
+                        <div className='doc_row1'>查看</div>
+                        <div className='doc_row2'>{s.title}</div>
+                    </div>
+
+                </div>
+            })}
+        </div>
     </Box>
 }
 
diff --git a/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js b/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js
index 087da32..fd9260a 100644
--- a/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js
+++ b/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js
@@ -3,7 +3,14 @@ import { Box } from '$components';
 import './style.less';
 
 function CitySafty(props) {
-
+    const { emengencyTab } = props;
+    const tab_name = {
+        yjjg: '应急机构',
+        yjdw: '应急队伍',
+        yjzj: '应急专家',
+        yljg: '医疗机构',
+        bncs: '避难场所',
+    }
     return <Box title={"避难场所"} >
         <div className='fire_item_right_container'>
             {
@@ -13,7 +20,7 @@ function CitySafty(props) {
                         <div className='item_right'>
                             <div className='flex-row'>
                                 <div className='item_right_left'>场所名称</div>
-                                <div className='item_right_right'>南昌县人民公园中心市场</div>
+                                <div className='item_right_right'>{tab_name[emengencyTab] + s}</div>
                             </div>
                             <div className='flex-row'>
                                 <div className='item_right_left'>场所地点</div>
diff --git a/super-screen/client/src/sections/water-prevention/components/left-top.js b/super-screen/client/src/sections/water-prevention/components/left-top.js
index b60c952..6da58ca 100644
--- a/super-screen/client/src/sections/water-prevention/components/left-top.js
+++ b/super-screen/client/src/sections/water-prevention/components/left-top.js
@@ -21,7 +21,59 @@ function BasicInfo() {
     );
 
     return <Box title={"实时态势"} subtitleSelect={renderSubtitle()}>
+        <div className='real_state_container'>
+            <div className='real_weather'>
+                <div className='weather_left'>
+                    <div className='_basictitlebg'>
+                        <div className='_basic_title'>今天</div>
+                        <span className='_basic_sub_title'>2023-06-21</span>
+                    </div>
+                    <div className='row1_container'>
+                        <div className='weather_icon'></div>
+                        <span>晴转多云</span>
+                        <span style={{ color: '#24DCF7' }}>17-28℃</span>
+                    </div>
 
+                </div>
+                <div className='weather_right'>
+                    <div>今日雨量</div>
+                    <div><span className='weather_data'>35</span>m</div>
+                </div>
+            </div>
+            <div className='real_weather'>
+                <div className='weather_left'>
+                    <div className='row2_container'>
+                        <div className='row2_item'>
+                            <div className='_number'>明天</div>
+                            <div className='weather_icon'></div>
+                            <div>17-28℃</div>
+                        </div>
+                        <div className='row2_item'>
+                            <div className='_number'>后天</div>
+                            <div className='weather_icon'></div>
+                            <div>17-28℃</div>
+                        </div>
+                    </div>
+                </div>
+                <div className='weather_right'>
+                    <div>明日雨量</div>
+                    <div><span className='weather_data'>35</span>m</div>
+                </div>
+            </div>
+
+            <div className='basictextbg'>
+                <span>影响人口：</span>
+                <span className='row1_row3_subtitle'>约611人</span>
+            </div>
+            <div className='basictextbg'>
+                <span>预警等级：</span>
+                <span className='_row2_bg'>2</span>
+            </div>
+            <div className='basictextbg'>
+                <span>防汛责任人：</span>
+                <span className='row1_row3_subtitle'>掌上明珠 1920394090697</span>
+            </div>
+        </div>
     </Box>
 }
 
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 017147d..23a7d79 100644
--- a/super-screen/client/src/sections/water-prevention/components/style.less
+++ b/super-screen/client/src/sections/water-prevention/components/style.less
@@ -596,7 +596,6 @@
 
 }
 
-
 //建设数据
 .type-chart-wrapper {
     width: 220px;
@@ -658,4 +657,222 @@
         color: inherit;
         color: rgba(36, 220, 247, 1) !important;
     }
+}
+
+
+.super-dropdownClassName {
+    color: #a1c1d1 !important;
+    background-color: rgba(36, 220, 247, 0.3) !important;
+    border: 1px solid rgba(36, 220, 247, 1);
+    max-height: 200px;
+
+    .ant-select-dropdown {
+        color: #a1c1d1 !important;
+        background-color: rgba(9, 22, 44, 0.75) !important;
+    }
+
+    .ant-select-item-option-content {
+        color: #a1c1d1 !important;
+    }
+
+    .ant-select-item-option-active {
+        color: #a1c1d1 !important;
+        background-color: rgba(36, 220, 247, 1) !important;
+    }
+
+    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+        color: rgba(0, 0, 0, 0.85);
+        background-color: rgba(36, 220, 247, 1);
+    }
+}
+
+.real_state_container {
+    padding: 14px 36px 17px 12px;
+    height: 100%;
+    width: 100%;
+
+    .real_weather {
+        display: flex;
+        margin-bottom: 2%;
+
+        .weather_left {
+            width: calc(100% - 100px);
+            color: #C0E2FF;
+
+            ._basictitlebg {
+                background: url('/assets/images/homePage/communtity/basictitlebg.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                width: 220px;
+                height: 17.5px;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                align-items: center;
+
+                ._basic_title {
+                    font-family: YouSheBiaoTiHei;
+                    font-size: 21px;
+                    color: #FFFFFF;
+                    letter-spacing: 0.74px;
+                    width: 70px;
+                    margin-top: -13px;
+                }
+
+                ._basic_sub_title {
+                    // font-family: YouSheBiaoTiHei;
+                    font-size: 14px;
+                    color: #C0E2FF;
+                    letter-spacing: 0;
+                }
+            }
+
+            .row1_container {
+                width: 220px;
+                height: 45px;
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+                padding-left: 20px;
+            }
+
+            .row2_container {
+                width: 220px;
+                height: 75px;
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+
+                .row2_item {
+                    width: 50%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+
+                    ._number {
+                        font-family: YouSheBiaoTiHei;
+                        font-size: 18px;
+                        color: #FFFFFF;
+                    }
+                }
+            }
+
+            .weather_icon {
+                width: 43.02px;
+                height: 38px;
+                background: url('/assets/images/homePage/water/weather.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                display: inline-block;
+            }
+        }
+
+        .weather_right {
+            width: 90px;
+            height: 77px;
+            background: url('/assets/images/homePage/water/realrightbg.png') no-repeat;
+            background-size: 100% 100%;
+            font-size: 14px;
+            color: #C3E6FF;
+            padding-left: 16px;
+            padding-top: 3px;
+
+            .weather_data {
+                font-family: D-DIN-Italic;
+                font-weight: DIN;
+                font-size: 38px;
+                color: #FFFFFF;
+            }
+        }
+
+    }
+
+
+    .basictextbg {
+        background: url('/assets/images/homePage/communtity/basictextbg.png') no-repeat;
+        background-size: 100% 100%;
+        height: 43px;
+        display: flex;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: 500;
+        font-size: 13px;
+        color: #C0E2FF;
+        align-items: center;
+        justify-content: space-between;
+        padding-left: 16px;
+        padding-right: 16px;
+        margin-top: 14px;
+
+        .row1_row3_subtitle {
+            font-size: 16px;
+            color: #FFFFFF;
+            letter-spacing: 0;
+            font-family: YouSheBiaoTiHei;
+        }
+
+        ._row2_bg {
+            width: 28px;
+            height: 10px;
+            background: url(/assets/images/homePage/communtity/top1.png);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            display: inline-block;
+            text-align: center;
+            line-height: 1px;
+            font-size: 18px;
+            font-family: D-DIN-Italic;
+        }
+    }
+
+    @media screen and (min-height:1080px) {
+        padding-top: 24px;
+
+        .real_weather {
+            margin-bottom: 24px;
+        }
+    }
+}
+
+.prevent_doc {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    overflow: auto;
+
+    .doc_container {
+        width: 50%;
+        height: 83px;
+        margin-bottom: 20px;
+
+        .doc_bg {
+            width: 177px;
+            height: 83px;
+            background: url('/assets/images/homePage/water/docbg.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+
+            .doc_row1 {
+                position: absolute;
+                right: 20%;
+                top: 20px;
+                right: 29%;
+                top: 24px;
+                cursor: pointer;
+            }
+
+            .doc_row2 {
+                position: absolute;
+                left: 49%;
+                top: 50px;
+                width: 121px;
+                color: #C3E6FF;
+            }
+        }
+    }
+}
+
+.prevent_doc::-webkit-scrollbar {
+    width: 0 !important
 }
\ No newline at end of file
diff --git a/super-screen/client/src/sections/water-prevention/components/weather.js b/super-screen/client/src/sections/water-prevention/components/weather.js
new file mode 100644
index 0000000..4e7536e
--- /dev/null
+++ b/super-screen/client/src/sections/water-prevention/components/weather.js
@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from 'react'
+import moment from 'moment';
+
+function Weather() {
+
+    return <div className='_weather_container'>
+        <div className='column1'>
+            <div>{moment().format('YYYY-MM-DD')}</div>
+            <div style={{ fontSize: 14 }}>{moment().format('HH:mm:ss')}</div>
+        </div>
+        <div className='_divider'></div>
+        <div className='weather_icon'></div>
+        <div className='column2'>
+            <div>晴转多云</div>
+            <div style={{ fontSize: 14 }}>18~26℃</div>
+        </div>
+    </div>
+}
+
+export default Weather;
+
+
diff --git a/super-screen/client/src/sections/water-prevention/containers/gis.js b/super-screen/client/src/sections/water-prevention/containers/gis.js
index dbd672a..e5d0985 100644
--- a/super-screen/client/src/sections/water-prevention/containers/gis.js
+++ b/super-screen/client/src/sections/water-prevention/containers/gis.js
@@ -7,6 +7,7 @@ const MAPDOMID = 'fs-amap-container1';
 let map = null;
 let heatmap = null;
 let loca = null;
+let gridLayer = null;
 let interval = null;
 const MARKER_IMG_NAME = {
     markergreen: '回迁房',
@@ -67,7 +68,13 @@ function Map(props) {
         })
 
         loca = new Loca.Container({ map: map })
-        createText()
+        { map && renderMarkers() }
+        { map && renderAlarms() }
+        setTimeout(() => {
+            renderLayer()
+            createText()
+        }, 1000);
+
 
     };
 
@@ -147,129 +154,85 @@ function Map(props) {
         map.setPitch(22.9)
         map.setRotation(1.7000)
         if (loca && heatmap) loca.remove(heatmap)
-        if (tab == 'person') {
 
-            var geo = new Loca.GeoJSONSource({
-                data: heatmapData
-            });
+        //初始层级 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' },
+        ]
 
-            heatmap = new Loca.HeatMapLayer({
-                // loca,
-                zIndex: 10,
-                opacity: 1,
-                visible: true,
-                zooms: [2, 22],
+        //初始点位显示
+        data.map((x, index) => {
+            var marker = new AMap.Marker({
+                position: new AMap.LngLat(x.lng, x.lat),
+                // 将一张图片的地址设置为 icon
+                icon: '/assets/images/homepage/water/_monitor.png',
+                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
+                offset: new AMap.Pixel(-13, -30),
+                zooms: [3, 14],
             });
-
-            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],
+            marker.setTitle(x.name);
+            map.add(marker);
+            let infowindow = new AMap.InfoWindow({
+                isCustom: true,  //使用自定义窗体
+                content: `<div id="map-content" class="water-gis-infowindow">
+        <div style="height:${360}px;" id="contentid${x.name}"></div></div>`,
+                offset: new AMap.Pixel(153, 260)
             });
-            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: `<div id="map-content" class="personinfowindow">
-                <div style="height:${330}px;" id="contentidheatmap${random}"></div></div>`,
-                        offset: new AMap.Pixel(133, 260)
-                    });
 
-                    let position = map.getCenter();
-                    infowindow.open(map, position);
-                    setTimeout(() => {
-                        if (document.getElementById(`contentidheatmap${random}`)) {
-                            render(<div>
-                                <div className='gis_exit' onClick={() => {
-                                    map.clearInfoWindow();
-                                }} />
-                                <div className='gis_item'>
-                                    <span className='gis_title'>小区名称</span>
-                                    <span className='gis_text'>小区名称</span>
-                                </div>
-                                <div className='gis_item'>
-                                    <span className='gis_title'>人口</span>
-                                    <span className='gis_text'>2344人</span>
+            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(<div>
+                            <div className='gis_exit' onClick={() => {
+                                map.setCenter([115.922069, 28.554867])
+                                map.clearInfoWindow();
+                            }} />
+                            <div className='gis_item'>
+                                <span className='gis_title'>泵站名称：</span>
+                                <span className='gis_text'>{x.name}</span>
+                            </div>
+                            <div className='gis_item'>
+                                <span className='gis_title'>1#提升泵：</span>
+                                <div className='gis_text_on'>
                                 </div>
-                                <div className='gis_item'>
-                                    <span className='gis_title'>新生儿</span>
-                                    <span className='gis_text'>23人</span>
+                            </div>
+                            <div className='gis_item'>
+                                <span className='gis_title'>2#提升泵：</span>
+                                <div className='gis_text_on'>
                                 </div>
-                                <div className='gis_item'>
-                                    <span className='gis_title'>老人</span>
-                                    <span className='gis_text'>342人</span>
+                            </div>
+                            <div className='gis_item'>
+                                <span className='gis_title'>3#提升泵：</span>
+                                <div className='gis_text_off'>
                                 </div>
-                            </div>,
-                                document.getElementById(`contentidheatmap${random}`));
-                        }
-                    }, 50)
+                            </div>
+                        </div>,
+                            document.getElementById(`contentid${x.name}`));
+                    }
+                }, 50)
+            })
+        })
 
-                }
-            });
-        } else {
-            //初始层级 zoom14以下显示聚合点
+
+        if (tab == 'device') {
             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' },
+                { 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' },
             ]
 
-            //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
@@ -280,80 +243,10 @@ function Map(props) {
                 });
                 marker.setTitle(x.name);
                 map.add(marker);
-
-                let infowindow = new AMap.InfoWindow({
-                    isCustom: true,  //使用自定义窗体
-                    content: `<div id="map-content" class="gis-infowindow">
-            <div style="height:${360}px;" id="contentid${x.name}"></div></div>`,
-                    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(<div>
-                                <div className='gis_exit' onClick={() => {
-                                    map.setCenter([115.922069, 28.554867])
-                                    map.clearInfoWindow();
-                                }} />
-                                <div className='gis_item'>
-                                    <span className='gis_title'>小区名称</span>
-                                    <span className='gis_text'>{x.name}</span>
-                                </div>
-                                <div className='gis_item'>
-                                    <span className='gis_title'>人流量</span>
-                                    <span className='gis_text'>123次</span>
-                                    <span className='gis_title' style={{ marginLeft: 20 }}>房龄</span>
-                                    <span className='gis_text'>9年</span>
-                                </div>
-                                <div className='gis_item'>
-                                    <span className='gis_title'>租赁中房屋</span>
-                                    <span className='gis_text'>165套</span>
-                                </div>
-                                <div className='gis_item'>
-                                    <span className='gis_title'>网格员</span>
-                                    <span className='gis_text'>张三</span>
-                                </div>
-                                <div className='gis_item'>
-                                    <span className='gis_title'>手机号码</span>
-                                    <span className='gis_text'>15765845845</span>
-                                </div>
-                            </div>,
-                                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 = () => {
@@ -362,7 +255,7 @@ function Map(props) {
         }
 
         const alarms = [
-            { lng: 115.92365, lat: 28.557404, type: 'device', name: '廉租房1', kind: 'markeralarm' },
+            { lng: 116.044599, lat: 28.663869, type: 'device', name: 'xxx水位1', kind: 'markeralarm' },
         ]
 
         alarms.map((x, index) => {
@@ -372,14 +265,14 @@ function Map(props) {
                 icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
                 // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
                 offset: new AMap.Pixel(-13, -30),
-                zooms: [15, 19],
+                zooms: [3, 14],
             });
             marker.setTitle(x.name);
             map.add(marker);
 
             let infowindow = new AMap.InfoWindow({
                 isCustom: true,  //使用自定义窗体
-                content: `<div id="map-content" class="gis-infowindow gis-infowindow-alarm">
+                content: `<div id="map-content" class="gis-infowindow water-gis-infowindow-alarm  gis-infowindow-alarm">
                     <div style="height:${360}px;" id="alarmcontentid${x.name}"></div></div>`,
                 offset: new AMap.Pixel(233, 260)
             });
@@ -394,7 +287,7 @@ function Map(props) {
             marker.on('click', () => {
                 let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
                 infowindow.open(map, position);
-                map.setCenter(position)
+                // map.setCenter(position)
                 setTimeout(() => {
                     if (document.getElementById(`alarmcontentid${x.name}`)) {
                         render(<div>
@@ -403,33 +296,26 @@ function Map(props) {
                                 map.clearInfoWindow();
                             }} />
                             <div className='gis_item'>
-                                <span className='gis_title'>小区名称</span>
+                                <span className='gis_title'>点位名称</span>
                                 <span className='gis_text'>{x.name}</span>
                             </div>
                             <div className='gis_item'>
-                                <span className='gis_title'>人流量</span>
-                                <span className='gis_text'>123次</span>
-                                <span className='gis_title' style={{ marginLeft: 20 }}>房龄</span>
-                                <span className='gis_text'>9年</span>
+                                <span className='gis_title'>实时水位</span>
+                                <span className='gis_text'>7.86m</span>
                             </div>
                             <div className='gis_item'>
-                                <span className='gis_title'>租赁中房屋</span>
-                                <span className='gis_text'>165套</span>
+                                <span className='gis_title'>预警水位</span>
+                                <span className='gis_text'>7.86m</span>
                             </div>
                             <div className='gis_item'>
-                                <span className='gis_title'>网格员</span>
-                                <span className='gis_text'>张三</span>
+                                <span className='gis_title'>近1h雨量</span>
+                                <span className='gis_text'>1.5mm</span>
                             </div>
                             <div className='gis_item'>
-                                <span className='gis_title'>手机号码</span>
-                                <span className='gis_text'>15765845845</span>
+                                <span className='gis_title'>告警</span>
+                                <span className='gis_text'>高风险</span>
                             </div>
 
-                            <div><span className='confirm_text'>人流量较大，确认是否安装消防设施？</span></div>
-                            <div className='alarm_confirm'>
-                                <div className='alarm_cancel'>否</div>
-                                <div className='alarm_ok'>是</div>
-                            </div>
                         </div>,
                             document.getElementById(`alarmcontentid${x.name}`));
                     }
@@ -439,50 +325,213 @@ function Map(props) {
     }
 
     const renderLeftTop = () => {
-        return tab == 'person' ?
-            <div className='home_left'>
-                <div className='hometotalbg'>区域总人数</div>
-                <div className='home_total_number'>455 <span style={{ fontSize: 12 }}>万</span></div>
+        return <div className='water_gis_home_left'>
+            {[{ name: '高风险区域', key: 'high', data: 3 },
+            { name: '中风险区域', key: 'middle', data: 13 },
+            { name: '低风险区域', key: 'low', data: 13 }].map(s => {
+                return <div className='left_item'>
+                    <div className='gis_item_left'>
+                        <div className={`${s.key}_risk`} />
+                    </div>
+                    <div className='gis_item_right'>
+                        <div>{s.name}</div>
+                        <div><span className={`${s.key}_text`}>{s.data}</span>/21</div>
+                    </div>
+                </div>
+            })}
 
-                <div className='hqtotal'>新生儿总数</div>
-                <div className='home_total_number'>45<span style={{ fontSize: 12 }}>万</span></div>
+        </div>
+    }
 
-                <div className='cztotal'>老人总数</div>
-                <div className='home_total_number'>45<span style={{ fontSize: 12 }}>万</span></div>
+    const renderRightBottom = () => {
+        return tab == 'overview' ?
+            <div className='water_home_right'>
+                <div className='_right_row1'>
+                    <div className='_monitor' /><span className='monitor_text'>监测点</span></div>
+                <div className='_right_row2'>
+                    <span className='column1'>预警阈值参照表</span>
+                    <div className='column2'>
+                        <div className='flex-row flex-content-around'><span>三级告警</span><span>二级告警</span><span>一级告警</span></div>
+                        <div className='flex-row flex-content-around'>
+                            <div className='level3'></div>
+                            <div className='level2'></div>
+                            <div className='level1'></div>
+                        </div>
+                        <div className='flex-row flex-content-around'>
+                            <span>0m</span>
+                            <span>5m</span>
+                            <span>10m</span>
+                            <span>15m</span>
+                            <span>20m</span>
+                            <span>25m</span>
+                            <span>30m</span>
+                        </div>
+                    </div>
+                </div>
             </div> :
-            <div className='home_left'>
-                <div className='hometotalbg'>租赁房屋总数</div>
-                <div className='home_total_number'>4556</div>
-
-                <div className='hqtotal'>回迁房总数</div>
-                <div className='home_total_number'>4556</div>
-
-                <div className='cztotal'>城中村总数</div>
-                <div className='home_total_number'>4556</div>
-
-                <div className='lztotal'>廉租房</div>
-                <div className='home_total_number'>4556</div>
-
+            <div className='water_home_right_back' onClick={() => {
+                setTab('overview')
+                props.changeTab('overview')
+            }}>
+                <div className='_back_icon' /> 返回实时监测
             </div>
     }
 
-    const renderRightBottom = () => {
-        return <div className='home_right'>
-            <div className='_lz'>
-                <div className='_icon' />
-                <span>廉租房</span>
-            </div>
-            <div className='_hq'>
-                <div className='_icon' />
-                <span>回迁房</span>
+    const renderWaterwarningbg = () => {
+        return <div className='waterwarningbg'>
+            <div className='_alarm_column1'>
+                <div>城区沿江水涝<div className='_state'>未启动</div></div>
+                <div style={{ color: 'rgba(76, 161, 255, 1)', fontSize: 14 }}>[自然灾害事故]</div>
             </div>
-            <div className='_cz'>
-                <div className='_icon' />
-                <span>城中村</span>
+            <div className='_alarm_column2'>
+                <div style={{ textAlign: 'right', color: 'rgba(76, 161, 255, 1)' }}>2023-02-12 16:42:34</div>
+                <div className='_text_info'>
+                    6月11日上午11点左右，低洼堤坝出现江水倒灌灾，需要进行救援。6月11日上午11点左右，低洼堤坝出现江水倒灌灾，需要进行救援。
+                </div>
             </div>
         </div>
     }
 
+    const tabs = tab == 'overview' ? [
+        { name: '房屋分布', tab: 'overview' },
+        { name: '基础设施', tab: 'emergency' }
+    ] : [
+        { name: '应急机构', tab: 'yjjg', className: 'emergency_button' },
+        { name: '应急队伍', tab: 'yjdw', className: 'emergency_button' },
+        { name: '应急专家', tab: 'yjzj', className: 'emergency_button' },
+        { name: '医疗机构', tab: 'yljg', className: 'emergency_button' },
+        { name: '避难场所', tab: 'bncs', className: 'emergency_button' },
+    ]
+
+    const renderLayer = () => {
+        if (!loca) return;
+        const dataSource = [
+            { lng: 116.194039, lat: 28.712472, data: 14 },
+            { lng: 116.051963, lat: 28.546815, data: 25 },
+            { lng: 116.064207, lat: 28.694385, data: 35 },
+            { lng: 115.983192, lat: 28.345722, data: 20 }
+        ]
+
+        if (gridLayer && loca) loca.remove(gridLayer)
+
+        let data = []
+        dataSource.map(x => {
+            data.push({
+                "type": "Feature", "properties": { "time": 1534296083, x },
+                "geometry": { "coordinates": [x.lng, x.lat], "type": "Point", x }
+            })
+        })
+        var geo = new Loca.GeoJSONSource({
+            data: {
+                "features": data, "type": "FeatureCollection"
+            }
+        });
+
+        gridLayer = new Loca.GridLayer({
+            // loca,
+            zIndex: 10,
+            opacity: 1,
+            visible: true,
+            zooms: [2, 22],
+            acceptLight: true,
+            // shinniness: 0,
+            // cullface: 'none',
+            // depth: true,
+            // hasSide: true,
+        });
+
+
+        var colors = ['#FAE200', '#D27E37', '#C53634', '#C12B6E', '#A92E9A', '#67238A', '#211A50', '#18244E'].reverse();
+        var heights = [100, 200, 400, 600, 800, 1400, 1800, 4000];
+        gridLayer.setSource(geo);
+        gridLayer.setStyle({
+            unit: 'meter',
+            radius: 200,
+            gap: 0,
+            altitude: 100,
+            // height: function (index, feature) {
+            //     return 6000
+
+            // },
+            // topColor: function (index, feature) {
+            //     console.log(feature)
+            //     return 'red'
+            // },
+            // sideColor: function (index, feature) {
+            //     return 'red'
+            // }
+            height: function (index, feature) {
+                const baseHeigh = 1200
+                return feature.coordinates[0].properties.x.data > 30 ? baseHeigh * 6 :
+                    feature.coordinates[0].properties.x.data > 25 ? baseHeigh * 5 :
+                        feature.coordinates[0].properties.x.data > 20 ? baseHeigh * 4 :
+                            feature.coordinates[0].properties.x.data > 15 ? baseHeigh * 3 :
+                                feature.coordinates[0].properties.x.data > 10 ? baseHeigh * 2 :
+                                    feature.coordinates[0].properties.x.data > 0 ? baseHeigh * 1 : 0
+
+            },
+            topColor: function (index, feature) {
+                return feature.coordinates[0].properties.x.data > 30 ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
+            },
+            sideColor: function (index, feature) {
+                return feature.coordinates[0].properties.x.data > 30 ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
+            },
+            sideTopColor: function (index, feature) {
+                return feature.coordinates[0].properties.x.data > 30 ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
+            },
+            sideBottomColor: function (index, feature) {
+                return feature.coordinates[0].properties.x.data > 30 ? 'rgba(255,136,140,0.5)' : 'rgba(117,154,206,0.5)'
+            },
+        });
+        gridLayer = gridLayer
+        loca.add(gridLayer);
+
+        dataSource.map(s => {
+            // 创建纯文本标记
+            var text = new AMap.Text({
+                text: '纯文本标记',
+                anchor: 'center', // 设置文本标记锚点
+                // draggable: true,
+                cursor: 'pointer',
+                angle: 0,
+                // visible: false,
+                offset: [0, -s.data],
+                style: {
+                    'padding': '5px 10px',
+                    'margin-bottom': '1rem',
+                    'border-radius': '.25rem',
+                    'background-color': '#143857',
+                    // 'width': '12rem',
+                    'border-width': 0,
+                    'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
+                    'text-align': 'center',
+                    'font-size': '16px',
+                    'color': '#DCF2FD',
+                },
+            });
+            text.setMap(map);
+            text.show();
+            text.setText(s.data + 'm')
+            text.setPosition(new AMap.LngLat(s.lng, s.lat));
+        })
+
+
+        // // 拾取
+        // map.on('mousemove', (e) => {
+        //     text.setMap(map);
+        //     var feat = gridLayer.queryFeature(e.pixel.toArray());
+
+        //     if (feat) {
+        //         text.show();
+        //         text.setText(feat.coordinates[0].properties.x.data + 'm');
+        //         text.setPosition(e.lnglat);
+
+        //     } else {
+        //         text.hide();
+        //     }
+        // });
+    }
+
     return (
         <>
             {/* 延缓加载遮罩 */}
@@ -494,29 +543,34 @@ function Map(props) {
 
             {/* 地图容器 */}
             <div className="gis" id={MAPDOMID} />
-            {map && renderMarkers()}
-            {map && renderAlarms()}
+
 
             {/* 底部按钮 */}
-            {!delay && [
-                { name: '房屋分布', tab: 'overview' },
-                // { name: '人口分布', tab: 'person' },
-                { name: '基础设施', tab: 'emergency' }
-            ].map((s, index) => {
-                return <div className={'water-gis-button' + (index + 1)}
-                    onClick={() => {
-                        setTab(s.tab)
-                        props.changeTab(s.tab)
-                    }}
-                >
-                    <div className={`button_img ${tab == s.tab ? 'button_img_select' : ''}`} />
-                    <div>{s.name}</div>
-                </div>
+            {!delay && tabs.map((s, index) => {
+                return <>
+                    <div className={s.className ? `${s.className} ${s.className}${index + 1}` : 'water-gis-button' + (index + 1)}
+                        onClick={() => {
+                            setTab(s.tab)
+                            s.className ? props.changeEmengencyTab(s.tab) : props.changeTab(s.tab)
+                        }}
+                    >
+                        <div className={
+                            s.className ? `button_${s.tab} ${tab == s.tab ? 'button_' + s.tab + '_select' : ''}` :
+                                `button_img ${tab == s.tab ? 'button_img_select' : ''}`} />
+                        <div>{s.name}</div>
+                        {s.className && <div className='dotbg'>7</div>}
+                    </div>
+                    {
+                        tab !== 'overview' && <> <div className='icon_left'></div>
+                            <div className='icon_right'></div></>
+                    }
+                </>
             })
             }
 
             {/* 左上角图例 */}
-            {renderLeftTop()}
+            {tab == 'overview' && renderLeftTop()}
+            {tab == 'emergency' && renderWaterwarningbg()}
             {renderRightBottom()}
             {/* 四周遮罩 */}
             <div className='gis-left'></div>
diff --git a/super-screen/client/src/sections/water-prevention/containers/gis.less b/super-screen/client/src/sections/water-prevention/containers/gis.less
index 2e3de89..54066f4 100644
--- a/super-screen/client/src/sections/water-prevention/containers/gis.less
+++ b/super-screen/client/src/sections/water-prevention/containers/gis.less
@@ -48,7 +48,7 @@
     z-index: 999;
 
     .button_img {
-        background: url('/assets/images/homePage/communtity/home.png');
+        background: url('/assets/images/homePage/water/home.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         width: 76.95px;
@@ -56,7 +56,7 @@
     }
 
     .button_img_select {
-        background: url('/assets/images/homePage/communtity/homeselect.png');
+        background: url('/assets/images/homePage/water/homeselect.png');
     }
 
 
@@ -77,7 +77,7 @@
     z-index: 999;
 
     .button_img {
-        background: url('/assets/images/homePage/communtity/devicebutton.png');
+        background: url('/assets/images/homePage/water/devicebutton.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         width: 76.95px;
@@ -85,21 +85,21 @@
     }
 
     .button_img_select {
-        background: url('/assets/images/homePage/communtity/devicebuttonselect.png');
+        background: url('/assets/images/homePage/water/devicebuttonselect.png');
     }
 
 
 }
 
-.gis-infowindow {
-    width: 302px;
-    height: 420px;
-    background: url('/assets/images/homepage/communtity/infowindowbg.png') no-repeat;
+.water-gis-infowindow {
+    width: 276px;
+    height: 376px;
+    background: url('/assets/images/homepage/water/waterinfowindow.png') no-repeat;
     background-size: 100% 100%;
     opacity: 0.8;
     padding-left: 69px;
     padding-left: 22px;
-    padding-top: 157px;
+    padding-top: 197px;
     color: #fff;
 
     .gis_exit {
@@ -130,13 +130,18 @@
             margin-right: 12px;
         }
 
-        .gis_text {
-            font-family: SourceHanSansCN-Regular;
-            font-weight: 400;
-            font-size: 14px;
-            color: #FFFFFF;
-            letter-spacing: 0;
-            line-height: 21px;
+        .gis_text_on {
+            width: 83px;
+            height: 24px;
+            background: url('/assets/images/homepage/water/on.png') no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .gis_text_off {
+            width: 83px;
+            height: 24px;
+            background: url('/assets/images/homepage/water/off.png') no-repeat;
+            background-size: 100% 100%;
         }
     }
 }
@@ -194,9 +199,10 @@
 
 .gis-infowindow-alarm {
     background: url('/assets/images/homepage/communtity/alarminfowindow.png') no-repeat;
-    height: 432px;
+    background-size: 100% 100% !important;
+    height: 380px !important;
     width: 311px;
-    padding-top: 107px;
+    padding-top: 137px !important;
 
     .gis_exit {
         cursor: pointer;
@@ -294,141 +300,405 @@
 }
 
 
-.home_left {
+.water_gis_home_left {
     position: absolute;
     left: 26%;
     top: 3%;
     z-index: 999;
-    font-family: YouSheBiaoTiHei;
-    font-size: 16px;
+    // font-family: YouSheBiaoTiHei;
+    font-size: 14px;
     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%;
-    }
+    .left_item {
+        width: 153px;
+        height: 80px;
+        background: rgba(2, 39, 81, 0.73);
+        margin-bottom: 8px;
+        color: #C0E2FF;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .gis_item_left {
+            width: 55px;
+            height: 55px;
+
+            .high_risk {
+                width: 55px;
+                height: 55px;
+                background: url('/assets/images/homepage/water/high_risk.png') no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .middle_risk {
+                width: 55px;
+                height: 55px;
+                background: url('/assets/images/homepage/water/middle_risk.png') no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .low_risk {
+                width: 55px;
+                height: 55px;
+                background: url('/assets/images/homepage/water/low_risk.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%;
+        .gis_item_right {
+            width: 90px;
+
+            .high_text {
+                font-family: D-DIN-Italic;
+                line-height: 34px;
+                font-size: 38px;
+                color: #FFFFFF;
+                letter-spacing: 0;
+                text-shadow: 0 0 7px #FF0000;
+                margin-right: 17px;
+            }
+
+            .middle_text {
+                font-family: D-DIN-Italic;
+                line-height: 34px;
+                font-size: 38px;
+                color: #FFFFFF;
+                letter-spacing: 0;
+                text-shadow: 0 0 7px #FF8600;
+                margin-right: 17px;
+            }
+
+            .low_text {
+                font-family: D-DIN-Italic;
+                line-height: 34px;
+                font-size: 38px;
+                color: #FFFFFF;
+                letter-spacing: 0;
+                text-shadow: 0 0 7px #008AFF;
+                margin-right: 17px;
+            }
+        }
     }
 
 }
 
-.home_right {
+.water_home_right {
     position: absolute;
-    right: 26%;
+    right: 24%;
     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;
+    width: 436px;
+    height: 102px;
+    background-image: linear-gradient(270deg, rgba(4, 55, 126, 0.32) 0%, rgba(0, 18, 65, 0.47) 50%, rgba(0, 18, 65, 0.42) 96%);
+    color: rgba(147, 171, 192, 1);
+    padding-top: 7px;
 
-    ._lz {
+    ._right_row1 {
+        width: 100%;
         display: flex;
         align-items: center;
+        padding-right: 22px;
+        justify-content: flex-end;
 
-        ._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 {
+        .monitor_text {
+            background: linear-gradient(180deg, #FFFFFF, rgba(17, 124, 213, 1));
+            background-clip: border-box;
+            -webkit-background-clip: text;
+            color: transparent;
             font-family: YouSheBiaoTiHei;
-            font-size: 14px;
+            font-size: 16px;
             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;
+        ._monitor {
+            width: 20px;
+            height: 29.84px;
+            background: url('/assets/images/homepage/water/_monitor.png') no-repeat;
             background-size: 100% 100%;
-            margin-right: 4px;
+            margin-right: 13px;
         }
+    }
 
-        span {
-            font-family: YouSheBiaoTiHei;
-            font-size: 14px;
-            background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(36, 220, 247, 1) 100%);
+    ._right_row2 {
+        width: 100%;
+        display: flex;
+
+        .column1 {
+            background: linear-gradient(180deg, #FFFFFF, rgba(17, 124, 213, 1));
+            background-clip: border-box;
             -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            color: transparent;
+            font-family: YouSheBiaoTiHei;
+            font-size: 16px;
             letter-spacing: 0;
+            width: 108px;
+            margin-top: 9px;
+            margin-left: 16px;
+        }
+
+        .column2 {
+            width: calc(100% - 142px);
+
+            .level3 {
+                width: 92px;
+                height: 4px;
+                background-image: linear-gradient(90deg, #008AFF 1%, #0260B0 100%);
+            }
+
+            .level2 {
+                width: 92px;
+                height: 4px;
+                background-image: linear-gradient(90deg, #FF8E11 1%, #9F5504 100%);
+            }
+
+            .level1 {
+                width: 92px;
+                height: 4px;
+                background-image: linear-gradient(90deg, #FF0000 1%, #910000 100%);
+            }
         }
     }
+}
 
-    ._cz {
-        display: flex;
-        align-items: center;
-        margin-top: 10px;
+.water_home_right_back {
+    position: absolute;
+    right: 24%;
+    bottom: 7%;
+    z-index: 999;
+    width: 158px;
+    height: 28px;
+    font-size: 16px;
+    color: rgba(153, 247, 255, 1);
+    letter-spacing: 2px;
+    text-align: center;
+    text-shadow: 0 0 18px rgba(0, 128, 255, 0.8);
+    border: 1px solid rgba(0, 128, 255, 0.8);
+    background: rgba(2, 29, 51, 0.68);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    ._back_icon {
+        width: 35px;
+        height: 35.5px;
+        background: url('/assets/images/homepage/water/back.png') no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.waterwarningbg {
+    background: url('/assets/images/homepage/water/waterwarningbg.png') no-repeat;
+    background-size: 100% 100% !important;
+    width: 755.35px;
+    min-height: 78px;
+    position: absolute;
+    top: 2%;
+    left: 30%;
+    display: flex;
+    padding-left: 33px;
+    align-items: center;
+    z-index: 1111;
+
+    ._alarm_column1 {
+        width: 220px;
+        font-size: 16px;
+        color: #FFF;
+        text-align: center;
 
-        ._icon {
+        ._state {
+            color: #D1C800;
+            background: rgba(255, 247, 0, 0.2);
+            text-align: center;
+            width: 50px;
+            height: 18px;
             display: inline-block;
-            width: 15px;
-            height: 15px;
-            background: url('/assets/images/homepage/communtity/czicon.png') no-repeat;
-            background-size: 100% 100%;
-            margin-right: 4px;
+            font-size: 14px;
         }
+    }
 
-        span {
-            font-family: YouSheBiaoTiHei;
+    ._alarm_column2 {
+        width: calc(100% - 230px);
+        padding-right: 20px;
+
+        ._text_info {
             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;
+            color: #C0E2FF;
+            letter-spacing: 1px;
+            line-height: 20px;
         }
     }
+}
+
+.emergency_button {
+    position: absolute;
+    font-family: YouSheBiaoTiHei;
+    font-size: 12px;
+    color: #ECF7FF;
+    letter-spacing: 0;
+    width: 76.95px;
+    text-align: center;
+    cursor: pointer;
+    z-index: 999;
+
+    .dotbg {
+        width: 28px;
+        height: 28px;
+        background: url('/assets/images/homePage/water/dotbg.png') no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        right: 6%;
+        top: -14%;
+        font-family: D-DINExp-Italic;
+        font-weight: Italic;
+        font-size: 20px;
+        color: #003FA6;
+        text-align: center;
+    }
+}
+
+.emergency_button1 {
+    left: 35%;
+    bottom: -5%;
+}
+
+.emergency_button2 {
+    left: 41.5%;
+    bottom: -4%;
+}
+
+.emergency_button3 {
+    left: 48%;
+    bottom: -3%;
+}
+
+.emergency_button4 {
+    left: 54.5%;
+    bottom: -4%;
+}
+
+.emergency_button5 {
+    left: 61%;
+    bottom: -5%;
+}
+
+.icon_left {
+    width: 36px;
+    height: 36px;
+    background: url('/assets/images/homepage/water/left.png') no-repeat;
+    background-size: 100% 100% !important;
+    position: absolute;
+    left: 32%;
+    bottom: -4%;
+    cursor: pointer;
+}
+
+.icon_right {
+    width: 36px;
+    height: 36px;
+    background: url('/assets/images/homepage/water/right.png') no-repeat;
+    background-size: 100% 100% !important;
+    position: absolute;
+    right: 32%;
+    bottom: -4%;
+    cursor: pointer;
+}
+
+.button_yjjg {
+    background: url('/assets/images/homePage/water/yjjg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 76.95px;
+    height: 64px;
+}
+
+.button_yjjg_select {
+    background: url('/assets/images/homePage/water/yjjgselect.png');
+}
+
+.button_yjdw {
+    background: url('/assets/images/homePage/water/yjdw.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 76.95px;
+    height: 64px;
+}
+
+.button_yjdw_select {
+    background: url('/assets/images/homePage/water/yjdwselect.png');
+}
+
+.button_yjzj {
+    background: url('/assets/images/homePage/water/yjzj.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 76.95px;
+    height: 64px;
+}
+
+.button_yjzj_select {
+    background: url('/assets/images/homePage/water/yjzjselect.png');
+}
+
+.button_yljg {
+    background: url('/assets/images/homePage/water/yljg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 76.95px;
+    height: 64px;
+}
+
+.button_yljg_select {
+    background: url('/assets/images/homePage/water/yljgselect.png');
+}
+
+.button_bncs {
+    background: url('/assets/images/homePage/water/bncs.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 76.95px;
+    height: 64px;
+}
+
+.button_bncs_select {
+    background: url('/assets/images/homePage/water/bncsselect.png');
+}
+
+._weather_container {
+    width: 264px;
+    height: 45px;
+    position: absolute;
+    left: 60px;
+    top: 38px;
+    display: flex;
+
+    .column1 {
+        width: 100px;
+        font-size: 16px;
+        color: #ECF7FF;
+        text-align: right;
+        padding-right: 12px;
+    }
+
+    ._divider {
+        width: 1px;
+        height: 39px;
+        background-color: rgba(123, 124, 128, 1);
+    }
+
+    .weather_icon {
+        width: 44.02px;
+        height: 40px;
+        background: url('/assets/images/homePage/water/weather.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .column2 {
+        width: 65px;
+        text-align: left;
+        font-size: 16px;
+        color: #ECF7FF;
+    }
 }
\ 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 4c3d26b..4bee23a 100644
--- a/super-screen/client/src/sections/water-prevention/containers/homePage.js
+++ b/super-screen/client/src/sections/water-prevention/containers/homePage.js
@@ -10,8 +10,9 @@ 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 Weather from '../components/weather'
 import Gis from './gis';
+import moment from 'moment';
 import './style.less'
 
 function homePage(props) {
@@ -20,6 +21,8 @@ function homePage(props) {
     const cardHeight = document.body.clientHeight * 0.896 * 0.32
     const cardContentHeight = cardHeight - 42 - 13
     const [tab, setTab] = useState('overview');// overview   emergency
+    const [emengencyTab, setEmengencyTab] = useState('yjjg');
+
     const SCREEN_COMPONENTS = {
         overview: { leftTop: LeftTop, leftBottom: LeftBottom, rightTop: RightTop, rightBottom: RightBottom },
         emergency: { leftTop: EmergencyLeftTop, leftBottom: EmergencyLeftBottom, rightTop: EmergencyRightTop, rightBottom: EmergencyRightBottom }
@@ -31,7 +34,8 @@ function homePage(props) {
                 <div className='water_title_text'>
                     水务防汛实时监测预警系统
                 </div>
-                <div onClick={() => { dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >返回平台</div>
+                <Weather />
+                <div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
             </div>
             <div className='homepage-left homepage-left-left'>
                 <div div className="list">
@@ -48,23 +52,23 @@ function homePage(props) {
                     changeTab={(e) => {
                         setTab(e)
                     }}
+                    changeEmengencyTab={(e) => {
+                        setEmengencyTab(e)
+                    }}
                 />
             </div>
             <div className='homepage-left homepage-left-right'>
                 <div div className="list">
                     <div className='child-right' style={childStyle}>
-                        <currentContainer.rightTop />
+                        <currentContainer.rightTop emengencyTab={emengencyTab} />
                     </div>
                     <div className='child-right' style={childStyle}>
                         <currentContainer.rightBottom />
                     </div>
                 </div>
             </div>
-
         </div >
     </>
-
-
 }
 
 function mapStateToProps(state) {