@ledvance/group-ui-biz-bundle 1.0.160 → 1.0.161

package/src/modules/energyConsumption/component/EnergyModal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 import Card from "@ledvance/base/src/components/Card";
 import Spacer from "@ledvance/base/src/components/Spacer";
 import TextFieldStyleButton from "@ledvance/base/src/components/TextFieldStyleButton";
@@ -9,6 +9,7 @@ import { Utils, Modal, Popup } from "tuya-panel-kit";
 import { useReactive, useUpdateEffect } from "ahooks";
 import { cloneDeep } from "lodash";
 import ThemeType from '@ledvance/base/src/config/themeType'
+import EditPriceSegmentScreen from "../EditPriceSegmentScreen";
 
 const { convertX: cx, height, statusBarHeight } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -29,28 +30,77 @@ export const UnitList = [
   I18n.getLang('consumption_data_price_per_kwh_currency_value13'),
 ]
 
+export interface PriceSegment {
+    startMinute: number; // 0~1439
+    endMinute: number;   // 0~1439
+    price: number;
+}
+export function calculateAveragePrice(
+    intervals: PriceSegment[],
+): number {
+    let totalPrice = 0
+    for(const item of intervals) {
+        const hrs = (item.endMinute - item.startMinute)/60
+        totalPrice += (hrs * item.price)
+    }
+    return totalPrice/24
+
+}
+export const parseMinutes = (totalMinutes: number | undefined) => {
+    if (!totalMinutes) {
+        return { hour: '00', minute: '00' };
+    }
+    const h = Math.floor(totalMinutes / 60);
+    const m = totalMinutes % 60;
+    return {
+        hour: h.toString().padStart(2, '0'),
+        minute: m.toString().padStart(2, '0')
+    }
+}
+
+export type EnergyType = 'fixed' | 'dynamic'
+//固定价格能量模型
 export interface EnergyData {
   price: string
   unit: string
+  energyType?: EnergyType
+  generatePrice?: string
+}
+//动态价格能量模型
+export interface DynamicEnergyData{
+    intervalPrices?: PriceSegment[]
+    generatePrices?: PriceSegment[]
 }
+
 interface EnergyModalProps {
-  theme?: ThemeType
-  visible: boolean
-  popupType: 'money' | 'co2' | 'unit'
-  title: string
-  confirmText?: string
-  cancelText?: string
-  energyData?: EnergyData
-  motionType?: 'none'
-  onConfirm?: (data?: EnergyData) => void
-  onCancel?: () => void
+    theme?: ThemeType
+    visible: boolean
+    popupType: 'money' | 'co2' | 'unit' | 'segment_price'
+    title: string
+    confirmText?: string
+    cancelText?: string
+    energyData?: EnergyData
+    motionType?: 'none'
+    editingPriceSegment?: PriceSegment
+    onConfirm?: (data?: EnergyData) => void
+    onPriceSegmentConfirm?: (segment?: PriceSegment) => void
+    onCancel?: () => void
 }
 const EnergyModal = (props: EnergyModalProps) => {
   const state = useReactive({
     energyData: cloneDeep(props.energyData),
-    unitPopup: false
+    unitPopup: false,
+    editingPriceSegment: cloneDeep(props.editingPriceSegment)
   })
-  console.log('running ~~~~~')
+    useEffect(()=>{
+        if(props.visible) {
+            if(!props.editingPriceSegment){
+                state.editingPriceSegment = { startMinute: 0, endMinute: 0, price: 0 }
+            } else {
+                state.editingPriceSegment = props.editingPriceSegment
+            }
+        }
+    }, [props.visible,props.editingPriceSegment])
 
   const openLink = (url: string) => {
     Linking.openURL(url).catch((error) => console.error('无法打开链接:', error));
@@ -217,6 +267,14 @@ const EnergyModal = (props: EnergyModalProps) => {
           </Card>
         </View>
       )
+    } else if(props.popupType === 'segment_price'){
+        return (
+            <EditPriceSegmentScreen
+            segment={state.editingPriceSegment}
+            onSegmentSet={(segment)=>{
+                state.editingPriceSegment = segment
+            }}/>
+        )
     } else {
       return (
         <View>
@@ -306,6 +364,8 @@ const EnergyModal = (props: EnergyModalProps) => {
           <Text style={{ color: props.theme?.global.fontColor, fontSize: cx(16), fontWeight: 'bold' }}>{props.title}</Text>
           <TouchableOpacity onPress={() => {
             props.onConfirm && props.onConfirm(state.energyData)
+            console.log("wayne_check innner check segment ->", JSON.stringify(state.editingPriceSegment))
+            props.onPriceSegmentConfirm && props.onPriceSegmentConfirm(state.editingPriceSegment)
           }}>
             <Text style={{ color: props.theme?.button.primary, fontSize: cx(16) }}>{props.confirmText}</Text>
           </TouchableOpacity>

package/src/modules/energyConsumption/component/NewBarChart.tsx

@@ -7,6 +7,8 @@ import { View } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
 import { OverviewItem } from '../EnergyConsumptionPage'
 import { EnergyDisplayMode } from '../EnergyConsumptionChart/useEnergyData'
+import { calculateAveragePrice, PriceSegment, DynamicEnergyData } from './EnergyModal'
+import { DateType } from '../co2Data'
 
 const { withTheme } = Utils.ThemeUtils
 interface BarChartProps {
@@ -19,6 +21,35 @@ interface BarChartProps {
   unit: string;
   height: number;
   displayMode?: EnergyDisplayMode;
+  energyType?: string;
+  dynamicData?: DynamicEnergyData;
+  dateType?: DateType;
+}
+
+//算出固定时间间隔内的平均价格，目前用于计算柱状图每一个小时的价格
+export function calculateIntervalAveragePrice(
+  intervals: PriceSegment[],
+  startMinute: number,
+  endMinute: number
+): number {
+  let totalWeightedPrice = 0;
+  let totalTimeOverlap = 0;
+
+  for (const item of intervals) {
+    const overlapStart = Math.max(item.startMinute, startMinute);
+    const overlapEnd = Math.min(item.endMinute, endMinute);
+
+    if (overlapStart < overlapEnd) {
+      const duration = overlapEnd - overlapStart;
+      totalWeightedPrice += duration * item.price;
+      totalTimeOverlap += duration;
+    }
+  }
+
+  if (totalTimeOverlap > 0) {
+    return totalWeightedPrice / totalTimeOverlap;
+  }
+  return 0;
 }
 
 const BarChartWithTouch = (props: BarChartProps) => {
@@ -33,6 +64,9 @@ const BarChartWithTouch = (props: BarChartProps) => {
     height,
     theme,
     displayMode = 'consumption',
+    energyType,
+    dynamicData,
+    dateType,
   } = props
 
   const chartKey = useMemo(() => {
@@ -80,11 +114,45 @@ const BarChartWithTouch = (props: BarChartProps) => {
       const consumedVal = dataPoint.consumed || 0
       const generatedVal = dataPoint.generated || 0
 
+      let consumedPrice = price
+      let generatedPrice = price
+
+      if (energyType === 'dynamic' && dynamicData) {
+        // Consumed price
+        const costIntervals = dynamicData.intervalPrices || []
+        if (costIntervals.length > 0) {
+          if (dateType === DateType.Day) {
+            const hour = parseInt(key.split(':')[0]);
+            if (!isNaN(hour)) {
+              consumedPrice = calculateIntervalAveragePrice(costIntervals, hour * 60, (hour + 1) * 60);
+            } else {
+              consumedPrice = calculateAveragePrice(costIntervals);
+            }
+          } else {
+            consumedPrice = calculateAveragePrice(costIntervals);
+          }
+        }
+        // Generated price
+        const generateIntervals = dynamicData.generatePrices || []
+        if (generateIntervals.length > 0) {
+          if (dateType === DateType.Day) {
+            const hour = parseInt(key.split(':')[0]);
+            if (!isNaN(hour)) {
+              generatedPrice = calculateIntervalAveragePrice(generateIntervals, hour * 60, (hour + 1) * 60);
+            } else {
+              generatedPrice = calculateAveragePrice(generateIntervals);
+            }
+          } else {
+            generatedPrice = calculateAveragePrice(generateIntervals);
+          }
+        }
+      }
+
       finalDataX.push(dataPoint.title)
       finalAlignedConsumed.push(consumedVal)
       finalAlignedGenerated.push(generatedVal)
-      finalAlignedConsumedPrice.push((consumedVal * price).toFixed(2))
-      finalAlignedGeneratedPrice.push((generatedVal * price).toFixed(2))
+      finalAlignedConsumedPrice.push((consumedVal * consumedPrice).toFixed(2))
+      finalAlignedGeneratedPrice.push((generatedVal * generatedPrice).toFixed(2))
     })
 
     return {
@@ -94,7 +162,7 @@ const BarChartWithTouch = (props: BarChartProps) => {
       alignedConsumedPrice: finalAlignedConsumedPrice,
       alignedGeneratedPrice: finalAlignedGeneratedPrice,
     }
-  }, [consumedData, generatedData, price])
+  }, [consumedData, generatedData, price, energyType, dynamicData, dateType])
 
   // 图例 & series 动态生成
   const { legendData, seriesData } = useMemo(() => {

package/src/modules/energyConsumption/component/VerticalDailyPricesIndicator.tsx

@@ -0,0 +1,175 @@
+import React, {useState} from 'react'
+import { PriceSegment } from "./EnergyModal"
+import { Utils } from 'tuya-panel-kit'
+import {View, StyleSheet, StyleProp, ViewStyle, LayoutChangeEvent} from 'react-native'
+import ThemeType from '@ledvance/base/src/config/themeType'
+import _ from 'lodash'
+
+const { withTheme } = Utils.ThemeUtils
+const cx = Utils.RatioUtils.convertX
+
+interface VerticalDailyPricesIndicatorProps {
+    theme?: ThemeType
+    data: PriceSegment[]
+    selectingData?: PriceSegment
+    style?: StyleProp<ViewStyle>
+    getSegmentColor:(startMinute: number, price: number)=>string,
+}
+interface DrawBlock {
+    startMinute: number,
+    endMinute: number,
+    price: number,
+    isEmpty: boolean,
+}
+
+const convertToDrawBlocks = (sortedSegments: PriceSegment[]): DrawBlock[] => {
+    const blocks: DrawBlock[] = [];
+    let ptr = 0;
+    const TOTAL_MINUTES = 1439; // (0 ~ 1439)
+
+
+    for (const segment of sortedSegments) {
+        //早时补白
+        if (segment.startMinute > ptr) {
+            blocks.push({
+                startMinute: ptr,
+                endMinute: segment.startMinute, //直到现时起点
+                price:0,
+                isEmpty: true,
+            });
+        }
+
+        //现时色块
+        blocks.push({
+            startMinute: segment.startMinute,
+            endMinute: segment.endMinute,
+            price:segment.price,
+            isEmpty: false,
+        });
+
+        //现时末点指针
+        ptr = segment.endMinute;
+    }
+
+    //未来时补白
+    if (ptr < TOTAL_MINUTES) {
+        blocks.push({
+            startMinute: ptr, //从现时末点
+            endMinute: TOTAL_MINUTES,
+            price:0,
+            isEmpty: true,
+        });
+    }
+
+    return blocks;
+}
+
+const VerticalDailyPricesIndicator = (props: VerticalDailyPricesIndicatorProps) => {
+
+    //计算百分比
+    const getSegmentHeightPercent = (segment: DrawBlock): number => {
+        const duration = segment.endMinute - segment.startMinute
+        return (duration / 1439) * 100
+    }
+    const [indicatorHeight, setIndicatorHeight] = useState<number>(0)
+    const markerHeight = indicatorHeight / 24
+    const handleLayout = (event: LayoutChangeEvent) => {
+        const { height } = event.nativeEvent.layout;
+        if (Math.abs(indicatorHeight - height) > 0.1) {
+            setIndicatorHeight(height);
+        }
+    }
+    const sortedSegments = convertToDrawBlocks([...props.data])
+
+    const styles = StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            height: '100%',
+        },
+        indicatorWrapper: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            height: indicatorHeight,
+            width: cx(30),
+            borderRadius: cx(4),
+            overflow: 'hidden',
+            alignItems: 'center',
+        },
+        segmentBlock: {
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        expandedLabel: {
+            paddingVertical: cx(4),
+            paddingHorizontal: cx(2),
+            fontSize: cx(8),
+            fontWeight: 'bold',
+            color: '#fff',
+        },
+        timelineMarker: {
+            position: 'absolute',
+            left: -cx(28),
+            width: cx(20),
+            height: 1,
+            backgroundColor: props.theme?.global.fontColor,
+            opacity: 0.3,
+        },
+    })
+
+    return (
+        <View style={[styles.container, props.style]} onLayout={handleLayout}>
+            {/* Timeline Markers  */}
+            <View style={{height: indicatorHeight,  paddingVertical: 0 }}>
+                {_.times(24,(index)=>index).map((hour) => (
+                    <View key={hour} style={{ alignItems: 'flex-start',}}>
+                        <View style={{width: cx(8), height: markerHeight}}>
+                            <View style={{width:'100%',height:cx(1), backgroundColor:props.theme?.global.secondFontColor}}></View>
+                        </View>
+                    </View>
+                ))
+                }
+            </View>
+            <View style={{ height: indicatorHeight, width: cx(30), position: 'relative', alignItems: 'center', justifyContent: 'center' }}>
+                {/*Vertical bar */}
+                <View style={{
+                    width: cx(10),
+                    height: indicatorHeight,
+                    backgroundColor: props.theme?.segment.background,
+                    borderRadius: cx(1)
+                }} />
+                {/* Vertical Indicator Bar */}
+                <View style={[styles.indicatorWrapper]}>
+                    {sortedSegments.map((segment) => {
+                        const heightPercent = getSegmentHeightPercent(segment)
+                        const height = (heightPercent / 100) * indicatorHeight
+                        const isSelected = props.selectingData?.startMinute === segment.startMinute &&
+                            props.selectingData?.endMinute === segment.endMinute
+                        const color = segment.isEmpty ? 'transparent': props.getSegmentColor(segment.startMinute, segment.price)
+
+                        if (isSelected) {
+                            console.log(`wayne_check isSelected item inner start min: ${segment.startMinute},end min: ${segment.endMinute}`);
+                        }
+                        return (
+                            <View
+                                key={`${segment.startMinute}-${segment.endMinute}`}
+                                style={[
+                                    styles.segmentBlock,
+                                    {
+                                        height,
+                                        backgroundColor: color,
+                                        width: isSelected ? cx(30) : cx(15),
+                                        zIndex: isSelected ? 10 : 1,
+                                    }
+                                ]}
+                            />
+                        )
+                    })}
+                </View>
+            </View>
+        </View>
+    )
+}
+
+export default withTheme(VerticalDailyPricesIndicator)

package/src/modules/fixedTimeForPlug/FixedTimeForPlugPage.tsx

@@ -122,50 +122,52 @@ const FixedTimeForPlugPage = (props: { theme?: ThemeType}) => {
 
   const renderList = () => {
     return (
-      <ScrollView nestedScrollEnabled={true}>
+      <>
         <Text style={styles.execTip}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
         <Spacer height={cx(10)}/>
         {isMaxNum && <View style={{marginHorizontal: cx(24), flexDirection: 'row'}}>
             <Image style={styles.maxImg} source={{uri: res.ic_warning_amber}}/>
             <Text style={styles.maxTip}>{I18n.getLang('randomtimecycle_warning_max_number_text')}</Text>
         </View>}
-        <FlatList
-          data={fixedTimeList}
-          renderItem={({item}) => (
-            <ItemCard
-              item={item}
-              is24Hour={params.is24Hour}
-              onSwitch={async (v) => {
-                await onPost('set', {
-                  ...item,
-                  enable: v,
-                  settingTime: new Date().getTime()
-                })
-              }}
-              onPress={() => {
-                onAddOrEditItem('edit', item)
-              }}
-              onLongPress={async () =>{
-                showDialog({
-                  method: 'confirm',
-                  title: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_titel'),
-                  subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
-                  onConfirm: async (_, {close}) => {
-                    close()
-                    state.loading = true
-                    await onPost('del', item)
-                    state.loading = false
-                  }
-                })
-              }}
-            />
-          )}
-          keyExtractor={(item: any) => `${item?.index}`}
-          ItemSeparatorComponent={() => <Spacer/>}
-          ListHeaderComponent={<Spacer height={cx(10)}/>}
-          ListFooterComponent={<Spacer/>}
-        />
-      </ScrollView>
+        <ScrollView nestedScrollEnabled={true}>
+          <FlatList
+            data={fixedTimeList}
+            renderItem={({item}) => (
+              <ItemCard
+                item={item}
+                is24Hour={params.is24Hour}
+                onSwitch={async (v) => {
+                  await onPost('set', {
+                    ...item,
+                    enable: v,
+                    settingTime: new Date().getTime()
+                  })
+                }}
+                onPress={() => {
+                  onAddOrEditItem('edit', item)
+                }}
+                onLongPress={async () => {
+                  showDialog({
+                    method: 'confirm',
+                    title: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_titel'),
+                    subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
+                    onConfirm: async (_, {close}) => {
+                      close()
+                      state.loading = true
+                      await onPost('del', item)
+                      state.loading = false
+                    }
+                  })
+                }}
+              />
+            )}
+            keyExtractor={(item: any) => `${item?.index}`}
+            ItemSeparatorComponent={() => <Spacer/>}
+            ListHeaderComponent={<Spacer height={cx(10)}/>}
+            ListFooterComponent={<Spacer/>}
+          />
+        </ScrollView>
+      </>
     )
   }
   const renderEmpty = () => {

package/src/modules/fixedTimingForLight/FixedTimingForLightPage.tsx

@@ -126,50 +126,52 @@ const FixedTimeForLightPage =  (props: { theme?: ThemeType}) => {
 
   const renderList = () => {
     return (
-      <ScrollView nestedScrollEnabled={true}>
+      <>
         <Text style={styles.execTip}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
         <Spacer height={cx(10)}/>
         {isMaxNum && <View style={{marginHorizontal: cx(24), flexDirection: 'row'}}>
             <Image style={styles.maxImg} source={{uri: res.ic_warning_amber}}/>
             <Text style={styles.maxTip}>{I18n.getLang('fixedtimecycle_warning_max_number_text')}</Text>
         </View>}
-        <FlatList
-          data={fixedTimingList}
-          renderItem={({item}) => (
-            <ItemCard
-              item={item}
-              is24Hour={params.is24Hour}
-              onSwitch={async (v) => {
-                await onPost('set', {
-                  ...item,
-                  power: v,
-                  settingTime: new Date().getTime()
-                })
-              }}
-              onPress={() => {
-                onAddOrEditItem('edit', item)
-              }}
-              onLongPress={async () =>{
-                showDialog({
-                  method: 'confirm',
-                  title: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_titel'),
-                  subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
-                  onConfirm: async (_, {close}) => {
-                    close()
-                    state.loading = true
-                    await onPost('del', item)
-                    state.loading = false
-                  }
-                })
-              }}
-            />
-          )}
-          keyExtractor={(item: any) => `${item?.index}`}
-          ItemSeparatorComponent={() => <Spacer/>}
-          ListHeaderComponent={<Spacer height={cx(10)}/>}
-          ListFooterComponent={<Spacer/>}
-        />
-      </ScrollView>
+        <ScrollView nestedScrollEnabled={true}>
+          <FlatList
+            data={fixedTimingList}
+            renderItem={({item}) => (
+              <ItemCard
+                item={item}
+                is24Hour={params.is24Hour}
+                onSwitch={async (v) => {
+                  await onPost('set', {
+                    ...item,
+                    power: v,
+                    settingTime: new Date().getTime()
+                  })
+                }}
+                onPress={() => {
+                  onAddOrEditItem('edit', item)
+                }}
+                onLongPress={async () => {
+                  showDialog({
+                    method: 'confirm',
+                    title: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_titel'),
+                    subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
+                    onConfirm: async (_, {close}) => {
+                      close()
+                      state.loading = true
+                      await onPost('del', item)
+                      state.loading = false
+                    }
+                  })
+                }}
+              />
+            )}
+            keyExtractor={(item: any) => `${item?.index}`}
+            ItemSeparatorComponent={() => <Spacer/>}
+            ListHeaderComponent={<Spacer height={cx(10)}/>}
+            ListFooterComponent={<Spacer/>}
+          />
+        </ScrollView>
+      </>
     )
   }
   const renderEmpty = () => {