From e1dbc27fbe3f083322f87fc46070191c619c5199 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 07 八月 2023 20:31:06 +0800
Subject: [PATCH] 2023-08-07
---
src/tabviews/custom/components/chart/antv-X6/index.jsx | 426 ++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 354 insertions(+), 72 deletions(-)
diff --git a/src/tabviews/custom/components/chart/antv-X6/index.jsx b/src/tabviews/custom/components/chart/antv-X6/index.jsx
index 3090207..87c4c48 100644
--- a/src/tabviews/custom/components/chart/antv-X6/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-X6/index.jsx
@@ -1,8 +1,8 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Spin, Tooltip, message, Modal, notification } from 'antd'
-import { UndoOutlined, RedoOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, QuestionCircleOutlined } from '@ant-design/icons'
+import { Spin, Tooltip, message, Modal, notification, Switch } from 'antd'
+import { UndoOutlined, RedoOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, QuestionCircleOutlined, ClearOutlined } from '@ant-design/icons'
import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
@@ -17,10 +17,11 @@
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import NormalHeader from '@/tabviews/custom/components/share/normalheader'
-import lanes from '@/menu/components/chart/antv-X6/lane.json'
-import xflows from '@/menu/components/chart/antv-X6/xflow.json'
+// import lanes from '@/menu/components/chart/antv-X6/lane.json'
+// import xflows from '@/menu/components/chart/antv-X6/xflow.json'
import './index.scss'
+const { confirm } = Modal
const NodeUpdate = asyncComponent(() => import('./nodeupdate'))
const groups = {
@@ -138,7 +139,7 @@
{
inherit: 'rect',
width: 66,
- height: 36,
+ height: 40,
attrs: {
body: {
strokeWidth: 1,
@@ -168,7 +169,7 @@
{
inherit: 'polygon',
width: 66,
- height: 36,
+ height: 40,
attrs: {
body: {
strokeWidth: 1,
@@ -198,7 +199,7 @@
{
inherit: 'polygon',
width: 66,
- height: 36,
+ height: 40,
attrs: {
body: {
strokeWidth: 1,
@@ -225,8 +226,8 @@
'mk-circle',
{
inherit: 'circle',
- width: 36,
- height: 36,
+ width: 40,
+ height: 40,
attrs: {
body: {
strokeWidth: 1,
@@ -256,7 +257,7 @@
{
inherit: 'ellipse',
width: 66,
- height: 36,
+ height: 40,
attrs: {
body: {
strokeWidth: 1,
@@ -285,8 +286,8 @@
'mk-star',
{
inherit: 'polygon',
- width: 36,
- height: 36,
+ width: 40,
+ height: 40,
points: '100,10 40,198 190,78 10,78 160,198',
attrs: {
body: {
@@ -318,7 +319,7 @@
{
inherit: 'text-block',
width: 66,
- height: 36,
+ height: 40,
text: '鏂囨湰鍩�',
attrs: {
body: {
@@ -384,7 +385,8 @@
editing: false,
node: null,
loading: false,
- rolelist: []
+ status: 0,
+ orgs: []
}
selectNode = null
@@ -422,7 +424,7 @@
this.loadData()
if (_config.plot.function === 'edit') {
- this.getrolelist()
+ this.getorganizations()
}
})
}
@@ -467,8 +469,8 @@
}
}
- getrolelist = () => {
- Api.getSystemConfig({func: 's_get_rolelist', OrderCol: 'RoleID desc', PageIndex: 1, PageSize: 1000}).then(res => {
+ getorganizations = () => {
+ Api.genericInterface({func: 's_get_organizations_v1'}).then(res => {
if (!res.status) {
notification.error({
top: 92,
@@ -478,18 +480,113 @@
return
}
- this.setState({rolelist: res.data || []})
+ let orgs = []
+ res.organizations && res.organizations.forEach(com => {
+ let _com = {
+ key: com.OrgCode,
+ title: com.OrgName,
+ shortName: com.ShortName,
+ checkable: false,
+ disabled: true,
+ children: []
+ }
+
+ com.departments.forEach(dep => {
+ let _dep = {
+ key: dep.co_pro_code,
+ title: dep.co_pro_name,
+ checkable: false,
+ disabled: true,
+ children: []
+ }
+
+ dep.jobs.forEach(job => {
+ let _job = {
+ key: job.jobcode,
+ title: job.jobname,
+ checkable: false,
+ disabled: true,
+ children: []
+ }
+
+ job.work_group.forEach(group => {
+ if (group.work_group === 'normal') {
+ group.workers.forEach(work => {
+ let _work = {
+ key: work.worker_id,
+ title: work.workername,
+ email: work.email || '',
+ images: work.images || '',
+ mob: work.mob || '',
+ sex: work.sex || '',
+ work_grade: work.work_grade || '',
+ worker_id: work.worker_id || '',
+ workercode: work.workercode || '',
+ workername: work.workername || '',
+ }
+
+ _job.children.push(_work)
+ })
+ } else {
+ let _group = {
+ key: group.work_group,
+ title: group.work_group,
+ checkable: false,
+ disabled: true,
+ children: []
+ }
+
+ group.workers.forEach(work => {
+ let _work = {
+ key: work.worker_id,
+ title: work.workername,
+ email: work.email || '',
+ images: work.images || '',
+ mob: work.mob || '',
+ sex: work.sex || '',
+ work_grade: work.work_grade || '',
+ worker_id: work.worker_id || '',
+ workercode: work.workercode || '',
+ workername: work.workername || '',
+ }
+
+ _group.children.push(_work)
+ })
+
+ if (_group.children.length > 0) {
+ _job.children.push(_group)
+ }
+ }
+ })
+
+ if (_job.children.length > 0) {
+ _dep.children.push(_job)
+ }
+ })
+
+ if (_dep.children.length > 0) {
+ _com.children.push(_dep)
+ }
+ })
+
+ if (_com.children.length > 0) {
+ orgs.push(_com)
+ }
+ })
+
+ this.setState({orgs: orgs})
})
}
async loadData () {
- const { config, BID } = this.state
+ const { BID } = this.state
- if (config.setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇�
+ if (!BID) {
if (!is(fromJS(this.data), fromJS([]))) {
this.cells = []
this.handleData()
}
+ this.setState({empty: true})
return
}
@@ -497,35 +594,28 @@
loading: true
})
- if (config) {
- if (config.plot.subtype === 'xflow') {
- this.cells = xflows
- } else {
- this.cells = lanes
- }
- this.handleData()
-
- setTimeout(() => {
- this.setState({
- loading: false
- })
- }, 2000)
- return
- }
-
let param = {
- func: '',
- BID: BID
+ func: 's_get_works_flow_local_param_v6',
+ ID: BID
}
let result = await Api.genericInterface(param)
if (result.status) {
+ let item = result.data && result.data[0] ? result.data[0] : null
+ let cells = []
+
+ if (item && item.long_param) {
+ let long_param = JSON.parse(window.decodeURIComponent(window.atob(item.long_param)))
+ cells = long_param.cells || []
+ }
+
+ this.cells = cells
+ this.handleData()
+
this.setState({
+ status: item.status || 0,
loading: false
})
-
- this.cells = result.data || []
- this.handleData()
if (result.message) {
if (result.ErrCode === 'Y') {
@@ -801,7 +891,8 @@
groups: [
{
title: '閫氱敤鑺傜偣',
- name: 'group1'
+ name: 'group1',
+ graphHeight: 240
},
{
title: '鑷畾涔�',
@@ -901,52 +992,121 @@
const r1 = graph.createNode({
shape: 'mk-rect',
- label: '寮�濮�',
+ mknode: 'start',
+ mkdata: {status: 0, statusName: '寮�濮�'},
attrs: {
body: {
rx: 20,
- ry: 26
+ ry: 26,
+ fill: '#52c41a',
+ stroke: '#52c41a'
+ },
+ text: {
+ fill: '#ffffff',
+ text: '寮�濮�'
}
}
})
const r2 = graph.createNode({
shape: 'mk-rect',
- label: '杩囩▼'
+ 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
+ ry: 6,
+ fill: '#fff7e6',
+ stroke: '#fa8c16'
+ },
+ text: {
+ text: '鍙�夎繃绋�'
}
- },
- label: '鍙�夎繃绋�'
+ }
})
const r4 = graph.createNode({
+ shape: 'mk-rect',
+ attrs: {
+ body: {
+ rx: 0,
+ ry: 0,
+ fill: '#fff7e6',
+ stroke: '#fa8c16'
+ },
+ text: {
+ text: '鑺傜偣'
+ }
+ }
+ })
+ const r5 = graph.createNode({
shape: 'mk-polygon',
attrs: {
body: {
- refPoints: '0,10 10,0 20,10 10,20'
+ refPoints: '0,10 10,0 20,10 10,20',
+ fill: '#f9f0ff',
+ stroke: '#722ed1'
+ },
+ text: {
+ text: '鍐崇瓥'
}
- },
- label: '鍐崇瓥'
+ }
})
- const r5 = graph.createNode({
+ const r6 = graph.createNode({
shape: 'mk-paral',
attrs: {
body: {
- refPoints: '10,0 40,0 30,20 0,20'
+ refPoints: '10,0 40,0 30,20 0,20',
+ fill: '#e6fffb',
+ stroke: '#13c2c2'
+ },
+ text: {
+ text: '鏁版嵁'
}
- },
- label: '鏁版嵁'
+ }
})
- const r6 = graph.createNode({
+ const r7 = graph.createNode({
shape: 'mk-circle',
- label: '杩炴帴'
+ attrs: {
+ body: {
+ fill: '#e6f4ff',
+ stroke: '#1890ff'
+ },
+ text: {
+ text: '杩炴帴'
+ }
+ }
+ })
+
+ const r8 = graph.createNode({
+ shape: 'mk-rect',
+ mknode: 'end',
+ mkdata: {status: '', statusName: '缁撴潫'},
+ attrs: {
+ body: {
+ rx: 20,
+ ry: 26,
+ fill: '#fa8c16',
+ stroke: '#fa8c16'
+ },
+ text: {
+ fill: '#ffffff',
+ text: '缁撴潫'
+ }
+ }
})
- stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
+ stencil.load([r1, r2, r3, r4, r5, r6, r7, r8], 'group1')
const p1 = graph.createNode({
shape: 'mk-ellipse',
@@ -1357,13 +1517,83 @@
}
save = () => {
- // let nodes = this.mkGraph.toJSON()
- // this.mkGraph.toPNG((dataUri) => {
- // Api.fileuploadbase64({
- // Base64Img: dataUri
- // }).then(res => {
- // })
- // }, {padding: 20})
+ const { BID, plot, status } = this.state
+
+ if (!BID) {
+ Modal.error({
+ title: '鏈幏鍙栧埌娴佺▼ID锛屼笉鍙繚瀛橈紒',
+ })
+ return
+ }
+
+ let nodes = this.mkGraph.toJSON()
+ let _status = status
+
+ if (plot.subtype === 'xflow' && status === 10) {
+ let start_num = nodes.cells.filter(cell => cell.mknode === 'start').length
+ let end_num = nodes.cells.filter(cell => cell.mknode === 'end').length
+
+ if (start_num !== 1 || end_num !== 1) {
+ _status = 0
+ }
+ }
+
+ this.setState({
+ loading: true
+ })
+
+ this.mkGraph.toPNG((dataUri) => {
+ let param = {
+ func: 's_works_flow_param_upt_v6',
+ long_param: window.btoa(window.encodeURIComponent(JSON.stringify(nodes))),
+ flow_image: dataUri,
+ status: status,
+ ID: BID,
+ BID: ''
+ }
+
+ Api.genericInterface(param).then(res => {
+ if (res.status) {
+ notification.success({
+ top: 92,
+ message: '淇濆瓨鎴愬姛锛�',
+ duration: 2
+ })
+ this.setState({
+ loading: false,
+ status: _status
+ })
+ } else {
+ notification.error({
+ top: 92,
+ message: res.message,
+ duration: 10
+ })
+ this.setState({
+ loading: false
+ })
+ }
+ })
+ }, {padding: 20})
+ }
+
+ clearNode = () => {
+ let cells = this.mkGraph.getCells()
+ const that = this
+
+ if (cells.length === 0) return
+
+ confirm({
+ title: '纭畾娓呯┖鍏冪礌鍚�?',
+ content: '娓呯┖鍚庝笉鍙仮澶嶃��',
+ okText: '纭畾',
+ cancelText: '鍙栨秷',
+ onOk() {
+ that.mkGraph.removeCells(cells)
+ that.mkGraph.cleanHistory()
+ },
+ onCancel() {}
+ })
}
deleteLane = (cell, graph) => {
@@ -1541,6 +1771,8 @@
} else {
this.selectNode.attr('line/strokeDasharray', 0)
}
+ } else if (key === 'mkdata') {
+ this.selectNode.prop('mkdata', value)
}
} else if (node.shape === 'lane') {
if (key === 'title') {
@@ -1589,8 +1821,8 @@
this.selectNode.attr('text/fontSize', value)
} else if (key === 'fontFill') {
this.selectNode.attr('text/fill', value)
- } else if (key === 'mksign') {
- this.selectNode.prop('mksign', value)
+ } else if (key === 'mkdata') {
+ this.selectNode.prop('mkdata', value)
}
}
}
@@ -1672,6 +1904,48 @@
}
}
+ changeStatus = () => {
+ const { plot, status } = this.state
+
+ let _status = status === 10 ? 0 : 10
+
+ if (plot.subtype === 'xflow' && _status === 10) {
+ let nodes = this.mkGraph.toJSON()
+ let start_num = nodes.cells.filter(cell => cell.mknode === 'start').length
+ let end_num = nodes.cells.filter(cell => cell.mknode === 'end').length
+
+ if (start_num === 0) {
+ notification.warning({
+ top: 92,
+ message: '璇锋坊鍔犲紑濮嬭妭鐐癸紒',
+ duration: 2
+ })
+ } else if (start_num > 1) {
+ notification.warning({
+ top: 92,
+ message: '寮�濮嬭妭鐐逛笉鍙坊鍔犲涓紒',
+ duration: 2
+ })
+ } else if (end_num === 0) {
+ notification.warning({
+ top: 92,
+ message: '璇锋坊鍔犵粨鏉熻妭鐐癸紒',
+ duration: 2
+ })
+ } else if (end_num > 1) {
+ notification.warning({
+ top: 92,
+ message: '缁撴潫鑺傜偣涓嶅彲娣诲姞澶氫釜锛�',
+ duration: 2
+ })
+ } else {
+ this.setState({status: _status})
+ }
+ } else {
+ this.setState({status: _status})
+ }
+ }
+
resetlane = (id, x, offset) => {
let nodes = this.mkGraph.getNodes()
@@ -1687,17 +1961,19 @@
}
render() {
- const { loading, config, node, rolelist } = this.state
+ const { loading, config, node, orgs, status } = this.state
let style = {...config.style}
if (config.plot.function === 'show') {
if (config.plot.empty === 'hidden' && this.cells.length === 0) {
- style.display = 'none'
+ style.position = 'absolute'
+ style.width = '100%'
+ style.zIndex = -1
}
return (
- <div className="custom-x6-plot-box" id={'anchor' + config.uuid} style={config.style}>
+ <div className="custom-x6-plot-box" id={'anchor' + config.uuid} style={style}>
{loading ?
<div className="loading-mask">
<div className="ant-spin-blur"></div>
@@ -1744,13 +2020,19 @@
<Tooltip title="鍓嶈繘">
<RedoOutlined onClick={this.setprev}/>
</Tooltip>
+ <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锛�">
<QuestionCircleOutlined />
</Tooltip>
</div>
<div className="right-tool">
+ <Tooltip title="鍚敤/鍋滅敤">
+ <Switch size="small" style={{marginRight: '10px'}} checked={status === 10} onChange={this.changeStatus} />
+ </Tooltip>
<Tooltip title="淇濆瓨">
- <SaveOutlined onClick={this.save}/>
+ <SaveOutlined style={{marginRight: '10px'}} onClick={this.save}/>
</Tooltip>
</div>
</div>
@@ -1759,7 +2041,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} rolelist={rolelist} onChange={this.changeProps}/>}
+ {!node ? <div className="empty">鏈�変腑</div> : <NodeUpdate node={node} orgs={orgs} onChange={this.changeProps}/>}
</div>
</div>
</div>
--
Gitblit v1.8.0