@ledvance/group-ui-biz-bundle 1.0.140 → 1.0.142

package/package.json

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

package/src/modules/biorhythm/IconSelect.tsx

@@ -1,33 +1,43 @@
-import {useNavigation} from '@react-navigation/native'
-import React, {useEffect, useState} from 'react'
-import {Image, ScrollView, Text, TouchableOpacity, View} from 'react-native'
-import {Utils} from 'tuya-panel-kit'
-import iconList from './iconListData'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+// 导入 Dimensions API 来获取屏幕宽度
+import { Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import iconList from '../biorhythm/iconListData'
 import LDVTopBar from '@ledvance/base/src/components/ldvTopBar'
 import I18n from '@ledvance/base/src/i18n'
-import { useParams } from '@ledvance/base/src/hooks/Hooks'
 import ThemeType from '@ledvance/base/src/config/themeType'
+import { xLog } from '@ledvance/base/src/utils'
 
-const cx = Utils.RatioUtils.convertX
+const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
-interface IconSelectPageParams {
-  id: string | number
-  setIcon: (id: string | number) => void,
+interface SceneDetailPageParams {
+  backText?: string
+  id: any
+  setIcon: (id) => void,
   iconIdList: any
 }
 
-function IconSelectPage(props: { theme?: ThemeType }) {
+// --- 新增：定义常量，方便维护 ---
+const ICON_WIDTH = cx(32)
+const ICON_MARGIN = cx(10)
+const CONTAINER_HORIZONTAL_PADDING = cx(24)
+// 每个图标占据的总宽度（图片宽度 + 左右margin）
+const ITEM_TOTAL_WIDTH = ICON_WIDTH + ICON_MARGIN * 2
+
+function IconSelect(props: { theme?: ThemeType }) {
   const [list, setList] = useState(iconList)
   const navigation = useNavigation()
-  const params = useParams<IconSelectPageParams>()
+  const params = useRoute().params as SceneDetailPageParams
+
   const setColor = id => {
     const newList = list?.map(item => {
       return {
         ...item,
         selectStatus: item?.id === id,
       }
-    })
+    }) as typeof list
     setList(newList)
   }
   useEffect(() => {
@@ -39,24 +49,74 @@ function IconSelectPage(props: { theme?: ThemeType }) {
         selectStatus: item?.id === iconId,
         disabled: iconIdList?.some(val => val === item?.id && val !== iconId),
       }
-    })
+    }) as typeof list
     setList(newList)
   }, [])
 
+  const getStyles = useCallback((theme?: ThemeType) => StyleSheet.create({
+    container: { flex: 1, flexDirection: 'column' },
+    scrollView: { marginHorizontal: CONTAINER_HORIZONTAL_PADDING },
+    titleView: { marginTop: cx(40), marginBottom: cx(20) },
+    title: { fontSize: cx(24), color: theme?.global.brand },
+    iconContainer: {
+      flexDirection: 'row',
+      flex: 1,
+      flexWrap: 'wrap',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    ghostItem: {
+      width: ICON_WIDTH,
+      height: 0,
+      margin: ICON_MARGIN,
+    }
+  }), [CONTAINER_HORIZONTAL_PADDING, ICON_WIDTH, ICON_MARGIN])
+
+  const styles = useMemo(() => getStyles(props.theme), [props.theme])
+
+  // --- 新增：动态计算需要渲染的幽灵元素数量 ---
+  const ghostElements = useMemo(() => {
+
+    // 1. 获取容器的可用宽度
+    const containerWidth = cx(Dimensions.get('window').width) - CONTAINER_HORIZONTAL_PADDING * 2
+
+    // 2. 计算每行可以容纳多少个元素
+    const itemsPerRow = Math.ceil(containerWidth / ITEM_TOTAL_WIDTH)
+    // 如果无法容纳任何元素，则不渲染幽灵元素
+    if (itemsPerRow <= 0) {
+      xLog('No ghost elements needed.')
+      return null
+    }
+
+    // 3. 计算需要补充的幽灵元素数量
+    const numberOfItems = list.length
+    const itemsInLastRow = numberOfItems % itemsPerRow
+
+    // 如果最后一行为空或已满，则不需要幽灵元素
+    if (itemsInLastRow === 0) {
+      return null
+    }
+
+    const numberOfGhosts = itemsPerRow - itemsInLastRow
+
+    // 4. 返回一个包含正确数量幽灵元素的数组
+    return Array.from({ length: numberOfGhosts }).map((_, index) => (
+      <View key={`ghost-${index}`} style={styles.ghostItem}/>
+    ))
+  }, [list.length]) // 依赖项：当图标总数变化时重新计算
+
   return (
-    <View style={{flex: 1, flexDirection: 'column'}}>
+    <View style={styles.container}>
       <LDVTopBar
-        title={I18n.getLang('add_new_trigger_time_system_back_text')}
-        onBackPress={() => {
-          navigation.goBack()
-        }}
+        title={params.backText ?? I18n.getLang('add_new_trigger_time_system_back_text')}
+        onBackPress={() => navigation.goBack()}
       />
-      <ScrollView nestedScrollEnabled={true} style={{marginHorizontal: cx(24)}}>
-        <View style={{marginTop: cx(40), marginBottom: cx(20)}}>
-          <Text style={{fontSize: cx(24), color: props.theme?.global.brand}}>{I18n.getLang('add_new_trigger_time_icon_selection_headline_text')}</Text>
+      <ScrollView nestedScrollEnabled={true} style={styles.scrollView}>
+        <View style={styles.titleView}>
+          <Text style={styles.title}>{I18n.getLang('add_new_trigger_time_icon_selection_headline_text')}</Text>
         </View>
-        <View
-          style={{flexDirection: 'row', flex: 1, flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start'}}>
+        <View style={styles.iconContainer}>
+          {/* 渲染真实的图标 */}
           {list?.map(item => {
             return <TouchableOpacity
               onPress={() => {
@@ -67,20 +127,23 @@ function IconSelectPage(props: { theme?: ThemeType }) {
               key={item.id}
             >
               <Image
-                source={{uri: item?.icon}}
+                source={{ uri: item?.icon }}
                 style={{
-                  width: cx(32),
-                  height: cx(32),
-                  margin: cx(10),
+                  width: ICON_WIDTH,
+                  height: cx(32), // 高度保持不变
+                  margin: ICON_MARGIN,
                   tintColor: item?.selectStatus ? props.theme?.icon.primary : item?.disabled && props.theme?.icon.disable || props.theme?.icon.normal,
                 }}
               />
             </TouchableOpacity>
           })}
+
+          {/* 渲染精确计算出的幽灵元素 */}
+          {ghostElements}
         </View>
       </ScrollView>
     </View>
   )
 }
 
-export default withTheme(IconSelectPage)
+export default withTheme(IconSelect)

package/src/modules/energyConsumption/EnergyConsumptionActions.ts

@@ -12,8 +12,8 @@ import { OverviewItem } from "./EnergyConsumptionPage";
 import dayjs from "dayjs";
 import { isNumber } from "lodash";
 import { EnergyData, UnitList } from "./component/EnergyModal";
-import I18n from "@ledvance/base/src/i18n";
 import {NativeApi} from "@ledvance/base/src/api/native";
+import {xLog, retryWithBackoff} from "@ledvance/base/src/utils"
 
 interface LightConfig {
   energyConsumption?: EnergyData
@@ -50,17 +50,18 @@ export async function getElectricity(devIdGroup: string[], addEleDpCode: string,
   return res
 }
 
-let dpResultByMonthCache: DpResultByMonthResData[] | undefined
+let dpResultByMonthCache: {key: DpResultByMonthResData[]} = {}
 const getDpResultByYear = async (devIdGroup: string[], addEleDpCode: string, dateStr: string): Promise<OverviewItem[]> => {
   const year = dateStr;
-  let successGroup = dpResultByMonthCache;
+  const key = devIdGroup.join()
+  let successGroup = dpResultByMonthCache[key];
   if (!successGroup) {
     const promiseGroup = devIdGroup.map(devId =>
       getDpResultByMonth(devId, addEleDpCode, 'sum').catch(error => ({ error }))
     );
     // @ts-ignore
-    dpResultByMonthCache = (await Promise.all(promiseGroup)).filter(v => !v.error);
-    successGroup = dpResultByMonthCache
+    dpResultByMonthCache[key] = (await Promise.all(promiseGroup)).filter(v => !v.error);
+    successGroup = dpResultByMonthCache[key]
   }
   if (!successGroup) {
     return []
@@ -79,7 +80,7 @@ const getDpResultByYear = async (devIdGroup: string[], addEleDpCode: string, dat
       })
     }
   })
-  const curMonthList = Object.keys(mergedData).sort((a, b) => parseInt(b) - parseInt(a));
+  const curMonthList = Object.keys(mergedData).sort((a, b) => parseInt(a) - parseInt(b));
   return curMonthList.map(month => {
     return {
       key: `${monthFormat(month)} ${year}`,
@@ -134,11 +135,12 @@ const getDpResultByYearMonth = async (deviceIdGroup: string[], addEleDpCode: str
 
 
 const getDpResultByDate = async (deviceIdGroup: string[], addEleDpCode: string, date: string): Promise<OverviewItem[]> => {
-  if (overDays(date, 7)) {
-    console.log("getDpResultByDate overDays true")
+  const newDate = date.replaceAll('/', '')
+  if (overDays(newDate, 7)) {
+    xLog("getDpResultByDate overDays true")
     return []
   }
-  const promiseGroup = deviceIdGroup.map(devId => getDpResultByHour(devId, addEleDpCode, date, 'sum').catch(error => ({ error })))
+  const promiseGroup = deviceIdGroup.map(devId => getDpResultByHour(devId, addEleDpCode, newDate, 'sum').catch(error => ({ error })))
   const res = await Promise.all(promiseGroup);
   // @ts-ignore
   const successGroup: DpResultByDataWithSpecifiedResData[] = res.filter(v => !v.error);
@@ -174,8 +176,7 @@ const getDpResultByDate = async (deviceIdGroup: string[], addEleDpCode: string,
   return list
 }
 
-export const exportEnergyCsv = (values: any[][], unit: string) => {
-  const headers = [I18n.getLang('date'), `${I18n.getLang('consumption_data_annual_bar_chart_system_back_text')} (kWh)`, `Price(${unit})`]
+export const exportEnergyCsv = (headers: string[], values: any[][]) => {
   const functionName = 'EnergyConsumption'
   exportCsvFile(headers, values, functionName)
 }
@@ -195,12 +196,37 @@ export interface EnergyGeneration {
   history: EnergyHistory[]
 }
 
+async function getJsonWithError(devId: string, key: string) {
+  const res = await NativeApi.getJson(devId, key)
+  if (!res.success) {
+    xLog(`getJsonWithError ${devId} ${key} failed`, res)
+    throw new Error(`API失败: ${res.msg || '未知错误'}`, { cause: res })
+  }
+  return res
+}
+
 export async function getEnergyGenerationValue(devId: string): Promise<EnergyGeneration | undefined> {
-  const res = await NativeApi.getJson(devId, EnergyGenerationId)
-  if (res.success && res.data) {
-    return JSON.parse(res.data)
-  } else {
-    console.log('getEnergyGenerationValue failed', res)
+  try {
+    const res = await retryWithBackoff(
+      () => getJsonWithError(devId, EnergyGenerationId),
+      {
+        // 自定义判断哪些错误需要重试
+        shouldRetry: (error) => {
+          // 网络错误、超时错误或服务器错误(5xx)通常需要重试
+          const isNetworkError = !error.cause?.success && error.cause?.msg === 'connection closed'
+
+          return isNetworkError;
+        }
+      }
+    )
+    if (res.success && res.data) {
+      return JSON.parse(res.data)
+    } else {
+      return undefined
+    }
+  } catch (error) {
+    xLog('getEnergyGenerationValue error', error.cause)
     return undefined
   }
+
 }

package/src/modules/energyConsumption/EnergyConsumptionCard.tsx

@@ -174,7 +174,7 @@ const EnergyConsumptionCard = (props: EnergyConsumptionProp) => {
     consumedEnergyItemUnit: {
       color: props.theme?.global.secondFontColor,
       fontSize: cx(14),
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       textAlign: 'center'
     },
     subContent: {
@@ -188,13 +188,13 @@ const EnergyConsumptionCard = (props: EnergyConsumptionProp) => {
       color: props.theme?.global.secondBrand,
     },
     titleText: {
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       fontSize: cx(14),
       color: props.theme?.global.secondFontColor,
       textAlign: 'center',
     },
     unitText: {
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       fontSize: cx(14),
       color: props.theme?.global.secondFontColor,
     },

package/src/modules/energyConsumption/EnergyConsumptionChart/ChartSection.tsx

@@ -1,13 +1,18 @@
 import I18n from '@ledvance/base/src/i18n'
 import React, { useCallback } from 'react'
-import { View } from 'react-native'
+import { Image, TouchableOpacity, View } from 'react-native'
 import { DateType } from '../co2Data'
-import DateSelectedItem from '../component/DateSelectedItem'
 import DateTypeItem from '../component/DateTypeItem'
+import DateSwitch from '../component/DateSwitch'
 import NewBarChart from '../component/NewBarChart'
 import { EmptyDataView } from './EmptyDataView'
+import { exportEnergyCsv } from '../EnergyConsumptionActions'
+import { Utils } from 'tuya-panel-kit'
+import res from '@ledvance/base/src/res'
 
-export const ChartSection = ({ state, actions, params, styles, theme, chartHeight }) => {
+const { convertX: cx } = Utils.RatioUtils
+
+export const ChartSection = ({ isLandscape, state, actions, params, styles, theme, chartHeight }) => {
   const getEmptyDataTip = useCallback(() => {
     if (state.over365Days && state.dateType !== DateType.Day) {
       return I18n.getLang('energyconsumption_Daylimit')
@@ -18,7 +23,77 @@ export const ChartSection = ({ state, actions, params, styles, theme, chartHeigh
     return I18n.getLang('energyconsumption_emptydata')
   }, [state.dateType, state.over365Days, state.over7Days])
 
-  const isDataEmpty = state.chartData.length <= 0
+  const handleExportCsv = useCallback(() => {
+    const displayMode = state.displayMode || 'consumption'
+    const consumedData = state.consumptionChartData
+    const generatedData = state.generationChartData
+    const price = params.price
+    const unit = params.unit
+    const consumedName = I18n.getLang('chart_legend_consumption')
+    const generatedName = I18n.getLang('chart_legend_generation')
+    // 1. 创建CSV头部 (与之前相同)
+    const header = [I18n.getLang('date')]
+    if (displayMode === 'consumption' || displayMode === 'both') {
+      header.push(`${consumedName} (kWh)`, `${consumedName} (${unit})`)
+    }
+    if (displayMode === 'generation' || displayMode === 'both') {
+      header.push(`${generatedName} (kWh)`, `${generatedName} (${unit})`)
+    }
+    const rows = []
+    let i = 0 // 指向 consumedData 的指针
+    let j = 0 // 指向 generatedData 的指针
+    // 2. 双指针合并算法
+    while (i < consumedData.length || j < generatedData.length) {
+      const consumedItem = consumedData[i]
+      const generatedItem = generatedData[j]
+      const consumedKey = consumedItem?.headlineText
+      const generatedKey = generatedItem?.headlineText
+      let rowData = []
+      let dateKey = ''
+      if (consumedKey === generatedKey) {
+        dateKey = consumedItem.key
+        const consumedValue = Number(consumedItem.value)
+        const generatedValue = Number(generatedItem.value)
+        if (displayMode === 'consumption' || displayMode === 'both') {
+          rowData.push(consumedValue.toFixed(2), (consumedValue * price).toFixed(2))
+        }
+        if (displayMode === 'generation' || displayMode === 'both') {
+          rowData.push(generatedValue.toFixed(2), (generatedValue * price).toFixed(2))
+        }
+        i++
+        j++
+      } else if (consumedKey > generatedKey || !generatedKey) {
+        dateKey = consumedItem.key
+        const consumedValue = Number(consumedItem.value)
+        if (displayMode === 'consumption' || displayMode === 'both') {
+          rowData.push(consumedValue.toFixed(2), (consumedValue * price).toFixed(2))
+        }
+        if (displayMode === 'generation' || displayMode === 'both') {
+          // 在 'generation' 或 'both' 模式下，为缺失的产生数据补0
+          rowData.push('0.00', '0.00')
+        }
+        i++
+      } else {
+        dateKey = generatedItem.key
+        const generatedValue = Number(generatedItem.value)
+        if (displayMode === 'consumption' || displayMode === 'both') {
+          // 在 'consumption' 或 'both' 模式下，为缺失的消耗数据补0
+          rowData.push('0.00', '0.00')
+        }
+        if (displayMode === 'generation' || displayMode === 'both') {
+          rowData.push(generatedValue.toFixed(2), (generatedValue * price).toFixed(2))
+        }
+        j++
+      }
+
+      // 将日期和处理好的数据行组合起来
+      rows.push([dateKey, ...rowData])
+    }
+
+    exportEnergyCsv(header, rows)
+  }, [state.displayMode, state.consumptionChartData, state.generationChartData, params.price, params.unit])
+
+  const isDataEmpty = state.consumptionChartData.length <= 0 && state.generationChartData.length <= 0
 
   return (
     <>
@@ -28,10 +103,11 @@ export const ChartSection = ({ state, actions, params, styles, theme, chartHeigh
           dateType={state.dateType}
           onDateTypeChange={actions.setDateType}
         />
-        <DateSelectedItem
-          style={styles.dateSelectedItem}
-          dateType={state.dateType}
+        <DateSwitch
+          style={{ flex: 1 }}
           date={state.date}
+          dateType={state.dateType}
+          headlineText={state.headlineText}
           onDateChange={actions.setDate}
         />
       </View>
@@ -39,14 +115,26 @@ export const ChartSection = ({ state, actions, params, styles, theme, chartHeigh
       {isDataEmpty ? (
         <EmptyDataView text={getEmptyDataTip()} theme={theme} styles={styles}/>
       ) : (
-        !state.loading && (
-          <NewBarChart
-            height={chartHeight}
-            data={state.chartData}
-            price={state.price}
-            unit={params.unit}
-          />
-        )
+        !state.loading && <>
+          {!isLandscape && <View style={styles.downloadContainer}>
+              <TouchableOpacity
+                  style={{ width: cx(30) }}
+                  onPress={handleExportCsv}>
+                  <Image
+                      style={styles.downloadIcon}
+                      source={{ uri: res.download_icon }}/>
+              </TouchableOpacity>
+          </View>}
+            <NewBarChart
+                height={chartHeight}
+                data={state.chartData}
+                displayMode={state.displayMode}
+                consumedData={state.consumptionChartData}
+                generatedData={state.generationChartData}
+                price={state.price}
+                unit={params.unit}
+            />
+        </>
       )}
     </>
   )

package/src/modules/energyConsumption/EnergyConsumptionChart/LandscapeView.tsx

@@ -31,6 +31,7 @@ export const LandscapeView = ({ state, actions, params, styles, theme, screenWid
 
       <View style={styles.landscapeContent}>
         <ChartSection
+          isLandscape={true}
           state={state}
           actions={actions}
           params={params}

package/src/modules/energyConsumption/EnergyConsumptionChart/PortraitView.tsx

@@ -1,21 +1,13 @@
 import Page from '@ledvance/base/src/components/Page'
 import res from '@ledvance/base/src/res'
-import React, { useCallback } from 'react'
-import { Image, ScrollView, TouchableOpacity, View } from 'react-native'
+import React from 'react'
+import { ScrollView, } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
-import DateSwitch from '../component/DateSwitch'
-import { exportEnergyCsv } from '../EnergyConsumptionActions'
 import { ChartSection } from './ChartSection'
 
 const { convertX: cx } = Utils.RatioUtils
 
 export const PortraitView = ({ state, actions, params, styles, theme }) => {
-
-  const handleExportCsv = useCallback(() => {
-    const values = state.chartData.map(item => [item.key, item.value, (Number(params.price) * Number(item.value)).toFixed(2)])
-    exportEnergyCsv(values, params.unit)
-  }, [state.chartData, params.price, params.unit])
-
   return (
     <Page
       backText={params.backTitle}
@@ -25,26 +17,10 @@ export const PortraitView = ({ state, actions, params, styles, theme }) => {
       rightButtonIcon={state.isSupportLandscape ? res.screen_full : undefined}
       rightButtonStyle={styles.fullScreenIcon}
       rightButtonIconClick={actions.toggleLandscape}
-      headlineContent={
-        <View style={styles.headlineContainer}>
-          <DateSwitch
-            style={styles.dateSwitch}
-            date={state.date}
-            dateType={state.dateType}
-            headlineText={state.headlineText}
-            onDateChange={actions.setDate}
-          />
-          <TouchableOpacity style={styles.downloadButton} onPress={handleExportCsv}>
-            <Image
-              style={styles.downloadIcon}
-              source={{ uri: !(state.chartData.length <= 0) ? res.download_icon : undefined }}
-            />
-          </TouchableOpacity>
-        </View>
-      }
     >
       <ScrollView nestedScrollEnabled={true} style={styles.scrollViewContent}>
         <ChartSection
+          isLandscape={false}
           state={state}
           actions={actions}
           params={params}

package/src/modules/energyConsumption/EnergyConsumptionChart/styles.ts

@@ -9,11 +9,16 @@ export const getStyles = (theme: ThemeType | undefined) => StyleSheet.create({
   scrollViewContent: {
     marginHorizontal: cx(24),
   },
+  dateSwitchContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    marginVertical: cx(15),
+  },
   dateControlsContainer: {
     flexDirection: 'row',
   },
   dateTypeItem: {
-    flex: 1,
+    flex: 0.5,
   },
   dateSelectedItem: {
     flex: 1,
@@ -72,12 +77,16 @@ export const getStyles = (theme: ThemeType | undefined) => StyleSheet.create({
   downloadButton: {
     width: cx(30),
   },
+  downloadContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    // marginHorizontal: cx(24),
+    marginTop: cx(15),
+    marginBottom: cx(-15)
+  },
   downloadIcon: {
     width: cx(24),
     height: cx(24),
     tintColor: theme?.global.brand,
-    position: 'absolute',
-    right: 0,
-    top: cx(10),
   },
 })

package/src/modules/energyConsumption/EnergyConsumptionChart/useEnergyData.ts

@@ -3,13 +3,17 @@ import { overDays } from '@ledvance/base/src/utils'
 import { loopsText, monthFormat } from '@ledvance/base/src/utils/common'
 import { useReactive, useUpdateEffect } from 'ahooks'
 import dayjs from 'dayjs'
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 import { DateType } from '../co2Data'
 import { getElectricity } from '../EnergyConsumptionActions'
 import { EnergyConsumptionChartProps } from '../EnergyConsumptionChart'
+import {useIsPad} from "@ledvance/base/src/models/modules/NativePropsSlice"
+
+export type EnergyDisplayMode = 'consumption' | 'generation' | 'both';
 
 export const useEnergyData = (params: EnergyConsumptionChartProps) => {
-  const { addEleDpCode, price, date, over365Days, over7Days, chartData, deviceIdGroup } = params
+  const isPad = useIsPad()
+  const { addEleDpCode, price, unit, date, over365Days, over7Days, chartData, deviceIdGroup, consumptionDeviceIds, generationDeviceIds } = params
 
   const getDateType = useCallback((d: string) => {
     const datejs = dayjs(d)
@@ -24,13 +28,17 @@ export const useEnergyData = (params: EnergyConsumptionChartProps) => {
   const initialDateType = getDateType(date)
   const state = useReactive({
     loading: false,
-    isSupportLandscape: OrientationService.isSupported(),
+    isSupportLandscape: OrientationService.isSupported() && !isPad,
     isLandscape: false,
     dateType: initialDateType,
     date: date,
     headlineText: initialDateType === DateType.Year ? date : params.headlineText,
     chartData: chartData.filter((item) => initialDateType !== DateType.Year || item.headlineText.startsWith(date)),
+    displayMode: params.displayMode || 'consumption',
+    consumptionChartData: [],
+    generationChartData: [],
     price: isNaN(Number(price)) ? 0 : Number(price),
+    unit: unit,
     over365Days: over365Days,
     over7Days: over7Days,
   })
@@ -53,16 +61,17 @@ export const useEnergyData = (params: EnergyConsumptionChartProps) => {
     }
   }, [state.dateType])
 
-  useUpdateEffect(() => {
+  useEffect(() => {
     state.loading = true
-    getElectricity(deviceIdGroup, addEleDpCode, state.date, state.dateType)
-      .then((res) => {
-        state.chartData = res
-        state.loading = false
-      })
-      .catch(() => {
-        state.loading = false
-      })
+    const consumptionData = getElectricity(consumptionDeviceIds, addEleDpCode, state.date, state.dateType)
+    const generationData = getElectricity(generationDeviceIds, addEleDpCode, state.date, state.dateType)
+    Promise.all([consumptionData, generationData]).then(([consumptionRes, generationRes]) => {
+      state.consumptionChartData = consumptionRes
+      state.generationChartData = generationRes
+      state.loading = false
+    }).catch(() => {
+      state.loading = false
+    })
   }, [state.date])
 
   useUpdateEffect(() => {
@@ -96,6 +105,9 @@ export const useEnergyData = (params: EnergyConsumptionChartProps) => {
     setDateType: useCallback((type: DateType) => {
       state.dateType = type
     }, []),
+    setDisplayMode: useCallback((mode: EnergyDisplayMode) => {
+      state.displayMode = mode
+    }, []),
     toggleLandscape: useCallback(() => {
       if (!state.isSupportLandscape) return
       const newIsLandscape = !state.isLandscape
@@ -106,6 +118,10 @@ export const useEnergyData = (params: EnergyConsumptionChartProps) => {
         OrientationService.lockToPortrait()
       }
     }, []),
+    setPriceAndUnit: useCallback((newPrice: string, newUnit: string) => {
+      state.price = isNaN(Number(newPrice)) ? 0 : Number(newPrice)
+      state.unit = newUnit
+    }, []),
   }
 
   return { state, actions }

package/src/modules/energyConsumption/EnergyConsumptionChart.tsx

@@ -1,4 +1,5 @@
 import { OverviewItem } from './EnergyConsumptionPage'
+import { EnergyDisplayMode } from './EnergyConsumptionChart/useEnergyData'
 
 export interface EnergyConsumptionChartProps {
   addEleDpCode: string
@@ -8,6 +9,9 @@ export interface EnergyConsumptionChartProps {
   over365Days?: boolean
   over7Days?: boolean,
   deviceIdGroup: string[];
+  displayMode?: EnergyDisplayMode;
+  consumptionDeviceIds: string[];
+  generationDeviceIds: string[];
   price: string,
   unit: string,
   date: string,