流程本地存储

ruoyi-ui/src/views/system/processModeling/flow-x6/components/ToolBar/index.vue

@@ -1,37 +1,37 @@
 <template>
   <div class="bar">
     <el-tooltip class="item" effect="dark" content="清除 (Cmd + D)" placement="bottom">
-      <el-button name="delete" @click="handleClick" class="item-space" size="small" >
+      <el-button name="delete" @click="handleClick" class="item-space" size="small">
         清除
       </el-button>
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="撤销 (Cmd + Z)" placement="bottom">
-      <el-button :disabled="!canUndo" name="undo" @click="handleClick" class="item-space" size="small" >
+      <el-button :disabled="!canUndo" name="undo" @click="handleClick" class="item-space" size="small">
         撤销
       </el-button>
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="Redo (Cmd + Shift + Z)" placement="bottom">
-      <el-button :disabled="!canRedo" name="redo" @click="handleClick" class="item-space" size="small" >
+      <el-button :disabled="!canRedo" name="redo" @click="handleClick" class="item-space" size="small">
         redo
       </el-button>
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="复制 (Cmd + Shift + Z)" placement="bottom">
-      <el-button name="copy" @click="handleClick" class="item-space" size="small" >
+      <el-button name="copy" @click="handleClick" class="item-space" size="small">
         复制
       </el-button>
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="剪切 (Cmd + X)" placement="bottom">
-      <el-button name="cut" @click="handleClick" class="item-space" size="small" >
+      <el-button name="cut" @click="handleClick" class="item-space" size="small">
         剪切
       </el-button>
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="粘贴 (Cmd + V)" placement="bottom">
-      <el-button name="paste" @click="handleClick" class="item-space" size="small" >
+      <el-button name="paste" @click="handleClick" class="item-space" size="small">
         粘贴
       </el-button>
     </el-tooltip>
@@ -59,155 +59,177 @@
         存储
       </el-button>
     </el-tooltip>
-
   </div>
 </template>
 <script>
-import FlowGraph from '../../graph'
-import { DataUri } from '@antv/x6'
+import FlowGraph from "../../graph";
+import { DataUri } from "@antv/x6";
 export default {
   data() {
     return {
       canUndo: null,
-      canRedo: null
-    }
+      canRedo: null,
+    };
   },
   created() {
-    this.myInit()
+    this.myInit();
   },
   methods: {
     myInit() {
-      const { graph } = FlowGraph
-      const { history } = graph
-      this.canUndo = history.canUndo()
-      this.canRedo = history.canRedo()
-      history.on('change', () => {
-      this.canUndo = history.canUndo()
-      this.canRedo = history.canRedo()
-    })
-    graph.bindKey('ctrl+z', () => {
-      if (history.canUndo()) {
-        history.undo()
-      }
-      return false
-    })
-    graph.bindKey('ctrl+shift+z', () => {
-      if (history.canRedo()) {
-        history.redo()
-      }
-      return false
-    })
-    graph.bindKey('ctrl+d', () => {
-      graph.clearCells()
-      return false
-    })
-    graph.bindKey('ctrl+s', () => {
-      graph.toPNG((datauri) => {
-        DataUri.downloadDataUri(datauri, 'chart.png')
-      })
-      return false
-    })
-    graph.bindKey('ctrl+p', () => {
-      graph.printPreview()
-      return false
-    })
-    graph.bindKey('ctrl+c', this.copy)
-    graph.bindKey('ctrl+v', this.paste)
-    graph.bindKey('ctrl+x', this.cut)
+      const { graph } = FlowGraph;
+      const { history } = graph;
+      this.canUndo = history.canUndo();
+      this.canRedo = history.canRedo();
+      history.on("change", () => {
+        this.canUndo = history.canUndo();
+        this.canRedo = history.canRedo();
+      });
+      graph.bindKey("ctrl+z", () => {
+        if (history.canUndo()) {
+          history.undo();
+        }
+        return false;
+      });
+      graph.bindKey("ctrl+shift+z", () => {
+        if (history.canRedo()) {
+          history.redo();
+        }
+        return false;
+      });
+      graph.bindKey("ctrl+d", () => {
+        graph.clearCells();
+        return false;
+      });
+      graph.bindKey("ctrl+s", () => {
+        graph.toPNG((datauri) => {
+          DataUri.downloadDataUri(datauri, "chart.png");
+        });
+        return false;
+      });
+      graph.bindKey("ctrl+p", () => {
+        graph.printPreview();
+        return false;
+      });
+      graph.bindKey("ctrl+c", this.copy);
+      graph.bindKey("ctrl+v", this.paste);
+      graph.bindKey("ctrl+x", this.cut);
     },
     copy() {
-      const { graph } = FlowGraph
-      const cells = graph.getSelectedCells()
+      const { graph } = FlowGraph;
+      const cells = graph.getSelectedCells();
       if (cells.length) {
-        graph.copy(cells)
+        graph.copy(cells);
       }
-      return false
+      return false;
     },
 
-    cut () {
-      const { graph } = FlowGraph
-      const cells = graph.getSelectedCells()
+    cut() {
+      const { graph } = FlowGraph;
+      const cells = graph.getSelectedCells();
       if (cells.length) {
-        graph.cut(cells)
+        graph.cut(cells);
       }
-      return false
+      return false;
     },
 
-    paste () {
-      const { graph } = FlowGraph
+    paste() {
+      const { graph } = FlowGraph;
       if (!graph.isClipboardEmpty()) {
-        const cells = graph.paste({ offset: 32 })
-        graph.cleanSelection()
-        graph.select(cells)
+        const cells = graph.paste({ offset: 32 });
+        graph.cleanSelection();
+        graph.select(cells);
       }
-      return false
+      return false;
     },
 
     handleClick(event) {
-      const { graph } = FlowGraph
-      const name = (event.currentTarget).name
+      const { graph } = FlowGraph;
+      const name = event.currentTarget.name;
       switch (name) {
-        case 'undo':
-          graph.history.undo()
-          break
-        case 'redo':
-          graph.history.redo()
-          break
-        case 'delete':
-          graph.clearCells()
-          break
-        case 'savePNG':
-          graph.toPNG((dataUri) => {
-            // 下载
-            DataUri.downloadDataUri(dataUri, 'chartx.png')
-          }, {
-            backgroundColor:'white',
-            padding: {
-              top: 20,
-              right: 30,
-              bottom: 40,
-              left: 50,
+        case "undo":
+          graph.history.undo();
+          break;
+        case "redo":
+          graph.history.redo();
+          break;
+        case "delete":
+          graph.clearCells();
+          break;
+        case "savePNG":
+          graph.toPNG(
+            (dataUri) => {
+              // 下载
+              DataUri.downloadDataUri(dataUri, "chartx.png");
             },
-            quality:1
-          })
-          break
-        case 'saveSVG':
+            {
+              backgroundColor: "white",
+              padding: {
+                top: 20,
+                right: 30,
+                bottom: 40,
+                left: 50,
+              },
+              quality: 1,
+            }
+          );
+          break;
+        case "saveSVG":
           graph.toSVG((dataUri) => {
             // 下载
-            DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), 'chart.svg')
-          })
-          break
-        case 'print':
-          graph.printPreview()
-          break
-        case 'copy':
-          this.copy()
-          break
-        case 'cut':
-          this.cut()
-          break
-        case 'paste':
-          this.paste()
-          break
-        case 'toJSON':
-          console.log(graph.toJSON())
-          window.localStorage.setItem('graphJson', JSON.stringify(graph.toJSON()))
-          // graph.fromJSON({cells:[graph.toJSON().cells[0],graph.toJSON().cells[1]]})
-          break
-        default:
-          break
+            DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), "chart.svg");
+          });
+          break;
+        case "print":
+          graph.printPreview();
+          break;
+        case "copy":
+          this.copy();
+          break;
+        case "cut":
+          this.cut();
+          break;
+        case "paste":
+          this.paste();
+          break;
+        case "toJSON":
+          console.log(graph.toJSON());
+          window.localStorage.setItem(
+            "graphJson",
+            JSON.stringify(graph.toJSON())
+          );
+        //   graph.fromJSON({ cells: [graph.toJSON()] }).cells[0],
+        //     graph.toJSON().cells[1],
+        //     graph.toJSON().cells[2],
+        //     graph.toJSON().cells[3],
+        //     graph.toJSON().cells[4],
+        //     graph.toJSON().cells[5],
+        //     graph.toJSON().cells[6],
+        //     graph.toJSON().cells[7],
+        //     graph.toJSON().cells[8],
+        //     graph.toJSON().cells[9],
+        //     graph.toJSON().cells[10];
+        //     graph.toJSON().cells[11],
+        //     graph.toJSON().cells[12],
+        //     graph.toJSON().cells[13],
+        //     graph.toJSON().cells[14],
+        //     graph.toJSON().cells[15],
+        //     graph.toJSON().cells[16];
+        //   break;
+        // default:
+        //   break;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style scoped>
-.bar{
+.bar {
   width: 100%;
   z-index: 99999;
-  margin-right:16px;
+  margin-right: 16px;
 }
-.item-space{
-  margin-left:16px;
+
+.item-space {
+  margin-left: 16px;
 }
 </style>

ruoyi-ui/src/views/system/processModeling/flow-x6/index.vue

@@ -32,6 +32,7 @@ export default {
     };
   },
   components: { ToolBar, ConfigPanel },
+
   mounted() {
     this.destroyFn = this.initGraph();
   },
@@ -45,6 +46,10 @@ export default {
         $("#container").getBoundingClientRect().width,
         $("#container").getBoundingClientRect().height
       );
+      const graphJson = JSON.parse(window.localStorage.getItem('graphJson'))
+      if(graphJson){
+        graph.fromJSON(graphJson)
+      }
       this.isReady = true;
       const resizeFn = () => {
         const { width, height } = getContainerSize($(".panel"));
@@ -56,6 +61,8 @@ export default {
         window.removeEventListener("resize", resizeFn);
         graph.dispose();
       };
+   
+
     },
   },
 };

ruoyi-ui/src/views/system/processModeling/index.vue

@@ -7,6 +7,7 @@
       </el-tooltip>
       <el-button style="position: absolute; top: 2px; right: 60px;z-index: 9999;" @click="editFlowData">Edit Data</el-button>
       <div id="flow-container"></div>
+
     </div>
   </div>
 </template>
@@ -14,6 +15,10 @@
 import FlowGraph from './flow-x6/graph'
 import { $, getContainerSize } from '../../../utils'
 export default {
+  data(){
+    return{
+    }
+  },
   mounted() {
     this.getFlowJson()
   },
@@ -36,6 +41,7 @@ export default {
           this.$router.push('/flow-x6')
         }
       }, 300)
+
     },
     // 根据json渲染
     initFlowImage(graphJson) {