冲突和cid对比布局

src/api/scdCheck/scdCheck2.js

@@ -53,5 +53,19 @@ export function scdLineSourcexml(data) {
       params:data
   })
 }
-
+// CID一致性校核
+export function  compIedstatType(data){
+  return request({
+      url:`/scd/comp/iedstat/type`,
+      method:"get",
+      params:data,
+  })
+}
+export function  compResult(data){
+  return request({
+      url:`/scd/comp/result`,
+      method:"get",
+      params:data,
+  })
+}
 

src/pages/mission/components/HistoryMis.vue

@@ -17,7 +17,7 @@
             </div>
         </div>
         <div>
-            <el-table :data="tableData" style="width: 98%" stripe>
+            <el-table :data="tableData" style="width: 98%;height: calc(100vh - 240px);" stripe>
                 <el-table-column fixed label="序号" width="150">
                     <template #default="scope">
                         {{ scope.$index + 1 }}
@@ -77,7 +77,7 @@ export default {
         let loading = ref(false)
         function reload() {
             loading.value = true
-            task.getTask({ pageno: 1, pagesize: 999999 }).then(res => {
+            task.getTask({ pageno: 1, pagesize: 10 }).then(res => {
                 if (res.code == 0) {
                     tableData.value = res.data
                     totals.value = res.count
@@ -90,7 +90,7 @@ export default {
             startTime.value = ''
             endTime.value = ''
             getTime.value = ''
-            task.getTask({ pageno: 1, pagesize: 999999 }).then(res => {
+            task.getTask({ pageno: 1, pagesize: 10 }).then(res => {
                 tableData.value = res.data
                 totals.value = res.count
             })
@@ -109,7 +109,7 @@ export default {
         function searchMis() {
             task.getTask({
                 pageno: 1,
-                pagesize: 20,
+                pagesize: 10,
                 name: names.value,
                 start_time: startTime.value,
                 end_time: endTime.value

src/pages/mission/components/StartMission.vue

@@ -38,9 +38,10 @@
                                     levelChoose(scope.row.alert_level) }}</span>
                             </template>
                         </el-table-column>
-                        <el-table-column prop="line_no" label="行号" width="130" >
+                        <el-table-column prop="line_no" label="行号" width="130">
                             <template #default="scope">
-                                <span style="color: blue;border-bottom: 1px solid blue;">{{ scope.row.line_no }}</span>
+                                <span style="color: blue;border-bottom: 1px solid blue;cursor: pointer;" @click="lineno(scope.row)">{{
+                                    scope.row.line_no }}</span>
                             </template>
                         </el-table-column>
                         <el-table-column prop="parse_result" label="描述" width="auto" :show-overflow-tooltip="true" />
@@ -54,6 +55,10 @@
                 </div>
             </div>
         </div>
+        <div>
+            <LookLine v-if="lineSearch" :lineSearch="lineSearch" :scdIds="scdIds" :lineNum="lineNum" @lineClose="lineClose">
+            </LookLine>
+        </div>
     </div>
 </template>
 
@@ -63,7 +68,7 @@ import StepMethod from './StepMethod.vue';
 import task from '@/api/task';
 import slc from '@/api/slc/slc';
 import { ElMessage } from 'element-plus';
-
+import LookLine from '../modalComp/LookLine.vue';
 export default {
     props: {
         startMis: {
@@ -76,10 +81,13 @@ export default {
         let loadingMis = ref({})
         let stepList = ref([])
         let endList = ref([])//结果表格
+        let scdIds = ref("")//当前组件scdid
+        let lineNum = ref(0)
+        let lineSearch = ref(false)
         let end = ref(true)
         watch(() => props.startMis, (newVal) => {
             loadingMis.value = newVal
-            console.log(loadingMis.value, 'watch');
+            scdIds.value = newVal.scd_id
         })
         function misDown() {
             task.stopTask({ id: loadingMis.value.id }).then(res => {
@@ -94,6 +102,7 @@ export default {
         }
         function picReload() {
             loadingMis.value = props.startMis
+            scdIds.value = loadingMis.value.scd_id
             task.tackStart({ id: loadingMis.value.id }).then(res => {
                 let countTime = setInterval(() => {
                     task.lookStep({ id: loadingMis.value.id - 0 }).then(res => {
@@ -132,6 +141,10 @@ export default {
                 return '告警'
             }
         }
+        function lineno(row) {
+            lineNum.value = row.line_no
+            lineSearch.value = true
+        }
         onMounted(() => {
             picReload()
         })
@@ -145,10 +158,15 @@ export default {
             levelChoose,//等级筛选
             end,
             backDown,
+            lineno,
+            scdIds,
+            lineNum,
+            lineSearch,
         }
     },
     components: {
-        StepMethod
+        StepMethod,
+        LookLine
     }
 }
 </script>

src/pages/mission/modalComp/LookLine.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <el-dialog v-model="dialogDisabled" width="50vw" append-to-body draggable @close="closes">
+            <template #header>
+                <div class="my-header">
+                    <div class="title">SCD源XML查看</div>
+                </div>
+            </template>
+            <div class="line-title">{{ lineNoTitle }}</div>
+            <el-scrollbar height="500px">
+                <div class="main-cont-line">
+                    <div class="main-line">
+                        <div v-for="(item, index) in lineNoData" :key="index"
+                            :class="{ 'click-line': item.split(' <')[0] == clicklineNOData }">
+                            {{ item }}
+                        </div>
+                    </div>
+                </div>
+            </el-scrollbar>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button type="primary" @click="closeModal">确定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { ref, onActivate, onMounted, watch } from 'vue';
+import { scdLineSourcexml } from '@/api/scdCheck/scdCheck2'
+export default {
+    props: {
+        lineSearch: {
+            type: Boolean,
+            required: true
+        },
+        scdIds: {
+            type: String,
+            required: true
+        },
+        lineNum: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let dialogDisabled = ref(false)
+        let needScdId = ref("")//本组件scdid
+        let line = ref(0)//行号
+        let clicklineNOData = ref("")
+        let lineNoData = ref([])
+        watch(() => props.lineNum, (newVal) => {
+            line.value = newVal
+            clicklineNOData.value = newVal
+        })
+        watch(() => props.scdIds, (newVal) => {
+            needScdId.value = newVal
+        })
+        // 初始化函数
+        function reload() {
+            dialogDisabled.value = props.lineSearch
+            needScdId.value = props.scdIds
+            line.value = props.lineNum
+            clicklineNOData.value = props.lineNum
+            scdLineSourcexml({
+                scd_id: needScdId.value - 0,
+                line_no: line.value - 0
+            }).then(res => {
+                if (res.data != null) {
+                    lineNoData.value = res.data
+                }
+            })
+        }
+        function needClose() {
+            dialogDisabled.value = false
+            emit("lineClose", dialogDisabled.value)
+        }
+        function needSure() {
+            dialogDisabled.value = false
+            emit("lineClose", dialogDisabled.value)
+        }
+        onMounted(() => {
+            reload()
+        })
+        return {
+            reload,//初始化函数
+            dialogDisabled,//模态框状态
+            needScdId,//本组件scdid
+            line,//行号
+            closeModal: needClose,//关闭模态框
+            closes: needClose,
+            clicklineNOData,
+            lineNoData,
+        }
+    }
+}
+</script>
+
+<style scoped>
+.click-line {
+    background: #4d4d86;
+    color: #fff;
+    margin-right: 20px;
+}
+</style>

src/pages/netStructPicture/components/CidTree.vue

@@ -65,7 +65,7 @@ const props = defineProps({
   },
 });
 const emit = defineEmits(["treeBack"]);
-let tagList = ref([]);
+let tagList = ref(props.iedRelation);
 let tagChoose = ref(0);
 let treeData = ref([
   {

src/pages/netStructPicture/components/Gsix.vue

@@ -1,426 +1,71 @@
-<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="">{{ antherName }}</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 delappid from "@/assets/icon/del_app_id.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
-        },
-        arrName: {
-            type: String,
-            required: true
-        },
-        upName: {
-            type: String,
-            required: true
-        }
-    },
-    setup(props, { emit }) {
-        let leaderLines = [];//控制线条显示
-        let iedName = ref('')
-        let antherName = ref('')
-        watch(() => props.backName, (newVal) => {
-            iedName.value = newVal
-        })
-        watch(() => props.activeName, (newVal) => {
-            leaderLines.forEach(line => line.remove());//清除连线
-        })
-        watch(() => props.upName, (newVal) => {
-            antherName.value = newVal
-        })
-        // 判断增删改角标
-        function checkType(type) {
-            if (type == 'zeng') {
-                return addSz
-            } else if (type == 'gai') {
-                return editSz
-            } else if (type == 'shan') {
-                return delSz
-            }
-        }
-        onMounted(() => {
-            iedName.value = props.backName
-            antherName.value = props.upName
-            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" }))//中连左
-            //  公共连线
-            // 连线开始点样式 
-            // 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,
-            antherName,
-        }
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import { compIedstatType, compResult } from "@/api/scdCheck/scdCheck2";
+const props = defineProps({
+  clickRowDatas: {
+    type: Object,
+    default: () => {},
+  },
+  iedRelation: {
+    type: Object,
+    default: () => {},
+  },
+  clickList: {
+    type: Object,
+    default: () => {},
+  },
+});
+//IED版本数据，diff_opt中u是修改，i是新增，d是删除
+const clickRow = ref(props.clickRowDatas);
+let tagList = ref(Object.values(props.iedRelation)[0]); //左侧更改的设备列表
+
+watch(
+  () => props.clickRowDatas,
+  (newValue) => {
+    if (newValue) {
+      clickRow.value = newValue;
+    }
+  }
+);
+watch(
+  () => props.iedRelation,
+  (newValue) => {
+    if (newValue) {
+      tagList.value = Object.values(newValue)[0];
+      console.log(" tagList.value", tagList.value);
     }
-}
+  }
+);
+watch(
+  () => props.clickList,
+  (newValue) => {
+    if (newValue) {
+      tagList.value = newValue;
+    }
+  }
+);
+const mapList = ref(null);
+const result = async () => {
+  const res = await compResult({
+    comp_id: clickRow.value.id,
+    ied_name: tagList.value.ied_name,
+    comptype: "u",
+    itemcode: tagList.value.diff_object_type,
+  });
+  res.data.forEach(item => {
+  });
+  console.log("first", JSON.parse(res.data[0]));
+  mapList.value = res.data;
+};
+onMounted(() => {
+  result();
+});
 </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;
-}
+<template>
+  <div></div>
+</template>
 
-.iconImg {
-    position: absolute;
-    top: -5px;
-    right: 0px;
-}</style>
+<style scoped lang="scss">
+</style>

src/pages/netStructPicture/components/ScdNow.vue

@@ -86,7 +86,12 @@
       :scdView="scdView"
       :delScdId="delScdId"
     ></dialog-index>
-    <scl-update :openScl="openScl" @doneScl="doneScl" :iedRelationData="iedRelationData"></scl-update>
+    <scl-update
+      :openScl="openScl"
+      @doneScl="doneScl"
+      :iedRelationData="iedRelationData"
+      :clickRowData ="clickRowData"
+    ></scl-update>
     <div id="wrapperscd"></div>
   </div>
 </template>
@@ -103,7 +108,7 @@ import {
 import LeaderLine from "../../../../public/leader-line.min.js";
 import dialogIndex from "./dialogIndex.vue";
 import SclUpdate from "./SclUpdate.vue";
-import jiantouPSclUpdateng from "@/assets/image/scdcheck/jiantou.png";
+import jiantouPng from "@/assets/image/scdcheck/jiantou.png";
 import modifyPng from "@/assets/image/scdcheck/modify.png";
 import newlyPng from "@/assets/image/scdcheck/newly.png";
 import delPng from "@/assets/image/scdcheck/del.png";
@@ -171,6 +176,7 @@ watch(
   () => props.clickViewData,
   (newValue) => {
     iedVer.value = {};
+    clickRowData.value = {};
     if (newValue) {
       clickRowData.value = newValue;
       clickRow.value = true;
@@ -256,25 +262,26 @@ const lookAddOrDel = async (comData, del) => {
   for (let key of keys) {
     iedRelationData.value[key] = iedDetail[key];
   }
-  console.log('iedRelationData.value', iedRelationData.value)
   if (del == "del" && clickRowData.value.target_id) {
     delScdId.value = clickRowData.value.target_id;
-  } else if(del == 'add'){
+  } else if (del == "add") {
     delScdId.value = route.query.id;
   }
   // 对键进行排序===
-  if(del !='edit'){
+  if (del != "edit") {
     const iedRes = await scdIedRelation({
-    scd_id: delScdId.value,
-    ied_name: comData[0].ied_name,
-    reset: 1,
-  });
-    checkDialogData.value = iedRes.data?iedRes.data[comData[0].ied_name]:null;
+      scd_id: delScdId.value,
+      ied_name: comData[0].ied_name,
+      reset: 1,
+    });
+    checkDialogData.value = iedRes.data
+      ? iedRes.data[comData[0].ied_name]
+      : null;
     openBig.value = true;
   }
 };
 const lookAdd = async (comData) => {
-  lookAddOrDel(comData,'add');
+  lookAddOrDel(comData, "add");
   // lookType.value = 1;
   // emit("nowBack", lookType.value);
 };
@@ -312,16 +319,17 @@ watch(
     }
   }
 );
-const openScl = ref(false)
+const openScl = ref(false);
 const lookEdit = (comData) => {
   openScl.value = true;
   lookAddOrDel(comData, "edit");
   // emit("nowBack", lookType.value);
 };
 //关闭scl修改弹窗
-const doneScl = ()=>{
+const doneScl = () => {
   openScl.value = false;
-}
+  iedRelationData.value = {};
+};
 onMounted(() => {});
 onBeforeUnmount(() => {
   // lineList.value.forEach((item) => item.remove());

src/pages/netStructPicture/components/SclUpdate.vue

@@ -12,25 +12,43 @@ const props = defineProps({
   },
   iedRelationData: {
     type: Object,
-    default: () => { },
+    default: () => {},
+  },
+  clickRowData: {
+    type: Object,
+    default: () => {},
   },
 });
+const newChicken = route.query.stationName;
 const OpensclTrue = ref(false);
 const emit = defineEmits(["doneScl"]);
 const iedRelation = ref(null);
+//装置列表数据
 watch(
   () => props.iedRelationData,
   (newValue) => {
-    console.log('iedRelationscllll', newValue)
+    console.log("iedRelationscllll", newValue);
     iedRelation.value = newValue;
   }
 );
 let nowScdId = ref(null); //路由传参的scdid
+//打开文件
 watch(
   () => props.openScl,
   (newValue) => {
-    if(newValue){
-        OpensclTrue.value = newValue;
+    if (newValue) {
+      OpensclTrue.value = newValue;
+    }
+  }
+);
+//所点击对比的数据
+const clickRowDatas = ref(null);
+watch(
+  () => props.clickRowData,
+  (newValue) => {
+    console.log("newValue", newValue);
+    if (newValue) {
+      clickRowDatas.value = newValue;
     }
   }
 );
@@ -38,7 +56,11 @@ const cancelClick = () => {
   OpensclTrue.value = false;
   emit("doneScl");
 };
-const treeBack = (data, val) => {};
+const clickList =ref(null)
+const treeBack = (data, val) => {
+  clickList.value = data;
+  console.log('data====', data)
+};
 onMounted(() => {
   nowScdId.value = route.query.id;
 });
@@ -61,7 +83,12 @@ onMounted(() => {
         </div>
       </template>
       <div class="right-main">
-        <CidTree :nowScdId="nowScdId" @treeBack="treeBack" :OpensclTrue="OpensclTrue" :iedRelation="iedRelation"></CidTree>
+        <CidTree
+          :nowScdId="nowScdId"
+          @treeBack="treeBack"
+          :OpensclTrue="OpensclTrue"
+          :iedRelation="iedRelation"
+        ></CidTree>
         <div class="right-title">
           <div class="abBox">
             <div>
@@ -72,17 +99,16 @@ onMounted(() => {
             </div>
             <div style="padding-left: 30px">
               <span
-                >对比文件:<span style="color: #09162">{{ upName }}</span></span
+                >对比文件:<span style="color: #09162">{{
+                  clickRowDatas.target_name
+                }}</span></span
               >
             </div>
           </div>
-          <Gsix
-            :activeName="activeName"
-            :activeNav="activeNav"
-            :backName="backName"
-            :mustVal="mustVal"
-            :arrName="arrName"
-            :upName="upName"
+          <Gsix 
+          :clickRowDatas="clickRowDatas"
+          :iedRelation="iedRelation"
+          :clickList="clickList"
           ></Gsix>
         </div>
       </div>
@@ -108,16 +134,16 @@ onMounted(() => {
     background: #f7f8fb;
   }
   .abBox {
-  width: 95%;
-  height: 40px;
-  position: relative;
-  margin: 10px auto;
-  display: flex;
-  font-size: 14px;
-  background: #fff;
-  justify-content: center;
-  align-items: center;
-  color: #516380;
-}
+    width: 95%;
+    height: 40px;
+    position: relative;
+    margin: 10px auto;
+    display: flex;
+    font-size: 14px;
+    background: #fff;
+    justify-content: center;
+    align-items: center;
+    color: #516380;
+  }
 }
 </style>

src/pages/netStructPicture/components/gsix2.vue

@@ -0,0 +1,426 @@
+<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="">{{ antherName }}</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 delappid from "@/assets/icon/del_app_id.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
+        },
+        arrName: {
+            type: String,
+            required: true
+        },
+        upName: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let leaderLines = [];//控制线条显示
+        let iedName = ref('')
+        let antherName = ref('')
+        watch(() => props.backName, (newVal) => {
+            iedName.value = newVal
+        })
+        watch(() => props.activeName, (newVal) => {
+            leaderLines.forEach(line => line.remove());//清除连线
+        })
+        watch(() => props.upName, (newVal) => {
+            antherName.value = newVal
+        })
+        // 判断增删改角标
+        function checkType(type) {
+            if (type == 'zeng') {
+                return addSz
+            } else if (type == 'gai') {
+                return editSz
+            } else if (type == 'shan') {
+                return delSz
+            }
+        }
+        onMounted(() => {
+            iedName.value = props.backName
+            antherName.value = props.upName
+            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" }))//中连左
+            //  公共连线
+            // 连线开始点样式 
+            // 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,
+            antherName,
+        }
+    }
+}
+</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/newTitle/SlcCheck.vue

@@ -13,67 +13,27 @@
           <img :src="HardDrives" alt="" />
           <span>基本语法校验结果</span>
         </div>
-        <el-tree
-          class="trees"
-          :data="treeData"
-          :props="defaultProps"
-          @node-click="handleNodeClick"
-          icon="ico"
-          node-key="pid"
-          :expand-on-click-node="false"
-          :default-expanded-keys="[0]"
-          highlight-current
-        >
+        <el-tree class="trees" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" icon="ico"
+          node-key="pid" :expand-on-click-node="false" :default-expanded-keys="[0]" highlight-current>
           <template #default="{ node, data }">
             <span class="custom-trees">
-              <span
-                class="custom-tree-node"
-                v-if="
-                  data.datatype == 'SCLSyntax' ||
-                  data.datatype == 'Communication' ||
-                  data.datatype == 'DataTypeTemplates' ||
-                  !data.datatype
-                "
-                ><img :src="FileCodeOne" alt="" />
-                <span class="label">{{ node.label }}</span></span
-              >
-              <span
-                class="custom-tree-node"
-                v-else-if="data.datatype || data.pid == 0"
-              >
-                <img
-                  :src="node.expanded ? FolderOpentop : FolderNotchOne"
-                  alt=""
-                />
-                <span class="label">{{ node.label }}</span></span
-              >
-              <img
-                class="alert-level"
-                :src="dangerError"
-                alt=""
-                v-if="data.alert_level == 'error'"
-              />
-              <img
-                class="alert-level"
-                :src="dangerWarning"
-                alt=""
-                v-else-if="data.alert_level == 'waring'"
-              />
-              <img
-                class="alert-level"
-                :src="dangerTip"
-                alt=""
-                v-else-if="data.alert_level == 'hint'"
-              />
+              <span class="custom-tree-node" v-if="data.datatype == 'SCLSyntax' ||
+                data.datatype == 'Communication' ||
+                data.datatype == 'DataTypeTemplates' ||
+                !data.datatype
+                "><img :src="FileCodeOne" alt="" />
+                <span class="label">{{ node.label }}</span></span>
+              <span class="custom-tree-node" v-else-if="data.datatype || data.pid == 0">
+                <img :src="node.expanded ? FolderOpentop : FolderNotchOne" alt="" />
+                <span class="label">{{ node.label }}</span></span>
+              <img class="alert-level" :src="dangerError" alt="" v-if="data.alert_level == 'error'" />
+              <img class="alert-level" :src="dangerWarning" alt="" v-else-if="data.alert_level == 'waring'" />
+              <img class="alert-level" :src="dangerTip" alt="" v-else-if="data.alert_level == 'hint'" />
             </span>
           </template>
         </el-tree>
       </div>
-      <div
-        class="tableBox"
-        v-loading="tableLoading"
-        element-loading-text="正在查询校验信息中"
-      >
+      <div class="tableBox" v-loading="tableLoading" element-loading-text="正在查询校验信息中">
         <div class="allMis">
           <div class="result">
             <div @click="excelPort" class="anniu">
@@ -86,39 +46,25 @@
             </div>
           </div>
           <div class="statistics">
-            <span @click="clickStatistics"
-              >全部：{{ errorNum + warningNum + hintNum }}</span
-            >
-            <span @click="clickStatistics('error')"
-              >错误：<em style="color: #e82c2d">{{
-                errorNum ? errorNum : 0
-              }}</em></span
-            >
-            <span @click="clickStatistics('waring')"
-              >告警：<em style="color: #ff7808">{{
-                warningNum ? warningNum : 0
-              }}</em></span
-            >
-            <span @click="clickStatistics('hint')"
-              >提示：<em style="color: #3064e8">{{
-                hintNum ? hintNum : 0
-              }}</em></span
-            >
+            <span @click="clickStatistics">全部：{{ errorNum + warningNum + hintNum }}</span>
+            <span @click="clickStatistics('error')">错误：<em style="color: #e82c2d">{{
+              errorNum ? errorNum : 0
+            }}</em></span>
+            <span @click="clickStatistics('waring')">告警：<em style="color: #ff7808">{{
+              warningNum ? warningNum : 0
+            }}</em></span>
+            <span @click="clickStatistics('hint')">提示：<em style="color: #3064e8">{{
+              hintNum ? hintNum : 0
+            }}</em></span>
           </div>
         </div>
         <div class="table-data" v-if="tableData">
-          <el-table
-            :data="tableData.data"
-            style="width: 100%"
-            stripe
-            height="90%"
-            :cell-style="{ color: '#1A2447', border: 'none', height: '69px' }"
-            :header-cell-style="{
+          <el-table :data="tableData.data" style="width: 100%" stripe height="90%"
+            :cell-style="{ color: '#1A2447', border: 'none', height: '69px' }" :header-cell-style="{
               color: '#7484AB',
               background: '#F7F8FB',
               borderBottom: '1px solid #A3ADE0',
-            }"
-          >
+            }">
             <el-table-column prop="ied_name" label="装置名称" width="80">
               <template #default="scope">
                 <span v-if="scope.row.ied_name">{{ scope.row.ied_name }}</span>
@@ -128,45 +74,26 @@
             <el-table-column prop="ied_desc" label="装置描述" width="200" />
             <el-table-column prop="alert_level" label="等级" width="100">
               <template #default="scope">
-                <span v-if="scope.row.alert_level === 'waring'" class="waring"
-                  >警告</span
-                >
-                <span
-                  v-else-if="scope.row.alert_level === 'error'"
-                  class="error"
-                  >错误</span
-                >
-                <span v-else-if="scope.row.alert_level === 'hint'" class="hint"
-                  >提示</span
-                >
+                <span v-if="scope.row.alert_level === 'waring'" class="waring">警告</span>
+                <span v-else-if="scope.row.alert_level === 'error'" class="error">错误</span>
+                <span v-else-if="scope.row.alert_level === 'hint'" class="hint">提示</span>
               </template>
             </el-table-column>
             <el-table-column prop="line_no" label="行号" width="100">
               <template #default="scope">
-                <span
-                  style="
+                <span style="
                     color: #255ce7;
                     cursor: pointer;
                     border-bottom: 1px solid #255ce7;
-                  "
-                  @click="lineNoClick(scope.row)"
-                  >{{ scope.row.line_no }}</span
-                >
+                  " @click="lineNoClick(scope.row)">{{ scope.row.line_no }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="parse_result" label="描述" />
-            <el-table-column
-              prop="apply_standard"
-              label="标准及条款"
-              width="250"
-            >
+            <el-table-column prop="apply_standard" label="标准及条款" width="250">
               <template #default="scope">
                 <span>{{ getBeforeComma(scope.row.apply_standard) }}</span>
-                <span
-                  v-if="!getAfterComma(scope.row.apply_standard)"
-                  style="margin-left: 10px"
-                  >{{ scope.row.apply_standard_no }}</span
-                >
+                <span v-if="!getAfterComma(scope.row.apply_standard)" style="margin-left: 10px">{{
+                  scope.row.apply_standard_no }}</span>
                 <div v-else>
                   {{ getAfterComma(scope.row.apply_standard) }}
                   <span>{{ scope.row.apply_standard_no }}</span>
@@ -191,13 +118,7 @@
       </div>
     </div>
     <!-- 导出所有结果 -->
-    <el-dialog
-      v-model="exportModal"
-      width="25vw"
-      style="height: 200px"
-      append-to-body
-      draggable
-    >
+    <el-dialog v-model="exportModal" width="25vw" style="height: 200px" append-to-body draggable>
       <template #header>
         <div class="my-header">
           <div class="title">数据导出</div>
@@ -206,9 +127,7 @@
       <div v-if="!exportLink" class="export-ink">正在导出数据中...</div>
       <div v-else class="export-ink">
         数据文件已生成完成,
-        <el-link :href="exportLink" type="primary" class="load"
-          >点击立即下载</el-link
-        >
+        <el-link :href="exportLink" type="primary" class="load">点击立即下载</el-link>
       </div>
     </el-dialog>
     <!-- 点击行号 -->
@@ -222,11 +141,8 @@
       <el-scrollbar height="500px">
         <div class="main-cont-line">
           <div class="main-line">
-            <div
-              v-for="(item, index) in lineNoData"
-              :key="index"
-              :class="{ 'click-line': item.split(' <')[0] == clicklineNOData }"
-            >
+            <div v-for="(item, index) in lineNoData" :key="index"
+              :class="{ 'click-line': item.split(' <')[0] == clicklineNOData }">
               {{ item }}
             </div>
           </div>
@@ -484,6 +400,7 @@ onMounted(() => {
 em {
   font-style: normal;
 }
+
 .bigBox {
   width: 97%;
   height: calc(100vh - 200px);
@@ -510,10 +427,12 @@ em {
   justify-content: space-around;
   align-items: center;
   margin-top: 16px;
+
   .trees {
     margin: 16px;
   }
 }
+
 .treeBox {
   width: 16%;
   height: 100%;
@@ -533,25 +452,30 @@ em {
   background: #f7f8fb;
   border-radius: 3px;
 }
+
 .allMis {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 16px;
+
   .statistics,
   .result {
     cursor: pointer;
     display: flex;
     font-size: 16px;
-    & > span {
+
+    &>span {
       margin-right: 16px;
     }
   }
 }
+
 .table-data {
   height: 85%;
   margin-left: 16px;
 }
+
 .anniu {
   height: 54px;
   width: 124px;
@@ -565,22 +489,27 @@ em {
   border-radius: 2px;
   font-size: 14px;
   color: #255ce7;
+
   img {
     width: 20px;
     height: 20px;
     margin: 0 4px 0 0;
   }
 }
+
 .current-anniu {
   width: 153px;
   background-size: 153px 49px;
 }
+
 :deep(.el-tree) {
   --el-fill-color-blank: #f7f8fb;
 }
+
 :deep(.el-table__inner-wrapper) {
   height: 100% !important;
 }
+
 .waring,
 .error,
 .hint {
@@ -592,34 +521,41 @@ em {
   line-height: 20px;
   font-size: 13px;
 }
+
 .waring {
   color: #ff7c03;
   background: #fff6d9;
 }
+
 .error {
   color: #e50505;
   background: #f8d3d6;
 }
+
 .hint {
   color: #255ce7;
   background: #d8e1f9;
 }
+
 .closeX {
   font-size: 24px;
   color: #7484ab;
   cursor: pointer;
 }
+
 .custom-tree-node {
-  & > img:first-child {
+  &>img:first-child {
     width: 18px;
     height: 18px;
     vertical-align: middle;
     margin-right: 3px;
   }
+
   .label {
     vertical-align: middle;
   }
 }
+
 // ::v-deep(.tree) {
 //   & > .el-tree-node:after {
 //     border-top: none;
@@ -712,10 +648,12 @@ em {
   margin-top: 10px;
   color: #1a2447;
   font-size: 14px;
+
   :deep(.el-pagination.is-background .el-pager li.is-active) {
     --el-color-primary: #a3ade0;
   }
 }
+
 //自定义节点图标
 .custom-trees {
   display: flex;
@@ -723,6 +661,7 @@ em {
   justify-content: space-between;
   align-items: center;
 }
+
 .el-tree .el-tree-node__expand-icon.expanded {
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
@@ -748,14 +687,17 @@ em {
   background-size: 18px;
   transform: rotate(90deg);
 }
+
 .el-tree-node__expand-icon.is-leaf {
   display: none;
 }
+
 .alert-level {
   width: 16px;
   height: 16px;
   background-size: 16px;
 }
+
 .custom-tree-node {
   .label {
     color: "#1A2447";
@@ -773,21 +715,26 @@ em {
     padding-bottom: 15px;
   }
 }
+
 .export-ink {
   display: flex;
   text-align: center;
   justify-content: center;
+
   .load {
     margin-left: 10px;
     border-bottom: 1px solid #409eff;
   }
 }
+
 .main-line {
   margin-top: -20px;
-  & > div:first-child {
+
+  &>div:first-child {
     padding-top: 40px;
   }
 }
+
 .line-title {
   text-align: center;
   color: #e50505;
@@ -795,21 +742,25 @@ em {
   margin-top: -20px;
   padding-bottom: 10px;
 }
+
 .click-line {
   background: #4d4d86;
   color: #fff;
   margin-right: 20px;
 }
+
 .tree-title {
   display: flex;
   align-items: center;
   margin: 16px;
   margin-bottom: 0;
+
   img {
     width: 20px;
     height: 20px;
     margin-right: 10px;
   }
+
   span {
     vertical-align: middle;
   }

src/pages/report/components/ReportDetails.vue

@@ -7,9 +7,10 @@
             <div class="createReport">
                 <img v-if="btnType" src="../../../assets/image/board_file.png" alt="">
                 <img v-else src="../../../assets/image/allright.png" alt="">
-                <p style="font-size: 14px;font-weight: 400;">{{ btnType?'还未生成报告':"报告已生成" }}</p>
+                <p style="font-size: 14px;font-weight: 400;">{{ btnType ? '还未生成报告' : "报告已生成" }}</p>
                 <el-button :type="btnType ? 'primary' : 'info'" plain @click="nowGet" :disabled="!btnType">立即生成</el-button>
-                <el-button :type="btnType ? 'info' : 'primary'" plain :disabled="btnType" @click="downReport">下载报告</el-button>
+                <el-button :type="btnType ? 'info' : 'primary'" plain :disabled="btnType"
+                    @click="downReport">下载报告</el-button>
             </div>
         </div>
         <div class="bottomBox" v-loading="loading">
@@ -72,7 +73,7 @@
                             </el-table-column>
                             <el-table-column label="行号" width="120">
                                 <template #default="scope">
-                                    <span style="color: blue;border-bottom: 1px solid blue;cursor: pointer;">{{
+                                    <span style="color: blue;border-bottom: 1px solid blue;cursor: pointer;" @click="lineno(scope.row)">{{
                                         scope.row.line_no }}</span>
                                 </template>
                             </el-table-column>
@@ -84,11 +85,15 @@
                                 </template>
                             </el-table-column>
                         </el-table>
-                        <Pagination style="position: absolute;right: 10px;" :totals="totals" @pageBack="pageBack"></Pagination>
+                        <Pagination style="position: absolute;right: 10px;" :totals="totals" @pageBack="pageBack">
+                        </Pagination>
                     </div>
                 </div>
             </div>
         </div>
+        <div>
+            <LooKLine v-if="lineSearch" :lineSearch="lineSearch" :scdIds="scdIds" :lineNum="lineNum" @lineClose="lineClose"></LooKLine>
+        </div>
     </div>
 </template>
 
@@ -101,6 +106,7 @@ import systemRow from "@/api/systemRow"
 import Pagination from "./Pagination.vue"
 import { ElMessage } from "element-plus"
 import system from "@/api/system"
+import LooKLine from "../modal/LookLine.vue"
 export default {
     setup() {
         let route = useRoute()
@@ -117,9 +123,11 @@ export default {
         let btnType = ref(true)//生成报告按钮和下载报告按钮状态
         let fileId = ref("")//需要下载的报告id'
         let totals = ref(0)
+        let lineSearch = ref(false)
+        let lineNum = ref(0)//行号
         // 初始化组件
         function reload() {
-            console.log(route, 'route')
+            scdIds.value = route.query.scdId
             stationNames.value = route.query.stationName
             relathing.value = route.query.names
             reportId.value = route.query.reportId
@@ -208,13 +216,18 @@ export default {
             })
         }
         // 导出结果至excel
-        function excelPort(){
+        function excelPort() {
             systemRow.portExcel({
-                code:"scl-check-result",
-            }).then(res=>{
-                console.log(res,'导出');
+                code: "scl-check-result",
+            }).then(res => {
+                console.log(res, '导出');
             })
         }
+        //查看行位置
+        function lineno(row){
+            lineNum.value = row.line_no
+            lineSearch.value = true
+        }
         // 分页组件返回
         function pageBack(size, index) {
             loading.value = true
@@ -233,6 +246,9 @@ export default {
                 }
             })
         }
+        function lineClose(data){
+            lineSearch.value = data
+        }
         onMounted(() => {
             reload()
         })
@@ -256,10 +272,15 @@ export default {
             fileId,//下载的报告id
             downReport,//下载报告
             excelPort,
+            lineSearch,//查看行号
+            lineno,//查看行位置
+            lineNum,//行号
+            lineClose,//lookline.vue返回模态框状态
         }
     },
     components: {
         Pagination,
+        LooKLine,
     }
 }
 </script>

src/pages/report/modal/LookLine.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <el-dialog v-model="dialogDisabled" width="50vw" append-to-body draggable @close="closes">
+            <template #header>
+                <div class="my-header">
+                    <div class="title">SCD源XML查看</div>
+                </div>
+            </template>
+            <div class="line-title">{{ lineNoTitle }}</div>
+            <el-scrollbar height="500px">
+                <div class="main-cont-line">
+                    <div class="main-line">
+                        <div v-for="(item, index) in lineNoData" :key="index"
+                            :class="{ 'click-line': item.split(' <')[0] == clicklineNOData }">
+                            {{ item }}
+                        </div>
+                    </div>
+                </div>
+            </el-scrollbar>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button type="primary" @click="closeModal">确定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { ref, onActivate, onMounted, watch } from 'vue';
+import { scdLineSourcexml } from '@/api/scdCheck/scdCheck2'
+export default {
+    props: {
+        lineSearch: {
+            type: Boolean,
+            required: true
+        },
+        scdIds: {
+            type: String,
+            required: true
+        },
+        lineNum: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let dialogDisabled = ref(false)
+        let needScdId = ref("")//本组件scdid
+        let line = ref(0)//行号
+        let clicklineNOData = ref("")
+        let lineNoData = ref([])
+        watch(() => props.lineNum, (newVal) => {
+            line.value = newVal
+            clicklineNOData.value = newVal
+        })
+        watch(() => props.scdIds, (newVal) => {
+            needScdId.value = newVal
+        })
+        // 初始化函数
+        function reload() {
+            dialogDisabled.value = props.lineSearch
+            needScdId.value = props.scdIds
+            line.value = props.lineNum
+            clicklineNOData.value = props.lineNum
+            scdLineSourcexml({
+                scd_id: needScdId.value - 0,
+                line_no: line.value - 0
+            }).then(res => {
+                if (res.data != null) {
+                    lineNoData.value = res.data
+                }
+            })
+        }
+        function needClose() {
+            dialogDisabled.value = false
+            emit("lineClose", dialogDisabled.value)
+        }
+        function needSure() {
+            dialogDisabled.value = false
+            emit("lineClose", dialogDisabled.value)
+        }
+        onMounted(() => {
+            reload()
+        })
+        return {
+            reload,//初始化函数
+            dialogDisabled,//模态框状态
+            needScdId,//本组件scdid
+            line,//行号
+            closeModal: needClose,//关闭模态框
+            closes: needClose,
+            clicklineNOData,
+            lineNoData,
+        }
+    }
+}
+</script>
+
+<style scoped>
+.click-line {
+    background: #4d4d86;
+    color: #fff;
+    margin-right: 20px;
+}
+</style>

src/pages/system/components/LineTree.vue

@@ -5,7 +5,7 @@
                 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 style="float: left;font-size: 16px;font-weight: 500;">一次性接线方式</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" />