From cb558f8af9dfef2ba2879f021db395ee79e8c8d4 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 14:27:05 +0800 Subject: [PATCH] feat: Add workplace api --- mock/workplace/index.ts | 172 ++++++++++++++++++++ src/api/dashboard/workplace/index.ts | 24 +++ src/api/dashboard/workplace/types.ts | 30 ++++ src/locales/en.ts | 3 +- src/locales/zh-CN.ts | 3 +- src/views/Dashboard/Workplace.vue | 228 +++++++++++++-------------- src/views/Dashboard/echarts-data.ts | 7 +- 7 files changed, 344 insertions(+), 123 deletions(-) create mode 100644 mock/workplace/index.ts create mode 100644 src/api/dashboard/workplace/index.ts create mode 100644 src/api/dashboard/workplace/types.ts diff --git a/mock/workplace/index.ts b/mock/workplace/index.ts new file mode 100644 index 000000000..3274a4c1a --- /dev/null +++ b/mock/workplace/index.ts @@ -0,0 +1,172 @@ +import { config } from '@/config/axios/config' +import { MockMethod } from 'vite-plugin-mock' + +const { result_code } = config + +const timeout = 1000 + +export default [ + // 获取统计 + { + url: '/workplace/total', + method: 'get', + timeout, + response: () => { + return { + code: result_code, + data: { + project: 40, + access: 2340, + todo: 10 + } + } + } + }, + // 获取项目 + { + url: '/workplace/project', + method: 'get', + timeout, + response: () => { + return { + code: result_code, + data: [ + { + name: 'Github', + icon: 'akar-icons:github-fill', + message: 'workplace.introduction', + personal: 'Archer', + time: new Date() + }, + { + name: 'Vue', + icon: 'logos:vue', + message: 'workplace.introduction', + personal: 'Archer', + time: new Date() + }, + { + name: 'Angular', + icon: 'logos:angular-icon', + message: 'workplace.introduction', + personal: 'Archer', + time: new Date() + }, + { + name: 'React', + icon: 'logos:react', + message: 'workplace.introduction', + personal: 'Archer', + time: new Date() + }, + { + name: 'Webpack', + icon: 'logos:webpack', + message: 'workplace.introduction', + personal: 'Archer', + time: new Date() + }, + { + name: 'Vite', + icon: 'vscode-icons:file-type-vite', + message: 'workplace.introduction', + personal: 'Archer', + time: new Date() + } + ] + } + } + }, + // 获取动态 + { + url: '/workplace/dynamic', + method: 'get', + timeout, + response: () => { + return { + code: result_code, + data: [ + { + keys: ['workplace.push', 'Github'], + time: new Date() + }, + { + keys: ['workplace.push', 'Github'], + time: new Date() + }, + { + keys: ['workplace.push', 'Github'], + time: new Date() + }, + { + keys: ['workplace.push', 'Github'], + time: new Date() + }, + { + keys: ['workplace.push', 'Github'], + time: new Date() + }, + { + keys: ['workplace.push', 'Github'], + time: new Date() + } + ] + } + } + }, + // 获取团队信息 + { + url: '/workplace/team', + method: 'get', + timeout, + response: () => { + return { + code: result_code, + data: [ + { + name: 'Github', + icon: 'akar-icons:github-fill' + }, + { + name: 'Vue', + icon: 'logos:vue' + }, + { + name: 'Angular', + icon: 'logos:angular-icon' + }, + { + name: 'React', + icon: 'logos:react' + }, + { + name: 'Webpack', + icon: 'logos:webpack' + }, + { + name: 'Vite', + icon: 'vscode-icons:file-type-vite' + } + ] + } + } + }, + // 获取指数 + { + url: '/workplace/radar', + method: 'get', + timeout, + response: () => { + return { + code: result_code, + data: [ + { name: 'workplace.quote', max: 65, personal: 42, team: 50 }, + { name: 'workplace.contribution', max: 160, personal: 30, team: 140 }, + { name: 'workplace.hot', max: 300, personal: 20, team: 28 }, + { name: 'workplace.yield', max: 130, personal: 35, team: 35 }, + { name: 'workplace.follow', max: 100, personal: 80, team: 90 } + ] + } + } + } +] as MockMethod[] diff --git a/src/api/dashboard/workplace/index.ts b/src/api/dashboard/workplace/index.ts new file mode 100644 index 000000000..0a48f3fac --- /dev/null +++ b/src/api/dashboard/workplace/index.ts @@ -0,0 +1,24 @@ +import { useAxios } from '@/hooks/web/useAxios' +import type { WorkplaceTotal, Project, Dynamic, Team, RadarData } from './types' + +const { request } = useAxios() + +export const getCountApi = () => { + return request({ url: '/workplace/total', method: 'get' }) +} + +export const getProjectApi = () => { + return request({ url: '/workplace/project', method: 'get' }) +} + +export const getDynamicApi = () => { + return request({ url: '/workplace/dynamic', method: 'get' }) +} + +export const getTeamApi = () => { + return request({ url: '/workplace/team', method: 'get' }) +} + +export const getRadarApi = () => { + return request({ url: '/workplace/radar', method: 'get' }) +} diff --git a/src/api/dashboard/workplace/types.ts b/src/api/dashboard/workplace/types.ts new file mode 100644 index 000000000..da23e7434 --- /dev/null +++ b/src/api/dashboard/workplace/types.ts @@ -0,0 +1,30 @@ +export type WorkplaceTotal = { + project: number + access: number + todo: number +} + +export type Project = { + name: string + icon: string + message: string + personal: string + time: Date | number | string +} + +export type Dynamic = { + keys: string[] + time: Date | number | string +} + +export type Team = { + name: string + icon: string +} + +export type RadarData = { + personal: number + team: number + max: number + name: string +} diff --git a/src/locales/en.ts b/src/locales/en.ts index 6f6679864..89ecea445 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -130,7 +130,8 @@ export default { yield: 'Yield', dynamic: 'Dynamic', push: 'push', - pushCode: 'Archer push code to Github' + pushCode: 'Archer push code to Github', + follow: 'Follow' }, formDemo: { input: 'Input', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index a2f346474..713aa4beb 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -130,7 +130,8 @@ export default { yield: '产量', dynamic: '动态', push: '推送', - pushCode: 'Archer 推送 代码到 Github' + pushCode: 'Archer 推送 代码到 Github', + follow: '关注' }, formDemo: { input: '输入框', diff --git a/src/views/Dashboard/Workplace.vue b/src/views/Dashboard/Workplace.vue index 0d47968fe..db300ed6b 100644 --- a/src/views/Dashboard/Workplace.vue +++ b/src/views/Dashboard/Workplace.vue @@ -2,137 +2,112 @@ import { useTimeAgo } from '@/hooks/web/useTimeAgo' import { ElRow, ElCol, ElSkeleton, ElCard, ElDivider, ElLink } from 'element-plus' import { useI18n } from '@/hooks/web/useI18n' -import { ref } from 'vue' +import { ref, reactive } from 'vue' import { CountTo } from '@/components/CountTo' import { formatTime } from '@/utils' import { Echart } from '@/components/Echart' +import { EChartsOption } from 'echarts' import { radarOption } from './echarts-data' import { Highlight } from '@/components/Highlight' +import { + getCountApi, + getProjectApi, + getDynamicApi, + getTeamApi, + getRadarApi +} from '@/api/dashboard/workplace' +import type { WorkplaceTotal, Project, Dynamic, Team } from '@/api/dashboard/workplace/types' +import { set } from 'lodash-es' -interface Project { - name: string - icon: string - message: string - personal: string - time: Date | number | string -} +const loading = ref(true) -interface Dynamic { - keys: string[] - time: Date | number | string -} +// 获取统计数 +let totalSate = reactive({ + project: 0, + access: 0, + todo: 0 +}) -interface Team { - name: string - icon: string +const getCount = async () => { + const res = await getCountApi().catch(() => {}) + if (res) { + totalSate = Object.assign(totalSate, res.data) + } } -const { t } = useI18n() +let projects = reactive([]) -const projects: Project[] = [ - { - name: 'Github', - icon: 'akar-icons:github-fill', - message: t('workplace.introduction'), - personal: 'Archer', - time: new Date() - }, - { - name: 'Vue', - icon: 'logos:vue', - message: t('workplace.introduction'), - personal: 'Archer', - time: new Date() - }, - { - name: 'Angular', - icon: 'logos:angular-icon', - message: t('workplace.introduction'), - personal: 'Archer', - time: new Date() - }, - { - name: 'React', - icon: 'logos:react', - message: t('workplace.introduction'), - personal: 'Archer', - time: new Date() - }, - { - name: 'Webpack', - icon: 'logos:webpack', - message: t('workplace.introduction'), - personal: 'Archer', - time: new Date() - }, - { - name: 'Vite', - icon: 'vscode-icons:file-type-vite', - message: t('workplace.introduction'), - personal: 'Archer', - time: new Date() +// 获取项目数 +const getProject = async () => { + const res = await getProjectApi().catch(() => {}) + if (res) { + projects = Object.assign(projects, res.data) } -] +} + +// 获取动态 +let dynamics = reactive([]) -const dynamics: Dynamic[] = [ - { - keys: [t('workplace.push'), 'Github'], - time: new Date() - }, - { - keys: [t('workplace.push'), 'Github'], - time: new Date() - }, - { - keys: [t('workplace.push'), 'Github'], - time: new Date() - }, - { - keys: [t('workplace.push'), 'Github'], - time: new Date() - }, - { - keys: [t('workplace.push'), 'Github'], - time: new Date() - }, - { - keys: [t('workplace.push'), 'Github'], - time: new Date() +const getDynamic = async () => { + const res = await getDynamicApi().catch(() => {}) + if (res) { + dynamics = Object.assign(dynamics, res.data) } -] +} + +// 获取团队 +let team = reactive([]) -const team: Team[] = [ - { - name: 'Github', - icon: 'akar-icons:github-fill' - }, - { - name: 'Vue', - icon: 'logos:vue' - }, - { - name: 'Angular', - icon: 'logos:angular-icon' - }, - { - name: 'React', - icon: 'logos:react' - }, - { - name: 'Webpack', - icon: 'logos:webpack' - }, - { - name: 'Vite', - icon: 'vscode-icons:file-type-vite' +const getTeam = async () => { + const res = await getTeamApi().catch(() => {}) + if (res) { + team = Object.assign(team, res.data) } -] +} -const loading = ref(true) +// 获取指数 +let radarOptionData = reactive(radarOption) as EChartsOption + +const getRadar = async () => { + const res = await getRadarApi().catch(() => {}) + if (res) { + set( + radarOptionData, + 'radar.indicator', + res.data.map((v) => { + return { + name: t(v.name), + max: v.max + } + }) + ) + set(radarOptionData, 'series', [ + { + name: `xxx${t('workplace.index')}`, + type: 'radar', + data: [ + { + value: res.data.map((v) => v.personal), + name: t('workplace.personal') + }, + { + value: res.data.map((v) => v.team), + name: t('workplace.team') + } + ] + } + ]) + } +} -setTimeout(() => { +const getAllApi = async () => { + await Promise.all([getCount(), getProject(), getDynamic(), getTeam(), getRadar()]) loading.value = false -}, 1000) +} + +getAllApi() + +const { t } = useI18n()