fix: 修复首页图表问题
This commit is contained in:
parent
b363985ec1
commit
08c04dba04
@ -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: [
|
||||
{
|
||||
|
@ -17,7 +17,8 @@ const customRoutes: CustomRoute[] = [
|
||||
title: 'exception',
|
||||
i18nKey: 'route.exception',
|
||||
icon: 'ant-design:exception-outlined',
|
||||
order: 7
|
||||
order: 7,
|
||||
hideInMenu: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
1
src/typings/api.d.ts
vendored
1
src/typings/api.d.ts
vendored
@ -119,6 +119,7 @@ declare namespace Api {
|
||||
/** Task Retry Job */
|
||||
type CardCount = {
|
||||
jobTask: JobTask;
|
||||
workFlowTask: JobTask;
|
||||
retryTask: RetryTask;
|
||||
retryTaskBarList: RetryTaskBarList[];
|
||||
onLineService: OnlineService;
|
||||
|
5
src/typings/components.d.ts
vendored
5
src/typings/components.d.ts
vendored
@ -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']
|
||||
|
@ -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();
|
||||
|
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
});
|
||||
};
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user