scd_tools_ui/src/pages/components/draw/DrawDesigns.vue

<template>
    <div>
        <div class="bigBox">
            <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>
        <LineDouble v-if="ldModal" :ldModal="ldModal" :modelId="modelId" :startTarget="startTarget"
            :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>
    </div>
</template>

<script>
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import LogicFlow from "@logicflow/core";
import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
import cid from '@/api/cid/cid'
import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import AbilityModal from "../drawModal/AbilityModal.vue"
import LineDouble from '../drawModal/LineDouble.vue';
import GroupModelAdd from '../drawModal/GroupModelAdd.vue';
import {
    DndPanel,
    SelectionSelect,
    Group,
    Menu,
    MiniMap,
    regeister,
    Snapshot,
    lfJson2Xml,
    lfXml2Json,
    RectResize,
    NodeResize,
    GroupNode,
    groupModel,
} from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";
export default {
    props: {
        lineMenuColor: {
            type: String,
            required: true
        },
        fatX: {
            type: Number,
            required: true
        },
        fatY: {
            type: Number,
            required: true
        },
        nowLook: {
            type: null || Number,
            required: true
        },
        needObj: {
            type: Object,
            required: true
        },
        needId: {
            type: Number || String,
            required: true
        },
        needName: {
            type: String,
            required: true
        },
        coolObj: {
            type: Object,
            required: true
        },
        // 用于判断是sv还是goose
        svOrGoose: {
            type: Number,
            required: true,
        },
        searchModule: {
            type: Function,
            required: true
        },//父组件insideModule的方法
        cleanAll: {
            type: Function,
            required: true
        },//父组件insideModule的方法
    },
    setup(props, { emit }) {
        let router = useRouter()
        let route = useRoute()
        const container = ref();
        const lf = ref();
        let lineColor = ref('#255CE7')
        let copyColor = ref('')
        let delId = ref('')
        let nodeId = ref('')
        let copyId = ref('')
        let setX = ref(0)
        let setY = ref(0)
        let needMap = ref([])
        let coolId = ref('')
        let coolName = ref('')
        let copyObj = ref({})//整个模型属性
        let modelId = ref("")//模型id
        let abModal = ref(false)//功能模态框
        let iedType = ref("")//iedtype
        let ldModal = ref(false)//linemodel.vue开关
        let startTarget = ref({})//开始节点
        let endTarget = ref({})//结束节点
        let numCase = ref(1)//判断sv还是goose
        let startText = ref("")//开始节点名称
        let endText = ref("")//结束节点名称
        let lineType = ref("")//连接线
        let loading = ref(false)
        let nodeid = ref("")//节点的id
        let fun = ref()//储存父节点传来的函数
        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
        })
        watch(() => props.fatX, (newVal) => {
            if (newVal == 0 || newVal == '') {
                setX.value = 0
            } else {
                setX.value = newVal
            }
        })
        watch(() => props.fatY, (newVal) => {
            if (newVal == 0 || newVal == '') {
                setY.value = 0
            } else {
                setY.value = newVal
            }
        })
        // watch(() => props.needObj, (newVal) => {
        //     coolObj.value = newVal
        // })
        watch(() => props.needId, (newVal) => {
            coolId.value = newVal
        })
        watch(() => props.needName, (newVal) => {
            coolName.value = newVal
        })
        watch(() => props.coolObj, (newVal) => {
            if (route.query.modelid != '' && route.query.modelid != null && route.query.modelid != undefined) {
                return
            } else {
                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);//渲染模型图
                        loading.value = false//关闭加载动画
                        for (let index = 0; index < origiondata.edges.length; index++) {
                            const element = origiondata.edges[index];
                            if (element.properties != null && element.properties["issv"] === 'SV') {
                                let lineStyle = lf.value.getEdgeModelById(element.id)//.getEdgeStyle();
                                // console.log(lineStyle)
                                lineStyle.setProperties({ svEdge: { stroke: 'orange' } })
                            }
                        }
                    })
                }, 2000);
            }
        }, {
            deep: true
        })
        watch(() => props.svOrGoose, (newVal) => {
            numCase.value = newVal
        })
        function blue() {
            lf.value.setTheme({
                baseEdge: {
                    stroke: '#255CE7',
                    strokeWidth: 2,
                },
            });//设置连接线为蓝色
        }
        function orange() {
            lf.value.setTheme({
                svEdge: {
                    stroke: 'orange',
                    strokeWidth: 2,
                },
            });//设置连接线为橙色
        }
        function delLine() {
            if (delId.value!="") {
                lf.value.deleteEdge(delId.value)//删除选择的连接线
            }
            if (nodeId.value!="") {
                lf.value.deleteNode(nodeId.value)//删除节点
            }
        }
        function saveLine() {
            // lf.value.getSnapshot()//保存为图片
            //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 != '') {
                cid.saveMap(
                    {
                        id: modelId.value - 0,
                        relation_json: data,
                    }
                ).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            type: "success",
                            message: "保存成功！",
                            duration: 2000,
                        })
                        if(res.data!=null && res.data!=""){
                            modelIedTypes.value = res.data.IedTypes!=null ?res.data.IedTypes.split(","):[]
                        }
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: "error"
                        })
                    }
                }).catch(res => {
                    ElMessage({
                        message: "操作失败：服务器发生异常",
                        type: "error"
                    })
                })
            } else {
                cid.saveMap(
                    {
                        id: copyObj.value.id - 0,
                        relation_json: data,
                    }
                ).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            type: "success",
                            message: "保存成功！",
                            duration: 2000,
                        })
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            }
        }
        function cleanMap() {
            lf.value.clearData()
        }
        function textColor() {
            if (lineColor.value == "#255CE7") {
                lf.value.setTheme({
                    svEdge: {
                        stroke: "orange",
                        strokeWidth: 2,
                    },
                });
                lineColor.value = 'orange'
            } else {
                lf.value.setTheme({
                    baseEdge: {
                        stroke: "#255CE7",
                        strokeWidth: 2,
                    },
                });
                lineColor.value = '#255CE7'
            }
        }
        function momal() {
            lf.value.graphModel.moveNode2Coordinate(copyId.value, setX.value - 0, setY.value - 0, true);
        }
        function lastRender() {            
            loading.value = true
            modelId.value = route.query.modelid
            cid.getModelInfo({ id: modelId.value - 0,is_sys: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);
                loading.value = false
                for (let index = 0; index < origiondata.edges.length; index++) {
                    const element = origiondata.edges[index];
                    if (element.properties != null && element.properties["issv"] === 'SV') {
                        let lineStyle = lf.value.getEdgeModelById(element.id)
                        lineStyle.setProperties({ svEdge: { stroke: 'orange' } })
                    }
                }
            }, { immediate: true })
        }
        function listMap() {
            fun.value = props.searchModule
            funOne.value = props.cleanAll
            coolId.value = props.needId
            coolName.value = props.needName//模型名称
            copyObj.value = props.coolObj//需要的模型信息对象
            numCase.value = props.svOrGoose//判断sv或者goose类型
            copyColor.value = props.lineMenuColor//颜色
            setTimeout(() => {
                cid.getModelInfo({ id: copyObj.value.id ? copyObj.value.id : route.query.modelid - 0,is_sys:copyObj.value.id?1:2, pageno: 1, pagesize: 20 }).then(res => {
                    emit("drawCor", res.data)
                    const filteredArray = res.data[0].ied_type.filter(param => param !== null)
                    let groups = {
                        type: "my-group",
                        label: "分组",
                        id: "952",
                        resizable: true,//手动调整大小
                        foldable: true,//展开收起
                        children: [],
                        width: 5,
                        height: 5,
                        x: 0,
                        y: 0,
                        isShowAnchor: true,//锚点
                    }
                    needMap.value = filteredArray.map(item => {
                        return {
                            type: 'rect',
                            text: item.name,
                            label: item.name,
                            icon: '',
                            id: item.id,
                            properties: {
                                ied_type: item.code,
                                id: item.id
                            },
                        }
                    })
                    needMap.value.push(groups)
                    // lf.value.register(logicFlows)
                    lf.value.extension.dndPanel.setPatternItems(needMap.value);

                    console.log('执行了渲染.....', route.query);
                    if (route.query.modelid != '' && route.query.modelid != null && route.query.modelid != undefined) {
                        lastRender()
                    }
                    setTimeout(() => {
                        loading.value = false
                    }, 1000)
                })
            }, 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.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
                delId.value = "" //清除选择的连线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) {//双击打开弹窗
                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
                delId.value=""
                abModal.value = true
            })
            lf.value.on('edge:dbclick', function (data, e, position) {//双击连接线
                nodeId.value = "" //清除选择的节点Id
                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
                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) {//解决点击连接线问题
                delId.value = data.data.id
                nodeId.value = "" //清除选择的节点Id
                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();
            listMap()
        })
        function abilityBack(data) {
            abModal.value = data
        }
        function lineBack(data) {
            ldModal.value = data
        }
        // GroupModelAdd.vue返回状态
        function groupBack(data) {
             groupType.value = data.show
            //设置窗口关闭时
            if (!data.show && data.ied_type != '') {
                //更新分组的装置类型编码属性ied_type
                const g = lf.value.getNodeModelById(data.groupNodeId);
                g.setProperties({
                    ied_type: data.ied_type,
                });
            } else {
                //未设置装置编码，自动删除
                lf.value.deleteNode(data.groupNodeId)
            }
        }
        onBeforeUnmount(() => {
            // lf.value.remove()
            // coolObj.value = {}
            router.push("/home/setting")
        })
        return {
            container,
            lf,
            textColor,
            lineColor,
            blue,
            orange,
            delLine,
            saveLine,
            cleanMap,
            nodeId,
            copyColor,
            copyId,
            setX,
            setY,
            momal,
            needMap,
            coolId,
            coolName,
            copyObj,//模型整个数据
            modelId,//模型id
            abModal,//功能模态框
            iedType,//模型属性
            abilityBack,//abilitymodal.vue返回模态框开关状态
            ldModal,//lineDouble.vue模态框开关
            startTarget,//开始节点
            endTarget,//结束节点
            lineBack,//LineDouble.vue返回模态框开关状态
            numCase,//判断是sv还是goose，0为sv，1为goose
            startText,//开始节点名称
            endText,//结束节点名称
            lineType,//连接线
            lastRender,//路由跳转的渲染
            loading,
            nodeid,//节点的id
            fun,//储存父节点传来的函数
            listMap,//组件初始化
            funOne,//储存父节点传来的函数
            groupType,//GroupModelAdd.vue组件显示与否
            groupNodeId,
            groupBack,// GroupModelAdd.vue返回状态
        }
    },
    components: {
        AbilityModal,//功能模态框
        LineDouble,//连接线模态框
        GroupModelAdd,//分组专属模态框
    }
}
</script>

<style scoped>
.container {
    width: 100%;
    height: calc(100vh - 18rem);
    /* overflow: auto; */
}

:deep(.lf-element-text) {
    color: black;
}

/* :deep(.lf-dndpanel){
    w
} */
/* :deep(.lf-basic-shape) {
    width: 150px;
    height: 150px;
} */
</style>