This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 651f4ad [Feature][UI Next] Add project workflow monitor. (#7991)
651f4ad is described below
commit 651f4ad2c0cb66b1080264650720aaf822bc4019
Author: songjianet <[email protected]>
AuthorDate: Thu Jan 13 15:28:11 2022 +0800
[Feature][UI Next] Add project workflow monitor. (#7991)
---
.../src/layouts/content/use-dataList.ts | 2 +-
.../src/router/modules/projects.ts | 10 ++--
.../home/{ => components}/definition-card.tsx | 2 +-
.../src/views/home/{ => components}/state-card.tsx | 4 +-
dolphinscheduler-ui-next/src/views/home/index.tsx | 4 +-
dolphinscheduler-ui-next/src/views/login/index.tsx | 2 +-
.../src/views/profile/{ => components}/info.tsx | 4 +-
.../src/views/profile/index.tsx | 2 +-
.../list/{ => components}/project-modal.tsx | 2 +-
.../project/list/{ => components}/table-action.tsx | 24 ---------
.../src/views/project/list/index.tsx | 2 +-
.../src/views/project/list/use-table.ts | 8 ++-
.../components}/definition-card.tsx | 17 ++++---
.../workflow-monitor/components}/state-card.tsx | 4 +-
.../{home => project/workflow-monitor}/index.tsx | 10 ++--
.../info.tsx => project/workflow-monitor/types.ts} | 41 +++++++--------
.../workflow-monitor/use-process-definition.ts | 43 ++++++++++++++++
.../project/workflow-monitor/use-process-state.ts | 59 ++++++++++++++++++++++
.../workflow-monitor/use-table.ts} | 35 +++++--------
.../project/workflow-monitor/use-task-state.ts | 59 ++++++++++++++++++++++
20 files changed, 235 insertions(+), 99 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
index 420cdfb..7b0a725 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
@@ -81,7 +81,7 @@ export function useDataList() {
},
{
label: t('menu.project'),
- key: 'project',
+ key: 'projects',
icon: renderIcon(ProfileOutlined),
isShowSide: false,
children: [
diff --git a/dolphinscheduler-ui-next/src/router/modules/projects.ts
b/dolphinscheduler-ui-next/src/router/modules/projects.ts
index dbb25e2..72badb8 100644
--- a/dolphinscheduler-ui-next/src/router/modules/projects.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/projects.ts
@@ -22,6 +22,10 @@ import utils from '@/utils'
const modules = import.meta.glob('/src/views/**/**.tsx')
const components: { [key: string]: Component } = utils.mapping(modules)
+console.log('components', components)
+
+console.log(components)
+
export default {
path: '/projects',
name: 'projects',
@@ -38,9 +42,9 @@ export default {
},
},
{
- path: '/projects/:projectCode/index',
- name: 'projects-index',
- component: components['home'],
+ path: '/projects/:projectCode/workflow-monitor',
+ name: 'workflow-monitor',
+ component: components['workflow-monitor'],
meta: {
title: '工作流监控',
},
diff --git a/dolphinscheduler-ui-next/src/views/home/definition-card.tsx
b/dolphinscheduler-ui-next/src/views/home/components/definition-card.tsx
similarity index 96%
copy from dolphinscheduler-ui-next/src/views/home/definition-card.tsx
copy to dolphinscheduler-ui-next/src/views/home/components/definition-card.tsx
index e4f5f6d..eb209c1 100644
--- a/dolphinscheduler-ui-next/src/views/home/definition-card.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/components/definition-card.tsx
@@ -16,7 +16,7 @@
*/
import { defineComponent, PropType } from 'vue'
-import { useProcessDefinition } from './use-process-definition'
+import { useProcessDefinition } from '../use-process-definition'
import BarChart from '@/components/chart/modules/Bar'
import Card from '@/components/card'
diff --git a/dolphinscheduler-ui-next/src/views/home/state-card.tsx
b/dolphinscheduler-ui-next/src/views/home/components/state-card.tsx
similarity index 96%
copy from dolphinscheduler-ui-next/src/views/home/state-card.tsx
copy to dolphinscheduler-ui-next/src/views/home/components/state-card.tsx
index 4674f76..3a398b1 100644
--- a/dolphinscheduler-ui-next/src/views/home/state-card.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/components/state-card.tsx
@@ -16,11 +16,11 @@
*/
import { defineComponent, PropType } from 'vue'
-import { useTable } from './use-table'
+import { useTable } from '../use-table'
import { NDataTable, NDatePicker, NGrid, NGi } from 'naive-ui'
import PieChart from '@/components/chart/modules/Pie'
import Card from '@/components/card'
-import type { StateTableData, StateChartData } from './types'
+import type { StateTableData, StateChartData } from '../types'
const props = {
title: {
diff --git a/dolphinscheduler-ui-next/src/views/home/index.tsx
b/dolphinscheduler-ui-next/src/views/home/index.tsx
index 1e39be3..e37fdb4 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/index.tsx
@@ -21,8 +21,8 @@ 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'
+import StateCard from './components/state-card'
+import DefinitionCard from './components/definition-card'
export default defineComponent({
name: 'home',
diff --git a/dolphinscheduler-ui-next/src/views/login/index.tsx
b/dolphinscheduler-ui-next/src/views/login/index.tsx
index 0ebea90..6e9e3ed 100644
--- a/dolphinscheduler-ui-next/src/views/login/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/login/index.tsx
@@ -22,7 +22,7 @@ import { useForm } from './use-form'
import { useTranslate } from './use-translate'
import { useLogin } from './use-login'
import { useLocalesStore } from '@/store/locales/locales'
-import { useThemeStore } from "@/store/theme/theme";
+import { useThemeStore } from '@/store/theme/theme'
const login = defineComponent({
name: 'login',
diff --git a/dolphinscheduler-ui-next/src/views/profile/info.tsx
b/dolphinscheduler-ui-next/src/views/profile/components/info.tsx
similarity index 93%
copy from dolphinscheduler-ui-next/src/views/profile/info.tsx
copy to dolphinscheduler-ui-next/src/views/profile/components/info.tsx
index aeb8eba..de5b381 100644
--- a/dolphinscheduler-ui-next/src/views/profile/info.tsx
+++ b/dolphinscheduler-ui-next/src/views/profile/components/info.tsx
@@ -16,8 +16,8 @@
*/
import { defineComponent } from 'vue'
-import { useProfile } from './use-profile'
-import styles from './info.module.scss'
+import { useProfile } from '../use-profile'
+import styles from '../info.module.scss'
const Info = defineComponent({
name: 'Info',
diff --git a/dolphinscheduler-ui-next/src/views/profile/index.tsx
b/dolphinscheduler-ui-next/src/views/profile/index.tsx
index 0c54413..96756db 100644
--- a/dolphinscheduler-ui-next/src/views/profile/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/profile/index.tsx
@@ -29,7 +29,7 @@ import { useUserinfo } from './use-userinfo'
import { useUpdate } from './use-update'
import Card from '@/components/card'
import Modal from '@/components/modal'
-import Info from './info'
+import Info from './components/info'
import utils from '@/utils'
const profile = defineComponent({
diff --git a/dolphinscheduler-ui-next/src/views/project/list/project-modal.tsx
b/dolphinscheduler-ui-next/src/views/project/list/components/project-modal.tsx
similarity index 98%
rename from dolphinscheduler-ui-next/src/views/project/list/project-modal.tsx
rename to
dolphinscheduler-ui-next/src/views/project/list/components/project-modal.tsx
index 63a5835..73a1821 100644
--- a/dolphinscheduler-ui-next/src/views/project/list/project-modal.tsx
+++
b/dolphinscheduler-ui-next/src/views/project/list/components/project-modal.tsx
@@ -17,7 +17,7 @@
import { defineComponent, PropType, toRefs, onMounted } from 'vue'
import { NForm, NFormItem, NInput } from 'naive-ui'
-import { useForm } from './use-form'
+import { useForm } from '../use-form'
import Modal from '@/components/modal'
import { createProject, updateProject } from '@/service/modules/projects'
diff --git a/dolphinscheduler-ui-next/src/views/project/list/table-action.tsx
b/dolphinscheduler-ui-next/src/views/project/list/components/table-action.tsx
similarity index 84%
rename from dolphinscheduler-ui-next/src/views/project/list/table-action.tsx
rename to
dolphinscheduler-ui-next/src/views/project/list/components/table-action.tsx
index 3215c16..e2cd06e 100644
--- a/dolphinscheduler-ui-next/src/views/project/list/table-action.tsx
+++
b/dolphinscheduler-ui-next/src/views/project/list/components/table-action.tsx
@@ -87,30 +87,6 @@ const TableAction = defineComponent({
</NTooltip>
<NTooltip trigger={'hover'}>
{{
- default: () => t('project.list.edit'),
- trigger: () => (
- <NButton
- size='small'
- type='info'
- tag='div'
- onClick={() =>
- handleEditProject(
- this.row.code,
- this.row.name,
- this.row.description
- )
- }
- circle
- >
- <NIcon>
- <EditOutlined />
- </NIcon>
- </NButton>
- ),
- }}
- </NTooltip>
- <NTooltip trigger={'hover'}>
- {{
default: () => t('project.list.delete'),
trigger: () => (
<NButton size='small' type='error' circle>
diff --git a/dolphinscheduler-ui-next/src/views/project/list/index.tsx
b/dolphinscheduler-ui-next/src/views/project/list/index.tsx
index 0bf2df2..41fde7e 100644
--- a/dolphinscheduler-ui-next/src/views/project/list/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/project/list/index.tsx
@@ -29,7 +29,7 @@ import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import styles from './index.module.scss'
import Card from '@/components/card'
-import ProjectModal from './project-modal'
+import ProjectModal from './components/project-modal'
const list = defineComponent({
name: 'list',
diff --git a/dolphinscheduler-ui-next/src/views/project/list/use-table.ts
b/dolphinscheduler-ui-next/src/views/project/list/use-table.ts
index ab2b974..b205111 100644
--- a/dolphinscheduler-ui-next/src/views/project/list/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/project/list/use-table.ts
@@ -20,8 +20,10 @@ import { useI18n } from 'vue-i18n'
import { useAsyncState } from '@vueuse/core'
import { queryProjectListPaging } from '@/service/modules/projects'
import { format } from 'date-fns'
-import TableAction from './table-action'
+import { useRouter } from 'vue-router'
+import TableAction from './components/table-action'
import styles from './index.module.scss'
+import type { Router } from 'vue-router'
import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
import type { ProjectRes } from '@/service/modules/projects/types'
@@ -34,6 +36,7 @@ export function useTable(
resetTableData = () => {}
) {
const { t } = useI18n()
+ const router: Router = useRouter()
const columns: TableColumns<any> = [
{ title: '#', key: 'index' },
@@ -45,7 +48,8 @@ export function useTable(
'a',
{
class: styles.links,
- onClick: () => {},
+ onClick: () =>
+ router.push({ path: `/projects/${row.code}/workflow-monitor` }),
},
{
default: () => {
diff --git a/dolphinscheduler-ui-next/src/views/home/definition-card.tsx
b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/definition-card.tsx
similarity index 85%
rename from dolphinscheduler-ui-next/src/views/home/definition-card.tsx
rename to
dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/definition-card.tsx
index e4f5f6d..c55d66f 100644
--- a/dolphinscheduler-ui-next/src/views/home/definition-card.tsx
+++
b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/definition-card.tsx
@@ -16,7 +16,7 @@
*/
import { defineComponent, PropType } from 'vue'
-import { useProcessDefinition } from './use-process-definition'
+import { useProcessDefinition } from '../use-process-definition'
import BarChart from '@/components/chart/modules/Bar'
import Card from '@/components/card'
@@ -39,18 +39,19 @@ const DefinitionCard = defineComponent({
const { title, processDefinition } = this
return (
- <Card title={title}>
- {{
- default: () =>
- processDefinition.xAxisData.length > 0 &&
- processDefinition.seriesData.length > 0 && (
+ processDefinition.xAxisData.length > 0 &&
+ processDefinition.seriesData.length > 0 && (
+ <Card title={title}>
+ {{
+ default: () => (
<BarChart
xAxisData={processDefinition.xAxisData}
seriesData={processDefinition.seriesData}
/>
),
- }}
- </Card>
+ }}
+ </Card>
+ )
)
},
})
diff --git a/dolphinscheduler-ui-next/src/views/home/state-card.tsx
b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/state-card.tsx
similarity index 96%
rename from dolphinscheduler-ui-next/src/views/home/state-card.tsx
rename to
dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/state-card.tsx
index 4674f76..3a398b1 100644
--- a/dolphinscheduler-ui-next/src/views/home/state-card.tsx
+++
b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/state-card.tsx
@@ -16,11 +16,11 @@
*/
import { defineComponent, PropType } from 'vue'
-import { useTable } from './use-table'
+import { useTable } from '../use-table'
import { NDataTable, NDatePicker, NGrid, NGi } from 'naive-ui'
import PieChart from '@/components/chart/modules/Pie'
import Card from '@/components/card'
-import type { StateTableData, StateChartData } from './types'
+import type { StateTableData, StateChartData } from '../types'
const props = {
title: {
diff --git a/dolphinscheduler-ui-next/src/views/home/index.tsx
b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/index.tsx
similarity index 93%
copy from dolphinscheduler-ui-next/src/views/home/index.tsx
copy to dolphinscheduler-ui-next/src/views/project/workflow-monitor/index.tsx
index 1e39be3..cbfd92e 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/index.tsx
@@ -21,11 +21,11 @@ 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'
+import StateCard from './components/state-card'
+import DefinitionCard from './components/definition-card'
-export default defineComponent({
- name: 'home',
+const workflowMonitor = defineComponent({
+ name: 'workflow-monitor',
setup() {
const { t } = useI18n()
const dateRef = ref([getTime(startOfToday()), Date.now()])
@@ -90,3 +90,5 @@ export default defineComponent({
)
},
})
+
+export default workflowMonitor
diff --git a/dolphinscheduler-ui-next/src/views/profile/info.tsx
b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/types.ts
similarity index 59%
copy from dolphinscheduler-ui-next/src/views/profile/info.tsx
copy to dolphinscheduler-ui-next/src/views/project/workflow-monitor/types.ts
index aeb8eba..3874761 100644
--- a/dolphinscheduler-ui-next/src/views/profile/info.tsx
+++ b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/types.ts
@@ -15,28 +15,25 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
-import { useProfile } from './use-profile'
-import styles from './info.module.scss'
+interface DefinitionChartData {
+ xAxisData: Array<string>
+ seriesData: Array<number>
+}
-const Info = defineComponent({
- name: 'Info',
- render() {
- const { infoOptions } = useProfile()
+interface StateTableData {
+ index: number
+ number: number
+ state: string
+}
- return (
- <dl class={styles.container}>
- {infoOptions.value.map((item) => {
- return (
- <dd class={styles.item}>
- <span class={styles.label}>{item.key}: </span>
- <span>{item.value}</span>
- </dd>
- )
- })}
- </dl>
- )
- },
-})
+interface StateChartData {
+ value: number
+ name: string
+}
-export default Info
+interface StateData {
+ table: Array<StateTableData>
+ chart: Array<StateChartData>
+}
+
+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 0000000..3ab0451
--- /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 0000000..d5d5c8a
--- /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<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: 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/profile/info.tsx
b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-table.ts
similarity index 59%
rename from dolphinscheduler-ui-next/src/views/profile/info.tsx
rename to
dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-table.ts
index aeb8eba..3833e9e 100644
--- a/dolphinscheduler-ui-next/src/views/profile/info.tsx
+++ b/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-table.ts
@@ -15,28 +15,19 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
-import { useProfile } from './use-profile'
-import styles from './info.module.scss'
+import { useI18n } from 'vue-i18n'
+import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
-const Info = defineComponent({
- name: 'Info',
- render() {
- const { infoOptions } = useProfile()
+export function useTable() {
+ const { t } = useI18n()
- return (
- <dl class={styles.container}>
- {infoOptions.value.map((item) => {
- return (
- <dd class={styles.item}>
- <span class={styles.label}>{item.key}: </span>
- <span>{item.value}</span>
- </dd>
- )
- })}
- </dl>
- )
- },
-})
+ const columnsRef: TableColumns<any> = [
+ { title: '#', key: 'index' },
+ { title: t('home.number'), key: 'number' },
+ { title: t('home.state'), key: 'state' },
+ ]
-export default Info
+ 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 0000000..74fa45a
--- /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<number>) => {
+ 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 }
+}
