>,
+ default: () => [],
+ },
+}
+
+const StateCard = defineComponent({
+ name: 'StateCard',
+ props,
+ emits: ['updateDatePickerValue'],
+ setup(props, ctx) {
+ const onUpdateDatePickerValue = (val: any) => {
+ ctx.emit('updateDatePickerValue', val)
+ }
+
+ return { onUpdateDatePickerValue }
+ },
+ render() {
+ const { title, date, tableData, chartData, onUpdateDatePickerValue } = this
+ const { columnsRef } = useTable()
+
+ return (
+
+ {{
+ default: () => (
+
+ {chartData.length > 0 && }
+
+ {tableData && (
+
+ )}
+
+
+ ),
+ 'header-extra': () => (
+
+ ),
+ }}
+
+ )
+ },
+})
+
+export default StateCard
diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/index.tsx b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/index.tsx
new file mode 100644
index 0000000000..cbfd92e21c
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/index.tsx
@@ -0,0 +1,94 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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 './components/state-card'
+import DefinitionCard from './components/definition-card'
+
+const workflowMonitor = defineComponent({
+ name: 'workflow-monitor',
+ setup() {
+ 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)
+ }
+
+ const handleProcessDate = (val: any) => {
+ processStateRef.value = getProcessState(val)
+ }
+
+ return {
+ t,
+ dateRef,
+ handleTaskDate,
+ handleProcessDate,
+ taskStateRef,
+ processStateRef,
+ }
+ },
+ render() {
+ const { t, dateRef, handleTaskDate, handleProcessDate } = this
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ },
+})
+
+export default workflowMonitor
diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/types.ts b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/types.ts
new file mode 100644
index 0000000000..3874761d0c
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/types.ts
@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+interface DefinitionChartData {
+ xAxisData: Array
+ seriesData: Array
+}
+
+interface StateTableData {
+ index: number
+ number: number
+ state: string
+}
+
+interface StateChartData {
+ value: number
+ name: string
+}
+
+interface StateData {
+ table: Array
+ chart: Array
+}
+
+export { DefinitionChartData, StateTableData, StateChartData, StateData }
diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-definition.ts b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-definition.ts
new file mode 100644
index 0000000000..3ab0451821
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-definition.ts
@@ -0,0 +1,43 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useRoute } from 'vue-router'
+import { useAsyncState } from '@vueuse/core'
+import { countDefinitionByUser } from '@/service/modules/projects-analysis'
+import type { ProcessDefinitionRes } from '@/service/modules/projects-analysis/types'
+import type { DefinitionChartData } from './types'
+
+export function useProcessDefinition() {
+ const route = useRoute()
+
+ const getProcessDefinition = () => {
+ const { state } = useAsyncState(
+ countDefinitionByUser({
+ projectCode: Number(route.params.projectCode),
+ }).then((res: ProcessDefinitionRes): DefinitionChartData => {
+ const xAxisData = res.userList.map((item) => item.userName)
+ const seriesData = res.userList.map((item) => item.count)
+
+ return { xAxisData, seriesData }
+ }),
+ { xAxisData: [], seriesData: [] }
+ )
+ return state
+ }
+
+ return { getProcessDefinition }
+}
diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-state.ts b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-state.ts
new file mode 100644
index 0000000000..d5d5c8a2f4
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-state.ts
@@ -0,0 +1,59 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useRoute } from 'vue-router'
+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 route = useRoute()
+
+ const getProcessState = (date: Array) => {
+ 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: Number(route.params.projectCode),
+ }).then((res: TaskStateRes): StateData => {
+ const table = res.taskCountDtos.map((item, index) => {
+ return {
+ index: 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 }
+}
diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-table.ts b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-table.ts
new file mode 100644
index 0000000000..3833e9ef44
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-table.ts
@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useI18n } from 'vue-i18n'
+import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
+
+export function useTable() {
+ const { t } = useI18n()
+
+ const columnsRef: TableColumns = [
+ { title: '#', key: 'index' },
+ { title: t('home.number'), key: 'number' },
+ { title: t('home.state'), key: 'state' },
+ ]
+
+ return {
+ columnsRef,
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-task-state.ts b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-task-state.ts
new file mode 100644
index 0000000000..74fa45a619
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-task-state.ts
@@ -0,0 +1,59 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useRoute } from 'vue-router'
+import { useAsyncState } from '@vueuse/core'
+import { format } from 'date-fns'
+import { countTaskState } from '@/service/modules/projects-analysis'
+import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
+import type { StateData } from './types'
+
+export function useTaskState() {
+ const route = useRoute()
+
+ const getTaskState = (date: Array) => {
+ const { state } = useAsyncState(
+ countTaskState({
+ startDate: format(date[0], 'yyyy-MM-dd HH:mm:ss'),
+ endDate: format(date[1], 'yyyy-MM-dd HH:mm:ss'),
+ projectCode: Number(route.params.projectCode),
+ }).then((res: TaskStateRes): StateData => {
+ const table = res.taskCountDtos.map((item, index) => {
+ return {
+ index: 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 { getTaskState }
+}