songjianet
3 years ago
committed by
GitHub
20 changed files with 501 additions and 41 deletions
@ -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 { defineComponent, PropType } from 'vue' |
||||
import { useProcessDefinition } from '../use-process-definition' |
||||
import BarChart from '@/components/chart/modules/Bar' |
||||
import Card from '@/components/card' |
||||
|
||||
const props = { |
||||
title: { |
||||
type: String as PropType<string>, |
||||
}, |
||||
} |
||||
|
||||
const DefinitionCard = defineComponent({ |
||||
name: 'DefinitionCard', |
||||
props, |
||||
setup() { |
||||
const { getProcessDefinition } = useProcessDefinition() |
||||
const processDefinition = getProcessDefinition() |
||||
|
||||
return { processDefinition } |
||||
}, |
||||
render() { |
||||
const { title, processDefinition } = this |
||||
|
||||
return ( |
||||
processDefinition.xAxisData.length > 0 && |
||||
processDefinition.seriesData.length > 0 && ( |
||||
<Card title={title}> |
||||
{{ |
||||
default: () => ( |
||||
<BarChart |
||||
xAxisData={processDefinition.xAxisData} |
||||
seriesData={processDefinition.seriesData} |
||||
/> |
||||
), |
||||
}} |
||||
</Card> |
||||
) |
||||
) |
||||
}, |
||||
}) |
||||
|
||||
export default DefinitionCard |
||||
@ -0,0 +1,90 @@
|
||||
/* |
||||
* 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, PropType } from 'vue' |
||||
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' |
||||
|
||||
const props = { |
||||
title: { |
||||
type: String as PropType<string>, |
||||
}, |
||||
date: { |
||||
type: Array as PropType<Array<any>>, |
||||
}, |
||||
tableData: { |
||||
type: Array as PropType<Array<StateTableData>>, |
||||
default: () => [], |
||||
}, |
||||
chartData: { |
||||
type: Array as PropType<Array<StateChartData>>, |
||||
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 ( |
||||
<Card title={title}> |
||||
{{ |
||||
default: () => ( |
||||
<NGrid x-gap={12} cols={2}> |
||||
<NGi>{chartData.length > 0 && <PieChart data={chartData} />}</NGi> |
||||
<NGi> |
||||
{tableData && ( |
||||
<NDataTable |
||||
columns={columnsRef} |
||||
data={tableData} |
||||
striped |
||||
size={'small'} |
||||
/> |
||||
)} |
||||
</NGi> |
||||
</NGrid> |
||||
), |
||||
'header-extra': () => ( |
||||
<NDatePicker |
||||
default-value={date} |
||||
onUpdateValue={onUpdateDatePickerValue} |
||||
size='small' |
||||
type='datetimerange' |
||||
clearable |
||||
/> |
||||
), |
||||
}} |
||||
</Card> |
||||
) |
||||
}, |
||||
}) |
||||
|
||||
export default StateCard |
||||
@ -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 ( |
||||
<div> |
||||
<NGrid x-gap={12} cols={2}> |
||||
<NGi> |
||||
<StateCard |
||||
title={t('home.task_state_statistics')} |
||||
date={dateRef} |
||||
tableData={this.taskStateRef?.value.table} |
||||
chartData={this.taskStateRef?.value.chart} |
||||
onUpdateDatePickerValue={handleTaskDate} |
||||
/> |
||||
</NGi> |
||||
<NGi> |
||||
<StateCard |
||||
title={t('home.process_state_statistics')} |
||||
date={dateRef} |
||||
tableData={this.processStateRef?.value.table} |
||||
chartData={this.processStateRef?.value.chart} |
||||
onUpdateDatePickerValue={handleProcessDate} |
||||
/> |
||||
</NGi> |
||||
</NGrid> |
||||
<NGrid cols={1} style='margin-top: 12px;'> |
||||
<NGi> |
||||
<DefinitionCard title={t('home.process_definition_statistics')} /> |
||||
</NGi> |
||||
</NGrid> |
||||
</div> |
||||
) |
||||
}, |
||||
}) |
||||
|
||||
export default workflowMonitor |
||||
@ -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<string> |
||||
seriesData: Array<number> |
||||
} |
||||
|
||||
interface StateTableData { |
||||
index: number |
||||
number: number |
||||
state: string |
||||
} |
||||
|
||||
interface StateChartData { |
||||
value: number |
||||
name: string |
||||
} |
||||
|
||||
interface StateData { |
||||
table: Array<StateTableData> |
||||
chart: Array<StateChartData> |
||||
} |
||||
|
||||
export { DefinitionChartData, StateTableData, StateChartData, StateData } |
||||
@ -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 } |
||||
} |
||||
@ -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 } |
||||
} |
||||
@ -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<any> = [ |
||||
{ title: '#', key: 'index' }, |
||||
{ title: t('home.number'), key: 'number' }, |
||||
{ title: t('home.state'), key: 'state' }, |
||||
] |
||||
|
||||
return { |
||||
columnsRef, |
||||
} |
||||
} |
||||
@ -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 } |
||||
} |
||||
Loading…
Reference in new issue