[Feature][UI Next] Add process state statistics. (#7781)

dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx

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

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

@@ -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 }
+}