Commit b9f88a0f264ff583874b83f9c3821ab8019aa220
1 parent
324b412a
feat(src/packages): 信息下的控件 时间选择器,右侧配置选择日期类型默认值和快捷选择不一致问题
Showing
1 changed file
with
39 additions
and
19 deletions
... | ... | @@ -7,28 +7,46 @@ |
7 | 7 | <collapse-item name="时间配置" :expanded="true"> |
8 | 8 | <setting-item-box name="快捷选择"> |
9 | 9 | <setting-item name="日期"> |
10 | - <n-select clearable @change="shortCutSelect" v-model:value="optionData.shortcut" size="small" :options="intervalOption" /> | |
10 | + <n-select | |
11 | + clearable | |
12 | + @change="shortCutSelect" | |
13 | + v-model:value="optionData.shortcut" | |
14 | + size="small" | |
15 | + :options="intervalOption" | |
16 | + /> | |
11 | 17 | </setting-item> |
12 | 18 | </setting-item-box> |
13 | 19 | <setting-item-box name="基础"> |
14 | 20 | <setting-item name="类型"> |
15 | - <n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions" | |
16 | - @update:value="datePickerTypeUpdate"/> | |
21 | + <n-select | |
22 | + v-model:value="optionData.componentInteractEventKey" | |
23 | + size="small" | |
24 | + :options="datePickerTypeOptions" | |
25 | + @update:value="datePickerTypeUpdate" | |
26 | + /> | |
17 | 27 | </setting-item> |
18 | 28 | </setting-item-box> |
19 | 29 | <setting-item-box name="默认值"> |
20 | 30 | <setting-item name="类型"> |
21 | - <n-select v-model:value="optionData.defaultType" size="small" :options="defaultTypeOptions" | |
22 | - @update:value="defaultTypeUpdate" /> | |
31 | + <n-select | |
32 | + v-model:value="optionData.defaultType" | |
33 | + size="small" | |
34 | + :options="defaultTypeOptions" | |
35 | + @update:value="defaultTypeUpdate" | |
36 | + /> | |
23 | 37 | </setting-item> |
24 | - | |
25 | 38 | </setting-item-box> |
26 | 39 | <setting-item-box v-if="optionData.defaultType === DefaultTypeEnum.STATIC" :alone="true"> |
27 | 40 | <setting-item name="静态默认值"> |
28 | - <n-date-picker size="small" clearable v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" /> | |
41 | + <n-date-picker | |
42 | + size="small" | |
43 | + clearable | |
44 | + v-model:value="optionData.dataset" | |
45 | + :type="optionData.componentInteractEventKey" | |
46 | + /> | |
29 | 47 | </setting-item> |
30 | 48 | </setting-item-box> |
31 | - <setting-item-box v-if="optionData.defaultType === DefaultTypeEnum.DYNAMIC" > | |
49 | + <setting-item-box v-if="optionData.defaultType === DefaultTypeEnum.DYNAMIC"> | |
32 | 50 | <template #name> |
33 | 51 | <n-text></n-text> |
34 | 52 | <n-tooltip trigger="hover"> |
... | ... | @@ -43,7 +61,7 @@ |
43 | 61 | <setting-item :name="differValueName"> |
44 | 62 | <n-input-number v-model:value="optionData.differValue[0]" class="input-num-width" size="small"> |
45 | 63 | <template #suffix> |
46 | - {{DifferUnitObject[optionData.differUnit[0]]}} | |
64 | + {{ DifferUnitObject[optionData.differUnit[0]] }} | |
47 | 65 | </template> |
48 | 66 | </n-input-number> |
49 | 67 | </setting-item> |
... | ... | @@ -53,7 +71,7 @@ |
53 | 71 | <setting-item v-if="isRange" name="结束值动态偏移量"> |
54 | 72 | <n-input-number v-model:value="optionData.differValue[1]" class="input-num-width" size="small"> |
55 | 73 | <template #suffix> |
56 | - {{DifferUnitObject[optionData.differUnit[1]]}} | |
74 | + {{ DifferUnitObject[optionData.differUnit[1]] }} | |
57 | 75 | </template> |
58 | 76 | </n-input-number> |
59 | 77 | </setting-item> |
... | ... | @@ -61,18 +79,17 @@ |
61 | 79 | <n-select v-model:value="optionData.differUnit[1]" size="small" :options="differUnitOptions" /> |
62 | 80 | </setting-item> |
63 | 81 | </setting-item-box> |
64 | - | |
65 | 82 | </collapse-item> |
66 | 83 | </template> |
67 | 84 | |
68 | 85 | <script lang="ts" setup> |
69 | -import { PropType,computed } from 'vue' | |
86 | +import { PropType, computed, ref } from 'vue' | |
70 | 87 | import { icon } from '@/plugins' |
71 | 88 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' |
72 | 89 | import { option } from './config' |
73 | 90 | import { intervalOption } from './shortcutTime' |
74 | 91 | import { ComponentInteractEventEnum, DefaultTypeEnum, DifferUnitEnum, DifferUnitObject } from './interact' |
75 | -import dayjs from "dayjs"; | |
92 | +import dayjs from 'dayjs' | |
76 | 93 | |
77 | 94 | const { HelpOutlineIcon } = icon.ionicons5 |
78 | 95 | |
... | ... | @@ -152,7 +169,6 @@ const defaultTypeOptions = [ |
152 | 169 | } |
153 | 170 | ] |
154 | 171 | |
155 | - | |
156 | 172 | const differUnitOptions = [ |
157 | 173 | // ManipulateType |
158 | 174 | { |
... | ... | @@ -193,7 +209,6 @@ const differUnitOptions = [ |
193 | 209 | } |
194 | 210 | ] |
195 | 211 | |
196 | - | |
197 | 212 | const isRange = computed(() => { |
198 | 213 | return props.optionData.componentInteractEventKey.endsWith('range') |
199 | 214 | }) |
... | ... | @@ -206,8 +221,13 @@ const differUnitName = computed(() => { |
206 | 221 | return isRange.value ? '开始值偏移单位' : '偏移单位' |
207 | 222 | }) |
208 | 223 | |
224 | +const startTs = ref(0) | |
225 | +const endTs = ref(0) | |
226 | + | |
209 | 227 | const datePickerTypeUpdate = () => { |
210 | - props.optionData.dataset = isRange.value ? [dayjs().valueOf(), dayjs().valueOf()] : [dayjs().valueOf()] | |
228 | + props.optionData.dataset = isRange.value | |
229 | + ? [startTs.value ? startTs.value : dayjs().valueOf(), endTs.value ? endTs.value : dayjs().valueOf()] | |
230 | + : [dayjs().valueOf()] | |
211 | 231 | } |
212 | 232 | |
213 | 233 | const defaultTypeUpdate = (v: string) => { |
... | ... | @@ -220,9 +240,9 @@ const defaultTypeUpdate = (v: string) => { |
220 | 240 | } |
221 | 241 | |
222 | 242 | const shortCutSelect = (value: number) => { |
223 | - const startTs = Date.now() - value | |
224 | - const endTs = Date.now() | |
225 | - props.optionData.dataset = [startTs, endTs] as any | |
243 | + startTs.value = Date.now() - value | |
244 | + endTs.value = Date.now() | |
245 | + props.optionData.dataset = [startTs.value, endTs.value] as any | |
226 | 246 | } |
227 | 247 | // shortCutSelect(24*60*60*1000)//默认近1天 |
228 | 248 | </script> | ... | ... |