SCL文件校核样式的完善，CRC校核样式的完善，筛选，CID样式的调整，输入输出控制块圆圈弹框的bug

src/pages/netStructPicture/components/CidTree.vue

@@ -1,188 +1,223 @@
 <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 class="bigBox">
+      <div>
+        <div class="titles">
+          <img
+            style="width: 20px; height: 20px"
+            src="../../../assets/icon/HardDrives.png"
+            alt=""
+          />
+          <div>装置列表</div>
         </div>
+      </div>
+      <div class="tagBox">
+        <div
+          class="cont-line tagP"
+          :class="{ clicktag: tagChoose == index }"
+          v-for="(item, index) in tagList"
+          :key="index"
+          @click="tagClick(item, index)"
+        >
+          {{ item.desc }}
+        </div>
+      </div>
+      <div class="setting">
+        <el-tree
+          :data="treeData"
+          :props="defaultProps"
+          @node-click="handleNodeClick"
+        />
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import { ref, onMounted, toRefs, watch } from 'vue';
-import cid from "@/api/cid/cid"
-import scdCheck from '@/api/scdCheck/scdCheck';
-import { stringify } from 'uuid';
+import { ref, onMounted, toRefs, watch } from "vue";
+import cid from "@/api/cid/cid";
+import scdCheck from "@/api/scdCheck/scdCheck";
+import { stringify } from "uuid";
 export default {
-    props: {
-        nowScdId: {
-            type: Number || String,
-            required: true
-        }
+  props: {
+    nowScdId: {
+      type: Number || String,
+      required: true,
     },
-    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"
-        })
-        let scdId = ref("")//传递的scdid
-        watch(() => props.nowScdId, (newVal) => {
-            scdId.value = newVal
+  },
+  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",
+    });
+    let scdId = ref(""); //传递的scdid
+    watch(
+      () => props.nowScdId,
+      (newVal) => {
+        scdId.value = newVal;
+      }
+    );
+    function reload() {
+      scdId.value = props.nowScdId;
+      cid.getAll({ scd_id: scdId.value - 0, ied_name: "" }).then((res) => {
+        tagList.value = res.data;
+      });
+    }
+    function tagClick(row, num) {
+      tagChoose.value = num;
+      cid
+        .findFile({
+          scd_id: scdId.value - 0,
+          ied_name: row.desc,
+          pageno: 1,
+          pagesize: 10,
+          station_id: 861,
         })
-        function reload() {
-            scdId.value = props.nowScdId
-            cid.getAll({ scd_id: scdId.value - 0, ied_name: "" }).then(res => {
-                tagList.value = res.data
-            })
-        }
-        function tagClick(row, num) {
-            tagChoose.value = num
-            cid.findFile({
-                scd_id: scdId.value - 0,
-                ied_name: row.desc,
-                pageno: 1,
-                pagesize: 10,
-                station_id: 861
-            }).then(res => {
-                console.log(res, '文件');
-            })
-            scdCheck.lookCheck({
-                pageindex: 1,
-                pagesize: 10,
-                station_id: 861,
-                scd_id: scdId.value - 0,
-                is_checkin: 2,
-                ied_name: row.ied_name
-            }).then(res => {
-                let a = res.data.filter(item => item.type_name == 'CID')
-                if (a.length > 0) {
-                    needName.value = a[0].file_name
-                    emit('treeBack', needName.value, a[0].id)
-                }
-            })
-        }
-        function handleNodeClick(e) {
-            console.log(e, 'eee');
-        }
-        onMounted(() => {
-            reload()
+        .then((res) => {
+          console.log(res, "文件");
+        });
+      scdCheck
+        .lookCheck({
+          pageindex: 1,
+          pagesize: 10,
+          station_id: 861,
+          scd_id: scdId.value - 0,
+          is_checkin: 2,
+          ied_name: row.ied_name,
         })
-        return {
-            tagList,//标签数据
-            tagChoose,//标签点击事件
-            treeData,//树形数据
-            tagClick,//tag点击事件
-            defaultProps,//树形默认展示
-            handleNodeClick,//树形点击事件
-            needName,//返回父组件的名称
-            scdId,//传递的scdid
-        }
+        .then((res) => {
+          //   let a = res.data.filter((item) => item.type_name == "CID");
+          //   if (a.length > 0) {
+          //     needName.value = a[0].file_name;
+          //     emit("treeBack", needName.value, a[0].id);
+          //   }
+        });
     }
-}
+    function handleNodeClick(e) {
+      console.log(e, "eee");
+    }
+    onMounted(() => {
+      reload();
+    });
+    return {
+      tagList, //标签数据
+      tagChoose, //标签点击事件
+      treeData, //树形数据
+      tagClick, //tag点击事件
+      defaultProps, //树形默认展示
+      handleNodeClick, //树形点击事件
+      needName, //返回父组件的名称
+      scdId, //传递的scdid
+    };
+  },
+};
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 p,
 h3 {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 .bigBox {
-    width: 100%;
-    height: calc(100vh - 270px);
-    border: 1px solid #A3ADE0;
-    cursor: pointer;
-    /* margin-left: 25px; */
+  width: 100%;
+  height: calc(100vh - 280px);
+  margin-top: 20px;
+  border: 1px solid #a3ade0;
+  border-radius: 2px;
+  cursor: pointer;
+  background: #f7f8fb;
+  & > div:first-child {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    color: #1a2447;
+    margin: 16px 0 0 16px;
+  }
+}
+:deep(.el-tree) {
+  --el-fill-color-blank: #f7f8fb;
 }
-
 .tagBox {
-    width: 95%;
-    height: calc(100vh - 550px);
-    /* border: 1px solid green; */
-    border-bottom: 1px solid #A3ADE0;
-    margin: 0 auto;
-    overflow-y: auto;
+  width: 92%;
+  height: 50%;
+  overflow-y: auto;
+  margin: 8px 16px 0px 16px;
 }
 
 .tagP {
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-top: 5px;
-    font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 8px;
+  font-size: 16px;
 }
-
-.result {
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    /* background-color: #A3ADE0; */
-    color: #255CE7;
-    margin-top: 5px;
+.setting {
+  width: 92%;
+  height: 50%;
+  border-top: 1px solid #a3ade0;
+  margin: 2px auto;
+}
+.titles {
+  display: flex;
+  align-items: center;
+  & > div {
     font-size: 16px;
+    margin-left: 8px;
+    vertical-align: middle;
+    font-weight: bold;
+  }
 }
-
-.setting {
-    width: 95%;
-    height: calc(100vh - 670px);
-    /* border: 1px solid skyblue; */
-    margin: 2px auto;
+.cont-line,
+:deep(.el-tree-node__label) {
+  color: #1a2447;
+  font-size: 14px;
+}
+.clicktag {
+  color: #255ce7;
 }
 </style>

src/pages/netStructPicture/components/Gsix.vue

@@ -140,6 +140,9 @@ export default {
         watch(() => props.backName, (newVal) => {
             iedName.value = newVal
         })
+        watch(() => props.activeName, (newVal) => {
+            leaderLines.forEach(line => line.remove());//清除连线
+        })
         watch(() => props.upName, (newVal) => {
             antherName.value = newVal
         })
@@ -178,7 +181,7 @@ export default {
             // 左部分连线
             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(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: '网关' }))//中连右

src/pages/netStructPicture/components/inoutControl.vue

@@ -331,12 +331,12 @@ const dilogRightData = ref(null);
 const dilogData = ref(null);
 const dilogTitie = ref(null); //输入的标题等数据
 const titleUnusual = ref("input"); //区分点击输入还是输出
+//圆圈未知的设置
 const circelSet = (endDom, options, posit, keys, startDom, keyMiddle, mark) => {
   let elmButton = endDom.appendChild(document.createElement("div"));
   // 阻止点击事件冒泡
   elmButton.addEventListener("click", async (event) => {
     event.stopPropagation();
-    console.log("keys", keys, keyMiddle);
     if (mark == "middle") {
       const ResInput = await getiedInputs({
         title: "虚端子—详细信息",

src/pages/netStructPicture/components/inoutDialog.vue

@@ -17,9 +17,9 @@
       </template>
       <div class="dialog-circle">
         <div class="dialog-left">
-          <div class="nav" v-if="listData2">
-            <div>{{ listData2.ied_name }}</div>
-            <div class="desc">{{ listData2.desc }}</div>
+          <div class="nav" v-if="listData">
+            <div>{{ listData.ied_name }}</div>
+            <div class="desc">{{ listData.desc }}</div>
           </div>
           <p class="title" v-if="dilogData&&dilogData.length>0 && titleUnusual == 'inout'">
             {{ `${dilogData[0].attr_ld_inst} ${dilogData[0].attr_ld_desc}` }}
@@ -122,9 +122,17 @@ const props = defineProps({
     type: Object,
     default: () => {},
   },
+  listData2:{
+    type: Object,
+    default: () => {},
+  }
 });
 const open = ref(false);
-const listData2 = ref(props.checkData); //线条左右两侧的数据
+const listData = ref(props.listData2); //线条左右两侧的数据
+watch(()=>props.listData2,(newValue)=>{
+  listData.value = newValue
+})
+
 const dialogListRightChild = ref(new Map()); //获取弹窗右侧所有子的ref
 const dialogListLeftChild = ref(new Map()); //获取弹窗左侧所有子的ref
 const setDialogLeftChild2 = (el, item) => {

src/pages/netStructPicture/components/scdTree.vue

@@ -449,7 +449,6 @@ const yesAnalysisClick = () => {
           comp_id: 0,
         });
       } else if (chooseContrast.value) {
-        console.log("chooseContrast.value", chooseContrast.value);
         anRes = await compStart({
           type: "SCD",
           station_id: route.query.stationId,

src/pages/netStructPicture/index.vue

@@ -13,131 +13,135 @@
           {{ 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 @click="portExcel"
-          >结果导出Excel</el-button
-        >
+      <div class="mostHead mostHead-cid" v-if="activeNav == 0">
+        <div>
+          <span class="scd-title"> CID文件一次性检测 </span>
+          <span class="export-bottom" @click="portExcel">结果导出Excel</span>
+        </div>
         <span class="closeX" @click="closeX">×</span>
       </div>
       <el-tab-pane label="网络结构图" name="first">
         <net-work v-if="activeName == 'first' && activeNav == null"></net-work>
-        <div class="disappear" v-if="activeName == 'first' && activeNav == 0">
-          <!-- 左侧树形数据 -->
-          <div style="width: 15%">
-            <CidTree :nowScdId="nowScdId" @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;
-                  "
-                >
-                  基准文件:
-                  {{ arrName }}
-                </span>
-              </div>
-              <div>
-                <span style="font-size: 12px"> 对比文件:{{ upName }} </span>
-              </div>
-              <div class="uploadBox">
-                <el-upload
-                  ref="upload"
-                  class="upload-demo"
-                  :http-request="nowUpload"
-                  :limit="2"
-                  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>
+      </el-tab-pane>
+      <el-tab-pane label="SCD可视化" name="second">
+        <scd-visual v-if="!clickNavCode"></scd-visual>
+      </el-tab-pane>
+    </el-tabs>
+    <div>
+      <!-- CID一致性校核========= -->
+      <div class="disappear" v-if="activeNav == 0">
+        <!-- 左侧树形数据 -->
+        <div style="width: 15%">
+          <CidTree :nowScdId="nowScdId" @treeBack="treeBack"></CidTree>
+        </div>
+        <!-- 右侧展示图 -->
+        <div
+          style="
+            width: 85%;
+            height: calc(100vh - 280px);
+            margin: 20px 0 0 16px;
+            background: #f7f8fb;
+          "
+        >
+          <div class="abBox">
+            <div>
+              <span style="border-right: 1px solid #516380; padding-right: 30px"
+                >基准文件:
+                <span style="color: #09162c">{{ arrName }}</span></span
+              >
+            </div>
+            <div style="padding-left: 30px">
+              <span
+                >对比文件:<span style="color: #09162">{{ upName }}</span></span
+              >
+            </div>
+            <div class="uploadBox">
+              <el-upload
+                ref="upload"
+                class="upload-demo"
+                :http-request="nowUpload"
+                :limit="2"
+                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 #255CE7;color: #255CE7;"
+                    type="text"
+                    plain
+                    >上传CID</el-button
+                  >
+                </template>
+              </el-upload>
             </div>
-            <Gsix
-              :activeName="activeName"
-              :activeNav="activeNav"
-              :backName="backName"
-              :mustVal="mustVal"
-              :arrName="arrName"
-              :upName="upName"
-            ></Gsix>
           </div>
+          <Gsix
+            :activeName="activeName"
+            :activeNav="activeNav"
+            :backName="backName"
+            :mustVal="mustVal"
+            :arrName="arrName"
+            :upName="upName"
+          ></Gsix>
         </div>
-        <div class="scdCheck" v-if="activeName == 'first' && activeNav == 1">
-          <div class="mostHead" v-if="activeName == 'first' && activeNav == 1">
-            <div class="scd-title">SCD文件一次性检测</div>
-            <span class="closeX" @click="closeX">×</span>
+      </div>
+      <!-- CID一致性校核========= -->
+      <div class="scdCheck" v-if="activeNav == 1">
+        <div class="mostHead mostHead-scd" v-if="activeNav == 1">
+          <div class="scd-title">SCD文件一次性检测</div>
+          <span class="closeX" @click="closeX">×</span>
+        </div>
+        <!-- 右侧内容 -->
+        <div
+          style="
+            width: 97%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 5px;
+          "
+        >
+          <div class="treeBtn">
+            <scdTree
+              :nowStation="nowStation"
+              @scdTreeBack="scdTreeBack"
+              @scdView="scdView"
+              @scdJpadList="scdJpadList"
+            ></scdTree>
           </div>
-          <!-- 右侧内容 -->
-          <div
-            style="
-              width: 97%;
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              margin-top: 5px;
-            "
-          >
-            <div class="treeBtn">
-              <scdTree
-                :nowStation="nowStation"
-                @scdTreeBack="scdTreeBack"
-                @scdView="scdView"
-                @scdJpadList="scdJpadList"
-              ></scdTree>
-            </div>
-            <div class="scdMap">
-              <scdMap
-                :antherBack="antherBack"
-                :scdipadMini="scdipadMini"
-                :activeNav="activeNav"
-                :clickView="clickView"
-              ></scdMap>
-            </div>
+          <div class="scdMap">
+            <scdMap
+              :antherBack="antherBack"
+              :scdipadMini="scdipadMini"
+              :activeNav="activeNav"
+              :clickView="clickView"
+            ></scdMap>
           </div>
         </div>
-        <CrcCheck
-          v-if="activeName == 'first' && activeNav == 3"
-          :nowScdId="nowScdId"
-        ></CrcCheck>
-        <SlcCheck
-          v-if="activeName == 'first' && activeNav == 2"
-          :nowScdId="nowScdId"
-          @sclBack="sclBack"
-        ></SlcCheck>
-        <!-- 虚端子关系图 -->
-        <div v-if="clickNavCode == 'virtual'">
-          <!-- <virtual-relation 
+      </div>
+      <CrcCheck
+        v-if="activeNav == 3"
+        :nowScdId="nowScdId"
+        @sclBack="sclBack"
+      ></CrcCheck>
+      <SlcCheck
+        v-if="activeNav == 2"
+        :nowScdId="nowScdId"
+        @sclBack="sclBack"
+      ></SlcCheck>
+      <!-- 虚端子关系图 -->
+      <div v-if="clickNavCode == 'virtual'">
+        <!-- <virtual-relation 
             :checkData="checkData"
             :isOpen="isOpen"
             :iedRelation="iedRelation"
             @result="result">
           </virtual-relation> -->
-        </div>
-      </el-tab-pane>
-      <el-tab-pane label="SCD可视化" name="second">
-        <scd-visual v-if="!clickNavCode"></scd-visual>
-      </el-tab-pane>
-    </el-tabs>
+      </div>
+    </div>
   </div>
 </template>
   
@@ -191,18 +195,6 @@ const reload = () => {
   nowScdId.value = route.query.id;
   nowStation.value = route.query.station;
 };
-// const clickNav = (navIndex) => {  //点击导航栏事件
-//   activeNav.value = navIndex;
-// }
-// const handleClick = (val) => {
-//   if (val.props.name == 'first') {
-//     activeNav.value = null
-//     activeName.value = val.props.name
-//   }
-// }
-// const reload = () => {
-//   nowScdId.value = route.query.id;
-// };
 //虚端子关系====
 const isOpen = ref(false);
 //虚端子关系====
@@ -218,17 +210,14 @@ const clickNav = (item, navIndex) => {
   }
 };
 const handleClick = (val) => {
-  if (val.props.name == "first") {
-    activeNav.value = null;
-    activeName.value = val.props.name;
-  }
+  activeNav.value = null;
+  activeName.value = val.props.name;
   clickNavCode.value = "";
 };
 const treeBack = (data, ids) => {
   backName.value = data;
   arrName.value = data;
   backId.value = ids;
-  console.log(ids, "ids");
 };
 const closeX = () => {
   activeName.value = "first";
@@ -252,16 +241,12 @@ const nowUpload = (file, e) => {
         });
         scdCheck
           .scdStart({ type: "cid", station_id: nowStation.value - 0, ids: idp })
-          .then((res) => {
-            console.log(res, "show");
-          });
+          .then((res) => {});
       }
     });
 };
 
-const handleRemove = (file, e) => {
-  console.log(file, e, "删除");
-};
+const handleRemove = (file, e) => {};
 const fileSuccess = (file, e) => {
   mustVal.value = true;
 };
@@ -301,64 +286,6 @@ const portExcel = () => {
 onMounted(() => {
   reload();
 });
-
-/*
-    treeList.data = [
-      {
-        alert_level: "",
-        datatype: "voltage_level",
-        id: "153",
-        isParent: "true",
-        pid: 1204000326,
-        title: "110KV",
-      },
-      {
-        alert_level: "",
-        datatype: "voltage_level",
-        id: "186",
-        isParent: "true",
-        pid: 1204000326,
-        title: "10KV",
-      },
-      {
-        alert_level: "",
-        datatype: "SCL",
-        id: 1204000326,
-        isParent: "true",
-        pid: 0,
-        title: "SCL",
-      },
-      { datatype: "area", id: "12607", pid: "153" },
-      { area_id: "12607", pid: "12607" },
-    ];
-
-       children: [
-          {
-            alert_level: "",
-            datatype: "voltage_level",
-            id: "153",
-            isParent: "true",
-            pid: 1204000326,
-            title: "110KV",
-            children: [
-              {
-                datatype: "area",
-                id: "12607",
-                pid: "153",
-                children: [{ area_id: "12607", pid: "12607" }],
-              },
-            ],
-          },
-          {
-            alert_level: "",
-            datatype: "voltage_level",
-            id: "186",
-            isParent: "true",
-            pid: 1204000326,
-            title: "10KV",
-          },
-        ],
-*/
 </script>
 
 <style scoped lang="scss">
@@ -427,6 +354,8 @@ $height: 40px;
 
 // 头部导出excel
 .mostHead {
+  align-items: center;
+  margin-left: 32px;
   width: 97%;
   height: auto;
   border-bottom: 1px solid #a3ade0;
@@ -435,7 +364,9 @@ $height: 40px;
   justify-content: space-between;
   align-items: center;
 }
-
+.mostHead-scd {
+  margin-left: 0;
+}
 .closeX {
   font-size: 24px;
   color: #7484ab;
@@ -453,20 +384,22 @@ $height: 40px;
 }
 
 .abBox {
-  width: 90%;
-  height: 5%;
+  width: 95%;
+  height: 40px;
+  position: relative;
+  margin: 10px auto;
   display: flex;
-  justify-content: space-around;
+  font-size: 14px;
+  background: #fff;
+  justify-content: center;
   align-items: center;
-  background-color: white;
-  margin-left: 10px;
-  position: relative;
+  color: #516380;
 }
 
 .uploadBox {
   position: absolute;
   top: 0px;
-  right: -100px;
+  right:32px;
 }
 
 .scdCheck {
@@ -492,9 +425,23 @@ $height: 40px;
 //scd一致性校验
 .scd-title {
   display: inline-block;
-  margin-right: 2px;
+  margin-right: 16px;
   font-size: 16px;
   color: #1a2447;
   padding-bottom: 12px;
 }
+.mostHead-cid {
+  margin-top: 20px;
+  padding-bottom: 8px;
+  margin-bottom: 0;
+  .export-bottom {
+    display: inline-block;
+    border: 1px solid #255ce7;
+    background: #f6f9ff;
+    color: #255ce7;
+    border-radius: 0;
+    padding: 5px 8px;
+    font-size: 14px;
+  }
+}
 </style>

src/pages/netStructPicture/newTitle/CrcCheck.vue

@@ -1,132 +1,251 @@
 <template>
-    <div class="bigBox">
-        <div class="header">
-            <h1>{{ needFlashName + "——" + needScdName + "——CRC效验结果" }}</h1>
-        </div>
-        <div class="antherHeader">
-            <span style="margin-right: 10px;">SCD文件CRC:<em>{{ scdAndCrc.scdcrc }}</em></span>
-            <span style="margin-right: 10px;">SCD效验CRC:<em>{{ scdAndCrc.checkcrc }}</em></span>
-            <span >效验结果：<em :style="{ color: isTrue ? 'green' : 'red' }">{{ isTrue?'一致':"不一致" }}</em></span>
-        </div>
-        <div class="table">
-            <el-table :data="tableList" stripe style="width: 100%;height: calc(100vh - 260px);">
-                <el-table-column width="80" label="序号">
-                    <template #default="scope">
-                        {{ scope.$index + 1 }}
-                    </template>
-                </el-table-column>
-                <el-table-column prop="iedname" label="装置名称" width="120" />
-                <el-table-column prop="ieddesc" label="装置描述" :show-overflow-tooltip="true" width="260" />
-                <el-table-column prop="manufacturer" label="厂家" width="100" />
-                <el-table-column prop="type" label="型号" />
-                <el-table-column prop="iedversion" label="ied版本" :show-overflow-tooltip="true" />
-                <el-table-column prop="" label="CCD CRC">
-                    <template #default="scope">
-                        无
-                    </template>
-                </el-table-column>
-                <el-table-column prop="scdcrc" label="SCD CRC" />
-                <el-table-column prop="checkcrc" label="效验CRC" />
-                <el-table-column label="效验结果">
-                    <template #default="scope">
-                        <span :style="{ color: scope.row.scdcrc === scope.row.checkcrc ? 'green' : 'red' }">
-                            {{ scope.row.scdcrc === scope.row.checkcrc ? '一致' : '不一致' }}
-                        </span>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
+  <div class="bigBox">
+    <div class="header">
+      <div v-if="needFlashName">
+        {{ needFlashName + " — " + needScdName + " — CRC效验结果" }}
+      </div>
+      <div v-else>CRC效验结果</div>
+      <span class="closeX" @click="closeX">×</span>
     </div>
+    <div class="antherHeader">
+      <span
+        >SCD文件CRC:<span class="desc">{{ scdAndCrc.scdcrc }}</span>
+        <span class="line"></span
+      ></span>
+      <span
+        >SCD效验CRC:<span class="desc">{{ scdAndCrc.checkcrc }}</span>
+        <span class="line"></span
+      ></span>
+      <span
+        >效验结果：<em :style="{ color: isTrue ? 'green' : '#E50505' }">{{
+          isTrue ? "一致" : "不一致"
+        }}</em></span
+      >
+      <el-select
+        v-model="selectValue"
+        class="m-2"
+        placeholder="Select"
+        size="large"
+        style="width: 100px; margin-left: 25px"
+        @change="selectClick"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
+    <div class="table-data">
+      <el-table
+        :data="tableList"
+        stripe
+        height="90%"
+        style="width: 100%;overflow-y: auto;"
+        :cell-style="{ color: '#1A2447', border: 'none', height: '40px' }"
+        :header-cell-style="{
+          color: '#7484AB',
+          borderBottom: '1px solid #A3ADE0',
+        }"
+      >
+        <el-table-column width="80" label="序号">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="iedname" label="装置名称" width="120" />
+        <el-table-column
+          prop="ieddesc"
+          label="装置描述"
+          :show-overflow-tooltip="true"
+          width="260"
+        />
+        <el-table-column prop="manufacturer" label="厂家" width="100" />
+        <el-table-column prop="type" label="型号" />
+        <el-table-column
+          prop="iedversion"
+          label="ied版本"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column prop="" label="CCD CRC">
+          <template> 无 </template>
+        </el-table-column>
+        <el-table-column prop="scdcrc" label="SCD CRC" />
+        <el-table-column prop="checkcrc" label="效验CRC" />
+        <el-table-column label="效验结果">
+          <template #default="scope">
+            <span
+              :style="{
+                color:
+                  scope.row.scdcrc === scope.row.checkcrc
+                    ? '#3BE078'
+                    : '#E50505',
+              }"
+            >
+              {{ scope.row.scdcrc === scope.row.checkcrc ? "一致" : "不一致" }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
 
-<script>
-import { ref, onMounted, watch, onBeforeUnmount, toRefs } from 'vue';
-import scd from "@/api/scd"
-import { ElMessage, ElLoading } from 'element-plus';
-export default {
-    props: {
-        nowScdId: {
-            type: String || Number,
-            required: true
-        }
-    },
-    setup(props, { emit }) {
-        let needScdId = ref("")//需要的scdid
-        let needScdName = ref("")//需要的scd名称
-        let needFlashName = ref("")//需要的变电站名称
-        let tableList = ref([])//crc效验结果表格数据
-        let scdAndCrc = ref({})//scdcrc
-        let isTrue = ref(false)//一致或不一致
-        watch(() => props.nowScdId, (newVal) => {
-            needScdId.value = newVal
-        })
-        function reload() {
-            needScdId.value = props.nowScdId
-            let loading = ElLoading.service({
-                lock: true,
-                text: '正在查询数据',
-                background: 'rgba(0, 0, 0, 0.7)',
-            })
-            Promise.all([
-                scd.getCrc({ scd_id: needScdId.value - 0 }),
-                scd.getScdById({ scd_id: needScdId.value - 0 })
-            ]).then(([res, resTo]) => {
-                if (res.data == null || resTo.data == null) {
-                    loading.close()
-                    ElMessage({
-                        message: "暂无数据",
-                        type: "info"
-                    })
-                    return
-                } else {
-                    tableList.value = res.data.list
-                    needScdName.value = resTo.data.scd_name
-                    needFlashName.value = resTo.data.station_name
-                    scdAndCrc.value = res.data.scdcrc
-                    const isConsistent = tableList.value.every(item => {
-                        return item.scdcrc === item.checkcrc;
-                    });
-                    isTrue.value = isConsistent
-                    loading.close()
-                }
-            })
-        }
-        onMounted(() => {
-            reload()
-        })
-        return {
-            reload,//初始化组件
-            needScdId,//需要的scdid
-            needScdName,//需要的scd名称
-            tableList,//crc效验结果表格数据
-            needFlashName,//需要的变电站名称
-            scdAndCrc,//scdcrc
-            isTrue,//一致或不一致
-        }
+<script setup>
+import { ref, onMounted, watch, onBeforeUnmount, toRefs, nextTick } from "vue";
+import scd from "@/api/scd";
+import { ElMessage, ElLoading } from "element-plus";
+const props = defineProps({
+  nowScdId: {
+    type: String,
+    required: true,
+  },
+});
+const emit = defineEmits(["sclBack"]);
+let needScdId = ref(""); //需要的scdid
+let needScdName = ref(""); //需要的scd名称
+let needFlashName = ref(""); //需要的变电站名称
+let tableList = ref([]); //crc效验结果表格数据
+let scdAndCrc = ref({}); //scdcrc
+let isTrue = ref(false); //一致或不一致
+watch(
+  () => props.nowScdId,
+  (newVal) => {
+    needScdId.value = newVal;
+  }
+);
+const selectValue = ref("1");
+const options = [
+  {
+    value: "1",
+    label: "全部",
+  },
+  {
+    value: "2",
+    label: "不一致",
+  },
+  {
+    value: "3",
+    label: "一致",
+  },
+];
+const originalData = ref([]);
+const reload = () => {
+  needScdId.value = props.nowScdId;
+  let loading = ElLoading.service({
+    lock: true,
+    text: "正在查询数据",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  Promise.all([
+    scd.getCrc({ scd_id: needScdId.value - 0 }),
+    scd.getScdById({ scd_id: needScdId.value - 0 }),
+  ]).then(([res, resTo]) => {
+    if (res.data == null || resTo.data == null) {
+      loading.close();
+      ElMessage({
+        message: "暂无数据",
+        type: "info",
+      });
+      return;
+    } else {
+      originalData.value = [...res.data.list];
+      tableList.value = res.data.list;
+      needScdName.value = resTo.data.scd_name;
+      needFlashName.value = resTo.data.station_name;
+      scdAndCrc.value = res.data.scdcrc;
+      const isConsistent = tableList.value.every((item) => {
+        return item.scdcrc === item.checkcrc;
+      });
+      isTrue.value = isConsistent;
+      loading.close();
     }
-}
+  });
+};
+//选择全部还是不一致等
+const selectClick = (value) => {
+  // 备份最初的数据
+  if (value == "3") { // 一致
+    tableList.value = originalData.value.filter(
+      (item) => item.checkcrc == item.scdcrc
+    );
+  } else if (value == "2") { // 不一致
+    tableList.value = originalData.value.filter(
+      (item) => item.checkcrc != item.scdcrc
+    );
+  } else { // 全部
+    tableList.value = originalData.value;
+  }
+};
+const closeX = () => {
+  emit("sclBack", 2);
+};
+onMounted(() => {
+  reload();
+});
 </script>
 
-<style scoped>
-em{
-    list-style: none;
-    font-style: normal;
+<style scoped lang="scss">
+em {
+  list-style: none;
+  font-style: normal;
 }
 .bigBox {
-    width: 97%;
-    height: calc(100vh - 230px);
-    margin-left: 18px;
+  width: 97%;
+  height: calc(100vh - 230px);
+  margin-left: 32px;
 }
 
 .header {
-    width: 100%;
-    height: auto;
-    text-align: center;
+  width: 100%;
+  height: auto;
+  text-align: center;
 }
 
 .antherHeader {
-    width: 100%;
-    height: auto;
-    text-align: center;
+  width: 100%;
+  height: auto;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  color: #1a2447;
+  font-size: 16px;
+  margin: 16px 0;
+  .desc {
+    color: #255ce7;
+    margin-left: 6px;
+    // padding-right: 25px;
+    // border-right:1px solid #516380;
+  }
+  .line {
+    display: inline-block;
+    width: 1px;
+    height: 14px;
+    margin: 0 25px;
+    background: #516380;
+  }
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  width: 100%;
+  height: auto;
+  padding: 12px 0 20px 0;
+  border-bottom: 1px solid #a3ade0;
+  color: #1a2447;
+}
+.closeX {
+  font-size: 24px;
+  color: #7484ab;
+  cursor: pointer;
+}
+
+.table-data {
+  height: 100%;
+  margin-left: 16px;
+  overflow-y: auto;
 }
 </style>

src/pages/netStructPicture/newTitle/SlcCheck.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="bigBox">
     <div class="header">
-      <div>{{ flashName + "——" + scdName + "——SLC效验" }}</div>
+      <div v-if="flashName">
+        {{ flashName + " — " + scdName + " — SLC效验" }}
+      </div>
+      <div v-else>SLC效验</div>
       <span class="closeX" @click="closeX">×</span>
     </div>
     <div class="main">
       <div class="treeBox">
+        <div class="tree-title">
+          <img :src="HardDrives" alt="" />
+          <span>基本语法校验结果</span>
+        </div>
         <el-tree
+          class="trees"
           :data="treeData"
           :props="defaultProps"
           @node-click="handleNodeClick"
@@ -118,7 +126,7 @@
               </template>
             </el-table-column>
             <el-table-column prop="ied_desc" label="装置描述" width="200" />
-            <el-table-column prop="alert_level" label="等级" width="80">
+            <el-table-column prop="alert_level" label="等级" width="100">
               <template #default="scope">
                 <span v-if="scope.row.alert_level === 'waring'" class="waring"
                   >警告</span
@@ -133,10 +141,14 @@
                 >
               </template>
             </el-table-column>
-            <el-table-column prop="line_no" label="行号" width="80">
+            <el-table-column prop="line_no" label="行号" width="100">
               <template #default="scope">
                 <span
-                  style="color: #255ce7; cursor: pointer"
+                  style="
+                    color: #255ce7;
+                    cursor: pointer;
+                    border-bottom: 1px solid #255ce7;
+                  "
                   @click="lineNoClick(scope.row)"
                   >{{ scope.row.line_no }}</span
                 >
@@ -146,7 +158,7 @@
             <el-table-column
               prop="apply_standard"
               label="标准及条款"
-              width="200"
+              width="250"
             >
               <template #default="scope">
                 <span>{{ getBeforeComma(scope.row.apply_standard) }}</span>
@@ -163,11 +175,14 @@
             </el-table-column>
           </el-table>
           <div class="page">
+            <span>共{{ tableData.count }}项数据</span>
             <el-pagination
               :current-page="pageindex"
-              :page-size="pagesize"
-              layout="total, prev, pager, next"
+              v-model:page-size="pagesize"
+              :page-sizes="[10, 20, 50, 100]"
+              layout="sizes,prev, pager, next, jumper"
               :total="tableData.count"
+              background
               @current-change="handleCurrentChange"
             />
           </div>
@@ -196,22 +211,21 @@
       </div>
     </el-dialog>
     <!-- 点击行号 -->
-    <el-dialog
-      v-model="lineNoShow"
-      width="50vw"
-      append-to-body
-      draggable
-    >
+    <el-dialog v-model="lineNoShow" width="50vw" append-to-body draggable>
       <template #header>
         <div class="my-header">
           <div class="title">SCD源XML查看</div>
         </div>
       </template>
-      <div class="line-title"> {{ lineNoTitle }}</div>
+      <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.includes(clicklineNOData)}">
+            <div
+              v-for="(item, index) in lineNoData"
+              :key="index"
+              :class="{ 'click-line': item.split(' <')[0] == clicklineNOData }"
+            >
               {{ item }}
             </div>
           </div>
@@ -226,8 +240,6 @@ import { ref, onMounted, toRefs, watch, reactive } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import scd from "@/api/scd";
 import slc from "@/api/slc/slc";
-import systemRow from "@/api/systemRow";
-import Pagnation from "../utils/Pagnation.vue";
 import { ElMessage, ElLoading } from "element-plus";
 import FileArrowUp from "@/assets/image/sclFile/FileArrowUp.png";
 import dangerError from "@/assets/image/sclFile/danger_error.png";
@@ -236,8 +248,7 @@ import dangerWarning from "@/assets/image/sclFile/danger_warning.png";
 import FileCodeOne from "@/assets/image/sclFile/FileCodeOne.png";
 import FolderNotchOne from "@/assets/image/sclFile/FolderNotchOne.png";
 import FolderOpentop from "@/assets/image/sclFile/FolderOpentop.png";
-import merge from "@/assets/image/sclFile/merge.png";
-import expand from "@/assets/image/sclFile/expand.png";
+import HardDrives from "@/assets/image/sclFile/HardDrives.png";
 import { scdExpTableData, scdLineSourcexml } from "@/api/scdCheck/scdCheck2";
 const props = defineProps({
   nowScdId: {
@@ -272,7 +283,6 @@ const emit = defineEmits(["sclBack"]);
 const tableLoading = ref(false);
 const closeX = () => {
   emit("sclBack", 2);
-  // router.push("/home/netStructPicture")
 };
 const reload = () => {
   scdid.value = parseInt(props.nowScdId);
@@ -289,9 +299,9 @@ const reload = () => {
     slc.getScdByIdFromMission({
       pageno: 1,
       pagesize: 20,
-      scd_id: 1380000372,
+      scd_id: scdid.value,
     }), //获取表格的全部数据resultList
-    slc.getScdByIdTree({ scd_id: 1380000372 }), //获取侧边栏树的数据treeList
+    slc.getScdByIdTree({ scd_id: scdid.value }), //获取侧边栏树的数据treeList
     // systemRow.getChildren({ code: "voltage_level" }),
   ]).then(([sclInfo, levelData, resultList, treeList]) => {
     treeData.value = [];
@@ -356,7 +366,7 @@ const handleCurrentChange = async (val) => {
   const res = await slc.getScdByIdFromMission({
     pageno: pageindex.value,
     pagesize: 20,
-    scd_id: 1380000372,
+    scd_id: scdid.value,
     node_name: nodeName,
     node_id: nodeId,
     level: levels,
@@ -397,7 +407,7 @@ const ErrorByLevel = async () => {
   const nodeName = clickTreeData.value ? clickTreeData.value.datatype : "";
   const nodeId = clickTreeData.value ? clickTreeData.value.id : "";
   const levelRes = await slc.getErrorByLevel({
-    scd_id: 1380000372,
+    scd_id: scdid.value,
     node_name: nodeName,
     node_id: nodeId,
   });
@@ -427,7 +437,7 @@ const excelPort = () => {
       "line_no,CREATED_TIME,attr_name,attr_desc,alert_level,parse_result,apply_standard,apply_standard_no",
     expcolnames:
       "行号,日期,装置名称,装置描述,等级,校验结果内容,应用标准,标准条款",
-    scd_id: 1380000372,
+    scd_id: scdid.value,
     node_name: nodeName,
     node_id: nodeId,
   }).then((res) => {
@@ -445,13 +455,13 @@ const excelPort = () => {
 const lineNoData = ref(null);
 const lineNoShow = ref(false);
 const lineNoTitle = ref("");
-const clicklineNOData = ref('')
+const clicklineNOData = ref("");
 const lineNoClick = async (val) => {
   lineNoShow.value = true;
   clicklineNOData.value = val.line_no;
   lineNoTitle.value = val.parse_result;
   const res = await scdLineSourcexml({
-    scd_id: 1380000372,
+    scd_id: scdid.value,
     lineno: val.line_no,
   });
   lineNoData.value = res.data;
@@ -491,10 +501,12 @@ em {
   justify-content: space-around;
   align-items: center;
   margin-top: 16px;
+  .trees {
+    margin: 16px;
+  }
 }
-
 .treeBox {
-  width: 20%;
+  width: 16%;
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
@@ -686,8 +698,14 @@ em {
 // }
 .page {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: center;
   margin-top: 10px;
+  color: #1a2447;
+  font-size: 14px;
+  :deep(.el-pagination.is-background .el-pager li.is-active) {
+    --el-color-primary: #a3ade0;
+  }
 }
 //自定义节点图标
 .custom-trees {
@@ -728,7 +746,6 @@ em {
   width: 16px;
   height: 16px;
   background-size: 16px;
-  margin-right: 10px;
 }
 .custom-tree-node {
   .label {
@@ -758,7 +775,7 @@ em {
 }
 .main-line {
   margin-top: -20px;
-  &>div:first-child{
+  & > div:first-child {
     padding-top: 40px;
   }
 }
@@ -770,9 +787,23 @@ em {
   border-bottom: 1px solid #cbccd3;
   margin-top: -20px;
 }
-.click-line{
+.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;
+  }
+}
 </style>