Commit d5d2e1471934a2dfdf0bba6f5fae3086f3d3e67c
1 parent
6a033c49
perf(src/hooks/): 优化自定义下拉选择器和图表交互,接口请求多次
Showing
4 changed files
with
50 additions
and
62 deletions
| 1 | 1 | /** | 
| 2 | 2 | * 重写select下拉框联动 | 
| 3 | 3 | */ | 
| 4 | -import {toRaw, toRefs} from 'vue' | |
| 4 | +import {toRefs} from 'vue' | |
| 5 | 5 | import {CreateComponentType} from '@/packages/index.d' | 
| 6 | 6 | import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore' | 
| 7 | -import {customRequest} from "@/api/external/customRequest"; | |
| 8 | -import {useFilterFn} from "@/hooks/external/useFilterFn"; | |
| 9 | 7 | |
| 10 | 8 | // 获取类型 | 
| 11 | 9 | type ChartEditStoreType = typeof useChartEditStore | 
| ... | ... | @@ -36,21 +34,10 @@ export const useChartInteract = ( | 
| 36 | 34 | Header.value[key] = param[item.interactFn[key]] | 
| 37 | 35 | } | 
| 38 | 36 | }) | 
| 39 | - const res = await customRequest(toRaw(chartEditStore.componentList[index].request)) | |
| 40 | - if (res) { | |
| 41 | - try { | |
| 42 | - const filter = chartEditStore.componentList[index].filter | |
| 43 | - const {value} = useFilterFn(filter, res) | |
| 44 | - if (!value) return | |
| 45 | - chartEditStore.componentList[index].option.dataset = value | |
| 46 | - } finally { | |
| 47 | - console.log | |
| 48 | - } | |
| 49 | - } | |
| 50 | 37 | }) | 
| 51 | 38 | } | 
| 52 | 39 | |
| 53 | 40 | // 联动事件触发的 type 变更时,清除当前绑定内容 | 
| 54 | -export const clearInteractEvent = (chartConfig: CreateComponentType) => { | |
| 41 | +// export const clearInteractEvent = (chartConfig: CreateComponentType) => { | |
| 55 | 42 | |
| 56 | -} | |
| 43 | +// } | ... | ... | 
| ... | ... | @@ -54,6 +54,8 @@ const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSe | 
| 54 | 54 | |
| 55 | 55 | use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent]) | 
| 56 | 56 | |
| 57 | +const chartEditStore = useChartEditStore() | |
| 58 | + | |
| 57 | 59 | const replaceMergeArr = ref<string[]>() | 
| 58 | 60 | |
| 59 | 61 | const option = computed(() => { | 
| ... | ... | @@ -195,7 +197,7 @@ watch( | 
| 195 | 197 | ) | 
| 196 | 198 | |
| 197 | 199 | //fix 修复v-chart图表绑定联动组件视图不更新问题 | 
| 198 | -const updateVChart = (newData:SocketReceiveMessageType) => { | |
| 200 | +const updateVChart =async (newData:SocketReceiveMessageType) => { | |
| 199 | 201 | //区分是普通请求还是ws请求 | 
| 200 | 202 | if (!isObject(newData) || !('dimensions' in newData)) { | 
| 201 | 203 | const { data } = newData | 
| ... | ... | @@ -207,26 +209,25 @@ const updateVChart = (newData:SocketReceiveMessageType) => { | 
| 207 | 209 | } | 
| 208 | 210 | }) | 
| 209 | 211 | } else { | 
| 210 | - //异步更新,同步更新会造成联动组件控制,图表不及时更新 | |
| 211 | - new Promise((resolve) => { | |
| 212 | - setTimeout(() => { | |
| 213 | - resolve( | |
| 214 | - vChartRef.value?.setOption( | |
| 215 | - { | |
| 216 | - ...option.value, | |
| 217 | - dataset: newData | |
| 218 | - }, | |
| 219 | - { | |
| 220 | - notMerge: true | |
| 221 | - } | |
| 222 | - ) | |
| 223 | - ) | |
| 224 | - }, 100) | |
| 212 | + //异步更新,同步更新会造成联动组件控制,图表不及时更新 | |
| 213 | + await nextTick().then(()=>{ | |
| 214 | + vChartRef.value?.setOption( | |
| 215 | + { | |
| 216 | + ...option.value, | |
| 217 | + dataset: newData | |
| 218 | + }, | |
| 219 | + { | |
| 220 | + notMerge: true | |
| 221 | + } | |
| 222 | + ) | |
| 225 | 223 | }) | 
| 226 | 224 | } | 
| 227 | 225 | } | 
| 228 | 226 | |
| 229 | 227 | const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => { | 
| 228 | + const index = chartEditStore.fetchTargetIndex(props.chartConfig.id) | |
| 229 | + if (index === -1) return | |
| 230 | + chartEditStore.componentList[index].option.dataset = newData | |
| 230 | 231 | updateVChart(newData) | 
| 231 | 232 | }) | 
| 232 | 233 | ... | ... | 
| ... | ... | @@ -54,6 +54,8 @@ const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSe | 
| 54 | 54 | |
| 55 | 55 | use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent]) | 
| 56 | 56 | |
| 57 | +const chartEditStore = useChartEditStore() | |
| 58 | + | |
| 57 | 59 | const replaceMergeArr = ref<string[]>() | 
| 58 | 60 | |
| 59 | 61 | const option = computed(() => { | 
| ... | ... | @@ -194,7 +196,7 @@ watch( | 
| 194 | 196 | ) | 
| 195 | 197 | |
| 196 | 198 | //fix 修复v-chart图表绑定联动组件视图不更新问题 | 
| 197 | -const updateVChart = (newData:SocketReceiveMessageType) => { | |
| 199 | +const updateVChart =async (newData:SocketReceiveMessageType) => { | |
| 198 | 200 | //区分是普通请求还是ws请求 | 
| 199 | 201 | if (!isObject(newData) || !('dimensions' in newData)) { | 
| 200 | 202 | const { data } = newData | 
| ... | ... | @@ -207,25 +209,24 @@ const updateVChart = (newData:SocketReceiveMessageType) => { | 
| 207 | 209 | }) | 
| 208 | 210 | } else { | 
| 209 | 211 | //异步更新,同步更新会造成联动组件控制,图表不及时更新 | 
| 210 | - new Promise((resolve) => { | |
| 211 | - setTimeout(() => { | |
| 212 | - resolve( | |
| 213 | - vChartRef.value?.setOption( | |
| 214 | - { | |
| 215 | - ...option.value, | |
| 216 | - dataset: newData | |
| 217 | - }, | |
| 218 | - { | |
| 219 | - notMerge: true | |
| 220 | - } | |
| 221 | - ) | |
| 222 | - ) | |
| 223 | - }, 100) | |
| 212 | + await nextTick().then(()=>{ | |
| 213 | + vChartRef.value?.setOption( | |
| 214 | + { | |
| 215 | + ...option.value, | |
| 216 | + dataset: newData | |
| 217 | + }, | |
| 218 | + { | |
| 219 | + notMerge: true | |
| 220 | + } | |
| 221 | + ) | |
| 224 | 222 | }) | 
| 225 | 223 | } | 
| 226 | 224 | } | 
| 227 | 225 | |
| 228 | 226 | const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => { | 
| 227 | + const index = chartEditStore.fetchTargetIndex(props.chartConfig.id) | |
| 228 | + if (index === -1) return | |
| 229 | + chartEditStore.componentList[index].option.dataset = newData | |
| 229 | 230 | updateVChart(newData) | 
| 230 | 231 | }) | 
| 231 | 232 | ... | ... | 
| ... | ... | @@ -226,7 +226,7 @@ watch( | 
| 226 | 226 | ) | 
| 227 | 227 | |
| 228 | 228 | //fix 修复v-chart图表绑定联动组件视图不更新问题 | 
| 229 | -const updateVChart = (newData:SocketReceiveMessageType) => { | |
| 229 | +const updateVChart =async (newData:SocketReceiveMessageType) => { | |
| 230 | 230 | //区分是普通请求还是ws请求 | 
| 231 | 231 | if (!isObject(newData) || !('dimensions' in newData)) { | 
| 232 | 232 | const { data } = newData | 
| ... | ... | @@ -239,25 +239,24 @@ const updateVChart = (newData:SocketReceiveMessageType) => { | 
| 239 | 239 | }) | 
| 240 | 240 | } else { | 
| 241 | 241 | //异步更新,同步更新会造成联动组件控制,图表不及时更新 | 
| 242 | - new Promise((resolve) => { | |
| 243 | - setTimeout(() => { | |
| 244 | - resolve( | |
| 245 | - vChartRef.value?.setOption( | |
| 246 | - { | |
| 247 | - ...option.value, | |
| 248 | - dataset: newData | |
| 249 | - }, | |
| 250 | - { | |
| 251 | - notMerge: true | |
| 252 | - } | |
| 253 | - ) | |
| 254 | - ) | |
| 255 | - }, 100) | |
| 242 | + await nextTick().then(()=>{ | |
| 243 | + vChartRef.value?.setOption( | |
| 244 | + { | |
| 245 | + ...option.value, | |
| 246 | + dataset: newData | |
| 247 | + }, | |
| 248 | + { | |
| 249 | + notMerge: true | |
| 250 | + } | |
| 251 | + ) | |
| 256 | 252 | }) | 
| 257 | 253 | } | 
| 258 | 254 | } | 
| 259 | 255 | |
| 260 | 256 | const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => { | 
| 257 | + const index = chartEditStore.fetchTargetIndex(props.chartConfig.id) | |
| 258 | + if (index === -1) return | |
| 259 | + chartEditStore.componentList[index].option.dataset = newData | |
| 261 | 260 | updateVChart(newData) | 
| 262 | 261 | }) | 
| 263 | 262 | ... | ... |