merge

src/App.vue

@@ -1,12 +1,8 @@
 <template>
   <ConfigProvider :locale="getAntdLocale" :theme="themeConfig">
-    <NConfigProvider
-      :theme="darkNTheme"
-    >
       <AppProvider>
         <RouterView />
       </AppProvider>
-    </NConfigProvider>
   </ConfigProvider>
 </template>
 
@@ -19,12 +15,6 @@
   import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
   import 'dayjs/locale/zh-cn';
   import { computed } from 'vue';
-  import { NConfigProvider } from 'naive-ui'
-  import { useDarkThemeHook, useThemeOverridesHook, useCode, useLang } from '@/hooks'
-
-  // 暗黑主题
-  const darkNTheme = useDarkThemeHook()
-
   // support Multi-language
   const { getAntdLocale } = useLocale();
 

src/hooks/eventHandler.hook.ts

@@ -1,18 +1,38 @@
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 import { mapFun } from '@/hooks/ceshiFun.hook';
+import { router } from '@/router';
 
 const chartEditStore = useChartEditStore();
 const ceshiFunction = mapFun();
 
 // 交互事件
-export const eventHandlerHook = (comonentList: any, elementList: any, params:any = null) => {
+export const eventHandlerHook = (comonentList: any, elementList: any, params: any = null) => {
   let obj: any = {};
   let index = 0;
   for (let i = 0; i < comonentList.length; i++) {
     for (let j = 0; j < elementList.length; j++) {
       if (elementList[j].movement == 'newaddress') {
-        // 跳转新地址
-        window.open(elementList[j].url);
+        // 打开新页面
+        if (elementList[j].openNewPage) {
+          if (elementList[j].skipType == 'routeLink') {
+            const routeUrl = router.resolve({
+              path: elementList[j].url,
+            });
+            window.open(routeUrl.href, '_blank');
+            return;
+          } else {
+            window.open(elementList[j].url, '_blank');
+            return;
+          }
+        } else {
+          if (elementList[j].skipType == 'routeLink') {
+            router.replace(elementList[j].url);
+            return;
+          } else {
+            window.open(elementList[j].url, '_self');
+            return;
+          }
+        }
       } else if (elementList[j].movement == 'reveal') {
         // 显示
         for (let k = 0; k < elementList[j].elementId.length; k++) {
@@ -37,9 +57,9 @@ export const eventHandlerHook = (comonentList: any, elementList: any, params:any
         // 地图事件联动
         for (let k = 0; k < elementList[j].elementId.length; k++) {
           if (comonentList[i].id == elementList[j].elementId[k]) {
-            if(params){
+            if (params) {
               ceshiFunction[elementList[j].funName](params);
-            }else{
+            } else {
               ceshiFunction[elementList[j].funName]();
             }
           }

src/locales/lang/zh-CN/routes/dashboard.json

@@ -2,6 +2,6 @@
   "dashboard": "Dashboard",
   "about": "关于",
   "workbench": "工作台",
-  "analysis": "分析页",
+  "analysis": "首页",
   "test": "Test"
 }

src/packages/components/Charts/Maps/MapLayer/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div ref="vChartRef"  >
-    <div class="layer-container" @click="handlerMap" :style="{'background-color':props.chartConfig.option.boxStyle.backgroundColor,'border-color':props.chartConfig.option.boxStyle.borderColor}">
+    <div class="layer-container" @click="handlerMap" 
+    :style="{'background-color':props.chartConfig.option.boxStyle?.backgroundColor,
+                 'border-color':props.chartConfig.option.boxStyle?.borderColor}">
       <div class="title">
-        {{ props.chartConfig.option.boxStyle.title }}
+        {{ props.chartConfig.option.boxStyle?.title }}
       </div>
       <div class="layer-item-container">
         <div v-for="(item,index) in handlerLayers" :key="index" style="color:#fff;">
@@ -62,7 +64,7 @@ console.log("props123",props.chartConfig.option);
 
 const layers = ref(null)
 
-const handlerLayers = ref([]);
+const handlerLayers:any = ref([]);
 
 
 const handlerGetLayerTree = ()=>{
@@ -72,7 +74,7 @@ const handlerGetLayerTree = ()=>{
     let configLayers = [];
     let GEOSERVER_BASE_API = "http://221.2.83.254:9007/";
     res.data.data.forEach((item, index) => {
-      let group = null;
+      let group:Object;
       group = {
         id: parseInt(Math.random() * 10000000),
         name: item.serverName,

src/packages/components/Decorates/Titles/Date/index.vue

@@ -11,7 +11,7 @@
   </template>
   
   <script setup lang="ts">
-  import { ref, PropType, onMounted, toRefs } from 'vue';
+  import { ref, PropType, onMounted,onUnmounted, toRefs } from 'vue';
   import dayjs from 'dayjs';
   import { CreateComponentType } from '@/packages/index.d';
   const props = defineProps({
@@ -24,13 +24,19 @@
   
   const { w, h } = toRefs(props.chartConfig.attr)
   const { textSize, textColor,textSize1, textColor1} = toRefs(props.chartConfig.option)
-
-  onMounted(() => {
-    console.log('currentTime', currentTime)
-  });
   const currentDate = ref(dayjs().locale('zh-cn').format('YYYY.M.D'));
-  const currentTime = ref(dayjs().locale('zh-cn').format('HH:mm:ss'));
-    
+  let currentTime = ref()
+  const updateTime = () => {
+    const now = new Date();
+    currentTime.value = dayjs().locale('zh-cn').format('HH:mm:ss');; // 格式为hh:mm:ss
+  };
+  onMounted(() => {
+    updateTime();
+    const interval = setInterval(updateTime, 1000);
+    onUnmounted(() => {
+      clearInterval(interval);
+    });
+  });
   
   </script>
   

src/packages/components/Decorates/Titles/TitlesText/config.ts

@@ -7,7 +7,8 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
   colors: ['#1DC1F533', '#1DC1F5FF'],
   dataset: '我是标题',
-  textSize: 32
+  textSize: 32,
+  textFlod: 500
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

src/packages/components/Decorates/Titles/TitlesText/config.vue

@@ -29,6 +29,9 @@
     <SettingItem name="大小">
       <n-input-number v-model:value="optionData.textSize" size="small" :min="12"></n-input-number>
     </SettingItem>
+    <SettingItem name="粗细">
+      <n-input-number v-model:value="optionData.textFlod" size="small" :min="400"></n-input-number>
+    </SettingItem>
   </CollapseItem>
 </template>
 

src/packages/components/Decorates/Titles/TitlesText/index.vue

@@ -20,7 +20,7 @@
   
   const id = getUUID()
   const { w, h } = toRefs(props.chartConfig.attr)
-  const { colors, dataset, textSize } = toRefs(props.chartConfig.option)
+  const { colors, dataset, textSize,textFlod } = toRefs(props.chartConfig.option)
   </script>
   
   <style lang="scss" scoped>
@@ -47,6 +47,7 @@
   
     .text {
       font-size: v-bind('textSize+"px"');
+      font-weight: v-bind('textFlod');
       background: linear-gradient(to bottom, v-bind('colors[0]'), v-bind('colors[1]')); 
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent; /* 兼容旧版浏览器 */

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/Icons01/config.ts

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

src/packages/components/Units/Titles/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/Units/Titles/Icons01/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const Icons01Config: ConfigType = {
+  key: 'Icons01',
+  chartKey: 'VIcons01',
+  conKey: 'VCIcons01',
+  title: '图标01',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'icons1.png',
+};

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

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/icons1.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/Icons02/config.ts

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

src/packages/components/Units/Titles/Icons02/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/Icons02/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const Icons02Config: ConfigType = {
+  key: 'Icons02',
+  chartKey: 'VIcons02',
+  conKey: 'VCIcons02',
+  title: '图标02',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'icons2.png',
+};

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

@@ -0,0 +1,46 @@
+<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; 
+
+  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/Icons03/config.ts

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

src/packages/components/Units/Titles/Icons03/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/Icons03/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const Icons03Config: ConfigType = {
+  key: 'Icons03',
+  chartKey: 'VIcons03',
+  conKey: 'VCIcons03',
+  title: '图标03',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'icons3.png',
+};

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

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/icons3.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/Icons04/config.ts

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

src/packages/components/Units/Titles/Icons04/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/Icons04/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const Icons04Config: ConfigType = {
+  key: 'Icons04',
+  chartKey: 'VIcons04',
+  conKey: 'VCIcons04',
+  title: '图标04',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'icons4.png',
+};

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

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/icons4.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/RightBox01/config.ts

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { RightBox01Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  boxId: 'RightBox01',
+  colors: ['#06463A','#02221B'],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = RightBox01Config.key
+  public attr = { ...chartInitConfig, w: 382, h: 141, zIndex: 1 }
+  public chartConfig = cloneDeep(RightBox01Config)
+  public option = cloneDeep(option)
+}

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

@@ -0,0 +1,53 @@
+<template>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="ID" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.boxId"
+        :minlength="1"
+        type="text"
+        placeholder="请输入Id"
+      />
+    </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/RightBox01/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const RightBox01Config: ConfigType = {
+  key: 'RightBox01',
+  chartKey: 'VRightBox01',
+  conKey: 'VCRightBox01',
+  title: '六轴感知检测',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'right1bg.png',
+};

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

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/right1bg.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/RightBox01Icon/config.ts

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

src/packages/components/Units/Titles/RightBox01Icon/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/RightBox01Icon/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const RightBox01IconConfig: ConfigType = {
+  key: 'RightBox01Icon',
+  chartKey: 'VRightBox01Icon',
+  conKey: 'VCRightBox01Icon',
+  title: '六轴感知检测-图标',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'right1icon.png',
+};

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

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/right1icon.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/RightBox01Icon01/config.ts

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

src/packages/components/Units/Titles/RightBox01Icon01/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/RightBox01Icon01/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const RightBox01Icon01Config: ConfigType = {
+  key: 'RightBox01Icon01',
+  chartKey: 'VRightBox01Icon01',
+  conKey: 'VCRightBox01Icon01',
+  title: '六轴感知检测-图标01',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'right2icon.png',
+};

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

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/right2icon.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/RightBox01Icon02/config.ts

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

src/packages/components/Units/Titles/RightBox01Icon02/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/RightBox01Icon02/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const RightBox01Icon02Config: ConfigType = {
+  key: 'RightBox01Icon02',
+  chartKey: 'VRightBox01Icon02',
+  conKey: 'VCRightBox01Icon02',
+  title: '六轴感知检测-图标02',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'right3icon.png',
+};

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

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/right3icon.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/RightBox01Icon03/config.ts

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

src/packages/components/Units/Titles/RightBox01Icon03/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/RightBox01Icon03/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const RightBox01Icon03Config: ConfigType = {
+  key: 'RightBox01Icon03',
+  chartKey: 'VRightBox01Icon03',
+  conKey: 'VCRightBox01Icon03',
+  title: '六轴感知检测-图标03',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'right4icon.png',
+};

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

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/right4icon.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/RightBox01Icon04/config.ts

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

src/packages/components/Units/Titles/RightBox01Icon04/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/RightBox01Icon04/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const RightBox01Icon04Config: ConfigType = {
+  key: 'RightBox01Icon04',
+  chartKey: 'VRightBox01Icon04',
+  conKey: 'VCRightBox01Icon04',
+  title: '六轴感知检测-图标04',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'right5icon.png',
+};

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

@@ -0,0 +1,46 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/units/right5icon.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/RightBox02/config.ts

@@ -0,0 +1,131 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { RightBox02Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { graphic } from 'echarts/core'
+import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+const option = {
+  colors:['#FF1EE267','#FFFFCE00','#FFFF6116'],
+  legend: {
+    textStyle:{
+      fontSize: 12
+    },
+    data: ['火情因子监测面积', '雷击火监测面积', '相控雷达监测面积']
+  },
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line'
+    }
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [
+    {
+      type: 'line',
+      name: '火情因子监测面积',
+      smooth: true,
+      symbolSize: 1, //设定实心点的大小
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
+      lineStyle: {
+        width: 3,
+        type: 'solid'
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColorsSearch[defaultTheme][3]
+          },
+          {
+            offset: 1,
+            color: 'rgba(0,0,0,0)'
+          }
+        ])
+      }
+    },
+    {
+      type: 'line',
+      name: '雷击火监测面积',
+      smooth: true,
+      symbolSize: 1, //设定实心点的大小
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
+      lineStyle: {
+        width: 3,
+        type: 'solid'
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColorsSearch[defaultTheme][5]
+          },
+          {
+            offset: 1,
+            color: 'rgba(0,0,0,0)'
+          }
+        ])
+      }
+    },
+    {
+      type: 'line',
+      name: '相控雷达监测面积',
+      smooth: true,
+      symbolSize: 1, //设定实心点的大小
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
+      lineStyle: {
+        width: 3,
+        type: 'solid'
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColorsSearch[defaultTheme][3]
+          },
+          {
+            offset: 1,
+            color: 'rgba(0,0,0,0)'
+          }
+        ])
+      }
+    }  
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = RightBox02Config.key
+  public chartConfig = cloneDeep(RightBox02Config)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -0,0 +1,95 @@
+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    name="单折线面积图"
+    :expanded="true"
+  >
+    <SettingItemBox name="线条">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select
+          v-model:value="item.lineStyle.type"
+          size="small"
+          :options="lineConf.lineStyle.type"
+        ></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number
+          v-model:value="item.label.fontSize"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.label.color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' },
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import {
+  GlobalSetting,
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  },
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

src/packages/components/Units/Titles/RightBox02/data.json

@@ -0,0 +1,47 @@
+{
+  "dimensions": ["product", "data1", "data2","data3"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120,
+      "data2": 130,
+      "data3": 110
+    },
+    {
+      "product": "Tue",
+      "data1": 200,
+      "data2": 130,
+      "data3": 120
+    },
+    {
+      "product": "Wed",
+      "data1": 150,
+      "data2": 312,
+      "data3": 160
+    },
+    {
+      "product": "Thu",
+      "data1": 80,
+      "data2": 268,
+      "data3": 180
+    },
+    {
+      "product": "Fri",
+      "data1": 70,
+      "data2": 155,
+      "data3": 250
+    },
+    {
+      "product": "Sat",
+      "data1": 110,
+      "data2": 117,
+      "data3": 170
+    },
+    {
+      "product": "Sun",
+      "data1": 130,
+      "data2": 160,
+      "data3": 130
+    }
+  ]
+}

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const RightBox02Config: ConfigType = {
+  key: 'RightBox02',
+  chartKey: 'VRightBox02',
+  conKey: 'VCRightBox02',
+  title: '三站覆盖面积',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'right2bg.png'
+}

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

@@ -0,0 +1,86 @@
+<template>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use, graphic } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks'
+import { isPreview, colorGradientCustomMerge} from '@/utils'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+const chartEditStore = useChartEditStore()
+
+const option = reactive({
+  value: {}
+})
+
+// 渐变色处理
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    try {
+      if (!isPreview()) {
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+        props.chartConfig.option.series.forEach((value: any, index: number) => {
+          value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: themeColor[3 + index]
+            },
+            {
+              offset: 1,
+              color: 'rgba(0,0,0, 0)'
+            }
+          ])
+        })
+      }
+      option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      props.chartConfig.option = option.value
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    option.value = props.chartConfig.option
+  }
+)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>

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

@@ -0,0 +1,104 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { RightBox03Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { graphic } from 'echarts/core'
+import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+const option = {
+  colors:['#FF1EE267','#FFFFCE00','#FFFF6116'],
+  legend: {
+    left: 'right',
+    data: ['路网规划率', '信息处置率'],
+    textStyle:{
+      fontSize: 12
+    }
+  },
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line'
+    }
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [
+    {
+      type: 'line',
+      name: '路网规划率',
+      smooth: false,
+      symbolSize: 10, //设定实心点的大小
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
+      lineStyle: {
+        width: 3,
+        type: 'solid'
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColorsSearch[defaultTheme][3]
+          },
+          {
+            offset: 1,
+            color: 'rgba(0,0,0,0)'
+          }
+        ])
+      }
+    },
+    {
+      type: 'line',
+      name: '信息处置率',
+      smooth: false,
+      symbolSize: 10, //设定实心点的大小
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
+      lineStyle: {
+        width: 3,
+        type: 'solid'
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColorsSearch[defaultTheme][5]
+          },
+          {
+            offset: 1,
+            color: 'rgba(0,0,0,0)'
+          }
+        ])
+      }
+    },
+    
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = RightBox03Config.key
+  public chartConfig = cloneDeep(RightBox03Config)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -0,0 +1,95 @@
+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    name="单折线面积图"
+    :expanded="true"
+  >
+    <SettingItemBox name="线条">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select
+          v-model:value="item.lineStyle.type"
+          size="small"
+          :options="lineConf.lineStyle.type"
+        ></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number
+          v-model:value="item.label.fontSize"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.label.color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' },
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import {
+  GlobalSetting,
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  },
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

src/packages/components/Units/Titles/RightBox03/data.json

@@ -0,0 +1,40 @@
+{
+  "dimensions": ["product", "data1", "data2","data3"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120,
+      "data2": 130
+    },
+    {
+      "product": "Tue",
+      "data1": 200,
+      "data2": 130
+    },
+    {
+      "product": "Wed",
+      "data1": 150,
+      "data2": 312
+    },
+    {
+      "product": "Thu",
+      "data1": 80,
+      "data2": 268
+    },
+    {
+      "product": "Fri",
+      "data1": 70,
+      "data2": 155
+    },
+    {
+      "product": "Sat",
+      "data1": 110,
+      "data2": 117
+    },
+    {
+      "product": "Sun",
+      "data1": 130,
+      "data2": 160
+    }
+  ]
+}

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const RightBox03Config: ConfigType = {
+  key: 'RightBox03',
+  chartKey: 'VRightBox03',
+  conKey: 'VCRightBox03',
+  title: '双网效能率',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'right3bg.png'
+}

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

@@ -0,0 +1,86 @@
+<template>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use, graphic } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks'
+import { isPreview, colorGradientCustomMerge} from '@/utils'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+const chartEditStore = useChartEditStore()
+
+const option = reactive({
+  value: {}
+})
+
+// 渐变色处理
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    try {
+      if (!isPreview()) {
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+        props.chartConfig.option.series.forEach((value: any, index: number) => {
+          value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: themeColor[3 + index]
+            },
+            {
+              offset: 1,
+              color: 'rgba(0,0,0, 0)'
+            }
+          ])
+        })
+      }
+      option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      props.chartConfig.option = option.value
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    option.value = props.chartConfig.option
+  }
+)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>

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

@@ -3,29 +3,29 @@
     <svg :width="w" :height="h">
       <title>编组 41</title>
       <defs>
-          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`1-${boxId}`">
               <stop :stop-color="colors[0]" offset="0%"></stop>
               <stop :stop-color="colors[1]" stop-opacity="0.206314727" offset="100%"></stop>
           </linearGradient>
-          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`2-${boxId}`">
               <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>
-          <filter x="-115.3%" y="-717.8%" width="330.6%" height="1535.7%" filterUnits="objectBoundingBox" id="filter-4">
+          <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>
-          <filter x="-115.3%" y="-717.8%" width="330.6%" height="1535.7%" filterUnits="objectBoundingBox" id="filter-6">
+          <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>
               <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>
-          <linearGradient x1="50.3209681%" y1="100%" x2="50.3209681%" y2="0.320968094%" id="linearGradient-7">
+          <linearGradient x1="50.3209681%" y1="100%" x2="50.3209681%" y2="0.320968094%" :id="`7-${boxId}`">
               <stop :stop-color="colors[4]" offset="0.00819493007%"></stop>
               <stop :stop-color="colors[5]" offset="100%"></stop>
           </linearGradient>
@@ -34,29 +34,52 @@
           <g id="林业防火-智览-切图版" transform="translate(-460, -92)">
               <g id="全局搜索" transform="translate(460, 92)">
                   <g id="编组-41" transform="translate(0.6886, 0.0542)">
-                      <path d="M0.997855372,50.7938722 L191.268499,50.7938722 L203.480404,39.0576371 L203.480404,0.490133526 C175.182522,0.490133526 155.473471,0.490133526 144.353252,0.490133526 C142.74063,0.490133526 141.927384,0.490133526 139.501517,0.490133526 C100.678123,0.490133526 100.678123,0.490133526 61.8547296,0.490133526 C59.5833877,0.490133526 58.7487514,0.490133526 57.3062013,0.490133526 C57.2171967,0.490133526 57.1258779,0.490133526 57.0317647,0.490133526 C42.0630356,0.490133526 27.1787008,0.490133526 12.3787602,0.490133526 L0.48040407,11.205526 L0.997855372,50.7938722 Z" id="路径-22" stroke="url(#linearGradient-1)" fill-opacity="0.85" :fill="colors[6]"></path>
-                      <g id="编组-5" transform="translate(126.6009, 11.9901) scale(-1, 1) rotate(-180) translate(-126.6009, -11.9901)translate(49.6009, 10.4901)">
-                          <line x1="-3.96190285e-13" y1="1.5" x2="153.992505" y2="1.5" id="路径-6" stroke="url(#linearGradient-2)" opacity="0.399999976"></line>
-                          <path d="M111.756559,3 C112.584986,3 113.256559,2.32842712 113.256559,1.5 C113.256559,0.671572875 112.584986,-5.6600229e-14 111.756559,-5.6600229e-14 C110.928132,-5.6600229e-14 110.256559,0.671572875 110.256559,1.5 C110.256559,2.32842712 110.928132,3 111.756559,3 Z" id="椭圆形" fill="#4A5C4A"></path>
+                    
+                      <path :d="`M0.997855372,${h-2} L${w/1.07},${h-2} L${w-2},${h/1.36} L${w-2},0.490133526 C${w/1.17},0.490133526 
+                        ${w/1.32},0.490133526 ${w/1.42},0.490133526 C${w/1.44},0.490133526 ${w/1.444},0.490133526 ${w/1.47},0.490133526 
+                        C${w/2.04},0.490133526 ${w/2.04},0.490133526 ${w/3.31},0.490133526 C${w/3.44},0.490133526 ${w/3.49},0.490133526 
+                        ${w/3.58},0.490133526 C${w/3.583},0.490133526 ${w/3.589},0.490133526 ${w/3.594},0.490133526 C${w/4.87},0.490133526 
+                        ${w/7.54},0.490133526 ${w/16.56},0.490133526 L0.48040407,${h/4.73} L0.997855372,${h-2} Z`" 
+                        id="路径-22" :stroke="`url(#1-${boxId})`" fill-opacity="0.85" :fill="colors[6]"
+                      ></path>
+                      <!-- <g id="编组-5" transform="translate(126.6009, 11.9901) scale(-1, 1) rotate(-180) translate(-126.6009, -11.9901)translate(49.6009, 10.4901)">
+                          <line :x1="`-3.96190285e-13`" y1="1.5" x2="153.992505" y2="1.5" id="路径-6" :stroke="`url(#2-${boxId})`" opacity="0.399999976"></line>
+                          <path :d="`M${w/1.83},3 C${w/1.82},3 ${w/1.81},2.32842712 ${w/1.81},1.5 C${w/1.81},0.671572875 ${w/1.82},-5.6600229e-14 
+                            ${w/1.83},-5.6600229e-14 C${w/1.85},-5.6600229e-14 ${w/1.86},0.671572875 ${w/1.86},1.5 C${w/1.86},2.32842712 ${w/1.85},3 
+                            ${w/1.83},3 Z`" id="椭圆形" :fill="colors[7]"
+                          ></path>
                           <circle id="椭圆形" :fill="colors[7]" cx="54.7565588" cy="1.5" r="1.5"></circle>
-                      </g>
-                      <g id="黄色棱形" transform="translate(47.3111, 49.8535) scale(1, -1) translate(-47.3111, -49.8535)translate(32.8833, 48.9132)">
+                      </g> -->
+                      
+                      <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(#filter-4)" xlink:href="#path-3"></use>
-                              <use :fill="colors[8]" fill-rule="evenodd" 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="#searchboxpath-3"></use>
                           </g>
                           <g id="矩形" opacity="0.399999976">
-                              <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
-                              <use :fill="colors[8]" fill-rule="evenodd" 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="#searchboxpath-5"></use>
                           </g>
                       </g>
                       <g id="装饰线-">
-                          <polygon id="矩形" :fill="colors[9]" points="33.883293 0.119323339 50.7322536 0.119323339 54.0432648 3.00000034 37.1943042 3.00000034"></polygon>
-                          <polygon id="路径-21" fill="url(#linearGradient-7)" points="0.280015515 23.0451271 0 10.5120201 10.7260003 0.119323339 29.3354202 3.1827193e-13 33.1074945 3.70128702 13.3177491 3.70128702 4.25149047 12.8512446 4.25149047 25.5958812"></polygon>
+                          <polygon 
+                            id="矩形" :fill="colors[9]" 
+                            :points="`${w/6.05} 0.119323339 ${w/4.04} 0.119323339 ${w/3.79} 3.00000034 ${w/5.51} 3.00000034`"
+                          ></polygon>
+                          <polygon 
+                            id="路径-21" :fill="`url(#7-${boxId})`"
+                            :points="`0.280015515 ${h/2.3} 0 ${h/4.94} ${w/19.11} 0.119323339 ${w/6.99} 3.1827193e-13 ${w/6.19} 3.70128702 
+                            ${w/15.39} 3.70128702 4.25149047 ${h/4.12} 4.25149047 ${h/2.07}`"
+                          ></polygon>
                       </g>
-                      <g id="装饰线-" transform="translate(177.0216, 37.7979) scale(-1, -1) translate(-177.0216, -37.7979)translate(150, 25)">
-                          <polygon id="矩形" :fill="colors[9]" points="33.883293 0.119323339 50.7322536 0.119323339 54.0432648 3.00000034 37.1943042 3.00000034"></polygon>
-                          <polygon id="路径-21" fill="url(#linearGradient-7)" points="0.280015515 23.0451271 0 10.5120201 10.7260003 0.119323339 29.3354202 3.1827193e-13 33.1074945 3.70128702 13.3177491 3.70128702 4.25149047 12.8512446 4.25149047 25.5958812"></polygon>
+                      <g id="装饰线-" :transform="`translate(${w/1.16}, ${h/1.34}) scale(-1, -1) translate(-${w/1.16}, -${h/1.4})translate(${w/1.37}, ${h/2.12})`">
+                          <polygon 
+                            id="矩形" :fill="colors[9]" 
+                            :points="`${w/6.05} 0.119323339 ${w/4.04} 0.119323339 ${w/3.79} 3.00000034 ${w/5.51} 3.00000034`"></polygon>
+                          <polygon 
+                            id="路径-21" :fill="`url(#7-${boxId})`" 
+                            :points="`0.280015515 ${h/2.3} 0 ${h/4.94} ${w/19.11} 0.119323339 ${w/6.99} 3.1827193e-13 ${w/6.19} 3.70128702 
+                            ${w/15.39} 3.70128702 4.25149047 ${h/4.12} 4.25149047 ${h/2.07}`"></polygon>
                       </g>
                   </g>
               </g>

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/TopTitles01/index.vue

@@ -124,7 +124,7 @@ const {
   display: flex;
   justify-content: center;
   align-items: center; 
-
+    
   svg {
     position: absolute;
     z-index: -1;

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',
+};