tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 优化访问趋势时间范围计算方式

Browse Source
This commit is contained in:
ray
2024-11-22 12:50:53 +08:00
parent 6abffac858
commit ef73f257b6
1 changed files with 23 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/dashboard/components/VisitTrend.vue
View File

@@ -16,9 +16,9 @@
</el-tooltip> </el-tooltip>
</div> </div>
<el-radio-group v-model="dataRange" size="small" @change="handleDateRangeChange"> <el-radio-group v-model="recentDaysRange" size="small" @change="handleDateRangeChange">
<el-radio-button label="近7天" :value="1" /> <el-radio-button label="近7天" :value="7" />
<el-radio-button label="近30天" :value="2" /> <el-radio-button label="近30天" :value="30" />
</el-radio-group> </el-radio-group>
</div> </div>
</template> </template>
@@ -29,9 +29,12 @@
<script setup lang="ts"> <script setup lang="ts">
import * as echarts from "echarts"; import * as echarts from "echarts";
import LogAPI, { VisitTrendVO, VisitTrendQuery } from "@/api/system/log"; import LogAPI, { VisitTrendVO } from "@/api/system/log";
import { dayjs } from "element-plus";
const dataRange = ref(1); // 日期范围
const recentDaysRange = ref(7);
// 图表对象
const chart: Ref<echarts.ECharts | null> = ref(null); const chart: Ref<echarts.ECharts | null> = ref(null);
const props = defineProps({ const props = defineProps({
@@ -125,46 +128,29 @@ const setChartOptions = (data: VisitTrendVO) => {
chart.value.setOption(options); chart.value.setOption(options);
}; };
/** 计算起止时间范围 */ // 加载数据
const calculateDateRange = () => { const loadData = () => {
const now = new Date(); const endDate = new Date();
const startDate = dayjs()
.subtract(recentDaysRange.value - 1, "day")
.toDate();
const endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const visitTrendQuery = {
startDate: dayjs(startDate).format("YYYY-MM-DD"),
const days = dataRange.value === 1 ? 7 : 30; endDate: dayjs(endDate).format("YYYY-MM-DD"),
const startDate = new Date(endDate);
startDate.setDate(startDate.getDate() - days);
// 手动调整日期为当地时间的 23:59:59
const adjustDateToLocal = (date: Date) => {
date.setHours(23, 59, 59, 999);
return date;
}; };
const adjustedEndDate = adjustDateToLocal(new Date(endDate)); LogAPI.getVisitTrend(visitTrendQuery).then((data) => {
const adjustedStartDate = adjustDateToLocal(new Date(startDate));
const formattedStartDate = adjustedStartDate.toISOString().split("T")[0];
const formattedEndDate = adjustedEndDate.toISOString().split("T")[0];
return { startDate: formattedStartDate, endDate: formattedEndDate };
};
/** 加载数据 */
const loadData = () => {
const { startDate, endDate } = calculateDateRange();
LogAPI.getVisitTrend({
startDate,
endDate,
} as VisitTrendQuery).then((data) => {
setChartOptions(data); setChartOptions(data);
}); });
}; };
// 日期范围变化
const handleDateRangeChange = () => { const handleDateRangeChange = () => {
loadData(); loadData();
}; };
/** 下载图表 */ // 下载图表
const handleDownloadChart = () => { const handleDownloadChart = () => {
if (!chart.value) { if (!chart.value) {
return; return;
@@ -195,7 +181,7 @@ const handleDownloadChart = () => {
}; };
}; };
/** 窗口大小变化时，重置图表大小 */ // 窗口大小变化时，重置图表大小
const handleResize = () => { const handleResize = () => {
setTimeout(() => { setTimeout(() => {
if (chart.value) { if (chart.value) {
@@ -203,7 +189,8 @@ const handleResize = () => {
} }
}, 100); }, 100);
}; };
/** 初始化图表 */
// 初始化图表
onMounted(() => { onMounted(() => {
chart.value = markRaw(echarts.init(document.getElementById(props.id) as HTMLDivElement)); chart.value = markRaw(echarts.init(document.getElementById(props.id) as HTMLDivElement));
loadData(); loadData();