购物网站开发周期,广州专业网站制作平台,男女在一起做恶心的事网站,南宁房产信息网先上图 //index.html#xff0c;有时候可能加载失败#xff0c;那就再找一个别的cdn 或者npm下载#xff0c;如果npm下载#xff0c;
//那么需要全局引入或者局部引入#xff0c;代码里面写法也会不同#xff0c;详细的可以看示例script srchttps://cdn.jsdeli… 先上图 //index.html有时候可能加载失败那就再找一个别的cdn 或者npm下载如果npm下载
//那么需要全局引入或者局部引入代码里面写法也会不同详细的可以看示例script srchttps://cdn.jsdelivr.net/npm/antv/x6/dist/x6.js/script
//chart.vue
templatedivel-button typeprimary clickdownload导出PNG/el-buttonel-button typeprimary clickdownloadJSON导出JSON/el-buttoninput typefile idselect-input reffiles stylewidth: 70px/删除某个节点 shiftbackspacediv idcontainerdiv idstencil/divdiv idgraph-container/div/div/div
/templatescript
export default {data(){return{graph: null,}},mounted(){// 为了协助代码演示const graph new X6.Graph({container: document.getElementById(graph-container),grid: true,background: {color: #fffbe6, // 设置画布背景颜色},mousewheel: {enabled: true,zoomAtMousePosition: true,modifiers: ctrl,minScale: 0.5,maxScale: 3},connecting: {router: {name: manhattan,args: {padding: 1}},connector: {name: rounded,args: {radius: 8}},anchor: center,connectionPoint: anchor,allowBlank: false,snap: {radius: 20},createEdge() {return new X6.Shape.Edge({attrs: {line: {stroke: #A2B1C3,strokeWidth: 2,targetMarker: {name: block,width: 12,height: 8}}},zIndex: 0})},validateConnection({ targetMagnet }) {return !!targetMagnet}},highlighting: {magnetAdsorbed: {name: stroke,args: {attrs: {fill: #5F95FF,stroke: #5F95FF}}}},resizing: true,rotating: true,selecting: {enabled: true,rubberband: true,showNodeSelectionBox: true},snapline: true,keyboard: true,clipboard: true})this.graph graph// #region 初始化 stencilconst stencil new X6.Addon.Stencil({title: 流程图,target: graph,stencilGraphWidth: 200,stencilGraphHeight: 180,collapsable: true,groups: [{title: 基础流程图,name: group1},{title: 系统设计图,name: group2,graphHeight: 250,layoutOptions: {rowHeight: 70}}],layoutOptions: {columns: 2,columnWidth: 80,rowHeight: 55}})document.getElementById(stencil).appendChild(stencil.container)// #region 快捷键与事件// copy cut pastegraph.bindKey([metac, ctrlc], () {const cells graph.getSelectedCells()if (cells.length) {graph.copy(cells)}return false})graph.bindKey([metax, ctrlx], () {const cells graph.getSelectedCells()if (cells.length) {graph.cut(cells)}return false})graph.bindKey([metav, ctrlv], () {if (!graph.isClipboardEmpty()) {const cells graph.paste({ offset: 32 })graph.cleanSelection()graph.select(cells)}return false})//undo redograph.bindKey([metaz, ctrlz], () {if (graph.history.canUndo()) {graph.history.undo()}return false})graph.bindKey([metashiftz, ctrlshiftz], () {if (graph.history.canRedo()) {graph.history.redo()}return false})// select allgraph.bindKey([metaa, ctrla], () {const nodes graph.getNodes()if (nodes) {graph.select(nodes)}})//deletegraph.bindKey(shiftbackspace, () {const cells graph.getSelectedCells()if (cells.length) {graph.removeCells(cells)}})// zoomgraph.bindKey([ctrl1, meta1], () {const zoom graph.zoom()if (zoom 1.5) {graph.zoom(0.1)}})graph.bindKey([ctrl2, meta2], () {const zoom graph.zoom()if (zoom 0.5) {graph.zoom(-0.1)}})// 控制连接桩显示/隐藏const showPorts (ports, show) {for (let i 0, len ports.length; i len; i i 1) {ports[i].style.visibility show ? visible : hidden}}graph.on(node:mouseenter, () {const container document.getElementById(graph-container)const ports container.querySelectorAll(.x6-port-body)showPorts(ports, true)})graph.on(node:mouseleave, () {const container document.getElementById(graph-container)const ports container.querySelectorAll(.x6-port-body)showPorts(ports, false)})// #endregion// #region 初始化图形const ports {groups: {top: {position: top,attrs: {circle: {r: 4,magnet: true,stroke: #5F95FF,strokeWidth: 1,fill: #fff,style: {visibility: hidden}}}},right: {position: right,attrs: {circle: {r: 4,magnet: true,stroke: #5F95FF,strokeWidth: 1,fill: #fff,style: {visibility: hidden}}}},bottom: {position: bottom,attrs: {circle: {r: 4,magnet: true,stroke: #5F95FF,strokeWidth: 1,fill: #fff,style: {visibility: hidden}}}},left: {position: left,attrs: {circle: {r: 4,magnet: true,stroke: #5F95FF,strokeWidth: 1,fill: #fff,style: {visibility: hidden}}}}},items: [{group: top},{group: right},{group: bottom},{group: left}]}X6.Graph.registerNode(custom-rect,{inherit: rect,width: 66,height: 36,attrs: {body: {strokeWidth: 1,stroke: #5F95FF,fill: #EFF4FF},text: {fontSize: 12,fill: #262626}},ports: { ...ports }},true)X6.Graph.registerNode(custom-polygon,{inherit: polygon,width: 66,height: 36,attrs: {body: {strokeWidth: 1,stroke: #5F95FF,fill: #EFF4FF},text: {fontSize: 12,fill: #262626}},ports: {...ports,items: [{group: top},{group: bottom}]}},true)X6.Graph.registerNode(custom-circle,{inherit: circle,width: 45,height: 45,attrs: {body: {strokeWidth: 1,stroke: #5F95FF,fill: #EFF4FF},text: {fontSize: 12,fill: #262626}},ports: { ...ports }},true)X6.Graph.registerNode(custom-image,{inherit: rect,width: 52,height: 52,markup: [{tagName: rect,selector: body},{tagName: image},{tagName: text,selector: label}],attrs: {body: {stroke: #5F95FF,fill: #5F95FF},image: {width: 26,height: 26,refX: 13,refY: 16},label: {refX: 3,refY: 2,textAnchor: left,textVerticalAnchor: top,fontSize: 12,fill: #fff}},ports: { ...ports }},true)const r1 graph.createNode({shape: custom-rect,label: 开始,attrs: {body: {rx: 20,ry: 26}}})const r2 graph.createNode({shape: custom-rect,label: 过程})const r3 graph.createNode({shape: custom-rect,attrs: {body: {rx: 6,ry: 6}},label: 可选过程})const r4 graph.createNode({shape: custom-polygon,attrs: {body: {refPoints: 0,10 10,0 20,10 10,20}},label: 决策})const r5 graph.createNode({shape: custom-polygon,attrs: {body: {refPoints: 10,0 40,0 30,20 0,20}},label: 数据})const r6 graph.createNode({shape: custom-circle,label: 连接})stencil.load([r1, r2, r3, r4, r5, r6], group1)const imageShapes [{label: Client,image:https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg},{label: Http,image:https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg},{label: Api,image:https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg},{label: Sql,image:https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg},{label: Clound,image:https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg},{label: Mq,image:https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg}]const imageNodes imageShapes.map(item graph.createNode({shape: custom-image,label: item.label,attrs: {image: {xlink:href: item.image}}}))stencil.load(imageNodes, group2)//编辑graph.on(cell:dblclick, ({ cell, e }) {const isNode cell.isNode()const name cell.isNode() ? node-editor : edge-editorcell.removeTool(name)cell.addTools({name,args: {event: e,attrs: {backgroundColor: isNode ? #EFF4FF : #FFF,},},})})//直接加在样式上不生效document.getElementById(graph-container).style.width calc(100% - 180px)document.getElementById(graph-container).style.height 100%document.getElementById(select-input).addEventListener(change, (e) {let file e.target.files[0];let fileName file.name.split(.)if(fileName[fileName.length-1] ! txt) {this.$refs.files.value return this.$message({message: 请上传.txt格式文件,type: warning});}if(!window.FileReader) return this.$message({message: Not supported by your browser!,type: warning});// 创建FileReader对象(文件对象)const reader new FileReader();// 读取出错时reader.onerror (e){this.$message({message: 读取出错!,type: warning});};// 读取中断时reader.onabort (e){this.$message({message: 读取中断!,type: warning});};// 读取成功时reader.onload (e){// 输出文件this.$refs.files.value this.graph.fromJSON(JSON.parse(e.target.result))this.$message({message: 读取成功!,type: success});};reader.readAsText(file,utf-8);}, false);},methods:{download(){this.graph.toPNG((dataUri) {// 下载X6.DataUri.downloadDataUri(dataUri, 流程图.png)},{width: 600,height: 500,padding: 10,})},downloadJSON(){let d this.graph.toJSON()let el document.createElement(a)el.setAttribute(href,data:text.plain;charsetutf-8,encodeURIComponent(JSON.stringify(d)))el.setAttribute(download,图表数据.txt)el.style.display nonedocument.body.appendChild(el)el.click()document.body.removeChild(el)},}
}
/scriptstyle langless scoped
#container {display: flex;border: 1px solid #dfe3e8;height: 100vh;width: 100%;margin-top: 10px;
}
#stencil {width: 180px;height: 100%;position: relative;border-right: 1px solid #dfe3e8;
}
.x6-widget-stencil {background-color: #fff;
}
.x6-widget-stencil-title {background-color: #fff;
}
.x6-widget-stencil-group-title {background-color: #fff !important;
}
.x6-widget-transform {margin: -1px 0 0 -1px;padding: 0px;border: 1px solid #239edd;
}
.x6-widget-transform div {border: 1px solid #239edd;
}
.x6-widget-transform div:hover {background-color: #3dafe4;
}
.x6-widget-transform-active-handle {background-color: #3dafe4;
}
.x6-widget-transform-resize {border-radius: 0;
}
.x6-widget-selection-inner {border: 1px solid #239edd;
}
.x6-widget-selection-box {opacity: 0;
}
/style
