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

package/package.json

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

package/src/modules/energyConsumption/EnergyConsumptionActions.ts

@@ -0,0 +1,18 @@
+import { useFeatureHook } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import {EnergyData, UnitList} from "./component/EnergyModal";
+
+interface LightConfig {
+  energyConsumption?: EnergyData
+}
+
+export const useEnergyConsumption = () =>{
+  return useFeatureHook<LightConfig, EnergyData>('energyConsumption', {unit: UnitList[0], price: ''})
+}
+
+export const unitDivision = (str: string) => {
+  if (!str) { return ['', ''] }
+  const strIndex = str.indexOf('(' || '（')
+  const unit = str.substring(strIndex)
+  const name = str.split(unit)[0]
+  return [name, unit]
+}

package/src/modules/energyConsumption/EnergyConsumptionChart.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { Platform, View, StyleSheet, Image } from "react-native";
+import { useRoute } from '@react-navigation/core'
+import Page from "@ledvance/base/src/components/Page";
+import res from "@ledvance/base/src/res";
+import I18n from "@ledvance/base/src/i18n";
+import { Utils } from "tuya-panel-kit";
+import BarChart from "./component/BarChart";
+import { exportFile } from "@ledvance/base/src/utils/common";
+import { OverviewItem } from "./EnergyConsumptionPage";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import InfoText from "@ledvance/base/src/components/InfoText";
+
+const { convertX: cx, height, width } = Utils.RatioUtils
+
+export interface EnergyConsumptionChartProps {
+  addEleDpCode: string
+  headlineText: string
+  chartData: OverviewItem[],
+  over365Days?: boolean
+  over7Days?: boolean
+}
+
+const EnergyConsumptionChart = () => {
+  const props = useRoute().params as EnergyConsumptionChartProps
+  const computeNum = Platform.OS === 'ios' && 180 || 130
+  return (
+    <Page
+      backText={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
+      headlineText={props.headlineText}
+      headlineIcon={props.chartData?.length ? res.download_icon : undefined}
+      onHeadlineIconClick={() => {
+        exportFile(props.chartData)
+      }}
+      showGreenery={false}
+      greeneryIcon={res.energy_consumption_greenery}
+    >
+      <View style={{ marginHorizontal: cx(24) }}>
+        {
+          props.over7Days ? (
+            <View style={styles.listEmptyView}>
+              <Spacer height={cx(26)} />
+              <Image
+                style={styles.listEmptyImage}
+                source={{ uri: res.ldv_timer_empty }} />
+              <Spacer height={cx(14)} />
+              <InfoText 
+                text={I18n.getLang('energyconsumption_hourlylimit')}
+                icon={res.ic_info}
+                contentColor='#000'
+              />
+            </View>
+          ) : (
+            <BarChart height={height - cx(computeNum)} data={props.chartData} width={width - cx(80)} />
+          )
+        }
+      </View>
+    </Page>
+  )
+}
+
+const styles = StyleSheet.create({
+  listEmptyView: {
+    alignItems: 'center',
+  },
+  listEmptyImage: {
+    width: cx(200),
+    height: cx(200),
+  },
+  listEmptyTextIcon: {
+    width: cx(16),
+    height: cx(16),
+    tintColor: '#000',
+  },
+  listEmptyText: {
+    color: '#000',
+    fontSize: cx(12),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+});
+
+export default EnergyConsumptionChart

package/src/modules/energyConsumption/EnergyConsumptionDetail.tsx

@@ -0,0 +1,350 @@
+import React, { useEffect } from "react";
+import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useNavigation, 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 { DpResultByDataWithSpecifiedResData, getDataWithSpecified, getDpResultByHour } from "@ledvance/base/src/models/TuyaApi";
+import { useTimeZoneCity } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { cloneDeep, isNumber } from "lodash";
+import { OverviewItem, PopupType } from "./EnergyConsumptionPage";
+import { exchangeNumber, exportFile, localeNumber, loopsText } from '@ledvance/base/src/utils/common'
+import dayjs from "dayjs";
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import { EnergyConsumptionChartProps } from "./EnergyConsumptionChart";
+import { overDays } from "@ledvance/base/src/utils";
+import EnergyPopup, { EnergyData } from "./component/EnergyModal";
+import { carbonDioxideEmission, countryAndRegion } from "./co2Data";
+
+const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
+
+export interface EnergyConsumptionDetailProps {
+  addEleDpCode: string
+  curMonth: OverviewItem
+  price: string
+  unit: string
+  deviceIdGroup: string[];
+  isSolarMode: boolean
+  updateEnergyData: (data: EnergyData) => {}
+}
+
+const EnergyConsumptionDetail = (props: { theme?: any }) => {
+  const params = useRoute().params as EnergyConsumptionDetailProps
+  const navigation = useNavigation()
+  const timeZoneCity = useTimeZoneCity()
+  const state = useReactive({
+    todayElectricity: '0',
+    totalElectricity: '0',
+    co2Saved: '0',
+    price: '',
+    unit: '',
+    overviewList: [] as OverviewItem[],
+    loading: false,
+    over365Days: false,
+    over7Days: false,
+    showPopup: false,
+    popupType: '' as PopupType,
+  })
+
+  useEffect(() => {
+    state.price = params.price
+    state.unit = params.unit
+    getElectricity().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 startDay = params.curMonth.headlineText + '01'
+    const endDay = params.curMonth.headlineText + dayjs(params.curMonth.headlineText + '01').daysInMonth()
+    state.over365Days = overDays(startDay, 365)
+    if (state.over365Days) {
+      state.overviewList = []
+      return
+    }
+    const promiseGroup = params.deviceIdGroup.map(devId => getDataWithSpecified(devId, params.addEleDpCode, startDay, endDay, 'sum').catch(error => ({ error })))
+    state.loading = true 
+    const res = await Promise.all(promiseGroup);
+    state.loading = false
+    // @ts-ignore
+    const successGroup: DpResultByDataWithSpecifiedResData[] = res.filter(v => !v.error);
+    const mergedData = {}
+    successGroup.forEach(item => {
+      Object.keys(item.result).forEach(day => {
+        if (mergedData[day] === undefined) {
+          mergedData[day] = 0
+        }
+        const dayNum = Number(item.result[day])
+        mergedData[day] += Number(isNumber(dayNum) ? dayNum : 0)
+      })
+    })
+    const dayData = Object.keys(mergedData).filter(v => Number(mergedData[v]) > 0).map(time => {
+      // 提取年、月和日
+      const year = time.slice(0, 4);
+      const month = time.slice(4, 6);
+      const day = time.slice(6, 8);
+
+      // 格式化为 'YYYY/MM/DD' 格式
+      const formattedDate = `${year}/${month}/${day}`
+      const dateStr = `${day}/${month}/${year}`
+      const dateObj = dayjs(formattedDate, "YYYY/MM/DD");
+      const dayOfWeek = dateObj.day() % 7;
+      const key = `${dateStr} (${loopsText[dayOfWeek]})`
+      return {
+        key,
+        value: mergedData[time].toFixed(2),
+        headlineText: formattedDate,
+        chartTitle: `${Number(key?.split('/')[0])}\n${loopsText[dayOfWeek]}`
+      }
+    })
+
+    state.overviewList = cloneDeep(dayData).reverse()
+  }
+
+  const getHourList = async (item: OverviewItem) => {
+    const value = item?.key?.split(' ')[0]?.split('/')
+    const date = `${value[2]}${value[1]}${value[0]}`
+    state.over7Days = overDays(date, 7)
+    if (state.over7Days) {
+      return []
+    }
+    const promiseGroup = params.deviceIdGroup.map(devId => getDpResultByHour(devId, params.addEleDpCode, date, 'sum').catch(error => ({ error })))
+    const res = await Promise.all(promiseGroup);
+    // @ts-ignore
+    const successGroup: DpResultByDataWithSpecifiedResData[] = res.filter(v => !v.error);
+    const mergedData = {}
+    successGroup.forEach(item => {
+      Object.keys(item).forEach(day => {
+        if (mergedData[day] === undefined) {
+          mergedData[day] = 0
+        }
+        const dayNum = Number(item[day])
+        mergedData[day] += Number(isNumber(dayNum) ? dayNum : 0)
+      })
+    })
+    const list: Array<object> = []
+    const resData = Object.keys(mergedData)?.map(val => {
+      return { key: Number(val?.slice(8, 10)), value: Number(mergedData[val]) }
+    })
+    for (let i = 0; i <= 23; i++) {
+      const hourData = resData?.find(val => val?.key === i)
+      const hourKey = hourData?.key || i
+      const hourValue = Number(hourData?.value) || 0
+      list.push({
+        key: `${hourKey.toString().padStart(2, '0')}:00`, value: hourValue, chartTitle: `${hourKey}:00`
+      })
+    }
+    return list
+  }
+
+  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'
+    }
+  })
+
+  return (
+    <Page
+      backText={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
+      headlineText={params.curMonth.key}
+      headlineIcon={state.overviewList.length ? res.download_icon : undefined}
+      onHeadlineIconClick={() => {
+        exportFile(state.overviewList)
+      }}
+      showGreenery={false}
+      greeneryIcon={res.energy_consumption_greenery}
+      loading={state.loading}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <View>
+          <Spacer height={cx(15)} />
+          {/* 365 day */}
+          <Card
+            style={styles.cardContainer}
+          >
+            <Text style={styles.cardTitle}>{params.curMonth.key}</Text>
+            <Spacer height={cx(15)} />
+            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
+              <Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>{params.curMonth.value}</Text>
+              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
+            </View>
+            <Spacer />
+            {/* CO2 */}
+            {params.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.action }}
+                      />
+                    </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('consumption_data_field3_value_text2')}</Text>
+                  <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price) * Number(params.curMonth.value), 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_monthly_overview_field2_headline_text')}
+            headlineClick={() => {
+              navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_chart, {
+                headlineText: params.curMonth.key,
+                chartData: state.overviewList,
+                over365Days: state.over365Days
+              } as EnergyConsumptionChartProps)
+            }}
+            overviewItemClick={async (item) => {
+              state.loading = true
+              const res = await getHourList(item)
+              state.loading = false
+              navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_chart, {
+                headlineText: item.key,
+                chartData: res,
+                over7Days: state.over7Days,
+                addEleDpCode: params.addEleDpCode
+              } as EnergyConsumptionChartProps)
+            }}
+            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) {
+                params.updateEnergyData({
+                  ...energyData,
+                  price: exchangeNumber(energyData.price)
+                })
+                state.price = energyData.price
+                state.unit = energyData.unit
+              }
+            }}
+            onCancel={() => {
+              state.popupType = ''
+              state.showPopup = false
+            }}
+          />
+        </View>
+      </ScrollView>
+    </Page>
+  )
+}
+
+export default withTheme(EnergyConsumptionDetail)