@ledvance/ui-biz-bundle 1.1.146 → 1.1.148

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.1.146",
+  "version": "1.1.148",
   "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/modules/flags/FlagItem.tsx

@@ -1,10 +1,11 @@
-import { StyleSheet, View, Text, ViewStyle, Image } from 'react-native'
+import { StyleSheet, View, Text, ViewStyle, Image, TouchableOpacity } from 'react-native'
 import React from 'react'
 import Card from '@ledvance/base/src/components/Card'
-import { SwitchButton, Utils } from 'tuya-panel-kit'
+import { Utils } from 'tuya-panel-kit'
 import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine'
 import Spacer from '@ledvance/base/src/components/Spacer'
 import ThemeType from '@ledvance/base/src/config/themeType'
+import res from '@ledvance/base/src/res'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
@@ -31,6 +32,7 @@ function FlagItem(props: RecommendMoodItemProps) {
       flexDirection: 'row',
       marginHorizontal: cx(16),
       justifyContent: 'space-between',
+      alignItems: 'center',
     },
     headText: {
       color: props.theme?.global.fontColor,
@@ -39,6 +41,13 @@ function FlagItem(props: RecommendMoodItemProps) {
       lineHeight: cx(20),
       flex: 1
     },
+    checkbox: {
+      width: cx(45),
+      height: cx(45),
+      marginTop: cx(-5),
+      marginBottom: cx(-10),
+      fontWeight: 'bold',
+    },
     gradientItem: {
       alignItems: 'center',
     },
@@ -55,10 +64,9 @@ function FlagItem(props: RecommendMoodItemProps) {
             {props.title ? <Text style={styles.headText}>{props.title}</Text> : undefined}
             {props.icon ? <Image source={icon} style={{ width: cx(60), aspectRatio: 2.14, marginRight: cx(10) }} /> : undefined}
           </View>
-          <SwitchButton
-            thumbStyle={{ elevation: 0 }}
-            value={props.enable}
-            onValueChange={props.onSwitch} />
+          <TouchableOpacity style={styles.checkbox} onPress={() => props.onSwitch(!props.enable)}>
+            <Image source={{ uri: res.ic_check}} width={cx(44)} height={cx(44)} style={[styles.checkbox, { tintColor: props.enable ? props.theme?.icon.primary : props.theme?.icon.disable}]} />
+          </TouchableOpacity>
         </View>
         <Spacer />
         <View style={styles.gradientItem}>

package/src/newModules/energyConsumption/EnergyConsumptionActions.ts

@@ -149,31 +149,109 @@ export interface PowerDataItem {
   value: number
 }
 
-export async function getPowerData(devId: string, powerDpCode: string, interval: number): Promise<PowerDataItem[]> {
-  const now = dayjs()
-  const startTime = now.add(-1 * interval, 'minute').valueOf().toString()
-  const endTime = now.valueOf().toString()
-  const dpResult = await getSpecifiedTimeDpReportLogs(
-    devId,
-    [powerDpCode],
-    'ASC',
-    startTime,
-    endTime,
-    {
-      maxRetries: 5,
-      initialDelay: 1000,
-      maxDelay: 30000,
-      backoffFactor: 2
+// 常量抽离（便于维护）
+const DATA_POINT_INTERVAL_SEC = 30; // 预设数据间隔（秒）
+const TIME_UNIT = 'minute' as const; // 时间单位（与 interval 配合）
+const RETRY_CONFIG = {
+  maxRetries: 5,
+  initialDelay: 1000,
+  maxDelay: 30000,
+  backoffFactor: 2,
+} as const;
+
+/**
+ * 创建一个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 按时间排序的完整数据
+ */
+export async function getPowerData(
+  devId: string,
+  powerDpCode: string,
+  interval: number
+): Promise<PowerDataItem[]> {
+  try {
+    const now = dayjs();
+    const endTime = now;
+    const startTime = now.add(-interval, TIME_UNIT);
+    const endTimeMs = endTime.valueOf();
+    const startTimeMs = startTime.valueOf();
+    const paddingIntervalMs = DATA_POINT_INTERVAL_SEC * 1000;
+    // 1. 请求已排序的实际数据
+    const dpResult = await getSpecifiedTimeDpReportLogs(
+      devId,
+      [powerDpCode],
+      'ASC',
+      startTimeMs.toString(),
+      endTimeMs.toString(),
+      RETRY_CONFIG
+    );
+    const validDpResult = Array.isArray(dpResult) ? (dpResult as DpReportSataData[]) : [];
+    const actualData: PowerDataItem[] = validDpResult
+      .map((dp) => {
+        const timeMs = dp.timeStamp * 1000;
+        if (timeMs < startTimeMs || timeMs > endTimeMs) return null;
+        return {
+          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,
+        };
+      })
+      .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;
     }
-  ) as DpReportSataData[]
-  return dpResult.map(dp => {
-    return {
-      key: dp.timeStr,
-      chartTitle: dayjs.unix(dp.timeStamp).format('MM/DD/YYYY HH:mm:ss'),
-      time: dp.timeStamp * 1000,
-      value: parseFloat(dp.value) / 10
+    // 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;
+      }
+
+      // 添加当前的真实数据点
+      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 [];
+  }
 }
 
 export const exportEnergyCsv = (values: any[][], unit: string) => {

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 }) => (
+  <View style={styles.landscapeContainer}>
+    <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={cx(width - 110)}
+        />
+      ) : (
+        <PowerChartSection
+          isLandscape={true}
+          state={state}
+          actions={actions}
+          styles={styles}
+          theme={theme}
+          chartHeight={cx(width - 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,33 @@
+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'
+
+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])
+
+  // 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}/>
+  }
+
+  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
+  }
+})