ソースを参照

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

# Conflicts:
#	src/pages/components/draw/DrawDesigns.vue
liling 1 年間 前
コミット
9239e1a18d

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

@@ -11,6 +11,7 @@
             :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>
 
@@ -23,6 +24,7 @@ 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,
@@ -118,6 +120,8 @@ export default {
         let nodeid = ref("")//节点的id
         let fun = ref()//储存父节点传来的函数
         let funOne = ref()//储存父节点传来的函数
+        let groupType = ref(false)//GroupModelAdd.vue组件显示与否
+        let groupNodeId=ref('') //当前设置ied_type的分组节点ID
         watch(() => props.lineMenuColor, (newVal) => {
             copyColor.value = newVal
         })
@@ -576,14 +580,15 @@ export default {
                     //当将节点托入画布后触发事件
                     lf.value.on('node:dnd-add',function (nodedata){
                         if(nodedata.data.type=='my-group'){
-                            let nodeid=nodedata.data.id
                             // 添加的是分组节点,需要打开一个窗口让用户设置该节点的ied_type并保存到properties中
                             let ied_type="TMP"
-                            const g=lf.value.getNodeModelById(nodeid);
+                            const g=lf.value.getNodeModelById(nodedata.data.id);
                             g.setProperties({
                                 ied_type: ied_type,
-                                id:'0'  //分组的装置类型id固定为0
+                                id:'-99'  //分组的装置类型id固定为-99
                             });
+                            groupNodeId.value = nodedata.data.id
+                            groupType.value = true
                         }
                     })
                     lf.value.on("node:resize",function(data){
@@ -598,6 +603,23 @@ export default {
         function lineBack(data) {
             ldModal.value = data
         }
+        // GroupModelAdd.vue返回状态
+        function groupBack(data){
+            console.log(data)
+            groupType.value = data.show
+            //设置窗口关闭时
+            if(!data.show && data.ied_type!=''){
+                //更新分组的装置类型编码属性ied_type
+                const g=lf.value.getNodeModelById(data.groupNodeId);
+                console.log(g)
+                g.setProperties({
+                    ied_type: data.ied_type,
+                });
+            }else{
+                //未设置装置编码,自动删除
+                lf.value.deleteNode(data.groupNodeId)
+            }
+        }
         onBeforeUnmount(() => {
             // lf.value.remove()
             // coolObj.value = {}
@@ -641,11 +663,15 @@ export default {
             fun,//储存父节点传来的函数
             listMap,//组件初始化
             funOne,//储存父节点传来的函数
+            groupType,//GroupModelAdd.vue组件显示与否
+            groupNodeId,
+            groupBack,// GroupModelAdd.vue返回状态
         }
     },
     components: {
         AbilityModal,//功能模态框
         LineDouble,//连接线模态框
+        GroupModelAdd,//分组专属模态框
     }
 }
 </script>

+ 104 - 0
src/pages/components/drawModal/GroupModelAdd.vue

@@ -0,0 +1,104 @@
+<template>
+    <div>
+        <el-dialog v-model="dialogVisible" title="组合装置类型编码设置" width="30%" @close="handleClose"
+            :close-on-click-modal="false">
+            <span>组合装置编码:</span>
+            <el-input v-model="iedValue" :maxlength="5" :show-word-limit="true" style="width: 300px;"
+                placeholder="请输入编码,仅支持大写英文字母"></el-input>
+            <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, onBeforeUnmount } from 'vue';
+import flow from '@/api/flow/flow';
+import { ElMessage, ElLoading } from 'element-plus';
+export default {
+    props: {
+        groupType: {
+            type: Boolean,
+            required: true,
+        },//模态框显示 
+        modelId: {
+            type: String,
+            required: true,
+        },//DrawDesigns.vue传过来的模型id
+        groupNodeId:{
+            type:String,
+            required: true,
+        }//分组装置节点ID,确定时需要回传回画布界面
+    },
+    setup(props, { emit }) {
+        let dialogVisible = ref(false)//模态框打开/关闭状态
+        let iedValue = ref('')//输入框value值
+        let modelType = ref("")//本组件的模型id
+        // 初始化组件
+        function reload() {
+            dialogVisible.value = props.groupType
+            modelType.value = props.modelId
+        }
+        // 关闭模态框
+        function modalClose() {
+            dialogVisible.value = false
+            emit("groupBack", {"show":dialogVisible.value,'ied_type':'',"groupNodeId":props.groupNodeId})
+        }
+        // 确认按钮
+        function modalSure() {
+            const reg= /^[A-Za-z]+$/;
+            const v = iedValue.value.replace(/ /g,'')
+            if (v == '' || !reg.test(v)) {
+                ElMessage({
+                    message: "请输入正确的组合装置编码:仅支持纯英文字母",
+                    type: "error"
+                })
+            } else {
+                //仅更新本地编码,此处不需要提交到后台
+                dialogVisible.value = false
+                emit("groupBack", {"show":dialogVisible.value,"ied_type":v.toUpperCase(),"groupNodeId":props.groupNodeId})
+                /*
+                flow.updateIedType({
+                    id: modelType.value - 0,
+                    old_iedtype: "",
+                    new_iedtype: iedValue.value
+                }).then(res => {
+                    if (res.code == 0) {
+                        ElMessage({
+                            message: "添加成功",
+                            type: "success"
+                        })
+                        dialogVisible.value = false
+                        emit("groupBack", dialogVisible.value)
+                    } else {
+                        ElMessage({
+                            message: res.msg,
+                            type: "error"
+                        })
+                    }
+                })
+                */
+            }
+        }
+        //将输入的编码内容转为大写
+        onMounted(() => {
+            reload()
+        })
+        return {
+            reload,//初始化组件函数
+            handleClose: modalClose,//关闭模态框函数替代关闭函数
+            cancels: modalClose,//关闭模态框函数替代关闭函数
+            sureClick: modalSure,//确认按钮函数替代确认函数
+            iedValue,//输入框value值
+            dialogVisible,//模态框状态
+            modelType,//本组件的模型id
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>