diff --git a/src/assets/icon_upload_0.svg b/src/assets/icon_upload_0.svg new file mode 100644 index 0000000..746b817 --- /dev/null +++ b/src/assets/icon_upload_0.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon_upload_1.svg b/src/assets/icon_upload_1.svg new file mode 100644 index 0000000..6fdbd44 --- /dev/null +++ b/src/assets/icon_upload_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon_upload_2.svg b/src/assets/icon_upload_2.svg new file mode 100644 index 0000000..35f4746 --- /dev/null +++ b/src/assets/icon_upload_2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/MeasureItem.tsx b/src/components/MeasureItem.tsx index 67eee9a..9c0b02f 100644 --- a/src/components/MeasureItem.tsx +++ b/src/components/MeasureItem.tsx @@ -1,6 +1,10 @@ import icon_check_s from '../assets/icon_check_s_s.svg'; import icon_check_u from '../assets/icon_check_s_u.svg'; import icon_arr from '../assets/icon_arr_p_r.svg'; +import icon_pending from '../assets/icon_upload_0.svg'; +import icon_uploading from '../assets/icon_upload_1.svg'; +import icon_uploaded from '../assets/icon_upload_2.svg'; + /* name: '测量名称1', time: '03-02 10:20', @@ -10,6 +14,8 @@ direction: '上行', railType: '60轨', */ +export type UpdateState = 'idle' | 'pending' | 'uploading' | 'uploaded'; + export default function MeasureItem(props: { name: string; time: string; @@ -17,28 +23,29 @@ export default function MeasureItem(props: { segment: string; direction: string; railType: string; + uploadState: UpdateState; onDetail?: () => void; }) { return ( -
-
-

{props.name}

-
- 查看 - arr -
-
- -
-

{`${props.line}`}

-

{`${props.segment}`}

-

{`${props.direction}方向`}

-
- -
- {props.railType} - {props.time} -
+
+
+
+ {props.uploadState === 'uploaded' && icon} +

{props.name}

+
+
+

{`${props.line}`}

+

{`${props.segment}`}

+

{`${props.direction}方向`}

+
+
+ {props.time} +
+
+
); } @@ -51,38 +58,59 @@ export function MeasureItemEx(props: { direction: string; railType: string; selected: boolean; + uploadState: UpdateState; onSelected?: () => void; onDetail?: () => void; }) { + const stateImg = () => { + if (props.uploadState === 'idle') { + if (props.selected) { + return icon; + } else { + return icon; + } + } else if (props.uploadState === 'pending') { + return icon; + } else if (props.uploadState === 'uploading') { + return icon; + } else if (props.uploadState === 'uploaded') { + return icon; + } + return null; + }; + const stateText = () => { + if (props.uploadState === 'pending') { + return 等待中; + } else if (props.uploadState === 'uploading') { + return 上传中; + } else if (props.uploadState === 'uploaded') { + return 上传完成; + } + return null; + }; return ( -
-
- {props.selected ? ( - icon - ) : ( - icon - )} -
-
-
-

{props.name}

-
- 查看 - arr -
-
- -
+
+
+
+ {stateImg()} +

{props.name}

+
+

{`${props.line}`}

{`${props.segment}`}

-

{`${props.direction}方向`}

-
- -
- {props.railType} - {props.time} -
-
+

{`${props.direction}方向`}

+ +
+ {props.time} +
+ + +
{stateText()}
); } diff --git a/src/index.tsx b/src/index.tsx index 2385326..90a0415 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -27,7 +27,7 @@ const router = createHashRouter( }> - }> + }> ) diff --git a/src/pages/MeasureRecord.tsx b/src/pages/MeasureRecord.tsx index 1b8756a..15b912f 100644 --- a/src/pages/MeasureRecord.tsx +++ b/src/pages/MeasureRecord.tsx @@ -1,8 +1,9 @@ import { NavBar } from 'antd-mobile'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; export default function MeasureRecord() { const navigate = useNavigate(); + const params = useParams(); const back = () => navigate(-1); return (
@@ -10,7 +11,7 @@ export default function MeasureRecord() { 测量详情
- +

{params.recordId}

); diff --git a/src/pages/Mine.tsx b/src/pages/Mine.tsx index 71e69b8..6946bea 100644 --- a/src/pages/Mine.tsx +++ b/src/pages/Mine.tsx @@ -91,7 +91,11 @@ export default function Mine() { {dataList.map(item => ( - navigate('/measure/record', {})} /> + navigate(`/measure/record/${item.id}`)} + /> ))} @@ -113,8 +117,18 @@ export default function Mine() { onItemSelected(item.id)} + onDetail={() => navigate(`/measure/record/${item.id}`)} /> ))}