|
@@ -1,384 +1,192 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <el-card shadow="never">
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <el-row :gutter="16" justify="space-between">
|
|
|
- <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
- <div class="flex items-center">
|
|
|
- <!-- <el-avatar :src="avatar" :size="70" class="mr-16px">
|
|
|
- <img src="@/assets/imgs/avatar.gif" alt="" />
|
|
|
- </el-avatar> -->
|
|
|
- <div>
|
|
|
- <div class="text-20px">
|
|
|
- {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
|
|
|
- </div>
|
|
|
- <!-- <div class="mt-10px text-14px text-gray-500">
|
|
|
- {{ t('workplace.toady') }},20℃ - 32℃!
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
- <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
|
|
|
- <div class="px-8px text-right">
|
|
|
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.project') }}</div>
|
|
|
- <CountTo
|
|
|
- class="text-20px"
|
|
|
- :start-val="0"
|
|
|
- :end-val="totalSate.project"
|
|
|
- :duration="2600"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical" />
|
|
|
- <div class="px-8px text-right">
|
|
|
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
|
|
|
- <CountTo
|
|
|
- class="text-20px"
|
|
|
- :start-val="0"
|
|
|
- :end-val="totalSate.todo"
|
|
|
- :duration="2600"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical" border-style="dashed" />
|
|
|
- <div class="px-8px text-right">
|
|
|
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.access') }}</div>
|
|
|
- <CountTo
|
|
|
- class="text-20px"
|
|
|
- :start-val="0"
|
|
|
- :end-val="totalSate.access"
|
|
|
- :duration="2600"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-skeleton>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
+ <ContentWrap>
|
|
|
+ <!-- 搜索工作栏 -->
|
|
|
+ <el-form
|
|
|
+ class="-mb-15px"
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryFormRef"
|
|
|
+ :inline="true"
|
|
|
+ >
|
|
|
+ <el-form-item label="" prop="type">
|
|
|
+ <el-radio-group v-model="queryParams.type" @change="typeChange" class="!w-300px">
|
|
|
+ <!-- <el-radio-button label="全部" value="-1" /> -->
|
|
|
+ <el-radio-button label="每天" value="3" />
|
|
|
+ <el-radio-button label="每周" value="0" />
|
|
|
+ <el-radio-button label="每月" value="4" />
|
|
|
+ <el-radio-button label="每年" value="5" />
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="time">
|
|
|
+ <span class="mr-3">自定义日期</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.time"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="daterange"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
|
+ class="!w-240px"
|
|
|
+ @change="timeRangeChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
|
+ <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </ContentWrap>
|
|
|
|
|
|
- <el-row class="mt-8px" :gutter="8" justify="space-between">
|
|
|
- <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
|
|
|
- <!-- <el-card shadow="never">
|
|
|
- <template #header>
|
|
|
- <div class="h-3 flex justify-between">
|
|
|
- <span>{{ t('workplace.project') }}</span>
|
|
|
- <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <el-row>
|
|
|
- <el-col
|
|
|
- v-for="(item, index) in projects"
|
|
|
- :key="`card-${index}`"
|
|
|
- :xl="8"
|
|
|
- :lg="8"
|
|
|
- :md="8"
|
|
|
- :sm="24"
|
|
|
- :xs="24"
|
|
|
- >
|
|
|
- <el-card shadow="hover">
|
|
|
- <div class="flex items-center">
|
|
|
- <Icon :icon="item.icon" :size="25" class="mr-8px" />
|
|
|
- <span class="text-16px">{{ item.name }}</span>
|
|
|
- </div>
|
|
|
- <div class="mt-16px text-14px text-gray-400">{{ t(item.message) }}</div>
|
|
|
- <div class="mt-16px flex justify-between text-12px text-gray-400">
|
|
|
- <span>{{ item.personal }}</span>
|
|
|
- <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-skeleton>
|
|
|
- </el-card> -->
|
|
|
-
|
|
|
- <el-card shadow="never" class="mt-8px">
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <el-row :gutter="20" justify="space-between">
|
|
|
- <el-col :xl="10" :lg="24" :md="24" :sm="24" :xs="24">
|
|
|
- <el-card shadow="hover" class="mb-8px">
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <Echart :options="pieOptionsData" :height="280" />
|
|
|
- </el-skeleton>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :xl="14" :lg="24" :md="24" :sm="24" :xs="24">
|
|
|
- <el-card shadow="hover" class="mb-8px">
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <Echart :options="barOptionsData" :height="280" />
|
|
|
- </el-skeleton>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-skeleton>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
|
|
|
- <!-- <el-card shadow="never">
|
|
|
- <template #header>
|
|
|
- <div class="h-3 flex justify-between">
|
|
|
- <span>{{ t('workplace.shortcutOperation') }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <el-row>
|
|
|
- <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">
|
|
|
- <div class="flex items-center">
|
|
|
- <Icon :icon="item.icon" class="mr-8px" />
|
|
|
- <el-link type="default" :underline="false" @click="setWatermark(item.name)">
|
|
|
- {{ item.name }}
|
|
|
- </el-link>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-skeleton>
|
|
|
- </el-card> -->
|
|
|
- <el-card shadow="never" class="mt-8px">
|
|
|
- <template #header>
|
|
|
- <div class="h-3 flex justify-between">
|
|
|
- <span>{{ t('workplace.notice') }}</span>
|
|
|
- <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <div v-for="(item, index) in notice" :key="`dynamics-${index}`">
|
|
|
- <div class="flex items-center">
|
|
|
- <el-avatar :src="avatar" :size="35" class="mr-16px">
|
|
|
- <img src="@/assets/imgs/avatar.gif" alt="" />
|
|
|
- </el-avatar>
|
|
|
- <div>
|
|
|
- <div class="text-14px">
|
|
|
- <Highlight :keys="item.keys.map((v) => t(v))">
|
|
|
- {{ item.type }} : {{ item.title }}
|
|
|
- </Highlight>
|
|
|
- </div>
|
|
|
- <div class="mt-16px text-12px text-gray-400">
|
|
|
- {{ formatTime(item.date, 'yyyy-MM-dd') }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <el-row class="mt-8px" :gutter="10" justify="space-between">
|
|
|
+ <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="mb-8px" v-for="(val, index) in list" :key="index">
|
|
|
+ <el-skeleton :loading="val.loading" animated>
|
|
|
+ <el-card shadow="hover" class="mb-8px">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-3 flex justify-between">
|
|
|
+ <span>{{ val.title }}</span>
|
|
|
</div>
|
|
|
- <el-divider />
|
|
|
- </div>
|
|
|
- </el-skeleton>
|
|
|
- </el-card>
|
|
|
+ </template>
|
|
|
+ <el-skeleton :loading="val.loading" animated>
|
|
|
+ <Echart :options="val.options" :height="280" />
|
|
|
+ </el-skeleton>
|
|
|
+ </el-card>
|
|
|
+ </el-skeleton>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
-<script lang="ts" setup>
|
|
|
-import { set } from 'lodash-es'
|
|
|
-import { EChartsOption } from 'echarts'
|
|
|
-import { formatTime } from '@/utils'
|
|
|
-
|
|
|
-import { useUserStore } from '@/store/modules/user'
|
|
|
-import { useWatermark } from '@/hooks/web/useWatermark'
|
|
|
-import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
|
|
|
-import { pieOptions, barOptions } from './echarts-data'
|
|
|
|
|
|
+<script setup>
|
|
|
defineOptions({ name: 'Home' })
|
|
|
+import { cloneDeep } from 'lodash-es'
|
|
|
+import { getNewResumeNum, getNewRegisterUserNum, getNewRegisterEnterpriseNum, getNewEnterpriseUserNum } from '@/api/home'
|
|
|
|
|
|
-const { t } = useI18n()
|
|
|
-const userStore = useUserStore()
|
|
|
-const { setWatermark } = useWatermark()
|
|
|
-const loading = ref(true)
|
|
|
-const avatar = userStore.getUser.avatar
|
|
|
-const username = userStore.getUser.nickname
|
|
|
-const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
|
|
-// 获取统计数
|
|
|
-let totalSate = reactive<WorkplaceTotal>({
|
|
|
- project: 0,
|
|
|
- access: 0,
|
|
|
- todo: 0
|
|
|
+const queryFormRef = ref()
|
|
|
+const queryParams = reactive({
|
|
|
+ type: '3',
|
|
|
+ time: []
|
|
|
})
|
|
|
-
|
|
|
-const getCount = async () => {
|
|
|
- const data = {
|
|
|
- project: 40,
|
|
|
- access: 2340,
|
|
|
- todo: 10
|
|
|
- }
|
|
|
- totalSate = Object.assign(totalSate, data)
|
|
|
-}
|
|
|
-
|
|
|
-// 获取项目数
|
|
|
-let projects = reactive<Project[]>([])
|
|
|
-const getProject = async () => {
|
|
|
- const 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()
|
|
|
+const barCommonOptions = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 50,
|
|
|
+ bottom: 50,
|
|
|
+ right: 40,
|
|
|
+ top: 30
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ name: '',
|
|
|
+ data: [],
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
},
|
|
|
- {
|
|
|
- name: 'Vite',
|
|
|
- icon: 'vscode-icons:file-type-vite',
|
|
|
- message: 'workplace.introduction',
|
|
|
- personal: 'Archer',
|
|
|
- time: new Date()
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 30
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '人'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [],
|
|
|
+ type: 'line',
|
|
|
+ // barWidth: 20,
|
|
|
+ label: { show: true }
|
|
|
}
|
|
|
]
|
|
|
- projects = Object.assign(projects, data)
|
|
|
}
|
|
|
|
|
|
-// 获取通知公告
|
|
|
-let notice = reactive<Notice[]>([])
|
|
|
-const getNotice = async () => {
|
|
|
- const data = [
|
|
|
- {
|
|
|
- title: '系统升级版本',
|
|
|
- type: '通知',
|
|
|
- keys: ['通知', '升级'],
|
|
|
- date: new Date()
|
|
|
- },
|
|
|
- {
|
|
|
- title: '系统凌晨维护',
|
|
|
- type: '公告',
|
|
|
- keys: ['公告', '维护'],
|
|
|
- date: new Date()
|
|
|
- },
|
|
|
- {
|
|
|
- title: '系统升级版本',
|
|
|
- type: '通知',
|
|
|
- keys: ['通知', '升级'],
|
|
|
- date: new Date()
|
|
|
- },
|
|
|
- {
|
|
|
- title: '系统凌晨维护',
|
|
|
- type: '公告',
|
|
|
- keys: ['公告', '维护'],
|
|
|
- date: new Date()
|
|
|
- }
|
|
|
- ]
|
|
|
- notice = Object.assign(notice, data)
|
|
|
+const getCommonOptions = (yAxisName) => {
|
|
|
+ const options = cloneDeep(barCommonOptions)
|
|
|
+ if (yAxisName) options.yAxis.name = yAxisName
|
|
|
+ return options
|
|
|
}
|
|
|
+const list = ref([
|
|
|
+ {
|
|
|
+ api: getNewRegisterUserNum,
|
|
|
+ title: '新个人用户注册数量统计',
|
|
|
+ loading: false,
|
|
|
+ options: getCommonOptions()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ api: getNewResumeNum,
|
|
|
+ title: '新增简历数量统计',
|
|
|
+ loading: false,
|
|
|
+ options: getCommonOptions('份')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ api: getNewRegisterEnterpriseNum,
|
|
|
+ title: '新注册企业数量统计',
|
|
|
+ loading: false,
|
|
|
+ options: getCommonOptions()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ api: getNewEnterpriseUserNum,
|
|
|
+ title: '新企业用户数量统计',
|
|
|
+ loading: false,
|
|
|
+ options: getCommonOptions()
|
|
|
+ }
|
|
|
+])
|
|
|
|
|
|
-// 获取快捷入口
|
|
|
-let shortcut = reactive<Shortcut[]>([])
|
|
|
+/** 图表数据请求 */
|
|
|
+const fetchData = async (api) => {
|
|
|
+ try {
|
|
|
+ const data = await api(queryParams)
|
|
|
+ return data
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Error fetching data:', error)
|
|
|
+ return null
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
-const getShortcut = async () => {
|
|
|
- const data = [
|
|
|
- {
|
|
|
- name: 'Github',
|
|
|
- icon: 'akar-icons:github-fill',
|
|
|
- url: 'github.io'
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Vue',
|
|
|
- icon: 'logos:vue',
|
|
|
- url: 'vuejs.org'
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Vite',
|
|
|
- icon: 'vscode-icons:file-type-vite',
|
|
|
- url: 'https://vitejs.dev/'
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Angular',
|
|
|
- icon: 'logos:angular-icon',
|
|
|
- url: 'github.io'
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'React',
|
|
|
- icon: 'logos:react',
|
|
|
- url: 'github.io'
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Webpack',
|
|
|
- icon: 'logos:webpack',
|
|
|
- url: 'github.io'
|
|
|
- }
|
|
|
- ]
|
|
|
- shortcut = Object.assign(shortcut, data)
|
|
|
+const unitArr = {
|
|
|
+ '3': '小时',
|
|
|
+ '0': '日',
|
|
|
+ '4': '日',
|
|
|
+ '5': '月'
|
|
|
}
|
|
|
+async function fetchAllData() {
|
|
|
+ list.value.forEach(item => item.loading = true)
|
|
|
+ const promises = list.value.map(item => fetchData(item.api))
|
|
|
+ try {
|
|
|
+ const results = await Promise.all(promises)
|
|
|
+ results.forEach((result, index) => {
|
|
|
+ list.value[index].options.xAxis.name = unitArr[queryParams.type]
|
|
|
+ list.value[index].options.xAxis.data = result.x
|
|
|
+ list.value[index].options.series[0].data = result.y
|
|
|
+ list.value[index].loading = false
|
|
|
+ })
|
|
|
+ } catch (error) {
|
|
|
+ list.value.forEach(item => item.loading = false)
|
|
|
+ }
|
|
|
+}
|
|
|
+fetchAllData()
|
|
|
|
|
|
-// 用户来源
|
|
|
-const getUserAccessSource = async () => {
|
|
|
- const 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' }
|
|
|
- ]
|
|
|
- set(
|
|
|
- pieOptionsData,
|
|
|
- 'legend.data',
|
|
|
- data.map((v) => t(v.name))
|
|
|
- )
|
|
|
- pieOptionsData!.series![0].data = data.map((v) => {
|
|
|
- return {
|
|
|
- name: t(v.name),
|
|
|
- value: v.value
|
|
|
- }
|
|
|
- })
|
|
|
+/** 类型选择操作 */
|
|
|
+const typeChange = (value) => {
|
|
|
+ if (value) queryParams.time = []
|
|
|
}
|
|
|
-const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
|
|
|
|
|
|
-// 周活跃量
|
|
|
-const getWeeklyUserActivity = async () => {
|
|
|
- const 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' }
|
|
|
- ]
|
|
|
- set(
|
|
|
- barOptionsData,
|
|
|
- 'xAxis.data',
|
|
|
- data.map((v) => t(v.name))
|
|
|
- )
|
|
|
- set(barOptionsData, 'series', [
|
|
|
- {
|
|
|
- name: t('analysis.activeQuantity'),
|
|
|
- data: data.map((v) => v.value),
|
|
|
- type: 'bar'
|
|
|
- }
|
|
|
- ])
|
|
|
+/** 自定义时间选择操作 */
|
|
|
+const timeRangeChange = (value) => {
|
|
|
+ if (value?.length) queryParams.type = '99'
|
|
|
+ else queryParams.type = '0'
|
|
|
}
|
|
|
|
|
|
-const getAllApi = async () => {
|
|
|
- await Promise.all([
|
|
|
- getCount(),
|
|
|
- getProject(),
|
|
|
- getNotice(),
|
|
|
- getShortcut(),
|
|
|
- getUserAccessSource(),
|
|
|
- getWeeklyUserActivity()
|
|
|
- ])
|
|
|
- loading.value = false
|
|
|
+/** 搜索按钮操作 */
|
|
|
+const handleQuery = async () => {
|
|
|
+ fetchAllData()
|
|
|
}
|
|
|
|
|
|
-getAllApi()
|
|
|
+/** 重置按钮操作 */
|
|
|
+const resetQuery = () => {
|
|
|
+ queryFormRef.value.resetFields()
|
|
|
+ handleQuery()
|
|
|
+}
|
|
|
</script>
|