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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 113
      src/pages/measure/components/MeasureAction.tsx
  2. 48
      src/pages/measure/components/konva/MeasurementCanvas.tsx
  3. 8
      src/store/measure/measureState.ts

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

@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef, useCallback, useMemo } from "react"; 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 { useNavigate } from "react-router";
import { import {
fetchAnalysisReport, fetchAnalysisReport,
@ -9,16 +10,15 @@ import {
import { getBaseRecordPointSetByCode, gx_list } from "../../../services/track/trackShape" import { getBaseRecordPointSetByCode, gx_list } from "../../../services/track/trackShape"
import { createWebSocket, sharedWsUrl } from "../../../services/socket"; import { createWebSocket, sharedWsUrl } from "../../../services/socket";
import { switchMeasureAfterSave } from "../../../store/features/contextSlice"; 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 { AnalysisReport, trackItem } from "../../../services/measure/type";
import { MeasureState, TaskState, TrackRecordSig } from "../../../services/wsTypes"; import { MeasureState, TaskState, TrackRecordSig } from "../../../services/wsTypes";
import { useAppDispatch, useAppSelector } from "../../../utils/hooks"; import { useAppDispatch, useAppSelector } from "../../../utils/hooks";
import Gr_round from "../../../assets/green_round.svg"; import Gr_round from "../../../assets/green_round.svg";
import Bl_round from "../../../assets/blue_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 "./MeasureAction.scss";
import { GX_CODE } from "../../../constant"; import { GX_CODE } from "../../../constant";
// 创建 websocket 客户端 // 创建 websocket 客户端
const wsClient = createWebSocket(sharedWsUrl); const wsClient = createWebSocket(sharedWsUrl);
@ -120,23 +120,10 @@ export default function MeasureAction() {
rightPoints.current = []; rightPoints.current = [];
canvasRef.current?.clearShapes(); canvasRef.current?.clearShapes();
canvasRef.current?.resetCanvas(); 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 => { startMeasurement().then(res => {
if (res.status !== 0) { if (res.status !== 0) {
message.error(res.data.info); message.error(res.data.info);
// setTaskStatusName(taskStatusDescMap["IDLE"]);
} else { } else {
let list = [...initialStatusList] let list = [...initialStatusList]
list.forEach((item, index) => { list.forEach((item, index) => {
if(index === 0){ if(index === 0){
@ -146,12 +133,7 @@ export default function MeasureAction() {
} }
}) })
setStatusList(list); setStatusList(list);
// const newStatusList = [...initialStatusList];
// newStatusList[0].color = STEP_COLOR_BLUE;
// setStatusList(newStatusList);
message.success("已通知设备开始测量"); message.success("已通知设备开始测量");
// setTaskStatusName(taskStatusDescMap["IDLE"]);
setStartBtnText("重新测量"); setStartBtnText("重新测量");
} }
}); });
@ -160,20 +142,12 @@ export default function MeasureAction() {
// 保存按钮点击事件 // 保存按钮点击事件
const onSaveBtnClick = () => { const onSaveBtnClick = () => {
navigate('/measure/config') 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 [caloading, setCaLoading] = useState(false)
const onCalibrationBtnClick = () => { const onCalibrationBtnClick = () => {
setCaLoading(true) setCaLoading(true)
@ -382,9 +356,61 @@ export default function MeasureAction() {
dispatch(updateGxState(value)) 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 ( return (
<> <>
@ -467,6 +493,19 @@ export default function MeasureAction() {
ref={canvasRef} ref={canvasRef}
/> />
</div> </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> </Spin>
</div> </div>
{/* 右侧区域：根据 showAnalysisTable 状态显示测量步骤或分析表格 */} {/* 右侧区域：根据 showAnalysisTable 状态显示测量步骤或分析表格 */}
@ -507,7 +546,7 @@ export default function MeasureAction() {
> >
保存 保存
</Button> </Button>
{/* <Button
<Button
style={{ width: 200 }} style={{ width: 200 }}
size="large" size="large"
type="primary" type="primary"
@ -515,7 +554,7 @@ export default function MeasureAction() {
disabled={!measurementFinished} disabled={!measurementFinished}
> >
校准 校准
</Button> */}
</Button>
<Checkbox checked={afterSave} onChange={onAfterSaveChange}> <Checkbox checked={afterSave} onChange={onAfterSaveChange}>
保存后自动开始新测量 保存后自动开始新测量
</Checkbox> </Checkbox>

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

@ -78,6 +78,8 @@ export interface MeasurementCanvasRef {
setMeasurementDataLeft: (data: Point[]) => void; setMeasurementDataLeft: (data: Point[]) => void;
setMeasurementDataRight: (data: Point[]) => void; setMeasurementDataRight: (data: Point[]) => void;
setMeasurementCalibrationData: (data: Point[]) => void; setMeasurementCalibrationData: (data: Point[]) => void;
getMeasurementCalibrationData: () => Point[];
getMeasuerProp: () => {scale:number, offset:{x:number, y:number}};
setMeasurementData: (data: Point[]) => void; setMeasurementData: (data: Point[]) => void;
setAnalysisData: (data: AnalysisData[]) => void; setAnalysisData: (data: AnalysisData[]) => void;
redraw: () => void; redraw: () => void;
@ -199,7 +201,17 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
setMeasurementCalibrationData: (data: Point[])=>{ setMeasurementCalibrationData: (data: Point[])=>{
setMeasurementCalibrationDataState(data) setMeasurementCalibrationDataState(data)
}
},
getMeasurementCalibrationData: ()=>{
return measurementCalibrationData
},
getMeasuerProp: ()=>{
return {
scale,
offset,
origin
}
},
})); }));
const stageRef = useRef<any>(null); const stageRef = useRef<any>(null);
@ -549,24 +561,32 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
// 拖动过程中的处理函数 // 拖动过程中的处理函数
const onHandleDragMove = (e:any) => { 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 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 = () => { const renderMeasurementCurveRight = () => {

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

@ -1,7 +1,8 @@
import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
const initialState = { const initialState = {
gxCode:''
gxCode:'',
measureData:[]
} }
// 创建一个 Slice // 创建一个 Slice
@ -14,9 +15,12 @@ export const measureStateSlice = createSlice({
updateGxState: (state, { payload }) => { updateGxState: (state, { payload }) => {
state.gxCode = payload.gxCode || "GX-60"; 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; export default measureStateSlice.reducer;
Write Preview
Loading…
Cancel
Save