diff --git a/src/assets/customComponents/Theme2/background.jpg b/src/assets/customComponents/Theme2/background.jpg
new file mode 100644
index 00000000..24989285
Binary files /dev/null and b/src/assets/customComponents/Theme2/background.jpg differ
diff --git a/src/assets/customComponents/Theme3/background.png b/src/assets/customComponents/Theme3/background.png
new file mode 100644
index 00000000..8403728d
Binary files /dev/null and b/src/assets/customComponents/Theme3/background.png differ
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme2/config.ts b/src/packages/components/CustomComponents/CustomComponents/Theme2/config.ts
new file mode 100644
index 00000000..250d3e92
--- /dev/null
+++ b/src/packages/components/CustomComponents/CustomComponents/Theme2/config.ts
@@ -0,0 +1,34 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Theme2Config } 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 = Theme2Config.key
+  public chartConfig = cloneDeep(Theme2Config)
+  public option = cloneDeep(option)
+  public customData = cloneDeep({
+    title: '',
+  })
+}
diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme2/config.vue b/src/packages/components/CustomComponents/CustomComponents/Theme2/config.vue
new file mode 100644
index 00000000..83836728
--- /dev/null
+++ b/src/packages/components/CustomComponents/CustomComponents/Theme2/config.vue
@@ -0,0 +1,67 @@
+<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
new file mode 100644
index 00000000..2c83af5e
--- /dev/null
+++ b/src/packages/components/CustomComponents/CustomComponents/Theme2/configData.vue
@@ -0,0 +1,16 @@
+<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
new file mode 100644
index 00000000..0fe02fad
--- /dev/null
+++ b/src/packages/components/CustomComponents/CustomComponents/Theme2/index.ts
@@ -0,0 +1,18 @@
+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
new file mode 100644
index 00000000..1d768199
--- /dev/null
+++ b/src/packages/components/CustomComponents/CustomComponents/Theme2/index.vue
@@ -0,0 +1,291 @@
+<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
new file mode 100644
index 00000000..a6b8edfc
--- /dev/null
+++ b/src/packages/components/CustomComponents/CustomComponents/Theme3/config.ts
@@ -0,0 +1,34 @@
+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/config.vue b/src/packages/components/CustomComponents/CustomComponents/Theme3/config.vue
new file mode 100644
index 00000000..83836728
--- /dev/null
+++ b/src/packages/components/CustomComponents/CustomComponents/Theme3/config.vue
@@ -0,0 +1,67 @@
+<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/Theme3/configData.vue b/src/packages/components/CustomComponents/CustomComponents/Theme3/configData.vue
new file mode 100644
index 00000000..2c83af5e
--- /dev/null
+++ b/src/packages/components/CustomComponents/CustomComponents/Theme3/configData.vue
@@ -0,0 +1,16 @@
+<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
new file mode 100644
index 00000000..9425bc18
--- /dev/null
+++ b/src/packages/components/CustomComponents/CustomComponents/Theme3/index.ts
@@ -0,0 +1,18 @@
+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
new file mode 100644
index 00000000..5cb48337
--- /dev/null
+++ b/src/packages/components/CustomComponents/CustomComponents/Theme3/index.vue
@@ -0,0 +1,291 @@
+<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 e03c4fc3..f328e3ae 100644
--- a/src/packages/components/CustomComponents/CustomComponents/index.ts
+++ b/src/packages/components/CustomComponents/CustomComponents/index.ts
@@ -1,4 +1,6 @@
 import { Theme1Config } from './Theme1/index'
+import { Theme2Config } from './Theme2/index'
+import { Theme3Config } from './Theme3/index'
 import { ComprehensivePUEConfig } from './ComprehensivePUE'
 import { DeviceAlarmOverviewConfig } from './DeviceAlarmOverview'
 import { RealTimeTrafficConfig } from './RealTimeTraffic'
@@ -10,6 +12,8 @@ import { MonitorRealTimeEventsConfig } from './MonitorRealTimeEvents'
 
 export default [
     Theme1Config,
+    Theme2Config,
+    Theme3Config,
     ComprehensivePUEConfig,
     DeviceAlarmOverviewConfig,
     RealTimeTrafficConfig,
diff --git a/src/views/chart/ContentConfigurations/components/ChartDataV2/components/ChartDataPointHistory.vue b/src/views/chart/ContentConfigurations/components/ChartDataV2/components/ChartDataPointHistory.vue
index 4d425f8c..422476ae 100644
--- a/src/views/chart/ContentConfigurations/components/ChartDataV2/components/ChartDataPointHistory.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartDataV2/components/ChartDataPointHistory.vue
@@ -17,7 +17,7 @@
       <n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false">
         <n-input
           :value="item.value"
-          @update:value="v => handleChange(v, i)"
+          @update:value="(v: string) => handleChange(v, i)"
           placeholder="请输入测点ID"
           size="small"
           clearable
@@ -57,12 +57,12 @@ import { useTargetData } from '../../hooks/useTargetData.hook'
 import { DateOptions, MethodsOptions } from './ChartDataPointHistory.d'
 import { nanoid } from 'nanoid'
 import { icon } from '@/plugins/icon'
-import { commonDataType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { commonDataType, RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { selectTimeOptions } from '../index.d'
 
 const { CloseIcon } = icon.ionicons5
 
-const { targetData } = useTargetData()
+const { targetData } = useTargetData() as { targetData: Ref<{ commonData:  commonDataType, id: string, request: RequestConfigType }> }
 
 const templateValue = ref('')