5

src/pages/components/draw/DrawDesigns.vue

@@ -11,7 +11,8 @@
             :endTarget="endTarget" :numCase="numCase" :startText="startText" :endText="endText" :lineType="lineType"
             @lineBack="lineBack">
         </LineDouble>
-        <GroupModelAdd v-if="groupType" :groupType="groupType" :groupNodeId="groupNodeId" :modelId="modelId" @groupBack="groupBack"></GroupModelAdd>
+        <GroupModelAdd v-if="groupType" :groupType="groupType" :groupNodeId="groupNodeId" :modelId="modelId"
+            @groupBack="groupBack"></GroupModelAdd>
     </div>
 </template>
 
@@ -121,7 +122,7 @@ export default {
         let fun = ref()//储存父节点传来的函数
         let funOne = ref()//储存父节点传来的函数
         let groupType = ref(false)//GroupModelAdd.vue组件显示与否
-        let groupNodeId=ref('') //当前设置ied_type的分组节点ID
+        let groupNodeId = ref('') //当前设置ied_type的分组节点ID
         watch(() => props.lineMenuColor, (newVal) => {
             copyColor.value = newVal
         })
@@ -228,7 +229,7 @@ export default {
                             type: "error"
                         })
                     }
-                }).catch(res=>{
+                }).catch(res => {
                     ElMessage({
                         message: "操作失败：服务器发生异常",
                         type: "error"
@@ -319,8 +320,8 @@ export default {
                         children: [],
                         width: 5,
                         height: 5,
-                        x:0,
-                        y:0,
+                        x: 0,
+                        y: 0,
                         isShowAnchor: true,//锚点
                     }
                     needMap.value = filteredArray.map(item => {
@@ -339,8 +340,8 @@ export default {
                     needMap.value.push(groups)
                     // lf.value.register(logicFlows)
                     lf.value.extension.dndPanel.setPatternItems(needMap.value);
-                    
-                    console.log('执行了渲染.....',route.query);
+
+                    console.log('执行了渲染.....', route.query);
                     if (route.query.modelid != '' && route.query.modelid != null && route.query.modelid != undefined) {
                         lastRender()
                     }
@@ -351,250 +352,250 @@ export default {
             }, 1000);
         }
         onMounted(() => {
-                    lf.value = new LogicFlow({
-                        // 通过选项指定了渲染的容器和需要显示网格
-                        container: container.value,//需要显示画布的容器ref
-                        // grid: {
-                        //     size: 10,
-                        //     visible: false,
-                        //     type: "mesh",
-                        //     config: {
-                        //         color: "#ababab",
-                        //         thickness: 1,
-                        //     },
-                        // },//网格,
-                        grid: true,
-                        plugins: [DndPanel, SelectionSelect, Group,GroupNode, Menu, MiniMap, Snapshot, RectResize, NodeResize],//全局加载的组件
-                        keyboard: {
-                            enabled: true
-                        },
-                        snapline: true,//辅助线
-                        edgeTextDraggable: true,//连接线文本可以拖拽
-                    })
-                    class SvEdge extends PolylineEdge { }
-                    // 节点Model
-                    class SvEdgeModel extends PolylineEdgeModel {
-                        getEdgeStyle() {
-                            const stl = super.getEdgeStyle()
-                            stl.stroke = 'orange'
-                            return stl
-                        }
-                    }
-                    class GooseEdge extends PolylineEdge { }
-                    // 节点Model
-                    class GooseEdgeModel extends PolylineEdgeModel {
-                        getEdgeStyle() {
-                            const stl = super.getEdgeStyle()
-                            stl.stroke = '#255CE7'
-                            return stl
-                        }
-                    }
-                    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);
-                            this.width = 200;
-                            this.height = 150;
-                            this.foldedWidth = 100;
-                            this.foldedHeight = 100;                           
-                        }   
-                        
-                        setAttributes(){
-                            this.resizable = true;
-                            this.foldable = false; //不允许收起来
-                            this.isShowAnchor = false;   
-                        }
-                        
-                        getNodeStyle() {
-                            const stl = super.getNodeStyle()
-                            stl.strokeDasharray= '4 4'
-                            //stl.stroke="rgb(255,255,255)"
-                            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"
-                            style.textAlign="left"
-                            return style;
-                        }                
-                    }
-                    lf.value.register({
-                        type: "svEdge",
-                        view: SvEdge,
-                        model: SvEdgeModel,
-                    })
-                    lf.value.register({
-                        type: "baseEdge",
-                        view: GooseEdge,
-                        model: GooseEdgeModel,
-                    })
-                    lf.value.register({
-                        type: "my-group",
-                        model: MyGroupModel,
-                        view: MyGroup,
-                    });
-                    lf.value.setTheme({//设置画布
-                        rect: {
-                            fill: "#FFFFFF",
-                            stroke: "#255CE7",
-                            strokeWidth: 2,
-                        },//放置的元素
-                        snapline: {
-                            stroke: 'black', // 对齐线颜色
-                            strokeWidth: 1, // 对齐线宽度
-                        },
-                        edgeText: {
-                            textWidth: 100,
-                            overflowMode: "default",
-                            fontSize: 18,
-                            background: {
-                                fill: "#FFFFFF",
-                            },
-                        },//连接线w文字样式
-                        outline: {
-                            fill: "transparent",
-                            stroke: "#949494",
-                            strokeDasharray: "3,3",
-                            hover: {
-                                stroke: "#949494",
-                            },
-                        },
-                        anchor: {
-                            stroke: "#000000",
-                            fill: "#FFFFFF",
-                            r: 4,
-                            hover: {
-                                fill: "#949494",
-                                fillOpacity: 0.5,
-                                stroke: "#949494",
-                                r: 10,
-                            },
-                        },//锚点样式
-                        baseEdge: {
-                            stroke: "#255CE7",
-                            strokeWidth: 2,
-                        },//连接线颜色
-                        svEdge: {
-                            stroke: "orange",
-                            strokeWidth: 1,
-                        },//连接线颜色
-                        nodeText: {
-                            color: "#255CE7",
-                            overflowMode: "autoWrap",
-                            lineHeight: 1.2,
-                            fontSize: 12,
-                        },//节点内文字样式
+            lf.value = new LogicFlow({
+                // 通过选项指定了渲染的容器和需要显示网格
+                container: container.value,//需要显示画布的容器ref
+                // grid: {
+                //     size: 10,
+                //     visible: false,
+                //     type: "mesh",
+                //     config: {
+                //         color: "#ababab",
+                //         thickness: 1,
+                //     },
+                // },//网格,
+                grid: true,
+                plugins: [DndPanel, SelectionSelect, Group, GroupNode, Menu, MiniMap, Snapshot, RectResize, NodeResize],//全局加载的组件
+                keyboard: {
+                    enabled: true
+                },
+                snapline: true,//辅助线
+                edgeTextDraggable: true,//连接线文本可以拖拽
+            })
+            class SvEdge extends PolylineEdge { }
+            // 节点Model
+            class SvEdgeModel extends PolylineEdgeModel {
+                getEdgeStyle() {
+                    const stl = super.getEdgeStyle()
+                    stl.stroke = 'orange'
+                    return stl
+                }
+            }
+            class GooseEdge extends PolylineEdge { }
+            // 节点Model
+            class GooseEdgeModel extends PolylineEdgeModel {
+                getEdgeStyle() {
+                    const stl = super.getEdgeStyle()
+                    stl.stroke = '#255CE7'
+                    return stl
+                }
+            }
+            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);
+                    this.width = 200;
+                    this.height = 150;
+                    this.foldedWidth = 100;
+                    this.foldedHeight = 100;
+                }
+
+                setAttributes() {
+                    this.resizable = true;
+                    this.foldable = false; //不允许收起来
+                    this.isShowAnchor = false;
+                }
+
+                getNodeStyle() {
+                    const stl = super.getNodeStyle()
+                    stl.strokeDasharray = '4 4'
+                    //stl.stroke="rgb(255,255,255)"
+                    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"
+                    style.textAlign = "left"
+                    return style;
+                }
+            }
+            lf.value.register({
+                type: "svEdge",
+                view: SvEdge,
+                model: SvEdgeModel,
+            })
+            lf.value.register({
+                type: "baseEdge",
+                view: GooseEdge,
+                model: GooseEdgeModel,
+            })
+            lf.value.register({
+                type: "my-group",
+                model: MyGroupModel,
+                view: MyGroup,
+            });
+            lf.value.setTheme({//设置画布
+                rect: {
+                    fill: "#FFFFFF",
+                    stroke: "#255CE7",
+                    strokeWidth: 2,
+                },//放置的元素
+                snapline: {
+                    stroke: 'black', // 对齐线颜色
+                    strokeWidth: 1, // 对齐线宽度
+                },
+                edgeText: {
+                    textWidth: 100,
+                    overflowMode: "default",
+                    fontSize: 18,
+                    background: {
+                        fill: "#FFFFFF",
+                    },
+                },//连接线w文字样式
+                outline: {
+                    fill: "transparent",
+                    stroke: "#949494",
+                    strokeDasharray: "3,3",
+                    hover: {
+                        stroke: "#949494",
+                    },
+                },
+                anchor: {
+                    stroke: "#000000",
+                    fill: "#FFFFFF",
+                    r: 4,
+                    hover: {
+                        fill: "#949494",
+                        fillOpacity: 0.5,
+                        stroke: "#949494",
+                        r: 10,
+                    },
+                },//锚点样式
+                baseEdge: {
+                    stroke: "#255CE7",
+                    strokeWidth: 2,
+                },//连接线颜色
+                svEdge: {
+                    stroke: "orange",
+                    strokeWidth: 1,
+                },//连接线颜色
+                nodeText: {
+                    color: "#255CE7",
+                    overflowMode: "autoWrap",
+                    lineHeight: 1.2,
+                    fontSize: 12,
+                },//节点内文字样式
+            });
+            lf.value.on("edge:click", function (data, e, position) {
+                delId.value = data.data.id
+                // if (copyColor.value == '#255CE7') {
+                //     lf.value.graphModel.updateText(data.data.id, "GOOSE");
+                // } else if (copyColor.value == 'orange') {
+                //     lf.value.graphModel.updateText(data.data.id, "SV");
+                // }
+            })
+            lf.value.on("edge:add", function (data, e, position) {
+                if (copyColor.value == '#255CE7') {
+                    blue()
+                    lf.value.changeEdgeType(data.data.id, "baseEdge")
+                    lf.value.setProperties(data.data.id, { 'issv': 'GOOSE' })
+                }
+                if (copyColor.value == 'orange') {
+                    orange()
+                    lf.value.changeEdgeType(data.data.id, "svEdge")
+                    lf.value.setProperties(data.data.id, { 'issv': 'SV' })
+                }
+            })
+            lf.value.on('node:click', function (data, e, position) {//传送坐标轴参数到父组件
+                copyId.value = data.data.id
+                nodeId.value = data.data.id
+                setX.value = data.data.x
+                setY.value = data.data.y
+                emit("backxy", setX.value, setY.value)
+            })
+            // lf.value.on('anchor:drop', function (data, e, position) {//添加线上文字
+            //     if (numCase.value == 0) {
+            //         lf.value.graphModel.updateText(data.edgeModel.id, "SV");
+            //     } else if (numCase.value == 1) {
+            //         lf.value.graphModel.updateText(data.edgeModel.id, "GOOSE");
+            //     }
+            // })
+            lf.value.on('node:dbclick', function (data, e, position) {//双击打开弹窗
+                console.log(data, 'datas');
+                iedType.value = data.data.properties.ied_type
+                nodeid.value = data.data.properties.id
+                abModal.value = true
+            })
+            lf.value.on('edge:dbclick', function (data, e, position) {//双击连接线
+                lineType.value = data.data.properties.issv
+                let start = lf.value.getNodeModelById(data.data.sourceNodeId)//获取连线开始节点
+                let end = lf.value.getNodeModelById(data.data.targetNodeId)//获取连线结尾节点
+                startText.value = start.text.value//开始文本
+                endText.value = end.text.value//结束文本
+                startTarget.value = start.properties
+                endTarget.value = end.properties
+                console.log(copyColor.value, 'copy');
+                console.log(data, 'data');
+                // if (copyColor.value == '#255CE7') {
+                //     lf.value.graphModel.updateText(data.data.id, "GOOSE");
+                // } else if (copyColor.value == 'orange') {
+                //     lf.value.graphModel.updateText(data.data.id, "SV");
+                // }
+                ldModal.value = true
+            })
+            lf.value.on('node:mousemove', function (data, e) {//传递坐标轴参数到父组件
+                setX.value = data.data.x
+                setY.value = data.data.y
+                console.log(data.data, 'move');
+                emit("backxy", setX.value, setY.value)
+            })
+            // console.log(lf.value.graphModel,'sss');
+            lf.value.on('edge:click', function (data, e, position) {//解决点击连接线问题
+                console.log(data, 'data2');
+                if (copyColor.value == '#255CE7') {
+                    blue()
+                    lf.value.changeEdgeType(data.data.id, "baseEdge")
+                    lf.value.setProperties(data.data.id, { 'issv': 'GOOSE' })
+                }
+                if (copyColor.value == 'orange') {
+                    orange()
+                    lf.value.changeEdgeType(data.data.id, "svEdge")
+                    lf.value.setProperties(data.data.id, { 'issv': 'SV' })
+                }
+            })
+            //当将节点托入画布后触发事件
+            lf.value.on('node:dnd-add', function (nodedata) {
+                if (nodedata.data.type == 'my-group') {
+                    // 添加的是分组节点，需要打开一个窗口让用户设置该节点的ied_type并保存到properties中
+                    let ied_type = "TMP"
+                    const g = lf.value.getNodeModelById(nodedata.data.id);
+                    g.setProperties({
+                        ied_type: ied_type,
+                        id: '-99'  //分组的装置类型id固定为-99
                     });
-                    lf.value.on("edge:click", function (data, e, position) {
-                        delId.value = data.data.id
-                        // if (copyColor.value == '#255CE7') {
-                        //     lf.value.graphModel.updateText(data.data.id, "GOOSE");
-                        // } else if (copyColor.value == 'orange') {
-                        //     lf.value.graphModel.updateText(data.data.id, "SV");
-                        // }
-                    })
-                    lf.value.on("edge:add", function (data, e, position) {
-                        if (copyColor.value == '#255CE7') {
-                            blue()
-                            lf.value.changeEdgeType(data.data.id, "baseEdge")
-                            lf.value.setProperties(data.data.id, { 'issv': 'GOOSE' })
-                        }
-                        if (copyColor.value == 'orange') {
-                            orange()
-                            lf.value.changeEdgeType(data.data.id, "svEdge")
-                            lf.value.setProperties(data.data.id, { 'issv': 'SV' })
-                        }
-                    })
-                    lf.value.on('node:click', function (data, e, position) {//传送坐标轴参数到父组件
-                        copyId.value = data.data.id
-                        nodeId.value = data.data.id
-                        setX.value = data.data.x
-                        setY.value = data.data.y
-                        emit("backxy", setX.value, setY.value)
-                    })
-                    // lf.value.on('anchor:drop', function (data, e, position) {//添加线上文字
-                    //     if (numCase.value == 0) {
-                    //         lf.value.graphModel.updateText(data.edgeModel.id, "SV");
-                    //     } else if (numCase.value == 1) {
-                    //         lf.value.graphModel.updateText(data.edgeModel.id, "GOOSE");
-                    //     }
-                    // })
-                    lf.value.on('node:dbclick', function (data, e, position) {//双击打开弹窗
-                        console.log(data, 'datas');
-                        iedType.value = data.data.properties.ied_type
-                        nodeid.value = data.data.properties.id
-                        abModal.value = true
-                    })
-                    lf.value.on('edge:dbclick', function (data, e, position) {//双击连接线
-                        lineType.value = data.data.properties.issv
-                        let start = lf.value.getNodeModelById(data.data.sourceNodeId)//获取连线开始节点
-                        let end = lf.value.getNodeModelById(data.data.targetNodeId)//获取连线结尾节点
-                        startText.value = start.text.value//开始文本
-                        endText.value = end.text.value//结束文本
-                        startTarget.value = start.properties
-                        endTarget.value = end.properties
-                        console.log(copyColor.value, 'copy');
-                        console.log(data, 'data');
-                        // if (copyColor.value == '#255CE7') {
-                        //     lf.value.graphModel.updateText(data.data.id, "GOOSE");
-                        // } else if (copyColor.value == 'orange') {
-                        //     lf.value.graphModel.updateText(data.data.id, "SV");
-                        // }
-                        ldModal.value = true
-                    })
-                    lf.value.on('node:mousemove', function (data, e) {//传递坐标轴参数到父组件
-                        setX.value = data.data.x
-                        setY.value = data.data.y
-                        console.log(data.data, 'move');
-                        emit("backxy", setX.value, setY.value)
-                    })
-                    // console.log(lf.value.graphModel,'sss');
-                    lf.value.on('edge:click', function (data, e, position) {//解决点击连接线问题
-                        console.log(data, 'data2');
-                        if (copyColor.value == '#255CE7') {
-                            blue()
-                            lf.value.changeEdgeType(data.data.id, "baseEdge")
-                            lf.value.setProperties(data.data.id, { 'issv': 'GOOSE' })
-                        }
-                        if (copyColor.value == 'orange') {
-                            orange()
-                            lf.value.changeEdgeType(data.data.id, "svEdge")
-                            lf.value.setProperties(data.data.id, { 'issv': 'SV' })
-                        }
-                    })
-                    //当将节点托入画布后触发事件
-                    lf.value.on('node:dnd-add',function (nodedata){
-                        if(nodedata.data.type=='my-group'){
-                            // 添加的是分组节点，需要打开一个窗口让用户设置该节点的ied_type并保存到properties中
-                            let ied_type="TMP"
-                            const g=lf.value.getNodeModelById(nodedata.data.id);
-                            g.setProperties({
-                                ied_type: ied_type,
-                                id:'-99'  //分组的装置类型id固定为-99
-                            });
-                            groupNodeId.value = nodedata.data.id
-                            groupType.value = true
-                        }
-                    })
-                    lf.value.on("node:resize",function(data){
-                        //if(data.oldNodeSize.type!="my-group") return;                         
-                    })
-                    lf.value.render();
+                    groupNodeId.value = nodedata.data.id
+                    groupType.value = true
+                }
+            })
+            lf.value.on("node:resize", function (data) {
+                //if(data.oldNodeSize.type!="my-group") return;                         
+            })
+            lf.value.render();
             listMap()
         })
         function abilityBack(data) {
@@ -604,18 +605,18 @@ export default {
             ldModal.value = data
         }
         // GroupModelAdd.vue返回状态
-        function groupBack(data){
+        function groupBack(data) {
             console.log(data)
             groupType.value = data.show
             //设置窗口关闭时
-            if(!data.show && data.ied_type!=''){
+            if (!data.show && data.ied_type != '') {
                 //更新分组的装置类型编码属性ied_type
-                const g=lf.value.getNodeModelById(data.groupNodeId);
+                const g = lf.value.getNodeModelById(data.groupNodeId);
                 console.log(g)
                 g.setProperties({
                     ied_type: data.ied_type,
                 });
-            }else{
+            } else {
                 //未设置装置编码，自动删除
                 lf.value.deleteNode(data.groupNodeId)
             }

src/pages/components/drawModal/LineDouble.vue

@@ -32,7 +32,7 @@
                     ">{{ endTxt }}</h1>
                     <div style="height: auto;">
                         <div v-for="(item, index) in outList">
-                            <el-checkbox-group v-model="checkList" @change="checkChange">
+                            <el-checkbox-group v-model="checkList" @click="checkChange(item)">
                                 <el-checkbox :id="item.id" :label="item.id" :key="item.id">
                                     {{ item.fcda_name }}
                                 </el-checkbox>
@@ -55,7 +55,7 @@
                 </span>
             </template>
         </el-dialog>
-
+        <SureCancel v-if="sureModal" :sureModal="sureModal" :reload="reload" :checkObj="checkObj" @cancelBack="cancelBack"></SureCancel>
     </div>
 </template>
 
@@ -64,6 +64,7 @@ import { ref, onMounted, watch, toRefs, computed, onBeforeUnmount } from 'vue';
 import flow from '@/api/flow/flow';
 import { ElMessage } from 'element-plus';
 import LeaderLine from "../../../../public/leader-line.min.js";
+import SureCancel from './SureCancel.vue';
 export default {
     props: {
         ldModal: {
@@ -119,7 +120,9 @@ export default {
         let arrNew = ref([])//新的存储fdcdids
         let gv = ref('')
         let pastLoading = ref(false)
+        let sureModal = ref(false)//SureCancel.vue组件展示开关
         let leaderLineList = ref([])//组件leader-line数据，以方便离开组件时清除画线
+        let checkObj = ref({})//选择的对象
         watch(() => props.modelId, (newVal) => {
             modelIds.value = newVal
         })
@@ -377,43 +380,45 @@ export default {
             }
         }
         function checkChange(e) {
-            if (e.length > 1) {
-                fcdaIds.value = e[0]
-                ElMessage({
-                    message: "只能选择一个端子，已保存上一次选择的端子",
-                    type: "error"
-                })
-            } else {
-                fcdaIds.value = e.join(",")
-                if (leftFcda.value == '') {
-                    leftFcda.value = curList.value[0].id
-                }
-                flow.saveModelOn({
-                    model_id: modelIds.value - 0,
-                    from_ied_type: starts.value.ied_type,
-                    to_ied_type: ends.value.ied_type,
-                    from_fcda_id: leftFcda.value - 0,
-                    to_fcda_ids: fcdaIds.value,
-                    goosesv: setGooseOrSv.value,
-                }).then(res => {
-                    if (res.code == 0) {
-                        ElMessage({
-                            type: "success",
-                            message: "关联成功！"
-                        })
-                        reload()
-                        setIndex()
-                        removeLine3()
-                        emit("lineBack", dialogVisible.value)
-                    } else {
-                        ElMessage({
-                            type: "error",
-                            message: res.msg
-                        })
-                    }
-                })
-            }
-
+            console.log(e,'eee123132');
+            checkObj.value = e
+            sureModal.value = true
+            // if (e.length > 1) {
+            //     fcdaIds.value = e[0]
+            //     ElMessage({
+            //         message: "只能选择一个端子，已保存上一次选择的端子",
+            //         type: "error"
+            //     })
+            // } else {
+            //     fcdaIds.value = e.join(",")
+            //     if (leftFcda.value == '') {
+            //         leftFcda.value = curList.value[0].id
+            //     }
+            //     flow.saveModelOn({
+            //         model_id: modelIds.value - 0,
+            //         from_ied_type: starts.value.ied_type,
+            //         to_ied_type: ends.value.ied_type,
+            //         from_fcda_id: leftFcda.value - 0,
+            //         to_fcda_ids: fcdaIds.value,
+            //         goosesv: setGooseOrSv.value,
+            //     }).then(res => {
+            //         if (res.code == 0) {
+            //             ElMessage({
+            //                 type: "success",
+            //                 message: "关联成功！"
+            //             })
+            //             reload()
+            //             setIndex()
+            //             removeLine3()
+            //             emit("lineBack", dialogVisible.value)
+            //         } else {
+            //             ElMessage({
+            //                 type: "error",
+            //                 message: res.msg
+            //             })
+            //         }
+            //     })
+            // }
         }
         //弹窗打开后使得线条在指定区域中
         function hiddenLine() {
@@ -438,6 +443,40 @@ export default {
                 });
             }
         };
+        function cancelBack(data){
+            // 本事件处理选择框
+            sureModal.value = data
+            fcdaIds.value = checkObj.value.id
+            console.log(fcdaIds.value,'sad');
+            // 如果左侧未选择id，默认选择第一个
+            if (leftFcda.value == '') {
+                leftFcda.value = curList.value[0].id
+            }
+            flow.saveModelOn({
+                model_id: modelIds.value - 0,
+                from_ied_type: starts.value.ied_type,
+                to_ied_type: ends.value.ied_type,
+                from_fcda_id: leftFcda.value - 0,
+                to_fcda_ids: fcdaIds.value,
+                goosesv: setGooseOrSv.value,
+            }).then(res => {
+                if (res.code == 0) {
+                    ElMessage({
+                        type: "success",
+                        message: "关联成功！"
+                    })
+                    reload()
+                    setIndex()
+                    removeLine3()
+                    emit("lineBack", dialogVisible.value)
+                } else {
+                    ElMessage({
+                        type: "error",
+                        message: res.msg
+                    })
+                }
+            })
+        }
         onMounted(async () => {
             await reload()
             setIndex()
@@ -480,7 +519,13 @@ export default {
             leaderLineList,//组件库leader-line数据，以方便离开组件时清除画线
             hiddenLine,//使leader-line显示在模态框内
             removeLine3,// 稳定leader-line函数
+            sureModal,//SureCancel.vue组件展示开关
+            cancelBack,//SureCancel.vue返回模态框状态
+            checkObj,//选择的对象
         }
+    },
+    components:{
+        SureCancel,//确认取消关系组件
     }
 }
 </script>

src/pages/components/drawModal/SureCancel.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <el-dialog v-model="dialogVisible" title="确认取消" width="30%" @close="handleClose" :close-on-click-modal="false">
+            <span>
+                <el-icon>
+                    <InfoFilled />
+                </el-icon>
+                是否取消当前2个端子关联关系？
+            </span>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="cancels">取消</el-button>
+                    <el-button type="primary" @click="sureClick">确定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+export default {
+    props: {
+        sureModal: {
+            type: Boolean,
+            required: true
+        },//模态框状态
+        reload: {
+            type: Function,
+            required: true,
+        },//LineDouble.vue组件的初始化函数
+        checkObj:{
+            type:Object,
+            required:true,
+        },//LineDouble.vue传过来的取消或选择的对象
+    },
+    setup(props, { emit }) {
+        let dialogVisible = ref(false)//模态框打开/关闭
+        let thisObj = ref({})//本组件接受对象
+        // 组件初始化函数
+        function reload() {
+            dialogVisible.value = props.sureModal
+            thisObj.value = props.checkObj
+        }
+        // 取消/关闭图标事件
+        function modalClose() {
+            props.reload()
+            dialogVisible.value = false
+            emit("cancelBack", dialogVisible.value)
+        }
+        // 确认按钮事件
+        function modalSure() {
+            dialogVisible.value = false
+            emit("cancelBack", dialogVisible.value)
+        }
+        onMounted(() => {
+            reload()
+        })
+        return {
+            reload,//组件初始化函数
+            dialogVisible,//模态框打开/关闭
+            handleClose: modalClose,//关闭模态框
+            cancels: modalClose,//关闭模态框
+            sureClick: modalSure,//确认关闭模态框
+            thisObj,//本组件接收对象
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>