指标名称

wujingjing

2024-09-14 aba80535826581c34e3d8e84c1f1b1eb7320a195

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
<template>
    <yw-dialog v-model="isShow" :showFooter="false" width="1030" :title="title">
        <div class="h-full">
            <el-table class="h-full" :data="tableData" :span-method="objectSpanMethod" border>
                <el-table-column prop="title" width="100" label="标题" />
                <el-table-column label="维度" >
                    <el-table-column label="标题" prop="dimension.title"> </el-table-column>
                    <el-table-column label="类型" width="100" prop="dimension.type"> </el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </yw-dialog>
</template>
 
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import * as metricApi from '/@/api/metric';
import ywDialog from '/@/components/dialog/yw-dialog.vue';
import _ from 'lodash';
 
const props = defineProps(['metricItem']);
const isShow = defineModel({
    type: Boolean,
});
 
const tableData = ref([]);
const title = computed(() => props.metricItem?.title + '——指标名称');
 
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex === 0) {
        return {
            rowspan: row.rowspan,
            colspan: 1,
        };
    }
};
 
const parseData = (data: any[]) => {
    const finalData = (data ?? []).reduce((pre, cur) => {
        const dimensions = cur.dimensions;
        pre.push(
            ...dimensions.map((item, index) => ({
                ..._.omit(cur, 'dimensions'),
                id: cur.id + '_dimension_' + item.id,
                dimension: item,
                rowspan: index === 0 ? dimensions.length : undefined,
            }))
        );
        return pre;
    }, []);
    return finalData;
};
 
watch(
    () => isShow.value,
    async (val) => {
        if (!val) return;
 
        const res = await metricApi.getMetricNameListByPost({
            agent_id: props.metricItem.id,
        });
        tableData.value = parseData(res?.values);
    }
);
</script>
<style scoped lang="scss">
:deep(.el-card__body) {
    position: relative;
}
</style>