|
|
@@ -7,6 +7,7 @@ import { Keyboard } from '@antv/x6-plugin-keyboard'
|
|
|
import { Clipboard } from '@antv/x6-plugin-clipboard'
|
|
|
import { History } from '@antv/x6-plugin-history'
|
|
|
import { Export } from "@antv/x6-plugin-export";
|
|
|
+import { MiniMap } from '@antv/x6-plugin-minimap'
|
|
|
import { getImg } from '../../../../libs/base/x6-utils'
|
|
|
import router from '@/router'
|
|
|
import config from '@/config'
|
|
|
@@ -38,7 +39,8 @@ export default class Process {
|
|
|
ctrlPressed = false//ctrl键是是否按下
|
|
|
|
|
|
// region 初始化图形
|
|
|
- static init(dom,showGraph=true){
|
|
|
+ static init(dom,miniMapDom=null,nodeKindList,showGraph=true){
|
|
|
+ console.log('nodeKindList',nodeKindList)
|
|
|
|
|
|
// region 画布配置
|
|
|
this.graph = new Graph({
|
|
|
@@ -95,7 +97,7 @@ export default class Process {
|
|
|
anchor: 'center',
|
|
|
connectionPoint: 'anchor',
|
|
|
allowBlank: false,//不允许连接到画布空白位置的点
|
|
|
- allowLoop: false,//不允许创建循环连线
|
|
|
+ allowLoop: true,//不允许创建循环连线
|
|
|
allowMulti:true,//允许在相同的起始工序和终止之间创建多条边
|
|
|
snap: {
|
|
|
radius: 20,
|
|
|
@@ -232,6 +234,12 @@ export default class Process {
|
|
|
.use(new History({//撤销重做
|
|
|
enabled: true,
|
|
|
}))
|
|
|
+ .use( new MiniMap({
|
|
|
+ container: miniMapDom,
|
|
|
+ width: 200,
|
|
|
+ height: 160,
|
|
|
+ padding: 10,
|
|
|
+ }))
|
|
|
.use(new Export({//导出
|
|
|
enabled:true
|
|
|
}));
|
|
|
@@ -432,15 +440,22 @@ export default class Process {
|
|
|
// endregion
|
|
|
|
|
|
// region 鼠标移入移出 连接桩显示/隐藏
|
|
|
- this.graph.on('node:mouseenter', FunctionExt.debounce(() => {
|
|
|
+ this.graph.on('node:mouseenter', () => {
|
|
|
const ports = dom.querySelectorAll('.x6-port-body')
|
|
|
this.showPorts(ports, true)
|
|
|
- }), 500,)
|
|
|
+ })
|
|
|
|
|
|
this.graph.on('node:mouseleave', () => {
|
|
|
const ports = dom.querySelectorAll('.x6-port-body')
|
|
|
this.showPorts(ports, false)
|
|
|
})
|
|
|
+
|
|
|
+ // 监听节点选中
|
|
|
+ this.graph.on('node:selected', () => {
|
|
|
+ //取消连接桩显示
|
|
|
+ const ports = dom.querySelectorAll('.x6-port-body')
|
|
|
+ this.showPorts(ports, false)
|
|
|
+ });
|
|
|
// endregion
|
|
|
|
|
|
// region 鼠标移入移出 动态添加连接线托拽工具 废弃
|
|
|
@@ -466,28 +481,6 @@ export default class Process {
|
|
|
// this.graph.on('edge:mouseleave', ({ cell }) => {
|
|
|
// cell.removeTools()
|
|
|
// })
|
|
|
- this.graph.on('edge:selected', (args) => {
|
|
|
- // console.log('edge:selected')
|
|
|
- args.edge.addTools( [
|
|
|
- { name: 'boundary',
|
|
|
- args: {
|
|
|
- padding: 5,
|
|
|
- attrs: {
|
|
|
- fill: '#2d8cf0',
|
|
|
- stroke: 'white',
|
|
|
- 'stroke-width': 0.2,
|
|
|
- 'fill-opacity': 0.2,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ])
|
|
|
- });
|
|
|
- // 边取消选中
|
|
|
- this.graph.on('edge:unselected', (args) => {
|
|
|
- // console.log('edge:unselected')
|
|
|
- args.edge.removeTools();
|
|
|
- });
|
|
|
-
|
|
|
|
|
|
//endregion
|
|
|
|
|
|
@@ -695,7 +688,13 @@ export default class Process {
|
|
|
//工序
|
|
|
if(cell.shape=='custom-image'){
|
|
|
//添加工序设置业务数据id
|
|
|
- cell.setData({'nodeId':cell.id,'ftyId': store.state.user.ftyId,'flowId':parseInt(router.app._route.params.id),"isValid":false})
|
|
|
+ cell.setData({
|
|
|
+ 'nodeId':cell.id,
|
|
|
+ 'ftyId': store.state.user.ftyId,
|
|
|
+ 'flowId':parseInt(router.app._route.params.id),
|
|
|
+ "displayNo":this.graph.getNodes()?.length,
|
|
|
+ "isValid":!([config.nodeKind.halfCheck,config.nodeKind.finishCheck].includes(cell.getData().nodeKind)),
|
|
|
+ })
|
|
|
}
|
|
|
//连接线
|
|
|
if(cell.shape=='edge'){
|
|
|
@@ -705,6 +704,57 @@ export default class Process {
|
|
|
});
|
|
|
// endregion
|
|
|
|
|
|
+ // region 选中边改变样式
|
|
|
+ // 边选中
|
|
|
+ this.graph.on('edge:selected', (args) => {
|
|
|
+ args.edge.addTools( [
|
|
|
+ { name: 'boundary',
|
|
|
+ args: {
|
|
|
+ padding: 5,
|
|
|
+ attrs: {
|
|
|
+ fill: '#2d8cf0',
|
|
|
+ stroke: 'white',
|
|
|
+ 'stroke-width': 0.2,
|
|
|
+ 'fill-opacity': 0.2,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ])
|
|
|
+ });
|
|
|
+
|
|
|
+ // 边取消选中
|
|
|
+ this.graph.on('edge:unselected', (args) => {
|
|
|
+ args.edge.removeTools();
|
|
|
+ });
|
|
|
+ // endregion
|
|
|
+
|
|
|
+ // region 移入边调整起点终点
|
|
|
+ // 移入边
|
|
|
+ this.graph.on('edge:mouseenter', ({ cell }) => {
|
|
|
+ const ports = dom.querySelectorAll('.x6-port-body')
|
|
|
+ this.showPorts(ports, true)
|
|
|
+ cell.addTools([
|
|
|
+ { name: 'source-arrowhead', },
|
|
|
+ {
|
|
|
+ name: 'target-arrowhead',
|
|
|
+ args: {
|
|
|
+ attrs: {
|
|
|
+ fill: 'red',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ])
|
|
|
+ })
|
|
|
+
|
|
|
+ // 移出边
|
|
|
+ this.graph.on('edge:mouseleave', ({ cell }) => {
|
|
|
+ //显示连接桩
|
|
|
+ const ports = dom.querySelectorAll('.x6-port-body')
|
|
|
+ this.showPorts(ports, false)
|
|
|
+ cell.removeTools()
|
|
|
+ })
|
|
|
+ // endregion
|
|
|
+
|
|
|
// endregion
|
|
|
|
|
|
// region 工序上下左右的四个连接桩
|
|
|
@@ -770,6 +820,21 @@ export default class Process {
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
+ angle:{
|
|
|
+ position: 'absolute',
|
|
|
+ attrs: {
|
|
|
+ circle: {
|
|
|
+ r: 4,
|
|
|
+ magnet: true,
|
|
|
+ stroke: '#5F95FF',
|
|
|
+ strokeWidth: 1,
|
|
|
+ fill: '#fff',
|
|
|
+ style: {
|
|
|
+ visibility: 'hidden',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
items: [
|
|
|
{
|
|
|
@@ -784,6 +849,22 @@ export default class Process {
|
|
|
{
|
|
|
group: 'left',
|
|
|
},
|
|
|
+ {
|
|
|
+ group: 'angle',
|
|
|
+ args: { x: '99%', y: '99%' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ group: 'angle',
|
|
|
+ args: { x: '99%', y: '1%' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ group: 'angle',
|
|
|
+ args: { x: '1%', y: '99%' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ group: 'angle',
|
|
|
+ args: { x: '1%', y: '1%' },
|
|
|
+ },
|
|
|
],
|
|
|
}
|
|
|
// endregion
|
|
|
@@ -850,10 +931,10 @@ export default class Process {
|
|
|
//region 计件模型
|
|
|
const countImages = [
|
|
|
{
|
|
|
- label: config.nodeKindDesc.register,
|
|
|
+ label: nodeKindList.find(it=>it.kindCode==config.nodeKind.register)?.gradeKindDesc,
|
|
|
image:getImg('登记.png'),
|
|
|
nodeKind:config.nodeKind.register,
|
|
|
- nodeKindName:config.nodeKindName.register,
|
|
|
+ nodeKindName:nodeKindList.find(it=>it.kindCode==config.nodeKind.register)?.kindName,
|
|
|
flgJobDefect:true,
|
|
|
flowKind:config.flowKind.middle,
|
|
|
userKind:config.userKind.product,
|
|
|
@@ -863,10 +944,10 @@ export default class Process {
|
|
|
flgUndo:true,
|
|
|
},
|
|
|
{
|
|
|
- label: config.nodeKindDesc.climbKiln,
|
|
|
+ label: nodeKindList.find(it=>it.kindCode==config.nodeKind.climbKiln)?.gradeKindDesc,
|
|
|
image:getImg('装卸.png'),
|
|
|
nodeKind:config.nodeKind.climbKiln,
|
|
|
- nodeKindName:config.nodeKindName.climbKiln,
|
|
|
+ nodeKindName:nodeKindList.find(it=>it.kindCode==config.nodeKind.climbKiln)?.kindName,
|
|
|
flgJobDefect:true,
|
|
|
flowKind:config.flowKind.middle,
|
|
|
userKind:config.userKind.product,
|
|
|
@@ -876,10 +957,10 @@ export default class Process {
|
|
|
flgUndo:true,
|
|
|
},
|
|
|
{
|
|
|
- label: config.nodeKindDesc.inKiln,
|
|
|
+ label: nodeKindList.find(it=>it.kindCode==config.nodeKind.inKiln)?.gradeKindDesc,
|
|
|
image:getImg('火炉.png'),
|
|
|
nodeKind:config.nodeKind.inKiln,
|
|
|
- nodeKindName:config.nodeKindName.inKiln,
|
|
|
+ nodeKindName:nodeKindList.find(it=>it.kindCode==config.nodeKind.inKiln)?.kindName,
|
|
|
flgJobDefect:true,
|
|
|
flowKind:config.flowKind.middle,
|
|
|
userKind:config.userKind.product,
|
|
|
@@ -889,10 +970,10 @@ export default class Process {
|
|
|
flgUndo:false,
|
|
|
},
|
|
|
{
|
|
|
- label: config.nodeKindDesc.outKiln,
|
|
|
- image:getImg('火炉.png'),
|
|
|
+ label: nodeKindList.find(it=>it.kindCode==config.nodeKind.outKiln)?.gradeKindDesc,
|
|
|
+ image:getImg('火炉1.png'),
|
|
|
nodeKind:config.nodeKind.outKiln,
|
|
|
- nodeKindName:config.nodeKindName.outKiln,
|
|
|
+ nodeKindName:nodeKindList.find(it=>it.kindCode==config.nodeKind.outKiln)?.kindName,
|
|
|
flgJobDefect:true,
|
|
|
flowKind:config.flowKind.middle,
|
|
|
userKind:config.userKind.product,
|
|
|
@@ -902,10 +983,10 @@ export default class Process {
|
|
|
flgUndo:false,
|
|
|
},
|
|
|
{
|
|
|
- label: config.nodeKindDesc.uninstallKiln,
|
|
|
+ label: nodeKindList.find(it=>it.kindCode==config.nodeKind.uninstallKiln)?.gradeKindDesc,
|
|
|
image:getImg('装卸.png'),
|
|
|
nodeKind:config.nodeKind.uninstallKiln,
|
|
|
- nodeKindName:config.nodeKindName.uninstallKiln,
|
|
|
+ nodeKindName:nodeKindList.find(it=>it.kindCode==config.nodeKind.uninstallKiln)?.kindName,
|
|
|
flgJobDefect:true,
|
|
|
flowKind:config.flowKind.middle,
|
|
|
userKind:config.userKind.product,
|
|
|
@@ -939,10 +1020,10 @@ export default class Process {
|
|
|
//region 检验模型
|
|
|
const testImages = [
|
|
|
{
|
|
|
- label: config.nodeKindDesc.halfCheck,
|
|
|
+ label: nodeKindList.find(it=>it.kindCode==config.nodeKind.halfCheck)?.gradeKindDesc,
|
|
|
image:getImg('检查.png'),
|
|
|
nodeKind:config.nodeKind.halfCheck,
|
|
|
- nodeKindName:config.nodeKindName.halfCheck,
|
|
|
+ nodeKindName:nodeKindList.find(it=>it.kindCode==config.nodeKind.halfCheck)?.kindName,
|
|
|
flgJobDefect:true,
|
|
|
flowKind:config.flowKind.middle,
|
|
|
userKind:config.userKind.product,
|
|
|
@@ -952,10 +1033,10 @@ export default class Process {
|
|
|
flgUndo:false,
|
|
|
},
|
|
|
{
|
|
|
- label: config.nodeKindDesc.finishCheck,
|
|
|
+ label: nodeKindList.find(it=>it.kindCode==config.nodeKind.finishCheck)?.gradeKindDesc,
|
|
|
image:getImg('检查.png'),
|
|
|
nodeKind:config.nodeKind.finishCheck,
|
|
|
- nodeKindName:config.nodeKindName.finishCheck,
|
|
|
+ nodeKindName:nodeKindList.find(it=>it.kindCode==config.nodeKind.finishCheck)?.kindName,
|
|
|
flgJobDefect:true,
|
|
|
flowKind:config.flowKind.middle,
|
|
|
userKind:config.userKind.product,
|
|
|
@@ -989,10 +1070,10 @@ export default class Process {
|
|
|
//region 特殊模型
|
|
|
const specialImages = [
|
|
|
{
|
|
|
- label: config.nodeKindDesc.recover,
|
|
|
+ label: nodeKindList.find(it=>it.kindCode==config.nodeKind.recover)?.gradeKindDesc,
|
|
|
image:getImg('回收.png'),
|
|
|
nodeKind:config.nodeKind.recover,
|
|
|
- nodeKindName:config.nodeKindName.recover,
|
|
|
+ nodeKindName:nodeKindList.find(it=>it.kindCode==config.nodeKind.recover)?.kindName,
|
|
|
flgJobDefect:true,
|
|
|
flowKind:config.flowKind.middle,
|
|
|
userKind:config.userKind.product,
|
|
|
@@ -1003,10 +1084,10 @@ export default class Process {
|
|
|
recycledKind:config.recycledKind.before,
|
|
|
},
|
|
|
{
|
|
|
- label: config.nodeKindDesc.shaping,
|
|
|
+ label: nodeKindList.find(it=>it.kindCode==config.nodeKind.shaping)?.gradeKindDesc,
|
|
|
image:getImg('马桶.png'),
|
|
|
nodeKind:config.nodeKind.shaping,
|
|
|
- nodeKindName:config.nodeKindName.shaping,
|
|
|
+ nodeKindName:nodeKindList.find(it=>it.kindCode==config.nodeKind.shaping)?.kindName,
|
|
|
flgJobDefect:true,
|
|
|
flowKind:config.flowKind.start,
|
|
|
userKind:config.userKind.product,
|