update

src/features/health/HistoryFastItem.tsx

@@ -1,9 +1,10 @@
 import { View,Text } from "@tarojs/components";
 import './History.scss'
 import { TimeFormatter } from "@/utils/time_format";
-import Rings from "../trackTimeDuration/components/Rings";
+import Rings,{RealRing} from "../trackTimeDuration/components/Rings";
 import { getBgRing, getCommon } from "../trackTimeDuration/hooks/RingData";
 import { MainColorType } from "@/context/themes/color";
+import { durationArc, startArc } from "@/utils/ring_utils";
 
 export default function HistoryFastItem(props:{data:any,index:number}){
 
@@ -22,8 +23,16 @@ export default function HistoryFastItem(props:{data:any,index:number}){
         common.radius = 20;
         common.lineWidth = 5;
         var bgRing = getBgRing()
+
+        const {start_timestamp,end_timestamp} = props.data.events[0].real
+
+        const realRingBig: RealRing = {
+            color: MainColorType.fast,
+            startArc: startArc(start_timestamp),
+            durationArc: durationArc(start_timestamp,end_timestamp)
+        }
         
-        return <Rings common={common} bgRing={bgRing} canvasId={'fast'+props.index}  />
+        return <Rings common={common} bgRing={bgRing} realRing={realRingBig} canvasId={'fast'+props.index}  />
     }
     
     return <View className="history_item">

src/features/health/MainConsole.tsx

@@ -1,7 +1,12 @@
+import { WindowType } from "@/utils/types";
 import { View } from "@tarojs/components";
+import { useEffect } from "react";
 
-export default function MainConsole(){
-    return <View>
+export default function MainConsole(props: { type: WindowType }) {
+    useEffect(() => { 
         
+    }, [props.type])
+    return <View>
+
     </View>
 }

src/features/health/MainDayNightCard.tsx

@@ -11,8 +11,9 @@ import momentT from 'moment';
 import { MainColorType } from "@/context/themes/color";
 import { useSelector } from "react-redux";
 import Calendar from "@/features/health/calendar";
+import { WindowType } from "@/utils/types";
 
-export default function MainDayNightCard(props: { count: number }) {
+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);
@@ -119,7 +120,9 @@ export default function MainDayNightCard(props: { count: number }) {
     }
 
     function switchMode() {
-        setIsDayMode(!isDayMode)
+        const mode = !isDayMode
+        setIsDayMode(mode)
+        props.typeChanged(mode ? WindowType.day : WindowType.night)
     }
 
     function timeStatus() {
@@ -131,41 +134,48 @@ export default function MainDayNightCard(props: { count: number }) {
         }
         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>
+    // return <ScrollView className="scroll-view" scrollY>
+    //     <View className="content">
+    //         <View style={{ height: 400, backgroundColor: '#f0f0f0' }}>
+    //             <Calendar year={2024} month={8} />
+    //         </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}/>
-    //     <View>Page Day Night</View>
-    //     <View style={{ position: 'relative' }}>
-    //         {
-    //             ring()
-    //         }
-    //         <View className="ring_center">
-    //             <View>{isDayMode?'Daylight':'Night'}</View>
-    //             <View>{timeStatus()}</View>
-    //             <Text className="time1" style={{color:'#000'}}>{formatTime('HH:mm:ss')}</Text>
-    //             <Text className="date1">{global.language == 'en' ? formatTime('dddd, MMM D') : formatTime('MMMD日 dddd')}</Text>
+    //         <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>
-    //     <Text onClick={switchMode}>Switch</Text>
-    //     <View className="sticky"></View>
-    //     <View style={{height:200}}/>
-    // </View>
+    // </ScrollView>
+
+    return <View style={{ width: rpxToPx(750), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
+        {/* <Calendar year={2024} month={8}/> */}
+        <View style={{ position: 'relative' }}>
+            {
+                ring()
+            }
+            <View className="ring_center">
+                <View>{isDayMode ? 'Daylight' : 'Night'}</View>
+                <View>{timeStatus()}</View>
+                <Text className="time1" style={{ color: '#000' }}>{formatTime('HH:mm:ss')}</Text>
+                <Text className="date1">{global.language == 'en' ? formatTime('dddd, MMM D') : formatTime('MMMD日 dddd')}</Text>
+            </View>
+        </View>
+        <Text onClick={switchMode}>Switch</Text>
+        <View className="sticky"></View>
+        <View style={{ height: 200 }} />
+    </View>
 }

src/features/health/MainFastEatCard.tsx

@@ -18,6 +18,7 @@ import showAlert from "@/components/basic/Alert";
 import showActionSheet from "@/components/basic/ActionSheet";
 import { records } from "@/services/health";
 import MainHistory from "./MainHistory";
+import { WindowType } from "@/utils/types";
 let useNavigation;
 
 let Linking, PushNotification;
@@ -35,7 +36,7 @@ if (process.env.TARO_ENV == 'rn') {
     checkNotification = require('@/utils/native_permission_check').checkNotification;
     useActionSheet = require('@expo/react-native-action-sheet').useActionSheet
 }
-export default function MainFastEatCard(props: { count: any }) {
+export default function MainFastEatCard(props: { count: any, typeChanged: Function }) {
     const [isFastMode, setIsFastMode] = useState(true)
 
     const [showModal, setShowModal] = useState(false)
@@ -343,7 +344,9 @@ export default function MainFastEatCard(props: { count: any }) {
     }
 
     function switchMode() {
-        setIsFastMode(!isFastMode)
+        const mode = !isFastMode
+        setIsFastMode(mode)
+        props.typeChanged(mode ? WindowType.fast : WindowType.eat)
     }
 
     function getFastStatus() {
@@ -624,8 +627,8 @@ export default function MainFastEatCard(props: { count: any }) {
     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 onClick={() => { setShowModal(true) }}>Fast Eat Night{props.count}</View>
+        <View style={{ height: 40 }} /> */}
         <View style={{ position: 'relative', }}>
             {
                 ring()

src/features/health/MainHistory.tsx

@@ -6,6 +6,7 @@ import HistoryActiveItem from "./HistoryActiveItem";
 import HistorySleepItem from "./HistorySleepItem";
 import { records } from "@/services/health";
 import './History.scss'
+import Calendar from "./calendar";
 
 export default function MainHistory(props: { type: string }) {
     const [list, setList] = useState<any>([])
@@ -17,7 +18,7 @@ export default function MainHistory(props: { type: string }) {
 
     useEffect(() => {
         loadData(1)
-    }, [])
+    }, [props.type])
 
     function refresh() {
         loadData(1)
@@ -53,6 +54,7 @@ export default function MainHistory(props: { type: string }) {
         return <View />
 
     return <View style={{display:'flex',flexDirection:'column'}}>
+        <Calendar year={2024} month={8}/>
         {
             list.map((item, index) => {
                 return <View key={index}>

src/features/health/MainSleepActiveCard.tsx

@@ -8,8 +8,9 @@ import moment from 'moment-timezone'
 import { MainColorType } from "@/context/themes/color";
 import { useSelector } from "react-redux";
 import { sleepWindow } from "@/services/trackTimeDuration";
+import { WindowType } from "@/utils/types";
 
-export default function MainSleepActiveCard(props: { count: any }) {
+export default function MainSleepActiveCard(props: { count: any,typeChanged:Function }) {
     const [isSleep, setIsSleep] = useState(true)
     const [isSleepMode, setIsSleepMode] = useState(true)
 
@@ -30,7 +31,9 @@ export default function MainSleepActiveCard(props: { count: any }) {
     }
 
     function switchMode() {
-        setIsSleepMode(!isSleepMode)
+        var mode = !isSleepMode;
+        setIsSleepMode(mode)
+        props.typeChanged(mode?WindowType.sleep:WindowType.active)
     }
 
     const common: RingCommon = {
@@ -150,7 +153,6 @@ export default function MainSleepActiveCard(props: { count: any }) {
     }
 
     return <View style={{ width: rpxToPx(750), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center' }}>
-        <View>Sleep Active</View>
         <View style={{ position: 'relative', }}>
             {
                 ring()

src/features/health/MainSwiper.tsx

@@ -1,8 +1,58 @@
-import { View } from "@tarojs/components";
+import { View, Swiper, SwiperItem } from "@tarojs/components";
 import './MainCard.scss';
+import MainDayNightCard from "./MainDayNightCard";
+import MainFastEatCard from "./MainFastEatCard";
+import MainSleepActiveCard from "./MainSleepActiveCard";
+import { useState } from "react";
+import { WindowType } from "@/utils/types";
 
-export default function MainSwiper(){
-    return <View>
+export default function MainSwiper(props: { count: number, pageChanged: Function, typeChanged: Function }) {
+    const [current, setCurrent] = useState(0)
+    const [type,setType] = useState(WindowType.day)
+
+    function tapScroll(index) {
+        setCurrent(index)
+    }
+
+    function pageChanged(e) {
+        const page = e.detail.current
+        props.pageChanged(page)
+
+        var strType = WindowType.day
+        if (page == 0){
+            strType = WindowType.day
+        }
+        else if (page == 1){
+            strType = WindowType.fast
+        }
+        else {
+            strType = WindowType.sleep
+        }
 
+        props.typeChanged(strType)
+    }
+
+    function typeChanged(e){
+        setType(e)
+        props.typeChanged(e)
+    }
+
+    return <View>
+        <View className="tabs">
+            <View className="item" onClick={() => tapScroll(0)} > tab 0</View>
+            <View className="item" onClick={() => tapScroll(1)}>tab 1</View>
+            <View className="item" onClick={() => tapScroll(2)}>tab 2</View>
+        </View>
+        <Swiper style={{ height: 400 }} onChange={pageChanged} current={current}>
+            <SwiperItem>
+                <MainDayNightCard count={props.count} typeChanged={typeChanged} />
+            </SwiperItem>
+            <SwiperItem>
+                <MainFastEatCard count={props.count} typeChanged={typeChanged} />
+            </SwiperItem>
+            <SwiperItem>
+                <MainSleepActiveCard count={props.count} typeChanged={typeChanged} />
+            </SwiperItem>
+        </Swiper>
     </View>
 }

src/features/health/calendar.tsx

@@ -3,6 +3,7 @@ import './calendar.scss'
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { rpxToPx } from "@/utils/tools";
+import { streaks } from "@/services/health";
 
 export default function Calendar(props: { year: number, month: number }) {
     const weeks = ['日', '一', '二', '三', '四', '五', '六']
@@ -15,12 +16,16 @@ export default function Calendar(props: { year: number, month: number }) {
     }, [])
 
     function loadData() {
+
         const firstDay = new Date(props.year, props.month - 1, 1);
         const firstDayOfWeek = firstDay.getDay();
         const spaceCount = firstDayOfWeek > indexBeginWeek ? firstDayOfWeek - indexBeginWeek : firstDayOfWeek - indexBeginWeek + 7
         setSpaces(new Array(spaceCount).fill(''))
 
 
+        
+
+
         // 创建一个 Date 对象来获取该月的最后一天
         const lastDay = new Date(props.year, props.month, 0); // 0 表示上一个月的最后一天
         const totalDays = lastDay.getDate();
@@ -29,20 +34,52 @@ export default function Calendar(props: { year: number, month: number }) {
             var obj: any = {
                 day: i
             }
-            if (i == 1 || i == 10 || i == 15) {
-                obj.begin = true
-            }
-            if (i == 2 || i == 11 || i == 16) {
-                obj.right = true
-            }
+            // if (i == 1 || i == 10 || i == 15) {
+            //     obj.begin = true
+            // }
+            // if (i == 2 || i == 11 || i == 16) {
+            //     obj.right = true
+            // }
 
-            if (i == 22) {
-                obj.full = true
-            }
+            // if (i == 22) {
+            //     obj.full = true
+            // }
 
             list.push(obj)
         }
         setDays(list)
+
+
+        streaks({
+            category:'FAST',
+            month:202408
+        }).then(res=>{
+            const array = (res as any).streaks
+            for (var i=0;i<list.length;i++){
+                var obj = list[i]
+                var strMonth = props.month<10?'0'+props.month:props.month+''
+                var strDay = obj.day<10?'0'+obj.day:obj.day
+
+                const d = parseInt(props.year+''+strMonth+strDay)
+                for (var j=0;j<array.length;j++){
+                    const streak = array[j]
+                    if (d==streak.start_date && streak.start_date==streak.end_date){
+                        obj.full = true
+                    }
+                    else if (d == streak.start_date && streak.start_date<streak.end_date){
+                        obj.begin = true
+                    }
+                    else if (d == streak.end_date && streak.start_date<streak.end_date){
+                        obj.right = true
+                    }
+                    else if (streak.start_date<d && d<streak.end_date){
+                        obj.center = true
+                    }
+                }
+            }
+        }).catch(e=>{
+
+        })
     }
 
     function itemClass(item) {

src/pages/clock/ClockNew.tsx

@@ -6,10 +6,15 @@ import MainFastEatCard from "@/features/health/MainFastEatCard";
 import MainSleepActiveCard from "@/features/health/MainSleepActiveCard";
 import TabBar from "@/components/navigation/TabBar";
 import { rpxToPx } from "@/utils/tools";
+import MainSwiper from "@/features/health/MainSwiper";
+import MainConsole from "@/features/health/MainConsole";
+import MainHistory from "@/features/health/MainHistory";
+import { WindowType } from "@/utils/types";
 
 export default function ClockNew() {
     const [count, setCount] = useState(0)
     const [scrollLeft, setScrollLeft] = useState(rpxToPx(750) * 0)
+    const [type,setType] = useState(WindowType.day)
 
 
     useEffect(() => {
@@ -25,15 +30,33 @@ export default function ClockNew() {
     function scroll(e) {
         console.log(e.detail.scrollLeft)
     }
-    //https://blog.csdn.net/weixin_43525284/article/details/130182218
-    return <View>
 
-        {/* <ScrollView scrollX={true} enableFlex={true} pagingEnabled={true} scrollWithAnimation={true} style={{ width: 200, height: 200, display: 'flex', flexDirection: 'row', overflow: 'hidden' }} enhanced>
-            <View style={{ width: 200, height: 200, backgroundColor: 'red', flexShrink: 0, display: 'flex' }} />
-            <View style={{ width: 200, height: 200, backgroundColor: 'blue', flexShrink: 0, display: 'flex' }} />
-            <View style={{ width: 200, height: 200, backgroundColor: 'yellow', flexShrink: 0, display: 'flex' }} />
-        </ScrollView> */}
-        <View className="tabs">
+    function pageChanged(index){
+
+    }
+
+    function typeChanged(str){
+
+    }
+
+    function detail() {
+        return <View>
+            <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}}>
+        {
+            process.env.TARO_ENV == 'weapp' ? detail() : <ScrollView style={{flex:1}}>
+                {
+                    detail()
+                }
+            </ScrollView>
+        }
+        {/* <View className="tabs">
             <View className="item" onClick={() => tapScroll(0)}> tab 0</View>
             <View className="item" onClick={() => tapScroll(1)}>tab 1</View>
             <View className="item" onClick={() => tapScroll(2)}>tab 2</View>
@@ -60,18 +83,7 @@ export default function ClockNew() {
 
 
 
-        </ScrollView>
-        {/* <Swiper style={{height:500}}>
-            <SwiperItem>
-                <MainDayNightCard />
-            </SwiperItem>
-            <SwiperItem>
-                <MainFastEatCard count={count}/>
-            </SwiperItem>
-            <SwiperItem>
-                <MainSleepActiveCard />
-            </SwiperItem>
-        </Swiper> */}
+        </ScrollView> */}
         <TabBar index={0} />
     </View>
 }

src/services/health.tsx

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

src/services/http/api.js

@@ -99,3 +99,4 @@ export const API_EAT_MEALS = `${baseUrl}/api/eat/meals`
 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`

src/utils/ring_utils.ts

@@ -0,0 +1,12 @@
+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/utils/types.ts

@@ -73,4 +73,13 @@ export enum WorkoutType {
     normal = 'normal',
     number = 'number',
     multi = 'multi'
+}
+
+export enum WindowType {
+    eat = 'eat',
+    fast = 'fast',
+    day = 'day',
+    night = 'night',
+    sleep = 'sleep',
+    active = 'active'
 }