@ledvance/ui-biz-bundle 1.1.147 → 1.1.149

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.1.147",
+  "version": "1.1.149",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",
@@ -16,6 +16,7 @@
     "prop-types": "^15.6.1",
     "react": "16.8.3",
     "react-native": "0.59.10",
+    "react-native-orientation-locker": "^1.7.0",
     "react-native-svg": "5.5.1",
     "react-redux": "^7.2.1",
     "tuya-panel-kit": "^4.9.4"

package/src/newModules/energyConsumption/EnergyConsumptionActions.ts

@@ -150,7 +150,7 @@ export interface PowerDataItem {
 }
 
 // 常量抽离（便于维护）
-const DATA_POINT_INTERVAL_SEC = 10; // 预设数据间隔（秒）
+const DATA_POINT_INTERVAL_SEC = 30; // 预设数据间隔（秒）
 const TIME_UNIT = 'minute' as const; // 时间单位（与 interval 配合）
 const RETRY_CONFIG = {
   maxRetries: 5,
@@ -160,11 +160,26 @@ const RETRY_CONFIG = {
 } as const;
 
 /**
- * 获取设备功率数据（保留所有实际数据，补充10秒间隔预设数据）
+ * 创建一个0值填充的数据点
+ * @param timePoint Dayjs对象
+ * @returns PowerDataItem
+ */
+function createZeroPaddingPoint(timePoint: dayjs.Dayjs): PowerDataItem {
+  const timeMs = timePoint.valueOf();
+  return {
+    key: timePoint.format('HH:mm:ss'),
+    chartTitle: timePoint.format('MM/DD/YYYY HH:mm:ss'),
+    time: timeMs,
+    value: 0,
+  };
+}
+
+/**
+ * 获取设备功率数据（智能填充，高性能，避免在小间隔内插入0值）
  * @param devId 设备ID
  * @param powerDpCode 功率数据点编码
  * @param interval 时间区间（分钟）
- * @returns 按时间排序的完整数据（预设数据 + 所有实际数据）
+ * @returns 按时间排序的完整数据
  */
 export async function getPowerData(
   devId: string,
@@ -173,29 +188,12 @@ export async function getPowerData(
 ): Promise<PowerDataItem[]> {
   try {
     const now = dayjs();
-    const startTime = now.add(-interval, TIME_UNIT); // 起始时间：当前时间 - interval 分钟
-    const endTime = now; // 结束时间：当前时间
-    const startTimeMs = startTime.valueOf();
+    const endTime = now;
+    const startTime = now.add(-interval, TIME_UNIT);
     const endTimeMs = endTime.valueOf();
-
-    // 1. 生成预设数据（10秒间隔，仅覆盖 [startTime, endTime] 区间）
-    const totalSeconds = interval * 60;
-    const expectedDataPoints = Math.floor(totalSeconds / DATA_POINT_INTERVAL_SEC);
-    const presetData: PowerDataItem[] = [];
-    for (let i = 0; i < expectedDataPoints; i++) {
-      const timePoint = startTime.add(i * DATA_POINT_INTERVAL_SEC, 'second');
-      const timeMs = timePoint.valueOf();
-      // 确保预设数据不超出查询区间（防止边界计算误差）
-      if (timeMs > endTimeMs) break;
-      presetData.push({
-        key: timePoint.format('HH:mm:ss'),
-        chartTitle: timePoint.format('MM/DD/YYYY HH:mm:ss'),
-        time: timeMs,
-        value: 0,
-      });
-    }
-
-    // 2. 请求并处理实际数据（保留所有实际数据，不过滤）
+    const startTimeMs = startTime.valueOf();
+    const paddingIntervalMs = DATA_POINT_INTERVAL_SEC * 1000;
+    // 1. 请求已排序的实际数据
     const dpResult = await getSpecifiedTimeDpReportLogs(
       devId,
       [powerDpCode],
@@ -204,37 +202,54 @@ export async function getPowerData(
       endTimeMs.toString(),
       RETRY_CONFIG
     );
-    // 类型校验 + 格式转换（避免异常）
     const validDpResult = Array.isArray(dpResult) ? (dpResult as DpReportSataData[]) : [];
     const actualData: PowerDataItem[] = validDpResult
       .map((dp) => {
-        const timeMs = dp.timeStamp * 1000; // 秒级转毫秒级
-        // 过滤超出查询区间的实际数据（可选，根据业务需求）
+        const timeMs = dp.timeStamp * 1000;
         if (timeMs < startTimeMs || timeMs > endTimeMs) return null;
         return {
-          key: dayjs.unix(dp.timeStamp).format('HH:mm:ss'), // 统一 key 格式
+          key: dayjs.unix(dp.timeStamp).format('HH:mm:ss'),
           chartTitle: dayjs.unix(dp.timeStamp).format('MM/DD/YYYY HH:mm:ss'),
           time: timeMs,
-          value: parseFloat(dp.value) / 10, // 业务数值转换
+          value: parseFloat(dp.value) / 10,
         };
       })
-      .filter((item): item is PowerDataItem => item !== null); // 过滤无效数据
-
-    // 3. 合并预设数据和实际数据（去重：实际数据优先覆盖预设数据）
-    // 用 Map 实现 O(n) 合并（key：时间戳，value：数据项，实际数据覆盖预设）
-    const mergedMap = new Map<number, PowerDataItem>();
-    // 先加预设数据（后续实际数据相同时间戳会覆盖）
-    presetData.forEach((item) => mergedMap.set(item.time, item));
-    // 再加实际数据（覆盖相同时间戳的预设数据）
-    actualData.forEach((item) => mergedMap.set(item.time, item));
-
-    // 4. 按时间戳排序（Map 迭代顺序是插入顺序，必须显式排序）
-    const result = Array.from(mergedMap.values()).sort((a, b) => a.time - b.time);
+      .filter((item): item is PowerDataItem => item !== null);
+    // 如果没有任何真实数据，则生成完整的预设0值数据作为兜底
+    if (actualData.length === 0) {
+      const finalData: PowerDataItem[] = [];
+      let currentTime = startTime;
+      while (currentTime.valueOf() < endTimeMs) {
+        finalData.push(createZeroPaddingPoint(currentTime));
+        currentTime = currentTime.add(DATA_POINT_INTERVAL_SEC, 'second');
+      }
+      return finalData;
+    }
+    // 2. 高性能线性填充
+    const finalData: PowerDataItem[] = [];
+    let lastTimeMs = startTimeMs; // 游标从查询区间的开始时间算起
+    // 遍历所有真实数据点
+    actualData.forEach((currentPoint) => {
+      // 从上一个点的时间开始，用 while 循环填充，直到下一个真实数据点之前
+      let paddingTimeMs = lastTimeMs + paddingIntervalMs;
+      while (paddingTimeMs < currentPoint.time) {
+        finalData.push(createZeroPaddingPoint(dayjs(paddingTimeMs)));
+        paddingTimeMs += paddingIntervalMs;
+      }
 
-    return result;
+      // 添加当前的真实数据点
+      finalData.push(currentPoint);
+      lastTimeMs = currentPoint.time; // 更新游标
+    });
+    // 3. 填充查询末尾的空白区域（从最后一个真实数据点到查询结束时间）
+    let paddingTimeMs = lastTimeMs + paddingIntervalMs;
+    while (paddingTimeMs < endTimeMs) {
+      finalData.push(createZeroPaddingPoint(dayjs(paddingTimeMs)));
+      paddingTimeMs += paddingIntervalMs;
+    }
+    return finalData;
   } catch (error) {
     console.error(`[getPowerData] 失败：devId=${devId}, powerDpCode=${powerDpCode}`, error);
-    // 兜底返回空数组（或仅返回预设数据，根据业务容错需求调整）
     return [];
   }
 }

package/src/newModules/energyConsumption/EnergyConsumptionChart/EmptyDataView.tsx

@@ -0,0 +1,21 @@
+import InfoText from '@ledvance/base/src/components/InfoText'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import res from '@ledvance/base/src/res'
+import React from 'react'
+import { Image, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+
+const { convertX: cx } = Utils.RatioUtils
+
+export const EmptyDataView = ({ text, theme, styles, height }) => (
+  <View style={[styles.listEmptyView, { height }]}>
+    <Image style={styles.listEmptyImage} source={{ uri: res.ldv_timer_empty }}/>
+    <Spacer height={cx(5)}/>
+    <InfoText
+      text={text}
+      icon={res.ic_info}
+      textStyle={styles.listEmptyText}
+      contentColor={theme?.global.fontColor}
+    />
+  </View>
+)

package/src/newModules/energyConsumption/EnergyConsumptionChart/EnergyChartSection.tsx

@@ -0,0 +1,75 @@
+import I18n from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import React, { useCallback } from 'react'
+import { Image, TouchableOpacity, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import DateSelectedItem from '../component/DateSelectedItem'
+import DateSwitch from '../component/DateSwitch'
+import { DateType } from '../co2Data'
+import DateTypeItem from '../component/DateTypeItem'
+import NewBarChart from '../component/NewBarChart'
+import { EmptyDataView } from './EmptyDataView'
+import { exportEnergyCsv } from '../EnergyConsumptionActions'
+
+const { convertX: cx } = Utils.RatioUtils
+
+export const EnergyChartSection = ({ isLandscape, state, actions, params, styles, theme, chartHeight }) => {
+  const getEmptyDataTip = useCallback(() => {
+    if (state.over365Days && state.dateType !== DateType.Day) {
+      return I18n.getLang('energyconsumption_Daylimit')
+    }
+    if (state.dateType === DateType.Day && state.over7Days) {
+      return I18n.getLang('energyconsumption_hourlylimit')
+    }
+    return I18n.getLang('energyconsumption_emptydata')
+  }, [state.dateType, state.over365Days, state.over7Days])
+
+  const isDataEmpty = state.chartData.length <= 0
+
+  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 (
+    <>
+      {!isLandscape && (
+        <View style={styles.dateSwitchContainer}>
+          <DateSwitch
+            style={{ flex: 1 }}
+            date={state.date}
+            dateType={state.dateType}
+            headlineText={state.headlineText}
+            onDateChange={actions.setDate}
+          />
+          <TouchableOpacity style={{ width: cx(30) }} onPress={handleExportCsv}>
+            <Image
+              style={styles.downloadIcon}
+              source={{ uri: !isDataEmpty ? res.download_icon : undefined }}
+            />
+          </TouchableOpacity>
+        </View>
+      )}
+      <View style={styles.dateTypeContainer}>
+        <DateTypeItem
+          style={{ flex: 1, marginHorizontal: cx(5) }}
+          dateType={state.dateType}
+          onDateTypeChange={actions.setDateType}
+        />
+        <DateSelectedItem
+          style={{ flex: 1 }}
+          dateType={state.dateType}
+          date={state.date}
+          onDateChange={actions.setDate}
+        />
+      </View>
+
+      {(state.loading || isDataEmpty) ? (
+        <EmptyDataView text={getEmptyDataTip()} theme={theme} styles={styles}/>
+      ) : (
+        !state.loading &&
+        <NewBarChart height={chartHeight} data={state.chartData} price={state.price} unit={params.unit}/>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,46 @@
+import I18n from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import React from 'react'
+import { Image, Text, TouchableOpacity, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import { ChartType } from '../co2Data'
+import { EnergyChartSection } from './EnergyChartSection'
+import { PowerChartSection } from './PowerChartSection'
+
+const { convertX: cx, width } = Utils.RatioUtils
+
+export const LandscapeView = ({ state, actions, params, styles, theme, screenWidth, screenHeight }) => (
+  <View style={[styles.landscapeContainer, { width: screenWidth, height: screenHeight }]}>
+    <View style={styles.landscapeHeader}>
+      <Text style={styles.landscapeTitle}>
+        {I18n.getLang(state.chartType === ChartType.kWh ? 'chartdisplay_energy' : 'chartdisplay_power')}
+      </Text>
+      <TouchableOpacity onPress={actions.toggleLandscape}>
+        <Image source={{ uri: res.screen_normal }} style={styles.normalScreenIcon}/>
+      </TouchableOpacity>
+    </View>
+
+    <View style={styles.landscapeContent}>
+      {state.chartType === ChartType.kWh ? (
+        <EnergyChartSection
+          isLandscape={true}
+          state={state}
+          actions={actions}
+          params={params}
+          styles={styles}
+          theme={theme}
+          chartHeight={screenHeight - cx(110)}
+        />
+      ) : (
+        <PowerChartSection
+          isLandscape={true}
+          state={state}
+          actions={actions}
+          styles={styles}
+          theme={theme}
+          chartHeight={screenHeight - cx(110)}
+        />
+      )}
+    </View>
+  </View>
+)

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

@@ -0,0 +1,43 @@
+import Page from '@ledvance/base/src/components/Page'
+import Segmented from '@ledvance/base/src/components/Segmented'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import I18n from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import React from 'react'
+import { ScrollView } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import { ChartType } from '../co2Data'
+import { EnergyChartSection } from './EnergyChartSection'
+import { PowerChartSection } from './PowerChartSection'
+
+const { convertX: cx } = Utils.RatioUtils
+
+export const PortraitView = ({ state, actions, params, styles, theme }) => (
+  <Page
+    backText={params.backTitle}
+    showGreenery={false}
+    loading={state.loading}
+    greeneryIcon={res.energy_consumption_greenery}
+    rightButtonIcon={state.isSupportLandscape ? res.screen_full : undefined}
+    rightButtonStyle={styles.fullScreenIcon}
+    rightButtonIconClick={actions.toggleLandscape}
+  >
+    <ScrollView nestedScrollEnabled={true} style={styles.scrollViewContent}>
+      <Spacer/>
+      <Segmented
+        options={[
+          { label: I18n.getLang('chartdisplay_energy'), value: ChartType.kWh },
+          { label: I18n.getLang('chartdisplay_power'), value: ChartType.Watt },
+        ]}
+        value={state.chartType}
+        onChange={actions.setChartType}
+      />
+      {state.chartType === ChartType.kWh ? (
+        <EnergyChartSection state={state} actions={actions} params={params} styles={styles} theme={theme}
+                            chartHeight={cx(400)}/>
+      ) : (
+        <PowerChartSection state={state} actions={actions} styles={styles} theme={theme} chartHeight={cx(400)}/>
+      )}
+    </ScrollView>
+  </Page>
+)

package/src/newModules/energyConsumption/EnergyConsumptionChart/PowerChartSection.tsx

@@ -0,0 +1,42 @@
+import I18n from '@ledvance/base/src/i18n'
+import React from 'react'
+import { Text, TouchableOpacity, View } from 'react-native'
+import PowerLineChart from '../component/PowerLineChart'
+import { EmptyDataView } from './EmptyDataView'
+
+const INTERVAL_OPTIONS = [
+  { label: 'charttime_type1', value: 24 * 60 },
+  { label: 'charttime_type2', value: 6 * 60 },
+  { label: 'charttime_type3', value: 60 },
+  { label: 'charttime_type4', value: 5 },
+]
+
+export const PowerChartSection = ({ isLandscape, state, actions, styles, theme, chartHeight }) => {
+  const isDataEmpty = state.powerData.length <= 0
+
+  return (
+    <>
+      {isDataEmpty ? (
+        <EmptyDataView text={I18n.getLang('power_chart_empty')} theme={theme} styles={styles} height={chartHeight}/>
+      ) : (
+        <PowerLineChart height={chartHeight} data={state.powerData}/>
+      )}
+      <View style={[styles.intervalContainer, isLandscape && styles.landscapeIntervalContainer]}>
+        {INTERVAL_OPTIONS.map(({ label, value }) => {
+          const isChecked = value === state.interval
+          return (
+            <TouchableOpacity
+              key={value}
+              style={[styles.intervalItem, isChecked && styles.intervalItemChecked]}
+              onPress={() => actions.setInterval(value)}
+            >
+              <Text style={isChecked ? styles.intervalTextChecked : styles.intervalText}>
+                {I18n.getLang(label)}
+              </Text>
+            </TouchableOpacity>
+          )
+        })}
+      </View>
+    </>
+  )
+}

package/src/newModules/energyConsumption/EnergyConsumptionChart/index.tsx

@@ -0,0 +1,43 @@
+import ThemeType from '@ledvance/base/src/config/themeType'
+import { useDeviceId } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import { useRoute } from '@react-navigation/core'
+import React, { useMemo } from 'react'
+import { Utils } from 'tuya-panel-kit'
+import { EnergyConsumptionChartProps } from '../EnergyConsumptionChart'
+import { LandscapeView } from './LandscapeView'
+import { PortraitView } from './PortraitView'
+import { getStyles } from './styles'
+
+import { useEnergyData } from './useEnergyData'
+import { useScreenDimensions } from './useScreenDimensions'
+
+const { withTheme } = Utils.ThemeUtils
+
+const EnergyConsumptionChartComponent = (props: { theme?: ThemeType }) => {
+  const devId = useDeviceId()
+  const params = useRoute().params as EnergyConsumptionChartProps
+
+  // Use the custom Hook to get all state and logic
+  const { state, actions } = useEnergyData(params, devId)
+
+  // Use useMemo to prevent re-creating styles on every render
+  const styles = useMemo(() => getStyles(props.theme), [props.theme])
+
+  const { width: screenWidth, height: screenHeight } = useScreenDimensions()
+  // Conditionally render the correct view based on orientation state
+  if (state.isLandscape) {
+    return <LandscapeView
+      state={state}
+      actions={actions}
+      params={params}
+      styles={styles}
+      theme={props.theme}
+      screenWidth={screenWidth}
+      screenHeight={screenHeight}
+    />
+  }
+
+  return <PortraitView state={state} actions={actions} params={params} styles={styles} theme={props.theme}/>
+}
+
+export default withTheme(EnergyConsumptionChartComponent)

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

@@ -0,0 +1,95 @@
+import ThemeType from '@ledvance/base/src/config/themeType'
+import { StyleSheet } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+
+const { convertX: cx, width, height } = Utils.RatioUtils
+
+export const getStyles = (theme: ThemeType | undefined) => StyleSheet.create({
+  listEmptyView: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  listEmptyImage: {
+    width: cx(180),
+    height: cx(180),
+  },
+  listEmptyText: {
+    flex: 0,
+  },
+  downloadIcon: {
+    width: cx(24),
+    height: cx(24),
+    tintColor: theme?.global.brand,
+    position: 'absolute',
+    right: 0,
+    top: cx(10),
+  },
+  intervalContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: cx(-10),
+  },
+  intervalItem: {
+    flex: 1,
+    marginHorizontal: cx(5),
+    padding: cx(5),
+    borderWidth: cx(1),
+    borderRadius: cx(25),
+    borderColor: theme?.icon.normal,
+  },
+  intervalItemChecked: {
+    borderColor: theme?.icon.primary,
+  },
+  intervalText: {
+    textAlign: 'center',
+    color: theme?.global.fontColor,
+  },
+  intervalTextChecked: {
+    textAlign: 'center',
+    color: theme?.icon.primary,
+  },
+  landscapeContainer: {
+    backgroundColor: theme?.global.background,
+    // width: cx(height + 20), // In landscape, width is screen height
+    // height: width, // In landscape, height is screen width
+    paddingVertical: cx(30),
+    paddingHorizontal: cx(20),
+  },
+  landscapeHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  landscapeTitle: {
+    color: theme?.global.fontColor,
+    fontSize: cx(16),
+    fontWeight: 'bold',
+  },
+  landscapeContent: {
+    height: cx(width - 120),
+  },
+  landscapeIntervalContainer: {
+    marginTop: cx(-10),
+  },
+  dateSwitchContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    marginVertical: cx(15),
+  },
+  dateTypeContainer: {
+    flexDirection: 'row',
+    marginBottom: cx(15),
+  },
+  scrollViewContent: {
+    marginHorizontal: cx(24),
+  },
+  fullScreenIcon: {
+    tintColor: theme?.global.brand,
+  },
+  normalScreenIcon: {
+    width: cx(50),
+    height: cx(50),
+    tintColor: theme?.icon.normal
+  }
+})

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

@@ -0,0 +1,147 @@
+import { queryDpIds } from '@ledvance/base/src/api/native'
+import { OrientationService } from '@ledvance/base/src/api/OrientationService'
+import { overDays } from '@ledvance/base/src/utils'
+import { loopsText, monthFormat } from '@ledvance/base/src/utils/common'
+import { useIsFocused } from '@react-navigation/native'
+import { useInterval, useReactive, useUpdateEffect } from 'ahooks'
+import dayjs from 'dayjs'
+import { useCallback, useEffect } from 'react'
+import { ChartType, DateType } from '../co2Data'
+import { getElectricity, getPowerData, PowerDataItem } from '../EnergyConsumptionActions'
+import { EnergyConsumptionChartProps } from '../EnergyConsumptionChart'
+
+export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string) => {
+  const isFocused = useIsFocused()
+  const { addEleDpCode, powerDpCode, price, date, over365Days, over7Days, chartData } = params
+
+  const getDateType = useCallback((d: string) => {
+    const datejs = dayjs(d)
+    if (datejs.isValid()) {
+      if (datejs.format('YYYY') === d) return DateType.Year
+      if (datejs.format('YYYYMM') === d) return DateType.Month
+      if (datejs.format('YYYY/MM/DD') === d) return DateType.Day
+    }
+    return DateType.Day
+  }, [])
+
+  const state = useReactive({
+    loading: false,
+    isSupportLandscape: OrientationService.isSupported(),
+    isLandscape: false,
+    chartType: ChartType.kWh as ChartType,
+    dateType: getDateType(date),
+    date: date,
+    headlineText: params.headlineText,
+    chartData: chartData.filter((item) => getDateType(date) !== DateType.Year || item.headlineText.startsWith(date)),
+    price: isNaN(Number(price)) ? 0 : Number(price),
+    over365Days: over365Days,
+    over7Days: over7Days,
+    interval: 5,
+    powerData: [] as PowerDataItem[],
+  })
+
+  // 定时查询 DP 点
+  useInterval(() => {
+    if (isFocused) {
+      const jsonData = JSON.stringify([powerDpCode])
+      queryDpIds(jsonData, devId).then()
+    }
+  }, 5000, { immediate: true })
+
+  // 副作用：获取数据
+  useUpdateEffect(() => {
+    state.loading = true
+    if (state.chartType === ChartType.kWh) {
+      getElectricity(devId, addEleDpCode, state.date, state.dateType)
+        .then(res => {
+          state.chartData = res
+          state.loading = false
+        })
+        .catch(() => {
+          state.loading = false
+        })
+    } else {
+      getPowerData(devId, powerDpCode, state.interval)
+        .then((res: PowerDataItem[]) => {
+          state.powerData = res
+          state.loading = false
+        })
+        .catch(() => {
+          state.loading = false
+        })
+    }
+  }, [state.chartType, state.date, state.interval])
+
+  // 副作用：更新日期相关的状态和标题
+  const updateHeadlineText = useCallback((d: dayjs.Dayjs) => {
+    const year = d.year().toString()
+    const month = (d.month() + 1).toString().padStart(2, '0')
+    const day = d.date().toString().padStart(2, '0')
+    const dayOfWeek = d.day() % 7
+    switch (state.dateType) {
+      case DateType.Year:
+        state.headlineText = year
+        break
+      case DateType.Month:
+        state.headlineText = `${monthFormat(month)} ${year}`
+        break
+      case DateType.Day:
+        state.headlineText = `${day}.${month}.${year} (${loopsText[dayOfWeek]})`
+        break
+    }
+  }, [state.dateType])
+
+  useEffect(() => {
+    state.over365Days = overDays(state.date, 365)
+    state.over7Days = overDays(state.date, 7)
+    updateHeadlineText(dayjs(state.date))
+  }, [state.date])
+
+  // 副作用：根据 dateType 自动切换到今天的日期
+  useUpdateEffect(() => {
+    const d = dayjs()
+    const year = d.year().toString()
+    const month = (d.month() + 1).toString().padStart(2, '0')
+    const day = d.date().toString().padStart(2, '0')
+    switch (state.dateType) {
+      case DateType.Year:
+        state.date = year
+        break
+      case DateType.Month:
+        state.date = `${year}${month}`
+        break
+      case DateType.Day:
+        state.date = `${year}${month}${day}`
+        break
+    }
+  }, [state.dateType])
+
+  // 封装所有修改状态的函数
+  const actions = {
+    setChartType: useCallback((type: ChartType) => {
+      state.chartType = type
+    }, []),
+    setDate: useCallback((newDate: string) => {
+      state.date = newDate
+    }, []),
+    setDateType: useCallback((type: DateType) => {
+      state.dateType = type
+    }, []),
+    setInterval: useCallback((newInterval: number) => {
+      state.interval = newInterval
+      state.powerData = []
+    }, []),
+    toggleLandscape: useCallback(() => {
+      if (!state.isSupportLandscape) return
+      const newIsLandscape = !state.isLandscape
+      state.isLandscape = newIsLandscape
+      if (newIsLandscape) {
+        OrientationService.lockToLandscape()
+      } else {
+        OrientationService.lockToPortrait()
+      }
+    }, []),
+  }
+
+  return { state, actions }
+}

package/src/newModules/energyConsumption/EnergyConsumptionChart/useScreenDimensions.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+import { Dimensions, ScaledSize, Platform } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+
+const { width, height, statusBarHeight } = Utils.RatioUtils
+
+export const useScreenDimensions = () => {
+  const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
+  const [screenData, setScreenData] = useState({
+    width: screenWidth,
+    height: screenHeight,
+  })
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      setScreenData({
+        width: height,
+        height: width - statusBarHeight,
+      })
+    }
+    const onChange = (result: { window: ScaledSize }) => {
+      if (Platform.OS === 'ios') {
+        setScreenData(result.window)
+      }
+    }
+    // Subscribe to dimension changes
+    Dimensions.addEventListener('change', onChange)
+    // Don't forget to unsubscribe on cleanup
+    return () => {
+      Dimensions.removeEventListener('change', onChange)
+    }
+  }, [])
+  return {
+    ...screenData,
+    isLandscape: screenData.width > screenData.height,
+  }
+}

package/src/newModules/energyConsumption/EnergyConsumptionChart.tsx

@@ -1,33 +1,5 @@
-import { queryDpIds } from '@ledvance/base/src/api/native'
-import InfoText from '@ledvance/base/src/components/InfoText'
-import Page from '@ledvance/base/src/components/Page'
-import Segmented from '@ledvance/base/src/components/Segmented'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import ThemeType from '@ledvance/base/src/config/themeType'
-import I18n from '@ledvance/base/src/i18n'
-import { useDeviceId } from '@ledvance/base/src/models/modules/NativePropsSlice'
-import res from '@ledvance/base/src/res'
-import { loopsText, monthFormat } from '@ledvance/base/src/utils/common'
-import { overDays } from '@ledvance/base/src/utils'
-import { useIsFocused } from '@react-navigation/core'
-import PowerLineChart from './component/PowerLineChart'
-import { useRoute } from '@react-navigation/core'
-import { useInterval, useReactive, useUpdateEffect } from 'ahooks'
-import dayjs from 'dayjs'
-import React, { useCallback, useMemo } from 'react'
-import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import { Utils } from 'tuya-panel-kit'
-import { ChartType, DateType } from './co2Data'
-import DateSelectedItem from './component/DateSelectedItem'
-import DateSwitch from './component/DateSwitch'
-import DateTypeItem from './component/DateTypeItem'
-import NewBarChart from './component/NewBarChart'
-import { exportEnergyCsv, getElectricity, getPowerData, PowerDataItem } from './EnergyConsumptionActions'
 import { OverviewItem } from './EnergyConsumptionPage'
 
-const { convertX: cx } = Utils.RatioUtils
-const { withTheme } = Utils.ThemeUtils
-
 export interface EnergyConsumptionChartProps {
   addEleDpCode: string
   powerDpCode: string
@@ -40,302 +12,3 @@ export interface EnergyConsumptionChartProps {
   unit: string,
   date: string,
 }
-
-const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
-  const devId = useDeviceId()
-  const isFocused = useIsFocused()
-
-  const params = useRoute().params as EnergyConsumptionChartProps
-  const { backTitle, price, unit, date, addEleDpCode, powerDpCode, over365Days, over7Days } = params
-
-  useInterval(() => {
-      if (isFocused) {
-        const jsonData = JSON.stringify([powerDpCode])
-        queryDpIds(jsonData, devId).then()
-      }
-    },
-    5000,
-    {immediate: true}
-  )
-  const styles = StyleSheet.create({
-    listEmptyView: {
-      alignItems: 'center',
-    },
-    listEmptyImage: {
-      width: cx(200),
-      height: cx(200),
-    },
-    listEmptyText: {
-      flex: 0
-    },
-    downloadIcon: {
-      width: cx(24),
-      height: cx(24),
-      tintColor: props.theme?.global.brand,
-      position: 'absolute',
-      right: 0,
-      top: cx(10)
-    },
-    intervalContainer: {
-      flexDirection: 'row',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    intervalItem: {
-      flex: 1,
-      marginHorizontal: cx(5),
-      padding: cx(5),
-      borderWidth: cx(1),
-      borderRadius: cx(25),
-      borderColor: props.theme?.icon.normal,
-    },
-    intervalItemChecked: {
-      borderColor: props.theme?.icon.primary,
-    },
-    intervalText: {
-      textAlign: 'center',
-      color: props.theme?.global.fontColor,
-    },
-    intervalTextChecked: {
-      textAlign: 'center',
-      color: props.theme?.icon.primary,
-    }
-  })
-
-  const getDateType = useCallback((date: string) => {
-    const datejs = dayjs(date)
-    if (datejs.isValid()) {
-      if (datejs.format('YYYY') === date) {
-        return DateType.Year
-      } else if (datejs.format('YYYYMM') === date) {
-        return DateType.Month
-      } else if (datejs.format('YYYY/MM/DD') === date) {
-        return DateType.Day
-      }
-    }
-    return DateType.Day
-  }, [])
-  const dateType = getDateType(date)
-  const intervalLabels = useMemo(() => {
-    return ['charttime_type1', 'charttime_type2', 'charttime_type3', 'charttime_type4']
-  }, [])
-  const state = useReactive({
-    loading: false,
-    chartType: ChartType.kWh,
-    dateType: dateType,
-    date: date,
-    headlineText: dateType === DateType.Year ? date : params.headlineText,
-    chartData: params.chartData.filter((item) => {
-      return dateType !== DateType.Year || item.headlineText.startsWith(date)
-    }),
-    price: isNaN(Number(price)) ? 0 : Number(price),
-    over365Days: over365Days,
-    over7Days: over7Days,
-    interval: 5,
-    powerData: [] as PowerDataItem[]
-  })
-
-  useUpdateEffect(() => {
-    state.over365Days = overDays(state.date, 365)
-    state.over7Days = overDays(state.date, 7)
-    updateHeadlineText(dayjs(state.date))
-    state.loading = true
-    if (state.chartType === ChartType.kWh) {
-      getElectricity(devId, addEleDpCode, state.date, state.dateType).then((res) => {
-        state.chartData = res
-        state.loading = false
-      }).catch(() => {
-        state.loading = false
-      })
-    } else {
-      getPowerData(devId, powerDpCode, state.interval).then((res: PowerDataItem[]) => {
-        state.powerData = res
-        state.loading = false
-      }).catch(() => {
-        state.loading = false
-      })
-    }
-  }, [state.chartType, state.date])
-
-  const getEmptyDataTip = useCallback(() => {
-    if (state.over365Days && state.dateType !== DateType.Day) {
-      return I18n.getLang('energyconsumption_Daylimit')
-    }
-    if (state.dateType === DateType.Day && state.over7Days) {
-      return I18n.getLang('energyconsumption_hourlylimit')
-    }
-    return I18n.getLang('energyconsumption_emptydata')
-  }, [state.dateType, state.over365Days, state.over7Days])
-
-  const updateHeadlineText = useCallback((date: dayjs.Dayjs) => {
-    const year = date.year().toString()
-    const month = (date.month() + 1).toString().padStart(2, '0')
-    const day = date.date().toString().padStart(2, '0')
-    const dayOfWeek = date.day() % 7
-    switch (state.dateType) {
-      case DateType.Year:
-        state.headlineText = year
-        break
-      case DateType.Month:
-        state.headlineText = `${monthFormat(month)} ${year}`
-        break
-      case DateType.Day:
-        state.headlineText = `${day}.${month}.${year} (${loopsText[dayOfWeek]})`
-        break
-    }
-  }, [state.dateType, state.headlineText])
-
-  useUpdateEffect(() => {
-    const date = dayjs()
-    const year = date.year().toString()
-    const month = (date.month() + 1).toString().padStart(2, '0')
-    const day = date.date().toString().padStart(2, '0')
-    switch (state.dateType) {
-      case DateType.Year:
-        state.date = year
-        break
-      case DateType.Month:
-        state.date = `${year}${month}`
-        break
-      case DateType.Day:
-        state.date = `${year}${month}${day}`
-        break
-    }
-  }, [state.dateType])
-
-  const requestPowerData = useCallback((interval: number) => {
-    state.loading = true
-    getPowerData(devId, powerDpCode, interval).then((res: PowerDataItem[]) => {
-      state.powerData = res
-      state.loading = false
-    }).catch(() => {
-      state.loading = false
-    })
-  }, [])
-
-  return (
-    <Page
-      backText={backTitle}
-      showGreenery={false}
-      loading={state.loading}
-      greeneryIcon={res.energy_consumption_greenery}
-    >
-      <ScrollView nestedScrollEnabled={true} style={{ marginHorizontal: cx(24) }}>
-        <Spacer/>
-
-        <Segmented
-          options={[
-            { label: I18n.getLang('chartdisplay_energy'), value: ChartType.kWh },
-            { label: I18n.getLang('chartdisplay_power'), value: ChartType.Watt }
-          ]}
-          value={state.chartType}
-          onChange={(chartType: ChartType) => {
-            state.chartType = chartType
-          }}/>
-        {
-          state.chartType === ChartType.kWh ? (
-            <>
-              <View style={{ width: '100%', flexDirection: 'row', marginVertical: cx(15) }}>
-                <DateSwitch
-                  style={{ flex: 1 }}
-                  date={state.date}
-                  dateType={state.dateType}
-                  headlineText={state.headlineText}
-                  onDateChange={(date) => {
-                    state.date = date
-                  }}/>
-                <TouchableOpacity
-                  style={{ width: cx(30) }}
-                  onPress={() => {
-                    const values = state.chartData.map(item => [item.key, item.value, (Number(params.price) * Number(item.value)).toFixed(2)])
-                    exportEnergyCsv(values, params.unit)
-                  }}>
-                  <Image
-                    style={styles.downloadIcon}
-                    source={{ uri: state.chartData?.length ? res.download_icon : undefined }}/>
-                </TouchableOpacity>
-              </View>
-              <View style={{ flexDirection: 'row', marginBottom: cx(15) }}>
-                <DateTypeItem
-                  style={{ flex: 1, marginHorizontal: cx(5) }}
-                  dateType={state.dateType}
-                  onDateTypeChange={(dateType) => {
-                    state.dateType = dateType
-                  }}/>
-                <DateSelectedItem
-                  style={{ flex: 1 }}
-                  dateType={state.dateType}
-                  date={state.date}
-                  onDateChange={date => {
-                    state.date = date
-                  }}
-                />
-              </View>
-              {
-                (state.chartData.length <= 0) ? (
-                  <View style={styles.listEmptyView}>
-                    <Spacer height={cx(26)}/>
-                    <Image
-                      style={styles.listEmptyImage}
-                      source={{ uri: res.ldv_timer_empty }}/>
-                    <Spacer height={cx(14)}/>
-                    <InfoText
-                      text={getEmptyDataTip()}
-                      icon={res.ic_info}
-                      textStyle={styles.listEmptyText}
-                      contentColor={props.theme?.global.fontColor}
-                    />
-                  </View>
-                ) : (
-                  !state.loading && <NewBarChart height={cx(400)} data={state.chartData} price={state.price} unit={unit}/>
-                )
-              }
-            </>
-          ) : (
-            <>
-              {
-                (state.loading || state.powerData.length <= 0) ? (
-                  <View style={[styles.listEmptyView, {marginVertical: cx(70)}]}>
-                    <Spacer height={cx(26)}/>
-                    <Image
-                      style={styles.listEmptyImage}
-                      source={{ uri: res.ldv_timer_empty }}/>
-                    <Spacer height={cx(14)}/>
-                    <InfoText
-                      text={I18n.getLang('power_chart_empty')}
-                      icon={res.ic_info}
-                      textStyle={styles.listEmptyText}
-                      contentColor={props.theme?.global.fontColor}
-                    />
-                  </View>
-                ) : (
-                  <PowerLineChart height={cx(400)} data={state.powerData}/>
-                )
-              }
-              <View style={styles.intervalContainer}>
-                {
-                  [24 * 60, 6 * 60, 60, 5].map((item, index) => {
-                    const isChecked = item === state.interval
-                    return (
-                      <TouchableOpacity
-                        key={index}
-                        style={[styles.intervalItem, isChecked ? styles.intervalItemChecked : {}]}
-                        onPress={() => {
-                          state.interval = item
-                          requestPowerData(item)
-                        }}>
-                        <Text
-                          style={isChecked ? styles.intervalTextChecked : styles.intervalText}>{I18n.getLang(intervalLabels[index])}</Text>
-                      </TouchableOpacity>)
-                  })
-                }
-              </View>
-            </>
-          )
-        }
-      </ScrollView>
-    </Page>
-  )
-}
-
-export default withTheme(EnergyConsumptionChart)

package/src/newModules/energyConsumption/EnergyConsumptionPage.tsx

@@ -389,32 +389,36 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
           <Card
             style={styles.cardContainer}
           >
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field1_headline_text')}</Text>
-              <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
-                <Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>{localeNumber(state.todayElectricity)}</Text>
-                <Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
-              </View>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field3_headline_text')}</Text>
-                { state.energyGeneration.history.length > 0 && <TouchableOpacity
-                    onPress={() => {
-                      state.showPopup = true
-                      state.popupType = 'history'
-                    }}
-                >
-                    <Image
-                        source={{uri: res.co2_icon}}
-                        resizeMode="contain"
-                        style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
-                    />
-                </TouchableOpacity>}
+            <View style={{ flexDirection: 'row', alignItems: 'center'}}>
+              <View>
+                <View style={{height: cx(35), justifyContent: 'center'}}>
+                  <Text style={[styles.cardTitle]}>{I18n.getLang('consumption_data_field1_headline_text')}</Text>
+                </View>
+                <View style={{ flexDirection: 'row', alignItems: 'center', height: cx(35) }}>
+                  <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field3_headline_text')}</Text>
+                  { state.energyGeneration.history.length > 0 && <TouchableOpacity
+                      onPress={() => {
+                        state.showPopup = true
+                        state.popupType = 'history'
+                      }}
+                  >
+                      <Image
+                          source={{uri: res.co2_icon}}
+                          resizeMode="contain"
+                          style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
+                      />
+                  </TouchableOpacity>}
+                </View>
               </View>
-              <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
-                <Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>{localeNumber(totalElectricity)}</Text>
-                <Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
+              <View>
+                <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
+                  <Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>{localeNumber(state.todayElectricity)}</Text>
+                  <Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
+                </View>
+                <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
+                  <Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>{localeNumber(totalElectricity)}</Text>
+                  <Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
+                </View>
               </View>
             </View>
             <Spacer />

package/src/newModules/energyConsumption/Router.ts

@@ -1,7 +1,7 @@
 import {NavigationRoute} from "tuya-panel-kit";
 import EnergyConsumptionPage from "./EnergyConsumptionPage";
 import EnergyConsumptionDetail from "./EnergyConsumptionDetail";
-import EnergyConsumptionChart from "./EnergyConsumptionChart";
+import EnergyConsumptionChart from "./EnergyConsumptionChart/index";
 import {ui_biz_routerKey} from "../../navigation/Routers";
 
 const EnergyConsumptionPageRouters: NavigationRoute[] = [

package/src/newModules/energyConsumption/component/DateSelectedItem.tsx

@@ -5,7 +5,7 @@ import {DatePicker, Modal, Utils} from "tuya-panel-kit";
 import {useReactive} from "ahooks";
 import I18n from "@ledvance/base/src/i18n/index";
 import dayjs from "dayjs";
-import { DateType } from "@ledvance/ui-biz-bundle/src/newModules/energyConsumption/co2Data";
+import { DateType } from "../co2Data";
 
 const {convertX: cx} = Utils.RatioUtils
 const {withTheme} = Utils.ThemeUtils

package/src/newModules/energyConsumption/component/PowerLineChart.tsx

@@ -29,7 +29,7 @@ const PowerLineChart = (props: PowerLineChartProps) => {
       position: ['30%', '50%']
     },
     grid: {
-      right: 0
+      right: '5%'
     },
     xAxis: {
       type: 'time',
@@ -92,7 +92,7 @@ const PowerLineChart = (props: PowerLineChartProps) => {
     customMapData: {}
   }
   return (
-    <View style={{ flex: 1 }}>
+    <View style={{ height: height, width: '100%' }}>
       <ECharts
         option={option}
         ref={echarts}