update

src/features/health/MainConsole.tsx

@@ -1,12 +1,93 @@
 import { WindowType } from "@/utils/types";
-import { View } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
+import dayjs from "dayjs";
 import { useEffect } from "react";
+import { useSelector } from "react-redux";
 
 export default function MainConsole(props: { type: WindowType }) {
-    useEffect(() => { 
-        
+    const health = useSelector((state: any) => state.health);
+
+    useEffect(() => {
+
     }, [props.type])
-    return <View>
 
+    function detail() {
+        const { day, night } = health.windows.night_day
+        const { fast, eat } = health.windows.fast_eat
+        const { sleep, active } = health.windows.sleep_active
+        switch (health.mode) {
+            case 'DAY':
+                return <View>
+                    {
+                        day.timeline.map((item, index) => {
+                            return <View key={index}>
+                                <Text>{item.title}</Text>
+                                <Text>{dayjs(item.target.timestamp).format('HH:mm')}</Text>
+                            </View>
+                        })
+                    }
+                </View>
+            case 'NIGHT':
+                return <View>
+                    {
+                        night.timeline.map((item, index) => {
+                            return <View key={index}>
+                                <Text>{item.title}</Text>
+                                <Text>{dayjs(item.target.timestamp).format('HH:mm')}</Text>
+                            </View>
+                        })
+                    }
+                </View>
+            case 'FAST':
+                return <View>
+                    {
+                        fast.timeline.map((item, index) => {
+                            return <View key={index}>
+                                <Text>{item.title}</Text>
+                                <Text>{dayjs(item.target.timestamp).format('HH:mm')}</Text>
+                            </View>
+                        })
+                    }
+                </View>
+            case 'EAT':
+                return <View>
+                    {
+                        eat.timeline.map((item, index) => {
+                            return <View key={index}>
+                                <Text>{item.title}</Text>
+                                <Text>{dayjs(item.target.timestamp).format('HH:mm')}</Text>
+                            </View>
+                        })
+                    }
+                </View>
+            case 'SLEEP':
+                return <View>
+                    {
+                        sleep.timeline.map((item, index) => {
+                            return <View key={index}>
+                                <Text>{item.title}</Text>
+                                <Text>{dayjs(item.target.timestamp).format('HH:mm')}</Text>
+                            </View>
+                        })
+                    }
+                </View>
+            case 'ACTIVE':
+                return <View>
+                    {
+                        active.timeline && active.timeline.map((item, index) => {
+                            return <View key={index}>
+                                <Text>{item.title}</Text>
+                                <Text>{dayjs(item.target.timestamp).format('HH:mm')}</Text>
+                            </View>
+                        })
+                    }
+                </View>
+        }
+        return <View />
+    }
+    return <View>
+        {
+            detail()
+        }
     </View>
 }

src/features/health/MainDayNightCard.tsx

@@ -9,18 +9,36 @@ import 'dayjs/locale/en';
 import momentT from 'moment';
 // import moment from 'moment-timezone'
 import { MainColorType } from "@/context/themes/color";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import Calendar from "@/features/health/calendar";
 import { WindowType } from "@/utils/types";
+import { durationArc, isCurrentTimeInRange, startArc } from "./util";
+import { setMode } from "@/store/health";
 
 export default function MainDayNightCard(props: { count: number, typeChanged: Function }) {
     const [isDay, setIsDay] = useState(true)
     const [isDayMode, setIsDayMode] = useState(true)
     const user = useSelector((state: any) => state.user);
+    const health = useSelector((state: any) => state.health);
+    const dispatch = useDispatch();
 
     useEffect(() => {
+        const { day } = health.windows.night_day
+        if (isCurrentTimeInRange(day.schedule.start_time, day.schedule.end_time)) {
+            setIsDay(true)
+            setIsDayMode(true)
+        }
+        else {
+            setIsDay(false)
+            setIsDayMode(false)
+        }
+    }, [health.windows])
 
-    }, [user.isLogin])
+    useEffect(() => {
+        if (health.selTab == 0) {
+            dispatch(setMode(isDayMode ? 'DAY' : 'NIGHT'))
+        }
+    }, [health.selTab,isDayMode])
 
     useEffect(() => {
         dayjs.locale(global.language == 'en' ? 'en' : 'zh-cn');
@@ -32,14 +50,6 @@ export default function MainDayNightCard(props: { count: number, typeChanged: Fu
         // moment.locale(global.language == 'en' ? 'en-gb' : 'zh-cn')
 
 
-        const dt = new Date()
-        if (dt.getHours() >= 18 || dt.getHours() < 6) {
-            setIsDay(false)
-        }
-        else {
-            setIsDay(true)
-        }
-
     }, [props.count])
 
     const common: RingCommon = {
@@ -55,14 +65,27 @@ export default function MainDayNightCard(props: { count: number, typeChanged: Fu
     }
 
     function getTargetArc() {
-        return Math.PI
+        const { day, night } = health.windows.night_day
+        if (isDayMode) {
+            return durationArc(day.target.start_timestamp, day.target.end_timestamp)
+        }
+        return durationArc(night.target.start_timestamp, night.target.end_timestamp)
+    }
+
+    function getRealArc() {
+        const { day, night } = health.windows.night_day
+        if (isDayMode) {
+            return durationArc(day.target.start_timestamp, new Date().getTime())
+        }
+        return durationArc(night.target.start_timestamp, new Date().getTime())
     }
 
     function getArc() {
-        var hour = new Date().getHours()
-        var minute = new Date().getMinutes()
-        var second = new Date().getSeconds()
-        return (hour * 3600 + minute * 60 + second) / (24 * 3600) * 2 * Math.PI - 1 / 2 * Math.PI
+        const { day, night } = health.windows.night_day
+        if (isDayMode) {
+            return startArc(day.target.start_timestamp)
+        }
+        return startArc(night.target.start_timestamp)
     }
 
     function ring() {
@@ -94,14 +117,14 @@ export default function MainDayNightCard(props: { count: number, typeChanged: Fu
 
         const targetRing: TargetRing = {
             color: targetColor,
-            startArc: isDayMode ? 0 : Math.PI,//-Math.PI / 2,
+            startArc: getArc(),//-Math.PI / 2,
             durationArc: getTargetArc()
         }
 
         const realRing: RealRing = {
             color: realColor,
-            startArc: isDayMode ? 0 : Math.PI,//-Math.PI / 2,
-            durationArc: isDayMode ? getArc() : getArc() - Math.PI
+            startArc: getArc(),//-Math.PI / 2,
+            durationArc: getRealArc()
         }
 
         return <Rings common={common} bgRing={bgRing} targetRing={targetRing} realRing={realRing} currentDot={currentDot} canvasId={'smal1w1l'} />
@@ -134,32 +157,6 @@ export default function MainDayNightCard(props: { count: number, typeChanged: Fu
         }
         return 'Coming up'
     }
-    // return <ScrollView className="scroll-view" scrollY>
-    //     <View className="content">
-    //         <View style={{ height: 400, backgroundColor: '#f0f0f0' }}>
-    //             <Calendar year={2024} month={8} />
-    //         </View>
-
-    //         <View className="sticky-view">
-    //             <Text>2024年8月</Text>
-    //         </View>
-    //         <View style={{ height: 1200, backgroundColor: '#e0e0e0' }}>
-    //             <Text>更多内容...</Text>
-    //         </View>
-    //         <View className="sticky-view">
-    //             <Text>2024年9月</Text>
-    //         </View>
-    //         <View style={{ height: 1200, backgroundColor: '#e0e0e0' }}>
-    //             <Text>更多内容...</Text>
-    //         </View>
-    //         <View className="sticky-view">
-    //             <Text>2024年10月</Text>
-    //         </View>
-    //         <View style={{ height: 1200, backgroundColor: '#e0e0e0' }}>
-    //             <Text>更多内容...</Text>
-    //         </View>
-    //     </View>
-    // </ScrollView>
 
     return <View style={{ width: rpxToPx(750), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
         {/* <Calendar year={2024} month={8}/> */}

src/features/health/MainFastEatCard.tsx

@@ -8,7 +8,7 @@ import dayjs from "dayjs";
 import moment from 'moment-timezone'
 import { MainColorType } from "@/context/themes/color";
 import { fastWindow, setSchedule, updateRecord } from "@/services/trackTimeDuration";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { jumpPage } from "../trackTimeDuration/hooks/Common";
 import ConsolePicker from "../trackTimeDuration/components/ConsolePicker";
 import { endFast, startFast } from "../trackTimeDuration/actions/TrackTimeActions";
@@ -19,6 +19,8 @@ import showActionSheet from "@/components/basic/ActionSheet";
 import { records } from "@/services/health";
 import MainHistory from "./MainHistory";
 import { WindowType } from "@/utils/types";
+import { isCurrentTimeInRange } from "./util";
+import { setMode } from "@/store/health";
 let useNavigation;
 
 let Linking, PushNotification;
@@ -55,11 +57,10 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
     const [status, setStatus] = useState<any>('upcoming')
     const [showPicker, setShowPicker] = useState(false)
     const [isStart, setIsStart] = useState(true)
-    const [loaded, setLoaded] = useState(false)
-    const [eats, setEats] = useState<any>([])
-    const [fasts, setFasts] = useState<any>([])
 
     const user = useSelector((state: any) => state.user);
+    const health = useSelector((state: any) => state.health);
+    const dispatch = useDispatch()
 
     let navigation, showActionSheetWithOptions;
     if (useNavigation) {
@@ -68,34 +69,35 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
     }
 
     useEffect(() => {
-        fastWindow().then(res => {
-            setLoaded(true)
-            const { eat_win, fast_win } = res
-            const fast = fast_win.fast
-            setEatData(eat_win)
-            setFastData(fast_win)
-            setStartScheduleTime(fast_win.fast.schedule_start_time)
-            setEndScheduleTime(fast_win.fast.schedule_end_time)
+        const { fast, eat } = health.windows.fast_eat
+        var now = new Date().getTime()
+        if ((fast.status == 'WAIT_FOR_END' || fast.target.start_time <= now && fast.target.end_time >= now) || isCurrentTimeInRange(fast.schedule.start_time, fast.schedule.end_time)) {
+            setIsFastMode(true)
+        }
+        else {
+            setIsFastMode(false)
+        }
 
-            var now = new Date().getTime()
-            if ((fast.status == 'WAIT_FOR_END' || fast.target_start_time <= now && fast.target_end_time >= now) ||
-                isCurrentTimeInRange(fast.schedule_start_time, fast.schedule_end_time)) {
-                setIsFastMode(true)
-            }
-            else {
-                setIsFastMode(false)
-            }
+        setEatData(eat)
+        setFastData(fast)
+        setStartScheduleTime(fast.schedule.start_time)
+        setEndScheduleTime(fast.schedule.end_time)
 
-            update(fast)
-        })
+        update(fast)
     }, [user.isLogin])
 
     useEffect(() => {
         if (fastData) {
-            update(fastData.fast)
+            update(fastData)
         }
     }, [props.count])
 
+    useEffect(() => {
+        if (health.selTab == 1) {
+            dispatch(setMode(isFastMode ? 'FAST' : 'EAT'))
+        }
+    }, [health.selTab,isFastMode])
+
 
     global.refreshFastEat = () => {
         refresh()
@@ -109,8 +111,8 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
             const fast = fast_win.fast
             setEatData(eat_win)
             setFastData(fast_win)
-            setStartScheduleTime(fast_win.fast.schedule_start_time)
-            setEndScheduleTime(fast_win.fast.schedule_end_time)
+            setStartScheduleTime(fast_win.fast.schedule.start_time)
+            setEndScheduleTime(fast_win.fast.schedule.end_time)
         })
     }
 
@@ -120,8 +122,8 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
         if (fast.status == 'WAIT_FOR_END') {
             setStatus('process')
         }
-        else if ((fast.target_start_time <= now && fast.target_end_time >= now) || isCurrentTimeInRange(fast.schedule_start_time, fast.schedule_end_time)) {
-            setStartTime(fast.schedule_start_time)
+        else if ((fast.target.start_timestamp <= now && fast.target.end_timestamp >= now) || isCurrentTimeInRange(fast.schedule.start_time, fast.schedule.end_time)) {
+            setStartTime(fast.schedule.start_time)
             setStatus('new')
         }
         else {
@@ -178,10 +180,10 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
         var durationArc = isFastMode ? fastCount / 1440 * 2 * Math.PI : eatCount / 1440 * 2 * Math.PI
 
         if (isFastMode) {
-            var dt = new Date(fastData.fast.target_start_time)
+            var dt = new Date(fastData.target.start_time)
             var realSeconds = dt.getHours() * 3600 + dt.getMinutes() * 60 + dt.getSeconds()
             startArc = realSeconds / (1440 * 60) * 2 * Math.PI - Math.PI / 2
-            durationArc = ((fastData.fast.target_end_time - fastData.fast.target_start_time) / 1000) / (1440 * 60) * 2 * Math.PI
+            durationArc = ((fastData.target.end_time - fastData.target.start_time) / 1000) / (1440 * 60) * 2 * Math.PI
         }
 
         return {
@@ -212,10 +214,10 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
                 var durationArc = fastCount / (1440 * 60) * 2 * Math.PI
 
                 if (status == 'process') {
-                    var dt = new Date(fastData.fast.target_start_time)
+                    var dt = new Date(fastData.target.start_time)
                     var realSeconds = dt.getHours() * 3600 + dt.getMinutes() * 60 + dt.getSeconds()
                     startArc = realSeconds / (1440 * 60) * 2 * Math.PI - Math.PI / 2
-                    durationArc = ((new Date().getTime() - fastData.fast.target_start_time) / 1000) / (1440 * 60) * 2 * Math.PI
+                    durationArc = ((new Date().getTime() - fastData.target.start_time) / 1000) / (1440 * 60) * 2 * Math.PI
                 }
 
                 return {
@@ -250,25 +252,7 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
         }
     }
 
-    function isCurrentTimeInRange(start, end) {
-        // 获取当前时间
-        const now = new Date();
-        const currentTime = now.getHours() * 60 + now.getMinutes(); // 当前时间转换为分钟
-
-        // 将时间点转换为分钟
-        const [startHour, startMinute] = start.split(':').map(Number);
-        const [endHour, endMinute] = end.split(':').map(Number);
-        const startTime = startHour * 60 + startMinute; // 开始时间转换为分钟
-        const endTime = endHour * 60 + endMinute; // 结束时间转换为分钟
 
-        // 处理跨日的情况
-        if (endTime < startTime) {
-            return currentTime >= startTime || currentTime <= endTime;
-        }
-
-        // 判断当前时间是否在范围内
-        return currentTime >= startTime && currentTime <= endTime;
-    }
 
     function getTimeToDestination(timeStr, isPasted) {
         // 获取当前时间
@@ -366,12 +350,12 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
 
         switch (status) {
             case 'process':
-                milliSeconds = new Date().getTime() - fastData.fast.real_start_time
+                milliSeconds = new Date().getTime() - fastData.real_start_time
                 break;
             case 'new':
-                return getTimeToDestination(fastData.fast.schedule_start_time, true)
+                return getTimeToDestination(fastData.schedule.start_time, true)
             case 'upcoming':
-                return getTimeToDestination(fastData.fast.schedule_start_time, false)
+                return getTimeToDestination(fastData.schedule.start_time, false)
 
         }
         var seconds = Math.floor(milliSeconds / 1000)
@@ -383,7 +367,7 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
 
     function getEatTime() {
 
-        return getTimeToDestination(eatData.schedule_start_time, isCurrentTimeInRange(eatData.schedule_start_time, eatData.schedule_end_time))
+        return getTimeToDestination(eatData.schedule.start_time, isCurrentTimeInRange(eatData.schedule.start_time, eatData.schedule.end_time))
     }
 
     function tapFastStart() {
@@ -456,10 +440,10 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
         var color = MainColorType.fast
         var endTimestamp = 0
         if (operateType == 'endFast') {
-            endTimestamp = fastData.fast.target_end_time
+            endTimestamp = fastData.target.end_time
         }
 
-        var duration = fastData.fast.target_duration
+        var duration = fastData.target.duration
 
         return <View className="modal_content">
             <ConsolePicker ref={limitPickerRef}
@@ -486,7 +470,7 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
     }
 
     function pickerContent() {
-        const timestamp = isStart ? fastData.fast.target_start_time : fastData.fast.target_end_time
+        const timestamp = isStart ? fastData.target.start_time : fastData.target.end_time
         const strTime = dayjs(timestamp).format('HH:mm')
         return <TimePicker time={strTime}
             color={MainColorType.fast}
@@ -510,7 +494,7 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
             })
         }
         else {
-            var startTime = dayjs(fastData.fast.target_start_time).format('HH:mm:ss')
+            var startTime = dayjs(fastData.target.start_time).format('HH:mm:ss')
             var endTime = strTime + ':00'
             console.log(startTime, endTime)
             if (startTime == endTime) {
@@ -564,7 +548,7 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
         t1 = date.getTime();
 
         if (operateType == 'startFast') {
-            startFast(t1, fastData.fast.target_duration, event ? event : logEvent).then(res => {
+            startFast(t1, fastData.target_duration, event ? event : logEvent).then(res => {
                 setBtnDisable(false)
                 refresh()
                 setShowTimePicker(false)
@@ -594,7 +578,7 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
         if (meal.real_start_time > 0) {
             return true
         }
-        if (meal.target_start_time > new Date().getTime()) {
+        if (meal.target.start_time > new Date().getTime()) {
             return true
         }
         return true
@@ -620,15 +604,12 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
         });
     }
 
-    if (!loaded) {
+    if (!fastData)
         return <View />
-    }
 
     return <View style={{ alignItems: 'center', display: 'flex', flexDirection: 'column', width: rpxToPx(750), flexShrink: 0 }}>
 
         <View style={{ width: rpxToPx(750), }} />
-        {/* <View onClick={() => { setShowModal(true) }}>Fast Eat Night{props.count}</View>
-        <View style={{ height: 40 }} /> */}
         <View style={{ position: 'relative', }}>
             {
                 ring()
@@ -641,8 +622,8 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
                 <Text className="date1">{global.language == 'en' ? formatTime('dddd, MMM D') : formatTime('MMMD日 dddd')}</Text>
             </View>
         </View>
-        <View>{isFastMode ? formatMilliseconds(fastData.fast.target_duration) : formatMilliseconds(eatData.target_end_time - eatData.target_start_time)}</View>
-        {
+        <View>{isFastMode ? formatMilliseconds(fastData.target.duration) : formatMilliseconds(eatData.target.end_time - eatData.target.start_time)}</View>
+        {/* {
             isFastMode && <View>
                 <View className="log_row">
                     {
@@ -650,14 +631,14 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
                             <Text className="schedule_name">
                                 Fast starts:
                             </Text>
-                            <Text className="schedule_time">
+                            <Text className="schedule">
                                 {startScheduleTime}
                             </Text>
                         </View>
                     }
 
                     {
-                        status == 'process' ? <View className="schedule_time">{dayjs(fastData.fast.target_start_time).format('HH:mm')}</View> :
+                        status == 'process' ? <View className="schedule">{dayjs(fastData.target.start_time).format('HH:mm')}</View> :
                             <View onClick={tapStartLog} className={status == 'new' ? "fast_log_btn" : "fast_log_btn fast_log_btn_disable"}>Log{status == 'new' && <View className="badge" />}</View>
                     }
 
@@ -668,8 +649,8 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
                         <Text className="schedule_name">
                             Fast ends:
                         </Text>
-                        <Text className="schedule_time">
-                            {status == 'process' ? dayjs(fastData.fast.target_end_time).format('HH:mm') : endScheduleTime}
+                        <Text className="schedule">
+                            {status == 'process' ? dayjs(fastData.target.end_time).format('HH:mm') : endScheduleTime}
                         </Text>
                     </View>
                     <View onClick={tapEndLog} className={status == 'process' ? "fast_log_btn" : "fast_log_btn fast_log_btn_disable"}>Log</View>
@@ -686,8 +667,8 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
                             }
                             <View className="schedule">
                                 <Text className="schedule_name">{item.name}</Text>
-                                <Text className="schedule_time">
-                                    {item.real_start_time ? dayjs(item.real_start_time).format('HH:mm') + ' - ' + dayjs(item.real_end_time).format('HH:mm') : item.schedule_start_time}
+                                <Text className="schedule">
+                                    {item.real_start_time ? dayjs(item.real_start_time).format('HH:mm') + ' - ' + dayjs(item.real_end_time).format('HH:mm') : item.schedule.start_time}
                                 </Text>
                             </View>
                             <View style={{ flex: 1 }} />
@@ -699,7 +680,7 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
                     })
                 }
             </View>
-        }
+        } */}
 
 
 

src/features/health/MainHistory.tsx

@@ -7,6 +7,7 @@ import HistorySleepItem from "./HistorySleepItem";
 import { records } from "@/services/health";
 import './History.scss'
 import Calendar from "./calendar";
+import { useSelector } from "react-redux";
 
 export default function MainHistory(props: { type: string }) {
     const [list, setList] = useState<any>([])
@@ -14,11 +15,15 @@ export default function MainHistory(props: { type: string }) {
     const [total, setTotal] = useState(0)
     const [loaded, setLoaded] = useState(false)
 
+    const health = useSelector((state: any) => state.health);
+
+    
+
 
 
     useEffect(() => {
         loadData(1)
-    }, [props.type])
+    }, [health.mode])
 
     function refresh() {
         loadData(1)
@@ -34,7 +39,7 @@ export default function MainHistory(props: { type: string }) {
 
     function loadData(index: number) {
         records({
-            code: props.type,
+            code: health.mode,
             limit: 10,
             page: index
         }).then(res => {
@@ -54,7 +59,7 @@ export default function MainHistory(props: { type: string }) {
         return <View />
 
     return <View style={{display:'flex',flexDirection:'column'}}>
-        <Calendar year={2024} month={8}/>
+        {/* <Calendar year={2024} month={8}/> */}
         {
             list.map((item, index) => {
                 return <View key={index}>

src/features/health/MainSleepActiveCard.tsx

@@ -6,25 +6,42 @@ import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/tr
 import dayjs from "dayjs";
 import moment from 'moment-timezone'
 import { MainColorType } from "@/context/themes/color";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { sleepWindow } from "@/services/trackTimeDuration";
 import { WindowType } from "@/utils/types";
+import { durationArc, isCurrentTimeInRange, startArc } from "./util";
+import { setMode } from "@/store/health";
 
-export default function MainSleepActiveCard(props: { count: any,typeChanged:Function }) {
-    const [isSleep, setIsSleep] = useState(true)
+export default function MainSleepActiveCard(props: { count: any, typeChanged: Function }) {
     const [isSleepMode, setIsSleepMode] = useState(true)
 
     const startScheduleTime = '19:00'
     const endScheduleTime = '06:00'
 
     const user = useSelector((state: any) => state.user);
+    const health = useSelector((state: any) => state.health);
+    const dispatch = useDispatch()
 
     useEffect(() => {
-        sleepWindow().then(res => {
+        const { sleep } = health.windows.sleep_active
+        if (isCurrentTimeInRange(sleep.schedule.start_time, sleep.schedule.end_time)) {
+            setIsSleepMode(true)
+        }
+        else {
+            setIsSleepMode(false)
+        }
+    }, [health.windows])
+
 
-        })
+    useEffect(() => {
     }, [user.isLogin])
 
+    useEffect(() => {
+        if (health.selTab == 2) {
+            dispatch(setMode(isSleepMode ? 'SLEEP' : 'ACTIVE'))
+        }
+    }, [health.selTab,isSleepMode])
+
     function formatTime(format: string, timestamp?: number) {
 
         return dayjs().format(format)
@@ -33,7 +50,7 @@ export default function MainSleepActiveCard(props: { count: any,typeChanged:Func
     function switchMode() {
         var mode = !isSleepMode;
         setIsSleepMode(mode)
-        props.typeChanged(mode?WindowType.sleep:WindowType.active)
+        props.typeChanged(mode ? WindowType.sleep : WindowType.active)
     }
 
     const common: RingCommon = {
@@ -48,19 +65,34 @@ export default function MainSleepActiveCard(props: { count: any,typeChanged:Func
         color: '#EAE9E9'
     }
 
-    function targetRing() {
+    function getArc() {
+        const { sleep, active } = health.windows.sleep_active
+        if (isSleepMode) {
+            return startArc(sleep.target.start_timestamp)
+        }
+        return startArc(active.target.start_timestamp)
+    }
 
-        var starts: any = startScheduleTime.split(':')
-        var ends: any = endScheduleTime.split(':')
-        const startSeconds: any = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
-        const endSeconds: any = parseInt(ends[0] + '') * 60 + parseInt(ends[1] + '')
-        const color = isSleepMode ? '#D0C0FB' : '#FF498366'
-        const startArc = isSleepMode ? startSeconds / 1440 * 2 * Math.PI - Math.PI / 2 : endSeconds / 1440 * 2 * Math.PI - Math.PI / 2
+    function getTargetArc() {
+        const { sleep, active } = health.windows.sleep_active
+        if (isSleepMode) {
+            return durationArc(sleep.target.start_timestamp, sleep.target.end_timestamp)
+        }
+        return durationArc(active.target.start_timestamp, active.target.end_timestamp)
+    }
 
-        const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
-        const eatCount = 1440 - fastCount
+    function getRealArc() {
+        const { sleep, active } = health.windows.sleep_active
+        if (isSleepMode) {
+            return durationArc(sleep.target.start_timestamp, new Date().getTime())
+        }
+        return durationArc(active.target.start_timestamp, new Date().getTime())
+    }
 
-        const durationArc = isSleepMode ? fastCount / 1440 * 2 * Math.PI : eatCount / 1440 * 2 * Math.PI
+    function targetRing() {
+        const color = isSleepMode ? '#D0C0FB' : '#FF498366'
+        const startArc = getArc()
+        const durationArc = getTargetArc()
 
         return {
             color,
@@ -70,45 +102,61 @@ export default function MainSleepActiveCard(props: { count: any,typeChanged:Func
     }
 
     function realRing() {
-
-        if (isSleepMode) {
-            if (isCurrentTimeInRange(startScheduleTime, endScheduleTime)) {
-                var starts: any = startScheduleTime.split(':')
-                const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
-
-                const color = MainColorType.sleep
-                const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
-                var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()
-
-                const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
-                const durationArc = fastCount / 1440 * 2 * Math.PI
-
-                return {
-                    color,
-                    startArc,
-                    durationArc
-                }
+        const color = isSleepMode?MainColorType.sleep:MainColorType.active
+        const { sleep,active } = health.windows.sleep_active
+        if (isSleepMode){
+            if (!isCurrentTimeInRange(sleep.schedule.start_time, sleep.schedule.end_time)){
+                return null
             }
         }
         else {
-            if (isCurrentTimeInRange(endScheduleTime, startScheduleTime)) {
-                var starts: any = endScheduleTime.split(':')
-                const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
-
-                const color = MainColorType.active
-                const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
-                var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()
-
-                const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
-                const durationArc = fastCount / 1440 * 2 * Math.PI
-
-                return {
-                    color,
-                    startArc,
-                    durationArc
-                }
+            if (!isCurrentTimeInRange(active.schedule.start_time, active.schedule.end_time)){
+                return null
             }
         }
+        return {
+            color: color,
+            startArc: getArc(),//-Math.PI / 2,
+            durationArc: getRealArc()
+        }
+        // if (isSleepMode) {
+        //     if (isCurrentTimeInRange(startScheduleTime, endScheduleTime)) {
+        //         var starts: any = startScheduleTime.split(':')
+        //         const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
+
+        //         const color = MainColorType.sleep
+        //         const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
+        //         var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()
+
+        //         const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
+        //         const durationArc = fastCount / 1440 * 2 * Math.PI
+
+        //         return {
+        //             color,
+        //             startArc,
+        //             durationArc
+        //         }
+        //     }
+        // }
+        // else {
+        //     if (isCurrentTimeInRange(endScheduleTime, startScheduleTime)) {
+        //         var starts: any = endScheduleTime.split(':')
+        //         const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
+
+        //         const color = MainColorType.active
+        //         const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
+        //         var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()
+
+        //         const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
+        //         const durationArc = fastCount / 1440 * 2 * Math.PI
+
+        //         return {
+        //             color,
+        //             startArc,
+        //             durationArc
+        //         }
+        //     }
+        // }
     }
 
     function ring() {
@@ -132,26 +180,6 @@ export default function MainSleepActiveCard(props: { count: any,typeChanged:Func
         return <Rings common={common} bgRing={bgRing} targetRing={targetRing()} realRing={realRing()} currentDot={currentDot} canvasId={'smal11lee'} />
     }
 
-    function isCurrentTimeInRange(start, end) {
-        // 获取当前时间
-        const now = new Date();
-        const currentTime = now.getHours() * 60 + now.getMinutes(); // 当前时间转换为分钟
-
-        // 将时间点转换为分钟
-        const [startHour, startMinute] = start.split(':').map(Number);
-        const [endHour, endMinute] = end.split(':').map(Number);
-        const startTime = startHour * 60 + startMinute; // 开始时间转换为分钟
-        const endTime = endHour * 60 + endMinute; // 结束时间转换为分钟
-
-        // 处理跨日的情况
-        if (endTime < startTime) {
-            return currentTime >= startTime || currentTime <= endTime;
-        }
-
-        // 判断当前时间是否在范围内
-        return currentTime >= startTime && currentTime <= endTime;
-    }
-
     return <View style={{ width: rpxToPx(750), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center' }}>
         <View style={{ position: 'relative', }}>
             {

src/features/health/MainSwiper.tsx

@@ -5,11 +5,15 @@ import MainFastEatCard from "./MainFastEatCard";
 import MainSleepActiveCard from "./MainSleepActiveCard";
 import { useState } from "react";
 import { WindowType } from "@/utils/types";
+import { useDispatch } from "react-redux";
+import { setTab } from "@/store/health";
 
 export default function MainSwiper(props: { count: number, pageChanged: Function, typeChanged: Function }) {
     const [current, setCurrent] = useState(0)
     const [type,setType] = useState(WindowType.day)
 
+    const dispatch = useDispatch()
+
     function tapScroll(index) {
         setCurrent(index)
     }
@@ -30,6 +34,7 @@ export default function MainSwiper(props: { count: number, pageChanged: Function
         }
 
         props.typeChanged(strType)
+        dispatch(setTab(page))
     }
 
     function typeChanged(e){

src/features/health/util.tsx

@@ -0,0 +1,33 @@
+
+export function isCurrentTimeInRange(start, end) {
+    // 获取当前时间
+    const now = new Date();
+    const currentTime = now.getHours() * 60 + now.getMinutes(); // 当前时间转换为分钟
+
+    // 将时间点转换为分钟
+    const [startHour, startMinute] = start.split(':').map(Number);
+    const [endHour, endMinute] = end.split(':').map(Number);
+    const startTime = startHour * 60 + startMinute; // 开始时间转换为分钟
+    const endTime = endHour * 60 + endMinute; // 结束时间转换为分钟
+
+    // 处理跨日的情况
+    if (endTime < startTime) {
+        return currentTime >= startTime || currentTime <= endTime;
+    }
+
+    // 判断当前时间是否在范围内
+    return currentTime >= startTime && currentTime <= endTime;
+}
+
+export 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;
+}
+
+export const durationArc = (start_time: number, end_time: number) => {
+    var duration = (end_time - start_time) / 1000;
+    return duration / (24 * 3600) * 2 * Math.PI;
+}

src/pages/clock/Clock.tsx

@@ -1,7 +1,7 @@
 import { View } from "@tarojs/components";
 import './Clock.scss'
 import ClockNew from "./ClockNew";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Taro, { useShareAppMessage } from "@tarojs/taro";
 import { useDispatch } from "react-redux";
 import { getInfoSuccess } from "@/store/user";
@@ -15,7 +15,7 @@ if (process.env.TARO_ENV == 'rn') {
 
 export default function Clock() {
     const dispatch = useDispatch();
-
+    const [loaded,setLoaded] = useState(false)
     const { t } = useTranslation()
     let navigation;
     if (useNavigation) {
@@ -57,6 +57,7 @@ export default function Clock() {
         if (userData) {
             dispatch(getInfoSuccess(JSON.parse(userData)));
         }
+        setLoaded(true)
     }
 
     async function loadRNCache() {
@@ -72,6 +73,7 @@ export default function Clock() {
         if (userData) {
             dispatch(getInfoSuccess(JSON.parse(userData)));
         }
+        setLoaded(true)
     }
 
     async function getStorage(key: string) {
@@ -82,6 +84,9 @@ export default function Clock() {
             return '';
         }
     }
+
+    if (!loaded)
+        return <View />
     
     return <View>
         <ClockNew />

src/pages/clock/ClockNew.tsx

@@ -10,19 +10,37 @@ import MainSwiper from "@/features/health/MainSwiper";
 import MainConsole from "@/features/health/MainConsole";
 import MainHistory from "@/features/health/MainHistory";
 import { WindowType } from "@/utils/types";
+import { windows } from "@/services/health";
+import { useDispatch, useSelector } from "react-redux";
+import health, { setWindows } from "@/store/health";
 
 export default function ClockNew() {
     const [count, setCount] = useState(0)
     const [scrollLeft, setScrollLeft] = useState(rpxToPx(750) * 0)
-    const [type,setType] = useState(WindowType.day)
+    const user = useSelector((state: any) => state.user);
+    const health = useSelector((state: any) => state.health);
+    const [type, setType] = useState(WindowType.day)
+    const dispatch = useDispatch()
 
 
     useEffect(() => {
         setInterval(() => {
             setCount(index => index + 1)
         }, 1000)
+
+
     }, [])
 
+    useEffect(() => {
+        getWindows();
+    }, [user.isLogin])
+
+    function getWindows() {
+        windows().then(res => {
+            dispatch(setWindows((res as any).windows))
+        })
+    }
+
     function tapScroll(index) {
         setScrollLeft(rpxToPx(750) * index)
     }
@@ -31,26 +49,29 @@ export default function ClockNew() {
         console.log(e.detail.scrollLeft)
     }
 
-    function pageChanged(index){
+    function pageChanged(index) {
 
     }
 
-    function typeChanged(str){
+    function typeChanged(str) {
 
     }
 
     function detail() {
+        if (!health.windows){
+            return <View />
+        }
         return <View>
-            <MainSwiper count={count} pageChanged={pageChanged} typeChanged={typeChanged}/>
-            <MainConsole type={type}/>
-            <MainHistory type={type}/>
-            <View style={{height:200}}/>
+            <MainSwiper count={count} pageChanged={pageChanged} typeChanged={typeChanged} />
+            <MainConsole type={type} />
+            <MainHistory type={type} />
+            <View style={{ height: 200 }} />
         </View>
     }
     //https://blog.csdn.net/weixin_43525284/article/details/130182218
-    return <View style={{flex:1}}>
+    return <View style={{ flex: 1 }}>
         {
-            process.env.TARO_ENV == 'weapp' ? detail() : <ScrollView style={{flex:1}}>
+            process.env.TARO_ENV == 'weapp' ? detail() : <ScrollView style={{ flex: 1 }}>
                 {
                     detail()
                 }

src/services/health.tsx

@@ -1,4 +1,4 @@
-import { API_HEALTH_LABELS, API_HEALTH_RECORD, API_HEALTH_SCHEDULES, API_HEALTH_STREAKS } from "./http/api";
+import { API_HEALTH_LABELS, API_HEALTH_RECORD, API_HEALTH_SCHEDULES, API_HEALTH_STREAKS, API_HEALTH_WINDOWS } from "./http/api";
 import { request } from "./http/request";
 
 export const getLabels = (params) => {
@@ -90,4 +90,17 @@ export const streaks = (params:any)=>{
             reject(e)
         })
     })
+}
+
+export const windows = ()=>{
+    return new Promise((resolve, reject) => {
+        request({
+            url: API_HEALTH_WINDOWS, method: 'GET', data: {}
+        }).then(res => {
+            resolve(res);
+            // dispatch(loginSuccess(res));
+        }).catch(e => {
+            reject(e)
+        })
+    })
 }

src/services/http/api.js

@@ -100,3 +100,4 @@ export const API_HEALTH_SCHEDULES = `${baseUrl}/api/health/schedules`
 export const API_HEALTH_LABELS = `${baseUrl}/api/health/labels`
 export const API_HEALTH_RECORD = `${baseUrl}/api/health/records`
 export const API_HEALTH_STREAKS = `${baseUrl}/api/health/streaks`
+export const API_HEALTH_WINDOWS = `${baseUrl}/api/health/windows`

src/store/health.tsx

@@ -0,0 +1,37 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+interface HealthState {
+    windows: any;
+    mode: string;
+    selTab:number;
+}
+
+const initialState: HealthState = {
+    windows: null,
+    mode: 'DAY',
+    selTab:0
+}
+
+const healthSlice = createSlice({
+    name: 'health',
+    initialState,
+    reducers: {
+
+        setWindows(state, action) {
+            state.windows = action.payload
+        },
+        setMode(state, action) {
+            state.mode = action.payload
+        },
+        setTab(state,action){
+            state.selTab = action.payload
+        }
+
+    }
+})
+
+
+
+
+export const { setWindows, setMode,setTab } = healthSlice.actions;
+export default healthSlice.reducer;

src/store/store.tsx

@@ -13,6 +13,7 @@ import nightReducer from './night';
 import ringReducer from './ring';
 import targetReducer from './set_target';
 import accessReducer from './access';
+import healthReducer from './health'
 
 const store = configureStore({
   reducer: {
@@ -31,7 +32,8 @@ const store = configureStore({
     day: dayReducer,
     ring: ringReducer,
     target: targetReducer,
-    access: accessReducer
+    access: accessReducer,
+    health: healthReducer
   },
 });