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

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

@@ -0,0 +1,24 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { JiChangConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  title: '机场',
+  unit: '处',
+  dataset: 3,
+  titleSize: 14,
+  unitSize: 10,
+  dataSize: 24,
+  colors: ['#FFFFFF','#FF6F00','#FF6F00'],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = JiChangConfig.key
+  public attr = { ...chartInitConfig, w: 117, h: 168, zIndex: 1 }
+  public chartConfig = cloneDeep(JiChangConfig)
+  public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
+}

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

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

src/packages/components/Equipment/Equipment/JiChang/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const JiChangConfig: ConfigType = {
+  key: 'JiChang',
+  chartKey: 'VJiChang',
+  conKey: 'VCJiChang',
+  title: '机场',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.EQUIPMENT,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'jichangbg.png',
+};

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

@@ -0,0 +1,71 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/equipment/jichangbg.png" />
+    <div class="titlebox">{{ title }}</div>
+    <div class="valuebox">{{dataset}}<span class="unitbox">{{unit}}</span></div>
+  </div>
+</template>
+
+<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: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  title,
+  unit,
+  dataset,
+  titleSize,
+  unitSize,
+  dataSize,
+} = toRefs(props.chartConfig.option)
+
+ // 数据callback处理（预览时触发）
+ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.dataset = resData;
+});
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+  .titlebox{
+    position: absolute;
+    top: 15%;
+    height: 13%;
+    display: flex;
+    align-items: center;
+    color: v-bind('colors[0]');
+    font-size: v-bind('titleSize+"px"');
+  }
+  .valuebox{
+    position: absolute;
+    top: 33%;
+    height: 15%;
+    display: flex;
+    align-items: end;
+    color: v-bind('colors[1]');
+    font-size: v-bind('dataSize+"px"');
+    .unitbox{
+      color: v-bind('colors[2]');
+      font-size: v-bind('unitSize+"px"');
+      margin-left: 3px;
+      margin-bottom: 4px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,130 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { NowPositionConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: '',
+  borderColor: '#457453',
+  mapOptions:{
+    "scene": {
+      "center": {"lat":35.362625,"lng":118.033886,"alt":8306.3,"heading":360,"pitch":-45},
+      "scene3DOnly": false,
+      "shadows": false,
+      "removeDblClick": true,
+      "sceneMode": 3,
+      "showSun": true,
+      "showMoon": true,
+      "showSkyBox": true,
+      "showSkyAtmosphere": true,
+      "fog": true,
+      "fxaa": true,
+      "requestRenderMode": true,
+      "contextOptions": {
+        "requestWebgl1": false,
+        "webgl": {
+          "preserveDrawingBuffer": true
+        }
+      },
+      "globe": {
+        "depthTestAgainstTerrain": false,
+        "baseColor": "#546a53",
+        "showGroundAtmosphere": true,
+        "enableLighting": false
+      },
+      "cameraController": {
+        "zoomFactor": 3.0,
+        "minimumZoomDistance": 1,
+        "maximumZoomDistance": 50000000,
+        "enableRotate": true,
+        "enableTranslate": true,
+        "enableTilt": true,
+        "enableZoom": true,
+        "enableCollisionDetection": true,
+        "minimumCollisionTerrainHeight": 15000
+      }
+    },
+    "control": {
+      "homeButton": false,
+      "baseLayerPicker": false,
+      "sceneModePicker": false,
+      "vrButton": false,
+      "fullscreenButton": false,
+      "navigationHelpButton": false,
+      "animation": false,
+      "timeline": false,
+      "infoBox": false,
+      "geocoder": false,
+      "selectionIndicator": false,
+      "showRenderLoopErrors": false,
+      "contextmenu": {
+        "hasDefault": false
+      },
+      "mouseDownView": false,
+      "zoom": {
+        "insertIndex": 1
+      },
+      "compass": {
+        "bottom": "toolbar",
+        "left": "5px"
+      },
+      "distanceLegend": {
+        "left": "10px",
+        "bottom": "2px"
+      },
+      // "locationBar": {
+      //   "crs": "CGCS2000_GK_Zone_3",
+      //   "crsDecimal": 0,
+      //   "template": "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx}  纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>"
+      // }
+    },
+    "method": {
+      "templateValues": {
+        "dataServer": "//data.mars3d.cn",
+        "gltfServerUrl": "//data.mars3d.cn/gltf"
+      }
+    },
+    "terrain": {
+      "url": "//data.mars3d.cn/terrain",
+      "show": true,
+      "clip": true
+    },
+    "basemaps": [
+      {
+        "id": 10,
+        "name": "地图底图",
+        "type": "group"
+      },
+      {
+        "pid": 10,
+        "name": "天地图影像",
+        "icon": "//data.mars3d.cn/img/thumbnail/basemap/tdt_img.png",
+        "type": "group",
+        "layers": [
+          {
+            "name": "底图",
+            "type": "tdt",
+            "layer": "img_d"
+          },
+          {
+            "name": "注记",
+            "type": "tdt",
+            "layer": "img_z"
+          }
+        ],
+        "show": true
+      }
+    ],
+    "layers": []
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = NowPositionConfig.key
+  public attr = { ...chartInitConfig, w: 343, h: 224, zIndex: -1 }
+  public chartConfig = cloneDeep(NowPositionConfig)
+  public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
+}

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

@@ -0,0 +1,36 @@
+<template>
+  <SettingItemBox name="样式">
+    <SettingItem name="边框颜色">
+      <n-color-picker
+        size="small"
+        :modes="['hex']"
+        v-model:value="optionData.borderColor"
+      ></n-color-picker>
+    </SettingItem>
+    <SettingItem>
+      <n-button
+        size="small"
+        @click="optionData.borderColor = option.borderColor"
+      >
+        恢复默认
+      </n-button>
+    </SettingItem>
+  </SettingItemBox>
+</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/Equipment/Equipment/NowPosition/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const NowPositionConfig: ConfigType = {
+  key: 'NowPosition',
+  chartKey: 'VNowPosition',
+  conKey: 'VCNowPosition',
+  title: '实时位置',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.EQUIPMENT,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'nowposition.png',
+};

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

@@ -0,0 +1,80 @@
+<template>
+  <div  class="go-title-03" ref="vChartRef" id="mars3dContainer"></div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, watch, onMounted, nextTick } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+import { isArray } from '@/utils'
+import * as mars3d from "mars3d"
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  borderColor,
+  mapOptions,
+  dataset
+} = toRefs(props.chartConfig.option)
+
+let map: mars3d.Map; // 地图对象
+const isFirstLoad = ref(true);
+const vChartRef = ref<HTMLElement>()
+const initMap = (newData: any) => {
+  // 第一次加载
+  if(isFirstLoad.value){
+    map = new mars3d.Map(vChartRef.value, newData);
+  }else{ // 之后更新
+    // map.setOptions(newData);
+    map.setSceneOptions(newData.scene);
+  }
+  isFirstLoad.value = false;
+}
+ 
+
+onMounted(()=>{
+
+})
+const stopWatch = watch(
+  () => props.chartConfig.option.mapOptions,
+ async option => {
+  let options = JSON.parse(JSON.stringify(props.chartConfig.option.mapOptions))
+    await nextTick();
+    initMap(options);
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  stopWatch()
+  let arr = newData || [116.300467, 39.907761]
+  map.flyTo({
+    center: arr, // 中心点
+    zoom: 18, // 缩放比例
+    pitch: 0 // 倾斜度
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+  width: v-bind('w');
+  height: v-bind('h');
+  border: 1px solid v-bind('borderColor')
+}
+</style>

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

@@ -0,0 +1,24 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { WuRenJiConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  title: '无人机',
+  unit: '台',
+  dataset: 1,
+  titleSize: 14,
+  unitSize: 10,
+  dataSize: 24,
+  colors: ['#FFFFFF','#58FF95','#58FF95'],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = WuRenJiConfig.key
+  public attr = { ...chartInitConfig, w: 117, h: 168, zIndex: 1 }
+  public chartConfig = cloneDeep(WuRenJiConfig)
+  public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
+}

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

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

src/packages/components/Equipment/Equipment/WuRenJi/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const WuRenJiConfig: ConfigType = {
+  key: 'WuRenJi',
+  chartKey: 'VWuRenJi',
+  conKey: 'VCWuRenJi',
+  title: '无人机',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.EQUIPMENT,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'wurenjibg.png',
+};

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

@@ -0,0 +1,71 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/equipment/wurenjibg.png" />
+    <div class="titlebox">{{ title }}</div>
+    <div class="valuebox">{{dataset}}<span class="unitbox">{{unit}}</span></div>
+  </div>
+</template>
+
+<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: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  title,
+  unit,
+  dataset,
+  titleSize,
+  unitSize,
+  dataSize,
+} = toRefs(props.chartConfig.option)
+
+ // 数据callback处理（预览时触发）
+ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.dataset = resData;
+});
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+  .titlebox{
+    position: absolute;
+    top: 15%;
+    height: 13%;
+    display: flex;
+    align-items: center;
+    color: v-bind('colors[0]');
+    font-size: v-bind('titleSize+"px"');
+  }
+  .valuebox{
+    position: absolute;
+    top: 33%;
+    height: 15%;
+    display: flex;
+    align-items: end;
+    color: v-bind('colors[1]');
+    font-size: v-bind('dataSize+"px"');
+    .unitbox{
+      color: v-bind('colors[2]');
+      font-size: v-bind('unitSize+"px"');
+      margin-left: 3px;
+      margin-bottom: 4px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,24 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { ZhiShengJiConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  title: '直升机',
+  unit: '架',
+  dataset: 2,
+  titleSize: 14,
+  unitSize: 10,
+  dataSize: 24,
+  colors: ['#FFFFFF','#1180FF','#1180FF'],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ZhiShengJiConfig.key
+  public attr = { ...chartInitConfig, w: 117, h: 168, zIndex: 1 }
+  public chartConfig = cloneDeep(ZhiShengJiConfig)
+  public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
+}

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

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

src/packages/components/Equipment/Equipment/ZhiShengJi/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const ZhiShengJiConfig: ConfigType = {
+  key: 'ZhiShengJi',
+  chartKey: 'VZhiShengJi',
+  conKey: 'VCZhiShengJi',
+  title: '直升机',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.EQUIPMENT,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'zhishengjibg.png',
+};

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

@@ -0,0 +1,71 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/equipment/zhishengjibg.png" />
+    <div class="titlebox">{{ title }}</div>
+    <div class="valuebox">{{dataset}}<span class="unitbox">{{unit}}</span></div>
+  </div>
+</template>
+
+<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: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  title,
+  unit,
+  dataset,
+  titleSize,
+  unitSize,
+  dataSize,
+} = toRefs(props.chartConfig.option)
+
+ // 数据callback处理（预览时触发）
+ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.dataset = resData;
+});
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+  .titlebox{
+    position: absolute;
+    top: 15%;
+    height: 13%;
+    display: flex;
+    align-items: center;
+    color: v-bind('colors[0]');
+    font-size: v-bind('titleSize+"px"');
+  }
+  .valuebox{
+    position: absolute;
+    top: 33%;
+    height: 15%;
+    display: flex;
+    align-items: end;
+    color: v-bind('colors[1]');
+    font-size: v-bind('dataSize+"px"');
+    .unitbox{
+      color: v-bind('colors[2]');
+      font-size: v-bind('unitSize+"px"');
+      margin-left: 3px;
+      margin-bottom: 4px;
+    }
+  }
+}
+</style>

src/packages/components/Equipment/Equipment/index.ts

@@ -14,6 +14,10 @@ import { EquipmentIcons01Config } from './EquipmentIcons01/index';
 import { EquipmentIcons02Config } from './EquipmentIcons02/index';
 import { EquipmentIcons03Config } from './EquipmentIcons03/index';
 import { EquipmentIcons04Config } from './EquipmentIcons04/index';
+import { WuRenJiConfig } from './WuRenJi/index';
+import { ZhiShengJiConfig } from './ZhiShengJi/index';
+import { JiChangConfig } from './JiChang/index';
+import { NowPositionConfig } from './NowPosition/index';
 
 export default [
     EquipmentContentbg01Config,
@@ -31,5 +35,9 @@ export default [
     EquipmentIcons03Config,
     EquipmentIcons04Config,
     EquipmentHuoQingJianCeConfig,
-    EquipmentHuoQingXianSuoConfig
+    EquipmentHuoQingXianSuoConfig,
+    WuRenJiConfig,
+    ZhiShengJiConfig,
+    JiChangConfig,
+    NowPositionConfig
 ];

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]');
   }