diff --git a/src/assets/icon_check_s_s.svg b/src/assets/icon_check_s_s.svg new file mode 100644 index 0000000..2f3a609 --- /dev/null +++ b/src/assets/icon_check_s_s.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon_check_s_u.svg b/src/assets/icon_check_s_u.svg new file mode 100644 index 0000000..626ca84 --- /dev/null +++ b/src/assets/icon_check_s_u.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/MeasureItem.tsx b/src/components/MeasureItem.tsx new file mode 100644 index 0000000..e0e8d2f --- /dev/null +++ b/src/components/MeasureItem.tsx @@ -0,0 +1,73 @@ +import icon_check_s from '../assets/icon_check_s_s.svg'; +import icon_check_u from '../assets/icon_check_s_u.svg'; +/* +name: '测量名称1', +time: '03-02 10:20', +line: '京沪线', +segment: 'A段', +direction: '上行', +railType: '60轨', +*/ + +export default function MeasureItem(props: { + name: string; + time: string; + line: string; + segment: string; + direction: string; + railType: string; +}) { + return ( +
+

{props.name}

+ +
+

{`${props.line}`}

+

{`${props.segment}`}

+

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

+
+ +
+ {props.railType} + {props.time} +
+
+ ); +} + +export function MeasureItemEx(props: { + name: string; + time: string; + line: string; + segment: string; + direction: string; + railType: string; + selected: boolean; + onSelected?: () => void; +}) { + return ( +
+
+ {props.selected ? ( + icon + ) : ( + icon + )} +
+
+

{props.name}

+ +
+

{`${props.line}`}

+

{`${props.segment}`}

+

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

+
+ +
+ {props.railType} + {props.time} +
+
+
+ ); +} diff --git a/src/index.css b/src/index.css index 321fc6d..d624967 100644 --- a/src/index.css +++ b/src/index.css @@ -26,12 +26,14 @@ padding-right: 1rem; padding-top: 0.25rem; padding-bottom: 0.25rem; - border-radius: 6px; color: #fff; } .btn-contained:active { opacity: 0.8; } + .btn-contained:disabled { + background-color: #ccc; + } .btn-outlined { display: flex; justify-content: center; @@ -43,11 +45,24 @@ padding-right: 1rem; padding-top: 0.25rem; padding-bottom: 0.25rem; - border-radius: 6px; } .btn-outlined:active { opacity: 0.8; } + .btn-elevated { + display: flex; + justify-content: center; + align-items: center; + background-color: #e5eaf6; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + color: #333; + } + .btn-elevated:active { + opacity: 0.8; + } } body { margin: 0; diff --git a/src/pages/Measure.tsx b/src/pages/Measure.tsx index d525bdf..bbd562b 100644 --- a/src/pages/Measure.tsx +++ b/src/pages/Measure.tsx @@ -19,8 +19,8 @@ export default function Measure() {
-
开始测量
-
保存
+
开始测量
+
保存
diff --git a/src/pages/Mine.scss b/src/pages/Mine.scss new file mode 100644 index 0000000..24d0ace --- /dev/null +++ b/src/pages/Mine.scss @@ -0,0 +1,6 @@ +.all-list { + height: calc(100vh - var(--navBarHeight) - 80px - var(--tabBarHeight)); +} +.unUpload-list { + height: calc(100vh - var(--navBarHeight) - 80px - 52px - var(--tabBarHeight)); +} \ No newline at end of file diff --git a/src/pages/Mine.tsx b/src/pages/Mine.tsx index 9ce37cc..3953207 100644 --- a/src/pages/Mine.tsx +++ b/src/pages/Mine.tsx @@ -1,10 +1,123 @@ -import { NavBar } from "antd-mobile"; +import { List, NavBar } from 'antd-mobile'; +import { useState } from 'react'; +import MeasureItem, { MeasureItemEx } from '../components/MeasureItem'; +import './Mine.scss'; + +const dataList = [ + { + id: 1, + name: '测量名称1', + time: '03-02 10:20', + line: '京沪线', + segment: 'A段', + direction: '上行', + railType: '60轨', + }, + { + id: 2, + name: '测量名称2', + time: '03-02 10:20', + line: '京沪线', + segment: 'B段', + direction: '下行', + railType: '60轨', + }, + { + id: 3, + name: '测量名称3', + time: '03-02 10:20', + line: '京沪线', + segment: 'C段', + direction: '上行', + railType: '60轨', + }, + { + id: 4, + name: '测量名称2', + time: '03-02 10:20', + line: '京沪线', + segment: 'D段', + direction: '下行', + railType: '60轨', + }, + { + id: 5, + name: '测量名称2', + time: '03-02 10:20', + line: '京沪线', + segment: 'E段', + direction: '下行', + railType: '60轨', + }, +]; export default function Mine() { - return ( -
- 我的 -
Mine
-
- ); -} \ No newline at end of file + const [tabIndex, setTabIndex] = useState(1); + const [selectIds, setSelectIds] = useState([]); + const onItemSelected = (id: number) => { + if (selectIds.includes(id)) { + setSelectIds(selectIds.filter(i => i !== id)); + } else { + setSelectIds([...selectIds, id]); + } + }; + return ( +
+ + 我的 + +
+
+
setTabIndex(0)}> + 测量数据 +
+
setTabIndex(1)}> + 未上传数据 +
+
+
+ {tabIndex === 0 && ( +
+ + {dataList.map(item => ( + + + + ))} + +
+ )} + {tabIndex === 1 && ( + <> +
+ +

可在设置页面配置上传地址

+
+
+ + {dataList.map(item => ( + + onItemSelected(item.id)} + /> + + ))} + +
+ + )} +
+
+
+ ); +} diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 51d5e8e..4f7f31b 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -38,7 +38,7 @@ export default function Setting() {

信息设置

-
+
铁路局名称 北京铁路局 arr @@ -64,10 +64,7 @@ export default function Setting() {
-
- 保存 -
- +
保存
);