局段线选择器

src/pages/Measure.tsx

@@ -9,10 +9,11 @@ import { useEffect, useRef, useState } from 'react';
 import { rail6001, railTypes } from '../utils/constant';
 
 import RailTypeBtn from '../components/RailTypeBtn';
-import { Picker, Toast } from 'antd-mobile';
+import { Cascader, Picker, Toast } from 'antd-mobile';
 import { useAppDispatch, useAppSelector } from '../utils/hooks';
 import { updateTaskState } from '../store/features/measureSlice';
 import Bridge from '../utils/bridge';
+import { selectLabeledKtjOrgs } from '../store/features/baseData';
 
 // declare global {
 //   interface Window {
@@ -35,11 +36,13 @@ import Bridge from '../utils/bridge';
 export default function Measure() {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
+  const labeledKtjOrgs = useAppSelector((state) => selectLabeledKtjOrgs(state.baseData));
   const measureState = useAppSelector((state) => state.measure);
 
   const canvasRef = useRef<MeasurementCanvasRef>(null);
 
   const [railPickerVisible, setRailPickerVisible] = useState(false);
+  const [orgPickerVisible, setOrgPickerVisible] = useState(false);
   const [railId, setRailId] = useState<(number | string | null)[]>([1]);
 
   // 绘制轨型基准线
@@ -82,6 +85,13 @@ export default function Measure() {
     });
   };
 
+  const onOrgBarClick = async () => {
+    const value = await Cascader.prompt({
+      options: labeledKtjOrgs,
+      placeholder: '请选择',
+    });
+    Toast.show(value ? `你选择了 ${value.join(' - ')}` : '你没有进行选择');
+  };
   function stepState(step: StepName): StepState {
     if (!measureState.taskState) {
       return 'none';
@@ -162,7 +172,10 @@ export default function Measure() {
             </div>
           </div>
 
-          <section className="h-10 bg-[#e3e8f5] flex justify-between items-center px-4">
+          <section
+            className="h-10 bg-[#e3e8f5] flex justify-between items-center px-4"
+            onClick={onOrgBarClick}
+          >
             <p className="text-text">北京铁路局 /客运段/京沪线/左侧</p>
             <Link to="/home/setting" className="text-primary underline">
               修改

src/pages/Setting.tsx

@@ -42,7 +42,7 @@ export default function Setting() {
             </div>
           </div>
         </section>
-        <section>
+        {/* <section>
           <div className="h-[42px] px-5">
             <h1 className="h-[42px] leading-[42px] text-base text-text font-medium">信息设置</h1>
           </div>
@@ -71,7 +71,7 @@ export default function Setting() {
               />
             </div>
           </div>
-        </section>
+        </section> */}
 
         <div className="btn-contained rounded-md h-12 mx-9 my-8 text-base font-medium">保存</div>
       </div>

src/services/apiTypes.ts

@@ -11,3 +11,16 @@ export type Measurement = {
   rightPoints: string; // json: 坐标数组
   upload: boolean;
 };
+
+export type KTJOrg = {
+  key: string;
+  value: string;
+  gwdDicList: Array<{
+    key: string;
+    value: string;
+    railDicList: Array<{
+      key: string;
+      value: string;
+    }>;
+  }>;
+};

src/store/features/baseData.ts

@@ -0,0 +1,26 @@
+import { createSelector, createSlice } from "@reduxjs/toolkit";
+import { KTJOrg } from "../../services/apiTypes";
+import { labeledKtjOrgs } from "../../utils/helper";
+
+import { ktjOrgs } from "../../utils/constant";
+
+interface BaseDataState {
+    ktjOrgs: KTJOrg[];
+}
+
+const initialState: BaseDataState = {
+    ktjOrgs: ktjOrgs as KTJOrg[],
+}
+
+export const baseDataSlice = createSlice({
+    name: 'baseData',
+    initialState,
+    reducers: {}
+});
+
+export default baseDataSlice.reducer;
+
+export const selectKtjOrgs = (state: BaseDataState) => state.ktjOrgs
+export const selectLabeledKtjOrgs = createSelector(selectKtjOrgs,(orgs) => {
+    return labeledKtjOrgs(orgs)
+})

src/store/index.ts

@@ -2,13 +2,15 @@ import { configureStore } from '@reduxjs/toolkit';
 import measureSlice from './features/measureSlice';
 import contextSlice from './features/contextSlice';
 import historySlice from './features/historySlice';
+import baseDataSlice from './features/baseData';
 // configureStore创建一个redux数据
 const store = configureStore({
   // 合并多个Slice
   reducer: {
     measure: measureSlice,
     context: contextSlice,
-    history: historySlice
+    history: historySlice,
+    baseData: baseDataSlice,
   },
 });
 

src/utils/helper.ts

@@ -0,0 +1,32 @@
+import { KTJOrg } from "../services/apiTypes";
+
+export type LabelKTJOrg = {
+  label: string;
+  value: string;
+  children: Array<{
+    label: string;
+    value: string;
+    children: Array<{
+      label: string;
+      value: string;
+    }>;
+  }>;
+};
+
+export function labeledKtjOrgs(ktjOrgs: KTJOrg[]): LabelKTJOrg[] {
+  return ktjOrgs.map((org) => {
+    const _org: LabelKTJOrg = {
+      label: org.value || org.key,
+      value: org.key,
+      children: org.gwdDicList.map((gwd) => ({
+        label: gwd.value || gwd.key,
+        value: gwd.key,
+        children: gwd.railDicList.map((rail) => ({
+          label: rail.value || rail.key,
+          value: rail.key,
+        })),
+      })),
+    };
+    return _org;
+  });
+}