@ledvance/ui-biz-bundle 1.1.55 → 1.1.57

package/src/newModules/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/newModules/energyConsumption/component/EnergyModal.tsx

@@ -0,0 +1,282 @@
+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
+
+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 {
+  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
+  })
+
+
+  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: '#000' }}>{text[length - 6] + '.'}</Text>
+      <Spacer />
+      <Text style={{ color: '#000' }}>{text[length - 5] + '.'}</Text>
+      <Spacer />
+      <Text style={{ color: '#000' }}>{text[length - 4] + text[length - 3] + ':'}</Text>
+      <Spacer />
+      <Text
+        style={{ textDecorationLine: 'underline', color: '#ff6600' }}
+        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 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: '#000' }}>{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: '#666', 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: '#000' }}>{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: '#ccc' }}></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>
+      )
+    }
+
+  }
+  return (
+    <Modal
+      visible={props.visible}
+    >
+      <ScrollView>
+        <View style={{ backgroundColor: '#DFDEDE', 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: '#FF6600', fontSize: cx(16) }}>{props.cancelText}</Text>
+          </TouchableOpacity>
+          <Text style={{ color: '#000', fontSize: cx(16), fontWeight: 'bold' }}>{props.title}</Text>
+          <TouchableOpacity onPress={() => {
+            props.onConfirm && props.onConfirm(state.energyData)
+          }}>
+            <Text style={{ color: '#FF6600', fontSize: cx(16) }}>{props.confirmText}</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={{ height: height - cx(100), paddingHorizontal: cx(16), backgroundColor: '#fff' }}>
+          {getContent()}
+        </View>
+      </ScrollView>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  popupTip: {
+    fontSize: cx(16),
+    color: '#000',
+    fontWeight: 'bold'
+  },
+  textInput: {
+    flex: 1,
+    height: cx(44),
+    marginStart: cx(16),
+    marginEnd: cx(6),
+    fontSize: cx(16),
+    color: '#000',
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+  textInputGroup: {
+    flexDirection: 'row',
+    borderRadius: cx(4),
+    backgroundColor: '#F6F6F6',
+    alignItems: 'center',
+  },
+  iconTouchable: {
+    marginEnd: cx(18),
+    padding: cx(4),
+  },
+  line: {
+    height: 1,
+    position: 'absolute',
+    start: cx(4),
+    end: cx(4),
+    bottom: 0,
+    backgroundColor: '#cbcbcb',
+  },
+  unitItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: cx(10),
+    alignItems: 'center',
+    height: cx(40),
+
+  }
+})
+
+const energyPopup = (props: {
+  energyData?: EnergyData,
+  onItemClick: (unit: string) => void
+}) => {
+  return (
+    Popup.custom({
+      title: (
+        <View style={{ backgroundColor: '#DFDEDE', 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: '#FF6600', fontSize: cx(16) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
+          </TouchableOpacity>
+        </View>
+      ),
+      wrapperStyle: {
+        height: height - cx(40)
+      },
+      footer: (<View></View>),
+      onMaskPress: () => { },
+      motionType: 'none',
+      useKeyboardView: true,
+      content: (
+        <View
+          style={{ paddingHorizontal: cx(16) }}>
+          <Spacer />
+          <Card>
+            <FlatList
+              data={UnitList}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  onPress={() => {
+                    props.onItemClick(item)
+                    Popup.close()
+                  }}
+                >
+                  <View style={styles.unitItem}>
+                    <Text style={{ fontSize: cx(16), color: '#000' }}>{item}</Text>
+                    {props.energyData && props.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: '#ccc' }}></View>
+              )}
+              keyExtractor={item => item}
+            />
+          </Card>
+          <Spacer />
+        </View>
+      )
+    })
+  )
+}
+
+export default EnergyModal

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

@@ -0,0 +1,116 @@
+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
+
+interface OverViewProps {
+  style?: StyleProp<ViewStyle>
+  headlineText?: string
+  headlineClick?: () => void
+  overviewItemClick?: (item: OverviewItem) => void
+  overViewList: OverviewItem[]
+}
+const OverView = (props: OverViewProps) => {
+  const { over365Days} = useRoute().params as EnergyConsumptionChartProps
+  return (
+    <View style={[props.style]}>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+        <Text style={{ color: '#000', 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: '#fff', 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: '#999' }]}>{item.value}</Text>
+                    <Text style={[styles.overviewItemText, { color: '#999' }]}> 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>
+  )
+}
+
+const styles = StyleSheet.create({
+  listEmptyContainer: {
+    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',
+  },
+  overviewItemText: {
+    color: '#000',
+    fontSize: cx(14)
+  },
+})
+
+export default OverView