mcfxkh-Web/src/views/Home/InfoPops/RealDrpPop/DrpChart.js

import React, { useEffect, useMemo, useState } from 'react'
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import { makeStyles, Typography } from '@material-ui/core';
import moment from 'moment';
import { renderDrp } from '../../../../utils/renutils';
import { normalizeSearchTmRange } from '../../../../utils/tools';
import { drpSearch } from '../../../../models/_/search';

const useStyles = makeStyles({
  grid: {
    color: '#fff',
    padding: '1rem',
  },

  realdrpgrid: {
    display: 'flex',
    justifyContent: 'space-between',
    textAlign: 'center',
    margin: '0.5rem 0'
  }
})

function DrpChart({ record }) {

  const demoData = [
    {
        "tm": "2025-06-03 09:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 10:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 9,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 11:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 11,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 12:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 8,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 13:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 14:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 10,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 15:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 7,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 16:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 11,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 17:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 18:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 9,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 19:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 11,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 20:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 8,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 21:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 13,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 22:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 10,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 23:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 11,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 00:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 01:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 9,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 02:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 11,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 03:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 8,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 04:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 13,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 05:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 10,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 06:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 07:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 08:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 09:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 8,
        "year": "2025"
    }
]
  const [data, setData] = useState([]);
  const classes = useStyles();

  const tm = [moment().add(-24, 'hour'), moment()];
  const resultTm = normalizeSearchTmRange(tm, 'h');

  useEffect(() => {
    drpSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
      // const newData = record.test ? demoData : data;
      const newData = demoData;
      setData(newData || []);
    });
  }, [])

  const option = useMemo(() => {
    let totalDrp = 0;
    const data2 = data.reduce((pre, cur) => {
      totalDrp += cur.drp;
      pre.push({
        ...cur,
        totalDrp,
      });
      return pre;
    }, []);

    const DRPLEVEL = [10, 25, 50, 100, 250];
    const maxVal = DRPLEVEL.find(o => o > totalDrp);

    return {
      title: {
        text: resultTm[0].substr(5, 8) + '至' + resultTm[1].substr(5, 8) + '降雨',
        textStyle: {
          color: '#fff',
          fontSize: 14,
          fontWeight: 'normal'
        },
        left: 8,
        top: 16,
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          var res = `${params[0].name.substr('2020-10-14 '.length, 2)}时降雨: ${params[0].data}mm<br />累计降雨: ${params[1].data}mm`;
          return res;
        }
      },
      grid: {
        x: 18,
        y: 24,
        x2: 28,
        y2: 28,
        borderWidth: 0
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: data2.map(o => o.tm),
          splitLine: {
            show: false
          },
          axisLabel: {
            interval: 3,
            color: '#bbb',
            fontSize: 9,
            textShadowBlur: 4,
            textShadowColor: '#6ab',
            formatter: val => val.substr('2020-10-14 '.length, 5)
          },
          axisLine: {
            lineStyle: {
              color: '#07a6ff',
              width: 0.5,
            }
          },
          axisTick: {
            show: false,
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          position: 'right',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#07a6ff',
              width: 0.25,
              type: 'dashed'
            }
          },
          axisLabel: {
            color: '#bbb',
            fontSize: 10,
            textShadowBlur: 4,
            textShadowColor: '#6ab',
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false,
          },
          min: 0,
          max: maxVal
        }
      ],
      series: [
        {
          name: '小时降雨',
          type: 'bar',
          barWidth: '60%',
          data: data2.map(o => o.drp),
          itemStyle: {
            normal: {
              barBorderRadius: [3, 3, 0, 0],
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#3876cd' },
                  { offset: 0.5, color: '#45b4e7' },
                  { offset: 1, color: '#54ffff' }
                ]
              ),
            },
          },
          label: {
            show: false,
          },
          markPoint: {
            data: [
              { type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
            ]
          },
        },
        {
          name: '累计降雨',
          type: 'line',
          showSymbol: false,
          label: {
            show: false,
          },
          data: data2.map(o => o.totalDrp),
          lineStyle: {
            normal: {
              width: 1,
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(3, 194, 236, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(3, 194, 236, 0)'
              }
              ], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: '#03C2EC'
            }
          },
        }
      ]
    }
  }, [data]);

  return (
    <>
      <ReactEcharts
        option={option}
        style={{ height: '15rem', width: '30rem' }}
      />
      <div className={classes.grid}>
        <Typography variant="subtitle2">上报时间: {record.tm ? moment(record.tm).format('YYYY-MM-DD HH:mm:ss') : '-'}</Typography>
        <div className={classes.realdrpgrid}>
          {
            ['h1', 'h3', 'h6', 'h12', 'h24'].map(key => (
              <div key={key} className="item">
                <Typography variant="caption">{key}</Typography>
                <Typography variant="h5">{renderDrp(record, key)}</Typography>
              </div>
            ))
          }
        </div>
      </div>
    </>
  )
}

export default React.memo(DrpChart);