|
@@ -2,8 +2,9 @@ import { View, Text } from '@tarojs/components'
|
|
|
import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
|
|
import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
|
|
|
import './target_progress.scss'
|
|
import './target_progress.scss'
|
|
|
import { MainColorType } from '@/context/themes/color';
|
|
import { MainColorType } from '@/context/themes/color';
|
|
|
-import { durationArc, startArc } from '@/utils/ring_utils';
|
|
|
|
|
|
|
+import { durationArc, durationProgress, startArc, startDegree } from '@/utils/ring_utils';
|
|
|
import { rpxToPx } from '@/utils/tools';
|
|
import { rpxToPx } from '@/utils/tools';
|
|
|
|
|
+import CircleRing from '@/components/basic/CircleRing';
|
|
|
|
|
|
|
|
export default function TargetProgress(props: {
|
|
export default function TargetProgress(props: {
|
|
|
showLine?: boolean,
|
|
showLine?: boolean,
|
|
@@ -22,7 +23,18 @@ export default function TargetProgress(props: {
|
|
|
onClick?: any
|
|
onClick?: any
|
|
|
}) {
|
|
}) {
|
|
|
|
|
|
|
|
- function ring() {
|
|
|
|
|
|
|
+ function ring(){
|
|
|
|
|
+ return <CircleRing
|
|
|
|
|
+ size={26}
|
|
|
|
|
+ thickness={4.5}
|
|
|
|
|
+ color={props.color ?? MainColorType.fast}
|
|
|
|
|
+ backgroundColor={MainColorType.ringBg}
|
|
|
|
|
+ startAngle={startDegree(props.startTimestamp ?? 0)}
|
|
|
|
|
+ progress={durationProgress(props.startTimestamp ?? 0, props.endTimerstamp ?? 0)}
|
|
|
|
|
+ />
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function ring22() {
|
|
|
const common: RingCommon = {
|
|
const common: RingCommon = {
|
|
|
useCase: 'ChooseScenario',
|
|
useCase: 'ChooseScenario',
|
|
|
radius: 12,
|
|
radius: 12,
|
|
@@ -41,10 +53,21 @@ export default function TargetProgress(props: {
|
|
|
startArc: startArc(props.startTimestamp ?? 0),
|
|
startArc: startArc(props.startTimestamp ?? 0),
|
|
|
durationArc: durationArc(props.startTimestamp ?? 0, props.endTimerstamp ?? 0)
|
|
durationArc: durationArc(props.startTimestamp ?? 0, props.endTimerstamp ?? 0)
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
return <Rings common={common} bgRing={bgRing} realRing={realRing} canvasId={props.canvasId ?? 'helloworld'} />
|
|
return <Rings common={common} bgRing={bgRing} realRing={realRing} canvasId={props.canvasId ?? 'helloworld'} />
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function ring1() {
|
|
function ring1() {
|
|
|
|
|
+ return <CircleRing
|
|
|
|
|
+ size={28}
|
|
|
|
|
+ thickness={4}
|
|
|
|
|
+ color={MainColorType.fast}
|
|
|
|
|
+ backgroundColor={MainColorType.ringBg}
|
|
|
|
|
+ startAngle={startDegree(props.first.window_range.start_timestamp ?? 0)}
|
|
|
|
|
+ progress={durationProgress(props.first.window_range.start_timestamp ?? 0, props.first.window_range.end_timestamp ?? 0)}
|
|
|
|
|
+ />
|
|
|
|
|
+
|
|
|
const common: RingCommon = {
|
|
const common: RingCommon = {
|
|
|
useCase: 'ChooseScenario',
|
|
useCase: 'ChooseScenario',
|
|
|
radius: 12.5,
|
|
radius: 12.5,
|
|
@@ -67,6 +90,15 @@ export default function TargetProgress(props: {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function ring2() {
|
|
function ring2() {
|
|
|
|
|
+ return <CircleRing
|
|
|
|
|
+ size={14}
|
|
|
|
|
+ thickness={4}
|
|
|
|
|
+ color={MainColorType.sleep}
|
|
|
|
|
+ backgroundColor={MainColorType.ringBg}
|
|
|
|
|
+ startAngle={startDegree(props.second.window_range.start_timestamp ?? 0)}
|
|
|
|
|
+ progress={durationProgress(props.second.window_range.start_timestamp ?? 0, props.second.window_range.end_timestamp ?? 0)}
|
|
|
|
|
+ />
|
|
|
|
|
+
|
|
|
const common: RingCommon = {
|
|
const common: RingCommon = {
|
|
|
useCase: 'ChooseScenario',
|
|
useCase: 'ChooseScenario',
|
|
|
radius: 6.5,
|
|
radius: 6.5,
|