update

src/features/trackTimeDuration/components/Clock.tsx

@@ -55,6 +55,19 @@ export default function Component() {
         borderColor: 'black'
     }
 
+    const targetBigRing: RealRing = {
+        color: 'blue',
+        startArc: 0,
+        durationArc: 0
+    }
+
+    const targetSmallRing: RealRing = {
+        color: 'red',
+        startArc: 0,
+        durationArc: 0
+    }
+
+
     const realRing: RealRing = {
         color: '#AAFF00',
         startArc: 0,
@@ -80,28 +93,45 @@ export default function Component() {
         return duration / (24 * 3600) * 2 * Math.PI;
     }
 
+    function targetDurationArc(start_time: number, end_time: number) {
+        var duration = (end_time - start_time) / 1000;
+        return duration / (24 * 3600) * 2 * Math.PI;
+    }
+
     if (common.status == 'ONGOING') {
         var obj = (checkData as any).current_record;
         if (obj.scenario == 'FAST') {
             var start_time = obj.fast.real_start_time;
             realRing.startArc = startArc(start_time);
             realRing.durationArc = durationArc(start_time);
+
+            targetBigRing.startArc = startArc(obj.fast.target_start_time);
+            targetBigRing.durationArc = targetDurationArc(obj.fast.target_start_time, obj.fast.target_end_time);
         }
         else {
             var start_time = obj.sleep.real_start_time;
             realRing.startArc = startArc(start_time);
             realRing.durationArc = durationArc(start_time);
+
+            targetBigRing.startArc = startArc(obj.sleep.target_start_time);
+            targetBigRing.durationArc = targetDurationArc(obj.sleep.target_start_time, obj.sleep.target_end_time);
         }
     }
     else if (common.status == 'ONGOING1') {
-        var obj = (checkData as any).current_record.fast;
-        var start_time = obj.real_start_time;
+        var obj = (checkData as any).current_record;
+        var start_time = obj.fast.real_start_time;
         realRing.startArc = startArc(start_time);
         realRing.durationArc = durationArc(start_time);
+
+        targetBigRing.startArc = startArc(obj.fast.target_start_time);
+        targetBigRing.durationArc = targetDurationArc(obj.fast.target_start_time, obj.fast.target_end_time);
+
+        smallRing.startArc = startArc(obj.sleep.target_start_time);
+        smallRing.durationArc = targetDurationArc(obj.sleep.target_start_time, obj.sleep.target_end_time);
     }
     else if (common.status == 'ONGOING2') {
-        var fast = (checkData as any).current_record.fast;
-        var start_time = fast.real_start_time;
+        var obj = (checkData as any).current_record;
+        var start_time = obj.fast.real_start_time;
         realRing.startArc = startArc(start_time);
         realRing.durationArc = durationArc(start_time);
 
@@ -109,12 +139,21 @@ export default function Component() {
         var start_time2 = sleep.real_start_time;
         realRing2.startArc = startArc(start_time2);
         realRing2.durationArc = durationArc(start_time2);
+
+        targetBigRing.startArc = startArc(obj.fast.target_start_time);
+        targetBigRing.durationArc = targetDurationArc(obj.fast.target_start_time, obj.fast.target_end_time);
+
+        targetSmallRing.startArc = startArc(obj.sleep.target_start_time);
+        targetSmallRing.durationArc = targetDurationArc(obj.sleep.target_start_time, obj.sleep.target_end_time);
     }
     else if (common.status == 'ONGOING3') {
-        var fast = (checkData as any).current_record.fast;
-        var start_time = fast.real_start_time;
+        var obj = (checkData as any).current_record;
+        var start_time = obj.fast.real_start_time;
         realRing.startArc = startArc(start_time);
         realRing.durationArc = durationArc(start_time);
+
+        targetBigRing.startArc = startArc(obj.fast.target_start_time);
+        targetBigRing.durationArc = targetDurationArc(obj.fast.target_start_time, obj.fast.target_end_time);
     }
 
     //外环
@@ -125,13 +164,13 @@ export default function Component() {
         var current_record = (checkData as any).current_record
         if (current_record.scenario == 'FAST') {
             if (current_record.status == 'ONGOING') {
-                return <Rings2 common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} canvasId='clock1' />
+                return <Rings2 common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetBigRing} canvasId='clock1' />
             }
-            return <Rings2 common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock2' />
+            return <Rings2 common={common} bgRing={bgRing} currentDot={currentDot}  canvasId='clock2' />
         }
         else if (current_record.scenario == 'SLEEP') {
             if (current_record.status == 'ONGOING') {
-                return <Rings2 common={common} bgRing={bgRing} realRing={realRing2} currentDot={currentDot2} canvasId='clock3' />
+                return <Rings2 common={common} bgRing={bgRing} realRing={realRing2} currentDot={currentDot2} targetRing={targetBigRing} canvasId='clock3' />
             }
             return <Rings2 common={common} bgRing={bgRing} currentDot={currentDot2} canvasId='clock4' />
         }
@@ -140,7 +179,7 @@ export default function Component() {
                 return <Rings2 common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock5' />
             }
             else {
-                return <Rings2 common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} canvasId='clock6' />
+                return <Rings2 common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetBigRing} canvasId='clock6' />
             }
         }
     }
@@ -151,7 +190,8 @@ export default function Component() {
         var current_record = (checkData as any).current_record
         if (current_record.scenario == 'FAST_SLEEP') {
             if (current_record.status == 'ONGOING2') {
-                return <Rings2 common={common2} bgRing={bgRing} realRing={realRing2} currentDot={currentDot2} canvasId='clock7' />
+                debugger
+                return <Rings2 common={common2} bgRing={bgRing} realRing={realRing2} currentDot={currentDot2} targetRing={targetSmallRing} canvasId='clock7' />
             }
             if (current_record.status == 'ONGOING3') {
                 currentDot2.color = 'rgba(0, 255, 255, 0.5)'

src/features/trackTimeDuration/components/Rings.tsx

@@ -82,7 +82,7 @@ export default function Rings(props: {
             ctx.stroke();
 
             // 绘制target进度环
-            if (props.common.useCase == 'ChooseScenario') {
+            if (props.common.useCase == 'ChooseScenario' || (props.common.useCase == 'Clock' && props.targetRing)) {
                 ctx.beginPath();
                 ctx.arc(center, center, radius, props.targetRing!.startArc,
                     props.targetRing!.startArc + props.targetRing!.durationArc);