@ledvance/group-ui-biz-bundle 1.0.135 → 1.0.137

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/group-ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.0.135",
+  "version": "1.0.137",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",
@@ -17,6 +17,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",
     "tuya-panel-kit": "^4.9.4"
   },

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

@@ -0,0 +1,53 @@
+import I18n from '@ledvance/base/src/i18n'
+import React, { useCallback } from 'react'
+import { View } from 'react-native'
+import { DateType } from '../co2Data'
+import DateSelectedItem from '../component/DateSelectedItem'
+import DateTypeItem from '../component/DateTypeItem'
+import NewBarChart from '../component/NewBarChart'
+import { EmptyDataView } from './EmptyDataView'
+
+export const ChartSection = ({ 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
+
+  return (
+    <>
+      <View style={styles.dateControlsContainer}>
+        <DateTypeItem
+          style={styles.dateTypeItem}
+          dateType={state.dateType}
+          onDateTypeChange={actions.setDateType}
+        />
+        <DateSelectedItem
+          style={styles.dateSelectedItem}
+          dateType={state.dateType}
+          date={state.date}
+          onDateChange={actions.setDate}
+        />
+      </View>
+
+      {isDataEmpty ? (
+        <EmptyDataView text={getEmptyDataTip()} theme={theme} styles={styles}/>
+      ) : (
+        !state.loading && (
+          <NewBarChart
+            height={chartHeight}
+            data={state.chartData}
+            price={state.price}
+            unit={params.unit}
+          />
+        )
+      )}
+    </>
+  )
+}

package/src/modules/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/modules/energyConsumption/EnergyConsumptionChart/LandscapeView.tsx

@@ -0,0 +1,32 @@
+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 { ChartSection } from './ChartSection'
+
+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('chartdisplay_energy')}
+      </Text>
+      <TouchableOpacity onPress={actions.toggleLandscape}>
+        <Image source={{ uri: res.screen_normal }} style={styles.normalScreenIcon}/>
+      </TouchableOpacity>
+    </View>
+
+    <View style={styles.landscapeContent}>
+      <ChartSection
+        state={state}
+        actions={actions}
+        params={params}
+        styles={styles}
+        theme={theme}
+        chartHeight={cx(width - 120)}
+      />
+    </View>
+  </View>
+)

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

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

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

@@ -0,0 +1,27 @@
+import ThemeType from '@ledvance/base/src/config/themeType'
+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 EnergyConsumptionGroupChartComponent = (props: { theme?: ThemeType }) => {
+  const params = useRoute().params as EnergyConsumptionChartProps;
+
+  const { state, actions } = useEnergyData(params);
+  const styles = useMemo(() => getStyles(props.theme), [props.theme]);
+
+  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(EnergyConsumptionGroupChartComponent);

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

@@ -0,0 +1,83 @@
+import ThemeType from '@ledvance/base/src/config/themeType'
+import { StyleSheet } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+
+const { convertX: cx, height } = Utils.RatioUtils
+
+export const getStyles = (theme: ThemeType | undefined) => StyleSheet.create({
+  // Portrait Styles
+  scrollViewContent: {
+    marginHorizontal: cx(24),
+  },
+  dateControlsContainer: {
+    flexDirection: 'row',
+  },
+  dateTypeItem: {
+    flex: 1,
+  },
+  dateSelectedItem: {
+    flex: 1,
+    marginStart: cx(10),
+    marginBottom: cx(15),
+  },
+  fullScreenIcon: {
+    tintColor: theme?.global.brand,
+  },
+
+  // Landscape Styles
+  landscapeContainer: {
+    flex: 1,
+    backgroundColor: theme?.global.background,
+    width: cx(height + 20),
+    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: {
+    flex: 1,
+  },
+  normalScreenIcon: {
+    width: cx(50),
+    height: cx(50),
+    tintColor: theme?.icon.normal
+  },
+
+  // Common Styles
+  listEmptyView: {
+    alignItems: 'center',
+  },
+  listEmptyImage: {
+    width: cx(180),
+    height: cx(180),
+  },
+  listEmptyText: {
+    flex: 0,
+  },
+  headlineContainer: {
+    width: '100%',
+    flexDirection: 'row'
+  },
+  dateSwitch: {
+    flex: 1,
+  },
+  downloadButton: {
+    width: cx(30),
+  },
+  downloadIcon: {
+    width: cx(24),
+    height: cx(24),
+    tintColor: theme?.global.brand,
+    position: 'absolute',
+    right: 0,
+    top: cx(10),
+  },
+})

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

@@ -0,0 +1,112 @@
+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 { useReactive, useUpdateEffect } from 'ahooks'
+import dayjs from 'dayjs'
+import { useCallback } from 'react'
+import { DateType } from '../co2Data'
+import { getElectricity } from '../EnergyConsumptionActions'
+import { EnergyConsumptionChartProps } from '../EnergyConsumptionChart'
+
+export const useEnergyData = (params: EnergyConsumptionChartProps) => {
+  const { addEleDpCode, price, date, over365Days, over7Days, chartData, deviceIdGroup } = 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 initialDateType = getDateType(date)
+  const state = useReactive({
+    loading: false,
+    isSupportLandscape: OrientationService.isSupported(),
+    isLandscape: false,
+    dateType: initialDateType,
+    date: date,
+    headlineText: initialDateType === DateType.Year ? date : params.headlineText,
+    chartData: chartData.filter((item) => initialDateType !== DateType.Year || item.headlineText.startsWith(date)),
+    price: isNaN(Number(price)) ? 0 : Number(price),
+    over365Days: over365Days,
+    over7Days: 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])
+
+  useUpdateEffect(() => {
+    state.loading = true
+    getElectricity(deviceIdGroup, addEleDpCode, state.date, state.dateType)
+      .then((res) => {
+        state.chartData = res
+        state.loading = false
+      })
+      .catch(() => {
+        state.loading = false
+      })
+  }, [state.date])
+
+  useUpdateEffect(() => {
+    state.over365Days = overDays(state.date, 365)
+    state.over7Days = overDays(state.date, 7)
+    updateHeadlineText(dayjs(state.date))
+  }, [state.date])
+
+  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 = {
+    setDate: useCallback((newDate: string) => {
+      state.date = newDate
+    }, []),
+    setDateType: useCallback((type: DateType) => {
+      state.dateType = type
+    }, []),
+    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/modules/energyConsumption/EnergyConsumptionChart.tsx

@@ -1,27 +1,4 @@
-import React, { useCallback } from "react";
-import { View, StyleSheet, Image, TouchableOpacity } 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 { 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 "./co2Data";
-import { useReactive, useUpdateEffect } from "ahooks";
-import DateTypeItem from "./component/DateTypeItem";
-import DateSelectedItem from "./component/DateSelectedItem";
-import NewBarChart from "./component/NewBarChart";
-import { exportEnergyCsv, getElectricity } from "./EnergyConsumptionActions";
-import DateSwitch from "./component/DateSwitch";
-
-const { convertX: cx } = Utils.RatioUtils
-const { withTheme } = Utils.ThemeUtils
+import { OverviewItem } from './EnergyConsumptionPage'
 
 export interface EnergyConsumptionChartProps {
   addEleDpCode: string
@@ -34,191 +11,4 @@ export interface EnergyConsumptionChartProps {
   price: string,
   unit: string,
   date: string,
-}
-
-const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
-  const params = useRoute().params as EnergyConsumptionChartProps
-  const { backTitle, price, unit, date, addEleDpCode, deviceIdGroup, over365Days, over7Days } = params;
-
-  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)
-    }
-  });
-
-  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;
-    }).catch(() => {
-      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} (${loopsText[dayOfWeek]})`;
-        break
-    }
-  }, [state.dateType, state.headlineText]);
-
-  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]);
-
-  return (
-    <Page
-      backText={backTitle}
-      showGreenery={false}
-      greeneryIcon={res.energy_consumption_greenery}
-      loading={state.loading}
-      headlineContent={
-        <View style={{ width: '100%', flexDirection: 'row' }}>
-          <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={{ 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={cx(400)} data={state.chartData} price={state.price}
-              unit={unit} />
-          )
-        }
-      </View>
-    </Page>
-  )
-}
-
-export default withTheme(EnergyConsumptionChart)
+}

package/src/modules/energyConsumption/EnergyConsumptionPage.tsx

@@ -333,23 +333,6 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
             </Text>
           </View>
           <Spacer />
-          {/* Today */}
-          <Card style={styles.cardContainer}>
-            <Text style={styles.cardTitle}>
-              {I18n.getLang('consumption_data_field1_headline_text')}
-            </Text>
-            <Spacer height={cx(15)} />
-            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
-              <Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>
-                {localeNumber(state.isSolarMode ? state.solarTodayElectricity : state.wifiTodayElectricity)}
-              </Text>
-              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>
-                kWh
-              </Text>
-            </View>
-            <Spacer height={cx(10)} />
-          </Card>
-          <Spacer />
           <Card
             style={styles.cardContainer}
             onPress={() => {
@@ -365,9 +348,17 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
               } as EnergyConsumptionChartProps)
             }}
           >
-            <Text style={styles.cardTitle}>
-              {I18n.getLang('consumption_data_field2_headline_text')}
-            </Text>
+            <View style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+              <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field2_headline_text')}</Text>
+              <Image
+                source={{ uri: res.energy_consumption_chart}}
+                style={{ width: cx(16), height: cx(16), marginLeft: cx(8) }}
+              />
+            </View>
             <Spacer height={cx(15)} />
             <View style={styles.consumedEnergyContent}>
               <ConsumedEnergyItem
@@ -383,17 +374,29 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
           <Spacer />
           {/* 365 day */}
           <Card style={styles.cardContainer}>
-            <Text style={styles.cardTitle}>
-              {I18n.getLang('consumption_data_field3_headline_text')}
-            </Text>
-            <Spacer height={cx(15)} />
-            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
-              <Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>
-                {localeNumber(state.isSolarMode ? state.solarTotalElectricity : state.wifiTotalElectricity)}
-              </Text>
-              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>
-                kWh
-              </Text>
+            <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={{height: cx(35), justifyContent: 'center'}}>
+                  <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field3_headline_text')}</Text>
+                </View>
+              </View>
+              <View>
+                <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
+                  <Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>
+                    {localeNumber(state.isSolarMode ? state.solarTodayElectricity : state.wifiTodayElectricity)}
+                  </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.isSolarMode ? state.solarTotalElectricity : state.wifiTotalElectricity)}
+                  </Text>
+                  <Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
+                </View>
+              </View>
             </View>
             <Spacer />
             {/* CO2 */}

package/src/modules/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/modules/energyConsumption/component/DateSelectedItem.tsx

@@ -1,11 +1,11 @@
 import ThemeType from "@ledvance/base/src/config/themeType";
-import React, {PropsWithChildren, useCallback, useEffect} from "react";
+import React, {PropsWithChildren, 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";
+import {DateType} from "../co2Data";
 
 const {convertX: cx} = Utils.RatioUtils
 const {withTheme} = Utils.ThemeUtils

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 @@ const FlagItem = (props: RecommendMoodItemProps) => {
       flexDirection: 'row',
       marginHorizontal: cx(16),
       justifyContent: 'space-between',
+      alignItems: 'center',
     },
     headText: {
       color: props.theme?.global.fontColor,
@@ -39,6 +41,13 @@ const 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',
     },
@@ -58,10 +67,9 @@ const 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/modules/mood_new/MoodItem.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
-import { StyleSheet, Text, View, ViewProps, ViewStyle, Image } from 'react-native';
-import { SwitchButton, Utils } from 'tuya-panel-kit';
+import { StyleSheet, Text, View, ViewProps, ViewStyle, Image, TouchableOpacity } from 'react-native';
+import { Utils } from 'tuya-panel-kit';
 import { hsv2Hex } from '@ledvance/base/src/utils';
 import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
 import { mapFloatToRange } from '@ledvance/base/src/utils';
@@ -50,6 +50,7 @@ const MoodItem = (props: MoodItemProps) => {
     headline: {
       flexDirection: 'row',
       marginHorizontal: cx(16),
+      alignItems: 'center',
     },
     headText: {
       flex: 1,
@@ -58,6 +59,13 @@ const MoodItem = (props: MoodItemProps) => {
       fontFamily: 'helvetica_neue_lt_std_bd',
       lineHeight: cx(20),
     },
+    checkbox: {
+      width: cx(45),
+      height: cx(45),
+      marginTop: cx(-5),
+      marginBottom: cx(-10),
+      fontWeight: 'bold',
+    },
     moodTypeItem: {
       flexDirection: 'row',
     },
@@ -83,11 +91,9 @@ const MoodItem = (props: MoodItemProps) => {
         <Spacer height={cx(16)} />
         <View style={styles.headline}>
           <Text style={styles.headText}>{mood.name}</Text>
-          <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 />
         <MixMoodColorsLine mixSubLight={mood.mainLamp} isMix={isMix} type={mood.mainLamp.mode === gradientMode ? 'gradient' : 'separate'}/>