update

src/features/trackTimeDuration/components/IndexItem.tsx

@@ -154,7 +154,7 @@ export default function Component(props: { type: string, data: any, time: any })
                 else if (record.status == 'WAIT_FOR_START' || record.status == 'ONGOING1') {
                     realRing = getSchedule(record, false, true)
                     var currentDot = getDot(record, false)
-                    if (record.status == 'WAIT_FOR_START' && dotIsOuterRange(true, record.sleep)) {
+                    if (dotIsOuterRange(true, record.sleep)) {
                         currentDot.color = ColorType.ring
                     }
 

src/features/trackTimeDuration/components/SetSchedule.rn.tsx

@@ -131,6 +131,7 @@ export default function Component() {
             }).then(res => {
                 setBtnDisable(false)
                 global.checkData()
+                global.indexPageRefresh()
                 if (process.env.TARO_ENV == 'weapp') {
                     Taro.navigateBack({ delta: 3 })
                 }

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

@@ -195,6 +195,7 @@ export default function Component() {
       dispatch(setStep('fast'))
       global.checkData()
       Taro.navigateBack({ delta: 4 })
+      global.indexPageRefresh()
     }).catch(e => {
       setBtnDisable(false)
     })

src/features/trackTimeDuration/components/WeekCalendar.tsx

@@ -3,26 +3,52 @@ import './WeekCalendar.scss'
 import { useState } from "react";
 import { ColorType } from "@/context/themes/color";
 import WeekCalendarItem from "./WeekCalendarItem";
+import { rpxToPx } from "@/utils/tools";
+import { TimeFormatter } from "@/utils/time_format";
 export default function WeekCalendar(props: { calendars: any }) {
     const [current, setCurrent] = useState(props.calendars.length - 1)
+    const [summary, setSummary] = useState(props.calendars[props.calendars.length - 1].summary_stats)
+    const [calendarData, setCalendarData] = useState(props.calendars[props.calendars.length - 1])
+
+    function onScroll(e) {
+        var x = e.detail.scrollLeft
+        var page = parseInt(x / rpxToPx(586) + '')
+        console.log(x)
+        if (current != page) {
+            setCurrent(page)
+            setSummary(props.calendars[page].summary_stats)
+            setCalendarData(props.calendars[page])
+            console.log(page)
+        }
+
+    }
+
+    function getDate(timestamp) {
+        var date = new Date(timestamp)
+        return `${date.getMonth() + 1}月${date.getDate()}日`
+    }
+
     return <View>
         <View className="calendar_summary_top">
             <View className="calendar_summary_item">
                 <Text className="calendar_summary_title">断食平均</Text>
-                <Text className="calendar_summary_value" style={{ color: ColorType.fast }}>123</Text>
+                <Text className="calendar_summary_value" style={{ color: ColorType.fast }}>{summary.fast.avg == 0 ? '-' : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.fast.avg)}</Text>
             </View>
             <View className="calendar_summary_item">
                 <Text className="calendar_summary_title">睡眠平均</Text>
-                <Text className="calendar_summary_value" style={{ color: ColorType.sleep }}>123</Text>
+                <Text className="calendar_summary_value" style={{ color: ColorType.sleep }}>{summary.sleep.avg == 0 ? '-' : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.sleep.avg)}</Text>
             </View>
         </View>
-        <Text className="calendar_summary_desc">2月25日 周日中午 - 3月3日 周日中午</Text>
+        <Text className="calendar_summary_desc">{getDate(calendarData.start)} 周日中午 - {getDate(calendarData.end)} 周日中午</Text>
         <View className="chart_bg">
             <View className="chart_content_bg" />
-            <ScrollView className="chart_scroll" scrollX pagingEnabled={true} enableFlex enhanced>
+            <ScrollView className="chart_scroll"
+                onScroll={onScroll}
+                scrollX pagingEnabled={true}
+                enableFlex enhanced>
                 {
                     props.calendars.map((item) => {
-                        return <WeekCalendarItem />
+                        return <WeekCalendarItem data={item} />
                     })
                 }
 

src/features/trackTimeDuration/components/WeekCalendarItem.scss

@@ -3,6 +3,7 @@
     flex-direction: column;
     height: 520px;
     width: 658px;
+    // background-color: red;
     flex-shrink: 0;
 }
 
@@ -55,3 +56,27 @@
     transform: scaleY(0.5);
     height: 2px;
 }
+
+.lineContent{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 94px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.lineBgView{
+    position: relative;
+    height: 400px;
+    width: 20rpx;
+}
+
+.detailLine{
+    position: absolute;
+    left: 0;
+    width: 20rpx;
+    min-height: 2px;
+}

src/features/trackTimeDuration/components/WeekCalendarItem.tsx

@@ -1,7 +1,68 @@
 import { View, Text } from "@tarojs/components";
 import './WeekCalendarItem.scss'
 import { rpxToPx } from "@/utils/tools";
-export default function WeekCalendarItem() {
+import { useEffect, useState } from "react";
+import { ColorType } from "@/context/themes/color";
+export default function WeekCalendarItem(props: { data: any }) {
+    const [charts, setCharts] = useState([])
+    useEffect(() => {
+        var array: any = []
+        for (var i = 0; i < 7; i++) {
+            var start = props.data.start + 24 * 3600 * 1000 * i
+            var end = props.data.start + (24 * 3600 * 1000) * (i + 1)
+            var fasts: any = []
+            var sleeps: any = []
+            array.push({
+                start,
+                end,
+                fasts,
+                sleeps
+            })
+            props.data.list.map((item) => {
+                var isFast = item.scenario == 'FAST'
+                var range = getIntersection(start, end, item.real_start_time, item.real_end_time)
+                if (range) {
+                    var begin = (range[0] - start) / (24 * 3600 * 1000)
+                    var height = (range[1] - range[0]) / (24 * 3600 * 1000)
+                    if (isFast) {
+                        fasts.push({
+                            begin,
+                            height
+                        })
+                    }
+                    else {
+                        sleeps.push({
+                            begin, height
+                        })
+                    }
+                }
+            })
+        }
+        setCharts(array)
+    }, [])
+
+    function getIntersection(start1, end1, start2, end2) {
+        // 确保 start1 小于等于 end1，start2 小于等于 end2
+        if (start1 > end1) {
+            [start1, end1] = [end1, start1];
+        }
+        if (start2 > end2) {
+            [start2, end2] = [end2, start2];
+        }
+
+        // 计算相交的时间戳
+        var intersectionStart = Math.max(start1, start2);
+        var intersectionEnd = Math.min(end1, end2);
+
+        // 检查是否存在相交时间戳
+        if (intersectionStart <= intersectionEnd) {
+            // 返回相交的时间戳
+            return [intersectionStart, intersectionEnd];
+        } else {
+            // 不存在相交时间戳
+            return null;
+        }
+    }
     return <View className="chart_content">
         <View className="chart_top_week">
             <Text className="chart_week_text">周日</Text>
@@ -13,15 +74,51 @@ export default function WeekCalendarItem() {
             <Text className="chart_week_text">周六</Text>
         </View>
         <View className="chart_detail">
-            <View className="verticalLine" style={{left:rpxToPx(94)}}/>
-            <View className="verticalLine" style={{left:rpxToPx(94*2)}}/>
-            <View className="verticalLine" style={{left:rpxToPx(94*3)}}/>
-            <View className="verticalLine" style={{left:rpxToPx(94*4)}}/>
-            <View className="verticalLine" style={{left:rpxToPx(94*5)}}/>
-            <View className="verticalLine" style={{left:rpxToPx(94*6)}}/>
-            <View className="horizontalLine" style={{top:rpxToPx(100),backgroundColor:'#262626'}}/>
-            <View className="horizontalLine" style={{top:rpxToPx(200),backgroundColor:'#383838'}}/>
-            <View className="horizontalLine" style={{top:rpxToPx(300),backgroundColor:'#262626'}}/>
+            <View className="verticalLine" style={{ left: 0 }} />
+            <View className="verticalLine" style={{ left: rpxToPx(94) }} />
+            <View className="verticalLine" style={{ left: rpxToPx(94 * 2) }} />
+            <View className="verticalLine" style={{ left: rpxToPx(94 * 3) }} />
+            <View className="verticalLine" style={{ left: rpxToPx(94 * 4) }} />
+            <View className="verticalLine" style={{ left: rpxToPx(94 * 5) }} />
+            <View className="verticalLine" style={{ left: rpxToPx(94 * 6) }} />
+            <View className="horizontalLine" style={{ top: rpxToPx(100), backgroundColor: '#262626' }} />
+            <View className="horizontalLine" style={{ top: rpxToPx(200), backgroundColor: '#383838' }} />
+            <View className="horizontalLine" style={{ top: rpxToPx(300), backgroundColor: '#262626' }} />
+            {
+                charts.map((item, index) => {
+                    return <View className="lineContent" style={{ left: rpxToPx(94 * index) }}>
+                        {
+                            (item as any).fasts.length > 0 &&
+                            <View className="lineBgView">
+                                {
+                                    (item as any).fasts.map(obj => {
+                                        return <View className="detailLine" style={{
+                                            backgroundColor: ColorType.fast,
+                                            top: rpxToPx(obj.begin * 400),
+                                            height: rpxToPx(obj.height * 400)
+                                        }} />
+                                    })
+                                }
+                            </View>
+                        }
+
+                        {
+                            (item as any).sleeps.length > 0 &&
+                            <View className="lineBgView">
+                                {
+                                    (item as any).sleeps.map(obj => {
+                                        return <View className="detailLine" style={{
+                                            backgroundColor: ColorType.sleep,
+                                            top: rpxToPx(obj.begin * 400),
+                                            height: rpxToPx(obj.height * 400)
+                                        }} />
+                                    })
+                                }
+                            </View>
+                        }
+                    </View>
+                })
+            }
         </View>
         <View className="chart_bottom_week">
             <Text className="chart_week_text">周一</Text>

src/features/trackTimeDuration/hooks/RingData.tsx

@@ -91,9 +91,12 @@ export const dotIsOuterRange = (isTargetRange: boolean, scheduleData?: any, dayL
         var scheduleStart = new Date(scheduleData!.target_start_time)
         var scheduleEnd = new Date(scheduleData!.target_end_time)
         var startMinute = scheduleStart.getHours() * 60 + scheduleStart.getMinutes()
-        var endMinute = scheduleEnd.getHours() * 60 + scheduleStart.getMinutes()
-        if (endMinute<startMinute){
-            endMinute+=1440
+        var endMinute = scheduleEnd.getHours() * 60 + scheduleEnd.getMinutes()
+        if (minutes < startMinute) {
+            minutes += 1440
+        }
+        if (endMinute < startMinute) {
+            endMinute += 1440
         }
         if (startMinute <= minutes && endMinute > minutes) {
             return false;

src/pages/clock/Index.tsx

@@ -128,8 +128,9 @@ export default function Page() {
     function getRecords() {
         var timestamp = TimeFormatter.getMondayTimestamp()
         var list: any = []
+        var offset = 12*3600*1000
         for (var i = 0; i < 7; i++) {
-            list.push(`${i},${timestamp - 7 * 24 * 3600 * 1000 * i},${timestamp - 7 * 24 * 3600 * 1000 * i + 7 * 24 * 3600 * 1000}`)
+            list.push(`${i},${timestamp - 7 * 24 * 3600 * 1000 * i-offset},${timestamp - 7 * 24 * 3600 * 1000 * i + 7 * 24 * 3600 * 1000-offset}`)
             // list.push({
             //     start:timestamp-7*24*3600*1000*i,
             //     end:timestamp-7*24*3600*1000*i+24*3600*100,
@@ -137,7 +138,7 @@ export default function Page() {
             // })
         }
         clockSummaryStats({ times: list.join(';') }).then(res => {
-            setCalendars((res as any).data)
+            setCalendars((res as any).data.reverse())
         })
         // clockSummaryStats({start:new Date().getTime()-7*24*3600*1000,end:new Date().getTime()}).then(res => { })
     }