You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

642 lines
21 KiB

import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
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,
getAlignPointsByRailSize,
startMeasurement,
stopMeasurement,
} from "../../../services/measure/analysis";
import { getBaseRecordPointSetByCode, gx_list } from "../../../services/track/trackShape"
import { createWebSocket, sharedWsUrl } from "../../../services/socket";
import { switchMeasureAfterSave } from "../../../store/features/contextSlice";
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 icon_left from "../../../assets/icon_left.svg";
import icon_right from "../../../assets/icon_right.svg";
import icon_up from "../../../assets/icon_up.svg";
import icon_down from "../../../assets/icon_down.svg";
import icon_leftR from "../../../assets/icon_leftR.svg";
import icon_rightR from "../../../assets/icon_rightR.svg";
import MeasurementCanvas, { AnalysisData, BenchmarkShape, MeasurementCanvasRef, Point } from "./konva/MeasurementCanvas";
import "./MeasureAction.scss";
import { GX_CODE } from "../../../constant";
// 创建 websocket 客户端
const wsClient = createWebSocket(sharedWsUrl);
export default function MeasureAction() {
const dispatch = useAppDispatch();
const navigate = useNavigate();
const deviceInfo = useAppSelector(store => store.context.device);
const measureState = useAppSelector((store) => store.measureState);
const [gxCode, setGxCode] = useState<string>(GX_CODE)
const STEP_COLOR_GREEN = "green";
const STEP_COLOR_BLUE = "blue";
const STEP_COLOR_GREY = "grey";
/** ----------------------- 引用 ----------------------- **/
const canvasRef = useRef<MeasurementCanvasRef>(null);
const leftPoints = useRef<{ x: number; y: number }[]>([]);
const rightPoints = useRef<{ x: number; y: number }[]>([]);
const isLeftFinished = useRef(false);
/** ----------------------- 状态 ----------------------- **/
const [showGrid, setShowGrid] = useState(true);
const [showStandard, setShowStandard] = useState(true);
const [showMark, setShowMark] = useState(true);
// showMark的备份,记录showMark最近一次的值
const [angleMarkBackup, setAngleMarkBackup] = useState(true);
const afterSave = useAppSelector(store => store.context.newMeasureAfterSave);
const [startBtnText, setStartBtnText] = useState("开始测量");
const [measurementFinished, setMeasurementFinished] = useState(false);
// 【分析】之后,会得到分析报告
const [analysisReport, setAnalysisReport] = useState<AnalysisReport | null>(null);
// 初始状态列表
const initialStatusList = useMemo(
() => [
{ name: "请移动到顶部,停顿2秒", background: "#ececec", isReady: false, color: STEP_COLOR_GREY },
{ name: "开始测量左侧", background: "#ececec", isReady: false, color: STEP_COLOR_GREY },
{ name: "左侧测量完成", background: "#ececec", isReady: false, color: STEP_COLOR_GREY },
{ name: "请移动到顶部,停顿2秒", background: "#ececec", isReady: false, color: STEP_COLOR_GREY },
{ name: "开始测量右侧", background: "#ececec", isReady: false, color: STEP_COLOR_GREY },
{ name: "右侧测量完成", background: "#ececec", isReady: false, color: STEP_COLOR_GREY },
],
[]
);
const [statusList, setStatusList] = useState(initialStatusList);
// 打开抽屉(显示分析结果)
const [openDrawer, setOpenDrawer] = useState(false);
/** ----------------------- 事件处理函数 ----------------------- */
// 切换保存后自动开始新测量
const onAfterSaveChange: CheckboxProps["onChange"] = e => {
dispatch(switchMeasureAfterSave(e.target.checked));
};
useEffect(()=>{
setGxCode(measureState.gxCode)
}, [measureState])
// 分析按钮点击事件
const onAnalysisBtnClick = () => {
if (analysisReport) {
setOpenDrawer(true);
return;
}
fetchAnalysisReport(gxCode).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);
}
setAnalysisReport(report);
setOpenDrawer(true);
} else {
message.error("分析报告请求失败: " + res.data.info);
}
});
};
// 开始/重新测量按钮点击事件
const onStart = useCallback(() => {
if (!deviceInfo.isConnected) {
message.error("请先连接设备");
return;
}
// if(deviceInfo.power < 20){
// message.error('电量低于20%,请充电后再测量!')
// return
// }
// 重置测量相关状态
setMeasurementFinished(false);
setAnalysisReport(null);
setshowCalibration(false)//校准线
dispatch(updateMeasureData([]))
isLeftFinished.current = false;
leftPoints.current = [];
rightPoints.current = [];
canvasRef.current?.clearShapes();
canvasRef.current?.resetCanvas();
startMeasurement().then(res => {
if (res.status !== 0) {
message.error(res.data.info);
} else {
let list = [...initialStatusList]
list.forEach((item, index) => {
if(index === 0){
item.color = STEP_COLOR_BLUE;
}else{
item.color = STEP_COLOR_GREY;
}
})
setStatusList(list);
message.success("已通知设备开始测量");
setStartBtnText("重新测量");
}
});
}, [initialStatusList, startBtnText, deviceInfo]);
//停止测量
const onStop = () => {
stopMeasurement().then(res=>{
if (res.status !== 0) {
}else{
message.error('已停止测量')
}
}).catch(e=>{
message.error('调用出错')
})
}
// 保存按钮点击事件
const onSaveBtnClick = () => {
dispatch(updateMeasureData(newMeasureData))
navigate('/measure/config')
//将校准的数据存入store
};
//校准
const [showCalibration, setshowCalibration] = useState(false)
const [caloading, setCaLoading] = useState(false)
const onCalibrationBtnClick = () => {
setCaLoading(true)
//获取校准数据
getAlignPointsByRailSize({railSize:railSize}).then(res => {
if(res.success){
setshowCalibration(true)
canvasRef.current?.setMeasurementCalibrationData(res.data)
}else{
message.error('校准失败!')
}
setCaLoading(false)
}).catch(e=>{
setCaLoading(false)
message.error('校准失败!')
})
}
// 辅助函数:渲染状态项的图标
const renderStatusIcon = (item: (typeof initialStatusList)[0]) => {
if (item.color === STEP_COLOR_GREEN) {
return <img src={Gr_round} alt="green" />;
} else if (item.color === STEP_COLOR_BLUE) {
return <img src={Bl_round} alt="blue" />;
} else {
return (
<div
style={{
width: "22px",
height: "22px",
background: "#c0c0c0",
borderRadius: "50%",
marginTop: "10px",
}}
/>
);
}
};
/** ----------------------- WebSocket 消息处理 ----------------------- **/
useEffect(() => {
// 处理任务状态消息
const handleStateMessage = (state: MeasureState["data"]) => {};
// 处理事件消息
const handleEventMessage = (type: TaskState["data"]) => {
setStatusList(prev => {
const updated = [...prev];
switch (type) {
case "START_RECORD_LEFT":
updated[0].color = STEP_COLOR_GREEN;
updated[1].color = STEP_COLOR_BLUE;
const audio1 = new Audio("/audio/begin_left.mp3");
// 播放音频
audio1
.play()
.then(() => {
console.log("音频开始播放");
})
.catch(err => {
console.error("播放音频时出错:", err);
});
break;
case "FINISH_RECORD_LEFT":
updated[1].color = STEP_COLOR_GREEN;
updated[2].color = STEP_COLOR_GREEN;
updated[3].color = STEP_COLOR_BLUE;
isLeftFinished.current = true;
const audio2 = new Audio("/audio/end_left.mp3");
// 播放音频
audio2
.play()
.then(() => {
console.log("音频开始播放");
})
.catch(err => {
console.error("播放音频时出错:", err);
});
break;
case "START_RECORD_RIGHT":
updated[3].color = STEP_COLOR_GREEN;
updated[4].color = STEP_COLOR_BLUE;
const audio3 = new Audio("/audio/begin_right.mp3");
// 播放音频
audio3
.play()
.then(() => {
console.log("音频开始播放");
})
.catch(err => {
console.error("播放音频时出错:", err);
});
break;
case "FINISH_RECORD_RIGHT":
updated[4].color = STEP_COLOR_GREEN;
updated[5].color = STEP_COLOR_GREEN;
setMeasurementFinished(true);
const audio4 = new Audio("/audio/end_right.mp3");
// 播放音频
audio4
.play()
.then(() => {
console.log("音频开始播放");
})
.catch(err => {
console.error("播放音频时出错:", err);
});
break;
case "WRONG_SIDE":
const audio5 = new Audio("/audio/alert_left.mp3");
// 播放音频
audio5
.play()
.then(() => {
console.log("音频开始播放");
})
.catch(err => {
console.error("播放音频时出错:", err);
});
// 把状态全部置灰
updated.forEach(u => (u.color = STEP_COLOR_GREY));
// 调用停止测量
onStop();
break;
default:
break;
}
return updated;
});
};
// 处理点数据消息
const handlePointReport = (pointData: TrackRecordSig["data"]) => {
if (!isLeftFinished.current) {
leftPoints.current.push(pointData);
canvasRef.current?.setMeasurementDataLeft([...leftPoints.current]);
} else {
rightPoints.current.push(pointData);
canvasRef.current?.setMeasurementDataRight([...rightPoints.current]);
}
};
const subscription = wsClient.dataOb.subscribe(data => {
if (data.path === "/api/measurement-task/get-task-state") {
handleStateMessage(data.data);
} else if (data.path === "/api/measurement-task/event") {
handleEventMessage(data.data);
} else if (data.path === "/api/measurement-task/point-report") {
handlePointReport(data.data);
}
});
wsClient.connect();
return () => subscription.unsubscribe();
}, [onStart]);
/** ----------------------- 页面加载获取基础图形数据 -------基线---------------- **/
useEffect(() => {
queryBasePoints(gxCode)
//获取轨型
getTrackDataList()
}, []);
//获取测量基线
const queryBasePoints = (gxCode:string) => {
getBaseRecordPointSetByCode(gxCode).then(res => {
if (res.success) {
const benchmarkShapes = JSON.parse(res.data.points) as BenchmarkShape[];
if (canvasRef.current) {
console.log("解析后的基础图形数据:", benchmarkShapes);
canvasRef.current.setBenchmarkData(benchmarkShapes);
}
}
});
}
/********************************轨型数据************************************* */
const [trackList, setTrackList] = useState<trackItem[]>([])
const [defaultTrackValue, setDefaultTrackValue] = useState<string>()
const getTrackDataList = () => {
gx_list().then(res => {
if(res.data && res.data.length){
let resData:trackItem[] = res.data;
let list:trackItem[] = []
resData.map(item => {
if(item.points){
list.push(item)
}
})
setTrackList(list)
}
})
}
useEffect(()=>{
if(trackList && trackList.length){
setDefaultTrackValue(trackList[0].code)
}
},[trackList])
//当前选择的轨型 默认"GX-60"
const [railSize, setRailSize] = useState<string>(GX_CODE)
const onTrackChange = (value: string) => {
setRailSize(value)
queryBasePoints(value)
//缓存至STORE
dispatch(updateGxState(value))
}
//上下移动
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 - distance/1000;
}
if(type === 'down'){//向上移动,原数据加y X轴不动
item.y = item.y + distance/1000;
}
if(type === 'left'){//向左移动,原数据减x Y轴不动
item.x = item.x - distance/1000;
}
if(type === 'right'){//向右移动,原数据加x Y轴不动
item.x = item.x + distance/1000;
}
})
canvasRef.current?.setMeasurementCalibrationData(list)
setNewMeasureData(list)
}
}
//旋转
let [measurementRotation, setMeasurementRotation] = useState<number>(0)
let [newMeasureData, setNewMeasureData] = useState<Point[]>()
let [angle, setAngle] = useState<number>(1);//角度单位 分
let [distance, setDistance] = useState<number>(10)
const onRotationLine = (type:string) => {
let mrValue = 0
if(type === 'left'){//逆时针
mrValue = measurementRotation - (angle/60) * Math.PI / 180;
}
if(type === 'right'){//顺时针
mrValue = measurementRotation + (angle/60) * 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 (
<>
<div className="flex h-full px-6">
{/* 左侧区域:包含开关区域和测量画布 */}
<div className="">
<div className="relative flex gap-4 items-center py-3">
<Select
className="w-[150px]"
placeholder="请选择轨型"
key={defaultTrackValue}
defaultValue={defaultTrackValue}
onChange={onTrackChange}
options={trackList.map((item) => ({
label: item.name,
value: item.code,
}))}
></Select>
{/* <div
className="absolute text-primary border border-primary rounded px-4 py-[2px] font-medium cursor-pointer hover:text-primary/[0.8]"
onClick={() => navigate("../config", { replace: true })}>
返回
</div> */}
<section className="ml-auto flex gap-4 items-center">
{/* 参考线开关 */}
<div className="flex gap-2 items-center">
<Switch defaultChecked onChange={checked => setShowGrid(checked)} />
<span>线</span>
</div>
{/* 标准线开关 */}
<div className="flex gap-2 items-center">
<Switch
checked={showStandard}
onChange={checked => {
setShowStandard(checked);
if (!checked) {
setAngleMarkBackup(showMark);
setShowMark(false);
} else {
setShowMark(angleMarkBackup);
}
}}
/>
<span>线</span>
</div>
{/* 角度线开关,仅在点击分析按钮后显示 */}
{analysisReport && (
<div className="flex gap-2 items-center">
<Switch
checked={showMark}
disabled={!showStandard}
onChange={checked => {
setShowMark(checked);
setAngleMarkBackup(checked);
}}
/>
<span>线</span>
</div>
)}
</section>
</div>
<Spin spinning={caloading} tip="正在校准...">
<div className="relative">
<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={showGrid}
showCalibration={showCalibration}
ref={canvasRef}
/>
</div>
{showCalibration &&
<div className="flex justify-center h-[50px]">
<div className="mt-[12px]">
<InputNumber defaultValue={distance} placeholder="微米" onChange={(value) => value !== null && setDistance(Number(value))}></InputNumber>
<span></span>
</div>
<img width={40} src={icon_left} onClick={()=>(onMoveLine("left"))} className="text-[20px] ml-[20px]" alt="左移"/>
<img width={40} src={icon_right} onClick={()=>(onMoveLine("right"))} className="text-[20px] ml-[20px]" alt="右移"/>
<img width={40} src={icon_up} onClick={()=>(onMoveLine("up"))} className="text-[20px] ml-[20px]" alt="上移"/>
<img width={40} src={icon_down} onClick={()=>(onMoveLine("down"))} className="text-[20px] ml-[20px]" alt="下移"/>
<img width={40} src={icon_leftR} onClick={()=>(onRotationLine("left"))} className="text-[20px] ml-[20px]" alt="逆时针旋转"/>
<img width={40} src={icon_rightR} onClick={()=>(onRotationLine("right"))} className="text-[20px] ml-[20px]" alt="顺时针旋转"/>
<div className="mt-[12px] ml-[20px]">
<InputNumber placeholder="请输入角度" defaultValue={angle} onChange={(value) => value !== null && setAngle(Number(value))}></InputNumber>
<span></span>
</div>
</div>
}
</Spin>
</div>
{/* 右侧区域:根据 showAnalysisTable 状态显示测量步骤或分析表格 */}
<div className="min-w-[300px] flex-auto py-6 flex flex-col items-center">
<div>
<h1 className="font-medium text-xl text-center"></h1>
<div className="w-[13rem] mt-5">
{statusList.map((item, index) => (
<div
key={index}
style={{ background: item.background, borderRadius: "20px" }}
className="mt-[10px] h-[40px]">
<div style={{ display: "flex", lineHeight: "40px" }} className="pl-[1rem]">
{renderStatusIcon(item)}
<div className="pl-[5px]">{item.name}</div>
</div>
</div>
))}
</div>
<section className="flex flex-col items-center gap-4 mt-6 border-t border-[#D8D8D8] py-4">
<Button style={{ width: 200 }} size="large" type="primary" onClick={onStart}>
{startBtnText}
</Button>
<Button
style={{ width: 200 }}
size="large"
type="primary"
onClick={onAnalysisBtnClick}
disabled={!measurementFinished}>
</Button>
<Button
style={{ width: 200 }}
size="large"
type="primary"
onClick={onSaveBtnClick}
disabled={!measurementFinished}
>
</Button>
<Button
style={{ width: 200 }}
size="large"
type="primary"
onClick={onCalibrationBtnClick}
disabled={!measurementFinished}
>
</Button>
<Checkbox checked={afterSave} onChange={onAfterSaveChange}>
</Checkbox>
</section>
</div>
</div>
</div>
<Drawer title="分析结果" onClose={() => setOpenDrawer(false)} open={openDrawer}>
{analysisReport && (
<>
<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 className="mt-5 flex justify-center">
<Button style={{ minWidth: 200 }} size="large" type="primary" onClick={onExport}>
导出
</Button>
</div> */}
</>
)}
</Drawer>
</>
);
}