mcfxkh-Web/src/views/Home/panels/Cxsk/ARzSk.js

import React, { useEffect, useMemo, useState } from 'react';
import moment from 'moment';
import { Typography,  Collapse,Table, TableContainer, TableBody,TableHead, TableRow, TableSortLabel } from '@material-ui/core';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import { useDispatch } from 'react-redux';
import { InfoPopNames } from '../../InfoPops';
import { MailOutline } from '@material-ui/icons';
import { parseGeoJSON } from "../../../../utils/tools";
import { skInfo } from '../../../../models/_/search';
import config from '../../../../config';

function Item({ data, viewInfo, sendMessage }) {
  return (
    <div className="item">
      <div className={`header alertsk`}>
      </div>
      <div className="content">
        <div className="main">
          <div className="title cursor-pointer" onClick={() => viewInfo(data)}>{data.stnm}</div>
          <div className="span"></div>
          <div className="extra">+{(data.rz - data.fsltdz).toFixed(2)}</div>
        </div>
        <div className="desc">
          <Typography variant="body2">
            水库汛限水位<span className="bold">{data.fsltdz}</span>m。
          </Typography>
          <Typography variant="body2">
            实时监测水位<span className="bold">{data.rz}</span>m，超出汛限水位<span className="bold red">{(data.rz - data.fsltdz).toFixed(2)}</span>m
          </Typography>
        </div>
        <div className="tail">
          <span>{moment(data.rzTm).format('YYYY-MM-DD HH:mm')}</span>
          <MailOutline className="action" onClick={() => sendMessage(data)} />
        </div>
      </div>
    </div>
  );
}

function ARzSk({data}) {
  data = [{
    "stcd": "716129061",
    "type": "sk",
    "hasRz": true,
    "stnm": "仰天窝水库",
    "adcd": "421181201000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.106667,
    "lttd": 31.126389,
    "elev": 0,
    "damel": 325.08,
    "dsflz": 324.18,
    "fsltdz": 323.5,
    "ddz": 319.5,
    "zcxsw": 323.5,
    "drpTm": "2025-04-11T05:00:00.000Z",
    "today": 0,
    "h1": 0,
    "h3": 0,
    "h6": 0,
    "h12": 0,
    "h24": 0,
    "h48": 0,
    "drpState": 2,
    "rz": 325.16,
    "w": 0.132,
    "a_fsltdz": 4.660000000000025,
    "rzTm": "2025-04-11T05:00:00.000Z",
    "rzWarning": 1,
    "rzState": 2,
    "pic": [
        {
            "stcd": "716129061",
            "tm": "2023-03-12T06:05:00.000Z",
            "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129061/20230312140500.jpg"
        },
        {
            "stcd": "716129061",
            "tm": "2023-03-12T07:25:00.000Z",
            "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129062/20230312152500.jpg"
        }
    ],
    "layer": "RealSkLayer",
    "layerPop": "RealSkPop",
    "aRz": 4.66,
    "strarz": "4.66"
}];

  useEffect(()=>{
    return ()=>{
      const map = window.__mapref;
      const layer = map.getLayer('临时水库')
      if(layer){
          map.removeLayer('临时水库');
          map.removeSource('临时水库');
      }
    }
  },[])
  const dispatch = useDispatch();

  const flyTo = (record) => {
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      // dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd+0.005],
        zoom: 15,
        pitch: config.poiPitch,
      });
    }
  }

  const sendMessage = (record) => {
    skInfo(record).then(data => {
      if (data) {
        console.log(record, data);
        const txt = `${record.stnm}在${moment(record.rzTm).format('D日H时')}测得水位为${record.rz}米，超汛限水位(${record.fsltdz})${(record.rz - record.fsltdz).toFixed(2)}米，请做好核实防范工作。`;
        dispatch.runtime.setInfoDlg({ layerId: 'SkSmtp', properties: { stnm: data.stnm, stcd: data.stcd, personels: data.personels, txt } })
      }
    })
  }


  const setSkLayer = (data=[])=>{
    const map = window.__mapref;
    const layer = map.getLayer('临时水库')
    if(layer){
      map.removeLayer('临时水库');
      map.removeSource('临时水库');
    } 
    if(data.length===0){return}
    map.addLayer({
        'id': '临时水库',//+new Date().getTime(),
        'type': 'symbol',
        'source': {
            'type': 'geojson',
            'data': {
                'type': 'FeatureCollection',
                'features': [],
            },
        },
        'layout': {
            // 'icon-allow-overlap': true,
            // 'text-allow-overlap': true,
            'icon-image': '水库-超汛限', // 从properties中动态读取icon字段
            'icon-size': [
                'interpolate', ['linear'], ['zoom'],
                10, 0.8,
                14, 0.8,
              ],
            'text-size': [
            'interpolate', ['linear'], ['zoom'],
            5, 10,
            14, 14,
            ],
            'text-font': ['Roboto Black'],
            'text-field': [
            'step',
            ['zoom'],
            '',
            8, ['get', 'stnm']
            ],
            'text-anchor': 'top',
            'text-offset': [0, 1],
          },
        'paint': {
            'text-color': '#fff'
        },
        'visibility': 'visible',
    });
    map.getSource('临时水库').setData(parseGeoJSON(data))
  }

  return (
    // <div className="dppanel-shyj">
    //   {
    //     data.map(o => (
    //       <Item key={o.stcd} viewInfo={flyTo} sendMessage={sendMessage} data={o} />
    //     ))
    //   }
    // </div> 
    <TableContainer style={{ height: '11.8rem' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
                <DpTableCell style={{ minWidth: '4rem' }} align="left">水库名称</DpTableCell>
                <DpTableCell style={{ minWidth: '5rem' }} align="center">类型</DpTableCell>
                <DpTableCell style={{ minWidth: '3rem' }} align="center">水位(m)</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">监测时间</DpTableCell>
            </TableRow>
          </TableHead>
          {
            data.map((tableRow,index)=>
            <TableBody>
              <DpTableRow key={tableRow.stcd}>
                <DpTableCell align="center" >
                  <div className="table-ellipsis cursor-pointer" onClick={()=>{
                    flyTo(tableRow)
                    setSkLayer([tableRow])
                  }}>
                    {tableRow.stnm}
                  </div>
                  </DpTableCell>
                <DpTableCell align="center" >小(2)型</DpTableCell>
                <DpTableCell align="center" >{tableRow.rz}</DpTableCell>
                <DpTableCell align="center" >{moment(tableRow.tm).format('YYYY-MM-DD HH:mm:ss')}</DpTableCell>
              </DpTableRow>
            </TableBody>
            )
          }
        </Table>
      </TableContainer>
  )
}

export default ARzSk;