修改看板

master
夜笙歌 3 weeks ago
parent bec1fe819b
commit a2ab17ebb4

@ -60,6 +60,7 @@
"vue-json-pretty": "2.4.0",
"vue-router": "4.3.2",
"vue-types": "5.1.1",
"vue3-number-roll-plus": "^0.1.3",
"vue3-print-nb": "^0.1.4",
"vue3-scroll-seamless": "^1.0.6",
"vue3-seamless-scroll": "^3.0.2",

@ -193,6 +193,15 @@
</template>
<div class="moduleText">时间线</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'digitalFlop')"
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">数字翻牌器</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'table')"
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
@ -311,6 +320,11 @@
<TimelineNode :inputData=getInputData(timelineNodeProps.id) v-bind="timelineNodeProps"
@resize="resize"></TimelineNode>
</template>
<template #node-digitalFlop="digitalFlopNodeProps">
<DigitalFlopNode :inputData=getInputData(digitalFlopNodeProps.id) v-bind="digitalFlopNodeProps"
@resize="resize"></DigitalFlopNode>
</template>
<template #node-inputNode="inputNodeProps">
<InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps"
@resize="resize"></InputNode>
@ -372,6 +386,9 @@
<el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
<el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
</el-form-item>
<el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('number')">
<el-input-number :controls="false" autocomplete="off" v-model="nodeAttrForm.number" style="width: 100%" />
</el-form-item>
<el-form-item label="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
<el-input v-model="nodeAttrForm.xName" style="width: 100%" />
</el-form-item>
@ -473,6 +490,13 @@
<el-form-item label="背景颜色" v-if="Object.keys(nodeAttrForm).includes('backgroundColor')">
<el-color-picker v-model="nodeAttrForm.backgroundColor" show-alpha />
</el-form-item>
<el-form-item label="是否显示边框" v-if="Object.keys(nodeAttrForm).includes('isBorder')">
<el-switch v-model="nodeAttrForm.isBorder" />
</el-form-item>
<el-form-item label="边框颜色"
v-if="Object.keys(nodeAttrForm).includes('borderColor') && nodeAttrForm.isBorder">
<el-color-picker v-model="nodeAttrForm.borderColor" show-alpha />
</el-form-item>
<el-form-item label="时间戳颜色" v-if="Object.keys(nodeAttrForm).includes('timestampColor')">
<el-color-picker v-model="nodeAttrForm.timestampColor" show-alpha />
</el-form-item>
@ -840,7 +864,6 @@
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { globalHeaders } from '@/utils/request';
@ -872,6 +895,7 @@ import ImgNode from './nodes/form/imgNode.vue';
import IconNode from './nodes/form/iconNode.vue';
import VideoNode from './nodes/form/videoNode.vue';
import TimelineNode from './nodes/form/timelineNode.vue';
import DigitalFlopNode from './nodes/form/digitalFlopNode.vue';
import AreaNode from './nodes/other/areaNode.vue';
import TableNode from './nodes/form/tableNode.vue';
import ScrollTableNode from './nodes/form/scrollTableNode.vue';

@ -0,0 +1,90 @@
<template>
<div
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
@resize="resize" />
<div class="custom-node"
:style="{color:'#fff',width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
<vue-number-roll-plus
style="display: inline-block;margin-right: 4px;"
:number="item"
:background="props.data.options.backgroundColor"
:style="{border:props.data.options.isBorder? ` 1px solid ${props.data.options.borderColor}` :''}"
v-for="(item, index) in list"
></vue-number-roll-plus>
</div>
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
</div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
import VueNumberRollPlus from 'vue3-number-roll-plus';
import 'vue3-number-roll-plus/main.css';
const list = ref([]);
const props = defineProps({
isView: {
type: Boolean,
required: false
},
inputData: {
type: Object,
required: false
},
id: {
type: String,
required: true
},
isHideHandle: {
type: Boolean,
required: false
},
selected: {
type: Boolean,
required: false
},
data: {
type: Object,
required: true
},
dimensions: {
type: Object,
required: true
}
});
const emit = defineEmits(['resize']);
const resize = (e) => {
emit('resize', e, props.id);
};
watch(() => JSON.parse(JSON.stringify(props.data?.options?.number)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
list.value = (props.data.options.number || 0).toString().split('');
}
}, { deep: true, immediate: true });
</script>
<style scoped>
.custom-node {
position: absolute;
}
:deep(.real-time-num) {
margin-left: 0;
vertical-align: top;
height: var(--number-roll-plus-height);
width: var(--number-roll-plus-width);
line-height: var(--number-roll-plus-height);
}
</style>
<style>
:root {
--number-roll-plus-width: 30px;
--number-roll-plus-height: 40px;
}
</style>

@ -53,9 +53,13 @@ const getOption = (e) => {
tdColor: ['#fff'],
thBgColor: '#fff',
tdBgColor: ['#000']
};
}
} else if (e === 'carousel') {
return { swiperOptions: {}, imageFit: 'contain', carouselImages: [] };
} else if (e === 'digitalFlop') {
return {
field: '', number: 1111, backgroundColor: 'rgba(180, 180, 180, 0.2)', isBorder: true, borderColor: '#fff'
};
} else {
return {};
}

Loading…
Cancel
Save