Showing
1 changed file
with
14 additions
and
3 deletions
| @@ -28,6 +28,8 @@ | @@ -28,6 +28,8 @@ | ||
| 28 | 28 | ||
| 29 | const timeRange = ref('week'); | 29 | const timeRange = ref('week'); |
| 30 | 30 | ||
| 31 | + const customTimeRange = ref(''); | ||
| 32 | + | ||
| 31 | const timeRangeList = ref([ | 33 | const timeRangeList = ref([ |
| 32 | { | 34 | { |
| 33 | label: `1${t('home.index.timeUnit.hour')}`, | 35 | label: `1${t('home.index.timeUnit.hour')}`, |
| @@ -123,6 +125,7 @@ | @@ -123,6 +125,7 @@ | ||
| 123 | }); | 125 | }); |
| 124 | 126 | ||
| 125 | const handleTimeRangeChange = (e: any) => { | 127 | const handleTimeRangeChange = (e: any) => { |
| 128 | + customTimeRange.value = ''; | ||
| 126 | emits('emitTimeRange', e.target.value, false, {}); | 129 | emits('emitTimeRange', e.target.value, false, {}); |
| 127 | watchClientWidth(); | 130 | watchClientWidth(); |
| 128 | }; | 131 | }; |
| @@ -131,6 +134,11 @@ | @@ -131,6 +134,11 @@ | ||
| 131 | customDate.value = val as unknown as any; | 134 | customDate.value = val as unknown as any; |
| 132 | }; | 135 | }; |
| 133 | 136 | ||
| 137 | + const handleOpenChange = () => { | ||
| 138 | + timeRange.value = ''; | ||
| 139 | + customTimeRange.value = 'custom'; | ||
| 140 | + }; | ||
| 141 | + | ||
| 134 | const handleDateOk = (range: RangePickerValue) => { | 142 | const handleDateOk = (range: RangePickerValue) => { |
| 135 | if (!range.length) return; | 143 | if (!range.length) return; |
| 136 | const [startTs, endTs] = range; | 144 | const [startTs, endTs] = range; |
| @@ -150,6 +158,7 @@ | @@ -150,6 +158,7 @@ | ||
| 150 | <DatePicker.RangePicker | 158 | <DatePicker.RangePicker |
| 151 | style="width: 4.675rem" | 159 | style="width: 4.675rem" |
| 152 | @calendarChange="handleCalendarChange" | 160 | @calendarChange="handleCalendarChange" |
| 161 | + @openChange="handleOpenChange" | ||
| 153 | size="small" | 162 | size="small" |
| 154 | @ok="handleDateOk" | 163 | @ok="handleDateOk" |
| 155 | v-model:value="customDate" | 164 | v-model:value="customDate" |
| @@ -157,9 +166,11 @@ | @@ -157,9 +166,11 @@ | ||
| 157 | defaultValue: [dateUtil('00:00:00', 'HH:mm:ss'), dateUtil('23:59:59', 'HH:mm:ss')], | 166 | defaultValue: [dateUtil('00:00:00', 'HH:mm:ss'), dateUtil('23:59:59', 'HH:mm:ss')], |
| 158 | }" | 167 | }" |
| 159 | > | 168 | > |
| 160 | - <a-radio-button :value="t('home.index.timeUnit.custom')"> | ||
| 161 | - {{ t('home.index.timeUnit.custom') }} | ||
| 162 | - </a-radio-button> | 169 | + <a-radio-group v-model:value="customTimeRange" button-style="solid"> |
| 170 | + <a-radio-button value="custom"> | ||
| 171 | + {{ t('home.index.timeUnit.custom') }} | ||
| 172 | + </a-radio-button> | ||
| 173 | + </a-radio-group> | ||
| 163 | </DatePicker.RangePicker> | 174 | </DatePicker.RangePicker> |
| 164 | <a-radio-group @change="handleTimeRangeChange" v-model:value="timeRange" button-style="solid"> | 175 | <a-radio-group @change="handleTimeRangeChange" v-model:value="timeRange" button-style="solid"> |
| 165 | <template v-for="(timeItem, index) in timeRangeList" :key="timeItem.value"> | 176 | <template v-for="(timeItem, index) in timeRangeList" :key="timeItem.value"> |