检测计划统计功能

frontend/src/views/home/components/tree.vue

@@ -29,7 +29,7 @@
                 @node-click="handleNodeClick"
             >
                 <template #default="{ node, data }">
-                    <span class="custom-tree-node" style="display: flex; align-items: center;">
+                    <span class="custom-tree-node">
                         <!-- 父节点图标 -->
                         <Platform
                             v-if="!data.pid"
@@ -39,50 +39,52 @@
                             }"
                         />
                         <!-- 节点名称 -->
-                        <span>{{ node.label }}</span>
-                        <!-- 子节点右侧图标 + tooltip -->
-                        <el-tooltip
-                            v-if="
-                                node.label != '未检' &&
-                                node.label != '检测中' &&
-                                node.label != '检测完成' &&
-                                hasChildrenInPlanTable(node.data)
-                            "
-                            placement="top"
-                            :manual="true"
-                            content="子计划信息"
-                        >
-                            <List
-                                @click.stop="childDetail(node.data)"
-                                style="
-                                    width: 16px;
-                                    height: 16px;
-                                    margin-left: 8px;
-                                    cursor: pointer;
-                                    color: var(--el-color-primary);
-                                "
+                        <span class="node-label">{{ node.label }}</span>
+                        <span class="node-actions">
+                            <PieChart
+                                v-if="isCompletedPlanNode(node.data)"
+                                class="node-action-icon"
+                                @click.stop="openStatistics(node.data)"
+                                style="margin-right: 8px"
                             />
-                        </el-tooltip>
+                            <!-- 子节点右侧图标 + tooltip -->
+                            <el-tooltip
+                                v-if="
+                                    node.label != '未检' &&
+                                    node.label != '检测中' &&
+                                    node.label != '检测完成' &&
+                                    hasChildrenInPlanTable(node.data)
+                                "
+                                placement="top"
+                                :manual="true"
+                                content="子计划信息"
+                            >
+                                <List class="node-action-icon" @click.stop="childDetail(node.data)" />
+                            </el-tooltip>
+                        </span>
                     </span>
                 </template>
             </el-tree>
         </div>
     </div>
     <SourceOpen ref="openSourceView" :width="width" :height="height + 175"></SourceOpen>
+    <PlanStatisticsPopup ref="planStatisticsPopupRef" />
 </template>
 <script lang="ts" setup>
 import { type Plan } from '@/api/plan/interface'
-import { List, Menu, Platform } from '@element-plus/icons-vue'
+import { List, Menu, PieChart, Platform } from '@element-plus/icons-vue'
 import { nextTick, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCheckStore } from '@/stores/modules/check'
 import { ElTooltip } from 'element-plus'
 import SourceOpen from '@/views/plan/planList/components/childrenPlan.vue'
+import PlanStatisticsPopup from '@/views/plan/planList/components/planStatisticsPopup.vue'
 import { getPlanList } from '@/api/plan/plan.ts'
 import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
 import { useDictStore } from '@/stores/modules/dict'
 
 const openSourceView = ref()
+const planStatisticsPopupRef = ref<InstanceType<typeof PlanStatisticsPopup> | null>(null)
 const router = useRouter()
 const checkStore = useCheckStore()
 const filterText = ref('')
@@ -211,6 +213,14 @@ const childDetail = (data: Plan.ResPlan) => {
     }
 }
 
+const isCompletedPlanNode = (data: Partial<Plan.ResPlan>) => {
+    return Number(data.testState) === 2
+}
+
+const openStatistics = (data: Partial<Plan.ResPlan>) => {
+    planStatisticsPopupRef.value?.open(data)
+}
+
 function buildTree(flatList: any[]): any[] {
     const map = new Map()
     const tree: any[] = []
@@ -293,6 +303,40 @@ defineExpose({ getTreeData, clickTableToTree })
     margin-top: 12px;
 }
 
+:deep(.el-tree-node__content) {
+    padding-right: 6px;
+}
+
+.custom-tree-node {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+}
+
+.node-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.node-actions {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 8px;
+}
+
+.node-action-icon {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    color: var(--el-color-primary);
+}
+
 //.filter-tree span {
 //  font-size: 16px;
 //  display:block;