perf: 调整

This commit is contained in:
rd
2025-09-05 18:09:20 +08:00
parent 4d3410f58b
commit 03478c89f5
4 changed files with 85 additions and 11 deletions

View File

@ -72,7 +72,7 @@
<DatePicker.RangePicker <DatePicker.RangePicker
v-model="audit_started_at" v-model="audit_started_at"
size="medium" size="medium"
allow-clear allowClear
format="YYYY-MM-DD" format="YYYY-MM-DD"
class="!w-280px" class="!w-280px"
@change="(value) => onDateChange(value, 'audit_started_at')" @change="(value) => onDateChange(value, 'audit_started_at')"

View File

@ -33,7 +33,7 @@
<div class="filter-row flex"> <div class="filter-row flex">
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">时间筛选</span> <span class="label">时间筛选</span>
<DatePicker.RangePicker v-model:value="query.data_time" allowClear format="YYYY-MM-DD" class="!w-240px" /> <DatePicker.RangePicker v-model="data_time" allowClear format="YYYY-MM-DD" class="!w-240px" @change="onDateChange" />
</div> </div>
<Button type="primary" ghost class="mr-12px" @click="handleSearch"> <Button type="primary" ghost class="mr-12px" @click="handleSearch">
<template #icon> <template #icon>
@ -80,6 +80,8 @@ import PlanSelect from '@/views/components/common/PlanSelect.vue';
const { TabPane } = Tabs; const { TabPane } = Tabs;
const { Option } = Select; const { Option } = Select;
const accountType = ref("1"); const accountType = ref("1");
const data_time = ref([]);
const operators = ref([]);
const onLoading = ref(true); const onLoading = ref(true);
@ -108,6 +110,19 @@ const handleTabClick = (value) => {
accountType.value = value; accountType.value = value;
handleSearch(); handleSearch();
}; };
const onDateChange = (date) => {
if (!date) {
query.data_time = [];
handleSearch();
return;
}
const [start, end] = date;
const FORMAT_DATE = 'YYYY-MM-DD';
query.data_time = [dayjs(start).startOf('day').format(FORMAT_DATE), dayjs(end).endOf('day').format(FORMAT_DATE)];
handleSearch();
};
const mergeChartData = (apiResponse) => { const mergeChartData = (apiResponse) => {
console.log(apiResponse, 'apiResponse'); console.log(apiResponse, 'apiResponse');
chartConfigs.value = chartConfigs.value.map((config) => { chartConfigs.value = chartConfigs.value.map((config) => {
@ -221,14 +236,15 @@ const chartConfigs = ref([
}, },
]); ]);
const handleReset = async () => { const handleReset = async () => {
data_time.value = [];
query.platform = undefined; query.platform = undefined;
query.operator_id = undefined; query.operator_id = undefined;
query.data_time = [];
query.ids = []; query.ids = [];
query.placement_account_id = []; query.placement_account_id = [];
handleSearch(); handleSearch();
}; };
const operators = ref([]);
onMounted(() => { onMounted(() => {
handleSearch(); handleSearch();
getOperators(); getOperators();

View File

@ -53,12 +53,11 @@
<div class="filter-row-item"> <div class="filter-row-item">
<span class="label">时间筛选</span> <span class="label">时间筛选</span>
<DatePicker.RangePicker <DatePicker.RangePicker
v-model:value="query.data_time" v-model="data_time"
size="medium" :allowClear="false"
:allow-clear="false"
format="YYYY-MM-DD" format="YYYY-MM-DD"
class="w-240px" class="w-240px"
@change="handleSearch" @change="onDateChange"
/> />
</div> </div>
<div class="filter-row-item"> <div class="filter-row-item">
@ -80,6 +79,7 @@
</template> </template>
<script setup> <script setup>
import dayjs from 'dayjs';
import { reactive, defineEmits, defineProps } from 'vue'; import { reactive, defineEmits, defineProps } from 'vue';
import { Button, Input, DatePicker } from 'ant-design-vue'; import { Button, Input, DatePicker } from 'ant-design-vue';
import { import {
@ -104,12 +104,21 @@ const props = defineProps({
}); });
const emits = defineEmits(['onSearch', 'onReset', 'update:query']); const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
// // 同步父组件传入的初始值
// watch(
// () => props.query.data_time,
// (newVal) => {
// if (newVal && newVal.length > 0) {
// data_time.value = newVal;
// }
// },
// { immediate: true }
// );
// const tags = ref([]); // const tags = ref([]);
const groups = ref([]); const groups = ref([]);
const operators = ref([]); const operators = ref([]);
const placementAccounts = ref([]); const placementAccounts = ref([]);
// const dataTime = ref([]); const data_time = ref([]);
const handleSearch = () => { const handleSearch = () => {
emits('update:query', props.query); emits('update:query', props.query);
@ -118,7 +127,26 @@ const handleSearch = () => {
}); });
}; };
const onDateChange = (date) => {
// query.data_time = date;
if (!date) {
props.query.data_time = [];
handleSearch();
return;
}
const [start, end] = date;
const FORMAT_DATE = 'YYYY-MM-DD';
props.query.data_time = [
dayjs(start).startOf('day').format(FORMAT_DATE),
dayjs(end).endOf('day').format(FORMAT_DATE),
];
handleSearch();
};
const handleReset = () => { const handleReset = () => {
data_time.value = [];
emits('onReset'); emits('onReset');
}; };
@ -135,6 +163,13 @@ const getOperators = async () => {
} }
}; };
const getYesterdayDays = () => {
const today = new Date();
const last7Days = new Date(today);
last7Days.setDate(today.getDate() - 1);
return [last7Days.toISOString().split('T')[0], today.toISOString().split('T')[0]];
};
const getAccounts = async () => { const getAccounts = async () => {
const { code, data } = await getPlacementAccountsList(); const { code, data } = await getPlacementAccountsList();
if (code === 200) { if (code === 200) {
@ -143,6 +178,9 @@ const getAccounts = async () => {
}; };
onMounted(() => { onMounted(() => {
const defaultTime = getYesterdayDays();
data_time.value = defaultTime;
getGroups(); getGroups();
getOperators(); getOperators();
getAccounts(); getAccounts();

View File

@ -25,7 +25,7 @@
<div class="filter-row flex mb-20px"> <div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">时间筛选</span> <span class="label">时间筛选</span>
<DatePicker.RangePicker v-model:value="query.data_time" size="medium" allowClear format="YYYY-MM-DD" class="w-310" /> <DatePicker.RangePicker v-model="data_time" size="medium" allowClear format="YYYY-MM-DD" class="w-310" @change="onDateChange" />
</div> </div>
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
@ -66,6 +66,9 @@ const props = defineProps({
}, },
}); });
const emits = defineEmits(['onSearch', 'onReset', 'update:query']); const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
const data_time = ref([]);
// 获取最近7天的日期 // 获取最近7天的日期
const getLast7Days = () => { const getLast7Days = () => {
const today = new Date(); const today = new Date();
@ -76,6 +79,19 @@ const getLast7Days = () => {
const handleSearch = () => { const handleSearch = () => {
emits('onSearch', props.query); emits('onSearch', props.query);
}; };
const onDateChange = (date) => {
if (!date) {
props.query.data_time = [];
handleSearch();
return;
}
const [start, end] = date;
const FORMAT_DATE = 'YYYY-MM-DD';
props.query.data_time = [dayjs(start).startOf('day').format(FORMAT_DATE), dayjs(end).endOf('day').format(FORMAT_DATE)];
handleSearch();
};
// 使用 computed 实现 v-model // 使用 computed 实现 v-model
const localQuery = computed({ const localQuery = computed({
get: () => props.query, get: () => props.query,
@ -83,10 +99,14 @@ const localQuery = computed({
}); });
const handleReset = () => { const handleReset = () => {
data_time.value = [];
emits('onReset'); emits('onReset');
}; };
onMounted(() => { onMounted(() => {
localQuery.value.data_time = getLast7Days(); const defaultTime = getLast7Days();
data_time.value = defaultTime;
localQuery.value.data_time = defaultTime;
}); });
</script> </script>