update

src/context/themes/color.tsx

@@ -8,5 +8,5 @@ export enum ColorType {
     workout = 'yellow',
     alert = '#ea6c6c',
     night = '#1446B9',
-    day = '#C9DAFF',
+    day = '#8CC8E2',
 }

src/features/trackTimeDuration/components/CircadianDetailPopup.tsx

@@ -45,6 +45,7 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
     }, [])
 
     useEffect(() => {
+        debugger
         checkTimezone()
         // var current_record = props.record
         if (detail.fast)
@@ -55,12 +56,14 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
     }, [detail])
 
     useEffect(() => {
+        debugger
         setDetail(JSON.parse(JSON.stringify(props.record)))
     }, [props.record])
 
 
 
     function checkTimezone() {
+        debugger
         var split = new Date().toString().split(' ');
         var currentTZ = split[split.length - 2];
         var isDiff = false;
@@ -156,16 +159,47 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
         var start, end;
         switch (index) {
             case 0:
-                start = props.record.fast.real_start_time
-                end = props.record.sleep.real_start_time
+                if (props.record.status == 'WAIT_FOR_START') {
+                    start = props.record.fast.target_start_time
+                    end = props.record.sleep.target_start_time
+                }
+                else if (props.record.status == 'ONGOING1') {
+                    return TimeFormatter.countdown(props.record.fast.real_start_time)
+                }
+                else {
+                    start = props.record.fast.real_start_time
+                    end = props.record.sleep.real_start_time
+                }
+
                 break
             case 1:
-                start = props.record.sleep.real_start_time
-                end = props.record.sleep.real_end_time
+                if (props.record.status == 'WAIT_FOR_START' ||
+                    props.record.status == 'ONGOING1') {
+                    start = props.record.sleep.target_start_time
+                    end = props.record.sleep.target_end_time
+                }
+                else if (props.record.status == 'ONGOING2') {
+                    return TimeFormatter.countdown(props.record.sleep.real_start_time)
+                }
+                else {
+                    start = props.record.sleep.real_start_time
+                    end = props.record.sleep.real_end_time
+                }
                 break
             case 2:
-                start = props.record.sleep.real_end_time
-                end = props.record.fast.real_end_time
+                if (props.record.status == 'WAIT_FOR_START' ||
+                    props.record.status == 'ONGOING1' ||
+                    props.record.status == 'ONGOING2') {
+                    start = props.record.sleep.target_end_time
+                    end = props.record.fast.target_end_time
+                }
+                else if (props.record.status == 'ONGOING3'){
+                    return TimeFormatter.countdown(props.record.sleep.real_end_time)
+                }
+                else {
+                    start = props.record.sleep.real_end_time
+                    end = props.record.fast.real_end_time
+                }
                 break
             case 3:
                 start = props.record.fast.real_start_time
@@ -185,7 +219,7 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
                 end = props.record.sleep.real_end_time
                 break;
         }
-        return TimeFormatter.durationFormate(start, end)
+        return TimeFormatter.durationFormate2(start, end)
     }
 
     function completedOverView() {
@@ -375,8 +409,8 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
         if (props.record.fast.status == 'WAIT_FOR_START') {
             return <View className='pop_ring_bg pop_overview_bg'>
                 <Text className='pop_duration_title'>{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
-                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
-                    <Text onClick={() => tapDuration(true)} className='pop_duration_txt' style={{ color: ColorType.fast }}>{TimeFormatter.durationFormate(detail.fast.target_start_time, detail.fast.target_end_time)}</Text>
+                <View onClick={() => tapDuration(true)} style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
+                    <Text className='pop_duration_txt' style={{ color: ColorType.fast }}>{TimeFormatter.durationFormate(detail.fast.target_start_time, detail.fast.target_end_time)}</Text>
                     <View onClick={() => tapMinus(true)} className='minus' style={{ backgroundColor: ColorType.fast, opacity: 0.6 }}><IconMinus color='#090909' /></View>
                     <View onClick={() => tapPlus(true)} className='plus' style={{ backgroundColor: ColorType.fast }}><IconPlus color='#090909' /></View>
                 </View>
@@ -385,8 +419,8 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
         else if (props.record.status != 'COMPLETED') {
             return <View className='pop_ring_bg pop_overview_bg'>
                 <Text className='pop_duration_title'>{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
-                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
-                    <Text onClick={() => tapDuration(true)} className='pop_duration_txt'>{TimeFormatter.durationFormate(detail.fast.target_start_time, detail.fast.target_end_time)}</Text>
+                <View onClick={() => tapDuration(true)} style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
+                    <Text  className='pop_duration_txt'>{TimeFormatter.durationFormate(detail.fast.target_start_time, detail.fast.target_end_time)}</Text>
                     <Image onClick={() => tapDuration(true)} className="arrow2" src={require('@/assets/images/arrow3.png')} />
                 </View>
                 <View style={{ marginTop: rpxToPx(20), display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
@@ -416,8 +450,8 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
         if (props.record.sleep.status == 'WAIT_FOR_START') {
             return <View className='pop_ring_bg pop_overview_bg'>
                 <Text className='pop_duration_title'>{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
-                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
-                    <Text onClick={() => tapDuration(false)} className='pop_duration_txt' style={{ color: ColorType.sleep }}>{TimeFormatter.durationFormate(detail.sleep.target_start_time, detail.sleep.target_end_time)}</Text>
+                <View onClick={() => tapDuration(false)} style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
+                    <Text className='pop_duration_txt' style={{ color: ColorType.sleep }}>{TimeFormatter.durationFormate(detail.sleep.target_start_time, detail.sleep.target_end_time)}</Text>
                     <View onClick={() => tapMinus(false)} className='minus' style={{ backgroundColor: ColorType.sleep, opacity: 0.6 }}><IconMinus color='#090909' /></View>
                     <View onClick={() => tapPlus(false)} className='plus' style={{ backgroundColor: ColorType.sleep }}><IconPlus color='#090909' /></View>
                 </View>
@@ -426,8 +460,8 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
         else if (props.record.sleep.status == 'WAIT_FOR_END') {
             return <View className='pop_ring_bg pop_overview_bg'>
                 <Text className='pop_duration_title'>{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
-                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
-                    <Text onClick={() => tapDuration(false)} className='pop_duration_txt'>{TimeFormatter.durationFormate(detail.sleep.target_start_time, detail.sleep.target_end_time)}</Text>
+                <View onClick={() => tapDuration(false)} style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
+                    <Text  className='pop_duration_txt'>{TimeFormatter.durationFormate(detail.sleep.target_start_time, detail.sleep.target_end_time)}</Text>
                     <Image onClick={() => tapDuration(false)} className="arrow2" src={require('@/assets/images/arrow3.png')} />
                 </View>
                 <View style={{ marginTop: rpxToPx(20), display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
@@ -479,23 +513,134 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
         var common = getCommon(null, false)
         common.radius = bigRingRadius;
         common.lineWidth = ringWidth;
+        var timestamp, timestamp2, timestamp3
+        var duration, duration2, duration3;
+        if (props.record.status == 'WAIT_FOR_START') {
+            var date = new Date()
+            date.setSeconds(0)
+            date.setMilliseconds(0)
+            var fastStart = props.schedule.fast.start_time
+            var sleepStart = props.schedule.sleep.start_time
+            var sleepEnd = props.schedule.sleep.end_time
+            date.setHours(parseInt(fastStart.split(':')[0]))
+            date.setMinutes(parseInt(fastStart.split(':')[1]))
+
+            timestamp = date.getTime()
+            date.setHours(parseInt(sleepStart.split(':')[0]))
+            date.setMinutes(parseInt(sleepStart.split(':')[1]))
+            timestamp2 = date.getTime()
+            if (timestamp2 < timestamp) {
+                timestamp2 += 24 * 3600 * 1000
+            }
+            date.setHours(parseInt(sleepEnd.split(':')[0]))
+            date.setMinutes(parseInt(sleepEnd.split(':')[1]))
+            timestamp3 = date.getTime()
+            if (timestamp3 < timestamp2) {
+                timestamp3 += 24 * 3600 * 1000
+            }
+
+            duration = durationArc(props.record.fast.target_start_time, props.record.sleep.target_start_time)
+            duration2 = durationArc(props.record.sleep.target_start_time, props.record.sleep.target_end_time)
+            duration3 = durationArc(props.record.sleep.target_end_time, props.record.fast.target_end_time)
+        }
+        else if (props.record.status == 'ONGOING1') {
+            var date = new Date()
+            timestamp = props.record.fast.real_start_time
+            timestamp2 = props.record.sleep.target_start_time
+            timestamp3 = props.record.sleep.target_end_time
+            duration = durationArc(props.record.fast.real_start_time, date.getTime())
+            duration2 = durationArc(props.record.sleep.target_start_time, props.record.sleep.target_end_time)
+            duration3 = durationArc(props.record.sleep.target_end_time, props.record.fast.target_end_time)
+        }
+        else if (props.record.status == 'ONGOING2') {
+            var date = new Date()
+            timestamp = props.record.fast.real_start_time
+            timestamp2 = props.record.sleep.real_start_time
+            timestamp3 = props.record.sleep.target_end_time
+            duration = durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
+            duration2 = durationArc(props.record.sleep.real_start_time, date.getTime())
+            duration3 = durationArc(props.record.sleep.target_end_time, props.record.fast.target_end_time)
+        }
+        else if (props.record.status == 'ONGOING3'){
+            var date = new Date()
+            timestamp = props.record.fast.real_start_time
+            timestamp2 = props.record.sleep.real_start_time
+            timestamp3 = props.record.sleep.real_end_time
+            duration = durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
+            duration2 = durationArc(props.record.sleep.real_start_time, props.record.sleep.real_end_time)
+            duration3 = durationArc(props.record.sleep.real_end_time, date.getTime())
+        }
+        else {
+            timestamp = TimeFormatter.transferTimestamp(props.record.fast.real_start_time, props.record.fast.real_end_time_zone)
+            timestamp2 = TimeFormatter.transferTimestamp(props.record.sleep.real_start_time, props.record.fast.real_end_time_zone)
+            timestamp3 = TimeFormatter.transferTimestamp(props.record.sleep.real_end_time, props.record.fast.real_end_time_zone)
+            duration = durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
+            duration2 = durationArc(props.record.sleep.real_start_time, props.record.sleep.real_end_time)
+            duration3 = durationArc(props.record.sleep.real_end_time, props.record.fast.real_end_time)
+        }
+
+        const preRing: RealRing = {
+            color: global.fastColor ? global.fastColor : ColorType.fast,
+            startArc: startArc(timestamp),
+            durationArc: duration
+        }
+        const sleepRing: RealRing = {
+            color: global.sleepColor ? global.sleepColor : ColorType.sleep,
+            startArc: startArc(timestamp2),
+            durationArc: duration2
+        }
+        const wakeRing: RealRing = {
+            color: global.fastColor ? global.fastColor : ColorType.fast,
+            startArc: startArc(timestamp3),
+            durationArc: duration3
+        }
+        return <View>
+            <View className='pop_ring_bg'>
+                <Rings common={common} bgRing={bgRing} canvasId={'pre_sleep_ring'} realRing={preRing} />
+                <View className="pop_duration_bg">
+                    <Text className="pop_duration_title">{t('feature.track_time_duration.stage.a')}</Text>
+                    <Text className="pop_duration_value" style={{ color: ColorType.fast }}>{getStageDuration(0)}</Text>
+                </View>
+            </View>
+            <View className='pop_ring_bg'>
+                <Rings common={common} bgRing={bgRing} canvasId={'sleeping_ring'} realRing={sleepRing} />
+                <View className="pop_duration_bg">
+                    <Text className="pop_duration_title">{t('feature.track_time_duration.stage.b')}</Text>
+                    <Text className="pop_duration_value" style={{ color: ColorType.sleep }}>{getStageDuration(1)}</Text>
+                </View>
+            </View>
+            <View className='pop_ring_bg'>
+                <Rings common={common} bgRing={bgRing} canvasId={'later_sleep_ring'} realRing={wakeRing} />
+                <View className="pop_duration_bg">
+                    <Text className="pop_duration_title">{t('feature.track_time_duration.stage.c')}</Text>
+                    <Text className="pop_duration_value" style={{ color: ColorType.fast }}>{getStageDuration(2)}</Text>
+                </View>
+            </View>
+        </View>
+    }
+
+    function stage2() {
+        var bgRing = getBgRing()
+        var common = getCommon(null, false)
+        common.radius = bigRingRadius;
+        common.lineWidth = ringWidth;
 
         var timestamp = TimeFormatter.transferTimestamp(props.record.fast.real_start_time, props.record.fast.real_end_time_zone)
         var timestamp2 = TimeFormatter.transferTimestamp(props.record.sleep.real_start_time, props.record.fast.real_end_time_zone)
         var timestamp3 = TimeFormatter.transferTimestamp(props.record.sleep.real_end_time, props.record.fast.real_end_time_zone)
         const preRing: RealRing = {
             color: global.fastColor ? global.fastColor : ColorType.fast,
-            startArc: startArc(timestamp),//startArc(props.record.fast.real_start_time),
+            startArc: startArc(timestamp),
             durationArc: durationArc(props.record.fast.real_start_time, props.record.sleep.real_start_time)
         }
         const sleepRing: RealRing = {
             color: global.sleepColor ? global.sleepColor : ColorType.sleep,
-            startArc: startArc(timestamp2),//startArc(props.record.sleep.real_start_time),
+            startArc: startArc(timestamp2),
             durationArc: durationArc(props.record.sleep.real_start_time, props.record.sleep.real_end_time)
         }
         const wakeRing: RealRing = {
             color: global.fastColor ? global.fastColor : ColorType.fast,
-            startArc: startArc(timestamp3),//startArc(props.record.sleep.real_end_time),
+            startArc: startArc(timestamp3),
             durationArc: durationArc(props.record.sleep.real_end_time, props.record.fast.real_end_time)
         }
         return <View>
@@ -654,14 +799,15 @@ export default function CircadianDetailPopup(props: { record: any, schedule?: an
         return <View />
     }
 
+
     return <View className='detail_container'>
 
         <Text className='detail_popup_title'>{getTitle()}<Text className='detail_popup_subttitle'> {getSubTitle()}</Text></Text>
         <View className='detail_tabbar'>
             <View onClick={() => { setTabIndex(0) }} className={tabIndex == 0 ? 'detail_tabitem_sel' : 'detail_tabitem_nor'}>{t('feature.day_night.overview')}</View>
             {
-                props.record.status == 'COMPLETED' &&
-                (props.record.sleep && props.record.sleep.status == 'COMPLETED') &&
+                // props.record.status == 'COMPLETED' &&
+                // (props.record.sleep && props.record.sleep.status == 'COMPLETED') &&
                 props.record.scenario == 'FAST_SLEEP' &&
                 <View onClick={() => { setTabIndex(1) }} className={tabIndex == 1 ? 'detail_tabitem_sel' : 'detail_tabitem_nor'}>{t('feature.day_night.stages')}</View>
             }

src/features/trackTimeDuration/components/DayNightCard.scss

@@ -87,10 +87,10 @@
 .day_location_btn {
     background-color: #C9DAFF33;
     color: #C9DAFF;
-    height: 48px;
-    padding-left: 24px;
-    padding-right: 24px;
-    border-radius: 24px;
+    height: 72px;
+    padding-left: 48px;
+    padding-right: 48px;
+    border-radius: 36px;
     text-align: center;
     font-size: 24px;
     font-weight: bold;
@@ -102,10 +102,10 @@
 .night_location_btn {
     background-color: #1446B933;
     color: #1446B9;
-    height: 48px;
-    padding-left: 24px;
-    padding-right: 24px;
-    border-radius: 24px;
+    height: 72px;
+    padding-left: 48px;
+    padding-right: 48px;
+    border-radius: 36px;
     text-align: center;
     font-size: 24px;
     font-weight: bold;
@@ -160,6 +160,15 @@
     opacity: 0.6;
 }
 
+.duration_value22{
+    font-weight: bold;
+    font-size: 36px;
+    line-height: 36px;
+    margin-top: 8px;
+    display: flex;
+    flex-shrink: 0;
+}
+
 .daynightsummary{
     display: flex;
     flex-direction: row;
@@ -168,5 +177,41 @@
 
 .sunicon{
     width: 72px;
-    height: 66px;
+    height: 72px;
+    margin-right: -8px;//-40px;
+}
+
+.sunicon_bg{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.content_icon_bg{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    // background-color: pink;
+}
+
+.sunrise_item{
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+}
+
+.arrow2 {
+    width: 48px;
+    height: 48px;
+    opacity: 0.2;
+}
+
+.myMap{
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 0;
 }

src/features/trackTimeDuration/components/DayNightCard.tsx

@@ -19,6 +19,7 @@ import { IconDay, IconInfo, IconNight } from '@/components/basic/Icons'
 import { getClocks } from '@/services/trackTimeDuration'
 import { request } from '@/services/http/request'
 import { API_USER_LOCATION } from '@/services/http/api'
+import { bigRingRadius, ringWidth } from '../hooks/RingData'
 
 let useNavigation;
 if (process.env.TARO_ENV == 'rn') {
@@ -389,7 +390,7 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
                         date_end: strTomorrow,
                         // coordinate_system_standard: 'GCJ-02'
                     }).then(data => {
-                        console.log('get Location',data)
+                        console.log('get Location', data)
                         updateDate(data);
                         locationDetail = data;
                         global.locationDetail = locationDetail
@@ -714,60 +715,60 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         if (props.isNight) {
             if (!authInfo || !(authInfo as any).lat) {
                 if (new Date().getHours() >= 6) {
-                    return `${t('feature.day_night.tonight')} ${sunsetTime}`
+                    return `${sunsetTime}`
                 }
-                return `${t('feature.day_night.last_night')} ${sunsetTime}`
+                return `${sunsetTime}`
                 // return `Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
             }
             if (nightDate.getDate() == new Date().getDate()) {
-                return `${t('feature.day_night.tonight')} ${sunsetTime.substring(0, 5)}`
+                return `${sunsetTime.substring(0, 5)}`
             }
-            return `${t('feature.day_night.last_night')} ${sunsetTime.substring(0, 5)}`
+            return `${sunsetTime.substring(0, 5)}`
         }
         if (!authInfo || !(authInfo as any).lat) {
             if (new Date().getHours() >= 18) {
-                return `${t('feature.day_night.tomorrow')} ${sunriseTime}`
+                return `${sunriseTime}`
 
                 // return `Tomorrow ${sunriseTime} - ${sunsetTime}`
             }
-            return `${t('feature.day_night.today')} ${sunriseTime}`
+            return `${sunriseTime}`
             // return `Today ${sunriseTime} - ${sunsetTime}`
         }
         if (dayDate.getDate() == new Date().getDate()) {
-            return `${t('feature.day_night.today')} ${sunriseTime.substring(0, 5)}`
+            return `${sunriseTime.substring(0, 5)}`
             // return `Today ${sunriseTime} - ${sunsetTime}`
         }
-        return `${t('feature.day_night.tomorrow')} ${sunriseTime.substring(0, 5)}`
+        return `${sunriseTime.substring(0, 5)}`
     }
 
     function getSunriseTime() {
         if (props.isNight) {
             if (!authInfo || !(authInfo as any).lat) {
                 if (new Date().getHours() >= 6) {
-                    return `${t('feature.day_night.tomorrow_morning')} ${sunriseTmrTime}`
+                    return `${sunriseTmrTime}`
                 }
-                return `${t('feature.day_night.this_morning')} ${sunriseTmrTime}`
+                return `${sunriseTmrTime}`
                 // return `Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
             }
             if (nightDate.getDate() == new Date().getDate()) {
-                return `${t('feature.day_night.tomorrow_morning')} ${sunriseTmrTime.substring(0, 5)}`
+                return `${sunriseTmrTime.substring(0, 5)}`
             }
-            return `${t('feature.day_night.this_morning')} ${sunriseTmrTime.substring(0, 5)}`
+            return `${sunriseTmrTime.substring(0, 5)}`
         }
         if (!authInfo || !(authInfo as any).lat) {
             if (new Date().getHours() >= 18) {
-                return `${t('feature.day_night.tomorrow')} ${sunsetTime}`
+                return `${sunsetTime}`
 
                 // return `Tomorrow ${sunriseTime} - ${sunsetTime}`
             }
-            return `${t('feature.day_night.today')} ${sunsetTime}`
+            return `${sunsetTime}`
             // return `Today ${sunriseTime} - ${sunsetTime}`
         }
         if (dayDate.getDate() == new Date().getDate()) {
-            return `${t('feature.day_night.today')} ${sunsetTime.substring(0, 5)}`
+            return `${sunsetTime.substring(0, 5)}`
             // return `Today ${sunriseTime} - ${sunsetTime}`
         }
-        return `${t('feature.day_night.tomorrow')} ${sunsetTime.substring(0, 5)}`
+        return `${sunsetTime.substring(0, 5)}`
     }
 
     function dayDuration() {
@@ -948,155 +949,208 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
 
     }
 
-    // return <View>
-    //     {
-    //         !user.isLogin && <View style={{ color: '#fff' }} onClick={tapShow}>{props.isNight ? '显示当地夜晚时间' : '显示当地白天时间'}</View>
-    //     }
-    //     {
-    //         user.isLogin && !dayStore.showDayRing && <View style={{ color: '#fff' }} onClick={auth}>{props.isNight ? '显示当地夜晚时间' : '显示当地白天时间'}</View>
-    //     }
-    //     {
-    //         user.isLogin && dayStore.showDayRing && <View style={{ display: 'flex', flexDirection: 'column' }} onClick={showLocationAlert} onLongPress={longClick}>
-    //             <Text className='day_night_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? nightDuration() : dayDuration()}</Text>
-    //             <Text className='day_night_desc'>{props.isNight ? nightDurationDesc1() : dayDurationDesc1()}</Text>
-
-    //             <View className='daynightsummary'>
-    //                 <View style={{ display: 'flex', flexDirection: 'column' }}>
-    //                     <Image className='sunicon' src={props.isNight ? require('@assets/images/sunset.png') :
-    //                         require('@assets/images/sunrise.png')} />
-    //                     <Image className='sunicon' src={props.isNight ? require('@assets/images/sunrise.png') :
-    //                         require('@assets/images/sunset.png')} />
-    //                 </View>
-    //                 <View style={{ display: 'flex', flexDirection: 'column' }}>
-    //                     <Text className='duration_title2'>{props.isNight ? '日落' : '日出'}</Text>
-    //                     <Text style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? getSunsetTime() : getSunriseTime()}</Text>
-    //                     <Text className='duration_title2'>{!props.isNight ? '日落' : '日出'}</Text>
-    //                     <Text style={{ color: !props.isNight ? ColorType.night : ColorType.day }}>{!props.isNight ? getSunsetTime() : getSunriseTime()}</Text>
-    //                 </View>
-    //             </View>
-    //             {
-    //                 authInfo && authInfo.lat ?
-    //                     <View style={{ display: 'flex', flexDirection: 'row', marginTop: rpxToPx(18) }} onClick={operate}>
-    //                         <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'}>{getLocation()}</View>
-    //                     </View>
-    //                     :
-    //                     <View style={{ display: 'flex', flexDirection: 'row', marginTop: rpxToPx(18) }} onClick={operate}>
-    //                         <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'} >
-    //                             {props.isNight ? t('feature.day_night.get_local_time') : t('feature.day_night.get_local_time_sunrise')}
-    //                         </View>
-    //                     </View>
-    //             }
-    //         </View>
-    //     }
-    //     {
-    //         showDetailPopup && modalContent()
-    //     }
-    //     {
-    //         showDetailModal && modalContent2()
-    //     }
-    // </View>
-
-    
-
-    return <View style={{ color: '#fff' }} onLongPress={longClick}>
-        <Box onClick={tapCard}>
-            <View style={{ marginTop: -rpxToPx(14), marginBottom: -rpxToPx(14) }}>
-                <View className='day_night_top'>
-                    {
-                        user.isLogin ? <Text className='day_night_title'>{props.isNight ? t('feature.day_night.night_ring_login') : t('feature.day_night.day_ring_login')}</Text> :
-                            <Text className='day_night_title'>{props.isNight ? t('feature.day_night.night_ring') : t('feature.day_night.day_ring')}</Text>
-                    }
-
-                    {
-                        user.isLogin && <View className='free' style={{ backgroundColor: props.isNight ? ColorType.night : ColorType.day, color: props.isNight ? '#fff' : '#1C1C1C' }}>{t('feature.day_night.limited_free')}</View>
-                    }
-
-                    <View style={{ flex: 1 }} />
-                    <View style={{ height: rpxToPx(50), display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
-                        <Switch checked={props.isNight ? dayStore.showDayRing : dayStore.showDayRing}
-                            className='switch'
-                            color={props.isNight ? ColorType.night : ColorType.day}
-                            onClick={(e) => { e.stopPropagation() }}
-                            onChange={(e) => {
-                                if (process.env.TARO_ENV == 'weapp') {
-                                    e.stopPropagation()
-                                }
-
-                                dispatch(showNight(e.detail.value))
-  
-                                dispatch(showDay(e.detail.value))
-
-
-                                Taro.setStorage({
-                                    key: 'showNightRing',
-                                    data: e.detail.value
-                                })
-                                Taro.setStorage({
-                                    key: 'showDayRing',
-                                    data: e.detail.value
-                                })
-
-
-                                if (user.isLogin) {
-                                    uploadPerm({ show_ring: e.detail.value })
-                                }
-                                else {
-
-                                    if (e.detail.value) {
-                                        setTimeout(() => {
-                                            Taro.showModal({
-                                                title: props.isNight ?
-                                                    t('feature.day_night.night_alert_title') :
-                                                    t('feature.day_night.day_alert_title'),
-                                                content: props.isNight ?
-                                                    t('feature.day_night.night_alert_content') :
-                                                    t('feature.day_night.day_alert_content'),
-                                                showCancel: false,
-                                                confirmText: t('feature.day_night.got_it')
-                                            })
-                                        }, 500)
-                                    }
-
-                                }
-
+    return <Box><View style={{position:'relative'}}>
+        {
+            !user.isLogin && <View style={{ color: '#fff' }} onClick={tapShow}>{props.isNight ? '显示当地夜晚时间' : '显示当地白天时间'}</View>
+        }
+        {
+            user.isLogin && !dayStore.showDayRing && <View style={{ color: '#fff' }} onClick={auth}>{props.isNight ? '显示当地夜晚时间' : '显示当地白天时间'}</View>
+        }
+        {/* {
+            user.isLogin && dayStore.showDayRing && <Map className='myMap' latitude={80} longitude={80}/>
+        } */}
+        {
+            user.isLogin && dayStore.showDayRing && <View style={{ display: 'flex', flexDirection: 'column',zIndex:1 }} onClick={showLocationAlert} onLongPress={longClick}>
+
+                <View style={{
+                    display: 'flex', flexDirection: 'row',
+                    alignItems: 'center', justifyContent: 'space-between',
+                    // paddingRight: 14,
+                    marginRight: rpxToPx(8)
+                }}>
+                    <View style={{ display: 'flex', flexDirection: 'column' }}>
+                        <View style={{
+                            marginLeft: rpxToPx(-40),
+                            paddingLeft: rpxToPx(48),
+                        }}>
+                            <View className='sunrise_item' style={{
+                                marginLeft: -6,
+                                paddingLeft: 14,
+                            }}>
+                                <View className='sunicon_bg' style={{
+                                    display: 'flex', flexDirection: 'column',
+                                    marginLeft: 0,
+                                    marginRight: rpxToPx(68)
+                                }}>
+                                    <View className='content_icon_bg' style={{ width: bigRingRadius * 2 + ringWidth }}>
+                                        <Image className='sunicon' src={props.isNight ? require('@assets/images/sunset.png') :
+                                            require('@assets/images/sunrise.png')} />
+                                    </View>
+                                </View>
+                                <View style={{ display: 'flex', flexDirection: 'column',  flexShrink: 0 }}>
+                                    <Text className='duration_title2'>{props.isNight ? '日落' : '日出'}</Text>
+                                    <Text className='duration_value22' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? getSunsetTime() : getSunriseTime()}</Text>
 
-                            }}
-                        />
-                    </View>
-                </View>
-                {
-                    user.isLogin && dayStore.showDayRing && <View className='day_night_detail' onClick={showLocationAlert}>
-                        <View className='day_night_detail_icon'>
-                            {
-                                props.isNight ? <IconNight width={rpxToPx(48)} color={ColorType.night} /> : <IconDay width={rpxToPx(48)} color={ColorType.day} />
-                            }
+                                </View>
+                            </View>
                         </View>
-                        <View style={{ display: 'flex', flexDirection: 'column', paddingTop: rpxToPx(8) }}>
-                            <Text className='day_night_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? nightDuration() : dayDuration()}</Text>
-                            <Text className='day_night_desc'>{props.isNight ? nightDurationDesc1() : dayDurationDesc1()}</Text>
-                            {
-                                authInfo && authInfo.lat ?
-                                    <View style={{ display: 'flex', flexDirection: 'row', marginTop: rpxToPx(18) }} onClick={auth}>
-                                        <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'} onClick={auth}>{getLocation()}</View>
-                                    </View>
-                                    :
-                                    <View style={{ display: 'flex', flexDirection: 'row', marginTop: rpxToPx(18) }} onClick={auth}>
-                                        <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'} onClick={auth}>
-                                            {props.isNight ? t('feature.day_night.get_local_time') : t('feature.day_night.get_local_time_sunrise')}
-                                        </View>
+
+                        <View style={{
+                            marginLeft: rpxToPx(-40),
+                            paddingLeft: rpxToPx(48),
+                            marginTop: rpxToPx(20)
+                        }}>
+                            <View className='sunrise_item' style={{
+                                marginLeft: -6,
+                                paddingLeft: 14,
+                            }}>
+                                <View className='sunicon_bg' style={{
+                                    display: 'flex', flexDirection: 'column',
+                                    marginLeft: 0,
+                                    marginRight: rpxToPx(68)
+                                }}>
+                                    <View className='content_icon_bg' style={{ width: bigRingRadius * 2 + ringWidth }}>
+                                        <Image className='sunicon' src={!props.isNight ? require('@assets/images/sunset.png') :
+                                            require('@assets/images/sunrise.png')} />
                                     </View>
-                            }
+                                </View>
+                                <View style={{ display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
+                                    <Text className='duration_title2'>{!props.isNight ? '日落' : '日出'}</Text>
+                                    <Text className='duration_value22' style={{ color: !props.isNight ? ColorType.night : ColorType.day }}>{!props.isNight ? getSunsetTime() : getSunriseTime()}</Text>
+
+                                </View>
+                            </View>
                         </View>
                     </View>
-                }
+                    <Image className="arrow2" src={require('@/assets/images/arrow3.png')} />
+                </View>
+                <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: rpxToPx(36) }}>
 
+                    {
+                        authInfo && authInfo.lat ?
+                            <View style={{ display: 'flex', flexDirection: 'row' }} onClick={operate}>
+                                <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'}>{getLocation()}</View>
+                            </View>
+                            :
+                            <View style={{ display: 'flex', flexDirection: 'row' }} onClick={operate}>
+                                <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'} >
+                                    {props.isNight ? t('feature.day_night.get_local_time') : t('feature.day_night.get_local_time_sunrise')}
+                                </View>
+                            </View>
+                    }
+                </View>
             </View>
-        </Box >
+        }
         {
             showDetailPopup && modalContent()
         }
         {
             showDetailModal && modalContent2()
         }
-    </View >
+    </View>
+    </Box>
+
+
+    /*
+        return <View style={{ color: '#fff' }} onLongPress={longClick}>
+            <Box onClick={tapCard}>
+                <View style={{ marginTop: -rpxToPx(14), marginBottom: -rpxToPx(14) }}>
+                    <View className='day_night_top'>
+                        {
+                            user.isLogin ? <Text className='day_night_title'>{props.isNight ? t('feature.day_night.night_ring_login') : t('feature.day_night.day_ring_login')}</Text> :
+                                <Text className='day_night_title'>{props.isNight ? t('feature.day_night.night_ring') : t('feature.day_night.day_ring')}</Text>
+                        }
+    
+                        {
+                            user.isLogin && <View className='free' style={{ backgroundColor: props.isNight ? ColorType.night : ColorType.day, color: props.isNight ? '#fff' : '#1C1C1C' }}>{t('feature.day_night.limited_free')}</View>
+                        }
+    
+                        <View style={{ flex: 1 }} />
+                        <View style={{ height: rpxToPx(50), display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
+                            <Switch checked={props.isNight ? dayStore.showDayRing : dayStore.showDayRing}
+                                className='switch'
+                                color={props.isNight ? ColorType.night : ColorType.day}
+                                onClick={(e) => { e.stopPropagation() }}
+                                onChange={(e) => {
+                                    if (process.env.TARO_ENV == 'weapp') {
+                                        e.stopPropagation()
+                                    }
+    
+                                    dispatch(showNight(e.detail.value))
+      
+                                    dispatch(showDay(e.detail.value))
+    
+    
+                                    Taro.setStorage({
+                                        key: 'showNightRing',
+                                        data: e.detail.value
+                                    })
+                                    Taro.setStorage({
+                                        key: 'showDayRing',
+                                        data: e.detail.value
+                                    })
+    
+    
+                                    if (user.isLogin) {
+                                        uploadPerm({ show_ring: e.detail.value })
+                                    }
+                                    else {
+    
+                                        if (e.detail.value) {
+                                            setTimeout(() => {
+                                                Taro.showModal({
+                                                    title: props.isNight ?
+                                                        t('feature.day_night.night_alert_title') :
+                                                        t('feature.day_night.day_alert_title'),
+                                                    content: props.isNight ?
+                                                        t('feature.day_night.night_alert_content') :
+                                                        t('feature.day_night.day_alert_content'),
+                                                    showCancel: false,
+                                                    confirmText: t('feature.day_night.got_it')
+                                                })
+                                            }, 500)
+                                        }
+    
+                                    }
+    
+    
+                                }}
+                            />
+                        </View>
+                    </View>
+                    {
+                        user.isLogin && dayStore.showDayRing && <View className='day_night_detail' onClick={showLocationAlert}>
+                            <View className='day_night_detail_icon'>
+                                {
+                                    props.isNight ? <IconNight width={rpxToPx(48)} color={ColorType.night} /> : <IconDay width={rpxToPx(48)} color={ColorType.day} />
+                                }
+                            </View>
+                            <View style={{ display: 'flex', flexDirection: 'column', paddingTop: rpxToPx(8) }}>
+                                <Text className='day_night_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? nightDuration() : dayDuration()}</Text>
+                                <Text className='day_night_desc'>{props.isNight ? nightDurationDesc1() : dayDurationDesc1()}</Text>
+                                {
+                                    authInfo && authInfo.lat ?
+                                        <View style={{ display: 'flex', flexDirection: 'row', marginTop: rpxToPx(18) }} onClick={auth}>
+                                            <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'} onClick={auth}>{getLocation()}</View>
+                                        </View>
+                                        :
+                                        <View style={{ display: 'flex', flexDirection: 'row', marginTop: rpxToPx(18) }} onClick={auth}>
+                                            <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'} onClick={auth}>
+                                                {props.isNight ? t('feature.day_night.get_local_time') : t('feature.day_night.get_local_time_sunrise')}
+                                            </View>
+                                        </View>
+                                }
+                            </View>
+                        </View>
+                    }
+    
+                </View>
+            </Box >
+            {
+                showDetailPopup && modalContent()
+            }
+            {
+                showDetailModal && modalContent2()
+            }
+        </View >*/
 }

src/features/trackTimeDuration/components/DayNightDetailPopup.tsx

@@ -232,7 +232,7 @@ export default function DayNightDetailPopup(props: {
                 {
                     status: showExtraData() ? 'done' : 'padding',
                     title: '日落',//list[0],
-                    content: list[0]+props.sunsetTime,
+                    content: list[0]+' '+props.sunsetTime,
                     date: '',
                     color: ColorType.night
                 }
@@ -242,7 +242,7 @@ export default function DayNightDetailPopup(props: {
                 {
                     status: 'padding',
                     title: '日出',//list[1],
-                    content: list[1]+props.sunriseTmrTime,
+                    content: list[1]+' '+props.sunriseTmrTime,
                     date: '',
                     color: ColorType.night
                 }
@@ -253,7 +253,7 @@ export default function DayNightDetailPopup(props: {
                 {
                     status: showExtraData() ? 'done' : 'padding',
                     title: '日出',//dayDurationDesc(),
-                    content: dayDurationDesc()+props.sunriseTime,
+                    content: dayDurationDesc()+' '+props.sunriseTime,
                     date: '',
                     color: ColorType.day
                 }
@@ -263,7 +263,7 @@ export default function DayNightDetailPopup(props: {
                 {
                     status: 'padding',
                     title: '日落',//dayDurationDesc(),
-                    content: dayDurationDesc()+props.sunsetTime,
+                    content: dayDurationDesc()+' '+props.sunsetTime,
                     date: '',
                     color: ColorType.day
                 }

src/features/trackTimeDuration/components/IndexItem.tsx

@@ -497,7 +497,8 @@ export default function Component(props: { type: string, data: any, time: any, s
         marginLeft: rpxToPx(-40),
         marginRight: rpxToPx(-40),
         marginTop: rpxToPx(-40),
-        padding: rpxToPx(48)
+        padding: rpxToPx(48),
+        
     }}>
         <View className="time_operate_item1" onClick={goDetail}>
             <View className="fast_sleep_item" style={{
@@ -506,7 +507,6 @@ export default function Component(props: { type: string, data: any, time: any, s
                 marginLeft: !props.showStage && day.showDayRing === true ? -6 : 0,
                 padding: !props.showStage && day.showDayRing === true ? 14 : 0,
                 paddingRight: 0,
-
             }}>
                 {
                     rings()

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

@@ -2,7 +2,7 @@ import { TimeFormatter } from "@/utils/time_format";
 import { View } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import { useRef } from "react";
-import Svg, { Circle, Path } from 'react-native-svg';
+import Svg, { Circle, Path, SvgUri } from 'react-native-svg';
 import { useSelector } from "react-redux";
 
 export type RingCommon = {
@@ -159,7 +159,14 @@ export default function Component(props: {
                     strokeLinecap="round"
                 />
             }
-            
+            {
+                props.currentDot && <SvgUri
+                    width={1000}
+                    height={1000}
+                    uri={require('@/assets/images/dot_arrow.png')}
+                />
+            }
+
             {
                 props.currentDot && <Circle
                     cx={center}

src/features/trackTimeDuration/components/TimelineFastSleep.tsx

@@ -248,8 +248,6 @@ export default function TimelineFastSleep(props: { data: any, title?: string, fi
         if (props.data.fast.real_end_time_zone) {
             timeZone = ' ' + props.data.fast.real_end_time_zone
         }
-
-        console.log(timeZone, multTimeZone, diffTimeZone, props.data.status)
         if (props.data.status != 'WAIT_FOR_START' && props.data.status != 'COMPLETED') {
             if ((!timeZone || timeZone.length == 0) && (multTimeZone || diffTimeZone)) {
                 timeZone = props.data.last_time_zone

src/features/trackTimeDuration/components/WeekCalendarItem.tsx

@@ -65,7 +65,6 @@ export default function WeekCalendarItem(props: { data: any, isCurrentWeek: bool
     }, [props.data])
 
     useEffect(() => {
-        debugger
         if (timer)
             clearInterval(timer)
         if (props.isCurrentWeek) {

src/services/http/api.js

@@ -1,4 +1,4 @@
-let online = process.env.TARO_ENV == 'rn' ? false : true;
+let online = process.env.TARO_ENV == 'rn' ? false : false;
 export let baseUrl = online ? 'https://api.fast.liveplus.fun' : 'https://api.fast.dev.liveplus.fun';
 export let imgUrl = online
     ? 'https://api.fast.liveplus.fun/static/image/'

src/utils/time_format.ts

@@ -323,6 +323,23 @@ export class TimeFormatter {
     return TimeFormatter.calculateTimeDifference(start, end)
   }
 
+  static durationFormate2(startTimestamp: number, endTimestamp: number) {
+    var start = startTimestamp;
+    var end = endTimestamp;
+    const diff = Math.abs(end - start);
+    if (diff > 60000) {
+      var startTime = new Date(start)
+      startTime.setSeconds(0)
+      startTime.setMilliseconds(0)
+      var endTime = new Date(end)
+      endTime.setSeconds(0)
+      endTime.setMilliseconds(0)
+
+      start = startTime.getTime()
+      end = endTime.getTime()
+    }
+    return TimeFormatter.calculateTimeDifference(start, end)
+  }
 
   //计算时间间隔
   static calculateTimeDifference(startTimestamp: number, endTimestamp: number, ingoreSeconds?: boolean): string {