修改看板

src/views/boardGenerate/index1.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="boardGenerate">
     <div class="top">
+      <el-button @click="nodes.forEach(e=>e.draggable =true)">11</el-button>
       <div class="componentMenu">
         <el-popover
           :width="880"
@@ -284,15 +285,15 @@
               </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'}"
-                     :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'}"-->
+            <!--                     :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, 'scrollTable')"
                      :style="{display:'inline-block',margin:'0 4px 4px 0'}"
@@ -345,9 +346,9 @@
             <!--              </el-icon>-->
             <!--            </div>-->
             <div class="isLock">
-              <el-icon style="cursor: pointer" color="#fff" :size="16" @click="i.data.isLock = !i.data.isLock">
-                <Unlock v-if="!i.data.isLock" />
-                <Lock v-if="i.data.isLock" />
+              <el-icon style="cursor: pointer" color="#fff" :size="16" @click="i.draggable = !i.draggable">
+                <Unlock v-if="i.draggable" />
+                <Lock v-if="!i.draggable" />
               </el-icon>
             </div>
             <div class="icon">
@@ -400,7 +401,8 @@
                             @resize="resize"></CustomDataNode>
           </template>
           <template #node-line="lineNodeProps">
-            <LineNode :inputData=getInputData(lineNodeProps.id) v-bind="lineNodeProps"
+            <LineNode :inputData=getInputData(lineNodeProps.id)
+                      v-bind="lineNodeProps"
                       @resize="resize"></LineNode>
           </template>
           <template #node-multiLines="multiLinesNodeProps">
@@ -996,6 +998,84 @@
                 <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('defaultDataType')">
+                  <el-select
+                    clearable
+                    effect="light"
+                    v-model="nodeAttrForm.defaultDataType"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="单折线数据"
+                      value="line"
+                    />
+                    <el-option
+                      label="单曲线数据"
+                      value="curve"
+                    />
+                    <el-option
+                      label="单柱状图数据"
+                      value="bar"
+                    />
+                    <el-option
+                      label="多折线数据"
+                      value="multiLines"
+                    />
+                    <el-option
+                      label="多曲线数据"
+                      value="multiCurves"
+                    />
+                    <el-option
+                      label="多柱状图数据"
+                      value="multiBars"
+                    />
+                    <el-option
+                      label="饼图数据"
+                      value="pie"
+                    />
+                    <el-option
+                      label="仪表盘数据"
+                      value="dashboard"
+                    />
+                    <el-option
+                      label="雷达图数据"
+                      value="radar"
+                    />
+                    <el-option
+                      label="轮播图数据"
+                      value="carousel"
+                    />
+                    <el-option
+                      label="图片数据"
+                      value="image"
+                    />
+                    <el-option
+                      label="视频数据"
+                      value="video"
+                    />
+                    <el-option
+                      label="时间线数据"
+                      value="timeline"
+                    />
+                    <el-option
+                      label="翻牌器数据"
+                      value="digitalFlop"
+                    />
+                    <el-option
+                      label="表格数据"
+                      value="table"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="图表颜色" v-if="Object.keys(nodeAttrForm).includes('seriesColor')">
+                  <el-color-picker v-model="nodeAttrForm.seriesColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="饼图中心位置" v-if="Object.keys(nodeAttrForm).includes('pieCenter')">
+                  <el-slider v-model="nodeAttrForm.pieCenter" :min="0" :max="100" />
+                </el-form-item>
+                <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-collapse-item>
             </el-collapse>
           </el-form>
@@ -1344,6 +1424,7 @@ onMounted(async () => {
             y: e.posY
           },
           type: e.pointType,
+          draggable: e.fieldTwo,
           data: JSON.parse(e.dataContent)
         };
       }) : [{
@@ -1475,6 +1556,10 @@ const getInputData = (e) => {
 const selectTabs = (e) => {
   tabs.value = e;
 };
+const setPageData = () => {
+  pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value));
+  pageSettingVisible.value = false;
+};
 
 const pageSetting = () => {
   pageSettingVisible.value = true;
@@ -1507,6 +1592,7 @@ const save = () => {
         pagePointId: e.id,
         pagePointName: e.name,
         fieldOne: index,
+        fieldTwo: e.draggable,
         width: e.dimensions.width,
         height: e.dimensions.height,
         posX: e.position.x,
@@ -1651,6 +1737,7 @@ const pitchOnNode = (e) => {
   pointer-events: none !important;
 }
 
+
 .custom-content {
   display: flex;
   align-items: center;
@@ -1760,6 +1847,7 @@ const pitchOnNode = (e) => {
     background-color: #1C1F20;
     height: calc(100vh - var(--boardGenerateTopHeight));
     overflow: auto;
+
   }
 
   .right {
@@ -1930,3 +2018,7 @@ const pitchOnNode = (e) => {
   }
 }
 </style>
+<style>
+
+
+</style>

src/views/boardGenerate/nodes/board/annularNode.vue

@@ -102,7 +102,8 @@ const getOption = () => {
     series: [
       {
         type: 'pie',
-        radius: ['42%', '50%'],
+        center: [`${props.data?.options?.pieCenter || 50}%`, '50%'],
+        radius: [`${props.data?.options?.pieRadius?.[0] || 50}%`, `${props.data?.options?.pieRadius?.[1] || 50}%`],
         label: {
           show: props.data?.options?.label || false,
           formatter: '{b}:  {d}%'

src/views/boardGenerate/nodes/board/backgroundBarNode.vue

@@ -324,6 +324,7 @@ onMounted(() => {
     renderer: 'svg'
   });
   chart.setOption(defaultOption, true);
+  chart && chart.setOption(getOption(), false);
 });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {

src/views/boardGenerate/nodes/board/barNode.vue

@@ -61,7 +61,7 @@ const defaultOption = {
     top: '5%'
   },
   legend: {
-    show:props.data?.options?.legend||false,
+    show: props.data?.options?.legend || false,
     icon: 'circle',
     top: '5%',
     right: '5%',
@@ -72,7 +72,7 @@ const defaultOption = {
     }
   },
   tooltip: {
-    show:props.data?.options?.tooltip||false,
+    show: props.data?.options?.tooltip || false,
     trigger: 'axis',
     axisPointer: {
       label: {
@@ -172,7 +172,7 @@ const defaultOption = {
           color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
           type: props.data?.options?.yAxisSplitLineType || 'solid'
         }
-      },
+      }
     }
   ],
   series: [
@@ -180,15 +180,7 @@ const defaultOption = {
       type: 'bar',
       itemStyle: {
         normal: {
-          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-            offset: 0,
-            color: '#0372FF'
-          },
-            {
-              offset: 1,
-              color: '#75ECFF'
-            }
-          ])
+          color: props.data?.options?.seriesColor || colorList[0]
         }
       },
       barMaxWidth: 50,
@@ -207,10 +199,10 @@ const getOption = () => {
         text: props.data.options.title || ''
       },
     legend: {
-      show: props.data?.options?.legend || false,
+      show: props.data?.options?.legend || false
     },
     tooltip: {
-      show:props.data?.options?.tooltip||false,
+      show: props.data?.options?.tooltip || false
     },
       grid: {
         top: props.data?.options?.gridTop + '%' || '20%',
@@ -220,12 +212,82 @@ const getOption = () => {
       },
       xAxis: [
         {
-          name: props.data?.options?.xName || ''
+          name: props.data?.options?.xName || '',
+          nameLocation: props.data?.options?.xNameLocation || 'end',
+          boundaryGap: props.data?.options?.boundaryGap || false,
+          axisLine: {
+            show: props.data?.options?.xAxisLineShow || false,
+            lineStyle: {
+              color: props.data?.options?.xAxisLineColor || '#DCE2E8'
+            }
+          },
+          axisTick: {
+            show: props.data?.options?.xAxisTickShow || false,
+            inside: props.data?.options?.xAxisTickInside || false,
+            lineStyle: {
+              color: props.data?.options?.xAxisTickColor || '#DCE2E8'
+            }
+          },
+          axisLabel: {
+            show: props.data?.options?.xAxisLabelShow || false,
+            interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
+            inside: props.data?.options?.xAxisLabelInside || false,
+            formatter: props.data?.options?.xAxisLabelFormatter || null,
+            rotate: props.data?.options?.xAxisLabelRotate || 0,
+            color: props.data?.options?.xAxisLabelColor || '#fff',
+            fontSize: props.data?.options?.xAxisLabelFontSize || 12,
+            margin: props.data?.options?.xAxisLabelMargin || 3
+          },
+          splitLine: {
+            show: props.data?.options?.xAxisSplitLineShow || false,
+            lineStyle: {
+              color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
+              type: props.data?.options?.xAxisSplitLineType || 'solid'
+            }
+          }
         }
       ],
       yAxis: [
         {
-          name: props.data?.options?.yName || ''
+          name: props.data?.options?.yName || '',
+          nameLocation: props.data?.options?.yNameLocation || 'end',
+          axisLine: {
+            show: props.data?.options?.yAxisLineShow || false,
+            lineStyle: {
+              color: props.data?.options?.yAxisLineColor || '#DCE2E8'
+            }
+          },
+          axisTick: {
+            show: props.data?.options?.yAxisTickShow || false,
+            inside: props.data?.options?.yAxisTickInside || false,
+            lineStyle: {
+              color: props.data?.options?.yAxisTickColor || '#DCE2E8'
+            }
+          },
+          axisLabel: {
+            show: props.data?.options?.yAxisLabelShow || false,
+            interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
+            inside: props.data?.options?.yAxisLabelInside || false,
+            formatter: props.data?.options?.yAxisLabelFormatter || null,
+            rotate: props.data?.options?.yAxisLabelRotate || 0,
+            color: props.data?.options?.yAxisLabelColor || '#fff',
+            fontSize: props.data?.options?.yAxisLabelFontSize || 12,
+            margin: props.data?.options?.yAxisLabelMargin || 3
+          },
+          splitLine: {
+            show: props.data?.options?.yAxisSplitLineShow || false,
+            lineStyle: {
+              color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
+              type: props.data?.options?.yAxisSplitLineType || 'solid'
+            }
+          }
+        }
+      ],
+    series: [
+      {
+        lineStyle: {
+          color: props.data?.options?.seriesColor || colorList[0]
+        }
         }
       ]
     }
@@ -256,6 +318,7 @@ onMounted(() => {
     renderer: 'svg'
   });
   chart.setOption(defaultOption, true);
+  chart && chart.setOption(getOption(), false);
 });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {

src/views/boardGenerate/nodes/board/carouselNode.vue

@@ -103,15 +103,18 @@ watch(() => JSON.parse(JSON.stringify(props.data?.options?.swiperOptions || '{}'
     });
   }
 }, { deep: true, immediate: true });
-watch(() => JSON.parse(JSON.stringify(props.data?.options?.carouselImages || '[]')), (obj1, obj2) => {
+watch(() => [JSON.parse(JSON.stringify(props.data?.options?.carouselImages || '[]')), JSON.parse(JSON.stringify(props.inputData?.value || ''))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    if (props.data?.options?.carouselImages?.length >= 1) {
-      list.value = props.data?.options?.carouselImages;
-    }
+    let value = props.inputData?.value || props.data?.options?.carouselImages || [];
+    list.value = value;
+    swiperShow.value = false;
+    getSwiperOptions();
+    nextTick(() => {
+      swiperShow.value = true;
+    });
+    console.log(list.value);
   }
 }, { deep: true, immediate: true });
-onMounted(() => {
-});
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   emit('resize', e, props.id);

src/views/boardGenerate/nodes/board/curveNode.vue

@@ -185,16 +185,7 @@ const defaultOption = {
       yAxisIndex: 0,
       lineStyle: {
         width: 1,
-        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-          {
-            offset: 0,
-            color: '#9effff'
-          },
-          {
-            offset: 1,
-            color: '#9E87FF'
-          }
-        ]),
+        color: props.data?.options?.seriesColor || colorList[0],
         shadowColor: 'rgba(158,135,255, 0.3)',
         shadowBlur: 10,
         shadowOffsetY: 20
@@ -302,7 +293,10 @@ const getOption = () => {
       {
         showSymbol: props.data?.options?.lineSymbolShow || false,
         symbolSize: props.data?.options?.lineSymbolSize || 5,
-        symbol: props.data?.options?.lineSymbolType || 'circle'
+        symbol: props.data?.options?.lineSymbolType || 'circle',
+        lineStyle: {
+          color: props.data?.options?.seriesColor || colorList[0]
+        }
       }
     ]
   };
@@ -332,6 +326,7 @@ onMounted(() => {
     renderer: 'svg'
   });
   chart.setOption(defaultOption, true);
+  chart && chart.setOption(getOption(), false);
 });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {

src/views/boardGenerate/nodes/board/dashboardNode.vue

@@ -50,71 +50,128 @@ const chartRef = ref();
 let chart = null;
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
 const getOption = () => {
+  let value = props.inputData?.value || 0;
+  const width = props.dimensions?.width || 300;
+
+  const baseFontSize = width * 0.08;
+  const tickFontSize = baseFontSize * 0.6;
+  const tickDistance = width * 0.04;
+
+  const progressBarWidth = width * 0.02;
+  const tickLineWidth = width * 0.003;
+  const splitLineWidth = width * 0.006;
   const chartOption = {
-    title: {
-      text: props.data.options.title || '设备运行数量',
-      textStyle: {
-        fontSize: 12,
-        fontWeight: 400,
-        color: '#fff'
-      },
-      left: '0',
-      top: '5%'
-    },
-    grid: {
-      top: '30%',
-      bottom: '10%'
-    },
     series: [
+      // 1. 指针 + 数值
       {
         type: 'gauge',
-        progress: {
+        startAngle: 225,
+        endAngle: -45,
+        radius: '60%',
+        pointer: {
           show: true,
-          width: props.dimensions.width / 30
-        },
-        axisLine: {
-          lineStyle: {
-            width: props.dimensions.width / 30
-          }
-        },
-        axisTick: {
-          show: false
-        },
-        splitLine: {
-          length: props.dimensions.width / 30,
-          lineStyle: {
-            width: 2,
-            color: '#fff'
-          }
-        },
-        axisLabel: {
-          distance: props.dimensions.width / 30 + 10,
-          color: '#fff',
-          fontSize: props.dimensions.width / 30
-        },
-        anchor: {
-          show: true,
-          showAbove: true,
-          size: 25,
+          length: '60%',
+          width: width * 0.006, // ⬅️ 指针宽度自适应
           itemStyle: {
-            borderWidth: 6
+            color: '#00C2FF'
           }
         },
-        title: {
-          show: false
-        },
+        axisLine: { show: false },
+        progress: { show: false },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
         detail: {
           valueAnimation: true,
-          fontSize: props.dimensions.width / 10,
-          offsetCenter: [0, '70%']
+          fontSize: baseFontSize,
+          offsetCenter: [0, '30%'],
+          // formatter: '{value}%',
+          color: '#AEEBFF'
         },
-        data: [
-          {
-            value: 70
+        data: [{ value: value }]
+      },
+
+      // 2. 刻度线层
+      {
+        type: 'gauge',
+        startAngle: 225,
+        endAngle: -45,
+        radius: '70%',
+        pointer: { show: false },
+        axisLine: { show: false },
+        axisTick: {
+          distance: -10,
+          length: 6,
+          lineStyle: {
+            color: '#66D9FF',
+            width: tickLineWidth // ⬅️ 短刻度线宽度自适应
           }
-        ]
+        },
+        splitLine: {
+          distance: -10,
+          length: 10,
+          lineStyle: {
+            color: '#66D9FF',
+            width: splitLineWidth // ⬅️ 长刻度线宽度自适应
+          }
+        },
+        axisLabel: { show: false },
+        detail: { show: false },
+        data: [{ value: 72 }]
+      },
+
+      // 3. 刻度数字层
+      {
+        type: 'gauge',
+        startAngle: 225,
+        endAngle: -45,
+        radius: '80%',
+        pointer: { show: false },
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: {
+          distance: tickDistance,
+          color: '#B8EFFF',
+          fontSize: tickFontSize
+        },
+        detail: { show: false },
+        data: [{ value: 72 }]
+      },
+
+      // 4. 外圈进度条
+      {
+        type: 'gauge',
+        startAngle: 225,
+        endAngle: -45,
+        radius: '90%',
+        pointer: { show: false },
+        axisLine: {
+          lineStyle: {
+            width: progressBarWidth, // ⬅️ 进度条宽度自适应
+            color: [
+              [0.72, '#00D4FF'],
+              [1, '#004B6B']
+            ]
+          }
+        },
+        progress: { show: false },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        detail: { show: false },
+        data: [{ value: value }]
       }
-    ]
+    ],
+    title: {
+      text: props.data?.options.title,
+      left: 'center',
+      bottom: 10,
+      textStyle: {
+        fontSize: baseFontSize * 0.5,
+        color: '#AEEBFF'
+      }
+    }
   };
   return {
     ...chartOption

src/views/boardGenerate/nodes/board/lineBarNode.vue

@@ -270,6 +270,7 @@ onMounted(() => {
     renderer: 'svg'
   });
   chart.setOption(defaultOption, true);
+  chart && chart.setOption(getOption(), false);
 });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {

src/views/boardGenerate/nodes/board/lineNode.vue

@@ -185,7 +185,7 @@ const defaultOption = {
       yAxisIndex: 0,
       lineStyle: {
         width: 1,
-        color: colorList.value[0],
+        color: props.data?.options?.seriesColor || colorList.value[0],
         shadowColor: 'rgba(158,135,255, 0.3)',
         shadowBlur: 10,
         shadowOffsetY: 20
@@ -294,7 +294,10 @@ const getOption = () => {
       {
         showSymbol: props.data?.options?.lineSymbolShow || false,
         symbolSize: props.data?.options?.lineSymbolSize || 5,
-        symbol: props.data?.options?.lineSymbolType || 'circle'
+        symbol: props.data?.options?.lineSymbolType || 'circle',
+        lineStyle: {
+          color: props.data?.options?.seriesColor || colorList.value[0],
+        },
       }
     ]
   };
@@ -324,6 +327,7 @@ onMounted(() => {
     renderer: 'svg'
   });
   chart.setOption(defaultOption, true);
+  chart && chart.setOption(getOption(), false);
 });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {

src/views/boardGenerate/nodes/board/multiBarsNode.vue

@@ -170,15 +170,7 @@ const getOption = () => {
         type: 'bar',
         itemStyle: {
           normal: {
-            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-              offset: 0,
-              color: '#0372FF'
-            },
-              {
-                offset: 1,
-                color: '#75ECFF'
-              }
-            ])
+            color: props.data?.options?.seriesColor || colorList[0],
           }
         },
         barMaxWidth: 50,

src/views/boardGenerate/nodes/board/multiCurvesNode.vue

@@ -175,16 +175,7 @@ const getOption = () => {
         showSymbol: false,
         lineStyle: {
           width: 1,
-          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-            {
-              offset: 0,
-              color: '#9effff'
-            },
-            {
-              offset: 1,
-              color: '#9E87FF'
-            }
-          ]),
+          color: props.data?.options?.seriesColor || colorList[0],
           shadowColor: 'rgba(158,135,255, 0.3)',
           shadowBlur: 10,
           shadowOffsetY: 20

src/views/boardGenerate/nodes/board/multiLinesNode.vue

@@ -196,7 +196,7 @@ const getOption = () => {
         yAxisIndex: 0,
         lineStyle: {
           width: 1,
-          color: colorList.value[0],
+          color: props.data?.options?.seriesColor || colorList.value[0],
           shadowColor: 'rgba(158,135,255, 0.3)',
           shadowBlur: 10,
           shadowOffsetY: 20
@@ -220,6 +220,7 @@ const getOption = () => {
     });
     source.push(item);
   });
+  console.log(source);
   return {
     ...chartOption,
     dataset: {

src/views/boardGenerate/nodes/board/nightingaleRoseDiagramNode.vue

@@ -104,6 +104,7 @@ const getOption = () => {
         type: 'pie',
         roseType: 'area',
         radius: '50%',
+        center: [`${props.data?.options?.pieCenter || 50}%`, '50%'],
         label: {
           show: props.data?.options?.label || false,
           formatter: '{b}:  {d}%'

src/views/boardGenerate/nodes/board/pieNode.vue

@@ -103,6 +103,7 @@ const getOption = () => {
       {
         type: 'pie',
         radius: '50%',
+        center: [`${props.data?.options?.pieCenter || 50}%`, '50%'],
         label: {
           show:props.data?.options?.label||false,
           formatter: '{b}:  {d}%'

src/views/boardGenerate/nodes/board/radarNode.vue

@@ -128,91 +128,65 @@ const getOption = () => {
       indicator: [
         {
           name: '数据1',
-          max: 88
+          // // max: 10
         },
         {
           name: '数据2',
-          max: 88
+          // // max: 10
         },
         {
           name: '数据3',
-          max: 88
+          // max: 10
         },
         {
           name: '数据4',
-          max: 88
+          // max: 10
         },
         {
           name: '数据5',
-          max: 88
+          // max: 10
         },
         {
           name: '数据6',
-          max: 88
+          // max: 10
         },
         {
           name: '数据7',
-          max: 88
+          // max: 10
         },
         {
           name: '数据8',
-          max: 88
+          // max: 10
         }
       ]
     },
-    series: [
-      {
-        name: '高一(1)班',
+    series: props.data.options?.yNames.map((value, index) => {
+      return {
+        name: props.inputData?.[`x${index + 1}`],
         type: 'radar',
         symbol: 'circle',
-        symbolSize: 10,
+        symbolSize: 3,
         areaStyle: {
           normal: {
-            color: 'rgba(245, 166, 35, 0.4)'
+            color: colorList[index] + '66'
           }
         },
         itemStyle: {
-          color: 'rgba(245, 166, 35, 1)',
-          borderColor: 'rgba(245, 166, 35, 0.3)',
-          borderWidth: 10
+          color: colorList[index] + 'FF',
+          borderColor: colorList[index] + '4C',
+          borderWidth: 2
         },
         lineStyle: {
           normal: {
             type: 'dashed',
 
-            color: 'rgba(245, 166, 35, 1)',
-            width: 2
+            color: colorList[index] + 'FF',
+            width: 1
           }
         },
-        data: [[80, 50, 55, 80, 50, 80, 48, 43]]
-      },
-      {
-        name: '高一(2)班',
-        type: 'radar',
-        symbol: 'circle',
-        symbolSize: 10,
-        itemStyle: {
-          normal: {
-            color: 'rgba(19, 173, 255, 1)',
-            borderColor: 'rgba(19, 173, 255, 0.4)',
-            borderWidth: 10
-          }
-        },
-        areaStyle: {
-          normal: {
-            color: 'rgba(19, 173, 255, 0.5)'
-          }
-        },
-        lineStyle: {
-          normal: {
-            color: 'rgba(19, 173, 255, 1)',
-            width: 2,
-            type: 'dashed'
-          }
-        },
-        data: [[60, 60, 65, 60, 70, 40, 80, 63]]
+        data: [(props.inputData?.[`y${index + 1}`] || []).map(e => parseFloat(e))]
       }
-    ]
+    })
   };
   let xData = [props.inputData?.x1 || []];
   let yData = [props.inputData?.y1 || []];

src/views/boardGenerate/nodes/data/staticDataNode.vue

@@ -77,6 +77,139 @@ watch(() => [JSON.parse(JSON.stringify(props.data.options?.defaultInputArea || '
     }
   }
 }, { deep: true, immediate: true });
+watch(() => props.data.options?.defaultDataType || '', (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    let type = props.data.options?.defaultDataType;
+    if (!type) return;
+    if (['line', 'curve', 'bar', 'pie'].includes(type)) {
+      props.data.options.defaultInputArea = JSON.stringify({
+        x1: ['模拟数据1', '模拟数据2', '模拟数据3'],
+        y1: [(Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2)]
+      });
+    }
+    if (['multiLines', 'multiCurves', 'multiBars'].includes(type)) {
+      props.data.options.defaultInputArea = JSON.stringify({
+        x1: ['模拟数据1', '模拟数据2', '模拟数据3'],
+        y1: [(Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2)],
+        y2: [(Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2)]
+      });
+    }
+    if (['dashboard'].includes(type)) {
+      props.data.options.defaultInputArea = JSON.stringify({
+        value: 20
+      });
+    }
+    if (['radar'].includes(type)) {
+      props.data.options.defaultInputArea = JSON.stringify({
+        x1: '模拟数据1',
+        x2: '模拟数据1',
+        y1: [(Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2)],
+        y2: [(Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2)]
+      });
+    }
+    if (['carousel'].includes(type)) {
+      props.data.options.defaultInputArea = JSON.stringify({
+        value: [
+          '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'
+        ]
+      });
+    }
+    if (['image'].includes(type)) {
+      props.data.options.defaultInputArea = JSON.stringify({
+        imgSrc: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
+      });
+    }
+    if (['video'].includes(type)) {
+      props.data.options.defaultInputArea = JSON.stringify({
+        videoSrc: 'https://www.w3schools.com/html/mov_bbb.mp4'
+      });
+    }
+    if (['timeline'].includes(type)) {
+      props.data.options.defaultInputArea = JSON.stringify({
+        data: [
+          {
+            content: '测试数据1',
+            timestamp: '2018-04-15'
+          },
+          {
+            content: '测试数据2',
+            timestamp: '2018-04-13'
+          },
+          {
+            content: '测试数据3',
+            timestamp: '2018-04-11'
+          }
+        ]
+      });
+      console.log(7);
+    }
+    if (['table'].includes(type)) {
+      props.data.options.defaultInputArea = JSON.stringify({
+        tableData: [
+          {
+            value1: '测试数据1-1',
+            value2: '测试数据1-2',
+            value3: '测试数据1-3'
+          },
+          {
+            value1: '测试数据2-1',
+            value2: '测试数据2-2',
+            value3: '测试数据2-3'
+          },
+          {
+            value1: '测试数据3-1',
+            value2: '测试数据3-2',
+            value3: '测试数据3-3'
+          },
+          {
+            value1: '测试数据4-1',
+            value2: '测试数据4-2',
+            value3: '测试数据4-3'
+          },
+          {
+            value1: '测试数据5-1',
+            value2: '测试数据5-2',
+            value3: '测试数据5-3'
+          },
+          {
+            value1: '测试数据6-1',
+            value2: '测试数据6-2',
+            value3: '测试数据6-3'
+          }
+        ]
+      });
+      console.log(8);
+    }
+
+    if (['digitalFlop'].includes(type)) {
+      props.data.options.defaultInputArea = JSON.stringify({
+        value: 10000
+      });
+    }
+    // console.log(input.value);
+    // if (isJSON(input.value)) {
+    //   console.log(input.value);
+    //   dataIsJson.value = true;
+    //   textArea.value && (textArea.value.textarea.style.backgroundColor = '#fff');
+    //   textArea.value && (textArea.value.textarea.style.color = '#606266');
+    //   let value = JSON.parse(input.value);
+    //   if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+    //     Object.keys(value).forEach(key => {
+    //       props.data.outputData[key] = value[key];
+    //     });
+    //   } else {
+    //     props.data.outputData[props.data.options?.field || 'input'] = value;
+    //   }
+    // }
+    // console.log(props.data.outputData);
+  }
+}, { deep: true, immediate: true });
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   emit('resize', e, props.id);

src/views/boardGenerate/nodes/form/digitalFlopNode.vue

@@ -60,9 +60,10 @@ const emit = defineEmits(['resize']);
 const resize = (e) => {
   emit('resize', e, props.id);
 };
-watch(() => JSON.parse(JSON.stringify(props.data?.options?.number)), (obj1, obj2) => {
+watch(() => [JSON.parse(JSON.stringify(props.data?.options?.number)), JSON.parse(JSON.stringify(props.inputData?.value || ''))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    list.value = (props.data.options.number || 0).toString().split('');
+    let value = props.inputData?.value || props.data.options.number || '';
+    list.value = value.toString().split('');
   }
 }, { deep: true, immediate: true });
 </script>

src/views/boardGenerate/nodes/form/scrollTableNode.vue

@@ -9,7 +9,7 @@
       <div style="background-color: #094170"
            :style="{ height:props.data.options.thHeight, color:props.data.options.thColor,backgroundColor:props.data.options?.thBgColor }">
         <div class="scrollTable" style="font-weight: bold;"
-             :style="{width: i.width || '100px',textAlign:i.align || 'left'}"
+             :style="{width: i.width || '100px',textAlign:i.align || 'left',lineHeight:props.data.options.thHeight}"
              v-for="i in props.data.options.tableOptions">
           {{ i.name }}
         </div>

src/views/boardGenerate/nodes/form/timelineNode.vue

@@ -73,6 +73,34 @@ const props = defineProps({
   }
 });
 
+watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    if (props.inputData?.data && props.inputData?.data.length > 0) {
+      list.value = props.inputData?.data?.map(e => {
+        return {
+          content: e[props.data.options.field],
+          timestamp: e[props.data.options.timestampField]
+        };
+      });
+      console.log(list.value);
+    } else {
+      list.value = [
+        {
+          content: '事件1',
+          timestamp: '2018-04-15'
+        },
+        {
+          content: '事件2',
+          timestamp: '2018-04-13'
+        },
+        {
+          content: '事件3',
+          timestamp: '2018-04-11'
+        }
+      ];
+    }
+  }
+}, { deep: true, immediate: true });
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   emit('resize', e, props.id);

src/views/boardGenerate/tool.js

@@ -57,7 +57,7 @@ const getOption = (e) => {
       lineSymbolShow: false,
       lineSymbolSize: 5,
       lineSymbolType: 'circle',
-      seriesColor:'#9E87FF',
+      seriesColor: '#9E87FF',
       tooltip: true,
       legend: true
     };
@@ -106,6 +106,7 @@ const getOption = (e) => {
       yAxisSplitLineShow: false,
       yAxisSplitLineColor: '#DCE2E8',
       yAxisSplitLineType: 'solid',
+      seriesColor: '#9E87FF',
       tooltip: true,
       legend: true
     };
@@ -156,6 +157,7 @@ const getOption = (e) => {
       yAxisSplitLineType: 'solid',
       tooltip: true,
       legend: true,
+      seriesColor: '#9E87FF',
       backgroundColor: 'rgba(180, 180, 180, 0.2)'
     };
   } else if (e === 'curve' || e === 'multiCurves') {
@@ -206,6 +208,7 @@ const getOption = (e) => {
       lineSymbolShow: false,
       lineSymbolSize: 5,
       lineSymbolType: 'circle',
+      seriesColor: '#9E87FF',
       tooltip: true,
       legend: true
     };
@@ -257,14 +260,29 @@ const getOption = (e) => {
       lineSymbolSize: 5,
       lineSymbolType: 'circle',
       tooltip: true,
-      legend: true
+      legend: true,
+      seriesColor: '#9E87FF'
     };
   } else if (e === 'radar') {
     return {
-      title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, tooltip: true, legend: true
+      title: '',
+      seriesColor: '#9E87FF',
+      yNames: [],
+      gridTop: 30,
+      gridLeft: 5,
+      gridBottom: 10,
+      gridRight: 10,
+      tooltip: true,
+      legend: true
+    };
+  } else if (e === 'pie' || e === 'nightingaleRoseDiagram') {
+    return {
+      title: '', yNames: [], tooltip: true, legend: true, label: true, pieCenter: 50
+    };
+  } else if (e === 'annular') {
+    return {
+      title: '', yNames: [], tooltip: true, legend: true, label: true, pieCenter: 50, pieRadius: [30, 70]
     };
-  } else if (e === 'pie' || e === 'nightingaleRoseDiagram' || e === 'annular') {
-    return { title: '', yNames: [], tooltip: true, legend: true, label: true };
   } else if (e === 'dashboard') {
     return { title: '', yNames: [], tooltip: true, legend: true, label: true };
   } else if (e === 'customBoard') {
@@ -272,7 +290,7 @@ const getOption = (e) => {
   } else if (e === 'data') {
     return { timeout: 5000 };
   } else if (e === 'staticData') {
-    return { defaultInputArea: '', field: 'input' };
+    return { defaultInputArea: '', field: 'input', defaultDataType: '' };
   } else if (e === 'customData') {
     return { timeout: 5000 };
   } else if (e === 'map') {
@@ -295,12 +313,12 @@ const getOption = (e) => {
     return {
       tableOptions: [],
       tableClassOption: {},
-      thHeight: '20px',
-      tdHeight: '20px',
-      thColor: '#fff',
-      tdColor: ['#fff'],
-      thBgColor: '#fff',
-      tdBgColor: ['#000']
+      thHeight: '32px',
+      tdHeight: '28px',
+      thColor: '#D6F4FF',
+      tdColor: ['#D6F4FF', '#D6F4FF', '#D6F4FF', '#D6F4FF'],
+      thBgColor: '#1E90FF',
+      tdBgColor: ['#0D2B3D', '#103B4C', '#14576B', '#187E99']
     };
   } else if (e === 'carousel') {
     return { swiperOptions: {}, imageFit: 'contain', carouselImages: [] };
@@ -337,7 +355,35 @@ const getNodeSize = (e) => {
     return { width: 100, height: 100 };
   }
 };
-
+const nameEnum = {
+  line: '折线',
+  multiLines: '多折线',
+  curve: '曲线',
+  multiCurves: '多曲线',
+  lineBar: '双轴图',
+  bar: '柱状图',
+  backgroundBar: '背景柱状图',
+  multiBars: '多柱状图',
+  pie: '饼图',
+  annular: '中空饼图',
+  dashboard: '仪表盘',
+  radar: '雷达图',
+  nightingaleRoseDiagram: '南丁格尔玫瑰图',
+  carousel: '轮播图',
+  map: '映射',
+  staticData: '静态数据',
+  customData: '自定义数据',
+  text: '文字',
+  inputNode: '输入框',
+  time: '时间',
+  img: '图片',
+  icon: '图标',
+  video: '视频',
+  timeline: '时间线',
+  digitalFlop: '数字翻牌器',
+  scrollTable: '滚动表格',
+  background: '背景'
+};
 const tool = () => {
   const nodeType = ref('');
   const customData = ref({ script: '' });
@@ -366,7 +412,8 @@ const tool = () => {
     const nodeId = getId(nodeType.value);
     const newNode = {
       id: nodeId,
-      name: nodeType.value,
+      name: nameEnum[nodeType.value],
+      draggable: true,
       type: nodeType.value,
       dimensions,
       position,

src/views/boardGenerate/view.vue

@@ -2,7 +2,7 @@
   <div class="content"
        :style='`width:${area?.width || "100%"};height:${area?.height || "100%"};background-image:url(${area?.bg})`'>
     <div v-for="i in nodes" class="node"
-         :style="{left: (i.position?.x / (area?.width|| 1920))*100 +'%',top: (i.position?.y / (area?.height || 1080))*100 +'%'}">
+         :style="{left: (i.position?.x / (parseFloat(area?.width)|| 1920))*100 +'%',top: (i.position?.y / (parseFloat(area?.height) || 1080))*100 +'%'}">
       <template v-if="i.type === 'customBoard'">
         <CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
       </template>