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.
53 lines
1.9 KiB
53 lines
1.9 KiB
import { Button, Checkbox, CheckboxProps, Radio, RadioChangeEvent } from "antd";
|
|
import { useState } from "react";
|
|
import { useNavigate } from "react-router";
|
|
import GridLayer from "./graph/GridLayer";
|
|
import StandardLayer from "./graph/StandardLayer";
|
|
|
|
export default function MeasureAction() {
|
|
const navigate = useNavigate();
|
|
const [sideVal, setSideVal] = useState<1 | 2>(1);
|
|
|
|
const onSideChange = (e: RadioChangeEvent) => {
|
|
setSideVal(e.target.value);
|
|
};
|
|
const onAfterSaveChange: CheckboxProps["onChange"] = e => {
|
|
console.log(`checked = ${e.target.checked}`);
|
|
};
|
|
const onAnalysisBtnClick = () => {
|
|
navigate("../detail");
|
|
};
|
|
return (
|
|
<div className="flex h-full ">
|
|
<div className="flex-none border relative">
|
|
<GridLayer width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30} columns={10} rows={7} cellNum={10} />
|
|
<div className="absolute top-0">
|
|
<StandardLayer width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30} />
|
|
</div>
|
|
</div>
|
|
<div className="w-[300px] flex-none py-6">
|
|
<h1 className="font-medium text-xl text-center">测量步骤</h1>
|
|
<section className="flex flex-col items-center gap-4 mt-6 border-t border-[#D8D8D8] py-4">
|
|
<Radio.Group
|
|
value={sideVal}
|
|
onChange={onSideChange}
|
|
options={[
|
|
{ value: 1, label: "测量左侧" },
|
|
{ value: 2, label: "测量右侧" },
|
|
]}
|
|
/>
|
|
<Button style={{ width: 200 }} size="large" type="primary">
|
|
开始测量
|
|
</Button>
|
|
<Button style={{ width: 200 }} size="large" type="primary" onClick={onAnalysisBtnClick}>
|
|
分析
|
|
</Button>
|
|
<Button style={{ width: 200 }} size="large" type="primary">
|
|
保存
|
|
</Button>
|
|
<Checkbox onChange={onAfterSaveChange}>保存后自动开始新测量</Checkbox>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|