taro/src/features/trackTimeDuration/components/WeekCalendarItem.tsx

import { View, Text } from "@tarojs/components";
import './WeekCalendarItem.scss'
import { rpxToPx } from "@/utils/tools";
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" style={{width:parseInt(rpxToPx(658)+'')}}>
        <View className="chart_top_week">
            <Text className="chart_week_text">周日</Text>
            <Text className="chart_week_text">周一</Text>
            <Text className="chart_week_text">周二</Text>
            <Text className="chart_week_text">周三</Text>
            <Text className="chart_week_text">周四</Text>
            <Text className="chart_week_text">周五</Text>
            <Text className="chart_week_text">周六</Text>
        </View>
        <View className="chart_detail">
            <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>
            <Text className="chart_week_text">周二</Text>
            <Text className="chart_week_text">周三</Text>
            <Text className="chart_week_text">周四</Text>
            <Text className="chart_week_text">周五</Text>
            <Text className="chart_week_text">周六</Text>
            <Text className="chart_week_text">周日</Text>
        </View>
    </View>
}