@ -22,32 +22,17 @@
< 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"
/ >
< 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"
/ >
< 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"
/ >
< CountTo class = "text-20px" :start-val ="0" :end-val ="totalSate.access" :duration ="2600" / >
< / div >
< / div >
< / e l - c o l >
@ -55,9 +40,20 @@
< / e l - s k e l e t o n >
< / e l - c a r d >
< / div >
< div class = "flex flex-wrap gap-4" style = "margin: 2 0px 0;">
< div class = "flex flex-wrap gap-4" style = "margin: 1 0px 0;">
< el -card style = "width: 420px;text-align: center;cursor: pointer;" shadow = "hover" @click ="goToXXLJob" > 任务调度中心 < / el -card >
< / div >
<!-- 新增的静态图片部分 -- >
< div >
< el -card style = "width: 100%; text-align: center;" shadow = "never" >
< div style = "overflow: hidden; height: calc(100% - 2px);" >
< el -image :src ="luduViewImage" fit = "contain" style = "width: 100%; transform: translateY(-2px);" / >
< / div >
< / e l - c a r d >
< / div >
<!-- < 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" >
@ -74,17 +70,9 @@
< / e l - l i n k >
< / div >
< / template >
< el -skeleton :loading ="loading" animated >
< 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 -col v-for ="(item, index) in projects" :key="`card-${index}`" :xl="8" :lg="8" :md="8" :sm="24" :xs ="24" >
< el -card shadow = "hover" class = "mr-5px mt-5px" >
< div class = "flex items-center" >
< Icon :icon ="item.icon" :size ="25" class = "mr-8px" / >
@ -98,10 +86,10 @@
< / e l - c a r d >
< / e l - c o l >
< / e l - r o w >
< / e l - s k e l e t o n >
< / e l - c a r d >
< / e l - s k e l e t o n >
< / e l - c a r d >
< el -card shadow = "never" class = "mt-8px" >
< el -card shadow = "never" class = "mt-8px" >
< el -skeleton :loading ="loading" animated >
< el -row :gutter ="20" justify = "space-between" >
< el -col :xl ="10" :lg ="10" :md ="24" :sm ="24" :xs ="24" >
@ -120,9 +108,9 @@
< / e l - c o l >
< / e l - r o w >
< / e l - s k e l e t o n >
< / e l - c a r d >
< / e l - c o l >
< el -col :xl ="8" :lg ="8" :md ="24" :sm ="24" :xs ="24" class = "mb-8px" >
< / e l - c a r d >
< / e l - c o l >
< 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" >
@ -170,47 +158,48 @@
< / div >
< / e l - s k e l e t o n >
< / e l - c a r d >
< / e l - c o l >
< / e l - r o w > - - >
< / e l - c o l >
< / e l - r o w > - - >
< / template >
< script lang = "ts" setup >
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { formatTime } from '@/utils'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { formatTime } from '@/utils'
import luduView from '@/assets/imgs/ludu_view.png'
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'
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'
defineOptions ( { name : 'Home' } )
defineOptions ( { name : '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 > ( {
const luduViewImage = ref ( luduView ) ;
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 getCount = async ( ) => {
const getCount = async ( ) => {
const data = {
project : 40 ,
access : 2340 ,
todo : 10
}
totalSate = Object . assign ( totalSate , data )
}
}
/ / 获 取 项 目 数
let projects = reactive < Project [ ] > ( [ ] )
const getProject = async ( ) => {
/ / 获 取 项 目 数
let projects = reactive < Project [ ] > ( [ ] )
const getProject = async ( ) => {
const data = [
{
name : 'ruoyi-vue-pro' ,
@ -256,11 +245,11 @@ const getProject = async () => {
}
]
projects = Object . assign ( projects , data )
}
}
/ / 获 取 通 知 公 告
let notice = reactive < Notice [ ] > ( [ ] )
const getNotice = async ( ) => {
/ / 获 取 通 知 公 告
let notice = reactive < Notice [ ] > ( [ ] )
const getNotice = async ( ) => {
const data = [
{
title : '系统支持 JDK 8/17/21, Vue 2/3' ,
@ -288,12 +277,12 @@ const getNotice = async () => {
}
]
notice = Object . assign ( notice , data )
}
}
/ / 获 取 快 捷 入 口
let shortcut = reactive < Shortcut [ ] > ( [ ] )
/ / 获 取 快 捷 入 口
let shortcut = reactive < Shortcut [ ] > ( [ ] )
const getShortcut = async ( ) => {
const getShortcut = async ( ) => {
const data = [
{
name : 'Github' ,
@ -327,10 +316,10 @@ const getShortcut = async () => {
}
]
shortcut = Object . assign ( shortcut , data )
}
}
/ / 用 户 来 源
const getUserAccessSource = async ( ) => {
/ / 用 户 来 源
const getUserAccessSource = async ( ) => {
const data = [
{ value : 335 , name : 'analysis.directAccess' } ,
{ value : 310 , name : 'analysis.mailMarketing' } ,
@ -349,11 +338,11 @@ const getUserAccessSource = async () => {
value : v . value
}
} )
}
const barOptionsData = reactive < EChartsOption > ( barOptions ) as EChartsOption
}
const barOptionsData = reactive < EChartsOption > ( barOptions ) as EChartsOption
/ / 周 活 跃 量
const getWeeklyUserActivity = async ( ) => {
/ / 周 活 跃 量
const getWeeklyUserActivity = async ( ) => {
const data = [
{ value : 13253 , name : 'analysis.monday' } ,
{ value : 34235 , name : 'analysis.tuesday' } ,
@ -375,9 +364,9 @@ const getWeeklyUserActivity = async () => {
type : 'bar'
}
] )
}
}
const getAllApi = async ( ) => {
const getAllApi = async ( ) => {
await Promise . all ( [
getCount ( ) ,
getProject ( ) ,
@ -387,10 +376,22 @@ const getAllApi = async () => {
getWeeklyUserActivity ( )
] )
loading . value = false
}
}
const goToXXLJob = async ( ) => {
window . open ( 'http ://127.0.0.1:9090 /xxl-job-admin/') ;
}
getAllApi ( )
const goToXXLJob = async ( ) => {
window . open ( 'http s://mt.ptzykjgs.com /xxl-job-admin/') ;
}
getAllApi ( )
< / script >
< style scoped >
. image - container {
width : 100 % ;
display : flex ;
justify - content : center ;
}
. el - image img {
width : 100 % ;
height : auto ;
}
< / style >