outline-mobile/src/pages/Measure.tsx

import StepItem from '../components/StepItem';
import { useNavigate } from 'react-router-dom';
import CustomNavBar from '../components/CustomNavBar';
import MeasurementCanvas, {
  BenchmarkShape,
  MeasurementCanvasRef,
  Point,
} from '../components/konva/MeasurementCanvas';
import { useEffect, useRef, useState } from 'react';

import RailTypeBtn from '../components/RailTypeBtn';
import { Cascader, Dialog, Mask, Picker, SpinLoading, Toast } from 'antd-mobile';
import { useAppDispatch, useAppSelector } from '../utils/hooks';
import { updateMeasureData, updateTaskState } from '../store/features/measureSlice';
import Bridge from '../utils/bridge';
import { selectLabeledKtjOrgs, updateRailPoints } from '../store/features/baseData';
import { updateOrg } from '../store/features/contextSlice';
import { selectOrgTextArr } from '../store';
import icon_left from '../assets/icon_left.svg';
import icon_right from '../assets/icon_right.svg';
import icon_up from '../assets/icon_up.svg';
import icon_down from '../assets/icon_down.svg';
import icon_leftR from '../assets/icon_leftR.svg';
import icon_rightR from '../assets/icon_rightR.svg';
export default function Measure() {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const labeledKtjOrgs = useAppSelector(selectLabeledKtjOrgs);
  const orgTextArr = useAppSelector(selectOrgTextArr);

  const measureState = useAppSelector((state) => state.measure);
  const contextState = useAppSelector((state) => state.context);
  const baseState = useAppSelector((state) => state.baseData);
  const device = useAppSelector((state) => state.context.device);
  const [railPickerVisible, setRailPickerVisible] = useState(false);
  const [railId, setRailId] = useState<(number | string | null)[]>([]);
  const canvasRef = useRef<MeasurementCanvasRef>(null);
  const [railSize, setRailSize] = useState<number | string | null>();
  const iconWidth = 35;
  const [showStandard, setShowStandard] = useState(false);

  // 默认选中第一个轨型
  useEffect(() => {
    if (baseState.railTypes.length > 0) {
      let railData = baseState.railTypes[0];
      setRailId([railData.id]);
      setRailSize(railData.code);
    }
  }, [baseState.railTypes]);

  function drawRailBaseLine(points: string) {
    const benchmarkShapes = JSON.parse(points) as BenchmarkShape[];
    if (canvasRef.current) {
      canvasRef.current.setBenchmarkData(benchmarkShapes);
    }
  }



  // 检查轨型有没有坐标，如果有，绘制轨型基准线，如果没，拉取再绘制其线
  useEffect(() => {
    if (railId.length > 0) {
      const r = baseState.railTypes.find((rail) => rail.id === railId[0]);
      if (!r) return;
      if (!!r.points) {
        drawRailBaseLine(r.points);
        return;
      }
      Bridge.getTrackPoint({ code: r.code }).then((res) => {
        if (res.success) {
          dispatch(updateRailPoints(res.data));
          drawRailBaseLine(res.data.points!);
        } else {
          Toast.show(res.message);
        }
      });
    }
  }, [baseState.railTypes, dispatch, railId]);

  // 绘制测量坐标线
  useEffect(() => {
    if (canvasRef.current) {
      canvasRef.current.setMeasurementDataLeft(measureState.leftPoints);
    }
  }, [measureState.leftPoints]);

  useEffect(() => {
    if (canvasRef.current) {
      canvasRef.current.setMeasurementDataRight(measureState.rightPoints);
    }
  }, [measureState.rightPoints]);

  // 左右两测量完成，转换后的测量线(两线合一线)
  useEffect(() => {
    if (canvasRef.current && measureState.measureFinishData.length) {
      canvasRef.current?.setMeasurementCalibrationData(measureState.measureFinishData);
      // setshowCalibration(true);
      setShowMeasureFinish(true)
      setCaloading(false)
    }
  }, [measureState.measureFinishData])

  useEffect(() => {
    if(measureState.measureStatus ===  'FINISH_RECORD'){
      setCaloading(true)
    }
    else {
      setCaloading(false)
    }
  }, [measureState.measureStatus])

  const onSaveClick = () => {
    dispatch(updateMeasureData(newMeasureData));
    navigate('/measure/save');
  };

  const [caloading, setCaloading] = useState(false);
  const [showCalibration, setshowCalibration] = useState(false);
  const [showMeasureFinish, setShowMeasureFinish] = useState(false);
  const onCalibrationBtnClick = () => {
    setCaloading(true);
    Bridge.alignPoints({ railSize: railSize || 'GX-60' })
      .then((res) => {
        if (res.success) {
          setshowCalibration(true);
          canvasRef.current?.setMeasurementCalibrationData(res.data);
        } else {
        }
        setCaloading(false);
      })
      .catch((e) => {
        setCaloading(false);
        Toast.show({
          content: <span>服务器异常</span>,
          position: 'top',
        });
      });
  };

  const [initStart, setInitStart] = useState(false);

  const [measurementCanvasKey, setMeasurementCanvasKey] = useState(0);


  const [state, setState] = useState({
    left_ready: 'none',
    right_ready: 'none',
    left_begin: 'none',
    right_begin: 'none',
    left_end: 'none',
    right_end: 'none',
  });


  const onStartClick = () => {
    setMeasurementCanvasKey(measurementCanvasKey+1)
    setshowCalibration(false);
    setShowMeasureFinish(false)
    dispatch(updateMeasureData([]));
    if (!contextState.device.connected) {
      Dialog.alert({
        content: '蓝牙未连接，请先连接蓝牙',
        onConfirm: () => {
          navigate('/home/bluetooth');
        },
      });
      return;
    }
    if (baseState.ktjOrgs.length === 0) {
      Dialog.alert({
        content: '请在基础数据同步完成后重试',
        onConfirm: () => {
          navigate('/home/mine');
        },
      });
      return;
    }
    if (!contextState.currOrgCode) {
      Dialog.alert({
        content: '请选择铁路局/工务段/线路',
        onConfirm: () => {
          onOrgBarClick();
        },
      });
      return;
    }
    // if (contextState.device.power < 20) {
    //   Toast.show("电量低于20%，请充电后测量");
    //   return;
    // }
    Bridge.startMeasure().then((res) => {
      if (res.success) {
        dispatch(updateTaskState('START_RECORD_SIG'));
      } else {
        Toast.show(res.message);
      }
      setInitStart(true);
      setShowStandard(false)
    });
  };

  const onOrgBarClick = async () => {
    if (baseState.ktjOrgs.length === 0) {
      Dialog.alert({
        content: '请在基础数据同步完成后重试',
        onConfirm: () => {
          navigate('/home/mine');
        },
      });
      return;
    }
    const value = await Cascader.prompt({
      options: labeledKtjOrgs,
      placeholder: '请选择',
    });
    // Toast.show(value ? `你选择了 ${value.join(' - ')}` : '你没有进行选择');
    if (value) {
      dispatch(updateOrg(value as string[]));
    }
  };

  const [status, setStatus] = useState(0)
  useEffect(() => {
    console.log(measureState.taskState)
    switch (measureState.taskState) {
      case 'WAITING_FOR_RECORD_THE_1ST_SIDE':
        setStatus(1);
        setState({
          left_ready: 'ongoing',
          right_ready: 'none',
          left_begin: 'none',
          right_begin: 'none',
          left_end: 'none',
          right_end: 'none',
        });
        break;
      case 'WAITING_FOR_RECORD_THE_2ND_SIDE':
        setStatus(2)
        break;
      case 'START_RECORD_SIG':
        setState({
          left_ready: 'ongoing',
          right_ready: 'none',
          left_begin: 'none',
          right_begin: 'none',
          left_end: 'none',
          right_end: 'none',
        });
        break;
      case 'START_RECORD_LEFT':
      case 'START_RECORD_RIGHT':
        if (status === 1) {
          setState({
            left_ready: 'done',
            right_ready: 'none',
            left_begin: 'ongoing',
            right_begin: 'none',
            left_end: 'none',
            right_end: 'none',
          });
        } else if (status === 2) {
          setState({
            left_ready: 'done',
            right_ready: 'done',
            left_begin: 'done',
            right_begin: 'ongoing',
            left_end: 'done',
            right_end: 'none',
          });
        }
        break;
      case 'FINISH_RECORD_LEFT':
      case 'FINISH_RECORD_RIGHT':
        if (status === 1) {
          setState({
            left_ready: 'done',
            right_ready: 'none',
            left_begin: 'done',
            right_begin: 'none',
            left_end: 'done',
            right_end: 'none',
          });
        } else if (status === 2) {
          setState({
            left_ready: 'done',
            right_ready: 'done',
            left_begin: 'done',
            right_begin: 'done',
            left_end: 'done',
            right_end: 'done',
          });
        }
        break;
      case 'FINISH_RECORD':
        setState({
          left_ready: 'done',
          right_ready: 'done',
          left_begin: 'done',
          right_begin: 'done',
          left_end: 'done',
          right_end: 'done',
        });
        // 测量完成，显示基线
        setShowStandard(true)
        break;
      default:
        setState({
          left_ready: 'none',
          right_ready: 'none',
          left_begin: 'none',
          right_begin: 'none',
          left_end: 'none',
          right_end: 'none',
        });
    }
  }, [measureState.taskState, status]);

  function railName() {
    return baseState.railTypes.find((r) => r.id === railId[0])?.name || '';
  }

  function onRailSizeChange(ids: (number | string | null)[]) {
    if (ids && ids.length) {
      setRailId(ids);
      let id = ids[0];
      const codes = baseState.railTypes.map((item) => {
        if (item.id === id) {
          return item.code;
        }
        return item.code;
      });
      if (codes && codes.length) {
        setRailSize(codes[0]);
      }
    }
  }

  //上下移动
  const timerRef = useRef<NodeJS.Timeout | null>(null);
  const handlePressStart = (type: string) => {
    timerRef.current = setInterval(() => {
      console.log('你进行了长按操作！');
      onHandleMove(type);
    }, 500);
  };

  const handlePressEnd = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
  };

  const onMoveLine = (type: string) => {
    console.log('这是点击');
    onHandleMove(type);
  };

  const onHandleMove = (type: string) => {
    let list = canvasRef.current?.getMeasurementCalibrationData();
    if (list && list.length) {
      list.forEach((item) => {
        if (type === 'up') {
          //向上移动，原数据减y X轴不动
          item.y = item.y - distance / 1000;
        }
        if (type === 'down') {
          //向上移动，原数据加y X轴不动
          item.y = item.y + distance / 1000;
        }
        if (type === 'left') {
          //向左移动，原数据减x Y轴不动
          item.x = item.x - distance / 1000;
        }
        if (type === 'right') {
          //向右移动，原数据加x Y轴不动
          item.x = item.x + distance / 1000;
        }
      });
      canvasRef.current?.setMeasurementCalibrationData(list);
      setNewMeasureData(list);
    }
  };

  const handleRotationPressStart = (type: string) => {
    timerRef.current = setInterval(() => {
      onRotationLine(type);
    }, 500);
  };

  //旋转
  let [measurementRotation] = useState<number>(0);
  let [newMeasureData, setNewMeasureData] = useState<Point[]>();
  let [angle] = useState<number>(5); //角度单位 分
  let [distance] = useState<number>(100);
  const onRotationLine = (type: string) => {
    let mrValue = 0;
    if (type === 'left') {
      //逆时针
      mrValue = measurementRotation - ((angle / 60) * Math.PI) / 180;
    }
    if (type === 'right') {
      //顺时针
      mrValue = measurementRotation + ((angle / 60) * Math.PI) / 180;
    }
    let list = canvasRef.current?.getMeasurementCalibrationData();
    if (list && list.length) {
      list.forEach((item, index) => {
        let cloneItem = rotatePoint(item, mrValue);
        item.x = cloneItem.x;
        item.y = cloneItem.y;
      });
      canvasRef.current?.setMeasurementCalibrationData(list);
      setNewMeasureData(list);
    }
  };

  const rotatePoint = (pt: { x: number; y: number }, angle: number) => {
    const item = {
      x: pt.x * Math.cos(angle) - pt.y * Math.sin(angle),
      y: pt.x * Math.sin(angle) + pt.y * Math.cos(angle),
    };
    return item;
  };

  const handleContextMenu = (e: any) => {
    e.preventDefault();
  };

  return (
    <>
      <div className="relative pt-[--navBarHeight]">
        <div className="absolute top-0 w-full z-10">
          <CustomNavBar title={'测量'}></CustomNavBar>
        </div>

        <main className="home-page-content overflow-x-hidden overflow-y-auto">
          <div className="relative h-0 p-0 pb-[70%]">
            {/**正在校准时的loading */}
            {/*caloading*/}
            {(
              <Mask opacity='thick' className="h-[100vh] flex justify-center items-center">
                <div style={{ margin: '45%',  display: 'flex', flexDirection: 'column',  alignItems: 'center', justifyContent: 'center' }}>
                  <SpinLoading color="#5c92b4" />
                  <span className="whitespace-nowrap mt-5 text-[#5c92b4]" style={{fontSize: '16px'}}>请稍候...</span>
                </div>
              </Mask>
            )}

            {/**测量区 */}
            <div className="absolute left-0 right-0 top-0 bottom-0 bg-title">
              <MeasurementCanvas
                width={window.innerWidth}
                height={window.innerWidth * 0.7}
                logicalExtent={{ minX: -45, maxX: 45, minY: -18, maxY: 52 }}
                gridStep={3}
                origin={{ x: 0, y: 20 }}
                pixelPerMm={window.innerWidth / 90}
                maxZoom={8}
                showGrid={true}
                showBenchmark={showStandard}
                showAnalysis={false}
                showScale={false}
                scaleInterval={1}
                showCoordinates={false}
                showCalibration={showCalibration || showMeasureFinish}
                ref={canvasRef}
                key={measurementCanvasKey}
              />

              {/**选择轨型区 */}
              {railId.length > 0 && (
                <div className="absolute left-1 bottom-1">
                  <RailTypeBtn text={railName()} onClick={() => setRailPickerVisible(true)} />
                </div>
              )}
            </div>
          </div>

          {/**局段线区 */}
          <section
            className="h-10 bg-[#e3e8f5] flex justify-between items-center px-4"
            onClick={onOrgBarClick}
          >
            <p className="text-text" style={{ color: contextState.currOrgCode ? '#333' : 'red' }}>
              {contextState.currOrgCode ? orgTextArr.join('/') : '点击此处选择铁路局和工务段'}
            </p>
            <span className="text-primary underline">修改</span>
          </section>
          {/**手动校准区 */}
          {showCalibration && (
            <section className="h-10 bg-[#e3e8f5] flex justify-between items-center px-4">
              <img
                width={iconWidth}
                src={icon_left}
                onClick={() => onMoveLine('left')}
                onTouchStart={() => handlePressStart('left')}
                onTouchEnd={handlePressEnd}
                onContextMenu={handleContextMenu}
                className="text-[20px] ml-[5px]"
                alt="左移"
              />

              <img
                width={iconWidth}
                src={icon_right}
                onClick={() => onMoveLine('right')}
                onTouchStart={() => handlePressStart('right')}
                onTouchEnd={handlePressEnd}
                onContextMenu={handleContextMenu}
                className="text-[20px] ml-[5px]"
                alt="右移"
              />

              <img
                width={iconWidth}
                src={icon_up}
                onClick={() => onMoveLine('up')}
                onTouchStart={() => handlePressStart('up')}
                onTouchEnd={handlePressEnd}
                onContextMenu={handleContextMenu}
                className="text-[20px] ml-[5px]"
                alt="上移"
              />

              <img
                width={iconWidth}
                src={icon_down}
                onClick={() => onMoveLine('down')}
                onTouchStart={() => handlePressStart('down')}
                onTouchEnd={handlePressEnd}
                onContextMenu={handleContextMenu}
                className="text-[20px] ml-[5px]"
                alt="下移"
              />

              <img
                width={iconWidth}
                src={icon_leftR}
                onClick={() => onRotationLine('left')}
                onTouchStart={() => handleRotationPressStart('left')}
                onTouchEnd={handlePressEnd}
                onContextMenu={handleContextMenu}
                className="text-[20px] ml-[5px]"
                alt="逆时针旋转"
              />

              <img
                width={iconWidth}
                src={icon_rightR}
                onClick={() => onRotationLine('right')}
                onTouchStart={() => handleRotationPressStart('right')}
                onTouchEnd={handlePressEnd}
                onContextMenu={handleContextMenu}
                className="text-[20px] ml-[5px]"
                alt="顺时针旋转"
              />
            </section>
          )}

          {/**按钮操作区 */}
          <section className="flex items-center gap-4 px-4 my-4">
            <button className="btn-contained rounded-md text-sm h-10 flex-1" onClick={onStartClick}>
              {!initStart ||
              (measureState.leftPoints.length > 0 && measureState.rightPoints.length > 0)
                ? '开始测量'
                : '重新测量'}
            </button>
            <button
              className="btn-contained rounded-md text-sm h-10 flex-1"
              disabled={measureState.taskState !== 'FINISH_RECORD'}
              onClick={onSaveClick}
            >
              保存
            </button>
            <button
              className="btn-contained rounded-md text-sm h-10 flex-1"
              disabled={measureState.taskState !== 'FINISH_RECORD'}
              onClick={onCalibrationBtnClick}
            >
              校准
            </button>
          </section>

          {/**测量状态区 */}
          <section className="grid grid-cols-2 gap-[10px]">
            <StepItem state={state.left_ready} text={'等待测量'} />
            <StepItem state={state.right_ready} text={'等待测量另一侧'} />
            <StepItem state={state.left_begin} text={'正在进行测量'} />
            <StepItem state={state.right_begin} text={'正在进行测量'} />
            <StepItem state={state.left_end} text={'一侧测量完成'} />
            <StepItem state={state.right_end} text={'测量已完成'} />
          </section>
        </main>
      </div>
      <Picker
        columns={[baseState.railTypes.map((t) => ({ label: t.name, value: t.id }))]}
        visible={railPickerVisible}
        onClose={() => {
          setRailPickerVisible(false);
        }}
        value={railId}
        onConfirm={(v) => {
          onRailSizeChange(v);
        }}
      />
    </>
  );
}