taro/src/_health/components/target_progress.tsx

import { View, Text } from '@tarojs/components'
import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import './target_progress.scss'
import { MainColorType } from '@/context/themes/color';
import { durationArc, startArc } from '@/utils/ring_utils';
import { rpxToPx } from '@/utils/tools';

export default function TargetProgress(props: {
    showLine?: boolean,
    color?: string,
    startTimestamp?: number,
    endTimerstamp?: number,
    canvasId?: string,
    showRing: boolean,
    icon?: any,
    desc?: string,

    //双环
    doubleRing?: boolean,
    first?: any,
    second?: any,
    onClick?: any
}) {

    function ring() {
        const common: RingCommon = {
            useCase: 'ChooseScenario',
            radius: 12,
            lineWidth: 6,
            isFast: true,
            status: 'WAIT_FOR_START'
        }

        const bgRing: BgRing = {
            color: MainColorType.ringBg
        }

        const realRing = {
            hideBg: true,
            color: props.color ?? MainColorType.fast,
            startArc: startArc(props.startTimestamp ?? 0),
            durationArc: durationArc(props.startTimestamp ?? 0, props.endTimerstamp ?? 0)
        }
        return <Rings common={common} bgRing={bgRing} realRing={realRing} canvasId={props.canvasId ?? 'helloworld'} />
    }

    function ring1() {
        const common: RingCommon = {
            useCase: 'ChooseScenario',
            radius: 12.5,
            lineWidth: 5,
            isFast: true,
            status: 'WAIT_FOR_START'
        }

        const bgRing: BgRing = {
            color: MainColorType.ringBg
        }

        const realRing = {
            hideBg: true,
            color: MainColorType.fast,
            startArc: startArc(props.first.window_range.start_timestamp ?? 0),
            durationArc: durationArc(props.first.window_range.start_timestamp ?? 0, props.first.window_range.end_timestamp ?? 0)
        }
        return <Rings common={common} bgRing={bgRing} realRing={realRing} canvasId={props.canvasId + 'big' ?? 'helloworld'} />
    }

    function ring2() {
        const common: RingCommon = {
            useCase: 'ChooseScenario',
            radius: 6.5,
            lineWidth: 5,
            isFast: true,
            status: 'WAIT_FOR_START'
        }

        const bgRing: BgRing = {
            color: MainColorType.ringBg
        }

        const realRing = {
            hideBg: true,
            color: MainColorType.sleep,
            startArc: startArc(props.second.window_range.start_timestamp ?? 0),
            durationArc: durationArc(props.second.window_range.start_timestamp ?? 0, props.second.window_range.end_timestamp ?? 0)
        }
        return <Rings common={common} bgRing={bgRing} realRing={realRing} canvasId={props.canvasId + 'small' ?? 'helloworld'} />
    }

    function twoRing() {
        return <View style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative'
        }}>
            {
                ring1()
            }
            <View style={{
                position: 'absolute',
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                {
                    ring2()
                }
            </View>
        </View>
    }


    return <View className='history_duration_bg'
        onClick={(e) => {
            if (props.onClick) {
                if (process.env.TARO_ENV == 'weapp') {
                    e.stopPropagation()
                }
                props.onClick()
            }
        }}
        style={{ position: 'relative', marginTop: 0, marginBottom: props.showLine ? rpxToPx(7) : 0 }}>
        {
            props.showRing ? <View className='recent_ring_bg'>
                {
                    props.doubleRing ? twoRing() : ring()
                }
            </View> :
                <View className='recent_ring_bg'>
                    {
                        props.icon
                    }
                </View>
        }
        {
            props.desc && <View className='history_item_duration h32'>{props.desc}</View>
        }
        {
            props.doubleRing && <View className='history_item_duration h32' style={{
                display: 'flex',
                flexDirection: 'column'
            }}><Text className='h32'>{props.first.description}</Text><Text className='h32'>{props.second.description}</Text></View>
        }
        {/* {
            props.showLine && <View style={{height:rpxToPx(7),flexShrink:0}} />
        } */}
    </View>
}