mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 00:02:51 +08:00
perf: 去除多余流程组件，优化流程线交互
This commit is contained in:
奔跑的面条
parent
7d5af8f4f1
commit
943cabf5cd
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
@ -1,21 +0,0 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { FlowChart01Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
endWidth: 15,
|
||||
lineLength: 150,//水平层级距离
|
||||
lineWidth:2,//线条粗细
|
||||
lineNum:2,//向下数量
|
||||
lineNumUp:2,//向上数量
|
||||
lineColLength:50,//纵向层级距离
|
||||
backgroundCol:'#303a4c',//线条背景
|
||||
animateCol:'#3788ea'//流动动画背景
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = FlowChart01Config.key
|
||||
public chartConfig = cloneDeep(FlowChart01Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<svg :width="w" :height="h">
|
||||
<polyline :stroke-width="lineWidth" :points="getStartPoint(-1,'')" :stroke="backgroundCol" fill="none"/>
|
||||
<polyline :stroke-width="lineWidth" class="g-dashed-line" :points="getStartPoint(-1,'')" :stroke="animateCol" fill="none"/>
|
||||
<polyline :stroke-width="lineWidth" v-for="(item,index) in lineNum" :key="index" :points="getStartPoint(index + 1,'down')" :stroke="backgroundCol" fill="none"/>
|
||||
<polyline :stroke-width="lineWidth" class="g-dashed-line" v-for="(item,index) in lineNum" :key="index" :points="getStartPoint(index + 1,'down')" :stroke="animateCol" fill="none"/>
|
||||
<polyline :stroke-width="lineWidth" v-for="(item,index) in lineNumUp" :key="index" :points="getStartPoint(index + 1,'up')" :stroke="backgroundCol" fill="none"/>
|
||||
<polyline :stroke-width="lineWidth" class="g-dashed-line" v-for="(item,index) in lineNumUp" :key="index" :points="getStartPoint(index + 1,'up')" :stroke="animateCol" fill="none"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs,computed } 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 { lineLength,lineNum,lineColLength,lineNumUp,lineWidth,backgroundCol,animateCol } = toRefs(props.chartConfig.option)
|
||||
const getStartPoint = (num:number,direction:string)=>{
|
||||
if(num === -1 && direction === ''){
|
||||
return `0,${h.value/2} ${lineLength.value},${h.value/2} ${lineLength.value * 2},${h.value/2}`
|
||||
}else if(num !== -1 && direction === 'down'){
|
||||
return `0,${h.value/2} ${lineLength.value},${h.value/2} ${lineLength.value},${ h.value/2 + num * lineColLength.value},${lineLength.value *2},${h.value/2 + num * lineColLength.value}`
|
||||
}else if(num !== -1 && direction === 'up'){
|
||||
return `0,${h.value/2} ${lineLength.value},${h.value/2} ${lineLength.value},${ h.value/2 - num * lineColLength.value},${lineLength.value *2},${h.value/2 - num * lineColLength.value}`
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.g-dashed-line {
|
||||
stroke-dasharray:20 130;
|
||||
stroke-dashoffset: 0;
|
||||
animation: move 3s infinite linear;
|
||||
}
|
||||
@keyframes move {
|
||||
0% {
|
||||
stroke-dashoffset: 20;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -130;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +0,0 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { FlowChart02Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxWidth:100,
|
||||
boxHeight:200,
|
||||
cornerTip:30,
|
||||
startColor:'#3cb1e4',
|
||||
endColor:'#144b6b',
|
||||
strokeWidth:3
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = FlowChart02Config.key
|
||||
public chartConfig = cloneDeep(FlowChart02Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<CollapseItem name="线条" :expanded="true">
|
||||
<SettingItemBox name="具体">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.boxWidth"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="高度">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.boxHeight"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="角尖高度">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.cornerTip"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="边框粗细">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.strokeWidth"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="起点颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.startColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="终点颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.endColor"></n-color-picker>
|
||||
</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>
|
||||
@ -1,14 +0,0 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const FlowChart02Config: ConfigType = {
|
||||
key: 'FlowChart02',
|
||||
chartKey: 'VFlowChart02',
|
||||
conKey: 'VCFlowChart02',
|
||||
title: '流程-五边形',
|
||||
category: ChatCategoryEnum.FlowChart,
|
||||
categoryName: ChatCategoryEnumName.FlowChart,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'flow-wubianxing.png'
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<svg :width="w" :height="h">
|
||||
<defs>
|
||||
<linearGradient :id="id" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" :stop-color="startColor" stop-opacity="1"/>
|
||||
<stop offset="100%" :stop-color="endColor" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polyline :points="getBox()" fill="none" :stroke="`url(#${id})`" :stroke-width="strokeWidth"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { getUUID } from '@/utils'
|
||||
|
||||
const id = getUUID();
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const { boxWidth, boxHeight,cornerTip,startColor,endColor,strokeWidth } = toRefs(props.chartConfig.option)
|
||||
|
||||
const getBox = ():string =>{
|
||||
return `${ w.value / 3 },0 ${ w.value / 3 + boxWidth.value},0 ${ w.value / 3 + boxWidth.value},${boxHeight.value} ${ w.value / 3 + boxWidth.value/2 },${boxHeight.value + cornerTip.value} ${ w.value / 3 },${boxHeight.value} ${ w.value / 3 },0`
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { FlowChart03Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
|
||||
export const option = {
|
||||
boxWidth: 300,
|
||||
boxHeight: 100,
|
||||
outBorderColor: '#045da2',
|
||||
inBorderColor: '#045da2',
|
||||
startColor: '#025596',
|
||||
endColor: '#052339',
|
||||
borderWidth: 3
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = FlowChart03Config.key
|
||||
public attr = { ...chartInitConfig, w: 390, h: 120, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(FlowChart03Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<CollapseItem name="线条" :expanded="true">
|
||||
<SettingItemBox name="具体">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.boxWidth"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="高度">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.boxHeight"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="边框粗细">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.borderWidth"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem name="外边框颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outBorderColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="内边框颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.inBorderColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem name="起点颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.startColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem name="终点颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.endColor"></n-color-picker>
|
||||
</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>
|
||||
@ -1,14 +0,0 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const FlowChart03Config: ConfigType = {
|
||||
key: 'FlowChart03',
|
||||
chartKey: 'VFlowChart03',
|
||||
conKey: 'VCFlowChart03',
|
||||
title: '平行四边形',
|
||||
category: ChatCategoryEnum.FlowChart,
|
||||
categoryName: ChatCategoryEnumName.FlowChart,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'flow-pingxing.png'
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<svg :width="w" :height="h">
|
||||
<defs>
|
||||
<linearGradient :id="id" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" :stop-color="startColor" stop-opacity="1"/>
|
||||
<stop offset="100%" :stop-color="endColor" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- <polyline :points="getBorder()" fill="none" :stroke="outBorderColor" :stroke-width="borderWidth"/>-->
|
||||
<polyline :points="getBox()" :fill="`url(#${id})`" :stroke="inBorderColor" :stroke-width="borderWidth"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { getUUID } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const id = getUUID();
|
||||
console.log(id)
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const { boxWidth, boxHeight,outBorderColor,inBorderColor,startColor,endColor ,borderWidth} = toRefs(props.chartConfig.option)
|
||||
|
||||
const getBox = ():string =>{
|
||||
return `${ w.value / 10 +50},30 ${ w.value / 10 + boxWidth.value},30 ${boxWidth.value},${boxHeight.value} 50,${boxHeight.value} ${ w.value / 10 +50},30`
|
||||
}
|
||||
|
||||
const getBorder = ():string =>{
|
||||
return `${ w.value / 10 + 45},20 ${ w.value / 10 + boxWidth.value + 20},20 ${boxWidth.value + 10},${boxHeight.value+10} 30,${boxHeight.value+10} ${ w.value / 10 + 45},20`
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { FlowChartLineConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
endWidth: 15,
|
||||
lineWidth: 2, //线条粗细
|
||||
lineNum: 2, //向下数量
|
||||
lineNumUp: 2, //向上数量
|
||||
backgroundCol: '#303a4c', //线条背景
|
||||
animateCol: '#3788ea' //流动动画背景
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = FlowChartLineConfig.key
|
||||
public chartConfig = cloneDeep(FlowChartLineConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -1,41 +1,17 @@
|
||||
<template>
|
||||
<CollapseItem name="线条" :expanded="true">
|
||||
<SettingItemBox name="具体">
|
||||
<SettingItem name="水平层级宽度">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.lineLength"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="纵向层级宽度">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.lineColLength"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="折线数量">
|
||||
<SettingItem name="向下增加">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.lineNum"
|
||||
></n-input-number>
|
||||
<n-input-number size="small" :min="0" v-model:value="optionData.lineNum"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="向上增加">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.lineNumUp"
|
||||
></n-input-number>
|
||||
<n-input-number size="small" :min="0" v-model:value="optionData.lineNumUp"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="折线样式">
|
||||
<SettingItem name="折线粗细">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.lineWidth"
|
||||
></n-input-number>
|
||||
<n-input-number size="small" :min="1" v-model:value="optionData.lineWidth"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="背景条颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundCol"></n-color-picker>
|
||||
@ -44,18 +20,12 @@
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animateCol"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
</CollapseItem>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
@ -1,11 +1,11 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const FlowChart01Config: ConfigType = {
|
||||
key: 'FlowChart01',
|
||||
chartKey: 'VFlowChart01',
|
||||
conKey: 'VCFlowChart01',
|
||||
title: '流程-折线',
|
||||
export const FlowChartLineConfig: ConfigType = {
|
||||
key: 'FlowChartLine',
|
||||
chartKey: 'VFlowChartLine',
|
||||
conKey: 'VCFlowChartLine',
|
||||
title: '流程线',
|
||||
category: ChatCategoryEnum.FlowChart,
|
||||
categoryName: ChatCategoryEnumName.FlowChart,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<svg :width="w" :height="h">
|
||||
<polyline :stroke-width="lineWidth" :points="getStartPoint(-1, '')" :stroke="backgroundCol" fill="none" />
|
||||
<polyline
|
||||
:stroke-width="lineWidth"
|
||||
class="g-dashed-line"
|
||||
:points="getStartPoint(-1, '')"
|
||||
:stroke="animateCol"
|
||||
fill="none"
|
||||
/>
|
||||
<polyline
|
||||
:stroke-width="lineWidth"
|
||||
v-for="(item, index) in lineNum"
|
||||
:key="index"
|
||||
:points="getStartPoint(index + 1, 'down')"
|
||||
:stroke="backgroundCol"
|
||||
fill="none"
|
||||
/>
|
||||
<polyline
|
||||
:stroke-width="lineWidth"
|
||||
class="g-dashed-line"
|
||||
v-for="(item, index) in lineNum"
|
||||
:key="index"
|
||||
:points="getStartPoint(index + 1, 'down')"
|
||||
:stroke="animateCol"
|
||||
fill="none"
|
||||
/>
|
||||
<polyline
|
||||
:stroke-width="lineWidth"
|
||||
v-for="(item, index) in lineNumUp"
|
||||
:key="index"
|
||||
:points="getStartPoint(index + 1, 'up')"
|
||||
:stroke="backgroundCol"
|
||||
fill="none"
|
||||
/>
|
||||
<polyline
|
||||
:stroke-width="lineWidth"
|
||||
class="g-dashed-line"
|
||||
v-for="(item, index) in lineNumUp"
|
||||
:key="index"
|
||||
:points="getStartPoint(index + 1, 'up')"
|
||||
:stroke="animateCol"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, computed } 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 { lineNum, lineNumUp, lineWidth, backgroundCol, animateCol } = toRefs(props.chartConfig.option)
|
||||
const getStartPoint = (num: number, direction: string) => {
|
||||
const lineLength = w.value / 2
|
||||
const lineColLength =
|
||||
h.value / (lineNumUp.value + lineNum.value) - lineWidth.value / (lineNumUp.value + lineNum.value)
|
||||
if (num === -1 && direction === '') {
|
||||
return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength * 2},${h.value / 2}`
|
||||
} else if (num !== -1 && direction === 'down') {
|
||||
return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 + num * lineColLength},${
|
||||
lineLength * 2
|
||||
},${h.value / 2 + num * lineColLength}`
|
||||
} else if (num !== -1 && direction === 'up') {
|
||||
return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 - num * lineColLength},${
|
||||
lineLength * 2
|
||||
},${h.value / 2 - num * lineColLength}`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.g-dashed-line {
|
||||
stroke-dasharray: 20 130;
|
||||
stroke-dashoffset: 0;
|
||||
animation: move 3s infinite linear;
|
||||
}
|
||||
@keyframes move {
|
||||
0% {
|
||||
stroke-dashoffset: 20;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -130;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,3 @@
|
||||
import { FlowChart01Config } from './FlowChart01/index'
|
||||
import { FlowChart02Config } from './FlowChart02/index'
|
||||
import { FlowChart03Config } from './FlowChart03/index'
|
||||
import { FlowChart04Config } from './FlowChart04/index'
|
||||
import { FlowChartLineConfig } from './FlowChartLine/index'
|
||||
|
||||
export default [FlowChart01Config, FlowChart02Config, FlowChart03Config, FlowChart04Config]
|
||||
export default [FlowChartLineConfig]
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { FlowChart04Config } from './index'
|
||||
import { CirclePointConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
|
||||
@ -13,8 +13,8 @@ export const option = {
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = FlowChart04Config.key
|
||||
public key = CirclePointConfig.key
|
||||
public attr = { ...chartInitConfig, w: 97, h: 97, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(FlowChart04Config)
|
||||
public chartConfig = cloneDeep(CirclePointConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -1,13 +1,13 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const FlowChart04Config: ConfigType = {
|
||||
key: 'FlowChart04',
|
||||
chartKey: 'VFlowChart04',
|
||||
conKey: 'VCFlowChart04',
|
||||
export const CirclePointConfig: ConfigType = {
|
||||
key: 'CirclePoint',
|
||||
chartKey: 'VCirclePoint',
|
||||
conKey: 'VCCirclePoint',
|
||||
title: '圆点光环',
|
||||
category: ChatCategoryEnum.FlowChart,
|
||||
categoryName: ChatCategoryEnumName.FlowChart,
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'flow-circle.png'
|
||||
@ -6,6 +6,7 @@ import { CountDownConfig } from './CountDown/index'
|
||||
import { FlipperNumberConfig } from './FlipperNumber'
|
||||
import { PipelineHConfig } from './PipelineH/index'
|
||||
import { PipelineVConfig } from './PipelineV/index'
|
||||
import { CirclePointConfig } from './CirclePoint/index'
|
||||
|
||||
export default [
|
||||
NumberConfig,
|
||||
@ -15,5 +16,6 @@ export default [
|
||||
ClockConfig,
|
||||
FullScreenConfig,
|
||||
PipelineHConfig,
|
||||
PipelineVConfig
|
||||
PipelineVConfig,
|
||||
CirclePointConfig
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user