Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

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

@@ -11,7 +11,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = RightBox01Config.key
-  public attr = { ...chartInitConfig, w: 382, h: 265, zIndex: 1 }
+  public attr = { ...chartInitConfig, w: 382, h: 141, zIndex: 1 }
   public chartConfig = cloneDeep(RightBox01Config)
   public option = cloneDeep(option)
 }

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

@@ -1,17 +1,128 @@
-import { PublicConfigClass } from '@/packages/public'
-import { chartInitConfig } from '@/settings/designSetting'
-import { CreateComponentType } from '@/packages/index.d'
+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 option = {
-  boxId: 'RightBox02',
-  colors: ['#06463A','#02221B'],
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+const option = {
+  colors:['#FF1EE267','#FFFFCE00','#FFFF6116'],
+  legend: {
+    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 = RightBox02Config.key
-  public attr = { ...chartInitConfig, w: 387, h: 229, zIndex: 1 }
+  public key: string = RightBox02Config.key
   public chartConfig = cloneDeep(RightBox02Config)
-  public option = cloneDeep(option)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,53 +1,95 @@
 <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="颜色">
+  <!-- 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="optionData.colors[index]"
+          v-model:value="item.label.color"
         ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.colors[index] = option.colors[index]"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-    </SettingItemBox>
+      </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 } from 'vue'
+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'
-import { option } from './config'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<typeof option>,
+    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

@@ -1,5 +1,5 @@
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const RightBox02Config: ConfigType = {
   key: 'RightBox02',
@@ -10,5 +10,5 @@ export const RightBox02Config: ConfigType = {
   categoryName: ChatCategoryEnumName.TITLE,
   package: PackagesCategoryEnum.UNITS,
   chartFrame: ChartFrameEnum.STATIC,
-  image: 'right2bg.png',
-};
+  image: 'right2bg.png'
+}

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

@@ -1,46 +1,86 @@
 <template>
-  <div  class="go-title-03">
-    <img :width="w" :height="h" src="/src/assets/images/chart/units/right2bg.png" />
-  </div>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
+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<CreateComponentType>,
+    type: Object as PropType<config>,
     required: true
   }
 })
 
-const { w, h } = toRefs(props.chartConfig.attr)
-const {
-  colors,
-  boxId
-} = toRefs(props.chartConfig.option)
+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>
-
-<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/RightBox03/config.ts

@@ -1,17 +1,100 @@
-import { PublicConfigClass } from '@/packages/public'
-import { chartInitConfig } from '@/settings/designSetting'
-import { CreateComponentType } from '@/packages/index.d'
+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 option = {
-  boxId: 'RightBox03',
-  colors: ['#06463A','#02221B'],
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+const option = {
+  colors:['#FF1EE267','#FFFFCE00','#FFFF6116'],
+  legend: {
+    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: 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 = RightBox03Config.key
-  public attr = { ...chartInitConfig, w: 387, h: 229, zIndex: 1 }
+  public key: string = RightBox03Config.key
   public chartConfig = cloneDeep(RightBox03Config)
-  public option = cloneDeep(option)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,53 +1,95 @@
 <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="颜色">
+  <!-- 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="optionData.colors[index]"
+          v-model:value="item.label.color"
         ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.colors[index] = option.colors[index]"
-        >
-          恢复默认
-        </n-button>
-      </SettingItem>
-    </SettingItemBox>
+      </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 } from 'vue'
+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'
-import { option } from './config'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<typeof option>,
+    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

@@ -1,14 +1,14 @@
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+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: '双网',
+  title: '双网效能率',
   category: ChatCategoryEnum.TITLE,
   categoryName: ChatCategoryEnumName.TITLE,
   package: PackagesCategoryEnum.UNITS,
   chartFrame: ChartFrameEnum.STATIC,
-  image: 'right3bg.png',
-};
+  image: 'right3bg.png'
+}

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

@@ -1,46 +1,86 @@
 <template>
-  <div  class="go-title-03">
-    <img :width="w" :height="h" src="/src/assets/images/chart/units/right3bg.png" />
-  </div>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
+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<CreateComponentType>,
+    type: Object as PropType<config>,
     required: true
   }
 })
 
-const { w, h } = toRefs(props.chartConfig.attr)
-const {
-  colors,
-  boxId
-} = toRefs(props.chartConfig.option)
+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>
-
-<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

@@ -10,8 +10,17 @@ import { ContentTitle03Config } from './ContentTitle03/index';
 import { ContentTitle04Config } from './ContentTitle04/index';
 import { ContentTitle05Config } from './ContentTitle05/index';
 import { LeftChartsConfig } from './LeftCharts/index';
+import { Icons01Config } from './Icons01/index';
+import { Icons02Config } from './Icons02/index';
+import { Icons03Config } from './Icons03/index';
+import { Icons04Config } from './Icons04/index';
 import { SearchBoxConfig } from './SearchBox/index';
 import { RightBox01Config } from './RightBox01/index';
+import { RightBox01IconConfig } from './RightBox01Icon/index';
+import { RightBox01Icon01Config } from './RightBox01Icon01/index';
+import { RightBox01Icon02Config } from './RightBox01Icon02/index';
+import { RightBox01Icon03Config } from './RightBox01Icon03/index';
+import { RightBox01Icon04Config } from './RightBox01Icon04/index';
 import { RightBox02Config } from './RightBox02/index';
 import { RightBox03Config } from './RightBox03/index';
 
@@ -28,8 +37,17 @@ export default [
     ContentTitle04Config,
     ContentTitle05Config,
     LeftChartsConfig,
+    Icons01Config,
+    Icons02Config,
+    Icons03Config,
+    Icons04Config,
     SearchBoxConfig,
     RightBox01Config,
+    RightBox01IconConfig,
+    RightBox01Icon01Config,
+    RightBox01Icon02Config,
+    RightBox01Icon03Config,
+    RightBox01Icon04Config,
     RightBox02Config,
-    RightBox02Config
+    RightBox03Config,
 ];

src/packages/components/Zhigan/Zhigan/ModalFrameClose/config.ts

@@ -8,7 +8,11 @@ export const option = {
   dataStyle:{
     color: '#005516',
     fontColor: '#FFFFFF'
-  }
+  },
+  dataStyleClone: {
+    color: '#005516',
+    fontColor: '#FFFFFF'
+  },
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

src/packages/components/Zhigan/Zhigan/ModalFrameClose/config.vue

@@ -8,6 +8,11 @@
           v-model:value="optionData.dataStyle.color"
         ></n-color-picker>
       </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.dataStyle.color = option.dataStyleClone.color">
+          恢复默认
+        </n-button>
+      </SettingItem>
       <SettingItem name="X的颜色">
         <n-color-picker
           size="small"
@@ -15,6 +20,14 @@
           v-model:value="optionData.dataStyle.fontColor"
         ></n-color-picker>
       </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.fontColor = option.dataStyleClone.fontColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
     </SettingItemBox>
   </CollapseItem>
 </template>

src/packages/components/Zhigan/Zhigan/ModalFrameClose/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ModalFrameClose">
-    <n-button text>
+    <n-button text @click="clickBtn">
       <Button :w="w" :h="h" :dataStyle="option.dataStyle" />
     </n-button>
   </div>
@@ -12,8 +12,10 @@
   import { icon } from '@/plugins';
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
   import { useChartDataFetch } from '@/hooks';
+  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
   import Button from './svg/button.vue';
 
+  const chartEditStore = useChartEditStore();
   const props = defineProps({
     chartConfig: {
       type: Object as PropType<CreateComponentType>,
@@ -22,10 +24,25 @@
   });
 
   const { w, h } = toRefs(props.chartConfig.attr);
-
   const option = reactive({
     dataStyle: props.chartConfig.option.dataStyle,
   });
+
+  // 单击交互
+  const clickElementItem = ref([]);
+
+  const list = props.chartConfig.events.interactConfigEvents;
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].type == 'click') {
+      for (let j = 0; j < list[i].movementList.length; j++) {
+        clickElementItem.value.push(list[i].movementList[j]);
+      }
+    }
+  }
+
+  const clickBtn = () => {
+    eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
+  };
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Zhigan/Zhigan/ModalHead/config.ts

@@ -5,13 +5,22 @@ import { chartInitConfig } from '@/settings/designSetting'
 import { ModalHeadConfig } from './index'
 
 export const option = {
-  title: '组件标题栏',
-  titleStyle: {
+  data: '组件标题栏',
+  dataStyle: {
     x: 40,
     y: 23,
-    fontcolor: '#FFFFFF',
-    fontsize: 20
-  }
+    fontColor: '#FFFFFF',
+    fontSize: 20,
+    // 标题矩形左侧颜色
+    leftColor: '#00611A',
+    startColor: '#1F6B55',
+    endColor: '#0A392A',
+  },
+  dataStyleClone: {
+    leftColor: '#00611A',
+    startColor: '#1F6B55',
+    endColor: '#0A392A',
+  },
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

src/packages/components/Zhigan/Zhigan/ModalHead/config.vue

@@ -3,13 +3,13 @@
     <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
     <SettingItemBox :alone="true" name="标题名称">
       <SettingItem :alone="true">
-        <n-input v-model:value="optionData.title" type="text" size="small" />
+        <n-input v-model:value="optionData.data" type="text" size="small" />
       </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="标题设置">
       <SettingItem name="标题横坐标位置">
         <n-input-number
-          v-model:value="optionData.titleStyle.x"
+          v-model:value="optionData.dataStyle.x"
           :min="0"
           size="small"
           placeholder="宽度"
@@ -17,7 +17,7 @@
       </SettingItem>
       <SettingItem name="标题纵坐标位置">
         <n-input-number
-          v-model:value="optionData.titleStyle.y"
+          v-model:value="optionData.dataStyle.y"
           :min="0"
           size="small"
           placeholder="高度"
@@ -27,16 +27,61 @@
         <n-color-picker
           size="small"
           :modes="['hex']"
-          v-model:value="optionData.titleStyle.fontcolor"
+          v-model:value="optionData.dataStyle.fontColor"
         ></n-color-picker>
       </SettingItem>
       <SettingItem name="标题字体大小">
         <n-input-number
-          v-model:value="optionData.titleStyle.fontsize"
+          v-model:value="optionData.dataStyle.fontSize"
           :min="0"
           size="small"
         ></n-input-number>
       </SettingItem>
+      <SettingItem name="标题矩形左侧颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.leftColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.leftColor = option.dataStyleClone.leftColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题渐变颜色(始)">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.startColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.startColor = option.dataStyleClone.startColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="标题渐变颜色(终)">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.endColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.endColor = option.dataStyleClone.endColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
     </SettingItemBox>
   </CollapseItem>
 </template>

src/packages/components/Zhigan/Zhigan/ModalHead/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="title">
-    <Title :title="option.title" :w="w" :h="h" :titleStyle="option.titleStyle" />
+    <Title :data="option.data" :w="w" :h="h" :dataStyle="option.dataStyle" />
   </div>
 </template>
 
@@ -22,8 +22,8 @@
   const { w, h } = toRefs(props.chartConfig.attr);
 
   const option = reactive({
-    title: props.chartConfig.option.title,
-    titleStyle: props.chartConfig.option.titleStyle,
+    data: props.chartConfig.option.data,
+    dataStyle: props.chartConfig.option.dataStyle,
   });
 </script>
 

src/packages/components/Zhigan/Zhigan/ModalHead/svg/title.vue

@@ -16,8 +16,8 @@
           y2="50%"
           id="linearGradient-ModalHead-1"
         >
-          <stop stop-color="#1F6B55" stop-opacity="0" offset="0%"></stop>
-          <stop stop-color="#0A392A" offset="100%"></stop>
+          <stop :stop-color="props.dataStyle.startColor" stop-opacity="0" offset="0%"></stop>
+          <stop :stop-color="props.dataStyle.endColor" offset="100%"></stop>
         </linearGradient>
       </defs>
       <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -37,7 +37,7 @@
                   ></rect>
                   <rect
                     id="矩形"
-                    fill="#00611A"
+                    :fill="props.dataStyle.leftColor"
                     transform="translate(1.5, 15) scale(1, -1) translate(-1.5, -15)"
                     x="0"
                     y="0"
@@ -51,17 +51,17 @@
         </g>
       </g>
       <text
-        :x="props.titleStyle.x"
-        :y="props.titleStyle.y"
-        :font-size="props.titleStyle.fontsize"
-        :fill="props.titleStyle.fontcolor"
+        :x="props.dataStyle.x"
+        :y="props.dataStyle.y"
+        :font-size="props.dataStyle.fontSize"
+        :fill="props.dataStyle.fontColor"
       >
-        {{ props.title }}
+        {{ props.data }}
       </text>
     </svg>
   </div>
 </template>
 
 <script setup lang="ts">
-  const props = defineProps(['title', 'w', 'h', 'titleStyle']);
+  const props = defineProps(['data', 'w', 'h', 'dataStyle']);
 </script>

src/packages/components/Zhigan/Zhigan/ModalVideo/index.vue

@@ -8,8 +8,8 @@
       :object-fit="option.dataset.fit"
       :loop="option.dataStyle.videoLoop"
       :muted="option.dataStyle.videoMuted"
-      :width="`${w - option.dataStyle.padding}`"
-      :height="`${h - option.dataStyle.padding}`"
+      :width="`${w - option.dataStyle.padding - option.dataStyle.borderWidth}`"
+      :height="`${h - option.dataStyle.padding - option.dataStyle.borderWidth}`"
       :src="option.dataset"
     />
   </div>
@@ -57,6 +57,7 @@
   video {
     display: block;
     object-fit: v-bind('option.dataStyle.videoFit');
-    padding: v-bind('`${option.dataStyle.padding}px`');
+    padding-top: v-bind('`${option.dataStyle.padding}px`');
+    padding-left: v-bind('`${option.dataStyle.padding}px`');
   }
 </style>

src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.ts

@@ -21,6 +21,9 @@ export const option = {
     iconY: 12,
     topWidth: 80,
     topHeight: 80,
+    rectStrokeColor: '#00611A',
+    rectFillColor: '#0A251E',
+    gFillColor: '#4FE985',
 
     bottomFontColor1: '#A4F9AB',
     bottomFontSize1: 20,
@@ -32,6 +35,11 @@ export const option = {
     bottomMarginTop: 16,
     bottomWidth: 80,
     bottomHeight: 80 * 97 / 71,
+  },
+  dataStyleClone: {
+    rectStrokeColor: '#00611A',
+    rectFillColor: '#0A251E',
+    gFillColor: '#4FE985',
   }
 }
 

src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.vue

@@ -24,14 +24,14 @@
           size="small"
         />
       </SettingItem>
-      <SettingItem name="组件宽度">
+      <!-- <SettingItem name="组件宽度">
         <n-input-number
           v-model:value="optionData.dataStyle.topWidth"
           min="0"
           type="text"
           size="small"
         />
-      </SettingItem>
+      </SettingItem> -->
       <SettingItem name="组件间隔">
         <n-input-number v-model:value="optionData.dataStyle.gap" min="0" type="text" size="small" />
       </SettingItem>
@@ -86,6 +86,51 @@
           size="small"
         />
       </SettingItem> -->
+      <SettingItem name="组件边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.rectStrokeColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.rectStrokeColor = option.dataStyleClone.rectStrokeColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="组件边角颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.gFillColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.gFillColor = option.dataStyleClone.gFillColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="组件填充颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.rectFillColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.dataStyle.rectFillColor = option.dataStyleClone.rectFillColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="下方组件设置">

src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/index.vue

@@ -34,9 +34,24 @@
     dataStyle: props.chartConfig.option.dataStyle,
   });
 
+  // watch(
+  //   () => option.dataStyle.topWidth,
+  //   () => {
+  //     option.dataStyle.topHeight = option.dataStyle.topWidth;
+  //     option.dataStyle.bottomWidth = option.dataStyle.topWidth;
+  //     option.dataStyle.bottomHeight = 97 * (option.dataStyle.bottomWidth / 71);
+  //   },
+  //   {
+  //     immediate: true,
+  //     deep: true,
+  //   },
+  // );
+
   watch(
-    () => option.dataStyle.topWidth,
+    () => w.value,
     () => {
+      option.dataStyle.topWidth =
+        (w.value - option.dataStyle.marginleft * 2 - option.dataStyle.gap * 3) / 4;
       option.dataStyle.topHeight = option.dataStyle.topWidth;
       option.dataStyle.bottomWidth = option.dataStyle.topWidth;
       option.dataStyle.bottomHeight = 97 * (option.dataStyle.bottomWidth / 71);

src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/top.vue

@@ -17,8 +17,8 @@
                   <g id="编组-10" transform="translate(0.5, 0.5)">
                     <rect
                       id="矩形"
-                      stroke="#00611A"
-                      fill="#0A251E"
+                      :stroke="props.dataStyle.rectStrokeColor"
+                      :fill="props.dataStyle.rectFillColor"
                       x="0.5"
                       y="1"
                       width="69"
@@ -43,7 +43,7 @@
                       opacity="0.299999982"
                       transform="translate(35.1054, 35.5) scale(1, -1) translate(-35.1054, -35.5)"
                     ></line>
-                    <g id="装饰" transform="translate(0, 0)" fill="#4FE985">
+                    <g id="装饰" transform="translate(0, 0)" :fill="props.dataStyle.gFillColor">
                       <rect id="矩形" x="0.05" y="0" width="12" height="4.5"></rect>
                       <rect
                         id="矩形备份-16"
@@ -57,7 +57,7 @@
                     <g
                       id="装饰"
                       transform="translate(64.025, 64.125) scale(-1, -1) translate(-64.025, -64.125)translate(58, 58)"
-                      fill="#4FE985"
+                      :fill="props.dataStyle.gFillColor"
                     >
                       <rect id="矩形" x="0.05" y="0" width="12" height="4.5"></rect>
                       <rect
@@ -91,4 +91,9 @@
   const props = defineProps(['item', 'dataStyle']);
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .icon01 {
+    position: absolute;
+    top: 0px;
+  }
+</style>