| | |
| | | <template> |
| | | <template> |
| | | <div style="padding: 20px;"> |
| | | <!-- 页面标题和日期筛选 --> |
| | | <div class="w-full md:w-auto flex items-center gap-3" style="margin-bottom: 20px;"> |
| | |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | :default-value="[new Date(firstDayOfMonth), new Date()]" |
| | | clearable |
| | | @change="handleDateChange" |
| | | class="w-full md:w-auto" |
| | | style="margin-right: 30px;" |
| | |
| | | import dayjs from "dayjs"; |
| | | |
| | | // 日期范围 |
| | | const dateRange = ref([]); |
| | | const firstDayOfMonth = ref(null); |
| | | const dateRange = ref(null); |
| | | const chartStyle = { |
| | | width: '100%', |
| | | height: '100%', // 设置图表容器的高度 |
| | |
| | | }) |
| | | |
| | | const getData = async () => { |
| | | if (!dateRange.value || !dateRange.value.length) { |
| | | return; |
| | | } |
| | | try { |
| | | const {code,data} = await reportForms({entryDateStart:dateRange.value[0], entryDateEnd:dateRange.value[1]}); |
| | | if(code === 200) { |
| | |
| | | }; |
| | | |
| | | |
| | | // 初始化日期范围(默认当月) |
| | | // 初始化 |
| | | onMounted(() => { |
| | | const today = new Date(); |
| | | const firstDay = new Date(today.getFullYear(), today.getMonth(), 1); |
| | | firstDayOfMonth.value = firstDay; |
| | | dateRange.value = [dayjs(firstDay).format("YYYY-MM-DD"), dayjs(today).format("YYYY-MM-DD")]; |
| | | getData() |
| | | |
| | | // 不设置默认日期,由用户手动选择 |
| | | }); |
| | | |
| | | // 处理日期范围变化 |
| | | const handleDateChange = (newRange) => { |
| | | dateRange.value = newRange; |
| | | if (newRange && newRange.length === 2) { |
| | | dateRange.value = newRange; |
| | | getData() |
| | | } |
| | | }; |
| | | |
| | | // 重置日期范围 |
| | | const resetDateRange = () => { |
| | | const today = new Date(); |
| | | const firstDay = new Date(today.getFullYear(), today.getMonth(), 1); |
| | | dateRange.value = [dayjs(firstDay).format("YYYY-MM-DD"), dayjs(today).format("YYYY-MM-DD")]; |
| | | getData() |
| | | dateRange.value = null; |
| | | }; |
| | | |
| | | </script> |