3

src/api/flow/flow.js

@@ -96,6 +96,13 @@ function delAll(data){
         data
     })
 }
+function getIedType(data){
+    return request({
+        url:`/admin/sysmodel/get/iedtype`,
+        method:"get",
+        params:data
+    })
+}
 export default {
     getModelOn,
     saveModelOn,
@@ -106,4 +113,5 @@ export default {
     excelInData,
     delAll,
     updateIedType,
+    getIedType,
 }

src/pages/components/draw/DrawDesigns.vue

@@ -4,11 +4,11 @@
             <div ref="container" class="container" v-loading="loading"></div>
         </div>
         <!-- 功能模态框 -->
-        <AbilityModal v-if="abModal" :fun="fun" :funOne="funOne" :listMap="listMap" :abModal="abModal" :modelId="modelId" :iedType="iedType" :nodeid="nodeid"
-            @abilityBack="abilityBack">
+        <AbilityModal v-if="abModal" :fun="fun" :funOne="funOne" :listMap="listMap" :abModal="abModal"
+            :modelId="modelId" :iedType="iedType" :nodeid="nodeid" @abilityBack="abilityBack">
         </AbilityModal>
         <LineDouble v-if="ldModal" :ldModal="ldModal" :modelId="modelId" :startTarget="startTarget"
-            :endTarget="endTarget"  :numCase="numCase" :startText="startText" :endText="endText" :lineType="lineType"
+            :endTarget="endTarget" :numCase="numCase" :startText="startText" :endText="endText" :lineType="lineType"
             @lineBack="lineBack">
         </LineDouble>
     </div>
@@ -35,6 +35,7 @@ import {
     lfXml2Json,
     RectResize,
     NodeResize,
+    GroupNode,
 } from "@logicflow/extension";
 import "@logicflow/core/dist/style/index.css";
 import "@logicflow/extension/lib/style/index.css";
@@ -77,13 +78,13 @@ export default {
             type: Number,
             required: true,
         },
-        searchModule:{
-            type:Function,
-            required:true
+        searchModule: {
+            type: Function,
+            required: true
         },//父组件insideModule的方法
-        cleanAll:{
-            type:Function,
-            required:true
+        cleanAll: {
+            type: Function,
+            required: true
         },//父组件insideModule的方法
     },
     setup(props, { emit }) {
@@ -168,8 +169,8 @@ export default {
                     })
                 }, 2000);
             }
-        },{
-            deep:true
+        }, {
+            deep: true
         })
         watch(() => props.svOrGoose, (newVal) => {
             numCase.value = newVal
@@ -287,7 +288,7 @@ export default {
                 }
             }, { immediate: true })
         }
-        function listMap(){
+        function listMap() {
             fun.value = props.searchModule
             funOne.value = props.cleanAll
             coolId.value = props.needId
@@ -301,10 +302,16 @@ export default {
                     emit("drawCor", res.data)
                     const filteredArray = res.data[0].ied_type.filter(param => param !== null)
                     let groups = {
-                        type:"group",
-                        text:"分组",
-                        label:"分组",
-                        id:"952",
+                        type: "group",
+                        text: "",
+                        label: "分组",
+                        id: "952",
+                        resizable: true,//手动调整大小
+                        foldable: true,//展开收起
+                        children: [],
+                        width: 10,
+                        height: 10,
+                        isShowAnchor: true,//锚点
                     }
                     needMap.value = filteredArray.map(item => {
                         return {
@@ -312,15 +319,15 @@ export default {
                             text: item.name,
                             label: item.name,
                             icon: '',
-                            id:item.id,
+                            id: item.id,
                             properties: {
                                 ied_type: item.code,
                                 id: item.id
                             },
-                            children:["129007"]
                         }
                     })
                     needMap.value.push(groups)
+
                     lf.value = new LogicFlow({
                         // 通过选项指定了渲染的容器和需要显示网格
                         container: container.value,//需要显示画布的容器ref
@@ -359,6 +366,19 @@ export default {
                             return stl
                         }
                     }
+                    class MyGroup extends GroupNode.view {}
+                    class MyGroupModel extends GroupNode.model {
+                        initNodeData(data) {
+                            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;
+                        }
+                    }
                     lf.value.register({
                         type: "svEdge",
                         view: SvEdge,
@@ -369,6 +389,11 @@ export default {
                         view: GooseEdge,
                         model: GooseEdgeModel,
                     })
+                    lf.value.register({
+                        type: "my-group",
+                        model: MyGroupModel,
+                        view: MyGroup,
+                    });
                     lf.value.setTheme({//设置画布
                         rect: {
                             fill: "#FFFFFF",

src/pages/components/drawModal/AbilityModal.vue

@@ -2,14 +2,16 @@
     <div>
         <el-dialog v-model="dialogVisible" title="装置功能配置" width="70%" @close="handleClose"
             :close-on-click-modal="false">
-            <div>
-                <span>旧的装置编码:</span>
+            <div style="border-bottom: 1px solid #dbdbdb;">
+            <h1>装置编码设置:</h1>
+                <span>默认装置编码:</span>
                 <el-input style="width:300px;margin: 10px 10px;" v-model="oldType" disabled></el-input>
-                <span>新的装置编码:</span>
+                <span>自定义装置编码:</span>
                 <el-input style="width:300px;margin: 10px 10px;" v-model="newType" placeholder="请输入新的装置编码"></el-input>
                 <el-button type="primary" plain @click="saveIedType">保存</el-button>
             </div>
             <div>
+                <h1>端子列表:</h1>
                 <el-button style="height: 30px;" type="primary" plain @click="addAbility(0)"><el-icon>
                         <Plus />
                     </el-icon>添加新功能</el-button>
@@ -118,11 +120,11 @@ export default {
         })
         // 初始化函数
         function reload() {
-            dialogVisible.value = props.abModal
-            modelIds.value = props.modelId
-            iedTypes.value = props.iedType
+            dialogVisible.value = props.abModal//模态框开关
+            modelIds.value = props.modelId//模型id
+            iedTypes.value = props.iedType//装置类型
             oldType.value = props.iedType
-            iedId.value = props.nodeid
+            iedId.value = props.nodeid//装置的id
             flow.getModelAndIed({//获取所有功能
                 model_id: modelIds.value - 0,
                 ied_type: iedTypes.value
@@ -130,6 +132,12 @@ export default {
                 console.log(res, 'asdasdsa');
                 tableData.value = res.data
             })
+            flow.getIedType({
+                id:modelIds.value-0,
+                ied_type:iedTypes.value
+            }).then(res=>{
+                console.log(res,'sadsdada');
+            })
         }
 
         function downloadFile() {