diff --git a/src/components/CustomNavBar.tsx b/src/components/CustomNavBar.tsx index da85266..09bafd2 100644 --- a/src/components/CustomNavBar.tsx +++ b/src/components/CustomNavBar.tsx @@ -19,7 +19,7 @@ export default function CustomNavBar({ title }: { title: string }) { {/** 导航栏 */}

{title}

-
setShowDetail(!showDetail)}> +
setShowDetail(!showDetail)}>
78%
icon 设备已连接 diff --git a/src/components/RailTypeBtn.tsx b/src/components/RailTypeBtn.tsx new file mode 100644 index 0000000..d5620ef --- /dev/null +++ b/src/components/RailTypeBtn.tsx @@ -0,0 +1,12 @@ +// import icon_rail from "../assets/icon_track.svg"; +export default function RailTypeBtn({ text, onClick }: { text: string; onClick?: () => void }) { + return ( +
+ {/* icon */} + {text} + +
+ ); +} diff --git a/src/index.css b/src/index.css index d624967..1a0ccc7 100644 --- a/src/index.css +++ b/src/index.css @@ -27,6 +27,7 @@ padding-top: 0.25rem; padding-bottom: 0.25rem; color: #fff; + cursor: pointer; } .btn-contained:active { opacity: 0.8; @@ -45,6 +46,7 @@ padding-right: 1rem; padding-top: 0.25rem; padding-bottom: 0.25rem; + cursor: pointer; } .btn-outlined:active { opacity: 0.8; @@ -59,6 +61,7 @@ padding-top: 0.25rem; padding-bottom: 0.25rem; color: #333; + cursor: pointer; } .btn-elevated:active { opacity: 0.8; diff --git a/src/pages/Measure.tsx b/src/pages/Measure.tsx index 29c0c90..cd3e034 100644 --- a/src/pages/Measure.tsx +++ b/src/pages/Measure.tsx @@ -5,14 +5,20 @@ import MeasurementCanvas, { BenchmarkShape, MeasurementCanvasRef, } from '../components/konva/MeasurementCanvas'; -import { useEffect, useRef } from 'react'; -import { rail6001 } from '../utils/constant'; +import { useEffect, useRef, useState } from 'react'; +import { rail6001, railTypes } from '../utils/constant'; + +import RailTypeBtn from '../components/RailTypeBtn'; +import { Picker } from 'antd-mobile'; export default function Measure() { const navigate = useNavigate(); const canvasRef = useRef(null); + const [railPickerVisible, setRailPickerVisible] = useState(false); + const [railId, setRailId] = useState<(number | string | null)[]>([1]); + const onSaveClick = () => { navigate('/measure/save'); }; @@ -20,62 +26,85 @@ export default function Measure() { useEffect(() => { const benchmarkShapes = JSON.parse(rail6001.points) as BenchmarkShape[]; if (canvasRef.current) { - console.log('解析后的基础图形数据:', benchmarkShapes); canvasRef.current.setBenchmarkData(benchmarkShapes); } }, []); + function railName() { + return railTypes.find(r => r.id === railId[0])?.name || '' + } + return ( -
-
- -
+ <> +
+
+ +
-
-
-
- +
+
+
+ +
+ setRailPickerVisible(true)} + /> +
+
-
-
-

北京铁路局 /客运段/京沪线/左侧

- - 修改 - -
+
+

北京铁路局 /客运段/京沪线/左侧

+ + 修改 + +
-
-
开始测量
-
- 保存 -
-
+
+
开始测量
+
+ 保存 +
+
+ +
+ + + + + + +
+
+
-
- - - - - - -
- -
+ ({ ...t, label: t.name, value: t.id }))]} + visible={railPickerVisible} + onClose={() => { + setRailPickerVisible(false); + }} + value={railId} + onConfirm={v => { + setRailId(v); + }} + /> + ); } diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 4f7f31b..a895add 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -26,7 +26,7 @@ export default function Setting() {
端口 diff --git a/src/utils/constant.ts b/src/utils/constant.ts index 62e28d8..cbd7def 100644 --- a/src/utils/constant.ts +++ b/src/utils/constant.ts @@ -6,4 +6,27 @@ export const rail6001 = { code: "6001", points: "[{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": -9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -9.949,\"y\": 0.165},\"end\": {\"x\": -25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -25.35,\"y\": 2.185},\"end\": {\"x\": -35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"line\",\"start\": {\"x\": -35.4,\"y\": 14.2},\"end\": {\"x\": -36.317,\"y\": 32.539},\"color\":\"#000000\"},{\"type\":\"arc\",\"start\": {\"x\": -36.317,\"y\": 32.539},\"end\": {\"x\": -32.904,\"y\": 37.532},\"radius\": 5,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"line\",\"start\": {\"x\": -32.904,\"y\": 37.532},\"end\": {\"x\": -20,\"y\": 41.833},\"color\":\"#000000\"},{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": 9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": 9.949,\"y\": 0.165},\"end\": {\"x\": 25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#000000\",\"side\":\"left\"},{\"type\":\"arc\",\"start\": {\"x\": 25.35,\"y\": 2.185},\"end\": {\"x\": 35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#000000\",\"side\":\"left\"},{\"type\":\"line\",\"start\": {\"x\": 35.4,\"y\": 14.2},\"end\": {\"x\": 36.317,\"y\": 32.539},\"color\":\"#000000\"},{\"type\":\"arc\",\"start\": {\"x\": 36.317,\"y\": 32.539},\"end\": {\"x\": 32.904,\"y\": 37.532},\"radius\": 5,\"color\":\"#000000\",\"side\":\"left\"},{\"type\":\"line\",\"start\": {\"x\": 32.904,\"y\": 37.532},\"end\": {\"x\": 20,\"y\": 41.833},\"color\":\"#000000\"}]", calPoints: "[{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": -9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#339900\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -9.949,\"y\": 0.165},\"end\": {\"x\": -25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#336699\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -25.35,\"y\": 2.185},\"end\": {\"x\": -35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#660000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": 9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#99CCCC\",\"side\":\"left\"},{\"type\":\"arc\",\"start\": {\"x\": 9.949,\"y\": 0.165},\"end\": {\"x\": 25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#CC0033\",\"side\":\"left\"},{\"type\":\"arc\",\"start\": {\"x\": 25.35,\"y\": 2.185},\"end\": {\"x\": 35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#CC6600\",\"side\":\"left\"}]" -} \ No newline at end of file +} + +export const railTypes = [ + { + id: 1, + code: "1", + name: "60轨", + }, + { + id: 2, + code: "2", + name: "60N轨", + }, + { + id: 3, + code: "3", + name: "50轨", + }, + { + id: 4, + code: "4", + name: "43轨", + }, +]; \ No newline at end of file