Bläddra i källkod

feat: 流程分析看板布局优化

- 各节点统计图表移入流程状态分布同一行右侧
- 移除各节点统计独立的流程选择器,改为跟随顶部全局流程筛选
- loadAll 时同步加载各节点统计
- 已完成流程效率、进行中节点停留统计柱状图增加 barMaxWidth: 48,避免数据量较少时柱子过宽
ye-zhaojia 1 vecka sedan
förälder
incheckning
f6bb8a3170
1 ändrade filer med 19 tillägg och 26 borttagningar
  1. 19 26
      src/views/analysis/index.vue

+ 19 - 26
src/views/analysis/index.vue

@@ -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 */ }
 }