You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
3.8 KiB
116 lines
3.8 KiB
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',
|
|
line: '京沪线',
|
|
segment: 'A段',
|
|
direction: '上行',
|
|
railType: '60轨',
|
|
*/
|
|
|
|
export type UpdateState = 'idle' | 'pending' | 'uploading' | 'uploaded';
|
|
|
|
export default function MeasureItem(props: {
|
|
name: string;
|
|
time: string;
|
|
line: string;
|
|
segment: string;
|
|
direction: string;
|
|
railType: string;
|
|
uploadState: UpdateState;
|
|
onDetail?: () => void;
|
|
}) {
|
|
return (
|
|
<div className="flex mx-2 gap-3">
|
|
<main className="flex-1">
|
|
<header className="flex items-center gap-2">
|
|
{props.uploadState === 'uploaded' && <img src={icon_uploaded} alt="icon" />}
|
|
<h1 className="text-[15px] font-medium ">{props.name}</h1>
|
|
</header>
|
|
<main className="flex my-2">
|
|
<p className="flex-1 text-sm ">{`${props.line}`}</p>
|
|
<p className="flex-1 text-sm ">{`${props.segment}`}</p>
|
|
<p className="flex-1 text-sm ">{`${props.direction}方向`}</p>
|
|
</main>
|
|
<footer>
|
|
<span className="text-sm text-[#b7b7b7]">{props.time}</span>
|
|
</footer>
|
|
</main>
|
|
<aside className="flex items-center" onClick={props.onDetail}>
|
|
<span className="mr-2 text-sm text-primary font-medium">查看</span>
|
|
<img src={icon_arr} alt="arr" className="h-[10px]" />
|
|
</aside>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function MeasureItemEx(props: {
|
|
name: string;
|
|
time: string;
|
|
line: string;
|
|
segment: string;
|
|
direction: string;
|
|
railType: string;
|
|
selected: boolean;
|
|
uploadState: UpdateState;
|
|
onSelected?: () => void;
|
|
onDetail?: () => void;
|
|
}) {
|
|
const stateImg = () => {
|
|
if (props.uploadState === 'idle') {
|
|
if (props.selected) {
|
|
return <img src={icon_check_s} alt="icon" />;
|
|
} else {
|
|
return <img src={icon_check_u} alt="icon" />;
|
|
}
|
|
} else if (props.uploadState === 'pending') {
|
|
return <img src={icon_pending} alt="icon" />;
|
|
} else if (props.uploadState === 'uploading') {
|
|
return <img src={icon_uploading} alt="icon" />;
|
|
} else if (props.uploadState === 'uploaded') {
|
|
return <img src={icon_uploaded} alt="icon" />;
|
|
}
|
|
return null;
|
|
};
|
|
const stateText = () => {
|
|
if (props.uploadState === 'pending') {
|
|
return <span className="text-[#A3ACC0] text-xs">等待中</span>;
|
|
} else if (props.uploadState === 'uploading') {
|
|
return <span className="text-primary text-xs">上传中</span>;
|
|
} else if (props.uploadState === 'uploaded') {
|
|
return <span className="text-[#04CA17] text-xs">上传完成</span>;
|
|
}
|
|
return null;
|
|
};
|
|
return (
|
|
<div
|
|
className="relative flex mx-2 gap-3"
|
|
onClick={props.uploadState === 'idle' ? props.onSelected : undefined}>
|
|
<main className="flex-1">
|
|
<header className="flex items-center gap-2">
|
|
{stateImg()}
|
|
<h1 className="text-[15px] font-medium ">{props.name}</h1>
|
|
</header>
|
|
<main className="flex my-2">
|
|
<p className="flex-1 text-sm ">{`${props.line}`}</p>
|
|
<p className="flex-1 text-sm ">{`${props.segment}`}</p>
|
|
<p className="flex-1 text-sm ">{`${props.direction}方向`}</p>
|
|
</main>
|
|
<footer>
|
|
<span className="text-sm text-[#b7b7b7]">{props.time}</span>
|
|
</footer>
|
|
</main>
|
|
<aside className="flex items-center" onClick={props.onDetail}>
|
|
<span className="mr-2 text-sm text-primary font-medium">查看</span>
|
|
<img src={icon_arr} alt="arr" className="h-[10px]" />
|
|
</aside>
|
|
<div className="absolute right-0 bottom-0">{stateText()}</div>
|
|
</div>
|
|
);
|
|
}
|