修复完善模型设计相关联功能

src/api/cid/cid.js

@@ -41,6 +41,16 @@ function saveMap(data){
         }
     })
 }
+
+function getModelInfo(modelid){
+    return request({
+        url:`/admin/sysmodel/list?id=`+modelid,//保存画图
+        method:"get",
+        headers:{
+            'content-type':'application/x-www-form-urlencoded'
+        }
+    })
+}
 function findFile(data){
     return request({
         url:`/attachment/list`,
@@ -54,5 +64,6 @@ export default {
     portExcel,
     fileUpload,
     saveMap,
+    getModelInfo,
     findFile,
 }

src/pages/components/SideMenu.vue

@@ -91,10 +91,10 @@ p {
 
 .bigBox {
     width: 95px;
-    height: 605px;
+    height: auto;
     margin: 0 auto;
     margin-top: 25px;
-    overflow-y: auto;
+    overflow-y: hidden;
 }
 
 .menuBox {

src/pages/components/draw/DrawDesigns.vue

@@ -8,7 +8,8 @@
 
 <script>
 import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
-import LogicFlow from "@logicflow/core";
+import LogicFlow  from "@logicflow/core";
+import {PolylineEdge, PolylineEdgeModel} from "@logicflow/core";
 import cid from '@/api/cid/cid'
 import systemRow from '@/api/systemRow';
 import { ElMessage } from 'element-plus';
@@ -98,6 +99,21 @@ export default {
         })
         watch(() => props.coolObj, (newVal) => {
             copyObj.value = newVal
+            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)
+                lf.value.render(origiondata);
+                //let rl = lfXml2Json(res.data[0].relation_json.replace(/[\t|\r|\n]/gi,''))
+                // console.log(rl)
+                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'} })
+                    }                    
+                }
+            })
         })
         function blue() {
             lf.value.setTheme({
@@ -109,7 +125,7 @@ export default {
         }
         function orange() {
             lf.value.setTheme({
-                baseEdge: {
+                svEdge: {
                     stroke: 'orange',
                     strokeWidth: 2,
                 },
@@ -125,23 +141,18 @@ export default {
         }
         function saveLine() {
             // lf.value.getSnapshot()//保存为图片
+            console.log(JSON.stringify( lf.value.getGraphData()))
             const xml = lfJson2Xml(lf.value.getGraphData());
-            const data = lfXml2Json(lf.value.getGraphData())
-            if (props.nowLook == null) {
-                ElMessage({
-                    type: "error",
-                    message: "您还未选择左侧电压类型",
-                    duration: 2000
-                })
-            } else {
+            const data = JSON.stringify( lf.value.getGraphData())
+
                 cid.saveMap(
                     {
                         id: copyObj.value.id - 0,
-                        model_name: coolName.value,
-                        vol_id: coolObj.value.id - 0,
-                        line_link_style: coolId.value - 0,
-                        relation_json: xml,
-                        area_type: "116329",
+                        //model_name: coolName.value,
+                        //vol_id: coolObj.value.id - 0,
+                        //line_link_style: coolId.value - 0,
+                        relation_json: data,
+                        //area_type: "116329",
                     }
                 ).then(res => {
                     if (res.code == 0) {
@@ -150,10 +161,9 @@ export default {
                             message: "保存成功！",
                             duration: 2000,
                         })
-                        window.location.reload()
+                        // window.location.reload()
                     }
                 })
-            }
         }
         function cleanMap() {
             lf.value.clearData()
@@ -161,7 +171,7 @@ export default {
         function textColor() {
             if (lineColor.value == "#255CE7") {
                 lf.value.setTheme({
-                    baseEdge: {
+                    svEdge: {
                         stroke: "orange",
                         strokeWidth: 2,
                     },
@@ -185,9 +195,9 @@ export default {
             coolId.value = props.needId
             coolName.value = props.needName
             copyObj.value = props.coolObj
-            systemRow.getChildren({ code: "area_type" }).then(res => {
-                console.log(res, 'sss');
-            })
+            //systemRow.getChildren({ code: "area_type" }).then(res => {
+            //    console.log(res, 'sss');
+            //})
             systemRow.getChildren({ code: "ied_type" }).then(res => {
                 needMap.value = res.data.map(item => {
                     return {
@@ -212,7 +222,7 @@ export default {
                     //         thickness: 1,
                     //     },
                     // },//网格,
-                    grid: false,
+                    grid: true,
                     plugins: [DndPanel, SelectionSelect, Group, Menu, MiniMap, Snapshot],//全局加载的组件
                     keyboard: {
                         enabled: true
@@ -220,6 +230,34 @@ export default {
                     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
+                    }
+                }
+                lf.value.register({
+                    type:"svEdge",
+                    view: SvEdge,
+                    model: SvEdgeModel,
+                })
+                lf.value.register({
+                    type:"baseEdge",
+                    view: GooseEdge,
+                    model: GooseEdgeModel,
+                })
                 lf.value.setTheme({//设置画布
                     rect: {
                         fill: "#FFFFFF",
@@ -261,6 +299,10 @@ export default {
                         stroke: "#255CE7",
                         strokeWidth: 2,
                     },//连接线颜色
+                    svEdge: {
+                        stroke: "orange",
+                        strokeWidth: 1,
+                    },//连接线颜色
                     nodeText: {
                         color: "#255CE7",
                         overflowMode: "autoWrap",
@@ -268,9 +310,21 @@ export default {
                         fontSize: 12,
                     },//节点内文字样式
                 });
-                lf.value.on("edge:click", function (data, e, position) {
+                lf.value.on("edge:click", function (data, e, position) {                    
                     delId.value = data.data.id
                 })
+                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
@@ -289,9 +343,13 @@ export default {
                 lf.value.on('edge:click', 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.register(logicFlows)

src/pages/login/LoginNow.vue

@@ -82,7 +82,7 @@ export default {
                         message: '登陆成功！',
                         type: "success"
                     })
-                    windowEx.Size(1920, 1080)
+                    // windowEx.Size(1920, 1080)
 
                     // windowEx.Position('center')
                 } else {

src/pages/system/SystemPage.vue

@@ -12,19 +12,18 @@
             </div>
             <!-- 设置盒子 -->
             <div class="setBox">
-
                 <!-- 公共组件box -->
-                <div class="traBox">
-                    <LineTree v-if="selectIndex == 0 || ourNum == 0" @listBack="listBack" :selectIndex="selectIndex">
+                <div class="traBox" v-if="selectIndex == 0 || ourNum == 0">
+                    <LineTree  @listBack="listBack" @volBack="volBack" :selectIndex="selectIndex">
                     </LineTree>
-                    <ModuleTree v-if="selectIndex == 1 && ourNum == 1" :fuckList="fuckList" @mtBack="mtBack"></ModuleTree>
+                    <!--<ModuleTree v-if="selectIndex == 1 && ourNum == 1"  @mtBack="mtBack"></ModuleTree>-->
                 </div>
                 <!-- 切换box -->
-                <div class="changeBox">
-                    <LitLine v-if="selectIndex == 0"></LitLine>
+                <div class="changeBox" :style="selectIndex == 1 && ourNum == 1?'width:96%':''">
+                    <LitLine v-if="selectIndex == 0" :fuckList="fuckList"></LitLine>
                     <InsideModule v-if="selectIndex == 1 && ourNum == 1" :tfType="tfType" :insideNeed="insideNeed"
-                        :lineId="lineId" :setName="setName" :setId="setId"></InsideModule>
-                    <SetModule v-if="selectIndex == 1 && ourNum == 0" @backNum="backNum" :fuckList="fuckList"></SetModule>
+                        :lineId="lineId" :setName="setName" :setId="setId" @closeDraw="closeDraw"></InsideModule>
+                    <SetModule v-if="selectIndex == 1 && ourNum == 0" @backNum="backNum" :linkstyleid="lineId" :volId="volId" :fuckList="fuckList"></SetModule>
                 </div>
             </div>
         </div>
@@ -63,7 +62,8 @@ export default {
         let ourNum = ref(0)//决定编辑图像的数字，0为不显示1为显示
         let tfType = ref(null)//判断画图状态
         let insideNeed = ref({})//画图返回数据
-        let lineId = ref()//linetree返回id
+        let lineId = ref('')//linetree返回id
+        let volId = ref('')
         let setName = ref('')//setmodule返回name
         let setId = ref('')
         function tagChange(row, num) {//标签切换
@@ -80,6 +80,10 @@ export default {
             fuckList.value = data
             lineId.value = id
         }
+        function volBack(data, id) {
+            fuckList.value = data
+            volId.value = id
+        }
         function backNum(data, name, row) {
             ourNum.value = data
             setName.value = name
@@ -89,6 +93,10 @@ export default {
             insideNeed.value = row
             tfType.value = data
         }
+        function closeDraw(){
+            selectIndex.value = 1
+            ourNum.value = 0
+        }
         onMounted(() => {
 
         })
@@ -96,6 +104,8 @@ export default {
             tagChange,//标签选择
             tagList,//标签列表
             listBack,
+            volBack,
+            closeDraw,
             fuckList,
             selectIndex,
             ourNum,
@@ -104,6 +114,7 @@ export default {
             mtBack,
             insideNeed,
             lineId,
+            volId,
             setName,
             setId,
         }
@@ -151,7 +162,7 @@ export default {
 .traBox {
     width: 15%;
     height: calc(100vh - 150px);
-    /* border: 1px solid green; */
+    border: 1px solid #ededed; 
     background-color: #F7F8FB;
 }
 

src/pages/system/components/InsideModule.vue

@@ -2,19 +2,19 @@
     <div>
         <div class="bigBox">
             <div style="text-align: center;">
-                <h2 style="font-size: 20px;">装置关联模型管理</h2>
+                <h2 style="font-size: 20px;">{{ needName }}</h2>
             </div>
             <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;">
+                        <div style="width: 70%;display: flex;justify-content: flex-start;align-items: center;margin-left: 10px;">
                             <div style="width: calc(50%);">
-                                <span style="font-size: 20px;color: #7484AB;">连接线:</span>
-                                <span class="sv" @click="svClick">SV</span>
-                                <span class="goose" @click="gooseClick">GOOSE</span>
+                                <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>
                             </div>
                             <div style="display: flex;width: calc(30%);">
-                                <span style="font-size: 20px;color: #7484AB;margin-left: 20px;">操作:</span>
+                                <span style="font-size: 14px;color: #7484AB;margin-left: 20px;">操作:</span>
                                 <div class="cutPoint">
                                     <!-- <img style="width: 22px;height: 22px;display: block;"
                                         src="../../../assets/icon/iorn_pen.png" alt="">
@@ -28,18 +28,18 @@
                             </div>
                             <div style="display: flex;width: 20%;">
                                 <div>
-                                    <span>X:</span>
-                                    <el-input class="coord" v-model="fatX" @input="limitNumX" @change="xChange"></el-input>
+                                    <span style="margin-left: 5px;">X:</span>
+                                    <el-input type="number" class="coord" v-model="fatX" @input="limitNumX" @change="xChange"></el-input>
                                 </div>
                                 <div>
-                                    <span>Y:</span>
-                                    <el-input class="coord" v-model="fatY" @input="limitNumY" @change="yChange"></el-input>
+                                    <span style="margin-left: 5px;">Y:</span>
+                                    <el-input type="number" class="coord" v-model="fatY" @input="limitNumY" @change="yChange"></el-input>
                                 </div>
                             </div>
                         </div>
                         <div style="width: calc(30%);">
                             <div style="width: calc(100%);">
-                                <el-button type="primary" @click="cleanAll" plain>取消</el-button>
+                                <el-button type="primary" @click="cleanAll" plain>关闭</el-button>
                                 <el-button type="primary" @click="saveMap">保存</el-button>
                             </div>
                         </div>
@@ -122,12 +122,12 @@ export default {
             coolObj.value = props.setId//模型整个数据
         }
         function svClick() {
-            lineMenuColor.value = '#255CE7'
-            designsRef.value.blue()//切换为sv
+            lineMenuColor.value = 'orange'
+            designsRef.value.orange()//切换为sv
         }
         function gooseClick() {
-            lineMenuColor.value = 'orange'
-            designsRef.value.orange()//切换为goose
+            lineMenuColor.value = '#255CE7'
+            designsRef.value.blue()//切换为goose
         }
         function delClick() {
             designsRef.value.delLine()//删除连接线
@@ -137,6 +137,7 @@ export default {
         }
         function cleanAll() {
             designsRef.value.cleanMap()//清除画布
+            emit("closeDraw")
         }
         function limitNumX(e) {//强制转换为数字
             let types = e.replace(/\D/g, '');
@@ -198,7 +199,8 @@ export default {
 .bigBox {
     width: 100%;
     height: calc(100vh - 150px);
-    border: 1px solid blue;
+    border: 1px solid #cbcbda;
+    border-radius: 3px;
 }
 
 .tableBox {
@@ -230,14 +232,18 @@ export default {
 
 .sv {
     display: inline-block;
-    width: calc(100% - 82%);
+    width: 75px;
     height: 24px;
     text-align: center;
     line-height: 24px;
-    border-top: 2px solid #255CE7;
-    font-size: 20px;
-    margin-right: 5px;
+    border-top: 2px solid #FF7C03;
+    font-size: 16px;
+    margin-right: 20px;
     cursor: pointer;
+    opacity: 0.4;
+}
+.sv:hover{
+    opacity: 1;
 }
 
 .goose {
@@ -246,16 +252,19 @@ export default {
     height: 24px;
     text-align: center;
     line-height: 24px;
-    border-top: 2px solid #FF7C03;
-    font-size: 20px;
+    border-top: 2px solid #255CE7;
+    font-size: 16px;
     cursor: pointer;
 }
+.goose:hover{
+    opacity: 1;
+}
 
 .cutPoint {
     display: flex;
     justify-content: space-around;
     align-items: center;
-    font-size: 20px;
+    font-size: 14px;
     text-align: center;
     margin-right: 10px;
     cursor: pointer;
@@ -265,19 +274,24 @@ export default {
     display: flex;
     justify-content: space-around;
     align-items: center;
-    font-size: 20px;
+    font-size: 14px;
     text-align: center;
     cursor: pointer;
 }
 
 :deep(.lf-dndpanel) {
     height: 100%;
+    width: 220px;
     overflow-y: auto;
     background-color: #F7F8FB;
     padding: 0;
     margin: 0;
 }
-
+:deep(.lf-dnd-item) {
+    width: 38%;
+    float: left;
+    margin: 5%;
+}
 :deep(.lf-dnd-shape) {
     display: none;
 }
@@ -285,17 +299,21 @@ export default {
 :deep(.lf-dnd-text) {
     width: calc(100% - 8px);
     height: 42px;
-    border: 1px solid #255CE7;
+    border: 1px solid #d3daef;
     margin-left: 2px;
     color: #255CE7;
     text-align: center;
     line-height: 22px;
+    background: #e4dfdf;
+    border-radius: 3px;
+    padding: 3px;
 }
 
 .coord {
-    width: 50px;
+    width: 75px;
     height: 30px;
     background-color: transparent;
     border: none;
+    margin-left: 5px;
 }
 </style>

src/pages/system/components/LineTree.vue

@@ -1,14 +1,29 @@
 <template>
     <div>
         <div class="traBox">
-            <span style="line-height:20px;text-align:center;">
-                <img style="width: 20px;height: 20px;" src="../../../assets/icon/pice_set.png" alt="">
-                一次接线方式</span>
-            <el-tree v-if="vif" style="width: 120px;margin: 0 auto;background-color: #F7F8FB;" :data="lineData" :props="defaultProps"
+            <span style="line-height: 22px;height: 22px;float: left;width: 92%;margin: 4%;font-weight: bold;border-bottom: 1px solid #e4e2e2;">
+                <img style="width: 20px;height: 20px;margin-right: 5px;float: left;" src="../../../assets/icon/pice_set.png" alt="">
+                <span style="float: left;">接线方式</span>
+            </span>
+            <el-tree v-if="vif" node-key="id" style="float: left;width: 100%;margin: 0 auto;background-color: #F7F8FB;" :data="lineData" :props="defaultProps"
                 @node-click="handleNodeClick" />
-                <p v-else v-for="(item,index) in pList" :class="selectIndex == index?'result':'chooseP'" @click="pClick(item,index)">
+            <el-tree v-else node-key="id" style="float: left;width: 100%;margin: 0 auto;background-color: #F7F8FB;" :data="lineData" :props="defaultProps"
+                @node-click="handleModelNodeClick" ref="tree2">
+                <template #default="{node,data}">
+                    <span>
+                        <!-- 正常情况 -->
+                        <span v-if="data.datatype=='linkstyle'"><img style="width: 20px;height: 20px;margin-right: 5px;float: left;" src="../../../assets/icon/pice_set.png" alt=""/></span>
+                        <span>
+                            {{ node.label }}
+                        </span>
+                    </span>
+                </template>
+            </el-tree>
+            <!--
+            <p v-else v-for="(item,index) in pList" :class="selectIndex == index?'result':'chooseP'" @click="pClick(item,index)">
                     {{ item.name }}
-                </p>
+            </p>
+            -->
         </div>
     </div>
 </template>
@@ -49,33 +64,53 @@ export default {
             }
         }
         function searchFlashLel() {//拿到电压等级
-            if (props.selectIndex == 0) {
-                systemRow.getChildren({ code: "voltage_level" }).then(res => {
-                    lineData.value = res.data
-                    vif.value = true
-                })
-            } else {
-                litLine.getAllLine({ pageno: 1, pagesize: 10 }).then(res => {
-                    // lineData.value = res.data
-                    pList.value = res.data
+            systemRow.getChildren({ code: "voltage_level" }).then(res => {
+                vif.value = true            
+                if (props.selectIndex == 1) {
                     vif.value = false
-                })
-            }
-
+                    // 获取每个电压等级下的接线方式
+                    litLine.getAllLine({ pageno: 1, pagesize: 1000 }).then(res2 => {
+                        for(let i=0; i<res2.data.length; i++){
+                            const vol_level_id = res2.data[i].vol_level_id
+                            res.data.filter((item)=>{ 
+                                if (item.id==vol_level_id) {
+                                    res2.data[i]['datatype'] = 'linkstyle'
+                                    item['children']==null ?  item['children']=[res2.data[i]] : item['children'].push(res2.data[i])                                    
+                                    return item
+                                }
+                            })                            
+                        }
+                        lineData.value = res.data
+                    })
+                }else{
+                    lineData.value = res.data
+                }
+            })
         }
         function handleNodeClick(e) {
-            // litLine.getLineModel({ linkstyle_id: e.id - 0 }).then(res => {
-            //     console.log(res,'879465');
-            // })
-            litLine.getAllm({ pageno: 1, pagesize: 10, line_link_style: e.id - 0 }).then(res => {
-                console.log(res, 'asdasdasd');
+            litLine.getAllLine({ pageno: 1, pagesize: 20, vol_id: e.id - 0 }).then(res => {
+                // console.log(res, 'asdasdasd');
                 pushList.value = res.data
-                emit("listBack",pushList.value)
+                emit("listBack",res.data)
             })
         }
+        function handleModelNodeClick(e) {
+            // 模型管理       
+            if(e.datatype==='linkstyle') {
+                // 接线方式
+                litLine.getAllm({pageno: 1, pagesize: 20,line_link_style:e.id}).then(res => {
+                    emit("listBack",res.data,e.id)
+                })
+            }else{
+                // 电压等级
+                litLine.getAllm({pageno: 1, pagesize: 20,vol_id:e.id}).then(res => {
+                    emit("volBack",res.data,e.id)
+                })
+            }
+        }
         function pClick(row,num){
             selectIndex.value = num
-            litLine.getAllm({ pageno: 1, pagesize: 10, line_link_style: row.id - 0 }).then(res => {
+            litLine.getAllLine({ pageno: 1, pagesize: 10, vol_id: row.id - 0 }).then(res => {
                 pushList.value = res.data
                 emit("listBack",pushList.value,row.id)
             })
@@ -90,6 +125,7 @@ export default {
             defaultProps,
             searchFlashLel,
             handleNodeClick,
+            handleModelNodeClick,
             pushList,
             result,
             pList,
@@ -104,7 +140,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .traBox {
     text-align: center;
 }
@@ -115,4 +151,17 @@ export default {
 .chooseP{
     font-size: 12px;
 }
+.el-tree{
+    --el-tree-node-content-height:32px;
+    --el-tree-node-hover-bg-color: #b2b4ef80 !important;
+}
+.el-tree-node:hover{
+    background-color: #b2b4ef80 !important;
+    color: #fff;
+}
+.is-current {
+    background: #b2b4ef !important;
+    color: #fff !important;
+    font-weight: bold;
+}
 </style>

src/pages/system/components/LitLine.vue

@@ -2,13 +2,13 @@
     <div>
         <div class="bigBox">
             <div style="text-align: center;">
-                <h2>一次性接线管理</h2>
+                <h2>接线方式管理</h2>
             </div>
             <div>
                 <el-button type="primary" plain @click="createType">
                     <el-icon>
                         <Plus />
-                    </el-icon>添加新分类</el-button>
+                    </el-icon>添加新接线方式</el-button>
             </div>
             <div>
                 <el-table ref="multipleTableRef" :stripe="true" :data="lineList" style="width: 100%"
@@ -17,22 +17,19 @@
                     <el-table-column label="编号" prop="id" width="auto">
                         <!-- <template #default="scope">{{ scope.row.cr }}</template> -->
                     </el-table-column>
-                    <el-table-column label="线路名称" prop="name" width="auto" />
+                    <el-table-column label="电压等级" prop="vol_level_name" width="auto" />
+                    <el-table-column label="接线方式名称" prop="name" width="auto" />
                     <el-table-column width="auto" label="线路图" prop="pic">
                         <template #default="scope">
                             <span style="color: blue;border-bottom: 1px solid blue;cursor: pointer;" @click="lookPic(scope.row)">查看</span>
                         </template>
                     </el-table-column>
-                    <el-table-column label="接线方式" prop="name" width="auto" />
-                    <el-table-column label="上传时间" prop="ct" width="auto" show-overflow-tooltip />
+                    <el-table-column label="创建时间" prop="ct" width="auto" show-overflow-tooltip />
                     <el-table-column label="操作" width="320">
                         <template #default="scope">
                             <el-button link type="primary" size="small" @click="editLine(scope.row)"><el-icon>
                                     <EditPen />
                                 </el-icon>编辑</el-button>
-                            <el-button link type="primary" size="small" @click="lookLine(scope.row)"><el-icon>
-                                    <View />
-                                </el-icon>查看</el-button>
                             <el-button link type="danger" size="small" @click="delLine(scope.row)"><el-icon>
                                     <Delete />
                                 </el-icon>删除</el-button>
@@ -78,6 +75,9 @@ export default {
         let delModal = ref(false)
         let picModal = ref(false)
         let listNum = ref(0)//0为查看，1为编辑
+        watch(() => props.fuckList, (newVal) => {
+            lineList.value = newVal
+        })
         function search() {
             litLine.getAllLine({ pageno: 1, pagesize: 10 }).then(res => {
                 lineList.value = res.data

src/pages/system/components/ModuleTree.vue

@@ -8,11 +8,12 @@
                 </span>
             </div>
             <div class="treeBox">
+                <!--
                 <p :class="selectIndex == index ? 'result' : 'chooseP'" v-for="(item, index) in moduleData"
                     @click="pClick(item, index)">
                     {{ item.name }}
                 </p>
-                <!-- <el-tree class="treeData" :data="moduleData" :props="defaultProps" @node-click="handleNodeClick" /> -->
+                <el-tree class="treeData" :data="moduleData" :props="defaultProps" @node-click="handleNodeClick" />-->
             </div>
         </div>
     </div>
@@ -21,6 +22,7 @@
 <script>
 import { ref, onMounted, watch } from 'vue';
 import systemRow from '@/api/systemRow';
+import litLine from '@/api/litLine'
 export default {
     props: {
         fuckList: {
@@ -29,6 +31,11 @@ export default {
         }
     },
     setup(props, { emit }) {
+        let defaultProps = ref({
+            children: "children",
+            label: "name",
+            id: 'id'
+        })
         let moduleData = ref([])
         let result = props.fuckList
         let selectIndex = ref(null)
@@ -36,12 +43,12 @@ export default {
         // watch(() => props.fuckList, (newVal) => {
         //     moduleData.value = newVal
         // })
+        ready()
         function ready() {
             systemRow.getChildren({ code: "voltage_level" }).then(res => {
                 moduleData.value = res.data
                 console.log(moduleData.value,'value');
             })
-            // moduleData.value = result
         }
         function pClick(row, num) {
             selectIndex.value = num
@@ -65,7 +72,7 @@ export default {
 .bigBox {
     width: 100%;
     height: 100%;
-    text-align: center;
+    text-align: left;
 }
 
 .loadBox {

src/pages/system/components/SetModule.vue

@@ -12,12 +12,13 @@
             <div class='tableBox'>
                 <el-table :data="tableData" style="width: 100%" :stripe="true" @selection-change="tableChange">
                     <el-table-column type="selection" width="55" />
-                    <el-table-column fixed prop="model_name" label="模型名称" width="auto" />
+                    <el-table-column prop="line_link_style_name" label="接线方式" width="auto" />
+                    <el-table-column prop="model_name" label="模型名称" width="auto" />
                     <el-table-column prop="voltage_level_name" label="电压等级" width="auto" />
-                    <el-table-column prop="ied_types" label="模型类型" width="auto" />
+                    <el-table-column prop="area_type_name" label="间隔类型" width="auto" />
                     <el-table-column fixed="right" label="操作" width="180">
                         <template #default="scope">
-                            <el-button link type="primary" size="small" @click=""><el-icon>
+                            <el-button link type="primary" size="small" @click="edit(scope.row)"><el-icon>
                                     <EditPen />
                                 </el-icon>修改</el-button>
                             <el-button link type="primary" size="small" @click="goMap(scope.row)"><el-icon>
@@ -37,12 +38,21 @@
 <script>
 import { ref, onMounted, toRefs,watch } from 'vue';
 import { ElMessage } from 'element-plus';
+import litLine from '@/api/litLine'
 import AddNode from '../modalComp/AddNode.vue';
 export default {
     props: {
         fuckList: {
             type: Array,
             required: true
+        },
+        linkstyleid: {
+            type: String,
+            required: true
+        },
+        volId:{
+            type:String,
+            required: true
         }
     },
     setup(props, { emit }) {
@@ -53,7 +63,7 @@ export default {
                 type: "string",
             }
         ])
-        let nodeMos = ref(false)//添加间隔模态框
+        let nodeMos = ref(false) // 添加间隔模态框
         let kisNum = ref(0)
         let needRow = ref({})
         // let { goMap } = toRefs(props)
@@ -67,6 +77,11 @@ export default {
             console.log(e, 'table');
         }
         function addNode() {
+            needRow.value = {}
+            nodeMos.value = true
+        }
+        function edit(row) {
+            needRow.value = row
             nodeMos.value = true
         }
         function goMap(row) {
@@ -81,8 +96,14 @@ export default {
             needRow.value = row
             emit("backNum", kisNum.value,row.model_name,needRow.value)
         }
-        function addBack(data) {
-            nodeMos.value = data
+        function addBack(isshow) {
+            nodeMos.value = false
+            needRow.value = null
+            if(isshow){
+                litLine.getAllm({pageno: 1, pagesize: 20,line_link_style:props.linkstyleid,vol_id:props.volId||''}).then(res => {
+                    tableData.value = res.data
+                })
+            }
         }
         onMounted(() => {
             ready()
@@ -96,6 +117,7 @@ export default {
             addNode,
             addBack,
             needRow,
+            edit,
         }
     },
     components: {

src/pages/system/modalComp/AddNode.vue

@@ -1,28 +1,28 @@
 <template>
     <div>
-        <el-dialog v-model="dialogVisible" title="添加间隔" width="30%" @close="closes">
+        <el-dialog v-model="dialogVisible" title="添加模型定义" width="30%" @close="closes">
             <!--  -->
             <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                 status-icon>
                 <el-form-item label="模型名称" prop="name">
                     <el-input v-model="ruleForm.name"></el-input>
                 </el-form-item>
-                <el-form-item label="电压等级">
-                    <el-select @change="flashCase" v-model="ruleForm.flashName" placeholder="请选择间隔">
+                <el-form-item label="电压等级" prop="flashName">
+                    <el-select @change="flashCase" v-model="ruleForm.flashName" placeholder="请选择电压等级">
                         <template v-for="(item, index) in flashLel">
                             <el-option :label="item.name" :value="item.id" />
                         </template>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="接线方式">
-                    <el-select @change="moduleChange" v-model="ruleForm.linkStyle" placeholder="请选择间隔">
+                <el-form-item label="接线方式" prop="linkStyle">
+                    <el-select @change="moduleChange" v-model="ruleForm.linkStyle" placeholder="请选择接线方式">
                         <template v-for="(item, index) in moduleList">
-                            <el-option :label="item.name" :value="item.id" />
+                            <el-option v-if="ruleForm.flashName=='' || ruleForm.flashName==item.vol_level_id" :label="item.name" :value="item.id" />
                         </template>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="模型类型">
-                    <el-select @change="flashChange" v-model="ruleForm.moduleId" placeholder="请选择内置模型">
+                <el-form-item label="间隔类型" prop="moduleId">
+                    <el-select @change="flashChange" v-model="ruleForm.moduleId" placeholder="请选择间隔类型">
                         <template v-for="(item, index) in selectList">
                             <el-option :label="item.name" :value="item.id" />
                         </template>
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { ref, onMounted, toRefs, reactive, watch } from 'vue';
+import { ref,unref, onMounted, toRefs, reactive, watch } from 'vue';
 import systemRow from '@/api/systemRow';
 import litLine from '@/api/litLine';
 import cid from '@/api/cid/cid';
@@ -66,6 +66,7 @@ export default {
         let dialogVisible = ref(false)//模态框显示
         let result = props.nodeMos
         let ruleForm = ref({
+            id: 0,
             name: "",//模型名称
             linkStyle: "",//接线方式
             moduleId: '',//模型类型
@@ -79,29 +80,49 @@ export default {
             name: [
                 { required: true, message: '请输入名称', trigger: 'blur' },
             ],
-            type: [
+            flashName: [
+                {
+                    required: true, message: '请选择电压等级', trigger: 'blur'
+                }
+            ],
+            linkStyle: [
+                {
+                    required: true, message: '请选择接线方式', trigger: 'blur'
+                }
+            ],
+            moduleId: [
                 {
-                    required: true, message: '请输入类型', trigger: 'blur'
+                    required: true, message: '请选择间隔类型', trigger: 'blur'
                 }
             ]
         })
         watch(() => props.needRow, (newVal) => {
             coolRow.value = newVal
+            ruleForm.value.name = coolRow.value.model_name||''
+            ruleForm.value.linkStyle = coolRow.value.line_link_style||''
+            ruleForm.value.flashName = coolRow.value.vol_id||''
+            ruleForm.value.moduleId = coolRow.value.area_type||''
+            ruleForm.value.id = coolRow.value.id||0
+            dialogVisible.value = true
         })
         function lineList() {
             dialogVisible.value = result
         }
         function searchFlashLel() {
+            ruleForm.value.id = props.needRow.id||0
+            ruleForm.value.name = props.needRow.model_name||''
             systemRow.getChildren({ code: "area_type" }).then(res => {
                 selectList.value = res.data
+                ruleForm.value.moduleId = props.needRow.area_type
             })
             systemRow.getChildren({ code: "voltage_level" }).then(res => {
                 flashLel.value = res.data
+                ruleForm.value.flashName = props.needRow.vol_id
             })
-            litLine.getAllLine({ pageno: 1, pagesize: 10 }).then(res => {
+            litLine.getAllLine({ pageno: 1, pagesize: 100 }).then(res => {
                 moduleList.value = res.data
+                ruleForm.value.linkStyle = props.needRow.line_link_style
             })
-            coolRow.value = props.needRow
         }
         function flashChange(e) {
             ruleForm.value.moduleId = e
@@ -114,10 +135,14 @@ export default {
         }
         function getBack() {
             dialogVisible.value = false
-            emit("addBack", dialogVisible.value)
+            emit("addBack", false)
         }
         function getSure() {
+            if(ruleForm.value.name=='' || ruleForm.value.flashName=='' || ruleForm.value.linkStyle=='' || ruleForm.value.moduleId==''){
+                return
+            }
             cid.saveMap({
+                id: ruleForm.value.id,
                 model_name: ruleForm.value.name,
                 vol_id: ruleForm.value.flashName - 0,
                 line_link_style: ruleForm.value.linkStyle - 0,
@@ -130,7 +155,13 @@ export default {
                         duration:2000
                     })
                     dialogVisible.value = false
-                    emit("addBack", dialogVisible.value)
+                    emit("addBack", true)
+                }else{
+                    ElMessage({
+                        type:"error",
+                        message:res.msg,
+                        duration:2000
+                    })
                 }
             })
         }

src/pages/system/modalComp/DelLine.vue

@@ -2,9 +2,7 @@
     <div>
         <div>
             <el-dialog v-model="dialogVisible" title="删除信息" width="30%" @close="closes">
-                <h2><el-icon style="color: red;">
-                        <WarningFilled />
-                    </el-icon>确定删除该信息？</h2>
+                <h3 style="text-align: center;">确定删除该信息？</h3>
                 <template #footer>
                     <span class="dialog-footer">
                         <el-button @click="cancels">取消</el-button>

src/utils/request.js

@@ -6,7 +6,7 @@ import router from '@/router'
 // 请求url
 const service = axios.create({
     // baseURL: window.STATIC_CONFIG.proxyUrl, // url = base url + request url
-    baseURL: "http://8.142.173.95:9527/api",
+    baseURL: "http://127.0.0.1:9527/api",
     timeout: 15000, // request timeout
     headers:{
         "Content-Type":"application/x-www-form-urlencoded"