perf(src/): 优化给分组这个整体绑定动态数据，其下所有子组件共享分组数据，子组件支持动态设置自身数据

 import { ref, toRefs, toRaw, watch } from 'vue'
 import { ref, toRefs, toRaw, watch } from 'vue'
 import type VChart from 'vue-echarts'
 import type VChart from 'vue-echarts'
 import { useChartDataPondFetch } from '@/hooks/'
 import { useChartDataPondFetch } from '@/hooks/'
-import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
+import { CreateComponentType, ChartFrameEnum, CreateComponentGroupType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview, intervalUnitHandle } from '@/utils'
 import { isPreview, intervalUnitHandle } from '@/utils'
 import { setOption } from '@/packages/public/chart'
 import { setOption } from '@/packages/public/chart'
@@ -110,7 +110,18 @@ export const useChartDataFetch = (
 
 
   if (isPreview()) { 
   if (isPreview()) { 
     requestIntervalFn()
     requestIntervalFn()
+    const chartEditStore = useChartEditStore()
     const { initial } = useChartDataSocket()
     const { initial } = useChartDataSocket()
+    /**
+     * 支持分组也可以接受ws
+     * 如果是分组并且绑定了ws
+     */
+    chartEditStore.componentList.forEach((item:CreateComponentType | CreateComponentGroupType)=>{
+      if(item.request.requestUrl?.includes('ws')){
+        initial(item, useChartEditStore, updateCallback)
+      }
+    })
+    //
     initial(targetComponent, useChartEditStore, updateCallback)
     initial(targetComponent, useChartEditStore, updateCallback)
   }
   }
   return { vChartRef }
   return { vChartRef }

@@ -38,7 +38,7 @@ watch(
 )
 )
 
 
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  option.dataset = newData
+  // option.dataset = newData
 })
 })
 </script>
 </script>
 
 

@@ -160,6 +160,7 @@ export interface CreateComponentType extends PublicConfigType, requestConfig {
   chartConfig: ConfigType
   chartConfig: ConfigType
   option: GlobalThemeJsonType
   option: GlobalThemeJsonType
   groupList?: Array<CreateComponentType>
   groupList?: Array<CreateComponentType>
+  saveHistoryInput?:string // THINGS_KIT 新增一个接口字段 saveHistoryInput,用于记录当前组件id和输入框的内容，这里不能重写，有很多地方引用到的，这里升级版本有冲突
 }
 }
 
 
 // 组件成组实例类
 // 组件成组实例类

@@ -262,7 +262,32 @@ export const useSocketStore = defineStore({
        */
        */
      chartEditStore.getComponentList.forEach(targetItem => {
      chartEditStore.getComponentList.forEach(targetItem => {
       if (targetItem.isGroup) {
       if (targetItem.isGroup) {
-        //分组
+        /**
+         * 如果是分组，并且request里是ws，则分组组件这个整体是接受ws绑定的,之前分组是不能绑定ws的
+         */
+        if(targetItem.request.requestUrl?.includes('ws')){
+          const _value = this.getComponentValueByKeys(targetItem, value)
+          const { filter } = targetItem
+          const { value: filterValue, reason, flag } = useFilterFn(filter, _value)
+          targetItem.option.dataset = flag ? filterValue : reason
+        try{
+          const dumpSaveHistoryInput = JSON.parse((!targetItem.saveHistoryInput ? null: targetItem.saveHistoryInput) as string) ||JSON.parse(window.localStorage.getItem('CACHE_HISTORY_INPUT_VALUE') as string)
+          if(!dumpSaveHistoryInput) return
+          if(!Array.isArray(dumpSaveHistoryInput)) return
+          targetItem.groupList?.forEach((item:CreateComponentType)=>{
+           dumpSaveHistoryInput?.forEach((inputItem:{id:string,inputValue:string})=>{
+            if(item.id === inputItem.id){
+             item.option.dataset= Function('res', `return ${inputItem?.inputValue}`)(targetItem.option?.dataset)
+            }
+          })
+        })
+        }catch(e){
+          console.log(e)
+        }
+        }
+        /**
+         * 这也是分组，但这个是分组这个整体不绑定ws，而是下面的子组件都绑定了ws
+         */
         targetItem.groupList?.forEach(groupItem => {
         targetItem.groupList?.forEach(groupItem => {
           if (groupItem.id === id) {
           if (groupItem.id === id) {
               const _value = this.getComponentValueByKeys(groupItem, value)
               const _value = this.getComponentValueByKeys(groupItem, value)

+type Params = {
+  [key: string]: string
+}
+
+type ArrayParams = Params[]
+
+export type historyInputValue = { id: string; inputValue: string }
+
+//dataset数据源数据类型不确定，String Array Object Number
+export type datasetType = string | number | Params | ArrayParams
+
+export type saveHistoryInputValueListType = historyInputValue[]

+<template>
+  <div class="go-chart-configurations-data" v-if="targetData">
+    <n-space vertical>
+      <n-tag type="success"> 分组返回的数据源 </n-tag>
+      <n-card size="small">
+        <n-code word-wrap :code="toString(targetData.option.dataset)" language="json"></n-code>
+      </n-card>
+      <n-tag type="info"> 使用res点语法或者res中括号语法 </n-tag>
+      <n-tag type="warning">示例：res.xxxx</n-tag>
+      <span>测试一下</span>
+      <n-input type="textarea" @input="handleTestInput($event, option)" size="small" placeholder="请输入"></n-input>
+      <n-code word-wrap :code="toString(testInputValue)" language="json"></n-code>
+      <n-divider />
+      <div v-for="(item, index) in groupList" :key="item.key + index">
+        <n-space justify="space-between">
+          <n-ellipsis> 组件id </n-ellipsis>
+          <n-input size="small" v-model:value="item.id" :disabled="true"></n-input>
+        </n-space>
+        <n-space justify="space-between">
+          <n-ellipsis> 组件名称 </n-ellipsis>
+          <n-input size="small" v-model:value="item.chartConfig.title" :disabled="true"></n-input>
+        </n-space>
+        <n-space vertical justify="space-between">
+          <n-ellipsis> 设置数据 </n-ellipsis>
+          <n-input
+            type="textarea"
+            @update:value="handleInput(groupList!, item.id, $event)"
+            size="small"
+            :placeholder="String(item.option.dataset)"
+          ></n-input>
+        </n-space>
+        <n-divider />
+      </div>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs, ref, watch } from 'vue'
+import { useTargetData } from '../../hooks/useTargetData.hook'
+import { toString } from '@/utils'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { datasetType, saveHistoryInputValueListType, historyInputValue } from './index.d'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { uniqBy } from 'lodash'
+
+const { targetData } = useTargetData()
+
+const { groupList, option } = toRefs(targetData.value)
+
+const testInputValue = ref('')
+
+const saveHistoryInputValueList = ref<saveHistoryInputValueListType>([])
+
+const handleInput = (groupList: CreateComponentType[], id: string, inputValue: string) => {
+  saveHistoryInputValueList.value.unshift({
+    id,
+    inputValue
+  })
+  handleGroupListById(groupList, id, inputValue, option.value.dataset)
+}
+
+const executeFn = (inputValue: string, dataset: datasetType) => {
+  try {
+    return Function('res', `return ${inputValue}`)(dataset)
+  } catch (e) {
+    return inputValue
+  }
+}
+
+const setTargetDataset = (inputValue: string, dataset: datasetType) => {
+  //不能用!,会排除0，0也是需要显示的
+  return executeFn(inputValue, dataset) === undefined ? '' : executeFn(inputValue, dataset)
+}
+
+const handleGroupListById = (
+  groupList: CreateComponentType[],
+  id: string,
+  inputValue: string,
+  dataset: datasetType
+) => {
+  //原生for循环优化性能
+  for (let index = 0, total = groupList.length; index < total; index++) {
+    const targetItem = groupList[index]
+    if (id === targetItem.id) targetItem.option.dataset = setTargetDataset(inputValue, dataset)
+  }
+}
+
+//测试返回
+const handleTestInput = (inputValue: string, { dataset }: GlobalThemeJsonType) => {
+  testInputValue.value = setTargetDataset(inputValue, dataset)
+}
+
+watch(
+  () => targetData.value,
+  (newValue: CreateComponentType | CreateComponentGroupType) => {
+    try {
+      const uniqHistoryInputValueList = uniqBy(saveHistoryInputValueList.value, 'id')
+      if (uniqHistoryInputValueList) {
+        newValue.saveHistoryInput = JSON.stringify(uniqHistoryInputValueList)
+        window.localStorage.setItem('CACHE_HISTORY_INPUT_VALUE', JSON.stringify(uniqHistoryInputValueList))
+      }
+      newValue?.groupList?.forEach((item: CreateComponentType) => {
+        uniqHistoryInputValueList.forEach((uniqueItem: historyInputValue) => {
+          if (uniqueItem.id === item.id) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            handleGroupListById(newValue.groupList!, uniqueItem.id, uniqueItem.inputValue, newValue.option.dataset)
+          }
+        })
+      })
+    } catch (e) {
+      console.log(e)
+    }
+  },
+  {
+    deep: true
+  }
+)
+</script>

+export enum TabsEnum {
+  PAGE_SETTING = 'pageSetting',
+  CHART_SETTING = 'chartSetting',
+  CHART_ANIMATION = 'chartAnimation',
+  CHART_DATA = 'chartData',
+  CHART_EVENT = 'chartEvent',
+  THINGS_KIT_CHART_DATA = 'thingsKitChartData',//新增ThingsKit自定义分组数据
+}

+<template>
+  <n-layout has-sider sider-placement="right">
+    <n-layout-content>
+      <!-- 图表拖拽区域 -->
+      <content-edit></content-edit>
+    </n-layout-content>
+    <n-layout-sider
+      collapse-mode="transform"
+      :collapsed-width="0"
+      :width="350"
+      :collapsed="collapsed"
+      :native-scrollbar="false"
+      show-trigger="bar"
+      @collapse="collapsedHandle"
+      @expand="expandHandle"
+    >
+      <content-box class="go-content-configurations go-boderbox" :show-top="false" :depth="2">
+        <!-- 页面配置 -->
+        <n-tabs v-if="!selectTarget" class="tabs-box" size="small" type="segment">
+          <n-tab-pane
+            v-for="item in globalTabList"
+            :key="item.key"
+            :name="item.key"
+            size="small"
+            display-directive="show:lazy"
+          >
+            <template #tab>
+              <n-space>
+                <span>{{ item.title }}</span>
+                <n-icon size="16" class="icon-position">
+                  <component :is="item.icon"></component>
+                </n-icon>
+              </n-space>
+            </template>
+            <component :is="item.render"></component>
+          </n-tab-pane>
+        </n-tabs>
+
+        <!-- 编辑 -->
+        <n-tabs v-if="selectTarget" v-model:value="tabsSelect" class="tabs-box" size="small" type="segment">
+          <n-tab-pane
+            v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
+            :key="item.key"
+            :name="item.key"
+            size="small"
+            display-directive="show:lazy"
+          >
+            <template #tab>
+              <n-space>
+                <span>{{ item.title }}</span>
+                <n-icon size="16" class="icon-position">
+                  <component :is="item.icon"></component>
+                </n-icon>
+              </n-space>
+            </template>
+            <component :is="item.render"></component>
+          </n-tab-pane>
+        </n-tabs>
+      </content-box>
+    </n-layout-sider>
+  </n-layout>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, watch, computed } from 'vue'
+import { icon } from '@/plugins'
+import { loadAsyncComponent } from '@/utils'
+import { ContentBox } from '../../ContentBox/index'
+import { TabsEnum } from './index.d'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const { getDetails } = toRefs(useChartLayoutStore())
+const { setItem } = useChartLayoutStore()
+const chartEditStore = useChartEditStore()
+
+const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon, AlbumsIcon } = icon.ionicons5
+
+const ContentEdit = loadAsyncComponent(() => import('../../ContentEdit/index.vue'))
+const CanvasPage = loadAsyncComponent(() => import('../components/CanvasPage/index.vue'))
+const ChartSetting = loadAsyncComponent(() => import('../components/ChartSetting/index.vue'))
+const ChartData = loadAsyncComponent(() => import('../components/ChartData/index.vue'))
+const ThingsKitChartData = loadAsyncComponent(() => import('../components/external/ThingsKitChartData/index.vue')) //新增ThingsKit自定义分组数据页面
+const ChartEvent = loadAsyncComponent(() => import('../components/ChartEvent/index.vue'))
+const ChartAnimation = loadAsyncComponent(() => import('../components/ChartAnimation/index.vue'))
+
+const collapsed = ref<boolean>(getDetails.value)
+const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING)
+
+const collapsedHandle = () => {
+  collapsed.value = true
+  setItem(ChartLayoutStoreEnum.DETAILS, true)
+}
+
+const expandHandle = () => {
+  collapsed.value = false
+  setItem(ChartLayoutStoreEnum.DETAILS, false)
+}
+
+const selectTarget = computed(() => {
+  const selectId = chartEditStore.getTargetChart.selectId
+  // 排除多个
+  if (selectId.length !== 1) return undefined
+  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
+  if (target?.isGroup) {
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    tabsSelect.value = TabsEnum.CHART_SETTING
+  }
+  return target
+})
+
+watch(getDetails, newData => {
+  if (newData) {
+    collapsedHandle()
+  } else {
+    expandHandle()
+  }
+})
+
+// 页面设置
+const globalTabList = [
+  {
+    key: TabsEnum.PAGE_SETTING,
+    title: '页面配置',
+    icon: DesktopOutlineIcon,
+    render: CanvasPage
+  }
+]
+
+//THINGS_KIT 新增分组支持数据绑定
+const chartsDefaultTabList = [
+  {
+    key: TabsEnum.CHART_SETTING,
+    title: '定制',
+    icon: ConstructIcon,
+    render: ChartSetting
+  },
+  {
+    key: TabsEnum.CHART_ANIMATION,
+    title: '动画',
+    icon: LeafIcon,
+    render: ChartAnimation
+  },
+  {
+    key: TabsEnum.CHART_DATA,
+    title: '数据',
+    icon: FlashIcon,
+    render: ChartData
+  },
+  {
+    key: TabsEnum.THINGS_KIT_CHART_DATA,
+    title: '分组',
+    icon: AlbumsIcon,
+    render: ThingsKitChartData
+  }
+]
+
+const chartsTabList = [
+  ...chartsDefaultTabList.slice(0,2),
+  {
+    key: TabsEnum.CHART_DATA,
+    title: '数据',
+    icon: FlashIcon,
+    render: ChartData
+  },
+  {
+    key: TabsEnum.CHART_EVENT,
+    title: '事件',
+    icon: RocketIcon,
+    render: ChartEvent
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+@include go(content-configurations) {
+  overflow: hidden;
+  .tabs-box {
+    padding: 10px;
+    .icon-position {
+      padding-top: 2px;
+    }
+  }
+}
+</style>

@@ -51,16 +51,18 @@ const chartEditStore = useChartEditStore()
 // 记录初始化
 // 记录初始化
 chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)
 chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)
 /**
 /**
- * THINGS_KIT 升级版本这里有冲突
+ * THINGS_KIT 修改了部分重写引入，升级版本这里有冲突
  * 源文件 './ContentHeader/headerRightBtn/index.vue' ./ContentHeader/headerLeftBtn/index.vue'
  * 源文件 './ContentHeader/headerRightBtn/index.vue' ./ContentHeader/headerLeftBtn/index.vue'
  * 修改后 './ContentHeader/headerRightBtn/external/index.vue' ./ContentHeader/headerLeftBtn/external/index.vue'
  * 修改后 './ContentHeader/headerRightBtn/external/index.vue' ./ContentHeader/headerLeftBtn/external/index.vue'
+ * 源文件 './ContentConfigurations/index.vue'
+ * 修改后 './ContentConfigurations/external/index.vue'
  */
  */
-const HeaderLeftBtn = loadAsyncComponent(() => import('./ContentHeader/headerLeftBtn/external/index.vue'))
-const HeaderRightBtn = loadAsyncComponent(() => import('./ContentHeader/headerRightBtn/external/index.vue'))
+const HeaderLeftBtn = loadAsyncComponent(() => import('./ContentHeader/headerLeftBtn/external/index.vue'))//修改引入路径！！！
+const HeaderRightBtn = loadAsyncComponent(() => import('./ContentHeader/headerRightBtn/external/index.vue'))//修改引入路径！！！
 const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle/index.vue'))
 const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle/index.vue'))
 const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
 const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
 const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))
 const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))
-const ContentConfigurations = loadAsyncComponent(() => import('./ContentConfigurations/index.vue'))
+const ContentConfigurations = loadAsyncComponent(() => import('./ContentConfigurations/external/index.vue'))//修改引入路径！！！
 const ContentLoad = loadAsyncComponent(() => import('./ContentLoad/index.vue'))
 const ContentLoad = loadAsyncComponent(() => import('./ContentLoad/index.vue'))
 
 
 // 右键
 // 右键