fix: 修复首页图表问题

This commit is contained in:
xlsea 2024-04-13 01:23:58 +08:00
parent b363985ec1
commit 08c04dba04
9 changed files with 103 additions and 77 deletions

View File

@ -47,7 +47,8 @@ export const generatedRoutes: GeneratedRoute[] = [
title: 'about',
i18nKey: 'route.about',
icon: 'fluent:book-information-24-regular',
order: 10
order: 10,
hideInMenu: true
}
},
{
@ -58,7 +59,8 @@ export const generatedRoutes: GeneratedRoute[] = [
title: 'function',
i18nKey: 'route.function',
icon: 'icon-park-outline:all-application',
order: 6
order: 6,
hideInMenu: true
},
children: [
{
@ -200,7 +202,8 @@ export const generatedRoutes: GeneratedRoute[] = [
i18nKey: 'route.manage',
icon: 'carbon:cloud-service-management',
order: 9,
roles: ['R_ADMIN']
roles: ['R_ADMIN'],
hideInMenu: true
},
children: [
{
@ -262,7 +265,8 @@ export const generatedRoutes: GeneratedRoute[] = [
meta: {
title: 'multi-menu',
i18nKey: 'route.multi-menu',
order: 8
order: 8,
hideInMenu: true
},
children: [
{

View File

@ -17,7 +17,8 @@ const customRoutes: CustomRoute[] = [
title: 'exception',
i18nKey: 'route.exception',
icon: 'ant-design:exception-outlined',
order: 7
order: 7,
hideInMenu: true
},
children: [
{

View File

@ -119,6 +119,7 @@ declare namespace Api {
/** Task Retry Job */
type CardCount = {
jobTask: JobTask;
workFlowTask: JobTask;
retryTask: RetryTask;
retryTaskBarList: RetryTaskBarList[];
onLineService: OnlineService;

View File

@ -23,7 +23,6 @@ declare module 'vue' {
IconIcRoundPlus: typeof import('~icons/ic/round-plus')['default']
IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
IconLocalBanner: typeof import('~icons/local/banner')['default']
IconLocalLogo: typeof import('~icons/local/logo')['default']
'IconMaterialSymbols:closeFullscreenRounded': typeof import('~icons/material-symbols/close-fullscreen-rounded')['default']
'IconMaterialSymbols:openInFullRounded': typeof import('~icons/material-symbols/open-in-full-rounded')['default']
@ -37,7 +36,6 @@ declare module 'vue' {
LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
LookForward: typeof import('./../components/custom/look-forward.vue')['default']
MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
NBadge: typeof import('naive-ui')['NBadge']
NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
NButton: typeof import('naive-ui')['NButton']
@ -62,8 +60,6 @@ declare module 'vue' {
NInput: typeof import('naive-ui')['NInput']
NInputGroup: typeof import('naive-ui')['NInputGroup']
NInputNumber: typeof import('naive-ui')['NInputNumber']
NList: typeof import('naive-ui')['NList']
NListItem: typeof import('naive-ui')['NListItem']
NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
NMenu: typeof import('naive-ui')['NMenu']
NMessageProvider: typeof import('naive-ui')['NMessageProvider']
@ -85,7 +81,6 @@ declare module 'vue' {
NTabPane: typeof import('naive-ui')['NTabPane']
NTabs: typeof import('naive-ui')['NTabs']
NTag: typeof import('naive-ui')['NTag']
NThing: typeof import('naive-ui')['NThing']
NTooltip: typeof import('naive-ui')['NTooltip']
NTree: typeof import('naive-ui')['NTree']
OperateDrawer: typeof import('./../components/common/operate-drawer.vue')['default']

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { reactive } from 'vue';
import { Md5 } from 'ts-md5';
import { $t } from '@/locales';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
@ -11,6 +11,7 @@ defineOptions({
const authStore = useAuthStore();
const { formRef, validate } = useNaiveForm();
const { defaultRequiredRule } = useFormRules();
interface FormModel {
userName: string;
@ -22,15 +23,12 @@ const model: FormModel = reactive({
password: '654321'
});
const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
// inside computed to make locale reactive, if not apply i18n, you can define it without computed
const { formRules } = useFormRules();
type RuleKey = Extract<keyof FormModel, 'userName' | 'password'>;
return {
userName: formRules.userName,
password: formRules.pwd
};
});
const rules: Record<RuleKey, App.Global.FormRule> = {
userName: defaultRequiredRule,
password: defaultRequiredRule
};
async function handleSubmit() {
await validate();

View File

@ -49,6 +49,14 @@ const props = withDefaults(defineProps<Props>(), {
totalNum: 0,
successRate: 0
},
workFlowTask: {
successNum: 0,
failNum: 0,
cancelNum: 0,
stopNum: 0,
totalNum: 0,
successRate: 0
},
retryTask: {
totalNum: 0,
runningNum: 0,
@ -138,6 +146,36 @@ const cardData = computed<CardData[]>(() => [
}
]
},
{
key: 'workflow',
title: $t('page.home.workflow'),
tip: $t('page.home.workflowTip'),
value: 7,
unit: '',
color: {
start: '#ec6f6f',
end: '#f99797'
},
icon: 'typcn:flow-merge',
bottom: [
{
label: $t('common.success'),
value: props.modelValue?.workFlowTask.successNum ?? 0
},
{
label: $t('common.fail'),
value: props.modelValue?.workFlowTask.failNum ?? 0
},
{
label: $t('common.stop'),
value: props.modelValue?.workFlowTask.stopNum ?? 0
},
{
label: $t('common.cancel'),
value: props.modelValue?.workFlowTask.cancelNum ?? 0
}
]
},
{
key: 'onlineServiceCount',
title: $t('page.home.onlineServiceCount'),
@ -159,36 +197,6 @@ const cardData = computed<CardData[]>(() => [
value: props.modelValue?.onLineService.serverTotal ?? 0
}
]
},
{
key: 'workflow',
title: $t('page.home.workflow'),
tip: $t('page.home.workflowTip'),
value: 7,
unit: '',
color: {
start: '#ec6f6f',
end: '#f99797'
},
icon: 'typcn:flow-merge',
bottom: [
{
label: $t('common.success'),
value: 185
},
{
label: $t('common.fail'),
value: 37
},
{
label: $t('common.stop'),
value: 5
},
{
label: $t('common.cancel'),
value: 13
}
]
}
]);

View File

@ -51,13 +51,13 @@ const { domRef, updateOptions } = useEcharts(() => ({
]
}));
async function mockData() {
const getData = async () => {
await new Promise(resolve => {
setTimeout(resolve, 1);
});
if (!props.modelValue) {
await mockData();
await getData();
return;
}
@ -68,14 +68,9 @@ async function mockData() {
opts.series[0].data = props.modelValue!.map(item => item.taskTotal);
return opts;
});
}
};
async function init() {
await mockData();
}
// init
init();
getData();
</script>
<template>

View File

@ -21,7 +21,8 @@ const appStore = useAppStore();
const { domRef, updateOptions } = useEcharts(() => ({
tooltip: {
trigger: 'item'
trigger: 'item',
formatter: '{a} <br/>{b}: {d}%'
},
legend: {
bottom: '1%',
@ -60,23 +61,46 @@ const { domRef, updateOptions } = useEcharts(() => ({
]
}));
const getData = () => {
updateOptions(opts => {
const retryTask = props.modelValue.retryTask;
const jobTask = props.modelValue.jobTask;
const totalNum = props.type === 0 ? retryTask.totalNum : jobTask.totalNum;
opts.series[0].data = [
{ name: $t('common.success'), value: props.type === 0 ? retryTask.finishNum : jobTask.successNum / totalNum },
{ name: $t('common.running'), value: props.type === 0 ? retryTask.runningNum : jobTask.failNum / totalNum },
{
name: $t('page.manage.retryTask.status.maxRetryTimes'),
value: props.type === 0 ? retryTask.maxCountNum : jobTask.stopNum / totalNum
},
{
name: $t('page.manage.retryTask.status.pauseRetry'),
value: props.type === 0 ? retryTask.suspendNum : jobTask.cancelNum / totalNum
}
];
const getData = async () => {
await new Promise(resolve => {
setTimeout(resolve, 1);
});
if (!props.modelValue) {
await getData();
return;
}
updateOptions((opts, factory) => {
const originOpts = factory();
opts.series[0].name = originOpts.series[0].name;
if (props.type === 0) {
const retryTask = props.modelValue.retryTask;
opts.series[0].data = [
{ name: $t('common.success'), value: retryTask.finishNum / retryTask.totalNum },
{ name: $t('common.running'), value: retryTask.runningNum / retryTask.totalNum },
{ name: $t('page.manage.retryTask.status.maxRetryTimes'), value: retryTask.maxCountNum / retryTask.totalNum },
{ name: $t('page.manage.retryTask.status.pauseRetry'), value: retryTask.suspendNum / retryTask.totalNum }
];
}
if (props.type === 1) {
const jobTask = props.modelValue.jobTask;
opts.series[0].data = [
{ name: $t('common.success'), value: jobTask.successNum / jobTask.totalNum },
{ name: $t('common.fail'), value: jobTask.failNum / jobTask.totalNum },
{ name: $t('common.stop'), value: jobTask.stopNum / jobTask.totalNum },
{ name: $t('common.cancel'), value: jobTask.cancelNum / jobTask.totalNum }
];
}
if (props.type === 2) {
const workFlowTask = props.modelValue.workFlowTask;
opts.series[0].data = [
{ name: $t('common.success'), value: workFlowTask.successNum / workFlowTask.totalNum },
{ name: $t('common.fail'), value: workFlowTask.failNum / workFlowTask.totalNum },
{ name: $t('common.stop'), value: workFlowTask.stopNum / workFlowTask.totalNum },
{ name: $t('common.cancel'), value: workFlowTask.cancelNum / workFlowTask.totalNum }
];
}
return opts;
});
};

View File

@ -24,7 +24,6 @@ const data = ref<Api.Dashboard.DashboardLine>();
const groupOptions = ref();
const tabParams = ref<Api.Dashboard.DashboardLineParams>({
type: 'WEEK',
groupName: 'Default',
page: 1,
size: 6
});
@ -67,6 +66,7 @@ watch(
const onUpdateTab = (value: string) => {
if (value === 'retryTask') {
type.value = 0;
tabParams.value.mode = undefined;
}
if (value === 'jobTask') {
type.value = 1;