Commit eb4ca64c5ff0c4cbd7c864561726fc4ee96b4688

Authored by fengtao
1 parent f40334bd

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

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