|
1 | 1 | <template> |
2 | | - <el-popover placement="top" :width="450" trigger="hover"> |
3 | | - <template #default> |
4 | | - <el-row :gutter="3" v-for="status in statusTable" :key="status.type"> |
5 | | - <el-col :span="4">{{ taskTypeMap[status.type] }} </el-col> |
6 | | - <el-col :span="4"> |
7 | | - <el-text v-if="status.state === State.SUCCESS || status.state === State.REVOKED"> |
8 | | - <el-icon class="success"><SuccessFilled /></el-icon> |
9 | | - {{ stateMap[status.state](status.type) }} |
10 | | - </el-text> |
11 | | - <el-text v-else-if="status.state === State.FAILURE"> |
12 | | - <el-icon class="danger"><CircleCloseFilled /></el-icon> |
13 | | - {{ stateMap[status.state](status.type) }} |
14 | | - </el-text> |
15 | | - <el-text v-else-if="status.state === State.STARTED"> |
16 | | - <el-icon class="is-loading primary"><Loading /></el-icon> |
17 | | - {{ stateMap[status.state](status.type) }} |
18 | | - </el-text> |
19 | | - <el-text v-else-if="status.state === State.PENDING"> |
20 | | - <el-icon class="is-loading primary"><Loading /></el-icon> |
21 | | - {{ stateMap[status.state](status.type) }} |
22 | | - </el-text> |
23 | | - <el-text v-else-if="aggStatus?.value === State.REVOKE"> |
24 | | - <el-icon class="is-loading primary"><Loading /></el-icon> |
25 | | - {{ stateMap[aggStatus.value](aggStatus.key) }} |
26 | | - </el-text> |
27 | | - </el-col> |
28 | | - <el-col :span="5"> |
29 | | - 完成 |
30 | | - {{ |
31 | | - Object.keys(status.aggs ? status.aggs : {}) |
32 | | - .filter((k) => k == State.SUCCESS) |
33 | | - .map((k) => status.aggs[k]) |
34 | | - .reduce((x: any, y: any) => x + y, 0) |
35 | | - }}/{{ |
36 | | - Object.values(status.aggs ? status.aggs : {}).reduce((x: any, y: any) => x + y, 0) |
37 | | - }} |
38 | | - </el-col> |
39 | | - <el-col :span="9"> |
40 | | - {{ |
41 | | - status.time |
42 | | - ? status.time[ |
43 | | - status.state == State.REVOKED ? State.REVOKED : State.PENDING |
44 | | - ]?.substring(0, 19) |
45 | | - : undefined |
46 | | - }} |
47 | | - </el-col> |
48 | | - </el-row> |
| 2 | + <el-popover v-model:visible="visible" placement="top" :width="450" trigger="hover"> |
| 3 | + <template #default |
| 4 | + ><StatusTable |
| 5 | + v-if="visible" |
| 6 | + :status="status" |
| 7 | + :statusMeta="statusMeta" |
| 8 | + :taskTypeMap="taskTypeMap" |
| 9 | + :stateMap="stateMap" |
| 10 | + ></StatusTable> |
49 | 11 | </template> |
50 | 12 | <template #reference> |
51 | 13 | <el-text v-if="aggStatus?.value === State.SUCCESS || aggStatus?.value === State.REVOKED"> |
|
72 | 34 | </el-popover> |
73 | 35 | </template> |
74 | 36 | <script setup lang="ts"> |
75 | | -import { computed } from 'vue' |
76 | | -import { Status, TaskType, State, type TaskTypeInterface } from '@/utils/status' |
77 | | -import { mergeWith } from 'lodash' |
| 37 | +import { computed, ref } from 'vue' |
| 38 | +import { TaskType, State } from '@/utils/status' |
| 39 | +import StatusTable from '@/views/document/component/StatusTable.vue' |
78 | 40 | const props = defineProps<{ status: string; statusMeta: any }>() |
79 | | -
|
| 41 | +const visible = ref<boolean>(false) |
80 | 42 | const checkList: Array<string> = [ |
81 | 43 | State.REVOKE, |
82 | 44 | State.STARTED, |
@@ -112,56 +74,5 @@ const stateMap: any = { |
112 | 74 | [State.FAILURE]: (type: number) => '失败', |
113 | 75 | [State.SUCCESS]: (type: number) => '成功' |
114 | 76 | } |
115 | | -
|
116 | | -const parseAgg = (agg: { count: number; status: string }) => { |
117 | | - const status = new Status(agg.status) |
118 | | - return Object.keys(TaskType) |
119 | | - .map((key) => { |
120 | | - const value = TaskType[key as keyof TaskTypeInterface] |
121 | | - return { [value]: { [status.task_status[value]]: agg.count } } |
122 | | - }) |
123 | | - .reduce((x, y) => ({ ...x, ...y }), {}) |
124 | | -} |
125 | | -
|
126 | | -const customizer: (x: any, y: any) => any = (objValue: any, srcValue: any) => { |
127 | | - if (objValue == undefined && srcValue) { |
128 | | - return srcValue |
129 | | - } |
130 | | - if (srcValue == undefined && objValue) { |
131 | | - return objValue |
132 | | - } |
133 | | - // 如果是数组,我们将元素进行聚合 |
134 | | - if (typeof objValue === 'object' && typeof srcValue === 'object') { |
135 | | - // 若是object类型的对象,我们进行递归 |
136 | | - return mergeWith(objValue, srcValue, customizer) |
137 | | - } else { |
138 | | - // 否则,单纯的将值进行累加 |
139 | | - return objValue + srcValue |
140 | | - } |
141 | | -} |
142 | | -const aggs = computed(() => { |
143 | | - return (props.statusMeta.aggs ? props.statusMeta.aggs : []) |
144 | | - .map((agg: any) => { |
145 | | - return parseAgg(agg) |
146 | | - }) |
147 | | - .reduce((x: any, y: any) => { |
148 | | - return mergeWith(x, y, customizer) |
149 | | - }, {}) |
150 | | -}) |
151 | | -
|
152 | | -const statusTable = computed(() => { |
153 | | - return Object.keys(TaskType) |
154 | | - .map((key) => { |
155 | | - const value = TaskType[key as keyof TaskTypeInterface] |
156 | | - const parseStatus = new Status(props.status) |
157 | | - return { |
158 | | - type: value, |
159 | | - state: parseStatus.task_status[value], |
160 | | - aggs: aggs.value[value], |
161 | | - time: props.statusMeta.state_time[value] |
162 | | - } |
163 | | - }) |
164 | | - .filter((item) => item.state !== State.IGNORED) |
165 | | -}) |
166 | 77 | </script> |
167 | 78 | <style lang="scss" scoped></style> |
0 commit comments