<template>
|
<div class="relative" v-if="chartDlgIsShow && metricsList.length > 0">
|
<span
|
class="absolute right-[10px] top-[5px] ywifont ywicon-guanbi text-[#528abe] font-bold cursor-pointer"
|
style="z-index: 2"
|
@click="closeChartDlg"
|
></span>
|
<el-tabs v-model="activeTab" type="border-card">
|
<el-tab-pane lazy v-for="(item, index) in metricsList" :key="`${chartDlgKey}_${index}`" :label="item.title" :name="index"
|
><RecordSetDialog :modelValue="true" :isDialog="false" :height="height" :metrics="item" :tableHeight="tableHeight"
|
/></el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="EquipCurve">
|
import { onMounted, ref, watch } from 'vue';
|
import { isSharePage } from '/@/stores/chatRoom';
|
import RecordSetDialog from '../../recordSet/RecordSetDialog.vue';
|
const props = defineProps({
|
data: {
|
type: Object,
|
default: () => ({}),
|
},
|
quotaChartCol: {
|
type: Number,
|
default: null,
|
},
|
height: {
|
type: String,
|
default: '20rem',
|
},
|
tableHeight: {
|
type: Number,
|
},
|
});
|
const chartDlgIsShow = defineModel('isShow', {
|
type: Boolean,
|
default: false,
|
});
|
|
const chartDlgKey = ref('');
|
const activeTab = ref(0);
|
const metricsList = ref([]);
|
const resetTab = () => {
|
activeTab.value = 0;
|
};
|
const showCurve = () => {
|
if (isSharePage.value) return;
|
resetTab();
|
// chartDlgIsShow.value = true;
|
const quotaChartCol = props.quotaChartCol;
|
if (!quotaChartCol) {
|
chartDlgKey.value = '';
|
metricsList.value = [];
|
} else {
|
const str = props.data[props.quotaChartCol] ?? '[]';
|
chartDlgKey.value = str;
|
metricsList.value = JSON.parse(str);
|
}
|
};
|
const closeChartDlg = () => {
|
chartDlgIsShow.value = false;
|
};
|
|
watch(
|
() => props.data,
|
(val) => {
|
if (chartDlgIsShow.value && val) {
|
showCurve();
|
}
|
}
|
);
|
</script>
|
<style scoped lang="scss"></style>
|
