1

src/pages/components/draw/DrawDesigns.vue

@@ -17,8 +17,6 @@ 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 systemRow from '@/api/systemRow';
-import flow from "@/api/flow/flow"
 import { ElMessage } from 'element-plus';
 import { useRouter, useRoute } from 'vue-router';
 import AbilityModal from "../drawModal/AbilityModal.vue"
@@ -71,9 +69,6 @@ export default {
         let route = useRoute()
         const container = ref();
         const lf = ref();
-        let needColor = props.lineMenuColor
-        let toX = props.fatX
-        let toY = props.fatY
         let lineColor = ref('#255CE7')
         let copyColor = ref('')
         let delId = ref('')
@@ -83,7 +78,6 @@ export default {
         let setY = ref(0)
         let needMap = ref([])
         let coolId = ref('')
-        let coolObj = ref({})
         let coolName = ref('')
         let copyObj = ref({})//整个模型属性
         let modelId = ref("")//模型id
@@ -114,9 +108,9 @@ export default {
                 setY.value = newVal
             }
         })
-        watch(() => props.needObj, (newVal) => {
-            coolObj.value = newVal
-        })
+        // watch(() => props.needObj, (newVal) => {
+        //     coolObj.value = newVal
+        // })
         watch(() => props.needId, (newVal) => {
             coolId.value = newVal
         })
@@ -124,26 +118,25 @@ export default {
             coolName.value = newVal
         })
         watch(() => props.coolObj, (newVal) => {
-            // setTimeout(() => {
-            loading.value = true
+            loading.value = true//打开加载动画
             copyObj.value = newVal
-            modelId.value = copyObj.value.id
-            cid.getModelInfo({ id: copyObj.value.id, pageno: 1, pagesize: 20 }).then(res => {
-                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
-                console.log('调用了coolobg的watch');
-                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' } })
+            modelId.value = copyObj.value.id//模型id
+            setTimeout(() => {
+                cid.getModelInfo({ id: copyObj.value.id, pageno: 1, pagesize: 20 }).then(res => {
+                    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' } })
+                        }
                     }
-                }
-            }, { immediate: true })
-            // }, 3000);
+                })
+            }, 1000);
         })
         watch(() => props.svOrGoose, (newVal) => {
             numCase.value = newVal
@@ -190,10 +183,10 @@ export default {
                             message: "保存成功！",
                             duration: 2000,
                         })
-                    }else{
+                    } else {
                         ElMessage({
-                            message:res.msg,
-                            type:"error"
+                            message: res.msg,
+                            type: "error"
                         })
                     }
                 })
@@ -210,10 +203,10 @@ export default {
                             message: "保存成功！",
                             duration: 2000,
                         })
-                    }else{
+                    } else {
                         ElMessage({
-                            message:res.msg,
-                            type:"error"
+                            message: res.msg,
+                            type: "error"
                         })
                     }
                 })
@@ -255,222 +248,222 @@ export default {
                 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)
+                        let lineStyle = lf.value.getEdgeModelById(element.id)
                         lineStyle.setProperties({ svEdge: { stroke: 'orange' } })
                     }
                 }
             }, { immediate: true })
         }
         onMounted(() => {
-            coolObj.value = props.needObj
             coolId.value = props.needId
-            coolName.value = props.needName
-            copyObj.value = props.coolObj
-            numCase.value = props.svOrGoose
-            copyColor.value = props.lineMenuColor
-            systemRow.getChildren({ code: "ied_type" }).then(res => {
-                needMap.value = res.data.map(item => {
-                    return {
-                        type: 'rect',
-                        text: item.name,
-                        label: item.name,
-                        icon: '',
-                        properties: {
-                            ied_type: item.code,
-                            id: item.id
+            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, pageno: 1, pagesize: 20 }).then(res => {
+                    console.log(res.data, 'res.data');
+                    const filteredArray = res.data[0].ied_type.filter(param => param !== null)
+                    needMap.value = filteredArray.map(item => {
+                        return {
+                            type: 'rect',
+                            text: item.name,
+                            label: item.name,
+                            icon: '',
+                            properties: {
+                                ied_type: item.code,
+                                id: item.id
+                            }
+                        }
+                    })
+                    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, Menu, MiniMap, Snapshot],//全局加载的组件
+                        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
                         }
                     }
-                })
-                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, Menu, MiniMap, Snapshot],//全局加载的组件
-                    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 GooseEdge extends PolylineEdge { }
+                    // 节点Model
+                    class GooseEdgeModel extends PolylineEdgeModel {
+                        getEdgeStyle() {
+                            const stl = super.getEdgeStyle()
+                            stl.stroke = '#255CE7'
+                            return stl
+                        }
                     }
-                }
-                lf.value.register({
-                    type: "svEdge",
-                    view: SvEdge,
-                    model: SvEdgeModel,
-                })
-                lf.value.register({
-                    type: "baseEdge",
-                    view: GooseEdge,
-                    model: GooseEdgeModel,
-                })
-                lf.value.setTheme({//设置画布
-                    rect: {
-                        fill: "#FFFFFF",
-                        stroke: "#255CE7",
-                        strokeWidth: 2,
-                    },//放置的元素
-                    snapline: {
-                        stroke: 'black', // 对齐线颜色
-                        strokeWidth: 1, // 对齐线宽度
-                    },
-                    edgeText: {
-                        textWidth: 100,
-                        overflowMode: "default",
-                        fontSize: 18,
-                        background: {
+                    lf.value.register({
+                        type: "svEdge",
+                        view: SvEdge,
+                        model: SvEdgeModel,
+                    })
+                    lf.value.register({
+                        type: "baseEdge",
+                        view: GooseEdge,
+                        model: GooseEdgeModel,
+                    })
+                    lf.value.setTheme({//设置画布
+                        rect: {
                             fill: "#FFFFFF",
+                            stroke: "#255CE7",
+                            strokeWidth: 2,
+                        },//放置的元素
+                        snapline: {
+                            stroke: 'black', // 对齐线颜色
+                            strokeWidth: 1, // 对齐线宽度
                         },
-                    },//连接线w文字样式
-                    outline: {
-                        fill: "transparent",
-                        stroke: "#949494",
-                        strokeDasharray: "3,3",
-                        hover: {
+                        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) {
-                    console.log(data, 'data1');
-                    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) {//传送坐标轴参数到父组件
-                    console.log(data, 'data3');
-                    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) {//双击打开弹窗
-                    iedType.value = data.data.properties.ied_type
-                    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' })
+                        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) {//传送坐标轴参数到父组件
+                        console.log(data, 'data3');
+                        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) {//双击打开弹窗
+                        iedType.value = data.data.properties.ied_type
+                        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.register(logicFlows)
+                    lf.value.extension.dndPanel.setPatternItems(needMap.value);
+                    lf.value.render();
+                    if (route.query.modelid != '' && route.query.modelid != null && route.query.modelid != undefined) {
+                        console.log(456789);
+                        lastRender()
                     }
+                    setTimeout(() => {
+                        loading.value = false
+                    }, 10000)
                 })
-                // lf.value.register(logicFlows)
-                lf.value.extension.dndPanel.setPatternItems(needMap.value);
-                lf.value.render();
-                console.log(route.query.modelid, '498651');
-                if (route.query.modelid != '' && route.query.modelid != null && route.query.modelid != undefined) {
-                    console.log(456789);
-                    lastRender()
-                }
-                setTimeout(() => {
-                    loading.value = false
-                }, 10000)
-            })
+            }, 1000);
         })
         function abilityBack(data) {
             abModal.value = data
@@ -480,7 +473,7 @@ export default {
         }
         onBeforeUnmount(() => {
             // lf.value.remove()
-            coolObj.value = {}
+            // coolObj.value = {}
             router.push("/home/setting")
         })
         return {

src/pages/components/drawModal/AbilityModal.vue

@@ -1,15 +1,14 @@
 <template>
     <div>
         <el-dialog v-model="dialogVisible" title="装置功能配置" width="70%" @close="handleClose" :close-on-click-modal="false">
-            <el-button type="primary" plain @click="addAbility(0)"><el-icon>
+            <el-button style="height: 30px;" type="primary" plain @click="addAbility(0)"><el-icon>
                     <Plus />
                 </el-icon>添加新功能</el-button>
             <el-upload style="display: inline-block;margin: 0 10px;" v-model:file-list="fileList" class="upload-demo"
                 :show-file-list="false" :http-request="upTemplate" multiple :limit="1">
-                <el-button type="primary" plain :disabled="upState">Excel上传</el-button>
+                <el-button style="height: 30px;" type="primary" plain>Excel上传</el-button>
             </el-upload>
-            <el-button type="success" plain @click="downloadFile">模板下载</el-button>
-
+            <el-button style="height: 30px;" type="success" plain @click="downloadFile">模板下载</el-button>
             <el-table :data="tableData" style="width: 100%;height: calc(100vh - 600px);">
                 <el-table-column label="序号" width="100">
                     <template #default="scope">
@@ -51,7 +50,8 @@ import flow from "@/api/flow/flow"
 import system from '@/api/system';
 import AddAbility from './AddAbility.vue';
 import DelAbility from './DelAbility.vue';
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElLoading } from 'element-plus';
+import portExcel from "../../../../public/static/fanc_comp.xlsx"
 export default {
     props: {
         abModal: {
@@ -85,6 +85,7 @@ export default {
         })
         // 初始化函数
         function reload() {
+            console.log(portExcel, 'excel');
             dialogVisible.value = props.abModal
             modelIds.value = props.modelId
             iedTypes.value = props.iedType
@@ -97,7 +98,7 @@ export default {
         }
 
         function downloadFile() {
-            const fileUrl = '../../../../public/fanc_comp.xlsx'; // 修改为绝对路径
+            const fileUrl = portExcel; // 修改为绝对路径
             fetch(fileUrl)
                 .then(response => {
                     if (!response.ok) {
@@ -131,6 +132,12 @@ export default {
         }
         // 文件上传
         function upTemplate(e) {
+            // 利用element ui做出加载效果
+            const loading = ElLoading.service({
+                lock: true,
+                text: "正在上传",
+                background: "rgba(0, 0, 0, 0.7)",
+            });
             // 调用接口进行文件上传
             flow.excelInData({ code: "ied_func_fcda", file: e.file, model_id: modelIds.value - 0 }).then(res => {
                 if (res.returncode == 200) {
@@ -142,13 +149,17 @@ export default {
                         model_id: modelIds.value - 0,
                         ied_type: iedTypes.value
                     }).then(res => {
-                        tableData.value = res.data
+                        if (res.data) {
+                            tableData.value = res.data
+                        }
                     })
+                    loading.close()
                 } else {
                     ElMessage({
                         message: res.msg,
                         type: "error"
                     })
+                    loading.close()
                 }
             })
         }
@@ -217,6 +228,7 @@ export default {
             lookTemplate,//模板下载
             upTemplate,//文件上传
             downloadFile,
+            portExcel,//需要被下载的excel文件
         }
     },
     components: {

src/pages/components/drawModal/AddAbility.vue

@@ -1,10 +1,11 @@
 <template>
     <div>
         <el-dialog v-model="dialogVisible" :title="titles" width="30%" @close="handleClose" :close-on-click-modal="false">
-            <el-form :model="abilityFrom" :rules="rules" label-width="150px">
+            <el-form ref="ruleFormRef" :model="abilityFrom" :rules="rules" label-width="180px">
                 <el-form-item label="设计功能名称" prop="setAbName">
-                    <el-select :disabled="numState == 1" @change="abNameChange" style="width: 350px;" v-model="abilityFrom.setAbName" filterable
-                        allow-create default-first-option :reserve-keyword="false" placeholder="选择或输入">
+                    <el-select :disabled="numState == 1" @change="abNameChange" style="width: 350px;"
+                        v-model="abilityFrom.setAbName" filterable allow-create default-first-option
+                        :reserve-keyword="false" placeholder="选择或输入">
                         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item" />
                     </el-select>
                     <p style="color: #2C5BE5;font-size: 16px;">新功能可直接输入但不能重复;已有功能可选择</p>
@@ -16,6 +17,22 @@
                     <el-input style="width: 350px;" v-model="abilityFrom.setMemo"></el-input>
                     <p style="color: #2C5BE5;font-size: 16px;">关键词之间“|”表示或者,“&”表示并且</p>
                 </el-form-item>
+                <el-form-item label="端子信号类型" prop="sg">
+                    <el-select @change="sgChange" style="width: 350px;" v-model="abilityFrom.sg" allow-create
+                        default-first-option :reserve-keyword="false" placeholder="请选择信号类型">
+                        <el-option key="SV" label="SV" value="SV" />
+                        <el-option key="GOOSE" label="GOOSE" value="GOOSE" />
+                    </el-select>
+                    <p style="color: #2C5BE5;font-size: 16px;">仅支持SV或GOOSE</p>
+                </el-form-item>
+                <el-form-item label="端子信号输入输出方向" prop="io">
+                    <el-select @change="ioChange" style="width: 350px;" v-model="abilityFrom.io" allow-create
+                        default-first-option :reserve-keyword="false" placeholder="请选择输入或输出">
+                        <el-option key="接收" label="接收" value="接收" />
+                        <el-option key="输出" label="输出" value="输出" />
+                    </el-select>
+                    <p style="color: #2C5BE5;font-size: 16px;">仅支持中文的'接收'或'输出'</p>
+                </el-form-item>
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
@@ -68,11 +85,14 @@ export default {
             setAbName: "",//设计功能名称
             setSon: "",//设计端子名称
             setMemo: "",//端子描述关键词
+            sg: "",//sv还是goose
+            io: ""//输入还是输出
         })
         let options = ref([])//多选选项
         let fatherToSon = ref([])//AbilityModal.vue传过来的表格数据，制作为选项
         let needModel = ref('')//需要的模型id
         let needIedType = ref('')//需要的iedtype
+        let ruleFormRef = ref(null)//表单的ref，用于触发验证
         const rules = reactive({
             setAbName: [
                 { required: true, message: '请选择设计功能名称', trigger: 'change' },
@@ -82,6 +102,12 @@ export default {
             ],
             setMemo: [
                 { required: true, message: '请输入端子描述关键词', trigger: 'blur' },
+            ],
+            sg: [
+                { required: true, message: '请选择端子信号类型', trigger: 'change' },
+            ],
+            io: [
+                { required: true, message: '请选择端子输入输出方向', trigger: 'change' },
             ]
         })//表单验证
         let numState = ref(0)//0为新增，1为修改
@@ -104,7 +130,7 @@ export default {
         watch(() => props.editRow, (newVal) => {
             needEditRow.value = newVal
         })
-        watch(()=>props.editOrAdd,(newVal)=>{
+        watch(() => props.editOrAdd, (newVal) => {
             numState.value = newVal
         })
         // 初始化组件
@@ -136,6 +162,8 @@ export default {
                 abilityFrom.value.setAbName = needEditRow.value.func_name
                 abilityFrom.value.setMemo = needEditRow.value.fcda_match_exp
                 abilityFrom.value.setSon = needEditRow.value.fcda_name
+                abilityFrom.value.sg = needEditRow.value.svorgoose
+                abilityFrom.value.io = needEditRow.value.inorout
             }
         }
         // 关闭模态框
@@ -147,12 +175,14 @@ export default {
         function sureClose() {
             if (numState.value == 0) {
                 flow.saveModelAndIed({
-                    model_id: needModel.value - 0,
-                    ied_type: needIedType.value,
-                    func_id:newAddId?.value,
+                    model_id: needModel.value - 0,//模型id
+                    ied_type: needIedType.value,//装置类型
+                    func_id: newAddId?.value,
                     func_name: abilityFrom.value?.setAbName,
                     fcda_name: abilityFrom.value.setSon,
                     fcda_match_exp: abilityFrom.value.setMemo,
+                    sv_or_goose: abilityFrom.value.sg,//sv还是goose
+                    in_or_out: abilityFrom.value.io//输入还是输出
                 }).then(res => {
                     if (res.code == 0) {
                         dialogVisible.value = false
@@ -179,6 +209,8 @@ export default {
                     fcda_match_exp: abilityFrom.value.setMemo,
                     func_id: needEditRow.value.func_id - 0,
                     fcda_id: needEditRow.value.id - 0,
+                    sv_or_goose: abilityFrom.value.sg,
+                    in_or_out: abilityFrom.value.io
                 }).then(res => {
                     if (res.code == 0) {
                         dialogVisible.value = false
@@ -205,10 +237,20 @@ export default {
                 newAddId.value = e.id
             } else {
                 abilityFrom.value.setAbName = e
-                console.log(e,'id');
+                console.log(e, 'id');
             }
 
         }
+        //选择sv还是goose的change事件
+        function sgChange(e) {
+            // 将选择的数据赋值给表单内sg
+            abilityFrom.value.sg = e
+        }
+        //选择输入还是输出的change事件
+        function ioChange(e) {
+            // 将选择的数据赋值给表单内io
+            abilityFrom.value.io = e
+        }
         onMounted(() => {
             reload()
             // setTimeout(() => {
@@ -231,6 +273,9 @@ export default {
             needEditRow,//需要的整个对象属性
             newAddId,//新增的id
             titles,//模态框title
+            sgChange,//选择sv还是goose的change事件
+            ioChange,//选择输入还是输出的change事件,
+            ruleFormRef,//表单的ref，用于触发验证
         }
     }
 }

src/pages/system/components/InsideModule.vue

@@ -106,7 +106,7 @@ export default {
         setId: {
             type: Object,
             required: true
-        }
+        },//对象
     },
     setup(props, { emit }) {
         let route = useRoute()//跳转传参
@@ -147,6 +147,7 @@ export default {
                 needName.value = route.query.modelname
             }
             coolObj.value = props.setId//模型整个数据
+            console.log(props.setId,'insideon');
         }
         function svClick() {
             lineMenuColor.value = 'orange'