diff --git a/src/assets/images/chart/decorates/Pipeline_H.png b/src/assets/images/chart/decorates/Pipeline_H.png
new file mode 100644
index 00000000..f28bac9a
Binary files /dev/null and b/src/assets/images/chart/decorates/Pipeline_H.png differ
diff --git a/src/assets/images/chart/decorates/Pipeline_V.png b/src/assets/images/chart/decorates/Pipeline_V.png
new file mode 100644
index 00000000..cffc5d8d
Binary files /dev/null and b/src/assets/images/chart/decorates/Pipeline_V.png differ
diff --git a/src/packages/components/Decorates/Mores/PipelineH/config.ts b/src/packages/components/Decorates/Mores/PipelineH/config.ts
new file mode 100644
index 00000000..6df11312
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineH/config.ts
@@ -0,0 +1,19 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { PipelineHConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+ color_type: 1,
+ o_color: '#0a7ae2',
+ i_color: '#119bfa',
+ line_class: 'svg_ani_flow'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+ public key = PipelineHConfig.key
+ public attr = { ...chartInitConfig, w: 500, h: 15, zIndex: -1 }
+ public chartConfig = cloneDeep(PipelineHConfig)
+ public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Decorates/Mores/PipelineH/config.vue b/src/packages/components/Decorates/Mores/PipelineH/config.vue
new file mode 100644
index 00000000..bc039e8e
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineH/config.vue
@@ -0,0 +1,77 @@
+<template>
+ <CollapseItem name="管道" :expanded="true">
+ <SettingItemBox name="默认颜色">
+ <SettingItem>
+ <n-select v-model:value="optionData.color_type" :options="colorOptions" @update:value="handleColorChange" />
+ </SettingItem>
+ </SettingItemBox>
+ <SettingItemBox name="管道颜色">
+ <SettingItem>
+ <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.o_color"></n-color-picker>
+ </SettingItem>
+ </SettingItemBox>
+ <SettingItemBox name="水流颜色">
+ <SettingItem>
+ <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.i_color"></n-color-picker>
+ </SettingItem>
+ </SettingItemBox>
+ <SettingItemBox name="流向">
+ <SettingItem>
+ <n-select v-model:value="optionData.line_class" :options="options" />
+ </SettingItem>
+ </SettingItemBox>
+ </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } 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
+ }
+})
+
+const options = ref([
+ {
+ value: 'svg_ani_flow',
+ label: '正向'
+ },
+ {
+ value: 'svg_ani_flow_back',
+ label: '反向'
+ },
+ {
+ value: 'svg_ani_flow_stop',
+ label: '停止'
+ }
+])
+
+const colorOptions = ref([
+ {
+ value: 1,
+ label: '蓝'
+ },
+ {
+ value: 2,
+ label: '黄'
+ }
+])
+
+// 默认颜色
+const handleColorChange = (e: number) => {
+ switch (e) {
+ case 1:
+ props.optionData.o_color = '#0a7ae2'
+ props.optionData.i_color = '#119bfa'
+ break
+ case 2:
+ props.optionData.o_color = '#ff9d00'
+ props.optionData.i_color = '#f7ea37'
+ break
+ }
+}
+</script>
diff --git a/src/packages/components/Decorates/Mores/PipelineH/index.ts b/src/packages/components/Decorates/Mores/PipelineH/index.ts
new file mode 100644
index 00000000..5f612871
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineH/index.ts
@@ -0,0 +1,13 @@
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const PipelineHConfig: ConfigType = {
+ key: 'PipelineH',
+ chartKey: 'VPipelineH',
+ conKey: 'VCPipelineH',
+ title: '管道-横向',
+ category: ChatCategoryEnum.MORE,
+ categoryName: ChatCategoryEnumName.MORE,
+ package: PackagesCategoryEnum.DECORATES,
+ image: 'Pipeline_H.png'
+}
diff --git a/src/packages/components/Decorates/Mores/PipelineH/index.vue b/src/packages/components/Decorates/Mores/PipelineH/index.vue
new file mode 100644
index 00000000..15da8449
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineH/index.vue
@@ -0,0 +1,141 @@
+<template>
+ <div class="go-decorates-line">
+ <svg :width="w" :height="h">
+ <line :x1="0" :y1="h / 2" :x2="w" :y2="h / 2" :stroke="o_color" :stroke-width="h"></line>
+ <line :x1="0" :y1="h / 2" :x2="w" :y2="h / 2" :stroke="i_color" :stroke-width="h / 2" :class="line_class"></line>
+ </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 { o_color, i_color, line_class } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+.go-decorates-line {
+ font-size: 0;
+}
+
+/* 正向流动效果 */
+.svg_ani_flow {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1000;
+ animation: ani_flow 10s linear infinite;
+ animation-fill-mode: forwards;
+ -webkit-animation: ani_flow 10s linear infinite;
+ -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow {
+ from {
+ stroke-dasharray: 10, 5;
+ }
+
+ to {
+ stroke-dasharray: 13, 5;
+ }
+}
+@-webkit-keyframes ani_flow {
+ from {
+ stroke-dasharray: 10, 5;
+ }
+
+ to {
+ stroke-dasharray: 13, 5;
+ }
+}
+
+/* 停止流动效果 */
+.svg_ani_flow_stop {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1000;
+ animation: ani_flow_stop 10s linear infinite;
+ animation-fill-mode: forwards;
+ -webkit-animation: ani_flow_stop 10s linear infinite;
+ -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_stop {
+ from {
+ stroke-dasharray: 10, 5;
+ }
+
+ to {
+ stroke-dasharray: 10, 5;
+ }
+}
+@-webkit-keyframes ani_flow_stop {
+ from {
+ stroke-dasharray: 10, 5;
+ }
+
+ to {
+ stroke-dasharray: 10, 5;
+ }
+}
+/* 反向流动效果 */
+.svg_ani_flow_back {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1000;
+ animation: ani_flow_back 10s linear infinite;
+ animation-fill-mode: forwards;
+ -webkit-animation: ani_flow_back 10s linear infinite;
+ -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_back {
+ from {
+ stroke-dasharray: 13, 5;
+ }
+
+ to {
+ stroke-dasharray: 10, 5;
+ }
+}
+@-webkit-keyframes ani_flow_stop {
+ from {
+ stroke-dasharray: 10, 5;
+ }
+
+ to {
+ stroke-dasharray: 10, 5;
+ }
+}
+/* 以最大40高度填充 */
+.svg_ani_fill_h40 {
+ animation: ani_fill_h40 5s linear infinite;
+ animation-fill-mode: forwards;
+ -webkit-animation: ani_fill_h40 5s linear infinite;
+ -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_fill_h40 {
+ from {
+ height: 0px;
+ }
+
+ to {
+ height: 40px;
+ }
+}
+@-webkit-keyframes ani_flow_stop {
+ from {
+ stroke-dasharray: 10, 5;
+ }
+
+ to {
+ stroke-dasharray: 10, 5;
+ }
+}
+</style>
diff --git a/src/packages/components/Decorates/Mores/PipelineV/config.ts b/src/packages/components/Decorates/Mores/PipelineV/config.ts
new file mode 100644
index 00000000..e3029751
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineV/config.ts
@@ -0,0 +1,19 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { PipelineVConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+ color_type: 1,
+ o_color: '#0a7ae2',
+ i_color: '#119bfa',
+ line_class: 'svg_ani_flow'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+ public key = PipelineVConfig.key
+ public attr = { ...chartInitConfig, w: 15, h: 500, zIndex: -1 }
+ public chartConfig = cloneDeep(PipelineVConfig)
+ public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Decorates/Mores/PipelineV/config.vue b/src/packages/components/Decorates/Mores/PipelineV/config.vue
new file mode 100644
index 00000000..bc039e8e
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineV/config.vue
@@ -0,0 +1,77 @@
+<template>
+ <CollapseItem name="管道" :expanded="true">
+ <SettingItemBox name="默认颜色">
+ <SettingItem>
+ <n-select v-model:value="optionData.color_type" :options="colorOptions" @update:value="handleColorChange" />
+ </SettingItem>
+ </SettingItemBox>
+ <SettingItemBox name="管道颜色">
+ <SettingItem>
+ <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.o_color"></n-color-picker>
+ </SettingItem>
+ </SettingItemBox>
+ <SettingItemBox name="水流颜色">
+ <SettingItem>
+ <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.i_color"></n-color-picker>
+ </SettingItem>
+ </SettingItemBox>
+ <SettingItemBox name="流向">
+ <SettingItem>
+ <n-select v-model:value="optionData.line_class" :options="options" />
+ </SettingItem>
+ </SettingItemBox>
+ </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } 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
+ }
+})
+
+const options = ref([
+ {
+ value: 'svg_ani_flow',
+ label: '正向'
+ },
+ {
+ value: 'svg_ani_flow_back',
+ label: '反向'
+ },
+ {
+ value: 'svg_ani_flow_stop',
+ label: '停止'
+ }
+])
+
+const colorOptions = ref([
+ {
+ value: 1,
+ label: '蓝'
+ },
+ {
+ value: 2,
+ label: '黄'
+ }
+])
+
+// 默认颜色
+const handleColorChange = (e: number) => {
+ switch (e) {
+ case 1:
+ props.optionData.o_color = '#0a7ae2'
+ props.optionData.i_color = '#119bfa'
+ break
+ case 2:
+ props.optionData.o_color = '#ff9d00'
+ props.optionData.i_color = '#f7ea37'
+ break
+ }
+}
+</script>
diff --git a/src/packages/components/Decorates/Mores/PipelineV/index.ts b/src/packages/components/Decorates/Mores/PipelineV/index.ts
new file mode 100644
index 00000000..e99f81a1
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineV/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const PipelineVConfig: ConfigType = {
+ key: 'PipelineV',
+ chartKey: 'VPipelineV',
+ conKey: 'VCPipelineV',
+ title: '管道-纵向',
+ category: ChatCategoryEnum.MORE,
+ categoryName: ChatCategoryEnumName.MORE,
+ package: PackagesCategoryEnum.DECORATES,
+ image: 'Pipeline_V.png'
+}
+
diff --git a/src/packages/components/Decorates/Mores/PipelineV/index.vue b/src/packages/components/Decorates/Mores/PipelineV/index.vue
new file mode 100644
index 00000000..108a3c1f
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/PipelineV/index.vue
@@ -0,0 +1,115 @@
+<template>
+ <div class="go-decorates-line">
+ <svg :width="w" :height="h">
+ <line :x1="w / 2" :y1="0" :x2="w / 2" :y2="h" :stroke="o_color" :stroke-width="w"></line>
+ <line :x1="w / 2" :y1="0" :x2="w / 2" :y2="h" :stroke="i_color" :stroke-width="w / 2" :class="line_class"></line>
+ </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 { o_color, i_color, line_class } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+.go-decorates-line {
+ font-size: 0;
+}
+
+/* 正向流动效果 */
+.svg_ani_flow {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1000;
+ animation: ani_flow 10s linear infinite;
+ animation-fill-mode: forwards;
+ -webkit-animation: ani_flow 10s linear infinite;
+ -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow {
+ from {
+ stroke-dasharray: 10, 5;
+ }
+
+ to {
+ stroke-dasharray: 13, 5;
+ }
+}
+@-webkit-keyframes ani_flow {
+ from {
+ stroke-dasharray: 10, 5;
+ }
+
+ to {
+ stroke-dasharray: 13, 5;
+ }
+}
+
+/* 停止流动效果 */
+.svg_ani_flow_stop {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1000;
+ animation: ani_flow_stop 10s linear infinite;
+ animation-fill-mode: forwards;
+ -webkit-animation: ani_flow_stop 10s linear infinite;
+ -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_stop {
+ from {
+ stroke-dasharray: 10, 5;
+ }
+
+ to {
+ stroke-dasharray: 10, 5;
+ }
+}
+@-webkit-keyframes ani_flow_stop {
+ from {
+ stroke-dasharray: 10, 5;
+ }
+
+ to {
+ stroke-dasharray: 10, 5;
+ }
+}
+/* 反向流动效果 */
+.svg_ani_flow_back {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1000;
+ animation: ani_flow_back 10s linear infinite;
+ animation-fill-mode: forwards;
+ -webkit-animation: ani_flow_back 10s linear infinite;
+ -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_back {
+ from {
+ stroke-dasharray: 13, 5;
+ }
+
+ to {
+ stroke-dasharray: 10, 5;
+ }
+}
+@-webkit-keyframes ani_flow_back {
+ from {
+ stroke-dasharray: 13, 5;
+ }
+
+ to {
+ stroke-dasharray: 10, 5;
+ }
+}
+</style>
diff --git a/src/packages/components/Decorates/Mores/index.ts b/src/packages/components/Decorates/Mores/index.ts
index 855f6e27..7223832b 100644
--- a/src/packages/components/Decorates/Mores/index.ts
+++ b/src/packages/components/Decorates/Mores/index.ts
@@ -3,5 +3,7 @@ import { TimeCommonConfig } from './TimeCommon/index'
import { ClockConfig } from './Clock/index'
import { CountDownConfig } from './CountDown/index'
import { FlipperNumberConfig } from './FlipperNumber'
+import { PipelineHConfig } from './PipelineH/index'
+import { PipelineVConfig } from './PipelineV/index'
-export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig]
+export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig, PipelineHConfig, PipelineVConfig]