Merge branch 'ft' into 'main_dev'

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

See merge request yunteng/thingskit-view!110

 import { ref, toRefs, toRaw, watch } from 'vue'
 import type VChart from 'vue-echarts'
 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 { isPreview, intervalUnitHandle } from '@/utils'
 import { setOption } from '@/packages/public/chart'
@@ -110,7 +110,18 @@ export const useChartDataFetch = (
 
   if (isPreview()) { 
     requestIntervalFn()
+    const chartEditStore = useChartEditStore()
     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)
   }
   return { vChartRef }

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { OverrideDialConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const includes = []
+const option = {
+  backgroundColor: '#0E1327',
+  dataset:70,
+  series: [{
+      type: "gauge",
+      data: [{
+          value: 70,
+          itemStyle: { // 指针样式
+              color: '#2AF4FF'
+          }
+      }],
+      min: 0, //最小刻度
+      max: 100, //最大刻度
+      splitNumber: 10, //刻度数量
+      center: ['50%', '55%'],
+      radius: '80%',
+      axisLine: {
+        lineStyle: {
+        color: [
+            [0, 'rgba(0,212,230,0.5)'],
+            [1, 'rgba(28,128,245,0)']
+          ],
+          width: 170
+        }
+      },
+      axisLabel: { // 文字样式
+        color: '#eee', 
+        fontSize: 14,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      detail: {
+        show: false,
+      },
+      pointer: {
+        length: '80%',
+        width: 4
+      },
+      animationDuration: 2000,
+    },
+    {
+      name: '外部刻度',
+      type: 'gauge',
+      center: ['50%', '55%'],
+      radius: '90%',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 25,
+          color: [ // 表盘外部颜色
+            [0, '#1369E380'],
+            [1, '#1369E380']
+          ],
+        }
+      }, 
+      axisLabel: {
+        show:false,
+      },
+      axisTick: {
+        splitNumber: 5,
+        lineStyle: { //刻度颜色
+          color: '#42E5FB',
+          width: 2,
+        },
+      },
+      splitLine: {
+        length: 15,
+        lineStyle: {
+          color: '#42E5FB',
+        }
+      },
+    },
+  ]
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = OverrideDialConfig.key
+  public chartConfig = cloneDeep(OverrideDialConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+    <!-- 遍历 seriesList -->
+    <CollapseItem :name="`圆环`" :expanded="true">
+      <SettingItemBox name="数据">
+        <SettingItem name="数值">
+          <n-input-number v-model:value="config.dataset" :min="dialConfig.min" :max="dialConfig.max" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- Echarts 全局设置 -->
+      <!-- 表盘刻度字体 -->
+      <SettingItemBox name="字体">
+        <SettingItem name="颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.axisLabel.color"></n-color-picker>
+        </SettingItem>
+        <SettingItem name="字体大小">
+          <n-input-number
+            v-model:value="dialConfig.axisLabel.fontSize"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="字体大小"
+          >
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- 表盘 -->
+      <SettingItemBox name="表盘外部">
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisLine.lineStyle.color[1][1]"></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- 指针 -->
+      <SettingItemBox name="指针">
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.data[0].itemStyle.color"></n-color-picker>
+        </SettingItem>
+        <SettingItem name="宽度">
+          <n-input-number v-model:value="dialConfig.pointer.width" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="刻度">
+        <SettingItem name="最小值">
+          <n-input-number v-model:value="dialConfig.min" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="最大值">
+          <n-input-number v-model:value="dialConfig.max" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisTick.lineStyle.color" @update:value="updateClick"></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+  
+    </CollapseItem>
+  </template>
+  
+  <script setup lang="ts">
+  import { PropType, computed } from 'vue'
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+  import { GlobalThemeJsonType } from '@/settings/chartThemes'
+  
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<GlobalThemeJsonType>,
+      required: true
+    }
+  })
+  
+  const config = computed(() => {
+    return props.optionData
+  })
+  
+  const dialConfig = computed(() => {
+    return props.optionData.series[0]
+  })
+  
+  const updateClick = (val: any) => {
+    props.optionData.series[1].splitLine.lineStyle.color=val
+  }
+  </script>
++  
\ No newline at end of file

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideDial', true)
+
+export const OverrideDialConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义表盘',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'dial.png'
+}

+<template>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import { mergeTheme } from '@/packages/public/chart'
+import config, { includes } from './config'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
+
+const option:any = reactive({
+  value: {}
+})
+
+const dataHandle = (newData: any) => {
+  let config = props.chartConfig.option
+  config.series[0].data[0].value = newData
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = props.chartConfig.option
+}
+
+// 配置时
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
+  if (Object.prototype.toString.call(resData) === '[object Object]') {
+    const key = Object.keys(resData?.data)
+    const value = Object.fromEntries(resData?.data[key[0]])
+    const singleKey = Object.keys(value)
+    const singleValue = value[singleKey[0]]
+    option.value.series[0].data[0].value = singleValue
+  } else { 
+    option.value.series[0].data[0].value = resData
+  }
+})
+</script>

@@ -12,6 +12,6 @@ export const ButtonConfig: ConfigType = {
   category: ChatCategoryEnum.INPUTS,
   categoryName: ChatCategoryEnumName.INPUTS,
   package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'button.png'
 }

@@ -13,6 +13,6 @@ export const OverrideInputsDateConfig: ConfigType = {
   category: ChatCategoryEnum.INPUTS,
   categoryName: ChatCategoryEnumName.INPUTS,
   package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'inputs_date.png'
 }

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { TreeConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      id: '1',
+      name: '根组织',
+      children: [
+        {
+          id: '11',
+          name: '第一级'
+        },
+        {
+          id: '12',
+          name: '第二级'
+        },
+        {
+          id: '13',
+          name: '第三级'
+        }
+      ]
+    }
+  ],
+  treeConfig: {
+    accordion: false,
+    checkable: false,
+    defaultExpandAll: false
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TreeConfig.key
+  public attr = { ...chartInitConfig, w: 300, h: 40, zIndex: -1 }
+  public chartConfig = cloneDeep(TreeConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="树配置" :expanded="true">
+    <setting-item-box name="手风琴">
+      <setting-item name="是否开启">
+        <n-switch v-model:value="optionData.treeConfig.accordion" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="选择框">
+      <setting-item name="是否开启">
+        <n-switch v-model:value="optionData.treeConfig.checkable" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="展开">
+      <setting-item name="是否开启">
+        <n-switch v-model:value="optionData.treeConfig.defaultExpandAll" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
+<style lang="scss" scoped></style>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('Tree', true)
+
+export const TreeConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义树形控件',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'tree.png'
+}

+<template>
+  <div>
+    <n-tree
+      :accordion="treeConfig.accordion"
+      :checkable="treeConfig.checkable"
+      :default-expand-all="treeConfig.defaultExpandAll"
+      block-line
+      block-node
+      :data="dataset"
+      key-field="id"
+      label-field="name"
+      children-field="children"
+      @update:selected-keys="onClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { dataset, treeConfig } = toRefs(props.chartConfig.option)
+
+const onClick = (v: string[]) => {
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: v[0] },
+    InteractEventOn.CHANGE
+  )
+}
+</script>
+
+<style lang="scss" scoped></style>

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATA = 'data'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATA]: [
+        {
+          value: ComponentInteractParamsEnum.DATA,
+          label: '选择项'
+        }
+      ]
+    }
+  }
+]

@@ -70,7 +70,17 @@ const transitionDuration = computed(() => {
 
 // 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  option.dataset = newData
+  const chartEditStore = useChartEditStore()
+  //判断只要是分组并且分组绑定了ws
+  let hasGroupWs = false
+  chartEditStore.componentList.some((item: CreateComponentType) => {
+    if (item.request.requestUrl?.includes('ws')) {
+      hasGroupWs = true
+    }
+  })
+  if (!hasGroupWs) {
+    option.dataset = newData
+  }
 })
 </script>
 

@@ -57,7 +57,17 @@ watch(
 
 // 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  option.dataset = newData
+  const chartEditStore = useChartEditStore()
+  //判断只要是分组并且分组绑定了ws
+  let hasGroupWs = false
+  chartEditStore.componentList.some((item: CreateComponentType) => {
+    if (item.request.requestUrl?.includes('ws')) {
+      hasGroupWs = true
+    }
+  })
+  if (!hasGroupWs) {
+    option.dataset = newData
+  }
 })
 
 //打开链接

@@ -38,7 +38,17 @@ watch(
 )
 
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  option.dataset = newData
+  const chartEditStore = useChartEditStore()
+  //判断只要是分组并且分组绑定了ws
+  let hasGroupWs = false
+  chartEditStore.componentList.some((item: CreateComponentType) => {
+    if (item.request.requestUrl?.includes('ws')) {
+      hasGroupWs = true
+    }
+  })
+  if (!hasGroupWs) {
+    option.dataset = newData
+  }
 })
 </script>
 

@@ -11,6 +11,7 @@ import { OverrideInputsDateConfig } from '@/packages/components/external/Informa
 import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Inputs/OverrideInputsTab'
 import { OverrideIframeConfig } from '@/packages/components/external/Informations/Mores/OverrideIframe'
 import { ButtonConfig } from '@/packages/components/external/Informations/Inputs/Button'
+import { TreeConfig } from '@/packages/components/external/Informations/Inputs/Tree'
 import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Texts/OverrideTextCommon'
 import { OverrideTextBarrageConfig } from '@/packages/components/external/Informations/Texts/OverrideTextBarrage'
 import { OverrideTextGradientConfig } from '@/packages/components/external/Informations/Texts/OverrideTextGradient'
@@ -22,6 +23,7 @@ import { OverridePieCircleConfig } from '@/packages/components/external/Charts/P
 import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
 import { OverrideWaterPoloConfig } from '@/packages/components/external/Charts/Mores/OverrideWaterPolo'
+import { OverrideDialConfig } from '@/packages/components/external/Charts/Mores/OverrideDial'
 import { OverrideLineRealTimeConfig } from '@/packages/components/external/Charts/Lines/OverrideLineRealTime'
 import { ThreeDimensionalConfig } from '@/packages/components/external/Decorates/Three/ThreeDimensional'
 import { Headline1Config } from '@/packages/components/external/Decorates/Headline/Headline1'
@@ -80,6 +82,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)//重写信息下的轮播图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)//重写信息下的select
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, ButtonConfig)//新增信息下的按钮
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, TreeConfig)//新增信息下的树形控件
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideIframeConfig)//重写信息下的远程加载网页
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)//重写信息下的日期
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)//重写信息下的tab
@@ -102,6 +105,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)//重写图表下的饼图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig)//重写图表下的地图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)//重写图表下的水球图
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideDialConfig)//重写图表下的表盘
   //
 }
 

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

@@ -262,7 +262,32 @@ export const useSocketStore = defineStore({
        */
      chartEditStore.getComponentList.forEach(targetItem => {
       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 => {
           if (groupItem.id === id) {
               const _value = this.getComponentValueByKeys(groupItem, value)

@@ -24,7 +24,8 @@ export const hideAsideComponentsObj = {
     'VImageCarousel', //轮播图
     'VVideo', //视频
     'VIframe', //远程网页
-    'VWaterPolo' //水球图
+    'VWaterPolo', //水球图
+    'VDial', //表盘
   ],
   Texts: [
     'VTextGradient', //渐变文字
@@ -52,6 +53,7 @@ export const hideAsideComponentsObj = {
     'VIframe', //远程网页
     'VImageCarousel', //轮播图
     'VWaterPolo', //水球图
+    'VDial', //表盘
     'VInputsTab', //标签选择器
     'VInputsSelect', //下拉选择器
     'VInputsDate' //日期选择器

+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)
 /**
- * THINGS_KIT 升级版本这里有冲突
+ * THINGS_KIT 修改了部分重写引入，升级版本这里有冲突
  * 源文件 './ContentHeader/headerRightBtn/index.vue' ./ContentHeader/headerLeftBtn/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 ContentLayers = loadAsyncComponent(() => import('./ContentLayers/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'))
 
 // 右键