update

config/dev.ts

@@ -5,25 +5,25 @@ module.exports = {
   defineConstants: {
   },
   mini: {
-    webpackChain: (chain, webpack) => {
-      chain.merge({
-        plugin: {
-          install: {
-            plugin: require('terser-webpack-plugin'),
-            args: [
-              {
-                terserOptions: {
-                  compress: true, // 默认使用terser压缩
-                  // mangle: false,
-                  keep_classnames: true, // 不改变class名称
-                  keep_fnames: true, // 不改变函数名称
-                },
-              },
-            ],
-          },
-        },
-      })
-    },
+    // webpackChain: (chain, webpack) => {
+    //   chain.merge({
+    //     plugin: {
+    //       install: {
+    //         plugin: require('terser-webpack-plugin'),
+    //         args: [
+    //           {
+    //             terserOptions: {
+    //               compress: true, // 默认使用terser压缩
+    //               // mangle: false,
+    //               keep_classnames: true, // 不改变class名称
+    //               keep_fnames: true, // 不改变函数名称
+    //             },
+    //           },
+    //         ],
+    //       },
+    //     },
+    //   })
+    // },
   },
   h5: {}
 }

src/_health/pages/move.tsx

@@ -25,6 +25,8 @@ export default function Move() {
     const [index, setIndex] = useState(1)
     const [hideCurrentRecent, setHideCurrentRecent] = useState(false)
     const [moreActive, setMoreActive] = useState(false)
+    const [hours, setHours] = useState<any>([])
+    const [startDate,setStarteDate] = useState('')
     const { t } = useTranslation()
     const dispatch = useDispatch()
 
@@ -46,6 +48,11 @@ export default function Move() {
         })
         timer = setInterval(() => {
             setCount((index) => index + 1)
+            const date = new Date()
+            if (date.getMinutes() == 10 && date.getSeconds() == 0) {
+                getMovesCurrent()
+                getMovesHistory()
+            }
         }, 1000)
 
         return () => {
@@ -57,6 +64,18 @@ export default function Move() {
         getActiveMovesCurrent().then(res => {
             setLoaded(true)
             setData(res)
+            setStarteDate((res as any).start_date)
+            var array = (res as any).hours
+            var temps: any = []
+            for (var i = array.length - 1; i >= 0; i--) {
+                var obj = array[i]
+                if (obj.status != 'NOT_CHECK') {
+                    temps.push(obj)
+                }
+            }
+            setHours(temps)
+
+            // setHours((res as any).hours.reverse())
         })
     }
 
@@ -101,7 +120,6 @@ export default function Move() {
         getWeRunData(false)
     }
 
-
     function getWeRunData(autoCheck = false) {
         if (autoCheck) {
             return
@@ -136,6 +154,7 @@ export default function Move() {
                     encryptedData: (res as any).encryptedData,
                     iv: (res as any).iv,
                 },
+                start_date: startDate,
                 date: dayjs().format('YYYYMMDD'),
                 hour: hour,
                 timestamp: new Date().getTime(),
@@ -145,22 +164,73 @@ export default function Move() {
                     title: '上报成功',
                     icon: 'none'
                 })
+                getMovesCurrent()
+                getMovesHistory()
             })
         }).catch(_ => {
             dispatch(setResult({ isSuccess: false }) as any)
         })
     }
 
+    function currentCheckHour() {
+        let currentHour = new Date().getHours()
+        const minute = new Date().getMinutes()
+        if (minute < 10) {
+            currentHour -= 1;
+            if (currentHour < 0) {
+                currentHour = 23
+            }
+        }
+        return currentHour
+    }
+
+    function currentHourChecked() {
+        const currentHour = currentCheckHour()
+        var isChecked = false
+        data.hours.map((item) => {
+            if (item.hour == currentHour && item.status != 'NOT_CHECK') {
+                isChecked = true
+            }
+        })
+        return isChecked;
+    }
+
     function getStatus() {
         const minute = new Date().getMinutes()
         if (minute >= 50 || minute < 10) {
+            var isChecked = currentHourChecked()
+            if (isChecked) {
+                return 'upcoming'
+            }
+
             return 'open'
         }
         return 'upcoming'
     }
 
     function currentFootDesc() {
+        var isChecked = currentHourChecked()
         const minute = new Date().getMinutes()
+
+        if (isChecked && (minute < 10 || minute >= 50)) {
+            let time = new Date()
+            time.setMinutes(50)
+            time.setSeconds(0)
+            time.setMilliseconds(0)
+
+            // 获取总秒数
+            const totalSeconds = Math.floor((time.getTime() + 3600 * 1000 - new Date().getTime()) / 1000);
+
+            // 计算小时、分钟和秒
+            // const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
+            const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
+            const seconds = String(totalSeconds % 60).padStart(2, '0');
+
+            // return `${hours}:${minutes}:${seconds}`;
+            return `Opening soon ${minutes}:${seconds}`
+        }
+
+
         const pre = new Date().getTime()
         const next = new Date().getTime() + 3600 * 1000
         if (minute >= 50) {
@@ -202,17 +272,39 @@ export default function Move() {
     }
 
     function getDuration() {
-        const pre = new Date().getTime()
-        const next = new Date().getTime() + 3600 * 1000
+        let now = new Date()
+        let pre = new Date().getTime()
+        if (now.getMinutes() < 10) {
+            pre -= 3600 * 1000
+        }
+        let next = pre + 3600 * 1000
+        if (currentHourChecked()) {
+            pre = next
+            next = pre + 3600 * 1000
+        }
         return dayjs(pre).format('H:00') + '-' + dayjs(next).format('H:00')
     }
 
+    function getCurrentTarget() {
+        let now = new Date()
+        let pre = new Date().getTime()
+        if (now.getMinutes() < 10) {
+            pre -= 3600 * 1000
+        }
+
+        if (currentHourChecked()){
+            pre += 3600*1000
+        }
+        const hour = new Date(pre).getHours()
+        for (var i = 0; i < data.hours.length; i++) {
+            if (data.hours[i].hour == hour) {
+                return `${data.hours[i].real_steps}/${data.hours[i].target_steps}`
+            }
+        }
+    }
+
     function process() {
-        let count = 0;
-        data.hours.map(item => {
-            // if (item.)
-        })
-        return `${count} / ${data.hours.length}`
+        return `${data.stat.real_hours} / ${data.stat.target_hours}`
     }
 
     function currentHourPeriod() {
@@ -228,6 +320,17 @@ export default function Move() {
         return hour
     }
 
+    function isExtra(){
+        const hour = currentHourPeriod()
+        var isFind = false
+        data.hours.map((item)=>{
+            if (item.hour==hour){
+                isFind = true
+            }
+        })
+        return !isFind
+    }
+
     function currentContent() {
         const hour = currentHourPeriod()
         let info: any = null
@@ -240,8 +343,12 @@ export default function Move() {
         return <View className="move-header">
             <View className="header-current">
                 <View className="current_intro">
-                    <View style={{ color: new Date().getMinutes() < 10 ? getThemeColor(health.mode) : '#b2b2b2' }}>{getDuration()}</View>
-                    <Text>0/200 steps</Text>
+                    <View style={{ color: (new Date().getMinutes() < 10 && getStatus()=='open') ? getThemeColor(health.mode) : '#b2b2b2' }}>{getDuration()}</View>
+                    {
+                        isExtra()?<Text style={{color:getThemeColor('SLEEP')}}>is extra</Text>:<Text>{getCurrentTarget()} steps</Text>
+                    }
+                    
+                    
                 </View>
                 <View className="log_btn" style={{
                     backgroundColor: getStatus() == 'open' ? getThemeColor(health.mode) : '#6666661A',
@@ -251,7 +358,7 @@ export default function Move() {
             </View>
             <View className="current_footer">
                 <Text>{currentFootDesc()}</Text>
-                <Text onClick={()=>{
+                <Text onClick={() => {
                     jumpPage(`/_health/pages/move_schedule?hours=${JSON.stringify(data.hours)}`)
                 }}>Show More</Text>
             </View>
@@ -261,12 +368,16 @@ export default function Move() {
 
     function currentHistory(item) {
         var start = item.hour
+        var isYesterday = start > new Date().getHours()
         var end = start + 1
         start = (start + '').padStart(2, '0')
         end = (end + '').padStart(2, '0')
         return <View className="current_history_item">
             <View style={{ display: 'flex', flexDirection: 'column' }}>
-                <Text className="current_item_period">{start}:00-{end}:00</Text>
+                <Text className="current_item_period">{isYesterday ? '昨天' : ''}{start}:00-{end}:00</Text>
+                {
+                    item.is_extra && <Text style={{color:getThemeColor('SLEEP')}}>is Extra</Text>
+                }
                 <Text>{item.real_steps}/{item.target_steps}</Text>
             </View>
 
@@ -283,15 +394,6 @@ export default function Move() {
         </View>
     }
 
-    function activeCount() {
-        var count = 0;
-        data.hours.map(item => {
-            if (item.status != 'NOT_CHECK') {
-                count++
-            }
-        })
-        return count
-    }
 
     function activeHour() {
 
@@ -311,8 +413,8 @@ export default function Move() {
             {
                 !hideCurrentRecent && <View className="summary_content">
                     {
-                        data.hours.map((item, index) => {
-                            if (item.status == 'NOT_CHECK') return <View key={index} />
+                        hours.map((item, index) => {
+                            // if (item.status == 'NOT_CHECK') return <View key={index} />
                             if (index >= 3 && !moreActive) return <View key={index} />
                             return <View key={index}>
                                 {
@@ -322,9 +424,9 @@ export default function Move() {
                         })
                     }
                     {
-                        activeCount() > 3 && <View className="recent_btn_bg">
+                        hours.length > 3 && <View className="recent_btn_bg">
                             {
-                                moreActive ? <View className="recent_btn" onClick={() => setMoreActive(false)}>收起</View> : <View className="recent_btn" onClick={() => setMoreActive(true)}>展开剩余{activeCount() - 3}条</View>
+                                moreActive ? <View className="recent_btn" onClick={() => setMoreActive(false)}>收起</View> : <View className="recent_btn" onClick={() => setMoreActive(true)}>展开剩余{hours.length - 3}条</View>
                             }
                             <View className="border_footer_line" />
                         </View>
@@ -353,6 +455,9 @@ export default function Move() {
 
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
         <Text className="move-title">Move Every Hour</Text>
+        <Text onClick={() => {
+            jumpPage('./move_setting')
+        }}>Setting</Text>
         {
             currentContent()
         }

src/_health/pages/move_schedule.scss

@@ -51,4 +51,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+.history_item_detail_icon{
+    height: 32px;
+    width: 32px;
+    margin-right: 16px;
 }

src/_health/pages/move_schedule.tsx

@@ -1,4 +1,4 @@
-import { View, Text } from "@tarojs/components";
+import { View, Text,Image } from "@tarojs/components";
 import './move_schedule.scss'
 import { useRouter } from "@tarojs/taro";
 
@@ -36,16 +36,32 @@ export default function MoveSchedule() {
         {
             hours.map((item, index) => {
                 var start = item.hour
+                var open:any = start
                 var end = start + 1
                 start = (start + '').padStart(2, '0')
                 end = (end + '').padStart(2, '0')
+                
+                open = (open + '').padStart(2, '0')
+                if (item.status!='NOT_CHECK') return <View key={index}/>
                 return <View key={index} className="schedule_item">
                     <View className="schedule_item_left">
-                        <View className="schedule_item_time">{start}:00-{end}:00</View>
+                        <View className="schedule_item_time">{parseInt(start)<new Date().getHours()?'明天':''}{start}:00-{end}:00</View>
                         <Text className="schedule_item_target">{item.real_steps}/{item.target_steps} steps</Text>
                     </View>
-                    <View style={{flex:1}}/>
-                    <Text className="schedule_item_open">{start}:00开放</Text>
+                    <View style={{ flex: 1 }} />
+                    {
+                        item.status == 'MISSED' && <Text className="missed">Missed</Text>
+                    }
+                    {
+                        item.status == 'CHECKED' && item.real_steps == 0 && <Image className="history_item_detail_icon" src={require('@assets/_health/sit.png')} />
+                    }
+                    {
+                        item.status == 'CHECKED' && item.real_steps > 0 && <Image className="history_item_detail_icon" src={require('@assets/_health/walk.png')} />
+                    }
+                    {
+                        item.status == 'NOT_CHECK' && <Text className="schedule_item_open">{open}:50开放</Text>
+                    }
+                    
                     {
                         index < hours.length - 1 && <View className="schedule_item_line" />
                     }

src/features/health/MainConsole.tsx

@@ -113,9 +113,9 @@ export default function MainConsole(props: { type: WindowType }) {
     }
 
     function itemTitle(item: any) {
-        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
-            return item.title
-        }
+        // if (health.mode == 'DAY' || health.mode == 'NIGHT') {
+        //     return item.title
+        // }
         if (item.real) {
             return dayjs(item.real.timestamp).format('HH:mm')
         }
@@ -129,7 +129,7 @@ export default function MainConsole(props: { type: WindowType }) {
             themeColor = '#B2B2B2'
         }
         if (health.mode == 'DAY' || health.mode == 'NIGHT') {
-            return <Text className="timeline_time">{dayjs(item.target.timestamp).format('HH:mm')}</Text>
+            return null
         }
         if (item.action && item.action != 'NA')
             return <View className="timeline_operate" style={{ color: themeColor, backgroundColor: themeColor + '1A' }} onClick={() => record(item)}>{operateTitle(item)}</View>
@@ -139,11 +139,16 @@ export default function MainConsole(props: { type: WindowType }) {
     function timelineItem(item: any, index: number, count: number) {
         return <View key={index} className="timeline_item" >
             <View className="timeline_left">
-                {
-                    health.mode != 'DAY' && health.mode != 'NIGHT' && <Text className="timeline_title">{itemTitle(item)}</Text>
-                }
                 <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                    <Text className="timeline_time" onClick={() => edit(item)}>{health.mode != 'DAY' && health.mode != 'NIGHT' ? item.title : itemTitle(item)}</Text>
+                    {
+                        !item.reminder && <Image src={require('@assets/images/notification_off.png')} className='notification_icon' />
+                    }
+                    <Text className="timeline_title">{itemTitle(item)}</Text>
+                </View>
+
+
+                <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                    <Text className="timeline_time" onClick={() => edit(item)}>{item.title}</Text>
                 </View>
                 {
                     item.moment && item.moment.description && <Text className="timeline_title">{item.moment.description}</Text>
@@ -151,9 +156,7 @@ export default function MainConsole(props: { type: WindowType }) {
 
             </View>
             <View style={{ flex: 1 }} />
-            {
-                !item.reminder && <Image src={require('@assets/images/notification_off.png')} className='notification_icon' />
-            }
+
             {
                 item.moment && item.moment.media && item.moment.media.length > 0 && <Image
                     src={item.moment.media[0].url}
@@ -640,6 +643,10 @@ export default function MainConsole(props: { type: WindowType }) {
         </View>
         {
             health.mode == 'ACTIVE' && <View className="console_active_bg" onClick={() => {
+                if (!user.isLogin) {
+                    jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
+                    return
+                }
                 jumpPage('/_health/pages/move')
             }}>
                 <View className="console_active">

src/features/health/MainDayNightCard.tsx

@@ -124,6 +124,20 @@ export default function MainDayNightCard(props: {
         return startArc(night.target.start_timestamp)
     }
 
+    function currentDot() {
+        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
+            const status = getWindowStatus(health.windows, isDayMode ? 'DAY' : 'NIGHT')
+
+            return {
+                color: status == WindowStatusType.upcoming?'#B2B2B2':isDayMode ? MainColorType.day : MainColorType.night,
+                lineWidth: 4,
+                borderColor: '#F5F5F5',
+                offset: 0
+            }
+        }
+        return null;
+    }
+
     function ring() {
         var offset = 0
 
@@ -147,19 +161,26 @@ export default function MainDayNightCard(props: {
             durationArc: getTargetArc()
         }
 
-        const realRing: RealRing = {
+        let realRing: RealRing = {
             color: realColor,
             startArc: getStartRealArc(),//-Math.PI / 2,
             durationArc: getRealArc()
         }
 
+        if (status == WindowStatusType.upcoming){
+            realRing = null
+        }
+
         return <Rings
             common={common}
             bgRing={bgRing}
             targetRing={targetRing}
             realRing={realRing}
             canvasId={'smal1w1l' + props.id}
-            scale={props.scale??1.0} />
+            currentDot={currentDot()}
+            scale={props.scale??1.0}
+            showCurrentDotAnimation={false}
+            />
     }
 
     return <View onClick={() => props.onClick()} style={{ width: rpxToPx(750 / 3), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center', position: 'relative' }}>

src/features/health/MainFastEatCard.tsx

@@ -172,11 +172,12 @@ export default function MainFastEatCard(props: {
         const scenario = getScenario(health.windows, isFastMode ? 'FAST' : 'EAT')
 
         if (status == WindowStatusType.upcoming) {
-            return {
-                color: '#cccccc',
-                startArc: getStartArc(new Date().getTime()),
-                durationArc: getDurationArc(new Date().getTime(), scenario.target.start_timestamp),
-            }
+            return null
+            // return {
+            //     color: '#cccccc',
+            //     startArc: getStartArc(new Date().getTime()),
+            //     durationArc: getDurationArc(new Date().getTime(), scenario.target.start_timestamp),
+            // }
         }
         return {
             color: isFastMode ? MainColorType.fast : MainColorType.eat,
@@ -185,6 +186,29 @@ export default function MainFastEatCard(props: {
         }
     }
 
+    function currentDot() {
+        if (health.mode == 'FAST' || health.mode == 'EAT') {
+            const status = getWindowStatus(health.windows, isFastMode ? 'FAST' : 'EAT')
+
+            return {
+                color: status == WindowStatusType.upcoming?'#B2B2B2':isFastMode ? MainColorType.fast : MainColorType.eat,
+                lineWidth: 4,
+                borderColor: '#F5F5F5',
+                offset: 0
+            }
+        }
+        return null;
+    }
+
+    function showDotAnimation(){
+        if (health.mode == 'FAST' || health.mode == 'EAT') {
+            const status = getWindowStatus(health.windows, isFastMode ? 'FAST' : 'EAT')
+            if (status == WindowStatusType.process) return true;
+        }
+
+        return false
+    }
+
     function ring() {
 
         return <Rings common={common}
@@ -192,7 +216,9 @@ export default function MainFastEatCard(props: {
             targetRing={targetRing()}
             realRing={realRing()}
             canvasId={'smal11l' + props.id}
+            currentDot={currentDot()}
             scale={props.scale ?? 1.0}
+            showCurrentDotAnimation={showDotAnimation()}
         />
     }
 

src/features/health/MainSleepActiveCard.tsx

@@ -112,11 +112,12 @@ export default function MainSleepActiveCard(props: {
         const scenario = getScenario(health.windows, isSleepMode ? 'SLEEP' : 'ACTIVE')
 
         if (status == WindowStatusType.upcoming) {
-            return {
-                color: '#cccccc',
-                startArc: getRealArc(new Date().getTime()),
-                durationArc: getRealDurationArc(new Date().getTime(), scenario.target.start_timestamp),
-            }
+            return null;
+            // return {
+            //     color: '#cccccc',
+            //     startArc: getRealArc(new Date().getTime()),
+            //     durationArc: getRealDurationArc(new Date().getTime(), scenario.target.start_timestamp),
+            // }
         }
         return {
             color: isSleepMode ? MainColorType.sleep : MainColorType.active,
@@ -125,6 +126,29 @@ export default function MainSleepActiveCard(props: {
         }
     }
 
+    function currentDot() {
+        if (health.mode == 'SLEEP' || health.mode == 'ACTIVE') {
+            const status = getWindowStatus(health.windows, isSleepMode ? 'SLEEP' : 'ACTIVE')
+
+            return {
+                color: status == WindowStatusType.upcoming?'#B2B2B2':isSleepMode ? MainColorType.sleep : MainColorType.active,
+                lineWidth: 4,
+                borderColor: '#F5F5F5',
+                offset: 0
+            }
+        }
+        return null;
+    }
+
+    function showDotAnimation(){
+        if (health.mode == 'SLEEP' || health.mode == 'ACTIVE') {
+            const status = getWindowStatus(health.windows, isSleepMode ? 'SLEEP' : 'ACTIVE')
+            if (status == WindowStatusType.process) return true;
+        }
+
+        return false
+    }
+
     function ring() {
 
 
@@ -134,7 +158,10 @@ export default function MainSleepActiveCard(props: {
             targetRing={targetRing()}
             realRing={realRing()}
             canvasId={'smal11lee' + props.id}
-            scale={props.scale ?? 1.0} />
+            currentDot={currentDot()}
+            scale={props.scale ?? 1.0}
+            showCurrentDotAnimation={showDotAnimation()}
+            />
     }
 
     return <View style={{ width: rpxToPx(750 / 3), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center' }} onClick={() => props.onClick()}>

src/features/health/MainSwiper.tsx

@@ -186,7 +186,7 @@ export default function MainSwiper(props: { count: number, pageChanged: Function
                     setCurrent(2)
                 }} />
             </SwiperItem>
-            <SwiperItem>
+            {/* <SwiperItem>
                 <MainDayNightCard scale={current==3?1:0.8} count={props.count} typeChanged={typeChanged} id={7} onClick={() => {
                     setCurrent(3)
                 }} />
@@ -200,7 +200,7 @@ export default function MainSwiper(props: { count: number, pageChanged: Function
                 <MainSleepActiveCard scale={current==5?1:0.8} count={props.count} typeChanged={typeChanged} id={9} onClick={() => {
                     setCurrent(5)
                 }} />
-            </SwiperItem>
+            </SwiperItem> */}
         </Swiper>
 
         {/* <View style={{flexDirection:'row',display:'flex'}}>

src/features/trackTimeDuration/components/Rings.weapp.tsx

@@ -52,6 +52,11 @@ export type BgRing = {
 
 let arrowImg;
 let startTime;
+let dotScale = 0.8;
+let dotAlpha = 0.8;
+let direction = 1;
+let frameAnimation: any = null;
+let laterTime;
 
 export default function Rings(props: {
     common: RingCommon;
@@ -69,6 +74,7 @@ export default function Rings(props: {
     dotList?: Array<CurrentDot>;
     stageList?: Array<RealRing>;
     scale?: number;
+    showCurrentDotAnimation?: boolean;
 }) {
     const r = props.common.radius
     const strokeWidth = props.common.lineWidth;
@@ -83,6 +89,11 @@ export default function Rings(props: {
 
     const [scale, setScale] = useState(props.scale ?? 1.0)
 
+    const scaleRef = useRef(1);
+    const alphaRef = useRef(1);
+    const directionRef = useRef(1); // 1 for scaling down, -1 for scaling up
+    const animationFrameRef = useRef<number | null>(null);
+
     const animationDuration = 150; // 动画时长（毫秒
     const animateScale = (newScale) => {
         // const startTime = performance.now();
@@ -111,6 +122,60 @@ export default function Rings(props: {
         }
     }, [props.scale])
 
+
+    const animate2 = () => {
+        if (!props.showCurrentDotAnimation) {
+            cancelAnimationFrame(animationFrameRef.current as any)
+            animationFrameRef.current = null
+            return;
+        }
+
+        // 更新 scale 和 alpha
+        // scaleRef.current += directionRef.current * 0.01;
+        // alphaRef.current += directionRef.current * 0.01;
+        dotScale += direction * 0.005;
+        dotAlpha += direction * 0.005;
+
+        // 反转方向
+        if (dotScale <= 0.7 || dotScale >= 1) {
+            direction *= -1;
+        }
+
+        // 绘制圆点
+        if (props.ctx) {
+            drawContent(props.ctx)
+        }
+        else {
+            drawCircle()
+        }
+
+        // 循环动画
+        animationFrameRef.current = requestAnimationFrame(animate2);
+    };
+
+    useEffect(() => {
+        // if (props.showCurrentDotAnimation) {
+        //     console.log('oooooooooooooooooooooooo')
+        //     setTimeout(() => {
+        //         console.log('sssssssssddddddd')
+        //         animate2()
+        //     }, 2000)
+
+        // }
+        // else {
+        //     if (laterTime)
+        //         clearTimeout(laterTime)
+        //     if (animationFrameRef.current) {
+        //         cancelAnimationFrame(animationFrameRef.current as any)
+        //         animationFrameRef.current = null
+        //     }
+        //     dotScale = 1;
+        //     dotAlpha = 1;
+        // }
+    }, [
+        props.showCurrentDotAnimation
+    ])
+
     useReady(() => {
         drawCircle()
     })
@@ -176,9 +241,9 @@ export default function Rings(props: {
         // 设置画布尺寸
         ctx.scale(dpr, dpr)
 
-        ctx.translate(center, 2*center)
+        ctx.translate(center, 2 * center)
         ctx.scale(scale, scale);
-        ctx.translate(-center, -2*center);
+        ctx.translate(-center, -2 * center);
 
 
 
@@ -212,13 +277,13 @@ export default function Rings(props: {
 
         // 绘制target进度环
         if (props.targetRing) {
-            ctx.beginPath();
-            ctx.arc(center, center, props.targetRing!.radius ? props.targetRing!.radius : radius, props.targetRing!.startArc,
-                props.targetRing!.startArc + props.targetRing!.durationArc);
-            ctx.lineWidth = props.targetRing!.lineWidth ? props.targetRing!.lineWidth + 4 : lineWidth + 4;
-            ctx.strokeStyle = MainColorType.bg;
-            ctx.lineCap = 'round'; // 设置为圆角
-            ctx.stroke();
+            // ctx.beginPath();
+            // ctx.arc(center, center, props.targetRing!.radius ? props.targetRing!.radius : radius, props.targetRing!.startArc,
+            //     props.targetRing!.startArc + props.targetRing!.durationArc);
+            // ctx.lineWidth = props.targetRing!.lineWidth ? props.targetRing!.lineWidth + 4 : lineWidth + 4;
+            // ctx.strokeStyle = MainColorType.bg;
+            // ctx.lineCap = 'round'; // 设置为圆角
+            // ctx.stroke();
 
             ctx.beginPath();
             ctx.arc(center, center, props.targetRing!.radius ? props.targetRing!.radius : radius, props.targetRing!.startArc,
@@ -232,15 +297,15 @@ export default function Rings(props: {
         //绘制real进度环
         if (props.realRing) {
             if (props.realRing.durationArc < 0.01) props.realRing.durationArc = 0.01;
-            if (!props.realRing.hideBg) {
-                ctx.beginPath();
-                ctx.arc(center, center, props.realRing!.radius ? props.realRing!.radius : radius, props.realRing!.startArc,
-                    props.realRing!.startArc + props.realRing!.durationArc);
-                ctx.lineWidth = props.realRing!.lineWidth ? props.realRing!.lineWidth + 4 : lineWidth + 4;
-                ctx.strokeStyle = MainColorType.bg;
-                ctx.lineCap = 'round'; // 设置为圆角
-                ctx.stroke();
-            }
+            // if (!props.realRing.hideBg) {
+            //     ctx.beginPath();
+            //     ctx.arc(center, center, props.realRing!.radius ? props.realRing!.radius : radius, props.realRing!.startArc,
+            //         props.realRing!.startArc + props.realRing!.durationArc);
+            //     ctx.lineWidth = props.realRing!.lineWidth ? props.realRing!.lineWidth + 4 : lineWidth + 4;
+            //     ctx.strokeStyle = MainColorType.bg;
+            //     ctx.lineCap = 'round'; // 设置为圆角
+            //     ctx.stroke();
+            // }
 
 
             ctx.beginPath();
@@ -288,45 +353,51 @@ export default function Rings(props: {
             }
             ctx.arc(xPrime, yPrime, lineWidth / 2.0 + dotLineWidth / 2, 0, 2 * Math.PI);
             ctx.lineWidth = dotLineWidth;
+            ctx.fillStyle = props.currentDot.borderColor
+            ctx.fill()
             ctx.strokeStyle = props.currentDot.borderColor//'#1C1C1C';
             ctx.lineCap = 'round'; // 设置为圆角
             ctx.stroke();
 
             if (props.currentDot.color != '#ffffffff') {
                 ctx.beginPath();
-                ctx.arc(xPrime, yPrime, lineWidth / 2, 0, 2 * Math.PI, false);
+                // ctx.translate(xPrime, yPrime)
+                ctx.arc(xPrime, yPrime, lineWidth / 2 * dotScale, 0, 2 * Math.PI, false);
+                ctx.globalAlpha = dotAlpha//alphaRef.current
+                // ctx.scale(scaleRef.current,scaleRef.current)
+                // ctx.translate(-xPrime, -yPrime)
                 ctx.fillStyle = props.currentDot.color;
                 ctx.fill();
             }
 
 
 
-            if (arrowImg) {
-                //绘制终点图标
-                ctx.save()
-                ctx.beginPath()
-                ctx.translate(xPrime, yPrime)
-                ctx.rotate(arc)
-                ctx.translate(-xPrime, -yPrime)
-                ctx.drawImage(arrowImg, xPrime - lineWidth / 2, yPrime - lineWidth / 2, lineWidth, lineWidth)
-                ctx.restore()
-                ctx.closePath()
-            }
-            else {
-                let tempImage = global.canvas2.createImage()
-                tempImage.src = require(props.currentDot.whiteIcon ? '@/assets/images/dot_arrow_white.png' : '@/assets/images/dot_arrow.png')//'./watch_line.png'//'..//assets/images/watch_line.png'
-                tempImage.onload = () => {
-                    arrowImg = tempImage
-                    ctx.save()
-                    ctx.beginPath()
-                    ctx.translate(xPrime, yPrime)
-                    ctx.rotate(arc)
-                    ctx.translate(-xPrime, -yPrime)
-                    ctx.drawImage(arrowImg, xPrime - lineWidth / 2, yPrime - lineWidth / 2, lineWidth, lineWidth)
-                    ctx.restore()
-                    ctx.closePath()
-                }
-            }
+            // if (arrowImg) {
+            //     //绘制终点图标
+            //     ctx.save()
+            //     ctx.beginPath()
+            //     ctx.translate(xPrime, yPrime)
+            //     ctx.rotate(arc)
+            //     ctx.translate(-xPrime, -yPrime)
+            //     ctx.drawImage(arrowImg, xPrime - lineWidth / 2, yPrime - lineWidth / 2, lineWidth, lineWidth)
+            //     ctx.restore()
+            //     ctx.closePath()
+            // }
+            // else {
+            //     let tempImage = global.canvas2.createImage()
+            //     tempImage.src = require(props.currentDot.whiteIcon ? '@/assets/images/dot_arrow_white.png' : '@/assets/images/dot_arrow.png')//'./watch_line.png'//'..//assets/images/watch_line.png'
+            //     tempImage.onload = () => {
+            //         arrowImg = tempImage
+            //         ctx.save()
+            //         ctx.beginPath()
+            //         ctx.translate(xPrime, yPrime)
+            //         ctx.rotate(arc)
+            //         ctx.translate(-xPrime, -yPrime)
+            //         ctx.drawImage(arrowImg, xPrime - lineWidth / 2, yPrime - lineWidth / 2, lineWidth, lineWidth)
+            //         ctx.restore()
+            //         ctx.closePath()
+            //     }
+            // }