任务组件

src/packages/components/Tasks/Tasks/TaskAddRoute/config.ts

@@ -0,0 +1,18 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { TaskAddRouteConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  textSize: 14,
+  colors: ['#0C2411','#00611A','#FFFFFF'],
+  text: '添加途经点'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TaskAddRouteConfig.key
+  public attr = { ...chartInitConfig, w: 112, h: 30, zIndex: 1 }
+  public chartConfig = cloneDeep(TaskAddRouteConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Tasks/Tasks/TaskAddRoute/config.vue

@@ -0,0 +1,64 @@
+<template>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="样式">
+      <SettingItem name="文字">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.text"
+          :min="10"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="样式">
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize"
+          :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/Tasks/Tasks/TaskAddRoute/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskAddRouteConfig: ConfigType = {
+  key: 'TaskAddRoute',
+  chartKey: 'VTaskAddRoute',
+  conKey: 'VCTaskAddRoute',
+  title: '图标-01',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'addroute.png',
+};

src/packages/components/Tasks/Tasks/TaskAddRoute/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div  class="go-title-03">
+    <span class="add">+</span>
+    <span>{{text}}</span>
+  </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 {
+  text,
+  colors,
+  textSize,
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+  width: v-bind('w');
+  height: v-bind('h');
+  background-color: v-bind('colors[0]');
+  border: 1px solid v-bind('colors[1]');
+  color: v-bind('colors[2]');
+  font-size: v-bind('textSize+"px"');
+  cursor: pointer;
+  .add{
+    width: v-bind('textSize+"px"');
+    height: v-bind('textSize+"px"');
+    border: 1px solid v-bind('colors[2]');
+    margin-right:10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

src/packages/components/Tasks/Tasks/TaskBack/config.ts

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

src/packages/components/Tasks/Tasks/TaskBack/config.vue

@@ -0,0 +1,20 @@
+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Tasks/Tasks/TaskBack/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskBackConfig: ConfigType = {
+  key: 'TaskBack',
+  chartKey: 'VTaskBack',
+  conKey: 'VCTaskBack',
+  title: '按钮-返回',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'taskback.png',
+};

src/packages/components/Tasks/Tasks/TaskBack/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskback.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId,
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+}
+</style>

src/packages/components/Tasks/Tasks/TaskBackground03/config.ts

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { TaskBackground03Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  boxId: 'taskbackground03',
+  colors: ['#344534','#647B64','#25673D','#3E674A','#8BE8A3','#435A4E','#161A1A','#4A5C4A','#7CA791','#FFE4AC','#4D815D'],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TaskBackground03Config.key
+  public attr = { ...chartInitConfig, w: 417, h: 891, zIndex: 1 }
+  public chartConfig = cloneDeep(TaskBackground03Config)
+  public option = cloneDeep(option)
+}

src/packages/components/Tasks/Tasks/TaskBackground03/config.vue

@@ -0,0 +1,53 @@
+<template>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="ID" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.boxId"
+        :minlength="1"
+        type="text"
+        placeholder="请输入Id"
+      />
+    </SettingItemBox> 
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.colors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Tasks/Tasks/TaskBackground03/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskBackground03Config: ConfigType = {
+  key: 'TaskBackground03',
+  chartKey: 'VTaskBackground03',
+  conKey: 'VCTaskBackground03',
+  title: '背景图-03',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'taskbg03.png',
+};

src/packages/components/Tasks/Tasks/TaskBackground03/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div  class="go-title-03">
+    <svg :width="w" :height="h">
+      <title>编组 9</title>
+      <defs>
+        
+          <path :d="`M${w/9.19},${h/1.04} L${w/3.56},${h/1.04} L${w/3.56},${h/1.04} L${w/3.31},${h/1.05} L${w/1.55},${h/1.05} L${w/1.5},${h/1.042} L${w/1.1},${h/1.042} C${w/1.07},${h/1.042} ${w/1.04},${h/1.05} ${w/1.04},${h/1.07} L${w/1.04},4.46630114 L${w/1.04},4.46630114 L50.4892271,4.46630114 C38.4743887,4.46630114 28.7344378,14.2062521 28.7344378,26.2210905 L28.7344378,${h/1.06} C28.7344378,${h/1.05} 36.1826354,${h/1.04} ${w/9.19},${h/1.04} Z`" id="taskpath-1"></path>
+          <filter x="-8.9%" y="-2.1%" width="117.8%" height="108.4%" filterUnits="objectBoundingBox" id="taskfilter-2">
+              <feMorphology radius="0.639846743" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+              <feOffset dx="0" dy="20" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+              <feGaussianBlur stdDeviation="7.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+              <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+              <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+          </filter>
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`3-${boxId}`">
+              <stop :stop-color="colors[0]" offset="0%"></stop>
+              <stop :stop-color="colors[1]" offset="100%"></stop>
+          </linearGradient>
+          <polygon id="taskpath-4" :points="`-1.00972311e-14 -4.20781315e-13 ${w/29.64} -4.20781315e-13 ${w/24.76} 2.40668967 2.76500463 2.40668967`"></polygon>
+          <filter x="-107.9%" y="-685.6%" width="315.9%" height="1471.2%" filterUnits="objectBoundingBox" id="taskfilter-5">
+              <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+              <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+              <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+              <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.462494493   0 0 0 0 0  0 0 0 0.7 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+          </filter>
+          <polygon id="taskpath-6" :points="`20.0745787 6.12769321e-14 ${w/12.21} 6.12769321e-14 ${w/11.3} 2.40668967 22.8395833 2.40668967`"></polygon>
+          <filter x="-107.9%" y="-685.6%" width="315.9%" height="1471.2%" filterUnits="objectBoundingBox" id="taskfilter-7">
+              <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+              <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+              <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+              <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.462494493   0 0 0 0 0  0 0 0 0.7 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+          </filter>
+          <linearGradient x1="50.3209681%" y1="99.6790319%" x2="50.3209681%" y2="0.320968094%" :id="`8-${boxId}`">
+              <stop :stop-color="colors[2]" stop-opacity="0.8" offset="0.00819493007%"></stop>
+              <stop :stop-color="colors[3]" offset="38.6691434%"></stop>
+              <stop :stop-color="colors[4]" offset="100%"></stop>
+          </linearGradient>
+          <linearGradient x1="50.3209681%" y1="99.6790319%" x2="50.3209681%" y2="0.320968094%" :id="`9-${boxId}`">
+              <stop :stop-color="colors[2]" stop-opacity="0.8" offset="0.00819493007%"></stop>
+              <stop :stop-color="colors[3]" offset="38.6691434%"></stop>
+              <stop :stop-color="colors[4]" offset="100%"></stop>
+          </linearGradient>
+      </defs>
+      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g id="林业防火-智处-任务下发-规划方案" transform="translate(-1466, -147)">
+              <g id="路径规划弹窗---" transform="translate(453.7715, 147)">
+                  <g id="编组-9" transform="translate(1012.4959, 0.0542)">
+                      <g id="路径-22">
+                          <use fill="black" fill-opacity="1" filter="url(#taskfilter-2)" xlink:href="#taskpath-1"></use>
+                          <use :stroke="colors[5]" stroke-width="1.27969349" fill-opacity="0.85" :fill="colors[6]" fill-rule="evenodd" xlink:href="#taskpath-1"></use>
+                      </g>
+                      <!-- <g id="编组-5" transform="translate(297.4837, 17.9031) scale(-1, 1) rotate(-180) translate(-297.4837, -17.9031)translate(198.9905, 15.9835)">
+                          <line x1="-5.06780004e-13" y1="1.91954023" x2="196.976869" y2="1.91954023" id="路径-6" :stroke="`url(#3-${boxId})`"   stroke-width="1.27969349" opacity="0.399999976"></line>
+                          <path d="M142.951484,3.83908046 C144.011153,3.83908046 144.870183,2.97967303 144.870183,1.91954023 C144.870183,0.859407434 144.011153,0 142.951484,0 C141.891816,0 141.032785,0.859407434 141.032785,1.91954023 C141.032785,2.97967303 141.891816,3.83908046 142.951484,3.83908046 Z" id="椭圆形" :fill="colors[7]"></path>
+                          <ellipse id="椭圆形" :fill="colors[7]" cx="70.0409125" cy="1.91954023" rx="1.91869926" ry="1.91954023"></ellipse>
+                      </g> -->
+                      <!-- w: 417, h: 891 -->
+                      <path 
+                        :d="`M${w/7.89},${h/1.03} L${w/3.34},${h/1.03} L${w/3.34},${h/1.03} L${w/3.15},${h/1.04} L${w/1.51},${h/1.04} L${w/1.47},${h/1.03} L${w/1.09},${h/1.03} C${w/1.06},${h/1.03} ${w/1.03},${h/1.05} ${w/1.03},${h/1.07} L${w/1.03},10.8647686 L${w/1.03},10.8647686 L56.6416991,10.8647686 C44.6268607,10.8647686 34.8869098,20.6047195 34.8869098,32.6195579 C34.8869098,32.6315283 34.8869197,32.6434986 34.8869394,32.6554689 L36.2271782,${h/1.05} C36.242327,${h/1.04} 43.6860756,${h/1.03} ${w/7.89},${h/1.03} Z`" 
+                        id="路径-22" :stroke="colors[8]" stroke-width="1.27969349"></path>
+                      <g id="编组" :transform="`translate(${w/2.78}, ${h/1.04}) scale(1, -1) translate(-${w/2.78}, -${h/1.04})translate(${w/3.17}, ${h/1.038})`">
+                          <g id="矩形">
+                              <use fill="black" fill-opacity="1" filter="url(#taskfilter-5)" xlink:href="#taskpath-4"></use>
+                              <use :fill="colors[9]" fill-rule="evenodd" xlink:href="#taskpath-4"></use>
+                          </g>
+                          <g id="矩形" opacity="0.399999976">
+                              <use fill="black" fill-opacity="1" filter="url(#taskfilter-7)" xlink:href="#taskpath-6"></use>
+                              <use :fill="colors[9]" fill-rule="evenodd" xlink:href="#taskpath-6"></use>
+                          </g>
+                      </g>
+                      <g id="编组" :transform="`translate(${w/3.63}, 1.4324)`" :fill="colors[10]">
+                          <polygon 
+                            id="矩形" 
+                            :points="`-1.54661681e-14 -6.4452071e-13 ${w/19.35} -6.4452071e-13 ${w/16.17} 3.68638359 4.2352231 3.68638359`"
+                          ></polygon>
+                      </g>
+                      <g id="编组备份" opacity="0.59407988" :transform="`translate(${w/2.82}, 1.4324)`" :fill="colors[10]">
+                          <polygon 
+                            id="矩形" 
+                            :points="`-1.54661681e-14 -6.4452071e-13 ${w/19.35} -6.4452071e-13 ${w/16.17} 3.68638359 4.2352231 3.68638359`"
+                          ></polygon>
+                      </g>
+                      
+                      <polygon 
+                        id="路径-21" 
+                        :fill="`url(#8-${boxId})`"   
+                        :points="`25 ${h/7.85} 25 26.2109979 51.1995145 8.19751628e-13 ${w/4.1} 8.19751628e-13 ${w/3.86} 4.73651289 54.0862279 4.73651289 29.7344378 29.0989765 29.7344378 ${h/7.42}`"
+                      ></polygon>
+                      <polygon 
+                        id="路径-21" 
+                        :fill="`url(#9-${boxId})`"   
+                        :transform="`translate(${w/1.13}, ${h/1.16}) scale(-1, -1) translate(-${w/1.13}, -${h/1.16})`" 
+                        :points="`${w/1.26} ${h/1.04} ${w/1.26} ${h/1.29} ${w/1.18} ${h/1.33} ${w/1.03} ${h/1.33} ${w/1.02} ${h/1.32} ${w/1.16} ${h/1.32} ${w/1.25} ${h/1.28} ${w/1.25} ${h/1.03}`"
+                      ></polygon>
+                  </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>

src/packages/components/Tasks/Tasks/TaskClose/config.ts

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

src/packages/components/Tasks/Tasks/TaskClose/config.vue

@@ -0,0 +1,20 @@
+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Tasks/Tasks/TaskClose/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskCloseConfig: ConfigType = {
+  key: 'TaskClose',
+  chartKey: 'VTaskClose',
+  conKey: 'VCTaskClose',
+  title: '按钮-关闭',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'taskclose.png',
+};

src/packages/components/Tasks/Tasks/TaskClose/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskclose.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId,
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+}
+</style>

src/packages/components/Tasks/Tasks/TaskIcons01/config.ts

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

src/packages/components/Tasks/Tasks/TaskIcons01/config.vue

@@ -0,0 +1,20 @@
+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Tasks/Tasks/TaskIcons01/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskIcons01Config: ConfigType = {
+  key: 'TaskIcons01',
+  chartKey: 'VTaskIcons01',
+  conKey: 'VCTaskIcons01',
+  title: '图标-01',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'taskicon01.png',
+};

src/packages/components/Tasks/Tasks/TaskIcons01/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskicon01.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId,
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+}
+</style>

src/packages/components/Tasks/Tasks/TaskIcons02/config.ts

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

src/packages/components/Tasks/Tasks/TaskIcons02/config.vue

@@ -0,0 +1,20 @@
+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Tasks/Tasks/TaskIcons02/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskIcons02Config: ConfigType = {
+  key: 'TaskIcons02',
+  chartKey: 'VTaskIcons02',
+  conKey: 'VCTaskIcons02',
+  title: '图标-02',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'taskicon02.png',
+};

src/packages/components/Tasks/Tasks/TaskIcons02/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskicon02.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId,
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+}
+</style>

src/packages/components/Tasks/Tasks/TaskIcons03/config.ts

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

src/packages/components/Tasks/Tasks/TaskIcons03/config.vue

@@ -0,0 +1,20 @@
+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Tasks/Tasks/TaskIcons03/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskIcons03Config: ConfigType = {
+  key: 'TaskIcons03',
+  chartKey: 'VTaskIcons03',
+  conKey: 'VCTaskIcons03',
+  title: '图标-03',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'taskicon03.png',
+};

src/packages/components/Tasks/Tasks/TaskIcons03/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskicon03.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId,
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+}
+</style>

src/packages/components/Tasks/Tasks/TaskPlan/config.ts

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

src/packages/components/Tasks/Tasks/TaskPlan/config.vue

@@ -0,0 +1,20 @@
+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Tasks/Tasks/TaskPlan/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskPlanConfig: ConfigType = {
+  key: 'TaskPlan',
+  chartKey: 'VTaskPlan',
+  conKey: 'VCTaskPlan',
+  title: '规划方案',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'taskplan.png',
+};

src/packages/components/Tasks/Tasks/TaskPlan/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div  class="go-title-03">
+    <img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskplan.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  colors,
+  boxId,
+} = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('title-03') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+}
+</style>

src/packages/components/Tasks/Tasks/TaskRoutePlan/config.ts

@@ -0,0 +1,26 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { TaskRoutePlanConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#FFFFFF','#CBE6CD','#58FF95'],
+  textSize1: 12,
+  textSize2: 14,
+  textSize3: 20,
+  dataset:[
+    { time: '27' },
+    { time: '37' },
+    { time: '47' }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TaskRoutePlanConfig.key
+  public attr = { ...chartInitConfig, w: 354, h: 550, zIndex: 1 }
+  public chartConfig = cloneDeep(TaskRoutePlanConfig)
+  public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
+}

src/packages/components/Tasks/Tasks/TaskRoutePlan/config.vue

@@ -0,0 +1,75 @@
+<template>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="样式">
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize1"
+          :min="10"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="样式">
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize2"
+          :min="10"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="样式">
+      <SettingItem name="文字大小">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.textSize3"
+          :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/Tasks/Tasks/TaskRoutePlan/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const TaskRoutePlanConfig: ConfigType = {
+  key: 'TaskRoutePlan',
+  chartKey: 'VTaskRoutePlan',
+  conKey: 'VCTaskRoutePlan',
+  title: '规划方案',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.TASKS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'routeplan.png',
+};

src/packages/components/Tasks/Tasks/TaskRoutePlan/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div  class="go-title-03">
+    <div class="container flex ai-c" v-for="(item, index) in dataset">
+      <img class="img" src="/src/assets/images/chart/tasks/routebg.png" />
+      <div class="flex ai-c jc-c">
+        <img class="iconsbox" v-if="index%2==0" src="/src/assets/images/chart/tasks/taskicon04.png" />
+        <img class="iconsbox" v-if="index%2!=0" src="/src/assets/images/chart/tasks/taskicon05.png" />
+        <div class="plantitle">
+          <img class="titleimg" v-if="index%2==0" src="/src/assets/images/chart/tasks/taskbtn01.png" />
+          <img class="titleimg" v-if="index%2!=0" src="/src/assets/images/chart/tasks/taskbtn02.png" />
+          <div class="text1 max-h flex ai-c jc-c">方案{{ index+1 }}</div>
+        </div>
+      </div>
+      <div class="flex ai-c ml-1 pos-r">
+        <div class="text2">耗时 <span class="text3">{{ item.time }}</span> 分钟</div>
+      </div>
+    </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 {
+  dataset,
+  colors,
+  textSize1,
+  textSize2,
+  textSize3,
+} = 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;
+  width: v-bind('w');
+  height: v-bind('h');
+  overflow: auto;
+  .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;
+  }
+  .pos-r{
+    position: relative;
+  }
+  .max-w{
+    width: 100%;
+  }
+  .max-h{
+    height: 100%;
+  }
+  .ml-1{
+    margin-left: 11px;
+  }
+  .container{
+    width: 100%;
+    height: 55px;
+    margin-bottom: 10px;
+    position: relative;
+    .img{
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+    .iconsbox{
+      width: 15px;
+      height: 15px;
+      margin-left: 15px;
+      position: relative;
+    }
+    .plantitle{
+      position: relative;
+      width: 71px;
+      height: 23px;
+      .titleimg{
+        position: absolute;
+        height: 100%;
+      }
+      .text1{
+        width: 80%;
+        color: v-bind('colors[0]');
+        font-size: v-bind('textSize1+"px"');
+      }
+    }
+    .text2{
+      color: v-bind('colors[1]');
+      font-size: v-bind('textSize2+"px"');
+    }
+    .text3{
+      color: v-bind('colors[2]');
+      font-size: v-bind('textSize3+"px"');
+      margin: 0 12px;
+    }
+  }
+
+}
+/* 整个滚动条的样式 */
+::-webkit-scrollbar {
+  width: 5px; /* 滚动条宽度 */
+}
+/* 滚动轨道的样式 */
+::-webkit-scrollbar-track {
+  background: #00611A; /* 轨道背景颜色 */
+}
+/* 滚动滑块的样式 */
+::-webkit-scrollbar-thumb {
+  background: #0EB687; /* 滑块背景颜色 */
+}
+/* 当鼠标悬停在滑块上时改变颜色 */
+::-webkit-scrollbar-thumb:hover {
+  background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
+}
+
+</style>

src/packages/components/Tasks/Tasks/TaskTextArea/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 { TaskTextAreaConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -17,4 +17,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 437, h: 93, zIndex: 1 }
   public chartConfig = cloneDeep(TaskTextAreaConfig)
   public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
 }

src/packages/components/Tasks/Tasks/TaskTextArea/index.vue

@@ -14,6 +14,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: {
@@ -30,6 +32,11 @@ const {
   borderColor,
   dataset
 } = toRefs(props.chartConfig.option)
+
+// 数据callback处理（预览时触发）
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.dataset = resData;
+});
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Tasks/Tasks/index.ts

@@ -5,16 +5,34 @@ import { TaskInput00Config } from './TaskInput/index';
 import { TaskTextAreaConfig } from './TaskTextArea/index';
 import { TaskBackground01Config } from './TaskBackground01/index';
 import { TaskBackground02Config } from './TaskBackground02/index';
+import { TaskBackground03Config } from './TaskBackground03/index';
 import { TaskReceivPersonConfig } from './TaskReceivPerson/index';
+import { TaskBackConfig } from './TaskBack/index';
+import { TaskCloseConfig } from './TaskClose/index';
+import { TaskPlanConfig } from './TaskPlan/index';
+import { TaskIcons01Config } from './TaskIcons01/index';
+import { TaskIcons02Config } from './TaskIcons02/index';
+import { TaskIcons03Config } from './TaskIcons03/index';
+import { TaskAddRouteConfig } from './TaskAddRoute/index';
+import { TaskRoutePlanConfig } from './TaskRoutePlan/index';
+
 
 export default [
     TaskBackground01Config,
     TaskBackground02Config,
+    TaskBackground03Config,
     TaskBannerConfig,
     TaskRadioConfig,
     TaskTitlesConfig,
     TaskInput00Config,
     TaskTextAreaConfig,
-    
+    TaskReceivPersonConfig,
-    TaskReceivPersonConfig
+    TaskBackConfig,
+    TaskCloseConfig,
+    TaskPlanConfig,
+    TaskIcons01Config,
+    TaskIcons02Config,
+    TaskIcons03Config,
+    TaskAddRouteConfig,
+    TaskRoutePlanConfig
 ];