轨型基础数据接口

src/pages/Measure.tsx

@@ -1,43 +1,68 @@
 import StepItem, { StepName, StepState } from '../components/StepItem';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import CustomNavBar from '../components/CustomNavBar';
 import MeasurementCanvas, {
   BenchmarkShape,
   MeasurementCanvasRef,
 } from '../components/konva/MeasurementCanvas';
 import { useEffect, useRef, useState } from 'react';
-import { rail6001, railTypes } from '../utils/constant';
 
 import RailTypeBtn from '../components/RailTypeBtn';
 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';
+import { selectLabeledKtjOrgs, updateRailPoints } from '../store/features/baseData';
 import { updateOrg } from '../store/features/contextSlice';
 import { textsOfKeys } from '../utils/helper';
 
-
 export default function Measure() {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const labeledKtjOrgs = useAppSelector((state) => selectLabeledKtjOrgs(state.baseData));
   const measureState = useAppSelector((state) => state.measure);
   const contextState = useAppSelector((state) => state.context);
+  const baseState = useAppSelector((state) => state.baseData);
 
   const canvasRef = useRef<MeasurementCanvasRef>(null);
 
   const [railPickerVisible, setRailPickerVisible] = useState(false);
 
-  const [railId, setRailId] = useState<(number | string | null)[]>([1]);
+  const [railId, setRailId] = useState<(number | string | null)[]>([]);
 
-  // 绘制轨型基准线
+  // 默认选中第一个轨型
   useEffect(() => {
-    const benchmarkShapes = JSON.parse(rail6001.points) as BenchmarkShape[];
+    if (baseState.railTypes.length > 0) {
+      setRailId([baseState.railTypes[0].id]);
+    }
+  }, [baseState.railTypes]);
+
+  function drawRailBaseLine(points: string) {
+    const benchmarkShapes = JSON.parse(points) as BenchmarkShape[];
     if (canvasRef.current) {
       canvasRef.current.setBenchmarkData(benchmarkShapes);
     }
-  }, []);
+  }
+
+  // 检查轨型有没有坐标，如果有，绘制轨型基准线，如果没，拉取再绘制其线
+  useEffect(() => {
+    if (railId.length > 0) {
+      const r = baseState.railTypes.find((rail) => rail.id === railId[0]);
+      if (!r) return;
+      if (!!r.points) {
+        drawRailBaseLine(r.points);
+        return;
+      }
+      Bridge.getTrackPoint({ code: r.code }).then((res) => {
+        if (res.success) {
+          dispatch(updateRailPoints(res.data));
+          drawRailBaseLine(res.data.points!);
+        } else {
+          Toast.show(res.message);
+        }
+      });
+    }
+  }, [baseState.railTypes, dispatch, railId]);
 
   // 绘制测量坐标线
   useEffect(() => {
@@ -133,7 +158,7 @@ export default function Measure() {
   }
 
   function railName() {
-    return railTypes.find((r) => r.id === railId[0])?.name || '';
+    return baseState.railTypes.find((r) => r.id === railId[0])?.name || '';
   }
 
   return (
@@ -162,9 +187,12 @@ export default function Measure() {
                 showCoordinates={false}
                 ref={canvasRef}
               />
-              <div className="absolute left-1 bottom-1">
-                <RailTypeBtn text={railName()} onClick={() => setRailPickerVisible(true)} />
-              </div>
+
+              {railId.length > 0 && (
+                <div className="absolute left-1 bottom-1">
+                  <RailTypeBtn text={railName()} onClick={() => setRailPickerVisible(true)} />
+                </div>
+              )}
             </div>
           </div>
 
@@ -199,7 +227,7 @@ export default function Measure() {
       </div>
 
       <Picker
-        columns={[railTypes.map((t) => ({ ...t, label: t.name, value: t.id }))]}
+        columns={[baseState.railTypes.map((t) => ({ ...t, label: t.name, value: t.id }))]}
         visible={railPickerVisible}
         onClose={() => {
           setRailPickerVisible(false);

src/pages/MeasureSave.tsx

@@ -1,13 +1,16 @@
 import { NavBar, Picker } from 'antd-mobile';
 import { useNavigate } from 'react-router';
 import icon_arr_r from '../assets/icon_arr_s_r.svg';
-import { railTypes } from '../utils/constant';
+// import { railTypes } from '../utils/constant';
 import { ChangeEvent, useState } from 'react';
+import { useAppSelector } from '../utils/hooks';
 
 export default function MeasureSave() {
   const navigate = useNavigate();
   const back = () => navigate(-1);
 
+  const baseState = useAppSelector(state => state.baseData);
+
   const [name, setName] = useState("")
   const [railPickerVisible, setRailPickerVisible] = useState(false);
   const [railId, setRailId] = useState<(number | string | null)[]>([1]);
@@ -40,7 +43,7 @@ export default function MeasureSave() {
             <div className="h-12 flex items-center " onClick={() => setRailPickerVisible(true)}>
               <span>轨型</span>
               <span className="ml-auto mr-4">
-                {railTypes.find((r) => r.id === railId[0])?.name || ''}
+                {baseState.railTypes.find((r) => r.id === railId[0])?.name || ''}
               </span>
               <img src={icon_arr_r} alt="arr" />
             </div>
@@ -54,7 +57,7 @@ export default function MeasureSave() {
         </div>
       </div>
       <Picker
-        columns={[railTypes.map((t) => ({ ...t, label: t.name, value: t.id }))]}
+        columns={[baseState.railTypes.map((t) => ({ ...t, label: t.name, value: t.id }))]}
         visible={railPickerVisible}
         onClose={() => {
           setRailPickerVisible(false);

src/services/apiTypes.ts

@@ -25,3 +25,11 @@ export type KTJOrg = {
     }>;
   }>;
 };
+
+export type RailType = {
+  id: number;
+  name: string;
+  code: string;
+  calPoints?: string;
+  points?: string;
+}

src/store/features/baseData.ts

@@ -1,26 +1,51 @@
-import { createSelector, createSlice } from "@reduxjs/toolkit";
-import { KTJOrg } from "../../services/apiTypes";
-import { labeledKtjOrgs } from "../../utils/helper";
+import { createAsyncThunk, createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { KTJOrg, RailType } from '../../services/apiTypes';
+import { labeledKtjOrgs } from '../../utils/helper';
 
-import { ktjOrgs } from "../../utils/constant";
+import { ktjOrgs } from '../../utils/constant';
+import Bridge from '../../utils/bridge';
 
 interface BaseDataState {
-    ktjOrgs: KTJOrg[];
+  ktjOrgs: KTJOrg[];
+  railTypes: RailType[];
 }
 
 const initialState: BaseDataState = {
-    ktjOrgs: ktjOrgs as KTJOrg[],
-}
+  ktjOrgs: ktjOrgs as KTJOrg[],
+  railTypes: [],
+};
+
+export const fetchRailTypes = createAsyncThunk('base/fetchRailTypes', async (_, thunkAPI) => {
+  const res = await Bridge.getBasicTrackList();
+  return res.success ? res.data : null;
+});
 
 export const baseDataSlice = createSlice({
-    name: 'baseData',
-    initialState,
-    reducers: {}
+  name: 'baseData',
+  initialState,
+  reducers: {
+    updateRailTypes: (state, action: PayloadAction<RailType[]>) => {
+      state.railTypes = action.payload;
+    },
+    updateRailPoints: (state, action: PayloadAction<RailType>) => {
+      const r = state.railTypes.find((r) => r.code === action.payload.code);
+      if (r) {
+        r.points = action.payload.points;
+        r.calPoints = action.payload.calPoints;
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchRailTypes.fulfilled, (state, action) => {
+      state.railTypes = action.payload || [];
+    });
+  },
 });
 
+export const { updateRailPoints } = baseDataSlice.actions;
 export default baseDataSlice.reducer;
 
-export const selectKtjOrgs = (state: BaseDataState) => state.ktjOrgs
-export const selectLabeledKtjOrgs = createSelector(selectKtjOrgs,(orgs) => {
-    return labeledKtjOrgs(orgs)
-})
+export const selectKtjOrgs = (state: BaseDataState) => state.ktjOrgs;
+export const selectLabeledKtjOrgs = createSelector(selectKtjOrgs, (orgs) => {
+  return labeledKtjOrgs(orgs);
+});

src/utils/bridge.ts

@@ -1,6 +1,6 @@
 import { Subject } from 'rxjs';
 import httpRequest from '../services/httpRequest';
-import { Measurement } from '../services/apiTypes';
+import { Measurement, RailType } from '../services/apiTypes';
 import { MobileDatagram, SyncProgress } from '../services/mobileWsType';
 
 declare global {
@@ -214,7 +214,7 @@ export default class Bridge {
       params: {},
     });
   }
-  static connectPeripheral(params: { id: string }) {
+  static connectPeripheral(params: { mac: string }) {
     return httpRequest<BridgeBaseResult>({
       url: '/api/ble/connect',
       method: 'POST',
@@ -314,4 +314,18 @@ export default class Bridge {
       params,
     });
   }
+  static getBasicTrackList() {
+    return httpRequest<BridgeBaseResult<RailType[]>>({
+      url: '/api/basic/track-list',
+      method: 'POST',
+      params: {},
+    });
+  }
+  static getTrackPoint(params: { code: string }) {
+    return httpRequest<BridgeBaseResult<RailType>>({
+      url: '/api/basic/track/get-by-code',
+      method: 'POST',
+      params,
+    });
+  }
 }

src/utils/constant.ts

@@ -1653,25 +1653,25 @@ export const ktjOrgs = [
   },
 ];
 
-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轨',
-  },
-];
+// 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轨',
+//   },
+// ];