update

src/features/trackTimeDuration/components/AllRings.tsx

@@ -0,0 +1,399 @@
+import Box from '@/components/layout/Box'
+import './AllRings.scss'
+import { PageContainer, View, Text } from '@tarojs/components'
+import { useState } from 'react'
+import Modal from '@/components/layout/Modal.weapp'
+import { bigRingRadius, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget, ringWidth, smallRingRadius, thirdRingRadius, timeTotimestamp } from '../hooks/RingData'
+import { rpxToPx } from '@/utils/tools'
+import { ColorType } from '@/context/themes/color'
+import { useTranslation } from 'react-i18next'
+import Rings from "./Rings";
+import { TimeFormatter } from '@/utils/time_format'
+import { useSelector } from 'react-redux'
+import { RealRing } from '@/features/trackTimeDuration/components/Rings'
+
+export default function AllRings(props: { data: any, time: any }) {
+    const [showRing, setShowRing] = useState(false)
+    const [record, setRecord] = useState(props.data.current_record);
+    const user = useSelector((state: any) => state.user);
+    const dayNight = useSelector((state: any) => state.night);
+    const { t } = useTranslation()
+
+    function tapShow() {
+        setShowRing(true)
+    }
+
+    function durationArc(start_time: number, end_time: number) {
+        var duration = (end_time - start_time) / 1000;
+        return duration / (24 * 3600) * 2 * Math.PI;
+    }
+
+    const startArc = (time: number) => {
+        var date = new Date(time);
+        var hour = date.getHours();
+        var minute = date.getMinutes();
+        var second = date.getSeconds();
+        return (hour * 3600 + minute * 60 + second) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+    }
+
+    function bigRing() {
+        var common = getCommon(null, true)
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
+        var bgRing = getBgRing()
+
+        var currentDot1 = getDot(record, true)
+        var targetBigRing1 = getTarget(record, true)
+        targetBigRing1.color = record.scenario == 'SLEEP' ? ColorType.sleep + '66' : ColorType.fast + '66'
+        if (record.status == 'ONGOING') {
+            var realRing1 = getReal(record, true, false)
+            // debugger
+            return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} realRing={realRing1} targetRing={targetBigRing1} canvasId={props.type + 'index_big'} />
+        }
+        if (record.status == 'WAIT_FOR_START') {
+            var scenario = JSON.parse(JSON.stringify(props.data.scenario))
+
+            if (scenario.name == 'SLEEP') {
+                var countduration = (props.data.current_record.sleep.target_end_time - props.data.current_record.sleep.target_start_time) / 60000
+                var min1 = TimeFormatter.timestringToSeconds(scenario.schedule.sleep.start_time) / 60
+                var min2 = TimeFormatter.timestringToSeconds(scenario.schedule.sleep.end_time) / 60
+                var leftMinutes = min1 < min2 ? min2 - min1 : min2 + 24 * 60 - min1
+                if (leftMinutes != countduration) {
+                    min2 = min1 + countduration
+                    if (min2 > 1440) {
+                        min2 -= 1440
+                    }
+                    var hour = Math.floor(min2 / 60)
+                    var minute = min2 % 60
+                    scenario.schedule.sleep.end_time = `${hour}:${minute}`
+                }
+            }
+            else {
+                var countduration = (props.data.current_record.fast.target_end_time - props.data.current_record.fast.target_start_time) / 60000
+                var min1 = TimeFormatter.timestringToSeconds(scenario.schedule.fast.start_time) / 60
+                var min2 = TimeFormatter.timestringToSeconds(scenario.schedule.fast.end_time) / 60
+                var leftMinutes = min1 < min2 ? min2 - min1 : min2 + 24 * 60 - min1
+                if (leftMinutes != countduration) {
+                    min2 = min1 + countduration
+                    if (min2 > 1440) {
+                        min2 -= 1440
+                    }
+                    var hour = Math.floor(min2 / 60)
+                    var minute = min2 % 60
+                    scenario.schedule.fast.end_time = `${hour}:${minute}`
+                }
+            }
+
+            var realRing1 = getSchedule(scenario, scenario.name != 'SLEEP', true, true)//getSchedule(record, props.type != 'SLEEP', true)
+            var list: any = []
+            if (scenario.name == 'FAST_SLEEP') {
+                realRing1.color = ColorType.fast + '66'
+            }
+            else if (scenario.name == 'SLEEP') {
+                realRing1.color = ColorType.sleep + '66'
+            }
+            else {
+                realRing1.color = ColorType.fast + '66'
+            }
+
+            if (user.isLogin) {
+                list = []
+            }
+            if (!user.isLogin) {
+                currentDot1 = null
+                // realRing1 = null
+            }
+            return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} stageList={list} realRing={realRing1} canvasId={'full_index_big'} />
+        }
+        var realRing1 = getReal(record, true, false)
+        return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId={'full_index_big'} />
+
+    }
+
+    function smallRing() {
+
+        var common = getCommon(null, false)
+        common.radius = smallRingRadius;
+        common.lineWidth = ringWidth;
+        var bgRing = getBgRing()
+        var realRing = getReal(record, false, false)
+        if (props.data.scenario.name == 'FAST_SLEEP') {
+            if (!record.sleep) {
+                return null
+            }
+            if (record.sleep.status == 'WAIT_FOR_END') {
+                var targetBigRing1 = getTarget(record, false)
+                targetBigRing1.color = ColorType.sleep + '66'
+                var currentDot = getDot(record, false)
+                realRing.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
+                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={'full_index_small'} targetRing={targetBigRing1} realRing={realRing} />
+            }
+            else if (record.status == 'WAIT_FOR_START' || record.status == 'ONGOING1') {
+
+                var scenario = JSON.parse(JSON.stringify(props.data.scenario))
+
+                if (record.status == 'WAIT_FOR_START') {
+                    realRing = getSchedule(scenario, false, true, record.status == 'WAIT_FOR_START')//getSchedule(record, false, true)
+
+                }
+                else {
+                    realRing.startArc = startArc(record.sleep.target_start_time)
+                    realRing.durationArc = durationArc(record.sleep.target_start_time, record.sleep.target_end_time)
+                }
+
+                realRing.color = ColorType.sleep + '66'
+
+                var currentDot = getDot(record, false)
+
+                if (!user.isLogin) {
+                    currentDot = null
+                }
+
+                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} realRing={realRing} canvasId={'full_index_small'} />
+            }
+            else if (record.sleep.status == 'NOT_COMPLETED') {
+                realRing.durationArc = 0.01
+                var currentDot = getDot(record, false)
+                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={'full_index_small'} realRing={realRing} />
+            }
+            else if (record.sleep.status == 'COMPLETED') {
+                realRing = getReal(record, false, true)
+                var currentDot = getDot(record, false)
+                if (record.status == 'ONGOING3') {
+                    currentDot = null
+                    // currentDot.color = '#ffffffff'
+                }
+                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={'full_index_small'} realRing={realRing} />
+            }
+            else if (record.sleep.status == 'ONGOING2') {
+                var currentDot = getDot(record, false)
+                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={'full_index_small'} />
+            }
+            return <Rings common={common} bgRing={bgRing} canvasId={'full_index_small'} />
+        }
+        else {
+
+
+            var currentDot = getDot(record, false)
+            var targetRing = getTarget(record, false)
+            if (record.status == 'ONGOING2') {
+                var realRing = getReal(record, false, false)
+                return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId={'full_index_small'} />
+            }
+            if (record.status == 'ONGOING3') {
+                currentDot.color = 'rgba(0, 255, 255, 0.5)'
+            }
+            return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={'full_index_small'} />
+        }
+
+    }
+
+    function dayRing() {
+        var common = getCommon(null, true)
+        common.radius = thirdRingRadius;
+        common.lineWidth = ringWidth;
+        var bgRing = getBgRing()
+
+        let realRingBig: RealRing = {
+            color: ColorType.night + '66',
+            startArc: 0,
+            durationArc: 2
+        }
+        var sunRise = 24 * 60 + 6 * 60
+        var sunSet = 18 * 60
+
+        var sunRiseObj = dayNight.nightRingSunrise
+        var sunSetObj = dayNight.nightRingSunset
+        sunRise = 24 * 60 + parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
+        sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
+        if (sunSetObj.indexOf('PM') != -1) {
+            sunSet += 12 * 60
+        }
+        // }
+        var duration = sunRise - sunSet
+        realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
+
+        var currentDot = getDot(record, false)
+        currentDot.color = ColorType.night
+
+        var now = new Date()
+        var t = now.getHours() * 60 + now.getMinutes()
+        var duration2 = t - sunSet
+        if (duration2 < 0) {
+            duration2 += 24 * 60
+        }
+        let realRing: RealRing = {
+            color: ColorType.night,
+            startArc: (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
+            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
+        }
+
+        if (dayNight.nightRingDate) {
+            if (new Date(dayNight.nightRingDate).getDate() == new Date().getDate() && new Date().getHours() < 12) {
+
+                realRing = null;
+            }
+        }
+
+        if (!user.isLogin) {
+            currentDot = null;
+            realRing = null;
+        }
+
+
+        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 > duration ? null : realRing} currentDot={currentDot} canvasId={'full_index_day'} />
+    }
+
+    function rings() {
+        return <View style={{
+            position: 'relative', zIndex: 1,
+            marginLeft:  -6,
+        }}>
+            {
+                bigRing()
+            }
+            {
+                props.data.scenario.name == 'FAST_SLEEP' && <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
+                    {
+                        smallRing()
+                    }
+                </View>
+            }
+            {
+                <View style={{ display: 'flex', position: 'absolute', left: -14, top: -14, right: -14, bottom: -14 }}>
+                    {
+                        dayRing()
+                    }
+                </View>
+            }
+
+        </View>
+    }
+
+    function getDuration(obj) {
+        if (!obj) {
+        }
+        if (obj.status == 'NOT_STARTED' || obj.status == 'NOT_COMPLETED') {
+            return ''
+        }
+        var start = obj.real_start_time
+        var end = obj.real_end_time
+        if (!end) {
+            end = (new Date()).getTime()
+        }
+        if (obj.status == 'WAIT_FOR_START') {
+            start = obj.target_start_time
+            end = obj.target_end_time
+        }
+        return TimeFormatter.durationFormate(start, end)
+        // return TimeFormatter.calculateTimeDifference(start, end)
+    }
+
+    function fastDuration() {
+        if (!record.fast) {
+            return ''
+        }
+        if (record.fast.status == 'WAIT_FOR_END') {
+            return TimeFormatter.countdown(record.fast.real_start_time)
+            // return TimeFormatter.formateTimeDifference(record.fast.real_start_time, new Date().getTime(), false)
+        }
+        return getDuration(record.fast)
+    }
+
+    function sleepDuration() {
+        if (!record.sleep) {
+            return ''
+        }
+        if (record.sleep.status == 'WAIT_FOR_END') {
+            return TimeFormatter.formateTimeDifference(record.sleep.real_start_time, new Date().getTime(), false)
+        }
+        return getDuration(record.sleep)
+    }
+
+    function nightDuration() {
+
+        var sunRiseObj = dayNight.nightRingSunrise
+        var sunSetObj = dayNight.nightRingSunset
+        var sunRise = 24 * 60 + parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
+        var sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
+        if (sunSetObj.indexOf('PM') != -1) {
+            sunSet += 12 * 60
+        }
+
+        var duration = (sunRise - sunSet) * 60 * 1000
+
+        return TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
+    }
+
+
+    function popDetail() {
+        return <View className="ring_full_container">
+            <View className="time_operate_item1">
+                <View className='fast_sleep_item three_ring_card_detail'>
+                    {
+                        rings()
+                    }
+                    <View className="duration_bg2" style={{ marginLeft: rpxToPx(68), height: bigRingRadius * 2, overflow: 'visible' }}>
+
+                        <Text className="duration_title2">{t('feature.common.overnight')}</Text>
+                        <Text className="duration_value2" style={{ color: ColorType.night }}>{nightDuration()}</Text>
+                        {
+                            (props.data.scenario.name == 'FAST' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_title2">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
+                        }
+                        {
+                            (props.data.scenario.name == 'FAST' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_value2" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{fastDuration()}</Text>
+                        }
+                        {
+                            (props.data.scenario.name == 'SLEEP' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_title2" >{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
+                        }
+                        {
+                            (props.data.scenario.name == 'SLEEP' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_value2" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep, marginBottom: 0 }}>{sleepDuration()}</Text>
+                        }
+                    </View>
+
+
+                </View>
+            </View>
+        </View>
+    }
+
+    function modalContent() {
+        if (process.env.TARO_ENV == 'weapp') {
+            return <Modal
+                testInfo={null}
+                dismiss={() => {
+                    setShowRing(false)
+                }}
+                confirm={() => { }}>
+                {popDetail()}
+            </Modal>
+        }
+        else if (process.env.TARO_ENV == 'rn') {
+            return <PageContainer style={{ backgroundColor: '#1c1c1c' }}
+                // overlayStyle='background-color:rgba(0,0,0,0.9)'
+                // custom-style='background-color:#1c1c1c'
+                overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
+                customStyle={{ backgroundColor: '#1c1c1c' }}
+                closeOnSlideDown={false}
+                onBeforeEnter={() => {
+
+                }}
+                onBeforeLeave={() => {
+                }}
+                onClick={() => { alert('b') }}
+                onClickOverlay={() => { alert('a') }}
+                onAfterLeave={() => { setShowRing(false) }}
+                show={showRing} round={true} overlay={true} position='bottom'
+            >
+                {popDetail()}
+            </PageContainer>
+        }
+    }
+    return <Box onClick={tapShow}>
+        <View style={{ color: '#fff' }}>显示同步生物钟</View>
+        {
+            showRing && modalContent()
+        }
+    </Box>
+}

src/features/trackTimeDuration/components/CircadianDetailPopup.tsx

@@ -18,6 +18,7 @@ import Taro from '@tarojs/taro';
 import { IconInfo, IconMinus, IconPlus } from '@/components/basic/Icons';
 
 export default function CircadianDetailPopup(props: { record: any, schedule?: any, onClose: Function, stageIndex?: number, onlyStage?: boolean }) {
+
     const [tabIndex, setTabIndex] = useState(0)
     const [diffTimeZone, setDiffTimeZone] = useState(false)
     const [multiTimeZone, setMultiTimeZone] = useState(false)
@@ -26,6 +27,7 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
     const [fastPickerValue, setFastPickerValue] = useState([0, 0])
     const [sleepPickerValue, setSleepPickerValue] = useState([0, 0])
     const [showEditPicker, setShowEditPicker] = useState(false)
+    const [schedule, setSchedule] = useState(props.schedule)
     const [isFast, setIsFast] = useState(true)
     const durationPickerRef = useRef(null)
     const common = useSelector((state: any) => state.common);
@@ -332,18 +334,19 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
 
             setFastPickerValue(durationIndex(detail.fast.target_start_time, detail.fast.target_end_time, common))
 
-            if (props.record.status == 'WAIT_FOR_START' && props.schedule) {
-                var start = props.schedule.fast.start_time
-                var startCount = (parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])) * 60 * 1000
-                var endCount = startCount + count
-                if (endCount >= 24 * 3600 * 1000) {
-                    endCount -= 24 * 3600 * 1000
-                }
-                endCount = endCount / 60000
-                var endHour = Math.floor(endCount / 60)
-                var endMinute = endCount % 60
-                var endTime = TimeFormatter.padZero(endHour) + ':' + TimeFormatter.padZero(endMinute)
-                console.log(endTime)
+            if (props.record.status == 'WAIT_FOR_START') {
+                // var start = props.schedule.fast.start_time
+                // var startCount = (parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])) * 60 * 1000
+                // var endCount = startCount + count
+                // if (endCount >= 24 * 3600 * 1000) {
+                //     endCount -= 24 * 3600 * 1000
+                // }
+                // endCount = endCount / 60000
+                // var endHour = Math.floor(endCount / 60)
+                // var endMinute = endCount % 60
+                // var endTime = TimeFormatter.padZero(endHour) + ':' + TimeFormatter.padZero(endMinute)
+                // console.log(endTime)
+                changeSchedule(count)
             }
 
         }
@@ -390,18 +393,19 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
 
             setFastPickerValue(durationIndex(detail.fast.target_start_time, detail.fast.target_end_time, common))
 
-            if (props.record.status == 'WAIT_FOR_START' && props.schedule) {
-                var start = props.schedule.fast.start_time
-                var startCount = (parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])) * 60 * 1000
-                var endCount = startCount + count
-                if (endCount >= 24 * 3600 * 1000) {
-                    endCount -= 24 * 3600 * 1000
-                }
-                endCount = endCount / 60000
-                var endHour = Math.floor(endCount / 60)
-                var endMinute = endCount % 60
-                var endTime = TimeFormatter.padZero(endHour) + ':' + TimeFormatter.padZero(endMinute)
-                console.log(endTime)
+            if (props.record.status == 'WAIT_FOR_START') {
+                changeSchedule(count)
+                // var start = props.schedule.fast.start_time
+                // var startCount = (parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])) * 60 * 1000
+                // var endCount = startCount + count
+                // if (endCount >= 24 * 3600 * 1000) {
+                //     endCount -= 24 * 3600 * 1000
+                // }
+                // endCount = endCount / 60000
+                // var endHour = Math.floor(endCount / 60)
+                // var endMinute = endCount % 60
+                // var endTime = TimeFormatter.padZero(endHour) + ':' + TimeFormatter.padZero(endMinute)
+                // console.log(endTime)
             }
         }
         else {
@@ -430,6 +434,25 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
         setDetail(JSON.parse(JSON.stringify(detail)))
     }
 
+    function changeSchedule(count: number) {
+        if (!schedule) {
+            return
+        }
+        var obj = JSON.parse(JSON.stringify(schedule))
+        var start = schedule.fast.start_time
+        var startCount = (parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])) * 60 * 1000
+        var endCount = startCount + count
+        if (endCount >= 24 * 3600 * 1000) {
+            endCount -= 24 * 3600 * 1000
+        }
+        endCount = endCount / 60000
+        var endHour = Math.floor(endCount / 60)
+        var endMinute = endCount % 60
+        var endTime = TimeFormatter.padZero(endHour) + ':' + TimeFormatter.padZero(endMinute)
+        obj.fast.end_time = endTime
+        setSchedule(obj)
+    }
+
     function sleepRealDuration() {
         return getStageDuration(4)
     }
@@ -693,14 +716,14 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
         }
         return <View>
             <View className='pop_ring_bg'>
-                <Rings common={common} bgRing={bgRing} canvasId={'pre_sleep_ring'} realRing={preRing} currentDot={currentDot}/>
+                <Rings common={common} bgRing={bgRing} canvasId={'pre_sleep_ring'} realRing={preRing} currentDot={currentDot} />
                 <View className="pop_duration_bg">
                     <Text className="pop_duration_title">{t('feature.track_time_duration.stage.a')}</Text>
                     <Text className="pop_duration_value" style={{ color: ColorType.fast }}>{getStageDuration(0)}</Text>
                 </View>
             </View>
             <View className='pop_ring_bg'>
-                <Rings common={common} bgRing={bgRing} canvasId={'sleeping_ring'} realRing={sleepRing}  currentDot={currentDot2}/>
+                <Rings common={common} bgRing={bgRing} canvasId={'sleeping_ring'} realRing={sleepRing} currentDot={currentDot2} />
                 <View className="pop_duration_bg">
                     <Text className="pop_duration_title">{t('feature.track_time_duration.stage.b')}</Text>
                     <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
@@ -713,7 +736,7 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
                 </View>
             </View>
             <View className='pop_ring_bg'>
-                <Rings common={common} bgRing={bgRing} canvasId={'later_sleep_ring'} realRing={wakeRing}  currentDot={currentDot3}/>
+                <Rings common={common} bgRing={bgRing} canvasId={'later_sleep_ring'} realRing={wakeRing} currentDot={currentDot3} />
                 <View className="pop_duration_bg">
                     <Text className="pop_duration_title">{t('feature.track_time_duration.stage.c')}</Text>
                     <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
@@ -727,60 +750,12 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
         </View>
     }
 
-    function stage2() {
-        var bgRing = getBgRing()
-        var common = getCommon(null, false)
-        common.radius = bigRingRadius;
-        common.lineWidth = ringWidth;
-
-        var timestamp = TimeFormatter.transferTimestamp(props.record.fast.real_start_time, props.record.fast.real_end_time_zone)
-        var timestamp2 = TimeFormatter.transferTimestamp(props.record.sleep.real_start_time, props.record.fast.real_end_time_zone)
-        var timestamp3 = TimeFormatter.transferTimestamp(props.record.sleep.real_end_time, props.record.fast.real_end_time_zone)
-        const preRing: RealRing = {
-            color: global.fastColor ? global.fastColor : ColorType.fast,
-            startArc: startArc(timestamp),
-            durationArc: durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
-        }
-        const sleepRing: RealRing = {
-            color: global.sleepColor ? global.sleepColor : ColorType.sleep,
-            startArc: startArc(timestamp2),
-            durationArc: durationArc(props.record.sleep.real_start_time, props.record.sleep.real_end_time)
-        }
-        const wakeRing: RealRing = {
-            color: global.fastColor ? global.fastColor : ColorType.fast,
-            startArc: startArc(timestamp3),
-            durationArc: durationArc(props.record.sleep.real_end_time, props.record.fast.real_end_time)
-        }
-        return <View>
-            <View className='pop_ring_bg'>
-                <Rings common={common} bgRing={bgRing} canvasId={'pre_sleep_ring'} realRing={preRing} />
-                <View className="pop_duration_bg">
-                    <Text className="pop_duration_title">{t('feature.track_time_duration.stage.a')}</Text>
-                    <Text className="pop_duration_value" style={{ color: ColorType.fast }}>{getStageDuration(0)}</Text>
-                </View>
-            </View>
-            <View className='pop_ring_bg'>
-                <Rings common={common} bgRing={bgRing} canvasId={'sleeping_ring'} realRing={sleepRing} />
-                <View className="pop_duration_bg">
-                    <Text className="pop_duration_title">{t('feature.track_time_duration.stage.b')}</Text>
-                    <Text className="pop_duration_value" style={{ color: ColorType.sleep }}>{getStageDuration(1)}</Text>
-                </View>
-            </View>
-            <View className='pop_ring_bg'>
-                <Rings common={common} bgRing={bgRing} canvasId={'later_sleep_ring'} realRing={wakeRing} />
-                <View className="pop_duration_bg">
-                    <Text className="pop_duration_title">{t('feature.track_time_duration.stage.c')}</Text>
-                    <Text className="pop_duration_value" style={{ color: ColorType.fast }}>{getStageDuration(2)}</Text>
-                </View>
-            </View>
-        </View>
-    }
-
     function events() {
         return <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
             <TimelineFastSleep
                 data={props.record}
                 first_real_check_time={props.record.first_real_check_time ? props.record.first_real_check_time : 0}
+                scenario={schedule ? { schedule: schedule } : null}
                 diffTimeZone={diffTimeZone} multiTimeZone={multiTimeZone} />
         </View>
     }
@@ -824,13 +799,16 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
 
     function durationChange(e) {
         global.pauseIndexTimer = false
-        // debugger
         var count = (e[0] + common.duration.min) * 60 + e[1] * common.duration.step
         // var count = (e[0] + 1) * 60 + e[1] * 5
         if (showDurationPicker) {
             // global.changeTargetDuration(count, isFast)
             if (isFast) {
                 detail.fast.target_end_time = detail.fast.target_start_time + count * 60 * 1000
+                if (props.record.status == 'WAIT_FOR_START'){
+                    changeSchedule(count*1000*60)
+                }
+                
             }
             else {
                 detail.sleep.target_end_time = detail.sleep.target_start_time + count * 60 * 1000
@@ -1081,7 +1059,7 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
                 if (process.env.TARO_ENV == 'weapp') {
                     e.stopPropagation()
                 }
-                global.updateFastSleepData(detail)
+                global.updateFastSleepData(detail,schedule)
                 props.onClose();
             }}>{getBottomText()}</View>
         </View>

src/features/trackTimeDuration/components/DayNightCard.scss

@@ -114,7 +114,7 @@
     justify-content: center;
 }
 
-.night_choose_location{
+.night_choose_location {
     margin-top: 8px;
     line-height: 32px;
     font-weight: bold;
@@ -124,7 +124,7 @@
     color: #1446B9;
 }
 
-.day_choose_location{
+.day_choose_location {
     margin-top: 8px;
     line-height: 32px;
     font-weight: bold;
@@ -134,20 +134,21 @@
     color: #C9DAFF;
 }
 
-.switch{
+.switch {
     transform: scale(0.85);
     transform-origin: right center;
     margin-right: -10px;
 }
 
-.day_night_detail{
+.day_night_detail {
     display: flex;
     flex-direction: row;
     margin-top: 18px;
     margin-bottom: 14px;
     // background-color: pink;
 }
-.day_night_detail_icon{
+
+.day_night_detail_icon {
     margin-right: 22px;
     // background-color: red;
 }
@@ -160,7 +161,7 @@
     opacity: 0.6;
 }
 
-.duration_value22{
+.duration_value22 {
     font-weight: bold;
     font-size: 36px;
     line-height: 36px;
@@ -169,33 +170,33 @@
     flex-shrink: 0;
 }
 
-.daynightsummary{
+.daynightsummary {
     display: flex;
     flex-direction: row;
     align-items: center;
 }
 
-.sunicon{
+.sunicon {
     width: 72px;
     height: 72px;
-    margin-right: -8px;//-40px;
+    margin-right: -8px; //-40px;
 }
 
-.sunicon_bg{
+.sunicon_bg {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
 
-.content_icon_bg{
+.content_icon_bg {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     // background-color: pink;
 }
 
-.sunrise_item{
+.sunrise_item {
     display: flex;
     flex-direction: row;
     align-items: flex-end;
@@ -207,11 +208,33 @@
     opacity: 0.2;
 }
 
-.myMap{
+.myMap {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     z-index: 0;
+}
+
+.day_card_footer {
+    position: absolute;
+    right: -20px;
+    bottom: -20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.day_card_footer_date {
+    opacity: 0.4;
+    color: #767676;
+    font-size: 24px;
+    line-height: 48px;
+}
+
+.card_arrow {
+    width: 40px;
+    height: 40px;
+    opacity: 0.2;
 }

src/features/trackTimeDuration/components/DayNightCard.tsx

@@ -51,7 +51,6 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
     const user = useSelector((state: any) => state.user);
     const dayStore = useSelector((state: any) => state.day);
     const nightStore = useSelector((state: any) => state.night);
-    const time = useSelector((state: any) => state.time);
     const [authInfo, setAuthInfo] = useState(global.locationDetail ? global.locationDetail : null)
     const [sunriseTime, setSunriseTime] = useState('06:00')
     const [sunriseTmrTime, setSunriseTmrTime] = useState('06:00')
@@ -64,6 +63,7 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
 
     const [showDetailModal, setShowDetailModal] = useState(false)
     const [showDetailPopup, setShowDetailPopup] = useState(false)
+    const [detail, setDetail] = useState(null)
     // const [locationDetail, setLocationDetail] = useState(null)
 
     const [nightDate, setNightDate] = useState(new Date())
@@ -95,6 +95,7 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
             }).then(data => {
                 console.log(data)
                 setAuthInfo(data as any)
+                setDetail(data as any)
                 updateDate(data)
                 locationDetail = data
                 global.locationDetail = locationDetail
@@ -439,6 +440,7 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
                     locationDetail = data;
                     global.locationDetail = locationDetail
                     setAuthInfo(data as any)
+                    setDetail(data as any)
                     setSunriseTime((data as any).daylights[0].sunrise)
                     setSunriseTmrTime((data as any).daylights[1].sunrise)
                     setSunsetTime((data as any).daylights[0].sunset)
@@ -922,6 +924,18 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
             startArc: 0,
             durationArc: 2
         }
+
+        if (authInfo && authInfo.night_completed && new Date().getTime() > authInfo.night_completed.sunrise_ts) {
+            realRingBig.color = ColorType.night
+            var duration = (authInfo.night_completed.sunrise_ts - authInfo.night_completed.sunset_ts) / 1000
+            var start = new Date(authInfo.night_completed.sunset_ts)
+            realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+            realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
+            return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} canvasId={'ddddsss' + 'index_day'} />
+
+        }
+
+
         var sunRise = 24 * 60 + 6 * 60
         var sunSet = 18 * 60
 
@@ -980,10 +994,20 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
             startArc: 0,
             durationArc: 2
         }
-        var sunRise = 6 * 60
-        var sunSet = 18 * 60
 
+        if (authInfo && authInfo.day_completed && new Date().getTime() > authInfo.day_completed.sunset_ts) {
+            realRingBig.color = ColorType.day
+            var duration = (authInfo.day_completed.sunset_ts - authInfo.day_completed.sunrise_ts) / 1000
+            var start = new Date(authInfo.day_completed.sunrise_ts)
+            realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+            realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
+            return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} canvasId={'ddddsss_day' + 'index_day'} />
 
+        }
+
+
+        var sunRise = 6 * 60
+        var sunSet = 18 * 60
 
         var sunRiseObj = dayStore.dayRingSunrise
         var sunSetObj = dayStore.dayRingSunset
@@ -1033,10 +1057,13 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
     }
 
     function getSunsetDuration() {
+        if (authInfo && authInfo.night_completed && new Date().getTime() > authInfo.night_completed.sunrise_ts) {
+            return TimeFormatter.durationFormate(authInfo.night_completed.sunrise_ts, authInfo.night_completed.sunset_ts)
+        }
 
         var now = new Date()
-        if (props.isNight && sunriseTmrDate) {
-            if (now.getTime() < sunriseTmrDate.getTime()) {
+        if (props.isNight && sunsetDate) {
+            if (now.getTime() > sunsetDate.getTime()) {
                 return TimeFormatter.countdown(sunsetDate.getTime())
             }
             // return TimeFormatter.countdown(sunsetDate.getTime())
@@ -1075,6 +1102,78 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         // return ''
     }
 
+    function getSunriseDuration() {
+        if (authInfo && authInfo.day_completed && new Date().getTime() > authInfo.day_completed.sunset_ts) {
+            return TimeFormatter.durationFormate(authInfo.day_completed.sunrise_ts, authInfo.day_completed.sunset_ts)
+        }
+
+        var now = new Date()
+        if (!props.isNight && sunriseDate) {
+            if (now.getTime() > sunriseDate.getTime()) {
+                return TimeFormatter.countdown(sunriseDate.getTime())
+            }
+        }
+
+
+        var sunRiseObj = dayStore.dayRingSunrise
+        var sunSetObj = dayStore.dayRingSunset
+        var sunRise = parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
+        var sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
+        if (sunSetObj.indexOf('PM') != -1) {
+            sunSet += 12 * 60
+        }
+
+        var duration = (sunSet - sunRise) * 60 * 1000
+
+        return TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
+    }
+
+    function completedDate() {
+        if (props.isNight) {
+            if (authInfo.night_completed && new Date().getTime()>authInfo.night_completed.sunrise_ts) {
+                return TimeFormatter.getMonthAndDayByTimestamp(authInfo.night_completed.sunset_ts)
+            }
+            return ''
+        }
+        if (authInfo.day_completed && new Date().getTime()>authInfo.day_completed.sunset_ts) {
+            return TimeFormatter.getMonthAndDayByTimestamp(authInfo.day_completed.sunrise_ts)
+        }
+        return ''
+    }
+
+    function showArrow(){
+        if (props.isNight) {
+            if (authInfo.night_completed && new Date().getTime()>authInfo.night_completed.sunrise_ts) {
+                return true
+            }
+            return false
+        }
+        if (authInfo.day_completed && new Date().getTime()>authInfo.day_completed.sunset_ts) {
+            return true
+        }
+        return false
+    }
+
+    function footerDesc(){
+        var now = new Date()
+        if (props.isNight) {
+            if (now.getTime() < sunsetDate.getTime()) {
+                return '距日落'+TimeFormatter.countdown(sunsetDate.getTime())
+                
+            }
+            return '距日出'+TimeFormatter.countdown(sunriseTmrDate.getTime())
+        }
+
+        if (now.getTime() > sunriseDate.getTime() && now.getTime()<sunsetDate.getTime()) {
+            
+            return '距日落'+TimeFormatter.countdown(sunsetDate.getTime())
+        }
+        return '距日出'+TimeFormatter.countdown(sunriseDate.getTime())
+        
+        
+        
+    }
+
     return <Box><View style={{ position: 'relative' }}>
         {
             !user.isLogin && <View style={{ color: '#fff' }} onClick={tapShow}>{props.isNight ? '显示当地夜晚时间' : '显示当地白天时间'}</View>
@@ -1085,7 +1184,7 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         {
             user.isLogin && dayStore.showDayRing && <View style={{ display: 'flex', flexDirection: 'column', zIndex: 1 }} onClick={showLocationAlert} onLongPress={longClick}>
 
-                <View className="ring_full_container" style={{paddingBottom:0}}>
+                <View className="ring_full_container" style={{ paddingBottom: 0 }}>
 
                     <View style={{
                         display: 'flex',
@@ -1100,25 +1199,39 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
                         }
                         <View style={{ display: 'flex', flexDirection: 'column', flexShrink: 0, flex: 1, marginLeft: rpxToPx(52) }}>
                             <Text className='ring_card_duration_title'>{props.isNight ? t('feature.common.overnight') : t('feature.common.day')}</Text>
-                            <Text className='ring_card_duration_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? getSunsetDuration() : getSunriseTime()}</Text>
+                            <Text className='ring_card_duration_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? getSunsetDuration() : getSunriseDuration()}</Text>
                             {/* <Text className='duration_title2' style={{ marginTop: 4 }}>{!props.isNight ? t('feature.common.overnight') : t('feature.common.day')}</Text> */}
                             {/* <Text className='duration_value22' style={{ color: !props.isNight ? ColorType.night : ColorType.day }}>{!props.isNight ? getSunsetTime() : getSunriseTime()}</Text> */}
 
                         </View>
                         {/* <Image className="arrow2" src={require('@/assets/images/arrow3.png')} /> */}
-                        <View style={{position:'absolute',right:-rpxToPx(20),bottom:-rpxToPx(20)}}>
-                        {
-                            authInfo && authInfo.lat ?
-                                <View style={{ display: 'flex', flexDirection: 'row' }} onClick={operate}>
-                                    <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'}>{getLocation()}</View>
-                                </View>
-                                :
-                                <View style={{ display: 'flex', flexDirection: 'row' }} onClick={operate}>
-                                    <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'} >
-                                        {props.isNight ? t('feature.day_night.get_local_time') : t('feature.day_night.get_local_time_sunrise')}
+                        <View style={{ position: 'absolute', right: -rpxToPx(20), top: -rpxToPx(20) }}>
+                            {
+                                authInfo && authInfo.lat ?
+                                    <View style={{ display: 'flex', flexDirection: 'row' }} onClick={operate}>
+                                        <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'}>{getLocation()}</View>
                                     </View>
-                                </View>
-                        }
+                                    :
+                                    <View style={{ display: 'flex', flexDirection: 'row' }} onClick={operate}>
+                                        <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'} >
+                                            {props.isNight ? t('feature.day_night.get_local_time') : t('feature.day_night.get_local_time_sunrise')}
+                                        </View>
+                                    </View>
+                            }
+                        </View>
+                        <View className='day_card_footer'>
+                            <Text className='day_card_footer_date'>
+                                {
+                                    completedDate()
+                                }
+                            </Text>
+                            {
+                                showArrow() && <Image className="card_arrow" src={require('@/assets/images/arrow3.png')} />
+                            }
+
+                            {
+                                !showArrow() && <Text style={{color:'#fff'}}>{footerDesc()}</Text>
+                            }
                         </View>
                     </View>
                 </View>

src/features/trackTimeDuration/components/Discovery.tsx

@@ -497,12 +497,7 @@ export default function Discovery() {
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
         <Box>
             <View>
-                <View style={{
-                    marginLeft: rpxToPx(-40),
-                    marginRight: rpxToPx(-40),
-                    marginTop: rpxToPx(-40),
-                    padding: rpxToPx(48)
-                }}>
+                <View className="ring_full_container">
 
                     <View style={{
                         display: 'flex',

src/features/trackTimeDuration/components/TimelineFastSleep.tsx

@@ -8,11 +8,18 @@ import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import './TimelineFastSleep.scss'
 
-export default function TimelineFastSleep(props: { data: any, title?: string, first_real_check_time?: number, multiTimeZone?: boolean, diffTimeZone?: boolean }) {
+export default function TimelineFastSleep(props: {
+    data: any,
+    title?: string,
+    first_real_check_time?: number,
+    multiTimeZone?: boolean,
+    diffTimeZone?: boolean,
+    scenario?: any,
+}) {
     const { t } = useTranslation()
-    const [diffTimeZone, setDiffTimeZone] = useState(props.diffTimeZone)
-    const [multTimeZone, setMulTimeZone] = useState(props.multiTimeZone)
-    const scenario = useSelector((state: any) => state.scenario);
+    const [diffTimeZone] = useState(props.diffTimeZone)
+    const [multTimeZone] = useState(props.multiTimeZone)
+    const scenario = props.scenario ? props.scenario : useSelector((state: any) => state.scenario);
 
     useEffect(() => {
         // var split = new Date().toString().split(' ');
@@ -123,16 +130,16 @@ export default function TimelineFastSleep(props: { data: any, title?: string, fi
         if (isEnd) {
             if (obj.real_end_time) {
                 var newTimestamp = TimeFormatter.transferTimestamp(obj.real_end_time, obj.real_end_time_zone)
-                if (diffTimeZone || multTimeZone){
-                    return TimeFormatter.getMonthAndDayByTimestamp(newTimestamp,true)+' '
+                if (diffTimeZone || multTimeZone) {
+                    return TimeFormatter.getMonthAndDayByTimestamp(newTimestamp, true) + ' '
                 }
                 return TimeFormatter.dateDescription(newTimestamp, true, diffTimeZone || multTimeZone)
             }
             else {
                 var real_time_zone = props.data.last_time_zone
                 var newTimestamp = TimeFormatter.transferTimestamp(obj.target_end_time, real_time_zone)
-                if (diffTimeZone || multTimeZone){
-                    return TimeFormatter.getMonthAndDayByTimestamp(newTimestamp,true)+' '
+                if (diffTimeZone || multTimeZone) {
+                    return TimeFormatter.getMonthAndDayByTimestamp(newTimestamp, true) + ' '
                 }
                 return TimeFormatter.dateDescription(newTimestamp, true, diffTimeZone || multTimeZone)
             }
@@ -140,16 +147,16 @@ export default function TimelineFastSleep(props: { data: any, title?: string, fi
         else {
             if (obj.real_start_time) {
                 var newTimestamp = TimeFormatter.transferTimestamp(obj.real_start_time, obj.real_start_time_zone)
-                if (diffTimeZone || multTimeZone){
-                    return TimeFormatter.getMonthAndDayByTimestamp(newTimestamp,true)+' '
+                if (diffTimeZone || multTimeZone) {
+                    return TimeFormatter.getMonthAndDayByTimestamp(newTimestamp, true) + ' '
                 }
                 return TimeFormatter.dateDescription(newTimestamp, true, diffTimeZone || multTimeZone)
             }
             else {
                 var real_time_zone = props.data.last_time_zone
                 var newTimestamp = TimeFormatter.transferTimestamp(obj.target_start_time, real_time_zone)
-                if (diffTimeZone || multTimeZone){
-                    return TimeFormatter.getMonthAndDayByTimestamp(newTimestamp,true)+' '
+                if (diffTimeZone || multTimeZone) {
+                    return TimeFormatter.getMonthAndDayByTimestamp(newTimestamp, true) + ' '
                 }
                 return TimeFormatter.dateDescription(obj.target_start_time, true, diffTimeZone || multTimeZone)
             }
@@ -178,7 +185,7 @@ export default function TimelineFastSleep(props: { data: any, title?: string, fi
                 title: getStatus(true, true, props.data) == 'padding' ?
                     t('feature.track_time_duration.common.start_fast') :
                     t('feature.track_time_duration.common.started_fasting'),
-                content: props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.status, props.data.fast, false, true)+' ' + scenario.schedule.fast.start_time : formateDate(props.data.status, props.data.fast, false, true)+' ' + formateTime(props.data.fast, false, true),
+                content: props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.status, props.data.fast, false, true) + ' ' + scenario.schedule.fast.start_time : formateDate(props.data.status, props.data.fast, false, true) + ' ' + formateTime(props.data.fast, false, true),
                 date: desc,
                 // (diffTimeZone ? timeZone : showDate(props.data.fast, false) ? formateDate(props.data.fast, false) : ''),
                 color: global.fastColor ? global.fastColor : ColorType.fast
@@ -188,7 +195,7 @@ export default function TimelineFastSleep(props: { data: any, title?: string, fi
     if (props.data.sleep && props.data.scenario != 'FAST') {
 
         var status = getStatus(false, true, props.data)
-        var strContent = props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.status, props.data.sleep, false, false)+' ' + scenario.schedule.sleep.start_time : formateDate(props.data.status, props.data.sleep, false, false)+' ' + formateTime(props.data.sleep, false, false)
+        var strContent = props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.status, props.data.sleep, false, false) + ' ' + scenario.schedule.sleep.start_time : formateDate(props.data.status, props.data.sleep, false, false) + ' ' + formateTime(props.data.sleep, false, false)
 
 
         var timeZone = ''
@@ -220,7 +227,7 @@ export default function TimelineFastSleep(props: { data: any, title?: string, fi
             timeZone = ' ' + props.data.sleep.real_end_time_zone
         }
         var status = getStatus(false, false, props.data)
-        var strContent: string = props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.status, props.data.sleep, true, false) +' '+ scenario.schedule.sleep.end_time : formateDate(props.data.status, props.data.sleep, true)+' ' + formateTime(props.data.sleep, true, false)
+        var strContent: string = props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.status, props.data.sleep, true, false) + ' ' + scenario.schedule.sleep.end_time : formateDate(props.data.status, props.data.sleep, true) + ' ' + formateTime(props.data.sleep, true, false)
         var strDate = multTimeZone ? timeZone : ''
 
         if (props.data.status != 'WAIT_FOR_START' && props.data.status != 'COMPLETED') {
@@ -257,7 +264,7 @@ export default function TimelineFastSleep(props: { data: any, title?: string, fi
         if ((diffTimeZone && !multTimeZone) && props.data.status == 'COMPLETED') {
             timeZone = ''
         }
-        if (!diffTimeZone && !multTimeZone &&props.data.status == 'COMPLETED'){
+        if (!diffTimeZone && !multTimeZone && props.data.status == 'COMPLETED') {
             timeZone = ''
         }
 
@@ -267,7 +274,7 @@ export default function TimelineFastSleep(props: { data: any, title?: string, fi
                 title: getStatus(true, false, props.data) == 'padding' ?
                     t('feature.track_time_duration.common.end_fast') :
                     t('feature.track_time_duration.common.ended_fasting'),
-                content: props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.status, props.data.fast, true, true)+' ' + scenario.schedule.fast.end_time : formateDate(props.data.status, props.data.fast, true)+' ' + formateTime(props.data.fast, true, true),
+                content: props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.status, props.data.fast, true, true) + ' ' + scenario.schedule.fast.end_time : formateDate(props.data.status, props.data.fast, true) + ' ' + formateTime(props.data.fast, true, true),
                 // date: multTimeZone ? timeZone : '',
                 date: timeZone,
                 // (diffTimeZone ? timeZone : showDate(props.data.fast, true) ? formateDate(props.data.fast, true) : ''),

src/pages/clock/Clock.tsx

@@ -44,6 +44,7 @@ import { checkAuthorized } from "@/utils/check_authorized";
 import NoData from "@/components/view/NoData";
 import { AtActivityIndicator } from "taro-ui";
 import Tooltip from "@/components/view/Tooltip";
+import AllRings from "@/features/trackTimeDuration/components/AllRings";
 
 let GradientText
 let useNavigation;
@@ -425,10 +426,13 @@ export default function Page() {
         setHomeData(obj)
     }
 
-    global.updateFastSleepData = (data: any) => {
+    global.updateFastSleepData = (data: any, schedule?: any) => {
         if (data.id == (homeData as any).current_record.id) {
             var obj = JSON.parse(JSON.stringify(homeData))
             obj.current_record = data
+            if (schedule){
+                obj.scenario.schedule = schedule
+            }
             setHomeData(obj)
         }
 
@@ -640,6 +644,7 @@ export default function Page() {
                 </Box>
 
                 <DayNightCard isNight={true} count={count} />
+                <AllRings data={homeData} time={timestamp}/>
                 {
                     user.isLogin && records.length > 0 && <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: rpxToPx(40), }}>
                         {