diff --git a/src/pages/measure/components/MeasureAction.tsx b/src/pages/measure/components/MeasureAction.tsx
index e6e71e4..d76826a 100644
--- a/src/pages/measure/components/MeasureAction.tsx
+++ b/src/pages/measure/components/MeasureAction.tsx
@@ -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">
diff --git a/src/pages/measure/components/graph/AreaLayer.tsx b/src/pages/measure/components/graph/AreaLayer.tsx
index f7bcede..4314ad3 100644
--- a/src/pages/measure/components/graph/AreaLayer.tsx
+++ b/src/pages/measure/components/graph/AreaLayer.tsx
@@ -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>
     );
diff --git a/src/pages/measure/components/graph/GridLayer.tsx b/src/pages/measure/components/graph/GridLayer.tsx
index fb36c71..37b44b7 100644
--- a/src/pages/measure/components/graph/GridLayer.tsx
+++ b/src/pages/measure/components/graph/GridLayer.tsx
@@ -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>
 	);
diff --git a/src/pages/measure/components/graph/MarkLayer.tsx b/src/pages/measure/components/graph/MarkLayer.tsx
index 560e814..f155894 100644
--- a/src/pages/measure/components/graph/MarkLayer.tsx
+++ b/src/pages/measure/components/graph/MarkLayer.tsx
@@ -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>
 	);
diff --git a/src/pages/measure/components/graph/RealtimeLayer.tsx b/src/pages/measure/components/graph/ResultLayer.tsx
similarity index 92%
rename from src/pages/measure/components/graph/RealtimeLayer.tsx
rename to src/pages/measure/components/graph/ResultLayer.tsx
index 387c5b2..c5ba795 100644
--- a/src/pages/measure/components/graph/RealtimeLayer.tsx
+++ b/src/pages/measure/components/graph/ResultLayer.tsx
@@ -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>
 	);
diff --git a/src/pages/measure/components/graph/StandardLayer.tsx b/src/pages/measure/components/graph/StandardLayer.tsx
index 6c6a325..216e99a 100644
--- a/src/pages/measure/components/graph/StandardLayer.tsx
+++ b/src/pages/measure/components/graph/StandardLayer.tsx
@@ -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>
 	);