Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
yiicenne
DolphinScheduler
提交
427ee5ed
DolphinScheduler
项目概览
yiicenne
/
DolphinScheduler
与 Fork 源项目一致
Fork自
apache / DolphinScheduler
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
DolphinScheduler
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
427ee5ed
编写于
1月 04, 2022
作者:
S
songjianet
提交者:
GitHub
1月 04, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
[Feature][UI Next] Add process state statistics. (#7781)
上级
c9717085
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
61 addition
and
12 deletion
+61
-12
dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx
...hinscheduler-ui-next/src/components/chart/modules/Pie.tsx
+2
-1
dolphinscheduler-ui-next/src/views/home/index.tsx
dolphinscheduler-ui-next/src/views/home/index.tsx
+21
-11
dolphinscheduler-ui-next/src/views/home/use-process-state.ts
dolphinscheduler-ui-next/src/views/home/use-process-state.ts
+38
-0
未找到文件。
dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx
浏览文件 @
427ee5ed
...
...
@@ -51,7 +51,8 @@ const PieChart = defineComponent({
series
:
[
{
type
:
'
pie
'
,
radius
:
[
'
40%
'
,
'
70%
'
],
radius
:
[
'
35%
'
,
'
60%
'
],
center
:
[
'
50%
'
,
'
40%
'
],
avoidLabelOverlap
:
false
,
label
:
{
show
:
false
,
...
...
dolphinscheduler-ui-next/src/views/home/index.tsx
浏览文件 @
427ee5ed
...
...
@@ -15,19 +15,12 @@
* limitations under the License.
*/
import
{
defineComponent
,
Ref
,
onMounted
,
ref
,
toRefs
,
reactive
,
isReactive
,
}
from
'
vue
'
import
{
defineComponent
,
onMounted
,
ref
}
from
'
vue
'
import
{
NGrid
,
NGi
}
from
'
naive-ui
'
import
{
startOfToday
,
getTime
}
from
'
date-fns
'
import
{
useI18n
}
from
'
vue-i18n
'
import
{
useTaskState
}
from
'
./use-task-state
'
import
{
useProcessState
}
from
'
./use-process-state
'
import
StateCard
from
'
./state-card
'
import
DefinitionCard
from
'
./definition-card
'
...
...
@@ -37,20 +30,34 @@ export default defineComponent({
const
{
t
}
=
useI18n
()
const
dateRef
=
ref
([
getTime
(
startOfToday
()),
Date
.
now
()])
const
{
getTaskState
}
=
useTaskState
()
const
{
getProcessState
}
=
useProcessState
()
let
taskStateRef
=
ref
()
let
processStateRef
=
ref
()
onMounted
(()
=>
{
taskStateRef
.
value
=
getTaskState
(
dateRef
.
value
)
processStateRef
.
value
=
getProcessState
(
dateRef
.
value
)
})
const
handleTaskDate
=
(
val
:
any
)
=>
{
taskStateRef
.
value
=
getTaskState
(
val
)
}
return
{
t
,
dateRef
,
handleTaskDate
,
taskStateRef
}
const
handleProcessDate
=
(
val
:
any
)
=>
{
processStateRef
.
value
=
getProcessState
(
val
)
}
return
{
t
,
dateRef
,
handleTaskDate
,
handleProcessDate
,
taskStateRef
,
processStateRef
,
}
},
render
()
{
const
{
t
,
dateRef
,
handleTaskDate
}
=
this
const
{
t
,
dateRef
,
handleTaskDate
,
handleProcessDate
}
=
this
return
(
<
div
>
...
...
@@ -68,6 +75,9 @@ export default defineComponent({
<
StateCard
title
=
{
t
(
'
home.process_state_statistics
'
)
}
date
=
{
dateRef
}
tableData
=
{
this
.
processStateRef
?.
value
.
table
}
chartData
=
{
this
.
processStateRef
?.
value
.
chart
}
onUpdateDatePickerValue
=
{
handleProcessDate
}
/>
</
NGi
>
</
NGrid
>
...
...
dolphinscheduler-ui-next/src/views/home/use-process-state.ts
浏览文件 @
427ee5ed
...
...
@@ -16,3 +16,41 @@
*/
import
{
useAsyncState
}
from
'
@vueuse/core
'
import
{
countProcessInstanceState
}
from
'
@/service/modules/projects-analysis
'
import
{
format
}
from
'
date-fns
'
import
{
TaskStateRes
}
from
'
@/service/modules/projects-analysis/types
'
import
{
StateData
}
from
'
./types
'
export
function
useProcessState
()
{
const
getProcessState
=
(
date
:
Array
<
number
>
)
=>
{
const
{
state
}
=
useAsyncState
(
countProcessInstanceState
({
startDate
:
format
(
date
[
0
],
'
yyyy-MM-dd HH:mm:ss
'
),
endDate
:
format
(
date
[
1
],
'
yyyy-MM-dd HH:mm:ss
'
),
projectCode
:
0
,
}).
then
((
res
:
TaskStateRes
):
StateData
=>
{
const
table
=
res
.
taskCountDtos
.
map
((
item
,
index
)
=>
{
return
{
id
:
index
+
1
,
state
:
item
.
taskStateType
,
number
:
item
.
count
,
}
})
const
chart
=
res
.
taskCountDtos
.
map
((
item
)
=>
{
return
{
value
:
item
.
count
,
name
:
item
.
taskStateType
,
}
})
return
{
table
,
chart
}
}),
{
table
:
[],
chart
:
[]
}
)
return
state
}
return
{
getProcessState
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录