Commit aea48791e0ef4dc68875a51df456f80fba13c93e
1 parent
a5063ef2
perf(src/packages): 信息下的自定义时间支持近一周
Showing
3 changed files
with
40 additions
and
5 deletions
... | ... | @@ -17,11 +17,13 @@ export const option = { |
17 | 17 | textColor: 'black', |
18 | 18 | textBackgroundColor: 'white', |
19 | 19 | textBackgroundColorAlpha: 1, |
20 | - iconColor:'black', | |
20 | + iconColor: 'black', | |
21 | 21 | //弹出下拉框 |
22 | 22 | textSelectModalBackgroundColor: 'white', |
23 | 23 | textSelectModalTextColor: 'black' |
24 | - } | |
24 | + }, | |
25 | + //是否开启前一周 | |
26 | + openLastWeek: false | |
25 | 27 | } |
26 | 28 | |
27 | 29 | export default class Config extends PublicConfigClass implements CreateComponentType { | ... | ... |
... | ... | @@ -6,9 +6,19 @@ |
6 | 6 | </collapse-item> |
7 | 7 | |
8 | 8 | <collapse-item name="时间配置" :expanded="true"> |
9 | + <setting-item-box name="近一周"> | |
10 | + <setting-item> | |
11 | + <n-switch @change="handleChange" v-model:value="optionData.openLastWeek" size="small"></n-switch> | |
12 | + </setting-item> | |
13 | + </setting-item-box> | |
9 | 14 | <setting-item-box name="基础"> |
10 | 15 | <setting-item name="类型"> |
11 | - <n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions" /> | |
16 | + <n-select | |
17 | + @change="handleSelect" | |
18 | + v-model:value="optionData.componentInteractEventKey" | |
19 | + size="small" | |
20 | + :options="datePickerTypeOptions" | |
21 | + /> | |
12 | 22 | </setting-item> |
13 | 23 | </setting-item-box> |
14 | 24 | |
... | ... | @@ -159,4 +169,12 @@ const datePickerTypeOptions = [ |
159 | 169 | value: ComponentInteractEventEnum.QUARTER_RANGE |
160 | 170 | } |
161 | 171 | ] |
172 | +const handleChange = (value: boolean) => { | |
173 | + if (!value) return | |
174 | + const lastWeekEnd = new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000 | |
175 | + const lastWeekStart = new Date().getTime() | |
176 | + props.optionData.dataset = [lastWeekEnd, lastWeekStart] as any | |
177 | +} | |
178 | + | |
179 | +const handleSelect = (value: string) => (props.optionData.openLastWeek = false) | |
162 | 180 | </script> | ... | ... |
... | ... | @@ -79,6 +79,21 @@ watch( |
79 | 79 | immediate: true |
80 | 80 | } |
81 | 81 | ) |
82 | + | |
83 | +watch( | |
84 | + () => props.chartConfig.option.openLastWeek, | |
85 | + newData => { | |
86 | + if (!newData) return | |
87 | + const lastWeekEnd = new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000 | |
88 | + const lastWeekStart = new Date().getTime() | |
89 | + props.chartConfig.option.componentInteractEventKey = 'daterange' | |
90 | + option.dataset = [lastWeekEnd, lastWeekStart] | |
91 | + onChange(option.dataset) | |
92 | + }, | |
93 | + { | |
94 | + immediate: true | |
95 | + } | |
96 | +) | |
82 | 97 | </script> |
83 | 98 | |
84 | 99 | <style lang="scss" scoped> |
... | ... | @@ -98,8 +113,8 @@ watch( |
98 | 113 | .n-base-icon { |
99 | 114 | color: v-bind('iconColor') !important; |
100 | 115 | } |
101 | - .n-date-panel{ | |
102 | - background: v-bind('textSelectModalBackgroundColor') !important;; | |
116 | + .n-date-panel { | |
117 | + background: v-bind('textSelectModalBackgroundColor') !important; | |
103 | 118 | } |
104 | 119 | } |
105 | 120 | </style> | ... | ... |