From 4477d764a7bb1c326be26be3913a32daa8b1b487 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Thu, 26 Jun 2025 18:04:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/main.ts                                   |   3 +
 src/views/boardGenerate/index.vue             | 162 ++++++++++++++++-
 .../nodes/board/carouselNode.vue              | 149 ++++++++++++++++
 .../board/nightingaleRoseDiagramNode.vue      | 165 ++++++++++++++++++
 .../boardGenerate/nodes/form/timelineNode.vue |  86 +++++++++
 .../boardGenerate/nodes/form/videoNode.vue    |  75 ++++++++
 src/views/boardGenerate/tool.js               |   8 +-
 src/views/boardGenerate/view.vue              |  27 ++-
 9 files changed, 669 insertions(+), 7 deletions(-)
 create mode 100644 src/views/boardGenerate/nodes/board/carouselNode.vue
 create mode 100644 src/views/boardGenerate/nodes/board/nightingaleRoseDiagramNode.vue
 create mode 100644 src/views/boardGenerate/nodes/form/timelineNode.vue
 create mode 100644 src/views/boardGenerate/nodes/form/videoNode.vue

diff --git a/package.json b/package.json
index d48a19b..d7bf01b 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "pinia": "2.1.7",
     "qrcode": "^1.5.4",
     "screenfull": "6.0.2",
+    "swiper": "^11.2.8",
     "uuid": "^11.0.5",
     "vform3-builds": "^3.0.10",
     "vue": "3.4.34",
diff --git a/src/main.ts b/src/main.ts
index e29564b..120a8d8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -69,7 +69,10 @@ import { ElDialog } from 'element-plus';
 ElDialog.props.closeOnClickModal.default = false;
 
 import vue3SeamlessScroll from 'vue3-seamless-scroll';
+import { register } from 'swiper/element/bundle';
+import 'swiper/css/bundle';
 
+register();
 const app = createApp(App);
 
 
diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue
index e455660..4281d2b 100644
--- a/src/views/boardGenerate/index.vue
+++ b/src/views/boardGenerate/index.vue
@@ -61,6 +61,23 @@
             </template>
             <div class="moduleText">饼图</div>
           </el-card>
+          <el-card class="moduleCard" shadow="never" :draggable="true"
+                   @dragstart="onDragStart($event, 'nightingaleRoseDiagram')"
+                   :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, 'carousel')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                   :body-style="{padding:'4px 0'}">
+            <template #header>
+              <StarFilled />
+            </template>
+            <div class="moduleText">轮播图</div>
+          </el-card>
           <template v-for="i in customBoard">
             <el-card class="moduleCard" shadow="never" :draggable="true"
                      @dragstart="onDragStart($event, 'customBoard',i)"
@@ -143,6 +160,22 @@
             </template>
             <div class="moduleText">图片</div>
           </el-card>
+          <el-card class="moduleCard" shadow="never" :draggable="true"
+                   @dragstart="onDragStart($event, 'video')" :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, 'timeline')" :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'}"
@@ -224,6 +257,15 @@
             <PieNode :inputData=getInputData(pieNodeProps.id) v-bind="pieNodeProps"
                      @resize="resize"></PieNode>
           </template>
+          <template #node-nightingaleRoseDiagram="nightingaleRoseDiagramNodeProps">
+            <NightingaleRoseDiagramNode :inputData=getInputData(nightingaleRoseDiagramNodeProps.id)
+                                        v-bind="nightingaleRoseDiagramNodeProps"
+                                        @resize="resize"></NightingaleRoseDiagramNode>
+          </template>
+          <template #node-carousel="carouselNodeProps">
+            <CarouselNode :inputData=getInputData(carouselNodeProps.id) v-bind="carouselNodeProps"
+                          @resize="resize"></CarouselNode>
+          </template>
           <template #node-data="dataNodeProps">
             <DataNode :inputData=getInputData(dataNodeProps.id) v-bind="dataNodeProps"
                       @resize="resize"></DataNode>
@@ -236,6 +278,14 @@
             <ImgNode :inputData=getInputData(imgNodeProps.id) v-bind="imgNodeProps"
                      @resize="resize"></ImgNode>
           </template>
+          <template #node-video="videoNodeProps">
+            <VideoNode :inputData=getInputData(videoNodeProps.id) v-bind="videoNodeProps"
+                       @resize="resize"></VideoNode>
+          </template>
+          <template #node-timeline="timelineNodeProps">
+            <TimelineNode :inputData=getInputData(timelineNodeProps.id) v-bind="timelineNodeProps"
+                          @resize="resize"></TimelineNode>
+          </template>
           <template #node-inputNode="inputNodeProps">
             <InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps"
                        @resize="resize"></InputNode>
@@ -333,6 +383,12 @@
             <el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
               <el-input v-model="nodeAttrForm.field" />
             </el-form-item>
+            <el-form-item label="时间戳字段名" v-if="Object.keys(nodeAttrForm).includes('timestampField')">
+              <el-input v-model="nodeAttrForm.timestampField" />
+            </el-form-item>
+            <el-form-item label="是否显示时间戳" v-if="Object.keys(nodeAttrForm).includes('isTimestamp')">
+              <el-switch v-model="nodeAttrForm.isTimestamp" />
+            </el-form-item>
             <el-form-item label="开始时间字段名" v-if="Object.keys(nodeAttrForm).includes('startTimeId')">
               <el-input v-model="nodeAttrForm.startTimeId" />
             </el-form-item>
@@ -389,9 +445,15 @@
             <el-form-item label="文字颜色" v-if="Object.keys(nodeAttrForm).includes('color')">
               <el-color-picker v-model="nodeAttrForm.color" 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>
             <el-form-item label="图片路径" v-if="Object.keys(nodeAttrForm).includes('imgSrc')">
               <el-input v-model="nodeAttrForm.imgSrc" style="width: 100%" />
             </el-form-item>
+            <el-form-item label="视频路径" v-if="Object.keys(nodeAttrForm).includes('videoSrc')">
+              <el-input v-model="nodeAttrForm.videoSrc" style="width: 100%" />
+            </el-form-item>
             <el-form-item label="标题" v-if="Object.keys(nodeAttrForm).includes('title')">
               <el-input v-model="nodeAttrForm.title" style="width: 100%" />
             </el-form-item>
@@ -415,6 +477,29 @@
             <el-form-item label="饼图标签" v-if="Object.keys(nodeAttrForm).includes('label')">
               <el-switch v-model="nodeAttrForm.label" active-text="显示" inactive-text="隐藏" />
             </el-form-item>
+            <el-form-item label="轮播设置" v-if="Object.keys(nodeAttrForm).includes('swiperOptions')">
+              <el-button plain @click="swiperOptionsVisible = true">
+                配置轮播图
+              </el-button>
+            </el-form-item>
+            <el-form-item label="图片显示方式" v-if="Object.keys(nodeAttrForm).includes('imageFit')">
+              <el-select
+                v-model="nodeAttrForm.imageFit"
+                style="width: 100%"
+              >
+                <el-option
+                  label="填充满"
+                  value="fill"
+                />
+                <el-option
+                  label="固定比例"
+                  value="contain"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="图片集" v-if="Object.keys(nodeAttrForm).includes('carouselImages')">
+              <el-input-tag v-model="nodeAttrForm.carouselImages" placeholder="回车确认" />
+            </el-form-item>
             <el-form-item label="表格列设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
               <el-button plain @click="tableOptionsVisible = true">
                 配置表格
@@ -491,11 +576,11 @@
         </el-collapse-item>
       </el-collapse>
       <div v-else>
-        <div v-for="i in nodes.filter(e=>e.type!=='area').reverse()" class="nodeCard">
+        <div v-for="i in nodes.filter(e=>e.type!=='area').reverse()" class="nodeCard" @click="pitchOnNode(i)">
 
           <div style="display: inline-block;margin-right: 8px;">
             <el-dropdown trigger="click" @command="nodeOperate">
-              <span class="el-dropdown-link">
+              <span class="el-dropdown-link" @click.stop>
                 <el-icon class="settingIcon">
                   <Setting />
                 </el-icon>
@@ -643,6 +728,56 @@
       </div>
     </template>
   </el-dialog>
+  <el-dialog v-model="swiperOptionsVisible" title="轮播设置" width="500">
+    <el-form v-if="swiperOptionsVisible" :model="nodeAttrForm.swiperOptions" label-width="auto">
+      <el-form-item label="自动播放">
+        <el-switch v-model="nodeAttrForm.swiperOptions.autoplay" />
+      </el-form-item>
+      <el-form-item label="切换间隔">
+        <el-input-number :controls="false" v-model="nodeAttrForm.swiperOptions.delay" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="鼠标悬停停止">
+        <el-switch v-model="nodeAttrForm.swiperOptions.pauseOnMouseEnter" />
+      </el-form-item>
+      <el-form-item label="过渡时间">
+        <el-input-number :controls="false" v-model="nodeAttrForm.swiperOptions.speed" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="循环播放">
+        <el-switch v-model="nodeAttrForm.swiperOptions.loop" />
+      </el-form-item>
+      <el-form-item label="显示导航按钮">
+        <el-switch v-model="nodeAttrForm.swiperOptions.navigation" />
+      </el-form-item>
+      <el-form-item label="动画效果">
+        <el-select
+          v-model="nodeAttrForm.swiperOptions.effect"
+          style="width: 100%"
+        >
+          <el-option
+            label="默认"
+            value="slide"
+          />
+          <el-option
+            label="淡入淡出"
+            value="fade"
+          />
+          <el-option
+            label="立方体"
+            value="cube"
+          />
+          <el-option
+            label="翻转"
+            value="flip"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="swiperOptionsVisible = false">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
 
 </template>
 <script setup lang="ts">
@@ -661,6 +796,8 @@ import MultiBarsNode from './nodes/board/multiBarsNode.vue';
 import StaticDataNode from './nodes/data/staticDataNode.vue';
 import CustomBoardNode from './nodes/board/customBoardNode.vue';
 import PieNode from './nodes/board/pieNode.vue';
+import NightingaleRoseDiagramNode from './nodes/board/nightingaleRoseDiagramNode.vue';
+import CarouselNode from './nodes/board/carouselNode.vue';
 import DataNode from './nodes/data/dataNode.vue';
 import CustomDataNode from './nodes/data/customDataNode.vue';
 import MapNode from './nodes/form/mapNode.vue';
@@ -668,6 +805,8 @@ import InputNode from './nodes/form/inputNode.vue';
 import TimeNode from './nodes/form/timeNode.vue';
 import TextNode from './nodes/form/textNode.vue';
 import ImgNode from './nodes/form/imgNode.vue';
+import VideoNode from './nodes/form/videoNode.vue';
+import TimelineNode from './nodes/form/timelineNode.vue';
 import AreaNode from './nodes/other/areaNode.vue';
 import TableNode from './nodes/form/tableNode.vue';
 import ScrollTableNode from './nodes/form/scrollTableNode.vue';
@@ -697,6 +836,7 @@ const pageSettingVisible = ref(false);
 const pageSettingForm = ref({});
 const tableOptionsVisible = ref(false);
 const tableClassOptionsVisible = ref(false);
+const swiperOptionsVisible = ref(false);
 const pageTitle = ref('页面名称');
 const leftPanelState = ref('1');
 const pageData = ref({});
@@ -893,7 +1033,6 @@ const save = () => {
           } else {
             data[key] = null;
           }
-
         }
       });
       return {
@@ -1030,7 +1169,6 @@ const nodeOperate = (data) => {
       break;
     case 'copy':
       item.id = options.getId(item.type);
-      console.log(item);
       addNodes(item);
       break;
     case 'del':
@@ -1038,9 +1176,23 @@ const nodeOperate = (data) => {
       break;
   }
 };
+const pitchOnNode = (e) => {
+  nodes.value.forEach(v => {
+    if (v.id === e.id) {
+      v.selected = true;
+    } else {
+      v.selected = false;
+    }
+  });
+  nodeAttrForm.value = e.data.options;
+  nodeDataForm.value = e;
+  customDataForm.value = e.data.customData;
+};
 </script>
 <style lang="less" scoped>
-
+:deep( .swiper-slide-active) {
+  pointer-events: none;
+}
 .custom-content {
   display: flex;
   align-items: center;
diff --git a/src/views/boardGenerate/nodes/board/carouselNode.vue b/src/views/boardGenerate/nodes/board/carouselNode.vue
new file mode 100644
index 0000000..73c9c59
--- /dev/null
+++ b/src/views/boardGenerate/nodes/board/carouselNode.vue
@@ -0,0 +1,149 @@
+<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="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+      <swiper-container style="color: #fff" v-bind="swiperOptions" v-if="swiperShow"
+                        :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+        <swiper-slide v-for="i in list"
+                      :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+          <el-image :style="{width:'100%',height:'100%'}" :src="i" :fit="props.data.options.imageFit || 'contain'" />
+          />
+          <!--          <img :src="i" style="width: 100%; height: 100%; object-fit: contain;" />-->
+        </swiper-slide>
+      </swiper-container>
+      <div class="swiper-button-next"></div>
+      <div class="swiper-button-prev"></div>
+    </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';
+
+const swiperShow = ref(true);
+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 list = ref([
+  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+]);
+const swiperOptions = ref({});
+const getSwiperOptions = () => {
+  let obj = {};
+  let data = props.data.options.swiperOptions || {};
+  if (data.autoplay) {
+    obj.autoplay = {};
+    if (data.delay > 0) {
+      obj.autoplay = {
+        delay: data.delay
+      };
+    }
+    if (data.pauseOnMouseEnter) {
+      obj.pauseOnMouseEnter = data.pauseOnMouseEnter;
+    }
+  }
+  if (data.speed) {
+    obj.speed = data.speed;
+  }
+  if (data.loop) {
+    obj.loop = data.loop;
+  }
+  if (data.navigation) {
+    obj.navigation = { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' };
+  }
+  if (data.effect) {
+    obj.effect = data.effect;
+  }
+  swiperOptions.value = obj;
+};
+watch(() => JSON.parse(JSON.stringify(props.data?.options?.swiperOptions || '{}')), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    swiperShow.value = false;
+    getSwiperOptions();
+    nextTick(() => {
+      swiperShow.value = true;
+    });
+  }
+}, { deep: true, immediate: true });
+watch(() => JSON.parse(JSON.stringify(props.data?.options?.carouselImages || '[]')), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    if (props.data?.options?.carouselImages?.length >= 1) {
+      list.value = props.data?.options?.carouselImages;
+    }
+  }
+}, { deep: true, immediate: true });
+onMounted(() => {
+});
+const emit = defineEmits(['resize']);
+const resize = (e) => {
+  emit('resize', e, props.id);
+};
+</script>
+<style scoped>
+.custom-node {
+  width: 100%;
+  height: 100%;
+
+  .swiper-button-next {
+    right: 0;
+    opacity: 0;
+    transition: all 0.3s ease;
+  }
+
+  .swiper-button-prev {
+    left: 0;
+    opacity: 0;
+    transition: all 0.3s ease;
+  }
+
+  &:hover {
+    .swiper-button-next {
+      right: 10px;
+      opacity: 1;
+    }
+
+    .swiper-button-prev {
+      left: 10px;
+      opacity: 1;
+    }
+  }
+}
+</style>
diff --git a/src/views/boardGenerate/nodes/board/nightingaleRoseDiagramNode.vue b/src/views/boardGenerate/nodes/board/nightingaleRoseDiagramNode.vue
new file mode 100644
index 0000000..9e22658
--- /dev/null
+++ b/src/views/boardGenerate/nodes/board/nightingaleRoseDiagramNode.vue
@@ -0,0 +1,165 @@
+<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="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+      <div style="width: 100%;height: 100%" ref="chartRef" />
+    </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 * as echarts from 'echarts';
+
+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 chartRef = ref();
+let chart = null;
+const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
+const getOption = () => {
+  const chartOption = {
+    title: {
+      text: props.data.options.title || '设备运行数量',
+      textStyle: {
+        fontSize: 12,
+        fontWeight: 400,
+        color: '#fff'
+      },
+      left: '0',
+      top: '5%'
+    },
+    legend: {
+      show: props.data?.options?.legend || false,
+      icon: 'circle',
+      top: '5%',
+      right: '5%',
+      itemWidth: 6,
+      itemGap: 20,
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    tooltip: {
+      show: props.data?.options?.tooltip || false,
+      trigger: 'axis',
+      axisPointer: {
+        label: {
+          show: true,
+          backgroundColor: '#fff',
+          color: '#000',
+          borderColor: 'rgba(0,0,0,0)',
+          shadowColor: 'rgba(0,0,0,0)',
+          shadowOffsetY: 0
+        },
+        lineStyle: {
+          width: 0
+        }
+      },
+      backgroundColor: '#fff',
+      textStyle: {
+        color: '#000'
+      },
+      padding: [10, 10],
+      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
+    },
+    grid: {
+      top: '30%',
+      bottom: '10%'
+    },
+    series: [
+      {
+        type: 'pie',
+        roseType: 'area',
+        radius: '50%',
+        label: {
+          show: props.data?.options?.label || false,
+          formatter: '{b}:  {d}%'
+        }
+      }
+    ]
+  };
+  let xData = [props.inputData?.x1 || []];
+  let yData = [props.inputData?.y1 || []];
+  console.log(chartOption);
+  let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
+  let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
+  Array(length).fill(0).forEach((_, i) => {
+    let item = [];
+    xData.forEach(e => {
+      item.push(e[i]);
+    });
+    yData.forEach(e => {
+      item.push(e[i]);
+    });
+    source.push(item);
+  });
+  console.log(source);
+  return {
+    ...chartOption,
+    dataset: {
+      source
+    }
+  };
+};
+onMounted(() => {
+  chart = echarts.init(chartRef.value, 'macarons', {
+    renderer: 'svg'
+  });
+  chart.setOption(getOption(), true);
+});
+watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    chart && chart.setOption(getOption(), true);
+  }
+}, { deep: true, immediate: true });
+watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    chart?.resize();
+  }
+}, { deep: true, immediate: true });
+const emit = defineEmits(['resize']);
+const resize = (e) => {
+  chart.resize();
+  emit('resize', e, props.id);
+};
+</script>
+<style scoped>
+.custom-node {
+  width: 100%;
+  height: 100%;
+}
+
+</style>
diff --git a/src/views/boardGenerate/nodes/form/timelineNode.vue b/src/views/boardGenerate/nodes/form/timelineNode.vue
new file mode 100644
index 0000000..4218a53
--- /dev/null
+++ b/src/views/boardGenerate/nodes/form/timelineNode.vue
@@ -0,0 +1,86 @@
+<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="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+      <el-timeline style="width: 100%">
+        <el-timeline-item
+          :hide-timestamp="!props.data.options.isTimestamp"
+          placement="top"
+          v-for="(activity, index) in list"
+          :key="index"
+          :style="{'--el-text-color-secondary': props.data.options.timestampColor}"
+          :timestamp="activity[props.data.options.timestampField || 'timestamp']"
+        >
+          <span :style="{color: props.data.options.color}">
+          {{ activity[props.data.options.field || 'content'] }}
+          </span>
+        </el-timeline-item>
+      </el-timeline>
+    </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';
+
+const list = ref([
+  {
+    content: '事件1',
+    timestamp: '2018-04-15'
+  },
+  {
+    content: '事件2',
+    timestamp: '2018-04-13'
+  },
+  {
+    content: '事件3',
+    timestamp: '2018-04-11'
+  }
+]);
+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);
+};
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+</style>
+
diff --git a/src/views/boardGenerate/nodes/form/videoNode.vue b/src/views/boardGenerate/nodes/form/videoNode.vue
new file mode 100644
index 0000000..bc0a3d7
--- /dev/null
+++ b/src/views/boardGenerate/nodes/form/videoNode.vue
@@ -0,0 +1,75 @@
+<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="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+
+      <video autoplay muted playsinline :width="props.dimensions.width" :height="props.dimensions.height" controls
+             v-if="videoShow">
+        <source :src="props.inputData?.videoSrc ||props.data.options.videoSrc" type="video/mp4">
+        您的浏览器不支持播放视频。
+      </video>
+    </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';
+
+const videoShow = ref(true);
+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
+  }
+});
+
+watch(() => JSON.parse(JSON.stringify([props.data?.options?.videoSrc, props.inputData?.videoSrc])), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    videoShow.value = false;
+    nextTick(() => {
+      videoShow.value = true;
+    });
+  }
+}, { deep: true, immediate: true });
+
+const emit = defineEmits(['resize']);
+const resize = (e) => {
+  emit('resize', e, props.id);
+};
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+</style>
+
diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js
index b58b947..765ee3e 100644
--- a/src/views/boardGenerate/tool.js
+++ b/src/views/boardGenerate/tool.js
@@ -15,7 +15,7 @@ const getOption = (e) => {
     return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true };
   } else if (e === 'curve' || e === 'multiCurves') {
     return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true };
-  } else if (e === 'pie') {
+  } else if (e === 'pie' || e === 'nightingaleRoseDiagram') {
     return { title: '', yNames: [], tooltip:true, legend:true,label:true };
   } else if (e === 'customBoard') {
     return { title: '', yNames: [] };
@@ -35,6 +35,10 @@ const getOption = (e) => {
     return { text: '文字', align: '', color: '#fff' };
   } else if (e === 'img') {
     return { imgSrc: '' };
+  } else if (e === 'video') {
+    return { videoSrc: '' };
+  } else if (e === 'timeline') {
+    return { color: '#fff',timestampColor: '#fff', field: 'content', timestampField: 'timestamp', isTimestamp: true };
   } else if (e === 'scrollTable' || e === 'table') {
     return {
       tableOptions: [],
@@ -46,6 +50,8 @@ const getOption = (e) => {
       thBgColor: '#fff',
       tdBgColor: ['#000']
     };
+  } else if (e === 'carousel') {
+    return { swiperOptions: {}, imageFit: 'contain', carouselImages: [] };
   } else {
     return {};
   }
diff --git a/src/views/boardGenerate/view.vue b/src/views/boardGenerate/view.vue
index c316868..88318ad 100644
--- a/src/views/boardGenerate/view.vue
+++ b/src/views/boardGenerate/view.vue
@@ -48,15 +48,35 @@
       <template v-if="i.type === 'img'">
         <ImgNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></ImgNode>
       </template>
+      <template v-if="i.type === 'video'">
+        <VideoNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></VideoNode>
+      </template>
+      <template v-if="i.type === 'timeline'">
+        <TimelineNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></TimelineNode>
+      </template>
       <template v-if="i.type === 'pie'">
         <PieNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></PieNode>
       </template>
+      <template v-if="i.type === 'nightingaleRoseDiagram'">
+        <NightingaleRoseDiagramNode :isView="true" :inputData=getInputData(i.id)
+                                    v-bind="i"></NightingaleRoseDiagramNode>
+      </template>
+      <template v-if="i.type === 'carousel'">
+        <CarouselNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CarouselNode>
+      </template>
+      <template v-if="i.type === 'table'">
+        <TableNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></TableNode>
+      </template>
+      <template v-if="i.type === 'scrollTable'">
+        <ScrollTableNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></ScrollTableNode>
+      </template>
 
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
+import AreaNode from './nodes/other/areaNode.vue';
 import TimeNode from './nodes/form/timeNode.vue';
 import DataNode from './nodes/data/dataNode.vue';
 import LineNode from './nodes/board/lineNode.vue';
@@ -67,13 +87,18 @@ import BarNode from './nodes/board/barNode.vue';
 import MultiBarsNode from './nodes/board/multiBarsNode.vue';
 import InputNode from './nodes/form/inputNode.vue';
 import MapNode from './nodes/form/mapNode.vue';
-import AreaNode from './nodes/other/areaNode.vue';
 import CustomBoardNode from './nodes/board/customBoardNode.vue';
 import CustomDataNode from './nodes/data/customDataNode.vue';
 import TextNode from './nodes/form/textNode.vue';
 import ImgNode from './nodes/form/imgNode.vue';
+import VideoNode from './nodes/form/videoNode.vue';
+import TimelineNode from './nodes/form/timelineNode.vue';
 import PieNode from '@/views/boardGenerate/nodes/board/pieNode.vue';
+import NightingaleRoseDiagramNode from './nodes/board/nightingaleRoseDiagramNode.vue';
+import CarouselNode from './nodes/board/carouselNode.vue';
 import StaticDataNode from './nodes/data/staticDataNode.vue';
+import TableNode from './nodes/form/tableNode.vue';
+import ScrollTableNode from './nodes/form/scrollTableNode.vue';
 import { getBoardApi } from '@/views/boardGenerate/api/boardList';
 
 const router = useRouter();