组件开发

src/packages/components/MapsIcons/Commons/Icons01/config.ts

@@ -0,0 +1,16 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { MapIcons01Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+ 
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = MapIcons01Config.key
+  public attr = { ...chartInitConfig, w: 401, h: 150, zIndex: 1 }
+  public chartConfig = cloneDeep(MapIcons01Config)
+  public option = cloneDeep(option)
+}

src/packages/components/MapsIcons/Commons/Icons01/config.vue

@@ -0,0 +1,20 @@
+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/MapsIcons/Commons/Icons01/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const MapIcons01Config: ConfigType = {
+  key: 'MapIcons01',
+  chartKey: 'VMapIcons01',
+  conKey: 'VCMapIcons01',
+  title: '地图图标-01',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'contentbgleft.png',
+};

src/packages/components/MapsIcons/Commons/Icons01/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/icons2.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+}
+</style>

src/packages/components/MapsIcons/Commons/index.ts

@@ -0,0 +1,6 @@
+import { MapIcons01Config } from './Icons01/index';
+
+
+export default [
+    MapIcons01Config
+];

src/packages/components/MapsIcons/index.d.ts

@@ -0,0 +1,7 @@
+export enum ChatCategoryEnum {
+  TITLE = 'Titles',
+}
+
+export enum ChatCategoryEnumName {
+  TITLE = '标题',
+}

src/packages/components/MapsIcons/index.ts

@@ -0,0 +1,3 @@
+import Titles from './Commons'
+
+export const UnitsList = [...Titles]

src/packages/components/Units/Titles/RightBox02/config.ts

@@ -11,6 +11,9 @@ export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 const option = {
   colors:['#FF1EE267','#FFFFCE00','#FFFF6116'],
   legend: {
+    textStyle:{
+      fontSize: 12
+    },
     data: ['火情因子监测面积', '雷击火监测面积', '相控雷达监测面积']
   },
   tooltip: {

src/packages/components/Units/Titles/RightBox03/config.ts

@@ -11,7 +11,11 @@ export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 const option = {
   colors:['#FF1EE267','#FFFFCE00','#FFFF6116'],
   legend: {
-    data: ['路网规划率', '信息处置率']
+    left: 'right',
+    data: ['路网规划率', '信息处置率'],
+    textStyle:{
+      fontSize: 12
+    }
   },
   tooltip: {
     show: true,

src/packages/components/Units/Titles/SearchBox/index.vue

@@ -11,14 +11,14 @@
               <stop :stop-color="colors[2]" offset="0%"></stop>
               <stop :stop-color="colors[3]" offset="100%"></stop>
           </linearGradient>
-          <polygon id="path-3" points="-7.8938096e-15 -3.28814141e-13 11 -3.28814141e-13 13.1616243 1.88067666 2.1616243 1.88067666"></polygon>
+          <polygon id="searchboxpath-3" points="-7.8938096e-15 -3.28814141e-13 11 -3.28814141e-13 13.1616243 1.88067666 2.1616243 1.88067666"></polygon>
           <filter x="-115.3%" y="-717.8%" width="330.6%" height="1535.7%" filterUnits="objectBoundingBox" :id="`4-${boxId}`">
               <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
               <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
               <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
               <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.462494493   0 0 0 0 0  0 0 0 0.7 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
           </filter>
-          <polygon id="path-5" points="15.6938967 4.78840697e-14 26.6938967 4.78840697e-14 28.855521 1.88067666 17.855521 1.88067666"></polygon>
+          <polygon id="searchboxpath-5" points="15.6938967 4.78840697e-14 26.6938967 4.78840697e-14 28.855521 1.88067666 17.855521 1.88067666"></polygon>
           <filter x="-115.3%" y="-717.8%" width="330.6%" height="1535.7%" filterUnits="objectBoundingBox" :id="`6-${boxId}`">
               <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
               <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
@@ -53,12 +53,12 @@
                       
                       <g id="黄色棱形" :transform="`translate(${w/4.33}, ${h/1.06}) scale(1, -1) translate(-${w/4.33}, -${h/1.06})translate(${w/6.23}, ${h/1.08})`">
                           <g id="矩形">
-                              <use fill="black" fill-opacity="1" :filter="`url(#4-${boxId})`" xlink:href="#path-3"></use>
+                              <use fill="black" fill-opacity="1" :filter="`url(#4-${boxId})`" xlink:href="#searchboxpath-3"></use>
-                              <use :fill="colors[8]" fill-rule="evenodd" xlink:href="#path-3"></use>
+                              <use :fill="colors[8]" fill-rule="evenodd" xlink:href="#searchboxpath-3"></use>
                           </g>
                           <g id="矩形" opacity="0.399999976">
-                              <use fill="black" fill-opacity="1" :filter="`url(#6-${boxId})`" xlink:href="#path-5"></use>
+                              <use fill="black" fill-opacity="1" :filter="`url(#6-${boxId})`" xlink:href="#searchboxpath-5"></use>
-                              <use :fill="colors[8]" fill-rule="evenodd" xlink:href="#path-5"></use>
+                              <use :fill="colors[8]" fill-rule="evenodd" xlink:href="#searchboxpath-5"></use>
                           </g>
                       </g>
                       <g id="装饰线-">

src/packages/components/Units/Titles/TitlesBg01/config.ts

@@ -0,0 +1,18 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { TitlesBg01Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  fontSize: 14,
+  colors: ['#fff','#099860'],
+  datasIndex: 0
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TitlesBg01Config.key
+  public attr = { ...chartInitConfig, w: 146, h: 30, zIndex: 1 }
+  public chartConfig = cloneDeep(TitlesBg01Config)
+  public option = cloneDeep(option)
+}

src/packages/components/Units/Titles/TitlesBg01/config.vue

@@ -0,0 +1,62 @@
+<template>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="样式">
+
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.fontSize"
+          :min="12"
+        />
+      </SettingItem>
+      <SettingItem name="选中">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.datasIndex"
+          :min="0"
+          :max="2"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.colors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Units/Titles/TitlesBg01/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TitlesBg01Config: ConfigType = {
+  key: 'TitlesBg01',
+  chartKey: 'VTitlesBg01',
+  conKey: 'VCTitlesBg01',
+  title: '背景图',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'titlesbg01.png',
+};

src/packages/components/Units/Titles/TitlesBg01/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/titlesbg01.png" />
+    <div class="container">
+      <div v-for="(item,index) in datasArr" class="li" :class="datasIndex==index?'active':''">{{item}}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+const datasArr = ref(['按年', '按月', '按日'])
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  fontSize,
+  datasIndex,
+} = toRefs(props.chartConfig.option)
+
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+  width: v-bind('w');
+  height: v-bind('h');
+  img{
+    position: absolute;
+  }
+  .container{
+    width: 92%;
+    height: 60%;
+    border-radius: 10px;
+    display: flex;
+    .li{
+      flex: 1;
+      color: v-bind('colors[1]');
+      font-size: v-bind('fontSize+"px"');
+      background: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .active{
+      background: v-bind('colors[1]');;
+      color: v-bind('colors[0]');;
+      border-radius: 5px;
+    }
+  }
+}
+</style>

src/packages/components/Units/Titles/UnitsBg01/config.ts

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { UnitsBg01Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  boxId: '',
+  colors: [],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = UnitsBg01Config.key
+  public attr = { ...chartInitConfig, w: 317, h: 166, zIndex: 1 }
+  public chartConfig = cloneDeep(UnitsBg01Config)
+  public option = cloneDeep(option)
+}

src/packages/components/Units/Titles/UnitsBg01/config.vue

@@ -0,0 +1,20 @@
+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Units/Titles/UnitsBg01/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const UnitsBg01Config: ConfigType = {
+  key: 'UnitsBg01',
+  chartKey: 'VUnitsBg01',
+  conKey: 'VCUnitsBg01',
+  title: '背景图-01',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'unitsbg01.png',
+};

src/packages/components/Units/Titles/UnitsBg01/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/unitsbg01.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+  svg {
+    position: absolute;
+    z-index: -1;
+  }
+  .fill {
+    fill: v-bind('colors[0]');
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke {
+    stroke: v-bind('colors[1]');
+  }
+}
+</style>

src/packages/components/Units/Titles/UnitsBg02/config.ts

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { UnitsBg02Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  boxId: 'UnitsBg02Id',
+  colors: [],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = UnitsBg02Config.key
+  public attr = { ...chartInitConfig, w: 122, h: 34, zIndex: 1 }
+  public chartConfig = cloneDeep(UnitsBg02Config)
+  public option = cloneDeep(option)
+}

src/packages/components/Units/Titles/UnitsBg02/config.vue

@@ -0,0 +1,20 @@
+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Units/Titles/UnitsBg02/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const UnitsBg02Config: ConfigType = {
+  key: 'UnitsBg02',
+  chartKey: 'VUnitsBg02',
+  conKey: 'VCUnitsBg02',
+  title: '背景图-02',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'unitsbg02.png',
+};

src/packages/components/Units/Titles/UnitsBg02/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/unitsbg02.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+  svg {
+    position: absolute;
+    z-index: -1;
+  }
+  .fill {
+    fill: v-bind('colors[0]');
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke {
+    stroke: v-bind('colors[1]');
+  }
+}
+</style>

src/packages/components/Units/Titles/UnitsBg03/config.ts

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { UnitsBg03Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  boxId: 'UnitsBg03Id',
+  colors: [],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = UnitsBg03Config.key
+  public attr = { ...chartInitConfig, w: 122, h: 34, zIndex: 1 }
+  public chartConfig = cloneDeep(UnitsBg03Config)
+  public option = cloneDeep(option)
+}

src/packages/components/Units/Titles/UnitsBg03/config.vue

@@ -0,0 +1,20 @@
+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Units/Titles/UnitsBg03/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const UnitsBg03Config: ConfigType = {
+  key: 'UnitsBg03',
+  chartKey: 'VUnitsBg03',
+  conKey: 'VCUnitsBg03',
+  title: '背景图-03',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'unitsbg03.png',
+};

src/packages/components/Units/Titles/UnitsBg03/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/unitsbg03.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+  svg {
+    position: absolute;
+    z-index: -1;
+  }
+  .fill {
+    fill: v-bind('colors[0]');
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke {
+    stroke: v-bind('colors[1]');
+  }
+}
+</style>

src/packages/components/Units/Titles/UnitsBg04/config.ts

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { UnitsBg04Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  boxId: 'UnitsBg04Id',
+  colors: [],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = UnitsBg04Config.key
+  public attr = { ...chartInitConfig, w: 122, h: 34, zIndex: 1 }
+  public chartConfig = cloneDeep(UnitsBg04Config)
+  public option = cloneDeep(option)
+}

src/packages/components/Units/Titles/UnitsBg04/config.vue

@@ -0,0 +1,20 @@
+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Units/Titles/UnitsBg04/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const UnitsBg04Config: ConfigType = {
+  key: 'UnitsBg04',
+  chartKey: 'VUnitsBg04',
+  conKey: 'VCUnitsBg04',
+  title: '背景图-04',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'unitsbg04.png',
+};

src/packages/components/Units/Titles/UnitsBg04/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/unitsbg04.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+  svg {
+    position: absolute;
+    z-index: -1;
+  }
+  .fill {
+    fill: v-bind('colors[0]');
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke {
+    stroke: v-bind('colors[1]');
+  }
+}
+</style>

src/packages/components/Units/Titles/index.ts

@@ -23,6 +23,12 @@ import { RightBox01Icon03Config } from './RightBox01Icon03/index';
 import { RightBox01Icon04Config } from './RightBox01Icon04/index';
 import { RightBox02Config } from './RightBox02/index';
 import { RightBox03Config } from './RightBox03/index';
+import { TitlesBg01Config } from './TitlesBg01/index';
+import { UnitsBg01Config } from './UnitsBg01/index';
+import { UnitsBg02Config } from './UnitsBg02/index';
+import { UnitsBg03Config } from './UnitsBg03/index';
+import { UnitsBg04Config } from './UnitsBg04/index';
+
 
 export default [
     TopTitlesConfig,
@@ -50,4 +56,9 @@ export default [
     RightBox01Icon04Config,
     RightBox02Config,
     RightBox03Config,
+    TitlesBg01Config,
+    UnitsBg01Config,
+    UnitsBg02Config,
+    UnitsBg03Config,
+    UnitsBg04Config
 ];