处理端子关联关系的取消和添加

src/api/flow/flow.js

@@ -23,6 +23,14 @@ function saveModelOn(data) {
         data
     })
 }
+//删除端子关联关系
+function delModelFcdaOn(data) {
+    return request({
+        url: `/admin/model/function/fcda-ref/del`,
+        method: "post",
+        data
+    })
+}
 // 删除装置端子
 /*model_id *模型ID
 fcda_id *端子ID*/
@@ -114,4 +122,5 @@ export default {
     delAll,
     updateIedType,
     getIedType,
+    delModelFcdaOn,
 }

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,102 +352,237 @@ 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 = 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
+                // 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
+                emit("backxy", setX.value, setY.value)
+            })
+            // console.log(lf.value.graphModel,'sss');
+            lf.value.on('edge:click', 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: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.setTheme({//设置画布
                         rect: {
@@ -595,6 +731,14 @@ export default {
                         //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 +748,16 @@ export default {
             ldModal.value = data
         }
         // GroupModelAdd.vue返回状态
-        function groupBack(data){
-            console.log(data)
-            groupType.value = data.show
+        function groupBack(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);
-                console.log(g)
+                const g = lf.value.getNodeModelById(data.groupNodeId);
                 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" @change="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" :showCaptionText="fcdaRelationDlgTitle" :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: {
@@ -114,12 +115,16 @@ export default {
         let leftIndex = ref(-1)//左侧选择的输出下标
         let leftFcda = ref("")//左侧的fcdaid
         let together = ref("")//绑定的id
-        let checkList = ref([])//select数据
+        let oldCheckList=ref([])//存储最后一次操作后，已选中的目标装置端子列表数据。用于与checklist对比，已判断当前是取消关联还是建立关联
+        let checkList = ref([])//当前已选中的目标装置端子列表数据
         let loading = ref(false)
         let arrNew = ref([])//新的存储fdcdids
         let gv = ref('')
         let pastLoading = ref(false)
-        let leaderLineList = ref({})//组件leader-line数据，以方便离开组件时清除画线,key：start和end对象的端子id组合，value为line对象
+        let sureModal = ref(false)//SureCancel.vue组件展示开关
+        let leaderLineList = ref({})//组件leader-line数据，以方便离开组件时清除画线
+        let checkObj = ref({})//选择的对象
+        let fcdaRelationDlgTitle = ref('')
         watch(() => props.modelId, (newVal) => {
             modelIds.value = newVal
         })
@@ -137,6 +142,8 @@ export default {
         })
         // 初始化函数
         async function reload() {
+            checkList.value=[]
+            oldCheckList.value=[]
             pastLoading.value = true
             dialogVisible.value = props.ldModal
             modelIds.value = props.modelId
@@ -197,15 +204,13 @@ export default {
                 in_or_out: "接收",
                 ref_ied_type: starts.value.ied_type
             }).then(res => {
-                console.log(res.data, '!!!!!');
                 //if ( res.data) {
                 //liling:避免提示空错误提示，res.data为空不代表接口有错误，所以先判断接口code值
                 if (res.code == 0) {
                     if (res.data == null || res.data=="") {
                         outList.value = [];
                         return;
-                    }
-                    
+                    }                    
                     //对结果进行重排排序：将已关联到输出装置的端子排在前面
                     let tmpList = [];
                     res.data.forEach((item, index) => {
@@ -218,6 +223,7 @@ export default {
                     })
                     
                     outList.value = tmpList;
+                    setIndex()
                     // 将 setTimeout 移动到 then 方法中
                     setTimeout(() => {
                         res.data.forEach((item, index) => {
@@ -247,7 +253,7 @@ export default {
                                 hiddenLine();
                                 pastLoading.value = false
                             } else {
-                                console.error(`Element with ID ${line.start} or ${line.end} not found.`);
+                                //console.error(`Element with ID ${line.start} or ${line.end} not found.`);
                             }
                         });
                     }, 100);
@@ -274,32 +280,8 @@ export default {
         }
         // 确认关闭模态框
         function sureClose() {
-            // 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: "关联成功！"
-            //         })
             dialogVisible.value = false
             removeLine3()
-            //         emit("lineBack", dialogVisible.value)
-            //     } else {
-            //         ElMessage({
-            //             type: "error",
-            //             message: res.msg
-            //         })
-            //     }
-            // })
         }
         // 返回goose还是sv
         const setGooseOrSv = computed(() => {
@@ -327,109 +309,63 @@ export default {
         })
         // 下标选择
         function setIndex(row, num) {
-            console.log(row, 'row');
             if (row && num) {
                 leftFcda.value = row.id
                 // checkList.value = [row.to_fcda_id]
                 fcdaIds.value = row.to_fcda_id
                 leftIndex.value = num
-                // flow.getModelOn({
-                //     model_id: modelIds.value - 0,
-                //     from_fcda_id: row.id - 0
-                // }).then(res => {
-                //     if (res.data != null) {
-                //         together.value = res.data
-                //         checkList.value = together.value.map(item => {
-                //             return item.to_fcda_id
-                //         })
-                //         fcdaIds.value = res.data.map(item => {
-                //             return item.to_fcda_id
-                //         }).join(",")
-                //         loading.value = false
-                //     } else {
-                //         together.value = []
-                //         checkList.value = []
-                //         loading.value = false
-                //     }
-                // })
-            } else {
+            } else {      
                 if (curList.value.length > 0) {
-                    console.log(curList.value, 'cur');
                     curList.value.map(item => {
-                        if (item.to_fcda_id != '0' || item.to_fcda_id != '') {
+                        if (item.to_fcda_id != '0' && item.to_fcda_id != '') {
+                            console.log(item)
                             checkList.value.push(item.to_fcda_id)
                         }
                     })
+                    oldCheckList.value = checkList.value
                     leftFcda.value = curList.value[0].id
                     // checkList.value = [curList.value[0].to_fcda_id]
                     fcdaIds.value = curList.value[0].to_fcda_id
                     leftIndex.value = 0
-                    // flow.getModelOn({
-                    //     model_id: modelIds.value - 0,
-                    //     from_fcda_id: curList.value[0].id - 0
-                    // }).then(res => {
-                    //     if (res.data != null) {
-                    //         together.value = res.data
-                    //         checkList.value = together.value.map(item => {
-                    //             return item.to_fcda_id
-                    //         })
-                    //         fcdaIds.value = res.data.map(item => {
-                    //             return item.to_fcda_id
-                    //         }).join(",")
-                    //         loading.value = false
-                    //     } else {
-                    //         together.value = []
-                    //         checkList.value = []
-                    //         loading.value = false
-                    //     }
-                    // })
                 } else {
                     ElMessage({
                         type: "info",
-                        message: "您还没有配置装置"
+                        message: "您还没有配置装置端子"
                     })
                     loading.value = false
                 }
             }
         }
         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
+            checkObj.value = e
+            //const subItem = oldCheckList.value.filter(item => !checkList.value.includes(item)); //是否取消选择，取差集
+            const addItem = checkList.value.filter(item => !oldCheckList.value.includes(item)); //是否新选择的，取差集
+            let no = false
+            let hintTxt = ''
+            if(addItem.length>0){
+                //判断是否选择源端子以及是否未关联任何其他端子，否则不允许关联                
+                if(leftFcda.value==''){
+                    hintTxt = "请选择关联的源(左侧)端子！"
+                    no=true                    
                 }
-                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
-                        })
-                    }
-                })
+                if(fcdaIds.value!='' && fcdaIds.value!='0'){
+                    //源端子已有关联
+                    hintTxt = "选择源(左侧)端子已有关联，请先取消关联或选择其它端子！"
+                    no=true
+                }              
+                fcdaRelationDlgTitle.value = "确定在当前2个端子间建立关联关系？"
             }
-
+            if(no){
+                    ElMessage({
+                        type: "info",
+                        message: hintTxt
+                    })
+                    //恢复未选状态
+                    let ind = checkList.value.indexOf(addItem[0])
+                    checkList.value.splice(ind,1)
+                    return
+            }
+            sureModal.value = true
         }
         //弹窗打开后使得线条在指定区域中
         function hiddenLine() {
@@ -454,9 +390,85 @@ export default {
                 });
             }
         };
+        //取消端子关联确认框返回事件处理
+        function cancelBack(data){
+            // 本事件处理选择框
+            sureModal.value = false
+            const subItem = oldCheckList.value.filter(item => !checkList.value.includes(item)); //是否取消选择，取差集
+            const addItem = checkList.value.filter(item => !oldCheckList.value.includes(item)); //是否新选择的，取差集
+            if(!data.ok){
+                if(subItem.length>0){
+                    //恢复选中状态
+                    checkList.value.push(subItem[0])
+                }
+                if(addItem.length>0){
+                    //恢复未选状态
+                    let ind = checkList.value.indexOf(addItem[0])
+                    checkList.value.splice(ind,1)
+                }
+                return
+            }
+            fcdaIds.value = checkObj.value.id
+            if(subItem.length>0){
+                flow.delModelFcdaOn({
+                    model_id: modelIds.value - 0,
+                    from_fcda_id :checkObj.value.from_fcda_id - 0,
+                    to_fcda_id :fcdaIds.value
+                }).then(res=>{
+                    if (res.code == 0) {
+                        ElMessage({
+                            type: "success",
+                            message: "操作成功！"
+                        })
+                        reload()                        
+                        removeLine3()
+                        emit("lineBack", dialogVisible.value)
+                    } else {
+                        ElMessage({
+                            type: "error",
+                            message: res.msg
+                        })
+                    }
+                }).catch(res=>{
+                    ElMessage({
+                        type: "error",
+                        message: '服务器发生异常'
+                    })
+                })
+            }
+            if(addItem.length>0){
+                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()
+                        removeLine3()
+                        emit("lineBack", dialogVisible.value)
+                    } else {
+                        ElMessage({
+                            type: "error",
+                            message: res.msg
+                        })
+                    }
+                }).catch(res=>{
+                    ElMessage({
+                        type: "error",
+                        message: '服务器发生异常'
+                    })
+                })
+            }
+        }
         onMounted(async () => {
             await reload()
-            setIndex()
         })
         onBeforeUnmount(() => {
             for(let key in leaderLineList.value){
@@ -499,7 +511,14 @@ export default {
             leaderLineList,//组件库leader-line数据，以方便离开组件时清除画线
             hiddenLine,//使leader-line显示在模态框内
             removeLine3,// 稳定leader-line函数
+            sureModal,//SureCancel.vue组件展示开关
+            cancelBack,//SureCancel.vue返回模态框状态
+            checkObj,//选择的对象
+            fcdaRelationDlgTitle,
         }
+    },
+    components:{
+        SureCancel,//确认取消关系组件
     }
 }
 </script>

src/pages/components/drawModal/SureCancel.vue

@@ -0,0 +1,79 @@
+<template>
+    <div>
+        <el-dialog v-model="dialogVisible" title="确认取消" width="30%" @close="handleClose" :close-on-click-modal="false">
+            <span>
+                <el-icon>
+                    <InfoFilled />
+                </el-icon>
+                {{ showCaptionText }}
+            </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传过来的取消或选择的对象
+        showCaptionText:{
+            type:String,
+        }
+    },
+    setup(props, { emit }) {
+        let dialogVisible = ref(false)//模态框打开/关闭
+        let thisObj = ref({})//本组件接受对象
+        let showCaptionText=ref('是否取消当前2个端子关联关系？')
+        // 组件初始化函数
+        function reload() {
+            dialogVisible.value = props.sureModal
+            thisObj.value = props.checkObj
+            if(props.showCaptionText && props.showCaptionText!=''){
+                showCaptionText.value = props.showCaptionText
+            }
+        }
+        // 取消/关闭图标事件
+        function modalClose() {
+            //props.reload()
+            dialogVisible.value = false
+            emit("cancelBack", {"ok":false})
+        }
+        // 确认按钮事件
+        function modalSure() {
+            dialogVisible.value = false
+            emit("cancelBack", {"ok":true})
+        }
+        onMounted(() => {
+            reload()
+        })
+        return {
+            reload,//组件初始化函数
+            dialogVisible,//模态框打开/关闭
+            handleClose: modalClose,//关闭模态框
+            cancels: modalClose,//关闭模态框
+            sureClick: modalSure,//确认关闭模态框
+            thisObj,//本组件接收对象
+            showCaptionText,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>