update

src/features/trackTimeDuration/components/RecordFastSleep.scss

@@ -84,4 +84,55 @@
     align-items: center;
     height: 40px;
     width: 300px;
+}
+
+
+
+.single_check_nor{
+    margin-bottom: 16px;
+    height: 84px;
+    border-radius: 42px;
+    border: solid 4px $fastColor;
+    box-sizing: border-box;
+    margin-left: 46px;
+    margin-right: 46px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 44px;
+    padding-right: 44px;
+}
+
+.single_check_sel{
+    margin-bottom: 16px;
+    height: 84px;
+    border-radius: 42px;
+    background-color: $fastColor;
+    margin-left: 46px;
+    margin-right: 46px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 44px;
+    padding-right: 44px;
+    box-sizing: border-box;
+}
+
+.single_check_text_nor{
+    color: $fastColor;
+    font-weight: bold;
+    font-size: 32px;
+    flex: 1;
+}
+
+.single_check_text_sel{
+    color: #000;
+    font-weight: bold;
+    font-size: 32px;
+    flex: 1;
+}
+
+.single_checked{
+    width: 48px;
+    height: 48px;
 }

src/features/trackTimeDuration/components/RecordFastSleep.tsx

@@ -19,6 +19,7 @@ import { useTranslation } from "react-i18next";
 import { ColorType } from "@/context/themes/color";
 import TimelineStage from "./TimelineStage";
 import { jumpPage } from "../hooks/Common";
+import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
 // import { sqrt } from 'mathjs'
 
 let AppState;
@@ -26,11 +27,15 @@ if (process.env.TARO_ENV == 'rn') {
     AppState = require("react-native").AppState
 }
 
-export default function RecordFastSleep(props: { data: any, type: string, delSuccess?: Function }) {
+let stageCanvasId = new Date().getTime()
+export default function RecordFastSleep(props: { data: any, type: string, delSuccess?: Function, index: number }) {
+    const [count, setCount] = useState(0)
     const [showDetailModal, setShowDetailModal] = useState(false)
     const [segmentIndex, setSegmentIndex] = useState(0)
     const [diffTimeZone, setDiffTimeZone] = useState(false)
     const [multiTimeZone, setMultiTimeZone] = useState(false)
+    const [showMore, setShowMore] = useState(false)
+    const [selIndex, setSelIndex] = useState(0)
     const { t } = useTranslation()
     var canvasId = props.data.id
     const record = props.data;
@@ -44,6 +49,11 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
         if (process.env.TARO_ENV == 'rn') {
             AppState.addEventListener('change', handleAppStateChange);
         }
+        if (record.scenario != 'FAST_SLEEP') {
+            setShowMore(false)
+            setSelIndex(0)
+
+        }
         // console.log(sqrt(-4).toString())
     }, [props.data])
 
@@ -171,9 +181,8 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
             var realRing = getReal(record, true, true)
             if (props.data.status == 'ONGOING3') {
                 realRing.color = 'rgba(0,0,0,0)'
-                // bgRing.color = 'rgba(0,0,0,0)'
             }
-            return <Rings common={common} bgRing={bgRing} canvasId={canvasId} realRing={realRing} />
+            return <Rings common={common} bgRing={bgRing} canvasId={props.index} realRing={realRing} />
         }
         else {
             var currentDot1 = getDot(record, true)
@@ -191,7 +200,53 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
         }
     }
 
-    function smallRing() {
+    function bigMoreRing() {
+        var common = getCommon(null, true)
+        common.radius = 42;
+        common.lineWidth = 9;
+        var bgRing = getBgRing()
+        var realRing = getReal(record, true, true)
+        realRing.color = ColorType.fast + '66'
+
+        var list: any = []
+        if (record.scenario == 'FAST_SLEEP') {
+            if (selIndex == 0) {
+                const realRingBig: RealRing = {
+                    color: global.fastColor ? global.fastColor : ColorType.fast,
+                    startArc: startArc(record.fast.real_start_time),
+                    durationArc: durationArc(record.fast.real_start_time, record.sleep.real_start_time)
+                }
+                list.push(realRingBig)
+            }
+            if (selIndex == 1) {
+                const realRingBig: RealRing = {
+                    color: global.fastColor ? global.fastColor : ColorType.fast,
+                    startArc: startArc(record.sleep.real_start_time),
+                    durationArc: durationArc(record.sleep.real_start_time, record.sleep.real_end_time)
+                }
+                list.push(realRingBig)
+            }
+            if (selIndex == 2) {
+                const realRingBig: RealRing = {
+                    color: global.fastColor ? global.fastColor : ColorType.fast,
+                    startArc: startArc(record.sleep.real_end_time),
+                    durationArc: durationArc(record.sleep.real_end_time, record.fast.real_end_time)
+                }
+                list.push(realRingBig)
+            }
+        }
+        return <Rings common={common} bgRing={bgRing} canvasId={stageCanvasId} stageList={list} realRing={realRing} />
+    }
+
+    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 smallRing(canvas_id = props.index) {
         if (record.scenario == 'FAST_SLEEP') {
             var common = getCommon(null, false)
             common.radius = 28;
@@ -199,23 +254,39 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
             var bgRing = getBgRing()
             var realRing = getReal(record, false, false)
             if (props.type == 'record' || props.type == 'latest') {
+                var showReal = false;
                 if (record.sleep.status == 'WAIT_FOR_END') {
                     realRing.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
-                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                    showReal = true
+                    // return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
                 }
                 else if (record.sleep.status == 'NOT_COMPLETED') {
                     realRing.durationArc = 0.01
-                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                    showReal = true
+                    // return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
                 }
                 else if (record.sleep.status == 'COMPLETED') {
                     realRing = getReal(record, false, true)
-                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                    showReal = true
+                    // return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
                 }
-                return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} />
+                return <Rings common={common} bgRing={bgRing} canvasId={canvas_id + 'small'} realRing={showReal ? realRing : null} />
+                // if (record.sleep.status == 'WAIT_FOR_END') {
+                //     realRing.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
+                //     return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                // }
+                // else if (record.sleep.status == 'NOT_COMPLETED') {
+                //     realRing.durationArc = 0.01
+                //     return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                // }
+                // else if (record.sleep.status == 'COMPLETED') {
+                //     realRing = getReal(record, false, true)
+                //     return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                // }
+                // return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} />
             }
             else {
 
-
                 var currentDot = getDot(record, false)
                 var targetRing = getTarget(record, false)
                 if (record.status == 'ONGOING2') {
@@ -262,13 +333,56 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
         return recordTime()
     }
 
+    function tapStage(e,index){
+        stageCanvasId = new Date().getTime()
+        setSelIndex(index);
+        // setCount(pre=>pre+1); 
+        e.stopPropagation()
+    }
+
+    function moreCircle() {
+        return <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+            <View style={{ position: 'relative', zIndex: 1 }}>
+                {
+                    bigMoreRing()
+                }
+                <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
+                    {
+                        smallRing(123 + props.index)
+                    }
+                </View>
+            </View>
+            <View style={{ flex: 1 }}>
+
+                <View className={selIndex == 0 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e,0) }}>
+                    <Text className={selIndex == 0 ? "single_check_text_sel" : "single_check_text_nor"}>睡前断食</Text>
+                    {
+                        selIndex == 0 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
+                    }
+                </View>
+                <View className={selIndex == 1 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e,1) }}>
+                    <Text className={selIndex == 1 ? "single_check_text_sel" : "single_check_text_nor"}>睡眠中断食</Text>
+                    {
+                        selIndex == 1 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
+                    }
+                </View>
+                <View className={selIndex == 2 ? "single_check_sel" : "single_check_nor"} onClick={(e) => { tapStage(e,2) }}>
+                    <Text className={selIndex == 2 ? "single_check_text_sel" : "single_check_text_nor"}>起床后断食</Text>
+                    {
+                        selIndex == 2 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
+                    }
+                </View>
+            </View>
+        </View>
+    }
+
     function recordDetail() {
         var fastDuration = ''
         var sleepDuration = ''
         var showFast = false;
         var showSleep = false;
         if (record.scenario == 'FAST_SLEEP') {
-            
+
             fastDuration = getDuration(record.fast)
             sleepDuration = getDuration(record.sleep)
             if (record.status == 'ONGOING3') {
@@ -292,35 +406,48 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
             sleepDuration = getDuration(record.sleep)
             showSleep = true
         }
-        return <View className="fast_sleep_item">
-            {
-                rings()
-            }
-            <View className="duration_bg">
-                {
-                    showFast && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
-                }
-                {
-                    showFast && <Text className="duration_value" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{fastDuration}</Text>
-                }
-                {
-                    showSleep && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
-                }
+        return <View style={{ display: 'flex', flexDirection: 'column' }}>
+            <View className="fast_sleep_item">
                 {
-                    showSleep && <Text className="duration_value" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep }}>{sleepDuration}</Text>
+                    rings()
                 }
-            </View>
-            {/* <Image className="arrow1" src={require('@/assets/images/arrow.png')} /> */}
-            <View className="record_arrow_bg" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
-                <View style={{ flex: 1 }} />
-                <Text className='recordTime'>{getArrowText()}</Text>
-                <Image className="arrow2" src={require('@/assets/images/arrow3.png')} />
-            </View>
+                <View className="duration_bg">
+                    {
+                        showFast && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
+                    }
+                    {
+                        showFast && <Text className="duration_value" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{fastDuration}</Text>
+                    }
+                    {
+                        showSleep && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
+                    }
+                    {
+                        showSleep && <Text className="duration_value" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep }}>{sleepDuration}</Text>
+                    }
+                </View>
+                {/* <Image className="arrow1" src={require('@/assets/images/arrow.png')} /> */}
+                <View className="record_arrow_bg" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
+                    <View style={{ flex: 1 }} />
+                    <Text className='recordTime'>{getArrowText()}</Text>
+                    <Image className="arrow2" src={require('@/assets/images/arrow3.png')} />
+                </View>
 
+            </View>
+            {
+                (props.type == 'record' || props.type == 'latest') && record.scenario == 'FAST_SLEEP' &&
+                <Text style={{ color: '#fff', marginTop: 20 }} onClick={(e) => {
+                    e.stopPropagation()
+                    setShowMore(!showMore)
+                }}>{showMore ? '隐藏更多' : '显示更多'}</Text>
+            }
+            {
+                showMore && moreCircle()
+            }
         </View>
     }
 
     return <View>
+        <View style={{ position: 'absolute', left: 0, top: 0, width: 0, height: 0, opacity: 0 }}>{count}</View>
         <View className="time_operate_item">
             <RecordItem canDel={record.status == 'COMPLETED'} delete={del}
                 onClick={showDetail}

src/features/trackTimeDuration/components/RecordFastSleep的副本.tsx

@@ -0,0 +1,352 @@
+import Box from "@/components/layout/Box";
+import Header from "@/components/layout/Header";
+import Modal from "@/components/layout/Modal";
+import RecordItem from "@/features/common/RecordItem";
+import { delRecord } from "@/services/trackTimeDuration";
+import { ModalType } from "@/utils/types";
+import { View, Text, Image } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import { useEffect, useState } from "react";
+import TimelineFastSleep from "./TimelineFastSleep";
+import { TimeFormatter } from "@/utils/time_format";
+import './RecordFastSleep.scss'
+import { getBgRing, getCommon, getDot, getReal, getTarget } from "../hooks/RingData";
+import Rings from "./Rings";
+import Segment from "@/components/navigation/Segment";
+import Stage from "./Stage";
+import CenterContentTitleModal from "@/features/common/CenterContentTitleModal";
+import { useTranslation } from "react-i18next";
+import { ColorType } from "@/context/themes/color";
+import TimelineStage from "./TimelineStage";
+import { jumpPage } from "../hooks/Common";
+// import { sqrt } from 'mathjs'
+
+let AppState;
+if (process.env.TARO_ENV == 'rn') {
+    AppState = require("react-native").AppState
+}
+
+export default function RecordFastSleep(props: { data: any, type: string, delSuccess?: Function, index: number }) {
+    const [showDetailModal, setShowDetailModal] = useState(false)
+    const [segmentIndex, setSegmentIndex] = useState(0)
+    const [diffTimeZone, setDiffTimeZone] = useState(false)
+    const [multiTimeZone, setMultiTimeZone] = useState(false)
+    const { t } = useTranslation()
+    var canvasId = props.data.id
+    const record = props.data;
+
+    const handleAppStateChange = (nextAppState) => {
+        checkTimezone()
+    };
+
+    useEffect(() => {
+        checkTimezone()
+        if (process.env.TARO_ENV == 'rn') {
+            AppState.addEventListener('change', handleAppStateChange);
+        }
+        // console.log(sqrt(-4).toString())
+    }, [props.data])
+
+    function checkTimezone() {
+        var split = new Date().toString().split(' ');
+        var currentTZ = split[split.length - 2];
+        var isDiff = false;
+        var isMulti = false;
+        var tempTZ = '';
+        if (props.data.fast) {
+            if (props.data.fast.real_start_time_zone) {
+                tempTZ = props.data.fast.real_start_time_zone
+                if (props.data.fast.real_start_time_zone != currentTZ) {
+                    isDiff = true
+                }
+            }
+
+            if (props.data.fast.real_end_time_zone) {
+                if (tempTZ != props.data.fast.real_end_time_zone) {
+                    isMulti = true
+                }
+                if (props.data.fast.real_end_time_zone != currentTZ) {
+                    isDiff = true
+                }
+            }
+
+        }
+
+        if (props.data.sleep) {
+            if (props.data.sleep.real_start_time_zone) {
+                if (tempTZ == '') {
+                    tempTZ = props.data.sleep.real_start_time_zone
+                }
+                else if (tempTZ != props.data.sleep.real_start_time_zone) {
+                    isMulti = true
+                }
+                if (props.data.sleep.real_start_time_zone != currentTZ) {
+                    isDiff = true
+                }
+            }
+
+            if (props.data.sleep.real_end_time_zone) {
+                if (tempTZ != props.data.sleep.real_end_time_zone) {
+                    isMulti = true
+                }
+                if (props.data.sleep.real_end_time_zone != currentTZ) {
+                    isDiff = true
+                }
+            }
+
+
+        }
+        setDiffTimeZone(isDiff)
+        setMultiTimeZone(isMulti)
+    }
+    function del() {
+        var id = props.data.id
+        delRecord(id
+        ).then(res => {
+            global.refreshTime()
+            Taro.showToast({
+                title: t('page.records_history.del_success')
+            })
+            props.delSuccess && props.delSuccess(props.data)
+            // Taro.navigateBack()
+        })
+    }
+
+    function subTitle(timestamp) {
+        if (multiTimeZone) {
+            return t('feature.common.multi_timezones')
+        }
+        if (diffTimeZone) {
+            return t('feature.common.different_timezone')
+        }
+        return TimeFormatter.getDateAndWeek(timestamp)
+    }
+
+    function schedules() {
+        var timestamp = props.data.first_real_check_time
+
+        return <View style={{ display: 'flex', flexDirection: 'column' }}>
+            <TimelineStage data={props.data} title={t('feature.track_time_duration.record_fast_sleep.pop_title')}
+                subTitle={subTitle(timestamp)} first_real_check_time={timestamp} />
+        </View>
+    }
+
+    function showDetail(e) {
+        if (props.type == 'latest') {
+            setSegmentIndex(0)
+            global.segmentIndex = 0
+            setShowDetailModal(true)
+            return;
+        }
+        setShowDetailModal(true)
+    }
+
+    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()
+        }
+        return TimeFormatter.durationFormate(start, end)
+        // return TimeFormatter.calculateTimeDifference(start, end)
+    }
+
+    function durationArc(start_time: number, end_time: number) {
+        var duration = (end_time - start_time) / 1000;
+        return duration / (24 * 3600) * 2 * Math.PI;
+    }
+
+    function bigRing() {
+        var common = getCommon(null, true)
+        common.radius = 42;
+        common.lineWidth = 9;
+        var bgRing = getBgRing()
+
+        if (props.type == 'record' || props.type == 'latest') {
+            var realRing = getReal(record, true, true)
+            if (props.data.status == 'ONGOING3') {
+                realRing.color = 'rgba(0,0,0,0)'
+            }
+            return <Rings common={common} bgRing={bgRing} canvasId={props.index} realRing={realRing} />
+        }
+        else {
+            var currentDot1 = getDot(record, true)
+            var targetBigRing1 = getTarget(record, true)
+            if (record.status == 'ONGOING') {
+                var realRing1 = getReal(record, true, false)
+
+                return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} realRing={realRing1} targetRing={targetBigRing1} canvasId={canvasId} />
+            }
+            if (record.status == 'WAIT_FOR_START') {
+                return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} canvasId={canvasId} />
+            }
+            var realRing1 = getReal(record, true, false)
+            return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId={canvasId} />
+        }
+    }
+
+    function smallRing() {
+        if (record.scenario == 'FAST_SLEEP') {
+            var common = getCommon(null, false)
+            common.radius = 28;
+            common.lineWidth = 9;
+            var bgRing = getBgRing()
+            var realRing = getReal(record, false, false)
+            if (props.type == 'record' || props.type == 'latest') {
+                var showReal = false;
+                if (record.sleep.status == 'WAIT_FOR_END') {
+                    realRing.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
+                    showReal = true
+                    // return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                }
+                else if (record.sleep.status == 'NOT_COMPLETED') {
+                    realRing.durationArc = 0.01
+                    showReal = true
+                    // return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                }
+                else if (record.sleep.status == 'COMPLETED') {
+                    realRing = getReal(record, false, true)
+                    showReal = true
+                    // return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                }
+                return <Rings common={common} bgRing={bgRing} canvasId={props.index + 'small'} realRing={showReal ? realRing : null} />
+                // if (record.sleep.status == 'WAIT_FOR_END') {
+                //     realRing.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
+                //     return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                // }
+                // else if (record.sleep.status == 'NOT_COMPLETED') {
+                //     realRing.durationArc = 0.01
+                //     return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                // }
+                // else if (record.sleep.status == 'COMPLETED') {
+                //     realRing = getReal(record, false, true)
+                //     return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
+                // }
+                // return <Rings common={common} bgRing={bgRing} canvasId={canvasId + '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={canvasId + 'small'} />
+                }
+                if (record.status == 'ONGOING3') {
+                    currentDot.color = 'rgba(0, 255, 255, 0.5)'
+                }
+                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={canvasId + 'small'} />
+            }
+        }
+        return null
+    }
+
+    function rings() {
+        return <View style={{ position: 'relative', zIndex: 1 }}>
+            {
+                bigRing()
+            }
+            <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
+                {
+                    smallRing()
+                }
+            </View>
+        </View>
+    }
+
+    function recordTime() {
+        var timestamp = props.data.first_real_check_time
+        if (props.data.first_time_zone) {
+            timestamp = TimeFormatter.transferTimestamp(timestamp, props.data.first_time_zone)
+        }
+        return TimeFormatter.dateDescription(timestamp, true)
+    }
+
+    function getArrowText() {
+        if (multiTimeZone) {
+            return t('feature.common.multi_timezones')
+        }
+        if (diffTimeZone) {
+            return t('feature.common.different_timezone')
+        }
+        return recordTime()
+    }
+
+    function recordDetail() {
+        var fastDuration = ''
+        var sleepDuration = ''
+        var showFast = false;
+        var showSleep = false;
+        if (record.scenario == 'FAST_SLEEP') {
+
+            fastDuration = getDuration(record.fast)
+            sleepDuration = getDuration(record.sleep)
+            if (record.status == 'ONGOING3') {
+                fastDuration = t('feature.common.wait_for_end')
+            }
+
+            if (record.sleep.status == "NOT_STARTED") {
+                sleepDuration = t('feature.common.not_started')
+            }
+            else if (record.sleep.status == 'NOT_COMPLETED') {
+                sleepDuration = t('feature.common.not_completed')
+            }
+            showFast = true
+            showSleep = true
+        }
+        else if (record.scenario == 'FAST') {
+            fastDuration = getDuration(record.fast)
+            showFast = true
+        }
+        else {
+            sleepDuration = getDuration(record.sleep)
+            showSleep = true
+        }
+        return <View className="fast_sleep_item">
+            {
+                rings()
+            }
+            <View className="duration_bg">
+                {
+                    showFast && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
+                }
+                {
+                    showFast && <Text className="duration_value" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{fastDuration}</Text>
+                }
+                {
+                    showSleep && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
+                }
+                {
+                    showSleep && <Text className="duration_value" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep }}>{sleepDuration}</Text>
+                }
+            </View>
+            {/* <Image className="arrow1" src={require('@/assets/images/arrow.png')} /> */}
+            <View className="record_arrow_bg" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
+                <View style={{ flex: 1 }} />
+                <Text className='recordTime'>{getArrowText()}</Text>
+                <Image className="arrow2" src={require('@/assets/images/arrow3.png')} />
+            </View>
+
+        </View>
+    }
+
+    return <View>
+        <View className="time_operate_item">
+            <RecordItem canDel={record.status == 'COMPLETED'} delete={del}
+                onClick={showDetail}
+            >{recordDetail()}
+            </RecordItem>
+            {
+                showDetailModal && <Modal children={schedules()}
+                    modalType={ModalType.center}
+                    dismiss={() => setShowDetailModal(false)}
+                    confirm={() => { }} />
+            }
+        </View>
+    </View>
+}

src/features/trackTimeDuration/components/Rings.weapp.tsx

@@ -62,6 +62,7 @@ export default function Rings(props: {
     const user = useSelector((state: any) => state.user);
 
     useEffect(()=>{
+        debugger
         drawCircle()
     },[])
 
@@ -160,7 +161,7 @@ export default function Rings(props: {
         }
         
         const center = radius + lineWidth / 2+3; // 圆心坐标
-        // ctx.clearRect(0, 0, radius * 2, radius * 2); // 清除画布
+        ctx.clearRect(0, 0, radius * 2, radius * 2); // 清除画布
 
         // 设置画布尺寸
         ctx.scale(dpr, dpr);

src/pages/clock/Clock.tsx

@@ -624,7 +624,7 @@ export default function IndexPage() {
           }
           {
             user.isLogin && checkData && (checkData as any).latest_record &&
-            <RecordFastSleep type='latest' data={(checkData as any).latest_record} delSuccess={getCheckData} />
+            <RecordFastSleep type='latest' data={(checkData as any).latest_record} delSuccess={getCheckData} index={10000}/>
           }
           <View style={{ height: process.env.TARO_ENV == 'rn' ? 0 : 100 }} />
         </View>

src/pages/clock/Index.tsx

@@ -352,10 +352,10 @@ export default function Page() {
     function render() {
         return <View className="index_container">
             <Text className="count">{count}</Text>
-            {/* <IndexItem type="FAST" data={(homeData as any).fast} time={timestamp} /> */}
-            {/* <IndexItem type='SLEEP' data={(homeData as any).sleep} time={timestamp} /> */}
+            <IndexItem type="FAST" data={(homeData as any).fast} time={timestamp} />
+            <IndexItem type='SLEEP' data={(homeData as any).sleep} time={timestamp} />
             <Text className="discovery">探索</Text>
-            {/* <IndexItem type="FAST_SLEEP" data={(homeData as any).fast_sleep} time={timestamp} /> */}
+            <IndexItem type="FAST_SLEEP" data={(homeData as any).fast_sleep} time={timestamp} />
             <Swiper className='swiper1' indicatorColor='#333'
                 indicatorActiveColor='#999'
                 current={0}
@@ -458,7 +458,7 @@ export default function Page() {
 
             {
                 records.length > 0 && <View className="fast_sleep_item_bg">
-                    <RecordFastSleep data={records[0]} type='record' delSuccess={() => { }} />
+                    <RecordFastSleep data={records[0]} type='record' delSuccess={() => { }} index={-20000}/>
                 </View>
             }
 

src/pages/common/RecordsHistory.tsx

@@ -75,15 +75,15 @@ export default function Page() {
         refresh()
     }, [])
 
-    useEffect(() => {
-        startTimer();
-        return () => {
-            // 在组件卸载时清除定时器
-            if (timerId) {
-                clearInterval(timerId);
-            }
-        };
-    }, [timerId]);
+    // useEffect(() => {
+    //     startTimer();
+    //     return () => {
+    //         // 在组件卸载时清除定时器
+    //         if (timerId) {
+    //             clearInterval(timerId);
+    //         }
+    //     };
+    // }, [timerId]);
 
     useEffect(() => {
         var name = ''
@@ -107,18 +107,18 @@ export default function Page() {
 
     }, [filterIndex])
 
-    const startTimer = () => {
-        // 避免重复启动定时器
-        if (timerId) {
-            return;
-        }
+    // const startTimer = () => {
+    //     // 避免重复启动定时器
+    //     if (timerId) {
+    //         return;
+    //     }
 
-        const id = setInterval(() => {
-            setCounter((prevCounter) => prevCounter + 1);
-        }, 1000);
+    //     const id = setInterval(() => {
+    //         setCounter((prevCounter) => prevCounter + 1);
+    //     }, 1000);
 
-        setTimerId(id as any);
-    };
+    //     setTimerId(id as any);
+    // };
 
 
     useReady(() => {
@@ -358,7 +358,7 @@ export default function Page() {
                 {
                     records.map((item, index) => {
                         return <View className="fast_sleep_item_bg">
-                            <RecordFastSleep key={index} data={item} type='record' delSuccess={(item) => removeItem(item)} />
+                            <RecordFastSleep key={index} data={item} index={index} type='record' delSuccess={(item) => removeItem(item)} />
                         </View>
                         // return <Schedule key={index} data={item} type="record" delSuccess={(item) => removeItem(item)} />
                     })