@ledvance/ui-biz-bundle 1.1.141 → 1.1.143

package/src/newModules/energyConsumption/EnergyConsumptionCard.tsx

@@ -0,0 +1,172 @@
+import { queryDpIds } from '@ledvance/base/src/api/native'
+import Card from '@ledvance/base/src/components/Card'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import ThemeType from '@ledvance/base/src/config/themeType'
+import I18n from '@ledvance/base/src/i18n'
+import { useDeviceId, useSolarPlug } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import { useIsFocused, useNavigation } from '@react-navigation/native'
+import { useInterval, useReactive } from 'ahooks'
+import React, { useEffect } from 'react'
+import { Image, StyleSheet, Text, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import { getEnergyGenerationValue, useElectricCurrent, usePower, useVoltage } from './EnergyConsumptionActions'
+import { EnergyConsumptionPageProps } from './EnergyConsumptionPage'
+import Res from './res'
+
+const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
+
+export interface EnergyConsumptionProp {
+  theme?: ThemeType
+  electricDpCode: string
+  powerDpCode: string
+  voltageDpCode: string
+  addEleDpCode: string
+}
+
+const EnergyConsumptionCard = (props: EnergyConsumptionProp) => {
+  const devId = useDeviceId()
+  const navigation = useNavigation()
+  const isFocused = useIsFocused()
+  const isSolarPlug = useSolarPlug()
+  const power = usePower(props.powerDpCode)
+  const electricCurrent = useElectricCurrent(props.electricDpCode)
+  const voltage = useVoltage(props.voltageDpCode)
+
+  const state = useReactive({
+    loading: false,
+    flag: Symbol(),
+    isGeneration: false
+  })
+
+  useInterval(() => {
+      if (isFocused) {
+        const jsonData = JSON.stringify([props.electricDpCode, props.powerDpCode, props.voltageDpCode])
+        queryDpIds(jsonData, devId).then()
+      }
+    },
+    3000,
+    { immediate: true }
+  )
+
+  useEffect(() => {
+    getEnergyGenerationValue(devId).then(data => {
+      state.isGeneration = isSolarPlug !== (data?.generationMode || false)
+    })
+  }, [isFocused, isSolarPlug])
+
+  const unitDivision = (str: string) => {
+    if (!str) {
+      return ['', '']
+    }
+    const strIndex = str.indexOf('(') || str.indexOf('（')
+    const unit = str.substring(strIndex)
+    const name = str.split(unit)[0]
+    return [name, unit]
+  }
+
+  const styles = StyleSheet.create({
+    consumedEnergyCard: {
+      marginHorizontal: cx(24),
+    },
+    consumedEnergyHeadline: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginHorizontal: cx(16),
+    },
+    consumedEnergyCardTitle: {
+      color: props.theme?.global.fontColor,
+      fontSize: cx(16),
+      // fontFamily: 'helvetica_neue_lt_std_bd',
+      fontWeight: 'bold',
+    },
+    consumedEnergyContent: {
+      flexDirection: 'row',
+    },
+    consumedEnergyItem: {
+      flex: 1,
+      alignItems: 'center',
+    },
+    consumedEnergyItemValue: {
+      color: props.theme?.global.secondBrand,
+      fontSize: cx(24),
+      // fontFamily: 'helvetica_neue_lt_std_bd',
+      fontWeight: 'bold',
+    },
+    consumedEnergyItemUnit: {
+      color: props.theme?.global.secondFontColor,
+      fontSize: cx(14),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+      textAlign: 'center'
+    },
+    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',
+    },
+    unitText: {
+      fontFamily: 'helvetica_neue_lt_std_roman',
+      fontSize: cx(14),
+      color: props.theme?.global.secondFontColor,
+    },
+  })
+
+  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 <Card
+    style={styles.consumedEnergyCard}
+    onPress={() => navigation.navigate(ui_biz_routerKey.ui_biz_energy_consumption, {
+      electricDpCode: props.electricDpCode,
+      powerDpCode: props.powerDpCode,
+      voltageDpCode: props.voltageDpCode,
+      addEleDpCode: props.addEleDpCode,
+    } as EnergyConsumptionPageProps)}>
+    <Spacer height={cx(16)}/>
+    <View style={styles.consumedEnergyHeadline}>
+      <Text
+        style={styles.consumedEnergyCardTitle}>{I18n.getLang(state.isGeneration ? 'sockets_headline_power' : 'sockets_ce')}</Text>
+      <Image source={Res.energyChart} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.icon.normal }}/>
+    </View>
+    <Spacer height={cx(18)}/>
+    <View style={styles.consumedEnergyContent}>
+      <ConsumedEnergyItem
+        value={power}
+        unit={I18n.getLang('consumption_data_field2_value_text1')}/>
+      <ConsumedEnergyItem
+        value={electricCurrent}
+        unit={I18n.getLang('consumption_data_field2_value_text2')}/>
+      <ConsumedEnergyItem
+        value={voltage}
+        unit={I18n.getLang('consumption_data_field2_value_text3')}/>
+    </View>
+    <Spacer height={cx(17)}/>
+  </Card>
+}
+
+export default withTheme(EnergyConsumptionCard)

package/src/newModules/energyConsumption/EnergyConsumptionChart.tsx

@@ -1,31 +1,34 @@
-import React, { useCallback } from "react";
-import {Image, StyleSheet, View, 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 NewBarChart from "./component/NewBarChart";
-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 dayjs from "dayjs";
+import InfoText from '@ledvance/base/src/components/InfoText'
+import Page from '@ledvance/base/src/components/Page'
+import Segmented from '@ledvance/base/src/components/Segmented'
+import Spacer from '@ledvance/base/src/components/Spacer'
 import ThemeType from '@ledvance/base/src/config/themeType'
-import {overDays} from "@ledvance/base/src/utils/index";
-import DateTypeItem from "./component/DateTypeItem";
-import {DateType} from "./co2Data";
-import DateSelectedItem from "./component/DateSelectedItem";
-import {useReactive, useUpdateEffect} from "ahooks";
-import {exportEnergyCsv, getElectricity} from "./EnergyConsumptionActions";
-import {useDeviceId} from "@ledvance/base/src/models/modules/NativePropsSlice";
-import DateSwitch from "./component/DateSwitch";
+import I18n from '@ledvance/base/src/i18n'
+import { useDeviceId } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import res from '@ledvance/base/src/res'
+import { loopsText, monthFormat } from '@ledvance/base/src/utils/common'
+import { overDays } from '@ledvance/base/src/utils/index'
+import PowerLineChart from '@ledvance/ui-biz-bundle/src/newModules/energyConsumption/component/PowerLineChart'
+import { useRoute } from '@react-navigation/core'
+import { useReactive, useUpdateEffect } from 'ahooks'
+import dayjs from 'dayjs'
+import React, { useCallback, useMemo } from 'react'
+import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import { ChartType, DateType } from './co2Data'
+import DateSelectedItem from './component/DateSelectedItem'
+import DateSwitch from './component/DateSwitch'
+import DateTypeItem from './component/DateTypeItem'
+import NewBarChart from './component/NewBarChart'
+import { exportEnergyCsv, getElectricity, getPowerData, PowerDataItem } from './EnergyConsumptionActions'
+import { OverviewItem } from './EnergyConsumptionPage'
 
-const {convertX: cx} = Utils.RatioUtils
-const {withTheme} = Utils.ThemeUtils
+const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface EnergyConsumptionChartProps {
   addEleDpCode: string
+  powerDpCode: string
   headlineText: string
   chartData: OverviewItem[],
   over365Days?: boolean
@@ -39,7 +42,7 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
   const devId = useDeviceId()
 
   const params = useRoute().params as EnergyConsumptionChartProps
-  const {price, unit, date, addEleDpCode, over365Days, over7Days} = params;
+  const { price, unit, date, addEleDpCode, powerDpCode, over365Days, over7Days } = params
   const styles = StyleSheet.create({
     listEmptyView: {
       alignItems: 'center',
@@ -58,25 +61,53 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
       position: 'absolute',
       right: 0,
       top: cx(10)
+    },
+    intervalContainer: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    intervalItem: {
+      flex: 1,
+      marginHorizontal: cx(5),
+      padding: cx(5),
+      borderWidth: cx(1),
+      borderRadius: cx(25),
+      borderColor: props.theme?.icon.normal,
+    },
+    intervalItemChecked: {
+      borderColor: props.theme?.icon.primary,
+    },
+    intervalText: {
+      textAlign: 'center',
+      color: props.theme?.global.fontColor,
+    },
+    intervalTextChecked: {
+      textAlign: 'center',
+      color: props.theme?.icon.primary,
     }
-  });
+  })
 
   const getDateType = useCallback((date: string) => {
-    const datejs = dayjs(date);
+    const datejs = dayjs(date)
     if (datejs.isValid()) {
       if (datejs.format('YYYY') === date) {
-        return DateType.Year;
+        return DateType.Year
       } else if (datejs.format('YYYYMM') === date) {
-        return DateType.Month;
+        return DateType.Month
       } else if (datejs.format('YYYY/MM/DD') === date) {
-        return DateType.Day;
+        return DateType.Day
       }
     }
-    return DateType.Day;
-  }, []);
-  const dateType = getDateType(date);
+    return DateType.Day
+  }, [])
+  const dateType = getDateType(date)
+  const intervalLabels = useMemo(() => {
+    return ['charttime_type1', 'charttime_type2', 'charttime_type3', 'charttime_type4']
+  }, [])
   const state = useReactive({
     loading: false,
+    chartType: ChartType.kWh,
     dateType: dateType,
     date: date,
     headlineText: dateType === DateType.Year ? date : params.headlineText,
@@ -86,20 +117,31 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
     price: isNaN(Number(price)) ? 0 : Number(price),
     over365Days: over365Days,
     over7Days: over7Days,
-  });
+    interval: 5,
+    powerData: [] as PowerDataItem[]
+  })
 
   useUpdateEffect(() => {
-    state.over365Days = overDays(state.date, 365);
-    state.over7Days = overDays(state.date, 7);
-    updateHeadlineText(dayjs(state.date));
-    state.loading = true;
-    getElectricity(devId, addEleDpCode, state.date, state.dateType).then((res) => {
-      state.chartData = res;
-      state.loading = false;
-    }).catch(()=>{
-      state.loading = false;
-    });
-  }, [state.date]);
+    state.over365Days = overDays(state.date, 365)
+    state.over7Days = overDays(state.date, 7)
+    updateHeadlineText(dayjs(state.date))
+    state.loading = true
+    if (state.chartType === ChartType.kWh) {
+      getElectricity(devId, addEleDpCode, state.date, state.dateType).then((res) => {
+        state.chartData = res
+        state.loading = false
+      }).catch(() => {
+        state.loading = false
+      })
+    } else {
+      getPowerData(devId, powerDpCode, state.interval).then((res: PowerDataItem[]) => {
+        state.powerData = res
+        state.loading = false
+      }).catch(() => {
+        state.loading = false
+      })
+    }
+  }, [state.chartType, state.date])
 
   const getEmptyDataTip = useCallback(() => {
     if (state.over365Days && state.dateType !== DateType.Day) {
@@ -109,34 +151,34 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
       return I18n.getLang('energyconsumption_hourlylimit')
     }
     return I18n.getLang('energyconsumption_emptydata')
-  }, [state.dateType, state.over365Days, state.over7Days]);
+  }, [state.dateType, state.over365Days, state.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;
+    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;
+        state.headlineText = year
         break
       case DateType.Month:
-        state.headlineText = `${monthFormat(month)} ${year}`;
+        state.headlineText = `${monthFormat(month)} ${year}`
         break
       case DateType.Day:
-        state.headlineText = `${day}/${month}/${year}\n${loopsText[dayOfWeek]}`;
+        state.headlineText = `${day}/${month}/${year}\n${loopsText[dayOfWeek]}`
         break
     }
-  }, [state.dateType, state.headlineText]);
+  }, [state.dateType, state.headlineText])
 
   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');
+    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;
+        state.date = year
         break
       case DateType.Month:
         state.date = `${year}${month}`
@@ -145,79 +187,123 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
         state.date = `${year}${month}${day}`
         break
     }
-  }, [state.dateType]);
+  }, [state.dateType])
+
+  const requestPowerData = useCallback((interval: number) => {
+    state.loading = true
+    getPowerData(devId, powerDpCode, interval).then((res: PowerDataItem[]) => {
+      state.powerData = res
+      state.loading = false
+    }).catch(() => {
+      state.loading = false
+    })
+  }, [])
 
   return (
-      <Page
-          backText={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
-          showGreenery={false}
-          loading={state.loading}
-          greeneryIcon={res.energy_consumption_greenery}
-          headlineContent={
-            <View style={{width: '100%',flexDirection:'row'}}>
-              <DateSwitch
-                  style={{flex: 1}}
+    <Page
+      backText={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
+      showGreenery={false}
+      loading={state.loading}
+      greeneryIcon={res.energy_consumption_greenery}
+    >
+      <ScrollView nestedScrollEnabled={true} style={{ marginHorizontal: cx(24) }}>
+        <Spacer/>
+
+        <Segmented
+          options={[
+            { label: I18n.getLang('chartdisplay_energy'), value: ChartType.kWh },
+            { label: I18n.getLang('chartdisplay_power'), value: ChartType.Watt }
+          ]}
+          value={state.chartType}
+          onChange={(chartType: ChartType) => {
+            state.chartType = chartType
+          }}/>
+        {
+          state.chartType === ChartType.kWh ? (
+            <>
+              <View style={{ width: '100%', flexDirection: 'row', marginVertical: cx(15) }}>
+                <DateSwitch
+                  style={{ flex: 1 }}
                   date={state.date}
                   dateType={state.dateType}
                   headlineText={state.headlineText}
                   onDateChange={(date) => {
-                    state.date = 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)}/>
+                <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={{ flexDirection: 'row', marginBottom: cx(15) }}>
+                <DateTypeItem
+                  style={{ flex: 1, marginHorizontal: cx(5) }}
+                  dateType={state.dateType}
+                  onDateTypeChange={(dateType) => {
+                    state.dateType = dateType
+                  }}/>
+                <DateSelectedItem
+                  style={{ flex: 1 }}
+                  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
+                      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>
+                    />
+                  </View>
+                ) : (
+                  !state.loading && <NewBarChart height={cx(400)} data={state.chartData} price={state.price} unit={unit}/>
+                )
+              }
+            </>
+          ) : (
+            <>
+              {!state.loading ? <PowerLineChart height={cx(400)} data={state.powerData}/> :
+                <View style={{ height: cx(400) }}></View>}
+              <View style={styles.intervalContainer}>
+                {
+                  [24 * 60, 6 * 60, 60, 5].map((item, index) => {
+                    const isChecked = item === state.interval
+                    return (
+                      <TouchableOpacity
+                        key={index}
+                        style={[styles.intervalItem, isChecked ? styles.intervalItemChecked : {}]}
+                        onPress={() => {
+                          state.interval = item
+                          requestPowerData(item)
+                        }}>
+                        <Text
+                          style={isChecked ? styles.intervalTextChecked : styles.intervalText}>{I18n.getLang(intervalLabels[index])}</Text>
+                      </TouchableOpacity>)
+                  })
+                }
+              </View>
+            </>
+          )
+        }
+      </ScrollView>
+    </Page>
   )
 }
 

package/src/newModules/energyConsumption/EnergyConsumptionDetail.tsx

@@ -28,6 +28,7 @@ const { withTheme } = Utils.ThemeUtils
 
 export interface EnergyConsumptionDetailProps {
   addEleDpCode: string
+  powerDpCode: string
   curMonth: OverviewItem
   price: string
   unit: string
@@ -282,6 +283,7 @@ const EnergyConsumptionDetail = (props: {theme?: ThemeType}) => {
                   price:state.price,
                   unit:state.unit,
                   addEleDpCode:params.addEleDpCode,
+                  powerDpCode: params.powerDpCode,
                   date:params.curMonth.headlineText,
                 } as EnergyConsumptionChartProps)
               }}
@@ -296,6 +298,7 @@ const EnergyConsumptionDetail = (props: {theme?: ThemeType}) => {
                   price:state.price,
                   unit:state.unit,
                   addEleDpCode:params.addEleDpCode,
+                  powerDpCode: params.powerDpCode,
                   date:item.headlineText,
                 } as EnergyConsumptionChartProps)
               }}

package/src/newModules/energyConsumption/EnergyConsumptionPage.tsx

@@ -353,6 +353,20 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
           <Spacer />
           <Card
             style={styles.cardContainer}
+            onPress={() => {
+              if (!state.price) {
+                return
+              }
+              navigation.navigate(ui_biz_routerKey.ui_biz_energy_consumption_chart, {
+                headlineText: chartHeadline,
+                chartData: state.overviewList,
+                price: state.price,
+                unit: state.unit,
+                addEleDpCode: params.addEleDpCode,
+                powerDpCode: params.powerDpCode,
+                date: (new Date()).getFullYear().toString(),
+              } as EnergyConsumptionChartProps)
+            }}
           >
             <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field2_headline_text')}</Text>
             <Spacer height={cx(15)} />
@@ -495,12 +509,14 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
                   price: state.price,
                   unit: state.unit,
                   addEleDpCode: params.addEleDpCode,
+                  powerDpCode: params.powerDpCode,
                   date: (new Date()).getFullYear().toString(),
                 } as EnergyConsumptionChartProps)
               }}
               overviewItemClick={(item) => {
                 navigation.navigate(ui_biz_routerKey.ui_biz_energy_consumption_detail, {
                   addEleDpCode: params.addEleDpCode,
+                  powerDpCode: params.powerDpCode,
                   curMonth: item,
                   price: state.price,
                   unit: state.unit,

package/src/newModules/energyConsumption/co2Data.ts

@@ -23659,3 +23659,8 @@ export enum DateType {
   Month = 'Month',
   Day = 'Day',
 }
+
+export enum ChartType {
+  kWh = 'kWh',
+  Watt = 'Watt',
+}