Commit eb4ca64c5ff0c4cbd7c864561726fc4ee96b4688

Authored by fengtao
1 parent f40334bd

perf(src/packages/components): 优化联动组件,下拉选择和图表交互,选择选项,图表legend不匹配

1 1 /**
2   - * 重写select下拉框联动
  2 + * 重写select下拉框联动(下拉选择和输入框共用此hook)
3 3 */
4 4 import { toRefs } from 'vue'
5 5 import { CreateComponentType } from '@/packages/index.d'
... ... @@ -13,7 +13,8 @@ export const useChartInteract = (
13 13 chartConfig: CreateComponentType,
14 14 useChartEditStore: ChartEditStoreType,
15 15 param: { [T: string]: any },
16   - interactEventOn: string
  16 + interactEventOn: string,
  17 + attrNames: string[]
17 18 ) => {
18 19 const chartEditStore = useChartEditStore()
19 20 const { interactEvents } = chartConfig.events
... ... @@ -34,8 +35,13 @@ export const useChartInteract = (
34 35 if (groupItem.id === item.interactComponentId) {
35 36 const { Params, Header } = toRefs(groupItem.request.requestParams)
36 37 Object.keys(item.interactFn).forEach(key => {
37   - Params.value[key] = param[item.interactFn[key]]
38   - Header.value[key] = param[item.interactFn[key]]
  38 + Params.value[key] = decodeURIComponent(param[item.interactFn[key]])
  39 + if(Reflect.has(Params.value, 'attrName')) {
  40 + Params.value['attrName'] = attrNames as unknown as string // 修改联动选择,lengend未实时更新
  41 + }
  42 + if (key in Header.value) {
  43 + Header.value[key] = param[item.interactFn[key]]
  44 + }
39 45 })
40 46 }
41 47 })
... ... @@ -53,7 +59,12 @@ export const useChartInteract = (
53 59 //
54 60 Object.keys(item.interactFn).forEach(key => {
55 61 Params.value[key] = decodeURIComponent(param[item.interactFn[key]])
56   - Header.value[key] = param[item.interactFn[key]]
  62 + if(Reflect.has(Params.value, 'attrName')) {
  63 + Params.value['attrName'] = attrNames as unknown as string // 修改联动选择,lengend未实时更新
  64 + }
  65 + if (key in Header.value) {
  66 + Header.value[key] = param[item.interactFn[key]]
  67 + }
57 68 })
58 69 }
59 70 }
... ...
... ... @@ -112,8 +112,8 @@ watch(
112 112 props.chartConfig.option.series.push(...seriesArr)
113 113 }
114 114 replaceMergeArr.value = ['series']
  115 + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
115 116 nextTick(() => {
116   - useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
117 117 replaceMergeArr.value = []
118 118 })
119 119 }
... ...
... ... @@ -112,8 +112,8 @@ watch(
112 112 props.chartConfig.option.series.push(...seriesArr)
113 113 }
114 114 replaceMergeArr.value = ['series']
  115 + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
115 116 nextTick(() => {
116   - useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
117 117 replaceMergeArr.value = []
118 118 })
119 119 }
... ...
... ... @@ -143,8 +143,8 @@ watch(
143 143 props.chartConfig.option.series.push(...seriesArr)
144 144 }
145 145 replaceMergeArr.value = ['series']
  146 + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
146 147 nextTick(() => {
147   - useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
148 148 replaceMergeArr.value = []
149 149 })
150 150 }
... ...
... ... @@ -214,8 +214,8 @@ watch(
214 214 props.chartConfig.option.series.push(...seriesArr)
215 215 }
216 216 replaceMergeArr.value = ['series']
  217 + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
217 218 nextTick(() => {
218   - useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
219 219 replaceMergeArr.value = []
220 220 })
221 221 }
... ...
... ... @@ -10,13 +10,15 @@
10 10 </template>
11 11
12 12 <script setup lang="ts">
13   -import { PropType, toRefs, shallowReactive, watch } from 'vue'
  13 +import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
14 14 import { CreateComponentType } from '@/packages/index.d'
15 15 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
16 16 import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
17 17 import { InteractEventOn } from '@/enums/eventEnum'
18 18 import { ComponentInteractParamsEnum } from './interact'
19 19 import { useChartDataFetch } from '@/hooks'
  20 +import { isObject } from '@/utils/external/is'
  21 +import { SelectOption } from 'naive-ui'
20 22
21 23 const props = defineProps({
22 24 chartConfig: {
... ... @@ -36,14 +38,23 @@ const option = shallowReactive({
36 38 }
37 39 })
38 40
  41 +const cacheOptions = ref<string[]>([])
  42 +
39 43 // 监听事件改变
40   -const onChange = (v: string[] | string) => {
41   - // 存储到联动数据
42   - useChartInteract(
  44 +const onChange = (v: string[] | string, options: SelectOption | SelectOption[]) => {
  45 + const attrName = isObject(options) ? [(options as SelectOption).label] : (options as SelectOption[])?.map(mapItem => mapItem.label)
  46 + cacheOptions.value = attrName as unknown as string[]
  47 + updateChartInteract(v, cacheOptions.value)
  48 +}
  49 +
  50 +const updateChartInteract = (v: string[] | string, attrName?: string[]) => {
  51 + // 存储到联动数据
  52 + useChartInteract(
43 53 props.chartConfig,
44 54 useChartEditStore,
45   - { [ComponentInteractParamsEnum.DATA]: v },
46   - InteractEventOn.CHANGE
  55 + { [ComponentInteractParamsEnum.DATA]: encodeURIComponent(v as unknown as string) },
  56 + InteractEventOn.CHANGE,
  57 + attrName!
47 58 )
48 59 // 特殊处理 只针对两个下拉选择器,一个是产品下拉,一个是设备下拉,选择了产品,存储到sessionStorage里,用来判断预览时点击产品下拉,清除设备下拉值
49 60 if (window.location.href.includes('preview')) {
... ... @@ -56,7 +67,7 @@ watch(
56 67 () => props.chartConfig.option,
57 68 (newData: any) => {
58 69 option.value = newData
59   - onChange(newData.selectValue)
  70 + updateChartInteract(newData.selectValue, cacheOptions.value)
60 71 },
61 72 {
62 73 immediate: true,
... ...