@ledvance/ui-biz-bundle 1.1.146 → 1.1.148
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -1
- package/src/modules/flags/FlagItem.tsx +14 -6
- package/src/newModules/energyConsumption/EnergyConsumptionActions.ts +101 -23
- package/src/newModules/energyConsumption/EnergyConsumptionChart/EmptyDataView.tsx +21 -0
- package/src/newModules/energyConsumption/EnergyConsumptionChart/EnergyChartSection.tsx +75 -0
- package/src/newModules/energyConsumption/EnergyConsumptionChart/LandscapeView.tsx +46 -0
- package/src/newModules/energyConsumption/EnergyConsumptionChart/PortraitView.tsx +43 -0
- package/src/newModules/energyConsumption/EnergyConsumptionChart/PowerChartSection.tsx +42 -0
- package/src/newModules/energyConsumption/EnergyConsumptionChart/index.tsx +33 -0
- package/src/newModules/energyConsumption/EnergyConsumptionChart/styles.ts +95 -0
- package/src/newModules/energyConsumption/EnergyConsumptionChart/useEnergyData.ts +147 -0
- package/src/newModules/energyConsumption/EnergyConsumptionChart.tsx +0 -327
- package/src/newModules/energyConsumption/EnergyConsumptionPage.tsx +42 -33
- package/src/newModules/energyConsumption/Router.ts +1 -1
- package/src/newModules/energyConsumption/component/DateSelectedItem.tsx +1 -1
- package/src/newModules/energyConsumption/component/PowerLineChart.tsx +2 -2
- package/src/newModules/mood/MoodItem.tsx +172 -166
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import { queryDpIds } from '@ledvance/base/src/api/native'
|
|
2
|
+
import { OrientationService } from '@ledvance/base/src/api/OrientationService'
|
|
3
|
+
import { overDays } from '@ledvance/base/src/utils'
|
|
4
|
+
import { loopsText, monthFormat } from '@ledvance/base/src/utils/common'
|
|
5
|
+
import { useIsFocused } from '@react-navigation/native'
|
|
6
|
+
import { useInterval, useReactive, useUpdateEffect } from 'ahooks'
|
|
7
|
+
import dayjs from 'dayjs'
|
|
8
|
+
import { useCallback, useEffect } from 'react'
|
|
9
|
+
import { ChartType, DateType } from '../co2Data'
|
|
10
|
+
import { getElectricity, getPowerData, PowerDataItem } from '../EnergyConsumptionActions'
|
|
11
|
+
import { EnergyConsumptionChartProps } from '../EnergyConsumptionChart'
|
|
12
|
+
|
|
13
|
+
export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string) => {
|
|
14
|
+
const isFocused = useIsFocused()
|
|
15
|
+
const { addEleDpCode, powerDpCode, price, date, over365Days, over7Days, chartData } = params
|
|
16
|
+
|
|
17
|
+
const getDateType = useCallback((d: string) => {
|
|
18
|
+
const datejs = dayjs(d)
|
|
19
|
+
if (datejs.isValid()) {
|
|
20
|
+
if (datejs.format('YYYY') === d) return DateType.Year
|
|
21
|
+
if (datejs.format('YYYYMM') === d) return DateType.Month
|
|
22
|
+
if (datejs.format('YYYY/MM/DD') === d) return DateType.Day
|
|
23
|
+
}
|
|
24
|
+
return DateType.Day
|
|
25
|
+
}, [])
|
|
26
|
+
|
|
27
|
+
const state = useReactive({
|
|
28
|
+
loading: false,
|
|
29
|
+
isSupportLandscape: OrientationService.isSupported(),
|
|
30
|
+
isLandscape: false,
|
|
31
|
+
chartType: ChartType.kWh as ChartType,
|
|
32
|
+
dateType: getDateType(date),
|
|
33
|
+
date: date,
|
|
34
|
+
headlineText: params.headlineText,
|
|
35
|
+
chartData: chartData.filter((item) => getDateType(date) !== DateType.Year || item.headlineText.startsWith(date)),
|
|
36
|
+
price: isNaN(Number(price)) ? 0 : Number(price),
|
|
37
|
+
over365Days: over365Days,
|
|
38
|
+
over7Days: over7Days,
|
|
39
|
+
interval: 5,
|
|
40
|
+
powerData: [] as PowerDataItem[],
|
|
41
|
+
})
|
|
42
|
+
|
|
43
|
+
// 定时查询 DP 点
|
|
44
|
+
useInterval(() => {
|
|
45
|
+
if (isFocused) {
|
|
46
|
+
const jsonData = JSON.stringify([powerDpCode])
|
|
47
|
+
queryDpIds(jsonData, devId).then()
|
|
48
|
+
}
|
|
49
|
+
}, 5000, { immediate: true })
|
|
50
|
+
|
|
51
|
+
// 副作用：获取数据
|
|
52
|
+
useUpdateEffect(() => {
|
|
53
|
+
state.loading = true
|
|
54
|
+
if (state.chartType === ChartType.kWh) {
|
|
55
|
+
getElectricity(devId, addEleDpCode, state.date, state.dateType)
|
|
56
|
+
.then(res => {
|
|
57
|
+
state.chartData = res
|
|
58
|
+
state.loading = false
|
|
59
|
+
})
|
|
60
|
+
.catch(() => {
|
|
61
|
+
state.loading = false
|
|
62
|
+
})
|
|
63
|
+
} else {
|
|
64
|
+
getPowerData(devId, powerDpCode, state.interval)
|
|
65
|
+
.then((res: PowerDataItem[]) => {
|
|
66
|
+
state.powerData = res
|
|
67
|
+
state.loading = false
|
|
68
|
+
})
|
|
69
|
+
.catch(() => {
|
|
70
|
+
state.loading = false
|
|
71
|
+
})
|
|
72
|
+
}
|
|
73
|
+
}, [state.chartType, state.date, state.interval])
|
|
74
|
+
|
|
75
|
+
// 副作用：更新日期相关的状态和标题
|
|
76
|
+
const updateHeadlineText = useCallback((d: dayjs.Dayjs) => {
|
|
77
|
+
const year = d.year().toString()
|
|
78
|
+
const month = (d.month() + 1).toString().padStart(2, '0')
|
|
79
|
+
const day = d.date().toString().padStart(2, '0')
|
|
80
|
+
const dayOfWeek = d.day() % 7
|
|
81
|
+
switch (state.dateType) {
|
|
82
|
+
case DateType.Year:
|
|
83
|
+
state.headlineText = year
|
|
84
|
+
break
|
|
85
|
+
case DateType.Month:
|
|
86
|
+
state.headlineText = `${monthFormat(month)} ${year}`
|
|
87
|
+
break
|
|
88
|
+
case DateType.Day:
|
|
89
|
+
state.headlineText = `${day}.${month}.${year} (${loopsText[dayOfWeek]})`
|
|
90
|
+
break
|
|
91
|
+
}
|
|
92
|
+
}, [state.dateType])
|
|
93
|
+
|
|
94
|
+
useEffect(() => {
|
|
95
|
+
state.over365Days = overDays(state.date, 365)
|
|
96
|
+
state.over7Days = overDays(state.date, 7)
|
|
97
|
+
updateHeadlineText(dayjs(state.date))
|
|
98
|
+
}, [state.date])
|
|
99
|
+
|
|
100
|
+
// 副作用：根据 dateType 自动切换到今天的日期
|
|
101
|
+
useUpdateEffect(() => {
|
|
102
|
+
const d = dayjs()
|
|
103
|
+
const year = d.year().toString()
|
|
104
|
+
const month = (d.month() + 1).toString().padStart(2, '0')
|
|
105
|
+
const day = d.date().toString().padStart(2, '0')
|
|
106
|
+
switch (state.dateType) {
|
|
107
|
+
case DateType.Year:
|
|
108
|
+
state.date = year
|
|
109
|
+
break
|
|
110
|
+
case DateType.Month:
|
|
111
|
+
state.date = `${year}${month}`
|
|
112
|
+
break
|
|
113
|
+
case DateType.Day:
|
|
114
|
+
state.date = `${year}${month}${day}`
|
|
115
|
+
break
|
|
116
|
+
}
|
|
117
|
+
}, [state.dateType])
|
|
118
|
+
|
|
119
|
+
// 封装所有修改状态的函数
|
|
120
|
+
const actions = {
|
|
121
|
+
setChartType: useCallback((type: ChartType) => {
|
|
122
|
+
state.chartType = type
|
|
123
|
+
}, []),
|
|
124
|
+
setDate: useCallback((newDate: string) => {
|
|
125
|
+
state.date = newDate
|
|
126
|
+
}, []),
|
|
127
|
+
setDateType: useCallback((type: DateType) => {
|
|
128
|
+
state.dateType = type
|
|
129
|
+
}, []),
|
|
130
|
+
setInterval: useCallback((newInterval: number) => {
|
|
131
|
+
state.interval = newInterval
|
|
132
|
+
state.powerData = []
|
|
133
|
+
}, []),
|
|
134
|
+
toggleLandscape: useCallback(() => {
|
|
135
|
+
if (!state.isSupportLandscape) return
|
|
136
|
+
const newIsLandscape = !state.isLandscape
|
|
137
|
+
state.isLandscape = newIsLandscape
|
|
138
|
+
if (newIsLandscape) {
|
|
139
|
+
OrientationService.lockToLandscape()
|
|
140
|
+
} else {
|
|
141
|
+
OrientationService.lockToPortrait()
|
|
142
|
+
}
|
|
143
|
+
}, []),
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
return { state, actions }
|
|
147
|
+
}
|
|
@@ -1,33 +1,5 @@
|
|
|
1
|
-
import { queryDpIds } from '@ledvance/base/src/api/native'
|
|
2
|
-
import InfoText from '@ledvance/base/src/components/InfoText'
|
|
3
|
-
import Page from '@ledvance/base/src/components/Page'
|
|
4
|
-
import Segmented from '@ledvance/base/src/components/Segmented'
|
|
5
|
-
import Spacer from '@ledvance/base/src/components/Spacer'
|
|
6
|
-
import ThemeType from '@ledvance/base/src/config/themeType'
|
|
7
|
-
import I18n from '@ledvance/base/src/i18n'
|
|
8
|
-
import { useDeviceId } from '@ledvance/base/src/models/modules/NativePropsSlice'
|
|
9
|
-
import res from '@ledvance/base/src/res'
|
|
10
|
-
import { loopsText, monthFormat } from '@ledvance/base/src/utils/common'
|
|
11
|
-
import { overDays } from '@ledvance/base/src/utils'
|
|
12
|
-
import { useIsFocused } from '@react-navigation/core'
|
|
13
|
-
import PowerLineChart from './component/PowerLineChart'
|
|
14
|
-
import { useRoute } from '@react-navigation/core'
|
|
15
|
-
import { useInterval, useReactive, useUpdateEffect } from 'ahooks'
|
|
16
|
-
import dayjs from 'dayjs'
|
|
17
|
-
import React, { useCallback, useMemo } from 'react'
|
|
18
|
-
import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
|
|
19
|
-
import { Utils } from 'tuya-panel-kit'
|
|
20
|
-
import { ChartType, DateType } from './co2Data'
|
|
21
|
-
import DateSelectedItem from './component/DateSelectedItem'
|
|
22
|
-
import DateSwitch from './component/DateSwitch'
|
|
23
|
-
import DateTypeItem from './component/DateTypeItem'
|
|
24
|
-
import NewBarChart from './component/NewBarChart'
|
|
25
|
-
import { exportEnergyCsv, getElectricity, getPowerData, PowerDataItem } from './EnergyConsumptionActions'
|
|
26
1
|
import { OverviewItem } from './EnergyConsumptionPage'
|
|
27
2
|
|
|
28
|
-
const { convertX: cx } = Utils.RatioUtils
|
|
29
|
-
const { withTheme } = Utils.ThemeUtils
|
|
30
|
-
|
|
31
3
|
export interface EnergyConsumptionChartProps {
|
|
32
4
|
addEleDpCode: string
|
|
33
5
|
powerDpCode: string
|
|
@@ -40,302 +12,3 @@ export interface EnergyConsumptionChartProps {
|
|
|
40
12
|
unit: string,
|
|
41
13
|
date: string,
|
|
42
14
|
}
|
|
43
|
-
|
|
44
|
-
const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
|
|
45
|
-
const devId = useDeviceId()
|
|
46
|
-
const isFocused = useIsFocused()
|
|
47
|
-
|
|
48
|
-
const params = useRoute().params as EnergyConsumptionChartProps
|
|
49
|
-
const { backTitle, price, unit, date, addEleDpCode, powerDpCode, over365Days, over7Days } = params
|
|
50
|
-
|
|
51
|
-
useInterval(() => {
|
|
52
|
-
if (isFocused) {
|
|
53
|
-
const jsonData = JSON.stringify([powerDpCode])
|
|
54
|
-
queryDpIds(jsonData, devId).then()
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
5000,
|
|
58
|
-
{immediate: true}
|
|
59
|
-
)
|
|
60
|
-
const styles = StyleSheet.create({
|
|
61
|
-
listEmptyView: {
|
|
62
|
-
alignItems: 'center',
|
|
63
|
-
},
|
|
64
|
-
listEmptyImage: {
|
|
65
|
-
width: cx(200),
|
|
66
|
-
height: cx(200),
|
|
67
|
-
},
|
|
68
|
-
listEmptyText: {
|
|
69
|
-
flex: 0
|
|
70
|
-
},
|
|
71
|
-
downloadIcon: {
|
|
72
|
-
width: cx(24),
|
|
73
|
-
height: cx(24),
|
|
74
|
-
tintColor: props.theme?.global.brand,
|
|
75
|
-
position: 'absolute',
|
|
76
|
-
right: 0,
|
|
77
|
-
top: cx(10)
|
|
78
|
-
},
|
|
79
|
-
intervalContainer: {
|
|
80
|
-
flexDirection: 'row',
|
|
81
|
-
justifyContent: 'center',
|
|
82
|
-
alignItems: 'center',
|
|
83
|
-
},
|
|
84
|
-
intervalItem: {
|
|
85
|
-
flex: 1,
|
|
86
|
-
marginHorizontal: cx(5),
|
|
87
|
-
padding: cx(5),
|
|
88
|
-
borderWidth: cx(1),
|
|
89
|
-
borderRadius: cx(25),
|
|
90
|
-
borderColor: props.theme?.icon.normal,
|
|
91
|
-
},
|
|
92
|
-
intervalItemChecked: {
|
|
93
|
-
borderColor: props.theme?.icon.primary,
|
|
94
|
-
},
|
|
95
|
-
intervalText: {
|
|
96
|
-
textAlign: 'center',
|
|
97
|
-
color: props.theme?.global.fontColor,
|
|
98
|
-
},
|
|
99
|
-
intervalTextChecked: {
|
|
100
|
-
textAlign: 'center',
|
|
101
|
-
color: props.theme?.icon.primary,
|
|
102
|
-
}
|
|
103
|
-
})
|
|
104
|
-
|
|
105
|
-
const getDateType = useCallback((date: string) => {
|
|
106
|
-
const datejs = dayjs(date)
|
|
107
|
-
if (datejs.isValid()) {
|
|
108
|
-
if (datejs.format('YYYY') === date) {
|
|
109
|
-
return DateType.Year
|
|
110
|
-
} else if (datejs.format('YYYYMM') === date) {
|
|
111
|
-
return DateType.Month
|
|
112
|
-
} else if (datejs.format('YYYY/MM/DD') === date) {
|
|
113
|
-
return DateType.Day
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
return DateType.Day
|
|
117
|
-
}, [])
|
|
118
|
-
const dateType = getDateType(date)
|
|
119
|
-
const intervalLabels = useMemo(() => {
|
|
120
|
-
return ['charttime_type1', 'charttime_type2', 'charttime_type3', 'charttime_type4']
|
|
121
|
-
}, [])
|
|
122
|
-
const state = useReactive({
|
|
123
|
-
loading: false,
|
|
124
|
-
chartType: ChartType.kWh,
|
|
125
|
-
dateType: dateType,
|
|
126
|
-
date: date,
|
|
127
|
-
headlineText: dateType === DateType.Year ? date : params.headlineText,
|
|
128
|
-
chartData: params.chartData.filter((item) => {
|
|
129
|
-
return dateType !== DateType.Year || item.headlineText.startsWith(date)
|
|
130
|
-
}),
|
|
131
|
-
price: isNaN(Number(price)) ? 0 : Number(price),
|
|
132
|
-
over365Days: over365Days,
|
|
133
|
-
over7Days: over7Days,
|
|
134
|
-
interval: 5,
|
|
135
|
-
powerData: [] as PowerDataItem[]
|
|
136
|
-
})
|
|
137
|
-
|
|
138
|
-
useUpdateEffect(() => {
|
|
139
|
-
state.over365Days = overDays(state.date, 365)
|
|
140
|
-
state.over7Days = overDays(state.date, 7)
|
|
141
|
-
updateHeadlineText(dayjs(state.date))
|
|
142
|
-
state.loading = true
|
|
143
|
-
if (state.chartType === ChartType.kWh) {
|
|
144
|
-
getElectricity(devId, addEleDpCode, state.date, state.dateType).then((res) => {
|
|
145
|
-
state.chartData = res
|
|
146
|
-
state.loading = false
|
|
147
|
-
}).catch(() => {
|
|
148
|
-
state.loading = false
|
|
149
|
-
})
|
|
150
|
-
} else {
|
|
151
|
-
getPowerData(devId, powerDpCode, state.interval).then((res: PowerDataItem[]) => {
|
|
152
|
-
state.powerData = res
|
|
153
|
-
state.loading = false
|
|
154
|
-
}).catch(() => {
|
|
155
|
-
state.loading = false
|
|
156
|
-
})
|
|
157
|
-
}
|
|
158
|
-
}, [state.chartType, state.date])
|
|
159
|
-
|
|
160
|
-
const getEmptyDataTip = useCallback(() => {
|
|
161
|
-
if (state.over365Days && state.dateType !== DateType.Day) {
|
|
162
|
-
return I18n.getLang('energyconsumption_Daylimit')
|
|
163
|
-
}
|
|
164
|
-
if (state.dateType === DateType.Day && state.over7Days) {
|
|
165
|
-
return I18n.getLang('energyconsumption_hourlylimit')
|
|
166
|
-
}
|
|
167
|
-
return I18n.getLang('energyconsumption_emptydata')
|
|
168
|
-
}, [state.dateType, state.over365Days, state.over7Days])
|
|
169
|
-
|
|
170
|
-
const updateHeadlineText = useCallback((date: dayjs.Dayjs) => {
|
|
171
|
-
const year = date.year().toString()
|
|
172
|
-
const month = (date.month() + 1).toString().padStart(2, '0')
|
|
173
|
-
const day = date.date().toString().padStart(2, '0')
|
|
174
|
-
const dayOfWeek = date.day() % 7
|
|
175
|
-
switch (state.dateType) {
|
|
176
|
-
case DateType.Year:
|
|
177
|
-
state.headlineText = year
|
|
178
|
-
break
|
|
179
|
-
case DateType.Month:
|
|
180
|
-
state.headlineText = `${monthFormat(month)} ${year}`
|
|
181
|
-
break
|
|
182
|
-
case DateType.Day:
|
|
183
|
-
state.headlineText = `${day}.${month}.${year} (${loopsText[dayOfWeek]})`
|
|
184
|
-
break
|
|
185
|
-
}
|
|
186
|
-
}, [state.dateType, state.headlineText])
|
|
187
|
-
|
|
188
|
-
useUpdateEffect(() => {
|
|
189
|
-
const date = dayjs()
|
|
190
|
-
const year = date.year().toString()
|
|
191
|
-
const month = (date.month() + 1).toString().padStart(2, '0')
|
|
192
|
-
const day = date.date().toString().padStart(2, '0')
|
|
193
|
-
switch (state.dateType) {
|
|
194
|
-
case DateType.Year:
|
|
195
|
-
state.date = year
|
|
196
|
-
break
|
|
197
|
-
case DateType.Month:
|
|
198
|
-
state.date = `${year}${month}`
|
|
199
|
-
break
|
|
200
|
-
case DateType.Day:
|
|
201
|
-
state.date = `${year}${month}${day}`
|
|
202
|
-
break
|
|
203
|
-
}
|
|
204
|
-
}, [state.dateType])
|
|
205
|
-
|
|
206
|
-
const requestPowerData = useCallback((interval: number) => {
|
|
207
|
-
state.loading = true
|
|
208
|
-
getPowerData(devId, powerDpCode, interval).then((res: PowerDataItem[]) => {
|
|
209
|
-
state.powerData = res
|
|
210
|
-
state.loading = false
|
|
211
|
-
}).catch(() => {
|
|
212
|
-
state.loading = false
|
|
213
|
-
})
|
|
214
|
-
}, [])
|
|
215
|
-
|
|
216
|
-
return (
|
|
217
|
-
<Page
|
|
218
|
-
backText={backTitle}
|
|
219
|
-
showGreenery={false}
|
|
220
|
-
loading={state.loading}
|
|
221
|
-
greeneryIcon={res.energy_consumption_greenery}
|
|
222
|
-
>
|
|
223
|
-
<ScrollView nestedScrollEnabled={true} style={{ marginHorizontal: cx(24) }}>
|
|
224
|
-
<Spacer/>
|
|
225
|
-
|
|
226
|
-
<Segmented
|
|
227
|
-
options={[
|
|
228
|
-
{ label: I18n.getLang('chartdisplay_energy'), value: ChartType.kWh },
|
|
229
|
-
{ label: I18n.getLang('chartdisplay_power'), value: ChartType.Watt }
|
|
230
|
-
]}
|
|
231
|
-
value={state.chartType}
|
|
232
|
-
onChange={(chartType: ChartType) => {
|
|
233
|
-
state.chartType = chartType
|
|
234
|
-
}}/>
|
|
235
|
-
{
|
|
236
|
-
state.chartType === ChartType.kWh ? (
|
|
237
|
-
<>
|
|
238
|
-
<View style={{ width: '100%', flexDirection: 'row', marginVertical: cx(15) }}>
|
|
239
|
-
<DateSwitch
|
|
240
|
-
style={{ flex: 1 }}
|
|
241
|
-
date={state.date}
|
|
242
|
-
dateType={state.dateType}
|
|
243
|
-
headlineText={state.headlineText}
|
|
244
|
-
onDateChange={(date) => {
|
|
245
|
-
state.date = date
|
|
246
|
-
}}/>
|
|
247
|
-
<TouchableOpacity
|
|
248
|
-
style={{ width: cx(30) }}
|
|
249
|
-
onPress={() => {
|
|
250
|
-
const values = state.chartData.map(item => [item.key, item.value, (Number(params.price) * Number(item.value)).toFixed(2)])
|
|
251
|
-
exportEnergyCsv(values, params.unit)
|
|
252
|
-
}}>
|
|
253
|
-
<Image
|
|
254
|
-
style={styles.downloadIcon}
|
|
255
|
-
source={{ uri: state.chartData?.length ? res.download_icon : undefined }}/>
|
|
256
|
-
</TouchableOpacity>
|
|
257
|
-
</View>
|
|
258
|
-
<View style={{ flexDirection: 'row', marginBottom: cx(15) }}>
|
|
259
|
-
<DateTypeItem
|
|
260
|
-
style={{ flex: 1, marginHorizontal: cx(5) }}
|
|
261
|
-
dateType={state.dateType}
|
|
262
|
-
onDateTypeChange={(dateType) => {
|
|
263
|
-
state.dateType = dateType
|
|
264
|
-
}}/>
|
|
265
|
-
<DateSelectedItem
|
|
266
|
-
style={{ flex: 1 }}
|
|
267
|
-
dateType={state.dateType}
|
|
268
|
-
date={state.date}
|
|
269
|
-
onDateChange={date => {
|
|
270
|
-
state.date = date
|
|
271
|
-
}}
|
|
272
|
-
/>
|
|
273
|
-
</View>
|
|
274
|
-
{
|
|
275
|
-
(state.chartData.length <= 0) ? (
|
|
276
|
-
<View style={styles.listEmptyView}>
|
|
277
|
-
<Spacer height={cx(26)}/>
|
|
278
|
-
<Image
|
|
279
|
-
style={styles.listEmptyImage}
|
|
280
|
-
source={{ uri: res.ldv_timer_empty }}/>
|
|
281
|
-
<Spacer height={cx(14)}/>
|
|
282
|
-
<InfoText
|
|
283
|
-
text={getEmptyDataTip()}
|
|
284
|
-
icon={res.ic_info}
|
|
285
|
-
textStyle={styles.listEmptyText}
|
|
286
|
-
contentColor={props.theme?.global.fontColor}
|
|
287
|
-
/>
|
|
288
|
-
</View>
|
|
289
|
-
) : (
|
|
290
|
-
!state.loading && <NewBarChart height={cx(400)} data={state.chartData} price={state.price} unit={unit}/>
|
|
291
|
-
)
|
|
292
|
-
}
|
|
293
|
-
</>
|
|
294
|
-
) : (
|
|
295
|
-
<>
|
|
296
|
-
{
|
|
297
|
-
(state.loading || state.powerData.length <= 0) ? (
|
|
298
|
-
<View style={[styles.listEmptyView, {marginVertical: cx(70)}]}>
|
|
299
|
-
<Spacer height={cx(26)}/>
|
|
300
|
-
<Image
|
|
301
|
-
style={styles.listEmptyImage}
|
|
302
|
-
source={{ uri: res.ldv_timer_empty }}/>
|
|
303
|
-
<Spacer height={cx(14)}/>
|
|
304
|
-
<InfoText
|
|
305
|
-
text={I18n.getLang('power_chart_empty')}
|
|
306
|
-
icon={res.ic_info}
|
|
307
|
-
textStyle={styles.listEmptyText}
|
|
308
|
-
contentColor={props.theme?.global.fontColor}
|
|
309
|
-
/>
|
|
310
|
-
</View>
|
|
311
|
-
) : (
|
|
312
|
-
<PowerLineChart height={cx(400)} data={state.powerData}/>
|
|
313
|
-
)
|
|
314
|
-
}
|
|
315
|
-
<View style={styles.intervalContainer}>
|
|
316
|
-
{
|
|
317
|
-
[24 * 60, 6 * 60, 60, 5].map((item, index) => {
|
|
318
|
-
const isChecked = item === state.interval
|
|
319
|
-
return (
|
|
320
|
-
<TouchableOpacity
|
|
321
|
-
key={index}
|
|
322
|
-
style={[styles.intervalItem, isChecked ? styles.intervalItemChecked : {}]}
|
|
323
|
-
onPress={() => {
|
|
324
|
-
state.interval = item
|
|
325
|
-
requestPowerData(item)
|
|
326
|
-
}}>
|
|
327
|
-
<Text
|
|
328
|
-
style={isChecked ? styles.intervalTextChecked : styles.intervalText}>{I18n.getLang(intervalLabels[index])}</Text>
|
|
329
|
-
</TouchableOpacity>)
|
|
330
|
-
})
|
|
331
|
-
}
|
|
332
|
-
</View>
|
|
333
|
-
</>
|
|
334
|
-
)
|
|
335
|
-
}
|
|
336
|
-
</ScrollView>
|
|
337
|
-
</Page>
|
|
338
|
-
)
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
export default withTheme(EnergyConsumptionChart)
|
|
@@ -342,19 +342,6 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
|
|
|
342
342
|
<Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor, }}>{I18n.getLang(isGeneration ? 'generation_data_description_text' : 'consumption_data_description_text')}</Text>
|
|
343
343
|
</View>
|
|
344
344
|
<Spacer />
|
|
345
|
-
{/* Today */}
|
|
346
|
-
<Card
|
|
347
|
-
style={styles.cardContainer}
|
|
348
|
-
>
|
|
349
|
-
<Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field1_headline_text')}</Text>
|
|
350
|
-
<Spacer height={cx(15)} />
|
|
351
|
-
<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
|
|
352
|
-
<Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>{localeNumber(state.todayElectricity)}</Text>
|
|
353
|
-
<Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
|
|
354
|
-
</View>
|
|
355
|
-
<Spacer height={cx(10)} />
|
|
356
|
-
</Card>
|
|
357
|
-
<Spacer />
|
|
358
345
|
<Card
|
|
359
346
|
style={styles.cardContainer}
|
|
360
347
|
onPress={() => {
|
|
@@ -373,7 +360,17 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
|
|
|
373
360
|
} as EnergyConsumptionChartProps)
|
|
374
361
|
}}
|
|
375
362
|
>
|
|
376
|
-
<
|
|
363
|
+
<View style={{
|
|
364
|
+
flexDirection: 'row',
|
|
365
|
+
justifyContent: 'space-between',
|
|
366
|
+
alignItems: 'center',
|
|
367
|
+
}}>
|
|
368
|
+
<Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field2_headline_text')}</Text>
|
|
369
|
+
<Image
|
|
370
|
+
source={{ uri: res.energy_consumption_chart}}
|
|
371
|
+
style={{ width: cx(16), height: cx(16), marginLeft: cx(8) }}
|
|
372
|
+
/>
|
|
373
|
+
</View>
|
|
377
374
|
<Spacer height={cx(15)} />
|
|
378
375
|
<View style={styles.consumedEnergyContent}>
|
|
379
376
|
<ConsumedEnergyItem
|
|
@@ -392,25 +389,37 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
|
|
|
392
389
|
<Card
|
|
393
390
|
style={styles.cardContainer}
|
|
394
391
|
>
|
|
395
|
-
<View style={{ flexDirection: 'row', alignItems: 'center'
|
|
396
|
-
<
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
}}
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
392
|
+
<View style={{ flexDirection: 'row', alignItems: 'center'}}>
|
|
393
|
+
<View>
|
|
394
|
+
<View style={{height: cx(35), justifyContent: 'center'}}>
|
|
395
|
+
<Text style={[styles.cardTitle]}>{I18n.getLang('consumption_data_field1_headline_text')}</Text>
|
|
396
|
+
</View>
|
|
397
|
+
<View style={{ flexDirection: 'row', alignItems: 'center', height: cx(35) }}>
|
|
398
|
+
<Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field3_headline_text')}</Text>
|
|
399
|
+
{ state.energyGeneration.history.length > 0 && <TouchableOpacity
|
|
400
|
+
onPress={() => {
|
|
401
|
+
state.showPopup = true
|
|
402
|
+
state.popupType = 'history'
|
|
403
|
+
}}
|
|
404
|
+
>
|
|
405
|
+
<Image
|
|
406
|
+
source={{uri: res.co2_icon}}
|
|
407
|
+
resizeMode="contain"
|
|
408
|
+
style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
|
|
409
|
+
/>
|
|
410
|
+
</TouchableOpacity>}
|
|
411
|
+
</View>
|
|
412
|
+
</View>
|
|
413
|
+
<View>
|
|
414
|
+
<View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
|
|
415
|
+
<Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>{localeNumber(state.todayElectricity)}</Text>
|
|
416
|
+
<Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
|
|
417
|
+
</View>
|
|
418
|
+
<View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
|
|
419
|
+
<Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>{localeNumber(totalElectricity)}</Text>
|
|
420
|
+
<Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
|
|
421
|
+
</View>
|
|
422
|
+
</View>
|
|
414
423
|
</View>
|
|
415
424
|
<Spacer />
|
|
416
425
|
{/* CO2 */}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {NavigationRoute} from "tuya-panel-kit";
|
|
2
2
|
import EnergyConsumptionPage from "./EnergyConsumptionPage";
|
|
3
3
|
import EnergyConsumptionDetail from "./EnergyConsumptionDetail";
|
|
4
|
-
import EnergyConsumptionChart from "./EnergyConsumptionChart";
|
|
4
|
+
import EnergyConsumptionChart from "./EnergyConsumptionChart/index";
|
|
5
5
|
import {ui_biz_routerKey} from "../../navigation/Routers";
|
|
6
6
|
|
|
7
7
|
const EnergyConsumptionPageRouters: NavigationRoute[] = [
|
|
@@ -5,7 +5,7 @@ import {DatePicker, Modal, Utils} from "tuya-panel-kit";
|
|
|
5
5
|
import {useReactive} from "ahooks";
|
|
6
6
|
import I18n from "@ledvance/base/src/i18n/index";
|
|
7
7
|
import dayjs from "dayjs";
|
|
8
|
-
import { DateType } from "
|
|
8
|
+
import { DateType } from "../co2Data";
|
|
9
9
|
|
|
10
10
|
const {convertX: cx} = Utils.RatioUtils
|
|
11
11
|
const {withTheme} = Utils.ThemeUtils
|
|
@@ -29,7 +29,7 @@ const PowerLineChart = (props: PowerLineChartProps) => {
|
|
|
29
29
|
position: ['30%', '50%']
|
|
30
30
|
},
|
|
31
31
|
grid: {
|
|
32
|
-
right:
|
|
32
|
+
right: '5%'
|
|
33
33
|
},
|
|
34
34
|
xAxis: {
|
|
35
35
|
type: 'time',
|
|
@@ -92,7 +92,7 @@ const PowerLineChart = (props: PowerLineChartProps) => {
|
|
|
92
92
|
customMapData: {}
|
|
93
93
|
}
|
|
94
94
|
return (
|
|
95
|
-
<View style={{
|
|
95
|
+
<View style={{ height: height, width: '100%' }}>
|
|
96
96
|
<ECharts
|
|
97
97
|
option={option}
|
|
98
98
|
ref={echarts}
|