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

package/src/modules/energyConsumption/component/BarChart.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { View } from 'react-native';
+import ECharts from '@ledvance/react-native-echarts-pro';
+import I18n from "@ledvance/base/src/i18n";
+
+const BarChartWithTouch = ({ data, height, width }) => {
+    const dataX = data?.map(item => { return item.chartTitle });
+    const dataY = data?.map(item => { return item.value });
+    const option = {
+        title: {
+            text: I18n.getLang('consumption_data_annual_bar_chart_text'),
+            textStyle: {
+                fontSize: 14,
+                color: "#666666",
+            },
+            top: 10,
+        },
+        tooltip: {
+            show: false,
+        },
+        grid: {
+            width,
+            right: "20%",
+            left: '10%'
+        },
+        xAxis: {
+            data: dataX,
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                show: true,
+                color: '#999999',
+                interval: 0,
+            }
+        },
+        yAxis: {
+            min: data?.length === 0 && 0.6 || 0
+        },
+        series: [
+            {
+                type: 'bar',
+                data: dataY,
+                itemStyle: {
+                    emphasis: {
+                        color: '#FF6600', // Color when bar is clicked
+                    },
+                    color: '#FFC2A9',
+                    borderRadius: 2
+                },
+                barMaxWidth: 10,
+                label: {
+                    show: false, // 开启显示
+                    position: 'top', // 在上方显示
+                    distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
+                    verticalAlign: 'middle',
+                    textStyle: { // 数值样式
+                        color: 'black',
+                        fontSize: 12
+                    },
+                },
+                select: {
+                    label: {
+                        show: true,
+                        align: "center",
+                        verticalAlign: "bottom"
+                    },
+                    itemStyle: {
+                        borderColor: '#FFC2A9'
+                    }
+                },
+                selectedMode: "single"
+            },
+        ],
+        dataZoom: {
+            start: 0,
+            type: "inside",
+            maxValueSpan: 5
+        },
+        customMapData: {}
+    };
+
+    return (
+        <View style={{ flex: 1 }}>
+            <ECharts
+                option={option}
+                height={height}
+            />
+        </View>
+    );
+};
+
+export default BarChartWithTouch;

package/src/modules/energyConsumption/component/EnergyModal.tsx

@@ -0,0 +1,285 @@
+import React from "react";
+import Card from "@ledvance/base/src/components/Card";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import TextFieldStyleButton from "@ledvance/base/src/components/TextFieldStyleButton";
+import I18n from "@ledvance/base/src/i18n";
+import res from "@ledvance/base/src/res";
+import { TouchableOpacity, View, Text, TextInput, StyleSheet, Linking, FlatList, Image, ScrollView } from "react-native";
+import { Utils, Modal, Popup } from "tuya-panel-kit";
+import { useReactive, useUpdateEffect } from "ahooks";
+import { cloneDeep } from "lodash";
+
+const { convertX: cx, height } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
+
+export const UnitList = [
+  I18n.getLang('consumption_data_price_per_kwh_currency_value1'),
+  I18n.getLang('consumption_data_price_per_kwh_currency_value2'),
+  I18n.getLang('consumption_data_price_per_kwh_currency_value3'),
+  I18n.getLang('consumption_data_price_per_kwh_currency_value4')
+]
+
+export interface EnergyData {
+  price: string
+  unit: string
+}
+interface EnergyModalProps {
+  theme?: any
+  visible: boolean
+  popupType: 'money' | 'co2' | 'unit'
+  title: string
+  confirmText?: string
+  cancelText?: string
+  energyData?: EnergyData
+  motionType?: 'none'
+  onConfirm?: (data?: EnergyData) => void
+  onCancel?: () => void
+}
+const EnergyModal = (props: EnergyModalProps) => {
+  const state = useReactive({
+    energyData: cloneDeep(props.energyData),
+    unitPopup: false
+  })
+  console.log('running ~~~~~')
+
+  const openLink = (url: string) => {
+    Linking.openURL(url).catch((error) => console.error('无法打开链接:', error));
+  };
+
+  const getDescription = (string: string) => {
+    const separators = /[.:]/;
+    const text = string.split(separators)
+    const length = text.length - 1
+    return <View>
+      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 6] + '.'}</Text>
+      <Spacer />
+      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 5] + '.'}</Text>
+      <Spacer />
+      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 4] + text[length - 3] + ':'}</Text>
+      <Spacer />
+      <Text
+        style={{ textDecorationLine: 'underline', color: props.theme.button.active }}
+        onPress={() => openLink(`${text[length - 2]}:${text[length - 1]}${text[length]}`)}
+      >
+        {`${text[length - 2]}:${text[length - 1]}${text[length]}`}
+      </Text>
+    </View>
+  }
+
+  useUpdateEffect(() =>{
+    state.energyData = cloneDeep(props.energyData)
+  }, [props.energyData])
+
+  const styles = StyleSheet.create({
+    popupTip: {
+      fontSize: cx(16),
+      color: props.theme.global.fontColor,
+      fontWeight: 'bold'
+    },
+    textInput: {
+      flex: 1,
+      height: cx(44),
+      marginStart: cx(16),
+      marginEnd: cx(6),
+      fontSize: cx(16),
+      color: props.theme.textInput.fontColor,
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    textInputGroup: {
+      flexDirection: 'row',
+      borderRadius: cx(4),
+      backgroundColor: props.theme.textInput.background,
+      alignItems: 'center',
+    },
+    iconTouchable: {
+      marginEnd: cx(18),
+      padding: cx(4),
+    },
+    line: {
+      height: 1,
+      position: 'absolute',
+      start: cx(4),
+      end: cx(4),
+      bottom: 0,
+      backgroundColor: props.theme.textInput.line,
+    },
+    unitItem: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingHorizontal: cx(10),
+      alignItems: 'center',
+      height: cx(40),
+
+    }
+  })
+
+  const getContent = () => {
+    if (props.popupType === 'money') {
+      return (
+        <View>
+          <Spacer />
+          <Text style={styles.popupTip}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
+          <Spacer height={cx(40)} />
+          <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>{I18n.getLang('consumption_data_price_per_kwh_description_text')}</Text>
+          <Spacer height={cx(15)} />
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <View style={{ flex: 3 }}>
+              <Spacer height={cx(4)} />
+              <Text style={{ color: props.theme.global.secondFontColor, marginStart: cx(13), fontFamily: 'helvetica_neue_lt_std_bd' }}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
+              <View style={styles.textInputGroup}>
+                <TextInput
+                  value={state.energyData?.price}
+                  onChangeText={(t: string) => {
+                    const value = t.replace(/[^0-9.,]/g, '')
+                    if (Number(value) > 999999) {
+                      if (state.energyData) state.energyData.price = '999999'
+                    } else {
+                      if (state.energyData) state.energyData.price = value
+                    }
+                  }}
+                  style={styles.textInput}
+                  keyboardType="numeric"
+                />
+                <View style={styles.line} />
+              </View>
+            </View>
+            <View style={{ flex: 2, marginLeft: cx(20) }}>
+              <TextFieldStyleButton
+                text={state.energyData?.unit || ''}
+                placeholder={I18n.getLang('consumption_data_price_per_kwh_currency_headline_text')}
+                onPress={() => (
+                  energyPopup({
+                    energyData: state.energyData,
+                    onItemClick: (title) => {
+                      if (state.energyData) state.energyData.unit = title
+                    }
+                  })
+                )}
+              />
+            </View>
+          </View>
+        </View>
+      )
+    } else if (props.popupType === 'unit') {
+      return (
+        <View>
+          <Spacer />
+          <Card>
+            <FlatList
+              data={UnitList}
+              renderItem={({ item }) => (
+                <View style={styles.unitItem}>
+                  <Text style={{ fontSize: cx(16), color: props.theme.global.fontColor }}>{item}</Text>
+                  {props.energyData && props.energyData.unit === item && <Image
+                      style={{ width: cx(16), height: cx(16) }}
+                      source={res.app_music_check}
+                      resizeMode="contain"
+                  />}
+                </View>
+              )}
+              ItemSeparatorComponent={() => (
+                <View style={{ flex: 1, height: 1, backgroundColor: props.theme.card.background }}></View>
+              )}
+              keyExtractor={item => item}
+            />
+          </Card>
+        </View>
+      )
+    } else {
+      return (
+        <View>
+          <Spacer />
+          <Text style={styles.popupTip}>{I18n.getLang('consumption_data_field3_co2_topic_headline')}</Text>
+          <Spacer height={cx(40)} />
+          {getDescription(I18n.getLang('consumption_data_field3_co2_inforamtion_decription_text'))}
+        </View>
+      )
+    }
+
+  }
+
+  const energyPopup = ({energyData, onItemClick}: {
+    energyData?: EnergyData,
+    onItemClick: (unit: string) => void
+  }) => {
+    console.log('running ~~~~~')
+    return (
+      Popup.custom({
+        title: (
+          <View style={{ backgroundColor: props.theme.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
+            <TouchableOpacity onPress={() => Popup.close()}>
+              <Text style={{ color: props.theme.global.secondBrand, fontSize: cx(16) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
+            </TouchableOpacity>
+          </View>
+        ),
+        wrapperStyle: {
+          height: height - cx(40),
+          backgroundColor: props.theme.global.background
+        },
+        footer: (<View style={{ backgroundColor: props.theme.global.background}}></View>),
+        onMaskPress: () => { },
+        motionType: 'none',
+        useKeyboardView: true,
+        content: (
+          <View
+            style={{ backgroundColor: props.theme.global.background, paddingHorizontal: cx(16) }}>
+            <Spacer />
+            <Card>
+              <FlatList
+                data={UnitList}
+                renderItem={({ item }) => (
+                  <TouchableOpacity
+                    onPress={() => {
+                      onItemClick(item)
+                      Popup.close()
+                    }}
+                  >
+                    <View style={styles.unitItem}>
+                      <Text style={{ fontSize: cx(16), color: props.theme.global.fontColor }}>{item}</Text>
+                      {energyData && energyData.unit === item && <Image
+                          style={{ width: cx(16), height: cx(16) }}
+                          source={res.app_music_check}
+                          resizeMode="contain"
+                      />}
+                    </View>
+                  </TouchableOpacity>
+                )}
+                ItemSeparatorComponent={() => (
+                  <View style={{ flex: 1, height: 1, backgroundColor: props.theme.card.background }}></View>
+                )}
+                keyExtractor={item => item}
+              />
+            </Card>
+            <Spacer />
+          </View>
+        )
+      })
+    )
+  }
+  return (
+    <Modal
+      visible={props.visible}
+    >
+      <ScrollView>
+        <View style={{ backgroundColor: props.theme.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
+          <TouchableOpacity onPress={() => {
+            props.onCancel && props.onCancel()
+          }}>
+            <Text style={{ color: props.theme.global.brand, fontSize: cx(16) }}>{props.cancelText}</Text>
+          </TouchableOpacity>
+          <Text style={{ color: props.theme.global.fontColor, fontSize: cx(16), fontWeight: 'bold' }}>{props.title}</Text>
+          <TouchableOpacity onPress={() => {
+            props.onConfirm && props.onConfirm(state.energyData)
+          }}>
+            <Text style={{ color: props.theme.global.brand, fontSize: cx(16) }}>{props.confirmText}</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={{ height: height - cx(100), paddingHorizontal: cx(16), backgroundColor: props.theme.global.background }}>
+          {getContent()}
+        </View>
+      </ScrollView>
+    </Modal>
+  )
+}
+
+export default withTheme(EnergyModal)

package/src/modules/energyConsumption/component/Overview.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { View, Text, StyleProp, ViewStyle, TouchableOpacity, Image, FlatList, StyleSheet } from "react-native";
+import { Utils } from "tuya-panel-kit";
+import res from "@ledvance/base/src/res";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import I18n from "@ledvance/base/src/i18n";
+import { isEmpty } from "lodash";
+import { OverviewItem } from "../EnergyConsumptionPage";
+import { EnergyConsumptionChartProps } from "../EnergyConsumptionChart";
+import { useRoute } from '@react-navigation/core'
+
+const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
+
+interface OverViewProps {
+  theme?: any
+  style?: StyleProp<ViewStyle>
+  headlineText?: string
+  headlineClick?: () => void
+  overviewItemClick?: (item: OverviewItem) => void
+  overViewList: OverviewItem[]
+}
+const OverView = (props: OverViewProps) => {
+  const { over365Days} = useRoute().params as EnergyConsumptionChartProps
+
+  const styles = StyleSheet.create({
+    listEmptyContainer: {
+      alignItems: 'center'
+    },
+    listEmptyImage: {
+      width: cx(200),
+      height: cx(200),
+    },
+    listEmptyTextIcon: {
+      width: cx(16),
+      height: cx(16),
+      tintColor: props.theme.global.fontColor,
+    },
+    listEmptyText: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(12),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    overviewItemText: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14)
+    },
+  })
+  return (
+    <View style={[props.style]}>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+        <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{props.headlineText}</Text>
+        {!isEmpty(props.overViewList) && <TouchableOpacity
+            onPress={() => {
+              props.headlineClick && props.headlineClick()
+            }}
+        >
+            <Image
+                source={res.energy_consumption_chart}
+                style={{ width: cx(16), height: cx(16), marginLeft: cx(8) }}
+            />
+        </TouchableOpacity>}
+      </View>
+      <Spacer />
+      <FlatList
+        data={props.overViewList}
+        renderItem={({ item }) => (
+          <View>
+            <TouchableOpacity
+              onPress={() => {
+                props.overviewItemClick && props.overviewItemClick(item)
+              }}
+            >
+              <View style={{ backgroundColor: props.theme.card.background, alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', }}>
+                <Text style={styles.overviewItemText}>{item.key}</Text>
+                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
+                  <View style={{ flexDirection: 'row' }}>
+                    <Text style={[styles.overviewItemText, { color: props.theme.global.secondFontColor }]}>{item.value}</Text>
+                    <Text style={[styles.overviewItemText, { color: props.theme.global.secondFontColor }]}> kWh</Text>
+                  </View>
+                  <Image
+                    source={res.energy_consumption_right}
+                    style={{ width: cx(16), height: cx(16), marginLeft: cx(8) }}
+                  />
+                </View>
+              </View>
+            </TouchableOpacity>
+          </View>
+        )}
+        keyExtractor={(item) => item.key}
+        ItemSeparatorComponent={() => <Spacer height={cx(10)} />}
+        ListFooterComponent={() => <Spacer height={cx(30)} />}
+        ListEmptyComponent={() => (
+          <View style={styles.listEmptyContainer}>
+            <Image
+              style={styles.listEmptyImage}
+              source={res.energy_consumption_empty} />
+            <Spacer height={cx(10)} />
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: cx(25) }}>
+              <Image style={styles.listEmptyTextIcon} source={res.co2Icon} />
+              <Spacer width={cx(4)} height={0} />
+              <Text style={styles.listEmptyText}>
+                {
+                  over365Days ?
+                    I18n.getLang('energyconsumption_Daylimit')
+                    :
+                    I18n.getLang('history_overview_empty_information_text')
+                }
+              </Text>
+            </View>
+          </View>
+        )}
+      />
+    </View>
+  )
+}
+
+export default withTheme(OverView)

package/src/navigation/Routers.ts

@@ -30,4 +30,7 @@ export const ui_biz_routerKey = {
   'group_ui_biz_light_mode': 'group_ui_biz_light_mode',
   'group_ui_biz_overcharge_switch': 'group_ui_biz_overcharge_switch',
   'group_ui_biz_switch_inching': 'group_ui_biz_switch_inching',
+  'group_ui_biz_energy_consumption': 'group_ui_biz_energy_consumption',
+  'group_ui_biz_energy_consumption_detail': 'group_ui_biz_energy_consumption_detail',
+  'group_ui_biz_energy_consumption_chart': 'group_ui_biz_energy_consumption_chart'
 }