Merge branch 'ft' into 'main_dev'

fix(src/packages/): 修复组件联动分组，然后点击一个会影响另一个组件问题 See merge request yunteng/thingskit-view!105

Merge branch 'ft' into 'main_dev'
fix(src/packages/): 修复组件联动分组，然后点击一个会影响另一个组件问题 See merge request yunteng/thingskit-view!105
xp.Huang
2 parents 7df382fe fb6eafbb
Showing 7 changed files with 182 additions and 86 deletions
src/hooks/external/useChartDateInteract.hook.ts
src/hooks/external/useChartSelectInteract.hook.ts
src/packages/components/external/Charts/Bars/OverrideBarCommon/index.vue
src/packages/components/external/Charts/Lines/OverrideLineCommon/index.vue
src/packages/components/external/Charts/Lines/OverrideLineGradients/index.vue
src/packages/external/compatibleConfig.ts
src/packages/external/override.ts
--- a/src/hooks/external/useChartDateInteract.hook.ts
View file @f553bc8
+++ b/src/hooks/external/useChartDateInteract.hook.ts
View file @f553bc8
 /**
  * 重写select下拉框联动
  */
-import {toRefs} from 'vue'
-import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d'
-import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
+import { toRefs } from 'vue'
+import {  CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
 // Params 参数修改触发 api 更新图表请求
 export const useChartInteract = (
-    chartConfig: CreateComponentType,
-    useChartEditStore: ChartEditStoreType,
-    param: { [T: string]: any },
-    interactEventOn: string
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [T: string]: any },
+  interactEventOn: string
 ) => {
-    const chartEditStore = useChartEditStore()
-    const {interactEvents} = chartConfig.events
-    const fnOnEvent = interactEvents.filter(item => {
-        return item.interactOn === interactEventOn
-    })
+  const chartEditStore = useChartEditStore()
+  const { interactEvents } = chartConfig.events
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === interactEventOn
+  })
-    if (fnOnEvent.length === 0) return
-    fnOnEvent.forEach(async (item) => {
-        const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
-        if (index === -1) return
-          //支持分组
-          const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => {
-            acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc)
-            return prev
-          }, [])
-          target?.forEach((targetItem)=>{
-            if(targetItem.id!==chartConfig.id){
-            const {Params, Header} = toRefs(targetItem.request.requestParams)
+  if (fnOnEvent.length === 0) return
+  fnOnEvent.forEach(async item => {
+    const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+    if (index === -1) return
+    //支持分组
+    /**
+     * 修复多个分组，然后下拉框联动，会影响另一个组件
+     */
+    chartEditStore.getComponentList.forEach(targetItem => {
+      if (targetItem.isGroup) {
+        targetItem.groupList?.forEach(groupItem => {
+          if (groupItem.id === item.interactComponentId) {
+            const { Params, Header } = toRefs(groupItem.request.requestParams)
             Object.keys(item.interactFn).forEach(key => {
-            if (Params.value[key]) {
+              if (Params.value[key]) {
                 Params.value[key] = param[item.interactFn[key]]
-            }
-            if (Header.value[key]) {
+              }
+              if (Header.value[key]) {
                 Header.value[key] = param[item.interactFn[key]]
-            }
+              }
             })
-            }
+          }
         })
+      } else {
+        if (targetItem.id === item.interactComponentId) {
+          const { Params, Header } = toRefs(targetItem.request.requestParams)
+          Object.keys(item.interactFn).forEach(key => {
+            if (Params.value[key]) {
+              Params.value[key] = param[item.interactFn[key]]
+            }
+            if (Header.value[key]) {
+              Header.value[key] = param[item.interactFn[key]]
+            }
+          })
+        }
+      }
+      //
     })
+  })
 }
 // 联动事件触发的 type 变更时，清除当前绑定内容
--- a/src/hooks/external/useChartSelectInteract.hook.ts
View file @f553bc8
+++ b/src/hooks/external/useChartSelectInteract.hook.ts
View file @f553bc8
 /**
  * 重写select下拉框联动
  */
-import {toRefs} from 'vue'
-import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d'
-import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
+import { toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
 // Params 参数修改触发 api 更新图表请求
 export const useChartInteract = (
-    chartConfig: CreateComponentType,
-    useChartEditStore: ChartEditStoreType,
-    param: { [T: string]: any },
-    interactEventOn: string
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [T: string]: any },
+  interactEventOn: string
 ) => {
-    const chartEditStore = useChartEditStore()
-    const {interactEvents} = chartConfig.events
-    const fnOnEvent = interactEvents.filter(item => {
-        return item.interactOn === interactEventOn
-    })
-    if (fnOnEvent.length === 0) return
-    fnOnEvent.forEach((item) => {
-        const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
-        if (index === -1) return
-        //支持分组
-        const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => {
-            acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc)
-            return prev
-          }, [])
-        target?.forEach((targetItem)=>{
-            if(targetItem.id!==chartConfig.id){
-            const {Params, Header} = toRefs(targetItem.request.requestParams)
+  const chartEditStore = useChartEditStore()
+  const { interactEvents } = chartConfig.events
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === interactEventOn
+  })
+  if (fnOnEvent.length === 0) return
+  fnOnEvent.forEach(item => {
+    const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+    if (index === -1) return
+    //联动支持分组
+    /**
+     * 修复多个分组，然后下拉框联动，会影响另一个组件
+     */
+    chartEditStore.getComponentList.forEach(targetItem => {
+      if (targetItem.isGroup) {
+        targetItem.groupList?.forEach(groupItem => {
+          if (groupItem.id === item.interactComponentId) {
+            const { Params, Header } = toRefs(groupItem.request.requestParams)
             Object.keys(item.interactFn).forEach(key => {
-            if (Params.value[key]) {
+              if (Params.value[key]) {
                 Params.value[key] = param[item.interactFn[key]]
-            }
-            if (Header.value[key]) {
+              }
+              if (Header.value[key]) {
                 Header.value[key] = param[item.interactFn[key]]
-            }
+              }
             })
-            }
+          }
         })
+      } else {
+        if (targetItem.id === item.interactComponentId) {
+            const { Params, Header } = toRefs(targetItem.request.requestParams)
+            Object.keys(item.interactFn).forEach(key => {
+              if (Params.value[key]) {
+                Params.value[key] = param[item.interactFn[key]]
+              }
+              if (Header.value[key]) {
+                Header.value[key] = param[item.interactFn[key]]
+              }
+            })
+          }
+      }
+      //
     })
+  })
 }
 // 联动事件触发的 type 变更时，清除当前绑定内容
--- a/src/packages/components/external/Charts/Bars/OverrideBarCommon/index.vue
View file @f553bc8
+++ b/src/packages/components/external/Charts/Bars/OverrideBarCommon/index.vue
View file @f553bc8
@@ -34,7 +34,7 @@ import { useFullScreen } from '../../utls/fullScreen'
 import cloneDeep from 'lodash/cloneDeep'
 import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
-import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d'
+import { CreateComponentGroupType, CreateComponentType } from '@/packages/index.d'
 const props = defineProps({
   themeSetting: {
@@ -198,7 +198,7 @@ watch(
 )
 //fix 修复v-chart图表绑定联动组件视图不更新问题
-const updateVChart =async (newData:SocketReceiveMessageType) => {
+const updateVChart = async (newData: SocketReceiveMessageType) => {
   //区分是普通请求还是ws请求
   if (!isObject(newData) || !('dimensions' in newData)) {
     const { data } = newData
@@ -210,12 +210,12 @@ const updateVChart =async (newData:SocketReceiveMessageType) => {
       }
     })
   } else {
-     //异步更新，同步更新会造成联动组件控制，图表不及时更新
-     await nextTick().then(()=>{
+    //异步更新，同步更新会造成联动组件控制，图表不及时更新
+    await nextTick().then(() => {
       vChartRef.value?.setOption(
         {
           ...option.value,
-           dataset: newData
+          dataset: newData
         },
         {
           notMerge: true
@@ -226,15 +226,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => {
 }
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
-  const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => {
-      acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc)
-      return prev
-  }, [])
-  target?.forEach((targetItem)=>{
-      if(targetItem.id === props.chartConfig.id){
-          targetItem.option.dataset = newData
+ //联动支持分组
+    /**
+     * 修复多个分组，然后下拉框联动，会影响另一个组件
+     */
+  chartEditStore.getComponentList.forEach(targetItem => {
+    if (targetItem.isGroup) {
+      targetItem.groupList?.forEach(groupItem => {
+        if (groupItem.id === props.chartConfig.id) {
+          groupItem.option.dataset = newData
+        }
+      })
+    } else {
+      if (targetItem.id === props.chartConfig.id) {
+        targetItem.option.dataset = newData
       }
+    }
   })
+  //
   updateVChart(newData)
 })
--- a/src/packages/components/external/Charts/Lines/OverrideLineCommon/index.vue
View file @f553bc8
+++ b/src/packages/components/external/Charts/Lines/OverrideLineCommon/index.vue
View file @f553bc8
@@ -225,15 +225,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => {
 }
 const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => {
-  const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => {
-      acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc)
-      return prev
-  }, [])
-  target?.forEach((targetItem)=>{
-      if(targetItem.id === props.chartConfig.id){
-          targetItem.option.dataset = newData
+  //联动支持分组
+    /**
+     * 修复多个分组，然后下拉框联动，会影响另一个组件
+     */
+     chartEditStore.getComponentList.forEach(targetItem => {
+    if (targetItem.isGroup) {
+      targetItem.groupList?.forEach(groupItem => {
+        if (groupItem.id === props.chartConfig.id) {
+          groupItem.option.dataset = newData
+        }
+      })
+    } else {
+      if (targetItem.id === props.chartConfig.id) {
+        targetItem.option.dataset = newData
       }
+    }
   })
+  //
   updateVChart(newData)
 })
--- a/src/packages/components/external/Charts/Lines/OverrideLineGradients/index.vue
View file @f553bc8
+++ b/src/packages/components/external/Charts/Lines/OverrideLineGradients/index.vue
View file @f553bc8
@@ -255,15 +255,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => {
 }
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
-  const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => {
-      acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc)
-      return prev
-  }, [])
-  target?.forEach((targetItem)=>{
-      if(targetItem.id === props.chartConfig.id){
-          targetItem.option.dataset = newData
+ //联动支持分组
+    /**
+     * 修复多个分组，然后下拉框联动，会影响另一个组件
+     */
+     chartEditStore.getComponentList.forEach(targetItem => {
+    if (targetItem.isGroup) {
+      targetItem.groupList?.forEach(groupItem => {
+        if (groupItem.id === props.chartConfig.id) {
+          groupItem.option.dataset = newData
+        }
+      })
+    } else {
+      if (targetItem.id === props.chartConfig.id) {
+        targetItem.option.dataset = newData
       }
+    }
   })
+  //
   updateVChart(newData)
 })
--- a/src/packages/external/compatibleConfig.ts
View file @f553bc8
+++ b/src/packages/external/compatibleConfig.ts
View file @f553bc8
@@ -78,6 +78,10 @@ export const compatibleConfig = [
   },
   {
     key: 'OverrideTextCommon', //自定义文字
+    oldChartKey: 'ExternalVCOverrideTextCommon',
+    newChartKey: 'ExternalVCOverrideTextCommon',
+    oldConKey: 'ExternalVCCOverrideTextCommon',
+    newConKey: 'ExternalVCCOverrideTextCommon',
     oldPackage: 'Informations', //之前的包名
     newPackage: 'Informations', //现在的包名
     oldCategory: 'Mores', //之前的目录
@@ -106,6 +110,10 @@ export const compatibleConfig = [
   {
     key: 'LeftCenterRightHead', //大标题1
     newKey: 'Headline1', //新的key
+    oldChartKey: 'ExternalVCLeftCenterRightHead',
+    newChartKey: 'ExternalVCHeadline1',
+    oldConKey: 'ExternalVCCLeftCenterRightHead',
+    newConKey: 'ExternalVCCHeadline1',
     oldPackage: 'Composes', //之前的包名
     newPackage: 'Decorates', //现在的包名
     oldCategory: 'HeadCombinations', //之前的目录
@@ -116,6 +124,10 @@ export const compatibleConfig = [
   {
     key: 'LeftCenterRightHeadAnimat', //大标题2
     newKey: 'Headline2', //新的key
+    oldChartKey: 'ExternalVCLeftCenterRightHeadAnimat',
+    newChartKey: 'ExternalVCHeadline2',
+    oldConKey: 'ExternalVCCLeftCenterRightHeadAnimat',
+    newConKey: 'ExternalVCCHeadline2',
     oldPackage: 'Composes', //之前的包名
     newPackage: 'Decorates', //现在的包名
     oldCategory: 'HeadCombinations', //之前的目录
@@ -126,6 +138,10 @@ export const compatibleConfig = [
   {
     key: 'Title1', //小标题1
     newKey: 'Subtitle1', //新的key
+    oldChartKey: 'ExternalVCTitle1',
+    newChartKey: 'ExternalVCSubtitle1',
+    oldConKey: 'ExternalVCCTitle1',
+    newConKey: 'ExternalVCCSubtitle1',
     oldPackage: 'Composes', //之前的包名
     newPackage: 'Decorates', //现在的包名
     oldCategory: 'Mores', //之前的目录
@@ -135,6 +151,10 @@ export const compatibleConfig = [
   },
   {
     key: 'Title2', //小标题2
+    oldChartKey: 'ExternalVCTitle2',
+    newChartKey: 'ExternalVCSubtitle2',
+    oldConKey: 'ExternalVCCTitle2',
+    newConKey: 'ExternalVCCSubtitle2',
     newKey: 'Subtitle2', //新的key
     oldPackage: 'Composes', //之前的包名
     newPackage: 'Decorates', //现在的包名
@@ -145,6 +165,10 @@ export const compatibleConfig = [
   },
   {
     key: 'Title3', //小标题3
+    oldChartKey: 'ExternalVCTitle3',
+    newChartKey: 'ExternalVCSubtitle3',
+    oldConKey: 'ExternalVCCTitle3',
+    newConKey: 'ExternalVCCSubtitle3',
     newKey: 'Subtitle3', //新的key
     oldPackage: 'Composes', //之前的包名
     newPackage: 'Decorates', //现在的包名
@@ -152,6 +176,15 @@ export const compatibleConfig = [
     newCategory: 'Subtitle', //新的目录
     oldCategoryName: '更多', //之前的目录名
     newCategoryName: '小标题' //新的目录名
+  },
+  {
+    key: 'OverrideImage', //自定义图片
+    oldPackage: 'Informations', //之前的包名
+    newPackage: 'Informations', //现在的包名
+    oldCategory: 'Mores', //之前的目录
+    newCategory: 'Mores', //新的目录
+    oldCategoryName: '更多', //之前的目录名
+    newCategoryName: '更多' //新的目录名
   }
 ]
 //
--- a/src/packages/external/override.ts
View file @f553bc8
+++ b/src/packages/external/override.ts
View file @f553bc8
@@ -14,7 +14,7 @@ const getChartConfigFile = async (path: string) => {
 export const createComponent = async (configType: ConfigType) => {
   // eslint-disable-next-line prefer-const
-  let { key, chartKey, category, package: packageName, redirectComponent, categoryName } = configType
+  let { key, chartKey, category, package: packageName, redirectComponent, categoryName , conKey} = configType
   // redirectComponent 是给图片组件库和图标组件库使用的
   if (redirectComponent) {
     const [packageName, categoryName, keyName] = redirectComponent.split('/')
@@ -25,13 +25,17 @@ export const createComponent = async (configType: ConfigType) => {
   /**
    * 兼容之前导入错误的补丁
    */
+  const includeOldTitleKeys=['LeftCenterRightHead','LeftCenterRightHeadAnimat','Title1','Title2','Title3']
   compatibleConfig?.forEach(item => {
     if (item?.key === key) {
-      key = item?.key as string
+      key = includeOldTitleKeys.includes(item?.key)?item?.newKey:item?.key as any
       packageName = item?.newPackage as string
       category = item?.newCategory as string
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       categoryName = item?.newCategoryName as string
+      chartKey =  includeOldTitleKeys.includes(item?.key)?item?.newChartKey:chartKey as any
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      conKey = includeOldTitleKeys.includes(item?.key)?item?.newConKey:conKey as any
     }
   })
   //