tsg-web/src/views/rcgl/zmjk/ZmColumn.tsx

import React from 'react'
import { Circle, Layer, Line, Rect } from 'react-konva';
import ColorPolygon from './ColorPolygon';
import { ViewCenter, WaterTop } from './consts';
import { ControlPts, interpolate, intersection } from './coordinates';
import ZmDec from './ZmDec';
import { useLinearAnim } from './useLinearAnim';

const ZmColumn: React.FC<{
  kdMax: number;
  gtophgt?: number;
  idx: number;
  pts: ControlPts;
  waterRatio: number;
  selected: boolean;
}> = ({ kdMax, gtophgt, idx, pts, waterRatio, selected }) => {

  const renKd = gtophgt; //useLinearAnim(gtophgt);

  const a = pts.ZmArea[idx];
  if (!a || typeof renKd !== 'number') {
    return null;
  }

  const hh1 = (a.lb1.y - a.lt1.y) * 0.5;
  const hh2 = (a.lb2.y - a.lt2.y) * 0.5;

  const ratio = renKd / kdMax;
  const e1 = hh1 * ratio * 0.8;
  const e2 = hh2 * ratio * 0.8;

  const lineLineLeft = { x: (a.lt1.x + a.lt2.x) * 0.5, y: (a.lt1.y + a.lt2.y) * 0.5 };
  const lineLineRight = { x: (a.rt1.x + a.rt2.x) * 0.5, y: (a.rt1.y + a.rt2.y) * 0.5 };
  const line1 = interpolate(lineLineLeft, lineLineRight, 0.25);
  const line2 = interpolate(lineLineLeft, lineLineRight, 0.75);

  const ty1 = a.lt1.y + hh1 - e1;
  const ty2 = a.lt2.y + hh2 - e2;
  const joiny = (ty1 + ty2) * 0.5;

  const waterP1 = interpolate(a.lb0, { x: a.lb0.x, y: WaterTop }, waterRatio);
  const waterP1R = { x: a.rb0.x, y: waterP1.y };
  const waterP2 = intersection(ViewCenter, waterP1, { x: a.lb1.x, y: undefined });
  const waterP2R = { x: a.rb1.x, y: waterP2.y };
  const waterP3 = intersection(ViewCenter, waterP1, { x: a.lb3.x, y: undefined });
  waterP3.y -= 26;
  const waterP3R = { x: a.rb3.x, y: waterP3.y };
  if (waterP3.x < waterP2.x) {
    waterP3.x = waterP2.x;
  }
  if (waterP3R.x > waterP2R.x) {
    waterP3R.x = waterP2R.x
  }

  // 
  const b1 = { x: a.lb0.x, y: a.lb0.y - 32 };
  const b6 = { x: a.rb0.x, y: a.rb0.y - 32 };
  const b2 = interpolate(b1, b6, 0.4);
  const b5 = interpolate(b1, b6, 0.6);
  const b3 = { x: b2.x, y: b2.y + 12 };
  const b4 = { x: b5.x, y: b5.y + 12 };

  const b1_1 = intersection(b1, ViewCenter, { x: a.lb1.x, y: undefined });
  const b1_6 = intersection(b6, ViewCenter, { x: a.rb1.x, y: undefined });
  const b1_2 = intersection(b2, ViewCenter, { x: undefined, y: b1_1.y });
  const b1_5 = intersection(b5, ViewCenter, { x: undefined, y: b1_6.y });
  const b1_3 = intersection(b3, ViewCenter, { x: b1_2.x, y: undefined });
  const b1_4 = intersection(b4, ViewCenter, { x: b1_5.x, y: undefined });

  return (
    <>
      {
        waterP3 && waterP3R ? (
          <ColorPolygon fill='#539cb9' pts={[waterP2, waterP2R, waterP3R, waterP3]} opacity={0.8} />
        ) : null
      }
      <ColorPolygon
        desc="闸门上测"
        fill='#afb5b5'
        pts={[
          [a.lt1.x, ty1],
          [a.rt1.x, ty1],
          [a.rt2.x, ty2],
          [a.lt2.x, ty2],
        ]}
      />
      <Line stroke='#222' strokeWidth={8} lineCap="round" points={[line1.x, line1.y, line1.x, joiny]} />
      <Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x, line2.y, line2.x, joiny]} />
      <Circle fill='#afb5b5' x={line1.x} y={joiny} radius={10} />
      <Circle fill='#afb5b5' x={line2.x} y={joiny} radius={10} />
      <Line stroke='#222' strokeWidth={12} points={[line1.x, joiny - 8, line1.x, joiny - 10]} />
      <Line stroke='#222' strokeWidth={12} points={[line2.x, joiny - 8, line2.x, joiny - 10]} />

      <Rect
        desc='闸门正面'
        fill={selected ? '#95927a' : '#5f6969'}
        stroke={selected ? 'orange' : "#222"}
        strokeWidth={1} x={a.lt1.x} y={ty1} width={a.rt1.x - a.lt1.x} height={hh1} />

      <ZmDec tl={{ x: a.lt1.x, y: ty1 }} rb={{ x: a.rt1.x, y: ty1 + hh1 }} />

      <ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_1, b1_2, b2, b1]} />
      <ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_5, b1_6, b6, b5]} />
      <ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_2, b1_3, b3, b2]} />
      <ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_3, b1_4, b4, b3]} />
      <ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_4, b1_5, b5, b4]} />
      <ColorPolygon desc="出水口" fill='#728381' pts={[b1, b2, b3, b4, b5, b6, a.rb0, a.lb0]} />

      {
        waterP1.y < b1.y ? (
          <ColorPolygon fill='#539cb9' pts={[waterP1, waterP1R, waterP2R, waterP2]} opacity={0.8} />
        ) : null
      }

    </>
  )
}

export default React.memo(ZmColumn)