@ledvance/ui-biz-bundle 1.1.20 → 1.1.21

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/timer/TimerPage.tsx

@@ -1,362 +1,381 @@
-import React, { useEffect } from 'react'
-import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React, { useCallback, useEffect } from "react";
+import { View, Text, ScrollView, TouchableOpacity, StyleSheet, FlatList, Image } from "react-native"
+import { useNavigation } from '@react-navigation/native'
+import { RouteProp, useRoute } from '@react-navigation/core'
+import { useReactive, useUpdateEffect } from "ahooks";
+import res from '@ledvance/base/src/res'
+import Card from '@ledvance/base/src/components/Card'
+import Spacer from '@ledvance/base/src/components/Spacer'
 import I18n from '@ledvance/base/src/i18n'
-import Page from '@ledvance/base/src/components/Page'
-import { Utils } from 'tuya-panel-kit'
-import { useDeviceInfo } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import Page from "@ledvance/base/src/components/Page";
 import LdvPickerView from '@ledvance/base/src/components/ldvPickerView'
-import { useReactive } from 'ahooks'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import DeleteButton from '@ledvance/base/src/components/DeleteButton'
-import { TaskStatus, timeFormat, TimerPageParams, TimerTask, useTimerTasks } from './TimerAction'
-import { cloneDeep, groupBy } from 'lodash'
-import { useParams } from '@ledvance/base/src/hooks/Hooks'
-import GroupBizRes from '../../res/GroupBizRes'
-import dayjs from 'dayjs'
-import Card from '@ledvance/base/src/components/Card'
-import TextButton from '@ledvance/base/src/components/TextButton'
-import { CircularProgress } from '@ledvance/base/src/components/CircularProgress'
+import { Utils, Progress } from 'tuya-panel-kit'
+import { useDeviceInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { useProgress } from "./TimerPageAction";
+import { cloneDeep } from "lodash";
+import dayjs from "dayjs";
+import DeleteButton from "@ledvance/base/src/components/DeleteButton";
 
-const { convertX: cx } = Utils.RatioUtils
+export type dpItem = {
+  label: string
+  value: string
+  dpId: string
+  enableDp: string
+  cloudKey: any
+  stringOn: any
+  stringOff: any
+}
 
-const TimerPage = () => {
-  const devInfo = useDeviceInfo()
+type TimerPageRouteParams = {
+  params: { dps: dpItem[] }
+}
 
-  const params = useParams<TimerPageParams>()
-  const [timerTasks, setTimerTasks, changeTimerTasks] = useTimerTasks(params.timerSettableDps)
+type Props = {
+  route: RouteProp<TimerPageRouteParams, 'params'>
+}
 
+const { convertX: cx } = Utils.RatioUtils
+const TimerPage = () => {
+  const devInfo = useDeviceInfo()
+  const navigation = useNavigation()
+  const { dps } = useRoute<Props['route']>().params
+  const progress = useProgress(dps)
   const state = useReactive({
     hour: '00',
-    min: '01',
-    tasks: cloneDeep(timerTasks),
-    loading: false,
+    minute: '01',
+    skillList: [] as dpItem[],
+    selectedSkill: [] as dpItem[]
   })
 
+
+  const hasNotRunningTimer = () => {
+    return !!progress.find(p => p.progressHook.countdown === 0)
+  }
+
+  const runningTimer = () => {
+    return progress.filter(p => p.progressHook.countdown > 0)
+  }
+
+  const getProgressByDp = useCallback((dpId: string) => {
+    return progress.find(p => p.dpId === dpId)!.progressHook
+  }, [progress])
+
   useEffect(() => {
-    state.tasks = cloneDeep(timerTasks)
-      .map(task => {
-        const newStatus = params.timerSettableDps.length === 1 && task.status !== TaskStatus.Started
-          ? TaskStatus.Selected : task.status
-        return { ...task, status: newStatus }
-      })
-  }, [JSON.stringify(timerTasks)])
+    if (progress.length > 1) {
+      state.skillList = progress.filter(p => p.progressHook.countdown === 0)
+    } else {
+      state.skillList = []
+      state.selectedSkill = cloneDeep(dps)
+    }
+  }, [runningTimer().length])
+
+  useUpdateEffect(() => {
+    if (state.hour === '00' && state.minute === '00') {
+      state.minute = '01'
+    }
+  }, [state.hour, state.minute])
 
-  const tasksByStatus = groupBy(state.tasks, 'status')
 
-  const noSelectedTasks = tasksByStatus[TaskStatus.NoSelected] || []
-  const selectedTasks = tasksByStatus[TaskStatus.Selected] || []
-  const startedTasks = tasksByStatus[TaskStatus.Started] || []
-  const startEnable = selectedTasks.length > 0
+  const handelTimer = (timer: dpItem, isAdd: boolean) => {
+    if (isAdd) {
+      state.selectedSkill = [...state.selectedSkill, timer]
+      state.skillList = state.skillList.filter(item => item.dpId !== timer.dpId)
+    } else {
+      state.selectedSkill = state.selectedSkill.filter(item => item.dpId !== timer.dpId)
+      state.skillList = [...state.skillList, timer]
+    }
+  }
+
+  const onStartPress = async () => {
+    let mCountdown = 0
+    const hour = parseInt(state.hour)
+    const minute = parseInt(state.minute)
+    if (hour > 0) {
+      mCountdown += hour * 60 * 60
+    }
+    if (minute > 0) {
+      mCountdown += minute * 60
+    }
+    if (!state.selectedSkill.length || mCountdown === 0) return
+    for (let skill of state.selectedSkill) {
+      const time = dayjs()
+        .add(Number(hour), 'h')
+        .add(Number(minute), 'm')
+        .format('YYYY-MM-DD HH:mm:ss');
+      await getProgressByDp(skill.dpId).startTimer(mCountdown, time)
+    }
+    state.selectedSkill = []
+  }
+
+  const getActiveTimeString = (c: number) => {
+    const h = parseInt(String(c / 3600))
+    const m = Number(((c - 3600 * h) / 60).toFixed(0))
+    if (h > 0) {
+      if (m === 0) {
+        return h + ' h'
+      } else {
+        return h + ' h ' + m + ' min'
+      }
+    } else {
+      return m + ' min'
+    }
+  }
+
+  const getSingleLightEndTimeString = (mCountdown: number) => {
+    const date = new Date()
+    const now = date.getTime()
+    const after = new Date(now + mCountdown * 1000)
+    const timeString = `${after.getHours()}:${after.getMinutes().toString().padStart(2, '0')}`
+    return timeString
+  }
+
+  const showActiveView = () => {
+    return progress.length > 1
+  }
+
+  const renderItem = ({ item }) => {
+    return (
+      <View style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: '#fff',
+        marginBottom: cx(8)
+      }}>
+        <Text
+          style={{
+            color: '#000',
+            fontSize: 14,
+            marginHorizontal: cx(6),
+            marginVertical: cx(9),
+          }}
+        >
+          {item.label}
+        </Text>
+        {progress.length > 1 && <TouchableOpacity onPress={() => handelTimer(item, false)}>
+            <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5) }} source={res.ic_arrows_nav_clear} />
+        </TouchableOpacity>}
+      </View>
+    );
+  };
 
   return (
     <Page
       backText={devInfo.name}
       headlineText={I18n.getLang('timer_nightplug_headline_text')}
-      loading={state.loading}>
+      onBackClick={navigation.goBack}
+    >
       <ScrollView
-        style={styles.root}
         nestedScrollEnabled={true}
         showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}>
-        <View>
-          {startedTasks.length !== state.tasks.length &&
-              <View style={styles.content}>
-                  <LdvPickerView
-                      hour={state.hour}
-                      minute={state.min}
-                      unit={['h', 'min']}
-                      setHour={hour => {
-                        state.hour = hour
-                      }}
-                      setMinute={min => {
-                        state.min = min
-                      }}/>
-                  <Spacer height={cx(30)}/>
-                  <Text style={styles.applyFor}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
-                  <Spacer height={cx(10)}/>
-                  <FlatList
-                      data={selectedTasks}
-                      style={styles.taskList}
-                      renderItem={({ item }) => {
-                        return (
-                          <View style={styles.taskItem}>
-                            <Text style={styles.taskItemText}>{item.name}</Text>
-                            {state.tasks.length > 1 &&
-                                <TouchableOpacity
-                                    onPress={() => {
-                                      item.status = TaskStatus.NoSelected
-                                      changeTimerTasks([cloneDeep(item)])
-                                    }}>
-                                    <Image style={styles.taskItemIcon} source={GroupBizRes.ic_arrows_nav_clear}/>
-                                </TouchableOpacity>}
-                          </View>
-                        )
-                      }}
-                      keyExtractor={item => item.dp.key}
-                      ListEmptyComponent={() => <View style={styles.listEmptyView}>
-                        <Text style={styles.listEmptyText}>
-                          {I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}
-                        </Text>
-                      </View>}/>
-                  <Spacer height={cx(6)}/>
-                  <FlatList
-                      data={noSelectedTasks}
-                      style={styles.noSelectTaskList}
-                      renderItem={({ item }) => {
-                        return (
-                          <TouchableOpacity
-                            style={styles.noSelectTaskItem}
-                            onPress={() => {
-                              item.status = TaskStatus.Selected
-                              changeTimerTasks([cloneDeep(item)])
-                            }}>
-                            <Spacer width={cx(8)}/>
-                            <Text style={styles.noSelectTaskText}>{item.name}</Text>
-                            <Image style={styles.taskItemIcon} source={GroupBizRes.device_panel_timer_add}/>
-                          </TouchableOpacity>
-                        )
-                      }}
-                      keyExtractor={item => item.dp.key}/>
-                  <Spacer/>
-                  <DeleteButton
-                      text={I18n.getLang('timer_sockets_button_text')}
-                      disabled={selectedTasks.length === 0}
-                      onPress={async () => {
-                        state.loading = true
-                        const tasks = selectedTasks.map(task => {
-                          return {
-                            ...task,
-                            startTime: dayjs().unix(),
-                            duration: (parseInt(state.hour) * 60 + parseInt(state.min)) * 60,
-                            status: TaskStatus.Started,
-                          }
-                        })
-                        tasks.push(...cloneDeep(startedTasks))
-                        await setTimerTasks(cloneDeep(tasks))
-                        state.loading = false
-                      }}
-                      textStyle={{ fontSize: cx(14) }}
-                      style={{ backgroundColor: !startEnable ? '#FFE0D4' : '#f60' }}/>
-              </View>
-          }
-          {startedTasks.length > 0 && params.timerSettableDps.length > 1 &&
-              <>
-                  <Spacer height={cx(30)}/>
-                  <View style={styles.content}>
-                      <Text style={styles.applyFor}>{
-                        I18n.formatValue('timer_nightplug_active_timer_subheadline2_text', startedTasks.length.toString())
-                      }</Text>
-                  </View>
-                  <FlatList
-                      data={startedTasks}
-                      renderItem={({ item }) => {
-                        return ActiveTimerItem(item, async () => {
-                          state.loading = true
-                          const tasks = cloneDeep(startedTasks)
-                          tasks.forEach(task => {
-                            if (task.dp.code === item.dp.code) {
-                              task.status = TaskStatus.NoSelected
-                              task.startTime = 0
-                              task.duration = 0
-                            }
-                          })
-                          await setTimerTasks(tasks)
-                          state.loading = false
-                        })
-                      }}
-                      keyExtractor={item => item.dp.key}
-                      ListHeaderComponent={() => (<Spacer height={cx(10)}/>)}
-                      ItemSeparatorComponent={() => (<Spacer height={cx(10)}/>)}
-                      ListFooterComponent={() => (<Spacer height={cx(20)}/>)}/>
-              </>
-          }
-          {
-            startedTasks.length === 1 && params.timerSettableDps.length === 1 &&
-              <View style={{ justifyContent: 'center', marginHorizontal: cx(24) }}>
-                  <Spacer height={cx(116)}/>
+        showsVerticalScrollIndicator={false}
+      >
+        {/* picker */}
+        <View style={styles.content}>
+          {hasNotRunningTimer() && <>
+              <LdvPickerView
+                  hour={state.hour}
+                  minute={state.minute}
+                  setHour={h => state.hour = h}
+                  setMinute={m => state.minute = m}
+                  unit={['h', 'min']}
+              />
+            {/* Apply for */}
+              <View>
+                  <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
                   <View
                       style={{
+                        backgroundColor: '#f6f6f6',
+                        borderRadius: 4,
+                        minHeight: cx(50),
+                        flex: 1,
                         justifyContent: 'center',
-                        alignItems: 'center',
-                      }}>
-                      <CircularProgress
-                          progress={(startedTasks[0].timeLeft / startedTasks[0].duration) * 100}
-                          size={cx(172)}
-                          strokeWidth={cx(14)}>
-                          <Text style={styles.activeTaskTimeText2}>{timeFormat(startedTasks[0].timeLeft)}</Text>
-                      </CircularProgress>
+                      }}
+                  >
+                    {!state.selectedSkill.length ? <Text style={{ marginLeft: cx(10) }}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+                      <View
+                        style={{
+                          marginHorizontal: cx(8),
+                          marginTop: cx(8),
+                          borderRadius: 4,
+                        }}
+                      >
+                        <FlatList
+                          data={state.selectedSkill}
+                          renderItem={item => renderItem(item)}
+                          keyExtractor={(item: dpItem) => item.dpId}
+                        />
+                      </View>}
+                  </View>
+                {state.skillList.map((skill: dpItem) => {
+                  return (
+                    <TouchableOpacity style={styles.skillListItem} key={skill.dpId} onPress={() => handelTimer(skill, true)}>
+                      <Text style={{ color: '#000' }}>{skill.label}</Text>
+                      <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
+                    </TouchableOpacity>
+                  )
+                })}
+              </View>
+
+            {/* Start */}
+              <Spacer />
+              <DeleteButton
+                  text={I18n.getLang('timer_sockets_button_text')}
+                  onPress={onStartPress}
+                  textStyle={{ fontSize: cx(14) }}
+                  style={{ backgroundColor: !state.selectedSkill.length ? '#FFE0D4' : '#f60' }}
+              />
+              <Spacer />
+          </>}
+
+          {/* Active timer */}
+          {!!runningTimer().length && (
+            showActiveView() ? <>
+                <Text style={styles.itemTitle}>{I18n.formatValue('timer_nightplug_active_timer_subheadline2_text', runningTimer().length.toString())}</Text>
+                {runningTimer().map(timer => (
+                  <View key={timer.dpId}>
+                    <Card containerStyle={styles.activeTimer}>
+                      <View style={styles.activeTimerTitleBox}>
+                        <Text style={styles.activeTimerTitle}>{timer.label}</Text>
+                        <TouchableOpacity
+                          onPress={() => {
+                            getProgressByDp(timer.dpId).endTimer()
+                          }}
+                          style={styles.activeTimerCancelBtn}>
+                          <Text style={{ color: '#fff', fontSize: cx(12) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
+                        </TouchableOpacity>
+                      </View>
+                      <View style={styles.activeTimerTimeBox}>
+                        <Progress.Double
+                          style={{
+                            width: 35,
+                            height: 35,
+                            // backgroundColor: 'red',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                          }}
+                          disabled={true}
+                          minValue={0}
+                          maxValue={getProgressByDp(timer.dpId).progressNumber}
+                          startDegree={270}
+                          andDegree={360}
+                          scaleHeight={2}
+                          thumbStrokeWidth={2}
+                          thumbRadius={0}
+                        />
+                        <Text style={{ marginLeft: cx(20), fontSize: cx(22) }}>{getActiveTimeString(timer.progressHook.countdown)}</Text>
+                      </View>
+                      <Text>{I18n.formatValue(timer.enable ? timer.stringOff : timer.stringOn, getSingleLightEndTimeString(timer.progressHook.countdown))}</Text>
+                    </Card>
+                    <Spacer height={cx(40)} />
                   </View>
-                  <Spacer height={cx(32)}/>
-                  <Text
-                      style={[styles.activeTaskDesc, { textAlign: 'center' }]}>{I18n.formatValue(startedTasks[0].dp.enable ? startedTasks[0].stringOff : startedTasks[0].stringOn, timeFormat(startedTasks[0].timeLeft))}</Text>
-                  <Spacer height={cx(32)}/>
-                  <TextButton
-                      text={I18n.getLang('auto_scan_system_cancel')}
-                      style={styles.activeTasBtn}
-                      textStyle={styles.activeTaskBtnText}
-                      onPress={async () => {
-                        state.loading = true
-                        const task = cloneDeep(startedTasks[0])
-                        task.status = TaskStatus.NoSelected
-                        task.startTime = 0
-                        task.duration = 0
-                        await setTimerTasks([task])
-                        state.loading = false
-                      }}/>
-                  <Spacer width={cx(20)}/>
+                ))}
+              </> :
+              <View
+                style={{
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  marginVertical: cx(30),
+                }}
+              >
+                <Progress.Double
+                  style={{
+                    width: 172,
+                    height: 172,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                  minValue={0}
+                  maxValue={getProgressByDp(runningTimer()[0].dpId).progressNumber}
+                  startDegree={270}
+                  andDegree={360}
+                  disabled={true}
+                  foreColor={'#f60'}
+                  scaleHeight={14}
+                  minThumbFill={'#f60'}
+                  minThumbStroke={'#f60'}
+                  thumbStrokeWidth={0}
+                  thumbRadius={14 / 2 - 0.5}
+                  thumbFill={'#f60'}
+                  thumbStroke={'#f60'}
+                  renderCenterView={
+                    <View style={{ position: 'absolute' }}>
+                      <Text style={{ fontSize: cx(22), fontWeight: 'bold', color: '#666' }}>
+                        {getActiveTimeString(runningTimer()[0].progressHook.countdown)}
+                      </Text>
+                    </View>
+                  }
+                />
+                <View style={{ marginVertical: cx(30) }}>
+                  <Text>
+                    {I18n.formatValue(
+                      runningTimer()[0].enable ?
+                        runningTimer()[0].stringOff :
+                        runningTimer()[0].stringOn, getSingleLightEndTimeString(runningTimer()[0].progressHook.countdown)
+                    )}
+                  </Text>
+                </View>
+                <DeleteButton
+                  text={I18n.getLang('auto_scan_system_cancel')}
+                  style={{ paddingHorizontal: cx(15), width: 'auto', height: cx(40) }}
+                  textStyle={{ fontSize: cx(14) }}
+                  onPress={() => {
+                    getProgressByDp(runningTimer()[0].dpId).endTimer()
+                  }}
+                />
               </View>
-          }
-          <Spacer/>
+          )}
         </View>
       </ScrollView>
     </Page>
   )
 }
 
-function ActiveTimerItem(task: TimerTask, onCancel: () => void) {
-  return (
-    <Card style={{ marginHorizontal: cx(24) }}>
-      <Spacer/>
-      <View style={styles.activeTaskHeadLine}>
-        <Spacer width={cx(20)}/>
-        <Text style={styles.activeTaskHeadLineText}>{task.name}</Text>
-        <TextButton
-          text={I18n.getLang('auto_scan_system_cancel')}
-          style={styles.activeTaskHeadLineBtn}
-          textStyle={styles.activeTaskHeadLineBtnText}
-          onPress={onCancel}/>
-        <Spacer width={cx(12)}/>
-      </View>
-      <Spacer height={cx(12)}/>
-      <View style={styles.activeTaskHeadLine}>
-        <Spacer width={cx(20)}/>
-        <CircularProgress
-          progress={(task.timeLeft / task.duration) * 100}
-          size={cx(24)}
-          strokeWidth={cx(2)}/>
-        <Spacer width={cx(16)}/>
-        <Text style={styles.activeTaskTimeText}>{timeFormat(task.timeLeft)}</Text>
-        <Spacer width={cx(20)}/>
-      </View>
-      <Spacer/>
-      <View style={{ marginHorizontal: cx(20) }}>
-        <Text style={styles.activeTaskDesc}>{
-          I18n.formatValue(task.dp.enable ? task.stringOff : task.stringOn, timeFormat(task.timeLeft))
-        }</Text>
-      </View>
-      <Spacer height={cx(22)}/>
-    </Card>
-  )
-}
-
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
   content: {
-    marginHorizontal: cx(24),
+    marginHorizontal: cx(24)
   },
-  applyFor: {
+  itemTitle: {
     color: '#000',
     fontSize: cx(16),
     fontWeight: 'bold',
     fontFamily: 'helvetica_neue_lt_std_bd',
+    marginTop: cx(30),
+    marginBottom: cx(10)
   },
-  taskList: {
-    backgroundColor: '#f6f6f6',
-    paddingTop: cx(8),
-    borderRadius: cx(4),
-  },
-  taskItem: {
-    marginHorizontal: cx(8),
-    marginBottom: cx(8),
+  skillListItem: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-  },
-  taskItemText: {
-    color: '#000',
-    fontSize: 14,
-    marginHorizontal: cx(8),
-    marginVertical: cx(9),
-  },
-  taskItemIcon: {
-    width: cx(16),
-    height: cx(16),
-    marginRight: cx(8),
-  },
-  listEmptyView: {
-    marginHorizontal: cx(8),
-    marginTop: cx(6),
-    marginBottom: cx(14),
-  },
-  listEmptyText: {
-    color: '#666',
-    fontSize: cx(14),
-  },
-  noSelectTaskList: {},
-  noSelectTaskItem: {
     height: cx(30),
-    flexDirection: 'row',
     alignItems: 'center',
+    marginVertical: cx(5)
   },
-  noSelectTaskText: {
-    flex: 1,
-    color: '#000',
-    fontSize: cx(14),
+  activeTimer: {
+    marginHorizontal: cx(20),
+    marginVertical: cx(20),
   },
-  activeTaskHeadLine: {
+  activeTimerTitleBox: {
     flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
+    marginBottom: cx(20),
   },
-  activeTaskHeadLineText: {
-    flex: 1,
+  activeTimerTitle: {
+    fontSize: cx(20),
     color: '#000',
-    fontSize: cx(14),
-  },
-  activeTaskHeadLineBtn: {
-    minWidth: cx(50),
-    height: cx(24),
-    padding: 0,
-    backgroundColor: '#666',
-    borderRadius: cx(4),
-  },
-  activeTaskHeadLineBtnText: {
-    color: '#fff',
-    fontSize: cx(8.2),
-  },
-  activeTaskTimeText: {
-    flex: 1,
-    color: '#666',
-    fontSize: cx(24),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
   },
-  activeTaskDesc: {
-    flex: 1,
-    color: '#666',
-    fontSize: cx(14),
-  },
-  activeTasBtn: {
-    width: cx(75),
-    height: cx(36),
-    padding: 0,
+  activeTimerCancelBtn: {
+    paddingHorizontal: cx(8),
+    paddingVertical: cx(5),
+    alignItems: 'center',
+    justifyContent: 'center',
     backgroundColor: '#666',
-    borderRadius: cx(4),
+    borderRadius: cx(5)
   },
-  activeTaskBtnText: {
-    color: '#fff',
-    fontSize: cx(12.2),
-  },
-  activeTaskTimeText2: {
-    flex: 1,
-    marginHorizontal: cx(20),
-    color: '#666',
-    fontSize: cx(22),
-    textAlign: 'center',
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
+  activeTimerTimeBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: cx(20),
   },
 })
 

package/src/modules/timer/TimerPageAction.ts

@@ -1,174 +1,131 @@
-import { useFeatureHook } from '@ledvance/base/src/models/modules/NativePropsSlice'
-import { Result } from '@ledvance/base/src/models/modules/Result'
-import dayjs from 'dayjs'
-import { useCountDown, useReactive } from 'ahooks'
-import { useEffect, useMemo } from 'react'
-
-export interface TimerTask {
-  name: string
-  startTime: number
-  duration: number
-  timeLeft: number
-  dp: {
-    key: string
-    code: string
-    enable: boolean
-  }
-  status: TaskStatus
-  stringOn: string
-  stringOff: string
-}
-
-export enum TaskStatus {
-  NoSelected,
-  Selected,
-  Started
+import { useCallback, useEffect, useState } from "react"
+import { useDeviceId, useDp } from "@ledvance/base/src/models/modules/NativePropsSlice"
+import { Result } from "@ledvance/base/src/models/modules/Result"
+import { dpItem } from "./TimerPage"
+import { useCountDown as useCountDownAHook, useUpdateEffect } from 'ahooks'
+import dayjs from "dayjs"
+import { NativeApi } from "@ledvance/base/src/api/native"
+
+
+export const useCountdowns = (dps: dpItem[]) => {
+  return dps.map(dp => {
+    return ({
+      countdown: useDp<number, (value: number) => Promise<Result<any>>>(dp.dpId),
+      enable: useDp<boolean, (value: boolean) => Promise<Result<any>>>(dp.enableDp),
+      ...dp
+    })
+  })
 }
 
-export interface TimerConfig {
-  timerTasks: TimerTask[]
+type FormateProgressType = {
+  progressNumber: number
+  countdown: number
+  startTimer: (c: number, time: string) => Promise<void>
+  endTimer: () => void
 }
-
-export function useTimerTasks(timerSettableDps: TimerSettableDp[]):
-  [TimerTask[], (value: TimerTask[]) => Promise<Result<any>>, (tasks: TimerTask[]) => void] {
-  const countdowns = timerSettableDps.map(dps => {
-    const [countdown, setTargetDate] = useCountDown({ interval: 1000 })
-    return {
-      dpCode: dps.dp.code,
-      countdown: {
-        value: countdown,
-        setTargetDate,
-      },
-    }
-  })
-
-  const defTasks = useMemo(() => {
-    return timerSettableDps.map(timerSettableDp => ({
-      name: timerSettableDp.label,
-      startTime: 0,
-      duration: 0,
-      timeLeft: 0,
-      dp: timerSettableDp.dp,
-      status: TaskStatus.NoSelected,
-      stringOn: timerSettableDp.stringOn,
-      stringOff: timerSettableDp.stringOff,
-    }))
-  }, [JSON.stringify(timerSettableDps)])
-
-  const [remoteTasks, setTasks] = useFeatureHook<TimerConfig, TimerTask[]>(
-    'timerTasks',
-    defTasks,
-    () => undefined,
-    timerTasks => {
-      const dps = {}
-      timerTasks.forEach(task => {
-        dps[task.dp.code] = task.duration
-      })
-      return dps
+const useFormateProgress: (dp: dpItem) => FormateProgressType = (dp) => {
+  const [countdown, setCountdown] = useDp<number, (value: number) => Promise<Result<any>>>(dp.dpId)
+  const [progress, setProgress] = useCountDownAHook({
+    interval: 1000,
+    onEnd: () => {
+      initTimerFn()
+      setCountdown(0)
     },
-  )
-
-  const tasks = defTasks.map(defTask => {
-    const findTask = remoteTasks.find(remoteTask => remoteTask.dp.code === defTask.dp.code)
-    return findTask ? { ...findTask, dp: defTask.dp } : defTask
   })
-
-  const state = useReactive({ tasks: tasks })
-
+  const devId = useDeviceId()
+  const [cloudProgressNumber, setCloudProgressNumber] = useState(0)
+  const [progressNumber, setProgressNumber] = useState(0)
+  const [cloudData, setCloudData] = useState<any>()
+  const [isTrigger, setIsTeigger] = useState(false)
+  const getCloudJson = () => {
+    NativeApi.getJson(devId, dp.cloudKey).then(res => {
+      if (res.success && res.data) {
+        const result = JSON.parse(res.data)
+        setCloudData(result)
+        setCloudProgressNumber(result.progressAllNumber)
+        if (countdown > 0) setProgress(Date.now() + countdown * 1000)
+      }
+    })
+  }
   useEffect(() => {
-    state.tasks = tasks
-      .map(task => {
-        const taskEndTime = dayjs.unix(task.startTime)
-          .add(task.duration, 'second')
-        const taskIsEnd = task.status !== TaskStatus.Started ||
-          getTaskLeftover(task) === 0
+    if(countdown > 0){
+      getCloudJson()
+    }
+  }, [])
 
-        countdowns.forEach(countdown => {
-          if (countdown.dpCode === task.dp.code) {
-            countdown.countdown.setTargetDate(taskIsEnd ? undefined : taskEndTime.toDate())
-          }
-        })
+  useEffect(() => {
+    if (cloudProgressNumber > 0) {
+      const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
+      const remainingTime = Number(cloudData && dayjs(cloudData[getKey('StartTime', dp.dpId)] || 0).diff(currentTime))
+      const time = (cloudData && cloudData[getKey('Status', dp.dpId)] && remainingTime >= -1000) ? remainingTime : Number(progress.toString().slice(0, -3) + "000")
+      const conversion = (time / 1000) / cloudProgressNumber * 100
+      setProgressNumber(!isNaN(conversion) ? conversion : 0)
+    }
+  }, [progress])
 
-        return {
-          ...task,
-          startTime: taskIsEnd ? 0 : task.startTime,
-          duration: taskIsEnd ? 0 : task.duration,
-          timeLeft: taskIsEnd ? 0 : task.timeLeft,
-          status: taskIsEnd ? TaskStatus.NoSelected : TaskStatus.Started,
-        }
-      })
+  useUpdateEffect(() =>{
+    if(countdown === 0){
+      setIsTeigger(false)
+      initTimerFn()
+    }
+  }, [countdown])
 
-    return () => {
-      countdowns.forEach(countdown => {
-        countdown.countdown.setTargetDate(undefined)
-      })
+  useUpdateEffect(() => {
+    if (countdown === 0) {
+      if(isTrigger){
+        NativeApi.putJson(devId, dp.cloudKey, JSON.stringify({ [getKey('Status', dp.dpId)]: false, [getKey('StartTime', dp.dpId)]: '', progressAllNumber: 0 })).then()
+      }
     }
-  }, [JSON.stringify(tasks)])
 
-  useEffect(() => {
-    countdowns.forEach(cd => {
-      state.tasks.forEach(task => {
-        if (task.dp.code === cd.dpCode) {
-          task.timeLeft = Math.trunc(cd.countdown.value / 1000)
-          if (task.timeLeft > 0) {
-            task.status = TaskStatus.Started
-          } else {
-            if (task.status === TaskStatus.Started) {
-              task.status = TaskStatus.NoSelected
-            }
-          }
-        }
-      })
-    })
-  }, [JSON.stringify(countdowns.map(c => c.countdown.value))])
+    if (countdown > 0 && !cloudData && !isTrigger) {
+      getCloudJson()
+    }
+  }, [countdown, cloudData])
 
-  const changeTasks = (timerTasks: TimerTask[]) => {
-    timerTasks.forEach(newTask => {
-      state.tasks.forEach(task => {
-        if (task.dp.code === newTask.dp.code) {
-          task.status = newTask.status
-        }
-      })
-    })
-  }
 
-  return [state.tasks, setTasks, changeTasks]
-}
 
-export function getTaskLeftover(timerTask: TimerTask): number {
-  // 当前时间和任务结束时间
-  const currentTime = dayjs()
-  const taskEndTime = dayjs.unix(timerTask.startTime).add(timerTask.duration, 'second')
+  const initTimerFn = useCallback(() =>{
+    setProgressNumber(0)
+    setCloudData(null)
+    setCloudProgressNumber(0)
+    setProgress(0)
+  }, [])
 
-  // 剩余时间
-  const timeLeft = taskEndTime.diff(currentTime, 'second')
+  const getKey = (suffix: string, dpId: string) => {
+    const key = dpId + suffix
+    return key
+  }
 
-  // 如果剩余时间小于0，返回0
-  return timeLeft > 0 ? timeLeft : 0
-}
+  const startTimer = async (time: number, t:string) => {
+    setIsTeigger(true)
+    await setCountdown(time)
+    const putData = { [getKey('Status', dp.dpId)]: true, [getKey('StartTime', dp.dpId)]: t, progressAllNumber: time }
+    await NativeApi.putJson(devId, dp.cloudKey, JSON.stringify(putData))
+    setCloudProgressNumber(time)
+    setProgress(Date.now() + time * 1000)
+    setCloudData(putData)
+  }
 
-export interface TimerSettableDp {
-  label: string
-  dp: {
-    key: string
-    code: string
-    enable: boolean
+  const endTimer = async () =>{
+    setIsTeigger(false)
+    await setCountdown(0)
+    NativeApi.putJson(devId, dp.cloudKey, JSON.stringify({ [getKey('Status', dp.dpId)]: false, [getKey('StartTime', dp.dpId)]: '', progressAllNumber: 0 })).then(() => {
+      initTimerFn()
+    })
   }
-  stringOn: string
-  stringOff: string
-}
 
-export interface TimerPageParams {
-  timerSettableDps: TimerSettableDp[]
+  return {
+    progressNumber,
+    countdown,
+    startTimer,
+    endTimer
+  }
 }
 
-export function timeFormat(time: number): string {
-  let hour = Math.trunc(time / 3600)
-  const beforeMin = (time % 3600) / 60
-  let min = Math.ceil(beforeMin)
-  if (min === 60) {
-    hour += 1
-    min = 0
-  }
-  return `${hour > 0 ? `${hour} h ` : ''}${min > 0 ? `${min} min` : ''}`
+export const useProgress = (dps: dpItem[]) => {
+  return dps.map(dp => ({
+    progressHook: useFormateProgress(dp),
+    enable: useDp(dp.enableDp)[0] as boolean,
+    ...dp
+  }))
 }