diff --git a/business-css/frontend/src/assets/x6/11.png b/business-css/frontend/src/assets/x6/11.png
new file mode 100644
index 0000000..6122205
Binary files /dev/null and b/business-css/frontend/src/assets/x6/11.png differ
diff --git a/business-css/frontend/src/assets/x6/22.png b/business-css/frontend/src/assets/x6/22.png
new file mode 100644
index 0000000..a7f73b5
Binary files /dev/null and b/business-css/frontend/src/assets/x6/22.png differ
diff --git a/business-css/frontend/src/assets/x6/33.png b/business-css/frontend/src/assets/x6/33.png
new file mode 100644
index 0000000..aed195f
Binary files /dev/null and b/business-css/frontend/src/assets/x6/33.png differ
diff --git a/business-css/frontend/src/assets/x6/44.png b/business-css/frontend/src/assets/x6/44.png
new file mode 100644
index 0000000..76006a8
Binary files /dev/null and b/business-css/frontend/src/assets/x6/44.png differ
diff --git a/business-css/frontend/src/assets/x6/55.png b/business-css/frontend/src/assets/x6/55.png
new file mode 100644
index 0000000..21bc6d9
Binary files /dev/null and b/business-css/frontend/src/assets/x6/55.png differ
diff --git a/business-css/frontend/src/assets/x6/66.png b/business-css/frontend/src/assets/x6/66.png
new file mode 100644
index 0000000..6941ded
Binary files /dev/null and b/business-css/frontend/src/assets/x6/66.png differ
diff --git a/business-css/frontend/src/assets/x6/77.png b/business-css/frontend/src/assets/x6/77.png
new file mode 100644
index 0000000..4c2cb94
Binary files /dev/null and b/business-css/frontend/src/assets/x6/77.png differ
diff --git a/business-css/frontend/src/components/antvx6/index.vue b/business-css/frontend/src/components/antvx6/index.vue
index cba5009..b5b80b2 100644
--- a/business-css/frontend/src/components/antvx6/index.vue
+++ b/business-css/frontend/src/components/antvx6/index.vue
@@ -26,6 +26,14 @@ import img5 from '@/assets/x6/5.png'
import img6 from '@/assets/x6/6.png'
import img7 from '@/assets/x6/7.png'
+import img11 from '@/assets/x6/11.png'
+import img22 from '@/assets/x6/22.png'
+import img33 from '@/assets/x6/33.png'
+import img44 from '@/assets/x6/44.png'
+import img55 from '@/assets/x6/55.png'
+import img66 from '@/assets/x6/66.png'
+import img77 from '@/assets/x6/77.png'
+
import line1 from '@/assets/x6/line1.png'
import line2 from '@/assets/x6/line2.png'
import line3 from '@/assets/x6/line3.png'
@@ -200,14 +208,28 @@ onMounted(() => {
const pos = node.position?.() || { x: 0, y: 0 }
showContextMenu(pos.x, pos.y)
})
- function showContextMenu(x: number, y: number) {
- left.value = x + 260
- top.value = y - 50
- isMenuShow.value = true
- // 创建并显示上下文菜单
- // 包含箭头样式选项
+ function showContextMenu(x: number, y: number) {
+ left.value = x + 260
+ top.value = y - 50
+ isMenuShow.value = true
}
+ graph.on('node:click', (row:any) => {
+
+ let node:any = row.node
+
+ if( node.store.data.shape == 'rect'){
+ nodeId.value = node.id
+ styleInfo.value = {
+ name: node.store.data.attrs.label.text,
+ color: node.store.data.attrs.body.stroke,
+ line: node.store.data.attrs.body.strokeDasharray == ''?'实线':'虚线',
+ width: node.store.data.attrs.body.strokeWidth,
+ remark: node.store.data.remark
+ }
+ }
+ row.e.preventDefault()
+ })
// 监听Stencil内部的Dnd事件
document
@@ -220,6 +242,9 @@ onMounted(() => {
if(isLock.value == true){
return
}
+
+
+
const { node } = args
// 检查是否是管线节点
@@ -246,25 +271,19 @@ onMounted(() => {
}, 100)
} else {
if(node.store && node.store.data && node.store.data.shape === 'rect'){
+ nodeId.value = node.id
+ styleInfo.value = {
+ name: node.store.data.attrs.label.text,
+ color: '#ff0000',
+ line: '虚线',
+ width: node.store.data.attrs.body.strokeWidth,
+ remark: ''
+
+ }
+ node.store.data.remark = ''
return
}
- nodeId.value = node.id
- if(node.store.data.attrs.text.text == '扁平槽'){
- deviceTypetype.value = 'FlatTank'
- }else if(node.store.data.attrs.text.text == '圆柱槽'){
- deviceTypetype.value = 'CylindricalTank'
- }else if(node.store.data.attrs.text.text == '环形槽'){
- deviceTypetype.value = 'AnnularTank'
- }else if(node.store.data.attrs.text.text == '管束槽'){
- deviceTypetype.value = 'TubeBundleTank'
- }else if(node.store.data.attrs.text.text == '萃取柱'){
- deviceTypetype.value = 'ExtractionColumn'
- }else if(node.store.data.attrs.text.text == '流化床'){
- deviceTypetype.value = 'FluidizedBed'
- }else if(node.store.data.attrs.text.text == '锥底环形槽'){
- deviceTypetype.value = 'ACFTank'
- }
- // 设置固定大小
+
node.size(160, 160)
// 去掉背景节点
node.attr('body/fill', 'none')
@@ -272,12 +291,102 @@ onMounted(() => {
node.attr('image/refX', 0)
node.attr('image/refY', 0)
// node.attr('label/refX', 40)
- node.attr('label/refY', 160)
+
node.attr('image/width', 160) // 修改宽度
node.attr('image/height', 160) // 修改高度
+
+
+ nodeId.value = node.id
+ if(node.store.data.attrs.text.text == '圆柱槽'){
+ deviceTypetype.value = 'CylindricalTank'
+ node.size(110, 140)
+ const width = node.size().width
+ node.attr('image/xlink:href', img11)
+ node.attr('image/width', 105)
+ node.attr('image/height', 135)
+ node.attr('label/refY', 140)
+ node.attr('label/refX', width/2)
+ node.attr('label/textAnchor', 'middle')
+ }else if(node.store.data.attrs.text.text == '扁平槽'){
+ deviceTypetype.value = 'FlatTank'
+
+ node.size(130, 80)
+ const width = node.size().width
+ node.attr('image/xlink:href', img22)
+ node.attr('image/width', 130)
+ node.attr('image/height', 80)
+ node.attr('label/refY', 85)
+ node.attr('label/refX', width/2)
+ node.attr('label/textAnchor', 'middle')
+
+
+ }else if(node.store.data.attrs.text.text == '环形槽'){
+ deviceTypetype.value = 'AnnularTank'
+
+ node.size(110, 140)
+ const width = node.size().width
+ node.attr('image/xlink:href', img33)
+ node.attr('image/width', 105)
+ node.attr('image/height', 135)
+ node.attr('label/refY', 140)
+ node.attr('label/refX', width/2)
+ node.attr('label/textAnchor', 'middle')
+
+
+ }else if(node.store.data.attrs.text.text == '管束槽'){
+ deviceTypetype.value = 'TubeBundleTank'
+ node.size(110, 140)
+ const width = node.size().width
+ node.attr('image/xlink:href', img44)
+ node.attr('image/width', 105)
+ node.attr('image/height', 135)
+ node.attr('label/refY', 140)
+ node.attr('label/refX', width/2)
+ node.attr('label/textAnchor', 'middle')
+ }else if(node.store.data.attrs.text.text == '萃取柱'){
+ deviceTypetype.value = 'ExtractionColumn'
+
+ node.size(30, 140)
+ const width = node.size().width
+ node.attr('image/xlink:href', img55)
+ node.attr('image/width', 30)
+ node.attr('image/height', 135)
+ node.attr('label/refY', 140)
+ node.attr('label/refX', width/2)
+ node.attr('label/textAnchor', 'middle')
+
+
+ }else if(node.store.data.attrs.text.text == '流化床'){
+ deviceTypetype.value = 'FluidizedBed'
+ node.size(80, 140)
+ const width = node.size().width
+ node.attr('image/xlink:href', img66)
+ node.attr('image/width', 80)
+ node.attr('image/height', 135)
+ node.attr('label/refY', 140)
+ node.attr('label/refX', width/2)
+ node.attr('label/textAnchor', 'middle')
+ }else if(node.store.data.attrs.text.text == '锥底环形槽'){
+ deviceTypetype.value = 'ACFTank'
+ node.size(80, 140)
+ const width = node.size().width
+ node.attr('image/xlink:href', img77)
+ node.attr('image/width', 80)
+ node.attr('image/height', 135)
+ node.attr('label/refY', 140)
+ node.attr('label/refX', width/2)
+ node.attr('label/textAnchor', 'middle')
+ }
+ // 设置固定大小
+
// 删除节点上的文字
- node.attr('text/text', '')
- node.attr('label/text', '')
+ // node.attr('text/text', '')
+ // node.attr('label/text', '')
+
+
+
+
+
isAdddevice.value = true
@@ -312,6 +421,7 @@ onMounted(() => {
// undo redo
graph.bindKey(['meta+z', 'ctrl+z'], () => {
+ debugger
if (graph.canUndo()) {
graph.undo()
}
@@ -331,9 +441,8 @@ onMounted(() => {
graph.select(nodes)
}
})
-
- // delete
- graph.bindKey('backspace', () => {
+ graph.bindKey('delete', () => {
+ debugger
const cells = graph.getSelectedCells()
if (cells.length) {
graph.removeCells(cells)
@@ -396,10 +505,19 @@ graph.on('blank:mouseup', (e) => {
attrs: {
body: {
fill: 'transparent',
- stroke: '#999',
+ stroke: '#ff0000',
strokeWidth: 1,
strokeDasharray: '5 5', // 设置虚线样式
},
+ label: {
+ text: '系统边界',
+ refX: '50%',
+ refY: -15,
+ textAnchor: 'middle',
+ dominantBaseline: 'middle', // 文本自身的垂直居中
+ fontSize: 15,
+ fill: '#333333'
+ }
},
})
@@ -818,7 +936,11 @@ function closeAntvx6() {
function revokeClick(){
if (graph.canUndo()) {
+ isLock.value = true
graph.undo()
+ setTimeout(() => {
+ isLock.value = false
+ }, 500);
}
}
function removeClick(){
@@ -1014,6 +1136,44 @@ function getBias(formula:any){
}
+const styleInfo:any = ref({
+ name: '',
+ color: '#409EFF',
+ line: '',
+ width: '',
+ remark: ''
+})
+
+function inputChange (e:any){
+ let node:any = graph.getCellById(nodeId.value)
+ debugger
+ node.attr('label/text', e)
+}
+function lineChange(e:any){
+ let node:any = graph.getCellById(nodeId.value)
+ if(e == '实线'){
+ node.attr('body/strokeDasharray', '')
+ }else{
+ node.attr('body/strokeDasharray', '5 5')
+ }
+
+}
+function widthChange(e:any){
+ let node:any = graph.getCellById(nodeId.value)
+ node.attr('body/strokeWidth', e)
+}
+
+function colorChangs(e:any){
+ let node:any = graph.getCellById(nodeId.value)
+ node.attr('body/stroke', e)
+}
+
+function remarkChange(e:any){
+ let node:any = graph.getCellById(nodeId.value)
+ node.store.data.remark = e
+}
+
+
function saveDesign() { // 保存设计
try {
@@ -1178,8 +1338,8 @@ function saveDesign() { // 保存设计
-
-
-
+
@@ -462,11 +462,11 @@ function changeShowResult(isShow:any){ // 切换显示结果模型