(*) 水务gis卡片、横幅数据接入，预警统计优化

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

@@ -1,28 +1,30 @@
 import React from 'react'
-import { Box } from '$components';
+import { Box, AutoRollComponent } from '$components';
 import { Tooltip } from 'antd';
 
 function Infrastructure(props) {
     const { waterLevelAlarms } = props;
 
-    return <Box title={"预警统计"} >
+    const renderList = () => <div className='_city_safty'>
-        <div className='_city_safty'>
+        {
-            {
+            // alarm_unhandle FF2C2C  alarm_handle FFEA00
-                // alarm_unhandle FF2C2C  alarm_handle FFEA00
+            waterLevelAlarms.map(a => <div className={a.alarms[0]?.state >= 3 ? 'alarm_handle' : 'alarm_unhandle'}>
-                waterLevelAlarms.map(a => <div className={a.alarms[0]?.state >= 3 ? 'alarm_handle' : 'alarm_unhandle'}>
+                <div className='handle_img' />
-                    <div className='handle_img' />
+                <div className='alarm_content'>
-                    <div className='alarm_content'>
+                    <div className='alarm_bg'>
-                        <div className='alarm_bg'>
+                        <Tooltip title={a.alarms[0]?.source?.name}>
-                            <Tooltip title={a.alarms[0]?.source?.name}>
+                            <div className='alarm_title1'>{a.alarms[0]?.source?.name}</div>
-                                <div className='alarm_title1'>{a.alarms[0]?.source?.name}</div>
+                        </Tooltip>
-                            </Tooltip>
+                        <div className='alarm_title2' style={{ color: a.alarms[0]?.state >= 3 ? '#FFEA00' : '#FF2C2C' }}>{convertLevelToLabel(a.alarms[0]?.level)}</div>
-                            <div className='alarm_title2' style={{ color: a.alarms[0]?.state >= 3 ? '#FFEA00' : '#FF2C2C' }}>{convertLevelToLabel(a.alarms[0]?.level)}</div>
-                        </div>
-                        <div className='alarm_text'>{a.alarms[0]?.content}</div>
                     </div>
-                </div>)
+                    <div className='alarm_text'>{a.alarms[0]?.content}</div>
-            }
+                </div>
-        </div>
+            </div>)
+        }
+    </div>
+
+    return <Box title={"预警统计"} >
+         {waterLevelAlarms?.length > 0 ? <AutoRollComponent canScroll={true} content={renderList()} divHeight={400} divId={`water-left-bottom-alarm`} /> : '暂无数据 等UI出图'}
     </Box>
 }
 

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { render } from 'react-dom';
+import { Tooltip } from 'antd';
 import { data as heatmapData } from './data'
 import { SHUI_ZHAN } from '../constants/water';
 import './gis.less'
@@ -340,21 +341,36 @@ function Map(props) {
     }
 
     const renderLeftTop = () => {
+        let hCount = 0, mCount = 0, lCount = 0;
+        for (const a of waterLevelAlarms) {
+            switch (a.alarms[0].level) {
+                case 1:
+                    hCount += 1
+                    break;
+                case 2:
+                    mCount += 1
+                    break;
+                case 3:
+                    lCount += 1
+                    break;
+                default:
+                    break;
+            }
+        }
         return <div className='water_gis_home_left'>
-            {[{ name: '高风险区域', key: 'high', data: 3 },
+            {[{ name: '高风险区域', key: 'high', data: hCount },
-            { name: '中风险区域', key: 'middle', data: 13 },
+            { name: '中风险区域', key: 'middle', data: mCount },
-            { name: '低风险区域', key: 'low', data: 13 }].map(s => {
+            { name: '低风险区域', key: 'low', data: lCount }].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><span className={`${s.key}_text`}>{s.data}</span>/{trendData.length}</div>
                     </div>
                 </div>
             })}
-
         </div>
     }
 
@@ -392,16 +408,18 @@ function Map(props) {
             </div>
     }
 
-    const renderWaterwarningbg = () => {
+    const renderWaterwarningbg = (alarm) => {
         return <div className='waterwarningbg'>
             <div className='_alarm_column1'>
-                <div>城区沿江水涝<div className='_state'>未启动</div></div>
+                <div><Tooltip title={alarm.structureName}><div className='_name'>{alarm.structureName}</div></Tooltip>
-                <div style={{ color: 'rgba(76, 161, 255, 1)', fontSize: 14 }}>[自然灾害事故]</div>
+                    <div className='_state'>未启动</div>
+                </div>
+                <div style={{ color: 'rgba(76, 161, 255, 1)', fontSize: 14 }}>[{alarm.alarms[0]?.content}]</div>
             </div>
             <div className='_alarm_column2'>
-                <div style={{ textAlign: 'right', color: 'rgba(76, 161, 255, 1)' }}>2023-02-12 16:42:34</div>
+                <div style={{ textAlign: 'right', color: 'rgba(76, 161, 255, 1)' }}>{alarm.alarms[0]?.startTime}</div>
                 <div className='_text_info'>
-                    6月11日上午11点左右，低洼堤坝出现江水倒灌灾，需要进行救援。6月11日上午11点左右，低洼堤坝出现江水倒灌灾，需要进行救援。
+                    {alarm.alarms[0]?.details?.content}
                 </div>
             </div>
         </div>
@@ -580,7 +598,7 @@ function Map(props) {
 
             {/* 左上角图例 */}
             {tab == 'overview' && renderLeftTop()}
-            {tab == 'emergency' && renderWaterwarningbg()}
+            {tab == 'emergency' && waterLevelAlarms.length && renderWaterwarningbg(waterLevelAlarms[0])}
             {renderRightBottom()}
             {/* 四周遮罩 */}
             <div className='gis-left'></div>

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

@@ -534,6 +534,14 @@
         color: #FFF;
         text-align: center;
 
+        ._name {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 140px;
+            display: inline-block;
+        }
+
         ._state {
             color: #D1C800;
             background: rgba(255, 247, 0, 0.2);