|
|
@@ -84,7 +84,7 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
- <!-- 状态分布 -->
|
|
|
+ <!-- 状态分布 + 各节点统计 -->
|
|
|
<el-row :gutter="16" class="chart-row">
|
|
|
<el-col :span="12">
|
|
|
<el-card shadow="hover" v-loading="loadingStatus">
|
|
|
@@ -95,6 +95,15 @@
|
|
|
<el-empty v-else description="暂无数据" />
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card shadow="hover" v-loading="loadingNodeCount">
|
|
|
+ <template #header>
|
|
|
+ <span>各节点统计</span>
|
|
|
+ </template>
|
|
|
+ <v-chart v-if="nodeCountData.length > 0" :option="nodeCountOption" autoresize style="height: 60px;" :style="{ height: Math.max(nodeCountData.length * 36, 200) + 'px' }" />
|
|
|
+ <el-empty v-else description="暂无数据" />
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 效率 + 节点停留 -->
|
|
|
@@ -127,23 +136,6 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
- <el-row :gutter="16" style="margin-bottom: 16px;">
|
|
|
- <el-col :span="12">
|
|
|
- <el-card shadow="hover" v-loading="loadingNodeCount">
|
|
|
- <template #header>
|
|
|
- <div class="detail-header">
|
|
|
- <span>各节点统计</span>
|
|
|
- <el-select v-model="nodeCountDefId" placeholder="请选择流程" style="width: 260px;" @change="loadNodeCount">
|
|
|
- <el-option v-for="def in definitionList" :key="def.id" :label="def.name" :value="def.id" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <v-chart v-if="nodeCountData.length > 0" :option="nodeCountOption" autoresize style="height: 60px;" :style="{ height: Math.max(nodeCountData.length * 36, 200) + 'px' }" />
|
|
|
- <el-empty v-else description="请选择流程查看各节点统计" />
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
<el-card shadow="hover" class="detail-card" v-loading="loadingInstanceList">
|
|
|
<template #header>
|
|
|
<div class="detail-header">
|
|
|
@@ -403,7 +395,8 @@ async function loadAll() {
|
|
|
loadOverview(),
|
|
|
loadStatusDistribution(),
|
|
|
loadEfficiency(),
|
|
|
- loadNodes()
|
|
|
+ loadNodes(),
|
|
|
+ loadNodeCount()
|
|
|
])
|
|
|
await loadStuck(1)
|
|
|
} finally {
|
|
|
@@ -504,6 +497,7 @@ function buildEfficiencyOption(list: ProcessEfficiency[]) {
|
|
|
name: '平均耗时',
|
|
|
type: 'bar',
|
|
|
data: list.map((i) => i.avgDurationMinutes),
|
|
|
+ barMaxWidth: 48,
|
|
|
itemStyle: { color: colorPalette[0], borderRadius: [6, 6, 0, 0] }
|
|
|
}
|
|
|
]
|
|
|
@@ -545,6 +539,7 @@ function buildNodeOption(list: NodeStayStat[]) {
|
|
|
name: '平均停留',
|
|
|
type: 'bar',
|
|
|
data: top.map((i) => i.avgStayMinutes),
|
|
|
+ barMaxWidth: 48,
|
|
|
itemStyle: {
|
|
|
color: (p: any) => {
|
|
|
const v = top[p.dataIndex].avgStayMinutes
|
|
|
@@ -599,7 +594,6 @@ async function loadInstanceList() {
|
|
|
}
|
|
|
|
|
|
// 各节点统计图
|
|
|
-const nodeCountDefId = ref<number | null>(null)
|
|
|
const nodeCountData = ref<{ nodeName: string; count: number }[]>([])
|
|
|
const loadingNodeCount = ref(false)
|
|
|
const nodeCountOption = computed(() => ({
|
|
|
@@ -616,19 +610,18 @@ const nodeCountOption = computed(() => ({
|
|
|
}))
|
|
|
|
|
|
async function loadNodeCount() {
|
|
|
- if (!nodeCountDefId.value) return
|
|
|
+ if (!query.processDefinitionId) {
|
|
|
+ nodeCountData.value = []
|
|
|
+ return
|
|
|
+ }
|
|
|
loadingNodeCount.value = true
|
|
|
- try { nodeCountData.value = await getNodeCount(nodeCountDefId.value) } catch { nodeCountData.value = [] }
|
|
|
+ try { nodeCountData.value = await getNodeCount(query.processDefinitionId) } catch { nodeCountData.value = [] }
|
|
|
finally { loadingNodeCount.value = false }
|
|
|
}
|
|
|
|
|
|
async function loadDefinitionsFull() {
|
|
|
try {
|
|
|
definitionList.value = await listEnabled()
|
|
|
- if (definitionList.value.length > 0 && !nodeCountDefId.value) {
|
|
|
- nodeCountDefId.value = definitionList.value[definitionList.value.length - 1].id
|
|
|
- loadNodeCount()
|
|
|
- }
|
|
|
} catch { /* ignore */ }
|
|
|
}
|
|
|
|