7

public/index.html

@@ -22,6 +22,7 @@
   <div id="app"></div>
   <!-- built files will be auto injected -->
   <script src="https://unpkg.com/bpmn-js@6.0.2/dist/bpmn-viewer.development.js"></script>
+  <script src="./leader-line.min.js"></script>
 </body>
 
 </html>

src/api/cid/cid.js

@@ -1,11 +1,50 @@
 import request from "@/utils/request"
-function getAll(data){
+// IED为装置
+function getAll(data) {
     return request({
-        url:`/admin/sysmodel/list`,
-        method:"get",
-        params:data,
+        url: `/screen/scd/ied/relation`,
+        method: "get",
+        params: data,
     })
 }
-export default{
+function getIntent(data) {
+    return request({
+        url: `/screen/scd/ied/network/info`,//获取ied网络配置信息
+        method: "get",
+        params: data,
+    })
+}
+function portExcel(data) {
+    return request({
+        url: `expTableData`,//导出为excel
+        method: "post",
+        data,
+    })
+}
+function fileUpload(data) {
+    return request({
+        url: `/uploadfile`,//上传文件
+        method: "post",
+        data,
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+    })
+}
+function saveMap(data){
+    return request({
+        url:`/admin/sysmodel/save`,
+        method:"post",
+        data,
+        headers:{
+            'content-type':'application/x-www-form-urlencoded'
+        }
+    })
+}
+export default {
     getAll,
+    getIntent,
+    portExcel,
+    fileUpload,
+    saveMap
 }

src/api/litLine.js

@@ -6,6 +6,13 @@ function getAllLine(data){//查询接线方式
         params:data
     })
 }
+function getAllm(data){
+    return request({
+        url:`/admin/sysmodel/list`,
+        method:"get",
+        params:data
+    })
+}
 function getLineModel(data){//获取接线方式下的模型
     return request({
         url:`/admin/linkstyle-model/list`,
@@ -20,6 +27,16 @@ function addLine(data){
         data
     })
 }
+function addModule(data){
+    return request({
+        url:`/admin/linkstyle-model/save`,//添加接线方式模型
+        method:"post",
+        data,
+        headers:{
+            'content-type':'application/x-www-form-urlencoded'
+        }
+    })
+}
 function delLine(data) {
     return request({
         url:`/admin/linkstyle/delete`,
@@ -31,5 +48,7 @@ export default{
     getAllLine,
     getLineModel,
     addLine,
-    delLine
+    delLine,
+    getAllm,
+    addModule,
 }

src/compoments/IntAndScd.vue

@@ -5,7 +5,7 @@
                 <span :class="selectsNum == index ? 'result' : 'nowSpan'" @click="spanClick(item, index)">{{ item.name
                 }}</span>
             </template>
-            <router-link to="/home/mission">测试</router-link>
+            <!-- <router-link to="/home/mission">测试</router-link> -->
         </div>
     </div>
 </template>

src/pages/components/draw/DrawDesigns.vue

@@ -7,8 +7,11 @@
 </template>
 
 <script>
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
 import LogicFlow from "@logicflow/core";
+import cid from '@/api/cid/cid'
+import systemRow from '@/api/systemRow';
+import { ElMessage } from 'element-plus';
 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";
@@ -25,6 +28,22 @@ export default {
         fatY: {
             type: Number,
             required: true
+        },
+        nowLook: {
+            type: null || Number,
+            required: true
+        },
+        needObj: {
+            type: Object,
+            required: true
+        },
+        needId: {
+            type: Number || String,
+            required: true
+        },
+        needName: {
+            type: String,
+            required: true
         }
     },
     setup(props, { emit }) {
@@ -40,6 +59,10 @@ export default {
         let copyId = ref('')
         let setX = ref(0)
         let setY = ref(0)
+        let needMap = ref([])
+        let coolId = ref('')
+        let coolObj = ref({})
+        let coolName = ref('')
         watch(() => props.lineMenuColor, (newVal) => {
             copyColor.value = newVal
         })
@@ -48,7 +71,6 @@ export default {
                 setX.value = 0
             } else {
                 setX.value = newVal
-                // lf.value.graphModel.moveNode(copyId.value, setX.value - 0, setY.value - 0, true);
             }
         })
         watch(() => props.fatY, (newVal) => {
@@ -56,9 +78,17 @@ export default {
                 setY.value = 0
             } else {
                 setY.value = newVal
-                // lf.value.graphModel.moveNode(copyId.value, setX.value - 0, setY.value - 0, true);
             }
         })
+        watch(() => props.needObj, (newVal) => {
+            coolObj.value = newVal
+        })
+        watch(() => props.needId, (newVal) => {
+            coolId.value = newVal
+        })
+        watch(() => props.needName, (newVal) => {
+            coolName.value = newVal
+        })
         function blue() {
             lf.value.setTheme({
                 baseEdge: {
@@ -84,11 +114,30 @@ export default {
             }
         }
         function saveLine() {
-            lf.value.getSnapshot()//保存为图片
+            // lf.value.getSnapshot()//保存为图片
             const xml = lfJson2Xml(lf.value.getGraphData());
             const data = lfXml2Json(lf.value.getGraphData())
-            console.log(xml, 'xml');
-            console.log(data, 'json');
+            console.log(xml, 's');
+            if (props.nowLook == null) {
+                ElMessage({
+                    type: "error",
+                    message: "您还未选择左侧电压类型",
+                    duration: 2000
+                })
+            } else {
+                cid.saveMap(
+                    {
+                        id: coolObj.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",
+                    }
+                ).then(res => {
+                    console.log(res, 'saveMap');
+                })
+            }
         }
         function cleanMap() {
             lf.value.clearData()
@@ -116,171 +165,126 @@ export default {
             lf.value.graphModel.moveNode2Coordinate(copyId.value, setX.value - 0, setY.value - 0, true);
         }
         onMounted(() => {
-            lf.value = new LogicFlow({
-                // 通过选项指定了渲染的容器和需要显示网格
-                container: container.value,//需要显示画布的容器ref
-                // grid: {
-                //     size: 10,
-                //     visible: false,
-                //     type: "mesh",
-                //     config: {
-                //         color: "#ababab",
-                //         thickness: 1,
-                //     },
-                // },//网格,
-                grid: false,
-                plugins: [DndPanel, SelectionSelect, Group, Menu, MiniMap, Snapshot],//全局加载的组件
-                keyboard: {
-                    enabled: true
-                },
-                snapline: true,//辅助线
-                edgeTextDraggable: true,//连接线文本可以拖拽
+            coolObj.value = props.needObj
+            coolId.value = props.needId
+            coolName.value = props.needName
+            systemRow.getChildren({ code: "area_type" }).then(res => {
+                console.log(res, 'sss');
             })
-            const patternItems = [
-                {
-                    type: 'rect',
-                    text: '保护（高压侧）',
-                    label: '保护（高压侧）',
-                    icon: '',
-                },
-                {
-                    type: 'rect',
-                    text: "合并单元（高压侧）",
-                    label: '合并单元（高压侧）',
-                    icon: '',
-                },
-                {
-                    type: 'rect',
-                    text: '保护（低压侧）',
-                    label: '保护（低压侧）',
-                    icon: '',
-                },
-                {
-                    type: "rect",
-                    text: "合并单元（低压侧）",
-                    label: "合并单元（低压侧）",
-                    icon: ""
-                },
-                {
-                    type: "rect",
-                    text: "本体测控",
-                    label: "本体测控",
-                    icon: ""
-                },
-                {
-                    type: "rect",
-                    text: "母线保护",
-                    label: "母线保护",
-                    icon: ""
-                },
-                {
-                    type: "rect",
-                    text: "高压侧测控",
-                    label: "高压侧测控",
-                    icon: ""
-                },
-                {
-                    type: 'rect',
-                    text: "母联智能终端",
-                    label: "母联智能终端",
-                    icon: ""
-                },
-                {
-                    type: 'rect',
-                    text: "智能终端（高压侧）",
-                    label: "智能终端（高压侧）",
-                    icon: "",
-                },
-                {
-                    type: 'rect',
-                    text: "智能终端（低压侧）",
-                    label: "智能终端（低压侧）",
-                    icon: "",
-                },
-                {
-                    type: 'rect',
-                    text: "母线合并单元",
-                    label: "母线合并单元",
-                    icon: "",
-                }
-            ]//左侧显示数组
-            lf.value.setTheme({//设置画布
-                rect: {
-                    fill: "#FFFFFF",
-                    stroke: "#255CE7",
-                    strokeWidth: 2,
-                },//放置的元素
-                snapline: {
-                    stroke: 'black', // 对齐线颜色
-                    strokeWidth: 1, // 对齐线宽度
-                },
-                edgeText: {
-                    textWidth: 100,
-                    overflowMode: "default",
-                    fontSize: 18,
-                    background: {
-                        fill: "#FFFFFF",
+            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
+                        }
+                    }
+                })
+                lf.value = new LogicFlow({
+                    // 通过选项指定了渲染的容器和需要显示网格
+                    container: container.value,//需要显示画布的容器ref
+                    // grid: {
+                    //     size: 10,
+                    //     visible: false,
+                    //     type: "mesh",
+                    //     config: {
+                    //         color: "#ababab",
+                    //         thickness: 1,
+                    //     },
+                    // },//网格,
+                    grid: false,
+                    plugins: [DndPanel, SelectionSelect, Group, Menu, MiniMap, Snapshot],//全局加载的组件
+                    keyboard: {
+                        enabled: true
                     },
-                },//连接线w文字样式
-                outline: {
-                    fill: "transparent",
-                    stroke: "#949494",
-                    strokeDasharray: "3,3",
-                    hover: {
-                        stroke: "#949494",
+                    snapline: true,//辅助线
+                    edgeTextDraggable: true,//连接线文本可以拖拽
+                })
+                lf.value.setTheme({//设置画布
+                    rect: {
+                        fill: "#FFFFFF",
+                        stroke: "#255CE7",
+                        strokeWidth: 2,
+                    },//放置的元素
+                    snapline: {
+                        stroke: 'black', // 对齐线颜色
+                        strokeWidth: 1, // 对齐线宽度
                     },
-                },
-                anchor: {
-                    stroke: "#000000",
-                    fill: "#FFFFFF",
-                    r: 4,
-                    hover: {
-                        fill: "#949494",
-                        fillOpacity: 0.5,
+                    edgeText: {
+                        textWidth: 100,
+                        overflowMode: "default",
+                        fontSize: 18,
+                        background: {
+                            fill: "#FFFFFF",
+                        },
+                    },//连接线w文字样式
+                    outline: {
+                        fill: "transparent",
                         stroke: "#949494",
-                        r: 10,
+                        strokeDasharray: "3,3",
+                        hover: {
+                            stroke: "#949494",
+                        },
                     },
-                },//锚点样式
-                baseEdge: {
-                    stroke: "#255CE7",
-                    strokeWidth: 2,
-                },//连接线颜色
-                nodeText: {
-                    color: "#255CE7",
-                    overflowMode: "autoWrap",
-                    lineHeight: 1.2,
-                    fontSize: 12,
-                },//节点内文字样式
-            });
-            lf.value.on("edge:click", function (data, e, position) {
-                delId.value = data.data.id
-            })
-            lf.value.on('node:click', function (data, e, position) {//传送坐标轴参数到父组件
-                copyId.value = data.data.id
-                nodeId.value = data.data.id
-                setX.value = data.data.x
-                setY.value = data.data.y
-                console.log(data.data, 'click');
-                emit("backxy", setX.value, setY.value)
-            })
-            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) {//解决点击连接线问题
-                if (copyColor.value == '#255CE7') {
-                    blue()
-                }
-                if (copyColor.value == 'orange') {
-                    orange()
-                }
+                    anchor: {
+                        stroke: "#000000",
+                        fill: "#FFFFFF",
+                        r: 4,
+                        hover: {
+                            fill: "#949494",
+                            fillOpacity: 0.5,
+                            stroke: "#949494",
+                            r: 10,
+                        },
+                    },//锚点样式
+                    baseEdge: {
+                        stroke: "#255CE7",
+                        strokeWidth: 2,
+                    },//连接线颜色
+                    nodeText: {
+                        color: "#255CE7",
+                        overflowMode: "autoWrap",
+                        lineHeight: 1.2,
+                        fontSize: 12,
+                    },//节点内文字样式
+                });
+                lf.value.on("edge:click", function (data, e, position) {
+                    delId.value = data.data.id
+                })
+                lf.value.on('node:click', function (data, e, position) {//传送坐标轴参数到父组件
+                    copyId.value = data.data.id
+                    nodeId.value = data.data.id
+                    setX.value = data.data.x
+                    setY.value = data.data.y
+                    console.log(data.data, 'click');
+                    emit("backxy", setX.value, setY.value)
+                })
+                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) {//解决点击连接线问题
+                    if (copyColor.value == '#255CE7') {
+                        blue()
+                    }
+                    if (copyColor.value == 'orange') {
+                        orange()
+                    }
+                })
+                // lf.value.register(logicFlows)
+                lf.value.extension.dndPanel.setPatternItems(needMap.value);
+                lf.value.render();
             })
-            // lf.value.register(logicFlows)
-            lf.value.extension.dndPanel.setPatternItems(patternItems);
-            lf.value.render();
+        })
+        onBeforeUnmount(() => {
+            // lf.value.remove()
+            coolObj.value = {}
         })
         return {
             container,
@@ -298,6 +302,9 @@ export default {
             setX,
             setY,
             momal,
+            needMap,
+            coolId,
+            coolName,
         }
     },
 }

src/pages/mission/MissionVue.vue

@@ -7,7 +7,7 @@
                     <span :class="btnSelect == index ? 'result' : 'nowMission'" @click="misChange(item, index)">{{ item.name
                     }}</span>
                 </template>
-                <router-link to="/home/int">测试</router-link>
+                <!-- <router-link to="/home/int">测试</router-link> -->
             </div>
             <!-- 功能盒子 -->
             <div class="settingBox">

src/pages/netStructPicture/components/CidTree.vue

@@ -1,29 +1,153 @@
 <template>
     <div>
-
+        <div class="bigBox">
+            <div class="tagBox">
+                <div style="display: flex;justify-content: flex-start;align-items: center;">
+                    <div>
+                        <img style="width: 20px;height: 20px;" src="../../../assets/icon/HardDrives.png" alt="">
+                    </div>
+                    <div>
+                        <h3>装置列表</h3>
+                    </div>
+                </div>
+                <p :class="tagChoose == index ? 'result' : 'tagP'" v-for="(item, index) in tagList"
+                    @click="tagClick(item, index)">
+                    {{ item.desc }}
+                </p>
+            </div>
+            <div class="setting">
+                <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
-import { ref,onMounted,toRefs } from 'vue';
+import { ref, onMounted, toRefs } from 'vue';
 import cid from "@/api/cid/cid"
 export default {
-    props:{
+    props: {
 
     },
-    setup () {
-        let TreeList = ref([])
-
-        onMounted(()=>{
-            cid.getAll({pageno:1,pagesize:10}).then(res=>{
-                console.log(res,'555');
+    setup(props,{emit}) {
+        let tagList = ref([])
+        let tagChoose = ref(0)
+        let treeData = ref([
+            {
+                label: "通信参数部分",
+                children: [
+                    {
+                        label: "站控层通信参数"
+                    },
+                    {
+                        label: "GOOSE通信参数"
+                    },
+                    {
+                        label: "SV通信参数"
+                    }
+                ]
+            }, {
+                label: "测点信息部分",
+                children: [
+                    {
+                        label: "信息部分-1"
+                    }
+                ]
+            }, {
+                label: "回路配置",
+                children: [
+                    {
+                        label: "回路配置-1"
+                    }
+                ]
+            }, {
+                label: "建模信息",
+                children: [
+                    {
+                        label: "建模信息-1"
+                    }
+                ]
+            }
+        ])
+        let needName = ref('')
+        let defaultProps = ref({
+            label:"label",
+            children:"children"
+        })
+        function tagClick(row, num) {
+            tagChoose.value = num
+            needName.value = row.desc
+            cid.getIntent({scd_id:324000088,ied_name:row.desc}).then(res=>{
+                // console.log(res,'网络');
+            })
+            emit('treeBack',needName.value)
+        }
+        function handleNodeClick(e){
+            console.log(e,'eee');
+        }
+        onMounted(() => {
+            cid.getAll({ scd_id: 324000088, ied_name: "" }).then(res => {
+                tagList.value = res.data
             })
         })
-        return {}
+        return {
+            tagList,//标签数据
+            tagChoose,//标签点击事件
+            treeData,//树形数据
+            tagClick,//tag点击事件
+            defaultProps,//树形默认展示
+            handleNodeClick,//树形点击事件
+            needName,//返回父组件的名称
+        }
     }
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+p,h3{
+    margin: 0;
+    padding: 0;
+}
+.bigBox {
+    width: 100%;
+    height: calc(100vh - 270px);
+    border: 1px solid #A3ADE0;
+    cursor: pointer;
+    /* margin-left: 25px; */
+}
+
+.tagBox {
+    width: 95%;
+    height: calc(100vh - 550px);
+    /* border: 1px solid green; */
+    border-bottom: 1px solid #A3ADE0;
+    margin: 0 auto;
+    overflow-y: auto;
+}
+
+.tagP {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-top: 5px;
+    font-size: 16px;
+}
+
+.result {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    /* background-color: #A3ADE0; */
+    color: #255CE7;
+    margin-top: 5px;
+    font-size: 16px;
+}
 
-</style>
+.setting {
+    width: 95%;
+    height: calc(100vh - 670px);
+    /* border: 1px solid skyblue; */
+    margin: 2px auto;
+}</style>

src/pages/netStructPicture/components/Gsix.vue

@@ -0,0 +1,425 @@
+<template>
+    <div class="bigBox" id="bigBox">
+        <div id="leftBox">
+            <!-- 左左 -->
+            <div id="topLeft">
+                <div id="goose">
+                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/squer.png"
+                        alt="">
+                    <p class="overp" style="">{{ iedName }}</p>
+                </div>
+            </div>
+            <!-- 左中 -->
+            <div id="mainLeft">
+                <div class="mainDiv" id="mainOne">
+                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
+                        alt="">
+                    <p>GOOSE通信参数</p>
+
+                </div>
+                <div class="mainDiv" id="mainTwo">
+                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
+                        alt="">
+                    <p>GOOSE通信参数</p>
+                    <img class="iconImg" :src="checkType('gai')" alt="">
+                </div>
+                <div class="mainDiv" id="mainThree">
+                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
+                        alt="">
+                    <p>GOOSE通信参数</p>
+                    <img class="iconImg" :src="checkType('shan')" alt="">
+                </div>
+            </div>
+            <!-- 左右 -->
+            <div id="botLeft">
+                <div class="botDiv" id="botOne">
+                    <img src="../../../assets/icon/editIp.png" alt="">
+                    <p>123.11.1</p>
+                </div>
+                <div class="botDiv" id="botTwo">
+                    <img src="../../../assets/icon/terIp.png" alt="">
+                    <p>255.255.255.0</p>
+                </div>
+                <div class="botDiv" id="botThree">
+                    <img src="../../../assets/icon/luIp.png" alt="">
+                    <p>SKT</p>
+                </div>
+            </div>
+        </div>
+        <div id="rightBox" >
+            <!-- 右左 -->
+            <div id="topRight">
+                <div class="tightDiv" id="ditOne">
+                    <img src="../../../assets/icon/editIp.png" alt="">
+                    <p>123.11.2</p>
+                </div>
+                <div class="tightDiv" id="ditTwo">
+                    <img src="../../../assets/icon/editIp.png" alt="">
+                    <p>255.255.255.1</p>
+                </div>
+                <div class="tightDiv" id="ditThree">
+                    <img src="../../../assets/icon/editIp.png" alt="">
+                    <p>SKY</p>
+                </div>
+                <div class="tightDiv1" id="ditFour">
+                    <img src="../../../assets/icon/macIp.png" alt="">
+                    <p>1231698168798</p>
+                </div>
+                <div class="tightDiv1" id="ditFive">
+                    <img src="../../../assets/icon/VLAN-ID.png" alt="">
+                    <p>98615</p>
+                </div>
+            </div>
+            <!-- 右中 -->
+            <div id="mainRight">
+                <div class="tightMain" id="fitOne">
+                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
+                        alt="">
+                    <p>GOOSE通信参数1</p>
+                </div>
+                <div class="tightMain" id="fitTwo">
+                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
+                        alt="">
+                    <p>GOOSE通信参数2</p>
+                </div>
+                <div class="tightMain" id="fitThree">
+                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
+                        alt="">
+                    <p>GOOSE通信参数3</p>
+                </div>
+            </div>
+            <!-- 右右 -->
+            <div id="botRight">
+                <div id="upFile">
+                    <img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/squer.png"
+                        alt="">
+                    <p class="" style="">上传文件名称</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
+import LeaderLine from "../../../../public/leader-line.min.js"
+import delSz from '@/assets/icon/shan.png'
+import editSz from "@/assets/icon/gai.png"
+import addSz from '@/assets/icon/zeng.png'
+import G6 from '@antv/g6';
+export default {
+    props: {
+        activeName: {
+            type: String,
+            required: true
+        },
+        activeNav: {
+            type: Number,
+            required: true
+        },
+        backName: {
+            type: String,
+            required: true
+        },
+        mustVal: {
+            type: Boolean,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let leaderLines = [];//控制线条显示
+        let iedName = ref('')
+        watch(() => props.backName, (newVal) => {
+            iedName.value = newVal
+        })
+        // 判断增删改角标
+        function checkType(type) {
+            if (type == 'zeng') {
+                return addSz
+            } else if (type == 'gai') {
+                return editSz
+            } else if (type == 'shan') {
+                return delSz
+            }
+        }
+        onMounted(() => {
+            let goose = document.getElementById('goose')//左盒子开始元素
+            let mainOne = document.getElementById('mainOne')//左盒子中部上半区元素
+            let mainTwo = document.getElementById('mainTwo')//左盒子中部中间元素
+            let mainThree = document.getElementById('mainThree')//左盒子中部下半区元素
+            let botOne = document.getElementById('botOne')//左盒子右部上半
+            let botTwo = document.getElementById('botTwo')//左盒子右部中间
+            let botThree = document.getElementById('botThree')//左盒子右部下半
+            let upFile = document.getElementById('upFile')//右盒子开始元素
+            let ditOne = document.getElementById('ditOne')//右盒子左侧上方
+            let ditTwo = document.getElementById('ditTwo')//右盒子左侧中部
+            let ditThree = document.getElementById('ditThree')//右盒子左侧下方
+            let ditFive = document.getElementById('ditFive')
+            let ditFour = document.getElementById('ditFour')
+            let fitOne = document.getElementById("fitOne")//右盒子中部上方
+            let fitTwo = document.getElementById("fitTwo")//右盒子中部中部
+            let fitThree = document.getElementById("fitThree")//右盒子中部下方
+            // 连线开始文字startLabel: "开始",
+            // 连线中间文字middleLabel: "中间",
+            // 连线结束文字endLabel: "结束",
+            // 左部分连线
+            leaderLines.push(new LeaderLine(goose, mainOne, { color: 'gray', size: 2, path: "grid" }))//左连中
+            leaderLines.push(new LeaderLine(goose, mainTwo, { color: 'gray', size: 2, path: "grid" }))//左连中
+            leaderLines.push(new LeaderLine(goose, mainThree, { color: 'gray', size: 2, path: "grid" }))//左连中
+            leaderLines.push(new LeaderLine(mainTwo, botOne, { color: 'orange', size: 2, path: "grid", endLabel: "装置IP",startSocket: "center", }))//中连右
+            leaderLines.push(new LeaderLine(mainTwo, botTwo, { color: 'orange', size: 2, path: "grid", endLabel: "掩码", startLabel: "修改" }))//中连右
+            leaderLines.push(new LeaderLine(mainTwo, botThree, { color: 'orange', size: 2, path: "grid", endLabel: '网关' }))//中连右
+            // 右部分连线
+            leaderLines.push(new LeaderLine(upFile, fitOne, { color: 'gray', size: 2, path: "grid" }))//右连中
+            leaderLines.push(new LeaderLine(upFile, fitTwo, { color: 'gray', size: 2, path: "grid" }))//右连中
+            leaderLines.push(new LeaderLine(upFile, fitThree, { color: 'gray', size: 2, path: "grid" }))//右连中
+            leaderLines.push(new LeaderLine(fitTwo, ditOne, { color: 'orange', size: 2, path: "grid" }))//中连左
+            leaderLines.push(new LeaderLine(fitTwo, ditTwo, { color: 'orange', size: 2, path: "grid" }))//中连左
+            leaderLines.push(new LeaderLine(fitTwo, ditThree, { color: 'orange', size: 2, path: "grid" }))//中连左
+            leaderLines.push(new LeaderLine(fitThree, ditFive, { color: 'red', size: 2, path: "grid", startLabel: "删除" }))//中连左
+            leaderLines.push(new LeaderLine(fitThree, ditFour, { color: 'red', size: 2, path: "grid" }))//中连左
+            leaderLines.push(new LeaderLine(mainThree, ditFour, { color: 'red', size: 2, path: "grid", startLabel: "删除", endLabel: "MAC地址" }))//中连左
+            leaderLines.push(new LeaderLine(mainThree, ditFive, { color: 'red', size: 2, path: "grid", endLabel: "VLAN-IP" }))//中连左
+            // 子元素连线
+            // leaderLines.push(new LeaderLine(botOne, ditOne, {
+            //         color: "orange",//连接线颜色
+            //         size: 10,//连接线宽度
+            //         path: "grid",//连接线样式
+            //         startSocket: "center",//开始链接元素位置
+            //         endSocket: "center",//结束链接元素位置
+            //         dash: {
+            //             // 绘制线的长度 'auto'=size*2
+            //             len: 1,
+            //             // 绘制线之间的间隙 'auto'=size
+            //             gap: 6,
+            //             // 线条滚动 true 是(或者{duration: 1000, timing: 'linear'}，详见动画选项)， false 否（默认）
+            //             animation: {
+            //                 duration: 800,//动画速度
+            //                 timing: "linear",
+            //             },
+            //         },//动画开启
+            //         endPlug:'behind',
+            // }))
+            //  公共连线
+            // 连线开始点样式 
+            // disc 圆形 , square 方形 , arrow1 箭头1 , arrow2 箭头2 , arrow3 箭头3 , 
+            // hand 手指 , crosshair 十字准线 , behind 无（默认）
+            /*
+            以下为示例
+            */
+            // leaderLines.push(new LeaderLine(mainTwo, fitTwo, {
+            //     color: "orange",//连接线颜色
+            //     size: 10,//连接线宽度
+            //     path: "grid",//连接线样式
+            //     startSocket: "bottom",//开始链接元素位置
+            //     endSocket: "bottom",//结束链接元素位置
+            //     dash: {
+            //         // 绘制线的长度 'auto'=size*2
+            //         len: 1,
+            //         // 绘制线之间的间隙 'auto'=size
+            //         gap: 6,
+            //         // 线条滚动 true 是(或者{duration: 1000, timing: 'linear'}，详见动画选项)， false 否（默认）
+            //         animation: {
+            //             duration: 800,//动画速度
+            //             timing: "linear",
+            //         },
+            //     },//动画开启
+            //     endPlug: 'arrow3',//结束箭头
+            //     endPlugSize: 0.5,//结束箭头size
+            // }))
+
+
+
+        })
+        onBeforeUnmount(() => {
+            leaderLines.forEach(line => line.remove());//清除连线
+        })
+        return {
+            iedName,
+            checkType,
+        }
+    }
+}
+</script>
+
+<style  scoped>
+p,
+h1,
+h2 {
+    padding: 0;
+    margin: 0;
+}
+p,h2{
+    font-size: 12px;
+}
+.bigBox {
+    width: 99%;
+    height: 96%;
+    margin-left: 10px;
+    /* border: 1px solid red; */
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+#leftBox {
+    width: 50%;
+    height: 100%;
+    /* border: 1px solid green; */
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+#topLeft {
+    width: 23%;
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+#mainLeft {
+    width: 23%;
+    height: 100%;
+    text-align: center;
+    display: grid;
+    place-items: center;
+}
+
+#botLeft {
+    width: 53%;
+    height: 100%;
+}
+
+/* ↓ */
+#rightBox {
+    width: 50%;
+    height: 100%;
+    /* border: 1px solid blue; */
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+#puBox {
+    width: 50%;
+    height: 100%;
+    /* border: 1px solid blue; */
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+#topRight {
+    width: 53%;
+    height: 100%;
+    /* border: 1px solid red; */
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+#mainRight {
+    width: 23%;
+    height: 100%;
+    /* border: 1px solid red; */
+    text-align: center;
+    display: grid;
+    place-items: center;
+}
+
+#botRight {
+    width: 23%;
+    height: 100%;
+    /* border: 1px solid red; */
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+/* ↑ */
+#goose {
+    width: 80px;
+    height: 100px;
+    text-align: center;
+}
+
+#upFile {
+    width: 80px;
+    height: 100px;
+    text-align: center;
+}
+
+.mainDiv {
+    width: 90px;
+    height: 100px;
+    text-align: center;
+    position: relative;
+}
+
+.tightMain {
+    width: 90px;
+    height: 100px;
+    text-align: center;
+}
+
+.botDiv {
+    width: 180px;
+    height: 60px;
+    border: 1px dashed orange;
+    border-right: none;
+    margin-left: auto;
+    /* 将子元素推向右侧 */
+    margin-top: 20px;
+    background-color: #FAF6F3;
+    text-align: center;
+}
+
+.tightDiv {
+    width: 180px;
+    height: 60px;
+    border: 1px dashed orange;
+    border-left: none;
+    margin-right: auto;
+    /* 将子元素推向右侧 */
+    margin-top: 20px;
+    background-color: #FAF6F3;
+    text-align: center;
+}
+
+.tightDiv1 {
+    width: 80px;
+    height: 60px;
+    border: 1px dashed red;
+    /* border-left: none; */
+    margin-right: auto;
+    /* 将子元素推向右侧 */
+    margin-top: 20px;
+    background-color: #FAF6F3;
+    text-align: center;
+}
+
+#botLeft {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.overp {
+    width: 90px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.overp:hover {
+    overflow: visible;
+}
+
+.iconImg {
+    position: absolute;
+    top: -5px;
+    right: 0px;
+}
+</style>

src/pages/netStructPicture/components/netWork.vue

@@ -16,17 +16,12 @@
                   </div>
                   <!-- 小竖线 -->
                   <div class="lineWrap" v-if="current == index">
-                    <div
-                      class="line"
-                      v-for="(item, index) in lineList"
-                      :class="{ lineback: flog && item.name !== clickLine }"
-                      :style="{
+                    <div class="line" v-for="(item, index) in lineList"
+                      :class="{ lineback: flog && item.name !== clickLine }" :style="{
                         background: item.bgcolor,
                         left: 45 + index * 13 + '%',
                         height: 16 * index + 35 + 'px',
-                      }"
-                      :key="index"
-                    ></div>
+                      }" :key="index"></div>
                   </div>
                 </div>
               </div>
@@ -34,30 +29,14 @@
             <!-- 子网络列表 -->
             <section class="layout">
               <div class="subNetwork">
-                <div
-                  class="subNetworkItem"
-                  v-for="(item, index) in showAllAp"
-                  :key="index"
-                >
+                <div class="subNetworkItem" v-for="(item, index) in showAllAp" :key="index">
                   <!-- 竖线和每个ap短的横线 -->
-                  <span
-                    v-for="(itemShort, indexShort) in lineList"
-                    :key="indexShort"
-                  >
-                    <span
-                      class="subNetworkLine"
-                      v-if="!flog && item['show' + itemShort.name]"
-                      :style="item['inlineStyle' + itemShort.name]"
-                    ></span>
-                    <span
-                      v-else-if="flog && itemShort.name == clickLine"
-                      class="subNetworkLine2"
-                      :style="item['inlineStyle' + itemShort.name]"
-                    ></span>
-                    <span
-                      v-if="item.cover && !item.repeatCover"
-                      class="subNetworkMask"
-                    ></span>
+                  <span v-for="(itemShort, indexShort) in lineList" :key="indexShort">
+                    <span class="subNetworkLine" v-if="!flog && item['show' + itemShort.name]"
+                      :style="item['inlineStyle' + itemShort.name]"></span>
+                    <span v-else-if="flog && itemShort.name == clickLine" class="subNetworkLine2"
+                      :style="item['inlineStyle' + itemShort.name]"></span>
+                    <span v-if="item.cover && !item.repeatCover" class="subNetworkMask"></span>
                   </span>
                   <div class="subNetworkInfo">
                     <div class="subNetworkImg">
@@ -78,24 +57,12 @@
             </section>
             <!-- 横线长线条 -->
             <div class="networkLine">
-              <div
-                class="mainLine"
-                v-for="(item, index) in lineList"
-                :key="index"
-              >
-                <span
-                  :class="{ lineback: flog && item.name !== clickLine }"
-                  class="lineTag"
-                  :style="{ background: item.bgcolor, color: item.txtcolor }"
-                  @click="() => onChangeline(item.name)"
-                  >{{ item.name }}</span
-                >
-                <p
-                  :class="{ lineback: flog && item.name !== clickLine }"
-                  class="line"
-                  :style="{ background: item.bgcolor }"
-                  @click="() => onChangeline(item.name)"
-                ></p>
+              <div class="mainLine" v-for="(item, index) in lineList" :key="index">
+                <span :class="{ lineback: flog && item.name !== clickLine }" class="lineTag"
+                  :style="{ background: item.bgcolor, color: item.txtcolor }" @click="() => onChangeline(item.name)">{{
+                    item.name }}</span>
+                <p :class="{ lineback: flog && item.name !== clickLine }" class="line"
+                  :style="{ background: item.bgcolor }" @click="() => onChangeline(item.name)"></p>
               </div>
             </div>
           </div>
@@ -103,7 +70,7 @@
       </el-container>
     </el-container>
   </div>
-  <div class="container-none" v-if="!loading&&!loadDating">
+  <div class="container-none" v-if="!loading && !loadDating">
     <img src="../../../assets/image/create.png" alt="" />
     无效的SCD 该SCD可能已被清理,需要重新分析!
   </div>
@@ -165,7 +132,7 @@ const loading = ref(true);
 const getNetWork = async () => {
   loading.value = false;
   const infoRes = await nodeList({
-    scd_id:216000060,
+    scd_id: 216000060,
     pagesize: 10000,
     name: "SubNetwork",
   });
@@ -175,7 +142,7 @@ const getNetWork = async () => {
     return;
   }
   nodeInfoData.value = infoRes.data;
-  if(nodeInfoData.value!=null) {
+  if (nodeInfoData.value != null) {
     getlist();
   }
   loading.value = false;
@@ -502,6 +469,7 @@ const onChangeline = (val) => {
 <style scoped lang="scss">
 @import "~@/styles/home.scss";
 @import "~@/styles/struct.scss";
+
 .container-none {
   font-size: 18px;
   display: flex;
@@ -509,7 +477,8 @@ const onChangeline = (val) => {
   justify-content: center;
   align-items: center;
   margin-top: 150px;
-  & > img {
+
+  &>img {
     width: 220px;
     height: 220px;
   }

src/pages/netStructPicture/index.vue

@@ -2,12 +2,49 @@
   <div>
     <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
       <div class="nav">
-        <div v-for="(item, index) in navtopData" :key="index" :class="{'nav-item-active':activeNav==index}" @click="clickNav(index)" class="nav-item">
+        <div v-for="(item, index) in navtopData" :key="index" :class="{ 'nav-item-active': activeNav == index }"
+          @click="clickNav(index)" class="nav-item" style="font-size: 12px;">
           {{ item.name }}
         </div>
       </div>
+      <div class="mostHead" v-if="activeName == 'first' && activeNav == 0">
+        <h2 style="display: inline-block;margin-right: 2px;font-size: 20px;">CID文件一次性检测</h2>
+        <el-button type="primary" plain>结果导出Excel</el-button>
+        <span class="closeX" @click="closeX">×</span>
+      </div>
       <el-tab-pane label="网络结构图" name="first">
-        <net-work></net-work>
+        <net-work v-if="activeName == 'first' && activeNav == null"></net-work>
+        <div class="disappear" v-if="activeName == 'first' && activeNav == 0">
+          <!-- 左侧树形数据 -->
+          <div style="width: 15%;">
+            <CidTree @treeBack="treeBack"></CidTree>
+          </div>
+          <!-- 右侧展示图 -->
+          <div style="width: 85%; height: calc(100vh - 280px);position: relative;">
+            <div class="abBox">
+              <div>
+                <span style="border-right: 1px solid black;padding-right: 300px;font-size: 12px;">
+                  基准文件:asfsdgagdgf.cid
+                </span>
+              </div>
+              <div>
+                <span style="font-size: 12px;">
+                  对比文件:asfsdgagdgf.cid
+                </span>
+              </div>
+              <div class="uploadBox">
+                <el-upload ref="upload" class="upload-demo" :http-request="nowUpload" :limit="1"
+                  element-loading-text="上传中..." element-loading-background="rgba(255, 255, 255, 0.8)"
+                  :on-remove="handleRemove" :on-change="fileSuccess" :show-file-list="false">
+                  <template #trigger>
+                    <el-button style="border-bottom: 1px solid #7BBAFD;" type="text" plain>上传CID</el-button>
+                  </template>
+                </el-upload>
+              </div>
+            </div>
+            <Gsix :activeName="activeName" :activeNav="activeNav" :backName="backName" :mustVal="mustVal"></Gsix>
+          </div>
+        </div>
       </el-tab-pane>
       <el-tab-pane label="SCD可视化" name="second">Config</el-tab-pane>
     </el-tabs>
@@ -18,7 +55,10 @@
 <script setup>
 import { ref } from "vue";
 import netWork from "./components/netWork";
+import CidTree from "./components/CidTree.vue";
+import Gsix from "./components/Gsix.vue";
 import { useRoute } from 'vue-router';
+import cid from "@/api/cid/cid";
 const activeName = ref("first");//默认展示网络结构图
 const navtopData = ref([
   { name: "CID一致性校核" },
@@ -28,39 +68,76 @@ const navtopData = ref([
   { name: "虚端子关系图" },
 ]);
 const activeNav = ref(null);
+const backName = ref('')//树组件返回名称
+let mustVal = ref(false)
+let fileWater = ref({})//文件流
 const clickNav = (navIndex) => {  //点击导航栏事件
   activeNav.value = navIndex;
-  console.log(activeName.value,'index'); 
+}
+const handleClick = (val) => {
+  if (val.props.name == 'first') {
+    activeNav.value = null
+    activeName.value = val.props.name
+  }
+}
+const treeBack = (data) => {
+  backName.value = data
+}
+const closeX = () => {
+  activeName.value = 'first'
+  activeNav.value = null
+}
+const nowUpload = (file, e) => {
+  console.log(file.file, '上传');
+  fileWater.value = file.file
+  cid.fileUpload({ station_id: 1, file: file.file }).then(res => {
+    console.log(res, '文件上传');
+  })
+}
+const handleRemove = (file, e) => {
+  console.log(file, e, '删除');
+}
+const fileSuccess = (file, e) => {
+  mustVal.value = true
+
 }
 </script>
 
 <style scoped lang="scss">
-$height:40px;
-@mixin mid-center{
+$height: 40px;
+
+@mixin mid-center {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 :deep(.el-tabs__item) {
   margin: 16px 0 0 32px;
   font-size: 18px;
 }
+
 :deep(.el-tabs__item:last-child) {
   margin-left: 0;
 }
+
 :deep(.el-tabs__nav-wrap::after) {
   --el-border-color-light: none;
 }
+
 :deep(.el-tabs__item.is-active),
 :deep(.el-tabs__active-bar) {
   color: #255ce7;
 }
+
 :deep(.el-tabs__active-bar) {
   background-color: #255ce7;
 }
+
 //设置导航栏样式
- .nav {
+.nav {
   @include mid-center;
+
   .nav-item {
     width: 144px;
     height: $height;
@@ -70,18 +147,65 @@ $height:40px;
     background: #fff url("~@/assets/image/instruct/navtop.png") no-repeat center;
     background-size: 144px $height;
   }
-  .nav-item-active{
+
+  .nav-item-active {
     background: #fff url("~@/assets/image/instruct/navtop_active.png") no-repeat center;
     background-size: 144px $height;
   }
 }
+
 //最外层的滚动条不要
 :deep(.el-main) {
-  overflow: hidden;
+  // overflow: hidden;
 }
+
 //ied的高度
 :deep(.network-wrap) {
-height: 70vh;
-overflow: auto;
+  height: 70vh;
+  overflow: auto;
+}
+
+// 头部导出excel
+.mostHead {
+  width: 97%;
+  height: auto;
+  border-bottom: 1px solid #A3ADE0;
+  margin: 0px auto;
+  position: relative;
+}
+
+.closeX {
+  font-size: 30px;
+  position: absolute;
+  top: 20px;
+  right: 0px;
+  cursor: pointer;
+}
+
+// CID显示
+.disappear {
+  width: 97%;
+  height: calc(100vh - 260px);
+  margin: 0 auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.abBox {
+  width: 90%;
+  height: 5%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: white;
+  margin-left: 10px;
+  position: relative;
+}
+
+.uploadBox {
+  position: absolute;
+  top: 0px;
+  right: -100px;
 }
 </style>

src/pages/system/SystemPage.vue

@@ -15,14 +15,15 @@
 
                 <!-- 公共组件box -->
                 <div class="traBox">
-                    <LineTree v-if="selectIndex == 0 || ourNum == 0" @listBack="listBack"></LineTree>
-                    <ModuleTree v-if="selectIndex == 1 && ourNum == 1"></ModuleTree>
+                    <LineTree v-if="selectIndex == 0 || ourNum == 0" @listBack="listBack" :selectIndex="selectIndex">
+                    </LineTree>
+                    <ModuleTree v-if="selectIndex == 1 && ourNum == 1" :fuckList="fuckList" @mtBack="mtBack"></ModuleTree>
                 </div>
                 <!-- 切换box -->
                 <div class="changeBox">
-                    <LitLine v-if="selectIndex == 0" :fuckList="fuckList"></LitLine>
-                    <InsideModule v-if="selectIndex == 1 && ourNum == 1"></InsideModule>
-                    <SetModule v-if="selectIndex == 1 && ourNum == 0" @backNum="backNum"></SetModule>
+                    <LitLine v-if="selectIndex == 0"></LitLine>
+                    <InsideModule v-if="selectIndex == 1 && ourNum == 1" :tfType="tfType" :insideNeed="insideNeed" :lineId="lineId" :setName="setName"></InsideModule>
+                    <SetModule v-if="selectIndex == 1 && ourNum == 0" @backNum="backNum" :fuckList="fuckList"></SetModule>
                 </div>
             </div>
         </div>
@@ -59,9 +60,13 @@ export default {
         ])//标签列表
         let fuckList = ref([])//公共list
         let ourNum = ref(0)//决定编辑图像的数字，0为不显示1为显示
+        let tfType = ref(null)//判断画图状态
+        let insideNeed = ref({})//画图返回数据
+        let lineId = ref()//linetree返回id
+        let setName = ref('')//setmodule返回name
         function tagChange(row, num) {//标签切换
             selectIndex.value = num
-            if(num == 1){
+            if (num == 1) {
                 ourNum.value = 0
             }
             // 将当前点击的标签设为选中状态，其他标签设为非选中
@@ -69,11 +74,17 @@ export default {
                 tag.isSelected = tag.id === row.id;
             });
         }
-        function listBack(data) {
+        function listBack(data,id) {
             fuckList.value = data
+            lineId.value = id
         }
-        function backNum(data){
+        function backNum(data,name) {
             ourNum.value = data
+            setName.value = name
+        }
+        function mtBack(data, row) {
+            insideNeed.value = row
+            tfType.value = data
         }
         onMounted(() => {
 
@@ -86,6 +97,11 @@ export default {
             selectIndex,
             ourNum,
             backNum,
+            tfType,
+            mtBack,
+            insideNeed,
+            lineId,
+            setName,
         }
     },
     components: {

src/pages/system/components/InsideModule.vue

@@ -45,11 +45,9 @@
                         </div>
                     </div>
                     <div class="tableBox">
-                        <!-- <FeelLoad></FeelLoad> -->
-                        <!-- <FatherMap></FatherMap> -->
                         <!-- 建议使用这个 -->
-                        <DrawDesigns ref="designsRef" :lineMenuColor="lineMenuColor" :fatX="fatX" :fatY="fatY"
-                            @backxy="backxy"></DrawDesigns>
+                        <DrawDesigns ref="designsRef" :lineMenuColor="lineMenuColor" :needObj="needObj" :fatX="fatX"
+                            :fatY="fatY" :nowLook="nowLook" :needId="needId" :needName="needName" @backxy="backxy"></DrawDesigns>
                     </div>
                 </div>
             </div>
@@ -60,18 +58,58 @@
 <script>
 import { ref, onMounted, toRefs, watch } from 'vue';
 import { ElMessage } from 'element-plus';
+import cid from '@/api/cid/cid'
 import FeelLoad from '@/pages/feelLoad/FeelLoad.vue'//bmnp
 import FatherMap from '@/pages/mapLoad/FatherMap.vue';//jsplumb
 import DrawDesigns from '@/pages/components/draw/DrawDesigns.vue';//logicflow
+import { now } from 'moment';
 export default {
-    setup() {
+    props: {
+        tfType: {
+            type: null || Number,
+            required: true
+        },
+        insideNeed: {
+            type: Object,
+            required: true
+        },
+        lineId: {
+            type: Number || String,
+            required: true
+        },
+        setName: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
         let moduleList = ref([])
         let lineMenuColor = ref('#255CE7')
         let designsRef = ref(null)
         let fatX = ref()
         let fatY = ref()
+        let result = props.tfType
+        let nowLook = ref(null)
+        let needObj = ref({})
+        let needId = ref('')
+        let needName = ref('')
+        watch(() => props.tfType, (newVal) => {
+            nowLook.value = newVal
+        })
+        watch(() => props.insideNeed, (newVal) => {
+            needObj.value = newVal
+        })
+        watch(() => props.lineId, (newVal) => {
+            needId.value = newVal
+        })
+        watch(() => props.setName, (newVal) => {
+            needName.value = newVal
+        })
         function searchModule() {
-
+            needObj.value = props.insideNeed
+            needId.value = props.lineId
+            nowLook.value = result
+            needName.value = props.setName
         }
         function svClick() {
             lineMenuColor.value = '#255CE7'
@@ -130,6 +168,11 @@ export default {
             yChange,
             limitNumX,//只能输入数字
             limitNumY,
+            nowLook,
+            result,
+            needObj,
+            needId,
+            needName,
         }
     },
     components: {
@@ -217,9 +260,11 @@ export default {
 }
 
 :deep(.lf-dndpanel) {
-    height: auto;
+    height: 100%;
     overflow-y: auto;
     background-color: #F7F8FB;
+    padding: 0;
+    margin: 0;
 }
 
 :deep(.lf-dnd-shape) {

src/pages/system/components/LineTree.vue

@@ -4,18 +4,27 @@
             <span style="line-height:20px;text-align:center;">
                 <img style="width: 20px;height: 20px;" src="../../../assets/icon/pice_set.png" alt="">
                 一次接线方式</span>
-            <el-tree style="width: 120px;margin: 0 auto;background-color: #F7F8FB;" :data="lineData" :props="defaultProps"
+            <el-tree v-if="vif" style="width: 120px;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)">
+                    {{ item.name }}
+                </p>
         </div>
     </div>
 </template>
 
 <script>
-import { ref, onMounted, toRefs } from 'vue'
+import { ref, onMounted, toRefs, watch } from 'vue'
 import litLine from '@/api/litLine'
 import systemRow from '@/api/systemRow';
 import LitLine from './LitLine.vue';
 export default {
+    props: {
+        selectIndex: {
+            type: Number,
+            required: true
+        }
+    },
     setup(props, { emit }) {
         let lineData = ref([])//树形数据
         let defaultProps = ref({
@@ -24,20 +33,51 @@ export default {
             id: 'id'
         })
         let pushList = ref([])
+        let result = ref(0)
+        let pList = ref([])
+        let selectIndex = ref(null)
+        let vif = ref(true)
+        watch(() => props.selectIndex, (newVal) => {
+            result.value = newVal
+            searchFlashLel()
+        })
         function searchLine() {
-            litLine.getLineModel({ pageno: 1, pagesize: 10 }).then(res => {
-                console.log(res, '987res');
-            })
+            if (props.selectIndex == 0) {
+                litLine.getLineModel({ pageno: 1, pagesize: 10 }).then(res => {
+                    // console.log(res, '987res');
+                })
+            }
         }
         function searchFlashLel() {//拿到电压等级
-            systemRow.getChildren({ code: "voltage_level" }).then(res => {
-                lineData.value = res.data
-            })
+            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
+                    vif.value = false
+                })
+            }
+
         }
         function handleNodeClick(e) {
-            litLine.getAllLine({ vol_id: e.id - 0 }).then(res => {
+            // 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');
+                pushList.value = res.data
+                emit("listBack",pushList.value)
+            })
+        }
+        function pClick(row,num){
+            selectIndex.value = num
+            litLine.getAllm({ pageno: 1, pagesize: 10, line_link_style: row.id - 0 }).then(res => {
                 pushList.value = res.data
-                emit("listBack", pushList.value)
+                emit("listBack",pushList.value,row.id)
             })
         }
         onMounted(() => {
@@ -51,6 +91,11 @@ export default {
             searchFlashLel,
             handleNodeClick,
             pushList,
+            result,
+            pList,
+            selectIndex,
+            pClick,
+            vif,
         }
     },
     components: {
@@ -63,4 +108,11 @@ export default {
 .traBox {
     text-align: center;
 }
+.result{
+    font-size: 12px;
+    color: #5D7FDA;
+}
+.chooseP{
+    font-size: 12px;
+}
 </style>

src/pages/system/components/LitLine.vue

@@ -122,9 +122,9 @@ export default {
         function picBack(data){
             picModal.value = data
         }
-        watch(() => props.fuckList, (newVal) => {
-            lineList.value = newVal
-        });
+        // watch(() => props.fuckList, (newVal) => {
+        //     lineList.value = newVal
+        // });
         onMounted(() => {
             search()
         })

src/pages/system/components/ModuleTree.vue

@@ -3,45 +3,59 @@
         <div class="bigBox">
             <div class="loadBox">
                 <img style="display: block;width: 20px;height: 20px;" src="../../../assets/icon/module.png" alt="">
-                <span style="font-size: 16px;display: block;">
+                <span style="font-size: 12px;display: block;">
                     间隔模型管理
                 </span>
             </div>
             <div class="treeBox">
-                <el-tree class="treeData" :data="moduleData" :props="defaultProps" @node-click="handleNodeClick" />
+                <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" /> -->
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import systemRow from '@/api/systemRow';
 export default {
-    setup() {
-        let moduleData = ref([
-            {
-                label: "测试",
-                id: "1",
-                children: [
-                    {
-                        label: "测试1",
-                        id: '11'
-                    }
-                ]
-            }
-        ])//树形数据
-        let defaultProps = ref({//树形默认props
-            label: "label",
-            children: "children",
-            id: "id"
-        })
-        function handleNodeClick(e) {//树形点击方法
-            console.log(e, 'row');
+    props: {
+        fuckList: {
+            type: Array,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let moduleData = ref([])
+        let result = props.fuckList
+        let selectIndex = ref(null)
+        let needRow = ref({})
+        // watch(() => props.fuckList, (newVal) => {
+        //     moduleData.value = newVal
+        // })
+        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
+            needRow.value = row
+            emit('mtBack', selectIndex.value, needRow.value)
         }
+        onMounted(() => {
+            ready()
+        })
         return {
             moduleData,//树形数据
-            defaultProps,//树形默认props
-            handleNodeClick,//树形点击方法
+            pClick,
+            selectIndex,
+            needRow,
         }
     }
 }
@@ -62,13 +76,25 @@ export default {
     justify-content: space-evenly;
     align-items: center;
 }
-.treeBox{
+
+.treeBox {
     width: 50%;
     height: auto;
     margin: 0 auto;
 }
-.treeData{
+
+.treeData {
     background-color: #F7F8FB;
     width: calc(100% - 100px);
 }
-</style>
+
+.chooseP {
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.result {
+    font-size: 12px;
+    cursor: pointer;
+    color: #449DFD;
+}</style>

src/pages/system/components/SetModule.vue

@@ -12,15 +12,15 @@
             <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="name" label="间隔名称" width="auto" />
-                    <el-table-column prop="flash" label="电压等级" width="auto" />
-                    <el-table-column prop="type" label="间隔类型" width="auto" />
+                    <el-table-column fixed 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 fixed="right" label="操作" width="180">
-                        <template #default>
+                        <template #default="scope">
                             <el-button link type="primary" size="small" @click=""><el-icon>
                                     <EditPen />
                                 </el-icon>修改</el-button>
-                            <el-button link type="primary" size="small" @click="goMap"><el-icon>
+                            <el-button link type="primary" size="small" @click="goMap(scope.row)"><el-icon>
                                     <Coin />
                                 </el-icon>编辑模型</el-button>
                         </template>
@@ -35,10 +35,16 @@
 </template>
 
 <script>
-import { ref, onMounted, toRefs } from 'vue';
+import { ref, onMounted, toRefs,watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import AddNode from '../modalComp/AddNode.vue';
 export default {
+    props: {
+        fuckList: {
+            type: Array,
+            required: true
+        }
+    },
     setup(props, { emit }) {
         let tableData = ref([
             {
@@ -50,13 +56,19 @@ export default {
         let nodeMos = ref(false)//添加间隔模态框
         let kisNum = ref(0)
         let { goMap } = toRefs(props)
+        watch(()=>props.fuckList,(newVal)=>{
+            tableData.value = newVal
+        })
+        function ready() {
+            tableData.value = props.fuckList
+        }
         function tableChange(e) {
             console.log(e, 'table');
         }
         function addNode() {
             nodeMos.value = true
         }
-        function cacl() {
+        function cacl(row) {
             kisNum.value = 1
             if (kisNum.value == 0) {
                 ElMessage({
@@ -65,11 +77,15 @@ export default {
                     duration: 1500
                 })
             }
-            emit("backNum", kisNum.value)
+            console.log(row,'setmodule');
+            emit("backNum", kisNum.value,row.model_name)
         }
-        function addBack(data){
+        function addBack(data) {
             nodeMos.value = data
         }
+        onMounted(() => {
+            ready()
+        })
         return {
             tableData,
             tableChange,

src/pages/system/modalComp/AddNode.vue

@@ -1,17 +1,17 @@
 <template>
     <div>
-        <el-dialog v-model="dialogVisible" title="Tips" 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 ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" status-icon>
                 <el-form-item label="间隔名称" prop="name">
-                    <el-input v-model="ruleForm.name" clearable />
-                </el-form-item>
-                <el-form-item label="间隔类型" prop="type">
-                    <el-input v-model="ruleForm.type" clearable />
+                    <el-select @change="moduleChange" v-model="ruleForm.linkStyle" placeholder="请选择间隔">
+                        <template v-for="(item, index) in moduleList">
+                            <el-option :label="item.name" :value="item.id" />
+                        </template>
+                    </el-select>
                 </el-form-item>
-                <el-form-item label="电压等级">
-                    <el-select @change="flashChange" v-model="ruleForm.volId" placeholder="请选择电压等级">
+                <el-form-item label="内置模型">
+                    <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>
@@ -33,6 +33,7 @@
 <script>
 import { ref, onMounted, toRefs, reactive } from 'vue';
 import systemRow from '@/api/systemRow';
+import litLine from '@/api/litLine';
 export default {
     props: {
         nodeMos: {
@@ -44,12 +45,11 @@ export default {
         let dialogVisible = ref(false)//模态框显示
         let result = props.nodeMos
         let ruleForm = ref({
-            name: "",
-            type: "",
-            flash: "",
-            volId: "",
+            linkStyle: "",
+            moduleId: []
         })
         let selectList = ref([])
+        let moduleList = ref([])
         let rules = reactive({
             name: [
                 { required: true, message: '请输入名称', trigger: 'blur' },
@@ -64,18 +64,34 @@ export default {
             dialogVisible.value = result
         }
         function searchFlashLel() {
-            systemRow.getChildren({ code: "voltage_level" }).then(res => {
+            systemRow.getChildren({ code: "ied_type" }).then(res => {
                 selectList.value = res.data
+                // console.log(selectList.value, 'select');
+            })
+            litLine.getAllLine({ pageno: 1, pagesize: 10 }).then(res => {
+                moduleList.value = res.data
+                // console.log(moduleList.value,'module');
             })
         }
         function flashChange(e) {
-            ruleForm.value.volId = e
+            ruleForm.value.moduleId = e
+        }
+        function moduleChange(e) {
+            ruleForm.value.linkStyle = e
         }
         function getBack() {
             dialogVisible.value = false
             emit("addBack", dialogVisible.value)
         }
         function getSure() {
+            litLine.addModule(
+                {
+                    linkstyle_id: ruleForm.value.linkStyle - 0,
+                    model_id: ruleForm.value.moduleId - 0
+                }
+            ).then(res => {
+                console.log(res, 'adddddddd');
+            })
             dialogVisible.value = false
             emit("addBack", dialogVisible.value)
         }
@@ -94,6 +110,8 @@ export default {
             cancels: getBack,
             closes: getBack,
             sureClick: getSure,
+            moduleChange,
+            moduleList,
         }
     }
 }

src/utils/request.js

@@ -68,7 +68,7 @@ service.interceptors.request.use(
 // 响应拦截
 service.interceptors.response.use(
     response => {
-        console.log(response,'响应拦截器res');
+        // console.log(response,'响应拦截器res');
         let res = response.data
         return res
     },