@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.4 → 7.48.1-EPDM-12680.5
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
CHANGED
|
@@ -9,77 +9,128 @@
|
|
|
9
9
|
@click="toggleAllSections"
|
|
10
10
|
/>
|
|
11
11
|
</PageTitleContainer>
|
|
12
|
-
<SectionContainer
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
12
|
+
<SectionContainer
|
|
13
|
+
v-for="(item, index) in inverterList"
|
|
14
|
+
:key="item.inverterId"
|
|
15
|
+
>
|
|
16
|
+
<TopContainer>
|
|
17
|
+
<LeftContainer>
|
|
18
|
+
<TitleContainer>
|
|
19
|
+
<IconWrapper size="36px" @click="toggleSection(item.inverterId)">
|
|
20
|
+
<RCIcon
|
|
21
|
+
color="white"
|
|
22
|
+
:name="isExpanded(item.inverterId) ? 'arrow_up' : 'arrow_down'"
|
|
23
|
+
size="10px"
|
|
24
|
+
/>
|
|
25
|
+
</IconWrapper>
|
|
26
|
+
<TextContainer>
|
|
27
|
+
<TitleText :title="item.model">{{ item.model }}</TitleText>
|
|
28
|
+
<TitleSubText
|
|
29
|
+
>{{ item.brandName }} |
|
|
30
|
+
<ContainerValue v-if="item.getkWp() > 1">
|
|
31
|
+
{{
|
|
32
|
+
numberToString({
|
|
33
|
+
value: item.getkWp(),
|
|
34
|
+
numberPrecision: 0,
|
|
35
|
+
})
|
|
36
|
+
}}
|
|
37
|
+
kWp
|
|
38
|
+
</ContainerValue>
|
|
39
|
+
<ContainerValue v-else>
|
|
40
|
+
{{
|
|
41
|
+
numberToString({
|
|
42
|
+
value: 1000 * item.getkWp(),
|
|
43
|
+
numberPrecision: 3,
|
|
44
|
+
minDecimals: 3,
|
|
45
|
+
})
|
|
46
|
+
}}
|
|
47
|
+
Wp
|
|
48
|
+
</ContainerValue></TitleSubText
|
|
49
|
+
>
|
|
50
|
+
</TextContainer>
|
|
51
|
+
</TitleContainer>
|
|
52
|
+
<MarkersContainer>
|
|
53
|
+
<MarkerItem
|
|
54
|
+
:background-color="isTartgetRatioInRange(item) ? 'green' : 'red'"
|
|
55
|
+
>{{
|
|
56
|
+
numberToString({
|
|
57
|
+
value: 100 * item.getTargetRatio(),
|
|
58
|
+
numberPrecision: 2,
|
|
59
|
+
minDecimals: 0,
|
|
60
|
+
})
|
|
61
|
+
}}%</MarkerItem
|
|
62
|
+
>
|
|
63
|
+
<MarkerItem>
|
|
64
|
+
<span
|
|
65
|
+
:title="
|
|
66
|
+
item.hasTemplate
|
|
67
|
+
? item.company_product_template_name
|
|
68
|
+
? item.company_product_template_name
|
|
69
|
+
: $gettext('no_template_selected')
|
|
70
|
+
: $gettext('no_template')
|
|
71
|
+
"
|
|
72
|
+
>
|
|
73
|
+
{{
|
|
74
|
+
item.hasTemplate
|
|
75
|
+
? item.company_product_template_name
|
|
76
|
+
? item.company_product_template_name
|
|
77
|
+
: $gettext('no_template_selected')
|
|
78
|
+
: $gettext('no_template')
|
|
79
|
+
}}
|
|
80
|
+
</span>
|
|
81
|
+
</MarkerItem>
|
|
82
|
+
<MarkerItem>
|
|
83
|
+
<RCIcon
|
|
84
|
+
color="white"
|
|
85
|
+
:name="getIconName(item.type)"
|
|
86
|
+
size="14px"
|
|
87
|
+
/>
|
|
88
|
+
<div>{{ getTypeName(item.type) }}</div>
|
|
89
|
+
</MarkerItem>
|
|
90
|
+
</MarkersContainer>
|
|
91
|
+
<IconsContainer>
|
|
92
|
+
<IconWrapper>
|
|
93
|
+
<RCIcon color="red" cursor="pointer" name="delete" size="14px" />
|
|
94
|
+
</IconWrapper>
|
|
95
|
+
<IconWrapper @click="$emit('on-edit', item)">
|
|
96
|
+
<RCIcon
|
|
97
|
+
color="white"
|
|
98
|
+
cursor="pointer"
|
|
99
|
+
name="edit_button"
|
|
100
|
+
size="14px"
|
|
101
|
+
/>
|
|
102
|
+
</IconWrapper>
|
|
103
|
+
<IconWrapper>
|
|
104
|
+
<RCIcon
|
|
105
|
+
color="white"
|
|
106
|
+
cursor="pointer"
|
|
107
|
+
name="document"
|
|
108
|
+
size="14px"
|
|
109
|
+
@click="$emit('on-datasheet', item)"
|
|
110
|
+
/>
|
|
111
|
+
</IconWrapper>
|
|
112
|
+
</IconsContainer>
|
|
113
|
+
</LeftContainer>
|
|
114
|
+
<SortingContainer v-if="inverterList.length > 1">
|
|
115
|
+
<SortingIconWrapper
|
|
116
|
+
:data-test-id="'move_up_' + index"
|
|
117
|
+
@click="handleMoveClick('up', index)"
|
|
118
|
+
>
|
|
119
|
+
<RCIcon color="grey3" cursor="pointer" name="move_up" size="14px" />
|
|
120
|
+
</SortingIconWrapper>
|
|
121
|
+
<SortingIconWrapper
|
|
122
|
+
:data-test-id="'move_down_' + index"
|
|
123
|
+
@click="handleMoveClick('down', index)"
|
|
124
|
+
>
|
|
38
125
|
<RCIcon
|
|
39
|
-
color="
|
|
126
|
+
color="grey3"
|
|
40
127
|
cursor="pointer"
|
|
41
|
-
name="
|
|
128
|
+
name="move_down"
|
|
42
129
|
size="14px"
|
|
43
|
-
@click="$emit('on-datasheet', item)"
|
|
44
130
|
/>
|
|
45
|
-
</
|
|
46
|
-
</
|
|
47
|
-
</
|
|
48
|
-
<MarkersContainer>
|
|
49
|
-
<MarkerItem
|
|
50
|
-
:background-color="isTartgetRatioInRange(item) ? 'green' : 'red'"
|
|
51
|
-
>{{ 100 * item.getTargetRatio().toFixed(2) }}%</MarkerItem
|
|
52
|
-
>
|
|
53
|
-
<MarkerItem>
|
|
54
|
-
<span
|
|
55
|
-
:title="
|
|
56
|
-
item.hasTemplate
|
|
57
|
-
? item.company_product_template_name
|
|
58
|
-
? item.company_product_template_name
|
|
59
|
-
: $gettext('no_template_selected')
|
|
60
|
-
: $gettext('no_template')
|
|
61
|
-
"
|
|
62
|
-
>
|
|
63
|
-
{{
|
|
64
|
-
item.hasTemplate
|
|
65
|
-
? item.company_product_template_name
|
|
66
|
-
? item.company_product_template_name
|
|
67
|
-
: $gettext('no_template_selected')
|
|
68
|
-
: $gettext('no_template')
|
|
69
|
-
}}
|
|
70
|
-
</span>
|
|
71
|
-
</MarkerItem>
|
|
72
|
-
<MarkerItem>
|
|
73
|
-
<RCIcon color="white" :name="getIconName(item.type)" size="14px" />
|
|
74
|
-
<div>{{ getTypeName(item.type) }}</div>
|
|
75
|
-
</MarkerItem>
|
|
76
|
-
<ContainerValue v-if="item.getkWp() > 1">
|
|
77
|
-
{{ item.getkWp().toFixed(0) }} kWp
|
|
78
|
-
</ContainerValue>
|
|
79
|
-
<ContainerValue v-else>
|
|
80
|
-
{{ 1000 * item.getkWp().toFixed(3) }} Wp
|
|
81
|
-
</ContainerValue>
|
|
82
|
-
</MarkersContainer>
|
|
131
|
+
</SortingIconWrapper>
|
|
132
|
+
</SortingContainer>
|
|
133
|
+
</TopContainer>
|
|
83
134
|
<BoxContainer
|
|
84
135
|
v-for="mppt in item.mppts"
|
|
85
136
|
v-show="isExpanded(item.inverterId)"
|
|
@@ -183,6 +234,7 @@
|
|
|
183
234
|
import styled from 'vue3-styled-components'
|
|
184
235
|
import RCIcon from '../../icon'
|
|
185
236
|
import ButtonIcon from '../../buttons/buttonIcon'
|
|
237
|
+
import { numberToString } from '../../../helpers/numberConverter'
|
|
186
238
|
|
|
187
239
|
const PageContainer = styled.div``
|
|
188
240
|
|
|
@@ -204,7 +256,7 @@
|
|
|
204
256
|
const IconsContainer = styled.div`
|
|
205
257
|
display: flex;
|
|
206
258
|
align-items: center;
|
|
207
|
-
margin-left:
|
|
259
|
+
margin-left: 36px;
|
|
208
260
|
`
|
|
209
261
|
|
|
210
262
|
const TextContainer = styled.div`
|
|
@@ -212,21 +264,23 @@
|
|
|
212
264
|
`
|
|
213
265
|
|
|
214
266
|
const TitleText = styled.div`
|
|
215
|
-
font-size:
|
|
267
|
+
font-size: 14px;
|
|
216
268
|
white-space: nowrap;
|
|
217
269
|
overflow: hidden;
|
|
218
270
|
text-overflow: ellipsis;
|
|
219
271
|
`
|
|
220
272
|
|
|
221
273
|
const TitleSubText = styled.div`
|
|
222
|
-
font-size:
|
|
274
|
+
font-size: 12px;
|
|
275
|
+
display: flex;
|
|
276
|
+
gap: 4px;
|
|
223
277
|
`
|
|
224
278
|
|
|
225
279
|
const MarkersContainer = styled.div`
|
|
226
280
|
display: flex;
|
|
227
281
|
flex-wrap: wrap;
|
|
228
282
|
gap: 8px;
|
|
229
|
-
margin:
|
|
283
|
+
margin: 4px 0 2px 36px;
|
|
230
284
|
align-items: end;
|
|
231
285
|
`
|
|
232
286
|
|
|
@@ -254,7 +308,7 @@
|
|
|
254
308
|
`
|
|
255
309
|
|
|
256
310
|
const ContainerValue = styled.div`
|
|
257
|
-
font-size:
|
|
311
|
+
font-size: 12px;
|
|
258
312
|
`
|
|
259
313
|
|
|
260
314
|
const IconAttrs = {
|
|
@@ -389,6 +443,27 @@
|
|
|
389
443
|
align-self: flex-end;
|
|
390
444
|
margin-left: auto;
|
|
391
445
|
`
|
|
446
|
+
const TopContainer = styled.div`
|
|
447
|
+
display: flex;
|
|
448
|
+
justify-content: space-between;
|
|
449
|
+
`
|
|
450
|
+
|
|
451
|
+
const LeftContainer = styled.div``
|
|
452
|
+
|
|
453
|
+
const SortingContainer = styled.div`
|
|
454
|
+
display: flex;
|
|
455
|
+
flex-direction: column;
|
|
456
|
+
align-items: center;
|
|
457
|
+
`
|
|
458
|
+
|
|
459
|
+
const SortingIconWrapper = styled.div`
|
|
460
|
+
cursor: pointer;
|
|
461
|
+
width: 30px;
|
|
462
|
+
height: 30px;
|
|
463
|
+
display: flex;
|
|
464
|
+
align-items: center;
|
|
465
|
+
justify-content: center;
|
|
466
|
+
`
|
|
392
467
|
|
|
393
468
|
export default {
|
|
394
469
|
name: 'DropdownMenu',
|
|
@@ -422,6 +497,10 @@
|
|
|
422
497
|
BatteryType,
|
|
423
498
|
BatteryModel,
|
|
424
499
|
BatteryValue,
|
|
500
|
+
TopContainer,
|
|
501
|
+
LeftContainer,
|
|
502
|
+
SortingContainer,
|
|
503
|
+
SortingIconWrapper,
|
|
425
504
|
},
|
|
426
505
|
props: {
|
|
427
506
|
dataList: {
|
|
@@ -437,12 +516,13 @@
|
|
|
437
516
|
type: Object,
|
|
438
517
|
},
|
|
439
518
|
},
|
|
440
|
-
emits: ['on-edit'],
|
|
519
|
+
emits: ['on-edit', 'on-move'],
|
|
441
520
|
data() {
|
|
442
521
|
return {
|
|
443
522
|
expandedInverters: [],
|
|
444
523
|
expandedMppts: [],
|
|
445
524
|
inverterList: [],
|
|
525
|
+
numberToString,
|
|
446
526
|
}
|
|
447
527
|
},
|
|
448
528
|
computed: {
|
|
@@ -549,6 +629,12 @@
|
|
|
549
629
|
return 'pv'
|
|
550
630
|
}
|
|
551
631
|
},
|
|
632
|
+
handleMoveClick(direction, index) {
|
|
633
|
+
this.$emit('on-move', {
|
|
634
|
+
direction: direction,
|
|
635
|
+
index: index,
|
|
636
|
+
})
|
|
637
|
+
},
|
|
552
638
|
},
|
|
553
639
|
}
|
|
554
640
|
</script>
|