@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/newModules/energyConsumption/EnergyConsumptionPage.tsx

@@ -1,393 +1,393 @@
-import React, { useEffect, useMemo } from "react";
-import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";
-import { useNavigation } from '@react-navigation/core'
-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 Spacer from "@ledvance/base/src/components/Spacer";
-import Card from "@ledvance/base/src/components/Card";
-import OverView from "./component/Overview";
-import { useReactive, useUpdateEffect } from "ahooks";
-import { getDpResultByMonth } from "@ledvance/base/src/models/TuyaApi";
-import {useDeviceId, useEngergyGeneration, useTimeZoneCity} from "@ledvance/base/src/models/modules/NativePropsSlice";
-import { flattenDeep, isEmpty } from "lodash";
-import { exchangeNumber, exportFile, localeNumber, monthFormat, monthFormatShort } from "@ledvance/base/src/utils/common";
-import {updatePrice, useElectricCurrent, usePower, useVoltage} from "./EnergyConsumptionActions";
-import {ui_biz_routerKey} from "../../navigation/Routers";
-import { EnergyConsumptionDetailProps } from "./EnergyConsumptionDetail";
-import { EnergyConsumptionChartProps } from "./EnergyConsumptionChart";
-import EnergyPopup, { EnergyData, UnitList } from "./component/EnergyModal";
-import { NativeApi } from "@ledvance/base/src/api/native";
-import { carbonDioxideEmission, countryAndRegion } from "./co2Data";
-
-const { convertX: cx } = Utils.RatioUtils
-const { withTheme } = Utils.ThemeUtils
-
-export interface EnergyConsumptionPageProps {
-  electricDpCode: string
-  powerDpCode: string
-  voltageDpCode: string
-  addEleDpCode: string
-}
-
-export interface OverviewItem {
-  key: string
-  value: number | string
-  headlineText: string
-  chartTitle: string
-}
-export type PopupType = 'co2' | 'money' | 'unit' | ''
-
-interface EnergyConsumptionState {
-  todayElectricity: string
-  totalElectricity: string
-  overviewList: OverviewItem[]
-  price: string
-  unit: string
-  showPopup: boolean
-  popupType: PopupType
-  co2Saved: string
-}
-const EnergyConsumptionPage = (props: {theme?: any}) => {
-  const params = useRoute().params as EnergyConsumptionPageProps
-  const devId = useDeviceId()
-  const navigation = useNavigation()
-  const timeZoneCity = useTimeZoneCity()
-  const power = usePower(params.powerDpCode)
-  const voltage = useVoltage(params.voltageDpCode)
-  const electric = useElectricCurrent(params.electricDpCode)
-  const isSolarPlug = useEngergyGeneration()
-  const state = useReactive<EnergyConsumptionState>({
-    todayElectricity: '0',
-    totalElectricity: '0',
-    overviewList: [],
-    price: '',
-    unit: UnitList[0],
-    showPopup: false,
-    popupType: '',
-    co2Saved: '0'
-  })
-  const chartHeadline = useMemo(() => {
-    const len = state.overviewList.length
-    return state.overviewList?.length ? `${state.overviewList[len - 1].key} - ${state.overviewList[0].key}` : ''
-  }, [state.overviewList])
-
-  useEffect(() => {
-    getElectricity().then()
-    getInitPrice().then()
-  }, [])
-
-  useUpdateEffect(() =>{
-    if(Number(state.totalElectricity) > 0 && timeZoneCity){
-      const letOut = carbonDioxideEmission(timeZoneCity, countryAndRegion) || 0
-      state.co2Saved = localeNumber((letOut * Number(state.totalElectricity)) / 1000, 4)
-    }
-  }, [state.totalElectricity, timeZoneCity])
-
-  const getElectricity = async () => {
-    const res = await getDpResultByMonth(devId, params.addEleDpCode, 'sum')
-    if (!isEmpty(res)) {
-      state.todayElectricity = res.thisDay
-      state.totalElectricity = res.sum
-      console.log(res, '< --- res')
-      if (!isEmpty(res.years)) {
-        const yearsList = Object.keys(res.years)
-        yearsList.sort((a, b) => parseInt(b) - parseInt(a))
-        const monthList = yearsList.map(year => {
-          const curMonth = res.years[year]
-          const curMonthList = Object.keys(curMonth).sort((a, b) => parseInt(b) - parseInt(a))
-          const monthData = curMonthList.map(month => {
-            return {
-              key: `${monthFormat(month)} ${year}`,
-              value: (Number(curMonth[month]) || 0).toFixed(2),
-              headlineText: `${year}${month}`,
-              chartTitle: `${monthFormatShort(month)}\n${year}`
-            }
-          })
-          return monthData
-        })
-        state.overviewList = flattenDeep(monthList)
-      }
-    }
-  }
-
-  const getInitPrice = async () => {
-    const res = await NativeApi.getJson(devId, 'energiepreise')
-    if (res.success && res.data) {
-      const v = JSON.parse(res.data)
-      state.price = v?.price
-      state.unit = v?.unit
-    }
-  }
-
-  const updateEnergyData = (data: EnergyData) => {
-    updatePrice(devId, data).then()
-    state.price = data.price
-    state.unit = data.unit
-  }
-
-  const styles = StyleSheet.create({
-    showTip: {
-      marginHorizontal: cx(24)
-    },
-    cardContainer: {
-      flex: 1,
-      marginHorizontal: cx(24),
-      padding: cx(16)
-    },
-    cardTitle: {
-      color: props.theme.global.fontColor,
-      fontSize: cx(16),
-      fontWeight: 'bold'
-    },
-    consumedEnergyContent: {
-      flex: 1,
-      flexDirection: 'row',
-    },
-    consumptionNum: {
-      color: props.theme.global.secondBrand,
-      fontFamily: 'helvetica_neue_lt_std_bd',
-    },
-    subContent: {
-      flex: 1,
-      alignItems: 'center',
-      marginBottom: cx(9)
-    },
-    valueText: {
-      fontSize: cx(24),
-      fontWeight: 'bold',
-      color: props.theme.global.secondBrand,
-    },
-    titleText: {
-      fontFamily: 'helvetica_neue_lt_std_roman',
-      fontSize: cx(14),
-      color: props.theme.global.secondFontColor,
-      textAlign: 'center',
-    },
-    priceBg: {
-      height: cx(40),
-      width: cx(40),
-      borderRadius: cx(40),
-      backgroundColor: props.theme.global.thirdBrand,
-      justifyContent: 'center',
-      alignItems: 'center',
-      marginRight: cx(10)
-    },
-    priceNum: {
-      marginRight: cx(10)
-    },
-    priceButton: {
-      borderRadius: cx(5),
-      paddingHorizontal: cx(10),
-      paddingVertical: cx(8),
-      marginTop: cx(8),
-      backgroundColor: props.theme.button.active,
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    unitItem: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      paddingHorizontal: cx(10),
-      alignItems: 'center',
-      height: cx(40),
-
-    }
-  })
-
-
-  const unitDivision = (str) => {
-    if (!str) { return ['', ''] }
-    const strIndex = str.indexOf('(' || '（')
-    const unit = str.substring(strIndex)
-    const name = str.split(unit)[0]
-    return [name, unit]
-  }
-
-  const ConsumedEnergyItem = (props: { value: number, unit: string }) => {
-    return (
-      <View style={styles.subContent}>
-        <Text style={styles.valueText}>{(props.value) || 0}</Text>
-        <Spacer height={cx(4)} />
-        <Text style={styles.titleText}>
-          {unitDivision(props.unit)[0]}
-        </Text>
-        <Text style={styles.titleText}>
-          {unitDivision(props.unit)[1]}
-        </Text>
-      </View>
-    )
-  }
-
-  return (
-    <Page
-      style={{ position: 'relative' }}
-      backText={I18n.getLang(isSolarPlug ? 'sockets_headline_power' : 'consumption_data_annual_bar_chart_system_back_text')}
-      headlineText={I18n.getLang(isSolarPlug ? 'sockets_headline_power' : 'consumption_data_annual_bar_chart_system_back_text')}
-      headlineIcon={state.overviewList.length ? res.download_icon : undefined}
-      onHeadlineIconClick={() => {
-        exportFile(state.overviewList)
-      }}
-      showGreenery={isSolarPlug}
-      greeneryIcon={res.energy_consumption_greenery}
-    >
-      <ScrollView nestedScrollEnabled={true}>
-        <View>
-          {/* tip */}
-          <Spacer height={cx(15)} />
-          <View style={styles.showTip}>
-            <Text style={{ fontSize: cx(14) }}>{I18n.getLang(isSolarPlug ? 'generation_data_description_text' : 'consumption_data_description_text')}</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.todayElectricity)}</Text>
-              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
-            </View>
-            <Spacer height={cx(10)} />
-          </Card>
-          <Spacer />
-          <Card
-            style={styles.cardContainer}
-          >
-            <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field2_headline_text')}</Text>
-            <Spacer height={cx(15)} />
-            <View style={styles.consumedEnergyContent}>
-              <ConsumedEnergyItem
-                value={power}
-                unit={I18n.getLang('consumption_data_field2_value_text1')} />
-              <ConsumedEnergyItem
-                value={electric}
-                unit={I18n.getLang('consumption_data_field2_value_text2')} />
-              <ConsumedEnergyItem
-                value={voltage}
-                unit={I18n.getLang('consumption_data_field2_value_text3')} />
-            </View>
-          </Card>
-          <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.totalElectricity)}</Text>
-              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
-            </View>
-            <Spacer />
-            {/* CO2 */}
-            {isSolarPlug && <>
-                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                    <View style={styles.priceBg}>
-                        <Image
-                            source={res.energy_consumption_cash}
-                            resizeMode="contain"
-                            style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.active }}
-                        />
-                    </View>
-                    <View style={styles.priceNum}>
-                        <View style={{ flexDirection: 'row' }}>
-                            <Text style={{ color: props.theme.global.secondFontColor, marginRight: cx(5) }}>{I18n.getLang('consumption_data_field3_co2_topic_text')}</Text>
-                            <TouchableOpacity
-                                onPress={() => {
-                                  state.showPopup = true
-                                  state.popupType = 'co2'
-                                }}
-                            >
-                                <Image
-                                    source={res.co2Icon}
-                                    resizeMode="contain"
-                                    style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.active }}
-                                />
-                            </TouchableOpacity>
-                        </View>
-                        <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
-                    </View>
-                </View>
-                <Spacer height={cx(10)} />
-            </>}
-            {/* money */}
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <View style={styles.priceBg}>
-                <Image
-                  source={res.energy_consumption_cash}
-                  resizeMode="contain"
-                  style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.active }}
-                />
-              </View>
-              <View>
-                <View style={styles.priceNum}>
-                  <Text style={{ color: props.theme.global.secondFontColor }}>{I18n.getLang(isSolarPlug ? 'consumption_data_monthly_overview_field1_text2' : 'consumption_data_field3_value_text2')}</Text>
-                  <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * Number(state.totalElectricity), 2)} ${state.unit}` : '-'}</Text>
-                </View>
-                <TouchableOpacity onPress={() => {
-                  state.showPopup = true
-                  state.popupType = 'money'
-                }}>
-                  <View style={styles.priceButton}>
-                    <Text style={{ color: props.theme.button.fontColor }}>{I18n.getLang('consumption_data_field3_button_text')}</Text>
-                  </View>
-                </TouchableOpacity>
-              </View>
-            </View>
-          </Card>
-          <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.ui_biz_energy_consumption_chart, {
-                headlineText: chartHeadline,
-                chartData: state.overviewList
-              } as EnergyConsumptionChartProps)
-            }}
-            overviewItemClick={(item) => {
-              navigation.navigate(ui_biz_routerKey.ui_biz_energy_consumption_detail, {
-                addEleDpCode: params.addEleDpCode,
-                curMonth: item,
-                price: state.price,
-                unit: state.unit,
-                updateEnergyData
-              } as EnergyConsumptionDetailProps)
-            }}
-            overViewList={state.overviewList}
-          />
-          {/* modal */}
-          <EnergyPopup
-            visible={!!(state.popupType && state.showPopup)}
-            popupType={state.popupType || 'co2'}
-            title={state.popupType === 'co2' ? I18n.getLang('consumption_data_field3_co2_topic_text') : ''}
-            cancelText={state.popupType === 'co2' ? '' : I18n.getLang("auto_scan_system_cancel")}
-            confirmText={I18n.getLang(state.popupType === 'co2' ? 'home_screen_home_dialog_yes_con' : 'auto_scan_system_wifi_confirm')}
-            energyData={{ price: state.price, unit: state.unit }}
-            onConfirm={(energyData) => {
-              state.popupType = ''
-              state.showPopup = false
-              if(energyData){
-                updateEnergyData({
-                  ...energyData,
-                  price: exchangeNumber(energyData.price)
-                })
-              }
-            }}
-            onCancel={() => {
-              state.popupType = ''
-              state.showPopup = false
-            }}
-          />
-        </View>
-      </ScrollView>
-    </Page>
-  )
-}
-
-export default withTheme(EnergyConsumptionPage)
+import React, { useEffect, useMemo } from "react";
+import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";
+import { useNavigation } from '@react-navigation/core'
+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 Spacer from "@ledvance/base/src/components/Spacer";
+import Card from "@ledvance/base/src/components/Card";
+import OverView from "./component/Overview";
+import { useReactive, useUpdateEffect } from "ahooks";
+import { getDpResultByMonth } from "@ledvance/base/src/models/TuyaApi";
+import {useDeviceId, useEngergyGeneration, useTimeZoneCity} from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { flattenDeep, isEmpty } from "lodash";
+import { exchangeNumber, exportFile, localeNumber, monthFormat, monthFormatShort } from "@ledvance/base/src/utils/common";
+import {updatePrice, useElectricCurrent, usePower, useVoltage} from "./EnergyConsumptionActions";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+import { EnergyConsumptionDetailProps } from "./EnergyConsumptionDetail";
+import { EnergyConsumptionChartProps } from "./EnergyConsumptionChart";
+import EnergyPopup, { EnergyData, UnitList } from "./component/EnergyModal";
+import { NativeApi } from "@ledvance/base/src/api/native";
+import { carbonDioxideEmission, countryAndRegion } from "./co2Data";
+
+const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
+
+export interface EnergyConsumptionPageProps {
+  electricDpCode: string
+  powerDpCode: string
+  voltageDpCode: string
+  addEleDpCode: string
+}
+
+export interface OverviewItem {
+  key: string
+  value: number | string
+  headlineText: string
+  chartTitle: string
+}
+export type PopupType = 'co2' | 'money' | 'unit' | ''
+
+interface EnergyConsumptionState {
+  todayElectricity: string
+  totalElectricity: string
+  overviewList: OverviewItem[]
+  price: string
+  unit: string
+  showPopup: boolean
+  popupType: PopupType
+  co2Saved: string
+}
+const EnergyConsumptionPage = (props: {theme?: any}) => {
+  const params = useRoute().params as EnergyConsumptionPageProps
+  const devId = useDeviceId()
+  const navigation = useNavigation()
+  const timeZoneCity = useTimeZoneCity()
+  const power = usePower(params.powerDpCode)
+  const voltage = useVoltage(params.voltageDpCode)
+  const electric = useElectricCurrent(params.electricDpCode)
+  const isSolarPlug = useEngergyGeneration()
+  const state = useReactive<EnergyConsumptionState>({
+    todayElectricity: '0',
+    totalElectricity: '0',
+    overviewList: [],
+    price: '',
+    unit: UnitList[0],
+    showPopup: false,
+    popupType: '',
+    co2Saved: '0'
+  })
+  const chartHeadline = useMemo(() => {
+    const len = state.overviewList.length
+    return state.overviewList?.length ? `${state.overviewList[len - 1].key} - ${state.overviewList[0].key}` : ''
+  }, [state.overviewList])
+
+  useEffect(() => {
+    getElectricity().then()
+    getInitPrice().then()
+  }, [])
+
+  useUpdateEffect(() =>{
+    if(Number(state.totalElectricity) > 0 && timeZoneCity){
+      const letOut = carbonDioxideEmission(timeZoneCity, countryAndRegion) || 0
+      state.co2Saved = localeNumber((letOut * Number(state.totalElectricity)) / 1000, 4)
+    }
+  }, [state.totalElectricity, timeZoneCity])
+
+  const getElectricity = async () => {
+    const res = await getDpResultByMonth(devId, params.addEleDpCode, 'sum')
+    if (!isEmpty(res)) {
+      state.todayElectricity = res.thisDay
+      state.totalElectricity = res.sum
+      console.log(res, '< --- res')
+      if (!isEmpty(res.years)) {
+        const yearsList = Object.keys(res.years)
+        yearsList.sort((a, b) => parseInt(b) - parseInt(a))
+        const monthList = yearsList.map(year => {
+          const curMonth = res.years[year]
+          const curMonthList = Object.keys(curMonth).sort((a, b) => parseInt(b) - parseInt(a))
+          const monthData = curMonthList.map(month => {
+            return {
+              key: `${monthFormat(month)} ${year}`,
+              value: (Number(curMonth[month]) || 0).toFixed(2),
+              headlineText: `${year}${month}`,
+              chartTitle: `${monthFormatShort(month)}\n${year}`
+            }
+          })
+          return monthData
+        })
+        state.overviewList = flattenDeep(monthList)
+      }
+    }
+  }
+
+  const getInitPrice = async () => {
+    const res = await NativeApi.getJson(devId, 'energiepreise')
+    if (res.success && res.data) {
+      const v = JSON.parse(res.data)
+      state.price = v?.price
+      state.unit = v?.unit
+    }
+  }
+
+  const updateEnergyData = (data: EnergyData) => {
+    updatePrice(devId, data).then()
+    state.price = data.price
+    state.unit = data.unit
+  }
+
+  const styles = StyleSheet.create({
+    showTip: {
+      marginHorizontal: cx(24)
+    },
+    cardContainer: {
+      flex: 1,
+      marginHorizontal: cx(24),
+      padding: cx(16)
+    },
+    cardTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontWeight: 'bold'
+    },
+    consumedEnergyContent: {
+      flex: 1,
+      flexDirection: 'row',
+    },
+    consumptionNum: {
+      color: props.theme.global.secondBrand,
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    subContent: {
+      flex: 1,
+      alignItems: 'center',
+      marginBottom: cx(9)
+    },
+    valueText: {
+      fontSize: cx(24),
+      fontWeight: 'bold',
+      color: props.theme.global.secondBrand,
+    },
+    titleText: {
+      fontFamily: 'helvetica_neue_lt_std_roman',
+      fontSize: cx(14),
+      color: props.theme.global.secondFontColor,
+      textAlign: 'center',
+    },
+    priceBg: {
+      height: cx(40),
+      width: cx(40),
+      borderRadius: cx(40),
+      backgroundColor: props.theme.global.thirdBrand,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: cx(10)
+    },
+    priceNum: {
+      marginRight: cx(10)
+    },
+    priceButton: {
+      borderRadius: cx(5),
+      paddingHorizontal: cx(10),
+      paddingVertical: cx(8),
+      marginTop: cx(8),
+      backgroundColor: props.theme.button.active,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    unitItem: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingHorizontal: cx(10),
+      alignItems: 'center',
+      height: cx(40),
+
+    }
+  })
+
+
+  const unitDivision = (str) => {
+    if (!str) { return ['', ''] }
+    const strIndex = str.indexOf('(' || '（')
+    const unit = str.substring(strIndex)
+    const name = str.split(unit)[0]
+    return [name, unit]
+  }
+
+  const ConsumedEnergyItem = (props: { value: number, unit: string }) => {
+    return (
+      <View style={styles.subContent}>
+        <Text style={styles.valueText}>{(props.value) || 0}</Text>
+        <Spacer height={cx(4)} />
+        <Text style={styles.titleText}>
+          {unitDivision(props.unit)[0]}
+        </Text>
+        <Text style={styles.titleText}>
+          {unitDivision(props.unit)[1]}
+        </Text>
+      </View>
+    )
+  }
+
+  return (
+    <Page
+      style={{ position: 'relative' }}
+      backText={I18n.getLang(isSolarPlug ? 'sockets_headline_power' : 'consumption_data_annual_bar_chart_system_back_text')}
+      headlineText={I18n.getLang(isSolarPlug ? 'sockets_headline_power' : 'consumption_data_annual_bar_chart_system_back_text')}
+      headlineIcon={state.overviewList.length ? res.download_icon : undefined}
+      onHeadlineIconClick={() => {
+        exportFile(state.overviewList)
+      }}
+      showGreenery={isSolarPlug}
+      greeneryIcon={res.energy_consumption_greenery}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <View>
+          {/* tip */}
+          <Spacer height={cx(15)} />
+          <View style={styles.showTip}>
+            <Text style={{ fontSize: cx(14) }}>{I18n.getLang(isSolarPlug ? 'generation_data_description_text' : 'consumption_data_description_text')}</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.todayElectricity)}</Text>
+              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
+            </View>
+            <Spacer height={cx(10)} />
+          </Card>
+          <Spacer />
+          <Card
+            style={styles.cardContainer}
+          >
+            <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field2_headline_text')}</Text>
+            <Spacer height={cx(15)} />
+            <View style={styles.consumedEnergyContent}>
+              <ConsumedEnergyItem
+                value={power}
+                unit={I18n.getLang('consumption_data_field2_value_text1')} />
+              <ConsumedEnergyItem
+                value={electric}
+                unit={I18n.getLang('consumption_data_field2_value_text2')} />
+              <ConsumedEnergyItem
+                value={voltage}
+                unit={I18n.getLang('consumption_data_field2_value_text3')} />
+            </View>
+          </Card>
+          <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.totalElectricity)}</Text>
+              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
+            </View>
+            <Spacer />
+            {/* CO2 */}
+            {isSolarPlug && <>
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                    <View style={styles.priceBg}>
+                        <Image
+                            source={res.energy_consumption_cash}
+                            resizeMode="contain"
+                            style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.active }}
+                        />
+                    </View>
+                    <View style={styles.priceNum}>
+                        <View style={{ flexDirection: 'row' }}>
+                            <Text style={{ color: props.theme.global.secondFontColor, marginRight: cx(5) }}>{I18n.getLang('consumption_data_field3_co2_topic_text')}</Text>
+                            <TouchableOpacity
+                                onPress={() => {
+                                  state.showPopup = true
+                                  state.popupType = 'co2'
+                                }}
+                            >
+                                <Image
+                                    source={res.co2Icon}
+                                    resizeMode="contain"
+                                    style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.active }}
+                                />
+                            </TouchableOpacity>
+                        </View>
+                        <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
+                    </View>
+                </View>
+                <Spacer height={cx(10)} />
+            </>}
+            {/* money */}
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <View style={styles.priceBg}>
+                <Image
+                  source={res.energy_consumption_cash}
+                  resizeMode="contain"
+                  style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.active }}
+                />
+              </View>
+              <View>
+                <View style={styles.priceNum}>
+                  <Text style={{ color: props.theme.global.secondFontColor }}>{I18n.getLang(isSolarPlug ? 'consumption_data_monthly_overview_field1_text2' : 'consumption_data_field3_value_text2')}</Text>
+                  <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * Number(state.totalElectricity), 2)} ${state.unit}` : '-'}</Text>
+                </View>
+                <TouchableOpacity onPress={() => {
+                  state.showPopup = true
+                  state.popupType = 'money'
+                }}>
+                  <View style={styles.priceButton}>
+                    <Text style={{ color: props.theme.button.fontColor }}>{I18n.getLang('consumption_data_field3_button_text')}</Text>
+                  </View>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </Card>
+          <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.ui_biz_energy_consumption_chart, {
+                headlineText: chartHeadline,
+                chartData: state.overviewList
+              } as EnergyConsumptionChartProps)
+            }}
+            overviewItemClick={(item) => {
+              navigation.navigate(ui_biz_routerKey.ui_biz_energy_consumption_detail, {
+                addEleDpCode: params.addEleDpCode,
+                curMonth: item,
+                price: state.price,
+                unit: state.unit,
+                updateEnergyData
+              } as EnergyConsumptionDetailProps)
+            }}
+            overViewList={state.overviewList}
+          />
+          {/* modal */}
+          <EnergyPopup
+            visible={!!(state.popupType && state.showPopup)}
+            popupType={state.popupType || 'co2'}
+            title={state.popupType === 'co2' ? I18n.getLang('consumption_data_field3_co2_topic_text') : ''}
+            cancelText={state.popupType === 'co2' ? '' : I18n.getLang("auto_scan_system_cancel")}
+            confirmText={I18n.getLang(state.popupType === 'co2' ? 'home_screen_home_dialog_yes_con' : 'auto_scan_system_wifi_confirm')}
+            energyData={{ price: state.price, unit: state.unit }}
+            onConfirm={(energyData) => {
+              state.popupType = ''
+              state.showPopup = false
+              if(energyData){
+                updateEnergyData({
+                  ...energyData,
+                  price: exchangeNumber(energyData.price)
+                })
+              }
+            }}
+            onCancel={() => {
+              state.popupType = ''
+              state.showPopup = false
+            }}
+          />
+        </View>
+      </ScrollView>
+    </Page>
+  )
+}
+
+export default withTheme(EnergyConsumptionPage)