Commit b9f88a0f264ff583874b83f9c3821ab8019aa220

Authored by fengwotao
1 parent 324b412a

feat(src/packages): 信息下的控件 时间选择器,右侧配置选择日期类型默认值和快捷选择不一致问题

... ... @@ -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>
... ...