@ledvance/group-ui-biz-bundle 1.0.49 → 1.0.50

package/package.json

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

package/src/modules/biorhythm/BiorhythmActions.ts

@@ -68,7 +68,7 @@ export function dp2Obj(dp: string): BiorhythmBean {
     // 分钟
     const minute = hex2Int(hex.slice(0, 2)).toString().padStart(2, '0')
     hex = hex.slice(2)
-    const time = hour * 60 + minute
+    const time = Number(hour) * 60 + Number(minute)
     // 色调 (色相)
     hex2Int(hex.slice(0, 4))
     hex = hex.slice(4)

package/src/modules/biorhythm/BiorhythmDetailPage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
 import { TimerPicker, Utils } from 'tuya-panel-kit'
@@ -29,6 +29,7 @@ export interface BiorhythmEditPageParams {
   onPlanEdited: (isAdd: boolean, plan: Plan) => void
   onPlanDelete: (id: number) => void
   minimumEnable: (plan: Plan) => boolean
+  nameRepeat: (plan: Plan) => boolean
   iconIdList?: any
   isMixLight: boolean
   isSupportTemperature: boolean
@@ -46,16 +47,15 @@ const BiorhythmEditPage = () => {
     onPlanEdited,
     onPlanDelete,
     minimumEnable,
+    nameRepeat,
     iconIdList,
     isMixLight,
     isSupportTemperature,
     isSupportBrightness,
     showDeleteBtn
   } = params
-  const [hour, minute] = planData.startTime.split(':')
+
   const state = useReactive({
-    hour: Number(hour),
-    minute: Number(minute),
     iconIdList,
     planData: cloneDeep(planData),
     backStatus: false,
@@ -92,15 +92,27 @@ const BiorhythmEditPage = () => {
     return imgIcon
   }
 
+  const nameRepeatFlag = useMemo(() =>{
+    return nameRepeat(state.planData)
+  }, [state.planData.name])
+
+  const checkBiorhythmDataChanged = useMemo(() =>{
+    return isEqual(state.planData, planData)
+  }, [JSON.stringify(state.planData), planData])
+
+  const canSaveMoodData = useMemo(() =>{
+    return state.planData.name.length > 0 && state.planData.name.length < 33 && !nameRepeatFlag && !checkBiorhythmDataChanged && !minimumTipEnable()
+  }, [nameRepeatFlag, state.planData.name, checkBiorhythmDataChanged])
+
   return (
     <Page
       backText={I18n.getLang('add_new_trigger_time_system_back_text')}
       headlineText={I18n.getLang(isAdd ? 'add_new_trigger_time_headline_text' : 'edit_trigger_time_headline_text')}
       backDialogTitle={I18n.getLang('manage_user_unsaved_changes_dialog_headline')}
       backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_bio_rhythm_note')}
-      showBackDialog={saveEnable() && !minimumTipEnable()}
-      rightButtonIcon={(saveEnable() && !minimumTipEnable()) ? res.ic_check : res.ic_uncheck}
-      rightButtonIconClick={onTopBarRightBtnClick}
+      showBackDialog={!checkBiorhythmDataChanged}
+      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={canSaveMoodData ? onTopBarRightBtnClick : undefined}
     >
       <ScrollView>
         <View
@@ -120,20 +132,19 @@ const BiorhythmEditPage = () => {
             }} />
 
           <Spacer />
-          <TimerPicker 
+          <TimerPicker
             itemTextColor='#aeadb5'
-            style={{paddingVertical: cx(0), marginVertical: cx(0)}}
+            style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
             is12Hours={!is24Hour}
             singlePicker={true}
-            startTime={state.hour * 60 + state.minute}
             amText={I18n.getLang('manage_user_calendar_label_am')}
             pmText={I18n.getLang('manage_user_calendar_label_pm')}
-            symbol=''
-            onTimerChange={(startTime) => {
-              state.hour = Math.trunc(startTime / 60)
-              state.minute = startTime % 60
-              state.planData.startTime = `${state.hour.toString().padStart(2, '0')}:${state.minute.toString().padStart(2, '0')}`
-            }}/>
+            startTime={state.planData.time}
+            symbol={''}
+            onTimerChange={(time) => {
+              state.planData.time = time
+            }}
+          />
           {minimumTipEnable() && <View style={{ flexDirection: 'row', marginVertical: cx(5) }}>
             <Image style={{ width: cx(16), height: cx(16), tintColor: '#000' }} source={res.ic_info} />
             <Text

package/src/modules/biorhythm/BiorhythmPage.tsx

@@ -17,6 +17,7 @@ import pIdList from './pIdList'
 import {
   useDeviceInfo,
   useGroupDevices,
+  useSystemTimeFormate,
 } from '@ledvance/base/src/models/modules/NativePropsSlice'
 import I18n from '@ledvance/base/src/i18n'
 import res from '@ledvance/base/src/res'
@@ -26,7 +27,7 @@ import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
 import { setDataSource } from '@ledvance/base/src/components/weekSelect'
 import { BiorhythmEditPageParams } from './BiorhythmDetailPage'
 import { useBiorhythm } from './BiorhythmActions'
-import { showDialog as showCommonDialog, showDialog } from '@ledvance/base/src/utils/common'
+import { convertMinutesTo12HourFormat, showDialog as showCommonDialog, showDialog } from '@ledvance/base/src/utils/common'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
 import Page from '@ledvance/base/src/components/Page'
 import Spacer from '@ledvance/base/src/components/Spacer'
@@ -58,6 +59,7 @@ const BiorhythmPage = () => {
   const [biorhythm, setBiorhythm] = useBiorhythm()
   const deviceInfo = useDeviceInfo()
   const [groupDevices] = useGroupDevices()
+  const is24Hour = useSystemTimeFormate()
   const { productId } = deviceInfo
   const devicesJudge = pIdList.some(val => val === productId)
 
@@ -76,7 +78,7 @@ const BiorhythmPage = () => {
   const onPlanEdited = useCallback((isAdd: boolean, newPlan: Plan) => {
     if (isAdd) {
       state.planList.push(newPlan)
-      state.planList = sortBy(state.planList, p => p.startTime)
+      state.planList = sortBy(state.planList, p => p.time)
     } else {
       state.planList = state.planList.map(plan => (plan.id === newPlan.id ? newPlan : plan))
     }
@@ -116,7 +118,7 @@ const BiorhythmPage = () => {
 
   const minimumEnable = useCallback((plan: Plan) => {
     let enable = false
-    state.planList.filter(p => p.index !== plan.id).forEach(item => {
+    state.planList.filter(p => p.id !== plan.id).forEach(item => {
       const diff = Math.abs(plan.time - item.time)
       if (diff < 15) enable = true
     })
@@ -235,6 +237,10 @@ const BiorhythmPage = () => {
     return availableChart[randomIndex]
   }
 
+  const nameRepeat = useCallback((plan: Plan) => {
+    return !!state.planList.filter(p => p.id !== plan.id).find(p => p.name === plan.name)
+  }, [state.planList])
+
   return (
     <Page
       backText={deviceInfo.name}
@@ -365,7 +371,7 @@ const BiorhythmPage = () => {
                 state.planList = state.planList.map(plan => {
                   return {
                     ...plan,
-                    time: plan.index === id ? time : plan.time,
+                    time: plan.id === id ? time : plan.time,
                   }
                 })
                 state.flag = Symbol()
@@ -426,6 +432,7 @@ const BiorhythmPage = () => {
                         isAdd: true,
                         onPlanEdited,
                         onPlanDelete,
+                        nameRepeat,
                         minimumEnable,
                         iconIdList: state.planList?.map(item => {
                           return item.iconId
@@ -481,6 +488,7 @@ const BiorhythmPage = () => {
                           isAdd: false,
                           onPlanEdited,
                           onPlanDelete,
+                          nameRepeat,
                           minimumEnable,
                           iconIdList: state.planList?.map(item => {
                             return item.iconId
@@ -518,7 +526,7 @@ const BiorhythmPage = () => {
                                 fontFamily: 'helvetica_neue_lt_std_roman',
                               }}
                             >
-                              {item.startTime}
+                              {convertMinutesTo12HourFormat(item.time, is24Hour)}
                             </Text>
                           </View>
                           <Switch
@@ -603,7 +611,7 @@ const BiorhythmPage = () => {
                   width: '100%',
                   height: '100%',
                   position: 'absolute',
-                  top: cx(45),
+                  top: 0,
                   zIndex: 999,
                 }}
               />
@@ -637,8 +645,8 @@ const BiorhythmPage = () => {
           confirmText={I18n.getLang('auto_scan_system_wifi_confirm')}
           onConfirm={(item: BiorhythmGradientType) => {
             state.gradient = item
-            state.flag = Symbol()
             showGradientTypeSelectModal(false)
+            state.flag = Symbol()
           }}
         />
       </>

package/src/modules/biorhythm/circular/Progress.tsx

@@ -4,409 +4,369 @@ import { StyleSheet, View } from 'react-native'
 import ItemIcon from './ItemIcon'
 import Svg, { Circle } from 'react-native-svg'
 import iconList from '../iconListData'
-import {cctToColor} from '@ledvance/base/src/utils/cctUtils'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
 
 export default class Progress extends Component<any> {
-    timeIconList: any[]
-    timer: any
-    state: any
+  timeIconList: any[]
+  timer: any
+  state: any
 
-    constructor(props) {
-        super(props)
-        const { timeIconList } = this.props
+  constructor(props) {
+    super(props)
+    const { timeIconList } = this.props
 
-        this.timeIconList = timeIconList.map(item => ({ ...item }))
-        this.state = {
-            iconDataList: this.timeIconList,
-        }
+    this.timeIconList = timeIconList.map(item => ({ ...item }))
+    this.state = {
+      iconDataList: this.timeIconList,
     }
+  }
 
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        if (nextProps) {
-            const { timeIconList, planEdit } = nextProps
-            if (timeIconList.length !== this.state.iconDataList.length || planEdit) {
-                this.timeIconList = timeIconList.map(item => ({ ...item }))
-                this.setState({ iconDataList: this.timeIconList })
-            }
-        }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps) {
+      const { timeIconList, planEdit } = nextProps
+      if (timeIconList.length !== this.state.iconDataList.length || planEdit) {
+        this.timeIconList = timeIconList.map(item => ({ ...item }))
+        this.setState({ iconDataList: this.timeIconList })
+      }
     }
+  }
 
-    componentWillUnmount() {
-        if (this.timer) {
-            clearTimeout(this.timer)
-            this.timer = null
-        }
+  componentWillUnmount() {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
     }
+  }
+
+  render() {
+    //radius 大圆半径,annularHeight 环宽
+    const { radius, annularHeight } = this.props
+    const { iconDataList } = this.state
+    //换算颜色
+    if (iconDataList && iconDataList.length > 0) {
+      //排序从小到大
+      let min
+      for (let i = 0; i < iconDataList.length; i++) {
+        for (let j = i; j < iconDataList.length; j++) {
+          const iData = iconDataList[i].newStartTime ? iconDataList[i].newStartTime : iconDataList[i].time
+          const jData = iconDataList[j].newStartTime ? iconDataList[j].newStartTime : iconDataList[j].time
+          if (iData > jData) {
+            min = iconDataList[j]
+            iconDataList[j] = iconDataList[i]
+            iconDataList[i] = min
+          }
+        }
+      }
 
-    render() {
-        //radius 大圆半径,annularHeight 环宽
-        const { radius, annularHeight } = this.props
-        const { iconDataList } = this.state
-        //换算颜色
-        if (iconDataList && iconDataList.length > 0) {
-            //排序从小到大
-            let min
-            for (let i = 0; i < iconDataList.length; i++) {
-                for (let j = i; j < iconDataList.length; j++) {
-                    const iData = this.getTimeIntVale(iconDataList[i].newStartTime ? iconDataList[i].newStartTime : iconDataList[i].startTime)
-                    const jData = this.getTimeIntVale(iconDataList[j].newStartTime ? iconDataList[j].newStartTime : iconDataList[j].startTime)
-                    if (iData > jData) {
-                        min = iconDataList[j]
-                        iconDataList[j] = iconDataList[i]
-                        iconDataList[i] = min
-                    }
-                }
-            }
-
-            //取出色温、亮度
-            for (const elem of iconDataList) {
-                const { action } = elem
+      //取出色温、亮度
+      for (const elem of iconDataList) {
+        const { action } = elem
 
-                if (elem.light) {
-                    continue
-                }
-
-                if (elem.colorTemp) {
-                    continue
-                }
-
-                action.map((item) => {
-                    const { uri, startValue } = item
-                    if (uri.indexOf('Brightness') !== -1) {
-                        elem.light = startValue
-                    } else if (uri.indexOf('ColorTemperature') !== -1) {
-                        let clrTemp = (startValue - 2700) / 38
-                        let colorObj = this.getColorTempStringVale(clrTemp) //占比换算成色值
-                        //console.log(' 色值数据 ----------> ',colorObj)
-
-                        elem.colorTemp = colorObj.normalColor
-                        elem.rgbColor = colorObj.rgbColor
-                    }
-                })
-            }
+        if (elem.light) {
+          continue
         }
 
-        //有多少个时间点就分为几段弧
-        let linearGradientList: any[] = []
-        for (let c = 0; c < iconDataList.length; c++) {
-            let tmpIndex = c + 1
-            if (tmpIndex > iconDataList.length - 1) {
-                tmpIndex = 0
-            }
-            let statRGBColer = iconDataList[c].rgbColor
-            let iconDataRgbClr = iconDataList[tmpIndex].rgbColor
-
-            let startTimes = this.getTimeIntVale(iconDataList[c].startTime)
-            let endTimes = this.getTimeIntVale(iconDataList[tmpIndex].startTime)
-
-            let totalMins = Math.abs(endTimes - startTimes)
-            if (tmpIndex === 0) {
-                totalMins = 1440 - startTimes + endTimes
-            }
-
-            let circleLength = (Math.PI * 2) / (24 * 60) * (totalMins)
-            let timeAngle = 360 / (24 * 60) * startTimes
-
-            // console.log('--- 开始时间 ---------->： ',iconDataList[c].startTime,'分钟数：',startTimes);
-            // console.log('--- 结束时间 ---------->： ',iconDataList[tmpIndex].startTime,'分钟数：',endTimes);
-            // console.log('--- 分段时长 ----------> ',totalMins);
-            // console.log('--- 弧长 ----------> ',circleLength);
-
-            linearGradientList.push({
-                startRbg: statRGBColer,
-                endRgb: this.props.gradient && statRGBColer || iconDataRgbClr,
-                circleLength: circleLength,
-                startAngle: timeAngle,
-                brightness: iconDataList[c].brightness
-            })
+        if (elem.colorTemp) {
+          continue
         }
 
-        //console.log('--- 分段数据 ----------> ',linearGradientList)
-        let aCircleList: any[] = []
-        for (let l = 0; l < linearGradientList.length; l++) {
-            const elem = linearGradientList[l]
-            let startRGB = elem.startRbg
-            let endRGB = elem.endRgb
-            const brightness = elem.brightness || 0;
-            //兼容不支持色温的灯
-            if (!startRGB || !endRGB) {
-                startRGB = [122, 122, 122]
-                endRGB = [122, 122, 122]
-            }
-
-            //计算各时间段颜色变化值
-            const arcArr: () => any = () => {
-                let progressLength = (this.props.radius - 18) * elem.circleLength //每段的弧长
-                const step = 60 // 设置到100则已经比较难看出来颜色断层
-                const gradientColor = (startRGB, endRGB, step) => {
-                    let startR = startRGB[0]
-                    let startG = startRGB[1]
-                    let startB = startRGB[2]
-                    let endR = endRGB[0]
-                    let endG = endRGB[1]
-                    let endB = endRGB[2]
-                    let sR = (endR - startR) / step // 总差值
-                    let sG = (endG - startG) / step
-                    let sB = (endB - startB) / step
-                    let colorArr: any[] = []
-                    for (let i = 0; i < step; i++) {
-                        let color = Number(brightness) === 0 ? 'rgb(0, 0, 0)' : (this.props.isSupportTemperature && cctToColor(1)) || `rgb(${parseInt(sR * i + startR, 10)},
+        action.map((item) => {
+          const { uri, startValue } = item
+          if (uri.indexOf('Brightness') !== -1) {
+            elem.light = startValue
+          } else if (uri.indexOf('ColorTemperature') !== -1) {
+            let clrTemp = (startValue - 2700) / 38
+            let colorObj = this.getColorTempStringVale(clrTemp) //占比换算成色值
+            //console.log(' 色值数据 ----------> ',colorObj)
+
+            elem.colorTemp = colorObj.normalColor
+            elem.rgbColor = colorObj.rgbColor
+          }
+        })
+      }
+    }
+
+    //有多少个时间点就分为几段弧
+    let linearGradientList: any[] = []
+    for (let c = 0; c < iconDataList.length; c++) {
+      let tmpIndex = c + 1
+      if (tmpIndex > iconDataList.length - 1) {
+        tmpIndex = 0
+      }
+      let statRGBColer = iconDataList[c].rgbColor
+      let iconDataRgbClr = iconDataList[tmpIndex].rgbColor
+
+      let startTimes = iconDataList[c].time
+      let endTimes = iconDataList[tmpIndex].time
+
+      let totalMins = Math.abs(endTimes - startTimes)
+      if (tmpIndex === 0) {
+        totalMins = 1440 - startTimes + endTimes
+      }
+
+      let circleLength = (Math.PI * 2) / (24 * 60) * (totalMins)
+      let timeAngle = 360 / (24 * 60) * startTimes
+
+      // console.log('--- 开始时间 ---------->： ',iconDataList[c].startTime,'分钟数：',startTimes);
+      // console.log('--- 结束时间 ---------->： ',iconDataList[tmpIndex].startTime,'分钟数：',endTimes);
+      // console.log('--- 分段时长 ----------> ',totalMins);
+      // console.log('--- 弧长 ----------> ',circleLength);
+
+      linearGradientList.push({
+        startRbg: statRGBColer,
+        endRgb: this.props.gradient && statRGBColer || iconDataRgbClr,
+        circleLength: circleLength,
+        startAngle: timeAngle,
+        brightness: iconDataList[c].brightness
+      })
+    }
+
+    //console.log('--- 分段数据 ----------> ',linearGradientList)
+    let aCircleList: any[] = []
+    for (let l = 0; l < linearGradientList.length; l++) {
+      const elem = linearGradientList[l]
+      let startRGB = elem.startRbg
+      let endRGB = elem.endRgb
+      const brightness = elem.brightness || 0;
+      //兼容不支持色温的灯
+      if (!startRGB || !endRGB) {
+        startRGB = [122, 122, 122]
+        endRGB = [122, 122, 122]
+      }
+
+      //计算各时间段颜色变化值
+      const arcArr: () => any = () => {
+        let progressLength = (this.props.radius - 18) * elem.circleLength //每段的弧长
+        const step = 60 // 设置到100则已经比较难看出来颜色断层
+        const gradientColor = (startRGB, endRGB, step) => {
+          let startR = startRGB[0]
+          let startG = startRGB[1]
+          let startB = startRGB[2]
+          let endR = endRGB[0]
+          let endG = endRGB[1]
+          let endB = endRGB[2]
+          let sR = (endR - startR) / step // 总差值
+          let sG = (endG - startG) / step
+          let sB = (endB - startB) / step
+          let colorArr: any[] = []
+          for (let i = 0; i < step; i++) {
+            let color = Number(brightness) === 0 ? 'rgb(0, 0, 0)' : (this.props.isSupportTemperature && cctToColor(1)) || `rgb(${parseInt(sR * i + startR, 10)},
                   ${parseInt(sG * i + startG, 10)},
                   ${parseInt(sB * i + startB, 10)},
                   ${Number(brightness) / 100}
                   )`
 
-                        colorArr.push(color)
-                    }
-                    return colorArr
-                }
-
-                let colorArr = gradientColor(startRGB, endRGB, step)
-                // 计算每个步进中的弧长
-                let arcLengthArr = colorArr.map((color, index) => ({
-                    arcLength: [index * (progressLength / step), 10000000],
-                    color: color,
-                    arcAngle: elem.startAngle,
-                }))
-
-                //circleTotalLength = circleTotalLength + progressLength;
-                arcLengthArr.reverse() //数组倒序
-                return arcLengthArr
-            }
-
-            aCircleList = aCircleList.concat(arcArr())
+            colorArr.push(color)
+          }
+          return colorArr
         }
 
-        let radiusValue = (this.props.radius).toString() //圆心坐标
-        let circleR = (this.props.radius - 22).toString() // 半径长度 （不包含宽度值）
-        const circleView = aCircleList.map((d, index) => {
-            return (
-                <Circle
-                    key={`c${index}`}
-                    cx={radiusValue}
-                    cy={radiusValue}
-                    r={circleR}
-                    stroke={d.color}
-                    strokeDasharray={d.arcLength}
-                    strokeWidth="44"
-                    rotation={-(90 - d.arcAngle)}
-                    originX={radiusValue}
-                    originY={radiusValue}
-                    //strokeOpacity = {1.0}
-                    strokeLinecap="butt"
-                    fill="none"
-                />
-            )
-        })
+        let colorArr = gradientColor(startRGB, endRGB, step)
+        // 计算每个步进中的弧长
+        let arcLengthArr = colorArr.map((color, index) => ({
+          arcLength: [index * (progressLength / step), 10000000],
+          color: color,
+          arcAngle: elem.startAngle,
+        }))
 
-        const setImg = (id) => {
-            const imgIcon = iconList?.find(val => val?.id === id)?.icon
-            return imgIcon
-        }
+        //circleTotalLength = circleTotalLength + progressLength;
+        arcLengthArr.reverse() //数组倒序
+        return arcLengthArr
+      }
 
-        return (
-            <View /*style = {{ backgroundColor: '#000000'}}*/>
-
-                <Svg width={this.props.radius * 2} height={this.props.radius * 2}>
-
-                    {iconDataList.length > 0 ? circleView :
-                        <Circle
-                            cx={radiusValue}
-                            cy={radiusValue}
-                            r={circleR}
-                            strokeWidth="44"
-                            stroke={'#DEDEDE'}
-                            fill={'none'} />}
-                </Svg>
-
-                {/*----- 环上图标 ------*/}
-                {this.timeIconList && this.timeIconList.map((item) => {
-
-                    const { startTime } = item
-
-                    let timeArray = startTime.split(':')
-
-                    let hourTime = timeArray[0]
-                    let mineTime = timeArray[1]
-
-                    //时间对应的弧度
-                    let timeAngle = (Math.PI * 2) / (24 * 60) * (parseInt(hourTime) * 60 + parseInt(mineTime))
-                    let newRadius = radius - annularHeight + 22
-
-                    //1.5 为解决将圆当作一个点处理代理的误差
-                    let leftValeu = newRadius + (Math.sin(timeAngle) * newRadius) + 1.5
-                    let topValue = newRadius - (Math.cos(timeAngle) * newRadius) + 1.5
-                    const type = typeof item?.icon === 'string'
-
-                    return (
-                        <ItemIcon
-                            key={item.id}
-                            leftValeu={leftValeu}
-                            topValue={topValue}
-                            imageSource={setImg(item?.iconId) || type && { uri: item?.icon } || item?.icon}
-                            circularRadius={newRadius}
-                            onPanMoving={(_xValue, _yValue, angle) => {
-
-                                if (this.timer) {
-                                    clearTimeout(this.timer)
-                                    this.timer = null
-                                }
-
-                                //角度转换为表盘时间
-                                let angleValue = angle
-                                let angleMins = 24 * 60 / 360//每度多少分钟
-                                let totalMins = Math.abs(angleMins * angleValue)
-                                item.startTime = this.createFormTime(totalMins)
-
-                                this.setState({ iconDataList: [].concat(iconDataList) })
-                            }}
-
-                            onPanMoveEnd={() => {
-                                const { ret, failMinutes } = this.checkTimesFormat(item.startTime)
-                                if (!ret) {
-                                    let changeMinutes = (failMinutes || 0) + 60
-                                    if (changeMinutes > 60 * 24) {
-                                        changeMinutes = 30
-                                    }
-                                    const time = this.createFormTime(changeMinutes)
-                                    item.startTime = time
-                                    this.setState({ iconDataList: [].concat(iconDataList) }, () => {
-                                        this.playTimeChangeCallBack(item.id, time)
-                                    })
-                                } else {
-                                    this.playTimeChangeCallBack(item.id, item.startTime)
-                                }
-                            }}
-                        />
-                    )
-                })}
-
-                {/*----- 环内视图 ------*/}
-                <View
-                    style={[
-                        styles.contentView,
-                        {
-                            left: (this.props.annularHeight),
-                            top: this.props.annularHeight,
-                            width: (this.props.radius - this.props.annularHeight) * 2,
-                            height: (this.props.radius - this.props.annularHeight) * 2,
-                            borderRadius: this.props.radius,
-                        },
-                    ]}>
-                    {this.props.children}
-                </View>
-            </View>
-        )
+      aCircleList = aCircleList.concat(arcArr())
     }
 
-    //时间调整回调业务层
-    playTimeChangeCallBack(id: number, time: string) {
-        const { onPanMoved } = this.props
-
-        if (this.timer) {
-            clearTimeout(this.timer)
-            this.timer = null
-        }
-
-        //延时0.5秒后更新计划
-        this.timer = setTimeout(() => {
-            onPanMoved && onPanMoved(id, time)
-        }, 500)
+    let radiusValue = (this.props.radius).toString() //圆心坐标
+    let circleR = (this.props.radius - 22).toString() // 半径长度 （不包含宽度值）
+    const circleView = aCircleList.map((d, index) => {
+      return (
+        <Circle
+          key={`c${index}`}
+          cx={radiusValue}
+          cy={radiusValue}
+          r={circleR}
+          stroke={d.color}
+          strokeDasharray={d.arcLength}
+          strokeWidth="44"
+          rotation={-(90 - d.arcAngle)}
+          originX={radiusValue}
+          originY={radiusValue}
+          //strokeOpacity = {1.0}
+          strokeLinecap="butt"
+          fill="none"
+        />
+      )
+    })
+
+    const setImg = (id) => {
+      const imgIcon = iconList?.find(val => val?.id === id)?.icon
+      return imgIcon
     }
 
-    //获取时间分钟
-    getTimeIntVale(time) {
-        if (!time) {
-            return 0
-        }
-
-        let timeArray = time.split(':')
-        let hourTime = timeArray[0]
-        let mineTime = timeArray[1]
+    return (
+      <View /*style = {{ backgroundColor: '#000000'}}*/>
+
+        <Svg width={this.props.radius * 2} height={this.props.radius * 2}>
+
+          {iconDataList.length > 0 ? circleView :
+            <Circle
+              cx={radiusValue}
+              cy={radiusValue}
+              r={circleR}
+              strokeWidth="44"
+              stroke={'#DEDEDE'}
+              fill={'none'} />}
+        </Svg>
+
+        {/*----- 环上图标 ------*/}
+        {this.timeIconList && this.timeIconList.map((item) => {
+
+          const { time } = item
+
+          //时间对应的弧度
+          let timeAngle = (Math.PI * 2) / (24 * 60) * time
+          let newRadius = radius - annularHeight + 22
+
+          //1.5 为解决将圆当作一个点处理代理的误差
+          let leftValeu = newRadius + (Math.sin(timeAngle) * newRadius) + 1.5
+          let topValue = newRadius - (Math.cos(timeAngle) * newRadius) + 1.5
+          const type = typeof item?.icon === 'string'
+
+          return (
+            <ItemIcon
+              key={item.id}
+              leftValeu={leftValeu}
+              topValue={topValue}
+              imageSource={setImg(item?.iconId) || type && { uri: item?.icon } || item?.icon}
+              circularRadius={newRadius}
+              onPanMoving={(_xValue, _yValue, angle) => {
+
+                if (this.timer) {
+                  clearTimeout(this.timer)
+                  this.timer = null
+                }
 
-        return parseInt(hourTime) * 60 + parseInt(mineTime)
+                //角度转换为表盘时间
+                let angleValue = angle
+                let angleMins = 24 * 60 / 360//每度多少分钟
+                let totalMins = Math.abs(angleMins * angleValue)
+                item.time = totalMins
+
+                this.setState({ iconDataList: [].concat(iconDataList) })
+              }}
+
+              onPanMoveEnd={() => {
+                const { ret, failMinutes } = this.checkTimesFormat(item.time)
+                if (!ret) {
+                  let changeMinutes = (failMinutes || 0) + 60
+                  if (changeMinutes > 60 * 24) {
+                    changeMinutes = 30
+                  }
+                  item.time = changeMinutes
+                  this.setState({ iconDataList: [].concat(iconDataList) }, () => {
+                    this.playTimeChangeCallBack(item.index, Math.round(changeMinutes))
+                  })
+                } else {
+                  this.playTimeChangeCallBack(item.index, Math.round(item.time))
+                }
+              }}
+            />
+          )
+        })}
+
+        {/*----- 环内视图 ------*/}
+        <View
+          style={[
+            styles.contentView,
+            {
+              left: (this.props.annularHeight),
+              top: this.props.annularHeight,
+              width: (this.props.radius - this.props.annularHeight) * 2,
+              height: (this.props.radius - this.props.annularHeight) * 2,
+              borderRadius: this.props.radius,
+            },
+          ]}>
+          {this.props.children}
+        </View>
+      </View>
+    )
+  }
+
+  //时间调整回调业务层
+  playTimeChangeCallBack(id: number, time: number) {
+    const { onPanMoved } = this.props
+
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
     }
 
-    //拼接时间
-    createFormTime(totalMinutes) {
-        let hoursTime = parseInt((totalMinutes / 60).toString()).toString()
-        if (hoursTime.length < 2) {
-            hoursTime = '0' + hoursTime
-        }
-        let minuteTime = Math.round(totalMinutes % 60).toString()
-        if (minuteTime.length < 2) {
-            minuteTime = '0' + minuteTime
-        }
-        return hoursTime + ':' + minuteTime
+    //延时0.5秒后更新计划
+    this.timer = setTimeout(() => {
+      onPanMoved && onPanMoved(id, time)
+    }, 500)
+  }
+
+  //判断时间是否合法
+  checkTimesFormat(newTimeMinutes) {
+    for (const elem of this.timeIconList) {
+      const { time } = elem
+      if (time === newTimeMinutes) {
+        continue
+      }
+      if (Math.abs(time - newTimeMinutes) < 15) {
+        return { ret: false, failMinutes: time }
+      }
     }
 
-    //判断时间是否合法
-    checkTimesFormat(newTimeMinutes) {
-        for (const elem of this.timeIconList) {
-            const { startTime } = elem
-            if (startTime === newTimeMinutes) {
-                continue
-            }
-
-            let planTimeList = startTime.split(':')
-            let newTimeList = newTimeMinutes.split(':')
+    return { ret: true }
+  }
 
-            //转换为分钟
-            let planMinutes = (parseInt(planTimeList[0]) * 60) + parseInt(planTimeList[1])
-            let newMinutes = (parseInt(newTimeList[0]) * 60) + parseInt(newTimeList[1])
+  getColorTempStringVale(colorTempInt) {
+    // 蓝色：80CBFF  黄色：FFCD66
+    let limitBottomColor = '#FFCD66'
+    let limitTopColor = '#80CBFF'
 
-            if (Math.abs(planMinutes - newMinutes) < 15) {
-                return { ret: false, failMinutes: planMinutes }
-            }
-        }
-
-        return { ret: true }
+    if (parseInt(colorTempInt) >= 100) {
+      return { rgbColor: [128, 203, 255], normalColor: limitTopColor }
     }
 
-    getColorTempStringVale(colorTempInt) {
-        // 蓝色：80CBFF  黄色：FFCD66
-        let limitBottomColor = '#FFCD66'
-        let limitTopColor = '#80CBFF'
-
-        if (parseInt(colorTempInt) >= 100) {
-            return { rgbColor: [128, 203, 255], normalColor: limitTopColor }
-        }
-
-        if (parseInt(colorTempInt) <= 0) {
-            return { rgbColor: [255, 205, 102], normalColor: limitBottomColor }
-        }
+    if (parseInt(colorTempInt) <= 0) {
+      return { rgbColor: [255, 205, 102], normalColor: limitBottomColor }
+    }
 
-        let redStat = parseInt('FF', 16)
-        let redEnd = parseInt('80', 16)
-        let redStep = Math.round(redStat + ((redEnd - redStat) / 100) * colorTempInt)
+    let redStat = parseInt('FF', 16)
+    let redEnd = parseInt('80', 16)
+    let redStep = Math.round(redStat + ((redEnd - redStat) / 100) * colorTempInt)
 
-        let gStart = parseInt('CD', 16)
-        let gEnd = parseInt('CB', 16)
-        let gStep = Math.round(gStart + ((gEnd - gStart) / 100) * colorTempInt)
+    let gStart = parseInt('CD', 16)
+    let gEnd = parseInt('CB', 16)
+    let gStep = Math.round(gStart + ((gEnd - gStart) / 100) * colorTempInt)
 
-        let bStart = parseInt('66', 16)
-        let bEnd = parseInt('FF', 16)
-        let bStep = Math.round(bStart + ((bEnd - bStart) / 100) * colorTempInt)
+    let bStart = parseInt('66', 16)
+    let bEnd = parseInt('FF', 16)
+    let bStep = Math.round(bStart + ((bEnd - bStart) / 100) * colorTempInt)
 
-        let colorVale = '#' + redStep.toString(16) + gStep.toString(16) + bStep.toString(16)
-        // console.log('色温值 -----------> colorVale: ',colorVale);
+    let colorVale = '#' + redStep.toString(16) + gStep.toString(16) + bStep.toString(16)
+    // console.log('色温值 -----------> colorVale: ',colorVale);
 
-        let colorRGBAry = [redStep, gStep, bStep]
-        return { rgbColor: colorRGBAry, normalColor: colorVale }
-    }
+    let colorRGBAry = [redStep, gStep, bStep]
+    return { rgbColor: colorRGBAry, normalColor: colorVale }
+  }
 }
 
 const styles = StyleSheet.create({
-    contentView: {
-        position: 'absolute',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#FFFFFF',
-        borderRadius: 130,
-    },
-    angleView: {
-        height: 260,
-        width: 260,
-        borderRadius: 130,
-    },
+  contentView: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 130,
+  },
+  angleView: {
+    height: 260,
+    width: 260,
+    borderRadius: 130,
+  },
 })

package/src/modules/biorhythm/circular/TimeCircular.tsx

@@ -1,13 +1,14 @@
-import React, {useEffect, useState} from 'react'
+import React from 'react'
 import {Image, StyleSheet, View} from 'react-native'
 import Progress from './Progress'
 import {Plan} from '../BiorhythmBean'
-import {getSystemTimeFormat} from '@ledvance/base/src/api/native'
 import BiologicalRes from '../res/BiologicalRes'
+import { useCreation } from 'ahooks'
+import { useSystemTimeFormate } from '@ledvance/base/src/models/modules/NativePropsSlice'
 
 interface TimeCircularProps {
   planList: Plan[]
-  onPanMoved?: (id: number, time: string) => void
+  onPanMoved?: (id: number, time: number) => void
   planEdit?: Boolean
   replaceStatus?: Boolean
   gradient?: Boolean
@@ -25,22 +26,15 @@ const TimeCircular = (
 ) => {
   const {planList, onPanMoved, planEdit, replaceStatus, gradient, isSupportTemperature} = props
   const styles = dynamicStyleSheet
-
+  const is24Hour = useSystemTimeFormate()
   const enabledPlanList = planList.filter(plan => plan.enable)
-  const [timeDialPic, setTimeDialPic] = useState(BiologicalRes.ic_warning_amber_sun)
-
-  useEffect(() => {
-    const updateDialPic = async () => {
-      const is24Hour = await getSystemTimeFormat() === 24
-      if (is24Hour) {
-        setTimeDialPic(replaceStatus ? BiologicalRes.ic_warning_amber_sun : BiologicalRes.ic_warning_amber_new)
-      } else {
-        setTimeDialPic(replaceStatus ? BiologicalRes.ic_warning_amber_sun_12 : BiologicalRes.ic_warning_amber_new_12)
-      }
+  const timeDialPic = useCreation(() =>{
+    if(is24Hour){
+      return replaceStatus ? BiologicalRes.ic_warning_amber_sun : BiologicalRes.ic_warning_amber_new
+    }else{
+      return replaceStatus ? BiologicalRes.ic_warning_amber_sun_12 : BiologicalRes.ic_warning_amber_new_12
     }
-
-    updateDialPic().then()
-  }, [replaceStatus])
+  }, [is24Hour, replaceStatus])
 
   return (
     <View style={styles.container}>
@@ -51,7 +45,7 @@ const TimeCircular = (
         planEdit={planEdit}
         gradient={gradient}
         isSupportTemperature={isSupportTemperature}
-        onPanMoved={(id: number, time: string) => {
+        onPanMoved={(id: number, time: number) => {
           onPanMoved && onPanMoved(id, time)
         }}>
         <Image source={timeDialPic} style={{width: 172, height: 172}}/>

package/src/modules/flags/FlagPage.tsx

@@ -18,7 +18,7 @@ import { SceneNodeTransitionMode } from "@ledvance/group-ui-biz-bundle/src/modul
 import TextField from "@ledvance/base/src/components/TextField";
 import { useParams } from "@ledvance/base/src/hooks/Hooks";
 import { WorkMode } from "@ledvance/base/src/utils/interface";
-import { getGlobalParamsDp, showDialog } from "@ledvance/base/src/utils/common";
+import { showDialog } from "@ledvance/base/src/utils/common";
 const cx = Utils.RatioUtils.convertX
 
 export interface FlagPageProps {
@@ -28,6 +28,7 @@ export interface FlagPageProps {
   isCeilingLight?: boolean
   isSupportTemperature?: boolean
   isSupportBrightness?: boolean
+  switchLedCode: string  
 }
 
 const FlagPage = () => {
@@ -35,7 +36,7 @@ const FlagPage = () => {
   const devInfo = useDeviceInfo()
   const uaGroupInfo = useUAGroupInfo()
   const navigation = useNavigation()
-  const [switch_led] = useGroupDp<boolean>(getGlobalParamsDp('switch_led'))
+  const [switch_led] = useGroupDp<boolean>(params.switchLedCode)
   const [, setWorkMode] = useWorkMode()
   const [flags, setFlags] = useFlags()
   const [flagMode, setFlagMode] = useFlagMode()

package/src/modules/mood_new/MoodPage.tsx

@@ -4,11 +4,10 @@ import { Utils } from 'tuya-panel-kit';
 import { saveMoodList, useRgbicWorkMode, useWorkMode } from './MoodActions';
 import {
   useDeviceInfo,
-  useFlagMode,
   useMoods,
   useUAGroupInfo,
 } from '@ledvance/base/src/models/modules/NativePropsSlice';
-import { useReactive, useUpdateEffect } from 'ahooks';
+import { useReactive } from 'ahooks';
 import Strings from '@ledvance/base/src/i18n';
 import res from '@ledvance/base/src/res';
 import { FlatList, StyleSheet, View, Platform } from 'react-native';
@@ -23,7 +22,7 @@ import { getRemoteMoodList, useMoodScene } from './MoodActions';
 import { useParams } from '@ledvance/base/src/hooks/Hooks';
 import { ui_biz_routerKey } from '../../navigation/Routers'
 import { cloneDeep } from 'lodash';
-import { saveFlagMode } from '../flags/FlagActions';
+import { useFlagMode } from '../flags/FlagActions';
 import { WorkMode } from '@ledvance/base/src/utils/interface';
 
 const cx = Utils.RatioUtils.convertX;
@@ -197,7 +196,6 @@ const MoodPage = () => {
     if (res.success) {
       state.originMoods = cloneDeep(newScene);
       setMoods(cloneDeep(newScene));
-      updateFlagMode();
       if ((mode === 'del' && (params.isCeilingLight ? 
         (moodInfo.scene?.mainLamp.id !== checkedMood.mainLamp.id || moodInfo.scene?.secondaryLamp.id !== checkedMood.secondaryLamp.id) : 
         moodInfo.scene?.id !== checkedMood.id)) || 
@@ -206,6 +204,7 @@ const MoodPage = () => {
           success: true
         }
       }
+      updateFlagMode();
       return setMoodInfo({
         scene: cloneDeep(mood)
       })
@@ -217,13 +216,6 @@ const MoodPage = () => {
 
   const updateFlagMode = () => {
     if (flagMode?.flagMode) {
-      saveFlagMode(
-        uaGroupInfo.tyGroupId.toString(),
-        JSON.stringify({
-          flagMode: false,
-          flagId: undefined,
-        })
-      ).then();
       setFlagMode({
         flagMode: false,
         flagId: undefined,