（*）水利应急数据接入和建设数据展示优化

super-screen/client/src/sections/water-prevention/components/charts/ring.js

@@ -92,13 +92,14 @@ function RingChart(props) {
   };
   const { height, width } = props;
   const options = getOption();
+  const percent_colors = ['#F8C86B', '#24DDFA', '#267FD3',]
   const renderList = () => data.map((s, index) => (
     <div key={s.name || index} className="type-leagle-item flex-row flex-item-center">
       <div className="flex-row flex-item-center">
         <div className="type-leagle-dot" style={{ background: `linear-gradient(16deg, ${colors[index].linearGradientFrom} 0%, ${colors[index].linearGradientTo} 100%)` }} />
         <div className="type-leagle-label">{s.name}</div>
       </div>
-      <div className="type-leagle-value">{s.value}</div>
+      <div className="type-leagle-value">{s.value}个 <span style={{ fontSize: 14, color: percent_colors[index] }}>14%</span></div>
     </div>
   ));
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Box } from '$components';
+import { Box, AutoRollComponent } from '$components';
 import { getName, getPhone } from '$utils';
 import './style.less';
 
@@ -13,8 +13,8 @@ function CitySafty(props) {
         yjbns: { name: '应急避难场所', items: [{ key: 'shelterName', name: '场所全称' }, { key: 'address', name: '场所地址' }, { key: 'eventType', name: '事件类型' }, { key: 'capacity', name: '容纳人数' }] },
     }
 
-    return <Box title={tab_name[emengencyTab]?.name} >
-        <div className='water_item_right_container'>
+    const getContent = () => {
+        return <div className='water_item_right_container'>
             {
                 emergencyList[emengencyTab]?.map((s, index) => {
 
@@ -48,6 +48,10 @@ function CitySafty(props) {
             }
 
         </div>
+    }
+
+    return <Box title={tab_name[emengencyTab]?.name} >
+        <AutoRollComponent key={emengencyTab} canScroll={emergencyList[emengencyTab]?.length > 3} content={getContent()} divHeight={860} divId={`fire-left-bottom${emengencyTab}`} />
     </Box>
 }
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Box } from '$components';
+import { Box, NoData } from '$components';
 import { Select } from 'antd';
 import './style.less';
 
@@ -30,6 +30,7 @@ function DataTop5(props) {
         </Select>
     );
     return <Box title={"视频监控"} bodyPaddingTop={1} subtitleSelect={renderSubtitle()}>
+        {showVideoList?.length > 0 ?
             <div className='water_video_container'>
                 {
                     showVideoList?.map((v, i) => {
@@ -49,8 +50,9 @@ function DataTop5(props) {
                         </div>
                     })
                 }
-
             </div>
+            : <NoData height={320} />
+        }
     </Box>
 }
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Box, AutoRollComponent } from '$components';
+import { Box, AutoRollComponent, NoData } from '$components';
 import { Tooltip } from 'antd';
 import moment from 'moment';
 import './style.less';
@@ -35,6 +35,7 @@ function CitySafty(props) {
     }
 
     return <Box title={"水位趋势预测图"} subtitleSelect={renderDate()} >
+        {trendData?.length > 0 ?
             <div className='water_traffic_ranking'>
                 <div className='_rank_title'>
                     <div className='_rank_item1'>点位名称</div>
@@ -42,9 +43,10 @@ function CitySafty(props) {
                     <div className='_rank_item3'>水位</div>
                     <div className='_rank_item4'>未来1小时趋势</div>
                 </div>
-
                 {trendData?.length > 0 && <AutoRollComponent canScroll={true} content={getContent()} divHeight={340} divId={`fire-right-top`} />}
-        </div>
+            </div> :
+            <NoData height={320} />}
+
     </Box>
 }
 

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

@@ -505,7 +505,7 @@
         width: 157px;
         height: 24px;
         background-image: linear-gradient(90deg, #19222F 0%, rgba(30, 41, 56, 0) 100%);
-        padding: 0 30px 0 8px;
+        padding: 0 2px 0 8px;
         justify-content: space-between;
 
         .type-leagle-dot {

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

@@ -52,9 +52,14 @@ function Map(props) {
         map.on('complete', () => {
             setTimeout(() => {
                 setDelay(false)
+
+            }, 1500);
             map && renderMarkers()
             map && renderAlarms()
-            }, 1500);
+            setTimeout(() => {
+                renderLayer()
+                createText()
+            }, 1000);
         });
 
         map.on('click', (e) => {
@@ -361,6 +366,158 @@ function Map(props) {
         </div>
     }
 
+    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 renderLayer = () => {
+        if (!loca) return;
+        const dataSource = trendData;
+
+        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: 600,
+            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 = 1400
+                return feature.coordinates[0].properties.x.waterLevel > 30 ? baseHeigh * 14 :
+                    feature.coordinates[0].properties.x.waterLevel > 25 ? baseHeigh * 13 :
+                        feature.coordinates[0].properties.x.waterLevel > 20 ? baseHeigh * 12 :
+                            feature.coordinates[0].properties.x.waterLevel > 15 ? baseHeigh * 11 :
+                                feature.coordinates[0].properties.x.waterLevel > 10 ? baseHeigh * 10 :
+                                    feature.coordinates[0].properties.x.waterLevel > 0 ? baseHeigh * 9 : 0
+
+            },
+            topColor: function (index, feature) {
+                return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
+            },
+            sideColor: function (index, feature) {
+                return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
+            },
+            sideTopColor: function (index, feature) {
+                return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
+            },
+            sideBottomColor: function (index, feature) {
+                return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? '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.waterLevel],
+                style: {
+                    'padding': '2px 4px',
+                    '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': '14px',
+                    'color': '#DCF2FD',
+                },
+            });
+            text.setMap(map);
+            text.show();
+            text.setText(`${s.waterLevel || '--'}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.waterLevel + 'm');
+        //         text.setPosition(e.lnglat);
+
+        //     } else {
+        //         text.hide();
+        //     }
+        // });
+    }
+
+
     const tabs = tab == 'overview' ? [
         { name: '实时监测', tab: 'overview' },
         { name: '应急抢险', tab: 'emergency' }

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

@@ -1,3 +1,4 @@
+//姓名脱敏展示
 function getName(name) {
     let newStr
     if (name.length === 2) {
@@ -13,7 +14,7 @@ function getName(name) {
     }
     return newStr
 }
-
+//手机号码脱敏展示
 function getPhone(tel) {
     if (!tel) return tel;
     const phone = tel.replace(tel.substring(3, 7), '****')