zhangjiming
/
Outline
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善校准功能

feat_upload_server_url_0416
LiLongLong 4 months ago
parent
6f1a3064a6
commit
fc8217fb6c
3 changed files with 116 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 111
      src/pages/measure/components/MeasureAction.tsx
  2. 44
      src/pages/measure/components/konva/MeasurementCanvas.tsx
  3. 8
      src/store/measure/measureState.ts

111
src/pages/measure/components/MeasureAction.tsx
View File

@ -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<number>(0)
let [newMeasureData, setNewMeasureData] = useState<Point[]>()
let [angle, setAngle] = useState<number>(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}
/>
</div>
{showCalibration &&
<div className="flex justify-center h-[50px]">
<UpOutlined onClick={()=>(onMoveLine("up"))} className="text-[20px] ml-[20px]"/>
<DownOutlined onClick={()=>(onMoveLine("down"))} className="text-[20px] ml-[20px]"/>
<LeftOutlined onClick={()=>(onMoveLine("left"))} className="text-[20px] ml-[20px]"/>
<RightOutlined onClick={()=>(onMoveLine("right"))} className="text-[20px] ml-[20px]"/>
<UndoOutlined onClick={()=>(onRotationLine("left"))} className="text-[20px] ml-[20px]"/>
<RedoOutlined onClick={()=>(onRotationLine("right"))} className="text-[20px] ml-[20px]"/>
<div className="mt-[12px] ml-[20px]">
旋转角度：<InputNumber size="small" onChange={(value) => value !== null && setAngle(Number(value))}></InputNumber>
</div>
</div>
}
</Spin>
</div>
{/* 右侧区域：根据 showAnalysisTable 状态显示测量步骤或分析表格 */}
@ -507,7 +546,7 @@ export default function MeasureAction() {
>
保存
</Button>
{/* <Button
<Button
style={{ width: 200 }}
size="large"
type="primary"
@ -515,7 +554,7 @@ export default function MeasureAction() {
disabled={!measurementFinished}
>
校准
</Button> */}
</Button>
<Checkbox checked={afterSave} onChange={onAfterSaveChange}>
保存后自动开始新测量
</Checkbox>

44
src/pages/measure/components/konva/MeasurementCanvas.tsx
View File

@ -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<MeasurementCanvasRef, MeasurementCanvasProp
setMeasurementCalibrationData: (data: Point[])=>{
setMeasurementCalibrationDataState(data)
},
getMeasurementCalibrationData: ()=>{
return measurementCalibrationData
},
getMeasuerProp: ()=>{
return {
scale,
offset,
origin
}
},
}));
const stageRef = useRef<any>(null);
@ -549,24 +561,32 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
// 拖动过程中的处理函数
const onHandleDragMove = (e:any) => {
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] });
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('原坐标点:', measurementCalibrationData);
console.log('移动后的新坐标点:', newCoords);
});
console.log('拖动结束后新坐标点:', newPoints);
};
const renderMeasurementCurveRight = () => {

8
src/store/measure/measureState.ts
View File

@ -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;
Write Preview
Loading…
Cancel
Save