kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add workplace api

This commit is contained in:
陈凯龙 2022-01-24 14:27:05 +08:00
parent 83327ea763
commit cb558f8af9
7 changed files with 354 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
mock/workplace/index.ts Normal file
View File

@ -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[]

24
src/api/dashboard/workplace/index.ts Normal file
View File

@ -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<WorkplaceTotal>({ url: '/workplace/total', method: 'get' })
}
export const getProjectApi = () => {
return request<Project[]>({ url: '/workplace/project', method: 'get' })
}
export const getDynamicApi = () => {
return request<Dynamic[]>({ url: '/workplace/dynamic', method: 'get' })
}
export const getTeamApi = () => {
return request<Team[]>({ url: '/workplace/team', method: 'get' })
}
export const getRadarApi = () => {
return request<RadarData[]>({ url: '/workplace/radar', method: 'get' })
}

30
src/api/dashboard/workplace/types.ts Normal file
View File

@ -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
}

3
src/locales/en.ts
View File

@ -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',

3
src/locales/zh-CN.ts
View File

@ -130,7 +130,8 @@ export default {
yield: '产量',
dynamic: '动态',
push: '推送',
pushCode: 'Archer 推送 代码到 Github'
pushCode: 'Archer 推送 代码到 Github',
follow: '关注'
},
formDemo: {
input: '输入框',

248
src/views/Dashboard/Workplace.vue
View File

@ -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'
interface Project {
name: string
icon: string
message: string
personal: string
time: Date | number | string
}
interface Dynamic {
keys: string[]
time: Date | number | string
}
interface Team {
name: string
icon: string
}
const { t } = useI18n()
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 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 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'
}
]
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'
const loading = ref(true)
setTimeout(() => {
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
project: 0,
access: 0,
todo: 0
})
const getCount = async () => {
const res = await getCountApi().catch(() => {})
if (res) {
totalSate = Object.assign(totalSate, res.data)
}
}
let projects = reactive<Project[]>([])
// 获取项目数
const getProject = async () => {
const res = await getProjectApi().catch(() => {})
if (res) {
projects = Object.assign(projects, res.data)
}
}
// 获取动态
let dynamics = reactive<Dynamic[]>([])
const getDynamic = async () => {
const res = await getDynamicApi().catch(() => {})
if (res) {
dynamics = Object.assign(dynamics, res.data)
}
}
// 获取团队
let team = reactive<Team[]>([])
const getTeam = async () => {
const res = await getTeamApi().catch(() => {})
if (res) {
team = Object.assign(team, res.data)
}
}
// 获取指数
let radarOptionData = reactive<EChartsOption>(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')
}
]
}
])
}
}
const getAllApi = async () => {
await Promise.all([getCount(), getProject(), getDynamic(), getTeam(), getRadar()])
loading.value = false
}, 1000)
}
getAllApi()
const { t } = useI18n()
</script>
<template>
@ -161,17 +136,32 @@ setTimeout(() => {
<div class="flex h-70px items-center justify-end <sm:mt-20px">
<div class="px-8px text-right">
<div class="text-14px text-gray-400 mb-20px">{{ t('workplace.project') }}</div>
<CountTo class="text-20px" :start-val="0" :end-val="40" :duration="2600" />
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.project"
:duration="2600"
/>
</div>
<ElDivider direction="vertical" />
<div class="px-8px text-right">
<div class="text-14px text-gray-400 mb-20px">{{ t('workplace.toDo') }}</div>
<CountTo class="text-20px" :start-val="0" :end-val="10" :duration="2600" />
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.todo"
:duration="2600"
/>
</div>
<ElDivider direction="vertical" border-style="dashed" />
<div class="px-8px text-right">
<div class="text-14px text-gray-400 mb-20px">{{ t('workplace.access') }}</div>
<CountTo class="text-20px" :start-val="0" :end-val="2340" :duration="2600" />
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.access"
:duration="2600"
/>
</div>
</div>
</ElCol>
@ -205,7 +195,7 @@ setTimeout(() => {
<Icon :icon="item.icon" :size="25" class="mr-10px" />
<span class="text-16px">{{ item.name }}</span>
</div>
<div class="mt-15px text-14px text-gray-400">{{ item.message }}</div>
<div class="mt-15px text-14px text-gray-400">{{ t(item.message) }}</div>
<div class="mt-20px text-12px text-gray-400 flex justify-between">
<span>{{ item.personal }}</span>
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
@ -233,7 +223,9 @@ setTimeout(() => {
/>
<div>
<div class="text-14px">
<Highlight :keys="item.keys"> {{ t('workplace.pushCode') }} </Highlight>
<Highlight :keys="item.keys.map((v) => t(v))">
{{ t('workplace.pushCode') }}
</Highlight>
</div>
<div class="mt-15px text-12px text-gray-400">
{{ useTimeAgo(item.time) }}
@ -273,7 +265,7 @@ setTimeout(() => {
<template #header>
<span>xx{{ t('workplace.index') }}</span>
</template>
<Echart :options="radarOption" :height="400" />
<Echart :options="radarOptionData" :height="400" />
</ElCard>
</ElSkeleton>

7
src/views/Dashboard/echarts-data.ts
View File

@ -162,7 +162,8 @@ export const radarOption: EChartsOption = {
{ name: t('workplace.quote'), max: 65 },
{ name: t('workplace.contribution'), max: 160 },
{ name: t('workplace.hot'), max: 300 },
{ name: t('workplace.yield'), max: 130 }
{ name: t('workplace.yield'), max: 130 },
{ name: t('workplace.follow'), max: 100 }
]
},
series: [
@ -171,11 +172,11 @@ export const radarOption: EChartsOption = {
type: 'radar',
data: [
{
value: [42, 30, 20, 35],
value: [42, 30, 20, 35, 80],
name: t('workplace.personal')
},
{
value: [50, 140, 28, 35],
value: [50, 140, 28, 35, 90],
name: t('workplace.team')
}
]