From 2f9033c933fdf11a55e822b46e84fc7591903a41 Mon Sep 17 00:00:00 2001 From: dhb52 Date: Thu, 23 May 2024 00:53:06 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=A6=96=E9=A1=B5=E9=87=8D?= =?UTF-8?q?=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/typings/api.d.ts | 6 +- src/views/home/index.vue | 4 +- ...ne-retry-chart.vue => task-line-chart.vue} | 38 +++------- ...pie-retry-chart.vue => task-pie-chart.vue} | 30 ++++---- .../modules/{retry-tab.vue => task-tab.vue} | 76 +++++++++---------- 5 files changed, 72 insertions(+), 82 deletions(-) rename src/views/home/modules/{line-retry-chart.vue => task-line-chart.vue} (85%) rename src/views/home/modules/{pie-retry-chart.vue => task-pie-chart.vue} (95%) rename src/views/home/modules/{retry-tab.vue => task-tab.vue} (84%) diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts index 0461723..6a54b9d 100644 --- a/src/typings/api.d.ts +++ b/src/typings/api.d.ts @@ -200,10 +200,10 @@ declare namespace Api { type DashboardLine = { taskList: TaskList; rankList: RankList[]; - dashboardLineResponseDOList: DashboardLineResponseDOList[]; + dashboardLineResponseDOList: DashboardLineResponseDO[]; }; - type DashboardLineResponseDOList = { + type DashboardLineResponseDO = { createDt: string; total: number; } & DashboardLineJob & @@ -265,6 +265,8 @@ declare namespace Api { */ type DashboardLineMode = 'JOB' | 'WORKFLOW'; + type TaskType = 'JOB' | 'RETRY' | 'WORKFLOW'; + type DashboardLineParams = { groupName?: string; type: DashboardLineType; diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 460f66a..bd41774 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -2,7 +2,7 @@ import { ref } from 'vue'; import { fetchCardCount } from '@/service/api'; import CardData from './modules/card-data.vue'; -import RetryTab from './modules/retry-tab.vue'; +import TaskTab from './modules/task-tab.vue'; const cardCount = ref(); @@ -20,7 +20,7 @@ getCardData(); - + diff --git a/src/views/home/modules/line-retry-chart.vue b/src/views/home/modules/task-line-chart.vue similarity index 85% rename from src/views/home/modules/line-retry-chart.vue rename to src/views/home/modules/task-line-chart.vue index 4c7dd8e..1a711e8 100644 --- a/src/views/home/modules/line-retry-chart.vue +++ b/src/views/home/modules/task-line-chart.vue @@ -5,16 +5,16 @@ import { useAppStore } from '@/store/modules/app'; import { useEcharts } from '@/hooks/common/echarts'; defineOptions({ - name: 'LineRetryChart' + name: 'TaskLineChart' }); interface Props { - type?: number; + type?: Api.Dashboard.TaskType; modelValue: Api.Dashboard.DashboardLine; } const props = withDefaults(defineProps(), { - type: 0 + type: 'JOB' }); const appStore = useAppStore(); @@ -32,7 +32,7 @@ const { domRef, updateOptions } = useEcharts(() => ({ }, legend: { data: - props.type === 0 + props.type === 'RETRY' ? [ $t('common.success'), $t('common.running'), @@ -88,7 +88,7 @@ const { domRef, updateOptions } = useEcharts(() => ({ }, { color: '#40e9c5', - name: props.type === 0 ? $t('common.running') : $t('common.fail'), + name: props.type === 'RETRY' ? $t('common.running') : $t('common.fail'), type: 'line', smooth: true, stack: 'Total', @@ -118,7 +118,7 @@ const { domRef, updateOptions } = useEcharts(() => ({ }, { color: '#b686d4', - name: props.type === 0 ? $t('page.manage.retryTask.status.maxRetryTimes') : $t('common.stop'), + name: props.type === 'RETRY' ? $t('page.manage.retryTask.status.maxRetryTimes') : $t('common.stop'), type: 'line', smooth: true, stack: 'Total', @@ -148,7 +148,7 @@ const { domRef, updateOptions } = useEcharts(() => ({ }, { color: '#ec6f6f', - name: props.type === 0 ? $t('page.manage.retryTask.status.pauseRetry') : $t('common.cancel'), + name: props.type === 'RETRY' ? $t('page.manage.retryTask.status.pauseRetry') : $t('common.cancel'), type: 'line', smooth: true, stack: 'Total', @@ -190,37 +190,23 @@ const getData = () => { opts.xAxis.data = props.modelValue?.dashboardLineResponseDOList.map(x => x.createDt); opts.series[0].data = props.modelValue?.dashboardLineResponseDOList.map(x => - opts.tabIndex === 0 ? x.successNum : x.success + opts.tabIndex === 'RETRY' ? x.successNum : x.success ); opts.series[1].data = props.modelValue?.dashboardLineResponseDOList.map(x => - opts.tabIndex === 0 ? x.runningNum : x.failNum + opts.tabIndex === 'RETRY' ? x.runningNum : x.failNum ); opts.series[2].data = props.modelValue?.dashboardLineResponseDOList.map(x => - opts.tabIndex === 0 ? x.maxCountNum : x.stop + opts.tabIndex === 'RETRY' ? x.maxCountNum : x.stop ); opts.series[3].data = props.modelValue?.dashboardLineResponseDOList.map(x => - opts.tabIndex === 0 ? x.suspendNum : x.cancel + opts.tabIndex === 'RETRY' ? x.suspendNum : x.cancel ); return opts; }); }; watch( - () => appStore.locale, - () => { - getData(); - } -); - -watch( - () => props.modelValue, - () => { - getData(); - } -); - -watch( - () => props.type, + [() => appStore.locale, props], () => { getData(); }, diff --git a/src/views/home/modules/pie-retry-chart.vue b/src/views/home/modules/task-pie-chart.vue similarity index 95% rename from src/views/home/modules/pie-retry-chart.vue rename to src/views/home/modules/task-pie-chart.vue index 04652e9..c26c355 100644 --- a/src/views/home/modules/pie-retry-chart.vue +++ b/src/views/home/modules/task-pie-chart.vue @@ -7,16 +7,16 @@ import { useEcharts } from '@/hooks/common/echarts'; import { useThemeStore } from '@/store/modules/theme'; defineOptions({ - name: 'PieRetryChart' + name: 'TaskPieChart' }); interface Props { - type?: number; + type?: Api.Dashboard.TaskType; modelValue: Api.Dashboard.CardCount; } const props = withDefaults(defineProps(), { - type: 0 + type: 'JOB' }); const appStore = useAppStore(); @@ -94,16 +94,7 @@ function updateLocale() { opts.tooltip.textStyle.color = originOpts.tooltip.textStyle.color; opts.tooltip.backgroundColor = originOpts.tooltip.backgroundColor; - 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) { + if (props.type === 'JOB') { const jobTask = props.modelValue.jobTask; opts.series[0].data = [ { name: $t('common.success'), value: jobTask.successNum / jobTask.totalNum }, @@ -112,7 +103,18 @@ function updateLocale() { { name: $t('common.cancel'), value: jobTask.cancelNum / jobTask.totalNum } ]; } - if (props.type === 2) { + + if (props.type === 'RETRY') { + 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 === 'WORKFLOW') { const workFlowTask = props.modelValue.workFlowTask; opts.series[0].data = [ { name: $t('common.success'), value: workFlowTask.successNum / workFlowTask.totalNum }, diff --git a/src/views/home/modules/retry-tab.vue b/src/views/home/modules/task-tab.vue similarity index 84% rename from src/views/home/modules/retry-tab.vue rename to src/views/home/modules/task-tab.vue index 4301aa4..c1d2392 100644 --- a/src/views/home/modules/retry-tab.vue +++ b/src/views/home/modules/task-tab.vue @@ -4,11 +4,11 @@ import type { DataTableColumns } from 'naive-ui'; import { $t } from '@/locales'; import { useAppStore } from '@/store/modules/app'; import { fetchAllGroupName, fetchJobLine, fetchRetryLine } from '@/service/api'; -import LineRetryChart from './line-retry-chart.vue'; -import PieRetryChart from './pie-retry-chart.vue'; +import TaskLineChart from './task-line-chart.vue'; +import TaskPieChart from './task-pie-chart.vue'; defineOptions({ - name: 'RetryTab' + name: 'TaskTab' }); interface Props { @@ -17,7 +17,7 @@ interface Props { defineProps(); -const type = ref(1); +const taskType = ref('JOB'); const appStore = useAppStore(); const gap = computed(() => (appStore.isMobile ? 0 : 16)); const data = ref(); @@ -35,7 +35,7 @@ const formattedValue = ref<[string, string] | null>( const getData = async () => { const { data: lineData, error } = - type.value === 0 ? await fetchRetryLine(tabParams.value) : await fetchJobLine(tabParams.value); + taskType.value === 'RETRY' ? await fetchRetryLine(tabParams.value) : await fetchJobLine(tabParams.value); if (!error) { data.value = lineData; @@ -52,25 +52,17 @@ const getGroupNames = async () => { } }; -watch( - () => tabParams.value, - () => { - getData(); - }, - { deep: true } -); - const onUpdateTab = (value: string) => { - if (value === 'retryTask') { - type.value = 0; - tabParams.value.mode = undefined; - } if (value === 'jobTask') { - type.value = 1; + taskType.value = 'JOB'; tabParams.value.mode = 'JOB'; } + if (value === 'retryTask') { + taskType.value = 'RETRY'; + tabParams.value.mode = undefined; + } if (value === 'workflow') { - type.value = 2; + taskType.value = 'WORKFLOW'; tabParams.value.mode = 'WORKFLOW'; } }; @@ -130,13 +122,13 @@ const createColumns = (): DataTableColumns => [ title: $t('page.home.retryTab.task.run'), key: 'run', align: 'center', - render: row => {row.run} + render: row => {row.run} }, { title: $t('page.home.retryTab.task.total'), key: 'total', align: 'center', - render: row => {row.total} + render: row => {row.total} } ]; @@ -150,6 +142,14 @@ watch( } ); +watch( + () => tabParams.value, + () => { + getData(); + }, + { deep: true } +); + getData(); getGroupNames(); @@ -160,20 +160,20 @@ getGroupNames(); - + -
-

{{ $t('page.home.retryTab.rank.title') }}

-
    -
  • +
    +

    {{ $t('page.home.retryTab.rank.title') }}

    +
      +
    • - + {{ index + 1 }} {{ item.name }} - {{ item.total }} + {{ item.total }}
    @@ -181,7 +181,7 @@ getGroupNames(); -

    {{ $t('page.home.retryTab.task.title') }}

    +

    {{ $t('page.home.retryTab.task.title') }}

     -

    {{ $t('page.home.retryTab.pie.title') }}

    +

    {{ $t('page.home.retryTab.pie.title') }}

    - +     @@ -225,7 +225,7 @@ getGroupNames();