车间主任首页时间查询添加

src/views/home/modules/template7.vue

@@ -3,7 +3,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { Icon } from '@iconify/vue'
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
-import { getColorWithOpacity, tagTextColor, tagBgColor, tagBorderColor } from '@/utils/common';
+import { getColorWithOpacity, tagTextColor, tagBgColor, tagBorderColor, formatTimestamp, getTimeRangeStamp } from '@/utils/common';
 import RingChart from "./ringChart.vue";
 import { systemConfigApi } from "@/service/api/system";
 import { urgeApi } from "@/service/api/change";
@@ -26,8 +26,8 @@ const btnLoading = ref<boolean>(false);
 // 日期范围
 const dateRange = ref<string>('year');
 // 自定义日期范围
-const form = ref<number | null>(null);
-const to = ref<number | null>(null);
+const from = ref<number | null>(getTimeRangeStamp(dateRange.value)?.from ?? null);
+const to = ref<number | null>(getTimeRangeStamp(dateRange.value)?.to ?? null);
 // 变更临期天数
 const remindDays = ref<number>(0);
 // 变更类型列表
@@ -40,12 +40,32 @@ let timer: any = null;
 // 首页数据
 const homeData = ref<any>(null);
 
-// 时间范围改变
-const timeChange = (type: string, value: number | null) => {
+// 时间范围切换
+const timeChange = (val: string) => {
+    console.log(val);
+  dateRange.value = val;
+  if(val === 'custom'){
+    from.value = null;
+    to.value = null;
+    return
+  }else{
+    from.value = getTimeRangeStamp(val)?.from ?? null;
+    to.value = getTimeRangeStamp(val)?.to ?? null;
+  }
+  getData();
+}
+// 自定义时间选择
+const customTimeChange = (type:string,val:any) => {
   if(type === 'start'){
-    form.value = value;
-  }else if(type === 'end'){
-    to.value = value;
+    from.value = val;
+  }else{
+    to.value = val;
+  }
+  if(from.value && to.value){
+    if(from.value > to.value){
+      return window.$message?.warning('开始时间不能大于结束时间');
+    }
+    getData();
   }
 }
 
@@ -99,7 +119,10 @@ const matchObj = (list:any,val:number) => {
 // 获取数据
 const getData = async () => {
   loading.value = true;
-  const {data,error} = await homeManagerApi();
+  const {data,error} = await homeManagerApi({
+    from: formatTimestamp(from.value,'yyyy-MM-dd'),
+    to: formatTimestamp(to.value,'yyyy-MM-dd'),
+  });
   if(!error){
     homeData.value = data;
   }
@@ -501,12 +524,12 @@ onUnmounted(() => {
                 <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
                 <p class="text-13px font-700 text-#64749a">本车间统计</p>
                 <p class="text-11px text-#94a3b8">一车间 · 近一年</p>
-                <NSelect v-model:value="dateRange" size="small" :options="DATE_RANGE_OPTIONS" class="ml-auto w-120px"></NSelect>
+                <NSelect :value="dateRange" size="small" :options="DATE_RANGE_OPTIONS" class="ml-auto w-120px" :on-update:value="timeChange"></NSelect>
             </div>
             <div v-if="dateRange==='custom'" class="flex items-center gap-2 mt-2">
-                <NDatePicker :value="form" type="date" size="small" class="w-full" :on-update:value="(v) => timeChange('start',v)"  />
+                <NDatePicker :value="from" type="date" size="small" class="w-full" :on-update:value="(v) => customTimeChange('start',v)"  />
                 <span class="text-xs text-slate-400 flex-1">至</span>
-                <NDatePicker :value="to" type="date" size="small" class="w-full" :on-update:value="(v) => timeChange('end',v)" />
+                <NDatePicker :value="to" type="date" size="small" class="w-full" :on-update:value="(v) => customTimeChange('end',v)" />
             </div>
             <div class="flex flex-col gap-3 mt-3">
                 <div class="flex items-end justify-between">