mcfxkh-Web/src/views/Home/InfoPops/GqBzPop/HDChart.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 { hdyjColor, renderHDRz } from '../../../../utils/renutils';
import { normalizeSearchTmRange } from '../../../../utils/tools';
import { rzSearch } from '../../../../models/_/search';


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

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

function HDChart({ record }) {
  const classes = useStyles();

  const [data, setData] = useState([]);

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

  useEffect(() => {
    rzSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
      setData(data || []);
    });
  }, [])

  const option = useMemo(() => {
    const serialData = data.map(obj => [obj.tm, obj.z || 0]);

    let sorted = data.map(o => o.z);

    const markLine = [];
    const { sfz, wrz, grz } = record;

    if (sfz) {
      sorted.push(sfz);
      markLine.push({ name: '设防', yAxis: sfz, lineStyle: { color: hdyjColor[1] } });
    }
    if (wrz) {
      sorted.push(wrz);
      markLine.push({ name: '警戒', yAxis: wrz, lineStyle: { color: hdyjColor[2] } });
    }
    if (grz) {
      sorted.push(grz);
      markLine.push({ name: '保证', yAxis: grz, lineStyle: { color: hdyjColor[3] } });
    }


    sorted = sorted.sort();
    let minVal = sorted[0] || 0;
    let maxVal = sorted[sorted.length - 1] || 0;
    let dz = 0.5;
    maxVal = Math.ceil(maxVal / dz) * dz;
    minVal = Math.floor(minVal / dz) * dz;

    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      grid: {
        x: markLine.length > 0 ? 64 : 24,
        y: 24,
        x2: 38,
        y2: 42,
        borderWidth: 0
      },
      calculable: true,
      xAxis: [
        {
          type: 'time',
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#bbb',
            fontSize: 9,
            textShadowBlur: 4,
            textShadowColor: '#6ab',
            // formatter: val => val.substr('2020-10-14 '.length, 2)
          },
          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: minVal,
          max: maxVal
        }
      ],
      series: [
        {
          name: '水位',
          type: 'line',
          showSymbol: false,
          label: {
            show: false,
          },
          data: serialData,
          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'
            }
          },
          markPoint: {
            data: [
              { type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
              { type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
            ]
          },
          markLine: {
            silent: true,
            symbol: 'none',
            label: {
              position: 'start',
              formatter: (p) => p?.name + ' ' + p?.value,
            },
            data: markLine
          }
        }
      ]
    };
  }, [data]);

  const rtm = record.rzTm || record.tm;

  return (
    <>
      <ReactEcharts
        option={option}
        style={{ height: '15rem', width: '30rem' }}
      />
      <div className={classes.grid}>
        <Typography variant="subtitle2">上报时间: {rtm ? moment(rtm).format('YYYY-MM-DD HH:mm:ss') : '-'}</Typography>
        <div className={classes.realdrpgrid}>
          <div className="item">
            <Typography variant="caption">水位</Typography>
            <Typography variant="h5">{renderHDRz(record)}</Typography>
          </div>
          <div className="item">
            <Typography variant="caption">设防水位</Typography>
            <Typography variant="h5">{record.sfz || '--'}</Typography>
          </div>
          <div className="item">
            <Typography variant="caption">警戒水位</Typography>
            <Typography variant="h5">{record.wrz || '--'}</Typography>
          </div>
          <div className="item">
            <Typography variant="caption">保证水位</Typography>
            <Typography variant="h5">{record.grz || '--'}</Typography>
          </div>
        </div>
      </div>
    </>
  )
}

export default React.memo(HDChart);