tsg-web/src/views/sq/qth/hdsq/sssw.js

import React from 'react'
import {Divider} from "antd"
export default function Sssw({data}) {
  return (
    <div className="ssjc">
    <div className="root">
      <div className="realinfo">
        <div
          className='report-time'
        >水位上报时间: {data?.tm}</div>

        <div className="infoItem">
          <div className="row-key">监测水位:</div>
          <div className="row-value">{data?.z ? data?.z.toFixed(2):'-'}</div>
          <div className="row-unit">m</div>
        </div>

        <div className="infoItem">
          <div className="row-key">警戒水位:</div>
            <div className="row-value">{data?.wrz ? data?.wrz.toFixed(2) : '-'}</div>
            <Divider type="vertical" style={{height:25,background:"#000",width:2,margin:"0 30px"}}/>
            <div className="row-value" style={{width:"20%"}}>{(data.wrz && data?.z) ? (data.wrz - data?.z).toFixed(2):'-'}</div>
          <div className="row-unit">m</div>
        </div>

        <div className="infoItem">
          <div className="row-key">危险水位:</div>
            <div className="row-value">{data.grz ? data.grz.toFixed(2) : '-'}</div>
            <Divider type="vertical" style={{height:25,background:"#000",width:2,margin:"0 30px"}}/>
            <div className="row-value" style={{width:"20%"}}>{(data.grz && data?.z) ? (data.grz - data?.z).toFixed(2):'-'}</div>
          <div className="row-unit">m</div>
        </div>
      </div>
    </div>
  </div>
  )
}