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 | ... | ... |