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

图层添加隐藏/显示功能

feature/rail
zhangjiming 5 months ago
parent
0d3cb9392e
commit
47ea9c2ce9
7 changed files with 238 additions and 242 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. 137
      src/pages/measure/components/MeasureAction.tsx
  2. 3
      src/pages/measure/components/graph/AreaLayer.tsx
  3. 52
      src/pages/measure/components/graph/GridLayer.tsx
  4. 3
      src/pages/measure/components/graph/MarkLayer.tsx
  5. 9
      src/pages/measure/components/graph/ResultLayer.tsx
  6. 78
      src/pages/measure/components/graph/StandardLayer.tsx

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

@ -1,14 +1,19 @@
import { Button, Checkbox, CheckboxProps, Radio, RadioChangeEvent, message } from "antd";
import { Button, Checkbox, CheckboxProps, Switch, RadioChangeEvent, message } from "antd";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router";
import { startMeasurement } from "../../../services/measure/analysis"
import { startMeasurement } from "../../../services/measure/analysis";
import { createWebSocket, sharedWsUrl } from "../../../services/socket";
import GridLayer from "./graph/GridLayer";
import StandardLayer from "./graph/StandardLayer";
import RealtimeLayer from "./graph/RealtimeLayer";
import ResultLayer from "./graph/ResultLayer";
import MarkLayer from "./graph/MarkLayer";
export default function MeasureAction() {
const [showGrid, setShowGrid] = useState(true);
const [showStandard, setShowStandard] = useState(true);
const [showResult, setShowResult] = useState(true);
const [showMark, setShowMark] = useState(true);
const navigate = useNavigate();
const [sideVal, setSideVal] = useState<1 | 2>(1);
@ -22,65 +27,47 @@ export default function MeasureAction() {
// navigate("../detail");
};
useEffect(()=>{
connectWebpacket()
},[])
useEffect(() => {
connectWebpacket();
}, []);
const connectWebpacket = ()=>{
const connectWebpacket = () => {
//连接websocket
const wsClient = createWebSocket(sharedWsUrl);
let subscription = wsClient.dataOb.subscribe(data => {
});
let subscription = wsClient.dataOb.subscribe(data => {});
wsClient.connect();
}
};
const onStart = () => {
startMeasurement().then(res=>{
console.log('startMeasurement===', res)
message.success('已通知设备开始测量')
})
}
startMeasurement().then(res => {
console.log("startMeasurement===", res);
message.success("已通知设备开始测量");
});
};
return (
<div className="flex h-full ">
<div className="flex-none relative">
<GridLayer
width={840}
height={600}
leftPadding={30}
rightPadding={10}
topPadding={10}
bottomPadding={30}
columns={10}
rows={7}
colCellNum={1}
rowCellNum={2}
/>
<div className="absolute top-0">
<StandardLayer
width={840}
height={600}
leftPadding={30}
rightPadding={10}
topPadding={10}
bottomPadding={30}
columns={10}
rows={7}
/>
</div>
<div className="absolute top-0">
<RealtimeLayer
width={840}
height={600}
leftPadding={30}
rightPadding={10}
topPadding={10}
bottomPadding={30}
columns={10}
rows={7}
/>
<div className="flex-none">
<div className="flex gap-4 items-center px-6 pt-2">
<div className="flex gap-2 items-center">
<Switch defaultChecked onChange={checked => setShowGrid(checked)} />
<span>参考线</span>
</div>
<div className="flex gap-2 items-center">
<Switch defaultChecked onChange={checked => setShowStandard(checked)} />
<span>标准线</span>
</div>
<div className="flex gap-2 items-center">
<Switch defaultChecked onChange={checked => setShowResult(checked)} />
<span>对比线</span>
</div>
<div className="flex gap-2 items-center">
<Switch defaultChecked onChange={checked => setShowMark(checked)} />
<span>角度线</span>
</div>
</div>
<div className="absolute top-0">
<MarkLayer
<div className="relative">
<GridLayer
width={840}
height={600}
leftPadding={30}
@ -89,7 +76,49 @@ export default function MeasureAction() {
bottomPadding={30}
columns={10}
rows={7}
colCellNum={1}
rowCellNum={2}
visibility={showGrid ? "visible" : "hidden"}
/>
<div className="absolute top-0">
<StandardLayer
width={840}
height={600}
leftPadding={30}
rightPadding={10}
topPadding={10}
bottomPadding={30}
columns={10}
rows={7}
visibility={showStandard ? "visible" : "hidden"}
/>
</div>
<div className="absolute top-0">
<ResultLayer
width={840}
height={600}
leftPadding={30}
rightPadding={10}
topPadding={10}
bottomPadding={30}
columns={10}
rows={7}
visibility={showResult ? "visible" : "hidden"}
/>
</div>
<div className="absolute top-0">
<MarkLayer
width={840}
height={600}
leftPadding={30}
rightPadding={10}
topPadding={10}
bottomPadding={30}
columns={10}
rows={7}
visibility={showMark ? "visible" : "hidden"}
/>
</div>
</div>
</div>
<div className="w-[300px] flex-none py-6">

3
src/pages/measure/components/graph/AreaLayer.tsx
View File

@ -7,6 +7,7 @@ export default function AreaLayer(props: {
rightPadding: number;
topPadding: number;
bottomPadding: number;
visibility: 'hidden' | 'visible';
}) {
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const draw = useCallback((ctx: CanvasRenderingContext2D) => {
@ -24,7 +25,7 @@ export default function AreaLayer(props: {
}, [draw]);
return (
<div>
<div style={{visibility: props.visibility}}>
<canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
</div>
);

52
src/pages/measure/components/graph/GridLayer.tsx
View File

@ -14,6 +14,7 @@ export default function GridLayer(props: {
rows: number;
colCellNum: number;
rowCellNum: number;
visibility: 'hidden' | 'visible';
}) {
const xStartPx = props.leftPadding;
const xEndPx = props.width - props.rightPadding;
@ -27,6 +28,9 @@ export default function GridLayer(props: {
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const drawGrid = useCallback(
(ctx: CanvasRenderingContext2D) => {
ctx.resetTransform();
ctx.clearRect(0, 0, props.width, props.height);
ctx.beginPath();
ctx.strokeStyle = subLineColor;
for (let i = 1; i < props.columns * props.colCellNum; ++i) {
@ -39,7 +43,7 @@ export default function GridLayer(props: {
ctx.moveTo(xStartPx, yStartPx + yUnitPx * j);
ctx.lineTo(xEndPx, yStartPx + yUnitPx * j);
}
ctx.stroke();
ctx.stroke()
ctx.beginPath();
ctx.strokeStyle = primaryLineColor;
@ -51,22 +55,36 @@ export default function GridLayer(props: {
ctx.moveTo(xStartPx, yStartPx + yStepPx * j);
ctx.lineTo(xEndPx, yStartPx + yStepPx * j);
}
ctx.stroke();
ctx.stroke()
ctx.beginPath();
ctx.strokeStyle = "#999";
// 偏移原点
const xOffset = (xEndPx - xStartPx) / 2;
const yOffset = yStepPx * 2;
const yMax = yEndPx - yStartPx - yOffset;
ctx.translate(xStartPx + xOffset, yStartPx + yOffset);
// 绘制原点交叉线
ctx.moveTo(-xOffset, 0);
ctx.lineTo(xOffset, 0);
ctx.moveTo(0, -yOffset);
ctx.lineTo(0, yMax);
ctx.stroke()
// 绘制x轴y轴 单位数值
ctx.beginPath();
ctx.fillStyle = "#333333";
ctx.textAlign = "center";
ctx.font = "normal 14px system";
for (let index = -4; index < 5; index++) {
ctx.fillText((index * 10).toString(), xStepPx * index, yMax + 20);
}
for (let index = -1; index < 5; index++) {
ctx.fillText((-index * 10).toString(), -xOffset - (index > 0 ? 18 : 14), yStepPx * index + 4);
}
},
[
props.colCellNum,
props.columns,
props.rowCellNum,
props.rows,
xEndPx,
xStartPx,
xStepPx,
xUnitPx,
yEndPx,
yStartPx,
yStepPx,
yUnitPx,
]
[props.colCellNum, props.columns, props.height, props.rowCellNum, props.rows, props.width, xEndPx, xStartPx, xStepPx, xUnitPx, yEndPx, yStartPx, yStepPx, yUnitPx]
);
useEffect(() => {
@ -81,7 +99,7 @@ export default function GridLayer(props: {
}, [drawGrid]);
return (
<div>
<div style={{visibility: props.visibility}}>
<canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
</div>
);

3
src/pages/measure/components/graph/MarkLayer.tsx
View File

@ -17,6 +17,7 @@ export default function MarkLayer(props: {
bottomPadding: number;
columns: number;
rows: number;
visibility: 'hidden' | 'visible';
}) {
const xStartPx = props.leftPadding;
const xEndPx = props.width - props.rightPadding;
@ -81,7 +82,7 @@ export default function MarkLayer(props: {
}, [draw]);
return (
<div>
<div style={{visibility: props.visibility}}>
<canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
</div>
);

9
src/pages/measure/components/graph/RealtimeLayer.tsx → src/pages/measure/components/graph/ResultLayer.tsx
View File

@ -6,7 +6,7 @@ console.log(sharedWsUrl);
const pointArr: { x: number; y: number }[] = [];
export default function RealtimeLayer(props: {
export default function ResultLayer(props: {
width: number;
height: number;
leftPadding: number;
@ -15,6 +15,7 @@ export default function RealtimeLayer(props: {
bottomPadding: number;
columns: number;
rows: number;
visibility: 'hidden' | 'visible';
}) {
const xStartPx = props.leftPadding;
const xEndPx = props.width - props.rightPadding;
@ -83,9 +84,9 @@ export default function RealtimeLayer(props: {
for (let idx = 0; idx < pointsPx.length; idx++) {
if (idx === 0) {
ctx.moveTo(pointsPx[idx].x, pointsPx[idx].y);
ctx.moveTo(pointsPx[idx].x, pointsPx[idx].y+6);
} else {
ctx.lineTo(pointsPx[idx].x, pointsPx[idx].y);
ctx.lineTo(pointsPx[idx].x, pointsPx[idx].y+6);
}
}
ctx.stroke();
@ -96,7 +97,7 @@ export default function RealtimeLayer(props: {
}, [rtPoints, unitPx, xEndPx, xStartPx, yStartPx, yStepPx]);
return (
<div>
<div style={{visibility: props.visibility}}>
<canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
</div>
);

78
src/pages/measure/components/graph/StandardLayer.tsx
View File

@ -29,6 +29,7 @@ export default function StandardLayer(props: {
bottomPadding: number;
columns: number;
rows: number;
visibility: "hidden" | "visible";
}) {
const xStartPx = props.leftPadding;
const xEndPx = props.width - props.rightPadding;
@ -45,33 +46,14 @@ export default function StandardLayer(props: {
const draw = useCallback(
(ctx: CanvasRenderingContext2D) => {
ctx.strokeStyle = "#999";
ctx.resetTransform();
ctx.clearRect(0, 0, props.width, props.height);
// 偏移原点
const xOffset = (xEndPx - xStartPx) / 2;
const yOffset = yStepPx * 2;
const yMax = yEndPx - yStartPx - yOffset;
ctx.translate(xStartPx + xOffset, yStartPx + yOffset);
// 绘制原点交叉线
ctx.moveTo(-xOffset, 0);
ctx.lineTo(xOffset, 0);
ctx.moveTo(0, -yOffset);
ctx.lineTo(0, yMax);
ctx.stroke();
// 绘制x轴y轴 单位数值
ctx.beginPath();
ctx.fillStyle = "#333333";
ctx.textAlign = "center";
ctx.font = "normal 14px system";
for (let index = -4; index < 5; index++) {
ctx.fillText((index * 10).toString(), xStepPx * index, yMax + 20);
}
for (let index = -1; index < 5; index++) {
ctx.fillText((-index * 10).toString(), -xOffset - (index > 0 ? 18 : 14), yStepPx * index + 4);
}
// 绘制标准线
ctx.beginPath();
ctx.strokeStyle = "red";
// ---- 右侧 （从上到下）
let point0 = pointsRight[0];
@ -79,39 +61,21 @@ export default function StandardLayer(props: {
ctx.moveTo(point0[0], point0[1]);
let param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 300 * unitPx);
// console.log(param);
ctx.arc(
param.center.x,
param.center.y,
300 * unitPx,
param.angles.startAngle,
param.angles.endAngle
);
ctx.arc(param.center.x, param.center.y, 300 * unitPx, param.angles.startAngle, param.angles.endAngle);
point0 = pointsRight[1];
point1 = pointsRight[2];
ctx.moveTo(point0[0], point0[1]);
param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 80 * unitPx);
// console.log(param);
ctx.arc(
param.center.x,
param.center.y,
80 * unitPx,
param.angles.startAngle,
param.angles.endAngle
);
ctx.arc(param.center.x, param.center.y, 80 * unitPx, param.angles.startAngle, param.angles.endAngle);
point0 = pointsRight[2];
point1 = pointsRight[3];
ctx.moveTo(point0[0], point0[1]);
param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 13 * unitPx);
// console.log(param);
ctx.arc(
param.center.x,
param.center.y,
13 * unitPx,
param.angles.startAngle,
param.angles.endAngle
);
ctx.arc(param.center.x, param.center.y, 13 * unitPx, param.angles.startAngle, param.angles.endAngle);
point0 = pointsRight[3];
point1 = pointsRight[4];
@ -153,43 +117,25 @@ export default function StandardLayer(props: {
ctx.moveTo(point0[0], point0[1]);
param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 13 * unitPx);
// console.log(param);
ctx.arc(
param.center.x,
param.center.y,
13 * unitPx,
param.angles.startAngle,
param.angles.endAngle
);
ctx.arc(param.center.x, param.center.y, 13 * unitPx, param.angles.startAngle, param.angles.endAngle);
point0 = pointsLeft[4];
point1 = pointsLeft[5];
ctx.moveTo(point0[0], point0[1]);
param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 80 * unitPx);
// console.log(param);
ctx.arc(
param.center.x,
param.center.y,
80 * unitPx,
param.angles.startAngle,
param.angles.endAngle
);
ctx.arc(param.center.x, param.center.y, 80 * unitPx, param.angles.startAngle, param.angles.endAngle);
point0 = pointsLeft[5];
point1 = pointsLeft[6];
ctx.moveTo(point0[0], point0[1]);
param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 300 * unitPx);
// console.log(param);
ctx.arc(
param.center.x,
param.center.y,
300 * unitPx,
param.angles.startAngle,
param.angles.endAngle
);
ctx.arc(param.center.x, param.center.y, 300 * unitPx, param.angles.startAngle, param.angles.endAngle);
ctx.stroke();
},
[pointsLeft, pointsRight, unitPx, xEndPx, xStartPx, xStepPx, yEndPx, yStartPx, yStepPx]
[pointsLeft, pointsRight, props.height, props.width, unitPx, xEndPx, xStartPx, yStartPx, yStepPx]
);
useEffect(() => {
const canvas = canvasRef.current;
@ -201,7 +147,7 @@ export default function StandardLayer(props: {
}, [draw]);
return (
<div>
<div style={{ visibility: props.visibility }}>
<canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
</div>
);

Write Preview
Loading…
Cancel
Save