From 1ead0a930e533be859b39035689ebbdb7167020f Mon Sep 17 00:00:00 2001 From: shidongli Date: Mon, 22 Jul 2024 14:45:28 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=9D=E6=9C=AF=E9=A2=84=E8=A7=88=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../system/components/Scriptpreviewopen.vue | 451 +++--------------- 1 file changed, 69 insertions(+), 382 deletions(-) diff --git a/src/views/system/components/Scriptpreviewopen.vue b/src/views/system/components/Scriptpreviewopen.vue index c179963..a7b8f0a 100644 --- a/src/views/system/components/Scriptpreviewopen.vue +++ b/src/views/system/components/Scriptpreviewopen.vue @@ -11,19 +11,6 @@
- - - - + -
+
- -
- + + +
@@ -278,335 +264,14 @@ export default { mixins: [mixin], data() { return { + scale: 1, // 初始缩放比例为1 + zoomFactor: 0.1, // 设置每次鼠标滚轮滚动时的缩放因子 form: { scriptInfoId: null, flowScheme: null, nodes: [], edges: [], }, - // form: { - // nodes: [{ - // color - // : - // "#FA8C16", - // id - // : - // "655c5165", - // index - // : - // 0, - // label - // : - // "自我介绍确认", - // nodetype - // : - // "startNode", - // shape - // : - // "flow-circle", - // size - // : - // "72*72", - // type - // : - // "node", - // x - // : - // 441.5124969482422, - // y - // : - // 60.79999542236328, - // }, { - // color - // : - // "#1890ff", - // id - // : - // "8660695d", - // index - // : - // 1, - // label - // : - // "家属是否能代打", - // size - // : - // "100*50", - // type - // : - // "node", - // x - // : - // 242.5124969482422, - // y - // : - // 183.5999984741211, - // }, - // { - // color - // : - // "#1890ff", - // id - // : - // "59c9ceed", - // index - // : - // 2, - // label - // : - // "常规节点", - // size - // : - // "100*50", - // type - // : - // "node", - // x - // : - // 606.5124969482422, - // y - // : - // 187.5999984741211, - // }, { - // color - // : - // "#722ED1", - // id - // : - // "16f4c8ba", - // index - // : - // 5, - // label - // : - // "你好，我这边是#机构#的工作人员", - // shape - // : - // "flow-capsule", - // size - // : - // "200*48", - // type - // : - // "node", - // x - // : - // 433.5124969482422, - // y - // : - // 125.5999984741211, - // }, { - // color - // : - // "#722ED1", - // id - // : - // "e4839dcc", - // index - // : - // 6, - // label - // : - // "好的是这样的", - // shape - // : - // "flow-capsule", - // size - // : - // "80*48", - // type - // : - // "node", - // x - // : - // 233.5124969482422, - // y - // : - // 251.5999984741211, - // }, { - // color - // : - // "#1890ff", - // id - // : - // "392ca0b8", - // index - // : - // 7, - // label - // : - // "家属不能代打", - // size - // : - // "100*50", - // type - // : - // "node", - // x - // : - // 55.51249694824219, - // y - // : - // 299.5999984741211 - // }, { - // color - // : - // "#1890ff", - // id - // : - // "6bcab22d", - // index - // : - // 8, - // label - // : - // "家属能代打", - // size - // : - // "100*50", - // type - // : - // "node", - // x - // : - // 384.5124969482422, - // y - // : - // 307.5999984741211 - // }, - // { - // color - // : - // "#722ED1", - // id - // : - // "dc5de91f", - // index - // : - // 11, - // label - // : - // "好的 麻烦转告一下", - // shape - // : - // "flow-capsule", - // size - // : - // "200*48", - // type - // : - // "node", - // x - // : - // 55.51249694824219, - // y - // : - // 366.5 - - // }], - // edges: [{ - // id: "b04d23c7", - // index - // : - // 3, - // label - // : - // "是本人", - // shape - // : - // "flow-polyline-round", - // source - // : - // "655c5165", - // sourceAnchor - // : - // 1, - // target - // : - // "59c9ceed", - // targetAnchor - // : - // 0, - // }, { - // id - // : - // "7894068d", - // index - // : - // 4, - // label - // : - // "是家属", - // shape - // : - // "flow-polyline-round", - // source - // : - // "655c5165", - // sourceAnchor - // : - // 3, - // target - // : - // "8660695d", - // targetAnchor - // : - // 0, - // }, { - // id - // : - // "6aa429cc", - // index - // : - // 9, - // label - // : - // "能带大", - // shape - // : - // "flow-polyline-round", - // source - // : - // "8660695d", - // sourceAnchor - // : - // 3, - // target - // : - // "392ca0b8", - // targetAnchor - // : - // 0, - // }, - // { - // id - // : - // "02bfc4d0", - // index - // : - // 10, - // label - // : - // "不能代打", - // shape - // : - // "flow-polyline-round", - // source - // : - // "8660695d", - // sourceAnchor - // : - // 1, - // target - // : - // "6bcab22d", - // targetAnchor - // : - // 0 - // } - // ] - - // }, // 节点属性表单 nodeAttributeForm: { label: "", @@ -638,7 +303,6 @@ export default { }; }, mounted() { - console.log( this.phoneNodeContent,' this.phoneNodeContent') this.initG6Editor(); this.getlist(); // this.editor.getCurrentPage().save() @@ -647,7 +311,6 @@ export default { }, watch: { phoneNodeContent(newValue, oldValue) { - console.log(newValue,'newValue222222222222222222222') this.phoneNodeContent = newValue; this.getlist(); }, @@ -725,7 +388,6 @@ export default { }, }); window.flow = flow; - // 设置边 flow.getGraph().edge({ shape: "flow-polyline", @@ -739,20 +401,35 @@ export default { const toolbar = new G6Editor.Toolbar({ container: "toolbar", }); + const container = document.getElementById('page'); + // 为 graph 容器添加鼠标滚轮事件监听 + container.addEventListener('mousewheel', (e) => { + e.preventDefault(); + const ratio = 1.1; // 设置放大缩小的比例 + const oldScale = this.editor.getCurrentPage().getZoom(); // 获取当前的缩放比例 + // console.log(oldScale, 'oldScale') + const newScale = e.wheelDelta > 0 ? oldScale * ratio : oldScale / ratio; // 根据滚轮方向计算新的缩放比例 + // console.log(newScale, 'oldScale') + this.editor.getCurrentPage().zoom(newScale); // 执行缩放操作 + }) + + + + // console.log(toolbar, '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, - }); + // 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", @@ -762,14 +439,15 @@ export default { editor.add(itempannel); editor.add(toolbar); // editor.add(detailpannel); - editor.add(minimap); + // editor.add(minimap); editor.add(contextmenu); // 挂载到window，方便调试 window.editor = editor; - // 获取当前画布 const currentPage = editor.getCurrentPage(); currentPage.on("afterchange", (e) => { + console.log(currentPage, 'currentPage') + if (e.action === "add") { if ( e.model.nodetype === "startNode" || @@ -788,31 +466,31 @@ export default { } } }); - // 监听（选择对象后）事件 - currentPage.on("afteritemselected", (ev) => { - console.log("打印所选对象属性", ev.item); - console.log("打印所选对象数据模型", ev.item.model); - const selectedItemDataModel = ev.item.model; - // 如果选择的对象是节点 - if (ev.item.isNode) { - this.nodeAttributeForm.label = selectedItemDataModel.label; - 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", - }); - this.edgeAttributeForm.label = selectedItemDataModel.label; - this.edgeAttributeForm.shape = selectedItemDataModel.shape; - } - }); + // // 监听（选择对象后）事件 + // currentPage.on("afteritemselected", (ev) => { + // console.log("打印所选对象属性", ev.item); + // console.log("打印所选对象数据模型", ev.item.model); + // const selectedItemDataModel = ev.item.model; + // // 如果选择的对象是节点 + // if (ev.item.isNode) { + // this.nodeAttributeForm.label = selectedItemDataModel.label; + // 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", + // }); + // this.edgeAttributeForm.label = selectedItemDataModel.label; + // this.edgeAttributeForm.shape = selectedItemDataModel.shape; + // } + // }); // 监听（删除后）事件 - currentPage.on("afterdelete", (ev) => {}); + currentPage.on("afterdelete", (ev) => { }); }, // 打开保存为图片弹窗 openSaveAsImageDialog() { @@ -921,5 +599,14 @@ export default {