feat(src/packages/components): 大屏新增图表组件可以进行自定义颜色，每个图表都可以自定义自己的颜色，使用方法文档已经更新

@@ -298,6 +298,36 @@
     </setting-item-box>
     </setting-item-box>
   </collapse-item>
   </collapse-item>
 
 
+  <!-- 颜色 -->
+  <collapse-item name="颜色" expanded>
+      <n-card
+      v-for="(value, key) in chartCustomColor"
+      :key="key"
+      class="card-box"
+      size="small"
+      hoverable
+      embedded
+    >
+      <div class="go-flex-items-center">
+        <n-ellipsis style="text-align: left; width: 60px">{{ value?.name }} </n-ellipsis>
+        <span
+          class="theme-color-item"
+          v-for="colorItem in fetchShowColors(value!.color)"
+          :key="colorItem"
+          :style="{ backgroundColor: colorItem }"
+        ></span>
+        <div @click="createCustomColorHandle">
+          <n-icon size="18">
+              <add-icon></add-icon>
+          </n-icon>
+      </div>
+      </div>
+      <div class="theme-bottom" :style="{ backgroundImage: colorBackgroundImage(value!) }"></div>
+    </n-card>
+    <!-- 自定义颜色 modal -->
+    <create-color v-model:modelShow="createColorModelShow" :applicationGroup="applicationGroup"></create-color>
+  </collapse-item>
+
   <collapse-item v-if="visualMap" name="视觉映射">
   <collapse-item v-if="visualMap" name="视觉映射">
     <template #header>
     <template #header>
       <n-switch v-model:value="visualMap.show" size="small"></n-switch>
       <n-switch v-model:value="visualMap.show" size="small"></n-switch>
@@ -343,15 +373,19 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, computed, watch } from 'vue'
+import { PropType, computed, watch, ref } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { axisConfig, legendConfig } from '@/packages/chartConfiguration/echarts/index'
 import { axisConfig, legendConfig } from '@/packages/chartConfiguration/echarts/index'
 import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting'
 import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting'
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import EchartsRendererSetting from './EchartsRendererSetting.vue'
 import EchartsRendererSetting from './EchartsRendererSetting.vue'
+import cloneDeep from 'lodash/cloneDeep'
+import { loadAsyncComponent, colorCustomMerge } from '@/utils'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useTargetData } from "@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook"
 
 
-const { HelpOutlineIcon } = icon.ionicons5
+const { HelpOutlineIcon, AddIcon } = icon.ionicons5
 
 
 const props = defineProps({
 const props = defineProps({
   optionData: {
   optionData: {
@@ -365,6 +399,10 @@ const props = defineProps({
   }
   }
 })
 })
 
 
+const { targetData } = useTargetData()
+
+const CreateColor = loadAsyncComponent(() => import('@/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue'))
+
 const chartEditStore = useChartEditStore()
 const chartEditStore = useChartEditStore()
 const themeSetting = computed(() => {
 const themeSetting = computed(() => {
   const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
   const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
@@ -415,4 +453,85 @@ watch(() => legend.value && legend.value.textStyle.color, (newVal) => {
   immediate: true,
   immediate: true,
   deep: true,
   deep: true,
 })
 })
+
+// 底色
+const colorBackgroundImage = (item: { color: string[] }) => {
+  return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`
+}
+
+// 获取用来展示的色号
+const fetchShowColors = (colors: Array<string>) => {
+  return cloneDeep(colors).splice(0, 6)
+}
+
+// 自定义颜色
+const chartCustomColor = computed(() => {
+  const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
+  if(Reflect.has(targetData.value, 'colors')){
+    return {
+      'chartCustom': targetData.value?.colors
+    }
+  } else {
+    return {
+      'chartCustom': colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
+    }
+  }
+})
+
+// 全局颜色
+const designStore = useDesignStore()
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+const createColorModelShow = ref(false)
+
+const applicationGroup = ref(false)
+
+const createCustomColorHandle = () => {
+  createColorModelShow.value = true
+  applicationGroup.value = true
+}
 </script>
 </script>
+
+<style lang="scss" scoped>
+$radius: 10px;
+$itemRadius: 6px;
+
+.card-box {
+  cursor: pointer;
+  margin-top: 15px;
+  padding: 0;
+  @include fetch-bg-color('background-color4-shallow');
+  border-radius: $radius;
+  overflow: hidden;
+
+  &.selected {
+    border: 2px solid v-bind('themeColor');
+    border-bottom: 1px solid rgba(0, 0, 0, 0);
+  }
+  &:first-child {
+    margin-top: 5px;
+  }
+  .go-flex-items-center {
+    justify-content: space-between;
+    align-items: center;
+    margin-top: -4px;
+  }
+  .theme-color-item {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: $itemRadius;
+  }
+  .theme-bottom {
+    position: absolute;
+    left: 0;
+    bottom: 0px;
+    width: 100%;
+    height: 3px;
+  }
+}
+</style>

@@ -185,6 +185,12 @@ export interface PublicConfigType {
   }
   }
 }
 }
 
 
+export interface ChartCustomColor {
+  name: string
+  color: string[]
+}
+
+
 export interface CreateComponentType extends PublicConfigType, requestConfig {
 export interface CreateComponentType extends PublicConfigType, requestConfig {
   key: string
   key: string
   chartConfig: ConfigType
   chartConfig: ConfigType
@@ -192,6 +198,7 @@ export interface CreateComponentType extends PublicConfigType, requestConfig {
   groupList?: Array<CreateComponentType>
   groupList?: Array<CreateComponentType>
   saveHistoryInput?: string // THINGS_KIT 新增一个接口字段 saveHistoryInput,用于记录当前组件id和输入框的内容，这里不能重写，有很多地方引用到的，这里升级版本有冲突
   saveHistoryInput?: string // THINGS_KIT 新增一个接口字段 saveHistoryInput,用于记录当前组件id和输入框的内容，这里不能重写，有很多地方引用到的，这里升级版本有冲突
   wsOriginalMessage?: any
   wsOriginalMessage?: any
+  colors?: ChartCustomColor // THINGS_KIT 新增一个接口字段 用于组件自定义颜色，一般是图表组件
 }
 }
 
 
 // 组件成组实例类
 // 组件成组实例类

@@ -40,7 +40,7 @@ import { ref, computed } from 'vue'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { chartColors, ChartColorsNameType } from '@/settings/chartThemes/index'
+import { ChartColorsNameType } from '@/settings/chartThemes/index'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { loadAsyncComponent, colorCustomMerge } from '@/utils'
 import { loadAsyncComponent, colorCustomMerge } from '@/utils'
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'

@@ -93,7 +93,8 @@
       <!-- 底部 -->
       <!-- 底部 -->
       <template #action>
       <template #action>
         <n-space justify="end">
         <n-space justify="end">
-          <n-button @click="closeHandle">操作完成</n-button>
+          <n-button @click="applicationGroupHandle" v-if="applicationGroup">应用此分组</n-button>
+          <n-button v-if="!applicationGroup" @click="closeHandle">操作完成</n-button>
         </n-space>
         </n-space>
       </template>
       </template>
     </n-card>
     </n-card>
@@ -101,22 +102,27 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { ref, watch, computed, reactive, nextTick, onMounted } from 'vue'
+import { ref, watch, computed, reactive, nextTick } from 'vue'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
 import noData from '@/assets/images/canvas/noData.png'
 import noData from '@/assets/images/canvas/noData.png'
 import { getUUID, goDialog } from '@/utils'
 import { getUUID, goDialog } from '@/utils'
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'
-import { UvIndex } from '@vicons/carbon'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { CreateColorRender } from '../CreateColorRender/index'
 import { CreateColorRender } from '../CreateColorRender/index'
+import { useTargetData } from "@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook"
+
+
 
 
 const props = defineProps({
 const props = defineProps({
-  modelShow: Boolean
+  modelShow: Boolean,
+  applicationGroup: Boolean,
 })
 })
 const emit = defineEmits(['update:modelShow', 'editSaveHandle'])
 const emit = defineEmits(['update:modelShow', 'editSaveHandle'])
 const { DuplicateOutlineIcon, TrashIcon, ArrowDownIcon } = icon.ionicons5
 const { DuplicateOutlineIcon, TrashIcon, ArrowDownIcon } = icon.ionicons5
 
 
+const { targetData } = useTargetData()
+
 type ColorType = {
 type ColorType = {
   id: string
   id: string
   name: string
   name: string
@@ -161,6 +167,7 @@ const selectThemeColor = computed(() => chartEditStore.getEditCanvasConfig.chart
 
 
 // 选择
 // 选择
 const selectHandle = (item: ColorType) => {
 const selectHandle = (item: ColorType) => {
+  targetData.value.colors = item
   if (item.id === selectColorId.value) return
   if (item.id === selectColorId.value) return
   if (updateColor.value !== undefined) {
   if (updateColor.value !== undefined) {
     goDialog({
     goDialog({
@@ -281,6 +288,11 @@ const closeHandle = () => {
 const colorBackgroundImage = (item: ColorType) => {
 const colorBackgroundImage = (item: ColorType) => {
   return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`
   return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`
 }
 }
+
+//应用此分组
+const applicationGroupHandle = () => {
+  closeHandle()
+}
 </script>
 </script>
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">

@@ -38,7 +38,7 @@
           :is="item.chartConfig.chartKey"
           :is="item.chartConfig.chartKey"
           :chartConfig="item"
           :chartConfig="item"
           :themeSetting="themeSetting"
           :themeSetting="themeSetting"
-          :themeColor="themeColor"
+          :themeColor="item.colors ? item.colors : themeColor"
           :style="{
           :style="{
             ...useSizeStyle(item.attr),
             ...useSizeStyle(item.attr),
             ...getFilterStyle(item.styles),
             ...getFilterStyle(item.styles),

@@ -28,7 +28,7 @@
                 @contextmenu="handleContextMenu($event, item, optionsHandle)">
                 @contextmenu="handleContextMenu($event, item, optionsHandle)">
                 <component class="edit-content-chart" :class="animationsClass(item.styles.animations)"
                 <component class="edit-content-chart" :class="animationsClass(item.styles.animations)"
                   :is="item.chartConfig.chartKey" :chartConfig="item" :themeSetting="themeSetting"
                   :is="item.chartConfig.chartKey" :chartConfig="item" :themeSetting="themeSetting"
-                  :themeColor="themeColor" :style="{
+                  :themeColor="item.colors ? item.colors : themeColor" :style="{
                     ...useSizeStyle(item.attr),
                     ...useSizeStyle(item.attr),
                     ...getFilterStyle(item.styles),
                     ...getFilterStyle(item.styles),
                     ...getTransformStyle(item.styles),
                     ...getTransformStyle(item.styles),

@@ -24,7 +24,7 @@
       :id="item.id"
       :id="item.id"
       :chartConfig="item"
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeSetting="themeSetting"
-      :themeColor="themeColor"
+      :themeColor="item.colors ? item.colors : themeColor"
       :style="{
       :style="{
           ...getSizeStyle(item.attr),
           ...getSizeStyle(item.attr),
           ...getFilterStyle(item.styles),
           ...getFilterStyle(item.styles),

@@ -20,7 +20,7 @@
       :groupData="(item as CreateComponentGroupType)"
       :groupData="(item as CreateComponentGroupType)"
       :groupIndex="index"
       :groupIndex="index"
       :themeSetting="themeSetting"
       :themeSetting="themeSetting"
-      :themeColor="themeColor"
+      :themeColor="item.colors ? item.colors : themeColor"
     ></preview-render-group>
     ></preview-render-group>
 
 
     <!-- 单组件 -->
     <!-- 单组件 -->
@@ -30,7 +30,7 @@
       :id="item.id"
       :id="item.id"
       :chartConfig="item"
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeSetting="themeSetting"
-      :themeColor="themeColor"
+      :themeColor="item.colors ? item.colors : themeColor"
       :style="{	    
       :style="{	    
         ...getSizeStyle(item.attr),	    
         ...getSizeStyle(item.attr),	    
         ...getFilterStyle(item.styles),
         ...getFilterStyle(item.styles),