Commit 4499f9e4eb1729b35c557fae4b2c126f39527add

Authored by xp.Huang
2 parents bc97472f 09c1aa04

Merge branch 'pref/issure' into 'main_dev'

perf(src/packages/components): 优化日期控件,区分是否是从快捷选项里选择的

See merge request yunteng/thingskit-view!236
... ... @@ -73,10 +73,11 @@ export const useChartDataFetch = (
73 73 let endTsValue = null
74 74 const {requestParams} = toRaw(targetComponent.request)
75 75 const {Params} = requestParams
76   - const {entityType, startTs, endTs} = Params
  76 + const {startTs, endTs, shortcutsSelect} = Params
77 77 let days = Math.ceil(((endTs as unknown as number) - (startTs as unknown as number)) / (1 * 60 * 60 * 24 * 1000))
78 78 const ShortcutsDays = [1, 7, 30]
79   - if (entityType === 'DEVICE') {
  79 + // shortcutsSelect为真
  80 + if (shortcutsSelect) {
80 81 //等于这三个,说明是从快捷选项里面选的
81 82 if(ShortcutsDays.includes(days)) {
82 83 days = days <= 2 ? 1 : days<= 8 ? 7 : 30
... ... @@ -85,12 +86,12 @@ export const useChartDataFetch = (
85 86 endTsValue = dayjs().endOf('day').valueOf()
86 87 ;(toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTsValue as number
87 88 ;(toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTsValue
88   - } else {
89   - //否则,选择的是什么日期区间就是什么
90   - (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number
91   - (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number
92 89 }
93   - }
  90 + } else {
  91 + //否则,选择的是什么日期区间就是什么
  92 + (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number
  93 + (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number
  94 + }
94 95 const res = await customRequest(toRaw(targetComponent.request))
95 96 if (res) {
96 97 try {
... ...
... ... @@ -245,8 +245,10 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, ne
245 245 }
246 246 }
247 247 })
248   - //
249   - addPieInterval(newData)
  248 + //动画为开启才执行动画
  249 + if (props.chartConfig.option.isCarousel) {
  250 + addPieInterval(newData)
  251 + }
250 252 updateVChart(newData)
251 253 })
252 254
... ...
... ... @@ -244,8 +244,10 @@ const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (new
244 244 }
245 245 }
246 246 })
247   - //
248   - addPieInterval(newData)
  247 + //动画为开启才执行动画
  248 + if (props.chartConfig.option.isCarousel) {
  249 + addPieInterval(newData)
  250 + }
249 251 updateVChart(newData)
250 252 })
251 253
... ...
... ... @@ -274,8 +274,10 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, ne
274 274 }
275 275 }
276 276 })
277   - //
278   - addPieInterval(newData)
  277 + //动画为开启才执行动画
  278 + if (props.chartConfig.option.isCarousel) {
  279 + addPieInterval(newData)
  280 + }
279 281 updateVChart(newData)
280 282 })
281 283
... ...
... ... @@ -11,6 +11,7 @@ interface Value {
11 11 startTs?: Nullable<number>
12 12 endTs?: Nullable<number>
13 13 limit?: Nullable<number>
  14 + shortcutsSelect?: Nullable<boolean>
14 15 }
15 16
16 17 const props = withDefaults(
... ... @@ -32,20 +33,25 @@ const timePeriod = ref<Nullable<[number, number]>>(null)
32 33 const agg = ref()
33 34 const interval = ref()
34 35 const limit = ref(7)
  36 +//区分是否是从快捷选项里选择的
  37 +const shortcutsSelect = ref(false)
35 38 const rangeShortcuts = {
36 39 昨天: () => {
  40 + shortcutsSelect.value = true
37 41 return [
38 42 dayjs().startOf('day').valueOf(),
39 43 dayjs().endOf('day').valueOf()
40 44 ] as const
41 45 },
42 46 最近7天: () => {
  47 + shortcutsSelect.value = true
43 48 return [
44 49 dayjs().subtract(6, 'day').startOf('day').valueOf(),
45 50 dayjs().endOf('day').valueOf()
46 51 ] as const
47 52 },
48 53 最近30天: () => {
  54 + shortcutsSelect.value = true
49 55 return [
50 56 dayjs().subtract(29, 'day').startOf('day').valueOf(),
51 57 dayjs().endOf('day').valueOf()
... ... @@ -74,10 +80,15 @@ const getIntervalTimeOptions = computed(() => {
74 80 return getRangeOptions(diff)
75 81 })
76 82
  83 +const handleTimeRangeBlur = () => {
  84 + //从面板里面选择
  85 + shortcutsSelect.value = false
  86 +}
  87 +
77 88 const handleTimePerionChange = (value: number[]) => {
78 89 const [startTs, endTs] = value || []
79   - emit('update:value', {...props.value, startTs, endTs, interval: null})
80   - emit('change', {...props.value || {}, startTs, endTs, interval: null})
  90 + emit('update:value', {...props.value, startTs, endTs, interval: null, shortcutsSelect: shortcutsSelect.value})
  91 + emit('change', {...props.value || {}, startTs, endTs, interval: null, shortcutsSelect: shortcutsSelect.value})
81 92 }
82 93
83 94 const handleAggChange = (value: string) => {
... ... @@ -120,6 +131,7 @@ watch(() => props.value, (target) => {
120 131 <NFormItem :show-label="false">
121 132 <NDatePicker :shortcuts="rangeShortcuts" v-model:value="timePeriod" type="datetimerange"
122 133 placeholder="请选择时间范围"
  134 + @blur="handleTimeRangeBlur"
123 135 @update-value="handleTimePerionChange" clearable
124 136 :default-time="['00:00:00', '23:59:59']"></NDatePicker>
125 137 </NFormItem>
... ...
... ... @@ -61,7 +61,6 @@ const rangeModelStyle = computed(() => {
61 61 @include fetch-bg-color('background-color2');
62 62 @include go(edit-range-model) {
63 63 z-index: -1;
64   - position: absolute;
65 64 left: 0;
66 65 top: 0;
67 66 }
... ...