拆分测量记录和上传记录

src/App.tsx

@@ -29,7 +29,7 @@ const BottomBar = () => {
   const tabs = [
     {
       key: '/home/measure',
-      title: '首页',
+      title: '测量',
       icon_s: icon_1_s,
       icon_n: icon_1_u,
     },

src/index.tsx

@@ -20,6 +20,8 @@ import Mine from './pages/Mine';
 import Mine2 from './pages/Mine2';
 import MeasureSave from './pages/MeasureSave';
 import MeasureRecord from './pages/MeasureRecord';
+import MeasurementList from './pages/MeasurementList';
+import UploadList from './pages/UploadList';
 
 const router = createHashRouter(
   createRoutesFromElements(
@@ -33,6 +35,8 @@ const router = createHashRouter(
       </Route>
       <Route path="measure">
         <Route path="save" element={<MeasureSave />}></Route>
+        <Route path="records" element={<MeasurementList />} />
+        <Route path="upload" element={<UploadList />} />
         <Route path="record/:recordId" element={<MeasureRecord />}></Route>
       </Route>
     </Route>

src/pages/MeasurementList.tsx

@@ -0,0 +1,84 @@
+import { NavBar } from 'antd-mobile';
+import { useNavigate } from 'react-router-dom';
+import MeasureGroups from '../components/MeasureGroups';
+import { useState } from 'react';
+import { Measurement } from '../services/apiTypes';
+import * as R from 'ramda';
+import { MoreOutline, UploadOutline } from 'antd-mobile-icons';
+
+import { dataList } from '../utils/constant';
+
+const PAGE_SIZE = 10;
+
+export default function MeasurementList() {
+  const navigate = useNavigate();
+
+  const [editMode, setEditMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+  async function loadMoreRecords() {}
+
+  const onItemSelect = (groupIdx: number, id: number) => {
+    if (selectedIds.includes(id)) {
+      setSelectedIds(R.reject((item) => item === id, selectedIds));
+    } else {
+      setSelectedIds([...selectedIds, id]);
+    }
+  };
+
+  const onGroupSelect = (groupIdx: number) => {
+    const ids = dataList[groupIdx].list.map((item) => item.id);
+    if (R.intersection(selectedIds, ids).length === ids.length) {
+      setSelectedIds(R.difference(selectedIds, ids));
+    } else {
+      setSelectedIds(R.union(selectedIds, ids));
+    }
+  };
+
+  const onUploadClick = () => {
+    navigate("/measure/upload")
+  }
+
+  const right = (
+    <div
+      className="flex justify-end gap-x-2"
+      style={{ fontSize: 24 }}
+    >
+      <UploadOutline  onClick={() => navigate("/measure/upload")} />
+      <MoreOutline  onClick={() => setEditMode(!editMode)}/>
+    </div>
+  );
+
+  const back = () => navigate(-1);
+  return (
+    <div>
+      <NavBar className="bg-white" onBack={back} right={right}>
+        测量记录
+      </NavBar>
+      <div
+        className="main-page-content overflow-x-hidden overflow-y-auto relative"
+        style={{ paddingBottom: editMode ? '48px' : 0 }}
+      >
+        <MeasureGroups
+          dataList={dataList}
+          editMode={editMode}
+          hasMore={false}
+          loadMore={loadMoreRecords}
+          onItemSelect={onItemSelect}
+          onGroupSelect={onGroupSelect}
+          selectedIds={selectedIds}
+        />
+        <footer
+          className="fixed -bottom-12 w-full h-12 bg-white flex px-5 py-2 gap-x-4"
+          style={{ bottom: editMode ? 0 : '-48px', transition: 'bottom 300ms' }}
+        >
+          <button disabled={selectedIds.length === 0} className="btn-contained rounded-md flex-1" onClick={onUploadClick}>
+            上传
+          </button>
+          <button disabled={selectedIds.length === 0} className="btn-contained rounded-md flex-1">
+            删除
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+}

src/pages/Mine2.tsx

@@ -1,138 +1,25 @@
-import { NavBar, Toast } from 'antd-mobile';
-import { useEffect, useRef, useState } from 'react';
-import { Measurement } from '../services/apiTypes';
-import Bridge from '../utils/bridge';
-import MeasureGroups from '../components/MeasureGroups';
-import { MoreOutline } from 'antd-mobile-icons';
-import * as R from 'ramda';
+import { List, NavBar } from 'antd-mobile';
 
-const PAGE_SIZE = 10;
-
-const dataList: Array<{ groupName: string; list: Measurement[] }> = [
-  {
-    groupName: '2025-03-02',
-    list: [
-      {
-        id: 1,
-        name: '测量名称1',
-        createAt: '2025-03-02 10:20',
-        line: '京沪线',
-        section: 'A段',
-        direction: '上行',
-        railId: 2,
-        leftPoints: '[]',
-        rightPoints: '[]',
-        bureau: '北京铁路局',
-        upload: false,
-      },
-      {
-        id: 2,
-        name: '测量名称2',
-        createAt: '2025-03-02 12:22',
-        line: '京沪线',
-        section: 'B段',
-        direction: '下行',
-        railId: 2,
-        leftPoints: '[]',
-        rightPoints: '[]',
-        bureau: '北京铁路局',
-        upload: false,
-      },
-      {
-        id: 3,
-        name: '测量名称3',
-        createAt: '2025-03-02 12:20',
-        line: '京沪线',
-        section: 'C段',
-        direction: '上行',
-        railId: 2,
-        leftPoints: '[]',
-        rightPoints: '[]',
-        bureau: '北京铁路局',
-        upload: false,
-      },
-    ],
-  },
-  {
-    groupName: '2025-02-01',
-    list: [
-      {
-        id: 4,
-        name: '测量名称2',
-        createAt: '2025-03-02 10:20',
-        line: '京沪线',
-        section: 'D段',
-        direction: '下行',
-        railId: 2,
-        leftPoints: '[]',
-        rightPoints: '[]',
-        bureau: '北京铁路局',
-        upload: false,
-      },
-      {
-        id: 5,
-        name: '测量名称2',
-        createAt: '2025-03-02 10:20',
-        line: '京沪线',
-        section: 'E段',
-        direction: '下行',
-        railId: 2,
-        leftPoints: '[]',
-        rightPoints: '[]',
-        bureau: '北京铁路局',
-        upload: false,
-      },
-    ],
-  },
-];
+import { UnorderedListOutline, SetOutline } from 'antd-mobile-icons';
+import { useNavigate } from 'react-router-dom';
 
 export default function Mine2() {
-  const [editMode, setEditMode] = useState(false);
-  const [selectedIds, setSelectedIds] = useState<number[]>([]);
-  async function loadMoreRecords() {}
-
-  const onItemSelect = (groupIdx: number, id: number) => {
-    if (selectedIds.includes(id)) {
-      setSelectedIds(R.reject((item) => item === id, selectedIds));
-    } else {
-      setSelectedIds([...selectedIds, id]);
-    }
-  };
-
-  const onGroupSelect = (groupIdx: number) => {
-    const ids = dataList[groupIdx].list.map((item) => item.id);
-    if (R.intersection(selectedIds, ids).length === ids.length) {
-      setSelectedIds(R.difference(selectedIds, ids));
-    } else {
-      setSelectedIds(R.union(selectedIds, ids));
-    }
-  };
-
-  const right = (
-    <div
-      onClick={() => setEditMode(!editMode)}
-      className="flex justify-end"
-      style={{ fontSize: 24 }}
-    >
-      <MoreOutline />
-    </div>
-  );
-
+  const navigate = useNavigate();
   return (
     <div>
-      <NavBar className="bg-white" back={null} right={right}>
+      <NavBar className="bg-white" back={null}>
         我的
       </NavBar>
-      <div className="home-page-content overflow-x-hidden overflow-y-auto">
-        <MeasureGroups
-          dataList={dataList}
-          editMode={editMode}
-          hasMore={false}
-          loadMore={loadMoreRecords}
-          onItemSelect={onItemSelect}
-          onGroupSelect={onGroupSelect}
-          selectedIds={selectedIds}
-        />
+      <div className="home-page-content overflow-x-hidden overflow-y-auto pt-3">
+        <List>
+          <List.Item prefix={<UnorderedListOutline />} onClick={() => navigate('/measure/records')}>
+            测量记录
+          </List.Item>
+
+          <List.Item prefix={<SetOutline />} onClick={() => {}}>
+            设置
+          </List.Item>
+        </List>
       </div>
     </div>
   );

src/pages/UploadList.tsx

@@ -0,0 +1,65 @@
+import { ActionSheet, InfiniteScroll, List, NavBar, Popup } from 'antd-mobile';
+import { useNavigate } from 'react-router-dom';
+
+import { MoreOutline } from 'antd-mobile-icons';
+import { useState } from 'react';
+
+import { dataListFlat } from '../utils/constant';
+import MeasureGroups from '../components/MeasureGroups';
+import MeasureItem from '../components/MeasureItem';
+
+
+export default function UploadList() {
+  const navigate = useNavigate();
+
+  const [showMenu, setShowMenu] = useState(false);
+
+  const actions = [
+    { text: '重试失败任务', key: 'retry' },
+    { text: '清空列表', key: 'clear' },
+    { text: '清空已完成任务', key: 'clearCompleted' },
+  ]
+  
+  const back = () => navigate(-1);
+
+  const right = (
+    <div
+      onClick={() => setShowMenu(!showMenu)}
+      className="flex justify-end gap-x-2"
+      style={{ fontSize: 24 }}
+    >
+      <MoreOutline />
+    </div>
+  );
+
+  return (
+    <div>
+      <NavBar className="bg-white" onBack={back} right={right}>
+        上传数据
+      </NavBar>
+      <div className="main-page-content">
+        <header className="h-8 bg-[#EEE] flex items-center px-4">
+          <span>剩余任务10个</span>
+          <i className="border-l border-[#999] h-3 mx-2" />
+          <span>失败0个</span>
+          <p className="ml-auto text-primary">上传中</p>
+        </header>
+        <main className=" overflow-x-hidden overflow-y-auto">
+          <List>
+            {dataListFlat.map((item) => (
+              <List.Item key={item.id}>
+                <MeasureItem item={item} onDetail={() => navigate(`/measure/record/${item.id}`)} />
+              </List.Item>
+            ))}
+            {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> */}
+          </List>
+        </main>
+      </div>
+      <ActionSheet
+        visible={showMenu}
+        actions={actions}
+        onClose={() => setShowMenu(false)}
+      />
+    </div>
+  );
+}

src/utils/bridge.ts

@@ -161,7 +161,7 @@ export default class Bridge {
       return httpRequest<BridgeBaseResult<Measurement[]>>({
         url: '/api/mobile/getUploadedRecords',
         method: 'GET',
-        params: param
+        params: param,
       });
     }
   }
@@ -176,7 +176,7 @@ export default class Bridge {
       return httpRequest<BridgeBaseResult<Measurement[]>>({
         url: '/api/mobile/getUnuploadRecords',
         method: 'GET',
-        params: param
+        params: param,
       });
     }
   }
@@ -191,7 +191,7 @@ export default class Bridge {
       return httpRequest<BridgeBaseResult<Measurement[]>>({
         url: '/api/mobile/searchHistoryRecords',
         method: 'GET',
-        params: param
+        params: param,
       });
     }
   }
@@ -206,7 +206,7 @@ export default class Bridge {
       return httpRequest<BridgeBaseResult<Measurement>>({
         url: '/api/mobile/getMeasurementDetail',
         method: 'GET',
-        params: param
+        params: param,
       });
     }
   }
@@ -221,7 +221,7 @@ export default class Bridge {
       return httpRequest<BridgeBaseResult>({
         url: '/api/mobile/uploadRecords',
         method: 'POST',
-          params: param
+        params: param,
       });
     }
   }

src/utils/constant.ts

@@ -1,89 +1,213 @@
+import { Measurement } from '../services/apiTypes';
+
 export const rail6001 = {
   id: 1,
-    createTime: "2025-03-03 12:31:25",
-    updateTime: "2025-03-03 12:31:25",
-    name: "60型标准轨",
-    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\"}]"
-}
+  createTime: '2025-03-03 12:31:25',
+  updateTime: '2025-03-03 12:31:25',
+  name: '60型标准轨',
+  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轨",
+    code: '1',
+    name: '60轨',
   },
   {
     id: 2,
-		code: "2",
-		name: "60N轨",
+    code: '2',
+    name: '60N轨',
   },
   {
     id: 3,
-		code: "3",
-		name: "50轨",
+    code: '3',
+    name: '50轨',
   },
   {
     id: 4,
-		code: "4",
-		name: "43轨",
+    code: '4',
+    name: '43轨',
   },
 ];
 
 export const bureauList = [
   {
     id: 1,
-		name: "北京铁路局"
+    name: '北京铁路局',
   },
   {
     id: 2,
-		name: "南京铁路局"
+    name: '南京铁路局',
   },
   {
     id: 3,
-		name: "上海铁路局"
+    name: '上海铁路局',
   },
   {
     id: 4,
-		name: "广州铁路局"
-	}
-]
+    name: '广州铁路局',
+  },
+];
 
 export const lineList = [
   {
     id: 1,
-		name: "京沪线"
+    name: '京沪线',
   },
   {
     id: 2,
-		name: "京九线"
+    name: '京九线',
   },
   {
     id: 3,
-		name: "陇海线"
+    name: '陇海线',
   },
   {
     id: 4,
-		name: "京广线"
-	}
-]
+    name: '京广线',
+  },
+];
 
 export const sectionList = [
   {
     id: 1,
-		name: "路段一"
+    name: '路段一',
+  },
+  {
+    id: 2,
+    name: '路段二',
+  },
+  {
+    id: 3,
+    name: '路段三',
+  },
+  {
+    id: 4,
+    name: '路段四',
+  },
+];
+
+export const dataListFlat: Measurement[] = [
+  {
+    id: 1,
+    name: '测量名称1',
+    createAt: '2025-03-02 10:20',
+    line: '京沪线',
+    section: 'A段',
+    direction: '上行',
+    railId: 2,
+    leftPoints: '[]',
+    rightPoints: '[]',
+    bureau: '北京铁路局',
+    upload: false,
   },
   {
     id: 2,
-		name: "路段二"
+    name: '测量名称2',
+    createAt: '2025-03-02 12:22',
+    line: '京沪线',
+    section: 'B段',
+    direction: '下行',
+    railId: 2,
+    leftPoints: '[]',
+    rightPoints: '[]',
+    bureau: '北京铁路局',
+    upload: false,
   },
   {
     id: 3,
-		name: "路段三"
+    name: '测量名称3',
+    createAt: '2025-03-02 12:20',
+    line: '京沪线',
+    section: 'C段',
+    direction: '上行',
+    railId: 2,
+    leftPoints: '[]',
+    rightPoints: '[]',
+    bureau: '北京铁路局',
+    upload: false,
+  },
+];
+
+export const dataList: Array<{ groupName: string; list: Measurement[] }> = [
+  {
+    groupName: '2025-03-02',
+    list: [
+      {
+        id: 1,
+        name: '测量名称1',
+        createAt: '2025-03-02 10:20',
+        line: '京沪线',
+        section: 'A段',
+        direction: '上行',
+        railId: 2,
+        leftPoints: '[]',
+        rightPoints: '[]',
+        bureau: '北京铁路局',
+        upload: false,
       },
       {
+        id: 2,
+        name: '测量名称2',
+        createAt: '2025-03-02 12:22',
+        line: '京沪线',
+        section: 'B段',
+        direction: '下行',
+        railId: 2,
+        leftPoints: '[]',
+        rightPoints: '[]',
+        bureau: '北京铁路局',
+        upload: false,
+      },
+      {
+        id: 3,
+        name: '测量名称3',
+        createAt: '2025-03-02 12:20',
+        line: '京沪线',
+        section: 'C段',
+        direction: '上行',
+        railId: 2,
+        leftPoints: '[]',
+        rightPoints: '[]',
+        bureau: '北京铁路局',
+        upload: false,
+      },
+    ],
+  },
+  {
+    groupName: '2025-02-01',
+    list: [
+      {
         id: 4,
-		name: "路段四"
-	}
-]
+        name: '测量名称2',
+        createAt: '2025-03-02 10:20',
+        line: '京沪线',
+        section: 'D段',
+        direction: '下行',
+        railId: 2,
+        leftPoints: '[]',
+        rightPoints: '[]',
+        bureau: '北京铁路局',
+        upload: false,
+      },
+      {
+        id: 5,
+        name: '测量名称2',
+        createAt: '2025-03-02 10:20',
+        line: '京沪线',
+        section: 'E段',
+        direction: '下行',
+        railId: 2,
+        leftPoints: '[]',
+        rightPoints: '[]',
+        bureau: '北京铁路局',
+        upload: false,
+      },
+    ],
+  },
+];