Merge branch 'master' of http://94.191.59.107:3000/houwenfeng/scd_tools_ui

src/api/flow/flow.js

@@ -17,7 +17,7 @@ from_fcda_id 输出装置端子ID
 to_fcda_ids 输入装置端子ID列表。多个ID间使用逗号分隔
 goosesv 信号类型。值范围：GOOSE | SV*/
 function saveModelOn(data) {
-    return request({
+    return request({//适用于点击连接线获取数据
         url: `/admin/model/function/fcda-ref/save`,
         method: "post",
         data
@@ -35,7 +35,7 @@ function delModelOn(data) {
 }
 // 获取指定模型和装置类型的端子列表
 function getModelAndIed(data){
-    return request({
+    return request({//适用于表格数据
         url:`/admin/model/function/fcda/list`,
         method:"get",
         params:data
@@ -60,7 +60,7 @@ function saveModelAndIed(data){
 /*model_id *模型ID
 ied_type *装置类型*/
 function getByModelAndIed(data){
-    return request({
+    return request({//适用于新增修改时下拉数据
         url:`/admin/model/function/list`,
         method:"get",
         params:data

src/pages/components/draw/DrawDesigns.vue

@@ -6,6 +6,8 @@
         <!-- 功能模态框 -->
         <AbilityModal v-if="abModal" :abModal="abModal" :modelId="modelId" :iedType="iedType" @abilityBack="abilityBack">
         </AbilityModal>
+        <LineDouble v-if="ldModal" :ldModal="ldModal" :modelId="modelId" :startTarget="startTarget" :endTarget="endTarget"
+           :numCase="numCase" :startText="startText" :endText="endText" @lineBack="lineBack"></LineDouble>
     </div>
 </template>
 
@@ -19,6 +21,7 @@ import flow from "@/api/flow/flow"
 import { ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';
 import AbilityModal from "../drawModal/AbilityModal.vue"
+import LineDouble from '../drawModal/LineDouble.vue';
 import { DndPanel, SelectionSelect, Group, Menu, MiniMap, regeister, Snapshot, lfJson2Xml, lfXml2Json } from "@logicflow/extension";
 import "@logicflow/core/dist/style/index.css";
 import "@logicflow/extension/lib/style/index.css";
@@ -55,6 +58,11 @@ export default {
         coolObj: {
             type: Object,
             required: true
+        },
+        // 用于判断是sv还是goose
+        svOrGoose: {
+            type: Number,
+            required: true,
         }
     },
     setup(props, { emit }) {
@@ -79,6 +87,12 @@ export default {
         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("")//结束节点名称
         watch(() => props.lineMenuColor, (newVal) => {
             copyColor.value = newVal
         })
@@ -108,7 +122,6 @@ export default {
         watch(() => props.coolObj, (newVal) => {
             copyObj.value = newVal
             modelId.value = copyObj.value.id
-            console.log(modelId.value, 'watch模型id ');
             cid.getModelInfo(copyObj.value.id).then(res => {
                 if (res.data[0].relation_json == null || res.data[0].relation_json == '') return;
                 const origiondata = JSON.parse(res.data[0].relation_json)
@@ -125,6 +138,9 @@ export default {
                 }
             }, { immediate: true })
         })
+        watch(() => props.svOrGoose, (newVal) => {
+            numCase.value = newVal
+        })
         function blue() {
             lf.value.setTheme({
                 baseEdge: {
@@ -204,11 +220,11 @@ export default {
             coolId.value = props.needId
             coolName.value = props.needName
             copyObj.value = props.coolObj
+            numCase.value = props.svOrGoose
             //systemRow.getChildren({ code: "area_type" }).then(res => {
             //    console.log(res, 'sss');
             //})
             systemRow.getChildren({ code: "ied_type" }).then(res => {
-                console.log(res, 'res');
                 needMap.value = res.data.map(item => {
                     return {
                         type: 'rect',
@@ -324,11 +340,6 @@ export default {
                 lf.value.on("edge:click", function (data, e, position) {
                     delId.value = data.data.id
                 })
-                lf.value.on('edge:dbclick', function (data, e, position) {
-                    let start = lf.value.getNodeModelById(data.data.sourceNodeId)//获取连线开始节点
-                    let end = lf.value.getNodeModelById(data.data.targetNodeId)//获取连线结尾节点
-                    console.log(start, end, '边data');
-                })
                 lf.value.on("edge:add", function (data, e, position) {
                     if (copyColor.value == '#255CE7') {
                         blue()
@@ -348,10 +359,25 @@ export default {
                     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
-                    console.log(data, '节点data');
+                })
+                lf.value.on('edge:dbclick', function (data, e, position) {//双击连接线
+                    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
+                    ldModal.value = true
                 })
                 lf.value.on('node:mousemove', function (data, e) {//传递坐标轴参数到父组件
                     setX.value = data.data.x
@@ -380,6 +406,9 @@ export default {
         function abilityBack(data) {
             abModal.value = data
         }
+        function lineBack(data) {
+            ldModal.value = data
+        }
         onBeforeUnmount(() => {
             // lf.value.remove()
             coolObj.value = {}
@@ -408,10 +437,18 @@ export default {
             abModal,//功能模态框
             iedType,//模型属性
             abilityBack,//abilitymodal.vue返回模态框开关状态
+            ldModal,//lineDouble.vue模态框开关
+            startTarget,//开始节点
+            endTarget,//结束节点
+            lineBack,//LineDouble.vue返回模态框开关状态
+            numCase,//判断是sv还是goose，0为sv，1为goose
+            startText,//开始节点名称
+            endText,//结束节点名称
         }
     },
     components: {
         AbilityModal,//功能模态框
+        LineDouble,//连接线模态框
     }
 }
 </script>
@@ -424,7 +461,7 @@ export default {
 }
 
 :deep(.lf-element-text) {
-    color: #255CE7;
+    color: black;
 }
 
 /* :deep(.lf-basic-shape) {

src/pages/components/drawModal/AbilityModal.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <el-dialog v-model="dialogVisible" title="装置功能配置" width="70%" @close="handleClose">
-            <el-button type="primary" plain @click="addAbility"><el-icon>
+            <el-button type="primary" plain @click="addAbility(0)"><el-icon>
                     <Plus />
                 </el-icon>添加新功能</el-button>
             <el-table :data="tableData" style="width: 100%">
@@ -10,13 +10,18 @@
                         <span>{{ scope.$index + 1 }}</span>
                     </template>
                 </el-table-column>
-                <el-table-column prop="name" label="设计功能名称" width="220" />
-                <el-table-column prop="state" label="端子设计名称" width="220" />
-                <el-table-column prop="city" label="端子匹配关键词" width="220" />
+                <el-table-column prop="func_name" label="设计功能名称" width="220" />
+                <el-table-column prop="fcda_name" label="端子设计名称" width="220" />
+                <el-table-column prop="fcda_match_exp" label="端子匹配关键词" width="220" />
                 <el-table-column fixed="right" label="操作" width="auto">
-                    <template #default>
-                        <el-button link type="primary" size="small">编辑</el-button>
-                        <el-button link type="primary" size="small" style="color: red;">删除</el-button>
+                    <template #default="scope">
+                        <el-button link type="primary" size="small" @click="addAbility(1, scope.row)">编辑</el-button>
+                        <el-popconfirm title="确认删除吗?" @confirm="firmSure">
+                            <template #reference>
+                                <el-button link type="primary" size="small" style="color: red;"
+                                    @click="delAbility(scope.row)">删除</el-button>
+                            </template>
+                        </el-popconfirm>
                     </template>
                 </el-table-column>
             </el-table>
@@ -27,8 +32,8 @@
                 </span>
             </template>
         </el-dialog>
-        <AddAbility v-if="addModal" :addModal="addModal" :modelIds="modelIds" :iedTypes="iedTypes" @addAback="addAback"
-            :tableData="tableData"></AddAbility>
+        <AddAbility v-if="addModal" :addModal="addModal" :modelIds="modelIds" :iedTypes="iedTypes" :copyReload="copyReload"
+            :editOrAdd="editOrAdd" :editRow="editRow" @addAback="addAback" :tableData="tableData"></AddAbility>
     </div>
 </template>
 
@@ -36,6 +41,7 @@
 import { ref, onMounted, watch, toRefs } from 'vue';
 import flow from "@/api/flow/flow"
 import AddAbility from './AddAbility.vue';
+import { ElMessage } from 'element-plus';
 export default {
     props: {
         abModal: {
@@ -57,6 +63,9 @@ export default {
         let iedTypes = ref('')//iedtype
         let addModal = ref(false)//新增功能模态框开关状态
         let tableData = ref([])//表格数据
+        let editOrAdd = ref(0)//0为新增，1为编辑
+        let editRow = ref({})//编辑的对象
+        let delFcda = ref("")//需要删除的fcda_id
         watch(() => props.modelId, (newVal) => {
             modelIds.value = newVal
         })
@@ -68,11 +77,18 @@ export default {
             dialogVisible.value = props.abModal
             modelIds.value = props.modelId
             iedTypes.value = props.iedType
-            flow.getByModelAndIed({//获取所有功能
+            flow.getModelAndIed({//获取所有功能
+                model_id: modelIds.value - 0,
+                ied_type: iedTypes.value
+            }).then(res => {
+                tableData.value = res.data
+            })
+        }
+        function copyReload() {
+            flow.getModelAndIed({//获取所有功能
                 model_id: modelIds.value - 0,
                 ied_type: iedTypes.value
             }).then(res => {
-                console.log(res, '第一层res');
                 tableData.value = res.data
             })
         }
@@ -87,9 +103,35 @@ export default {
             emit("abilityBack", dialogVisible.value)
         }
         // 打开新增或编辑模态框
-        function addAbility() {
+        function addAbility(num, row) {
+            editOrAdd.value = num
+            editRow.value = row
             addModal.value = true
         }
+        // 删除功能
+        function delAbility(row) {
+            delFcda.value = row.id
+        }
+        // 确认删除功能
+        function firmSure() {
+            flow.delModelOn({
+                model_id: modelIds.value - 0,
+                fcda_id: delFcda.value - 0,
+            }).then(res => {
+                if (res.code == 0) {
+                    ElMessage({
+                        type: "success",
+                        message: "删除成功！"
+                    })
+                    copyReload()
+                }else{
+                    ElMessage({
+                        message:res.msg,
+                        type:"error"
+                    })
+                }
+            })
+        }
         function addAback(data) {
             addModal.value = data
         }
@@ -108,6 +150,12 @@ export default {
             tableData,//表格数据
             modelIds,//本组件需要的模型id
             iedTypes,//本组件需要的iedtypes
+            copyReload,//给addability.vue准备的方法
+            delAbility,//删除功能
+            firmSure,//确认删除功能
+            editOrAdd,//0为新增，1为编辑
+            editRow,//编辑的对象
+            delFcda,//需要删除的fcdaid
         }
     },
     components: {

src/pages/components/drawModal/AddAbility.vue

@@ -5,7 +5,7 @@
                 <el-form-item label="设计功能名称" prop="setAbName">
                     <el-select @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.value" />
+                        <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>
                 </el-form-item>
@@ -30,6 +30,7 @@
 <script>
 import { ref, onMounted, watch, toRefs, reactive } from 'vue'
 import flow from '@/api/flow/flow'
+import { ElMessage } from 'element-plus'
 export default {
     props: {
         addModal: {
@@ -48,6 +49,18 @@ export default {
             type: String,
             required: true
         },//iedtype
+        copyReload: {
+            type: Function,
+            required: true
+        },//刷新父组件属性方法
+        editOrAdd: {
+            type: Number,
+            required: true,
+        },//编辑或新增
+        editRow: {
+            type: Object,
+            required: true
+        },//表格整行数据结构id就为fcda_id
     },
     setup(props, { emit }) {
         let dialogVisible = ref(false)//模态框开关
@@ -71,6 +84,8 @@ export default {
                 { required: true, message: '请输入端子描述关键词', trigger: 'blur' },
             ]
         })//表单验证
+        let numState = ref(0)//0为新增，1为修改
+        let needEditRow = ref({})//需要修改的整个对象属性
         // 监听props.tabledata变化赋值
         watch(() => props.tableData, (newVal) => {
             fatherToSon.value = newVal
@@ -78,19 +93,45 @@ export default {
         // 监听props.modelids变化并赋值
         watch(() => props.modelIds, (newVal) => {
             needModel.value = newVal
-            console.log(needModel.value,'watch');
+            console.log(needModel.value, 'watch');
         }, { immediate: true })
         // 监听props.iedtypes变化并赋值
         watch(() => props.iedTypes, (newVal) => {
             needIedType.value = newVal
         })
+        // 监听props.editrow变化并赋值
+        watch(() => props.editRow, (newVal) => {
+            needEditRow.value = newVal
+        })
         // 初始化组件
         function reload() {
             dialogVisible.value = props.addModal//模态框状态
             fatherToSon.value = props.tableData//表格数据，制作为下拉菜单
             needModel.value = props.modelIds//模型id
             needIedType.value = props.iedTypes//iedtype
-            console.log(props,'子props');
+            numState.value = props.editOrAdd//判断修改还是新增，0新增，1修改
+            needEditRow.value = props.editRow//赋值给本组件需要修改对象
+            flow.getByModelAndIed({//给下拉菜单赋值
+                model_id: needModel.value - 0,
+                ied_type: needIedType.value
+            }).then(res => {
+                if (res.data !== null && res.data.length > 0) {
+                    options.value = res.data.map((item, index) => {
+                        return {
+                            label: item.func_name,
+                            id: item.id,
+                            value: item.func_name
+                        }
+                    })
+                } else {
+                    options.value = []
+                }
+            })
+            if (numState.value == 1) {
+                abilityFrom.value.setAbName = needEditRow.value.func_name
+                abilityFrom.value.setMemo = needEditRow.value.fcda_match_exp
+                abilityFrom.value.setSon = needEditRow.value.fcda_name
+            }
         }
         // 关闭模态框
         function closeModal() {
@@ -99,21 +140,66 @@ export default {
         }
         // 确认关闭模态框
         function sureClose() {
-            flow.saveModelAndIed({
-                model_id:needModel.value - 0,
-                ied_type:needIedType.value,
-                func_name:abilityFrom.value.setAbName,
-                fcda_name:abilityFrom.value.setSon,
-                fcda_match_exp:abilityFrom.value.setMemo,
-            }).then(res=>{
-                console.log(res,'添加功能');
-            })
-            dialogVisible.value = false
-            emit("addAback", dialogVisible.value)
+            if (numState.value == 0) {
+                flow.saveModelAndIed({
+                    model_id: needModel.value - 0,
+                    ied_type: needIedType.value,
+                    func_name: abilityFrom.value.setAbName,
+                    fcda_name: abilityFrom.value.setSon,
+                    fcda_match_exp: abilityFrom.value.setMemo,
+                }).then(res => {
+                    if (res.code == 0) {
+                        dialogVisible.value = false
+                        emit("addAback", dialogVisible.value)
+                        ElMessage({
+                            type: "success",
+                            message: "添加成功",
+                            duration: 2000
+                        })
+                        props.copyReload()
+                    } else {
+                        ElMessage({
+                            message: res.msg,
+                            type: "error"
+                        })
+                    }
+                })
+            } else {
+                flow.saveModelAndIed({
+                    model_id: needModel.value - 0,
+                    ied_type: needIedType.value,
+                    func_name: abilityFrom.value.setAbName,
+                    fcda_name: abilityFrom.value.setSon,
+                    fcda_match_exp: abilityFrom.value.setMemo,
+                    func_id: needEditRow.value.func_id - 0,
+                    fcda_id: needEditRow.value.id - 0,
+                }).then(res => {
+                    if (res.code == 0) {
+                        dialogVisible.value = false
+                        emit("addAback", dialogVisible.value)
+                        ElMessage({
+                            type: "success",
+                            message: "修改成功",
+                            duration: 2000
+                        })
+                        props.copyReload()
+                    } else {
+                        ElMessage({
+                            message: res.msg,
+                            type: "error"
+                        })
+                    }
+                })
+            }
         }
         // 设计功能名称change事件
         function abNameChange(e) {
-            abilityFrom.value.setAbName = e
+            if (e.label) {
+                abilityFrom.value.setAbName = e.label
+            } else {
+                abilityFrom.value.setAbName = e
+            }
+
         }
         onMounted(() => {
             reload()
@@ -133,6 +219,8 @@ export default {
             abNameChange,//设计功能名称change事件
             needModel,//需要的模型id
             needIedType,//需要的iedtype
+            numState,//0为新增，1为修改
+            needEditRow,//需要的整个对象属性
         }
     }
 }

src/pages/components/drawModal/LineDouble.vue

@@ -0,0 +1,344 @@
+<template>
+    <div>
+        <el-dialog v-model="dialogVisible" title="装置端子关系配置" width="60%" @close="handleClose">
+            <div class="masBox">
+                <div class="leftBox">
+                    <h1 style="
+                    border-bottom: 1px solid #7484AB;
+                    width: 73%;
+                    margin: 25px auto;
+                    padding-bottom: 10px;
+                    ">{{ startTxt }}</h1>
+                    <div style="margin-bottom: 10px;" v-for="(item, index) in curList" @click="setIndex(item, index)">
+                        <span :class="index == leftIndex ? 'result' : 'anther'">{{ index + 1 }}</span>
+                        <span :class="index == leftIndex ? 'results' : 'anthers'">{{ item.fcda_name }}</span>
+                    </div>
+                </div>
+                <div class="middleBox">
+                    <p class="background" :style="{ 'background-image': `url(${setBackground})`, 'color': setColor }">{{
+                        setGooseOrSv }}</p>
+                </div>
+                <div class="rightBox">
+                    <h1 style="
+                    border-bottom: 1px solid #7484AB;
+                    width: 73%;
+                    margin: 25px auto;
+                    padding-bottom: 10px;
+                    ">{{ endTxt }}</h1>
+                    <div>
+                        <div style="margin-bottom: 10px;" v-for="(item, index) in outList">
+                            <div
+                                style="width: 80%;display: flex;justify-content: space-around;align-items: center;margin: 0 auto;">
+                                <span style="display: block;border: 1px solid #2B5AE5;width: 42px;height: 42px;"
+                                    @click="toggleVisibility(index)">
+                                    <svg v-show="visibleItems.includes(item)" t="1704938867254" class="icon"
+                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4269"
+                                        width="40" height="40">
+                                        <path
+                                            d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
+                                            fill="#2B5AE5" p-id="4270"></path>
+                                    </svg>
+                                </span>
+                                <span style="display: block;" :class="getClass(index)">{{ item.fcda_name
+                                }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <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, watch, toRefs, computed } from 'vue';
+import flow from '@/api/flow/flow';
+import { ElMessage } from 'element-plus';
+export default {
+    props: {
+        ldModal: {
+            type: Boolean,
+            required: true,
+        },
+        startTarget: {
+            type: Object,
+            required: true
+        },//开始数据
+        endTarget: {
+            type: Object,
+            required: true,
+        },//结尾数据
+        modelId: {
+            type: String,
+            required: true,
+        },//模型id
+        numCase: {
+            type: Number,
+            required: true
+        },//用于判断goose还是sv，0为sv，1为goose
+        startText: {
+            type: String,
+            required: true
+        },//开始节点文本
+        endText: {
+            type: String,
+            required: true
+        },//结束文本
+    },
+    setup(props, { emit }) {
+        let dialogVisible = ref(false)//模态框开关
+        let starts = ref({})//开始装置数据
+        let ends = ref({})//结束装置数据
+        let modelIds = ref("")//本组件的模型id
+        let startTxt = ref("")//本组件开始文本
+        let endTxt = ref("")//本组件结束文本
+        let curList = ref([])//箭头开始list
+        let outList = ref([])//箭头结束list
+        let numStatus = ref(0)//判断goose还是sv
+        let visibleItems = ref([])//选择的数组
+        let fcdaIds = ref("")//需要的fcda_ids
+        let leftIndex = ref(0)//左侧选择的输出下标
+        let leftFcda = ref("")//左侧的fcdaid
+        watch(() => props.modelId, (newVal) => {
+            modelIds.value = newVal
+        })
+        watch(() => props.startText, (newVal) => {
+            startTxt.value = newVal
+        })
+        watch(() => props.endText, (newVal) => {
+            endTxt.value = newVal
+        })
+        watch(() => props.numCase, (newVal) => {
+            numStatus.value = newVal
+        })
+        // 初始化函数
+        function reload() {
+            dialogVisible.value = props.ldModal
+            modelIds.value = props.modelId
+            starts.value = props.startTarget
+            ends.value = props.endTarget
+            startTxt.value = props.startText
+            endTxt.value = props.endText
+            numStatus.value = props.numCase
+            flow.getModelAndIed({
+                model_id: modelIds.value - 0,
+                ied_type: starts.value.ied_type,
+            }).then(res => {
+                if(res.code == 0){
+                    curList.value = res.data
+                }else{
+                    ElMessage({
+                        message:res.msg,
+                        type:"error"
+                    })
+                }
+            })
+            flow.getModelAndIed({
+                model_id: modelIds.value - 0,
+                ied_type: ends.value.ied_type,
+            }).then(res => {
+                if(res.code == 0){
+                    outList.value = res.data
+                }else{
+                    ElMessage({
+                        message:res.msg,
+                        type:"error"
+                    })
+                }
+            })
+        }
+        // 关闭模态框
+        function closeModal() {
+            dialogVisible.value = false
+            emit("lineBack", dialogVisible.value)
+        }
+        // 确认关闭模态框
+        function sureClose() {
+            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 => {
+                console.log(res, '设置');
+            })
+            dialogVisible.value = false
+            emit("lineBack", dialogVisible.value)
+        }
+        // 返回goose还是sv
+        const setGooseOrSv = computed(() => {
+            if (numStatus.value == 0) {
+                return "SV"
+            } else if (numStatus.value == 1) {
+                return "GOOSE"
+            }
+        })
+        // 返回图片
+        const setBackground = computed(() => {
+            if (numStatus.value == 0) {
+                return require("../../../assets/image/sv_orange.png")
+            } else if (numStatus.value == 1) {
+                return require("../../../assets/image/goose_blue.png")
+            }
+        })
+        // 返回文字颜色
+        const setColor = computed(() => {
+            if (numStatus.value == 0) {
+                return 'orange'
+            } else if (numStatus.value == 1) {
+                return 'blue'
+            }
+        })
+        // 获取fcda_ids
+        function toggleVisibility(index) {
+            const item = outList.value[index];
+            const itemIndex = visibleItems.value.findIndex((i) => i === item);
+            if (itemIndex === -1) {
+                visibleItems.value.push(item);
+            } else {
+                visibleItems.value.splice(itemIndex, 1);
+            }
+            fcdaIds.value = visibleItems.value.map((item, index) => {
+                return item.id
+            }).join(",")
+        };
+        // 下标选择
+        function setIndex(row, num) {
+            leftFcda.value = row.id
+            leftIndex.value = num
+        }
+        // 设置多选span的class
+        function getClass(index) {
+            const item = outList.value[index];
+            return visibleItems.value.includes(item) ? 'results' : 'anthers';
+        }
+        onMounted(() => {
+            reload()
+        })
+        return {
+            dialogVisible,//模态框开关
+            reload,//初始化函数
+            starts,//开始节点数据
+            ends,//结束节点数据
+            handleClose: closeModal,//关闭模态框
+            cancels: closeModal,//关闭模态框
+            sureClick: sureClose,//确认关闭模态框
+            modelIds,//本组件的模型id
+            startTxt,//本组件开始文本
+            endTxt,//本组件结束文本
+            curList,//渲染list
+            setGooseOrSv,//判断显示goose还是sv
+            setBackground,//判断显示背景图
+            setColor,//判断文字颜色
+            visibleItems,//选择的数组
+            toggleVisibility,//模拟多选框方法
+            fcdaIds,//需要的fcda_ids
+            leftIndex,//左侧下标选择
+            setIndex,//下标选择函数
+            getClass,//设置多选span的class函数
+            leftFcda,//左侧单选的fcdaid
+            outList,//箭头指向端list
+        }
+    }
+}
+</script>
+
+<style scoped>
+.masBox {
+    width: 100%;
+    height: calc(100vh - 400px);
+    /* border: 1px solid red; */
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.leftBox {
+    width: 33%;
+    height: calc(100vh - 420px);
+    text-align: center;
+    background-color: #F7F8FB;
+    border: 2px dashed #A3ADE0;
+}
+
+.middleBox {
+    width: 32%;
+    height: calc(100vh - 420px);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.rightBox {
+    width: 33%;
+    height: calc(100vh - 420px);
+    text-align: center;
+    background-color: #EDF3FF;
+    border: 2px dashed #A3ADE0;
+}
+
+.result {
+    display: inline-block;
+    width: 11%;
+    height: 40px;
+    border: 1px solid blue;
+    text-align: center;
+    line-height: 40px;
+    background-color: #D9E6FE;
+    color: blue;
+    margin-right: 10px;
+}
+
+.anther {
+    display: inline-block;
+    width: 11%;
+    height: 40px;
+    border: 1px solid black;
+    text-align: center;
+    line-height: 40px;
+    background-color: #F5FAFE;
+    color: black;
+    margin-right: 10px;
+}
+
+.results {
+    display: inline-block;
+    width: 55%;
+    height: 40px;
+    border: 1px solid blue;
+    text-align: center;
+    line-height: 40px;
+    background-color: #D9E6FE;
+    color: blue;
+}
+
+.anthers {
+    display: inline-block;
+    width: 55%;
+    height: 40px;
+    border: 1px solid black;
+    text-align: center;
+    line-height: 40px;
+    background-color: #F5FAFE;
+    color: black;
+}
+
+.background {
+    width: 90%;
+    height: calc(100vh - 850px);
+    /* background-position: 100%; */
+    background-repeat: no-repeat;
+    background-size: 100%;
+    text-align: center;
+    background-position: 100% 50%;
+    line-height: calc(100vh - 850px);
+}
+</style>

src/pages/mission/components/StepMethod.vue

@@ -2,8 +2,8 @@
     <div>
         <div class="bigBox">
             <h1 style="margin: 0;padding: 0;">检测详情</h1>
-            <el-steps :active="activeStep" space="10px" finish-status="success" direction="vertical">
-                <el-step v-for="(step, index) in steps" :key="index" :title="step.title">
+            <el-steps  space="10px" finish-status="success" direction="vertical">
+                <el-step v-for="(step, index) in steps" :status="setStatus(step.status)" :key="index" :description="step.description" :title="step.title">
                     {{ step.content }}
                 </el-step>
             </el-steps>
@@ -30,7 +30,7 @@ export default {
             steps.value = newVal.map((item, index) => {
                 return {
                     title: item.step_name,
-                    description: item.state_name,
+                    description: item.state_msg,
                     status: item.state,
                     msg: item.state_msg
                 }
@@ -66,6 +66,8 @@ export default {
                 return 'success'
             } else if (num == 0) {
                 return "process"
+            }else if(num == 3){
+                return 'error'
             }
         }
         onMounted(() => {
@@ -78,6 +80,7 @@ export default {
             activeStep,
             steps,
             nextStep,
+            setStatus
         };
     },
 };

src/pages/system/components/InsideModule.vue

@@ -7,11 +7,14 @@
             <div style="display: flex;justify-content: flex-start;align-items: center;height: 93%;">
                 <div style="height: 100%;width: calc(100% - 0px);position: relative;">
                     <div class="setBox">
-                        <div style="width: 70%;display: flex;justify-content: flex-start;align-items: center;margin-left: 10px;">
-                            <div style="width: calc(50%);">
+                        <div
+                            style="width: 60%;display: flex;justify-content: flex-start;align-items: center;margin-left: 10px;">
+                            <div style="width: calc(40%);">
                                 <span style="font-size: 14px;color: #7484AB;">连接线:</span>
-                                <span class="sv" :style="{opacity:lineMenuColor=='orange'?1:0.4}" @click="svClick">SV</span>
-                                <span class="goose" :style="{opacity:lineMenuColor=='orange'?0.4:1}" @click="gooseClick">GOOSE</span>
+                                <span class="sv" :style="{ opacity: lineMenuColor == 'orange' ? 1 : 0.4 }"
+                                    @click="svClick">SV</span>
+                                <span class="goose" :style="{ opacity: lineMenuColor == 'orange' ? 0.4 : 1 }"
+                                    @click="gooseClick">GOOSE</span>
                             </div>
                             <div style="display: flex;width: calc(30%);">
                                 <span style="font-size: 14px;color: #7484AB;margin-left: 20px;">操作:</span>
@@ -26,14 +29,16 @@
                                     <span style="display: block;">删除</span>
                                 </div>
                             </div>
-                            <div style="display: flex;width: 20%;">
+                            <div style="display: flex;width: 30%;">
                                 <div>
                                     <span style="margin-left: 5px;">X:</span>
-                                    <el-input type="number" class="coord" v-model="fatX" @input="limitNumX" @change="xChange"></el-input>
+                                    <el-input type="number" class="coord" v-model="fatX" @input="limitNumX"
+                                        @change="xChange"></el-input>
                                 </div>
                                 <div>
                                     <span style="margin-left: 5px;">Y:</span>
-                                    <el-input type="number" class="coord" v-model="fatY" @input="limitNumY" @change="yChange"></el-input>
+                                    <el-input type="number" class="coord" v-model="fatY" @input="limitNumY"
+                                        @change="yChange"></el-input>
                                 </div>
                             </div>
                         </div>
@@ -43,12 +48,15 @@
                                 <el-button type="primary" @click="saveMap">保存</el-button>
                             </div>
                         </div>
+                        <div style="width: calc(15%);">
+                            <span style="font-size: 14px;color: #7484AB;">双击节点或连接线可配置属性</span>
+                        </div>
                     </div>
                     <div class="tableBox">
                         <!-- 建议使用这个 -->
                         <DrawDesigns ref="designsRef" :lineMenuColor="lineMenuColor" :needObj="needObj" :fatX="fatX"
                             :fatY="fatY" :nowLook="nowLook" :needId="needId" :needName="needName" :coolObj="coolObj"
-                            @backxy="backxy"></DrawDesigns>
+                            :svOrGoose="svOrGoose" @backxy="backxy"></DrawDesigns>
                     </div>
                 </div>
             </div>
@@ -99,6 +107,7 @@ export default {
         let needId = ref('')
         let needName = ref('')
         let coolObj = ref({})
+        let svOrGoose = ref(1)//0为sv，1为goose
         watch(() => props.tfType, (newVal) => {
             nowLook.value = newVal
         })
@@ -123,10 +132,12 @@ export default {
         }
         function svClick() {
             lineMenuColor.value = 'orange'
+            svOrGoose.value = 0
             designsRef.value.orange()//切换为sv
         }
         function gooseClick() {
             lineMenuColor.value = '#255CE7'
+            svOrGoose.value = 1
             designsRef.value.blue()//切换为goose
         }
         function delClick() {
@@ -185,6 +196,7 @@ export default {
             needId,
             needName,
             coolObj,
+            svOrGoose,//0为sv，1为goose
         }
     },
     components: {
@@ -242,7 +254,8 @@ export default {
     cursor: pointer;
     opacity: 0.4;
 }
-.sv:hover{
+
+.sv:hover {
     opacity: 1;
 }
 
@@ -256,7 +269,8 @@ export default {
     font-size: 16px;
     cursor: pointer;
 }
-.goose:hover{
+
+.goose:hover {
     opacity: 1;
 }
 
@@ -287,11 +301,13 @@ export default {
     padding: 0;
     margin: 0;
 }
+
 :deep(.lf-dnd-item) {
     width: 38%;
     float: left;
     margin: 5%;
 }
+
 :deep(.lf-dnd-shape) {
     display: none;
 }

src/pages/system/modalComp/AddNode.vue

@@ -120,6 +120,7 @@ export default {
                 ruleForm.value.flashName = props.needRow.vol_id
             })
             litLine.getAllLine({ pageno: 1, pagesize: 100 }).then(res => {
+                console.log(res,'接线方式');
                 moduleList.value = res.data
                 ruleForm.value.linkStyle = props.needRow.line_link_style
             })