完成测量详情

src/components/konva/MeasurementCanvas.scss

@@ -0,0 +1,5 @@
+.konvajs-content {
+    canvas {
+        touch-action: none;
+    }
+}

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 {

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<Measurement | undefined>(undefined);
   const canvasRef = useRef<MeasurementCanvasRef>(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 (
     <div>
       <NavBar className="bg-white" onBack={back}>
@@ -35,29 +101,31 @@ export default function MeasureRecord() {
           </div>
         </div>
         <section>
-            <h1 className='h-10 px-4 text-base font-medium leading-10'>详细信息</h1>
-            <div className='grid grid-cols-[auto_1fr] bg-white px-5 py-3 gap-x-5 gap-y-4 text-sm'>
-                <p className='text-[#818181]'>创建时间</p>
-                <span className='text-text'>2025-03-12 10:30</span>
+          <h1 className="h-10 px-4 text-base font-medium leading-10">详细信息</h1>
+          {measure && (
+            <div className="grid grid-cols-[auto_1fr] bg-white px-5 py-3 gap-x-5 gap-y-4 text-sm">
+              <p className="text-[#818181]">创建时间</p>
+              <span className="text-text">{measure.createTime}</span>
 
-                <p className='text-[#818181]'>测量名称</p>
-                <span className='text-text'>ABC-DEF-GHI</span>
+              <p className="text-[#818181]">测量名称</p>
+              <span className="text-text">{measure.name}</span>
 
-                <p className='text-[#818181]'>轨型</p>
-                <span className='text-text'>60N轨</span>
+              <p className="text-[#818181]">轨型</p>
+              <span className="text-text">{railType(measure.trackShapeCode)?.name}</span>
 
-                <p className='text-[#818181]'>铁路局名称</p>
-                <span className='text-text'>北京铁路局</span>
+              {/* <p className="text-[#818181]">铁路局名称</p>
+              <span className="text-text">北京铁路局</span> */}
 
-                <p className='text-[#818181]'>路段名称</p>
-                <span className='text-text'>客运段</span>
+              <p className="text-[#818181]">路段名称</p>
+              <span className="text-text">{measure.location}</span>
 
-                <p className='text-[#818181]'>线路名称</p>
-                <span className='text-text'>京沪线</span>
+              <p className="text-[#818181]">线路名称</p>
+              <span className="text-text">{measure.lineName}</span>
 
-                <p className='text-[#818181]'>方向</p>
-                <span className='text-text'>上行方向</span>
+              <p className="text-[#818181]">方向</p>
+              <span className="text-text">{direction(measure.direction)?.label}</span>
             </div>
+          )}
         </section>
       </div>
     </div>

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';
 };

src/utils/bridge.ts

@@ -193,8 +193,8 @@ export default class Bridge {
       });
     } else {
       return httpRequest<BridgeBaseResult<Measurement>>({
-        url: '/api/mobile/getMeasurementDetail',
-        method: 'GET',
+        url: '/api/record/detail',
+        method: 'POST',
         params: param,
       });
     }