170 lines
4.3 KiB
JavaScript
170 lines
4.3 KiB
JavaScript
import { Node, ObjectExt, Shape } from '@antv/x6';
|
|
import { IdToName } from '@/utils'
|
|
import cache from '@/utils/cache'
|
|
import axios from '@/utils/request'
|
|
import { v4 } from 'uuid'
|
|
|
|
Shape.Edge.config({
|
|
attrs: {
|
|
line: {
|
|
stroke: '#ccc',
|
|
strokeWidth: 1,
|
|
targetMarker: {
|
|
name: 'block',
|
|
width: 1,
|
|
height: 1
|
|
},
|
|
},
|
|
}
|
|
})
|
|
|
|
|
|
export default class ProcessNode extends Node { }
|
|
ProcessNode.config({
|
|
width: 200,
|
|
height: 100,
|
|
markup: [
|
|
{
|
|
tagName: 'rect',
|
|
selector: 'container',
|
|
attrs: {
|
|
x: 0,
|
|
y: 0,
|
|
width: 200,
|
|
height: 100,
|
|
fill: 'transparent',
|
|
stroke: '#ccc'
|
|
},
|
|
},
|
|
{
|
|
tagName: 'rect',
|
|
attrs: {
|
|
x: 0,
|
|
y: 0,
|
|
width: 200,
|
|
height: 50,
|
|
fill: '#ffffff',
|
|
},
|
|
},
|
|
{
|
|
tagName: 'rect',
|
|
attrs: {
|
|
x: 0,
|
|
y: 50,
|
|
width: 200,
|
|
height: 50,
|
|
fill: '#f8f8f8',
|
|
},
|
|
},
|
|
{
|
|
tagName: 'text',
|
|
selector: 'detName',
|
|
attrs: {
|
|
x: 20,
|
|
y: 30,
|
|
},
|
|
},
|
|
{
|
|
tagName: 'text',
|
|
selector: 'sectionName',
|
|
attrs: {
|
|
x: 115,
|
|
y: 30,
|
|
},
|
|
},
|
|
{
|
|
tagName: 'text',
|
|
selector: 'detDesc',
|
|
attrs: {
|
|
x: 26,
|
|
y: 80,
|
|
fill: '#777',
|
|
fontSize: 14,
|
|
fill: '#1a90fc',
|
|
},
|
|
},
|
|
],
|
|
attrs: {
|
|
line: {
|
|
fill: 'red'
|
|
}
|
|
},
|
|
ports: {
|
|
groups: {
|
|
in: {
|
|
position: 'left',
|
|
attrs: {
|
|
circle: {
|
|
r: 2,
|
|
magnet: true,
|
|
stroke: '#0b58ff',
|
|
strokeWidth: 1,
|
|
fill: '#0b58ff'
|
|
}
|
|
}
|
|
},
|
|
out: {
|
|
position: 'right',
|
|
attrs: {
|
|
circle: {
|
|
r: 2,
|
|
magnet: true,
|
|
stroke: '#0b58ff',
|
|
strokeWidth: 1,
|
|
fill: '#0b58ff'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
propHooks(metadata) {
|
|
const { detId, detName, detDesc, sectionName, processId, sectionId, ...others } = metadata;
|
|
// debugger;
|
|
if (detName) ObjectExt.setByPath(others, 'attrs/detName/text', detName);
|
|
if (detDesc) ObjectExt.setByPath(others, 'attrs/detDesc/text', detDesc);
|
|
if (sectionName) ObjectExt.setByPath(others, 'attrs/sectionName/text', sectionName);
|
|
if (detId) ObjectExt.setByPath(others, 'attrs/detId/text', detId);
|
|
if (processId) ObjectExt.setByPath(others, 'attrs/processId/text', processId);
|
|
if (sectionId) ObjectExt.setByPath(others, 'attrs/sectionId/text', sectionId);
|
|
return others;
|
|
}
|
|
});
|
|
|
|
export const CACHE_NAME = 'ProcessDetail::section';
|
|
|
|
export async function getSectionFrom(sectionId) {
|
|
const sectionList = await cache.getList(
|
|
CACHE_NAME,
|
|
async () => {
|
|
const { code, data } = await axios(
|
|
'/base/core-production-line/listAll'
|
|
);
|
|
if (code == 0) {
|
|
return data;
|
|
}
|
|
}
|
|
);
|
|
return IdToName(sectionId, sectionList);
|
|
}
|
|
|
|
export async function createProcessNode({ flowId, id, name, sectionId, remark }) {
|
|
const sectionName = await getSectionFrom(sectionId);
|
|
return {
|
|
shape: 'process-node',
|
|
x: 0,
|
|
y: 0,
|
|
detName: name, // 工序名称
|
|
sectionName, // 工段
|
|
sectionId,
|
|
detDesc: remark, // 工序说明
|
|
processId: flowId, // 工艺ID
|
|
detId: id, // 工序ID
|
|
tools: [],
|
|
ports: [
|
|
{ id: v4(), group: 'in' },
|
|
{ id: v4(), group: 'out' },
|
|
]
|
|
};
|
|
}
|
|
|
|
export async function createEdge(src, dest) { } |