新加节点和边线双击操作判断

src/pages/components/draw/DrawDesigns.vue

@@ -123,6 +123,7 @@ export default {
         let funOne = ref()//储存父节点传来的函数
         let groupType = ref(false)//GroupModelAdd.vue组件显示与否
         let groupNodeId = ref('') //当前设置ied_type的分组节点ID
+        let modelIedTypes=ref([]) //当前模型已配置的装置类型
         watch(() => props.lineMenuColor, (newVal) => {
             copyColor.value = newVal
         })
@@ -151,15 +152,14 @@ export default {
         })
         watch(() => props.coolObj, (newVal) => {
             if (route.query.modelid != '' && route.query.modelid != null && route.query.modelid != undefined) {
-                console.log('路由跳转watch');
                 return
             } else {
-                console.log('普通watch');
                 loading.value = true//打开加载动画
                 copyObj.value = newVal
                 modelId.value = copyObj.value.id//模型id
                 setTimeout(() => {
                     cid.getModelInfo({ id: copyObj.value.id, pageno: 1, pagesize: 20 }).then(res => {
+                        modelIedTypes.value = res.data[0].ied_types!=null ? res.data[0].ied_types.split(","):[]
                         if (res.data[0].relation_json == null || res.data[0].relation_json == '') return;
                         const origiondata = JSON.parse(res.data[0].relation_json)
                         lf.value.render(origiondata);//渲染模型图
@@ -207,7 +207,7 @@ export default {
         }
         function saveLine() {
             // lf.value.getSnapshot()//保存为图片
-            console.log(JSON.stringify(lf.value.getGraphData()))
+            //console.log(JSON.stringify(lf.value.getGraphData()))
             const xml = lfJson2Xml(lf.value.getGraphData());
             const data = JSON.stringify(lf.value.getGraphData())
             if (modelId.value != undefined && modelId.value != null && modelId.value != '') {
@@ -286,6 +286,7 @@ export default {
             loading.value = true
             modelId.value = route.query.modelid
             cid.getModelInfo({ id: modelId.value - 0, pageno: 1, pagesize: 20 }).then(res => {
+                modelIedTypes.value = res.data[0].ied_types!=null ? res.data[0].ied_types.split(","):[]
                 if (res.data[0].relation_json == null || res.data[0].relation_json == '') return;
                 const origiondata = JSON.parse(res.data[0].relation_json)
                 lf.value.render(origiondata);
@@ -536,24 +537,32 @@ export default {
             //     }
             // })
             lf.value.on('node:dbclick', function (data, e, position) {//双击打开弹窗
-                console.log(data, 'datas');
+                if(!modelIedTypes.value.includes(data.data.properties.ied_type)){
+                    ElMessage({
+                        type: "info",
+                        message: "当前节点为新节点或装置编码发生更改，请先保存当前模型关系配置"
+                    })
+                    return
+                }
                 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)//获取连线结尾节点
+                if(!modelIedTypes.value.includes(start.properties.ied_type) ||!modelIedTypes.value.includes(end.properties.ied_type)){
+                    ElMessage({
+                        type: "info",
+                        message: "当前关系中存在新节点或装置编码发生更改，请先保存当前模型关系配置"
+                    })
+                    return
+                }
+                lineType.value = data.data.properties.issv                
                 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) {//传递坐标轴参数到父组件
@@ -584,153 +593,6 @@ export default {
                         ied_type: ied_type,
                         id: '-99'  //分组的装置类型id固定为-99
                     });
-                    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
-                            });
-                            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
                 }