diff --git a/src/pages/measure/components/MeasureAction.tsx b/src/pages/measure/components/MeasureAction.tsx index 94c6f50..298e026 100644 --- a/src/pages/measure/components/MeasureAction.tsx +++ b/src/pages/measure/components/MeasureAction.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from "react"; -import { Button, Checkbox, CheckboxProps, Drawer, message, Select, Spin, Switch } from "antd"; +import { Button, Checkbox, CheckboxProps, Drawer, Input, InputNumber, message, Select, Spin, Switch } from "antd"; +import { DownOutlined, UpOutlined, LeftOutlined, RightOutlined, UndoOutlined, RedoOutlined } from '@ant-design/icons'; import { useNavigate } from "react-router"; import { fetchAnalysisReport, @@ -9,16 +10,15 @@ import { import { getBaseRecordPointSetByCode, gx_list } from "../../../services/track/trackShape" import { createWebSocket, sharedWsUrl } from "../../../services/socket"; import { switchMeasureAfterSave } from "../../../store/features/contextSlice"; -import measureState, { updateGxState } from "../../../store/measure/measureState"; +import measureState, { updateGxState, updateMeasureData } from "../../../store/measure/measureState"; import { AnalysisReport, trackItem } from "../../../services/measure/type"; import { MeasureState, TaskState, TrackRecordSig } from "../../../services/wsTypes"; import { useAppDispatch, useAppSelector } from "../../../utils/hooks"; import Gr_round from "../../../assets/green_round.svg"; import Bl_round from "../../../assets/blue_round.svg"; -import MeasurementCanvas, { AnalysisData, BenchmarkShape, MeasurementCanvasRef } from "./konva/MeasurementCanvas"; +import MeasurementCanvas, { AnalysisData, BenchmarkShape, MeasurementCanvasRef, Point } from "./konva/MeasurementCanvas"; import "./MeasureAction.scss"; import { GX_CODE } from "../../../constant"; - // 创建 websocket 客户端 const wsClient = createWebSocket(sharedWsUrl); @@ -120,23 +120,10 @@ export default function MeasureAction() { rightPoints.current = []; canvasRef.current?.clearShapes(); canvasRef.current?.resetCanvas(); - // if (startBtnText === "重新测量") { - // let list = [...initialStatusList] - // list.forEach((item, index) => { - // if(index === 0){ - // item.color = STEP_COLOR_BLUE; - // }else{ - // item.color = STEP_COLOR_GREY; - // } - // }) - // setStatusList(list); - // } startMeasurement().then(res => { if (res.status !== 0) { message.error(res.data.info); - // setTaskStatusName(taskStatusDescMap["IDLE"]); } else { - let list = [...initialStatusList] list.forEach((item, index) => { if(index === 0){ @@ -146,12 +133,7 @@ export default function MeasureAction() { } }) setStatusList(list); - - // const newStatusList = [...initialStatusList]; - // newStatusList[0].color = STEP_COLOR_BLUE; - // setStatusList(newStatusList); message.success("已通知设备开始测量"); - // setTaskStatusName(taskStatusDescMap["IDLE"]); setStartBtnText("重新测量"); } }); @@ -160,20 +142,12 @@ export default function MeasureAction() { // 保存按钮点击事件 const onSaveBtnClick = () => { navigate('/measure/config') - // saveMeasurement().then(res => { - // if (res.status !== 0) { - // message.error(res.data.info); - // } else { - // message.success("保存成功"); - // if (afterSave) { - // navigate("../config", { replace: true }); - // } - // } - // }); + //将校准的数据存入store + dispatch(updateMeasureData(newMeasureData)) }; //校准 - const [showCalibration, setshowCalibration] = useState(false) + const [showCalibration, setshowCalibration] = useState(true) const [caloading, setCaLoading] = useState(false) const onCalibrationBtnClick = () => { setCaLoading(true) @@ -382,9 +356,61 @@ export default function MeasureAction() { dispatch(updateGxState(value)) } - const onExport = () => { + //上下移动 + const onMoveLine = (type:string) => { + let list = canvasRef.current?.getMeasurementCalibrationData() + if(list && list.length){ + list.forEach(item => { + if(type === 'up'){//向上移动，原数据减y X轴不动 + item.y = item.y - 0.1; + } + if(type === 'down'){//向上移动，原数据加y X轴不动 + item.y = item.y + 0.1; + } + if(type === 'left'){//向左移动，原数据减x Y轴不动 + item.x = item.x - 0.1; + } + if(type === 'right'){//向右移动，原数据加x Y轴不动 + item.x = item.x + 0.1; + } + }) + canvasRef.current?.setMeasurementCalibrationData(list) + setNewMeasureData(list) + } + } + + //旋转 + let [measurementRotation, setMeasurementRotation] = useState(0) + let [newMeasureData, setNewMeasureData] = useState() + let [angle, setAngle] = useState(0) + const onRotationLine = (type:string) => { + let mrValue = 0 + if(type === 'left'){//逆时针 + mrValue = measurementRotation - angle * Math.PI / 180; + } + if(type === 'right'){//顺时针 + mrValue = measurementRotation + angle * 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 + } - }; /** ----------------------- 渲染 ----------------------- **/ return ( <> @@ -467,6 +493,19 @@ export default function MeasureAction() { ref={canvasRef} /> + {showCalibration && +
+ (onMoveLine("up"))} className="text-[20px] ml-[20px]"/> + (onMoveLine("down"))} className="text-[20px] ml-[20px]"/> + (onMoveLine("left"))} className="text-[20px] ml-[20px]"/> + (onMoveLine("right"))} className="text-[20px] ml-[20px]"/> + (onRotationLine("left"))} className="text-[20px] ml-[20px]"/> + (onRotationLine("right"))} className="text-[20px] ml-[20px]"/> +
+ 旋转角度： value !== null && setAngle(Number(value))}> +
+
+ } {/* 右侧区域：根据 showAnalysisTable 状态显示测量步骤或分析表格 */} @@ -507,7 +546,7 @@ export default function MeasureAction() { > 保存 - {/* */} + 保存后自动开始新测量 diff --git a/src/pages/measure/components/konva/MeasurementCanvas.tsx b/src/pages/measure/components/konva/MeasurementCanvas.tsx index 5d7dd56..7a95c47 100644 --- a/src/pages/measure/components/konva/MeasurementCanvas.tsx +++ b/src/pages/measure/components/konva/MeasurementCanvas.tsx @@ -78,6 +78,8 @@ export interface MeasurementCanvasRef { setMeasurementDataLeft: (data: Point[]) => void; setMeasurementDataRight: (data: Point[]) => void; setMeasurementCalibrationData: (data: Point[]) => void; + getMeasurementCalibrationData: () => Point[]; + getMeasuerProp: () => {scale:number, offset:{x:number, y:number}}; setMeasurementData: (data: Point[]) => void; setAnalysisData: (data: AnalysisData[]) => void; redraw: () => void; @@ -199,7 +201,17 @@ const MeasurementCanvas = forwardRef{ setMeasurementCalibrationDataState(data) - } + }, + getMeasurementCalibrationData: ()=>{ + return measurementCalibrationData + }, + getMeasuerProp: ()=>{ + return { + scale, + offset, + origin + } + }, })); const stageRef = useRef(null); @@ -549,24 +561,32 @@ const MeasurementCanvas = forwardRef { - if (isDragging && lineRef.current && e.nativeEvent) { - const pos = lineRef.current.position(); - const newX = pos.x + (e.nativeEvent.offsetX - dragOffsetX); - const newY = pos.y + (e.nativeEvent.offsetY - dragOffsetY); - lineRef.current.position({ x: newX, y: newY }); - console.log('Move========', pos.x, pos.y, newX, newY) + if (isDragging && lineRef.current && (e.nativeEvent || e.evt)) { + // const pos = lineRef.current.position(); + // console.log('evt.offsetX---', evt.offsetX) + // console.log('evt.offsetY---', evt.offsetY) + // if(evt.offsetX){ + // const newX = pos.x + (evt.offsetX - dragOffsetX); + // const newY = pos.y + (evt.offsetY - dragOffsetY); + // lineRef.current.position({ x: newX, y: newY }); + // console.log('Move========', pos.x, pos.y, newX, newY) + // } + } }; // 拖动结束的处理函数 const onHandleDragEnd = (e:any) => { - const newPoints = lineRef.current.points(); - const newCoords = []; - for (let i = 0; i < newPoints.length; i += 2) { - newCoords.push({ x: newPoints[i], y: newPoints[i + 1] }); - } - console.log('原坐标点:', measurementCalibrationData); - console.log('移动后的新坐标点:', newCoords); + const { x, y } = e.target.position(); + + console.log('---x-------------', x/10, y/10) + const newPoints = measurementCalibrationData.map(point => { + return { + x: point.x + (x/10), + y: point.y + (y/10) + } + }); + console.log('拖动结束后新坐标点:', newPoints); }; const renderMeasurementCurveRight = () => { diff --git a/src/store/measure/measureState.ts b/src/store/measure/measureState.ts index e11eeed..5ac082a 100644 --- a/src/store/measure/measureState.ts +++ b/src/store/measure/measureState.ts @@ -1,7 +1,8 @@ import { createSlice } from "@reduxjs/toolkit"; const initialState = { - gxCode:'' + gxCode:'', + measureData:[] } // 创建一个 Slice @@ -14,9 +15,12 @@ export const measureStateSlice = createSlice({ updateGxState: (state, { payload }) => { state.gxCode = payload.gxCode || "GX-60"; }, + updateMeasureData: (state, { payload }) => { + state.measureData = payload.measureData + }, }, }); -export const { updateGxState } = measureStateSlice.actions; +export const { updateGxState, updateMeasureData } = measureStateSlice.actions; // 默认导出 export default measureStateSlice.reducer; \ No newline at end of file