update

src/components/LimitPickers.scss

@@ -6,13 +6,26 @@
             rgba(28, 28, 28, 0) 55%,
             rgba(28, 28, 28, 1) 100%);
     background-size: 750px 500px !important;
-    height: 500px;
+    height: 500px ;
     background-position: center center;
     background-repeat: no-repeat;
     z-index: 9;
 }
 
-.picker{
+.picker {
     background-size: 750px 500px !important;
     height: 500px;
+}
+
+.point_bg1 {
+    position: absolute;
+    width: 150px;
+    // height: 500px;
+    left: 468px;
+    top: 0px;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
 }

src/components/LimitPickers.tsx

@@ -7,8 +7,9 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
     const today = new Date();
     const [values, setValues] = useState([props.limitDay ? props.limitDay - 1 : 6, today.getHours(), today.getMinutes()])
 
-
+    debugger
     useEffect(() => {
+        global.picker_time = global.set_time
         if (props.time) {
             var date = new Date(props.time)
             setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(date), date.getHours(), date.getMinutes()])
@@ -18,8 +19,20 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
     //     setValues([6, today.getHours(), today.getMinutes()])
     // }, [props.limit])
 
+    useEffect(() => {
+        var date = new Date();
+        if (!props.isRealTime) {
+            date = new Date(global.set_time);
+        }
+
+        date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
+        date.setHours(values[1])
+        date.setMinutes(values[2])
+        global.picker_time = date.getTime()
+    }, [values])
+
 
-    for (let i = props.limitDay ? props.limitDay - 1 : 7; i >= 0; i--) {
+    for (let i = props.limitDay ? props.limitDay - 1 : 6; i >= 0; i--) {
         const date = new Date();
         date.setDate(today.getDate() - i);
 
@@ -82,8 +95,11 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
         const day = date.getDate();
 
         const time = `${year}-${expandZero(month)}-${expandZero(day)}T${expandZero(hours[list[1]])}:${expandZero(minutes[list[2]])}:00`;
-        if (getTimestamp(time) > today.getTime()) {
-            setValues([list[0], today.getHours(), today.getMinutes()])
+        // if (getTimestamp(time) > today.getTime()) {
+        //     setValues([list[0], today.getHours(), today.getMinutes()])
+        // }
+        if (getTimestamp(time) > global.set_time) {
+            setValues([list[0], (new Date(global.set_time)).getHours(), (new Date(global.set_time)).getMinutes()])
         }
         else {
             var limitDate = new Date(props.limit)
@@ -102,6 +118,9 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
             }
 
             setValues(e.detail.value)
+
+            //把picker变动时间存储起来
+            setPickerTime();
         }
 
     }
@@ -126,12 +145,17 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
     //     props.onChange(date.getTime())
     // }
 
-    function getConfirmData(){
+    function setPickerTime() {
+
+    }
+
+    function getConfirmData() {
         var date = new Date();
         if (!props.isRealTime) {
             date = new Date(global.set_time);
         }
 
+
         date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
         date.setHours(values[1])
         date.setMinutes(values[2])
@@ -139,7 +163,7 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
     }
 
     useImperativeHandle(ref, () => ({
-        getConfirmData:getConfirmData
+        getConfirmData: getConfirmData
     }));
 
 
@@ -174,11 +198,8 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
             </PickerViewColumn>
         </PickerView>
 
-        <View style={{
-            position: 'absolute', width: '20%', height: 50, backgroundColor: 'transparent', left: '62.5%', top: 125,
-            display: 'flex', alignItems: 'center', justifyContent: 'center'
-        }}>
-            <Text style={{ color: '#000', fontSize: 16, fontWeight: 'bold' }}>:</Text>
+        <View className="point_bg1 ">
+            <Text style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>:</Text>
         </View>
     </View>
 })

src/components/Modal.scss

@@ -9,7 +9,7 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    background-color: rgba($color: #000000, $alpha: 0.5);
+    background-color: rgba($color: #000000, $alpha: 0.9);
 }
 
 

src/components/Modal.tsx

@@ -1,8 +1,10 @@
 import { View, Text } from '@tarojs/components'
 import './Modal.scss'
+import React from 'react';
 
 export default function Modal(props: {
     children: React.ReactNode,
+    testInfo?:React.ReactNode,
     title?: string, dismiss: Function,
     confirm: Function,
     themeColor?: string,
@@ -22,7 +24,11 @@ export default function Modal(props: {
 
     return <View className='modal' catchMove>
 
-        <View style={{ flex: 1 }} onClick={() => props.dismiss()}></View>
+        <View style={{ flex: 1 }} onClick={() => props.dismiss()}>
+            {
+                props.testInfo ? props.testInfo : null
+            }
+        </View>
         <View className='modal_content'>
             <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
             {

src/features/trackSomething/components/Metric.tsx

@@ -3,7 +3,7 @@ import './Metric.scss'
 import { setAuth } from "../hooks/werun";
 import { usePullDownRefresh, useReady } from "@tarojs/taro";
 import { useSelector } from "react-redux";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Taro from "@tarojs/taro";
 import { metricCards, uploadMetric, uploadSteps } from "@/services/trackSomething";
 import { TimeFormatter } from "@/utils/time_format";
@@ -34,6 +34,7 @@ export default function Component(props: any) {
 
     const [setupTime, setSetupTime] = useState(0)
     const [triggered, setTriggered] = useState(true)
+    const limitPickerRef = useRef<any>(null);
 
 
     //未登录<->已登录 状态切换时，执行一次授权检查
@@ -327,8 +328,10 @@ export default function Component(props: any) {
                             (metricItem as any).schemas.map((item, index) => {
                                 return <View key={index}>
                                     {
-                                        (metricItem as any).schemas.length > 1 && <Text style={{ textAlign: 'center', width: '100%', display: 'flex', 
-                                        justifyContent: 'center',color: (metricItem as any).theme_color}}>{item.name}</Text>
+                                        (metricItem as any).schemas.length > 1 && <Text style={{
+                                            textAlign: 'center', width: '100%', display: 'flex',
+                                            justifyContent: 'center', color: (metricItem as any).theme_color
+                                        }}>{item.name}</Text>
                                     }
                                     <SlidngScale step={item.step} min={item.min} max={item.max} default_value={item.default_value}
                                         unit={item.default_unit}
@@ -354,8 +357,14 @@ export default function Component(props: any) {
         }
         {
 
-            isTimePickerOpen && <Modal dismiss={() => setIsTimePickerOpen(false)}>
-                <LimitPickers isRealTime={true} time={time} limit={limit} limitDay={180} onCancel={() => { setIsTimePickerOpen(false) }} onChange={(e) => {
+            isTimePickerOpen && <Modal
+                themeColor={(metricItem as any).theme_color}
+                dismiss={() => setIsTimePickerOpen(false)} confirm={() => {
+                    var picker = limitPickerRef.current;
+                    chooseTime((picker as any).getConfirmData());
+                    setIsTimePickerOpen(false);
+                }}>
+                <LimitPickers ref={limitPickerRef} isRealTime={true} time={time} limit={limit} limitDay={180} onCancel={() => { setIsTimePickerOpen(false) }} onChange={(e) => {
                     chooseTime(e)
                     //  pickerConfirm(e)
                     //  hidePicker()

src/features/trackTimeDuration/components/Clock.tsx

@@ -27,6 +27,8 @@ export default function Component() {
     //外环
     function bigRing() {
         var common = getCommon(null, true)
+        common.radius = 111;
+        common.lineWidth = 28;
         var bgRing = getBgRing()
         if (!checkData) {
             var currentDot1 = getDot(null, true)
@@ -35,6 +37,7 @@ export default function Component() {
         var current_record = (checkData as any).current_record
         var currentDot1 = getDot((checkData as any).current_record, true)
         var targetBigRing1 = getTarget((checkData as any).current_record, true)
+        targetBigRing1.color = 'rgba(170,255,0,0.1)'
         if (current_record.status == 'ONGOING') {
             var realRing1 = getReal((checkData as any).current_record, true, false)
 

src/features/trackTimeDuration/components/Console.tsx

@@ -14,6 +14,7 @@ import Modal from "@/components/Modal";
 import Stepper from "@/components/Stepper";
 
 export default function Component() {
+    const scenario = useSelector((state: any) => state.scenario);
     const [key, setKey] = useState('');
     const [value, setValue] = useState('');
     const user = useSelector((state: any) => state.user);
@@ -134,16 +135,74 @@ export default function Component() {
         }, 1000)
     }
 
+    function testLayout() {
+        var current_record = machine.context.checkData ? (machine.context.checkData as any).current_record : null;
+        if (current_record == null) {
+            return <View />
+        }
+        var isStart = false;
+        if (value == 'WAIT_FOR_START' || value == 'ONGOING1') {
+            isStart = true
+        }
+        var isFast = false;
+        switch (value) {
+            case 'WAIT_FOR_START':
+            case 'ONGOING':
+                {
+                    isFast = (scenario.name == 'FAST'||scenario.name == 'FAST_SLEEP')
+                }
+                break;
+            case 'ONGOING1':
+            case 'ONGOING2':
+                {
+                    isFast = false;
+                }
+                break
+            case 'ONGOING3':
+                {
+                    isFast = true;
+                }
+                break;
+
+
+        }
+
+
+
+        return <View style={{ color: '#fff', paddingTop: 30, paddingLeft: 30, display: 'flex', flexDirection: 'column' }}>
+            <Text>check scenario:{isFast ? 'fast' : 'sleep'}</Text>
+            <Text>check type:{isStart ? 'start' : 'end'}</Text>
+            <Text style={{ marginTop: 30 }}>picker restriction</Text>
+            <Text style={{ marginLeft: 50 }}>min:{TimeFormatter.formatTimestamp(global.limit)}</Text>
+            <Text style={{ marginLeft: 50 }}>pick:{TimeFormatter.formatTimestamp(global.picker_time)}</Text>
+            <Text style={{ marginLeft: 50 }}>max{TimeFormatter.formatTimestamp(global.set_time)}</Text>
+
+            <Text style={{ marginTop: 30 }}>now:{TimeFormatter.formatTimestamp(new Date().getTime())}</Text>
+            <Text>elapsed:{TimeFormatter.calculateTimeDifference(global.picker_time, new Date().getTime())}</Text>
+
+            <Text style={{ marginTop: 30 }}>real start:{isStart ? '-' : TimeFormatter.formatTimestamp(isFast ? current_record.fast.real_start_time : current_record.sleep.real_start_time)}</Text>
+            <Text>real duration:{isStart ? '-' : TimeFormatter.calculateTimeDifference(isFast ? current_record.fast.real_start_time : current_record.sleep.real_start_time, new Date().getTime())}</Text>
+        </View>
+    }
+
+    
     function layoutContent() {
-        var limit = new Date().getTime() - 7 * 3600 * 1000 * 24;
+        var limit = global.set_time - 7 * 3600 * 1000 * 24;
         var current_record = machine.context.checkData ? (machine.context.checkData as any).current_record : null;
-        if (current_record && current_record.last_real_check_time)
+        if (current_record && current_record.last_real_check_time){
             limit = current_record.last_real_check_time
-        return <LimitPickers ref={limitPickerRef} limit={limit} limitDay={7} onCancel={hidePicker} onChange={(e) => {
-                console.log(new Date(e))
-                pickerConfirm(e)
-                hidePicker()
-            }} />
+            //当set_time秒数<=latest_record_time秒数时,最小限制时间戳需+1分钟
+            if (new Date(global.set_time).getSeconds()<=new Date(current_record.last_real_check_time).getSeconds()){
+                limit = limit + 60 * 1000
+            }
+        }
+            
+        global.limit = limit
+        return <LimitPickers ref={limitPickerRef} limit={limit} limitDay={8} onCancel={hidePicker} onChange={(e) => {
+            console.log(new Date(e))
+            pickerConfirm(e)
+            hidePicker()
+        }} />
     }
 
     function pickerConfirm(t: number) {
@@ -262,7 +321,7 @@ export default function Component() {
 
     function durationPickerContent() {
         return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
-            <PickerViews ref={durationPickerRef} onChange={durationChange} items={durationDatas(common)} value={isFast ? fastPickerValue : sleepPickerValue}  showBtns={true} onCancel={() => { setIsOpenDurationPicker(false) }} />
+            <PickerViews ref={durationPickerRef} onChange={durationChange} items={durationDatas(common)} value={isFast ? fastPickerValue : sleepPickerValue} showBtns={true} onCancel={() => { setIsOpenDurationPicker(false) }} />
         </View>
     }
 
@@ -378,18 +437,18 @@ export default function Component() {
                 }
             </View>
             {
-                showModal && isOpen && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={()=>{
+                showModal && isOpen && <Modal testInfo={testLayout()} children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={() => {
                     var picker = limitPickerRef.current;
                     pickerConfirm((picker as any).getConfirmData());
                     setIsOpen(false);
-                }}/>
+                }} />
             }
             {
-                isOpenDurationPicker && <Modal children={durationPickerContent()} dismiss={() => setIsOpenDurationPicker(false)} confirm={()=>{
+                isOpenDurationPicker && <Modal children={durationPickerContent()} dismiss={() => setIsOpenDurationPicker(false)} confirm={() => {
                     var picker = durationPickerRef.current;
                     durationChange((picker as any).getConfirmData());
                     setIsOpenDurationPicker(false);
-                }}/>
+                }} />
             }
 
             {/* {

src/features/trackTimeDuration/components/More.tsx

@@ -1,6 +1,6 @@
 import { View, Text } from "@tarojs/components";
 import Taro from "@tarojs/taro";
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import trackTimeService, { machine } from "@/store/trackTimeMachine"
@@ -9,6 +9,7 @@ import LimitPickers from "@/components/LimitPickers";
 import { endFast } from "../actions/TrackTimeActions";
 import Modal from "@/components/Modal";
 import { setStep } from "@/store/scenario";
+import { TimeFormatter } from "@/utils/time_format";
 
 const Component = forwardRef((props, ref) => {
     const isFastFirst = true;
@@ -17,6 +18,7 @@ const Component = forwardRef((props, ref) => {
     const user = useSelector((state: any) => state.user);
     const [isOpen, setIsOpen] = useState(false);
     const [showModal, setShowModal] = useState(false);
+    const limitPickerRef = useRef<any>(null);
     const dispatch = useDispatch();
 
     useEffect(() => {
@@ -43,9 +45,9 @@ const Component = forwardRef((props, ref) => {
                 switch (res.tapIndex) {
                     case 0:
                         if (scenario.name == 'FAST_SLEEP') {
-                            dispatch(setStep(isFastFirst?'fast':'sleep'))
+                            dispatch(setStep(isFastFirst ? 'fast' : 'sleep'))
                         }
-                        else if (scenario.name == 'SLEEP'){
+                        else if (scenario.name == 'SLEEP') {
                             dispatch(setStep('sleep'))
                         }
                         else {
@@ -115,16 +117,42 @@ const Component = forwardRef((props, ref) => {
     global.checkActionSheetData = checkActionSheetData
 
     function layoutContent() {
-        var limit = new Date().getTime() - 7 * 3600 * 1000 * 24;
+        var limit = global.set_time - 7 * 3600 * 1000 * 24;
         var current_record = machine.context.checkData ? (machine.context.checkData as any).current_record : null;
-        if (current_record && current_record.last_real_check_time)
+        if (current_record && current_record.last_real_check_time) {
             limit = current_record.last_real_check_time
-        return <View style={{backgroundColor:'#fff'}}>
-            <LimitPickers limit={limit} onCancel={() => { setIsOpen(false);setShowModal(false) }} onChange={(e) => {
-                console.log(new Date(e))
-                endFast(e)
-                setIsOpen(false)
-            }} />
+            //当set_time秒数<=latest_record_time秒数时,最小限制时间戳需+1分钟
+            if (new Date(global.set_time).getSeconds() <= new Date(current_record.last_real_check_time).getSeconds()) {
+                limit = limit + 60 * 1000
+            }
+        }
+
+        global.limit = limit
+        return <LimitPickers ref={limitPickerRef} limit={limit} onCancel={() => { setIsOpen(false); setShowModal(false) }} onChange={(e) => {
+            endFast(e)
+            setIsOpen(false)
+        }} />
+
+    }
+
+    function testLayout() {
+        var current_record = machine.context.checkData ? (machine.context.checkData as any).current_record : null;
+        if (current_record == null) {
+            return <View />
+        }
+        return <View style={{ color: '#fff', paddingTop: 30, paddingLeft: 30, display: 'flex', flexDirection: 'column' }}>
+            <Text>check scenario:fast</Text>
+            <Text>check type:end</Text>
+            <Text style={{ marginTop: 30 }}>picker restriction</Text>
+            <Text style={{ marginLeft: 50 }}>min:{TimeFormatter.formatTimestamp(global.limit)}</Text>
+            <Text style={{ marginLeft: 50 }}>pick:{TimeFormatter.formatTimestamp(global.picker_time)}</Text>
+            <Text style={{ marginLeft: 50 }}>max{TimeFormatter.formatTimestamp(global.set_time)}</Text>
+
+            <Text style={{ marginTop: 30 }}>now:{TimeFormatter.formatTimestamp(new Date().getTime())}</Text>
+            <Text>elapsed:{TimeFormatter.calculateTimeDifference(global.picker_time, new Date().getTime())}</Text>
+
+            <Text style={{ marginTop: 30 }}>real start:{TimeFormatter.formatTimestamp(current_record.fast.real_start_time)}</Text>
+            <Text>real duration:{TimeFormatter.calculateTimeDifference(current_record.fast.real_start_time, new Date().getTime())}</Text>
         </View>
     }
 
@@ -132,7 +160,13 @@ const Component = forwardRef((props, ref) => {
         <View ref={ref} style={{ width: '100%', marginTop: 20, marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
             <Text onClick={checkActionSheetData}>More Component</Text>
             {
-                showModal && isOpen && <Modal children={layoutContent()} dismiss={()=>setIsOpen(false)}  confirm={()=>{}}/>
+                showModal && isOpen && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)}
+                    testInfo={testLayout()}
+                    confirm={() => {
+                        var picker = limitPickerRef.current;
+                        endFast((picker as any).getConfirmData());
+                        setIsOpen(false);
+                    }} />
             }
             {/* {
                 showModal && <AtFloatLayout

src/features/trackTimeDuration/components/Schedule.tsx

@@ -74,6 +74,7 @@ export default function Component(props: { type?: string, data?: any, delSuccess
     function showStage(e) {
         setIsLatest(false);
         setIsOpen(true)
+        debugger
         e.stopPropagation()
     }
 
@@ -81,6 +82,7 @@ export default function Component(props: { type?: string, data?: any, delSuccess
         // startTimer();
         setIsLatest(true)
         setIsOpen(true)
+        debugger
         e.stopPropagation()
     }
 
@@ -119,6 +121,7 @@ export default function Component(props: { type?: string, data?: any, delSuccess
     }
 
     function layoutContent() {
+        debugger
         //当前断食阶段
         var obj = isLatest ? (checkData as any).latest_record : (checkData as any).current_record
         if (props.type == 'record') {

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -26,6 +26,7 @@ export default function Component() {
 
   const [isOpen, setIsOpen] = useState(false)
 
+  const pickerRef = useRef<any>(null);
   // const [count,setCount] = useState(0)
   const [beginChange, setBeginChange] = useState(true)
 
@@ -231,9 +232,7 @@ export default function Component() {
   }
 
   function layoutContent() {
-    return <View style={{ color: '#000', backgroundColor: '#fff' }}>
-      <PickerViews onChange={durationChange} items={durationDatas(common)} value={pickerValue} height={200} showBtns={true} onCancel={() => { setIsOpen(false) }} />
-    </View>
+    return <PickerViews ref={pickerRef} onChange={durationChange} items={durationDatas(common)} value={pickerValue} height={200} showBtns={true} onCancel={() => { setIsOpen(false) }} />
   }
 
   return <View >
@@ -260,7 +259,10 @@ export default function Component() {
       <Buttons title={scenario.step == 'fast' ? 'Set fast schedule' : 'Set sleep schedule'} style={{ backgroundColor: scenario.step == 'fast' ? '#AAFF00' : '#00ffff', width: 320 }} onClick={() => start()}></Buttons>
     } />
     {
-      isOpen && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} />
+      isOpen && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={()=>{
+        setIsOpen(false)
+        durationChange(pickerRef.current.getConfirmData())
+      }}/>
     }
 
 

src/features/trackTimeDuration/hooks/RingData.tsx

@@ -53,7 +53,7 @@ export const getCommon = (data: any, isBigRing: boolean) => {
 
 export const getBgRing = () => {
     return {
-        color: '#262626'
+        color: '#767676'
     }
 }