测量页面选择轨型

src/components/CustomNavBar.tsx

@@ -19,7 +19,7 @@ export default function CustomNavBar({ title }: { title: string }) {
       {/** 导航栏 */}
       <div className="absolute left-0 top-0 w-full h-full flex items-center px-3 bg-white">
         <h1 className="text-lg text-text ml-3">{title}</h1>
-        <div className="ml-auto flex items-center" onClick={() => setShowDetail(!showDetail)}>
+        <div className="ml-auto flex items-center cursor-pointer" onClick={() => setShowDetail(!showDetail)}>
           <div className="bluetooth-battery flex justify-center items-center">78%</div>
           <img src={icon_bluetooth} alt="icon" className="mx-2" />
           <span>设备已连接</span>

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 (
+    <div
+      className="flex items-center border border-[#dfdfdf] rounded-sm bg-white/[0.7] px-2 py-1 gap-2"
+      onClick={onClick}>
+      {/* <img src={icon_rail} alt="icon" /> */}
+      <span className="text-title">{text}</span>
+      <i className="w-2 h-2 border-t border-r border-[#ccc] rotate-45"></i>
+    </div>
+  );
+}

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;

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<MeasurementCanvasRef>(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 (
-    <div className="relative pt-[--navBarHeight]">
-      <div className="absolute top-0 w-full z-10">
-        <CustomNavBar title={'测量'}></CustomNavBar>
-      </div>
+    <>
+      <div className="relative pt-[--navBarHeight]">
+        <div className="absolute top-0 w-full z-10">
+          <CustomNavBar title={'测量'}></CustomNavBar>
+        </div>
 
-      <main className="home-page-content overflow-x-hidden overflow-y-auto">
-        <div className="relative h-0 p-0 pb-[70%]">
-          <div className="absolute left-0 right-0 top-0 bottom-0 bg-title">
-            <MeasurementCanvas
-              width={window.innerWidth}
-              height={window.innerWidth * 0.7}
-              logicalExtent={{ minX: -45, maxX: 45, minY: -18, maxY: 52 }}
-              gridStep={3}
-              origin={{ x: 0, y: 20 }}
-              pixelPerMm={window.innerWidth / 90}
-              maxZoom={5}
-              showGrid={true}
-              showBenchmark={true}
-              showAnalysis={false}
-              showScale={false}
-              scaleInterval={1}
-              showCoordinates={false}
-              ref={canvasRef}
-            />
+        <main className="home-page-content overflow-x-hidden overflow-y-auto">
+          <div className="relative h-0 p-0 pb-[70%]">
+            <div className="absolute left-0 right-0 top-0 bottom-0 bg-title">
+              <MeasurementCanvas
+                width={window.innerWidth}
+                height={window.innerWidth * 0.7}
+                logicalExtent={{ minX: -45, maxX: 45, minY: -18, maxY: 52 }}
+                gridStep={3}
+                origin={{ x: 0, y: 20 }}
+                pixelPerMm={window.innerWidth / 90}
+                maxZoom={5}
+                showGrid={true}
+                showBenchmark={true}
+                showAnalysis={false}
+                showScale={false}
+                scaleInterval={1}
+                showCoordinates={false}
+                ref={canvasRef}
+              />
+              <div className="absolute left-1 bottom-1">
+                <RailTypeBtn
+                  text={railName()}
+                  onClick={() => setRailPickerVisible(true)}
+                />
+              </div>
+            </div>
           </div>
-        </div>
 
-        <section className="h-10 bg-[#e3e8f5] flex justify-between items-center px-4">
-          <p className="text-text">北京铁路局 /客运段/京沪线/左侧</p>
-          <Link to="/home/setting" className="text-primary underline">
-            修改
-          </Link>
-        </section>
+          <section className="h-10 bg-[#e3e8f5] flex justify-between items-center px-4">
+            <p className="text-text">北京铁路局 /客运段/京沪线/左侧</p>
+            <Link to="/home/setting" className="text-primary underline">
+              修改
+            </Link>
+          </section>
 
-        <section className="flex items-center gap-4 px-4 my-4">
-          <div className="btn-contained rounded-md text-sm h-10 flex-1">开始测量</div>
-          <div className="btn-contained rounded-md text-sm h-10 flex-1" onClick={onSaveClick}>
-            保存
-          </div>
-        </section>
+          <section className="flex items-center gap-4 px-4 my-4">
+            <div className="btn-contained rounded-md text-sm h-10 flex-1">开始测量</div>
+            <div className="btn-contained rounded-md text-sm h-10 flex-1" onClick={onSaveClick}>
+              保存
+            </div>
+          </section>
+
+          <section className="grid grid-cols-2 gap-[10px] px-3">
+            <StepItem state={2} text={'移到顶部停留2秒'} />
+            <StepItem state={2} text={'移到顶部停留2秒'} />
+            <StepItem state={0} text={'开始测量左侧'} />
+            <StepItem state={0} text={'开始测量右侧'} />
+            <StepItem state={1} text={'左侧测量完成'} />
+            <StepItem state={1} text={'右侧测量完成'} />
+          </section>
+        </main>
+      </div>
 
-        <section className="grid grid-cols-2 gap-[10px] px-3">
-          <StepItem state={2} text={'移到顶部停留2秒'} />
-          <StepItem state={2} text={'移到顶部停留2秒'} />
-          <StepItem state={0} text={'开始测量左侧'} />
-          <StepItem state={0} text={'开始测量右侧'} />
-          <StepItem state={1} text={'左侧测量完成'} />
-          <StepItem state={1} text={'右侧测量完成'} />
-        </section>
-      </main>
-    </div>
+      <Picker
+        columns={[railTypes.map(t => ({ ...t, label: t.name, value: t.id }))]}
+        visible={railPickerVisible}
+        onClose={() => {
+          setRailPickerVisible(false);
+        }}
+        value={railId}
+        onConfirm={v => {
+          setRailId(v);
+        }}
+      />
+    </>
   );
 }

src/pages/Setting.tsx

@@ -26,7 +26,7 @@ export default function Setting() {
             <div className="h-12 flex items-center">
               <span>端口</span>
               <input
-                type="number"
+                type="text"
                 placeholder="请填写"
                 className="border-0 outline-none self-stretch text-right flex-1 ml-4"
               />

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\"}]"
-}
+}
+
+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轨",
+	},
+];