diff --git a/frontend/src/views/dashboard/components/sq-view/index.vue b/frontend/src/views/dashboard/components/sq-view/index.vue index 38b67308..b2a11b49 100644 --- a/frontend/src/views/dashboard/components/sq-view/index.vue +++ b/frontend/src/views/dashboard/components/sq-view/index.vue @@ -2,6 +2,7 @@ import ChartComponent from '@/views/chat/component/ChartComponent.vue' import icon_window_mini_outlined from '@/assets/svg/icon_window-mini_outlined.svg' import SqViewDisplay from '@/views/dashboard/components/sq-view/index.vue' +import _ from 'lodash' const props = defineProps({ viewInfo: { type: Object, @@ -19,7 +20,7 @@ const props = defineProps({ }, }) -import { computed, nextTick, ref } from 'vue' +import { computed, nextTick, onMounted, ref } from 'vue' import { useI18n } from 'vue-i18n' import ChartPopover from '@/views/chat/chat-block/ChartPopover.vue' import ICON_TABLE from '@/assets/svg/chart/icon_form_outlined.svg' @@ -34,8 +35,9 @@ const currentChartType = ref(undefined) const renderChart = () => { //@ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - chartRef.value?.renderChart + chartRef.value?.destroyChart() + //@ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions + chartRef.value?.renderChart() } const enlargeDialogVisible = ref(false) @@ -47,7 +49,7 @@ const enlargeView = () => { const chartTypeList = computed(() => { const _list = [] if (props.viewInfo.chart) { - switch (props.viewInfo.chart.type) { + switch (props.viewInfo.chart['sourceType']) { case 'table': break case 'column': @@ -85,14 +87,36 @@ function changeTable() { onTypeChange('table') } +const chartType = computed({ + get() { + if (currentChartType.value) { + return currentChartType.value + } + return props.viewInfo.chart['sourceType'] ?? 'table' + }, + set(v) { + currentChartType.value = v + }, +}) + function onTypeChange(val: any) { + chartType.value = val // eslint-disable-next-line vue/no-mutating-props props.viewInfo.chart.type = val nextTick(() => { + //@ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions + chartRef.value?.destroyChart() //@ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions chartRef.value?.renderChart() }) } + +onMounted(() => { + // eslint-disable-next-line vue/no-mutating-props + props.viewInfo.chart['sourceType'] = + props.viewInfo.chart['sourceType'] ?? props.viewInfo.chart.type +}) + defineExpose({ renderChart, enlargeView, @@ -111,7 +135,7 @@ defineExpose({ @@ -137,7 +161,7 @@ defineExpose({ v-if="viewInfo.id" :id="outerId || viewInfo.id" ref="chartRef" - :type="viewInfo.chart.type" + :type="chartType" :columns="viewInfo.chart.columns" :x="viewInfo.chart?.xAxis" :y="viewInfo.chart?.yAxis" diff --git a/frontend/src/views/dashboard/editor/Toolbar.vue b/frontend/src/views/dashboard/editor/Toolbar.vue index 5100504a..8d2a4821 100644 --- a/frontend/src/views/dashboard/editor/Toolbar.vue +++ b/frontend/src/views/dashboard/editor/Toolbar.vue @@ -136,7 +136,9 @@ const backToMain = () => { const addChatChart = (views: any) => { views.forEach((view: any) => { - emits('addComponent', 'SQView', cloneDeep(view)) + const target = cloneDeep(view) + delete target.chart.sourceType + emits('addComponent', 'SQView', target) }) ElMessage({ type: 'success',