@ledvance/group-ui-biz-bundle 1.0.141 → 1.0.142

package/package.json

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

package/src/modules/biorhythm/IconSelect.tsx

@@ -1,33 +1,43 @@
-import {useNavigation} from '@react-navigation/native'
-import React, {useEffect, useState} from 'react'
-import {Image, ScrollView, Text, TouchableOpacity, View} from 'react-native'
-import {Utils} from 'tuya-panel-kit'
-import iconList from './iconListData'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+// 导入 Dimensions API 来获取屏幕宽度
+import { Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import iconList from '../biorhythm/iconListData'
 import LDVTopBar from '@ledvance/base/src/components/ldvTopBar'
 import I18n from '@ledvance/base/src/i18n'
-import { useParams } from '@ledvance/base/src/hooks/Hooks'
 import ThemeType from '@ledvance/base/src/config/themeType'
+import { xLog } from '@ledvance/base/src/utils'
 
-const cx = Utils.RatioUtils.convertX
+const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
-interface IconSelectPageParams {
-  id: string | number
-  setIcon: (id: string | number) => void,
+interface SceneDetailPageParams {
+  backText?: string
+  id: any
+  setIcon: (id) => void,
   iconIdList: any
 }
 
-function IconSelectPage(props: { theme?: ThemeType }) {
+// --- 新增：定义常量，方便维护 ---
+const ICON_WIDTH = cx(32)
+const ICON_MARGIN = cx(10)
+const CONTAINER_HORIZONTAL_PADDING = cx(24)
+// 每个图标占据的总宽度（图片宽度 + 左右margin）
+const ITEM_TOTAL_WIDTH = ICON_WIDTH + ICON_MARGIN * 2
+
+function IconSelect(props: { theme?: ThemeType }) {
   const [list, setList] = useState(iconList)
   const navigation = useNavigation()
-  const params = useParams<IconSelectPageParams>()
+  const params = useRoute().params as SceneDetailPageParams
+
   const setColor = id => {
     const newList = list?.map(item => {
       return {
         ...item,
         selectStatus: item?.id === id,
       }
-    })
+    }) as typeof list
     setList(newList)
   }
   useEffect(() => {
@@ -39,24 +49,74 @@ function IconSelectPage(props: { theme?: ThemeType }) {
         selectStatus: item?.id === iconId,
         disabled: iconIdList?.some(val => val === item?.id && val !== iconId),
       }
-    })
+    }) as typeof list
     setList(newList)
   }, [])
 
+  const getStyles = useCallback((theme?: ThemeType) => StyleSheet.create({
+    container: { flex: 1, flexDirection: 'column' },
+    scrollView: { marginHorizontal: CONTAINER_HORIZONTAL_PADDING },
+    titleView: { marginTop: cx(40), marginBottom: cx(20) },
+    title: { fontSize: cx(24), color: theme?.global.brand },
+    iconContainer: {
+      flexDirection: 'row',
+      flex: 1,
+      flexWrap: 'wrap',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    ghostItem: {
+      width: ICON_WIDTH,
+      height: 0,
+      margin: ICON_MARGIN,
+    }
+  }), [CONTAINER_HORIZONTAL_PADDING, ICON_WIDTH, ICON_MARGIN])
+
+  const styles = useMemo(() => getStyles(props.theme), [props.theme])
+
+  // --- 新增：动态计算需要渲染的幽灵元素数量 ---
+  const ghostElements = useMemo(() => {
+
+    // 1. 获取容器的可用宽度
+    const containerWidth = cx(Dimensions.get('window').width) - CONTAINER_HORIZONTAL_PADDING * 2
+
+    // 2. 计算每行可以容纳多少个元素
+    const itemsPerRow = Math.ceil(containerWidth / ITEM_TOTAL_WIDTH)
+    // 如果无法容纳任何元素，则不渲染幽灵元素
+    if (itemsPerRow <= 0) {
+      xLog('No ghost elements needed.')
+      return null
+    }
+
+    // 3. 计算需要补充的幽灵元素数量
+    const numberOfItems = list.length
+    const itemsInLastRow = numberOfItems % itemsPerRow
+
+    // 如果最后一行为空或已满，则不需要幽灵元素
+    if (itemsInLastRow === 0) {
+      return null
+    }
+
+    const numberOfGhosts = itemsPerRow - itemsInLastRow
+
+    // 4. 返回一个包含正确数量幽灵元素的数组
+    return Array.from({ length: numberOfGhosts }).map((_, index) => (
+      <View key={`ghost-${index}`} style={styles.ghostItem}/>
+    ))
+  }, [list.length]) // 依赖项：当图标总数变化时重新计算
+
   return (
-    <View style={{flex: 1, flexDirection: 'column'}}>
+    <View style={styles.container}>
       <LDVTopBar
-        title={I18n.getLang('add_new_trigger_time_system_back_text')}
-        onBackPress={() => {
-          navigation.goBack()
-        }}
+        title={params.backText ?? I18n.getLang('add_new_trigger_time_system_back_text')}
+        onBackPress={() => navigation.goBack()}
       />
-      <ScrollView nestedScrollEnabled={true} style={{marginHorizontal: cx(24)}}>
-        <View style={{marginTop: cx(40), marginBottom: cx(20)}}>
-          <Text style={{fontSize: cx(24), color: props.theme?.global.brand}}>{I18n.getLang('add_new_trigger_time_icon_selection_headline_text')}</Text>
+      <ScrollView nestedScrollEnabled={true} style={styles.scrollView}>
+        <View style={styles.titleView}>
+          <Text style={styles.title}>{I18n.getLang('add_new_trigger_time_icon_selection_headline_text')}</Text>
         </View>
-        <View
-          style={{flexDirection: 'row', flex: 1, flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start'}}>
+        <View style={styles.iconContainer}>
+          {/* 渲染真实的图标 */}
           {list?.map(item => {
             return <TouchableOpacity
               onPress={() => {
@@ -67,20 +127,23 @@ function IconSelectPage(props: { theme?: ThemeType }) {
               key={item.id}
             >
               <Image
-                source={{uri: item?.icon}}
+                source={{ uri: item?.icon }}
                 style={{
-                  width: cx(32),
-                  height: cx(32),
-                  margin: cx(10),
+                  width: ICON_WIDTH,
+                  height: cx(32), // 高度保持不变
+                  margin: ICON_MARGIN,
                   tintColor: item?.selectStatus ? props.theme?.icon.primary : item?.disabled && props.theme?.icon.disable || props.theme?.icon.normal,
                 }}
               />
             </TouchableOpacity>
           })}
+
+          {/* 渲染精确计算出的幽灵元素 */}
+          {ghostElements}
         </View>
       </ScrollView>
     </View>
   )
 }
 
-export default withTheme(IconSelectPage)
+export default withTheme(IconSelect)

package/src/modules/energyConsumption/EnergyConsumptionActions.ts

@@ -80,7 +80,7 @@ const getDpResultByYear = async (devIdGroup: string[], addEleDpCode: string, dat
       })
     }
   })
-  const curMonthList = Object.keys(mergedData).sort((a, b) => parseInt(b) - parseInt(a));
+  const curMonthList = Object.keys(mergedData).sort((a, b) => parseInt(a) - parseInt(b));
   return curMonthList.map(month => {
     return {
       key: `${monthFormat(month)} ${year}`,

package/src/modules/energyConsumption/EnergyConsumptionChart/ChartSection.tsx

@@ -2,7 +2,6 @@ import I18n from '@ledvance/base/src/i18n'
 import React, { useCallback } from 'react'
 import { Image, TouchableOpacity, View } from 'react-native'
 import { DateType } from '../co2Data'
-import DateSelectedItem from '../component/DateSelectedItem'
 import DateTypeItem from '../component/DateTypeItem'
 import DateSwitch from '../component/DateSwitch'
 import NewBarChart from '../component/NewBarChart'
@@ -26,105 +25,89 @@ export const ChartSection = ({ isLandscape, state, actions, params, styles, them
 
   const handleExportCsv = useCallback(() => {
     const displayMode = state.displayMode || 'consumption'
-    const consumedData = state.consumptionChartData;
-    const generatedData = state.generationChartData;
-    const price = params.price;
-    const unit = params.unit;
-    const consumedName = I18n.getLang('chart_legend_consumption');
-    const generatedName = I18n.getLang('chart_legend_generation');
+    const consumedData = state.consumptionChartData
+    const generatedData = state.generationChartData
+    const price = params.price
+    const unit = params.unit
+    const consumedName = I18n.getLang('chart_legend_consumption')
+    const generatedName = I18n.getLang('chart_legend_generation')
     // 1. 创建CSV头部 (与之前相同)
-    const header = [I18n.getLang('date')];
+    const header = [I18n.getLang('date')]
     if (displayMode === 'consumption' || displayMode === 'both') {
-      header.push(`${consumedName} (kWh)`, `${consumedName} (${unit})`);
+      header.push(`${consumedName} (kWh)`, `${consumedName} (${unit})`)
     }
     if (displayMode === 'generation' || displayMode === 'both') {
-      header.push(`${generatedName} (kWh)`, `${generatedName} (${unit})`);
+      header.push(`${generatedName} (kWh)`, `${generatedName} (${unit})`)
     }
-    const rows = [];
-    let i = 0; // 指向 consumedData 的指针
-    let j = 0; // 指向 generatedData 的指针
+    const rows = []
+    let i = 0 // 指向 consumedData 的指针
+    let j = 0 // 指向 generatedData 的指针
     // 2. 双指针合并算法
     while (i < consumedData.length || j < generatedData.length) {
-      const consumedItem = consumedData[i];
-      const generatedItem = generatedData[j];
-      const consumedKey = consumedItem?.headlineText;
-      const generatedKey = generatedItem?.headlineText;
-      let rowData = [];
-      let dateKey = '';
+      const consumedItem = consumedData[i]
+      const generatedItem = generatedData[j]
+      const consumedKey = consumedItem?.headlineText
+      const generatedKey = generatedItem?.headlineText
+      let rowData = []
+      let dateKey = ''
       if (consumedKey === generatedKey) {
-        dateKey = consumedItem.key;
-        const consumedValue = Number(consumedItem.value);
-        const generatedValue = Number(generatedItem.value);
+        dateKey = consumedItem.key
+        const consumedValue = Number(consumedItem.value)
+        const generatedValue = Number(generatedItem.value)
         if (displayMode === 'consumption' || displayMode === 'both') {
-          rowData.push(consumedValue.toFixed(2), (consumedValue * price).toFixed(2));
+          rowData.push(consumedValue.toFixed(2), (consumedValue * price).toFixed(2))
         }
         if (displayMode === 'generation' || displayMode === 'both') {
-          rowData.push(generatedValue.toFixed(2), (generatedValue * price).toFixed(2));
+          rowData.push(generatedValue.toFixed(2), (generatedValue * price).toFixed(2))
         }
-        i++;
-        j++;
+        i++
+        j++
       } else if (consumedKey > generatedKey || !generatedKey) {
-        dateKey = consumedItem.key;
-        const consumedValue = Number(consumedItem.value);
+        dateKey = consumedItem.key
+        const consumedValue = Number(consumedItem.value)
         if (displayMode === 'consumption' || displayMode === 'both') {
-          rowData.push(consumedValue.toFixed(2), (consumedValue * price).toFixed(2));
+          rowData.push(consumedValue.toFixed(2), (consumedValue * price).toFixed(2))
         }
         if (displayMode === 'generation' || displayMode === 'both') {
           // 在 'generation' 或 'both' 模式下，为缺失的产生数据补0
-          rowData.push('0.00', '0.00');
+          rowData.push('0.00', '0.00')
         }
-        i++;
+        i++
       } else {
-        dateKey = generatedItem.key;
-        const generatedValue = Number(generatedItem.value);
+        dateKey = generatedItem.key
+        const generatedValue = Number(generatedItem.value)
         if (displayMode === 'consumption' || displayMode === 'both') {
           // 在 'consumption' 或 'both' 模式下，为缺失的消耗数据补0
-          rowData.push('0.00', '0.00');
+          rowData.push('0.00', '0.00')
         }
         if (displayMode === 'generation' || displayMode === 'both') {
-          rowData.push(generatedValue.toFixed(2), (generatedValue * price).toFixed(2));
+          rowData.push(generatedValue.toFixed(2), (generatedValue * price).toFixed(2))
         }
-        j++;
+        j++
       }
 
       // 将日期和处理好的数据行组合起来
-      rows.push([dateKey, ...rowData]);
+      rows.push([dateKey, ...rowData])
     }
 
-    exportEnergyCsv(header, rows);
+    exportEnergyCsv(header, rows)
   }, [state.displayMode, state.consumptionChartData, state.generationChartData, params.price, params.unit])
 
   const isDataEmpty = state.consumptionChartData.length <= 0 && state.generationChartData.length <= 0
 
   return (
     <>
-      {!isLandscape && (
-        <View style={styles.dateSwitchContainer}>
-          <DateSwitch
-            style={{ flex: 1 }}
-            date={state.date}
-            dateType={state.dateType}
-            headlineText={state.headlineText}
-            onDateChange={actions.setDate}
-          />
-          <TouchableOpacity style={{ width: cx(30) }} onPress={handleExportCsv}>
-            <Image
-              style={styles.downloadIcon}
-              source={{ uri: !isDataEmpty ? res.download_icon : undefined }}
-            />
-          </TouchableOpacity>
-        </View>
-      )}
       <View style={styles.dateControlsContainer}>
         <DateTypeItem
           style={styles.dateTypeItem}
           dateType={state.dateType}
           onDateTypeChange={actions.setDateType}
         />
-        <DateSelectedItem
-          style={styles.dateSelectedItem}
-          dateType={state.dateType}
+        <DateSwitch
+          style={{ flex: 1 }}
           date={state.date}
+          dateType={state.dateType}
+          headlineText={state.headlineText}
           onDateChange={actions.setDate}
         />
       </View>
@@ -132,17 +115,26 @@ export const ChartSection = ({ isLandscape, state, actions, params, styles, them
       {isDataEmpty ? (
         <EmptyDataView text={getEmptyDataTip()} theme={theme} styles={styles}/>
       ) : (
-        !state.loading && (
-          <NewBarChart
-            height={chartHeight}
-            data={state.chartData}
-            displayMode={state.displayMode}
-            consumedData={state.consumptionChartData}
-            generatedData={state.generationChartData}
-            price={state.price}
-            unit={params.unit}
-          />
-        )
+        !state.loading && <>
+          {!isLandscape && <View style={styles.downloadContainer}>
+              <TouchableOpacity
+                  style={{ width: cx(30) }}
+                  onPress={handleExportCsv}>
+                  <Image
+                      style={styles.downloadIcon}
+                      source={{ uri: res.download_icon }}/>
+              </TouchableOpacity>
+          </View>}
+            <NewBarChart
+                height={chartHeight}
+                data={state.chartData}
+                displayMode={state.displayMode}
+                consumedData={state.consumptionChartData}
+                generatedData={state.generationChartData}
+                price={state.price}
+                unit={params.unit}
+            />
+        </>
       )}
     </>
   )

package/src/modules/energyConsumption/EnergyConsumptionChart/LandscapeView.tsx

@@ -31,6 +31,7 @@ export const LandscapeView = ({ state, actions, params, styles, theme, screenWid
 
       <View style={styles.landscapeContent}>
         <ChartSection
+          isLandscape={true}
           state={state}
           actions={actions}
           params={params}

package/src/modules/energyConsumption/EnergyConsumptionChart/styles.ts

@@ -18,7 +18,7 @@ export const getStyles = (theme: ThemeType | undefined) => StyleSheet.create({
     flexDirection: 'row',
   },
   dateTypeItem: {
-    flex: 1,
+    flex: 0.5,
   },
   dateSelectedItem: {
     flex: 1,
@@ -77,12 +77,16 @@ export const getStyles = (theme: ThemeType | undefined) => StyleSheet.create({
   downloadButton: {
     width: cx(30),
   },
+  downloadContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    // marginHorizontal: cx(24),
+    marginTop: cx(15),
+    marginBottom: cx(-15)
+  },
   downloadIcon: {
     width: cx(24),
     height: cx(24),
     tintColor: theme?.global.brand,
-    position: 'absolute',
-    right: 0,
-    top: cx(10),
   },
 })

package/src/modules/energyConsumption/EnergyConsumptionChart/useEnergyData.ts

@@ -1,5 +1,5 @@
 import { OrientationService } from '@ledvance/base/src/api/OrientationService'
-import { overDays, xLog } from '@ledvance/base/src/utils'
+import { overDays } from '@ledvance/base/src/utils'
 import { loopsText, monthFormat } from '@ledvance/base/src/utils/common'
 import { useReactive, useUpdateEffect } from 'ahooks'
 import dayjs from 'dayjs'
@@ -7,10 +7,12 @@ import { useCallback, useEffect } from 'react'
 import { DateType } from '../co2Data'
 import { getElectricity } from '../EnergyConsumptionActions'
 import { EnergyConsumptionChartProps } from '../EnergyConsumptionChart'
+import {useIsPad} from "@ledvance/base/src/models/modules/NativePropsSlice"
 
 export type EnergyDisplayMode = 'consumption' | 'generation' | 'both';
 
 export const useEnergyData = (params: EnergyConsumptionChartProps) => {
+  const isPad = useIsPad()
   const { addEleDpCode, price, unit, date, over365Days, over7Days, chartData, deviceIdGroup, consumptionDeviceIds, generationDeviceIds } = params
 
   const getDateType = useCallback((d: string) => {
@@ -26,7 +28,7 @@ export const useEnergyData = (params: EnergyConsumptionChartProps) => {
   const initialDateType = getDateType(date)
   const state = useReactive({
     loading: false,
-    isSupportLandscape: OrientationService.isSupported(),
+    isSupportLandscape: OrientationService.isSupported() && !isPad,
     isLandscape: false,
     dateType: initialDateType,
     date: date,

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

@@ -1,11 +1,12 @@
 import ThemeType from "@ledvance/base/src/config/themeType";
 import React, {PropsWithChildren, useCallback, useEffect} from "react";
-import {Image, Text, TouchableOpacity, View, ViewProps} from "react-native";
+import {Image, TouchableOpacity, View, ViewProps} from "react-native";
 import {Utils} from "tuya-panel-kit";
 import {useReactive} from "ahooks";
 import res from "@ledvance/base/src/res";
 import dayjs from "dayjs";
 import {DateType} from "../co2Data";
+import DateSelectedItem from './DateSelectedItem'
 
 const cx = Utils.RatioUtils.convertX;
 const {withTheme} = Utils.ThemeUtils
@@ -89,13 +90,14 @@ export default withTheme(function DateSwitch(props: DateSwitchProps) {
                 height={cx(36)}
                 width={cx(36)}/>
         </TouchableOpacity>
-        <Text style={{
-            fontSize: cx(24),
-            minWidth: cx(200),
-            textAlign: 'center',
-            color: theme?.global.brand,
-            // fontFamily: 'helvetica_neue_lt_std_roman',
-        }}>{state.headlineText}</Text>
+        <DateSelectedItem
+          style={{flex: 1}}
+          dateType={state.dateType}
+          date={state.date}
+          onDateChange={date => {
+              props.onDateChange(date)
+          }}
+        />
         <TouchableOpacity
             disabled={state.disableArrowRight}
             onPress={() => {

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

@@ -1,5 +1,6 @@
 import ThemeType from '@ledvance/base/src/config/themeType'
 import I18n from '@ledvance/base/src/i18n'
+import { xLog } from '@ledvance/base/src/utils'
 import ECharts from '@ledvance/react-native-echarts-pro'
 import React, { useMemo, useRef } from 'react'
 import { View } from 'react-native'
@@ -58,7 +59,15 @@ const BarChartWithTouch = (props: BarChartProps) => {
       combinedDataMap.get(key)!.generated = Number(item.value)
     })
 
-    const sortedKeys = Array.from(combinedDataMap.keys()).sort((a, b) => b.localeCompare(a))
+    const sortedKeys = Array.from(combinedDataMap.keys()).sort((a, b) => {
+      // 1. 移除非数字字符
+      // 2. 转换为整数
+      // 3. 进行数字比较
+      const numA = parseInt(a.replace(/\D/g, ''), 10);
+      const numB = parseInt(b.replace(/\D/g, ''), 10);
+
+      return numA - numB;
+    })
 
     const finalDataX: string[] = []
     const finalAlignedConsumed: number[] = []
@@ -169,6 +178,7 @@ const BarChartWithTouch = (props: BarChartProps) => {
       legend: {
         show: true,
         data: legendData,
+        top: '5%',
         textStyle: { color: theme?.global.fontColor },
       },
       grid: {
@@ -192,7 +202,12 @@ const BarChartWithTouch = (props: BarChartProps) => {
           name: I18n.getLang('consumption_data_annual_bar_chart_text'),
           max: maxKwhValue,
           min: 0,
-          axisLabel: { color: theme?.global.secondFontColor },
+          axisLabel: {
+            formatter: function (value) {
+              return parseFloat(value).toFixed(2);
+            },
+            color: theme?.global.secondFontColor
+          },
         },
         {
           type: 'value',
@@ -201,7 +216,12 @@ const BarChartWithTouch = (props: BarChartProps) => {
           max: maxPriceValue,
           min: 0,
           minInterval: 1,
-          axisLabel: { color: theme?.global.secondFontColor },
+          axisLabel: {
+            formatter: function (value) {
+              return parseFloat(value).toFixed(1);
+            },
+            color: theme?.global.secondFontColor
+          },
         },
       ],
       series: seriesData,