处理group组件

src/pages/components/draw/DrawDesigns.vue

@@ -302,15 +302,14 @@ export default {
                     emit("drawCor", res.data)
                     const filteredArray = res.data[0].ied_type.filter(param => param !== null)
                     let groups = {
-                        type: "group",
-                        text: "",
+                        type: "my-group",
                         label: "分组",
                         id: "952",
                         resizable: true,//手动调整大小
                         foldable: true,//展开收起
                         children: [],
-                        width: 10,
-                        height: 10,
+                        width: 5,
+                        height: 5,
                         isShowAnchor: true,//锚点
                     }
                     needMap.value = filteredArray.map(item => {
@@ -341,7 +340,7 @@ export default {
                         //     },
                         // },//网格,
                         grid: true,
-                        plugins: [DndPanel, SelectionSelect, Group, Menu, MiniMap, Snapshot, RectResize, NodeResize],//全局加载的组件
+                        plugins: [DndPanel, SelectionSelect, Group,GroupNode, Menu, MiniMap, Snapshot, RectResize, NodeResize],//全局加载的组件
                         keyboard: {
                             enabled: true
                         },
@@ -366,18 +365,43 @@ export default {
                             return stl
                         }
                     }
-                    class MyGroup extends GroupNode.view {}
+                    class MyGroup extends GroupNode.view {
+                    }
                     class MyGroupModel extends GroupNode.model {
                         initNodeData(data) {
+                            data.text= ""//{"value":"未命名组","x":10,"y":5,"editable":true}
+                            data.id=new Date().getTime();
                             super.initNodeData(data);
-                            lf.value.isRestrict = true;
-                            lf.value.resizable = true;
-                            lf.value.foldable = true;
-                            lf.value.width = 500;
-                            lf.value.height = 300;
-                            lf.value.foldedWidth = 50;
-                            lf.value.foldedHeight = 50;
+                            //this.isRestrict = true;
+                            this.resizable = true;
+                            this.foldable = true;
+                            this.width = 200;
+                            this.height = 150;
+                            this.foldedWidth = 100;
+                            this.foldedHeight = 100;
+                            this.isShowAnchor = true;
+                            
+                        }   
+                        getNodeStyle() {
+                            const stl = super.getNodeStyle()
+                            stl.strokeDasharray= '4 4'
+                            return stl
                         }
+                        getAnchorStyle(anchorInfo) {
+                            const style = super.getAnchorStyle(anchorInfo);
+                            style.stroke = "rgb(24, 125, 255)";
+                            style.r = 5;
+                            style.hover.r = 8;
+                            style.hover.fill = "rgb(24, 125, 255)";
+                            style.hover.stroke = "rgb(24, 125, 255)";
+                            return style;
+                        }  
+                        getTextStyle() {
+                            const style = super.getTextStyle();
+                            style.fontSize = 12;
+                            style.color="#666"
+                            return style;
+                        }                             
                     }
                     lf.value.register({
                         type: "svEdge",
@@ -467,7 +491,6 @@ export default {
                         }
                     })
                     lf.value.on('node:click', function (data, e, position) {//传送坐标轴参数到父组件
-                        console.log(data, 'data3');
                         copyId.value = data.data.id
                         nodeId.value = data.data.id
                         setX.value = data.data.x
@@ -524,6 +547,18 @@ export default {
                             lf.value.setProperties(data.data.id, { 'issv': 'SV' })
                         }
                     })
+                    //当将节点托入画布后触发事件
+                    lf.value.on('node:dnd-add',function (nodedata){
+                        if(nodedata.data.type=='my-group'){
+                            let nodeid=nodedata.data.id
+                            // 添加的是分组节点，需要打开一个窗口让用户设置该节点的ied_type并保存到properties中
+                            let ied_type="user set iedtype"
+                            lf.value.getNodeModelById(nodeid).setProperties({
+                                ied_type: ied_type,
+                                id:0  //分组的装置类型id固定为0
+                            });
+                        }
+                    })
                     // lf.value.register(logicFlows)
                     lf.value.extension.dndPanel.setPatternItems(needMap.value);
                     lf.value.render();
@@ -533,7 +568,7 @@ export default {
                     }
                     setTimeout(() => {
                         loading.value = false
-                    }, 10000)
+                    }, 1000)
                 })
             }, 1000);
         }