GTsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 首页重构

Browse Source
This commit is contained in:
dhb52 2024-05-23 00:53:06 +08:00
parent 88a250d6a6
commit 2f9033c933
5 changed files with 72 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/typings/api.d.ts vendored
View File

@ -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;

4
src/views/home/index.vue
View File

@ -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<Api.Dashboard.CardCount>();
@ -20,7 +20,7 @@ getCardData();
<NSpace vertical :size="16">
<CardData v-model="cardCount!" />
<NCard :bordered="false" class="card-wrapper p-t-136px 2xl:p-t-0 lg:p-t-36px md:p-t-90px">
<RetryTab v-model="cardCount!" />
<TaskTab v-model="cardCount!" />
</NCard>
</NSpace>
</template>

38
src/views/home/modules/line-retry-chart.vue → src/views/home/modules/task-line-chart.vue
View File

@ -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<Props>(), {
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();
},

30
src/views/home/modules/pie-retry-chart.vue → src/views/home/modules/task-pie-chart.vue
View File

@ -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<Props>(), {
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 },

76
src/views/home/modules/retry-tab.vue → src/views/home/modules/task-tab.vue
View File

@ -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<Props>();
const type = ref(1);
const taskType = ref<Api.Dashboard.TaskType>('JOB');
const appStore = useAppStore();
const gap = computed(() => (appStore.isMobile ? 0 : 16));
const data = ref<Api.Dashboard.DashboardLine>();
@ -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<Api.Dashboard.Task> => [
title: $t('page.home.retryTab.task.run'),
key: 'run',
align: 'center',
render: row => <span class="retry-table-number">{row.run}</span>
render: row => <span class="task-table-number">{row.run}</span>
},
{
title: $t('page.home.retryTab.task.total'),
key: 'total',
align: 'center',
render: row => <span class="retry-table-number">{row.total}</span>
render: row => <span class="task-table-number">{row.total}</span>
}
];
@ -150,6 +142,14 @@ watch(
}
);
watch(
() => tabParams.value,
() => {
getData();
},
{ deep: true }
);
getData();
getGroupNames();
</script>
@ -160,20 +160,20 @@ getGroupNames();
<NTabPane v-for="panel in panels" :key="panel.name" :tab="panel.tab" :name="panel.name">
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
<NGi span="24 s:24 m:16">
<LineRetryChart v-model="data!" :type="type"></LineRetryChart>
<TaskLineChart v-model="data!" :type="taskType" />
</NGi>
<NGi span="24 s:24 m:8">
<div class="retry-tab-rank">
<h4 class="retry-tab-title">{{ $t('page.home.retryTab.rank.title') }}</h4>
<ul class="retry-tab-rank__list">
<li v-for="(item, index) in data?.rankList" :key="index" class="retry-tab-rank__list--item">
<div class="task-tab-rank">
<h4 class="task-tab-title">{{ $t('page.home.retryTab.rank.title') }}</h4>
<ul class="task-tab-rank__list">
<li v-for="(item, index) in data?.rankList" :key="index" class="task-tab-rank__list--item">
<span>
<span class="retry-tab-rank__list--index">
<span class="task-tab-rank__list--index">
{{ index + 1 }}
</span>
<span>{{ item.name }}</span>
</span>
<span class="retry-tab-badge">{{ item.total }}</span>
<span class="task-tab-badge">{{ item.total }}</span>
</li>
</ul>
</div>
@ -181,7 +181,7 @@ getGroupNames();
</NGrid>
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive class="p-t-16px">
<NGi span="24 s:24 m:16">
<h4 class="retry-tab-title">{{ $t('page.home.retryTab.task.title') }}</h4>
<h4 class="task-tab-title">{{ $t('page.home.retryTab.task.title') }}</h4>
<NDivider />
<NDataTable
min-height="300px"
@ -193,9 +193,9 @@ getGroupNames();
/>
</NGi>
<NGi span="24 s:24 m:8">
<h4 class="retry-tab-title">{{ $t('page.home.retryTab.pie.title') }}</h4>
<h4 class="task-tab-title">{{ $t('page.home.retryTab.pie.title') }}</h4>
<NDivider />
<PieRetryChart v-model="modelValue!" :type="type" />
<TaskPieChart v-model="modelValue!" :type="taskType" />
</NGi>
</NGrid>
</NTabPane>
@ -225,7 +225,7 @@ getGroupNames();
</template>
<style>
.retry-table-number {
.task-table-number {
padding: 3px 7px;
background-color: #f4f4f4;
color: #555;
@ -234,19 +234,19 @@ getGroupNames();
border-radius: 4px;
}
.dark .retry-table-number {
.dark .task-table-number {
background: #2c2c2c;
color: #d6d6d6;
}
</style>
<style scoped lang="scss">
.retry-tab-title {
.task-tab-title {
font-size: 16px;
font-weight: 600;
}
.retry-tab-badge {
.task-tab-badge {
float: right;
padding: 3px 7px;
background-color: #f4f4f4;
@ -256,7 +256,7 @@ getGroupNames();
border-radius: 4px;
}
.retry-tab-rank {
.task-tab-rank {
height: 360px;
overflow: hidden;
@ -303,12 +303,12 @@ getGroupNames();
}
.dark {
.retry-tab-badge {
.task-tab-badge {
background: #2c2c2c;
color: #d6d6d6;
}
.retry-tab-rank {
.task-tab-rank {
&__list {
&--index {
color: #d6d6d6;