From d1ac67834e4bd2621809a9c778714bf575f80117 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期三, 29 十一月 2023 16:16:15 +0800
Subject: [PATCH] 流程图
---
web/src/views/modules/flowChart/flowChartView.vue | 474 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 474 insertions(+), 0 deletions(-)
diff --git a/web/src/views/modules/flowChart/flowChartView.vue b/web/src/views/modules/flowChart/flowChartView.vue
new file mode 100644
index 0000000..5a1aa6d
--- /dev/null
+++ b/web/src/views/modules/flowChart/flowChartView.vue
@@ -0,0 +1,474 @@
+<template>
+ <div>
+ <el-form :inline="true" style="padding: 0">
+ <zt-form-item style="float: left;margin-bottom: 0">
+ <zt-button style="background:#EAEBEE;border: 1px solid #EAEBEE;color:#000">鏈畬鎴�</zt-button>
+ <zt-button style="background:#F1F0A3;border: 1px solid #F1F0A3;color:#000">杩涜涓�</zt-button>
+ <zt-button style="background:#5FF13A;border: 1px solid #5FF13A;color:#000">宸插畬鎴�</zt-button>
+ </zt-form-item>
+ </el-form>
+ <div id="flowChartView" style="border: 1px solid #EAEBEE;border-radius: 6px;
+ box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);overflow-x: hidden">
+ </div>
+<!-- <el-tooltip id="toolTip" class="box-item" effect="dark" content="1234" placement="top">-->
+<!-- <div></div>-->
+<!-- </el-tooltip>-->
+ </div>
+</template>
+
+<script>
+import {Graph, Shape, Addon, Cell,ToolsView,NodeView} from '@antv/x6';
+export default {
+ name: "flowChart-view",
+ components: {
+ },
+ props:{
+ flowChartHeight:''
+ },
+ data() {
+ return {
+ prop:{
+ content:'',
+ visible:false,
+ },
+ knob:HTMLDivElement,
+ flowCode:'',
+ diagramList:[],
+ diagramName:'',
+ diagramId:'',
+ flowList: '',
+ flowId: '',
+ diagramJson: '',
+ dataForm: { // 娴佺▼鍥惧唴瀹�
+ id: null,
+ diagram: null
+ },
+ emptyJson: {
+ // 鑺傜偣
+ nodes: [
+ {
+ id: 'node1', // String锛屽彲閫夛紝鑺傜偣鐨勫敮涓�鏍囪瘑
+ width: 500, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� width 鍊�
+ height: 300, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� height 鍊�
+ label: '璇ラ」鐩繕鏈厤缃巶瀹剁綉缁滃浘',
+ attrs: {
+ body: {
+ strokeWidth: 0
+ },
+ }
+ // text: {
+ // text: '璇ラ」鐩繕鏈紪鍒剁綉缁滃浘',
+ // // fontSize: 56,
+ // fill: 'rgba(0,0,0,0.7)'
+ // },
+ // },
+ }
+ ],
+ },
+ type: '',
+ id: '',
+ graph: null,
+ globalGridAttr: {
+ type: 'mesh',
+ size: 10,
+ color: '#e5e5e5',
+ thickness: 1,
+ colorSecond: '#d0d0d0',
+ thicknessSecond: 1,
+ factor: 4,
+ bgColor: '#e5e5e5',
+ showImage: true,
+ repeat: 'watermark',
+ angle: 30,
+ position: 'center',
+ bgSize: JSON.stringify({width: 150, height: 150}),
+ opacity: 0.1,
+
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ connector: 'normal',
+ label: '',
+
+ nodeStroke: '#5F95FF',
+ nodeStrokeWidth: 1,
+ nodeFill: '#ffffff',
+ nodeFontSize: 12,
+ nodeColor: '#080808',
+ nodeText: '',
+ nodeDate: '',
+ nodeUsers: '',
+ nodeDataDate: '',
+ nodeDataText: ''
+ },
+ isReady: false,
+ curCel: Cell,
+ left_p: document.documentElement.clientHeight * 0.85,
+ ports: {
+ groups: {
+ top: {
+ position: 'top',
+ attrs: {
+ circle: {
+ r: 8,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ right: {
+ position: 'right',
+ attrs: {
+ circle: {
+ r: 8,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ bottom: {
+ position: 'bottom',
+ attrs: {
+ circle: {
+ r: 8,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ left: {
+ position: 'left',
+ attrs: {
+ circle: {
+ r: 8,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ },
+ items: [
+ {
+ group: 'top',
+ },
+ {
+ group: 'right',
+ },
+ {
+ group: 'bottom',
+ },
+ {
+ group: 'left',
+ },
+ ],
+ }
+ }
+ },
+ watch: {
+ },
+ methods: {
+ async init(params) {
+ let res = await this.$http.get(`/WfDef/getFlowStatusJson`,{params:params})
+ console.log(res.data,'res.data ')
+ if (res.data !== null) {
+ this.dataForm = res.data
+ this.graph.unfreeze('flowChartView')
+ if (this.dataForm.diagram!=null){
+ this.graph.fromJSON(JSON.parse(this.dataForm.diagram))
+ } else{
+ this.graph.fromJSON(this.emptyJson)
+ }
+ this.graph.positionContent('top',{ padding: { left: 0 }})
+ // this.graph.zoomToFit()
+ this.graph.freeze('flowChartView')
+ if(flowCode!='planFlow' && flowCode!='wltFlow' && flowCode!='xbsy' && flowCode!='hxsy' && flowCode!='kybgFlow'
+ && flowCode!='jsfaFlow' && flowCode!='jzjysFlow' && flowCode!='zjgcFlow'){
+ if(this.graph.scroller){
+ for(let graph in this.graph.scroller.widgetOptions){
+ this.graph.scroller.widgetOptions[graph] = false
+ }
+ }
+ // this.graph.disablePanning()
+ this.graph.lockScroller()
+ }
+ } else {
+ this.graph.unfreeze('flowChartView')
+ this.dataForm.id = null
+ console.log(this.data, 'this.data asdfg')
+ this.graph.fromJSON(this.emptyJson)
+ this.graph.centerContent()
+ // this.graph.zoomToFit()
+ this.graph.freeze('flowChartView')
+ }
+ },
+ init2() {
+ this.graph = new Graph({
+ container: document.getElementById('flowChartView'),
+ width: document.documentElement.clientWidth*0.5,
+ height:this.flowChartHeight? 595:document.documentElement.clientHeight-220,
+ // async: true,
+ // grid: {
+ // visible: true,
+ // },
+ // autoResize: true,
+ // panning: {
+ // enabled: true,
+ // },
+ scroller: {
+ enabled: true,
+ pannable: true,
+ },
+ mousewheel: {
+ enabled: true,
+ zoomAtMousePosition: true,
+ modifiers: 'ctrl',
+ minScale: 0.1,
+ maxScale: 10,
+ },
+ connecting: {
+ router: { name: 'manhattan' },
+ connector: { name: 'rounded' },
+ connectionPoint: 'anchor',
+ allowBlank: false,
+ snap: {
+ radius: 20,
+ }
+ },
+ })
+ this.graph.centerContent()
+ Graph.registerNode(
+ 'custom-polygon',
+ {
+ inherit: 'polygon',
+ width: 86,
+ height: 56,
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#5F95FF',
+ fill: '#EFF4FF',
+ },
+ text: {
+ fontSize: 20,
+ fill: '#262626',
+ },
+ },
+ ports: {
+ ...this.ports
+ },
+ },
+ true,
+ )
+
+ Graph.registerNode(
+ 'custom-circle',
+ {
+ inherit: 'ellipse',
+ width: 86,
+ height: 56,
+ data: {
+ dataId: '',
+ finishDate: ''
+ },
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#5F95FF',
+ fill: '#EFF4FF',
+ },
+ title: {
+ text: '',
+ fontSize: 20,
+ fill: '#262626',
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ text: {
+ fontSize: 20,
+ fill: '#262626',
+ refX: 0.5,
+ refY: 0.5,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'middle',
+ },
+ },
+
+ markup: [
+ {
+ tagName: 'ellipse',
+ selector: 'body',
+ },
+ {
+ tagName: 'text',
+ selector: 'title',
+ },
+ {
+ tagName: 'text',
+ selector: 'text',
+ },
+ ],
+ ports: {...this.ports},
+ },
+ true,
+ )
+ const r6 = this.graph.createNode({
+ shape: 'text-block',
+ label: '鍙�夎繃绋�',
+ width: 86,
+ height: 56,
+ data: {
+ dataId: '',
+ finishDate: ''
+ },
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#5F95FF',
+ fill: '#EFF4FF',
+ rx: 6,
+ ry: 6
+ },
+ text: {
+ text: '鍙�夎繃绋�',
+ fontSize: 20,
+ fill: '#262626',
+ refX: '0',
+ refY: -0.5,
+ refY2: '0',
+ textAnchor: 'middle',
+ textVerticalAnchor: 'middle',
+ },
+ },
+ markup: [
+ {
+ tagName: 'rect',
+ selector: 'body',
+ },
+ {
+ tagName: 'text',
+ selector: 'text',
+ },
+ ],
+ ports: {...this.ports},
+ })
+ const r4 = this.graph.createNode({
+ shape: 'custom-polygon',
+ attrs: {
+ body: {
+ refPoints: '0,10 10,0 20,10 10,20',
+ },
+ },
+ label: '鍐崇瓥',
+ })
+ const r5 = this.graph.createNode({
+ shape: 'custom-circle',
+ data: {
+ dataId: '',
+ finishDate: ''
+ },
+ label: '闃舵',
+ })
+ // 鍗曞嚮node鑺傜偣
+ this.graph.on('node:click', ({node}) => {
+ let stepMarker = node.getData().stepMarker || ''
+ this.$emit('fatherMethod',stepMarker)
+ console.log(node.getData(),stepMarker,' node.getData()')
+ })
+ // // 榧犳爣绉诲叆node鑺傜偣
+ this.graph.on('node:mouseenter', ({node,e}) => {
+ const style = this.knob.style
+ // e.stopPropagation()
+ setTimeout(()=>{
+ if (e) {
+ if (node.getData().receiveName && node.getData().receiveName!==undefined) {
+ const p = this.graph.clientToGraph(e.clientX, e.clientY)
+ style.display = 'block'
+ style.left = `${p.x}px`
+ style.top = `${p.y}px`
+ style.width = (node.getData().tipsWidth +30+ 'px')
+ style.height = (40 + 'px')
+ style.textAlign = 'center'
+ style.background = '#000'
+ style.color = '#fff'
+ style.lineHeight = (40 + 'px')
+ this.knob.innerText = node.getData().receiveName === undefined ? '鏆傛棤' : node.getData().receiveName
+ }else{
+ style.display = 'none'
+ style.left = '-1000px'
+ style.top = '-1000px'
+ }
+ } else {
+ style.display = 'none'
+ style.left = '-1000px'
+ style.top = '-1000px'
+ }
+ },50)
+ })
+ // // 榧犳爣绉诲嚭node鑺傜偣
+ this.graph.on('node:mouseleave', ({node}) => {
+ const style = this.knob.style
+ style.display = 'none'
+ })
+ }
+ },
+ mounted() {
+ this.init2()
+ this.type = 'grid'
+ this.knob = document.createElement('div',false)
+ // this.knob = document.getElementById('toolTip')
+ this.knob.style.position = 'absolute'
+ document.getElementById('flowChartView').appendChild(this.knob)
+ }
+}
+</script>
+
+<style>
+#flowChartView {
+ display: flex;
+ border: 1px solid #dfe3e8;
+ width: 100% !important;
+}
+#flowChartView .x6-cell.x6-node {
+ cursor: inherit;
+}
+.x6-graph-scroller.x6-graph-scroller-pannable {
+ width: 100% !important;
+}
+
+.x6-widget-stencil {
+ position: relative;
+ height: 100%;
+}
+
+.x6-widget-stencil-content {
+ position: relative;
+ height: 100%;
+}
+.clear::after{
+ content: '';
+ display: table;
+ clear: both;
+}
+</style>
--
Gitblit v1.9.1