Commit d5d2e1471934a2dfdf0bba6f5fae3086f3d3e67c

Authored by fengwotao
1 parent 6a033c49

perf(src/hooks/): 优化自定义下拉选择器和图表交互,接口请求多次

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