diff --git a/src/components/konva/MeasurementCanvas.scss b/src/components/konva/MeasurementCanvas.scss new file mode 100644 index 0000000..e1c0b4e --- /dev/null +++ b/src/components/konva/MeasurementCanvas.scss @@ -0,0 +1,5 @@ +.konvajs-content { + canvas { + touch-action: none; + } +} \ No newline at end of file diff --git a/src/components/konva/MeasurementCanvas.tsx b/src/components/konva/MeasurementCanvas.tsx index c6b7bd4..1b21b83 100644 --- a/src/components/konva/MeasurementCanvas.tsx +++ b/src/components/konva/MeasurementCanvas.tsx @@ -6,6 +6,7 @@ import React, { useEffect, } from "react"; import { Stage, Layer, Line, Shape, Text } from "react-konva"; +import "./MeasurementCanvas.scss"; // 数据类型定义 export interface Point { diff --git a/src/pages/MeasureRecord.tsx b/src/pages/MeasureRecord.tsx index 3eaab13..214f03c 100644 --- a/src/pages/MeasureRecord.tsx +++ b/src/pages/MeasureRecord.tsx @@ -1,13 +1,79 @@ -import { NavBar } from 'antd-mobile'; -import { useRef } from 'react'; +import { NavBar, Toast } from 'antd-mobile'; +import { useEffect, useRef, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import MeasurementCanvas, { MeasurementCanvasRef } from '../components/konva/MeasurementCanvas'; +import MeasurementCanvas, { + BenchmarkShape, + MeasurementCanvasRef, +} from '../components/konva/MeasurementCanvas'; +import Bridge from '../utils/bridge'; +import { Measurement } from '../services/apiTypes'; +import { useAppDispatch, useAppSelector } from '../utils/hooks'; +import { XB_CODES } from '../utils/constant'; +import { updateRailPoints } from '../store/features/baseData'; export default function MeasureRecord() { const navigate = useNavigate(); + const dispatch = useAppDispatch(); + const baseState = useAppSelector((state) => state.baseData); + const params = useParams(); // params.recordId + const [measure, setMeasure] = useState(undefined); const canvasRef = useRef(null); const back = () => navigate(-1); + + useEffect(() => { + Bridge.getMeasurementDetail({ id: +(params.recordId || '') }).then((res) => { + if (res.success) { + setMeasure(res.data); + } else { + Toast.show(res.message); + } + }); + }, [params.recordId]); + + function drawRailBaseLine(points: string) { + const benchmarkShapes = JSON.parse(points) as BenchmarkShape[]; + if (canvasRef.current) { + canvasRef.current.setBenchmarkData(benchmarkShapes); + } + } + + function drawMeasurePoints(points: string) { + if (canvasRef.current) { + canvasRef.current.setMeasurementData(JSON.parse(points)) + } + } + + useEffect(() => { + if (measure) { + const r = baseState.railTypes.find((rail) => rail.code === measure.trackShapeCode); + if (!r) return; + if (!!r.points) { + drawRailBaseLine(r.points); + drawMeasurePoints(measure.points); + return; + } + Bridge.getTrackPoint({ code: r.code }).then((res) => { + if (res.success) { + dispatch(updateRailPoints(res.data)); + drawRailBaseLine(res.data.points!); + drawMeasurePoints(measure.points); + } else { + Toast.show(res.message); + } + }); + } + }, [baseState.railTypes, dispatch, measure]); + + function railType(code: string) { + const rail = baseState.railTypes.find((rail) => rail.code === code); + return rail; + } + + function direction(directCode: string) { + return XB_CODES.find((dire) => dire.value === directCode); + } + return (
@@ -35,29 +101,31 @@ export default function MeasureRecord() {
-

详细信息

-
-

创建时间

- 2025-03-12 10:30 - -

测量名称

- ABC-DEF-GHI - -

轨型

- 60N轨 +

详细信息

+ {measure && ( +
+

创建时间

+ {measure.createTime} + +

测量名称

+ {measure.name} + +

轨型

+ {railType(measure.trackShapeCode)?.name} -

铁路局名称

- 北京铁路局 + {/*

铁路局名称

+ 北京铁路局 */} -

路段名称

- 客运段 +

路段名称

+ {measure.location} -

线路名称

- 京沪线 +

线路名称

+ {measure.lineName} -

方向

- 上行方向 +

方向

+ {direction(measure.direction)?.label}
+ )}
diff --git a/src/services/apiTypes.ts b/src/services/apiTypes.ts index c9629fb..6259f69 100644 --- a/src/services/apiTypes.ts +++ b/src/services/apiTypes.ts @@ -8,8 +8,8 @@ export type Measurement = { location: string; direction: string; createTime: string; // Date; - leftPoints: string; // json: 坐标数组 - rightPoints: string; // json: 坐标数组 + points: string; // json: 坐标数组 + // rightPoints: string; // json: 坐标数组 upload: boolean; syncStatus: 'wait' | 'finish' | 'fail'; }; diff --git a/src/utils/bridge.ts b/src/utils/bridge.ts index a6c12e9..3f4b766 100644 --- a/src/utils/bridge.ts +++ b/src/utils/bridge.ts @@ -193,8 +193,8 @@ export default class Bridge { }); } else { return httpRequest>({ - url: '/api/mobile/getMeasurementDetail', - method: 'GET', + url: '/api/record/detail', + method: 'POST', params: param, }); }