From e8ef7263819e847d55cd35e006aa02635fd7b82e Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 14 五月 2025 17:54:21 +0800
Subject: [PATCH] 2025-05-14
---
src/tabviews/custom/components/chart/antv-X6/index.jsx | 271 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 175 insertions(+), 96 deletions(-)
diff --git a/src/tabviews/custom/components/chart/antv-X6/index.jsx b/src/tabviews/custom/components/chart/antv-X6/index.jsx
index 4e155ba..ed4283f 100644
--- a/src/tabviews/custom/components/chart/antv-X6/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-X6/index.jsx
@@ -138,8 +138,8 @@
'mk-rect',
{
inherit: 'rect',
- width: 66,
- height: 40,
+ width: 100,
+ height: 32,
attrs: {
body: {
strokeWidth: 1,
@@ -168,8 +168,8 @@
'mk-polygon',
{
inherit: 'polygon',
- width: 66,
- height: 40,
+ width: 100,
+ height: 32,
attrs: {
body: {
strokeWidth: 1,
@@ -198,8 +198,8 @@
'mk-paral',
{
inherit: 'polygon',
- width: 66,
- height: 40,
+ width: 100,
+ height: 32,
attrs: {
body: {
strokeWidth: 1,
@@ -256,8 +256,8 @@
'mk-ellipse',
{
inherit: 'ellipse',
- width: 66,
- height: 40,
+ width: 100,
+ height: 32,
attrs: {
body: {
strokeWidth: 1,
@@ -318,8 +318,8 @@
'mk-text',
{
inherit: 'text-block',
- width: 66,
- height: 40,
+ width: 100,
+ height: 50,
text: '鏂囨湰鍩�',
attrs: {
body: {
@@ -344,7 +344,7 @@
yellow_green: '#a0d911',
green: '#52c41a',
cyan: '#13c2c2',
- blue_purple: '#2f54eb',
+ blue_purple: '#3860f4',
purple: '#722ed1',
magenta: '#eb2f96',
grass_green: '#aeb303',
@@ -388,7 +388,8 @@
status: 0,
flowname: '',
flowcode: '',
- orgs: []
+ orgs: [],
+ empty: true
}
selectNode = null
@@ -526,6 +527,7 @@
worker_id: work.worker_id || '',
workercode: work.workercode || '',
workername: work.workername || '',
+ job_type: job.job_type || '',
parentIds: [com.OrgCode, dep.co_pro_code, job.jobcode],
parentNames: [com.OrgName, dep.co_pro_name, job.jobname]
}
@@ -553,6 +555,7 @@
worker_id: work.worker_id || '',
workercode: work.workercode || '',
workername: work.workername || '',
+ job_type: job.job_type || '',
parentIds: [com.OrgCode, dep.co_pro_code, job.jobcode, group.work_group],
parentNames: [com.OrgName, dep.co_pro_name, job.jobname, group.work_group]
}
@@ -590,8 +593,8 @@
const { BID } = this.state
if (!BID) {
+ this.cells = []
if (!is(fromJS(this.data), fromJS([]))) {
- this.cells = []
this.handleData()
}
this.setState({empty: true})
@@ -624,7 +627,8 @@
status: item.status || 0,
flowname: item.works_flow_name || '',
flowcode: item.works_flow_code || '',
- loading: false
+ loading: false,
+ empty: cells.length === 0
})
if (result.message) {
@@ -896,18 +900,18 @@
const stencil = new Stencil({
title: '娴佺▼鍥�',
target: graph,
- stencilGraphWidth: 180,
+ stencilGraphWidth: 230,
stencilGraphHeight: 180,
groups: [
{
title: '閫氱敤鑺傜偣',
name: 'group1',
- graphHeight: 240
+ graphHeight: 150
},
{
title: '鑷畾涔�',
name: 'group2',
- graphHeight: 150,
+ graphHeight: 300,
layoutOptions: {
rowHeight: 70
}
@@ -915,7 +919,7 @@
],
layoutOptions: {
columns: 2,
- columnWidth: 80,
+ columnWidth: 110,
rowHeight: 55
}
})
@@ -994,6 +998,18 @@
graph.clearTransformWidgets()
})
+
+ graph.on('node:dblclick', () => {
+ setTimeout(() => {
+ MKEmitter.emit('mk-x6-dbclick')
+ }, 100)
+ })
+ graph.on('edge:dblclick', () => {
+ setTimeout(() => {
+ MKEmitter.emit('mk-x6-dbclick')
+ }, 100)
+ })
+
graph.on('blank:click', () => {
this.selectNode = null
@@ -1003,15 +1019,30 @@
if (!isNew) return
let target = edge.getTargetCell()
+ let source = edge.getSourceCell()
- if (!target) return
+ if (!target || !source) return
+
+ if (source.prop('mknode') === 'end') {
+ notification.warning({
+ top: 92,
+ message: '缁撴潫鑺傜偣涓嶅彲娣诲姞鍒嗘敮锛�',
+ duration: 2
+ })
+ graph.removeCells([edge])
+ return
+ }
let mkdata = target.prop('mkdata')
- if (target.prop('mknode') === 'end') {
+ if (source.prop('mknode') === 'start' && target.prop('mknode') === 'end') {
+ edge.prop('mknode', 'throughEdge')
+ } else if (target.prop('mknode') === 'end') {
edge.prop('mknode', 'endEdge')
} else if (target.prop('mknode') === 'start') {
edge.prop('mknode', 'startEdge')
+ } else if (source.prop('mknode') === 'start') {
+ edge.prop('mknode', 'firstEdge')
}
if (mkdata) {
edge.prop('mkdata', {status: mkdata.status, statusName: mkdata.statusName})
@@ -1024,10 +1055,10 @@
mkdata: {status: 0, statusName: '鏈彁浜�'},
attrs: {
body: {
- rx: 20,
- ry: 26,
- fill: '#52c41a',
- stroke: '#52c41a'
+ rx: 0,
+ ry: 0,
+ fill: '#000000',
+ stroke: '#000000'
},
text: {
fill: '#ffffff',
@@ -1035,83 +1066,34 @@
}
}
})
- const r2 = graph.createNode({
- shape: 'mk-rect',
- attrs: {
- body: {
- rx: 20,
- ry: 26,
- fill: '#e6f4ff',
- stroke: '#1890ff'
- },
- text: {
- text: '杩囩▼'
- }
- }
- })
- const r3 = graph.createNode({
- shape: 'mk-rect',
- attrs: {
- body: {
- rx: 6,
- ry: 6,
- fill: '#fff7e6',
- stroke: '#fa8c16'
- },
- text: {
- text: '鍙�夎繃绋�'
- }
- }
- })
+
const r4 = graph.createNode({
shape: 'mk-rect',
attrs: {
body: {
rx: 0,
ry: 0,
- fill: '#fff7e6',
- stroke: '#fa8c16'
+ fill: '#ffffff',
+ stroke: '#757575'
},
text: {
+ fill: '#000000',
text: '鑺傜偣'
}
}
})
+
const r5 = graph.createNode({
shape: 'mk-polygon',
attrs: {
body: {
refPoints: '0,10 10,0 20,10 10,20',
- fill: '#f9f0ff',
- stroke: '#722ed1'
+ fill: '#ffffff',
+ stroke: '#757575'
},
text: {
+ fill: '#000000',
text: '鍐崇瓥'
- }
- }
- })
- const r6 = graph.createNode({
- shape: 'mk-paral',
- attrs: {
- body: {
- refPoints: '10,0 40,0 30,20 0,20',
- fill: '#e6fffb',
- stroke: '#13c2c2'
- },
- text: {
- text: '鏁版嵁'
- }
- }
- })
- const r7 = graph.createNode({
- shape: 'mk-circle',
- attrs: {
- body: {
- fill: '#e6f4ff',
- stroke: '#1890ff'
- },
- text: {
- text: '杩炴帴'
}
}
})
@@ -1122,10 +1104,10 @@
mkdata: {status: 888, statusName: '宸插畬鎴�'},
attrs: {
body: {
- rx: 20,
- ry: 26,
- fill: '#fa8c16',
- stroke: '#fa8c16'
+ rx: 0,
+ ry: 0,
+ fill: '#000000',
+ stroke: '#000000'
},
text: {
fill: '#ffffff',
@@ -1134,7 +1116,65 @@
}
})
- stencil.load([r1, r2, r3, r4, r5, r6, r7, r8], 'group1')
+ stencil.load([r1, r4, r5, r8], 'group1')
+
+ const r2 = graph.createNode({
+ shape: 'mk-rect',
+ attrs: {
+ body: {
+ rx: 20,
+ ry: 26,
+ fill: '#ffffff',
+ stroke: '#757575'
+ },
+ text: {
+ fill: '#000000',
+ text: '杩囩▼'
+ }
+ }
+ })
+ const r3 = graph.createNode({
+ shape: 'mk-rect',
+ attrs: {
+ body: {
+ rx: 6,
+ ry: 6,
+ fill: '#ffffff',
+ stroke: '#757575'
+ },
+ text: {
+ fill: '#000000',
+ text: '鍙�夎繃绋�'
+ }
+ }
+ })
+ const r6 = graph.createNode({
+ shape: 'mk-paral',
+ attrs: {
+ body: {
+ refPoints: '10,0 40,0 30,20 0,20',
+ fill: '#ffffff',
+ stroke: '#757575'
+ },
+ text: {
+ fill: '#000000',
+ text: '鏁版嵁'
+ }
+ }
+ })
+ const r7 = graph.createNode({
+ shape: 'mk-circle',
+ attrs: {
+ body: {
+ fill: '#ffffff',
+ stroke: '#757575'
+ },
+ text: {
+ fill: '#000000',
+ text: '杩炴帴'
+ }
+ }
+ })
const p1 = graph.createNode({
shape: 'mk-ellipse',
@@ -1149,7 +1189,7 @@
shape: 'mk-text'
})
- stencil.load([p1, p2, p3], 'group2')
+ stencil.load([r2, r3, r6, r7, p1, p2, p3], 'group2')
if (this.cells.length > 0) {
let cells = []
@@ -1268,7 +1308,7 @@
const stencil = new Stencil({
title: '娴佺▼鍥�',
target: graph,
- stencilGraphWidth: 180,
+ stencilGraphWidth: 230,
stencilGraphHeight: 180,
groups: [
{
@@ -1294,7 +1334,7 @@
],
layoutOptions: {
columns: 2,
- columnWidth: 80,
+ columnWidth: 110,
rowHeight: 55
}
})
@@ -1523,12 +1563,16 @@
setback = () => {
if (this.mkGraph.canUndo()) {
this.mkGraph.undo()
+ } else {
+ message.warning('鏃犲彲鎾ら攢璁板綍锛�')
}
}
setprev = () => {
if (this.mkGraph.canRedo()) {
this.mkGraph.redo()
+ } else {
+ message.warning('鏃犲彲鍓嶈繘璁板綍锛�')
}
}
@@ -1594,7 +1638,13 @@
} else if (item.mknode === 'end') {
end_num++
} else if (item.shape === 'edge') {
- if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) {
+ if (item.mknode === 'throughEdge') {
+ if (!item.mkdata.seniorbers || item.mkdata.seniorbers.length === 0) {
+ unvalid = true
+ }
+ } else if (item.mkdata.seniorCondition === 'open') {
+
+ } else if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) {
unvalid = true
} else if (item.mknode === 'startEdge' || item.mkdata.flowType === 'reject') {
if (map.has(item.source.cell)) {
@@ -1700,7 +1750,10 @@
let cells = this.mkGraph.getCells()
const that = this
- if (cells.length === 0) return
+ if (cells.length === 0) {
+ message.warning('灏氭湭娣诲姞鍏冪礌锛�')
+ return
+ }
confirm({
title: '纭畾娓呯┖鍏冪礌鍚�?',
@@ -1857,6 +1910,16 @@
}
}
+ delCell = () => {
+ const { node } = this.state
+
+ let cell = this.mkGraph.getCellById(node.id)
+
+ this.mkGraph.removeCells([cell])
+
+ this.setState({node: null})
+ }
+
changeProps = (value, key) => {
const { node } = this.state
@@ -1891,6 +1954,16 @@
this.selectNode.attr('line/strokeDasharray', 0)
}
} else if (key === 'mkdata') {
+ if (!node.mkdata) {
+ if (node.target && node.target.cell) {
+ let cell = this.mkGraph.getCellById(node.target.cell)
+
+ if (cell) {
+ cell.prop('mkdata', {status: value.status, statusName: value.statusName || ''})
+ }
+ }
+ }
+
this.selectNode.prop('mkdata', value)
}
} else if (node.shape === 'lane') {
@@ -2062,7 +2135,13 @@
} else if (item.mknode === 'end') {
end_num++
} else if (item.shape === 'edge' && !unvalidId && !rejectId && !approvalId) {
- if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) {
+ if (item.mknode === 'throughEdge') {
+ if (!item.mkdata.seniorbers || item.mkdata.seniorbers.length === 0) {
+ unvalidId = item.id
+ }
+ } else if (item.mkdata.seniorCondition === 'open') {
+
+ } else if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) {
unvalidId = item.id
} else if (item.mknode === 'startEdge' || item.mkdata.flowType === 'reject') {
if (map.has(item.source.cell)) {
@@ -2224,12 +2303,12 @@
}
render() {
- const { loading, config, node, orgs, status, flowname } = this.state
+ const { loading, config, node, orgs, status, flowname, empty } = this.state
let style = {...config.style}
if (config.plot.function === 'show') {
- if (config.plot.empty === 'hidden' && this.cells.length === 0) {
+ if (config.plot.empty === 'hidden' && empty) {
style.position = 'absolute'
style.width = '100%'
style.zIndex = -1
@@ -2286,7 +2365,7 @@
<Tooltip title="娓呯┖">
<ClearOutlined onClick={this.clearNode}/>
</Tooltip>
- <Tooltip overlayStyle={{maxWidth: 260}} title="蹇嵎閿細澶嶅埗锛坈trl+c锛夈�佸壀鍒囷紙ctrl+x锛夈�佺矘璐达紙ctrl+v锛夈�佸悗閫�锛坈trl+z锛夈�佸墠杩涳紙ctrl+shift+z锛夈�佸垹闄わ紙backspace 鎴� delete锛�">
+ <Tooltip overlayStyle={{maxWidth: 310}} title="蹇嵎閿細澶嶅埗锛坈trl+c锛夈�佸壀鍒囷紙ctrl+x锛夈�佺矘璐达紙ctrl+v锛夈�佸悗閫�锛坈trl+z锛夈�佸墠杩涳紙ctrl+shift+z锛夈�佸垹闄わ紙backspace 鎴� delete锛夛紱鍙屽嚮鑺傜偣鎴栬繛绾垮彲缂栬緫鑷畾涔変俊鎭��">
<QuestionCircleOutlined />
</Tooltip>
</div>
@@ -2302,7 +2381,7 @@
<div id={config.uuid + 'container'} className="mk-container"></div>
<div className="mk-node-edit">
<div className="header">璁剧疆</div>
- {!node ? <div className="empty">鏈�変腑</div> : <NodeUpdate node={node} orgs={orgs} onChange={this.changeProps}/>}
+ {!node ? <div className="empty">鏈�変腑</div> : <NodeUpdate node={node} orgs={orgs} onChange={this.changeProps} onDel={this.delCell}/>}
</div>
</div>
</div>
--
Gitblit v1.8.0