diff --git a/src/assets/images/chart/backgrounds/theme1.png b/src/assets/images/chart/backgrounds/theme1.png
new file mode 100644
index 00000000..0e9dc840
Binary files /dev/null and b/src/assets/images/chart/backgrounds/theme1.png differ
diff --git a/src/assets/images/chart/customponents/Background1.jpg b/src/assets/images/chart/customponents/Background1.jpg
new file mode 100644
index 00000000..26f133d2
Binary files /dev/null and b/src/assets/images/chart/customponents/Background1.jpg differ
diff --git a/src/assets/images/chart/customponents/Background2.jpg b/src/assets/images/chart/customponents/Background2.jpg
new file mode 100644
index 00000000..983a2afd
Binary files /dev/null and b/src/assets/images/chart/customponents/Background2.jpg differ
diff --git a/src/assets/images/chart/customponents/Background3.jpg b/src/assets/images/chart/customponents/Background3.jpg
new file mode 100644
index 00000000..a6d2a83b
Binary files /dev/null and b/src/assets/images/chart/customponents/Background3.jpg differ
diff --git a/src/assets/images/chart/customponents/Background4.jpg b/src/assets/images/chart/customponents/Background4.jpg
new file mode 100644
index 00000000..042c3ad4
Binary files /dev/null and b/src/assets/images/chart/customponents/Background4.jpg differ
diff --git a/src/assets/images/chart/customponents/Background5.jpg b/src/assets/images/chart/customponents/Background5.jpg
new file mode 100644
index 00000000..ce71988b
Binary files /dev/null and b/src/assets/images/chart/customponents/Background5.jpg differ
diff --git a/src/assets/images/chart/customponents/Background6.jpg b/src/assets/images/chart/customponents/Background6.jpg
new file mode 100644
index 00000000..24989285
Binary files /dev/null and b/src/assets/images/chart/customponents/Background6.jpg differ
diff --git a/src/assets/images/chart/customponents/theme2.png b/src/assets/images/chart/customponents/theme2.png
deleted file mode 100644
index 614f1878..00000000
Binary files a/src/assets/images/chart/customponents/theme2.png and /dev/null differ
diff --git a/src/hooks/useChartCommonData.hook.ts b/src/hooks/useChartCommonData.hook.ts
index a320bbff..9d04af7d 100644
--- a/src/hooks/useChartCommonData.hook.ts
+++ b/src/hooks/useChartCommonData.hook.ts
@@ -36,7 +36,7 @@ export const useChartCommonData = (
             // if (vChartRef.value) {
             //     setOption(vChartRef.value, { dataset: dataset })
             // }
-            if(!dataset.dimensions) return
+            // if(!dataset.dimensions) return
             if(targetComponent.option){
                 let seriesItem = cloneDeep(targetComponent.option.series[0])
                 let series = []
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme2/config.ts b/src/packages/components/CustomComponents/Backgrounds/Backgrounds/config.ts
similarity index 63%
rename from src/packages/components/CustomComponents/CustomComponents/Theme2/config.ts
rename to src/packages/components/CustomComponents/Backgrounds/Backgrounds/config.ts
index 250d3e92..3013f0ac 100644
--- a/src/packages/components/CustomComponents/CustomComponents/Theme2/config.ts
+++ b/src/packages/components/CustomComponents/Backgrounds/Backgrounds/config.ts
@@ -1,14 +1,13 @@
 import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
-import { Theme2Config } from './index'
+import { BackgroundsConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
-// import background from '@/assets/customComponents/theme1/backgrond.jpg'
 
 export const option = {
-  // 图片路径
+  // 图片
   dataset: '',
   // 适应方式
-  fit: 'contain',
+  fit: 'fill',
   // 圆角
   borderRadius: 0
 }
@@ -25,10 +24,7 @@ export default class Config extends PublicConfigClass implements CreateComponent
       y: 0,
     }
   }
-  public key = Theme2Config.key
-  public chartConfig = cloneDeep(Theme2Config)
+  public key = BackgroundsConfig.key
+  public chartConfig = cloneDeep(BackgroundsConfig)
   public option = cloneDeep(option)
-  public customData = cloneDeep({
-    title: '',
-  })
 }
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme3/config.vue b/src/packages/components/CustomComponents/Backgrounds/Backgrounds/config.vue
similarity index 85%
rename from src/packages/components/CustomComponents/CustomComponents/Theme3/config.vue
rename to src/packages/components/CustomComponents/Backgrounds/Backgrounds/config.vue
index 83836728..13ff3bae 100644
--- a/src/packages/components/CustomComponents/CustomComponents/Theme3/config.vue
+++ b/src/packages/components/CustomComponents/Backgrounds/Backgrounds/config.vue
@@ -1,10 +1,5 @@
 <template>
   <collapse-item name="属性" :expanded="true">
-    <setting-item-box name="路径" :alone="true">
-      <setting-item>
-        <n-input v-model:value="optionData.dataset" size="small"></n-input>
-      </setting-item>
-    </setting-item-box>
     <setting-item-box name="样式">
       <setting-item name="类型">
         <n-select
diff --git a/src/packages/components/CustomComponents/Backgrounds/Backgrounds/index.ts b/src/packages/components/CustomComponents/Backgrounds/Backgrounds/index.ts
new file mode 100644
index 00000000..ffcae11e
--- /dev/null
+++ b/src/packages/components/CustomComponents/Backgrounds/Backgrounds/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '@/packages/components/CustomComponents/index.d'
+
+export const BackgroundsConfig: ConfigType = {
+  key: 'Backgrounds',
+  chartKey: 'VBackgrounds',
+  conKey: 'VCBackgrounds',
+  title: '背景',
+  category: ChatCategoryEnum.BACKGROUNDS,
+  categoryName: ChatCategoryEnumName.BACKGROUNDS,
+  package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: ''
+}
diff --git a/src/packages/components/CustomComponents/Backgrounds/Backgrounds/index.vue b/src/packages/components/CustomComponents/Backgrounds/Backgrounds/index.vue
new file mode 100644
index 00000000..f43ec33a
--- /dev/null
+++ b/src/packages/components/CustomComponents/Backgrounds/Backgrounds/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div :style="getStyle(borderRadius)">
+    <n-image
+      :object-fit="fit"
+      preview-disabled
+      :src="`/src/assets/images/chart/customponents/${dataset}`"
+      :fallback-src="requireErrorImg()"
+      :width="w"
+      lazy
+      style="position: absolute;left: 0;width: 100%;height: 100%"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { requireErrorImg } from '@/utils'
+import { CreateComponentType } from '@/packages/index.d'
+// import background from '@/assets/customComponents/theme1/backgrond.jpg'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
+
+const getStyle = (radius: number) => {
+  return {
+    borderRadius: `${radius}px`,
+    overflow: 'hidden'
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/packages/components/CustomComponents/Backgrounds/index.ts b/src/packages/components/CustomComponents/Backgrounds/index.ts
new file mode 100644
index 00000000..34f2eb16
--- /dev/null
+++ b/src/packages/components/CustomComponents/Backgrounds/index.ts
@@ -0,0 +1,25 @@
+import { BackgroundsConfig } from './Backgrounds/index'
+import { PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+
+const backgroundNames = [
+    'Background1.jpg',
+    'Background2.jpg',
+    'Background3.jpg',
+    'Background4.jpg',
+    'Background5.jpg',
+    'Background6.jpg',
+]
+const backgrounds = backgroundNames.map((name, i) => ({
+    ...BackgroundsConfig,
+    category: ChatCategoryEnum.BACKGROUNDS,
+    categoryName: ChatCategoryEnumName.BACKGROUNDS,
+    package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
+    dataset: name,
+    // 既是缩略图 又是背景图
+    image: name,
+    title: `背景${i + 1}`,
+    redirectComponent: `${BackgroundsConfig.package}/${BackgroundsConfig.category}/${BackgroundsConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
+}))
+
+export default backgrounds
diff --git a/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue b/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue
index 2aa4aeca..1deca73d 100644
--- a/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue
+++ b/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="getStyle(borderRadius)" class="box" style="overflow: visible;position: relative">
+  <div v-if="chartConfig.customData?.mapId" :style="getStyle(borderRadius)" class="box" style="overflow: visible;position: relative">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -92,10 +92,10 @@
       </g>
     </svg>
     <!-- img标签出来的图不完整 所以换background-url background-reapt object-fit: contain不支持 -->
-<!--    <img v-show="showImg" @load="showImg = true" :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>-->
-<!--    <div id="img" :style="{backgroundImage: `url(${gdMap.propValue})`, transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></div>-->
+   <img v-show="showImg" @load="showImg = true" :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>
+   <!-- <div id="img" :style="{backgroundImage: `url(${gdMap.propValue})`, transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></div> -->
 <!--    background-url出来的截图还是不行 会变大 用canvas可以-->
-    <canvas ref="canvas" width="870" height="560" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></canvas>
+    <!-- <canvas ref="canvas" width="870" height="560" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></canvas> -->
     <div :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top">
       <div
         v-for="(item, i) in point"
@@ -132,6 +132,10 @@
       </div>
     </div>
   </div>
+  <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;" v-else>
+    <img src="@/assets/images/exception/nodata.svg" style="width: 100%;height: 30%" alt="">
+    <div style="color: #fff;text-align: center;font-size: 40px;">请输入地图ID</div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -192,20 +196,21 @@ let safeDaysList = reactive(['0', '0', '0', '0', '0', '0'])
 const canvas = ref() as Ref<HTMLCanvasElement>
 const getData = () => {
   safeDaysList.splice(0, safeDaysList.length, ...(moment().diff(moment(systemConfig.overview_dglt_idc_operation_date), 'days') + 1).toString().padStart(6, '0').split(''))
+  if(!props.chartConfig.customData!.mapId) return
   publicInterface('/dcim/space_page', 'get_one_no_permission', { id: props.chartConfig.customData!.mapId }).then(res => {
     if(res && res.data){
       const arr:[] = JSON.parse(res.data.canvas_data)
       for (const key in gdMap) delete gdMap[key]
       Object.assign(gdMap, arr.find((_:any) => _.component === 'Picture') || {})
-      if(canvas.value){
-        const ctx = canvas.value.getContext('2d');
-        ctx?.clearRect(0, 0, canvas.value.width, canvas.value.height);
-        const img = new Image();
-        img.onload = function() {
-          if(ctx) ctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height);
-        };
-        img.src = gdMap.propValue;
-      }
+      // if(canvas.value){
+      //   const ctx = canvas.value.getContext('2d');
+      //   ctx?.clearRect(0, 0, canvas.value.width, canvas.value.height);
+      //   const img = new Image();
+      //   img.onload = function() {
+      //     if(ctx) ctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height);
+      //   };
+      //   img.src = gdMap.propValue;
+      // }
       text.splice(0, text.length, ...arr.filter((_:any) => _.component === 'v-text'))
       point.splice(0, point.length, ...arr.filter((_:any) => _.component === 'svg-shape'))
       const activeAlarmData = {
@@ -260,7 +265,7 @@ watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.reques
 })
 const fn = debounce(() => {
   getData()
-}, 200)
+}, 1000)
 watch(() => props.chartConfig.customData!.mapId, fn)
 
 onMounted(() => {
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme2/config.vue b/src/packages/components/CustomComponents/CustomComponents/Theme2/config.vue
deleted file mode 100644
index 83836728..00000000
--- a/src/packages/components/CustomComponents/CustomComponents/Theme2/config.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <collapse-item name="属性" :expanded="true">
-    <setting-item-box name="路径" :alone="true">
-      <setting-item>
-        <n-input v-model:value="optionData.dataset" size="small"></n-input>
-      </setting-item>
-    </setting-item-box>
-    <setting-item-box name="样式">
-      <setting-item name="类型">
-        <n-select
-          v-model:value="optionData.fit"
-          size="small"
-          :options="fitList"
-        ></n-select>
-      </setting-item>
-      <setting-item name="圆角">
-        <n-input-number
-          v-model:value="optionData.borderRadius"
-          size="small"
-          :min="0"
-          placeholder="圆角"
-        ></n-input-number>
-      </setting-item>
-    </setting-item-box>
-  </collapse-item>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { option } from './config'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from '@/components/Pages/ChartItemSetting'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true,
-  },
-})
-
-// 适应类型
-const fitList = [
-  {
-    value: 'fill',
-    label: 'fill'
-  },
-  {
-    value: 'contain',
-    label: 'contain'
-  },
-  {
-    value: 'cover',
-    label: 'cover'
-  },
-  {
-    value: 'scale-down',
-    label: 'scale-down'
-  },
-  {
-    value: 'none',
-    label: 'none'
-  },
-]
-</script>
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme2/configData.vue b/src/packages/components/CustomComponents/CustomComponents/Theme2/configData.vue
deleted file mode 100644
index 2c83af5e..00000000
--- a/src/packages/components/CustomComponents/CustomComponents/Theme2/configData.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <n-space vertical>
-    <setting-item-box name="标题" :alone="true">
-      <n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
-    </setting-item-box>
-  </n-space>
-</template>
-
-<script lang="ts" setup>
-import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
-
-const props = defineProps(['customData', 'request'])
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme2/index.ts b/src/packages/components/CustomComponents/CustomComponents/Theme2/index.ts
deleted file mode 100644
index 0fe02fad..00000000
--- a/src/packages/components/CustomComponents/CustomComponents/Theme2/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum,ChatCategoryEnumName } from '@/packages/components/CUSTOMCOMPONENTS/index.d'
-
-export const Theme2Config: ConfigType = {
-  key: 'Theme2',
-  chartKey: 'VTheme2',
-  conKey: 'VCTheme2',
-  conDataKey: 'VCDTheme2',
-  title: '背景2',
-  // category: ChatCategoryEnum.THEMES,
-  // categoryName: ChatCategoryEnumName.THEMES,
-  // package: PackagesCategoryEnum.THEMESANDLAYOUTS,
-  category: ChatCategoryEnum.CUSTOMCOMPONENTS,
-  categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
-  package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
-  chartFrame: ChartFrameEnum.COMMON,
-  image: 'theme2.png'
-}
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme2/index.vue b/src/packages/components/CustomComponents/CustomComponents/Theme2/index.vue
deleted file mode 100644
index 1d768199..00000000
--- a/src/packages/components/CustomComponents/CustomComponents/Theme2/index.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<template>
-  <div :style="getStyle(borderRadius)" class="Theme1">
-    <svg
-      ref="svg"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      viewBox="0 0 1920 60"
-      style="enable-background:new 0 0 1920 60;"
-      xml:space="preserve"
-    >
-      <g id="顶栏">
-        <g>
-          <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="960" y1="60" x2="960" y2="0">
-            <stop offset="0" style="stop-color:#0D2952;stop-opacity:0.1" />
-            <stop offset="1" style="stop-color:#0D2952;stop-opacity:0.8" />
-          </linearGradient>
-          <rect style="fill:url(#SVGID_1_);" width="1920" height="60" />
-          <g id="系统抬头">
-            <!-- <image v-if="systemConfig.system_logo_url" width="240" height="40" :xlink:href="systemConfig.system_logo_url" /> -->
-          </g>
-          <g>
-            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="960" y1="-729.2512" x2="960" y2="-789.2512" gradientTransform="matrix(1 0 0 -1 0 -729.2512)">
-              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
-              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
-            </linearGradient>
-            <path style="fill:url(#SVGID_2_);" d="M600,0l54.3,54.3c3.1,3.1,9.3,5.7,13.7,5.7h584c4.4,0,10.5-2.5,13.7-5.7L1320,0" />
-          </g>
-          <g>
-<!--            <text transform="matrix(1 0 0 1 697.4991 43)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:30px;">-->
-<!--              {{chartConfig?.customData?.title}}-->
-<!--            </text>-->
-          </g>
-          <g>
-            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="770" y1="58" x2="1150" y2="58">
-              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
-              <stop offset="0.5" style="stop-color:#4196FF" />
-              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0" />
-            </linearGradient>
-            <path style="fill:url(#SVGID_3_);" d="M770,56c0,0,0.9,0.9,2,2s3.8,2,6,2h364c2.2,0,4.9-0.9,6-2s2-2,2-2" />
-          </g>
-          <g>
-            <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="3591" y1="5" x2="4188.75" y2="5" gradientTransform="matrix(1 0 0 1 -3584 0)">
-              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
-              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
-            </linearGradient>
-            <polygon style="opacity:0.4;fill:url(#SVGID_4_);" points="604.8,8 7,8 13,2 598.8,2" />
-
-            <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-6698.249" y1="4" x2="-6592.999" y2="4" gradientTransform="matrix(-1 0 0 1 -6094.999 0)">
-              <stop offset="0" style="stop-color:#00FFFF" />
-              <stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
-            </linearGradient>
-            <path style="fill:url(#SVGID_5_);" d="M563,0l8.3,8h2L565,0H563z M553,0l8.3,8h2L555,0H553z M568,0l8.3,8h2L570,0H568z M548,0 l8.3,8h2L550,0H548z M558,0l8.3,8h2L560,0H558z M588,0l8.3,8h2L590,0H588z M593,0l8.3,8h2L595,0H593z M578,0l8.3,8h2L580,0H578z M573,0l8.3,8h2L575,0H573z M583,0l8.3,8h2L585,0H583z M528,0l8.3,8h2L530,0H528z M508,0l8.3,8h2L510,0H508z M503,0l8.3,8h2 L505,0H503z M498,0l8.3,8h2L500,0H498z M543,0l8.3,8h2L545,0H543z M513,0l8.3,8h2L515,0H513z M533,0l8.3,8h2L535,0H533z M538,0 l8.3,8h2L540,0H538z M518,0l8.3,8h2L520,0H518z M523,0l8.3,8h2L525,0H523z" />
-          </g>
-          <g>
-            <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-4423.999" y1="5" x2="-3826.2493" y2="5" gradientTransform="matrix(-1 0 0 1 -2510.9993 0)">
-              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
-              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
-            </linearGradient>
-            <polygon style="opacity:0.4;fill:url(#SVGID_6_);" points="1315.3,8 1913,8 1907,2 1321.3,2 			" />
-            <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1316.75" y1="4" x2="1422" y2="4">
-              <stop offset="0" style="stop-color:#00FFFF" />
-              <stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
-            </linearGradient>
-            <path style="fill:url(#SVGID_7_);" d="M1355,0l-8.3,8h2l8.3-8H1355z M1365,0l-8.3,8h2l8.3-8H1365z M1350,0l-8.3,8h2l8.3-8H1350z M1370,0l-8.3,8h2l8.3-8H1370z M1360,0l-8.3,8h2l8.3-8H1360z M1330,0l-8.3,8h2l8.3-8H1330z M1325,0l-8.3,8h2l8.3-8H1325z M1340,0 l-8.3,8h2l8.3-8H1340z M1345,0l-8.3,8h2l8.3-8H1345z M1335,0l-8.3,8h2l8.3-8H1335z M1390,0l-8.3,8h2l8.3-8H1390z M1410,0l-8.3,8 h2l8.3-8H1410z M1415,0l-8.3,8h2l8.3-8H1415z M1420,0l-8.3,8h2l8.3-8H1420z M1375,0l-8.3,8h2l8.3-8H1375z M1405,0l-8.3,8h2l8.3-8 H1405z M1385,0l-8.3,8h2l8.3-8H1385z M1380,0l-8.3,8h2l8.3-8H1380z M1400,0l-8.3,8h2l8.3-8H1400z M1395,0l-8.3,8h2l8.3-8H1395z" />
-          </g>
-          <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="760.5" y1="59" x2="1159.5" y2="59">
-            <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0" />
-            <stop offset="0.5" style="stop-color:#FFFFFF" />
-            <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
-          </linearGradient>
-          <rect x="760.5" y="58" style="fill:url(#SVGID_8_);" width="399" height="2" />
-          <rect x="1760" style="opacity:0;fill:#091C38;" width="160" height="60" />
-          <g>
-            <text transform="matrix(1 0 0 1 1808.9991 45)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:14px;">{{ time }}</text>
-          </g>
-          <g>
-            <text transform="matrix(1 0 0 1 1808.9991 27)" style="fill:#9CA4AF; font-family:'PingFang-SC-Regular'; font-size:14px;">{{ date }}</text>
-          </g>
-          <g>
-            <g>
-              <g>
-                <path style="fill:#234B9B;" d="M1780,17c7.2,0,13,5.8,13,13s-5.8,13-13,13s-13-5.8-13-13S1772.8,17,1780,17 M1780,16 c-7.7,0-14,6.3-14,14s6.3,14,14,14s14-6.3,14-14S1787.7,16,1780,16L1780,16z" />
-              </g>
-              <polyline style="fill:none;stroke:#234B9B;stroke-miterlimit:10;" points="1780,21 1780,31 1785,36" />
-            </g>
-          </g>
-          <g>
-            <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-3831.3499" y1="-785.323" x2="-3110.6487" y2="-785.323" gradientTransform="matrix(-1 0 0 -1 -2510.9993 -755.2512)">
-              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0.8" />
-              <stop offset="0.4462" style="stop-color:#4196FF;stop-opacity:0" />
-              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.8" />
-            </linearGradient>
-            <path style="fill:none;stroke:url(#SVGID_9_);stroke-miterlimit:10;" d="M1320,0.5l-54.3,53.4c-3.1,3.1-9.3,5.6-13.7,5.6H668 c-4.4,0-10.6-2.5-13.7-5.6L600,0.5" />
-          </g>
-        </g>
-    </g>
-    </svg>
-    <div
-      :style="{height: `${svgHeight}px`,lineHeight: `${svgHeight}px`, fontSize: `${svgHeight / 2}px`}"
-      style="position: absolute;top: 0;width: 100%;"
-    >
-      <div
-        style="font-family: PingFang-SC-Bold;color: #fff;width: 50%;height: 100%;text-align: center;position: absolute;top: 0;left: 50%;transform: translateX(-50%)"
-      >
-        {{chartConfig?.customData?.title}}
-      </div>
-      <div id="fullscreenButton" :style="{'--height': `${svgHeight}px`}" class="full-screen-btn" @click="toggleFullscreen">
-        <i class="iconfont icon-quanping full-screen" :title="showMoreMenuBts ? '全屏' : '退出全屏'"></i>
-        {{ showMoreMenuBts ? '全屏' : '退出全屏' }}
-      </div>
-    </div>
-    <n-image
-      object-fit="fill"
-      preview-disabled
-      :src="background"
-      :fallback-src="requireErrorImg()"
-      :width="w"
-      lazy
-      :style="{height, top: `${svgHeight}px`}"
-      style="position: absolute;left: 0;width: 100%;"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType, shallowReactive, watch, toRefs, onMounted, onUnmounted, ref, computed } from 'vue'
-import { requireErrorImg } from '@/utils'
-import { CreateComponentType } from '@/packages/index.d'
-import moment from 'moment'
-import background from '@/assets/customComponents/Theme2/background.jpg'
-import { isPreview } from '@/utils/router'
-import { postMessageToParent, ResizeObserverELE } from "@/utils";
-
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-
-const { w, h } = toRefs(props.chartConfig.attr)
-const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
-
-let date = ref(moment().format('yyyy-MM-DD'))
-const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-let time = ref(moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))])
-let timer: unknown
-onMounted(() => {
-  // document.getElementById('fullscreenButton')!.addEventListener('click', function() {
-  //   showMoreMenuBts.value = !showMoreMenuBts.value
-  //   // 检查是否已经处于全屏模式
-  //   if (document.fullscreenElement ||
-  //     (document as any).webkitFullscreenElement ||
-  //     (document as any).mozFullScreenElement ||
-  //     (document as any).msFullscreenElement) {
-  //     // 当前处于全屏，尝试退出全屏
-  //     if (document.exitFullscreen) {
-  //       document.exitFullscreen();
-  //     } else if ((document as any).mozCancelFullScreen) { // Firefox
-  //       (document as any).mozCancelFullScreen();
-  //     } else if ((document as any).webkitExitFullscreen) { // Chrome, Safari and Opera
-  //       (document as any).webkitExitFullscreen();
-  //     } else if ((document as any).msExitFullscreen) { // IE/Edge
-  //       (document as any).msExitFullscreen();
-  //     }
-  //   } else {
-  //     // 当前非全屏，尝试进入全屏
-  //     if (document.documentElement.requestFullscreen) {
-  //       document.documentElement.requestFullscreen();
-  //     } else if ((document.documentElement as any).mozRequestFullScreen) { // Firefox
-  //       (document.documentElement as any).mozRequestFullScreen();
-  //     } else if ((document.documentElement as any).webkitRequestFullscreen) { // Chrome, Safari and Opera
-  //       (document.documentElement as any).webkitRequestFullscreen();
-  //     } else if ((document.documentElement as any).msRequestFullscreen) { // IE/Edge
-  //       (document.documentElement as any).msRequestFullscreen();
-  //     }
-  //   }
-  // });
-  if(!isPreview()) return
-  timer = setInterval(() => {
-    date.value = moment().format('yyyy-MM-DD')
-    time.value = moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))]
-  }, 1000)
-})
-onUnmounted(() => {
-  clearInterval(timer as number)
-})
-
-const showMoreMenuBts = ref(true)
-// 切换全屏函数
-function toggleFullscreen() {
-  postMessageToParent({type: 'fullScreen'})
-
-  // console.log(document.documentElement)
-  showMoreMenuBts.value = !showMoreMenuBts.value
-  //
-  // if (document.fullscreenElement) {
-  //   // 如果当前已经是全屏状态，则退出全屏
-  //   document.exitFullscreen();
-  // } else {
-  //   // 否则，进入全屏
-  //   document.documentElement.requestFullscreen()
-  //     .catch(err => {
-  //       console.error('Error attempting to enable full-screen mode:', err);
-  //     });
-  // }
-}
-
-const option = shallowReactive({
-  dataset: ''
-})
-
-const getStyle = (radius: number) => {
-  return {
-    borderRadius: `${radius}px`,
-    overflow: 'hidden'
-  }
-}
-
-let svgHeight = ref(60)
-let height = ref('100%')
-const observer = ResizeObserverELE((w, h) => {
-  svgHeight.value = h
-  height.value = `calc(100% - ${h}px)`
-})
-const svg = ref()
-onMounted(() => {
-  if(svg.value) observer.observe(svg.value);
-})
-onUnmounted(() => {
-  observer.disconnect();
-})
-
-// // 编辑更新
-// watch(
-//   () => props.chartConfig.option.dataset,
-//   async (newData: any) => {
-//     try {
-//       // const img = await import(newData);
-//       // option.dataset = img.default
-//       option.dataset = newData
-//     } catch(e) {
-//       console.log(e)
-//     }
-//   },
-//   {
-//     immediate: true
-//   }
-// )
-//
-// // 预览更新
-// useChartDataFetch(props.chartConfig, useChartEditStore, async (newData: any) => {
-//   try {
-//     // const img = await import(newData);
-//     // option.dataset = img.default
-//     option.dataset = newData
-//   } catch(e) {
-//     console.log(e)
-//   }
-// })
-</script>
-
-<style lang="scss" scoped>
-.Theme1{
-  position: relative;
-  .full-screen-btn {
-    z-index: 999;
-    border: #4396fd 1px solid;
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 3px 10px;
-    cursor: pointer;
-    position: absolute;
-    top: 50%;
-    right: 9.6%;
-    transform: translateY(-50%);
-    color: #4396fd;
-    font-size: calc(var(--height) / 4);
-    height: calc(var(--height) / 3);
-    .full-screen {
-      font-size: 16px;
-      margin-right: 5px;
-    }
-  }
-}
-</style>
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme3/config.ts b/src/packages/components/CustomComponents/CustomComponents/Theme3/config.ts
deleted file mode 100644
index a6b8edfc..00000000
--- a/src/packages/components/CustomComponents/CustomComponents/Theme3/config.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { Theme3Config } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-// import background from '@/assets/customComponents/theme1/backgrond.jpg'
-
-export const option = {
-  // 图片路径
-  dataset: '',
-  // 适应方式
-  fit: 'contain',
-  // 圆角
-  borderRadius: 0
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType
-{
-  constructor() {
-    super();
-    this.attr = {
-      ...this.attr,
-      w: 1920,
-      h: 1080,
-      x: 0,
-      y: 0,
-    }
-  }
-  public key = Theme3Config.key
-  public chartConfig = cloneDeep(Theme3Config)
-  public option = cloneDeep(option)
-  public customData = cloneDeep({
-    title: '',
-  })
-}
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme3/configData.vue b/src/packages/components/CustomComponents/CustomComponents/Theme3/configData.vue
deleted file mode 100644
index 2c83af5e..00000000
--- a/src/packages/components/CustomComponents/CustomComponents/Theme3/configData.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <n-space vertical>
-    <setting-item-box name="标题" :alone="true">
-      <n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
-    </setting-item-box>
-  </n-space>
-</template>
-
-<script lang="ts" setup>
-import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
-
-const props = defineProps(['customData', 'request'])
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme3/index.ts b/src/packages/components/CustomComponents/CustomComponents/Theme3/index.ts
deleted file mode 100644
index 9425bc18..00000000
--- a/src/packages/components/CustomComponents/CustomComponents/Theme3/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum,ChatCategoryEnumName } from '@/packages/components/CUSTOMCOMPONENTS/index.d'
-
-export const Theme3Config: ConfigType = {
-  key: 'Theme3',
-  chartKey: 'VTheme3',
-  conKey: 'VCTheme3',
-  conDataKey: 'VCDTheme3',
-  title: '背景3',
-  // category: ChatCategoryEnum.THEMES,
-  // categoryName: ChatCategoryEnumName.THEMES,
-  // package: PackagesCategoryEnum.THEMESANDLAYOUTS,
-  category: ChatCategoryEnum.CUSTOMCOMPONENTS,
-  categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
-  package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
-  chartFrame: ChartFrameEnum.COMMON,
-  image: 'theme3.png'
-}
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme3/index.vue b/src/packages/components/CustomComponents/CustomComponents/Theme3/index.vue
deleted file mode 100644
index 5cb48337..00000000
--- a/src/packages/components/CustomComponents/CustomComponents/Theme3/index.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<template>
-  <div :style="getStyle(borderRadius)" class="Theme1">
-    <svg
-      ref="svg"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      viewBox="0 0 1920 60"
-      style="enable-background:new 0 0 1920 60;"
-      xml:space="preserve"
-    >
-      <g id="顶栏">
-        <g>
-          <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="960" y1="60" x2="960" y2="0">
-            <stop offset="0" style="stop-color:#0D2952;stop-opacity:0.1" />
-            <stop offset="1" style="stop-color:#0D2952;stop-opacity:0.8" />
-          </linearGradient>
-          <rect style="fill:url(#SVGID_1_);" width="1920" height="60" />
-          <g id="系统抬头">
-            <!-- <image v-if="systemConfig.system_logo_url" width="240" height="40" :xlink:href="systemConfig.system_logo_url" /> -->
-          </g>
-          <g>
-            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="960" y1="-729.2512" x2="960" y2="-789.2512" gradientTransform="matrix(1 0 0 -1 0 -729.2512)">
-              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
-              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
-            </linearGradient>
-            <path style="fill:url(#SVGID_2_);" d="M600,0l54.3,54.3c3.1,3.1,9.3,5.7,13.7,5.7h584c4.4,0,10.5-2.5,13.7-5.7L1320,0" />
-          </g>
-          <g>
-<!--            <text transform="matrix(1 0 0 1 697.4991 43)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:30px;">-->
-<!--              {{chartConfig?.customData?.title}}-->
-<!--            </text>-->
-          </g>
-          <g>
-            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="770" y1="58" x2="1150" y2="58">
-              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
-              <stop offset="0.5" style="stop-color:#4196FF" />
-              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0" />
-            </linearGradient>
-            <path style="fill:url(#SVGID_3_);" d="M770,56c0,0,0.9,0.9,2,2s3.8,2,6,2h364c2.2,0,4.9-0.9,6-2s2-2,2-2" />
-          </g>
-          <g>
-            <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="3591" y1="5" x2="4188.75" y2="5" gradientTransform="matrix(1 0 0 1 -3584 0)">
-              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
-              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
-            </linearGradient>
-            <polygon style="opacity:0.4;fill:url(#SVGID_4_);" points="604.8,8 7,8 13,2 598.8,2" />
-
-            <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-6698.249" y1="4" x2="-6592.999" y2="4" gradientTransform="matrix(-1 0 0 1 -6094.999 0)">
-              <stop offset="0" style="stop-color:#00FFFF" />
-              <stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
-            </linearGradient>
-            <path style="fill:url(#SVGID_5_);" d="M563,0l8.3,8h2L565,0H563z M553,0l8.3,8h2L555,0H553z M568,0l8.3,8h2L570,0H568z M548,0 l8.3,8h2L550,0H548z M558,0l8.3,8h2L560,0H558z M588,0l8.3,8h2L590,0H588z M593,0l8.3,8h2L595,0H593z M578,0l8.3,8h2L580,0H578z M573,0l8.3,8h2L575,0H573z M583,0l8.3,8h2L585,0H583z M528,0l8.3,8h2L530,0H528z M508,0l8.3,8h2L510,0H508z M503,0l8.3,8h2 L505,0H503z M498,0l8.3,8h2L500,0H498z M543,0l8.3,8h2L545,0H543z M513,0l8.3,8h2L515,0H513z M533,0l8.3,8h2L535,0H533z M538,0 l8.3,8h2L540,0H538z M518,0l8.3,8h2L520,0H518z M523,0l8.3,8h2L525,0H523z" />
-          </g>
-          <g>
-            <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-4423.999" y1="5" x2="-3826.2493" y2="5" gradientTransform="matrix(-1 0 0 1 -2510.9993 0)">
-              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
-              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
-            </linearGradient>
-            <polygon style="opacity:0.4;fill:url(#SVGID_6_);" points="1315.3,8 1913,8 1907,2 1321.3,2 			" />
-            <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1316.75" y1="4" x2="1422" y2="4">
-              <stop offset="0" style="stop-color:#00FFFF" />
-              <stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
-            </linearGradient>
-            <path style="fill:url(#SVGID_7_);" d="M1355,0l-8.3,8h2l8.3-8H1355z M1365,0l-8.3,8h2l8.3-8H1365z M1350,0l-8.3,8h2l8.3-8H1350z M1370,0l-8.3,8h2l8.3-8H1370z M1360,0l-8.3,8h2l8.3-8H1360z M1330,0l-8.3,8h2l8.3-8H1330z M1325,0l-8.3,8h2l8.3-8H1325z M1340,0 l-8.3,8h2l8.3-8H1340z M1345,0l-8.3,8h2l8.3-8H1345z M1335,0l-8.3,8h2l8.3-8H1335z M1390,0l-8.3,8h2l8.3-8H1390z M1410,0l-8.3,8 h2l8.3-8H1410z M1415,0l-8.3,8h2l8.3-8H1415z M1420,0l-8.3,8h2l8.3-8H1420z M1375,0l-8.3,8h2l8.3-8H1375z M1405,0l-8.3,8h2l8.3-8 H1405z M1385,0l-8.3,8h2l8.3-8H1385z M1380,0l-8.3,8h2l8.3-8H1380z M1400,0l-8.3,8h2l8.3-8H1400z M1395,0l-8.3,8h2l8.3-8H1395z" />
-          </g>
-          <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="760.5" y1="59" x2="1159.5" y2="59">
-            <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0" />
-            <stop offset="0.5" style="stop-color:#FFFFFF" />
-            <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
-          </linearGradient>
-          <rect x="760.5" y="58" style="fill:url(#SVGID_8_);" width="399" height="2" />
-          <rect x="1760" style="opacity:0;fill:#091C38;" width="160" height="60" />
-          <g>
-            <text transform="matrix(1 0 0 1 1808.9991 45)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:14px;">{{ time }}</text>
-          </g>
-          <g>
-            <text transform="matrix(1 0 0 1 1808.9991 27)" style="fill:#9CA4AF; font-family:'PingFang-SC-Regular'; font-size:14px;">{{ date }}</text>
-          </g>
-          <g>
-            <g>
-              <g>
-                <path style="fill:#234B9B;" d="M1780,17c7.2,0,13,5.8,13,13s-5.8,13-13,13s-13-5.8-13-13S1772.8,17,1780,17 M1780,16 c-7.7,0-14,6.3-14,14s6.3,14,14,14s14-6.3,14-14S1787.7,16,1780,16L1780,16z" />
-              </g>
-              <polyline style="fill:none;stroke:#234B9B;stroke-miterlimit:10;" points="1780,21 1780,31 1785,36" />
-            </g>
-          </g>
-          <g>
-            <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-3831.3499" y1="-785.323" x2="-3110.6487" y2="-785.323" gradientTransform="matrix(-1 0 0 -1 -2510.9993 -755.2512)">
-              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0.8" />
-              <stop offset="0.4462" style="stop-color:#4196FF;stop-opacity:0" />
-              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.8" />
-            </linearGradient>
-            <path style="fill:none;stroke:url(#SVGID_9_);stroke-miterlimit:10;" d="M1320,0.5l-54.3,53.4c-3.1,3.1-9.3,5.6-13.7,5.6H668 c-4.4,0-10.6-2.5-13.7-5.6L600,0.5" />
-          </g>
-        </g>
-    </g>
-    </svg>
-    <div
-      :style="{height: `${svgHeight}px`,lineHeight: `${svgHeight}px`, fontSize: `${svgHeight / 2}px`}"
-      style="position: absolute;top: 0;width: 100%;"
-    >
-      <div
-        style="font-family: PingFang-SC-Bold;color: #fff;width: 50%;height: 100%;text-align: center;position: absolute;top: 0;left: 50%;transform: translateX(-50%)"
-      >
-        {{chartConfig?.customData?.title}}
-      </div>
-      <div id="fullscreenButton" :style="{'--height': `${svgHeight}px`}" class="full-screen-btn" @click="toggleFullscreen">
-        <i class="iconfont icon-quanping full-screen" :title="showMoreMenuBts ? '全屏' : '退出全屏'"></i>
-        {{ showMoreMenuBts ? '全屏' : '退出全屏' }}
-      </div>
-    </div>
-    <n-image
-      object-fit="fill"
-      preview-disabled
-      :src="background"
-      :fallback-src="requireErrorImg()"
-      :width="w"
-      lazy
-      :style="{height, top: `${svgHeight}px`}"
-      style="position: absolute;left: 0;width: 100%;"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType, shallowReactive, watch, toRefs, onMounted, onUnmounted, ref, computed } from 'vue'
-import { requireErrorImg } from '@/utils'
-import { CreateComponentType } from '@/packages/index.d'
-import moment from 'moment'
-import background from '@/assets/customComponents/Theme3/background.png'
-import { isPreview } from '@/utils/router'
-import { postMessageToParent, ResizeObserverELE } from "@/utils";
-
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-
-const { w, h } = toRefs(props.chartConfig.attr)
-const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
-
-let date = ref(moment().format('yyyy-MM-DD'))
-const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-let time = ref(moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))])
-let timer: unknown
-onMounted(() => {
-  // document.getElementById('fullscreenButton')!.addEventListener('click', function() {
-  //   showMoreMenuBts.value = !showMoreMenuBts.value
-  //   // 检查是否已经处于全屏模式
-  //   if (document.fullscreenElement ||
-  //     (document as any).webkitFullscreenElement ||
-  //     (document as any).mozFullScreenElement ||
-  //     (document as any).msFullscreenElement) {
-  //     // 当前处于全屏，尝试退出全屏
-  //     if (document.exitFullscreen) {
-  //       document.exitFullscreen();
-  //     } else if ((document as any).mozCancelFullScreen) { // Firefox
-  //       (document as any).mozCancelFullScreen();
-  //     } else if ((document as any).webkitExitFullscreen) { // Chrome, Safari and Opera
-  //       (document as any).webkitExitFullscreen();
-  //     } else if ((document as any).msExitFullscreen) { // IE/Edge
-  //       (document as any).msExitFullscreen();
-  //     }
-  //   } else {
-  //     // 当前非全屏，尝试进入全屏
-  //     if (document.documentElement.requestFullscreen) {
-  //       document.documentElement.requestFullscreen();
-  //     } else if ((document.documentElement as any).mozRequestFullScreen) { // Firefox
-  //       (document.documentElement as any).mozRequestFullScreen();
-  //     } else if ((document.documentElement as any).webkitRequestFullscreen) { // Chrome, Safari and Opera
-  //       (document.documentElement as any).webkitRequestFullscreen();
-  //     } else if ((document.documentElement as any).msRequestFullscreen) { // IE/Edge
-  //       (document.documentElement as any).msRequestFullscreen();
-  //     }
-  //   }
-  // });
-  if(!isPreview()) return
-  timer = setInterval(() => {
-    date.value = moment().format('yyyy-MM-DD')
-    time.value = moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))]
-  }, 1000)
-})
-onUnmounted(() => {
-  clearInterval(timer as number)
-})
-
-const showMoreMenuBts = ref(true)
-// 切换全屏函数
-function toggleFullscreen() {
-  postMessageToParent({type: 'fullScreen'})
-
-  // console.log(document.documentElement)
-  showMoreMenuBts.value = !showMoreMenuBts.value
-  //
-  // if (document.fullscreenElement) {
-  //   // 如果当前已经是全屏状态，则退出全屏
-  //   document.exitFullscreen();
-  // } else {
-  //   // 否则，进入全屏
-  //   document.documentElement.requestFullscreen()
-  //     .catch(err => {
-  //       console.error('Error attempting to enable full-screen mode:', err);
-  //     });
-  // }
-}
-
-const option = shallowReactive({
-  dataset: ''
-})
-
-const getStyle = (radius: number) => {
-  return {
-    borderRadius: `${radius}px`,
-    overflow: 'hidden'
-  }
-}
-
-let svgHeight = ref(60)
-let height = ref('100%')
-const observer = ResizeObserverELE((w, h) => {
-  svgHeight.value = h
-  height.value = `calc(100% - ${h}px)`
-})
-const svg = ref()
-onMounted(() => {
-  if(svg.value) observer.observe(svg.value);
-})
-onUnmounted(() => {
-  observer.disconnect();
-})
-
-// // 编辑更新
-// watch(
-//   () => props.chartConfig.option.dataset,
-//   async (newData: any) => {
-//     try {
-//       // const img = await import(newData);
-//       // option.dataset = img.default
-//       option.dataset = newData
-//     } catch(e) {
-//       console.log(e)
-//     }
-//   },
-//   {
-//     immediate: true
-//   }
-// )
-//
-// // 预览更新
-// useChartDataFetch(props.chartConfig, useChartEditStore, async (newData: any) => {
-//   try {
-//     // const img = await import(newData);
-//     // option.dataset = img.default
-//     option.dataset = newData
-//   } catch(e) {
-//     console.log(e)
-//   }
-// })
-</script>
-
-<style lang="scss" scoped>
-.Theme1{
-  position: relative;
-  .full-screen-btn {
-    z-index: 999;
-    border: #4396fd 1px solid;
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 3px 10px;
-    cursor: pointer;
-    position: absolute;
-    top: 50%;
-    right: 9.6%;
-    transform: translateY(-50%);
-    color: #4396fd;
-    font-size: calc(var(--height) / 4);
-    height: calc(var(--height) / 3);
-    .full-screen {
-      font-size: 16px;
-      margin-right: 5px;
-    }
-  }
-}
-</style>
diff --git a/src/packages/components/CustomComponents/CustomComponents/index.ts b/src/packages/components/CustomComponents/CustomComponents/index.ts
index f328e3ae..8b57cc38 100644
--- a/src/packages/components/CustomComponents/CustomComponents/index.ts
+++ b/src/packages/components/CustomComponents/CustomComponents/index.ts
@@ -1,6 +1,4 @@
-import { Theme1Config } from './Theme1/index'
-import { Theme2Config } from './Theme2/index'
-import { Theme3Config } from './Theme3/index'
+// import { Theme1Config } from './Theme1/index'
 import { ComprehensivePUEConfig } from './ComprehensivePUE'
 import { DeviceAlarmOverviewConfig } from './DeviceAlarmOverview'
 import { RealTimeTrafficConfig } from './RealTimeTraffic'
@@ -11,9 +9,7 @@ import { GDMapConfig } from './GDMap'
 import { MonitorRealTimeEventsConfig } from './MonitorRealTimeEvents'
 
 export default [
-    Theme1Config,
-    Theme2Config,
-    Theme3Config,
+    // Theme1Config,
     ComprehensivePUEConfig,
     DeviceAlarmOverviewConfig,
     RealTimeTrafficConfig,
diff --git a/src/packages/components/CustomComponents/index.d.ts b/src/packages/components/CustomComponents/index.d.ts
index 12b3f775..5f75c71a 100644
--- a/src/packages/components/CustomComponents/index.d.ts
+++ b/src/packages/components/CustomComponents/index.d.ts
@@ -1,7 +1,9 @@
 export enum ChatCategoryEnum {
     CUSTOMCOMPONENTS = 'CustomComponents',
+    BACKGROUNDS = 'Backgrounds',
 }
 
 export enum ChatCategoryEnumName {
-    CUSTOMCOMPONENTS = '自定义组件',
+    CUSTOMCOMPONENTS = '自定义',
+    BACKGROUNDS = '背景'
 }
diff --git a/src/packages/components/CustomComponents/index.ts b/src/packages/components/CustomComponents/index.ts
index e437a6d9..ae393ad3 100644
--- a/src/packages/components/CustomComponents/index.ts
+++ b/src/packages/components/CustomComponents/index.ts
@@ -1,3 +1,4 @@
+import Backgrounds from './Backgrounds'
 import CustomComponents from './CustomComponents'
 
-export const CustomComponentsList = [...CustomComponents]
+export const CustomComponentsList = [...Backgrounds, ...CustomComponents]
diff --git a/src/packages/components/ThemesAndLayouts/Themes/index.ts b/src/packages/components/ThemesAndLayouts/Themes/index.ts
deleted file mode 100644
index cfa76787..00000000
--- a/src/packages/components/ThemesAndLayouts/Themes/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// import { Theme1Config } from './Theme1/index'
-
-export default []
diff --git a/src/packages/components/ThemesAndLayouts/index.d.ts b/src/packages/components/ThemesAndLayouts/index.d.ts
deleted file mode 100644
index d6ed6394..00000000
--- a/src/packages/components/ThemesAndLayouts/index.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export enum ChatCategoryEnum {
-  THEMES = 'Themes',
-}
-
-export enum ChatCategoryEnumName {
-  THEMES = '主题',
-}
diff --git a/src/packages/components/ThemesAndLayouts/index.ts b/src/packages/components/ThemesAndLayouts/index.ts
deleted file mode 100644
index 67e91740..00000000
--- a/src/packages/components/ThemesAndLayouts/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Themes from './Themes'
-
-export const ThemesAndLayoutsList = [...Themes]
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index 6080292e..e79bd839 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -188,6 +188,7 @@ export enum PackagesCategoryEnum {
   DECORATES = 'Decorates',
   THEMESANDLAYOUTS = 'ThemesAndLayouts',
   CUSTOMCOMPONENTS = 'CustomComponents',
+  BACKGROUNDS = 'Backgrounds',
 }
 
 // 包分类名称
@@ -199,7 +200,8 @@ export enum PackagesCategoryName {
   ICONS = '图标',
   DECORATES = '小组件',
   THEMESANDLAYOUTS = '主题',
-  CUSTOMCOMPONENTS = '自定义组件',
+  CUSTOMCOMPONENTS = '自定义',
+  BACKGROUNDS = '背景',
 }
 
 // 获取组件
diff --git a/src/packages/index.ts b/src/packages/index.ts
index 83b52c4a..de493518 100644
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@@ -4,7 +4,6 @@ import { InformationList } from '@/packages/components/Informations/index'
 // import { TableList } from '@/packages/components/Tables/index'
 // import { PhotoList } from '@/packages/components/Photos/index'
 import { IconList } from '@/packages/components/Icons/index'
-// import { ThemesAndLayoutsList } from '@/packages/components/ThemesAndLayouts/index'
 import { CustomComponentsList } from '@/packages/components/CustomComponents/index'
 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
 
@@ -29,7 +28,6 @@ export let packagesList: PackagesType = {
   [PackagesCategoryEnum.DECORATES]: DecorateList,
   // [PackagesCategoryEnum.PHOTOS]: PhotoList,
   [PackagesCategoryEnum.ICONS]: IconList,
-  // [PackagesCategoryEnum.THEMESANDLAYOUTS]: ThemesAndLayoutsList,
   [PackagesCategoryEnum.CUSTOMCOMPONENTS]: CustomComponentsList,
 }
 
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index a2fbccb3..46937f01 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -116,7 +116,8 @@ import {
 
 import {
   AssignmentTurnedInRound as AssignmentTurnedInRoundIcon,
-  CheckCircleOutlined as CheckCircleOutlinedIcon
+  CheckCircleOutlined as CheckCircleOutlinedIcon,
+  InsertPhotoSharp as InsertPhotoSharpIcon,
 } from '@vicons/material'
 
 const ionicons5 = {
@@ -334,7 +335,9 @@ const material = {
   // 批量确认
   AssignmentTurnedInRoundIcon,
   // 圆圈 勾
-  CheckCircleOutlinedIcon
+  CheckCircleOutlinedIcon,
+  // 背景图
+  InsertPhotoSharpIcon,
 }
 
 // https://www.xicons.org/#/ 还有很多
diff --git a/src/views/chart/ContentCharts/hooks/useAside.hook.ts b/src/views/chart/ContentCharts/hooks/useAside.hook.ts
index 5061043e..836c549d 100644
--- a/src/views/chart/ContentCharts/hooks/useAside.hook.ts
+++ b/src/views/chart/ContentCharts/hooks/useAside.hook.ts
@@ -9,6 +9,7 @@ import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayo
 const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon } = icon.ionicons5
 const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon, AreaCustomIcon } = icon.carbon
 const { Apps20RegularIcon } = icon.fluent
+const { InsertPhotoSharpIcon } = icon.material
 
 // 图表
 export type MenuOptionsType = {
@@ -50,6 +51,10 @@ const packagesListObj = {
   [PackagesCategoryEnum.CUSTOMCOMPONENTS]: {
     icon: renderIcon(AreaCustomIcon),
     label: PackagesCategoryName.CUSTOMCOMPONENTS
+  },
+  [PackagesCategoryEnum.BACKGROUNDS]: {
+    icon: renderIcon(InsertPhotoSharpIcon),
+    label: PackagesCategoryName.BACKGROUNDS
   }
 }
 
@@ -71,10 +76,10 @@ export const useAsideHook = () => {
       })
     }
     menuOptions.sort((a, b) => {
-      if(a.key === 'ThemesAndLayouts') return -1
-      else if(b.key === 'ThemesAndLayouts') return 1
-      if(a.key === 'CustomComponents') return -1
-      else if(b.key === 'CustomComponents') return 1
+      if(a.key === PackagesCategoryEnum.BACKGROUNDS) return -1
+      else if(b.key === PackagesCategoryEnum.BACKGROUNDS) return 1
+      if(a.key === PackagesCategoryEnum.CUSTOMCOMPONENTS) return -1
+      else if(b.key === PackagesCategoryEnum.CUSTOMCOMPONENTS) return 1
       else return 0
     })
   }
diff --git a/src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue b/src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue
index b7a57ae7..d5f4f03e 100644
--- a/src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="go-chart-configurations-data" v-if="targetData && !targetData.chartConfig.conDataKey">
+  <div v-if="!IsStatic() && !targetData.chartConfig.conDataKey" class="go-chart-configurations-data">
     <setting-item-box name="数据源" :alone="true">
       <n-select v-model:value="targetData.commonData.currentSource" :options="sourceOptions" size="small"/>
     </setting-item-box>
@@ -22,7 +22,7 @@
       </n-input-group>
     </setting-item-box>
   </div>
-  <div v-if="targetData && targetData.chartConfig.conDataKey">
+  <div v-else-if="!IsStatic() && targetData.chartConfig.conDataKey">
     <component :is="targetData.chartConfig.conDataKey" :customData="targetData.customData" :request="targetData.request"></component>
     <setting-item-box v-if="targetData?.customData?.showInterval" name="更新间隔" :alone="true">
       <n-input-group>
@@ -40,6 +40,9 @@
       </n-input-group>
     </setting-item-box>
   </div>
+  <div v-else-if="IsStatic()">
+    暂无数据
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -52,10 +55,24 @@ import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '../hooks/useTargetData.hook'
 import { sourceOptions, selectTimeOptions } from './index.d'
 import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { PackagesCategoryEnum, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+
 
 // const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
 
 const { targetData } = useTargetData() as { targetData: Ref<CreateComponentType | CreateComponentGroupType> }
 
+/*
+* 通用组件: 通用数据
+* 自定义组件: 自定义数据
+* 静态组件: 无数据
+* */
+// 通用组件 自定义组件 静态组件
+
+const IsStatic = () => {
+  let arr = [
+      PackagesCategoryEnum.BACKGROUNDS
+  ]
+  return arr.some(_ => _ === targetData.value.chartConfig.category)
+}
 </script>