@ledvance/group-ui-biz-bundle 1.0.84 → 1.0.86

package/package.json

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

package/src/modules/energyConsumption/EnergyConsumptionActions.ts

@@ -1,4 +1,11 @@
-import { useFeatureHook } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import {useGroupEzvizConfig} from "@ledvance/base/src/models/modules/NativePropsSlice";
+import {getDataWithSpecified, getDpResultByHour, getDpResultByMonth} from "@ledvance/base/src/models/TuyaApi";
+import {overDays} from "@ledvance/base/src/utils";
+import {loopsText, monthFormat, monthFormatShort} from "@ledvance/base/src/utils/common";
+import {DateType} from "@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/co2Data";
+import {OverviewItem} from "@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/EnergyConsumptionPage";
+import dayjs from "dayjs";
+import {isNumber} from "lodash";
 import {EnergyData, UnitList} from "./component/EnergyModal";
 
 interface LightConfig {
@@ -6,7 +13,7 @@ interface LightConfig {
 }
 
 export const useEnergyConsumption = () =>{
-  return useFeatureHook<LightConfig, EnergyData>('energyConsumption', {unit: UnitList[0], price: ''})
+  return useGroupEzvizConfig<LightConfig, EnergyData>('energyConsumption', {unit: UnitList[0], price: ''})
 }
 
 export const unitDivision = (str: string) => {
@@ -16,3 +23,140 @@ export const unitDivision = (str: string) => {
   const name = str.split(unit)[0]
   return [name, unit]
 }
+
+
+export async function getElectricity(devIdGroup: string[], addEleDpCode: string, date: string, dateType: DateType): Promise<OverviewItem[]> {
+  let res: OverviewItem[] = []
+  switch (dateType) {
+    case DateType.Year:
+      res = await getDpResultByYear(devIdGroup, addEleDpCode, date)
+      break
+    case DateType.Month:
+      res = await getDpResultByYearMonth(devIdGroup, addEleDpCode, date)
+      break
+    case DateType.Day:
+      res = await getDpResultByDate(devIdGroup, addEleDpCode, date);
+      break
+  }
+  return res
+}
+
+const getDpResultByYear = async (devIdGroup: string[], addEleDpCode: string, dateStr: string): Promise<OverviewItem[]> => {
+  const year = dateStr;
+  const promiseGroup = devIdGroup.map(devId =>
+      getDpResultByMonth(devId, addEleDpCode, 'sum').catch(error => ({error}))
+  );
+  const res = await Promise.all(promiseGroup);
+  // @ts-ignore
+  const successGroup: DpResultByMonthResData[] = res.filter(v => !v.error);
+  const mergedData = {}
+  successGroup.forEach(item => {
+    const monthData = item.years[year];
+    if (monthData) {
+      Object.keys(monthData).forEach(month => {
+        if (mergedData[month] === undefined) {
+          mergedData[month] = 0
+        }
+        const monthNum = Number(monthData[month])
+        mergedData[month] += Number(isNumber(monthNum) ? monthNum : 0)
+      })
+    }
+  })
+  const curMonthList = Object.keys(mergedData).sort((a, b) => parseInt(b) - parseInt(a));
+  return curMonthList.map(month => {
+    return {
+      key: `${monthFormat(month)} ${year}`,
+      value: (Number(mergedData[month]) || 0).toFixed(2),
+      headlineText: `${year}${month}`,
+      chartTitle: `${monthFormatShort(month)}\n${year}`
+    }
+  })
+}
+
+
+const getDpResultByYearMonth = async (deviceIdGroup: string[], addEleDpCode: string, dateStr: string): Promise<OverviewItem[]> => {
+  const date = dayjs(dateStr)
+  const startDay = date.startOf('month').format('YYYYMMDD')
+  const endDay = date.endOf('month').format('YYYYMMDD')
+  if (overDays(startDay, 365)) {
+    console.log("getDpResultByYearMonth overDays true")
+    return []
+  }
+  const promiseGroup = deviceIdGroup.map(devId => getDataWithSpecified(devId, addEleDpCode, startDay, endDay, 'sum').catch(error => ({error})))
+  const res = await Promise.all(promiseGroup);
+  // @ts-ignore
+  const successGroup: DpResultByDataWithSpecifiedResData[] = res.filter(v => !v.error);
+  const mergedData = {}
+  successGroup.forEach(item => {
+    if (item.result) {
+      Object.keys(item.result).forEach(day => {
+        if (mergedData[day] === undefined) {
+          mergedData[day] = 0
+        }
+        const dayNum = Number(item.result[day])
+        mergedData[day] += Number(isNumber(dayNum) ? dayNum : 0)
+      })
+    }
+  })
+  return Object.keys(mergedData).filter(v => Number(mergedData[v]) > 0).map(time => {
+    // 提取年、月和日
+    const year = time.slice(0, 4);
+    const month = time.slice(4, 6);
+    const day = time.slice(6, 8);
+
+    // 格式化为 'YYYY/MM/DD' 格式
+    const formattedDate = `${year}/${month}/${day}`
+    const dateStr = `${day}/${month}/${year}`
+    const dateObj = dayjs(formattedDate, "YYYY/MM/DD");
+    const dayOfWeek = dateObj.day() % 7;
+    const key = `${dateStr} (${loopsText[dayOfWeek]})`
+    return {
+      key,
+      value: Number(mergedData[time] || 0).toFixed(2),
+      headlineText: formattedDate,
+      chartTitle: `${Number(key?.split('/')[0])}\n${loopsText[dayOfWeek]}`
+    }
+  })
+}
+
+
+const getDpResultByDate = async (deviceIdGroup: string[], addEleDpCode: string, date: string): Promise<OverviewItem[]> => {
+  if (overDays(date, 7)) {
+    console.log("getDpResultByDate overDays true")
+    return []
+  }
+  const promiseGroup = deviceIdGroup.map(devId => getDpResultByHour(devId, addEleDpCode, date, 'sum').catch(error => ({error})))
+  const res = await Promise.all(promiseGroup);
+  // @ts-ignore
+  const successGroup: DpResultByDataWithSpecifiedResData[] = res.filter(v => !v.error);
+  const mergedData = {}
+  successGroup.forEach(item => {
+    if (item) {
+      Object.keys(item).forEach(day => {
+        if (mergedData[day] === undefined) {
+          mergedData[day] = 0
+        }
+        const dayNum = Number(item[day])
+        mergedData[day] += Number(isNumber(dayNum) ? dayNum : 0)
+      })
+    }
+  })
+
+
+  const list: Array<OverviewItem> = []
+  const resData = Object.keys(mergedData)?.map(val => {
+    return {key: Number(val?.slice(8, 10)), value: Number(mergedData[val])}
+  })
+  for (let i = 0; i <= 23; i++) {
+    const hourData = resData?.find(val => val?.key === i)
+    const hourKey = hourData?.key || i
+    const hourValue = Number(hourData?.value) || 0
+    list.push({
+      key: `${hourKey.toString().padStart(2, '0')}:00`,
+      value: hourValue,
+      chartTitle: `${hourKey}:00`,
+      headlineText: `${hourKey}:00`
+    })
+  }
+  return list
+}

package/src/modules/energyConsumption/EnergyConsumptionChart.tsx

@@ -1,16 +1,23 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { Platform, View, StyleSheet, Image } from "react-native";
 import { useRoute } from '@react-navigation/core'
 import Page from "@ledvance/base/src/components/Page";
 import res from "@ledvance/base/src/res";
 import I18n from "@ledvance/base/src/i18n";
 import { Utils } from "tuya-panel-kit";
-import BarChart from "./component/BarChart";
-import { exportFile } from "@ledvance/base/src/utils/common";
+import { exportFile, loopsText, monthFormat } from "@ledvance/base/src/utils/common";
 import { OverviewItem } from "./EnergyConsumptionPage";
 import Spacer from "@ledvance/base/src/components/Spacer";
 import InfoText from "@ledvance/base/src/components/InfoText";
 import ThemeType from '@ledvance/base/src/config/themeType'
+import {overDays} from "@ledvance/base/src/utils/index";
+import dayjs from "dayjs";
+import { DateType } from "@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/co2Data";
+import { useReactive, useUpdateEffect } from "ahooks";
+import DateTypeItem from "@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/component/DateTypeItem";
+import DateSelectedItem from "@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/component/DateSelectedItem";
+import NewBarChart from "@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/component/NewBarChart";
+import { getElectricity } from "@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/EnergyConsumptionActions";
 
 const { convertX: cx, height, width } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -20,12 +27,16 @@ export interface EnergyConsumptionChartProps {
   headlineText: string
   chartData: OverviewItem[],
   over365Days?: boolean
-  over7Days?: boolean
+  over7Days?: boolean,
+  deviceIdGroup: string[];
+  price: string,
+  unit: string,
+  date: string,
 }
 
 const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
   const params = useRoute().params as EnergyConsumptionChartProps
-  const computeNum = Platform.OS === 'ios' && 180 || 130
+  const {price, unit, date, addEleDpCode,deviceIdGroup,over365Days, over7Days} = params;
 
   const styles = StyleSheet.create({
     listEmptyView: {
@@ -35,40 +46,149 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
       width: cx(200),
       height: cx(200),
     },
-  })
+    listEmptyText: {
+      flex: 0
+    },
+  });
+
+  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 state = useReactive({
+    loading: false,
+    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,
+  });
+
+  useUpdateEffect(() => {
+    state.over365Days = overDays(state.date, 365);
+    state.over7Days = overDays(state.date, 7);
+    updateHeadlineText(dayjs(state.date));
+    state.loading = true;
+    getElectricity(deviceIdGroup, addEleDpCode, state.date, state.dateType).then((res) => {
+      state.chartData = res;
+      state.loading = false;
+    })
+  }, [state.date]);
+
+  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 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}\n${loopsText[dayOfWeek]}`;
+        break
+    }
+  }, [state.dateType, state.headlineText]);
+
+  const getEmptyDataTip = useCallback(() => {
+    if (state.over365Days) {
+      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]);
 
   return (
-    <Page
-      backText={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
-      headlineText={params.headlineText}
-      headlineIcon={params.chartData?.length ? res.download_icon : undefined}
-      onHeadlineIconClick={() => {
-        exportFile(params.chartData)
-      }}
-      showGreenery={false}
-      greeneryIcon={res.energy_consumption_greenery}
-    >
-      <View style={{ marginHorizontal: cx(24) }}>
-        {
-          params.over7Days ? (
-            <View style={styles.listEmptyView}>
-              <Spacer height={cx(26)} />
-              <Image
-                style={styles.listEmptyImage}
-                source={{ uri: res.ldv_timer_empty }} />
-              <Spacer height={cx(14)} />
-              <InfoText
-                text={I18n.getLang('energyconsumption_hourlylimit')}
-                icon={res.ic_info}
-                contentColor={props.theme?.global.fontColor}
-              />
-            </View>
-          ) : (
-            <BarChart height={height - cx(computeNum)} data={params.chartData} width={width - cx(80)} />
-          )
-        }
-      </View>
-    </Page>
+      <Page
+          backText={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
+          headlineText={state.headlineText}
+          headlineIcon={state.chartData?.length ? res.download_icon : undefined}
+          onHeadlineIconClick={() => {
+            exportFile(state.chartData,params.price,params.unit)
+          }}
+          showGreenery={false}
+          greeneryIcon={res.energy_consumption_greenery}
+          loading={state.loading}
+      >
+        <View style={{ marginHorizontal: cx(24) }}>
+          <View style={{flexDirection: 'row'}}>
+            <DateTypeItem
+                style={{flex: 1}}
+                dateType={state.dateType}
+                onDateTypeChange={(dateType) => {
+                  state.dateType = dateType;
+                }}/>
+            <DateSelectedItem
+                style={{flex: 1, marginStart: cx(10),marginBottom:cx(15)}}
+                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.chartData.length > 0 && !state.loading &&
+                <NewBarChart height={400} data={state.chartData} price={state.price}
+                             unit={unit}/>
+            )
+          }
+        </View>
+      </Page>
   )
 }
 

package/src/modules/energyConsumption/EnergyConsumptionDetail.tsx

@@ -216,7 +216,7 @@ const EnergyConsumptionDetail = (props: { theme?: ThemeType }) => {
       headlineText={params.curMonth.key}
       headlineIcon={state.overviewList.length ? res.download_icon : undefined}
       onHeadlineIconClick={() => {
-        exportFile(state.overviewList)
+        exportFile(state.overviewList, params.price, params.unit);
       }}
       showGreenery={false}
       greeneryIcon={res.energy_consumption_greenery}
@@ -301,7 +301,12 @@ const EnergyConsumptionDetail = (props: { theme?: ThemeType }) => {
               navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_chart, {
                 headlineText: params.curMonth.key,
                 chartData: state.overviewList,
-                over365Days: state.over365Days
+                over365Days: state.over365Days,
+                price:state.price,
+                unit:state.unit,
+                addEleDpCode:params.addEleDpCode,
+                date:params.curMonth.headlineText,
+                deviceIdGroup: params.deviceIdGroup,
               } as EnergyConsumptionChartProps)
             }}
             overviewItemClick={async (item) => {
@@ -312,7 +317,11 @@ const EnergyConsumptionDetail = (props: { theme?: ThemeType }) => {
                 headlineText: item.key,
                 chartData: res,
                 over7Days: state.over7Days,
-                addEleDpCode: params.addEleDpCode
+                addEleDpCode: params.addEleDpCode,
+                price:state.price,
+                unit:state.unit,
+                date:item.headlineText,
+                deviceIdGroup: params.deviceIdGroup,
               } as EnergyConsumptionChartProps)
             }}
             overViewList={state.overviewList}

package/src/modules/energyConsumption/EnergyConsumptionPage.tsx

@@ -285,7 +285,7 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
       )}
       headlineIcon={(state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList).length ? res.download_icon : undefined}
       onHeadlineIconClick={() => {
-        exportFile(state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList);
+        exportFile(state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList, state.price, state.unit);
       }}
       showGreenery={state.isSolarMode}
       greeneryIcon={res.energy_consumption_greenery}
@@ -457,14 +457,19 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
           <Spacer height={cx(30)} />
           {/* Annual overview */}
           <OverView
-            style={{ marginHorizontal: cx(24) }}
-            headlineText={I18n.getLang('consumption_data_field4_headline_text')}
-            headlineClick={() => {
-              navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_chart, {
-                headlineText: chartHeadline,
-                chartData: state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList
-              } as EnergyConsumptionChartProps)
-            }}
+              style={{marginHorizontal: cx(24)}}
+              headlineText={I18n.getLang('consumption_data_field4_headline_text')}
+              headlineClick={() => {
+                navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_chart, {
+                  headlineText: chartHeadline,
+                  chartData: state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList,
+                  price: state.price,
+                  unit: state.unit,
+                  addEleDpCode: params.addEleDpCode,
+                  date: (new Date()).getFullYear().toString(),
+                  deviceIdGroup: state.isSolarMode ? params.solarPlugGroup : params.wifiPlugGroup,
+                } as EnergyConsumptionChartProps)
+              }}
             overviewItemClick={(item) => {
               navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_detail, {
                 addEleDpCode: params.addEleDpCode,

package/src/modules/energyConsumption/co2Data.ts

@@ -23653,3 +23653,9 @@ export const carbonDioxideEmission = (name, list) => {
   const order = emissionData?.find(item => item.nation === nationCode)?.value
   return order || emissionData?.find(item => item.nation === 'World')?.value
 }
+
+export enum DateType {
+  Year = 'Year',
+  Month = 'Month',
+  Day = 'Day',
+}

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

@@ -0,0 +1,168 @@
+import ThemeType from "@ledvance/base/src/config/themeType";
+import React, {PropsWithChildren, useCallback, useEffect} from "react";
+import {StyleSheet, Text, TouchableOpacity, View, ViewProps} from "react-native";
+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/group-ui-biz-bundle/src/modules/energyConsumption/co2Data";
+
+const {convertX: cx} = Utils.RatioUtils
+const {withTheme} = Utils.ThemeUtils
+
+interface DateSelectedItemProps extends PropsWithChildren<ViewProps> {
+    theme?: ThemeType
+    date: string,
+    dateType: DateType,
+    onDateChange: (string) => void
+}
+
+const getModalMode = (dateType) => {
+    switch (dateType) {
+        case DateType.Year:
+            return 'year';
+        case DateType.Month:
+            return 'month';
+        case DateType.Day:
+        default:
+            return 'date';
+    }
+}
+
+const getDateForDateType = (year, month, day, dateType: DateType) => {
+    const monthOfYear = month.toString().padStart(2, '0');
+    const dayOfMonth = day.toString().padStart(2, '0');
+    switch (dateType) {
+        case DateType.Year:
+            return `${year}`
+        case DateType.Month:
+            return `${year}${monthOfYear}`;
+        case DateType.Day:
+            return `${year}${monthOfYear}${dayOfMonth}`;
+    }
+}
+
+export default withTheme(function DateSelectedItem(props: DateSelectedItemProps) {
+    const {dateType, date, onDateChange, theme} = props;
+    const state = useReactive({
+        showDateModal: false,
+        date: date,
+        selectedDate: date,
+        dateType: dateType,
+        modalMode: getModalMode(dateType),
+    });
+
+    const styles = StyleSheet.create({
+        root: {
+            width: '100%',
+            flexDirection: 'row',
+            borderRadius: cx(4),
+            backgroundColor: props.theme?.textInput.background,
+            alignItems: 'center',
+            height: cx(44),
+            borderBottomWidth: cx(1),
+            borderBottomColor: props.theme?.textInput.line,
+        },
+        date: {
+            fontSize: cx(16),
+            textAlign: 'center',
+            flex: 1,
+            color: props.theme?.textInput.fontColor,
+            fontFamily: 'helvetica_neue_lt_std_roman',
+        },
+        modalRoot: {paddingTop: cx(20), backgroundColor: theme?.popup.cellBg},
+        modalButtonParent: {flex: 1, height: cx(48)},
+        modalButton: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        modalConfirm: {
+            textAlign: 'center',
+            color: theme?.popup.confirmFontColor,
+            fontWeight: 'bold',
+            fontSize: cx(16)
+        },
+        modalCancel: {
+            textAlign: 'center',
+            color: theme?.popup.cancelFontColor,
+            fontSize: cx(16)
+        }
+    });
+
+    useEffect(() => {
+        state.dateType = dateType;
+        const datejs = dayjs(date)
+        switch (dateType) {
+            case DateType.Year:
+                state.date = `${datejs.year()}`;
+                break
+            case DateType.Month:
+                state.date = `${datejs.month() + 1}/${datejs.year()}`;
+                break
+            case DateType.Day:
+                state.date = `${datejs.date()}/${datejs.month() + 1}/${datejs.year()}`;
+        }
+        state.modalMode = getModalMode(dateType);
+    }, [dateType, date]);
+
+    return (<View style={props.style}>
+        <TouchableOpacity
+            style={{width: '100%',}}
+            onPress={() => {
+                state.showDateModal = true;
+            }}
+        >
+            <View style={styles.root}>
+                <Text style={styles.date}>{state.date}</Text>
+            </View>
+        </TouchableOpacity>
+
+        <Modal
+            visible={state.showDateModal}
+            onCancel={() => {
+                state.showDateModal = false;
+            }}>
+            <View style={styles.modalRoot}>
+                <DatePicker
+                    defaultDate={dayjs(date).toDate()}
+                    mode={state.modalMode}
+                    dateSortKeys={['day', 'month', 'year']}
+                    maxDate={new Date()}
+                    style={{backgroundColor: theme?.popup.cellBg}}
+                    pickerFontColor={theme?.global.fontColor}
+                    onDateChange={date => {
+                        if (date) {
+                            state.selectedDate = getDateForDateType(
+                                date.getFullYear(),
+                                date.getMonth() + 1,
+                                date.getDate(),
+                                dateType,
+                            )
+                        }
+                    }
+                    }
+                />
+                <View style={{flexDirection: 'row'}}>
+                    <TouchableOpacity style={styles.modalButtonParent} onPress={() => {
+                        state.showDateModal = false;
+                    }}>
+                        <View style={styles.modalButton}>
+                            <Text style={styles.modalCancel}>{I18n.getLang('auto_scan_system_cancel')}</Text>
+                        </View>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={styles.modalButtonParent} onPress={() => {
+                        state.showDateModal = false;
+                        onDateChange(state.selectedDate);
+                    }}>
+                        <View style={styles.modalButton}>
+                            <Text style={styles.modalConfirm}>{I18n.getLang('auto_scan_system_wifi_confirm')}</Text>
+                        </View>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </Modal>
+
+    </View>)
+})
+

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

@@ -0,0 +1,89 @@
+import ThemeType from "@ledvance/base/src/config/themeType";
+import React, {PropsWithChildren} from "react";
+import {Text, TouchableOpacity, View, ViewProps} from "react-native";
+import {Modal, Utils} from "tuya-panel-kit";
+import {useReactive, useUpdateEffect} from "ahooks";
+import I18n from "@ledvance/base/src/i18n/index";
+import { DateType } from "@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/co2Data";
+
+const {convertX: cx} = Utils.RatioUtils
+const {withTheme} = Utils.ThemeUtils
+
+interface DateTypeItemProps extends PropsWithChildren<ViewProps> {
+    theme?: ThemeType
+    dateType: string,
+    onDateTypeChange: (dateType: DateType) => void
+}
+
+export default withTheme(function DateTypeItem(props: DateTypeItemProps) {
+    const {dateType} = props;
+    const state = useReactive({
+        showDateTypeModal: false,
+        dateType: dateType,
+    });
+    useUpdateEffect(() => {
+        state.dateType = dateType;
+    }, [dateType])
+    return (<View style={props.style}>
+        <TouchableOpacity
+            style={{width: '100%',}}
+            onPress={() => {
+                state.showDateTypeModal = true;
+            }}
+        >
+            <View
+                style={{
+                    width: '100%',
+                    flexDirection: 'row',
+                    borderRadius: cx(4),
+                    backgroundColor: props.theme?.textInput.background,
+                    alignItems: 'center',
+                    height: cx(44),
+                    borderBottomWidth: cx(1),
+                    borderBottomColor: props.theme?.textInput.line,
+                }}
+            >
+                <Text style={{
+                    fontSize: cx(16),
+                    textAlign: 'center',
+                    flex: 1,
+                    color: props.theme?.textInput.fontColor,
+                    fontFamily: 'helvetica_neue_lt_std_roman',
+                }}>{state.dateType}</Text>
+            </View>
+        </TouchableOpacity>
+
+        <Modal.List
+            type={'radio'}
+            visible={state.showDateTypeModal}
+            value={state.dateType}
+            dataSource={[
+                {
+                    title: I18n.getLang('day'),
+                    key: DateType.Day,
+                    value: DateType.Day,
+                },
+                {
+                    title: I18n.getLang('month'),
+                    key: DateType.Month,
+                    value: DateType.Month,
+                },
+                {
+                    title: I18n.getLang('year'),
+                    key: DateType.Year,
+                    value: DateType.Year,
+                }
+            ]}
+            onCancel={() => {
+                state.showDateTypeModal = false;
+            }}
+            title={I18n.getLang('date_type')}
+            cancelText={I18n.getLang('auto_scan_system_cancel')}
+            confirmText={I18n.getLang('auto_scan_system_wifi_confirm')}
+            onConfirm={(item: DateType) => {
+                state.showDateTypeModal = false;
+                props.onDateTypeChange(item)
+            }}
+        />
+    </View>)
+})

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

@@ -0,0 +1,141 @@
+import React, {useRef} from 'react';
+import {View} from 'react-native';
+import ECharts from '@ledvance/react-native-echarts-pro';
+import I18n from "@ledvance/base/src/i18n";
+import ThemeType from "@ledvance/base/src/config/themeType";
+import {Utils} from "tuya-panel-kit";
+import {OverviewItem} from "../EnergyConsumptionPage";
+
+const {withTheme} = Utils.ThemeUtils
+
+interface BarChartProps {
+    theme?: ThemeType
+    data: OverviewItem[],
+    price: number,
+    unit: string,
+    height: number
+}
+
+const BarChartWithTouch = (props: BarChartProps) => {
+    const echarts = useRef();
+    const {data, height, price, unit, theme} = props;
+    const dataX = data?.map(item => {
+        return item.chartTitle;
+    });
+    const dataKwhY = data?.map(item => {
+        return Number(item.value);
+    });
+    const dataPriceY = data?.map(item => {
+        return ((isNaN(Number(item.value)) ? 0 : Number(item.value)) * price).toFixed(2);
+    });
+    const maxValue = Math.max(...dataKwhY);
+    const option = {
+        tooltip: {
+            show: true,
+            triggerOn: 'click',
+            trigger: 'axis',
+        },
+        legend: {
+            show: true,
+            data: ['kWh', unit],
+            textStyle: {
+                color: theme?.global.fontColor,
+            }
+        },
+        xAxis: {
+            data: dataX,
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                show: true,
+                color: props.theme?.global.secondFontColor,
+                interval: 0,
+            }
+        },
+        yAxis: [{
+            type: 'value',
+            name: I18n.getLang('consumption_data_annual_bar_chart_text'),
+            max: Math.ceil(maxValue),
+            min: 0,
+            position: 'left',
+            axisLabel: {
+                formatter: function (value) {
+                    return parseFloat(value).toFixed(2);
+                },
+                color:props.theme?.global.secondFontColor,
+            },
+            nameTextStyle: {
+                fontSize: 14,
+                color: props.theme?.global.secondFontColor,
+            },
+        }, {
+            type: 'value',
+            name: I18n.formatValue('format_unit', unit),
+            position: 'right',
+            alignTicks: true,
+            max: Math.ceil(price ? maxValue * price * 1.4 : 0),
+            min: 0,
+            minInterval: 1,
+            axisLabel: {
+                formatter: function (value) {
+                    return parseFloat(value).toFixed(1);
+                },
+                color:props.theme?.global.secondFontColor,
+            },
+            nameTextStyle: {
+                fontSize: 14,
+                color: props.theme?.global.secondFontColor,
+            },
+        }],
+        series: [
+            {
+                name: 'kWh',
+                type: 'bar',
+                data: dataKwhY,
+                itemStyle: {
+                    emphasis: {
+                        color: '#FFC2A9', // Color when bar is clicked
+                    },
+                    color: '#FFC2A9',
+                    borderRadius: 2,
+                },
+                barMaxWidth: 10,
+                select: {
+                    itemStyle: {
+                        borderColor: '#FFC2A9',
+                    }
+                },
+                selectedMode: 'single',
+            },
+            {
+                name: unit,
+                type: 'line',
+                data: dataPriceY,
+                yAxisIndex: 1,
+                smooth: true,
+                showSymbol: false,
+                color: '#F49431',
+                selectedMode: "single",
+            }
+        ],
+        dataZoom: {
+            start: 0,
+            type: "inside",
+            maxValueSpan: 5,
+            zoomLock: true,
+        },
+        customMapData: {}
+    };
+    return (
+        <View style={{flex: 1}}>
+            <ECharts
+                option={option}
+                ref={echarts}
+                height={height}
+            />
+        </View>
+    );
+};
+
+export default withTheme(BarChartWithTouch)