修改看板配置

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
     "@highlightjs/vue-plugin": "2.1.0",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/core": "^1.43.1",
     "@vue-flow/node-resizer": "^1.4.0",

src/views/boardGenerate/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div >
     <div class="leftPanel">
       <el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
         <el-tab-pane label="图表组件" name="1">
@@ -154,7 +155,7 @@
           <el-button type="primary" text :icon="Close" @click="clear">清空</el-button>
         </div>
       </div>
-    <div class="flowArea">
+      <div class="flowArea" v-loading="loading">
         <VueFlow :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init
                  default-marker-color="#409EFF"
                  @connect="logEvent('connect', $event)"
@@ -375,6 +376,15 @@
                 controls-position="right"
               />
             </el-form-item>
+            <el-form-item label="提示框" v-if="Object.keys(nodeAttrForm).includes('tooltip')">
+              <el-switch v-model="nodeAttrForm.tooltip" active-text="显示" inactive-text="隐藏" />
+            </el-form-item>
+            <el-form-item label="图例" v-if="Object.keys(nodeAttrForm).includes('legend')">
+              <el-switch v-model="nodeAttrForm.legend" active-text="显示" inactive-text="隐藏" />
+            </el-form-item>
+            <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>
         </el-collapse-item>
         <el-collapse-item title="自定义配置" name="3" v-if="customDataForm">
@@ -397,6 +407,7 @@
         </el-collapse-item>
       </el-collapse>
     </div>
+  </div>
   <el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
     <el-form :model="pageSettingForm">
       <el-form-item label="页面大小" label-width="80px">
@@ -411,11 +422,12 @@
       <el-form-item label="页面背景" label-width="80px">
         <el-upload
           class="avatar-uploader"
-          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+          :action="uploadFileUrl"
           :show-file-list="false"
           :limit="1"
           accept=".jpg,.png"
-          :before-upload="pageBgUploadSuccess"
+          :headers="headers"
+          :on-success="pageBgUploadSuccess"
         >
           <img v-if="pageSettingForm.bg" :src="pageSettingForm.bg" class="avatar" />
           <el-icon v-else class="avatar-uploader-icon">
@@ -435,6 +447,7 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
+import { globalHeaders } from '@/utils/request';
 import { useRouter } from 'vue-router';
 import { v4 as uuidv4 } from 'uuid';
 import { Check, Close, Plus, Setting, StarFilled } from '@element-plus/icons-vue';
@@ -472,6 +485,11 @@ const {
   updateNode
 } = useVueFlow();
 
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
+const headers = ref(globalHeaders());
+
+const loading = ref(false)
 const pageSettingVisible = ref(false);
 const pageSettingForm = ref({});
 const pageTitle = ref('页面名称');
@@ -492,6 +510,7 @@ const customData = ref([]);
 const customBoard = ref([]);
 const boardData = ref({});
 onMounted(async () => {
+  loading.value = true
   getDataSourceList({
     pageNum: 1,
     pageSize: 9999999
@@ -566,7 +585,11 @@ onMounted(async () => {
         };
       }) || [];
       pageData.value = JSON.parse(data.customContent) || {};
-    });
+    })
+    .finally(()=>{
+
+      loading.value = false
+    })
   // pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
 });
 const customDataForm = ref({});
@@ -755,18 +778,21 @@ const clear = () => {
   edges.value = [];
 
 };
-const pageBgUploadSuccess = (file) => {
+const pageBgUploadSuccess = (res) => {
-  const getFileText = (file) => {
+  // const getFileText = (file) => {
-    const reader = new FileReader();
+  //   const reader = new FileReader();
-    reader.onload = function(e) {
+  //   reader.onload = function(e) {
-      const fileContent = e.target.result;
+  //     const fileContent = e.target.result;
-      console.log(fileContent);
+  //     console.log(fileContent);
-      pageSettingForm.value.bg = fileContent;
+  //     pageSettingForm.value.bg = fileContent;
-    };
+  //   };
-    reader.readAsDataURL(file);
+  //   reader.readAsDataURL(file);
-  };
+  // };
-  getFileText(file);
+  // getFileText(file);
-  return false;
+  // return false;
+  if (res.code === 200) {
+    pageSettingForm.value.bg = res.data.url
+  }
 };
 const setPageData = () => {
   pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value));

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

@@ -61,6 +61,7 @@ const defaultOption = {
     top: '5%'
   },
   legend: {
+    show:props.data?.options?.legend||false,
     icon: 'circle',
     top: '5%',
     right: '5%',
@@ -71,6 +72,7 @@ const defaultOption = {
     }
   },
   tooltip: {
+    show:props.data?.options?.tooltip||false,
     trigger: 'axis',
     axisPointer: {
       label: {
@@ -185,6 +187,12 @@ const getOption = () => {
       title: {
         text: props.data.options.title || ''
       },
+    legend: {
+      show: props.data?.options?.legend || false,
+    },
+    tooltip: {
+      show:props.data?.options?.tooltip||false,
+    },
       grid: {
         top: props.data?.options?.gridTop + '%' || '20%',
         left: props.data?.options?.gridLeft + '%' || '20%',

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

@@ -61,6 +61,7 @@ const defaultOption = {
     top: '5%'
   },
   legend: {
+    show:props.data?.options?.legend||false,
     icon: 'circle',
     top: '5%',
     right: '5%',
@@ -71,6 +72,7 @@ const defaultOption = {
     }
   },
   tooltip: {
+    show:props.data?.options?.tooltip||false,
     trigger: 'axis',
     axisPointer: {
       label: {
@@ -192,6 +194,12 @@ const getOption = () => {
     title: {
       text: props.data.options.title || ''
     },
+    legend: {
+      show: props.data?.options?.legend || false,
+    },
+    tooltip: {
+      show:props.data?.options?.tooltip||false,
+    },
     grid: {
       top: props.data?.options?.gridTop + '%' || '20%',
       left: props.data?.options?.gridLeft + '%' || '20%',

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

@@ -61,6 +61,7 @@ const defaultOption = {
     top: '5%'
   },
   legend: {
+    show:props.data?.options?.legend||false,
     icon: 'circle',
     top: '5%',
     right: '5%',
@@ -71,6 +72,7 @@ const defaultOption = {
     }
   },
   tooltip: {
+    show:props.data?.options?.tooltip||false,
     trigger: 'axis',
     axisPointer: {
       label: {
@@ -189,6 +191,12 @@ const getOption = () => {
     title: {
       text: props.data.options.title || ''
     },
+    legend: {
+      show: props.data?.options?.legend || false,
+    },
+    tooltip: {
+      show:props.data?.options?.tooltip||false,
+    },
     grid: {
       top: props.data?.options?.gridTop + '%' || '20%',
       left: props.data?.options?.gridLeft + '%' || '20%',
@@ -235,7 +243,7 @@ onMounted(() => {
 });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-
+    console.log(1123);
     chart && chart.setOption(getOption(), false);
   }
 }, { deep: true, immediate: true });

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

@@ -76,6 +76,7 @@ const getOption = () => {
       top: '5%'
     },
     legend: {
+      show:props.data?.options?.legend||false,
       icon: 'circle',
       top: '5%',
       right: '5%',
@@ -86,6 +87,7 @@ const getOption = () => {
       }
     },
     tooltip: {
+      show:props.data?.options?.tooltip||false,
       trigger: 'axis',
       axisPointer: {
         label: {

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

@@ -76,6 +76,7 @@ const getOption = () => {
       top: '5%'
     },
     legend: {
+      show: props.data?.options?.legend || false,
       icon: 'circle',
       top: '5%',
       right: '5%',
@@ -86,6 +87,7 @@ const getOption = () => {
       }
     },
     tooltip: {
+      show:props.data?.options?.tooltip||false,
       trigger: 'axis',
       axisPointer: {
         label: {

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

@@ -76,6 +76,7 @@ const getOption = () => {
       top: '5%'
     },
     legend: {
+      show:props.data?.options?.legend||false,
       icon: 'circle',
       top: '5%',
       right: '5%',
@@ -86,6 +87,7 @@ const getOption = () => {
       }
     },
     tooltip: {
+      show:props.data?.options?.tooltip||false,
       trigger: 'axis',
       axisPointer: {
         label: {

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

@@ -62,6 +62,7 @@ const getOption = () => {
       top: '5%'
     },
     legend: {
+      show:props.data?.options?.legend||false,
       icon: 'circle',
       top: '5%',
       right: '5%',
@@ -72,6 +73,7 @@ const getOption = () => {
       }
     },
     tooltip: {
+      show:props.data?.options?.tooltip||false,
       trigger: 'axis',
       axisPointer: {
         label: {
@@ -102,6 +104,7 @@ const getOption = () => {
         type: 'pie',
         radius: '50%',
         label: {
+          show:props.data?.options?.label||false,
           formatter: '{b}:  {d}%'
         }
       }
@@ -109,7 +112,7 @@ const getOption = () => {
   };
   let xData = [props.inputData?.x1 || []];
   let yData = [props.inputData?.y1 || []];
-  console.log(props.inputData); 
+  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) => {

src/views/boardGenerate/tool.js

@@ -10,13 +10,13 @@ const getId = (type) => {
 
 const getOption = (e) => {
   if (e === 'line' || e === 'multiLines') {
-    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '' };
+    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true };
   } else if (e === 'bar' || e === 'multiBars') {
-    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '' };
+    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: '' };
+    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true };
   } else if (e === 'pie') {
-    return { title: '', yNames: [] };
+    return { title: '', yNames: [], tooltip:true, legend:true,label:true };
   } else if (e === 'customBoard') {
     return { title: '', yNames: [] };
   } else if (e === 'data') {

src/views/boardGenerate/view.vue

@@ -5,7 +5,6 @@
       <template v-if="i.type === 'customBoard'">
         <CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
       </template>
-      00
       <template v-if="i.type === 'customData'">
         <CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode>
       </template>
@@ -101,8 +100,8 @@ const getInputData = (e) => {
   });
   return outputData;
 };
-onMounted(() => {
+onMounted(async () => {
-  getBoardApi(router.currentRoute.value.query.id)
+  await getBoardApi(router.currentRoute.value.query.id)
     .then((res) => {
       let data = res.data;
       nodes.value = data.designPagePointList?.length !== 0 ? data.designPagePointList.map(e => {
@@ -157,8 +156,10 @@ onMounted(() => {
           sourceHandle: e.sourceHandleId
         };
       }) || [];
+      area.value = JSON.parse(data.customContent) || {};
     });
-  area.value = JSON.parse(localStorage.getItem('PAGEDATA'));
+  // area.value = nodes.value.find(e=>e.type==='area')
+  // console.log('area.value',area.value);
 });
 </script>
 <style lang="less" scoped>

src/views/print/index.vue

@@ -20,6 +20,7 @@
         <el-input v-model="zoomInput" disabled style="margin-left: 8px;width:100px" />
         <el-button @click="zoomChange(0.1)" icon="ZoomIn" circle style="margin-left: 8px;" />
         <el-button type="primary" @click="view" style="margin-left: 12px;">预览</el-button>
+        <el-button type="primary" @click="imp" style="margin-left: 12px;">场景1</el-button>
         <el-button type="primary" @click="save" style="margin-left: 12px;">保存</el-button>
         <el-button type="primary" @click="clear" style="margin-left: 12px;">清空</el-button>
       </div>
@@ -442,17 +443,17 @@ const logEvent = async (eventname, event) => {
       break;
   }
 };
-// const nodes = ref([{
+const nodes = ref([{
-//   id: pid.value,
+  id: pid.value,
-//   name: 'area',
+  name: 'area',
-//   type: 'area',
+  type: 'area',
-//   position: {
+  position: {
-//     x: 0,
+    x: 0,
-//     y: 0
+    y: 0
-//   },
+  },
-//   data: {}
+  data: {}
-// }]);
+}]);
-const nodes = ref([]);
+// const nodes = ref([]);
 const edges = ref([]);
 
 const setPage = (type, width, height) => {
@@ -487,6 +488,17 @@ const save = () => {
   localStorage.setItem('printNodes', JSON.stringify(nodes.value));
 };
 const clear = () => {
+  pid.value =  `area_${uuidv4().replaceAll('-', '_')}`
+   nodes.value = [{
+    id: pid.value,
+    name: 'area',
+    type: 'area',
+    position: {
+      x: 0,
+      y: 0
+    },
+    data: {}
+  }]
 };
 
 onMounted(() => {
@@ -497,8 +509,11 @@ onMounted(() => {
       zoom: 1
     });
   });
-  nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
+  let nodesData = localStorage.getItem('printNodes')
+  if(nodesData){
+    nodes.value = JSON.parse(nodesData);
     pid.value = nodes.value.find(e => e.name === 'area')?.id;
+  }
   console.log(nodes.value);
 });
 watch(() => flowRef.value?.viewport, () => {
@@ -524,6 +539,11 @@ window.addEventListener('keyup', keyup);
 const nodeChange = () => {
   updateNode(nodeData.value.id, JSON.parse(JSON.stringify(nodeData.value)), { replace: false });
 };
+const imp = () =>{
+let json ='[{"id":"text_e0ed2e33_b370_493f_9e85_179277939055","type":"text","dimensions":{"width":189,"height":76},"computedPosition":{"x":283.4645669291338,"y":0,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":283.4645669291338,"y":0},"data":{"options":{"field":"planDetailId","default":"","border":[{"type":"top","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"right","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"bottom","isShow":true,"width":1,"color":"#000","borderType":"solid"},{"type":"left","isShow":false,"width":1,"color":"#000","borderType":"solid"}]},"outputData":{}},"events":{},"name":"text","extent":"parent"},{"id":"text_af484d4b_42c0_463f_b0f7_eb0f716fbc5a","type":"text","dimensions":{"width":189,"height":19},"computedPosition":{"x":283.4645669291338,"y":94.48818897637794,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":283.4645669291338,"y":94.48818897637794},"data":{"options":{"default":"planId","border":[{"type":"top","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"right","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"bottom","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"left","isShow":false,"width":1,"color":"#000","borderType":"solid"}]},"outputData":{}},"events":{},"name":"text","extent":"parent","style":{"width":"189px","height":"18.89763779527559px"}},{"id":"barCode_1dd4465e_928c_49f2_867b_061fc5f96843","type":"barCode","dimensions":{"width":189,"height":76},"computedPosition":{"x":0,"y":188.97637795275588,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":0,"y":188.97637795275588},"data":{"options":{"field":"returnBarcode","default":""},"outputData":{}},"events":{},"name":"barCode","extent":"parent"},{"id":"QRCode_9ad0beba_b555_45ac_a1c6_23f23a6c9e9a","type":"QRCode","dimensions":{"width":189,"height":189},"computedPosition":{"x":529.1338582677165,"y":151.1811023622047,"z":1000},"handleBounds":{"source":null,"target":null},"selected":true,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":529.1338582677165,"y":151.1811023622047},"data":{"options":{"field":"returnBarcode","default":""},"outputData":{}},"events":{},"name":"QRCode","extent":"parent"}]'
+  nodes.value = JSON.parse(json);
+  pid.value = nodes.value.find(e => e.name === 'area')?.id;
+}
 </script>
 <style lang="less" scoped>
 .borderOption {