Commit c75b2494ce36d9af70e15dd704a48bfd12415f6f

Authored by ww
1 parent ed68f6c3

perf: 删除无用代码

1 -<script lang="ts" setup>  
2 - import { ref, computed, Ref, unref } from 'vue';  
3 - import { Select, Switch, InputNumber } from 'ant-design-vue';  
4 - import { latestOptions, LatestOptionsEnum } from './config';  
5 - import { dateUtil } from '/@/utils/dateUtil';  
6 -  
7 - type DateUnit = 'days' | 'hours' | 'minutes' | 'seconds';  
8 -  
9 - type RangeObject = Record<DateUnit, number>;  
10 -  
11 - const emit = defineEmits(['update:value']);  
12 -  
13 - const props = withDefaults(  
14 - defineProps<{  
15 - value?: number;  
16 - }>(),  
17 - {  
18 - value: 1000 * 60 * 60 * 24 * 30,  
19 - }  
20 - );  
21 -  
22 - const advancedMode = ref(false);  
23 -  
24 - const getRangeObject = (milliseconds: number) => {  
25 - const methods: { method: string; key: moment.unitOfTime.Base }[] = [  
26 - { method: 'asDays', key: 'days' },  
27 - { method: 'asHours', key: 'hours' },  
28 - { method: 'asMinutes', key: 'minutes' },  
29 - { method: 'asSeconds', key: 'seconds' },  
30 - ];  
31 -  
32 - return methods.reduce((prev, next) => {  
33 - const { method, key } = next;  
34 - const value = dateUtil.duration(milliseconds, 'millisecond')[method]?.();  
35 -  
36 - if (value >= 1) {  
37 - milliseconds -= dateUtil.duration(parseInt(value), key).asMilliseconds();  
38 - }  
39 -  
40 - return { ...prev, [key]: value >= 1 ? parseInt(value) : 0 };  
41 - }, {} as Record<DateUnit, number>);  
42 - };  
43 -  
44 - const getMillisecondsByObject = (value: RangeObject | Ref<RangeObject>) => {  
45 - value = unref(value);  
46 - return Object.keys(unref(value)).reduce((prev, next) => {  
47 - return (  
48 - prev +  
49 - dateUtil  
50 - .duration(value[next], next as moment.unitOfTime.DurationConstructor)  
51 - .asMilliseconds()  
52 - );  
53 - }, 0);  
54 - };  
55 -  
56 - const getValue = computed(() => {  
57 - const { value } = props;  
58 - const dateRange = getRangeObject(value);  
59 - const { days, hours, minutes, seconds } = dateRange;  
60 -  
61 - const filterList = latestOptions.filter((item) => value >= item.value);  
62 - return {  
63 - days,  
64 - hours,  
65 - minutes,  
66 - seconds,  
67 - selectValue: filterList[filterList.length - 1].value,  
68 - };  
69 - });  
70 -  
71 - const handleSyncValue = (value: LatestOptionsEnum) => {  
72 - emit('update:value', value);  
73 - };  
74 -  
75 - const handleChange = (value: number, unit: DateUnit) => {  
76 - if (isNaN(value)) return;  
77 - let { days, hours, minutes, seconds } = unref(getValue);  
78 - const dateRangeObject: RangeObject = {  
79 - days,  
80 - hours,  
81 - minutes,  
82 - seconds,  
83 - [unit]: value,  
84 - };  
85 -  
86 - const milliseconds = getMillisecondsByObject(dateRangeObject);  
87 - emit('update:value', milliseconds);  
88 - };  
89 -</script>  
90 -  
91 -<template>  
92 - <section class="flex justify-center items-end gap-4 h-14 latest-date-picker">  
93 - <section v-if="advancedMode" class="flex flex-auto custom-date-range">  
94 - <div>  
95 - <div>天</div>  
96 - <InputNumber  
97 - :value="getValue.days"  
98 - @change="(event) => handleChange(event, 'days')"  
99 - :step="1"  
100 - :max="7300"  
101 - :min="0"  
102 - />  
103 - </div>  
104 - <div>  
105 - <div>小时</div>  
106 - <InputNumber  
107 - :value="getValue.hours"  
108 - @change="(event) => handleChange(event, 'hours')"  
109 - :step="1"  
110 - :max="23"  
111 - :min="0"  
112 - />  
113 - </div>  
114 - <div>  
115 - <div>分钟</div>  
116 - <InputNumber  
117 - :value="getValue.minutes"  
118 - @change="(event) => handleChange(event, 'minutes')"  
119 - :step="1"  
120 - :max="59"  
121 - :min="0"  
122 - />  
123 - </div>  
124 - <div>  
125 - <div>秒</div>  
126 - <InputNumber  
127 - :value="getValue.seconds"  
128 - @change="(event) => handleChange(event, 'seconds')"  
129 - :step="1"  
130 - :max="59"  
131 - :min="0"  
132 - />  
133 - </div>  
134 - </section>  
135 - <Select  
136 - v-if="!advancedMode"  
137 - class="!flex-auto"  
138 - v-model:value="getValue.selectValue"  
139 - :options="latestOptions"  
140 - placeholder="请选择最后时间段"  
141 - @change="handleSyncValue"  
142 - allow-clear  
143 - />  
144 - <div class="w-14 flex flex-col justify-between h-full text-center">  
145 - <div>高级</div>  
146 - <Switch class="w-14" v-model:checked="advancedMode" />  
147 - </div>  
148 - </section>  
149 -</template>  
150 -  
151 -<style scoped lang="less">  
152 - .latest-date-picker {  
153 - :deep(.ant-input-number) {  
154 - min-width: 0;  
155 - width: 100%;  
156 - }  
157 -  
158 - :deep(.ant-select-selection-item) {  
159 - pointer-events: none;  
160 - }  
161 - }  
162 -</style>  
1 -import { dateUtil } from '/@/utils/dateUtil';  
2 -  
3 -export enum ModeEnum {  
4 - LATEST = 'LATEST',  
5 - RANGE = 'RANGE',  
6 - INTERVAL = 'INTERVAL',  
7 -}  
8 -  
9 -export enum ModeNameEnum {  
10 - LATEST = '最后',  
11 - RANGE = '时间段',  
12 - INTERVAL = '时间间隔',  
13 -}  
14 -  
15 -export enum UnitEnum {  
16 - SECONDS = '秒',  
17 - MINUTES = '分',  
18 - HOURS = '时',  
19 - DAYS = '天',  
20 -}  
21 -  
22 -export enum LatestOptionsEnum {  
23 - '1_SECONDS' = '1_SECONDS',  
24 - '5_SECONDS' = '5_SECONDS',  
25 - '10_SECONDS' = '10_SECONDS',  
26 - '15_SECONDS' = '15_SECONDS',  
27 - '30_SECONDS' = '30_SECONDS',  
28 -  
29 - '1_MINUTES' = '1_MINUTES',  
30 - '2_MINUTES' = '2_MINUTES',  
31 - '5_MINUTES' = '5_MINUTES',  
32 - '10_MINUTES' = '10_MINUTES',  
33 - '15_MINUTES' = '15_MINUTES',  
34 - '30_MINUTES' = '30_MINUTES',  
35 -  
36 - '1_HOURS' = '1_HOURS',  
37 - '2_HOURS' = '2_HOURS',  
38 - '5_HOURS' = '5_HOURS',  
39 - '10_HOURS' = '10_HOURS',  
40 - '12_HOURS' = '12_HOURS',  
41 -  
42 - '1_DAYS' = '1_DAYS',  
43 - '7_DAYS' = '7_DAYS',  
44 - '30_DAYS' = '30_DAYS',  
45 -}  
46 -  
47 -const getLatesetOptionLabel = (string: string) => {  
48 - const [value, unit] = string.split('_');  
49 - return `${value} ${UnitEnum[unit]}`;  
50 -};  
51 -  
52 -const getLatesetOptionValue = (string: string) => {  
53 - const [value, unit] = string.split('_');  
54 - return dateUtil  
55 - .duration(Number(value), unit.toLowerCase() as moment.unitOfTime.DurationConstructor)  
56 - .asMilliseconds();  
57 -};  
58 -  
59 -export const latestOptions: { label: string; value: number }[] = Object.keys(LatestOptionsEnum).map(  
60 - (key) => ({ label: getLatesetOptionLabel(key), value: getLatesetOptionValue(key) })  
61 -);  
62 -  
63 -[  
64 - 'Yesterday',  
65 - 'Day before yesterday',  
66 - 'This day last week',  
67 - 'Previous week (Sun - Sat)',  
68 - 'Previous week (Mon - Sun)',  
69 - 'Previous month',  
70 - 'Previous year',  
71 - 'Current hour',  
72 - 'Current day',  
73 - 'Current day so far',  
74 - 'Current week (Sun - Sat)',  
75 - 'Current week (Mon - Sun)',  
76 - 'Current week so far (Sun - Sat)',  
77 - 'Current week so far (Mon - Sun)',  
78 - 'Current month',  
79 - 'Current month so far',  
80 - 'Current year',  
81 - 'Current year so far',  
82 -];  
1 -export { default as DateRangeButton } from './index.vue';  
1 -<script lang="ts" setup>  
2 - import { Popconfirm, Button, Radio, RadioGroup, RangePicker } from 'ant-design-vue';  
3 - import { ref } from 'vue';  
4 - import { Icon } from '/@/components/Icon';  
5 - import { ModeEnum, ModeNameEnum } from './config';  
6 - import LatestDate from './LatestDate.vue';  
7 -  
8 - const mode = ref(ModeEnum.LATEST);  
9 -  
10 - const visible = ref(true);  
11 -  
12 - const latestValue = ref<number>(1000 * 60 * 60 * 24 * 30);  
13 -</script>  
14 -  
15 -<template>  
16 - <Popconfirm :visible="visible">  
17 - <template #icon>  
18 - <span></span>  
19 - </template>  
20 - <template #title>  
21 - <RadioGroup v-model:value="mode" class="!flex flex-col gap-2 w-96">  
22 - <Radio :value="ModeEnum.LATEST">  
23 - <span>{{ ModeNameEnum.LATEST }}</span>  
24 - <LatestDate v-model:value="latestValue" v-if="mode === ModeEnum.LATEST" />  
25 - </Radio>  
26 - <Radio :value="ModeEnum.RANGE">  
27 - <span>{{ ModeNameEnum.RANGE }}</span>  
28 - <section v-if="mode === ModeEnum.RANGE" class="mt-2 flex flex-col justify-end">  
29 - <RangePicker :showTime="true" />  
30 - </section>  
31 - </Radio>  
32 - <Radio :value="ModeEnum.INTERVAL">  
33 - <span>{{ ModeNameEnum.INTERVAL }}</span>  
34 - <section class="mt-2 flex flex-col justify-end">  
35 - <!-- -->  
36 - </section>  
37 - </Radio>  
38 - </RadioGroup>  
39 - </template>  
40 - <Button type="primary" @click="visible = true">  
41 - <Icon icon="mdi:clock-outline" />  
42 - </Button>  
43 - </Popconfirm>  
44 -</template>