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() { // 保存设计 图标 -
@@ -1189,10 +1349,46 @@ function saveDesign() { // 保存设计
样式
+
+
名称
+ +
+
+
线形
+ + + + + +
+
+
线宽
+ + + + + + + + + + + + + +
+
+
边线颜色
+ +
+
+
描述信息
+ +
- --> + \ No newline at end of file diff --git a/business-css/frontend/src/components/antvx6/viewx6.vue b/business-css/frontend/src/components/antvx6/viewx6.vue index a3eba57..c9c3188 100644 --- a/business-css/frontend/src/components/antvx6/viewx6.vue +++ b/business-css/frontend/src/components/antvx6/viewx6.vue @@ -114,7 +114,7 @@ function addAttrText(item:any,index:any){ graph.addNode({ shape: 'rect-text', x: item.position.x , - y: item.position.y + 180, + y: item.position.y + 160, width: 100, height: 30, attrs: { @@ -136,7 +136,7 @@ function addAttrText(item:any,index:any){ graph.addNode({ shape: 'image-node', x: item.position.x + 135 , - y: item.position.y + 186, + y: item.position.y + 166, width: 14, height: 14, correlationId: item.id, @@ -155,7 +155,7 @@ function addAttrText(item:any,index:any){ graph.addNode({ shape: 'image-node', x: item.position.x + 110 , - y: item.position.y + 186, + y: item.position.y + 166, width: 14, height: 14, correlationId: item.id, @@ -256,7 +256,7 @@ function appendAttrText(item:any,data:any){ graph.addNode({ shape: 'rect-text', x: item.position.x, - y: item.position.y + 203 + i * 25, + y: item.position.y + 183 + i * 25, width: 260, height: 30, // label: data[i].name + ':' + data[i].value, diff --git a/business-css/frontend/src/views/component/scenario/condition.vue b/business-css/frontend/src/views/component/scenario/condition.vue index a700a3f..8ace6d6 100644 --- a/business-css/frontend/src/views/component/scenario/condition.vue +++ b/business-css/frontend/src/views/component/scenario/condition.vue @@ -458,7 +458,7 @@ function getDeviceInfo(e:any){ // 获取设备信息 } .segmentation-content{ width: 590px; - height: calc(100vh - 420px); + height: calc(100vh - 530px); background: rgba(250, 250, 250, 1); box-sizing: border-box; border: 1px solid rgba(242, 242, 242, 1); diff --git a/business-css/frontend/src/views/component/scenario/createscenario.vue b/business-css/frontend/src/views/component/scenario/createscenario.vue index 46bb0e6..85bf7b6 100644 --- a/business-css/frontend/src/views/component/scenario/createscenario.vue +++ b/business-css/frontend/src/views/component/scenario/createscenario.vue @@ -115,7 +115,7 @@ function submitClick(){ emit("closeCreatescenario",false) ElMessage({ type: "success", - message: "新增失败", + message: "新增成功", }); } }) diff --git a/business-css/frontend/src/views/component/scenario/index.vue b/business-css/frontend/src/views/component/scenario/index.vue index c1c2182..5789bef 100644 --- a/business-css/frontend/src/views/component/scenario/index.vue +++ b/business-css/frontend/src/views/component/scenario/index.vue @@ -402,9 +402,9 @@ function changeShowResult(isShow:any){ // 切换显示结果模型 - - + @@ -462,11 +462,11 @@ function changeShowResult(isShow:any){ // 切换显示结果模型 -
-
图形化
-
列表
-
图形
-
+
+
图形化
+
列表
+
图形
+