@ledvance/ui-biz-bundle 1.1.143 → 1.1.144

package/package.json

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

package/src/newModules/energyConsumption/EnergyConsumptionActions.ts

@@ -10,7 +10,7 @@ import {
   getSpecifiedTimeDpReportLogs
 } from '@ledvance/base/src/models/TuyaApi'
 import { exportCsvFile, localeNumber, loopsText, monthFormat, monthFormatShort } from '@ledvance/base/src/utils/common'
-import { overDays, xLog } from '@ledvance/base/src/utils'
+import { overDays } from '@ledvance/base/src/utils'
 import dayjs from 'dayjs'
 import CustomParseFormat from 'dayjs/plugin/customParseFormat'
 import { isEmpty } from 'lodash'
@@ -145,6 +145,7 @@ const getDpResultByDate = async (devId: string, addEleDpCode: string, date: stri
 export interface PowerDataItem {
   key: string
   chartTitle: string
+  time: number,
   value: number
 }
 
@@ -165,11 +166,11 @@ export async function getPowerData(devId: string, powerDpCode: string, interval:
       backoffFactor: 2
     }
   ) as DpReportSataData[]
-  xLog('powerData', dpResult)
   return dpResult.map(dp => {
     return {
       key: dp.timeStr,
-      chartTitle: dayjs.unix(dp.timeStamp).format('HH:mm:ss'),
+      chartTitle: dayjs.unix(dp.timeStamp).format('MM/DD/YYYY HH:mm:ss'),
+      time: dp.timeStamp * 1000,
       value: parseFloat(dp.value) / 10
     }
   })

package/src/newModules/energyConsumption/EnergyConsumptionChart.tsx

@@ -1,3 +1,4 @@
+import { queryDpIds } from '@ledvance/base/src/api/native'
 import InfoText from '@ledvance/base/src/components/InfoText'
 import Page from '@ledvance/base/src/components/Page'
 import Segmented from '@ledvance/base/src/components/Segmented'
@@ -7,10 +8,11 @@ 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 { overDays } from '@ledvance/base/src/utils'
+import { useIsFocused } from '@react-navigation/core'
+import PowerLineChart from './component/PowerLineChart'
 import { useRoute } from '@react-navigation/core'
-import { useReactive, useUpdateEffect } from 'ahooks'
+import { useInterval, useReactive, useUpdateEffect } from 'ahooks'
 import dayjs from 'dayjs'
 import React, { useCallback, useMemo } from 'react'
 import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
@@ -40,9 +42,20 @@ export interface EnergyConsumptionChartProps {
 
 const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
   const devId = useDeviceId()
+  const isFocused = useIsFocused()
 
   const params = useRoute().params as EnergyConsumptionChartProps
   const { price, unit, date, addEleDpCode, powerDpCode, over365Days, over7Days } = params
+
+  useInterval(() => {
+      if (isFocused) {
+        const jsonData = JSON.stringify([powerDpCode])
+        queryDpIds(jsonData, devId).then()
+      }
+    },
+    5000,
+    {immediate: true}
+  )
   const styles = StyleSheet.create({
     listEmptyView: {
       alignItems: 'center',
@@ -166,7 +179,7 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
         state.headlineText = `${monthFormat(month)} ${year}`
         break
       case DateType.Day:
-        state.headlineText = `${day}/${month}/${year}\n${loopsText[dayOfWeek]}`
+        state.headlineText = `${day}/${month}/${year} (${loopsText[dayOfWeek]})`
         break
     }
   }, [state.dateType, state.headlineText])
@@ -279,8 +292,25 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
             </>
           ) : (
             <>
-              {!state.loading ? <PowerLineChart height={cx(400)} data={state.powerData}/> :
-                <View style={{ height: cx(400) }}></View>}
+              {
+                (state.loading || state.powerData.length <= 0) ? (
+                  <View style={[styles.listEmptyView, {marginVertical: cx(70)}]}>
+                    <Spacer height={cx(26)}/>
+                    <Image
+                      style={styles.listEmptyImage}
+                      source={{ uri: res.ldv_timer_empty }}/>
+                    <Spacer height={cx(14)}/>
+                    <InfoText
+                      text={I18n.getLang('power_chart_empty')}
+                      icon={res.ic_info}
+                      textStyle={styles.listEmptyText}
+                      contentColor={props.theme?.global.fontColor}
+                    />
+                  </View>
+                ) : (
+                  <PowerLineChart height={cx(400)} data={state.powerData}/>
+                )
+              }
               <View style={styles.intervalContainer}>
                 {
                   [24 * 60, 6 * 60, 60, 5].map((item, index) => {

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

@@ -18,12 +18,8 @@ interface PowerLineChartProps {
 const PowerLineChart = (props: PowerLineChartProps) => {
   const echarts = useRef()
   const { data, height } = props
-  const dataX = data?.map(item => {
-    return item.chartTitle
-  })
-  const dataY = data?.map(item => {
-    return item.value
-  })
+
+  const values = data?.map(item => ([item.time, item.value]))
 
   const option = {
     tooltip: {
@@ -35,15 +31,12 @@ const PowerLineChart = (props: PowerLineChartProps) => {
       right: 0
     },
     xAxis: {
-      data: dataX,
+      type: 'time',
       axisTick: {
         show: false,
       },
       axisLabel: {
         show: true,
-        formatter: function (value: string) {
-          return value.substring(0, 5)
-        },
         color: props.theme?.global.secondFontColor,
         interval: 'auto',
         rotate: 45,
@@ -79,7 +72,7 @@ const PowerLineChart = (props: PowerLineChartProps) => {
       {
         name: I18n.getLang('consumption_data_field2_value_text1'),
         type: 'line',
-        data: dataY,
+        data: values,
         areaStyle: {},
         showSymbol: false,
         color: '#F49431',
@@ -90,7 +83,7 @@ const PowerLineChart = (props: PowerLineChartProps) => {
       start: 0,
       type: 'inside',
       zoomLock: false,
-      filterMode: 'filter'
+      filterMode: 'none'
     },
     customMapData: {}
   }