|
|
@@ -0,0 +1,156 @@
|
|
|
+import { View, Text, Icon } from "@tarojs/components";
|
|
|
+import './Stage.scss'
|
|
|
+import { TimeFormatter } from "@/utils/time_format";
|
|
|
+import { ColorType } from "@/context/themes/color";
|
|
|
+import { IconRadio, IconRadioCheck, IconRadioCross } from "@/components/basic/Icons";
|
|
|
+import { useTranslation } from "react-i18next";
|
|
|
+import { rpxToPx } from "@/utils/tools";
|
|
|
+
|
|
|
+export default function Component(props: { data: any }) {
|
|
|
+ const { t } = useTranslation()
|
|
|
+ function getTime(t1: number, t2: number) {
|
|
|
+ return TimeFormatter.formateTimeDifference(t1, t2)
|
|
|
+ }
|
|
|
+
|
|
|
+ function getDuration(t1: number, t2: number) {
|
|
|
+ return TimeFormatter.calculateTimeDifference(t1, t2, true)
|
|
|
+ }
|
|
|
+
|
|
|
+ function getStepATime(obj) {
|
|
|
+ if (obj.status == 'COMPLETED' && obj.sleep.status == 'NOT_STARTED') {
|
|
|
+ return t('feature.track_time_duration.stage.not_completed')
|
|
|
+ }
|
|
|
+
|
|
|
+ return obj.status == 'ONGOING1' ?
|
|
|
+ getTime(obj.fast.real_start_time, (new Date()).getTime()) :
|
|
|
+ obj.sleep.real_start_time ? getDuration(obj.sleep.real_start_time, obj.fast.real_start_time ? obj.fast.real_start_time : obj.fast.target_start_time) :
|
|
|
+ getDuration(obj.sleep.target_start_time, obj.fast.real_start_time ? obj.fast.real_start_time : obj.fast.target_start_time)
|
|
|
+ }
|
|
|
+
|
|
|
+ function getStepBTime(obj) {
|
|
|
+ if (obj.status == 'ONGOING1') return t('feature.track_time_duration.stage.wait_for_start')
|
|
|
+ if (obj.status == 'ONGOING2') return getTime(obj.sleep.real_start_time, (new Date()).getTime())
|
|
|
+ if (obj.status == 'WAIT_FOR_START') return getDuration(obj.sleep.target_end_time, obj.sleep.target_start_time)
|
|
|
+ if (obj.sleep.status == 'NOT_STARTED') return t('feature.track_time_duration.stage.not_started')
|
|
|
+ if (obj.sleep.status == 'NOT_COMPLETED') return t('feature.track_time_duration.stage.not_completed')
|
|
|
+ return getDuration(obj.sleep.real_end_time, obj.sleep.real_start_time)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function getStepCTime(obj) {
|
|
|
+ if (obj.status == 'ONGOING1') return t('feature.track_time_duration.stage.wait_for_start')
|
|
|
+ if (obj.status == 'ONGOING2') return t('feature.track_time_duration.stage.wait_for_start')
|
|
|
+ if (obj.status == 'ONGOING3') return getTime(obj.sleep.real_end_time, (new Date()).getTime())
|
|
|
+ if (obj.status == 'WAIT_FOR_START') return getDuration(obj.fast.target_end_time, obj.sleep.target_end_time)
|
|
|
+ if (obj.sleep.status == 'NOT_COMPLETED' || obj.sleep.status == 'NOT_STARTED') return t('feature.track_time_duration.stage.not_started')
|
|
|
+ return getDuration(obj.fast.real_end_time, obj.sleep.real_end_time)
|
|
|
+ }
|
|
|
+ function getStepAIcon(obj) {
|
|
|
+ if (obj.status == 'COMPLETED' && obj.sleep.status == 'NOT_STARTED') {
|
|
|
+ return <IconRadioCross width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />;
|
|
|
+ }
|
|
|
+ return (obj.status == 'ONGOING1' || obj.status == 'WAIT_FOR_START') ?
|
|
|
+ <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
|
|
|
+ : <IconRadioCheck width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
|
|
|
+ }
|
|
|
+
|
|
|
+ function getStepBIcon(obj) {
|
|
|
+ var sleepColor = global.sleepColor ? global.sleepColor : ColorType.sleep
|
|
|
+ if (obj.status == 'ONGOING1') return <IconRadio width={16} color={sleepColor} />
|
|
|
+ if (obj.status == 'ONGOING2') return <IconRadio width={16} color={sleepColor} />
|
|
|
+ if (obj.status == 'WAIT_FOR_START') return <IconRadio width={16} color={sleepColor} />
|
|
|
+ if (obj.sleep.status == 'NOT_STARTED') return <IconRadioCross width={16} color={sleepColor} />
|
|
|
+ if (obj.sleep.status == 'NOT_COMPLETED') return <IconRadioCross width={16} color={sleepColor} />
|
|
|
+ return <IconRadioCheck width={16} color={sleepColor} />
|
|
|
+ }
|
|
|
+
|
|
|
+ function getStepCIcon(obj) {
|
|
|
+ if (obj.status == 'ONGOING1') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
|
|
|
+ if (obj.status == 'ONGOING2') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
|
|
|
+ if (obj.status == 'ONGOING3') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
|
|
|
+ if (obj.status == 'WAIT_FOR_START') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
|
|
|
+ if (obj.sleep.status == 'NOT_COMPLETED' || obj.sleep.status == 'NOT_STARTED') return <IconRadioCross width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
|
|
|
+ return <IconRadioCheck width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
|
|
|
+ }
|
|
|
+
|
|
|
+ return <View className="stage">
|
|
|
+
|
|
|
+ <View className='timelineItem'>
|
|
|
+ <View className='timelineContentView' style={{ background: global.isDebug ? 'red' : 'transparent' }}>
|
|
|
+ {
|
|
|
+ <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
|
|
|
+ }
|
|
|
+ <View className='timelineContentDetail'>
|
|
|
+ <View className="timeline-time" >{' '}</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className="timeline-detail" style={{ color: ColorType.fast, opacity: 1,marginTop:rpxToPx(0) }}>
|
|
|
+
|
|
|
+ <Text className="scenario_name" style={{color: ColorType.fast, opacity: 1}}>{t('feature.track_time_duration.stage.a')}</Text>
|
|
|
+ <View className="timeline-date2" style={{ color: ColorType.fast, opacity: 1 }}>{getStepATime(props.data)}</View>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View className='timeline_line1 line2_bottom_space' style={{ backgroundColor: props.data.status == 'ONGOING1' ? ColorType.fast : 'rgba(255,255,255,0.1)' }} />
|
|
|
+ <View className='timeline-line-bg' style={{ width: 16, background: global.isDebug ? 'red' : 'transparent' }}>
|
|
|
+ {
|
|
|
+ getStepAIcon(props.data)
|
|
|
+ }
|
|
|
+ <View className='timeline-line1'
|
|
|
+ style={{ opacity:0 }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View className='timelineItem'>
|
|
|
+ <View className='timelineContentView' style={{ background: global.isDebug ? 'red' : 'transparent' }}>
|
|
|
+ {
|
|
|
+ <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
|
|
|
+ }
|
|
|
+ <View className='timelineContentDetail'>
|
|
|
+ <View className="timeline-time" >{' '}</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className="timeline-detail" style={{ color: ColorType.sleep, opacity: 1,marginTop:rpxToPx(0) }}>
|
|
|
+
|
|
|
+ <Text className="scenario_name" style={{color: ColorType.sleep, opacity: 1}}>{t('feature.track_time_duration.stage.b')}</Text>
|
|
|
+ <View className="timeline-date2" style={{ color: ColorType.sleep, opacity: 1 }}>{getStepBTime(props.data)}</View>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View className='timeline_line1 line1_bottom_space' style={{ backgroundColor: props.data.status == 'ONGOING2' ? ColorType.sleep : 'rgba(255,255,255,0.1)' }} />
|
|
|
+ <View className='timeline-line-bg' style={{ width: 16, background: global.isDebug ? 'red' : 'transparent' }}>
|
|
|
+ {
|
|
|
+ getStepBIcon(props.data)
|
|
|
+ }
|
|
|
+ <View className='timeline-line1'
|
|
|
+ style={{ opacity:0 }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View className='timelineItem'>
|
|
|
+ <View className='timelineContentView' style={{ background: global.isDebug ? 'red' : 'transparent' }}>
|
|
|
+ {
|
|
|
+ <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
|
|
|
+ }
|
|
|
+ <View className='timelineContentDetail'>
|
|
|
+ <View className="timeline-time" >{' '}</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className="timeline-detail" style={{ color: ColorType.fast, opacity: 1,marginTop:rpxToPx(0) }}>
|
|
|
+ <Text className="scenario_name" style={{color: ColorType.fast, opacity: 1}}>{t('feature.track_time_duration.stage.c')}</Text>
|
|
|
+ <View className="timeline-date2" style={{ color: ColorType.fast, opacity: 1 }}>{getStepCTime(props.data)}</View>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View className={'timeline_line1 line1_bottom_zero'} style={{ backgroundColor: props.data.status == 'ONGOING3' ? ColorType.fast : 'rgba(255,255,255,0.1)' }} />
|
|
|
+ <View className='timeline-line-bg' style={{ width: 16, background: global.isDebug ? 'red' : 'transparent' }}>
|
|
|
+ {
|
|
|
+ getStepCIcon(props.data)
|
|
|
+ }
|
|
|
+ <View className='timeline-line1'
|
|
|
+ style={{ opacity:0 }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ </View>
|
|
|
+}
|