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";

let timer
export default function WeekCalendarItem(props: { data: any, isCurrentWeek: boolean }) {
    const [charts, setCharts] = useState([])
    const [showCurrentTime, setShowCurrentTime] = useState(false)
    const [position, setPosition] = useState({ left: 0, top: 0 })
    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)

        return ()=>{
            timer && clearInterval(timer)
        }
    }, [])

    useEffect(() => {
        if (timer)
            clearInterval(timer)
        if (props.isCurrentWeek) {
            timer = setInterval(()=>{
                getPosition()
            },60000)
            getPosition()
        }
        setShowCurrentTime(props.isCurrentWeek)
    }, [props.isCurrentWeek])

    function getPosition() {
        var now = new Date().getTime()
        var start = props.data.start
        var index = Math.floor((now - start) / (3600 * 24 * 1000))
        var left = (now - start) % (3600 * 24 * 1000)
        var top = left / (3600 * 24 * 1000) * 400
        setPosition({
            left: rpxToPx(94 * index),
            top: rpxToPx(top)
        })
    }

    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 style={{ height: parseInt(rpxToPx(60) + '') }}>
            <View className="chart_top_week">
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + '') }}>周日</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + '') }}>周一</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + '') }}>周二</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + '') }}>周三</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + '') }}>周四</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + '') }}>周五</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + '') }}>周六</Text>
            </View>
        </View>

        <View className="chart_detail">
            {
                showCurrentTime && <View style={{
                    position: 'absolute',
                    left: position.left,
                    top: position.top,
                    width: rpxToPx(94),
                    height: 1,
                    backgroundColor: 'red'
                }} />
            }
            <View className="verticalLine" style={{ left: 0 }} />
            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 1) + '') }} />
            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 2) + '') }} />
            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 3) + '') }} />
            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 4) + '') }} />
            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 5) + '') }} />
            <View className="verticalLine" style={{ left: parseInt(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 style={{ height: parseInt(rpxToPx(60) + '') }}>
            <View className="chart_bottom_week">
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + '') }}>周一</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + '') }}>周二</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + '') }}>周三</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + '') }}>周四</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + '') }}>周五</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + '') }}>周六</Text>
                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + '') }}>周日</Text>
            </View>
        </View>
    </View>
}