修改看板

package.json

@@ -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",

src/views/boardGenerate/index.vue

@@ -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';

src/views/boardGenerate/nodes/form/digitalFlopNode.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>
+

src/views/boardGenerate/tool.js

@@ -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 {};
   }