优化测量详情页面的测量结果

src/index.tsx

@@ -7,6 +7,7 @@ import Measure from "./pages/measure/Measure";
 import MeasureConfig from "./pages/measure/components/MeasureConfig";
 import MeasureDetail from "./pages/measure/components/MeasureDetail";
 import MeasureAction from "./pages/measure/components/MeasureAction";
+import DetailInfo from "./pages/measure/components/Detail";
 
 import RailConfig from "./pages/rail/railConfig";
 
@@ -40,6 +41,10 @@ const router = createBrowserRouter([
                     {
                         path: "action",
                         element: <MeasureAction/>,
+                    },
+                    {
+                        path: "detail/:id",
+                        element: <DetailInfo/>,
                     }
                 ],
             },

src/pages/measure/components/Detail.tsx

@@ -0,0 +1,101 @@
+import {getDetailList, delDetail, getDetail, getPointByUuid} from '../../../services/measure/analysis'
+import { useState, useEffect, useRef } from 'react'
+import  {message } from 'antd';
+
+import { useNavigate, useParams } from 'react-router-dom';
+import type { AnalysisReport, DetailTable, } from "../../../services/measure/type";
+import { AnalysisData, BenchmarkShape, MeasurementCanvasRef } from './konva/MeasurementCanvas';
+import MeasurementCanvas from "./konva/MeasurementCanvas";
+import {
+	getBaseRecordPointSetByCode,
+	getReport
+} from "../../../services/measure/analysis";
+export default function MeasureDetail() {
+  const {id} = useParams()
+	const navigate = useNavigate();
+
+  const [measureId, setMeasureId] = useState<number>(Number(id))
+	useEffect(()=>{
+		onShowDetail(measureId)
+	}, [])
+
+	const onShowDetail = (measureId:number)=> {
+		//获取基线
+		getBaseRecordPointSetByCode("6001").then(res => {
+			if (res.success) {
+				const benchmarkShapes = JSON.parse(res.data.points) as BenchmarkShape[];
+				if (canvasRef.current) {
+					console.log("解析后的基础图形数据：", benchmarkShapes);
+					canvasRef.current.setBenchmarkData(benchmarkShapes);
+				}
+			}
+		});
+		getDetail({id:measureId}).then(res=>{
+			console.log('res==测量记录详情=', res)
+			if(res){
+				//@ts-ignore
+				getRecordByUuid(res.data.uuid)
+				//@ts-ignore
+				onDetaiResult(res.data.uuid)
+			}
+		})
+	}
+
+	//法线
+	const onDetaiResult = (uuid:string) => {
+		getReport(uuid,'6001').then(res=> {
+			if (res.success) {
+							const report: AnalysisReport = res.data;
+							console.log(report);
+							// 更新 canvas 的分析数据
+							if (report && report.angleAnalysisList) {
+								// 先过滤掉 distance 为 null 的数据
+								const validItems = report.angleAnalysisList.filter(item => item.distance !== null);
+								const analysisData: AnalysisData[] = validItems.map(item => ({
+									pointA: { x: parseFloat(item.pointA.x), y: parseFloat(item.pointA.y) },
+									pointB: { x: parseFloat(item.pointB.x), y: parseFloat(item.pointB.y) },
+									base: { x: parseFloat(item.pointA.x), y: parseFloat(item.pointA.y) },
+									measure: { x: parseFloat(item.pointB.x), y: parseFloat(item.pointB.y) },
+									distance: parseFloat(item.distance),
+									describe: item.describe,
+								}));
+								canvasRef.current?.setAnalysisData(analysisData);
+							}
+						} else {
+							message.error("分析报告请求失败: " + res.data.info);
+						}
+		})
+		
+	}
+
+	const getRecordByUuid = (uuid:string) => {
+		getPointByUuid({uuid}).then(res=>{
+			canvasRef.current?.setMeasurementData(res.data.points);
+		})
+	}
+
+	const canvasRef = useRef<MeasurementCanvasRef>(null);
+	const [showGrid, setShowGrid] = useState(true);
+	const [showStandard, setShowStandard] = useState(true);
+	const [showMark, setShowMark] = useState(true);
+	return (
+      <div className="flex p-[1.5rem]">
+          <MeasurementCanvas
+            width={800}
+            height={600}
+            logicalExtent={{ minX: -50, maxX: 50, minY: -20, maxY: 60 }}
+            gridStep={1}
+            origin={{ x: 0, y: 20 }}
+            pixelPerMm={8}
+            maxZoom={10}
+            showGrid={showGrid}
+            showBenchmark={showStandard}
+            showAnalysis={showMark}
+            showScale={false}
+            scaleInterval={1}
+            showCoordinates={true}
+            ref={canvasRef}
+          />
+        </div>
+	);
+}

src/pages/measure/components/MeasureDetail.tsx

@@ -1,6 +1,6 @@
 import {getDetailList, delDetail, getDetail, getPointByUuid} from '../../../services/measure/analysis'
 import { useState, useEffect, useRef } from 'react'
-import  {message, Button, type TableColumnsType, type TableProps, Modal, Table, Pagination, Input  } from 'antd';
+import  {message, Button, type TableColumnsType, type TableProps, Modal, Table, Pagination, Input, Switch  } from 'antd';
 
 import { useNavigate } from 'react-router-dom';
 import type { AnalysisReport, AnalysisResults, DetailTable, SearchParams } from "../../../services/measure/type";
@@ -13,7 +13,6 @@ import {
 } from "../../../services/measure/analysis";
 export default function MeasureDetail() {
 	const navigate = useNavigate();
-	const { Search } = Input;
 	function onToMeasure(){
 		navigate('/measure/config')
 	}
@@ -169,6 +168,7 @@ export default function MeasureDetail() {
 			console.log('res==测量记录详情=', res)
 			if(res){
 				setIsModalOpen(true)
+				// navigate(`/measure/detail/${item.id}`)
 				//@ts-ignore
 				getRecordByUuid(res.data.uuid)
 				//@ts-ignore
@@ -178,6 +178,7 @@ export default function MeasureDetail() {
 	}
 
 	//法线
+	const [analysisReport, setAnalysisReport] = useState<AnalysisReport>();
 	const onDetaiResult = (uuid:string) => {
 		getReport(uuid,'6001').then(res=> {
 			if (res.success) {
@@ -195,8 +196,11 @@ export default function MeasureDetail() {
 									distance: parseFloat(item.distance),
 									describe: item.describe,
 								}));
+								
 								canvasRef.current?.setAnalysisData(analysisData);
 							}
+							console.log('report---', report)
+								setAnalysisReport(report);
 						} else {
 							message.error("分析报告请求失败: " + res.data.info);
 						}
@@ -282,6 +286,7 @@ export default function MeasureDetail() {
 	let [isModalOpen, setIsModalOpen] = useState(false)
 	const canvasRef = useRef<MeasurementCanvasRef>(null);
 	const [showGrid, setShowGrid] = useState(true);
+	const [angleMarkBackup, setAngleMarkBackup] = useState(true);
 	const [showStandard, setShowStandard] = useState(true);
 	const [showMark, setShowMark] = useState(true);
 	const handleOk = () => {
@@ -290,6 +295,7 @@ export default function MeasureDetail() {
 	const handleCancel = () => {
 		setIsModalOpen(false)
 	}
+	
 	return (
 		<div>
 			<div className="p-[15px]">
@@ -317,7 +323,7 @@ export default function MeasureDetail() {
 					scroll={{ y: 500 }} 
 
 				/>
-				<div className="float-right">
+				<div className="float-right mt-[10px] mr-[1rem]">
 					<Pagination  onChange={onPageChange} current={pageNum} pageSizeOptions={[5,10,20,30]} defaultCurrent={pageNum} defaultPageSize={pageSize} total={total}/>
 				</div>
 			</div>
@@ -325,15 +331,49 @@ export default function MeasureDetail() {
 			<Modal 
 				title="测量记录详情" 
 				open={isModalOpen} 
-				width={{ xl: '60%'}} 
+				width={{ xl: '90%'}} 
 				style={{ top: 20 }} 
-				closable={false}
+				closable={true}
+				onCancel={handleCancel}
 				footer={[
 				<Button key="cancel" onClick={handleCancel}>
 					取消
 				</Button>]}
 			>
-				<div className="flex justify-center">
+				<div className="flex">
+					<div className="ml-[7rem]">
+						<Switch defaultChecked onChange={checked => setShowGrid(checked)} />
+						<span>参考线</span>
+					</div>
+
+					<div className="ml-[1rem]">
+						<Switch
+							checked={showStandard}
+							onChange={checked => {
+								setShowStandard(checked);
+								if (!checked) {
+									setAngleMarkBackup(showMark);
+									setShowMark(false);
+								} else {
+									setShowMark(angleMarkBackup);
+								}
+							}}
+						/>
+						<span>标准线</span>
+					</div>
+
+					<div className="ml-[1rem]">
+						<Switch
+							checked={showMark}
+							onChange={checked => {
+								setShowMark(checked);
+								setAngleMarkBackup(checked);
+							}}
+						/>
+						<span>角度线</span>
+					</div>
+				</div>
+				<div className="flex justify-center mt-[5px]">
 						<MeasurementCanvas
 							width={800}
 							height={600}
@@ -350,7 +390,45 @@ export default function MeasureDetail() {
 							showCoordinates={true}
 							ref={canvasRef}
 						/>
+
+						{analysisReport && 
+							<div className=" h-[600px] ml-[1rem]">
+								
+								<header className="bg-[#e8f0ff] w-[300px] text-center text-lg font-medium py-2 text-primary border border-[#c1c6d4]">
+									分析
+								</header>
+								<div className="analysis-table">
+									<table
+										style={{
+											width: "100%",
+											borderCollapse: "collapse",
+											border: "1px solid #ccc",
+											textAlign: "center",
+										}}>
+										<tbody>
+											<tr style={{ height: "40px", fontSize: "18px", color: "#9E9E9E" }}>
+												<td style={{ padding: "8px", border: "1px solid #ccc" }}>W1垂直磨耗</td>
+												<td style={{ padding: "8px", border: "1px solid #ccc" }}>{analysisReport.w1}</td>
+											</tr>
+											<tr style={{ height: "40px", fontSize: "18px", color: "#9E9E9E" }}>
+												<td style={{ padding: "8px", border: "1px solid #ccc" }}>轨头宽度</td>
+												<td style={{ padding: "8px", border: "1px solid #ccc" }}>
+													{analysisReport.railHeadWidth}
+												</td>
+											</tr>
+											{analysisReport.angleAnalysisList.map((item, index) => (
+												<tr key={index} style={{ height: "40px", fontSize: "18px", color: "#9E9E9E" }}>
+													<td style={{ padding: "8px", border: "1px solid #ccc" }}>{item.describe}</td>
+													<td style={{ padding: "8px", border: "1px solid #ccc" }}>{item.distance}</td>
+												</tr>
+											))}
+										</tbody>
+									</table>
+								</div>
+							</div>
+						}
 					</div>
+					
       </Modal>
 		</div>
 	);