update

src/features/trackTimeDuration/components/Clock.tsx

@@ -3,7 +3,7 @@ import trackTimeService, { machine } from "@/store/trackTimeMachine";
 import { View, Text } from "@tarojs/components";
 import { useEffect, useState } from "react";
 import { TimeFormatter } from "@/utils/time_format";
-import Rings2, { BgRing, CurrentDot, RingCommon } from './Rings';
+import Rings2, { BgRing, CurrentDot, RealRing, RingCommon } from './Rings';
 
 export default function Component() {
     const [checkData, setCheckData] = useState(null)
@@ -28,7 +28,7 @@ export default function Component() {
         radius: 50,
         lineWidth: 8,
         isFast: true,
-        status: 'WAIT_FOR_START'
+        status: checkData ? (checkData as any).current_record.status : 'WAIT_FOR_START'
     }
 
     const common2: RingCommon = {
@@ -36,7 +36,7 @@ export default function Component() {
         radius: 40,
         lineWidth: 8,
         isFast: true,
-        status: 'WAIT_FOR_START'
+        status: checkData ? (checkData as any).current_record.status : 'WAIT_FOR_START'
     }
 
     const bgRing: BgRing = {
@@ -55,24 +55,127 @@ export default function Component() {
         borderColor: 'black'
     }
 
+    const realRing: RealRing = {
+        color: '#AAFF00',
+        startArc: 0,
+        durationArc: 0
+    }
+
+    const realRing2: RealRing = {
+        color: '#00FFFF',
+        startArc: 0,
+        durationArc: 0
+    }
+
+    function startArc(time: number) {
+        var date = new Date(time);
+        var hour = date.getHours();
+        var minute = date.getMinutes();
+        var second = date.getSeconds();
+        return (hour * 3600 + minute * 60 + second) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+    }
+
+    function durationArc(time: number) {
+        var duration = (new Date().getTime() - 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);
+        }
+        else {
+            var start_time = obj.sleep.real_start_time;
+            realRing.startArc = startArc(start_time);
+            realRing.durationArc = durationArc(start_time);
+        }
+    }
+    else if (common.status == 'ONGOING1') {
+        var obj = (checkData as any).current_record.fast;
+        var start_time = obj.real_start_time;
+        realRing.startArc = startArc(start_time);
+        realRing.durationArc = durationArc(start_time);
+    }
+    else if (common.status == 'ONGOING2') {
+        var fast = (checkData as any).current_record.fast;
+        var start_time = fast.real_start_time;
+        realRing.startArc = startArc(start_time);
+        realRing.durationArc = durationArc(start_time);
+
+        var sleep = (checkData as any).current_record.sleep;
+        var start_time2 = sleep.real_start_time;
+        realRing2.startArc = startArc(start_time2);
+        realRing2.durationArc = durationArc(start_time2);
+    }
+    else if (common.status == 'ONGOING3') {
+        var fast = (checkData as any).current_record.fast;
+        var start_time = fast.real_start_time;
+        realRing.startArc = startArc(start_time);
+        realRing.durationArc = durationArc(start_time);
+    }
+
+    //外环
+    function bigRing() {
+        if (!checkData) {
+            return <Rings2 common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock0' />
+        }
+        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} 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} currentDot={currentDot2} canvasId='clock4' />
+        }
+        else {
+            if (current_record.status == 'WAIT_FOR_START') {
+                return <Rings2 common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock5' />
+            }
+            else {
+                return <Rings2 common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} canvasId='clock6' />
+            }
+        }
+    }
+
+
+    //内环
+    function smallRing() {
+        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' />
+            }
+            if (current_record.status == 'ONGOING3') {
+                currentDot2.color = 'rgba(0, 255, 255, 0.5)'
+            }
+            return <Rings2 common={common2} bgRing={bgRing} currentDot={currentDot2} canvasId='clock8' />
+        }
+        return null;
+    }
+
     if (!checkData)
         return <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', marginTop: 20 }}>
-            {/* <Rings radius={50} /> */}
-            <Rings2 common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock0'/>
-
+            {
+                bigRing()
+            }
         </View>
     return (
         <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', marginTop: 20 }}>
-            {/* <Rings radius={50} /> */}
-            {/* <Rings2 common={common} bgRing={bgRing} currentDot={currentDot} /> */}
-
             <View style={{ position: 'relative', zIndex: 1 }}>
-                <Rings2 common={common} bgRing={bgRing} currentDot={(checkData as any).current_record.scenario == 'SLEEP' ? currentDot2 : currentDot} canvasId='clock1' />
+                {
+                    bigRing()
+                }
                 <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
-                    {/* <Rings radius={23} strokeWidth={6} color='#00FFFF' canvasId='4' /> */}
                     {
-                        (checkData as any).current_record.scenario == 'FAST_SLEEP' &&
-                        <Rings2 common={common2} bgRing={bgRing} currentDot={currentDot2} canvasId='clock2' />
+                        smallRing()
                     }
                 </View>
             </View>

src/features/trackTimeDuration/components/Rings.tsx

@@ -37,7 +37,6 @@ export default function Rings(props: {
     common: RingCommon; currentDot?: CurrentDot;
     realRing?: RealRing; targetRing?: TargetRing; bgRing: BgRing; canvasId?: string;
 }) {
-    const progress = 0.85
     const r = props.common.radius
     const strokeWidth = props.common.lineWidth;
     // const color = props.color || 'orange'
@@ -82,7 +81,7 @@ export default function Rings(props: {
             ctx.lineCap = 'round'; // 设置为圆角
             ctx.stroke();
 
-            // 绘制target进度圆
+            // 绘制target进度环
             if (props.common.useCase == 'ChooseScenario') {
                 ctx.beginPath();
                 ctx.arc(center, center, radius, props.targetRing!.startArc,
@@ -93,14 +92,25 @@ export default function Rings(props: {
                 ctx.stroke();
             }
 
+            //绘制real进度环
+            if (props.common.status != 'WAIT_FOR_START' && props.realRing) {
+                ctx.beginPath();
+                ctx.arc(center, center, radius, props.realRing!.startArc,
+                    props.realRing!.startArc + props.realRing!.durationArc);
+                ctx.lineWidth = lineWidth;
+                ctx.strokeStyle = props.realRing!.color;
+                ctx.lineCap = 'round'; // 设置为圆角
+                ctx.stroke();
+            }
+
             //绘制current_dot点
-            if (props.common.useCase == 'Clock'){
+            if (props.common.useCase == 'Clock') {
                 var time = new Date();
-                var seconds = time.getHours()*3600+time.getMinutes()*60+time.getSeconds();
-                var arc = seconds/86400*2*Math.PI-Math.PI/2.0;
+                var seconds = time.getHours() * 3600 + time.getMinutes() * 60 + time.getSeconds();
+                var arc = seconds / 86400 * 2 * Math.PI - Math.PI / 2.0;
                 ctx.beginPath();
                 ctx.arc(center, center, radius, arc,
-                    arc+0.001);
+                    arc + 0.001);
                 ctx.lineWidth = lineWidth;
                 ctx.strokeStyle = props.currentDot!.borderColor;
                 ctx.lineCap = 'round'; // 设置为圆角
@@ -108,8 +118,8 @@ export default function Rings(props: {
 
                 ctx.beginPath();
                 ctx.arc(center, center, radius, arc,
-                    arc+0.001);
-                ctx.lineWidth = lineWidth-2;
+                    arc + 0.001);
+                ctx.lineWidth = lineWidth - 2;
                 ctx.strokeStyle = props.currentDot!.color;
                 ctx.lineCap = 'round'; // 设置为圆角
                 ctx.stroke();
@@ -122,7 +132,7 @@ export default function Rings(props: {
 
     useEffect(() => {
         drawCircle()
-    }, [props.targetRing,props.currentDot]);
+    }, [props.targetRing, props.currentDot]);
     return <Canvas canvasId={canvasId} id={canvasId} className={canvasId} type="2d" style={{ width: (radius * 2 + lineWidth), height: (radius * 2 + lineWidth), zIndex: 0 }} ref={canvasRef} />
 
 }