Bläddra i källkod

解决切换sv和GOOSE连线与双击边线操作冲突问题

liling 1 år sedan
förälder
incheckning
2d33fd02cd

+ 52 - 3
src/pages/components/draw/DrawDesigns.vue

@@ -394,6 +394,27 @@ export default {
                     return stl
                 }
             }
+            //粗边自定义
+            class SvEdge2 extends SvEdge { }
+            // 节点Model
+            class SvEdgeModel2 extends SvEdgeModel {
+                getEdgeStyle() {
+                    const stl = super.getEdgeStyle()
+                    stl.stroke = 'orange'
+                    stl.strokeWidth = 2
+                    return stl
+                }
+            }
+            class GooseEdge2 extends PolylineEdge { }
+            // 边Model
+            class GooseEdgeModel2 extends PolylineEdgeModel {
+                getEdgeStyle() {
+                    const stl = super.getEdgeStyle()
+                    stl.stroke = '#255CE7'
+                    stl.strokeWidth = 2
+                    return stl
+                }
+            }
             class MyGroup extends GroupNode.view {
             }
             class MyGroupModel extends GroupNode.model {
@@ -449,6 +470,16 @@ export default {
                 model: GooseEdgeModel,
             })
             lf.value.register({
+                type: "svEdge2",
+                view: SvEdge2,
+                model: SvEdgeModel2,
+            })
+            lf.value.register({
+                type: "baseEdge2",
+                view: GooseEdge2,
+                model: GooseEdgeModel2,
+            })
+            lf.value.register({
                 type: "my-group",
                 model: MyGroupModel,
                 view: MyGroup,
@@ -473,8 +504,8 @@ export default {
                 },//连接线w文字样式
                 outline: {
                     fill: "transparent",
-                    stroke: "#949494",
-                    strokeDasharray: "3,3",
+                    stroke: "none",//"#949494",
+                    //strokeDasharray: "3,3",
                     hover: {
                         stroke: "#949494",
                     },
@@ -492,7 +523,7 @@ export default {
                 },//锚点样式
                 baseEdge: {
                     stroke: "#255CE7",
-                    strokeWidth: 2,
+                    strokeWidth: 1,
                 },//连接线颜色
                 svEdge: {
                     stroke: "orange",
@@ -520,6 +551,11 @@ export default {
             lf.value.on('node:click', function (data, e, position) {//传送坐标轴参数到父组件
                 copyId.value = data.data.id
                 nodeId.value = data.data.id
+                if(delId.value!=""){
+                    //恢复原线宽度
+                    const edge = lf.value.getEdgeModelById(delId.value);
+                    if(edge!=null) lf.value.changeEdgeType(delId.value, edge.type.replace("2",""))
+                }
                 delId.value = "" //清除选择的连线ID
                 setX.value = data.data.x
                 setY.value = data.data.y
@@ -570,8 +606,20 @@ export default {
             })
             // console.log(lf.value.graphModel,'sss');
             lf.value.on('edge:click', function (data, e, position) {//解决点击连接线问题
+                //console.log(data.data.pointsList)
+                if(delId.value!=""){
+                    //const edgeModel = lf.value.getEdgeModelById(delId.value);
+                    //恢复原线宽度    
+                    //有bug,会导致连接线重新绘制,原手动调整的points会失效                 
+                    //const edge = lf.value.getEdgeModelById(delId.value);
+                    //if(edge!=null) lf.value.changeEdgeType(delId.value, edge.type.replace("2",""))
+                }
                 delId.value = data.data.id
+                //当前点击线设置为粗线
+                //lf.value.changeEdgeType(data.data.id, data.data.type.replace("2","")+"2") //有bug,会导致连接线重新绘制,原手动调整的points会失效          
                 nodeId.value = "" //清除选择的节点Id
+                /*
+                //根据选择的边类型,更改当前选择边的类型
                 if (copyColor.value == '#255CE7') {
                     blue()
                     lf.value.changeEdgeType(data.data.id, "baseEdge")
@@ -582,6 +630,7 @@ export default {
                     lf.value.changeEdgeType(data.data.id, "svEdge")
                     lf.value.setProperties(data.data.id, { 'issv': 'SV' })
                 }
+                */
             })
             //当将节点托入画布后触发事件
             lf.value.on('node:dnd-add', function (nodedata) {

+ 3 - 3
src/pages/components/drawModal/AbilityModal.vue

@@ -47,8 +47,8 @@
 
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="cancels">取消</el-button>
-                    <el-button type="primary" @click="sureClick">确定</el-button>
+                    <el-button @click="cancels">关闭</el-button>
+                    <!--<el-button type="primary" @click="sureClick">确定</el-button>-->
                 </span>
             </template>
         </el-dialog>
@@ -279,7 +279,7 @@ export default {
                 new_iedtype: newType.value
             }).then(res => {
                 if (res.code == 0) {
-                    sureClose()
+                    //sureClose()
                     props.funOne()
                     ElMessage({
                         message: "修改成功",