From 221f6a7ddfcf99c9190b644af106b74f5b93d45d Mon Sep 17 00:00:00 2001 From: shidongli Date: Mon, 17 Jun 2024 14:44:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AF=9D=E6=9C=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/system/preview/index.vue | 1751 ++++++++++++++-------------- 1 file changed, 878 insertions(+), 873 deletions(-) diff --git a/src/views/system/preview/index.vue b/src/views/system/preview/index.vue index 95a68fc..5f214e6 100644 --- a/src/views/system/preview/index.vue +++ b/src/views/system/preview/index.vue @@ -1,889 +1,894 @@ - - - - \ No newline at end of file + }, + mounted() { + this.initG6Editor(); + this.getlist() + + this.form.edges.forEach(e => { + if (e.keyword) { + // e.label=e.label + e.label = { + text: e.label, + fill: 'red' + } + + } + + }) + // this.editor.getCurrentPage().save() + // this.editor.getCurrentPage().read(this.form); + }, + created() { + + }, + + methods: { + getlist() { + selectScriptEdgeNode(Cookies.get('id')).then(res => { + this.form = JSON.parse(res.data.flowScheme) + this.form = JSON.parse(res.data.flowScheme) + console.log(this.form) + this.form.nodes.forEach(e => { + if (e.label) { + if (e.label.split('\n').shift() && e.label.split('\n').slice(1).join('\n')) { + // e.labeltitle = e.label .split('\n').shift() + // e.labelconcent = e.label.split('\n').slice(1).join('\n') + // e.label= `

${e.label.split('\n').shift()}

`+'\n'+ e.label.split('\n').slice(1).join('\n') + // console.log(e.label, 'e.la') + // e.label={ // 关键形样式（优先级高于color） + // fontSize: 14, + // fontWeight:800, + // text:e.label, + + // } + } + } + }) + this.editor.getCurrentPage().read(this.form); + console.log(this.form,'this.form') + + }) + }, + + // 初始化 + initG6Editor() { + const _this = this; + const editor = new G6Editor(); + this.editor = editor; + G6Editor.track(false); + const Command = G6Editor.Command; + // 注册新命令save + Command.registerCommand("save", { + // 禁止保存命令进入队列 + queue: false, + // 命令是否可用 + enable: (editor) => { + return true; + }, + // 正向命令 + execute(editor) { + let needSaveData = editor.getCurrentPage().save(); + let newObj = JSON.parse(JSON.stringify(needSaveData)) + newObj.scriptInfoId = Cookies.get('id') + newObj.flowScheme = JSON.stringify(needSaveData) + newObj.edges.forEach(e => { + if (e.keyword) { + // e.label=e.label + e.label = e.label.text + } + e.code = e.id + delete e.id + }) + newObj.nodes.forEach(e => { + e.code = e.id + delete e.id + }) + console.log(newObj, 'newObj'); + // this.form.nodes=newObj.nodes + // this.form.edges=newObj.edges + // newObj.edges.forEach(e => { + // if (e.keyword) { + // // e.label=e.label + // e.label = e.label.text + // } + // }) + + // return + insertScriptEdgeNode(newObj).then(res => { + if (res.code == 200) { + _this.$message.success("数据保存成功"); + _this.getlist() + } else { + _this.$modal.msgError(res.msg); + } + + }) + // newObj.nodes.forEach(e => { + // var text = e.label.replace(/\n/g, ","); + // var concet = text.split(',') + // console.log(concet, 'text') + // e.labeltitle = concet[0] + // e.labelconcent = concet[1] + + + // }) + + let testcs = JSON.stringify(needSaveData) + let test = JSON.parse(testcs) + console.log(testcs, 'JSON.stringify(needSaveData)'); + console.log(test, 'test'); + // localStorage.setItem("flowData", JSON.stringify(needSaveData)); + _this.save(needSaveData); + + }, + // 反向命令 + back(editor) { + console.log("反向命令"); + }, + // 快捷键：Ctrl + S + shortcutCodes: [ + ["metaKey", "s"], + ["ctrlKey", "s"] + ] + }); + // 画布 + const flow = new G6Editor.Flow({ + graph: { + container: "page" + }, + align: { + line: { + // 对齐线颜色 + stroke: "#FA8C16", + // 对齐线粗细 + lineWidth: 1 + }, + // 开启全方位对齐 + item: true, + // 网格对齐 + grid: true + }, + grid: { + // 网孔尺寸 + cell: 18 + }, + shortcut: { + // 开启自定义命令保存的快捷键 + save: true + } + }); + window.flow = flow; + + // 设置边 + flow.getGraph().edge({ + shape: "flow-polyline" + }); + + // 元素面板栏 + const itempannel = new G6Editor.Itempannel({ + container: "itempannel" + }); + // 工具栏 + const toolbar = new G6Editor.Toolbar({ + container: "toolbar" + }); + // 属性栏 + const detailpannel = new G6Editor.Detailpannel({ + container: "detailpannel" + }); + // 缩略图 + let minimapWidth = getComputedStyle(document.querySelector(".right-part")).width; + minimapWidth = Number(minimapWidth.replace(/px$/, "")); + const minimap = new G6Editor.Minimap({ + container: "minimap", + width: minimapWidth, + height: 200 + }); + // 右键菜单 + const contextmenu = new G6Editor.Contextmenu({ + container: "contextmenu" + }); + // 挂载以上组件到Editor + editor.add(flow); + editor.add(itempannel); + editor.add(toolbar); + editor.add(detailpannel); + editor.add(minimap); + editor.add(contextmenu); + // 挂载到window，方便调试 + window.editor = editor; + // 获取当前画布 + const currentPage = editor.getCurrentPage(); + currentPage.on("afterchange", (e) => { + if (e.action === "add") { + if (e.model.nodetype === "startNode" || e.model.nodetype === "endNode") { + let nodes = this.editor.getCurrentPage().getNodes(); + for (const item of nodes) { + if (item.model.nodetype === e.model.nodetype && item.model.id !== e.model.id) { + this.editor.getCurrentPage().remove(e.item); + this.$message.warning("只能有一个开始节点或结束节点"); + } + } + } + } + }); + // 监听（选择对象后）事件 + currentPage.on("afteritemselected", (ev) => { + console.log("打印所选对象属性", ev.item); + console.log("打印所选对象数据模型", ev.item.model); + const selectedItemDataModel = ev.item.model + // 如果选择的对象是节点 + if (ev.item.isNode) { + this.type = selectedItemDataModel.shape + if (selectedItemDataModel.label && selectedItemDataModel.labelconcent == '' && selectedItemDataModel.labeltitle == '') { + if (selectedItemDataModel.label.split('\n').shift() && selectedItemDataModel.label.split('\n').slice(1).join('\n')) { + + // this.nodeAttributeForm.labeltitle = `

${selectedItemDataModel.label.split('\n').shift()}

` + this.nodeAttributeForm.labeltitle = selectedItemDataModel.label.split('\n').shift() + this.nodeAttributeForm.labelconcent = selectedItemDataModel.label.split('\n').slice(1).join('\n') + + } else if (selectedItemDataModel.label.split('\n').shift()) { + this.nodeAttributeForm.label = selectedItemDataModel.label.split('\n').shift(); + } + } else { + this.nodeAttributeForm.labelconcent = selectedItemDataModel.labelconcent; + this.nodeAttributeForm.labeltitle = selectedItemDataModel.labeltitle; + } + if (!this.nodeAttributeForm.labelconcent && !this.nodeAttributeForm.labeltitle) { + this.nodeAttributeForm.label = selectedItemDataModel.label; + } + // this.nodeAttributeForm.labelconcent = selectedItemDataModel.labelconcent; + // this.nodeAttributeForm.labeltitle = selectedItemDataModel.labeltitle; + + this.nodeAttributeForm.width = selectedItemDataModel.size.split("*")[0]; + this.nodeAttributeForm.height = selectedItemDataModel.size.split("*")[1]; + this.nodeAttributeForm.color = selectedItemDataModel.color; + } + // 如果选择的对象是边 + if (ev.item.isEdge) { + ev.item.graph.edge({ + shape: "flow-polyline-round" + }); + let newObj = JSON.parse(JSON.stringify(selectedItemDataModel)) + if (newObj.keyword) { + console.log(newObj, '1111111') + this.edgeAttributeForm.label = newObj.label.text; + } else { + this.edgeAttributeForm.label = selectedItemDataModel.label; + } + this.edgeAttributeForm.shape = selectedItemDataModel.shape; + this.edgeAttributeForm.keyword = selectedItemDataModel.keyword; + // this.edgeAttributeForm.keyword = '00'; + } + }); + // 监听（删除后）事件 + currentPage.on("afterdelete", (ev) => { }); + }, + // 打开保存为图片弹窗 + openSaveAsImageDialog() { + this.saveAsImageDialogVisible = true; + }, + // 开启/关闭网格对齐 + toggleGridShowStatus(value) { + if (value) { + this.editor.getCurrentPage().showGrid(); + } else { + this.editor.getCurrentPage().hideGrid(); + } + }, + // 保存为图片 + saveAsImage() { + let newCanvas; + if (this.saveAsImageFormat === "jpg") { + let canvas = this.editor.getCurrentPage().saveImage(); + newCanvas = document.createElement("canvas"); + newCanvas.width = canvas.width; + newCanvas.height = canvas.height; + let newContext = newCanvas.getContext("2d"); + newContext.fillStyle = "#fff"; + newContext.fillRect(0, 0, newCanvas.width, newCanvas.height); + newContext.drawImage(canvas, 0, 0); + } + if (this.saveAsImageFormat === "png") { + newCanvas = this.editor.getCurrentPage().saveImage(); + } + let imageDataURL = newCanvas.toDataURL(); + let downloadLink = document.createElement("a"); + downloadLink.download = "图片.jpg"; + downloadLink.href = imageDataURL; + document.body.appendChild(downloadLink); + downloadLink.click(); + document.body.removeChild(downloadLink); + this.saveAsImageDialogVisible = false; + }, + + // 保存为文件 + saveAsFile() { + let sub = this.editor.getCurrentPage().save() + console.log(sub, 'sub') + let jsonString = JSON.stringify(this.editor.getCurrentPage().save()); + let blob = new Blob([jsonString]); + let blobURL = URL.createObjectURL(blob); + let downloadLink = document.createElement("a"); + downloadLink.download = "数据.json"; + downloadLink.href = blobURL; + document.body.appendChild(downloadLink); + downloadLink.click(); + URL.revokeObjectURL(blobURL); + document.body.removeChild(downloadLink); + }, + // 读取历史数据 + readHistoryData() { + let stringData = localStorage.getItem("flowData"); + if (stringData === "" || stringData === "{}" || stringData === null) { + this.$message.warning("无历史数据"); + return; + } + let jsonData = JSON.parse(stringData); + this.editor.getCurrentPage().read(jsonData); + }, + // 读取上传数据 + readUploadData() { + let uploadButton = document.createElement("input"); + uploadButton.setAttribute("type", "file"); + uploadButton.setAttribute("accept", ".json"); + uploadButton.addEventListener("change", (e) => { + console.dir(uploadButton); + let file = uploadButton.files[0]; + let fileReader = new FileReader(); + fileReader.onload = (event) => { + console.log(event); + let text = JSON.parse(event.target.result); + console.log(text); + this.editor.getCurrentPage().read(text); + }; + fileReader.readAsText(file); + }); + uploadButton.click(); + }, + // + save(source) { + let edges = source.edges; + let nodes = source.nodes; + console.log(construct); + let res = construct(source); + console.log(JSON.stringify(res, null, 2)); + } + } +}; + + +