From 83327ea763ebb233bb540513276ffa288fbcb4a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=87=AF=E9=BE=99?= <502431556@qq.com> Date: Mon, 24 Jan 2022 09:43:27 +0800 Subject: [PATCH] feat: Add analysis api --- mock/analysis/index.ts | 63 +++++++++++++++ src/api/dashboard/analysis/index.ts | 20 ++++- src/api/dashboard/analysis/types.ts | 16 ++++ src/components/Highlight/src/Highlight.vue | 2 +- src/hooks/web/useAxios.ts | 2 +- src/locales/en.ts | 2 +- src/views/Dashboard/Analysis.vue | 92 ++++++++++++++++++++-- 7 files changed, 188 insertions(+), 9 deletions(-) diff --git a/mock/analysis/index.ts b/mock/analysis/index.ts index fcf7040..673e678 100644 --- a/mock/analysis/index.ts +++ b/mock/analysis/index.ts @@ -22,5 +22,68 @@ export default [ } } } + }, + // 用户来源 + { + url: '/analysis/userAccessSource', + method: 'get', + timeout, + response: () => { + return { + code: result_code, + data: [ + { value: 335, name: 'analysis.directAccess' }, + { value: 310, name: 'analysis.mailMarketing' }, + { value: 234, name: 'analysis.allianceAdvertising' }, + { value: 135, name: 'analysis.videoAdvertising' }, + { value: 1548, name: 'analysis.searchEngines' } + ] + } + } + }, + // 每周用户活跃量 + { + url: '/analysis/weeklyUserActivity', + method: 'get', + timeout, + response: () => { + return { + code: result_code, + data: [ + { value: 13253, name: 'analysis.monday' }, + { value: 34235, name: 'analysis.tuesday' }, + { value: 26321, name: 'analysis.wednesday' }, + { value: 12340, name: 'analysis.thursday' }, + { value: 24643, name: 'analysis.friday' }, + { value: 1322, name: 'analysis.saturday' }, + { value: 1324, name: 'analysis.sunday' } + ] + } + } + }, + // 每月销售额 + { + url: '/analysis/monthlySales', + method: 'get', + timeout, + response: () => { + return { + code: result_code, + data: [ + { estimate: 100, actual: 120, name: 'analysis.january' }, + { estimate: 120, actual: 82, name: 'analysis.february' }, + { estimate: 161, actual: 91, name: 'analysis.march' }, + { estimate: 134, actual: 154, name: 'analysis.april' }, + { estimate: 105, actual: 162, name: 'analysis.may' }, + { estimate: 160, actual: 140, name: 'analysis.june' }, + { estimate: 165, actual: 145, name: 'analysis.july' }, + { estimate: 114, actual: 250, name: 'analysis.august' }, + { estimate: 163, actual: 134, name: 'analysis.september' }, + { estimate: 185, actual: 56, name: 'analysis.october' }, + { estimate: 118, actual: 99, name: 'analysis.november' }, + { estimate: 123, actual: 123, name: 'analysis.december' } + ] + } + } } ] as MockMethod[] diff --git a/src/api/dashboard/analysis/index.ts b/src/api/dashboard/analysis/index.ts index e14d0d0..e542766 100644 --- a/src/api/dashboard/analysis/index.ts +++ b/src/api/dashboard/analysis/index.ts @@ -1,7 +1,25 @@ import { useAxios } from '@/hooks/web/useAxios' +import type { + AnalysisTotalTypes, + UserAccessSource, + WeeklyUserActivity, + MonthlySales +} from './types' const { request } = useAxios() export const getCountApi = () => { - return request({ url: '/analysis/total', method: 'get' }) + return request({ url: '/analysis/total', method: 'get' }) +} + +export const getUserAccessSourceApi = () => { + return request({ url: '/analysis/userAccessSource', method: 'get' }) +} + +export const getWeeklyUserActivityApi = () => { + return request({ url: '/analysis/weeklyUserActivity', method: 'get' }) +} + +export const getMonthlySalesApi = () => { + return request({ url: '/analysis/monthlySales', method: 'get' }) } diff --git a/src/api/dashboard/analysis/types.ts b/src/api/dashboard/analysis/types.ts index 76a7fee..4a239f5 100644 --- a/src/api/dashboard/analysis/types.ts +++ b/src/api/dashboard/analysis/types.ts @@ -4,3 +4,19 @@ export type AnalysisTotalTypes = { moneys: number shoppings: number } + +export type UserAccessSource = { + value: number + name: string +} + +export type WeeklyUserActivity = { + value: number + name: string +} + +export type MonthlySales = { + name: string + estimate: number + actual: number +} diff --git a/src/components/Highlight/src/Highlight.vue b/src/components/Highlight/src/Highlight.vue index 0e820f3..ef923a9 100644 --- a/src/components/Highlight/src/Highlight.vue +++ b/src/components/Highlight/src/Highlight.vue @@ -52,7 +52,7 @@ export default defineComponent({ const regexp = /^[0-9]*$/ const nodes = textArray.map((t) => { if (regexp.test(t)) { - return unref(keyNodes)[Math.floor(Number(t))] || t + return unref(keyNodes)[t] || t } return t }) diff --git a/src/hooks/web/useAxios.ts b/src/hooks/web/useAxios.ts index 0afae36..a415bcf 100644 --- a/src/hooks/web/useAxios.ts +++ b/src/hooks/web/useAxios.ts @@ -7,7 +7,7 @@ import { config } from '@/config/axios/config' const { default_headers } = config export const useAxios = () => { - const request = (option: AxiosConfig): AxiosPromise => { + const request = (option: AxiosConfig): AxiosPromise => { const { url, method, params, data, headersType, responseType } = option return service({ url: url, diff --git a/src/locales/en.ts b/src/locales/en.ts index 4c60924..6f66798 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -130,7 +130,7 @@ export default { yield: 'Yield', dynamic: 'Dynamic', push: 'push', - pushCode: 'Archer push code to GitHub' + pushCode: 'Archer push code to Github' }, formDemo: { input: 'Input', diff --git a/src/views/Dashboard/Analysis.vue b/src/views/Dashboard/Analysis.vue index a0f2eb8..29846ed 100644 --- a/src/views/Dashboard/Analysis.vue +++ b/src/views/Dashboard/Analysis.vue @@ -3,13 +3,95 @@ import PanelGroup from './components/PanelGroup.vue' import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus' import { Echart } from '@/components/Echart' import { pieOptions, barOptions, lineOptions } from './echarts-data' -import { ref } from 'vue' +import { ref, reactive } from 'vue' +import { + getUserAccessSourceApi, + getWeeklyUserActivityApi, + getMonthlySalesApi +} from '@/api/dashboard/analysis' +import { set } from 'lodash-es' +import { EChartsOption } from 'echarts' +import { useI18n } from '@/hooks/web/useI18n' + +const { t } = useI18n() const loading = ref(true) -setTimeout(() => { +const pieOptionsData = reactive(pieOptions) + +// 用户来源 +const getUserAccessSource = async () => { + const res = await getUserAccessSourceApi().catch(() => {}) + if (res) { + set( + pieOptionsData, + 'legend.data', + res.data.map((v) => t(v.name)) + ) + set(pieOptionsData, 'series.data', res.data) + } +} + +const barOptionsData = reactive(barOptions) as EChartsOption + +// 周活跃量 +const getWeeklyUserActivity = async () => { + const res = await getWeeklyUserActivityApi().catch(() => {}) + if (res) { + set( + barOptionsData, + 'xAxis.data', + res.data.map((v) => t(v.name)) + ) + set(barOptionsData, 'series', [ + { + name: t('analysis.activeQuantity'), + data: res.data.map((v) => v.value), + type: 'bar' + } + ]) + } +} + +const lineOptionsData = reactive(lineOptions) as EChartsOption + +// 每月销售总额 +const getMonthlySales = async () => { + const res = await getMonthlySalesApi().catch(() => {}) + if (res) { + set( + lineOptionsData, + 'xAxis.data', + res.data.map((v) => t(v.name)) + ) + set(lineOptionsData, 'series', [ + { + name: t('analysis.estimate'), + smooth: true, + type: 'line', + data: res.data.map((v) => v.estimate), + animationDuration: 2800, + animationEasing: 'cubicInOut' + }, + { + name: t('analysis.actual'), + smooth: true, + type: 'line', + itemStyle: {}, + data: res.data.map((v) => v.actual), + animationDuration: 2800, + animationEasing: 'quadraticOut' + } + ]) + } +} + +const getAllApi = async () => { + await Promise.all([getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()]) loading.value = false -}, 1000) +} + +getAllApi()