mcfxkh-Web/src/views/Home/InfoPops/RealSkPop/index.js

import React, { useEffect, useState } from 'react';
import { colors, makeStyles, Typography } from '@material-ui/core';
import clsx from 'clsx';
import moment from 'moment';
import { renderDrp, renderSkArz, renderSkDdz } from '../../../../utils/renutils';
import { skPicGet } from '../../../../models/_/real';
import genDamImage from '../../../../components/DamGraph/DamImage';
import { skInfo } from '../../../../models/_/search';


const useStyles = makeStyles({
  root: {
    display: 'flex',
    width: '40rem',
    color: '#fff',
    padding: '1rem 1rem 0.2rem 1rem',
  },

  realinfo: {
    width: '45%',
    marginRight: '1rem'
  },

  dataTm: {
    padding: '0.4rem 1rem',
    borderRadius: '0.4rem',
    marginBottom: '0.5rem',
    fontSize: '0.8rem'
  },

  online: {
    border: '1px solid ' + colors.lightGreen[400],
    backgroundColor: colors.lightGreen[900],
  },

  offline: {
    border: '1px solid ' + colors.red[400],
    backgroundColor: colors.red[900]
  },

  infoItem: {
    borderBottom: '1px dashed #aaa',
    display: 'flex',
    fontSize: '0.9rem',
    lineHeight: 1.8,
    marginBottom: '0.5rem',

    '& > .row-key': {
      width: '7rem',
    },

    '& > .row-value': {
      width: '50%',
      textAlign: 'right',
      fontWeight: 'bold',
      marginRight: '0.5rem',
      flexGrow: 1,
    },

    '& > .row-unit': {
      width: '3rem',
      flexShrink: 0,
    }
  },

  picContainer: {
    width: '55%',
    display: 'flex',
    flexDirection: 'column',

    '& > div': {
      position: 'relative',

      '& > .tm': {
        position: 'absolute',
        top: 0,
        left: 0,
        backgroundColor: colors.grey[800],
        borderTopLeftRadius: '0.3rem',
        borderBottomRightRadius: '0.3rem',
        padding: '0.2rem 0.5rem'
      },

      '& > .thumb': {
        position: 'absolute',
        right: '0px',
        bottom: '0px',
        left: '60%',
      },
    },
  },

  noPic: {
    height: '50%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },

  divider: {
    marginBottom: '1rem',
  },

  action: {
    textAlign: 'right',
    color: '#fff',
    fontSize: '1rem',
  }
});

function RealSkTip({ record, dispatch,view }) {
  const classes = useStyles();

  const [picData, setPicData] = useState({});
  const [damGraph, setDamGraph] = useState();
  const [picidx, setpicidx] = useState([1, 2]);

  const viewInfo = () => {
    dispatch?.runtime.setInfoDlg({ layerId: 'RealSkLayer', properties: record })
  }

  const doBx = () => {
    skInfo(record).then(data => {
      if (data) {
        let txt;
        if (record.rzState !== 1) {
          txt = `${record.stnm}水库当前出于离线状态。`
        } else {
          const aRz = record.rz - record.fsltdz;
          let subtxt;
          if (aRz > 0) {
            subtxt = `超过汛限水位${aRz.toFixed(2)}米`;
          } else if (aRz < 0) {
            subtxt = `低于汛限水位${-aRz.toFixed(2)}米`;
          } else {
            subtxt = '已处于汛限水位';
          }
          txt = `${record.stnm}当前水位${record.rz}米，汛限水位${record.fsltdz}米，${subtxt}。`;
        }
        if (record.drpState !== 1) {
          txt += '雨量站处于离线状态。';
        } else {
          txt += `24h累积雨量${record.h24?.toFixed(1) || '-'}毫米。`;
        }
        dispatch.runtime.setInfoDlg({ layerId: 'SkSmtp', properties: { stnm: data.stnm, stcd: data.stcd, personels: data.personels, txt } })
      }
    })
  }

  useEffect(() => {
    skPicGet(record.stcd).then(data => {
      // if (data && data.length > 1) {
      //   setPicData({
      //     pic1: data[0].url,
      //     pic2: data[1].url,
      //     pic1Tm: moment(data[0].tm).format('YYYY-MM-DD HH:mm:ss'),
      //     pic2Tm: moment(data[1].tm).format('YYYY-MM-DD HH:mm:ss'),
      //   });
      // }
      setPicData({
        "pic1": "http://223.75.53.106:8891/skjgimages/2023/1018/716130201/20231018100200.jpg",
        "pic2": "http://223.75.53.106:8891/skjgimages/2023/1018/716130202/20231018100600.jpg",
        "pic1Tm": "2023-10-18 10:02:00",
        "pic2Tm": "2023-10-18 10:06:00"
    })
    })
  }, []);

  useEffect(() => {
    const img = genDamImage(record, 400, 260)
    setDamGraph(img);
  }, []);

  const changePic = () => {
    setpicidx([picidx[0] === 1 ? 2 : 1, picidx[1] === 1 ? 2 : 1])
  }
  const openSw = () => {
    window.open("http://local.gunshiiot.com:18083/zhtmp/#/mgr/home")
  }

  return (
    <>
      <div className="boxhead"></div>
      <div className="featuretip-title">
        <div className="name">{record.stnm}
        {record.stnm == '浮桥河水库' ?
          record?.setView&&view===207?
          <span style={{cursor:'pointer',color:'#50b1f9',marginLeft:20}} onClick={()=>{
            dispatch.map.setView(203)
            sessionStorage.setItem('lastCenter',JSON.stringify(record))
          }}>  进入此水库</span>
              : null :
            record.stnm == '小玉潭水库' ?
              <span style={{ cursor: 'pointer', color: '#50b1f9',marginLeft:20 }} onClick={openSw}>
              进入三维模块
          </span>:null
        }
        </div>
        <div className="extra cursor-pointer" onClick={viewInfo}>详细</div>
      </div>
      <div className={classes.root}>
        <div className={classes.realinfo}>
          <Typography
            className={clsx(record.drpState === 1 ? classes.online : classes.offline, classes.dataTm)}
            variant="subtitle2"
          >水位上报时间: {moment(record.drpTm).format('YYYY-MM-DD HH:mm')}</Typography>

          <div className={classes.infoItem}>
            <div className="row-key">监测水位:</div>
            <div className="row-value">{record.rz}</div>
            <div className="row-unit">米</div>
          </div>

          <div className={classes.infoItem}>
            <div className="row-key">汛限水位:</div>
            <div className="row-value">{record.fsltdz}</div>
            <div className="row-unit">米</div>
          </div>

          <div className={classes.infoItem}>
            <div className="row-key">正常蓄水位:</div>
            <div className="row-value">{record.zcxsw}</div>
            <div className="row-unit">米</div>
          </div>

          <div className={classes.infoItem}>
            <div className="row-key">设计洪水位:</div>
            <div className="row-value">{record.dsflz}</div>
            <div className="row-unit">米</div>
          </div>

          <div className={classes.infoItem}>
            <div className="row-key">死水位:</div>
            <div className="row-value">{record.ddz}</div>
            <div className="row-unit">米</div>
          </div>

          <div className={classes.infoItem}>
            <div className="row-key">水库库容:</div>
            <div className="row-value">{record.cpw || record.w || ''}</div>
            <div className="row-unit">万方</div>
          </div>

          <div className={classes.infoItem}>
            <div className="row-key">兴利库容:</div>
            <div className="row-value">{record.xlkr}</div>
            <div className="row-unit">万方</div>
          </div>

          <div className={classes.divider}></div>
          <Typography
            className={clsx(record.rzState === 1 ? classes.online : classes.offline, classes.dataTm)}
            variant="subtitle2"
          >雨量上报时间: {moment(record.rzTm).format('YYYY-MM-DD HH:mm')}</Typography>


          <div className={classes.infoItem}>
            <div className="row-key">小时雨量:</div>
            <div className="row-value">{renderDrp(record, 'h1')}</div>
            <div className="row-unit">毫米</div>
          </div>
          <div className={classes.infoItem}>
            <div className="row-key">24小时雨量:</div>
            <div className="row-value">{renderDrp(record, 'h24')}</div>
            <div className="row-unit">毫米</div>
          </div>
          <div className={classes.infoItem}>
            <div className="row-key">今日雨量:</div>
            <div className="row-value">{renderDrp(record, 'today')}</div>
            <div className="row-unit">毫米</div>
          </div>

          <div className={classes.divider}></div>

          <div className={classes.action}>
            <a onClick={doBx} style={{ cursor: 'pointer' }} size="small" variant="outlined">报讯</a>
          </div>
        </div>
        <div className={classes.picContainer}>
          {
            damGraph ? (
              <div>
                <img src={damGraph} style={{ width: '100%', opacity: 1.0, borderRadius: 4 }} />
              </div>
            ) : (
              <div className={classes.noPic}>-</div>
            )
          }
          {
            picData?.[`pic${picidx[0]}`] ? (
              <div>
                <img src={picData?.[`pic${picidx[0]}`]} style={{ width: '100%', borderRadius: 4 }} />
                <div className="tm">{picData?.[`pic${picidx[0]}Tm`]}</div>
                {
                  picData?.[`pic${picidx[1]}`] ? (
                    <div className="thumb">
                      <img
                        onClick={changePic}
                        alt="pic2"
                        src={picData?.[`pic${picidx[1]}`]}
                        style={{
                          width: 'calc(100% - 2px)',
                          cursor: 'pointer',
                          borderTop: '2px solid white',
                          borderLeft: '2px solid white'
                        }}
                        role="presentation" />
                    </div>
                  ) : null
                }
              </div>
            ) : (
              <div className={classes.noPic}>-</div>
            )
          }

        </div>
      </div>

      <div className="boxfoot"></div>
    </>
  )
}

export default React.memo(RealSkTip);