(+)应急资源接口

api/app/lib/controllers/superScreen/water.js

@@ -17,6 +17,39 @@ function getRealStateData(opts) {
     }
 }
 
+function getEmergencyList(opts) {
+    return async function (ctx, next) {
+
+        const models = ctx.fs.dc.models;
+        let errMsg = { message: '获取水利应急抢险数据失败' }
+        try {
+            //EmergencyMaterialStatistics 应急物资
+            //EmergencyShelterBasicInfoStatistics 应急避难场所
+            //RescueTeams(医疗救援队伍  人民武装部救援队伍  消防救援救援队伍)
+            const emergencyMaterial = await models.EmergencyMaterialStatistics.findAll();
+            const eEmergencyShelter = await models.EmergencyShelterBasicInfoStatistics.findAll();
+            const rescue = await models.RescueTeams.findAll();
+
+            const rslt = {
+                yjwz: emergencyMaterial,//应急物资
+                xfjy: rescue.filter(s => s.teamCategory == '消防救援救援队伍'),//消防救援
+                rmwzb: rescue.filter(s => s.teamCategory == '人民武装部救援队伍'),//人民武装部
+                yljy: rescue.filter(s => s.teamCategory == '医疗救援队伍'),//医疗救援
+                yjbns: eEmergencyShelter, //应急避难场所
+            }
+
+            ctx.status = 200;
+            ctx.body = rslt;
+        } catch (error) {
+            ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+            ctx.status = 400;
+            ctx.body = errMsg
+        }
+    }
+}
+
+
 module.exports = {
-    getRealStateData
+    getRealStateData,
+    getEmergencyList
 }

api/app/lib/middlewares/authenticator.js

@@ -60,6 +60,7 @@ let isPathExcluded = function (opts, path, method) {
         excludeOpts.push({ p: '/login', o: 'POST' });
         excludeOpts.push({ p: '/logout', o: 'PUT' });
         excludeOpts.push({ p: '/water/realstate', o: 'GET' });
+        excludeOpts.push({ p: '/water/emergency', o: 'GET' });
         
         excludes = new ExcludesUrls(excludeOpts);
     }

api/app/lib/routes/superScreen/water.js

@@ -8,4 +8,7 @@ module.exports = function (app, router, opts, AuthCode) {
     app.fs.api.logAttr['GET/water/realstate'] = { content: '获取实时态势数据', visible: true };
     router.get('/water/realstate', water.getRealStateData(opts));
 
+    //获取水利应急抢险数据
+    app.fs.api.logAttr['GET/water/emergency'] = { content: '获取水利应急抢险数据', visible: true };
+    router.get('/water/emergency', water.getEmergencyList(opts));
 };

super-screen/client/src/sections/water-prevention/components/emergency-right-top.js

@@ -5,14 +5,15 @@ import './style.less';
 function CitySafty(props) {
     const { emengencyTab, emerResource } = props;
     const tab_name = {
-        yjjg: '应急机构',
+        yjwz: '应急物资',
-        yjdw: '应急队伍',
+        xfjy: '消防救援',
-        yjzj: '应急专家',
+        rmwzb: '人民武装部',
-        yljg: '医疗机构',
+        yljy: '医疗救援',
-        bncs: '避难场所',
+        yjbns: '应急避难场所',
     }
+
     return <Box title={tab_name[emengencyTab]} >
-        <div className='fire_item_right_container'>
+        <div className='water_item_right_container'>
             {
                 emerResource?.map((s, index) => {
                     return <div className='fire_right_item'>

super-screen/client/src/sections/water-prevention/components/left-top.js

@@ -1,13 +1,16 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import { RouteRequest } from '@peace/utils';
-import { WEATHERArr, WEATHERMARGIN, ICONSMAP } from '../constants/weather';
+import { WEATHERMARGIN, ICONSMAP } from '../constants/weather';
+import { ApiTable, useFsRequest, getName, getPhone } from '$utils';
 import { Box } from '$components';
 import { Select } from 'antd';
 const { Option } = Select;
 
 function BasicInfo() {
-    const [weather, setWeather] = useState([]);
+    const { data: list = [] } = useFsRequest({ url: 'water/realstate' });
 
+    const [weather, setWeather] = useState([]);
+    const [id, setId] = useState();
     const queryWeather = () => {
         RouteRequest.get(`/query/weather/3d?location=101240101`).then((res) => {
             if (res?.daily?.length === 3) {
@@ -16,6 +19,12 @@ function BasicInfo() {
         });
     };
 
+    useEffect(() => {
+        if (list?.length > 0) {
+            setId(list[0]?.id)
+        }
+    }, [list])
+
     useEffect(() => {
         queryWeather();
         const timeUpdate = setInterval(() => {
@@ -38,18 +47,18 @@ function BasicInfo() {
         <Select
             className="gis-search-select"
             popupClassName="super-dropdownClassName"
-            style={{ width: 120, height: 24 }}
+            style={{ width: 140, height: 24 }}
             showSearch={false}
             optionFilterProp="children"
-            key={Math.random()}
+            value={id}
-            defaultValue={'小蓝经开区'}
+            onChange={e => { setId(e) }}
         >
-            <Option key={'小蓝经开区'} value={'小蓝经开区'}>小蓝经开区</Option>
+            {list?.map(s => <Option key={s.id} value={s.id}>{s.name}</Option>)}
-            <Option key={'东新乡'} value={'东新乡'}>东新乡</Option>
-            <Option key={'莲塘镇'} value={'莲塘镇'}>莲塘镇</Option>
         </Select>
     );
 
+    const data = list?.find(s => s.id == id)
+
     return <Box title={"实时态势"} subtitleSelect={renderSubtitle()}>
         <div className='real_state_container'>
             <div className='real_weather'>
@@ -93,19 +102,19 @@ function BasicInfo() {
 
             <div className='basictextbg'>
                 <span>名称：</span>
-                <span className='row1_row3_subtitle'>指挥部</span>
+                <span className='row1_row3_subtitle'>{data?.name}</span>
             </div>
             <div className='basictextbg'>
                 <span>设立地点：</span>
-                <span className='row1_row3_subtitle'>人民政府</span>
+                <span className='row1_row3_subtitle'>{data?.location}</span>
             </div>
             <div className='basictextbg'>
                 <span>指挥责任人：</span>
-                <span className='row1_row3_subtitle'>张某某</span>
+                <span className='row1_row3_subtitle'>{data?.commander?.split('、').map(s => getName(s)).toString()}</span>
             </div>
             <div className='basictextbg'>
                 <span>管辖堤长：</span>
-                <span className='row1_row3_subtitle'>124米</span>
+                <span className='row1_row3_subtitle'>{data?.dikeLength}</span>
             </div>
         </div>
     </Box>

super-screen/client/src/sections/water-prevention/components/style.less

@@ -113,7 +113,7 @@
 
 }
 
-.fire_item_right_container {
+.water_item_right_container {
     display: flex;
     width: 100%;
     height: 100%;
@@ -123,77 +123,11 @@
     overflow: auto;
     padding-top: 24px;
 
-    .fire_right_item {
-        padding-top: 16px;
-        padding-bottom: 16px;
-        width: 95%;
-        height: 183px;
-        background: url('/assets/images/homepage/fire/rightbgbig.png') no-repeat;
-        background-size: 100% 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #ECF7FF;
-        position: relative;
-        margin-bottom: 20px;
-
-        .item_left {
-            width: 50px;
-            height: 50px;
-            background: url('/assets/images/homepage/fire/iconhome.png') no-repeat;
-            background-size: 100% 100%;
-        }
-
-        .item_right {
-            width: calc(100% - 100px);
-            display: flex;
-            flex-wrap: wrap;
-
-
-            .item_right_left {
-                width: 100px;
-                font-size: 14px;
-                color: #ECF7FF;
-                font-family: '';
-            }
-
-            .item_right_right {
-                width: 180px;
-                font-size: 14px;
-                color: #9CF2FF;
-                letter-spacing: 0;
-                font-family: '';
-                text-align: left;
-            }
-
 
-        }
-
-        .position_bg {
-            position: absolute;
-            left: 0%;
-            bottom: 0%;
-            width: 85px;
-            height: 30px;
-            background: rgba(31, 237, 255, 0.1);
-            background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 80%, rgba(0, 255, 244, 0.98) 100%);
-            border-radius: 0 20px 0 0;
-            display: flex;
-            justify-content: space-evenly;
-            align-items: center;
-
-            .position_icon {
-                width: 12px;
-                height: 12px;
-                background: url('/assets/images/homepage/fire/position.png') no-repeat;
-                background-size: 100% 100%;
-            }
-        }
-    }
 }
 
 
-.fire_item_right_container::-webkit-scrollbar {
+.water_item_right_container::-webkit-scrollbar {
     width: 0 !important
 }
 
@@ -548,7 +482,7 @@
 
 .super-dropdownClassName {
     color: #a1c1d1 !important;
-    background-color: rgba(36, 220, 247, 0.3) !important;
+    background-color: rgba(36, 220, 247, 0.6) !important;
     border: 1px solid rgba(36, 220, 247, 1);
     max-height: 200px;
 
@@ -558,7 +492,7 @@
     }
 
     .ant-select-item-option-content {
-        color: #a1c1d1 !important;
+        color: #FFF !important;
     }
 
     .ant-select-item-option-active {
@@ -710,7 +644,7 @@
         }
     }
 
-   
+
 }
 
 .prevent_doc {

super-screen/client/src/sections/water-prevention/containers/gis - 副本.js

@@ -0,0 +1,470 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { render } from 'react-dom';
+import { data as heatmapData } from './data'
+import { SHUI_ZHAN } from '../constants/water';
+import './gis.less'
+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: '回迁房',
+    markerblue: '城中村',
+    markeryellow: '廉租房',
+}
+function Map(props) {
+    const { trendData, waterLevelAlarms } = props;
+    const [delay, setDelay] = useState(true)
+    const [tab, setTab] = useState('overview')
+
+    // 地图初始化
+    const loadMap = () => {
+        // 图片图层 实现瓦片地图中国地图样式 bounds 第一个点为左下角 第二个点为右上角
+        const imageLayer = new AMap.ImageLayer({
+            url: '/assets/images/map1.svg',
+            bounds: new AMap.Bounds(
+                [115.800221, 28.225659],
+                [116.334849, 28.973298],
+            ),
+            zooms: [3, 14],
+        });
+
+        map = new AMap.Map(MAPDOMID, {
+            center: [116.054664, 28.538966],
+            zoomEnable: true,
+            dragEnable: true,
+            viewMode: '3D',
+            pitch: 22.9,
+            labelzIndex: 130,
+            zoom: 10.3,
+            cursor: 'pointer',
+            mapStyle: 'amap://styles/300b147a96946a4f1c1b1b8eb1f92f76',
+            layers: [
+                AMap.createDefaultLayer(),
+                imageLayer,
+            ],
+        });
+
+        map.on('complete', () => {
+            setTimeout(() => {
+                setDelay(false)
+                map && renderMarkers()
+                map && renderAlarms()
+            }, 1500);
+        });
+
+        map.on('click', (e) => {
+            if (!e && !e.lnglat) {
+                return
+            }
+
+            const zoom = map.getZoom();
+            const pitch = map.getPitch();
+            const center = map.getCenter();
+            const Rotation = map.getRotation();
+            console.log('zoom' + zoom)
+            console.log('pitch' + pitch)
+            console.log('center' + center)
+            console.log('Rotation' + Rotation)
+            console.log('e.lnglat' + e.lnglat)
+        })
+
+        loca = new Loca.Container({ map: map })
+        // { map && renderMarkers() }
+        // { map && renderAlarms() }
+        // setTimeout(() => {
+        //     renderLayer()
+        //     createText()
+        // }, 1000);
+    };
+
+    const createText = () => {
+        var text = new AMap.Text({
+            text: '南昌县',
+            anchor: 'center', // 设置文本标记锚点
+            draggable: false,
+            // cursor: 'pointer',
+            zooms: [3, 11],
+            style: {
+                'padding': '.75rem 1.25rem',
+                'margin-bottom': '1rem',
+                'border-radius': '.25rem',
+                'background-color': 'rgba(238,77,90,0.001)',
+                'width': '8rem',
+                'border-width': 0,
+                //'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .1)',
+                'text-align': 'center',
+                'font-size': '14px',
+                'color': '#AFEFFF',
+                'opacity': 1,
+                // 'font-weight': 'bold'
+            },
+            position: [115.934664, 28.538966]
+        });
+        text.setMap(map);
+
+    }
+    const drawBounds = () => {
+        let district = null;
+        let polygons = [];
+        //加载行政区划插件
+        if (!district) {
+            //实例化DistrictSearch
+            let opts = {
+                subdistrict: 0,   //获取边界不需要返回下级行政区
+                extensions: 'all',  //返回行政区边界坐标组等具体信息
+                level: 'district'  //查询行政级别为 市
+            };
+            district = new AMap.DistrictSearch(opts);
+        }
+        //行政区查询
+        district.setLevel('district')
+        district.search('南昌县', function (status, result) {
+            map.remove(polygons)//清除上次结果
+            polygons = [];
+            let bounds = result.districtList[0].boundaries;
+            if (bounds) {
+                for (let i = 0, l = bounds.length; i < l; i++) {
+                    //生成行政区划polygon
+                    let polygon = new AMap.Polygon({
+                        strokeWeight: 1,
+                        path: bounds[i],
+                        fillOpacity: 0.4,
+                        fillColor: '#1F2F4D',
+                        strokeColor: '#DE7B35',
+                        fillOpacity: 0.35, //填充透明度
+                    });
+                    polygons.push(polygon);
+                }
+            }
+            map.add(polygons)
+            // map.setFitView(polygons);//视口自适应
+        });
+    }
+
+    // 初始化GIS 组件销毁清空定时器
+    useEffect(() => {
+        loadMap();
+    }, [trendData, waterLevelAlarms]);
+
+    const renderMarkers = () => {
+        map.clearMap();
+        map.setZoom(10.3)
+        map.setCenter([116.054664, 28.538966])
+        map.setPitch(22.9)
+        map.setRotation(1.7000)
+        if (loca && heatmap) loca.remove(heatmap)
+
+        //初始层级 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' },
+        // ]
+
+        //初始点位显示
+        SHUI_ZHAN.map((x, index) => {
+            var marker = new AMap.Marker({
+                position: new AMap.LngLat(x.location[0], x.location[1]),
+                // 将一张图片的地址设置为 icon
+                icon: '/assets/images/homepage/water/_monitor.png',
+                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
+                offset: new AMap.Pixel(-13, -30),
+                zooms: [3, 14],
+            });
+            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)
+            });
+
+            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>
+                            <div className='gis_item'>
+                                <span className='gis_title'>2#提升泵：</span>
+                                <div className='gis_text_on'>
+                                </div>
+                            </div>
+                            <div className='gis_item'>
+                                <span className='gis_title'>3#提升泵：</span>
+                                <div className='gis_text_off'>
+                                </div>
+                            </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 = () => {
+        if (tab == 'person' || !waterLevelAlarms.length || !trendData.length) {
+            return;
+        }
+        const alarms = waterLevelAlarms.map(a => {
+            let alarm = {
+                lng: a.lng,
+                lat: a.lat,
+                // type: 'device', 
+                name: a.alarms[0]?.source.name,
+                kind: 'markeralarm'
+            };
+            for (const t of trendData) {
+                if (t?.id == a.alarms[0]?.source.id) {
+                    alarm.waterLevel = t.waterLevel;
+                    alarm.alert = t.alert;
+                }
+            }
+            return alarm;
+        })
+        alarms.map((x, index) => {
+            var marker = new AMap.Marker({
+                position: new AMap.LngLat(x.lng, x.lat),
+                // 将一张图片的地址设置为 icon
+                icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
+                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
+                offset: new AMap.Pixel(-13, -30),
+                zooms: [3, 14],
+                zIndex: 13,
+            });
+            marker.setTitle(x.name);
+            map.add(marker);
+
+            let infowindow = new AMap.InfoWindow({
+                isCustom: true,  //使用自定义窗体
+                content: `<div id="map-content" class="gis-infowindow-alarm">
+                    <div style="height:${360}px;" id="alarmcontentid${x.name}"></div></div>`,
+                offset: new AMap.Pixel(233, 260)
+            });
+
+            let alarmOk = new AMap.InfoWindow({
+                isCustom: true,  //使用自定义窗体
+                // content: `<div id="map-content" class="gis-infowindow gis-infowindow-alarm">
+                //     <div style="height:${360}px;" id="contentid${x.name}"></div></div>`,
+                offset: new AMap.Pixel(233, 440)
+            });
+
+            marker.on('click', () => {
+                let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
+                infowindow.open(map, position);
+                // map.setCenter(position)
+                setTimeout(() => {
+                    if (document.getElementById(`alarmcontentid${x.name}`)) {
+                        render(<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'>{x.waterLevel}m</span>
+                            </div>
+                            <div className='gis_item'>
+                                <span className='gis_title'>预警水位</span>
+                                <span className='gis_text'>{x.alert}m</span>
+                            </div>
+                            <div className='gis_item'>
+                                <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'>高风险</span>
+                            </div>
+
+                        </div>,
+                            document.getElementById(`alarmcontentid${x.name}`));
+                    }
+                }, 50)
+            })
+        })
+    }
+
+    const renderLeftTop = () => {
+        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>
+    }
+
+    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='water_home_right_back' onClick={() => {
+                setTab('overview')
+                props.changeTab('overview')
+            }}>
+                <div className='_back_icon' /> 返回实时监测
+            </div>
+    }
+
+    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='_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: 'yjwz', className: 'emergency_button' },
+        { name: '消防救援', tab: 'xfjy', className: 'emergency_button' },
+        { name: '人民武装部', tab: 'rmwzb', className: 'emergency_button' },
+        { name: '医疗救援', tab: 'yljy', className: 'emergency_button' },
+        { name: '应急避难场所', tab: 'yjbns', className: 'emergency_button' },
+    ]
+
+    return (
+        <>
+            {/* 延缓加载遮罩 */}
+            {delay && <div id='delaydiv' style={{
+                width: '100%', height: '100%', left: 0, top: 0, zIndex: 1000, background: '#000000', position: 'absolute',
+                display: 'flex', alignItems: 'center', justifyContent: 'center'
+            }}>
+            </div>}
+
+            {/* 地图容器 */}
+            <div className="gis" id={MAPDOMID} />
+
+
+            {/* 底部按钮 */}
+            {!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'>{emergencyList[s.tab]?.length}</div>}
+                    </div>
+                    {/* {
+                        tab !== 'overview' && <> <div className='icon_left'></div>
+                            <div className='icon_right'></div></>
+                    } */}
+                </>
+            })
+            }
+
+            {/* 左上角图例 */}
+            {tab == 'overview' && renderLeftTop()}
+            {tab == 'emergency' && renderWaterwarningbg()}
+            {renderRightBottom()}
+            {/* 四周遮罩 */}
+            <div className='gis-left'></div>
+            <div className='gis-right'></div>
+            <div className='gis-top'></div>
+            <div className='gis-bottom'></div>
+        </>
+    );
+}
+
+export default connect()(Map);

super-screen/client/src/sections/water-prevention/containers/homePage.js

@@ -15,7 +15,7 @@ import Gis from './gis';
 import moment from 'moment';
 import './style.less'
 import { FullScreenContainer } from '$components'
-
+import { useFsRequest } from '$utils';
 function homePage(props) {
     const { dispatch, actions } = props;
     const {
@@ -33,10 +33,14 @@ function homePage(props) {
     const [structures, setStructures] = useState([]);
     const [waterLevelAlarms, setWaterLevelAlarms] = useState([]);
     const [emerResource, setEmerResource] = useState([]);
-
+    const { data: emergencyList = {} } = useFsRequest({ url: 'water/emergency' });
     const SCREEN_COMPONENTS = {
         overview: { leftTop: LeftTop, leftBottom: LeftBottom, rightTop: RightTop, rightBottom: RightBottom },
-        emergency: { leftTop: EmergencyLeftTop, leftBottom: EmergencyLeftBottom, rightTop: EmergencyRightTop, rightBottom: EmergencyRightBottom }
+        emergency: {
+            leftTop: EmergencyLeftTop, leftBottom: EmergencyLeftBottom,
+            rightTop: EmergencyRightTop,
+            rightBottom: null
+        }
     }
     const currentContainer = SCREEN_COMPONENTS[tab];
 
@@ -174,10 +178,10 @@ function homePage(props) {
                 </div>
                 <div className='homepage-left homepage-left-left'>
                     <div div className="list">
-                        <div className='child' style={childStyle}>
+                        <div className='child' style={childStyle} >
                             <currentContainer.leftTop />
                         </div>
-                        <div className='child' style={childStyle}>
+                        <div className='child' style={childStyle} >
                             <currentContainer.leftBottom waterLevelLength={trendData.length} waterLevelAlarms={waterLevelAlarms} />
                         </div>
                     </div>
@@ -195,16 +199,17 @@ function homePage(props) {
                         trendData={trendData}
                         waterLevelAlarms={waterLevelAlarms}
                         emerResource={emerResource}
+                        emergencyList={emergencyList}
                     />
                 </div>
                 <div className='homepage-left homepage-left-right'>
                     <div div className="list">
-                        <div className='child-right' style={childStyle}>
+                        <div className='child-right' style={{ ...childStyle, height: tab == 'emergency' ? '100%' : '49%' }} key={tab}>
-                            <currentContainer.rightTop emengencyTab={emengencyTab} emerResource={emerResource} trendData={trendData} />
+                            <currentContainer.rightTop emergencyList={emergencyList} emengencyTab={emengencyTab} emerResource={emerResource} trendData={trendData} />
                         </div>
-                        <div className='child-right' style={childStyle}>
+                        {currentContainer.rightBottom && <div className='child-right' style={childStyle}>
                             <currentContainer.rightBottom structures={structures} videoList={videoList} accessToken={accessToken} />
-                        </div>
+                        </div>}
                     </div>
                 </div>
             </div >

super-screen/client/src/utils/index.js

@@ -3,10 +3,11 @@ import { AuthorizationCode } from './authCode';
 import { ApiTable, RouteTable, } from './webapi'
 import Func from './func';
 import { useFsRequest } from './hooks';
-
+import { getName, getPhone } from './userDisplayHandle';
 export {
     AuthorizationCode,
     Func,
     ApiTable, RouteTable,
     useFsRequest,
+    getName, getPhone
 }

super-screen/client/src/utils/userDisplayHandle.js

@@ -0,0 +1,23 @@
+function getName(name) {
+    let newStr
+    if (name.length === 2) {
+        newStr = name.substr(0, 1) + '*'
+    } else if (name.length > 2) {
+        let char = ''
+        for (let i = 0, len = name.length - 2; i < len; i++) {
+            char += '*'
+        }
+        newStr = name.substr(0, 1) + char + name.substr(-1, 1)
+    } else {
+        newStr = name
+    }
+    return newStr
+}
+
+function getPhone(tel) {
+    if (!tel) return tel;
+    const phone = tel.replace(tel.substring(3, 7), '****')
+    return phone
+}
+
+export { getName, getPhone }