组件优化

src/packages/components/Equipment/Equipment/TitlesBg02/config.ts

@@ -1,12 +1,15 @@
 import { PublicConfigClass } from '@/packages/public'
-import { chartInitConfig } from '@/settings/designSetting'
+import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
 import { CreateComponentType } from '@/packages/index.d'
 import { EquipmentTitlesbg02Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   text: '风险指数',
-  colors: [],
+  value: '73%',
+  colors: ['#CBE7CD','#FFCE00'],
+  textSize1: 14,
+  textSize2: 28
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -14,4 +17,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 142, h: 142, zIndex: 1 }
   public chartConfig = cloneDeep(EquipmentTitlesbg02Config)
   public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
 }

src/packages/components/Equipment/Equipment/TitlesBg02/config.vue

@@ -10,7 +10,13 @@
       />
     </SettingItemBox> 
   </CollapseItem>
-  <CollapseItem name="样式" :expanded="true">
+  <CollapseItem name="文字样式" :expanded="true">
+    <SettingItem name="大小">
+      <n-input-number v-model:value="optionData.textSize1" size="small" :min="12"></n-input-number>
+    </SettingItem>
+    <SettingItem name="大小">
+      <n-input-number v-model:value="optionData.textSize2" size="small" :min="12"></n-input-number>
+    </SettingItem>
     <SettingItemBox
       :name="`颜色-${index + 1}`"
       v-for="(item, index) in optionData.colors"

src/packages/components/Equipment/Equipment/TitlesBg02/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div  class="go-title-03">
+    <div class="labelbox">{{ text }}</div>
+    <div class="valuebox">{{ value }}</div>
     <svg :width="w" :height="h">
       <title>编组 68</title>
       <defs>
@@ -28,9 +30,9 @@
                                   <path d="M105.626255,113.753898 L108.174106,115.537687 C97.8397879,124.211336 84.5122618,129.434766 69.9647383,129.434766 C56.823398,129.434766 44.6776008,125.172339 34.834457,117.954594 L37.435827,116.132182 C46.6316164,122.623275 57.8528903,126.436277 69.9647383,126.436277 C83.4889808,126.436277 95.9028341,121.682136 105.626255,113.753898 Z M14.0595162,49.637029 L16.608208,51.4214585 C14.5898889,57.2296997 13.4931995,63.4691463 13.4931995,69.9647383 C13.4931995,79.2104905 15.715131,87.9372828 19.6541502,95.6402715 L17.1748639,97.3759309 C12.9069219,89.1732556 10.4947107,79.850698 10.4947107,69.9647383 C10.4947107,62.8251096 11.7528505,55.9793352 14.0595162,49.637029 Z M129.434766,69.9647383 C129.434766,78.5004155 127.636501,86.6160855 124.398157,93.9535634 L121.891645,92.1968581 C124.816674,85.3738811 126.436277,77.858449 126.436277,69.9647383 C126.436277,64.8499906 125.7563,59.8940601 124.481812,55.1824148 L127.085585,53.3596429 C128.614954,58.6296941 129.434766,64.2014776 129.434766,69.9647383 Z M69.9647383,10.4947107 C87.2972618,10.4947107 102.897959,17.9095414 113.767815,29.7401882 L111.288125,31.4752934 C100.978892,20.4118737 86.2797864,13.4931995 69.9647383,13.4931995 C55.0178593,13.4931995 41.4272633,19.3001377 31.3259059,28.7810587 L28.8193019,27.0258601 C39.5021589,16.7864777 53.9986881,10.4947107 69.9647383,10.4947107 Z" id="形状结合" fill="#11A14D" fill-rule="nonzero"></path>
                                   <circle id="外线" stroke="#11A14D" opacity="0.50405" cx="69.9647383" cy="69.9647383" r="69.9647383"></circle>
                                   <g id="1" transform="translate(32.9834, 74.9622)">
-                                      <text id="风险指数" font-family="PingFangSC-Regular, PingFang SC" font-size="14" font-weight="normal" fill="#CBE7CD">
+                                      <!-- <text id="风险指数" font-family="PingFangSC-Regular, PingFang SC" font-size="14" font-weight="normal" fill="#CBE7CD">
                                           <tspan x="8.98136169" y="20.9919402">{{text}}</tspan>
-                                      </text>
+                                      </text> -->
                                       <rect id="矩形" fill="#396754" x="0" y="0" width="74.8394734" height="1"></rect>
                                   </g>
                               </g>
@@ -47,6 +49,8 @@
 <script setup lang="ts">
 import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 
 const props = defineProps({
   chartConfig: {
@@ -58,8 +62,16 @@ const props = defineProps({
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
   colors,
-  text
+  text,
+  value,
+  textSize1,
+  textSize2
 } = toRefs(props.chartConfig.option)
+
+// 数据callback处理（预览时触发）
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.value = resData;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -73,6 +85,30 @@ const {
     position: absolute;
     z-index: -1;
   }
+  .labelbox{
+    position: absolute;
+    width: 60%;
+    height:30%;
+    top: 50%;
+    left: 20%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: v-bind('colors[0]');
+    font-size: v-bind('textSize1+"px"');
+  }
+  .valuebox{
+    position: absolute;
+    width: 60%;
+    height:30%;
+    top: 25%;
+    left: 20%;
+    display: flex;
+    justify-content: center;
+    align-items: end;
+    color: v-bind('colors[1]');
+    font-size: v-bind('textSize2+"px"');
+  }
   .fill {
     fill: v-bind('colors[0]');
   }

src/packages/components/Equipment/Equipment/TitlesBg04/config.vue

@@ -10,6 +10,17 @@
       />
     </SettingItemBox> 
   </CollapseItem>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="文本" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.dataset.label"
+        :minlength="1"
+        type="text"
+        placeholder="请输入"
+      />
+    </SettingItemBox> 
+  </CollapseItem>
   <CollapseItem name="文字样式" :expanded="true">
     <SettingItem name="大小">
       <n-input-number v-model:value="optionData.textSize" size="small" :min="12"></n-input-number>

src/packages/components/Equipment/Equipment/TitlesBg07/config.ts

@@ -1,5 +1,5 @@
 import { PublicConfigClass } from '@/packages/public'
-import { chartInitConfig } from '@/settings/designSetting'
+import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
 import { CreateComponentType } from '@/packages/index.d'
 import { EquipmentTitlesbg07Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -7,6 +7,10 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
   boxId: 'EquipmentTitlesbg07',
   colors: ['#457453','#0D6336','#11D16D'],
+  textColor: '#4FE985',
+  textSize: 28,
+  textValue: '57',
+  textBlod: 500
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -14,4 +18,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 98, h: 39, zIndex: 1 }
   public chartConfig = cloneDeep(EquipmentTitlesbg07Config)
   public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
 }

src/packages/components/Equipment/Equipment/TitlesBg07/config.vue

@@ -10,6 +10,39 @@
       />
     </SettingItemBox> 
   </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="样式">
+      <SettingItem name="文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.textColor = option.textColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize"
+          :min="12"
+        />
+      </SettingItem>
+      <SettingItem name="文字粗细">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textBlod"
+          :min="400"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
   <CollapseItem name="样式" :expanded="true">
     <SettingItemBox
       :name="`颜色-${index + 1}`"

src/packages/components/Equipment/Equipment/TitlesBg07/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div  class="go-title-03">
+    <div class="labelbox">{{ textValue }}</div>
     <svg :width="w" :height="h">
       <title>编组 24</title>
       <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -44,6 +45,8 @@
 <script setup lang="ts">
 import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 
 const props = defineProps({
   chartConfig: {
@@ -55,8 +58,17 @@ const props = defineProps({
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
   colors,
-  boxId
+  boxId,
+  textColor,
+  textSize,
+  textBlod,
+  textValue
 } = toRefs(props.chartConfig.option)
+
+ // 数据callback处理（预览时触发）
+ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.textValue = resData;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -70,6 +82,14 @@ const {
     position: absolute;
     z-index: -1;
   }
+  .labelbox{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: v-bind('textColor');
+    font-size: v-bind('textSize+"px"');
+    font-weight: v-bind('textBlod');
+  }
   .fill {
     fill: v-bind('colors[0]');
   }

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

@@ -1,5 +1,5 @@
 import { PublicConfigClass } from '@/packages/public'
-import { chartInitConfig } from '@/settings/designSetting'
+import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
 import { CreateComponentType } from '@/packages/index.d'
 import { ContentTitle02Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -7,6 +7,15 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
   boxId: 'linearGradientContentTitle02',
   colors: ['#1F6B55','#0A392A','#396754','#457453'],
+  labelText: '取水点',
+  labelColor: '#CBE7CD',
+  labelSize: 14,
+  valueText: '10',
+  valueColor: '#4FE985',
+  valueSize: 18,
+  unitText: '个',
+  unitColor: '#CBE7CD',
+  unitSize: 10
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -14,4 +23,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 172, h: 71, zIndex: 1 }
   public chartConfig = cloneDeep(ContentTitle02Config)
   public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
 }

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

@@ -10,6 +10,112 @@
       />
     </SettingItemBox> 
   </CollapseItem>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="文本" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.labelText"
+        :minlength="1"
+        type="text"
+        placeholder="请输入"
+      />
+    </SettingItemBox> 
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色`"
+    >
+      <SettingItem name="文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.labelColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.labelColor = option.labelColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.labelSize"
+          :min="10"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="单位" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.unitText"
+        :minlength="1"
+        type="text"
+        placeholder="请输入"
+      />
+    </SettingItemBox> 
+  </CollapseItem>
+  <CollapseItem name="单位样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色`"
+    >
+      <SettingItem name="文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.unitColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.unitColor = option.unitColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.unitSize"
+          :min="10"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="值样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色`"
+    >
+      <SettingItem name="文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.valueColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.valueColor = option.valueColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.valueSize"
+          :min="12"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
   <CollapseItem name="样式" :expanded="true">
     <SettingItemBox
       :name="`颜色-${index + 1}`"

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

@@ -1,5 +1,7 @@
 <template>
   <div  class="go-title-03">
+    <div class="valuebox">{{ valueText }} <span class="unitbox">{{ unitText }}</span></div>
+    <div class="labelbox">{{ labelText }}</div>
     <svg :width="w" :height="h">
       <title>编组 44</title>
       <defs>
@@ -38,6 +40,8 @@
 <script setup lang="ts">
 import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 
 const props = defineProps({
   chartConfig: {
@@ -49,8 +53,22 @@ const props = defineProps({
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
   colors,
-  boxId
+  boxId,
+  labelText,
+  labelColor,
+  labelSize,
+  valueText,
+  valueColor,
+  valueSize,
+  unitText,
+  unitColor,
+  unitSize
 } = toRefs(props.chartConfig.option)
+
+ // 数据callback处理（预览时触发）
+ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.valueText = resData;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -64,6 +82,33 @@ const {
     position: absolute;
     z-index: -1;
   }
+  .labelbox{
+    position: absolute;
+    width: 50%;
+    height: 50%;
+    top: 50%;
+    left: 50%;
+    display:flex;
+    align-items: center;
+    color: v-bind('labelColor');
+    font-size: v-bind('labelSize+"px"');
+  }
+  .valuebox{
+    position: absolute;
+    width: 50%;
+    height: 50%;
+    top: 0%;
+    left: 50%;
+    display:flex;
+    align-items: center;
+    color: v-bind('valueColor');
+    font-size: v-bind('valueSize+"px"');
+    .unitbox{
+      color: v-bind('unitColor');
+      font-size: v-bind('unitSize+"px"');
+      margin-left:3px;
+    }
+  }
   .fill {
     fill: v-bind('colors[0]');
   }

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

@@ -1,5 +1,5 @@
 import { PublicConfigClass } from '@/packages/public'
-import { chartInitConfig } from '@/settings/designSetting'
+import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
 import { CreateComponentType } from '@/packages/index.d'
 import { ContentTitle04Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -7,6 +7,15 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
   boxId: 'linearGradientContentTitle04',
   colors: ['#067847','#0EB07D','#FFB111','#FFB217','#457453','#0CB170'],
+  labelText: '护林员总数',
+  labelColor: '#CBE7CD',
+  labelSize: 12,
+  valueText: ['10'],
+  valueColor: '#73FF73',
+  valueSize: 18,
+  unitText: ['人'],
+  unitColor: '#16E795',
+  unitSize: 10
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -14,4 +23,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 176, h: 60, zIndex: 1 }
   public chartConfig = cloneDeep(ContentTitle04Config)
   public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
 }

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

@@ -10,6 +10,122 @@
       />
     </SettingItemBox> 
   </CollapseItem>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="文本" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.labelText"
+        :minlength="1"
+        type="text"
+        placeholder="请输入"
+      />
+    </SettingItemBox> 
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色`"
+    >
+      <SettingItem name="文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.labelColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.labelColor = option.labelColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.labelSize"
+          :min="10"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox 
+      :name="`单位-${index + 1}`"
+      v-for="(item, index) in optionData.unitText"
+      :key="index"
+    >
+      <n-input
+        size="small"
+        v-model:value="optionData.unitText[index]"
+        :minlength="1"
+        type="text"
+        placeholder="请输入"
+        
+      />
+      <n-button ghost @click="optionData.unitText.splice(index, 1)"> - </n-button>
+      
+    </SettingItemBox> 
+    <SettingItem>
+      <n-button size="small" @click="optionData.unitText.push('')"> + 新增</n-button>
+    </SettingItem>
+  </CollapseItem>
+  <CollapseItem name="单位样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色`"
+    >
+      <SettingItem name="文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.unitColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.unitColor = option.unitColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.unitSize"
+          :min="10"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="值样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色`"
+    >
+      <SettingItem name="文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.valueColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.valueColor = option.valueColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.valueSize"
+          :min="12"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
   <CollapseItem name="样式" :expanded="true">
     <SettingItemBox
       :name="`颜色-${index + 1}`"

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

@@ -1,5 +1,12 @@
 <template>
   <div  class="go-title-03">
+    <div class="valuebox">
+      <div v-for="(item, index) in valueText">
+        {{ item }}  <span class="unitbox">{{ unitText[index] || null }}</span>
+      </div>
+    </div>
+     
+    <div class="labelbox">{{ labelText }}</div>
     <svg :width="w" :height="h">
       <title>编组 62</title>
       <defs>
@@ -44,6 +51,8 @@
 <script setup lang="ts">
 import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 
 const props = defineProps({
   chartConfig: {
@@ -55,8 +64,22 @@ const props = defineProps({
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
   colors,
-  boxId
+  boxId,
+  labelText,
+  labelColor,
+  labelSize,
+  valueText,
+  valueColor,
+  valueSize,
+  unitText,
+  unitColor,
+  unitSize
 } = toRefs(props.chartConfig.option)
+
+// 数据callback处理（预览时触发）
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.valueText = resData;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -70,6 +93,31 @@ const {
     position: absolute;
     z-index: -1;
   }
+  .labelbox{
+    position: absolute;
+    height: 38%;
+    top: 62%;
+    left: 10%;
+    display:flex;
+    align-items: center;
+    color: v-bind('labelColor');
+    font-size: v-bind('labelSize+"px"');
+  }
+  .valuebox{
+    position: absolute;
+    height: 62%;
+    top: 0%;
+    left: 10%;
+    display:flex;
+    align-items: end;
+    color: v-bind('valueColor');
+    font-size: v-bind('valueSize+"px"');
+    .unitbox{
+      color: v-bind('unitColor');
+      font-size: v-bind('unitSize+"px"');
+      margin: 0 3px;
+    }
+  }
   .fill {
     fill: v-bind('colors[0]');
   }

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

@@ -7,6 +7,9 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
   boxId: 'linearGradientContentTitle05',
   colors: ['#583700','#FF9538','#E3AC5C','#C2742F','#F5A500','#0CB170'],
+  dataset: '',
+  textColor: '#fff',
+  textSize: 14
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

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

@@ -10,6 +10,45 @@
       />
     </SettingItemBox> 
   </CollapseItem>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="名称" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.dataset"
+        :minlength="1"
+        type="text"
+        placeholder="请输入"
+      />
+    </SettingItemBox> 
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色`"
+    >
+      <SettingItem name="文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.textColor = option.textColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize"
+          :min="12"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
   <CollapseItem name="样式" :expanded="true">
     <SettingItemBox
       :name="`颜色-${index + 1}`"

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

@@ -1,5 +1,6 @@
 <template>
   <div  class="go-title-03">
+    <div class="valuebox">{{dataset}}</div>
     <svg :width="w" :height="h">
       <title>编组 64</title>
       <defs>
@@ -77,7 +78,10 @@ const props = defineProps({
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
   colors,
-  boxId
+  boxId,
+  textColor,
+  textSize,
+  dataset
 } = toRefs(props.chartConfig.option)
 </script>
 
@@ -92,6 +96,10 @@ const {
     position: absolute;
     z-index: -1;
   }
+  .valuebox{
+    color: v-bind('textColor');
+    font-size: v-bind('textSize+"px"');
+  }
   .fill {
     fill: v-bind('colors[0]');
   }

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

@@ -5,8 +5,11 @@ import { TitlesBtnConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
+  dataset: '',
   boxId: 'linearGradientTitlesLeftBtn',
   colors: ['#131415','#008C47','#02C175','#02AD69','#008C46','#06C869','#02B56D','#EBBE10','#02C074'],
+  textColor: '#fff',
+  textSize: 14
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

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

@@ -10,6 +10,45 @@
       />
     </SettingItemBox> 
   </CollapseItem>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="名称" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.dataset"
+        :minlength="1"
+        type="text"
+        placeholder="请输入"
+      />
+    </SettingItemBox> 
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色`"
+    >
+      <SettingItem name="文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.textColor = option.textColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize"
+          :min="12"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
   <CollapseItem name="样式" :expanded="true">
     <SettingItemBox
       :name="`颜色-${index + 1}`"

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

@@ -5,7 +5,7 @@ export const TitlesBtnConfig: ConfigType = {
   key: 'TitlesBtn',
   chartKey: 'VTitlesBtn',
   conKey: 'VCTitlesBtn',
-  title: '标题按钮左',
+  title: '标题按钮',
   category: ChatCategoryEnum.TITLE,
   categoryName: ChatCategoryEnumName.TITLE,
   package: PackagesCategoryEnum.UNITS,

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

@@ -1,5 +1,6 @@
 <template>
   <div  class="go-title-03">
+    <div class="valuebox">{{dataset}}</div>
     <svg :width="w" :height="h">
       <title>编组 39</title>
       <defs>
@@ -99,7 +100,10 @@ const filterId = `border-box-04-filterId-${getUUID()}`
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
   colors,
-  boxId
+  boxId,
+  textColor,
+  textSize,
+  dataset
 } = toRefs(props.chartConfig.option)
 </script>
 
@@ -114,6 +118,10 @@ const {
     position: absolute;
     z-index: -1;
   }
+  .valuebox{
+    color: v-bind('textColor');
+    font-size: v-bind('textSize+"px"');
+  }
   .fill {
     fill: v-bind('colors[0]');
   }

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

@@ -7,6 +7,9 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
   boxId: 'linearGradientTitlesLeftBtnActive',
   colors: ['#131415','#EA9607','#EBBE11','#EBBE10','#EBBA0F','#EBB90F','#EBBA0F'],
+  dataset: '',
+  textColor: '#fff',
+  textSize: 14
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

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

@@ -10,6 +10,45 @@
       />
     </SettingItemBox> 
   </CollapseItem>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="名称" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.dataset"
+        :minlength="1"
+        type="text"
+        placeholder="请输入"
+      />
+    </SettingItemBox> 
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色`"
+    >
+      <SettingItem name="文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.textColor = option.textColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize"
+          :min="12"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
   <CollapseItem name="样式" :expanded="true">
     <SettingItemBox
       :name="`颜色-${index + 1}`"

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

@@ -5,7 +5,7 @@ export const TitlesBtnActiveConfig: ConfigType = {
   key: 'TitlesBtnActive',
   chartKey: 'VTitlesBtnActive',
   conKey: 'VCTitlesBtnActive',
-  title: '标题按钮左-选中',
+  title: '标题按钮-选中',
   category: ChatCategoryEnum.TITLE,
   categoryName: ChatCategoryEnumName.TITLE,
   package: PackagesCategoryEnum.UNITS,

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

@@ -1,5 +1,6 @@
 <template>
   <div  class="go-title-03">
+    <div class="valuebox">{{dataset}}</div>
     <svg :width="w" :height="h">
       <title>编组 39</title>
       <defs>
@@ -97,7 +98,10 @@ const filterId = `border-box-04-filterId-${getUUID()}`
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
   colors,
-  boxId
+  boxId,
+  textColor,
+  textSize,
+  dataset
 } = toRefs(props.chartConfig.option)
 </script>
 
@@ -112,6 +116,10 @@ const {
     position: absolute;
     z-index: -1;
   }
+  .valuebox{
+    color: v-bind('textColor');
+    font-size: v-bind('textSize+"px"');
+  }
   .fill {
     fill: v-bind('colors[0]');
   }