diff --git a/src/api/stats.ts b/src/api/stats.ts new file mode 100644 index 00000000..cfaf39ac --- /dev/null +++ b/src/api/stats.ts @@ -0,0 +1,35 @@ +import request from "@/utils/request"; + +const STATS_BASE_URL = "/api/v1/stats"; + +class StatsAPI { + static getVisitTrend(queryParams: VisitTrendQuery) { + return request({ + url: `${STATS_BASE_URL}/visit-trend`, + method: "get", + params: queryParams, + }); + } +} + +export default StatsAPI; + +/** 访问趋势视图对象 */ +export interface VisitTrendVO { + /** 日期列表 */ + dates: string[]; + /** 浏览量(PV) */ + pvList: number[]; + /** 访客数(UV) */ + uvList: number[]; + /** IP数 */ + ipList: number[]; +} + +/** 访问趋势查询参数 */ +export interface VisitTrendQuery { + /** 开始日期 */ + startDate: string; + /** 结束日期 */ + endDate: string; +} diff --git a/src/assets/icons/ip.svg b/src/assets/icons/ip.svg index a50d9bb5..fd6108f8 100644 --- a/src/assets/icons/ip.svg +++ b/src/assets/icons/ip.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/icons/money.svg b/src/assets/icons/money.svg deleted file mode 100644 index db7a2b46..00000000 --- a/src/assets/icons/money.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/icons/order.svg b/src/assets/icons/order.svg deleted file mode 100644 index 7ba029e5..00000000 --- a/src/assets/icons/order.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/icons/pv.svg b/src/assets/icons/pv.svg new file mode 100644 index 00000000..8b077897 --- /dev/null +++ b/src/assets/icons/pv.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/uv.svg b/src/assets/icons/uv.svg new file mode 100644 index 00000000..c5be7ebd --- /dev/null +++ b/src/assets/icons/uv.svg @@ -0,0 +1 @@ + diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 03f1fe22..8c0b868d 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -9,7 +9,7 @@ declare module "vue" { export interface GlobalComponents { AppLink: (typeof import("./../components/AppLink/index.vue"))["default"]; AppMain: (typeof import("./../layout/components/AppMain/index.vue"))["default"]; - BarChart: (typeof import("./../views/dashboard/components/BarChart.vue"))["default"]; + VisitTrend: (typeof import("./../views/dashboard/components/VisitTrend.vue"))["default"]; Breadcrumb: (typeof import("./../components/Breadcrumb/index.vue"))["default"]; CURD: (typeof import("./../components/CURD/index.vue"))["default"]; DeptTree: (typeof import("./../views/system/user/components/dept-tree.vue"))["default"]; diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue deleted file mode 100644 index 9e1b67dc..00000000 --- a/src/views/dashboard/components/BarChart.vue +++ /dev/null @@ -1,202 +0,0 @@ - - - - - diff --git a/src/views/dashboard/components/FunnelChart.vue b/src/views/dashboard/components/FunnelChart.vue deleted file mode 100644 index d29293ca..00000000 --- a/src/views/dashboard/components/FunnelChart.vue +++ /dev/null @@ -1,115 +0,0 @@ - - - - diff --git a/src/views/dashboard/components/PieChart.vue b/src/views/dashboard/components/PieChart.vue deleted file mode 100644 index ac011fb9..00000000 --- a/src/views/dashboard/components/PieChart.vue +++ /dev/null @@ -1,89 +0,0 @@ - - - - diff --git a/src/views/dashboard/components/RadarChart.vue b/src/views/dashboard/components/RadarChart.vue deleted file mode 100644 index aca9ac8b..00000000 --- a/src/views/dashboard/components/RadarChart.vue +++ /dev/null @@ -1,109 +0,0 @@ - - - - diff --git a/src/views/dashboard/components/VisitTrend.vue b/src/views/dashboard/components/VisitTrend.vue new file mode 100644 index 00000000..3240f509 --- /dev/null +++ b/src/views/dashboard/components/VisitTrend.vue @@ -0,0 +1,210 @@ + + + + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index ad0ef472..cfd9cd29 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -41,7 +41,7 @@ - + {{ item.title }} - + {{ item.tagText }} @@ -72,29 +72,16 @@ class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]" > {{ item.dataDesc }} - {{ Math.round(item.count * 15) }} + {{ item.totalCount }} - - - + + + @@ -130,37 +117,37 @@ const greetings = computed(() => { const duration = 5000; -// 销售额 -const amount = ref(0); -const amountOutput = useTransition(amount, { +// 在线用户数 +const onlineUserCount = ref(0); +const onlineUserCountOutput = useTransition(onlineUserCount, { duration: duration, transition: TransitionPresets.easeOutExpo, }); -amount.value = 2000; +onlineUserCount.value = 1; + +// 浏览量 +const pvCount = ref(0); +const pvCountOutput = useTransition(pvCount, { + duration: duration, + transition: TransitionPresets.easeOutExpo, +}); +pvCount.value = 2000; // 访客数 -const visitCount = ref(0); -const visitCountOutput = useTransition(visitCount, { +const uvCount = ref(0); +const uvCountOutput = useTransition(uvCount, { duration: duration, transition: TransitionPresets.easeOutExpo, }); -visitCount.value = 2000; +uvCount.value = 2000; // IP数 -const dauCount = ref(0); -const dauCountOutput = useTransition(dauCount, { +const ipCount = ref(0); +const ipCountOutput = useTransition(ipCount, { duration: duration, transition: TransitionPresets.easeOutExpo, }); -dauCount.value = 2000; - -// 订单量 -const orderCount = ref(0); -const orderCountOutput = useTransition(orderCount, { - duration: duration, - transition: TransitionPresets.easeOutExpo, -}); -orderCount.value = 2000; +ipCount.value = 2000; // 右上角数量 const statisticData = ref([ @@ -194,49 +181,65 @@ interface CardProp { >; tagText: string; count: any; + totalCount: any; dataDesc: string; iconClass: string; } // 卡片数量 const cardData = ref([ { - title: "访客数", + title: "在线用户", tagType: "success", - tagText: "日", - count: visitCountOutput, - dataDesc: "总访客数", + tagText: "-", + count: onlineUserCountOutput, + totalCount: "3", + dataDesc: "总用户数", iconClass: "visit", }, + { + title: "浏览量(PV)", + tagType: "primary", + tagText: "日", + count: pvCountOutput, + totalCount: 3000, + dataDesc: "总浏览量", + iconClass: "pv", + }, + { + title: "访客数(UV)", + tagType: "danger", + tagText: "日", + count: uvCountOutput, + totalCount: 3000, + dataDesc: "总访客数", + iconClass: "uv", + }, { title: "IP数", tagType: "success", tagText: "日", - count: dauCountOutput, + count: ipCountOutput, + totalCount: 3000, dataDesc: "总IP数", iconClass: "ip", }, +]); + +// 通知公告数据 +const notices = ref([ { - title: "销售额", - tagType: "primary", - tagText: "月", - count: amountOutput, - dataDesc: "总IP数", - iconClass: "money", + title: "系统更新", + content: "系统将于今晚22:00进行更新，请提前保存好工作。", }, { - title: "订单量", - tagType: "danger", - tagText: "季", - count: orderCountOutput, - dataDesc: "总订单量", - iconClass: "order", + title: "假期通知", + content: "国庆假期将于10月1日开始，请提前做好工作安排。", + }, + { + title: "紧急通知", + content: "请所有员工注意，明天将进行紧急疏散演练。", }, ]); -// 图表数据 -const chartData = ref(["BarChart", "PieChart", "RadarChart"]); -const chartComponent = (item: string) => { - return defineAsyncComponent(() => import(`./components/${item}.vue`)); -};