Merge pull request #8952 from dataease/pr@dev-v2@fix_drill_loading_not_hide

fix(图表): 修复下钻后加载图标未消失导致点击事件失效
This commit is contained in:
wisonic-s 2024-04-03 18:37:13 +08:00 committed by GitHub
commit cd2f5bcfb1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -68,12 +68,12 @@ let chartData = shallowRef<Partial<Chart['data']>>({
const containerId = 'container-' + showPosition.value + '-' + view.value.id const containerId = 'container-' + showPosition.value + '-' + view.value.id
const viewTrack = ref(null) const viewTrack = ref(null)
const calcData = (view, callback) => { const calcData = async (view, callback) => {
if (view.tableId || view['dataFrom'] === 'template') { if (view.tableId || view['dataFrom'] === 'template') {
isError.value = false isError.value = false
const v = JSON.parse(JSON.stringify(view)) const v = JSON.parse(JSON.stringify(view))
getData(v) getData(v)
.then(res => { .then(async res => {
if (res.code && res.code !== 0) { if (res.code && res.code !== 0) {
isError.value = true isError.value = true
errMsg.value = res.msg errMsg.value = res.msg
@ -92,7 +92,8 @@ const calcData = (view, callback) => {
} }
} }
dvMainStore.setViewDataDetails(view.id, chartData.value) dvMainStore.setViewDataDetails(view.id, chartData.value)
renderChart(res, callback) await renderChart(res)
callback?.()
} }
}) })
.catch(() => { .catch(() => {
@ -100,13 +101,13 @@ const calcData = (view, callback) => {
}) })
} else { } else {
if (view.type === 'map') { if (view.type === 'map') {
renderChart(view, callback) await renderChart(view)
} }
callback?.() callback?.()
} }
} }
let curView let curView
const renderChart = async (view, callback?) => { const renderChart = async view => {
if (!view) { if (!view) {
return return
} }
@ -122,11 +123,10 @@ const renderChart = async (view, callback?) => {
recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value) recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
switch (chartView.library) { switch (chartView.library) {
case ChartLibraryType.L7_PLOT: case ChartLibraryType.L7_PLOT:
renderL7Plot(chart, chartView as L7PlotChartView<any, any>, callback) await renderL7Plot(chart, chartView as L7PlotChartView<any, any>)
break break
case ChartLibraryType.G2_PLOT: case ChartLibraryType.G2_PLOT:
renderG2Plot(chart, chartView as G2PlotChartView<any, any>) renderG2Plot(chart, chartView as G2PlotChartView<any, any>)
callback?.()
break break
default: default:
break break
@ -149,30 +149,25 @@ const dynamicAreaId = ref('')
const country = ref('') const country = ref('')
const appStore = useAppStoreWithOut() const appStore = useAppStoreWithOut()
const isDataEaseBi = computed(() => appStore.getIsDataEaseBi) const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
let mapTimer
const chartContainer = ref<HTMLElement>(null) const chartContainer = ref<HTMLElement>(null)
const renderL7Plot = (chart, chartView: L7PlotChartView<any, any>, callback?) => { const renderL7Plot = async (chart, chartView: L7PlotChartView<any, any>) => {
const map = parseJson(chart.customAttr).map const map = parseJson(chart.customAttr).map
let areaId = map.id let areaId = map.id
country.value = areaId.slice(0, 3) country.value = areaId.slice(0, 3)
if (dynamicAreaId.value) { if (dynamicAreaId.value) {
areaId = dynamicAreaId.value areaId = dynamicAreaId.value
} }
mapTimer && clearTimeout(mapTimer) myChart?.destroy()
mapTimer = setTimeout(async () => { if (chartContainer.value) {
myChart?.destroy() chartContainer.value.textContent = ''
if (chartContainer.value) { }
chartContainer.value.textContent = '' myChart = await chartView.drawChart({
} chartObj: myChart,
myChart = await chartView.drawChart({ container: containerId,
chartObj: myChart, chart,
container: containerId, areaId,
chart, action
areaId, })
action
})
callback?.()
}, 500)
} }
const action = param => { const action = param => {
@ -270,6 +265,7 @@ defineExpose({
let resizeObserver let resizeObserver
const TOLERANCE = 0.01 const TOLERANCE = 0.01
const RESIZE_MONITOR_CHARTS = ['map', 'bubble-map'] const RESIZE_MONITOR_CHARTS = ['map', 'bubble-map']
let mapTimer: number
onMounted(() => { onMounted(() => {
const containerDom = document.getElementById(containerId) const containerDom = document.getElementById(containerId)
const { offsetWidth, offsetHeight } = containerDom const { offsetWidth, offsetHeight } = containerDom
@ -286,7 +282,8 @@ onMounted(() => {
} }
preSize[0] = size.inlineSize preSize[0] = size.inlineSize
preSize[1] = size.blockSize preSize[1] = size.blockSize
renderChart(curView) mapTimer && clearTimeout(mapTimer)
mapTimer = setTimeout(() => renderChart(curView), 500)
}) })
resizeObserver.observe(containerDom) resizeObserver.observe(containerDom)
}) })