feat: 新增首页统计图筛选条件

src/typings/components.d.ts

@@ -43,6 +43,7 @@ declare module 'vue' {
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NDataTable: typeof import('naive-ui')['NDataTable']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDescriptions: typeof import('naive-ui')['NDescriptions']
     NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']

src/views/home/index.vue

@@ -16,6 +16,10 @@ const cardCount = ref<Api.Dashboard.CardCount>();
 const tabParams = ref<Api.Dashboard.DashboardLineParams>({
   type: 'WEEK'
 });
+const dateRange = ref<[number, number] | null>();
+const formattedValue = ref<[string, string] | null>(
+  tabParams.value.startTime && tabParams.value.endTime ? [tabParams.value.startTime, tabParams.value.endTime] : null
+);
 
 const getCardData = async () => {
   const { data: cardData, error } = await fetchCardCount();
@@ -25,6 +29,29 @@ const getCardData = async () => {
 };
 
 getCardData();
+
+const onUpdateDate = (value: [string, string]) => {
+  if (value) {
+    tabParams.value.type = 'OTHERS';
+    tabParams.value.startTime = value[0];
+    tabParams.value.endTime = value[1];
+  }
+};
+
+const onClearDate = () => {
+  tabParams.value.type = 'WEEK';
+  tabParams.value.startTime = undefined;
+  tabParams.value.endTime = undefined;
+};
+
+const onUpdateType = (value: string) => {
+  if (value !== 'OTHERS') {
+    dateRange.value = null;
+    formattedValue.value = null;
+    tabParams.value.startTime = undefined;
+    tabParams.value.endTime = undefined;
+  }
+};
 </script>
 
 <template>
@@ -35,19 +62,30 @@ getCardData();
       <div class="relative">
         <NTabs type="line" animated>
           <NTabPane name="retryTask" :tab="$t('page.home.retryTask')">
-            <RetryTab :type="0" />
+            <RetryTab :type="0" :line-params="tabParams" />
           </NTabPane>
           <NTabPane name="jobTask" :tab="$t('page.home.jobTask')">
-            <RetryTab :type="1" />
+            <RetryTab :type="1" :line-params="tabParams" />
           </NTabPane>
         </NTabs>
-        <div class="absolute right-40px top-4px">
-          <NRadioGroup v-model:value="tabParams.type">
+        <div class="absolute right-40px top-0 flex gap-16px">
+          <NRadioGroup v-model:value="tabParams.type" @update:value="onUpdateType">
             <NRadioButton value="DAY" label="今日" />
             <NRadioButton value="WEEK" label="最近一周" />
             <NRadioButton value="MONTH" label="最近一月" />
             <NRadioButton value="YEAR" label="全年" />
           </NRadioGroup>
+          <NDatePicker
+            v-model:value="dateRange"
+            v-model:formatted-value="formattedValue"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            type="daterange"
+            class="w-300px"
+            clearable
+            @update:formatted-value="onUpdateDate"
+            @clear="onClearDate"
+          />
+          <NSelect v-model:value="tabParams.groupName" class="w-200px" />
         </div>
       </div>
     </NCard>

src/views/home/modules/line-retry-chart.vue

@@ -210,6 +210,13 @@ function updateLocale() {
   });
 }
 
+watch(
+  () => props.modelValue,
+  () => {
+    getData();
+  }
+);
+
 watch(
   () => props.type,
   () => {

src/views/home/modules/retry-tab.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 import { fetchJobLine, fetchRetryLine } from '@/service/api';
 import LineRetryChart from './line-retry-chart.vue';
@@ -10,6 +10,7 @@ defineOptions({
 
 interface Props {
   type?: number;
+  lineParams: Api.Dashboard.DashboardLineParams;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -23,20 +24,25 @@ const gap = computed(() => (appStore.isMobile ? 0 : 16));
 const data = ref<Api.Dashboard.DashboardLine>();
 
 const getData = async () => {
-  const { data: lineData, error } = props.type === 1 ? await fetchJobLine() : await fetchRetryLine();
+  const { data: lineData, error } =
+    props.type === 1 ? await fetchJobLine(props.lineParams) : await fetchRetryLine(props.lineParams);
 
   if (!error) {
     data.value = lineData;
   }
 };
 
+watch(props.lineParams, () => {
+  getData();
+});
+
 getData();
 </script>
 
 <template>
   <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
     <NGi span="24 s:24 m:16">
-      <LineRetryChart :type="type" :model-value="data!"></LineRetryChart>
+      <LineRetryChart v-model="data!" :type="type"></LineRetryChart>
     </NGi>
     <NGi span="24 s:24 m:8">
       <div>任务量排名</div>