@ledvance/group-ui-biz-bundle 1.0.71 → 1.0.73

package/src/modules/energyConsumption/EnergyConsumptionPage.tsx

@@ -0,0 +1,517 @@
+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 { ui_biz_routerKey } from '../../navigation/Routers'
+import { DpResultByMonthResData, getDpResultByMonth } from '@ledvance/base/src/models/TuyaApi';
+import { useTimeZoneCity } from '@ledvance/base/src/models/modules/NativePropsSlice';
+import { flattenDeep, isNumber, sumBy } from 'lodash';
+import {
+  exchangeNumber,
+  exportFile,
+  localeNumber,
+  monthFormat,
+  monthFormatShort,
+} from '@ledvance/base/src/utils/common';
+import { unitDivision, useEnergyConsumption } from './EnergyConsumptionActions';
+import EnergyPopup, { EnergyData } from './component/EnergyModal';
+import { carbonDioxideEmission, countryAndRegion } from './co2Data';
+import { EnergyConsumptionDetailProps } from './EnergyConsumptionDetail';
+import { EnergyConsumptionChartProps } from './EnergyConsumptionChart';
+import SegmentControl from '@ledvance/base/src/components/segmentControl';
+
+const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils;
+
+export interface EnergyConsumptionPageProps {
+  solarCurrentSum: number
+  solarPowerSum: number
+  wifiCurrentSum: number
+  wifiPowerSum: number
+  addEleDpCode: string;
+  solarPlugGroup: string[];
+  wifiPlugGroup: string[]
+  backText?: string
+}
+
+export interface OverviewItem {
+  key: string;
+  value: number | string;
+  headlineText: string;
+  chartTitle: string;
+}
+export type PopupType = 'co2' | 'money' | 'unit' | '';
+
+interface EnergyConsumptionState {
+  solarTodayElectricity: string
+  solarTotalElectricity: string
+  wifiTodayElectricity: string
+  wifiTotalElectricity: string
+  solarOverviewList: OverviewItem[];
+  wifiOverviewList: OverviewItem[];
+  price: string;
+  unit: string;
+  showPopup: boolean;
+  popupType: PopupType;
+  co2Saved: string;
+  isSolarMode: boolean
+  loading: boolean
+  collapsed: boolean
+}
+
+const EnergyConsumptionPage = (props: { theme?: any }) => {
+  const params = useRoute().params as EnergyConsumptionPageProps;
+  const navigation = useNavigation();
+  const timeZoneCity = useTimeZoneCity();
+  const [energyData, setEnergyData] = useEnergyConsumption()
+  const state = useReactive<EnergyConsumptionState>({
+    solarTodayElectricity: '0',
+    solarTotalElectricity: '0',
+    wifiTodayElectricity: '0',
+    wifiTotalElectricity: '0',
+    solarOverviewList: [],
+    wifiOverviewList: [],
+    price: energyData.price,
+    unit: energyData.unit,
+    showPopup: false,
+    popupType: '',
+    co2Saved: '0',
+    isSolarMode: !params.wifiPlugGroup.length,
+    loading: true,
+    collapsed: true
+  });
+
+  useUpdateEffect(() => {
+    state.price = energyData.price
+    state.unit = energyData.unit
+  }, [JSON.stringify(energyData)])
+
+  const chartHeadline = useMemo(() => {
+    const overview = state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList
+    const len = overview.length;
+    return overview?.length
+      ? `${overview[len - 1].key} - ${overview[0].key}`
+      : '';
+  }, [state.solarOverviewList, state.wifiOverviewList, state.isSolarMode]);
+
+  useEffect(() => {
+    getElectricity().then();
+  }, []);
+
+  useUpdateEffect(() => {
+    if (Number(state.solarTotalElectricity) > 0 && timeZoneCity) {
+      const letOut = carbonDioxideEmission(timeZoneCity, countryAndRegion) || 0;
+      state.co2Saved = localeNumber((letOut * Number(state.solarTotalElectricity)) / 1000, 4);
+    }
+  }, [state.solarTotalElectricity, timeZoneCity]);
+
+  const getElectricity = async () => {
+    const solarPromise = params.solarPlugGroup.map(devId =>
+      getDpResultByMonth(devId, params.addEleDpCode, 'sum').catch(error => ({ error }))
+    );
+    const wifiPromise = params.wifiPlugGroup.map(devId =>
+      getDpResultByMonth(devId, params.addEleDpCode, 'sum').catch(error => ({ error }))
+    );
+    state.loading = true
+    const solarRes = await Promise.all(solarPromise);
+    const wifiRes = await Promise.all(wifiPromise)
+    state.loading = false
+    // @ts-ignore
+    const solarGroup: DpResultByMonthResData[] = solarRes.filter(v => !v.error);
+    // @ts-ignore
+    const wifiGroup: DpResultByMonthResData[] = wifiRes.filter(v => !v.error);
+    // 初始化合并后的对象
+    const solarData = getMergeData(solarGroup)
+    const wifiData = getMergeData(wifiGroup)
+    state.solarTodayElectricity = solarData.thisDay
+    state.solarTotalElectricity = solarData.sum
+    state.solarOverviewList = flattenDeep(solarData.overviewList)
+    state.wifiTodayElectricity = wifiData.thisDay
+    state.wifiTotalElectricity = wifiData.sum
+    state.wifiOverviewList = flattenDeep(wifiData.overviewList)
+  };
+
+  const getMergeData = (monthDataGroup: DpResultByMonthResData[]) => {
+    const mergedData = {
+      sum: sumBy(monthDataGroup, item => parseFloat(item.sum)).toFixed(2) ?? 0,
+      thisDay: sumBy(monthDataGroup, item => parseFloat(item.thisDay)).toFixed(2) ?? 0,
+      years: {},
+      overviewList: [] as any[]
+    };
+    monthDataGroup.forEach(item => {
+      // 合并 years 数据
+      Object.keys(item.years).forEach(year => {
+        if (!mergedData.years[year]) {
+          // 如果当前年不存在，初始化该年
+          mergedData.years[year] = {};
+        }
+        // 遍历每一年的月份
+        Object.keys(item.years[year]).forEach(month => {
+          if (!mergedData.years[year][month]) {
+            // 如果当前月份不存在，初始化该月份
+            mergedData.years[year][month] = 0;
+          }
+          const monthNum = Number(item.years[year][month]);
+          // 累加月份的数据
+          mergedData.years[year][month] += Number(isNumber(monthNum) ? monthNum : 0);
+        });
+      });
+    });
+
+    const yearsList = Object.keys(mergedData.years);
+    yearsList.sort((a, b) => parseInt(b) - parseInt(a));
+    const monthList = yearsList.map(year => {
+      const curMonth = mergedData.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;
+    });
+    return {
+      sum: mergedData.sum,
+      thisDay: mergedData.thisDay,
+      overviewList: monthList
+    }
+  }
+
+  const updateEnergyData = (data: EnergyData) => {
+    setEnergyData(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 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={params.backText || I18n.getLang('sockets_ce')}
+      headlineText={I18n.getLang(
+        state.isSolarMode
+          ? 'sockets_headline_power'
+          : 'consumption_data_annual_bar_chart_system_back_text'
+      )}
+      headlineIcon={(state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList).length ? res.download_icon : undefined}
+      onHeadlineIconClick={() => {
+        exportFile(state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList);
+      }}
+      showGreenery={state.isSolarMode}
+      greeneryIcon={res.energy_consumption_greenery}
+      headlineTopContent={
+        (params.solarPlugGroup.length && params.wifiPlugGroup.length) ?
+          <View style={{ marginBottom: cx(5) }}>
+            <SegmentControl
+              title1={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
+              title2={I18n.getLang('sockets_headline_power')}
+              isFirst={!state.isSolarMode}
+              tabStyle={{paddingHorizontal: cx(15)}}
+              setIsFirst={(v) => {
+                state.isSolarMode = !v
+              }} />
+          </View> : undefined
+      }
+      loading={state.loading}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <View>
+          {/* tip */}
+          <Spacer height={cx(15)} />
+          <View style={styles.showTip}>
+            <Text style={{ fontSize: cx(14) }}>
+              {I18n.getLang(
+                state.isSolarMode
+                  ? '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.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}>
+            <Text style={styles.cardTitle}>
+              {I18n.getLang('consumption_data_field2_headline_text')}
+            </Text>
+            <Spacer height={cx(15)} />
+            <View style={styles.consumedEnergyContent}>
+              <ConsumedEnergyItem
+                value={state.isSolarMode ? params.solarPowerSum : params.wifiPowerSum}
+                unit={I18n.getLang('consumption_data_field2_value_text1')}
+              />
+              <ConsumedEnergyItem
+                value={state.isSolarMode ? params.solarCurrentSum : params.wifiCurrentSum}
+                unit={I18n.getLang('consumption_data_field2_value_text2')}
+              />
+            </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.isSolarMode ? state.solarTotalElectricity : state.wifiTotalElectricity)}
+              </Text>
+              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>
+                kWh
+              </Text>
+            </View>
+            <Spacer />
+            {/* CO2 */}
+            {state.isSolarMode && (
+              <>
+                <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(
+                      state.isSolarMode
+                        ? '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.isSolarMode ? state.solarTotalElectricity : state.wifiTotalElectricity), 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.group_ui_biz_energy_consumption_chart, {
+                headlineText: chartHeadline,
+                chartData: state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList
+              } as EnergyConsumptionChartProps)
+            }}
+            overviewItemClick={(item) => {
+              navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_detail, {
+                addEleDpCode: params.addEleDpCode,
+                curMonth: item,
+                price: state.price,
+                unit: state.unit,
+                isSolarMode: state.isSolarMode,
+                deviceIdGroup: state.isSolarMode ? params.solarPlugGroup : params.wifiPlugGroup,
+                updateEnergyData
+              } as EnergyConsumptionDetailProps)
+            }}
+            overViewList={state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList}
+          />
+          {/* 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);

package/src/modules/energyConsumption/Router.ts

@@ -0,0 +1,34 @@
+import {NavigationRoute} from "tuya-panel-kit";
+import EnergyConsumptionPage from "./EnergyConsumptionPage";
+import EnergyConsumptionDetail from "./EnergyConsumptionDetail";
+import EnergyConsumptionChart from "./EnergyConsumptionChart";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+
+const EnergyConsumptionPageRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.group_ui_biz_energy_consumption,
+    component: EnergyConsumptionPage,
+    options:{
+      hideTopbar: true,
+      showOfflineView: false,
+    }
+  },
+  {
+    name: ui_biz_routerKey.group_ui_biz_energy_consumption_detail,
+    component: EnergyConsumptionDetail,
+    options:{
+      hideTopbar: true,
+      showOfflineView: false,
+    }
+  },
+  {
+    name: ui_biz_routerKey.group_ui_biz_energy_consumption_chart,
+    component: EnergyConsumptionChart,
+    options:{
+      hideTopbar: true,
+      showOfflineView: false,
+    }
+  },
+]
+
+export default EnergyConsumptionPageRouters