admin 节点

wujingjing

2024-12-10 6d5277904cd93216154d1ae8d8d452ff01725c55

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<template>
    <div class="h-full" v-loading="firstLoading">
        <TreeGraph v-if="graphData" :data="graphData" class="h-full" :maxCount="maxCount" />
    </div>
</template>
 
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import TreeGraph from '/@/components/graph/treeGraph/TreeGraph.vue';
import router from '/@/router';
import { getMetricAgentListByPost, getMetricNameListByPost } from '/@/api/metrics';
import { OrgTreeItem } from './types';
 
const agentId = router.currentRoute.value.query.id as string;
const maxCount = ref(null);
const graphData = ref(null);
const firstLoading = ref(false);
const convertOrgTreeToTreeNode = (orgTreeData: OrgTreeItem) => {
    const treeData = {
        id: orgTreeData.treeId,
        label: orgTreeData.label,
        data: orgTreeData,
        children: orgTreeData.children?.length > 0 ? orgTreeData.children.map((item) => convertOrgTreeToTreeNode(item)) : [],
    };
    return treeData;
};
const getFirstOrgTreeList = async () => {
    // const res = await GetSMCenterFirstOrgTreeList();
    /** @description 维度数量 */
    let dimensionCount = 0;
    /** @description 指标数量 */
    let metricsCount = 0;
    const allAgentRes = getMetricAgentListByPost();
    const metricsRes = getMetricNameListByPost({
        agent_id: agentId,
    });
    const [allAgentResult, metricsResult] = await Promise.all([allAgentRes, metricsRes]);
 
    const allAgentList = allAgentResult?.values ?? [];
    const metricsList = metricsResult?.values ?? [];
    // const foundAgent = allAgentList.find(item=>item.)
    metricsCount = metricsList.length;
    const foundAgent = allAgentList.find((item) => item.id === agentId);
    if (!foundAgent) return [];
 
    const agentTreeId = `agent-${foundAgent.id}`;
    let logicTree: OrgTreeItem = {
        treeId: agentTreeId,
        logicId: foundAgent.id,
        model: foundAgent,
        type: 'agent',
        get label() {
            return this.model.title;
        },
        level: 0,
        children: metricsList.map((curVal) => {
            const metricsTreeId = `${agentTreeId}-metrics-${curVal.id}`;
            const dimensionList = curVal.dimensions ?? [];
            const metrics: OrgTreeItem = {
                treeId: metricsTreeId,
                logicId: curVal.id,
                type: 'metrics',
 
                model: curVal,
                get label() {
                    return this.model.title;
                },
                level: 1,
                children: dimensionList.map((item) => {
                    const dimensionTreeId = `${metricsTreeId}-dimension-${item.id}`;
                    return {
                        treeId: dimensionTreeId,
                        logicId: item.id,
                        type: 'dimension',
                        model: item,
                        get label() {
                            return this.model.title;
                        },
                        level: 2,
                    };
                }),
            };
            dimensionCount += metrics.children.length;
 
            return metrics;
        }, []),
    };
    const resData = logicTree;
    const maxCount = Math.max(dimensionCount, metricsCount);
    return [resData, maxCount];
};
onMounted(async () => {
    if (!agentId) return;
    firstLoading.value = true;
 
    const [orgTreeData, maxLevelNodeCount] = await (getFirstOrgTreeList() as any).finally(() => {
        firstLoading.value = false;
    });
    maxCount.value = maxLevelNodeCount;
    graphData.value = convertOrgTreeToTreeNode(orgTreeData);
});
</script>
<style scoped lang="scss"></style>