Merge branch 'perf/chart-view' into 'main_dev'

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

See merge request yunteng/thingskit-view!244

 /**
 /**
- * 重写select下拉框联动
+ * 重写select下拉框联动（下拉选择和输入框共用此hook）
  */
  */
 import { toRefs } from 'vue'
 import { toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
@@ -13,7 +13,8 @@ export const useChartInteract = (
   chartConfig: CreateComponentType,
   chartConfig: CreateComponentType,
   useChartEditStore: ChartEditStoreType,
   useChartEditStore: ChartEditStoreType,
   param: { [T: string]: any },
   param: { [T: string]: any },
-  interactEventOn: string
+  interactEventOn: string,
+  attrNames: string[]
 ) => {
 ) => {
   const chartEditStore = useChartEditStore()
   const chartEditStore = useChartEditStore()
   const { interactEvents } = chartConfig.events
   const { interactEvents } = chartConfig.events
@@ -34,8 +35,13 @@ export const useChartInteract = (
           if (groupItem.id === item.interactComponentId) {
           if (groupItem.id === item.interactComponentId) {
             const { Params, Header } = toRefs(groupItem.request.requestParams)
             const { Params, Header } = toRefs(groupItem.request.requestParams)
             Object.keys(item.interactFn).forEach(key => {
             Object.keys(item.interactFn).forEach(key => {
-                Params.value[key] = param[item.interactFn[key]]
-                Header.value[key] = param[item.interactFn[key]]
+                Params.value[key] = decodeURIComponent(param[item.interactFn[key]])
+                if(Reflect.has(Params.value, 'attrName')) {
+                  Params.value['attrName'] = attrNames as unknown as string // 修改联动选择，lengend未实时更新
+                }
+                if (key in  Header.value) {
+                  Header.value[key] = param[item.interactFn[key]]
+                }
             })
             })
           }
           }
         })
         })
@@ -53,7 +59,12 @@ export const useChartInteract = (
           //
           //
           Object.keys(item.interactFn).forEach(key => {
           Object.keys(item.interactFn).forEach(key => {
               Params.value[key] = decodeURIComponent(param[item.interactFn[key]])
               Params.value[key] = decodeURIComponent(param[item.interactFn[key]])
-              Header.value[key] = param[item.interactFn[key]]
+              if(Reflect.has(Params.value, 'attrName')) {
+                Params.value['attrName'] = attrNames as unknown as string // 修改联动选择，lengend未实时更新
+              }
+              if (key in  Header.value) {
+                Header.value[key] = param[item.interactFn[key]]
+              }
           })
           })
         }
         }
       }
       }

@@ -112,8 +112,8 @@ watch(
           props.chartConfig.option.series.push(...seriesArr)
           props.chartConfig.option.series.push(...seriesArr)
         }
         }
         replaceMergeArr.value = ['series']
         replaceMergeArr.value = ['series']
+        useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
         nextTick(() => {
         nextTick(() => {
-          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
           replaceMergeArr.value = []
         })
         })
       }
       }

@@ -112,8 +112,8 @@ watch(
           props.chartConfig.option.series.push(...seriesArr)
           props.chartConfig.option.series.push(...seriesArr)
         }
         }
         replaceMergeArr.value = ['series']
         replaceMergeArr.value = ['series']
+        useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
         nextTick(() => {
         nextTick(() => {
-          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
           replaceMergeArr.value = []
         })
         })
       }
       }

@@ -143,8 +143,8 @@ watch(
           props.chartConfig.option.series.push(...seriesArr)
           props.chartConfig.option.series.push(...seriesArr)
         }
         }
         replaceMergeArr.value = ['series']
         replaceMergeArr.value = ['series']
+        useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
         nextTick(() => {
         nextTick(() => {
-          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
           replaceMergeArr.value = []
         })
         })
       }
       }

@@ -214,8 +214,8 @@ watch(
           props.chartConfig.option.series.push(...seriesArr)
           props.chartConfig.option.series.push(...seriesArr)
         }
         }
         replaceMergeArr.value = ['series']
         replaceMergeArr.value = ['series']
+        useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
         nextTick(() => {
         nextTick(() => {
-          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
           replaceMergeArr.value = []
         })
         })
       }
       }

@@ -10,13 +10,15 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
 import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { ComponentInteractParamsEnum } from './interact'
 import { ComponentInteractParamsEnum } from './interact'
 import { useChartDataFetch } from '@/hooks'
 import { useChartDataFetch } from '@/hooks'
+import { isObject } from '@/utils/external/is'
+import { SelectOption } from 'naive-ui'
 
 
 const props = defineProps({
 const props = defineProps({
   chartConfig: {
   chartConfig: {
@@ -36,14 +38,23 @@ const option = shallowReactive({
   }
   }
 })
 })
 
 
+const cacheOptions = ref<string[]>([])
+
 // 监听事件改变
 // 监听事件改变
-const onChange = (v: string[] | string) => {
-  // 存储到联动数据
-  useChartInteract(
+const onChange = (v: string[] | string, options: SelectOption | SelectOption[]) => {
+  const attrName = isObject(options) ? [(options as SelectOption).label] : (options as SelectOption[])?.map(mapItem => mapItem.label)
+  cacheOptions.value = attrName as unknown as string[]
+  updateChartInteract(v, cacheOptions.value)
+}
+
+const updateChartInteract = (v: string[] | string, attrName?: string[]) => {
+ // 存储到联动数据
+ useChartInteract(
     props.chartConfig,
     props.chartConfig,
     useChartEditStore,
     useChartEditStore,
-    { [ComponentInteractParamsEnum.DATA]: v },
-    InteractEventOn.CHANGE
+    { [ComponentInteractParamsEnum.DATA]: encodeURIComponent(v as unknown as string) },
+    InteractEventOn.CHANGE,
+    attrName!
   )
   )
   // 特殊处理 只针对两个下拉选择器，一个是产品下拉，一个是设备下拉，选择了产品，存储到sessionStorage里,用来判断预览时点击产品下拉，清除设备下拉值
   // 特殊处理 只针对两个下拉选择器，一个是产品下拉，一个是设备下拉，选择了产品，存储到sessionStorage里,用来判断预览时点击产品下拉，清除设备下拉值
   if (window.location.href.includes('preview')) {
   if (window.location.href.includes('preview')) {
@@ -56,7 +67,7 @@ watch(
   () => props.chartConfig.option,
   () => props.chartConfig.option,
   (newData: any) => {
   (newData: any) => {
     option.value = newData
     option.value = newData
-    onChange(newData.selectValue)
+    updateChartInteract(newData.selectValue, cacheOptions.value)
   },
   },
   {
   {
     immediate: true,
     immediate: true,