diff --git a/src/index.tsx b/src/index.tsx index 72915e6..4d971e7 100644 --- a/src/index.tsx +++ b/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: , + }, + { + path: "detail/:id", + element: , } ], }, diff --git a/src/pages/measure/components/Detail.tsx b/src/pages/measure/components/Detail.tsx new file mode 100644 index 0000000..513cf1f --- /dev/null +++ b/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(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(null); + const [showGrid, setShowGrid] = useState(true); + const [showStandard, setShowStandard] = useState(true); + const [showMark, setShowMark] = useState(true); + return ( +
+ +
+ ); +} diff --git a/src/pages/measure/components/MeasureDetail.tsx b/src/pages/measure/components/MeasureDetail.tsx index 7faf6cd..86b8c25 100644 --- a/src/pages/measure/components/MeasureDetail.tsx +++ b/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(); 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(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 (
@@ -317,7 +323,7 @@ export default function MeasureDetail() { scroll={{ y: 500 }} /> -
+
@@ -325,15 +331,49 @@ export default function MeasureDetail() { 取消 ]} > -
+
+
+ setShowGrid(checked)} /> + 参考线 +
+ +
+ { + setShowStandard(checked); + if (!checked) { + setAngleMarkBackup(showMark); + setShowMark(false); + } else { + setShowMark(angleMarkBackup); + } + }} + /> + 标准线 +
+ +
+ { + setShowMark(checked); + setAngleMarkBackup(checked); + }} + /> + 角度线 +
+
+
+ + {analysisReport && +
+ +
+ 分析 +
+
+ + + + + + + + + + + {analysisReport.angleAnalysisList.map((item, index) => ( + + + + + ))} + +
W1垂直磨耗{analysisReport.w1}
轨头宽度 + {analysisReport.railHeadWidth} +
{item.describe}{item.distance}
+
+
+ }
+
);