<script lang="ts" setup>
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
import { inject, nextTick, onMounted, reactive, ref, toRefs } from 'vue';
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
import { getDataInterfaceRes } from '#/api/systemData/dataInterface';
|
import CardHeader from '#/components/VisualPortal/Portal/CardHeader/index.vue';
|
import { getParamList } from '#/utils/jnpf';
|
|
interface State {
|
chart: any;
|
currOption: any;
|
chartData: any;
|
}
|
|
const props = defineProps(['activeData']);
|
const state = reactive<State>({
|
chart: null,
|
currOption: {},
|
chartData: {},
|
});
|
const { chartData } = toRefs(state);
|
const emitter: any = inject('emitter');
|
const chartRef = ref<EchartsUIType>();
|
const { renderEcharts, resize } = useEcharts(chartRef);
|
|
function init() {
|
if (props.activeData.dataType === 'dynamic') {
|
if (!props.activeData.propsApi) return;
|
const query = { paramList: getParamList(props.activeData.templateJson) };
|
getDataInterfaceRes(props.activeData.propsApi, query).then((res) => {
|
state.chartData = res.data || {};
|
renderEcharts(state.chartData);
|
});
|
} else {
|
state.chartData = props.activeData.option;
|
renderEcharts(state.chartData);
|
}
|
emitter.on(`eChart${props.activeData.i}`, () => {
|
nextTick(() => resize());
|
});
|
}
|
|
onMounted(() => init());
|
</script>
|
<template>
|
<a-card class="portal-card-box">
|
<template #title v-if="activeData.title">
|
<CardHeader :title="activeData.title" :card="activeData.card" />
|
</template>
|
<div class="portal-card-body h-full">
|
<template v-if="chartData">
|
<EchartsUI ref="chartRef" class="box-inherit !h-full w-full p-[10px]" />
|
</template>
|
<div class="portal-common-noData" v-else>
|
<jnpf-empty />
|
</div>
|
</div>
|
</a-card>
|
</template>
|
