(*)社区gis设备接入

super-screen/client/src/sections/community-safty/containers/gis.js

@@ -1,22 +1,26 @@
 import React, { useEffect, useState } from 'react';
+import { Tooltip } from 'antd';
 import { connect } from 'react-redux';
 import { render } from 'react-dom';
-import { data as heatmapData } from './data'
+import { useMockRequest } from '$utils';
 import './gis.less'
-
 const MAPDOMID = 'fs-amap-container';
 let map = null;
-let heatmap = null;
-let loca = null;
-let interval = null;
-const MARKER_IMG_NAME = {
-    markergreen: '回迁房',
-    markerblue: '城中村',
-    markeryellow: '廉租房',
+const TYPES = {
+    1: '消防栓',
+    2: '水箱',
+    3: '烟感',
+    4: '配电箱'
 }
 function Map(props) {
     const [delay, setDelay] = useState(true)
     const [tab, setTab] = useState('home')
+    const [type, setType] = useState(3)
+
+    const { data: devices = [] } = useMockRequest({
+        url: 'https://superchangnan.anxinyun.cn/api/xiaofang/devices',
+        method: 'mockGet',
+    });
     // 地图初始化
     const loadMap = () => {
         // 图片图层 实现瓦片地图中国地图样式 bounds 第一个点为左下角 第二个点为右上角
@@ -46,10 +50,11 @@ function Map(props) {
         });
 
         map.on('complete', () => {
-            setTimeout(() => {
-                setDelay(false)
-            }, 1000);
-
+            setDelay(false)
+            // setTimeout(() => {
+            //     tab == 'home' && map && renderMarkers()
+            //     tab == 'device' && map && renderDevices()
+            // }, 1000);
         });
 
         map.on('click', (e) => {
@@ -68,242 +73,75 @@ function Map(props) {
             console.log('e.lnglat' + e.lnglat)
         })
 
-        loca = new Loca.Container({ map: map })
 
     };
 
-
-    // 初始化GIS 组件销毁清空定时器
     useEffect(() => {
         loadMap();
     }, []);
 
+    useEffect(() => {
+        if (!delay) {
+            tab == 'home' && map && renderMarkers()
+            tab == 'device' && map && renderDevices()
+        }
+    }, [tab]);
+
+    useEffect(() => {
+        if (!delay) map && renderDevices()
+    }, [type]);
+
+
     const renderMarkers = () => {
         map.clearMap();
         map.setZoom(10.3)
         map.setCenter([116.054664, 28.538966])
         map.setPitch(22.9)
         map.setRotation(1.7000)
-        if (loca && heatmap) loca.remove(heatmap)
-        if (tab == 'person') {
 
-            var geo = new Loca.GeoJSONSource({
-                data: heatmapData
-            });
 
-            heatmap = new Loca.HeatMapLayer({
-                // loca,
-                zIndex: 10,
-                opacity: 1,
-                visible: true,
-                zooms: [2, 22],
-            });
+        //初始层级 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.setSource(geo, {
-                radius: 20,
-                unit: 'px',
-                height: 10,
-                // radius: 10,
-                // unit: 'px',
-                // height: 10,
-                gradient: {
-                    0.1: 'rgba(50,48,118,1)',
-                    0.2: 'rgba(127,60,255,1)',
-                    0.4: 'rgba(166,53,219,1)',
-                    0.6: 'rgba(254,64,95,1)',
-                    0.8: 'rgba(255,98,4,1)',
-                    1: 'rgba(236,220,79,1)',
-                },
-                value: function (index, feature) {
-                    return feature.properties.count;
-                },
-                min: 0,
-                max: 10,  //4.6
-                heightBezier: [0, .53, .37, .98],
-            });
-            loca.add(heatmap);
-
-            map.on('click', (e) => {
-                const feat = heatmap.queryFeature(e.pixel.toArray());
-                const random = Math.random()
-                if (feat) {
-                    let infowindow = new AMap.InfoWindow({
-                        isCustom: true,  //使用自定义窗体
-                        content: `<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' style={{ marginTop: 20 }}>
-                                    <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>
-                                </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'>老人</span>
-                                    <span className='gis_text'>342人</span>
-                                </div>
-                            </div>,
-                                document.getElementById(`contentidheatmap${random}`));
-                        }
-                    }, 50)
+            { lng: 116.054664, lat: 28.538966, type: 'device', name: '廉租房1', kind: 'markergreen' },
+            { lng: 116.074711, lat: 28.746745, type: 'device', name: '廉租房2', kind: 'markerblue' },
+            { lng: 116.111632, lat: 28.56532, type: 'device', name: '廉租房3', kind: 'markeryellow' },
+            { lng: 115.978519, lat: 28.56532, type: 'device', name: '廉租房4', kind: 'markergreen' },
+            { lng: 115.95792, lat: 28.417395, type: 'device', name: '廉租房5', kind: 'markergreen' },
+        ]
 
-                }
+        //zoom14以上显示详情
+        const databig = [
+            { lng: 115.924246, lat: 28.554835, type: 'device', name: '廉租房1', kind: 'markergreenbig' },
+            { lng: 115.921495, lat: 28.553053, type: 'device', name: '廉租房2', kind: 'markerbluebig' },
+            { lng: 115.919115, lat: 28.557256, type: 'device', name: '廉租房3', kind: 'markeryellowbig' },
+        ]
+        //初始点位显示
+        data.filter(s => s.type == tab).map((x, index) => {
+            var marker = new AMap.Marker({
+                position: new AMap.LngLat(x.lng, x.lat),
+                // 将一张图片的地址设置为 icon
+                icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
+                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
+                offset: new AMap.Pixel(-13, -30),
+                zooms: [3, 14],
             });
-        } else {
-            //初始层级 zoom14以下显示聚合点
-            const data = [
-                { lng: 116.117906, lat: 28.678096, type: 'home', name: '廉租房1', kind: 'markergreen' },
-                { lng: 116.195238, lat: 28.842114, type: 'home', name: '廉租房2', kind: 'markerblue' },
-                { lng: 116.037227, lat: 28.558811, type: 'home', name: '廉租房3', kind: 'markeryellow' },
-                { lng: 115.925856, lat: 28.558811, type: 'home', name: '廉租房4', kind: 'markergreen' },
-                { lng: 115.989847, lat: 28.484411, type: 'home', name: '廉租房5', kind: 'markergreen' },
-
-                { lng: 116.054664, lat: 28.538966, type: 'device', name: '廉租房1', kind: 'markergreen' },
-                { lng: 116.074711, lat: 28.746745, type: 'device', name: '廉租房2', kind: 'markerblue' },
-                { lng: 116.111632, lat: 28.56532, type: 'device', name: '廉租房3', kind: 'markeryellow' },
-                { lng: 115.978519, lat: 28.56532, type: 'device', name: '廉租房4', kind: 'markergreen' },
-                { lng: 115.95792, lat: 28.417395, type: 'device', name: '廉租房5', kind: 'markergreen' },
-            ]
-
-            //zoom14以上显示详情
-            const databig = [
-                { lng: 115.924246, lat: 28.554835, type: 'device', name: '廉租房1', kind: 'markergreenbig' },
-                { lng: 115.921495, lat: 28.553053, type: 'device', name: '廉租房2', kind: 'markerbluebig' },
-                { lng: 115.919115, lat: 28.557256, type: 'device', name: '廉租房3', kind: 'markeryellowbig' },
-            ]
-            //初始点位显示
-            data.filter(s => s.type == tab).map((x, index) => {
-                var marker = new AMap.Marker({
-                    position: new AMap.LngLat(x.lng, x.lat),
-                    // 将一张图片的地址设置为 icon
-                    icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
-                    // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
-                    offset: new AMap.Pixel(-13, -30),
-                    zooms: [3, 14],
-                });
-                marker.setTitle(x.name);
-                map.add(marker);
-                marker.on('click', () => {
-                    map.setZoom(17.4)
-                    map.setCenter([115.922069, 28.554867])
-                    map.setPitch(47.30)
-                    map.setRotation(1.7000)
-                })
-            })
-            //下钻点位显示
-            databig.map((x, index) => {
-                var marker = new AMap.Marker({
-                    position: new AMap.LngLat(x.lng, x.lat),
-                    // 将一张图片的地址设置为 icon
-                    icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
-                    // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
-                    offset: new AMap.Pixel(-13, -30),
-                    zooms: [15, 19],
-                });
-                marker.setTitle(x.name);
-                map.add(marker);
-
-                let infowindow = new AMap.InfoWindow({
-                    isCustom: true,  //使用自定义窗体
-                    content: `<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)
-                })
+            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)
             })
-
-            if (tab == 'device') {
-                const data = [
-                    { lng: 115.921895, lat: 28.556351, type: 'device', name: '廉租房1', kind: 'devicemarker' },
-                    { lng: 115.920839, lat: 28.555323, type: 'device', name: '廉租房2', kind: 'devicemarker' },
-                    { lng: 115.918329, lat: 28.55445, type: 'device', name: '廉租房3', kind: 'devicemarker' },
-                    { lng: 115.919309, lat: 28.553166, type: 'device', name: '廉租房1', kind: 'devicemarker' },
-                    { lng: 115.921585, lat: 28.553925, type: 'device', name: '廉租房2', kind: 'devicemarker' },
-                    { lng: 115.92565, lat: 28.556996, type: 'device', name: '廉租房3', kind: 'devicemarker' },
-                    { lng: 115.922671, lat: 28.558769, type: 'device', name: '廉租房1', kind: 'devicemarker' },
-                ]
-
-                data.filter(s => s.type == tab).map((x, index) => {
-                    var marker = new AMap.Marker({
-                        position: new AMap.LngLat(x.lng, x.lat),
-                        // 将一张图片的地址设置为 icon
-                        icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
-                        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
-                        offset: new AMap.Pixel(-13, -30),
-                        zooms: [15, 19],
-                    });
-                    marker.setTitle(x.name);
-                    map.add(marker);
-                })
-            }
-        }
-
-    }
-
-    const renderAlarms = () => {
-        if (tab == 'person') {
-            return;
-        }
-
-        const alarms = [
-            { lng: 115.92365, lat: 28.557404, type: 'device', name: '廉租房1', kind: 'markeralarm' },
-        ]
-
-        alarms.map((x, index) => {
+        })
+        //下钻点位显示
+        databig.map((x, index) => {
             var marker = new AMap.Marker({
                 position: new AMap.LngLat(x.lng, x.lat),
                 // 将一张图片的地址设置为 icon
@@ -317,24 +155,17 @@ function Map(props) {
 
             let infowindow = new AMap.InfoWindow({
                 isCustom: true,  //使用自定义窗体
-                content: `<div id="map-content" class="gis-infowindow cummuntity-gis-infowindow-alarm">
-                    <div style="height:${360}px;" id="alarmcontentid${x.name}"></div></div>`,
+                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)
             });
 
-            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}`)) {
+                    if (document.getElementById(`contentid${x.name}`)) {
                         render(<div>
                             <div className='gis_exit' onClick={() => {
                                 map.setCenter([115.922069, 28.554867])
@@ -362,18 +193,115 @@ function Map(props) {
                                 <span className='gis_title'>手机号码</span>
                                 <span className='gis_text'>15765845845</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}`));
+                            document.getElementById(`contentid${x.name}`));
                     }
                 }, 50)
             })
         })
+
+    }
+
+    const renderDevices = () => {
+        map.clearMap()
+        var style = [{
+            url: '/assets/images/homepage/communtity/gishydrant.png',
+            anchor: new AMap.Pixel(6, 6),
+            size: new AMap.Size(11, 11)
+        }, {
+            url: '/assets/images/homepage/communtity/giswatertank.png',
+            anchor: new AMap.Pixel(4, 4),
+            size: new AMap.Size(11, 11)
+        }, {
+            url: '/assets/images/homepage/communtity/gissmoke.png',
+            anchor: new AMap.Pixel(3, 3),
+            size: new AMap.Size(11, 11)
+        }, {
+            url: '/assets/images/homepage/communtity/giselectricity.png',
+            anchor: new AMap.Pixel(3, 3),
+            size: new AMap.Size(11, 11)
+        }];
+        let points = [], markers = [];
+        devices?.filter(x => x.type == type)?.map(x => {
+            let data = JSON.parse(x.data)
+            data?.map((s, index) => {
+                points.push(
+                    {
+                        lnglat: new AMap.LngLat(s.lng, s.lat),
+                        style: x.type - 1,//对应的status相对应的样式style
+                        name: s.address,
+                        id: s.address + s.type + index,
+                        data: s,
+                    }
+                );
+                // if (index < 2000 && s.lng && s.lat) {
+                //     const marker = new AMap.Marker({
+                //         icon: '/assets/images/homepage/fire/leader.png',
+                //         // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+                //         position: [s.lng, s.lat],
+                //         // offset: new AMap.Pixel(-13, -30),
+                //         // content: ''
+                //         // size: [13, 13]
+                //     });
+                //     marker.setTitle(index);
+                //     marker.setMap(map);
+                // }
+
+            });
+        })
+
+        var mass = new AMap.MassMarks(points, {
+            opacity: 0.8,
+            zIndex: 11111111,
+            cursor: 'pointer',
+            style: style
+        });
+
+        mass.on('click', function (e) {
+            let id = Math.random(1000)
+            map.setCenter(e.data.lnglat)
+            let infowindow = new AMap.InfoWindow({
+                isCustom: true,  //使用自定义窗体
+                content: `<div class="device-infowindow">
+        <div style="height:${360}px;" id="info-window${id}"></div></div>`,
+                offset: new AMap.Pixel(181, 260)
+            });
+            infowindow.open(map, e.data.lnglat)
+
+            setTimeout(() => {
+                if (document.getElementById('info-window' + id)) {
+                    render(
+                        <div>
+                            <div className='gis_exit' onClick={() => { map.clearInfoWindow() }} />
+                            <div style={{ marginTop: 10 }}>
+                                <div className='gis_item'>
+                                    <div className='gis_title'></div>
+                                    <div className='gis_text'>{TYPES[type]}</div>
+                                </div>
+                                <div className='gis_item'>
+                                    <div className='gis_title'>地址</div><div className='gis_text'>
+                                        <Tooltip placement="top" title={e.data.name}>
+                                            <span style={{ color: '#FFF' }}>{e.data.name?.length > 20 ? e.data.name?.substring(0, 20) + '...' : e.data.name}</span>
+                                        </Tooltip>
+                                    </div>
+                                </div>
+                                <div className='gis_item'>
+                                    <div className='gis_title'>状态</div><div className='gis_text'>正常</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        ,
+                        document.getElementById('info-window' + id));
+                }
+            }, 50)
+
+            window.closeTooltip = () => {
+                testDiv.close();
+            }
+        })
+
+        mass.setMap(map)
     }
 
     const renderLeftTop = () => {
@@ -405,24 +333,19 @@ function Map(props) {
     }
 
     const renderRightBottom = () => {
-        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>
+        // | type   | 设备类型 | 1-获取消防栓 2-水箱 3-烟感 4-配电箱 
+        return tab == 'device' ?
+            <div className='device_home_right'>
+                {[
+                    { name: '烟感设备', icon: 'gissmoke', type: 3 },
+                    { name: '配电箱', icon: 'giselectricity', type: 4 },
+                    { name: '消火栓', icon: 'gishydrant', type: 1 },
+                    { name: '水箱', icon: 'giswatertank', type: 2 }
+                ].map(s => <div className='flex-row flex-item-center' style={{ marginBottom: 8 }}>
+                    <div onClick={() => { setType(s.type) }} className={`checkbox`} >{s.type == type ? '✓' : ''}</div>
+                    <img src={`/assets/images/homepage/communtity/${s.icon}.png`} />
+                    <span>{s.name}</span>
+                </div>)}
             </div> :
             <div className='home_right'>
                 <div className='_lz'>
@@ -440,6 +363,7 @@ function Map(props) {
             </div>
     }
 
+
     return (
         <>
             {/* 延缓加载遮罩 */}
@@ -447,17 +371,21 @@ 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) }}
+
+                return index == 1 ? '' : <div className={'gis-button' + (index + 1)}
+                    onClick={() => {
+                        if (delay) return
+                        setTab(s.tab)
+                    }}
+                    style={{ zIndex: 1001 }}
                 >
                     <div className={`button_img ${tab == s.tab ? 'button_img_select' : ''}`} />
                     <div>{s.name}</div>

super-screen/client/src/sections/community-safty/containers/gis.less

@@ -28,7 +28,7 @@
 .gis-bottom {
     position: absolute;
     left: 0;
-    bottom: 0;
+    bottom: -1px;
     height: 10%;
     width: 100%;
     background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
@@ -37,7 +37,7 @@
 .gis-button1 {
     position: absolute;
     left: 39%;
-    bottom: -5%;
+    bottom: -2%;
     font-family: YouSheBiaoTiHei;
     font-size: 12px;
     color: #ECF7FF;
@@ -91,7 +91,7 @@
 .gis-button3 {
     position: absolute;
     left: 57%;
-    bottom: -5%;
+    bottom: -2%;
     font-family: YouSheBiaoTiHei;
     font-size: 12px;
     color: #ECF7FF;
@@ -458,64 +458,47 @@
     }
 }
 
-.person_home_right {
+.device_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%);
+    width: 106px;
+    height: 126px;
+    background: rgba(2, 29, 51, 0.68);
     padding-left: 5px;
+    border: 1px solid #1e5899;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-top: 8px;
 
-    ._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%);
+    img {
+        width: 13px;
+        height: 13px;
+        margin-right: 3px;
     }
 
-    ._title_1 {
-        background: linear-gradient(180deg, #FFFFFF, rgba(17, 124, 213, 1));
-        background-clip: border-box;
-        -webkit-background-clip: text;
-        color: transparent;
+    span {
         font-family: YouSheBiaoTiHei;
-        font-size: 16px;
+        font-size: 14px;
+        color: #FFFFFF;
     }
 
-    ._title_2 {
-        font-family: SourceHanSansCN-Medium;
-        font-weight: 500;
-        font-size: 12px;
-        color: #93ABC0;
+    .checkbox {
+        width: 12px;
+        height: 12px;
+        background: url(/assets/images/homepage/communtity/checkbox.png) no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
+        margin-right: 4px;
+        display: inline-block;
+        color: #b4d2ed;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 11px;
     }
-
 }
 
 
@@ -537,4 +520,69 @@
         width: 753px;
         height: 753px;
     }
+}
+
+.markerClass {
+
+    width: 12px;
+    height: 12px;
+
+    background-color: #dd524d;
+    border-radius: 6px;
+    opacity: 0.7;
+}
+
+.device-infowindow {
+    width: 302px;
+    height: 338.43px;
+    background: url('/assets/images/homepage/communtity/deviceinfowindow.png') no-repeat;
+    background-size: 100% 100%;
+    opacity: 0.8;
+    padding-left: 69px;
+    padding-left: 22px;
+    padding-top: 157px;
+    color: #fff;
+
+    .gis_exit {
+        cursor: pointer;
+        position: absolute;
+        right: 9px;
+        top: 42px;
+        width: 30.75px;
+        height: 23px;
+        background: url('/assets/images/homepage/communtity/exit.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .gis_item {
+        border-bottom: 1px solid #125DB0;
+        width: 93%;
+        display: flex;
+        align-items: center;
+        padding-left: 20px;
+        margin-bottom: 10px;
+        min-height: 35px;
+        display: flex;
+
+        .gis_title {
+            font-family: SourceHanSansCN-Regular;
+            font-weight: 400;
+            font-size: 14px;
+            color: #C3E6FF;
+            letter-spacing: 0;
+            margin-right: 12px;
+            width: 65px;
+        }
+
+        .gis_text {
+            width: 188px;
+            font-family: SourceHanSansCN-Regular;
+            font-weight: 400;
+            font-size: 14px;
+            color: #FFFFFF;
+            letter-spacing: 0;
+            line-height: 21px;
+        }
+    }
+
 }

super-screen/client/src/sections/community-safty/containers/homePage.js

@@ -3,10 +3,10 @@ import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
 import LeftTop from '../components/basic-info'
 import LeftMiddle from '../components/population-dynamics'
-import LeftBottom from '../components/infrastructure'
-import RightTop from '../components/city-safty'
+import RightTop from '../components/infrastructure'
+import RightBottom  from '../components/city-safty'
 import RightMiddle from '../components/special-person'
-import RightBottom from '../components/traffic-ranking'
+import LeftBottom from '../components/traffic-ranking'
 import Gis from './gis';
 import Weather from '../../water-prevention/components/weather';
 import { FullScreenContainer } from '$components'
@@ -42,8 +42,13 @@ function homePage(props) {
                         </div>
                     </div>
                 </div>
-                <div className='homepage-center'>
-                    <Gis />
+                <div className='community-homepage-center'>
+                    {/* <Gis /> */}
+                    <div className='homeTextLeft'>房屋分布</div>
+                    <div className='homeTextRight'>基础设施</div>
+                    <iframe src='/watergis' style={{ width: '100%', height: '100%' }} scrolling='no'
+                        frameborder="no"
+                        border="0" />
                 </div>
                 <div className='homepage-left homepage-left-right'>
                     <div className="list">

super-screen/client/src/sections/community-safty/containers/style.less

@@ -65,7 +65,7 @@
         z-index: 300;
     }
 
-    .homepage-center {
+    .community-homepage-center {
         width: 93.9%;
         height: 84%;
         position: absolute;
@@ -259,3 +259,21 @@
     height: 100%;
 }
 
+.homeTextLeft {
+    position: absolute;
+    bottom: -18px;
+    left: 40%;
+    font-family: YouSheBiaoTiHei;
+    font-size: 12px;
+    color: #ECF7FF;
+}
+
+
+.homeTextRight {
+    position: absolute;
+    bottom: -18px;
+    right: 39.9%;
+    font-family: YouSheBiaoTiHei;
+    font-size: 12px;
+    color: #ECF7FF;
+}

super-screen/client/src/sections/community-safty/routes.js

@@ -1,6 +1,6 @@
 'use strict';
 import homePage from './containers/index';
-
+import CommunityGis from './containers/gis';
 export default [{
     type: 'outer',
     route: {
@@ -10,4 +10,15 @@ export default [{
         // 不设置 component 则面包屑禁止跳转
         component: homePage
     }
-}];
+},
+{
+    type: 'outer',
+    route: {
+        path: '/watergis',
+        key: 'watergis',
+        breadcrumb: 'GIS',
+        // 不设置 component 则面包屑禁止跳转
+        component: CommunityGis
+    }
+}
+];

super-screen/client/src/sections/fire-control/containers/gis.less

@@ -28,95 +28,12 @@
 .gis-bottom {
     position: absolute;
     left: 0;
-    bottom: 0;
+    bottom: -1px;
     height: 10%;
     width: 100%;
     background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
 }
 
-.gis-button1 {
-    position: absolute;
-    left: 39%;
-    bottom: -5%;
-    font-family: YouSheBiaoTiHei;
-    font-size: 12px;
-    color: #ECF7FF;
-    letter-spacing: 0;
-    width: 76.95px;
-    text-align: center;
-    cursor: pointer;
-    z-index: 999;
-
-    .button_img {
-        background: url('/assets/images/homepage/communtity/home.png');
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        width: 76.95px;
-        height: 64px;
-    }
-
-    .button_img_select {
-        background: url('/assets/images/homepage/communtity/homeselect.png') no-repeat;
-        background-size: 100% 100%;
-    }
-
-
-}
-
-.gis-button2 {
-    position: absolute;
-    left: 48%;
-    bottom: -3%;
-    font-family: YouSheBiaoTiHei;
-    font-size: 12px;
-    color: #ECF7FF;
-    letter-spacing: 0;
-    width: 76.95px;
-    text-align: center;
-    cursor: pointer;
-    z-index: 999;
-
-    .button_img {
-        background: url('/assets/images/homepage/communtity/personbutton.png');
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        width: 76.95px;
-        height: 64px;
-    }
-
-    .button_img_select {
-        background: url('/assets/images/homepage/communtity/personbuttonselect.png');
-    }
-}
-
-.gis-button3 {
-    position: absolute;
-    left: 57%;
-    bottom: -5%;
-    font-family: YouSheBiaoTiHei;
-    font-size: 12px;
-    color: #ECF7FF;
-    letter-spacing: 0;
-    width: 76.95px;
-    text-align: center;
-    cursor: pointer;
-    z-index: 999;
-
-    .button_img {
-        background: url('/assets/images/homepage/communtity/devicebutton.png');
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        width: 76.95px;
-        height: 64px;
-    }
-
-    .button_img_select {
-        background: url('/assets/images/homepage/communtity/devicebuttonselect.png');
-    }
-
-
-}
-
 .fire-gis-infowindow {
     width: 302px;
     height: 420px;

super-screen/client/src/sections/water-prevention/containers/gis.less

@@ -28,7 +28,7 @@
 .gis-bottom {
     position: absolute;
     left: 0;
-    bottom: 0;
+    bottom: -1px;
     height: 10%;
     width: 100%;
     background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%);

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

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { useRequest } from 'ahooks';
 import { Request } from '@peace/utils';
+import { Request as MockRequest } from './webapi';
 
 export const useFsRequest = ({ ...props }) => {
   const {
@@ -23,8 +24,34 @@ export const useFsRequest = ({ ...props }) => {
   });
 };
 
+// 第三方系统 获取数据hook , 第三方系统api用这个，包括apiFox 的mock数据 传入不同method即可
+export const useMockRequest = ({ ...props }) => {
+  const {
+    method = 'get', header, body, query, url, ...rest
+  } = props;
+  return useRequest(() => {
+    if (method === 'post') {
+      return MockRequest.post(url, body || {}, query || {});
+    }
+    if (method === 'put') {
+      return MockRequest.put(url, body || {}, query || {});
+    }
+    if (method === 'mockGet') {
+      return MockRequest.mockGet(url, query || {}, header || {});
+    }
+    if (method === 'mockPost') {
+      return MockRequest.mockPost(url, body || {}, query || {}, header || {});
+    }
+
+    return MockRequest.get(url, query || {});
+  }, {
+    loadingDelay: 500,
+    ...rest,
+  });
+};
 
 
 export default {
   useFsRequest,
+  useMockRequest
 };

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

@@ -2,12 +2,14 @@
 import { AuthorizationCode } from './authCode';
 import { ApiTable, RouteTable, } from './webapi'
 import Func from './func';
-import { useFsRequest } from './hooks';
+import { useFsRequest, useMockRequest } from './hooks';
 import { getName, getPhone } from './userDisplayHandle';
 export {
     AuthorizationCode,
     Func,
     ApiTable, RouteTable,
     useFsRequest,
-    getName, getPhone
+    getName,
+    getPhone,
+    useMockRequest
 }

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

@@ -163,6 +163,7 @@ const resultHandler = (resolve, reject) => (err, res) => {
       resolve(res.body);
    }
 };
+
 export const buildRoute = (url) => {
    const user = JSON.parse(sessionStorage.getItem('user'));
    if (user == null) {
@@ -186,5 +187,42 @@ export class RouteRequest {
       new Promise((resolve, reject) => {
          request.delete(buildRoute(url)).query(query).send(data).end(resultHandler(resolve, reject));
       });
+
+   static mockPost = (url, data, query, header) => new Promise((resolve, reject) => {
+      request.post(url).set(header).query(query).send(data)
+         .end(resultHandler(resolve, reject));
+   });
+}
+
+export class Request {
+   static get = (url, query) => new Promise((resolve, reject) => {
+      request.get(buildUrl(url)).set(setHeader()).query(query).use(noCache)
+         .end(resultHandler(resolve, reject));
+   });
+
+   static post = (url, data, query) => new Promise((resolve, reject) => {
+      request.post(buildUrl(url)).set(setHeader()).query(query).use(noCache)
+         .send(data)
+         .end(resultHandler(resolve, reject));
+   });
+
+   static put = (url, data, query) => new Promise((resolve, reject) => {
+      request.put(buildUrl(url)).set(setHeader()).query(query).use(noCache)
+         .send(data)
+         .end(resultHandler(resolve, reject));
+   });
+
+   static delete = (url) => new Promise((resolve, reject) => {
+      request.delete(buildUrl(url)).set(setHeader()).use(noCache).end(resultHandler(resolve, reject));
+   });
+
+   static mockGet = (url, query, header) => new Promise((resolve, reject) => {
+      request.get(url).set(header).query(query).end(resultHandler(resolve, reject));
+   });
+
+   static mockPost = (url, data, query, header) => new Promise((resolve, reject) => {
+      request.post(url).set(header).query(query).send(data)
+         .end(resultHandler(resolve, reject));
+   });
 }