@ledvance/ui-biz-bundle 1.1.167 → 1.1.169

package/src/newModules/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";
@@ -11,6 +11,7 @@ import { cloneDeep } from "lodash";
 import ThemeType from '@ledvance/base/src/config/themeType'
 import dayjs from "dayjs";
 import {EnergyHistory} from "../EnergyConsumptionActions";
+import EditPriceSegmentScreen from "../EditPriceSegmentScreen";
 
 const { convertX: cx, height, statusBarHeight } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -31,29 +32,78 @@ 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' | 'history'
+  popupType: 'money' | 'co2' | 'unit' | 'history' | 'segment_price'
   title: string
   confirmText?: string
   cancelText?: string
   energyData?: EnergyData
   energyHistory?: EnergyHistory[]
   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)
   })
+  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));
@@ -237,7 +287,16 @@ const EnergyModal = (props: EnergyModalProps) => {
           }
         </View>
       )
-    } else {
+    } else if(props.popupType === 'segment_price') {
+      return (
+        <EditPriceSegmentScreen 
+        segment={state.editingPriceSegment}
+        onSegmentSet={(segment)=>{
+          state.editingPriceSegment = segment
+        }}/>
+      ) 
+
+    }else {
       return (
         <View>
           <Spacer />
@@ -277,7 +336,7 @@ const EnergyModal = (props: EnergyModalProps) => {
             <Spacer />
             <Card>
               <FlatList
-                data={UnitList}
+                data={  UnitList}
                 initialNumToRender={15}
                 renderItem={({ item }) => (
                   <TouchableOpacity
@@ -325,6 +384,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/newModules/energyConsumption/component/NewBarChart.tsx

@@ -9,22 +9,76 @@ import { OverviewItem } from '../EnergyConsumptionPage'
 const { withTheme } = Utils.ThemeUtils
 const cx = Utils.RatioUtils.convertX
 
+import { calculateAveragePrice, PriceSegment, DynamicEnergyData } from './EnergyModal'
+import { DateType } from '../co2Data'
+
 interface BarChartProps {
   theme?: ThemeType
   data: OverviewItem[]
   price: number
   unit: string
   height: number
+  energyType?: string
+  dynamicData?: DynamicEnergyData
+  isGeneration?: boolean
+  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) => {
   const echarts = useRef<any>()
-  const { data, height, price, unit, theme } = props
+  const { data, height, price, unit, theme, energyType, dynamicData, isGeneration, dateType } = props
 
   const dataX = data?.map(item => item.chartTitle)
   const dataKwhY = data?.map(item => Number(item.value))
-  const dataPriceY = data?.map(item =>
-    ((isNaN(Number(item.value)) ? 0 : Number(item.value)) * price).toFixed(2)
+
+  const dataPrices = useMemo(() => {
+    if (energyType === 'dynamic' && dynamicData) {
+      const intervals = isGeneration ? dynamicData.generatePrices : dynamicData.intervalPrices;
+      if (intervals && intervals.length > 0) {
+        if (dateType === DateType.Day) {
+          return data?.map(item => {
+            const hour = parseInt(item.headlineText.split(':')[0]);
+            if (!isNaN(hour)) {
+              return calculateIntervalAveragePrice(intervals, hour * 60, (hour + 1) * 60);
+            }
+            return calculateAveragePrice(intervals);
+          });
+        } else {
+          const avgPrice = calculateAveragePrice(intervals);
+          return data?.map(() => avgPrice);
+        }
+      }
+    }
+    return data?.map(() => price);
+  }, [data, price, energyType, dynamicData, isGeneration, dateType]);
+
+  const dataPriceY = data?.map((item, index) =>
+    ((isNaN(Number(item.value)) ? 0 : Number(item.value)) * (dataPrices?.[index] ?? price)).toFixed(2)
   )
 
   const maxValue = useMemo(() => {
@@ -42,6 +96,10 @@ const BarChartWithTouch = (props: BarChartProps) => {
     return max
   }, [dataKwhY])
 
+  const maxPriceValue = useMemo(() => {
+    return Math.max(...dataPriceY.map(it => Number(it)), 0);
+  }, [dataPriceY])
+
   const gridRight = useMemo(() => {
     const max = Math.max(...dataPriceY.map(it => Number(it)))
     return max > 999 ? '15%' : '10%'
@@ -109,7 +167,7 @@ const BarChartWithTouch = (props: BarChartProps) => {
           name: I18n.formatValue('format_unit', unit),
           position: 'right',
           alignTicks: true,
-          max: Math.ceil(price ? maxValue * price * 1.4 : 0),
+          max: Math.ceil(maxPriceValue ? maxPriceValue * 1.4 : 0),
           min: 0,
           minInterval: 1,
           axisLabel: {
@@ -160,7 +218,7 @@ const BarChartWithTouch = (props: BarChartProps) => {
         zoomLock: true,
       }
     }
-  }, [dataX, dataKwhY, dataPriceY, price, unit, maxValue, gridRight, theme])
+  }, [dataX, dataKwhY, dataPriceY, unit, maxValue, maxPriceValue, gridRight, theme])
 
   return (
     <View style={{ flex: 1 }}>

package/src/newModules/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)