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

任务下发组件
2025-03-04 17:03:58 +08:00 · 2025-03-04 17:03:51 +08:00
35 changed files with 1459 additions and 2 deletions
--- a/src/assets/images/chart/tasks/ModalHead.png
+++ b/src/assets/images/chart/tasks/ModalHead.png
--- a/src/assets/images/chart/tasks/inputbg.png
+++ b/src/assets/images/chart/tasks/inputbg.png
--- a/src/assets/images/chart/tasks/receivpersonbg.png
+++ b/src/assets/images/chart/tasks/receivpersonbg.png
--- a/src/assets/images/chart/tasks/taskbg01.png
+++ b/src/assets/images/chart/tasks/taskbg01.png
--- a/src/assets/images/chart/tasks/taskbg02.png
+++ b/src/assets/images/chart/tasks/taskbg02.png
--- a/src/assets/images/chart/tasks/textareabg.png
+++ b/src/assets/images/chart/tasks/textareabg.png
--- a/src/assets/images/chart/tasks/user.png
+++ b/src/assets/images/chart/tasks/user.png
--- a/src/packages/components/Tasks/Tasks/TaskBackground01/config.ts
+++ b/src/packages/components/Tasks/Tasks/TaskBackground01/config.ts
@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { TaskBackground01Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  boxId: 'taskbackground01',
+  colors: ['#02221B','#06463A','#00D586','#00AB4E','#007343','#89E5A1'],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TaskBackground01Config.key
+  public attr = { ...chartInitConfig, w: 401, h: 528, zIndex: 1 }
+  public chartConfig = cloneDeep(TaskBackground01Config)
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Tasks/Tasks/TaskBackground01/config.vue
+++ b/src/packages/components/Tasks/Tasks/TaskBackground01/config.vue
@ -0,0 +1,53 @@
+<template>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="ID" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.boxId"
+        :minlength="1"
+        type="text"
+        placeholder="请输入Id"
+      />
+    </SettingItemBox> 
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.colors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
--- a/src/packages/components/Tasks/Tasks/TaskBackground01/index.ts
+++ b/src/packages/components/Tasks/Tasks/TaskBackground01/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskBackground01Config: ConfigType = {
+  key: 'TaskBackground01',
+  chartKey: 'VTaskBackground01',
+  conKey: 'VCTaskBackground01',
+  title: '背景图-01',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'taskbg01.png',
+};
--- a/src/packages/components/Tasks/Tasks/TaskBackground01/index.vue
+++ b/src/packages/components/Tasks/Tasks/TaskBackground01/index.vue
@ -0,0 +1,80 @@
+<template>
+  <div  class="go-title-03">
+    <svg :width="w" :height="h">
+      <title>编组 25</title>
+      <defs>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`1-${boxId}`">
+            <stop :stop-color="colors[0]" offset="0%"></stop>
+            <stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="87.055629%" y1="0%" x2="0%" y2="86.1698764%" :id="`2-${boxId}`">
+            <stop :stop-color="colors[2]" offset="0%"></stop>
+            <stop :stop-color="colors[3]" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="6.17106015%" y1="0%" x2="67.7872653%" y2="117.560409%" :id="`3-${boxId}`">
+            <stop :stop-color="colors[4]" offset="0%"></stop>
+            <stop :stop-color="colors[5]" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g id="林业防火-智处-任务下发-切图版" transform="translate(-45, -92)">
+              <g id="可视化" transform="translate(-0.5, -1)">
+                  <g id="模块" transform="translate(46, 85.9394)">
+                      <g id="标题模块--左侧1" transform="translate(0, 0.3606)">
+                          <g id="编组-25" transform="translate(0, 7)">
+                            w: 401, h: 528
+                              <polygon 
+                                id="面" 
+                                :fill="`url(#1-${boxId})`"  
+                                opacity="0.687237694" 
+                                :points="`0.999496262 0.152279907 ${w-2} 0.152279907 ${w-2} ${h-1} ${w/2.09} ${h-1} 0.999496262 ${h-1} 0.999496262 ${h/1.41} 0.999496262 ${h/2.07}`"
+                              ></polygon>
+                              <polygon 
+                                id="线框" 
+                                points="0 0.152279907 400 0.152279907 400 107.738212 395.834804 116.08598 395.834804 219.313846 399.084668 227.844828 399.084668 ${h-1} 0 ${h-1} 0 228.152775 3.65609676 220.298134 3.65609676 116.535598 0 107.206527"
+                              ></polygon>
+                              <g id="编组-6" transform="translate(12.2354, 13.0684) scale(1, -1) translate(-12.2354, -13.0684)">
+                                  <polygon id="路径-11" :fill="`url(#2-${boxId})`"   transform="translate(3.6507, 22.4861) scale(1, -1) translate(-3.6507, -22.4861)" points="0 18.8354037 0 26.1368157 7.30141204 18.8354037"></polygon>
+                                  <polygon id="装饰线段-" :fill="`url(#3-${boxId})`"   fill-rule="nonzero" points="3.65070602 3.65070602 3.65070602 11.0746415 14.2550943 22.4858359 20.9366367 22.4858359 24.4707994 26.1368157 12.6645612 26.1368157 12.122999 25.554072 0.488253244 13.034597 0 12.509216 2.49777287e-11 -2.59345645e-14"></polygon>
+                              </g>
+                              <g id="编组-7" :transform="`translate(0.0605, ${h-27})`">
+                                  <polygon id="路径-11" :fill="`url(#2-${boxId})`"   transform="translate(3.6507, 22.4861) scale(1, -1) translate(-3.6507, -22.4861)" points="0 18.8354037 0 26.1368157 7.30141204 18.8354037"></polygon>
+                                  <polygon id="装饰线段-" :fill="`url(#3-${boxId})`"   fill-rule="nonzero" points="3.65070602 3.65070602 3.65070602 11.0746415 14.2550943 22.4858359 20.9366367 22.4858359 24.4707994 26.1368157 12.6645612 26.1368157 12.122999 25.554072 0.488253244 13.034597 0 12.509216 2.49777287e-11 -2.59345645e-14"></polygon>
+                              </g>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId,
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+}
+</style>
--- a/src/packages/components/Tasks/Tasks/TaskBackground02/config.ts
+++ b/src/packages/components/Tasks/Tasks/TaskBackground02/config.ts
@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { TaskBackground02Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  boxId: 'taskbackground02',
+  colors: ['#02221B','#06463A','#00D586','#00AB4E','#007343','#89E5A1'],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TaskBackground02Config.key
+  public attr = { ...chartInitConfig, w: 515, h: 943, zIndex: 1 }
+  public chartConfig = cloneDeep(TaskBackground02Config)
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Tasks/Tasks/TaskBackground02/config.vue
+++ b/src/packages/components/Tasks/Tasks/TaskBackground02/config.vue
@ -0,0 +1,53 @@
+<template>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="ID" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.boxId"
+        :minlength="1"
+        type="text"
+        placeholder="请输入Id"
+      />
+    </SettingItemBox> 
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.colors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
--- a/src/packages/components/Tasks/Tasks/TaskBackground02/index.ts
+++ b/src/packages/components/Tasks/Tasks/TaskBackground02/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskBackground02Config: ConfigType = {
+  key: 'TaskBackground02',
+  chartKey: 'VTaskBackground02',
+  conKey: 'VCTaskBackground02',
+  title: '背景图-02',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'taskbg02.png',
+};
--- a/src/packages/components/Tasks/Tasks/TaskBackground02/index.vue
+++ b/src/packages/components/Tasks/Tasks/TaskBackground02/index.vue
@ -0,0 +1,83 @@
+<template>
+  <div  class="go-title-03">
+    <svg :width="w" :height="h">
+        <title>编组 11</title>
+        <defs>
+            <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`1-${boxId}`">
+                <stop :stop-color="colors[0]" offset="0%"></stop>
+                <stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
+            </linearGradient>
+            <linearGradient x1="87.055629%" y1="0%" x2="0%" y2="86.1698764%" :id="`2-${boxId}`">
+                <stop :stop-color="colors[2]" offset="0%"></stop>
+                <stop :stop-color="colors[3]" offset="100%"></stop>
+            </linearGradient>
+            <linearGradient x1="6.17106015%" y1="0%" x2="67.7872653%" y2="117.560409%" :id="`3-${boxId}`">
+                <stop :stop-color="colors[4]" offset="0%"></stop>
+                <stop :stop-color="colors[5]" offset="100%"></stop>
+            </linearGradient>
+        </defs>
+        <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="林业防火-智处-任务下发" transform="translate(-1495, -85)">
+                <g id="可视化" transform="translate(-0.5, -1)">
+                    <g id="模块" transform="translate(45.5, 85.9394)">
+                        <g id="标题模块--右侧1" transform="translate(1336, 0.0606)">
+                            <g id="编组-11" transform="translate(114.5, 0.9394)">
+                              <!-- w: 401, h: 943 -->
+                                <polygon 
+                                  id="面" 
+                                  :fill="`url(#1-${boxId})`"  
+                                  opacity="0.687237694" 
+                                  :points="`0.499001996 0.060630108 ${w-2} 0.060630108 ${w-2} ${h-1} ${w/2.19} ${h-1} 0.499001996 ${h-1} 0.499001996 ${h/1.4} 0.499001996 ${h/2.07}`"
+                                ></polygon>
+                                <g id="右1" 
+                                  :transform="`translate(${w/1.015}, 13.075) scale(-1, -1) translate(-${w/1.03}, -13.075)translate(${w/1.04}, -0)`">
+                                    <polygon 
+                                      id="路径-11" 
+                                      :fill="`url(#2-${boxId})`"  
+                                      transform="translate(3.6525, 22.4974) scale(1, -1) translate(-3.6525, -22.4974)"
+                                      :points="`0 18.8448966 0 26.1499885 7.30509189 18.8448966`"
+                                    ></polygon>
+                                    <polygon 
+                                      id="装饰线段-" 
+                                      :fill="`url(#3-${boxId})`"  
+                                      fill-rule="nonzero" 
+                                      :points="`3.65254594 3.65254594 3.65254594 11.0802231 14.2622788 22.4971686 20.9471886 22.4971686 24.4831325 26.1499885 12.6709441 26.1499885 12.1291089 25.566951 0.488499319 13.0411664 0 12.5155206 2.49903173e-11 -2.59476354e-14`"
+                                    ></polygon>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId,
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+}
+</style>
--- a/src/packages/components/Tasks/Tasks/TaskInput/config.ts
+++ b/src/packages/components/Tasks/Tasks/TaskInput/config.ts
@ -0,0 +1,20 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { TaskInput00Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  textColor: '#FFFFFF',
+  textSize: 14,
+  backgroundColor: '#0C2411',
+  borderColor: '#00611A',
+  dataset: '',
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TaskInput00Config.key
+  public attr = { ...chartInitConfig, w: 434, h: 33, zIndex: 1 }
+  public chartConfig = cloneDeep(TaskInput00Config)
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Tasks/Tasks/TaskInput/config.vue
+++ b/src/packages/components/Tasks/Tasks/TaskInput/config.vue
@ -0,0 +1,75 @@
+<template>
+  <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 name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize"
+          :min="12"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="样式">
+      <SettingItem name="背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.backgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.backgroundColor = option.backgroundColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <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>
+  </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>
--- a/src/packages/components/Tasks/Tasks/TaskInput/index.ts
+++ b/src/packages/components/Tasks/Tasks/TaskInput/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskInput00Config: ConfigType = {
+  key: 'TaskInput',
+  chartKey: 'VTaskInput',
+  conKey: 'VCTaskInput',
+  title: '输入框',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputbg.png',
+};
--- a/src/packages/components/Tasks/Tasks/TaskInput/index.vue
+++ b/src/packages/components/Tasks/Tasks/TaskInput/index.vue
@ -0,0 +1,55 @@
+<template>
+  <div  class="go-title-03">
+    <n-input
+        size="small"
+        v-model:value="dataset"
+        :minlength="1"
+        type="text"
+        placeholder="请输入相关内容"
+        
+      />
+  </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 {
+  textColor,
+  textSize,
+  backgroundColor,
+  borderColor,
+  dataset
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+  :deep(.n-input){
+    height: v-bind('h+"px"');
+    background: v-bind('backgroundColor');
+  }
+  :deep(.n-input__input-el) {
+    color: v-bind('textColor');
+    font-size: v-bind('textSize+"px"');
+  }
+  :deep(.n-input__state-border){
+    border-color: v-bind('borderColor');
+  }
+
+}
+</style>
--- a/src/packages/components/Tasks/Tasks/TaskRadio/config.ts
+++ b/src/packages/components/Tasks/Tasks/TaskRadio/config.ts
@ -9,7 +9,7 @@ export const option = {
  textSize: 14,
  colors: ['#004714','#74C288'],
  checkColor: '#00F535',
-  dataValue: 1,
+  dataValue: '1',
  dataset: [
    { label: '一般' ,value: '1' },
    { label: '较大' ,value: '2' },
--- a/src/packages/components/Tasks/Tasks/TaskRadio/config.vue
+++ b/src/packages/components/Tasks/Tasks/TaskRadio/config.vue
@ -11,6 +11,7 @@
        :minlength="1"
        type="text"
        placeholder="请输入"
+        
      />
      <n-input
        size="small"
@ -18,7 +19,12 @@
        :minlength="1"
        placeholder="请输入"
      />
+      <n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button>
+      
    </SettingItemBox> 
+    <SettingItem>
+      <n-button size="small" @click="optionData.dataset.push({ label: '' ,value: '' })"> + 新增</n-button>
+    </SettingItem>
  </CollapseItem>
  <CollapseItem name="样式" :expanded="true">
    <SettingItemBox
--- a/src/packages/components/Tasks/Tasks/TaskReceivPerson/config.ts
+++ b/src/packages/components/Tasks/Tasks/TaskReceivPerson/config.ts
@ -0,0 +1,70 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { TaskReceivPersonConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  navsArr: [
+    { label: 'APP接收', value: '1'},
+    { label: '短信接收人', value: '2'}
+  ],
+  navsSize: 10,
+  navsColor: ['#02633C','#055738','#099860','#0D2822'],
+  navsBackground: ['#34FFE0','#18FFBE'],
+  secBackground: ['#0A3629', '#00611A'],
+  textColor: ['#16D49D','#FFFFFF'],
+  textSize: 10,
+  InpBackgroundColor: '#0C2411',
+  InpBorderColor: '#00611A',
+  InpTextColor: '#099860',
+  InpTextSize: 10,
+  treeColor: '#CBE6CD',
+  treeSize: 10,
+  treedatas: [
+    {
+      key: 1,
+      label: '默认用户组',
+      children: [
+        {
+          key: 1-1,
+          label: '用户一组',
+          children: [
+            {
+              key: 1-1-1,
+              label: '用户1'
+            },
+            {
+              key: 1-1-2,
+              label: '用户2'
+            },
+            {
+              key: 1-1-3,
+              label: '用户3'
+            },
+            {
+              key: 1-1-4,
+              label: '用户4'
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  treedatas1: [
+    { key: 1, label: '用户1' },
+    { key: 2, label: '用户2' },
+    { key: 3, label: '用户3' },
+    { key: 4, label: '用户4' },
+    { key: 5, label: '用户5' },
+    { key: 6, label: '用户6' },
+  ],
+  treedatas2: []
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TaskReceivPersonConfig.key
+  public attr = { ...chartInitConfig, w: 515, h: 273, zIndex: 1 }
+  public chartConfig = cloneDeep(TaskReceivPersonConfig)
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Tasks/Tasks/TaskReceivPerson/config.vue
+++ b/src/packages/components/Tasks/Tasks/TaskReceivPerson/config.vue
@ -0,0 +1,223 @@
+<template>
+  <CollapseItem name="标题样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.navsColor"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.navsColor[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.navsColor[index] = option.navsColor[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="标题样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.navsBackground"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.navsBackground[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.navsBackground[index] = option.navsBackground[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="标题样式" :expanded="true">
+    <SettingItem name="文字大小">
+      <n-input-number
+        size="small"
+        v-model:value="optionData.navsSize"
+        :min="10"
+      />
+    </SettingItem>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.secBackground"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.secBackground[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.secBackground[index] = option.secBackground[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.textColor"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.textColor[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.textColor[index] = option.textColor[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">、
+    <SettingItem name="文字大小">
+      <n-input-number
+        size="small"
+        v-model:value="optionData.textSize"
+        :min="10"
+      />
+    </SettingItem>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox>
+      <SettingItem name="输入框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.InpBackgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.InpBackgroundColor = option.InpBackgroundColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox>
+      <SettingItem name="输入框边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.InpBorderColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.InpBorderColor = option.InpBorderColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox>
+      <SettingItem name="输入框文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.InpTextColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.InpTextColor = option.InpTextColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItem name="输入框文字大小">
+      <n-input-number
+        size="small"
+        v-model:value="optionData.InpTextSize"
+        :min="10"
+      />
+    </SettingItem>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox>
+      <SettingItem name="树文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.treeColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.treeColor = option.treeColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItem name="树文字大小">
+      <n-input-number
+        size="small"
+        v-model:value="optionData.treeSize"
+        :min="10"
+      />
+    </SettingItem>
+  </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>
--- a/src/packages/components/Tasks/Tasks/TaskReceivPerson/index.ts
+++ b/src/packages/components/Tasks/Tasks/TaskReceivPerson/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskReceivPersonConfig: ConfigType = {
+  key: 'TaskReceivPerson',
+  chartKey: 'VTaskReceivPerson',
+  conKey: 'VCTaskReceivPerson',
+  title: '接收人员',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'receivpersonbg.png',
+};
--- a/src/packages/components/Tasks/Tasks/TaskReceivPerson/index.vue
+++ b/src/packages/components/Tasks/Tasks/TaskReceivPerson/index.vue
@ -0,0 +1,235 @@
+<template>
+  <div  class="go-title-03">
+    <div class="flex ai-c jc-sb max-w navsbox">
+      <div class="flex navsli ai-c jc-c" v-for="(item,index) in navsArr" :class="index==navsIndex?'navsliactive':''" @click="navsClick(index)">
+        {{ item.label }}
+      </div>
+    </div>
+    <div class="flex jc-sb sectionbox">
+      <div class="sectionboxleftli secli">
+        <div class="sectitle">用户名</div>
+        <n-input
+          size="small"
+          v-model:value="taskUserName"
+          :minlength="1"
+          type="text"
+          placeholder="用户组名称"
+        >  
+        </n-input>
+        <div class="selectbox">
+          <n-tree
+            block-line
+            cascade
+            default-expand-all
+            :selectable="false"
+            :data="treedatas"
+          />
+        </div>
+      </div>
+      <div class="sectionboxrightli secli">
+        <div class="flex jc-sb max-w">
+          <div class="sectitle">待选择人员（4/9）</div>
+          <div class="sectext">包含下级</div>
+        </div>
+        <div class="selectBox">
+          <n-tree
+            block-line
+            cascade
+            checkable
+            :selectable="false"
+            :data="treedatas1"
+            :on-update:selected-keys="updateTreeHandle1"
+          />
+        </div>
+      </div>
+      <div class="sectionboxrightli secli">
+        <div class="flex jc-sb max-w">
+          <div class="sectitle">已选择人员（4/9）</div>
+          <div class="sectext tpclearbtn">清空</div>
+        </div>
+        <div class="selectBox">
+          <n-tree
+            block-line
+            cascade
+            checkable
+            :selectable="false"
+            :data="treedatas2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+const navsIndex = ref(0)
+const taskUserName = ref('')
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  textColor,
+  textSize,
+  navsArr,
+  navsColor,
+  navsBackground,
+  navsSize,
+  secBackground,
+  InpBackgroundColor,
+  InpBorderColor,
+  InpTextColor,
+  InpTextSize,
+  treedatas,
+  treeSize,
+  treeColor,
+  treedatas1,
+  treedatas2
+} = toRefs(props.chartConfig.option)
+
+const navsClick = function(index){
+  navsIndex.value = index
+}
+const updateTreeHandle1 = function(node){
+  console.log('dddnode',node)
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  height: v-bind('h');
+  .max-w{
+    width: 100%;
+  }
+  .column{
+    flex-direction: column;
+  }
+  .flex{
+    display: flex;
+  }
+  .jc-sb{
+    justify-content: space-between;
+  }
+  .jc-sa{
+    justify-content: space-around;
+  }
+  .jc-c{
+    justify-content: center;
+  }
+  .ai-c{
+    align-items: center;
+  }
+  .navsbox{
+    width: 30%;
+    height: 24px;
+    background: v-bind('navsColor[1]');
+    border-radius: 1px;
+    margin-bottom: 10px;
+    border: 1px solid v-bind('navsColor[0]');
+  }
+  .navsli{
+    width: 50%;
+    height: 100%;
+    color: v-bind('navsColor[2]');
+    font-size: v-bind('navsSize+"px"');
+    cursor: pointer;
+    position: relative;
+  }
+  .navsliactive{
+    color: v-bind('navsColor[3]');
+    background: linear-gradient( 158deg, v-bind('navsBackground[0]') 0%, v-bind('navsBackground[1]') 100%);
+    border-radius: 2px 0px 0px 2px;
+  }
+  .sectionbox{
+    height: calc(100% - 51px);
+  }
+  .secli{
+    background: v-bind('secBackground[0]');
+    border: 1px solid v-bind('secBackground[1]');
+    height: 100%;
+    padding-top: 10px;
+    font-size: v-bind('textSize+"px"');
+    .sectitle{
+      margin: 0 10px 10px;
+      color: v-bind('textColor[0]');
+    }
+    .sectext{
+      color: v-bind('textColor[1]');
+      padding-right: 10px;
+    }
+    .tpclearbtn{
+      height: 16px;
+      line-height: 14px;
+      border-radius: 3px;
+      padding: 0 5px;
+      border: 1px solid v-bind('secBackground[1]');
+      cursor: pointer;
+    }
+    .selectbox{
+      height: calc(100% - 75px);
+      overflow: auto;
+    }
+  }
+  .sectionboxleftli{
+    width: 30%;
+  }
+  .sectionboxrightli{
+    width: 34%;
+    .selectBox{
+      height: calc(100% - 30px);
+      overflow: auto;
+    }
+  }
+
+  :deep(.n-input){
+    margin-bottom: 15px;
+    width: 90%;
+    margin-left: 5%;
+    background: v-bind('InpBackgroundColor');
+  }
+  :deep(.n-input__input-el) {
+    color: v-bind('InpTextColor');
+    font-size: v-bind('InpTextSize+"px"');
+  }
+  :deep(.n-input__state-border){
+    border-color: v-bind('InpBorderColor');
+  }
+  :deep(.n-tree-node-content){
+    color: v-bind('treeColor');
+    font-size: v-bind('treeSize+"px"');
+  }
+  :deep(.n-tree-node:hover){
+    background: v-bind('secBackground[1]') !important;
+  }
+  :deep(.n-tree-node--checkable:has(.n-checkbox--checked)){
+    background: linear-gradient( 253deg, #15D5A0 0%, rgba(49,189,73,0.9) 100%);
+  }
+
+
+
+  /* 整个滚动条的样式 */
+  ::-webkit-scrollbar {
+    width: 5px; /* 滚动条宽度 */
+  }
+  /* 滚动轨道的样式 */
+  ::-webkit-scrollbar-track {
+    background: #00611A; /* 轨道背景颜色 */
+  }
+  /* 滚动滑块的样式 */
+  ::-webkit-scrollbar-thumb {
+    background: #0EB687; /* 滑块背景颜色 */
+  }
+  /* 当鼠标悬停在滑块上时改变颜色 */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
+  }
+
+}
+</style>
--- a/src/packages/components/Tasks/Tasks/TaskTextArea/config.ts
+++ b/src/packages/components/Tasks/Tasks/TaskTextArea/config.ts
@ -0,0 +1,20 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { TaskTextAreaConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  textColor: '#FFFFFF',
+  textSize: 14,
+  backgroundColor: '#0C2411',
+  borderColor: '#00611A',
+  dataset: '',
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TaskTextAreaConfig.key
+  public attr = { ...chartInitConfig, w: 437, h: 93, zIndex: 1 }
+  public chartConfig = cloneDeep(TaskTextAreaConfig)
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Tasks/Tasks/TaskTextArea/config.vue
+++ b/src/packages/components/Tasks/Tasks/TaskTextArea/config.vue
@ -0,0 +1,75 @@
+<template>
+  <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 name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize"
+          :min="12"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="样式">
+      <SettingItem name="背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.backgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.backgroundColor = option.backgroundColor"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <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>
+  </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>
--- a/src/packages/components/Tasks/Tasks/TaskTextArea/index.ts
+++ b/src/packages/components/Tasks/Tasks/TaskTextArea/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskTextAreaConfig: ConfigType = {
+  key: 'TaskTextArea',
+  chartKey: 'VTaskTextArea',
+  conKey: 'VCTaskTextArea',
+  title: '文本显示背景',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'textareabg.png',
+};
--- a/src/packages/components/Tasks/Tasks/TaskTextArea/index.vue
+++ b/src/packages/components/Tasks/Tasks/TaskTextArea/index.vue
@ -0,0 +1,53 @@
+<template>
+  <div  class="go-title-03">
+    <n-input
+        size="small"
+        v-model:value="dataset"
+        :minlength="1"
+        type="textarea"
+        placeholder=""
+        
+      />
+  </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 {
+  textColor,
+  textSize,
+  backgroundColor,
+  borderColor,
+  dataset
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+  :deep(.n-input){
+    height: v-bind('h+"px"');
+    background: v-bind('backgroundColor');
+  }
+  :deep(.n-input__textarea-el) {
+    color: v-bind('textColor');
+    font-size: v-bind('textSize+"px"');
+  }
+  :deep(.n-input__state-border){
+    border-color: v-bind('borderColor');
+  }
+}
+</style>
--- a/src/packages/components/Tasks/Tasks/TaskTitles/config.ts
+++ b/src/packages/components/Tasks/Tasks/TaskTitles/config.ts
@ -0,0 +1,26 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { TaskTitlesConfig } from './index'
+
+export const option = {
+  dataset: '组件标题栏',
+  dataStyle: {
+    x: 10,
+    y: 23,
+    fontColor: '#FFFFFF',
+    fontSize: 20,
+    // 标题矩形左侧颜色
+    leftColor: '#00611A',
+    startColor: '#1F6B55',
+    endColor: '#0A392A',
+  },
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TaskTitlesConfig.key
+  public attr = { ...chartInitConfig, w: 320, h: 31, zIndex: -1 }
+  public chartConfig = cloneDeep(TaskTitlesConfig)
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Tasks/Tasks/TaskTitles/config.vue
+++ b/src/packages/components/Tasks/Tasks/TaskTitles/config.vue
@ -0,0 +1,98 @@
+<template>
+  <CollapseItem name="标题设置" :expanded="true">
+    <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
+    <SettingItemBox :alone="true" name="标题名称">
+      <SettingItem :alone="true">
+        <n-input v-model:value="optionData.dataset" type="text" size="small" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="标题设置">
+      <SettingItem name="标题横坐标位置">
+        <n-input-number
+          v-model:value="optionData.dataStyle.x"
+          :min="0"
+          size="small"
+          placeholder="宽度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="标题纵坐标位置">
+        <n-input-number
+          v-model:value="optionData.dataStyle.y"
+          :min="0"
+          size="small"
+          placeholder="高度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="标题字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.fontColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="标题字体大小">
+        <n-input-number
+          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 = 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 = 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 = dataStyleClone.endColor">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+  import { PropType, watch, ref } from 'vue';
+  import { option } from './config';
+  import { cloneDeep } from 'lodash-es';
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
+
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<typeof option>,
+      required: true,
+    },
+  });
+
+  const dataStyleClone = {
+    leftColor: '#00611A',
+    startColor: '#1F6B55',
+    endColor: '#0A392A',
+  };
+</script>
--- a/src/packages/components/Tasks/Tasks/TaskTitles/index.ts
+++ b/src/packages/components/Tasks/Tasks/TaskTitles/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const TaskTitlesConfig: ConfigType = {
+  key: 'TaskTitles',
+  chartKey: 'VTaskTitles',
+  conKey: 'VCTaskTitles',
+  title: '组件标题栏',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'ModalHead.png'
+}
--- a/src/packages/components/Tasks/Tasks/TaskTitles/index.vue
+++ b/src/packages/components/Tasks/Tasks/TaskTitles/index.vue
@ -0,0 +1,34 @@
+<template>
+  <div class="title">
+    <Title :dataset="dataset" :w="w" :h="h" :dataStyle="dataStyle" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { icon } from '@/plugins';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { useChartDataFetch } from '@/hooks';
+  import Title from './svg/title.vue';
+
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType>,
+      required: true,
+    },
+  });
+
+  const { w, h } = toRefs(props.chartConfig.attr);
+  const {
+    dataset,
+    dataStyle,
+  } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+  .title {
+    width: v-bind('`${w}px`');
+    height: v-bind('`${h}px`');
+  }
+</style>
--- a/src/packages/components/Tasks/Tasks/TaskTitles/svg/title.vue
+++ b/src/packages/components/Tasks/Tasks/TaskTitles/svg/title.vue
@ -0,0 +1,67 @@
+<template>
+  <div>
+    <svg
+      :width="props.w"
+      :height="props.h"
+      viewBox="0 0 320 31"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <linearGradient
+          x1="100%"
+          y1="50%"
+          x2="2.30946189%"
+          y2="50%"
+          id="linearGradient-ModalHead-1"
+        >
+          <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">
+        <g id="林业防火-智感-重复报警弹窗-切图版" transform="translate(-240, -212)">
+          <g id="弹窗----" transform="translate(175.2674, 165.0542)">
+            <g id="文字" transform="translate(64.7326, 10.2458)">
+              <g id="预警信息-" transform="translate(0, 36.7)">
+                <g id="编组-54" transform="translate(0, 0.3)">
+                  <rect
+                    id="矩形"
+                    fill="url(#linearGradient-ModalHead-1)"
+                    transform="translate(160.5, 15) scale(1, -1) translate(-160.5, -15)"
+                    x="0"
+                    y="0"
+                    width="321"
+                    height="30"
+                  ></rect>
+                  <rect
+                    id="矩形"
+                    :fill="props.dataStyle.leftColor"
+                    transform="translate(1.5, 15) scale(1, -1) translate(-1.5, -15)"
+                    x="0"
+                    y="0"
+                    width="3"
+                    height="30"
+                  ></rect>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+      <text
+        :x="props.dataStyle.x"
+        :y="props.dataStyle.y"
+        :font-size="props.dataStyle.fontSize"
+        :fill="props.dataStyle.fontColor"
+      >
+        {{ props.dataset }}
+      </text>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps(['dataset', 'w', 'h', 'dataStyle']);
+</script>
--- a/src/packages/components/Tasks/Tasks/index.ts
+++ b/src/packages/components/Tasks/Tasks/index.ts
@ -1,7 +1,20 @@
 import { TaskBannerConfig } from './TaskBanner/index';
 import { TaskRadioConfig } from './TaskRadio/index';
+import { TaskTitlesConfig } from './TaskTitles/index';
+import { TaskInput00Config } from './TaskInput/index';
+import { TaskTextAreaConfig } from './TaskTextArea/index';
+import { TaskBackground01Config } from './TaskBackground01/index';
+import { TaskBackground02Config } from './TaskBackground02/index';
+import { TaskReceivPersonConfig } from './TaskReceivPerson/index';

 export default [
+    TaskBackground01Config,
+    TaskBackground02Config,
    TaskBannerConfig,
-    TaskRadioConfig
+    TaskRadioConfig,
+    TaskTitlesConfig,
+    TaskInput00Config,
+    TaskTextAreaConfig,
+    
+    TaskReceivPersonConfig
 ];
Author	SHA1	Message	Date
userName	5dbcd6b97d	Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo	2025-03-04 17:03:58 +08:00
userName	a0a1a2edf5	任务下发组件	2025-03-04 17:03:51 +08:00