<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
|
highlight-current-row
|
:headerCellStyle="{ backgroundColor: 'var(--el-table-header-bg-color)' }"
|
>
|
<el-table-column prop="title" label="名称" width="120" fixed="left" show-overflow-tooltip> </el-table-column>
|
<el-table-column prop="full_name" label="全称" width="170" show-overflow-tooltip> </el-table-column>
|
<el-table-column prop="metrics_define" label="定义" show-overflow-tooltip> </el-table-column>
|
<el-table-column prop="calcu_method" label="计算方法" width="120" show-overflow-tooltip> </el-table-column>
|
|
<el-table-column label="维度" prop="dimension" show-overflow-tooltip>
|
<el-table-column label="名称" width="100" prop="dimension.title" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="类型" width="95" prop="dimension.type" show-overflow-tooltip> </el-table-column>
|
</el-table-column>
|
</el-table>
|
</div>
|
</yw-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import _ from 'lodash';
|
import { computed, ref, watch } from 'vue';
|
import * as metricApi from '/@/api/metrics';
|
import ywDialog from '/@/components/dialog/yw-dialog.vue';
|
|
const props = defineProps(['metricItem']);
|
const isShow = defineModel({
|
type: Boolean,
|
});
|
|
const tableData = ref([]);
|
const title = computed(() => props.metricItem?.title + '——指标名称');
|
|
// 需要合并单元格的 prop
|
const GROUP_PROP = ['title', 'full_name', 'metrics_define', 'calcu_method'];
|
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
if (GROUP_PROP.includes(column.property)) {
|
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>
|
