修改看板配置项

src/utils/request.ts

@@ -195,7 +195,7 @@ service.interceptors.response.use(
     } else if (message.includes('Request failed with status code')) {
       message = '系统接口' + message.substr(message.length - 3) + '异常';
     }
-    ElMessage({ message: message, type: 'error', duration: 5 * 1000 });
+    // ElMessage({ message: message, type: 'error', duration: 5 * 1000 });
     return Promise.reject(error);
   }
 );

src/views/boardGenerate/boardList.vue

@@ -18,11 +18,11 @@
         <el-table-column prop="pageConfigName" label="页面名称" align="center" />
         <el-table-column label="操作" width="300" align="center">
           <template #default="scope">
-            <el-button text type="primary" size="small" @click="compileBoard(scope.row)">编辑
+            <el-button text type="primary" size="small" @click="compileBoard(scope.row)">设计
             </el-button>
             <el-button text type="primary" size="small" @click="viewboard(scope.row)">查看
             </el-button>
-            <el-button text type="primary" size="small" @click="editDataSource(scope.row)">修改
+            <el-button text type="primary" size="small" @click="editDataSource(scope.row)">编辑
             </el-button>
             <el-button
               size="small"
@@ -91,7 +91,7 @@ const getList = async () => {
   getBoardListApi(selectForm.value)
     .then((res) => {
       console.log(res);
-      tableData.value = res.rows;
+      tableData.value = res.rows.filter(e=>e.pageConfigId >60011);
       total.value = res.total;
     })
     .finally(() => {

src/views/boardGenerate/index.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="boardGenerate">
     <div class="top">
-      <span style="color: #fff">
-      </span>
-      <!--      <el-button @click="nodes.forEach(e=>e.draggable =true)">11</el-button>-->
       <div class="componentMenu">
         <el-popover
           :width="880"
@@ -193,7 +190,7 @@
             <!--              </template>-->
             <!--              <div class="moduleText">设备数据</div>-->
             <!--            </el-card>-->
-            <template v-for="i in customData">
+            <template v-for="i in customData.slice(17,customData.length)">
               <el-card class="moduleCard" shadow="never" :draggable="true"
                        @dragstart="onDragStart($event, 'customData',i)"
                        :style="{display:'inline-block',margin:'0 4px 4px 0'}"
@@ -384,6 +381,35 @@
             </el-card>
           </div>
         </el-popover>
+        <el-popover
+          :width="620"
+          trigger="click"
+          placement="bottom-start"
+        >
+          <template #reference>
+            <div style="margin-left: 30px;display: inline-block;vertical-align: top">
+              <el-icon color="#fff" style="margin-top: 15px;">
+                <Opportunity />
+              </el-icon>
+              <el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
+                <ArrowDown />
+              </el-icon>
+            </div>
+          </template>
+          <div>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'menu')" :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-icon><Menu /></el-icon>
+<!--                  <el-image style="width:50px;height: 50px;text-align: center" :src="textImg" fit="contain" />-->
+                </div>
+              </template>
+              <div class="moduleText">菜单</div>
+            </el-card>
+          </div>
+        </el-popover>
       </div>
       <div class="optionsMenu">
         <el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top"
@@ -393,9 +419,9 @@
         <el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top" @click="save">
           <DocumentChecked />
         </el-icon>
-        <el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top" @click="clear">
+        <!--        <el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top" @click="clear">-->
-          <View />
+        <!--          <View />-->
-        </el-icon>
+        <!--        </el-icon>-->
       </div>
     </div>
     <div class="left">
@@ -635,8 +661,12 @@
             <PaginationNode v-bind="paginationNodeProps" :inputData="getInputData(paginationNodeProps.id)"
                             @resize="(e) => handleResizeStop(e, paginationNodeProps)" />
           </template>
-        </VueFlow>
 
+          <template #node-menu="menuNodeProps">
+            <MenuNode v-bind="menuNodeProps" :inputData="getInputData(menuNodeProps.id)"
+                            @resize="(e) => handleResizeStop(e, menuNodeProps)" />
+          </template>
+        </VueFlow>
       </FlowRuler>
     </div>
     <div class="right">
@@ -675,7 +705,7 @@
           </el-form>
         </div>
         <div class="tabItem" v-if="Object.keys(nodeAttrForm).length>0 && tabs === 1">
-          <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
+          <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px" :key="key">
             <el-collapse v-model="collapseActiveName" accordion expand-icon-position="left">
               <el-collapse-item title="x轴设置" name="1" v-if="Object.keys(nodeAttrForm).includes('xName')">
                 <el-form-item label="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
@@ -1263,7 +1293,7 @@
     </div>
     <el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
       <el-form :model="pageSettingForm">
-        <el-form-item label="页面大小" label-width="80px">
+        <el-form-item label="页面大小" label-width="100px">
           <el-input v-model="pageSettingForm.width" style="width: calc(50% - 10px)" autocomplete="off"
                     placeholder="缺省则为不限制" />
           <span style="width: 20px;text-align: center">
@@ -1272,7 +1302,10 @@
           <el-input v-model="pageSettingForm.height" style="width: calc(50% - 10px)" autocomplete="off"
                     placeholder="缺省则为不限制" />
         </el-form-item>
-        <el-form-item label="页面背景" label-width="80px">
+        <el-form-item label="页面背景色" label-width="100px">
+          <el-color-picker v-model="pageSettingForm.bgColor" show-alpha />
+        </el-form-item>
+        <el-form-item label="页面背景图" label-width="100px">
           <el-upload
             class="avatar-uploader"
             :action="uploadFileUrl"
@@ -1581,7 +1614,18 @@ import textImg from './images/textImg.png';
 
 import FlowRuler from './FlowRuler.vue';
 import * as icon from '@element-plus/icons-vue';
-import { ArrowDown, Close, Delete, DocumentChecked, Lock, Plus, Setting, Unlock, View } from '@element-plus/icons-vue';
+import {
+  ArrowDown,
+  Close,
+  Delete,
+  DocumentChecked,
+  Lock,
+  Plus,
+  Setting,
+  Unlock,
+  Opportunity,
+  Menu
+} from '@element-plus/icons-vue';
 import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
 import tool, { options } from '@/views/boardGenerate/tool.js';
 import { v4 as uuidv4 } from 'uuid';
@@ -1614,6 +1658,8 @@ 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 MenuNode from './nodes/advancedComponents/menuNode.vue'
+
 import TimeNode from '@/views/boardGenerate/nodes/form/timeNode.vue';
 import TableNode from '@/views/boardGenerate/nodes/form/tableNode.vue';
 import MultiBarsNode from '@/views/boardGenerate/nodes/board/multiBarsNode.vue';
@@ -1632,6 +1678,7 @@ const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服
 const headers = ref(globalHeaders());
 const { onDragStart, onDrop, onDragOver } = tool();
 const router = useRouter();
+const key = ref(0);
 
 const isSnapToGrid = ref(false);
 const toggleSnapToGrid = (e) => {
@@ -1736,7 +1783,7 @@ onMounted(async () => {
         },
         data: {}
       }];
-      edges.value = data.designPageEdgesList.map(e => {
+      edges.value = data.designPageEdgesList?.map(e => {
         return {
           id: e.pageEdgesId,
           source: e.sourceNodeId,
@@ -1813,12 +1860,14 @@ const logEvent = async (eventname, event) => {
       nodeAttrForm.value = event.node.data.options;
       nodeDataForm.value = event.node;
       customDataForm.value = event.node.data.customData;
+      key.value += 1;
       break;
     case 'nodeDrag':
       if (event.nodes.length === 1) {
         nodeAttrForm.value = event.node.data.options;
         nodeDataForm.value = event.node;
         customDataForm.value = event.node.data.customData;
+        key.value += 1;
       } else {
         nodeAttrForm.value = {};
         nodeDataForm.value = {};
@@ -2040,6 +2089,7 @@ const pitchOnNode = (e) => {
     }
   });
   nodeAttrForm.value = e.data.options;
+  key.value += 1;
   nodeDataForm.value = e;
   customDataForm.value = e.data.customData;
 };

src/views/boardGenerate/nodes/advancedComponents/menuNode.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
+    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
+                 @resize="resize" />
+
+    <div class="custom-node"
+         :style="{textAlign:props.data.options.align,width:props.dimensions.width*props.ratioWidth+'px',lineHeight:props.dimensions.height*props.ratioHeight+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
+
+      <el-menu active-text-color="#ffd04b" background-color="#062852" class="el-menu-vertical-demo" default-active="2" text-color="#fff">
+        <template v-for="(i, index) in props.inputData?.data" :key="i.id">
+          <el-sub-menu :index="index">
+            <template #title>
+              <span>{{ i.locationAlias }}</span>
+            </template>
+            <el-menu-item @click="scrollToId(ii.id)" v-for="ii in i.children">{{ ii.locationAlias }}</el-menu-item>
+          </el-sub-menu>
+        </template>
+      </el-menu>
+
+    </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 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);
+};
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+</style>
+

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

@@ -16,8 +16,6 @@ import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
-
-
 const props = defineProps({
   ratioWidth: {
     type: Number,
@@ -124,7 +122,7 @@ const getOption = () => {
           }
         },
         center: [`${props.data?.options?.pieCenter || 50}%`, '50%'],
-        radius: [`${props.data?.options?.pieRadius?.[0] || 50}%`, `${props.data?.options?.pieRadius?.[1] || 50}%`],
+        radius: [`${props.data?.options?.pieRadius?.[0] || 0}%`, `${props.data?.options?.pieRadius?.[1] || 50}%`],
         label: {
           show: props.data?.options?.label || false,
           formatter: '{b}:  {d}%'

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

@@ -76,7 +76,7 @@ const getOption = () => {
   let source = [['product', ...props.data.options?.yNames || []]];
   const chartOption = {
     title: {
-      text: props.data.options.title || '设备运行数量',
+      text: props.data.options.title || ' ',
       textStyle: {
         fontSize: 12,
         fontWeight: 400,

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

@@ -76,7 +76,7 @@ const getOption = () => {
   let source = [['product', ...props.data.options?.yNames]];
   const chartOption = {
     title: {
-      text: props.data.options.title || '设备运行数量',
+      text: props.data.options.title || ' ',
       textStyle: {
         fontSize: 12,
         fontWeight: 400,

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

@@ -67,6 +67,7 @@ const sortData = (data) => {
     }
   });
   obj.sort((a, b) => a[0] - b[0]);
+  console.log(obj.map(e => e[1]) || []);
   return obj.map(e => e[1]) || [];
 };
 const getOption = () => {
@@ -76,7 +77,7 @@ const getOption = () => {
   let source = [['product', ...props.data.options?.yNames]];
   const chartOption = {
     title: {
-      text: props.data.options.title || '设备运行数量',
+      text: props.data.options.title || ' ',
       textStyle: {
         fontSize: 12,
         fontWeight: 400,
@@ -196,7 +197,7 @@ const getOption = () => {
         }
       }
     },
-    series: props.data.options?.yNames.map(() => {
+    series: props.data.options?.yNames.map((i,k) => {
       return {
         type: 'line',
         showSymbol: props.data?.options?.lineSymbolShow || false,
@@ -206,15 +207,15 @@ const getOption = () => {
         yAxisIndex: 0,
         lineStyle: {
           width: 1,
-          color: props.data?.options?.seriesColor || colorList.value[0],
+          color: props.data?.options?.seriesColor || colorList.value[k % colorList.length],
           shadowColor: 'rgba(158,135,255, 0.3)',
           shadowBlur: 10,
           shadowOffsetY: 20
         },
         itemStyle: {
           normal: {
-            color: colorList.value[0],
+            color: colorList.value[k % colorList.value.length],
-            borderColor: colorList.value[0]
+            borderColor: colorList.value[k % colorList.value.length],
           }
         }
       };

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

@@ -62,7 +62,7 @@ const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
 const getOption = () => {
   const chartOption = {
     title: {
-      text: props.data.options.title || '设备运行数量',
+      text: props.data.options.title || ' ',
       textStyle: {
         fontSize: 12,
         fontWeight: 400,

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

@@ -63,7 +63,7 @@ const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
 const getOption = () => {
   const chartOption = {
     title: {
-      text: props.data.options.title || '设备运行数量',
+      text: props.data.options.title || ' ',
       textStyle: {
         fontSize: 12,
         fontWeight: 400,

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

@@ -11,7 +11,7 @@
         :number="item"
         :height="props.dimensions.height*props.ratioHeight"
         background="#fff0"
-        :style="{fontSize:props.data.options.fontSize+'px',color:props.data.options.borderColor,'--number-roll-plus-width':((props.dimensions.width*props.ratioWidth) / props.data.options.numQuantity) - (props.data.options.isBorder? 2:0) +'px',border:props.data.options.isBorder?  ` 1px solid ${props.data.options.borderColor}` :''}"
+        :style="{fontSize:props.data.options.fontSize+'px',color:props.data.options.color,'--number-roll-plus-width':((props.dimensions.width*props.ratioWidth) / props.data.options.numQuantity) - (props.data.options.isBorder? 2:0) +'px',border:props.data.options.isBorder?  ` 1px solid ${props.data.options.borderColor}` :''}"
         v-for="(item, index) in list"
       ></vue-number-roll-plus>
     </div>
@@ -74,7 +74,8 @@ const resize = (e) => {
 };
 const padArray = (arr,x,value=0)=>{
   if (arr.length > x) {
-    return arr.slice(-x);
+    // return arr.slice(-x);
+    return arr.slice(0,x);
   } else if (arr.length < x) {
     const padding = new Array(x - arr.length).fill(value);
     return [...padding, ...arr];
@@ -86,6 +87,7 @@ const padArray = (arr,x,value=0)=>{
 watch(() => [JSON.parse(JSON.stringify(props.data?.options?.numQuantity)),JSON.parse(JSON.stringify(props.data?.options?.number)), JSON.parse(JSON.stringify(props.inputData?.value || ''))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
     let value = props.inputData?.value || props.data.options.number || '';
+    value = Math.ceil(parseFloat(value))
     list.value = padArray(value.toString().split(''),props.data.options.numQuantity)
   }
 }, { deep: true, immediate: true });

src/views/boardGenerate/nodes/other/areaNode.vue

@@ -2,7 +2,7 @@
   <div style="pointer-events: none">
     <div class="custom-node">
       <div class="area"
-           :style='`width:${props.pageData?.width || "1920px"};height:${props.pageData?.height || "1080px"};border: 1px solid #fff;background-image:url(${props.pageData?.bg})`'></div>
+           :style='`width:${props.pageData?.width || "1920px"};height:${props.pageData?.height || "1080px"};border: 1px solid #fff;background-image:url(${props.pageData?.bg});background-color:${props.pageData?.bgColor}`'></div>
     </div>
   </div>
 </template>

src/views/boardGenerate/tool.js

@@ -26,7 +26,7 @@ const getOption = (e) => {
       xAxisTickInside: false,
       xAxisTickColor: '#DCE2E8',
       xAxisLabelShow: true,
-      xAxisLabelInterval: false,
+      xAxisLabelInterval: true,
       xAxisLabelInside: false,
       xAxisLabelRotate: 0,
       xAxisLabelFormatter: '',
@@ -44,7 +44,7 @@ const getOption = (e) => {
       yAxisTickInside: false,
       yAxisTickColor: '#DCE2E8',
       yAxisLabelShow: true,
-      yAxisLabelInterval: false,
+      yAxisLabelInterval: true,
       yAxisLabelInside: false,
       yAxisLabelRotate: 0,
       yAxisLabelFormatter: '',
@@ -78,7 +78,7 @@ const getOption = (e) => {
       xAxisTickInside: false,
       xAxisTickColor: '#DCE2E8',
       xAxisLabelShow: true,
-      xAxisLabelInterval: false,
+      xAxisLabelInterval: true,
       xAxisLabelInside: false,
       xAxisLabelRotate: 0,
       xAxisLabelFormatter: '',
@@ -96,7 +96,7 @@ const getOption = (e) => {
       yAxisTickInside: false,
       yAxisTickColor: '#DCE2E8',
       yAxisLabelShow: true,
-      yAxisLabelInterval: false,
+      yAxisLabelInterval: true,
       yAxisLabelInside: false,
       yAxisLabelRotate: 0,
       yAxisLabelFormatter: '',
@@ -127,7 +127,7 @@ const getOption = (e) => {
       xAxisTickInside: false,
       xAxisTickColor: '#DCE2E8',
       xAxisLabelShow: true,
-      xAxisLabelInterval: false,
+      xAxisLabelInterval: true,
       xAxisLabelInside: false,
       xAxisLabelRotate: 0,
       xAxisLabelFormatter: '',
@@ -145,7 +145,7 @@ const getOption = (e) => {
       yAxisTickInside: false,
       yAxisTickColor: '#DCE2E8',
       yAxisLabelShow: true,
-      yAxisLabelInterval: false,
+      yAxisLabelInterval: true,
       yAxisLabelInside: false,
       yAxisLabelRotate: 0,
       yAxisLabelFormatter: '',
@@ -177,7 +177,7 @@ const getOption = (e) => {
       xAxisTickInside: false,
       xAxisTickColor: '#DCE2E8',
       xAxisLabelShow: true,
-      xAxisLabelInterval: false,
+      xAxisLabelInterval: true,
       xAxisLabelInside: false,
       xAxisLabelRotate: 0,
       xAxisLabelFormatter: '',
@@ -195,7 +195,7 @@ const getOption = (e) => {
       yAxisTickInside: false,
       yAxisTickColor: '#DCE2E8',
       yAxisLabelShow: true,
-      yAxisLabelInterval: false,
+      yAxisLabelInterval: true,
       yAxisLabelInside: false,
       yAxisLabelRotate: 0,
       yAxisLabelFormatter: '',
@@ -228,7 +228,7 @@ const getOption = (e) => {
       xAxisTickInside: false,
       xAxisTickColor: '#DCE2E8',
       xAxisLabelShow: true,
-      xAxisLabelInterval: false,
+      xAxisLabelInterval: true,
       xAxisLabelInside: false,
       xAxisLabelRotate: 0,
       xAxisLabelFormatter: '',
@@ -246,7 +246,7 @@ const getOption = (e) => {
       yAxisTickInside: false,
       yAxisTickColor: '#DCE2E8',
       yAxisLabelShow: true,
-      yAxisLabelInterval: false,
+      yAxisLabelInterval: true,
       yAxisLabelInside: false,
       yAxisLabelRotate: 0,
       yAxisLabelFormatter: '',
@@ -358,6 +358,8 @@ const getOption = (e) => {
     return {
       field: '', color: '#fff',fontSize: 22,number: 123,numQuantity:3, backgroundColor: 'rgba(180, 180, 180, 0.2)', isBorder: true, borderColor: '#fff'
     };
+  } else if (e === 'menu') {
+    return { text: '文字', align: '', color: '#fff' };
   } else {
     return {};
   }