From da9f676d2365c4da0379c336163379beb3faa999 Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Fri, 26 Sep 2025 17:35:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8A=A5=E8=A1=A8=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/variables.module.scss       |   2 +-
 src/views/boardGenerate/dataSourceList.vue    |  88 ++++++------
 src/views/boardGenerate/index.vue             |  13 ++
 src/views/boardGenerate/index1.vue            |  39 +++++-
 .../nodes/data/customDataNode.vue             |  33 ++---
 .../boardGenerate/nodes/form/buttonNode.vue   | 130 ++++++++++++++++++
 .../boardGenerate/nodes/form/mapNode.vue      |   3 +-
 src/views/boardGenerate/tool.js               |   8 +-
 src/views/boardGenerate/view.vue              |   5 +
 9 files changed, 253 insertions(+), 68 deletions(-)
 create mode 100644 src/views/boardGenerate/nodes/form/buttonNode.vue

diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 92fc34d..5e5b119 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -98,7 +98,7 @@ $--color-warning: #e6a23c;
 $--color-danger: #f56c6c;
 $--color-info: #909399;
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 250px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
diff --git a/src/views/boardGenerate/dataSourceList.vue b/src/views/boardGenerate/dataSourceList.vue
index ac31038..41ef139 100644
--- a/src/views/boardGenerate/dataSourceList.vue
+++ b/src/views/boardGenerate/dataSourceList.vue
@@ -28,27 +28,16 @@
           <template #default="scope">
             <el-button text type="primary" size="small" @click="editDataSource(scope.row)">修改
             </el-button>
-            <el-button
-              size="small"
-              type="danger"
-              text
-              @click="delDataSource(scope.row)"
-            >删除
+            <el-button size="small" type="danger" text @click="delDataSource(scope.row)">删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination
-        class="pagination"
-        v-model:current-page="selectForm.pageNum"
-        v-model:page-size="selectForm.pageSize"
-        :page-sizes="[10,20,50,100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        v-if="total>0"
-        :total="total"
-        @size-change="pageChange"
-        @current-change="pageChange"
-      />
+      <el-pagination class="pagination" v-model:current-page="selectForm.pageNum"
+                     v-model:page-size="selectForm.pageSize" :page-sizes="[10, 20, 50, 100]"
+                     layout="total, sizes, prev, pager, next, jumper" v-if="total > 0" :total="total"
+                     @size-change="pageChange"
+                     @current-change="pageChange" />
     </el-card>
 
     <el-dialog v-model="constructionDataFormVisible" draggable width="800">
@@ -95,8 +84,7 @@
             </el-table-column>
             <el-table-column label="操作" min-width="120">
               <template #default="scope">
-                <el-button link size="small" type="primary"
-                           @click="paramsTableData.splice(scope.$index, 1)">
+                <el-button link size="small" type="primary" @click="paramsTableData.splice(scope.$index, 1)">
                   删除
                 </el-button>
               </template>
@@ -135,8 +123,7 @@
           <el-button style="width: 100%" @click="constructionDataForm.designDataFieldList.push({})">
             添加字段
           </el-button>
-          <el-button v-if="isEasy" style="width: 100%;margin: 12px 0 0 0"
-                     @click="findTier">
+          <el-button v-if="isEasy" style="width: 100%;margin: 12px 0 0 0" @click="findTier">
             查找
           </el-button>
         </el-form-item>
@@ -144,7 +131,7 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="constructionDataFormVisible = false">关闭</el-button>
-          <el-button type="primary" @click="createData ">
+          <el-button type="primary" @click="createData">
             {{ constructionDataForm.dataSourceId ? '确定' : '创建' }}
           </el-button>
         </div>
@@ -162,12 +149,8 @@
         </el-form-item>
         <el-form-item label="数据库" prop="db">
           <el-select @change="selectDb" v-model="addSQLForm.db" placeholder="选择数据库" style="width: 240px">
-            <el-option
-              v-for="item in dbList"
-              :key="item.value"
-              :label="`${item.linkName}(${item.host}:${item.port})`"
-              :value="item.linkId"
-            />
+            <el-option v-for="item in dbList" :key="item.value" :label="`${item.linkName}(${item.host}:${item.port})`"
+                       :value="item.linkId" />
           </el-select>
         </el-form-item>
         <el-form-item label="是否分页" prop="dataSourceName">
@@ -191,13 +174,7 @@
           </el-button>
         </el-form-item>
         <el-form-item label="SQL" prop="SQL">
-          <el-input
-            v-model="addSQLForm.SQL"
-            style="width: 100%"
-            :rows="2"
-            type="textarea"
-            placeholder=""
-          />
+          <el-input v-model="addSQLForm.SQL" style="width: 100%" :rows="2" type="textarea" placeholder="" />
         </el-form-item>
         <!--        <el-form-item label="关键字">-->
         <!--          <el-tag type="success" style="margin-right: 8px;margin-bottom: 8px;" v-for="i in keyword"-->
@@ -253,8 +230,7 @@
           <el-button style="width: 100%" @click="addSQLForm.designDataFieldList.push({})">
             添加字段
           </el-button>
-          <el-button style="width: 100%;margin: 12px 0 0 0"
-                     @click="sqlFindTier">
+          <el-button style="width: 100%;margin: 12px 0 0 0" @click="sqlFindTier">
             查找
           </el-button>
         </el-form-item>
@@ -262,7 +238,7 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="addSQLFormVisible = false">关闭</el-button>
-          <el-button type="primary" @click="createSQL ">
+          <el-button type="primary" @click="createSQL">
             {{ addSQLForm.dataSourceId ? '确定' : '创建' }}
           </el-button>
         </div>
@@ -299,7 +275,7 @@ const selectForm = ref({
   pageSize: 10
 });
 const total = ref(0);
-const tableData = ref([{}]);
+const tableData = ref([]);
 const constructionDataForm = ref({ designDataFieldList: [] });
 const constructionDataFormVisible = ref(false);
 const addSQLFormVisible = ref(false);
@@ -394,6 +370,7 @@ const createSQL = () => {
     fieldTwo: addSQLForm.value.SQL,
     fieldThree: addSQLForm.value.isPage
   };
+  delete params.SQL;
 
   if (addSQLForm.value.dataSourceId) {
     editDataSourceApi(params).then(() => {
@@ -517,7 +494,6 @@ const findTier = () => {
   (paramsTableData.value || []).forEach((item) => {
     params[item.name] = item.test;
   });
-
   (options.isD ? request : axios.request)({
     method: constructionDataForm.value.requestMethod,
     url: constructionDataForm.value.requestUrl,
@@ -567,13 +543,41 @@ const findTier = () => {
       });
     }
   });
+};
 
+const formulaFun = (formula) => {
+  let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
+    let infos = key.split(',');
+    if (infos.length === 1) {
+      if (addSQLForm.value.testList.find(e => e.fieldOne === infos[0])) {
+        return addSQLForm.value.testList.find(e => e.fieldOne === infos[0])?.fieldTwo || '';
+      } else {
+        addSQLForm.value.testList.push({
+          fieldOne: infos[0],
+          fieldTwo: ''
+        });
+        return '';
+      }
+    }
+    if (infos.length === 2) {
+      if (addSQLForm.value.testList.find(e => e.fieldOne === infos[1])) {
+        return `AND ${infos[0]} = ${addSQLForm.value.testList.find(e => e.fieldOne === infos[1])?.fieldTwo || ''}`;
+      } else {
+        addSQLForm.value.testList.push({
+          fieldOne: infos[1],
+          fieldTwo: ''
+        });
+        return '';
+      }
+    }
+  });
+  return data;
 };
 const sqlFindTier = () => {
   addSQLForm.value.designDataFieldList = [];
   if (addSQLForm.value.isPage) {
     querySql1({
-      sql: addSQLForm.value.SQL.replace(/\n/g, ' '),
+      sql: formulaFun(addSQLForm.value.SQL.replace(/\n/g, ' ')),
       linkId: addSQLForm.value.db,
       pageSize: 10,
       pageNum: 1
@@ -598,7 +602,7 @@ const sqlFindTier = () => {
       });
     });
   } else {
-    querySql(addSQLForm.value.SQL, addSQLForm.value.db).then((res) => {
+    querySql(formulaFun(addSQLForm.value.SQL.replace(/\n/g, ' ')), addSQLForm.value.db).then((res) => {
       let data = res;
       if (data?.data) {
         Object.keys(data.data?.[0]).forEach(key => {
diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue
index 82e3968..4bc696e 100644
--- a/src/views/boardGenerate/index.vue
+++ b/src/views/boardGenerate/index.vue
@@ -145,6 +145,14 @@
             </template>
             <div class="moduleText">文字</div>
           </el-card>
+          <el-card class="moduleCard" shadow="never" :draggable="true"
+                   @dragstart="onDragStart($event, 'buttonNode')" :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, 'inputNode')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                    :body-style="{padding:'4px 0'}">
@@ -329,6 +337,10 @@
             <InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps"
                        @resize="resize"></InputNode>
           </template>
+          <template #node-buttonNode="buttonNodeProps">
+            <ButtonNode :inputData=getInputData(buttonNodeProps.id) v-bind="buttonNodeProps"
+                        @resize="resize"></ButtonNode>
+          </template>
           <template #node-time="timeNodeProps">
             <TimeNode :inputData=getInputData(timeNodeProps.id) v-bind="timeNodeProps"
                       @resize="resize"></TimeNode>
@@ -888,6 +900,7 @@ import DataNode from './nodes/data/dataNode.vue';
 import CustomDataNode from './nodes/data/customDataNode.vue';
 import MapNode from './nodes/form/mapNode.vue';
 import InputNode from './nodes/form/inputNode.vue';
+import ButtonNode from './nodes/form/buttonNode.vue';
 import TimeNode from './nodes/form/timeNode.vue';
 import TextNode from './nodes/form/textNode.vue';
 import ImgNode from './nodes/form/imgNode.vue';
diff --git a/src/views/boardGenerate/index1.vue b/src/views/boardGenerate/index1.vue
index cc239a7..7302904 100644
--- a/src/views/boardGenerate/index1.vue
+++ b/src/views/boardGenerate/index1.vue
@@ -233,6 +233,18 @@
               </template>
               <div class="moduleText">文字</div>
             </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'buttonNode')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <div style="width: 100%;height: 100%;text-align: center">
+
+                  <el-image style="width:50px;height: 50px;text-align: center" :src="inputNodeImg" fit="contain" />
+                </div>
+              </template>
+              <div class="moduleText">按钮</div>
+            </el-card>
             <el-card class="moduleCard" shadow="never" :draggable="true"
                      @dragstart="onDragStart($event, 'inputNode')"
                      :style="{display:'inline-block',margin:'0 4px 4px 0'}"
@@ -577,6 +589,11 @@
                        @resize="(e) => handleResizeStop(e, inputNodeProps)" />
           </template>
 
+          <template #node-buttonNode="buttonNodeProps">
+            <ButtonNode v-bind="buttonNodeProps" :inputData="getInputData(buttonNodeProps.id)"
+                        @resize="(e) => handleResizeStop(e, buttonNodeProps)" />
+          </template>
+
           <template #node-selectNode="selectNodeProps">
             <SelectNode v-bind="selectNodeProps" :inputData="getInputData(selectNodeProps.id)"
                         @resize="(e) => handleResizeStop(e, selectNodeProps)" />
@@ -1071,8 +1088,8 @@
                 <el-form-item label="超时时间" v-if="Object.keys(nodeAttrForm).includes('timeout')">
                   <el-input-number
                     v-model="nodeAttrForm.timeout"
-                    :min="1000"
-                    :step="1000"
+                    :min="-1"
+                    :step="1"
                     controls-position="right"
                   />
                 </el-form-item>
@@ -1193,6 +1210,23 @@
                 <el-form-item label="饼图半径" v-if="Object.keys(nodeAttrForm).includes('pieRadius')">
                   <el-slider v-model="nodeAttrForm.pieRadius" :min="0" :max="100" range />
                 </el-form-item>
+                <el-form-item label="发送脉冲类型" v-if="Object.keys(nodeAttrForm).includes('sendType')">
+                  <el-select
+                    multiple
+                    v-model="nodeAttrForm.sendType"
+                    placeholder="Select"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="确定"
+                      value="ok"
+                    />
+                    <el-option
+                      label="重置"
+                      value="reset"
+                    />
+                  </el-select>
+                </el-form-item>
                 <el-form-item label="js脚本设置">
                   <el-input type="textarea" v-model="nodeAttrForm.JScript" style="width: 100%" />
                 </el-form-item>
@@ -1552,6 +1586,7 @@ import DigitalFlopNode from '@/views/boardGenerate/nodes/form/digitalFlopNode.vu
 import NightingaleRoseDiagramNode from '@/views/boardGenerate/nodes/board/nightingaleRoseDiagramNode.vue';
 import IconNode from '@/views/boardGenerate/nodes/form/iconNode.vue';
 import InputNode from '@/views/boardGenerate/nodes/form/inputNode.vue';
+import ButtonNode from '@/views/boardGenerate/nodes/form/buttonNode.vue';
 import SelectNode from '@/views/boardGenerate/nodes/form/selectNode.vue';
 
 import TimeNode from '@/views/boardGenerate/nodes/form/timeNode.vue';
diff --git a/src/views/boardGenerate/nodes/data/customDataNode.vue b/src/views/boardGenerate/nodes/data/customDataNode.vue
index 75ef171..8327ad7 100644
--- a/src/views/boardGenerate/nodes/data/customDataNode.vue
+++ b/src/views/boardGenerate/nodes/data/customDataNode.vue
@@ -7,7 +7,7 @@
     <div class="custom-node"
          :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-button :type="isErr ? 'danger':'primary'"
-                 :style="{width:props.dimensions.width  +'px',height:props.dimensions.height+'px'}"
+                 :style="{width:props.dimensions.width*props.ratioWidth  +'px',height:props.dimensions.height*props.ratioHeight+'px'}"
                  :icon="Connection">{{ props.data.customData.name }}
       </el-button>
       <span style="color:#fff">
@@ -97,16 +97,19 @@ const formulaFun = (formula) => {
   let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
     let infos = key.split(',');
     if (infos.length === 1) {
-      return props.inputData[infos[0]] || '';
+      return props.inputData[infos[0]] || '%%';
     }
     if (infos.length === 2) {
-      return `AND ${infos[0]} = ${props.inputData[infos[1]]}`;
+      return `AND ${infos[0]} = ${props.inputData[infos[1]] || '%%'}`;
     }
   });
   return data;
 };
+let timestamp = Date.now();
 const getOutputData = () => {
-
+  if (Date.now() < timestamp + 900) {
+    return;
+  }
   let params = props.inputData;
   (Object.keys(props.inputData) || []).forEach((item) => {
     params[item.name] = props.inputData[item.name];
@@ -163,23 +166,13 @@ const getOutputData = () => {
         isErr.value = true;
       });
     }
-
-    querySql(formulaFun(props.data.customData.SQL), props.data.customData.db).then((res) => {
-      isErr.value = false;
-      let data = res;
-      let output = {};
-      props.data.customData.outputData.forEach(item => {
-        output[item.fieldOne] = parseData(data, item.fieldTwo);
-      });
-      props.data.outputData = output;
-    }).catch(e => {
-      isErr.value = true;
-    });
   }
 };
-
 onMounted(() => {
-  getOutputData();
+  setTimeout(() => {
+    getOutputData();
+  }, 1000);
+
 });
 
 
@@ -189,9 +182,9 @@ watch(() => JSON.parse(JSON.stringify([props.inputData])), (obj1, obj2) => {
   }
 }, { deep: true, immediate: true });
 
-let interval = setInterval(() => {
+let interval = props.data.options?.timeout === -1 ? null : setInterval(() => {
   getOutputData();
-}, Math.max(props.data.options?.timeout || 5 * 1000, 1000));
+}, Math.max((props.data.options?.timeout || 5) * 1000, 1000));
 
 onBeforeUnmount(() => {
   clearInterval(interval);
diff --git a/src/views/boardGenerate/nodes/form/buttonNode.vue b/src/views/boardGenerate/nodes/form/buttonNode.vue
new file mode 100644
index 0000000..b6708a3
--- /dev/null
+++ b/src/views/boardGenerate/nodes/form/buttonNode.vue
@@ -0,0 +1,130 @@
+<template>
+  <div style="position: relative;"
+       :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
+    <div class="border1" v-if="!props.isView"></div>
+    <div class="border2" v-if="!props.isView"></div>
+    <div class="border3" v-if="!props.isView"></div>
+    <div class="border4" v-if="!props.isView"></div>
+    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
+                 v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
+    <div class="custom-node"
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
+      <el-button style="width: 100%;height: 100%;border:0" @click="sendPulse"
+                 :style="{backgroundColor: props.data.options.backgroundColor,color:props.data.options.color,}">
+        {{ props.data.options.text }}
+      </el-button>
+    </div>
+    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
+    <Handle v-if="!props.isView" :id="`${props.id}.-s`" type="source" :position="Position.Right" />
+  </div>
+</template>
+<script setup>
+import { defineEmits, defineProps, ref } from 'vue';
+import { NodeResizer } from '@vue-flow/node-resizer';
+import { Handle, Position } from '@vue-flow/core';
+
+const input = ref('');
+const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  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);
+};
+const sendPulse = () => {
+  if (props.data.options.sendType.includes('ok')) {
+    props.data.outputData.ok = Math.floor(new Date().getTime() / 1000);
+    console.log('ok');
+  }
+  if (props.data.options.sendType.includes('reset')) {
+    props.data.outputData.reset = Math.floor(new Date().getTime() / 1000);
+    console.log('reset');
+  }
+};
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+
+.border1 {
+  position: absolute;
+  top: -1px;
+  width: 100%;
+  height: 1px;
+  background: transparent;
+  -webkit-backdrop-filter: invert(1);
+  backdrop-filter: invert(1);
+}
+
+.border2 {
+  position: absolute;
+  top: 0;
+  left: -1px;
+  width: 1px;
+  height: 100%;
+  background: transparent;
+  -webkit-backdrop-filter: invert(1);
+  backdrop-filter: invert(1);
+}
+
+.border3 {
+  position: absolute;
+  top: 0;
+  right: -1px;
+  width: 1px;
+  height: 100%;
+  background: transparent;
+  -webkit-backdrop-filter: invert(1);
+  backdrop-filter: invert(1);
+}
+
+.border4 {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: transparent;
+  -webkit-backdrop-filter: invert(1);
+  backdrop-filter: invert(1);
+}
+</style>
diff --git a/src/views/boardGenerate/nodes/form/mapNode.vue b/src/views/boardGenerate/nodes/form/mapNode.vue
index 2c12072..0fa036c 100644
--- a/src/views/boardGenerate/nodes/form/mapNode.vue
+++ b/src/views/boardGenerate/nodes/form/mapNode.vue
@@ -5,7 +5,8 @@
 
     <div class="custom-node"
          :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
-      <el-button type="primary" :style="{width:props.dimensions.width  +'px',height:props.dimensions.height+'px'}"
+      <el-button type="primary"
+                 :style="{width:props.dimensions.width *props.ratioWidth +'px',height:props.dimensions.height*props.ratioHeight+'px'}"
                  :icon="Refresh">数据映射
       </el-button>
     </div>
diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js
index ceb58b4..515b588 100644
--- a/src/views/boardGenerate/tool.js
+++ b/src/views/boardGenerate/tool.js
@@ -295,15 +295,17 @@ const getOption = (e) => {
   } else if (e === 'customBoard') {
     return { title: '', yNames: [] };
   } else if (e === 'data') {
-    return { timeout: 5000 };
+    return { timeout: 5 };
   } else if (e === 'staticData') {
     return { defaultInputArea: '', field: 'input', defaultDataType: '' };
   } else if (e === 'customData') {
-    return { timeout: 5000 };
+    return { timeout: 5 };
   } else if (e === 'map') {
     return { dataMap: [] };
   } else if (e === 'inputNode') {
     return { field: 'input', defaultInput: '' };
+  } else if (e === 'buttonNode') {
+    return { backgroundColor: '#409EFF', color: '#fff', text: '按钮', sendType: ['ok'] };
   } else if (e === 'selectNode') {
     return { field: 'select', defaultInput: '', labelField: 'label', valueField: 'value' };
   } else if (e === 'time') {
@@ -361,6 +363,8 @@ const getNodeSize = (e) => {
     return { width: 150, height: 50 };
   } else if (e === 'inputNode') {
     return { width: 100, height: 30 };
+  } else if (e === 'buttonNode') {
+    return { width: 100, height: 30 };
   } else if (e === 'staticData') {
     return { width: 100, height: 60 };
   } else if (e === 'text') {
diff --git a/src/views/boardGenerate/view.vue b/src/views/boardGenerate/view.vue
index c649f47..500dbfc 100644
--- a/src/views/boardGenerate/view.vue
+++ b/src/views/boardGenerate/view.vue
@@ -53,6 +53,10 @@
         <InputNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                    v-bind="i"></InputNode>
       </template>
+      <template v-if="i.type === 'buttonNode'">
+        <ButtonNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
+                    v-bind="i"></ButtonNode>
+      </template>
       <template v-if="i.type === 'selectNode'">
         <SelectNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                     v-bind="i"></SelectNode>
@@ -163,6 +167,7 @@ import BarNode from './nodes/board/barNode.vue';
 import BackgroundBarNode from './nodes/board/backgroundBarNode.vue';
 import MultiBarsNode from './nodes/board/multiBarsNode.vue';
 import InputNode from './nodes/form/inputNode.vue';
+import ButtonNode from './nodes/form/buttonNode.vue';
 import SelectNode from './nodes/form/selectNode.vue';
 import MapNode from './nodes/form/mapNode.vue';
 import CustomBoardNode from './nodes/board/customBoardNode.vue';