<template>
|
<yw-dialog v-model="isShow" :showFooter="false" width="500" :title="title">
|
<div v-if="item.alias && Object.keys(item.alias).length > 0">
|
<div v-for="key in Object.keys(item.alias)" :key="key">
|
<span>{{ key }}：</span>
|
<span>{{ item.alias[key].join(',') }}</span>
|
</div>
|
</div>
|
</yw-dialog>
|
</template>
|
|
<script setup lang="ts" name="AliasDisplayDlg">
|
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(['item']);
|
const isShow = defineModel({
|
type: Boolean,
|
});
|
|
const tableData = ref([]);
|
const title = computed(() => props.item?.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.item.id,
|
});
|
tableData.value = parseData(res?.values);
|
}
|
);
|
</script>
|
<style scoped lang="scss">
|
:deep(.el-card__body) {
|
position: relative;
|
}
|
</style>
|
