scd一致性校验样式修改，文件上传

src/api/scdCheck/scdCheck.js

@@ -15,7 +15,7 @@ function switchIed(data){//指定装置差异对比结果分类统计
 }
 function flashStation(data){
     return request({
-        url:`/scd_check_tools/comp/list`,//获取指定变电站的差异对比记录列表
+        url:`/scd/comp/result`,//获取指定变电站的差异对比记录列表
         method:"get",
         params:data
     })

src/api/scdCheck/scdCheck2.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+//获取scd列表
+export function uploadfile(data) {
+  return request({
+    url: '/uploadfile',
+    method: 'post',
+    data,
+    headers: {
+      'content-Type': 'multipart/form-data',
+    }
+  })
+}

src/pages/mission/components/HaveMis.vue

@@ -130,6 +130,7 @@ export default {
         query: {
           id: row.scd_id,
           name: 'UnitTest_检测任务',
+          stationId:row.station_id
         },
       });
     }

src/pages/netStructPicture/components/ScdNow.vue

@@ -1,259 +1,217 @@
 <template>
-    <div style="display: flex;justify-content: space-around; align-items: center;">
-        <div class="scdBox">
-            <div>
-                <img src="../../../assets/image/squer_scd.png" alt="">
-                <p>SCD版本</p>
-            </div>
-            <div>
-                <div id="oldScd">
-                    <img src="../../../assets/icon/cilce_gray.png" alt="">
-                    <span>V1.1.0</span>
-                </div>
-                <div id="newScd">
-                    <img src="../../../assets/icon/clice_blue.png" alt="">
-                    <span>V1.1.1</span>
-                </div>
-            </div>
+  <div class="main">
+    <div class="scdBox">
+      <div class="navs">
+        <img src="../../../assets/image/squer_scd.png" alt="" />
+        <p>SCD版本</p>
+      </div>
+      <div>
+        <div id="oldScd">
+          <img src="../../../assets/icon/cilce_gray.png" alt="" />
+          <span>V1.1.0</span>
         </div>
-        <div class="crcBox">
-            <div>
-                <img src="../../../assets/image/squer_crc.png" alt="">
-                <p>CRC</p>
-            </div>
-            <div>
-                <div id="oldCrc">
-                    <img src="../../../assets/icon/cilce_gray.png" alt="">
-                    <span>1000000111100000</span>
-                </div>
-                <div id="newCrc">
-                    <img src="../../../assets/icon/clice_blue.png" alt="">
-                    <span>1000000111100022</span>
-                </div>
-            </div>
+        <img :src="jiantouPng" alt="" class="jiantou" />
+        <div id="newScd">
+          <img src="../../../assets/icon/clice_blue.png" alt="" />
+          <span>1000000111100022</span>
         </div>
-        <div class="iedBox">
-            <div id="oldIed">
-                <img src="../../../assets/image/squer_ied.png" alt="">
-                <p>IED</p>
-            </div>
-            <div id="newIed">
-                <p id="addId" @click="lookAdd">
-                    <el-icon style="color: #1D48E8;font-size: 18px;display: block;">
-                        <CirclePlus />
-                    </el-icon>
-                    <span style="display: block;color: #1D48E8;">新增(5)</span>
-                </p>
-                <p id="editId" @click="lookEdit">
-                    <el-icon style="color: #FECC2A;font-size: 18px;display: block;">
-                        <EditPen />
-                    </el-icon>
-                    <span style="display: block;color: #FECC2A;">修改(10)</span>
-                </p>
-                <p id="delId" @click="lookDel">
-                    <el-icon style="color: red;font-size: 18px;display: block;">
-                        <Delete />
-                    </el-icon>
-                    <span style="display: block;color: red;">删除(2)</span>
-                </p>
-            </div>
+      </div>
+    </div>
+    <div class="crcBox">
+      <div class="navs">
+        <img src="../../../assets/image/squer_crc.png" alt="" />
+        <p>CRC</p>
+      </div>
+      <div>
+        <div id="oldCrc">
+          <img src="../../../assets/icon/cilce_gray.png" alt="" />
+          <span>1000000111100000</span>
+        </div>
+        <img :src="jiantouPng" alt="" class="jiantou" />
+        <div id="newCrc">
+          <img src="../../../assets/icon/clice_blue.png" alt="" />
+          <span>1000000111100022</span>
         </div>
+      </div>
     </div>
+    <div class="iedBox">
+      <div id="oldIed">
+        <img src="../../../assets/image/squer_ied.png" alt="" />
+        <p>IED</p>
+      </div>
+      <div id="newIed">
+        <p id="addId" @click="lookAdd">
+          <img :src="newlyPng" alt="" class="icons"/>
+          <span style="color: #134BEA">新增(5)</span>
+        </p>
+        <p id="editId" @click="lookEdit">
+          <img :src="modifyPng" alt="" class="icons" />
+          <span style="color: #FFCB11">修改(10)</span>
+        </p>
+        <p id="delId" @click="lookDel">
+          <img :src="delPng" alt="" class="icons"/>
+          <span style="color: #E50505">删除(2)</span>
+        </p>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
-import { ref, onMounted, toRefs, watch, onBeforeUnmount } from 'vue';
-import LeaderLine from '../../../../public/leader-line.min.js';
-export default {
-    setup(props,{emit}) {
-        let lineList = []
-        let lookType = ref(0)
-        function lineWrite() {
-            let oldScd = document.getElementById("oldScd")
-            let newScd = document.getElementById("newScd")
-            let oldCrc = document.getElementById("oldCrc")
-            let newCrc = document.getElementById("newCrc")
-            let oldIed = document.getElementById("oldIed")
-            let newIed = document.getElementById("newIed")
-            let addId = document.getElementById("addId")
-            let editId = document.getElementById('editId')
-            let delId = document.getElementById("delId")
-            lineList.push(new LeaderLine(oldScd, newScd, {
-                color: "blue",//连接线颜色
-                size: 10,//连接线宽度
-                path: "straight",//连接线样式
-                startSocket: "bottom",//开始链接元素位置
-                endSocket: "top",//结束链接元素位置
-                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
-            }))
-            lineList.push(new LeaderLine(oldCrc, newCrc, {
-                color: "blue",//连接线颜色
-                size: 10,//连接线宽度
-                path: "straight",//连接线样式
-                startSocket: "bottom",//开始链接元素位置
-                endSocket: "top",//结束链接元素位置
-                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
-            }))
-            lineList.push(new LeaderLine(oldIed, addId, {
-                color: "gray",//连接线颜色
-                size: 2,//连接线宽度
-                path: "grid",//连接线样式
-                startSocket: "bottom",//开始链接元素位置
-                endSocket: "left",//结束链接元素位置
-                endPlug: 'disc',//结束箭头
-                endPlugSize: 2,//结束箭头size
-            }))
-            lineList.push(new LeaderLine(oldIed, editId, {
-                color: "gray",//连接线颜色
-                size: 2,//连接线宽度
-                path: "grid",//连接线样式
-                startSocket: "bottom",//开始链接元素位置
-                endSocket: "left",//结束链接元素位置
-                endPlug: 'disc',//结束箭头
-                endPlugSize: 2,//结束箭头size
-            }))
-            lineList.push(new LeaderLine(oldIed, delId, {
-                color: "gray",//连接线颜色
-                size: 2,//连接线宽度
-                path: "grid",//连接线样式
-                startSocket: "bottom",//开始链接元素位置
-                endSocket: "left",//结束链接元素位置
-                endPlug: 'disc',//结束箭头
-                endPlugSize: 2,//结束箭头size
-            }))
-        }
-        function lookAdd() {
-            lookType.value = 1
-            emit('nowBack',lookType.value)
-        }
-        function lookEdit() {
-            lookType.value = 2
-            emit('nowBack',lookType.value)
-        }
-        function lookDel() {
-            lookType.value = 3
-            emit('nowBack',lookType.value)
-        }
-        onMounted(()=>{
-            setTimeout(()=>{
-                lineWrite()
-            },1500)
-        })
-        onBeforeUnmount(()=>{
-            lineList.forEach(item=>item.remove())
-        })
-        return {
-            lineWrite,
-            lineList,
-            lookType,
-            lookAdd,//查看新增
-            lookDel,//查看删除
-            lookEdit,//查看修改
-        }
-    }
-}
+<script setup>
+import {
+  ref,
+  onMounted,
+  toRefs,
+  watch,
+  onBeforeUnmount,
+  defineEmits,
+} from "vue";
+import LeaderLine from "../../../../public/leader-line.min.js";
+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";
+let lineList = [];
+let lookType = ref(0);
+const emit = defineEmits(["nowBack"]);
+const lineWrite = () => {
+  let oldIed = document.getElementById("oldIed");
+  let newIed = document.getElementById("newIed");
+  let addId = document.getElementById("addId");
+  let editId = document.getElementById("editId");
+  let delId = document.getElementById("delId");
+  lineList.push(
+    new LeaderLine(oldIed, addId, {
+      color: "#7484AB", //连接线颜色
+      size: 2, //连接线宽度
+      path: "grid", //连接线样式
+      startSocket: "bottom", //开始链接元素位置
+      endSocket: "left", //结束链接元素位置
+      endPlug: "disc", //结束箭头
+      endPlugSize: 2, //结束箭头size
+    })
+  );
+  lineList.push(
+    new LeaderLine(oldIed, editId, {
+      color: "#7484AB", //连接线颜色
+      size: 2, //连接线宽度
+      path: "grid", //连接线样式
+      startSocket: "bottom", //开始链接元素位置
+      endSocket: "left", //结束链接元素位置
+      endPlug: "disc", //结束箭头
+      endPlugSize: 2, //结束箭头size
+    })
+  );
+  lineList.push(
+    new LeaderLine(oldIed, delId, {
+      color: "#7484AB", //连接线颜色
+      size: 2, //连接线宽度
+      path: "grid", //连接线样式
+      startSocket: "bottom", //开始链接元素位置
+      endSocket: "left", //结束链接元素位置
+      endPlug: "disc", //结束箭头
+      endPlugSize: 2, //结束箭头size
+    })
+  );
+};
+const lookAdd = () => {
+  lookType.value = 1;
+  emit("nowBack", lookType.value);
+};
+const lookEdit = () => {
+  lookType.value = 2;
+  emit("nowBack", lookType.value);
+};
+const lookDel = () => {
+  lookType.value = 3;
+  emit("nowBack", lookType.value);
+};
+onMounted(() => {
+  setTimeout(() => {
+    lineWrite();
+  }, 1500);
+});
+onBeforeUnmount(() => {
+  lineList.forEach((item) => item.remove());
+});
 </script>
 
-<style>
+<style scoped lang="scss">
+.main {
+  display: flex;
+  justify-content: center;
+}
 p {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
 }
-.scdBox {
-    width: 33%;
-    height: auto;
-    text-align: center;
-    /* border: 1px solid red; */
+.scdBox,.crcBox,.iedBox {
+  width:23%;
+  height: auto;
+  text-align: center;
+  /* border: 1px solid red; */
 }
 
 .crcBox {
-    width: 33%;
-    height: auto;
-    text-align: center;
-    /* border: 1px solid red; */
 }
 
 .iedBox {
-    width: 33%;
-    height: auto;
-    text-align: center;
-    /* border: 1px solid red; */
-    position: relative;
+  position: relative;
 }
 #newIed {
-    position: absolute;
-    top: 100px;
-    right: -10px;
-}
-
-#oldScd {
-    margin-bottom: 40px;
-}
-
-#oldCrc {
-    margin-bottom: 40px;
+  position: absolute;
+  right: -50px;
+  margin-top: 24px;
+  span{
+    font-size: 16px;
+  }
 }
 
-#addId {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 112px;
-    height: 40px;
-    border: 1px dashed #1D48E8;
-    background-color: rgb(239, 243, 255);
-    border-radius: 5px;
-    margin-bottom: 20px;
-    cursor: pointer;
+#addId,#editId,#delId {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 112px;
+  height: 40px;
+  border: 2px dashed #255CE7;
+  background-color: rgb(239, 243, 255);
+  border-radius: 2px;
+  margin-bottom: 20px;
+  cursor: pointer;
 }
 
 #editId {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 112px;
-    height: 40px;
-    border: 1px dashed #FECC2A;
-    background-color: rgb(255, 251, 242);
-    border-radius: 5px;
-    margin-bottom: 20px;
-    cursor: pointer;
+  border: 2px dashed #FFCB11;
+  background-color: rgb(255, 251, 242);
 }
 
 #delId {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 112px;
-    height: 40px;
-    border: 1px dashed red;
-    background-color: rgb(255, 236, 236);
-    border-radius: 5px;
-    margin-bottom: 20px;
-    cursor: pointer;
+  border: 2px dashed #E50505;
+  background-color: rgb(255, 236, 236);
+}
+.jiantou {
+  width: 10px;
+  height: 42px;
+  margin: 4px 0;
+}
+#oldScd,
+#oldCrc {
+  color: #7484ab;
+  font-size: 16px;
+}
+#newScd,
+#newCrc {
+  font-size: 16px;
+}
+.navs {
+  color: #1a2447;
+  font-size: 16px;
+  margin-bottom: 24px;
+}
+.icons{
+    width: 20px;
+    height: 20px;
+    margin-right: 4px;
 }
 </style>

src/pages/netStructPicture/components/netWork.vue

@@ -109,8 +109,8 @@ const listCat = ref([]); //长横线的类型名称
 const ipNetaddrData = ref([]); //ip数据
 const loadDating = ref(false);
 const openBig = ref(false);
-const scdIdValue = 644000176;
-// const scdIdValue = route.query.id;
+// const scdIdValue = 644000176;
+const scdIdValue = route.query.id;
 //线条背景颜色
 const backColorList = ref([
   {

src/pages/netStructPicture/components/scdMap.vue

@@ -2,10 +2,10 @@
     <div>
         <div class="fileBox">
             <div>
-                <span style="border-right: 1px solid black;padding-right: 200px;">基准文件:{{ chicken }}</span>
+                <span style="border-right: 1px solid #516380;padding-right: 200px;">基准文件:<span style="color:#09162C;">{{ chicken }}</span></span>
             </div>
             <div>
-                <span>对比文件:{{ kun }}</span>
+                <span>对比文件:<span style="color:#09162C;">{{ kun }}</span></span>
             </div>
         </div>
         <!-- <div class="mapBox" v-if="lookType == 0"> -->
@@ -68,7 +68,9 @@
                 </div>
             </div> -->
         <!-- </div> -->
-        <ScdNow v-if="lookType == 0" @nowBack="nowBack" :arrNew="arrNew"></ScdNow>
+        <div class="right-main">
+            <ScdNow v-if="lookType == 0" @nowBack="nowBack" :arrNew="arrNew"></ScdNow>
+        </div>
         <ScdAdd v-if="lookType == 1" :arrNew="arrNew"></ScdAdd>
         <ScdDel v-if="lookType == 3" :arrNew="arrNew"></ScdDel>
         <ScdEdit v-if="lookType == 2" :arrNew="arrNew"></ScdEdit>
@@ -172,7 +174,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped lang="scss">
 p {
     margin: 0;
     padding: 0;
@@ -180,16 +182,17 @@ p {
 
 .fileBox {
     width: 90%;
-    height: calc(100vh - 900px);
+    height: 40px;
     background-color: white;
     margin: 10px auto;
     display: flex;
     justify-content: space-around;
     align-items: center;
+    color: #516380;
 }
 
 .mapBox {
-    width: 90%;
+    width: 100%;
     height: calc(100vh - 350px);
     margin: 0 auto;
     display: flex;
@@ -225,14 +228,6 @@ p {
     right: 0px;
 }
 
-#oldScd {
-    margin-bottom: 40px;
-}
-
-#oldCrc {
-    margin-bottom: 40px;
-}
-
 #addId {
     display: flex;
     justify-content: center;

src/pages/netStructPicture/components/scdTree.vue

@@ -1,138 +1,278 @@
 <template>
-    <div>
-        <div class="btnBox">
-            <el-button type="primary" plain @click="checkNow">
-                <el-icon>
-                    <Plus />
-                </el-icon>
-                新的比对</el-button>
-            <el-button type="primary" plain @click="reloadCheck">
-                <el-icon>
-                    <RefreshLeft />
-                </el-icon>
-                重新比对</el-button>
-            <el-button type="primary" plain @click="excelPort">
-                <el-icon>
-                    <DocumentAdd />
-                </el-icon>
-                导出所有结果</el-button>
-        </div>
-        <div class="tableBox">
-            <el-table ref="multipleTableRef" :data="tableList" style="width: 100%;height: calc(100vh - 320px);" stripe
-                @selection-change="handleSelectionChange" @select-all="chooseAll">
-                <el-table-column type="selection" width="55" />
-                <el-table-column label="对比scd" width="190" :show-overflow-tooltip="true">
-                    <template #default="scope">{{ scope.row.name }}</template>
-                </el-table-column>
-                <el-table-column property="CREATED_TIME" label="时间" width="auto" :show-overflow-tooltip="true" />
-                <el-table-column fixed="right" label="操作" width="120">
-                    <template #default="scope">
-                        <el-button link type="primary" size="small" @click="searchScdCheck(scope.row)"><el-icon>
-                                <View />
-                            </el-icon>查看</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-        <div>
-            <LookScd v-if="lookScdModal" :lookScdModal="lookScdModal" :aktType="aktType" @lookScdBack="lookScdBack">
-            </LookScd>
-        </div>
+  <div>
+    <div class="btnBox">
+      <div @click="checkNow">
+        <img :src="addPng" alt="" />
+        <span>新的比对</span>
+      </div>
+      <div @click="reloadCheck">
+        <img :src="againPng" alt="" />
+        <span>重新比对</span>
+      </div>
+      <div @click="excelPort">
+        <img :src="dervicePng" alt="" />
+        <span>导出所有结果</span>
+      </div>
+    </div>
+    <div class="tableBox">
+      <el-table
+        ref="multipleTableRef"
+        :data="tableList"
+        style="width: 100%; height: calc(100vh - 320px)"
+        stripe
+        @selection-change="handleSelectionChange"
+        @select-all="chooseAll"
+        :header-cell-style="{
+          background: '#F7F8FB !important',
+          color: '#7484AB',
+          borderBottom: '1px solid #A3ADE0 !important',
+          fontWeight: '400',
+        }"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column
+          label="对比scd"
+          width="190"
+          :show-overflow-tooltip="true"
+        >
+          <template #default="scope">{{ scope.row.name }}</template>
+        </el-table-column>
+        <el-table-column
+          property="CREATED_TIME"
+          label="时间"
+          width="auto"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column fixed="right" label="操作" width="120">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              size="small"
+              @click="searchScdCheck(scope.row)"
+              ><el-icon> <View /> </el-icon>查看</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
+    <!-- <div>新的对比
+      <LookScd
+        v-if="lookScdModal"
+        :lookScdModal="lookScdModal"
+        :aktType="aktType"
+        @lookScdBack="lookScdBack"
+      >
+      </LookScd>
+    </div> -->
+    <!-- 新的对比弹窗 -->
+    <el-dialog
+      @close="cancelClick"
+      v-model="lookScdModal"
+      width="40vw"
+      style="height: 400px"
+      append-to-body
+      draggable
+    >
+      <template #header>
+        <div class="my-header">
+          <div class="title">请选择对比的SCD文件</div>
+        </div>
+      </template>
+      <div class="uploda-file">
+        请选择：
+        <el-upload
+          v-model:file-list="fileList"
+          :limit="1"
+          class="upload-demo"
+          :http-request="uploadFile"
+          :on-change="fileSuccess"
+          :on-remove="handleRemove"
+        >
+          <template #trigger>
+            <div class="upload-title">
+              <img :src="dervicePng" alt="" />
+              <span>上传文件</span>
+            </div>
+          </template>
+        </el-upload>
+      </div>
+      <div class="sures sureUpload">确认上传</div>
+      <div class="sures startContrast">开始对比</div>
+    </el-dialog>
+  </div>
 </template>
 
-<script>
-import { ref, onMounted, toRefs, watch, nextTick } from 'vue';
-import scdCheck from '@/api/scdCheck/scdCheck'
-import scd from '@/api/scd';
-import systemRow from '@/api/systemRow';
-import { ElMessage, ElLoading } from 'element-plus';
-import LookScd from '../modalCom/LookScd.vue';
-export default {
-    setup(props, { emit }) {
-        let tableList = ref([])
-        let multipleTableRef = ref()
-        let alreadyTriggered = ref(false)
-        let scdid = ref([])
-        const loading = ref(false)
-        let lookScdArr = ref([])
-        let lookScdModal = ref(false)
-        function handleSelectionChange(e) {//复选
-        }
-        function chooseAll(e) {//全选
-        }
-        function checkNow() {//scd比对
-            lookScdModal.value = true
-        }
-        function excelPort() {//导出excel
-            systemRow.portExcel({
-                code: "scd-comp-result"
-            }).then(res => {
-                console.log(res, 'port');
-                if (res.data) {
-                    return
-                } else {
-                    ElMessage({
-                        message: res.msg,
-                        type: "info"
-                    })
-                }
-            })
-        }
-        function reloadCheck() {//重新比对
-            checkNow()
-        }
-        function searchScdCheck(row) {//查看scd对比
-            const loading = ElLoading.service({
-                lock: true,
-                text: '正在查询数据',
-                background: 'rgba(0, 0, 0, 0.7)',
-            })
-            scdCheck.scdResult({ comp_id: row.id }).then(res => {
-                console.log(res, '对比详细');
-                if(res.code == 0){
-                    loading.close()
-                }
-            })
-            // scdCheck.scdAll({ comp_id: row.id }).then(res => {
-            //     console.log(res, '阿拉蕾');
-            // })
-        }
-        function lookScdBack(data, row) {//选择scd文件模态框返回数据
-            lookScdModal.value = data
-            lookScdArr.value = row
-            emit('scdTreeBack', lookScdArr.value)
-        }
-        function aktType() {//初始化数据
-            scdCheck.flashStation({ station_id: 861 }).then(res => {//获取差异纪录列表
-                tableList.value = res.data
-            })
-        }
-        onMounted(() => {
-            aktType()
-        })
-        return {
-            tableList,//表格内容
-            handleSelectionChange,//表格复选
-            chooseAll,//表格全选
-            multipleTableRef,//表格ref
-            alreadyTriggered,//控制开关
-            scdid,//选择的scd文件数组
-            checkNow,//开始比对
-            loading,//正在加载
-            excelPort,//导出excel
-            reloadCheck,//重新比对
-            lookScdModal,//查看scd文件的模态框开关
-            lookScdBack,//选择scd文件模态框返回函数
-            searchScdCheck,//表格查看按钮
-            lookScdArr,
-            aktType,//初始化数据
-        }
-    },
-    components: {
-        LookScd,
+<script setup>
+import { ref, onMounted, toRefs, watch, nextTick, defineEmits } from "vue";
+import scdCheck from "@/api/scdCheck/scdCheck";
+import { uploadfile } from "@/api/scdCheck/scdCheck2";
+import scd from "@/api/scd";
+import systemRow from "@/api/systemRow";
+import { ElMessage, ElLoading } from "element-plus";
+import LookScd from "../modalCom/LookScd.vue";
+import dervicePng from "@/assets/image/scdcheck/derive.png";
+import againPng from "@/assets/image/scdcheck/again.png";
+import addPng from "@/assets/image/scdcheck/add.png";
+import { useRoute } from "vue-router";
+const route = useRoute();
+const emit = defineEmits(["scdTreeBack"]);
+let tableList = ref([]);
+let multipleTableRef = ref();
+let alreadyTriggered = ref(false);
+let scdid = ref([]);
+const loading = ref(false);
+let lookScdArr = ref([]);
+let lookScdModal = ref(false);
+const fileList = ref([]); //上传的文件
+const handleSelectionChange = (e) => {
+  //复选
+};
+const chooseAll = (e) => {
+  //全选
+};
+const checkNow = (e) => {
+  //scd比对
+  lookScdModal.value = true;
+};
+const excelPort = () => {
+  //导出excel
+  systemRow
+    .portExcel({
+      code: "scd-comp-result",
+    })
+    .then((res) => {
+      console.log(res, "port");
+      if (res.data) {
+        return;
+      } else {
+        ElMessage({
+          message: res.msg,
+          type: "info",
+        });
+      }
+    });
+};
+const reloadCheck = () => {
+  //重新比对
+  checkNow();
+};
+const uploadFile = async (e) => {
+  console.log("e", e);
+  const fileRes = await uploadfile({
+    file: e.file,
+    station_id: route.query.stationId,
+    is_checkin: 0,
+    data_type: "a_scd",
+  });
+  if (fileRes.code == 0) {
+    ElMessage({
+      type: "success",
+      message: "上传成功!",
+    });
+  }else{
+    ElMessage({
+      type: "error",
+      message: "上传失败!",
+    });
+  }
+};
+const searchScdCheck = (row) => {
+  //查看scd对比
+  const loading = ElLoading.service({
+    lock: true,
+    text: "正在查询数据",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  scdCheck.scdResult({ comp_id: row.id }).then((res) => {
+    console.log(res, "对比详细");
+    if (res.code == 0) {
+      loading.close();
     }
-}
+  });
+  // scdCheck.scdAll({ comp_id: row.id }).then(res => {
+  //     console.log(res, '阿拉蕾');
+  // })
+};
+const lookScdBack = (data, row) => {
+  //选择scd文件模态框返回数据
+  lookScdModal.value = data;
+  lookScdArr.value = row;
+  emit("scdTreeBack", lookScdArr.value);
+};
+const aktType = () => {
+  //初始化数据
+  scdCheck.flashStation({ station_id: route.query.stationId }).then((res) => {
+    //获取差异纪录列表
+    tableList.value = res.data;
+  });
+};
+onMounted(() => {
+  aktType();
+});
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.btnBox > div,
+.upload-title {
+  height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  cursor: pointer;
+  background: url("~@/assets/image/scdcheck/bgscd.png") no-repeat center;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #255ce7;
+  img {
+    width: 20px;
+    height: 20px;
+    margin: 0 4px 0 0;
+  }
+}
+.upload-title {
+  width: 102px;
+  background-size: 102px 45px;
+}
+.btnBox {
+  display: flex;
+  margin-bottom: 12px;
+
+  & > div:first-child,
+  & > div:nth-child(2) {
+    width: 102px;
+    background-size: 102px 45px;
+  }
+  & > div:last-child {
+    width: 128px;
+    background-size: 128px 45px;
+  }
+}
+.my-header {
+  border-bottom: 1px solid #a3ade0;
+  font-size: 16px;
+  color: #1a2447;
+  .title {
+    padding-bottom: 15px;
+  }
+}
+.uploda-file {
+  display: flex;
+  align-items: center;
+}
+.upload-demo {
+  display: flex;
+}
+.sures{
+  background: #a4b0cf;
+    margin-left: 60px;
+    color: #fff;
+    width: 124px;
+    height: 32px;
+    margin-top: 18px;
+    line-height: 32px;
+    text-align: center;
+    cursor: pointer;
+}
+</style>

src/pages/netStructPicture/components/scdVisual.vue

@@ -162,8 +162,8 @@ import scdDialogIndex from "./scdDialogIndex";
 import { useRoute } from "vue-router";
 const userStoreCode = useDataStore();
 const route = useRoute();
-const scdIdValue = 644000176;
-// const scdIdValue = route.query.id;
+// const scdIdValue = 644000176;
+const scdIdValue = route.query.id;
 const data = reactive({
   queryParams: {
     scd_id: scdIdValue,

src/pages/netStructPicture/index.vue

@@ -83,19 +83,15 @@
         </div>
         <div class="scdCheck" v-if="activeName == 'first' && activeNav == 1">
           <div class="mostHead" v-if="activeName == 'first' && activeNav == 1">
-            <h2
-              style="display: inline-block; margin-right: 2px; font-size: 20px"
-            >
-              SCD文件一次性检测
-            </h2>
+            <div class="scd-title">SCD文件一次性检测</div>
             <span class="closeX" @click="closeX">×</span>
           </div>
-          <!-- 内容 -->
+          <!-- 右侧内容 -->
           <div
             style="
-              width: 100%;
+              width: 97%;
               display: flex;
-              justify-content: space-around;
+              justify-content: space-between;
               align-items: center;
               margin-top: 5px;
             "
@@ -149,7 +145,7 @@ import cid from "@/api/cid/cid";
 import { ElMessage } from "element-plus";
 import systemRow from "@/api/systemRow";
 import scdCheck from "@/api/scdCheck/scdCheck";
-import virtualRelation from "./components/virtualRelation.vue";//虚端
+import virtualRelation from "./components/virtualRelation.vue"; //虚端
 let route = useRoute();
 const activeName = ref("first"); //默认展示网络结构图
 const navtopData = ref([
@@ -188,10 +184,10 @@ const clickNav = (item, navIndex) => {
   //点击导航栏事件
   clickNavCode.value = item.code;
   activeNav.value = navIndex;
-  switch(item.code){
-    case 'virtual':
-    isOpen.value = true;
-    break;
+  switch (item.code) {
+    case "virtual":
+      isOpen.value = true;
+      break;
   }
 };
 const handleClick = (val) => {
@@ -199,7 +195,7 @@ const handleClick = (val) => {
     activeNav.value = null;
     activeName.value = val.props.name;
   }
-  clickNavCode.value = ""
+  clickNavCode.value = "";
 };
 const treeBack = (data, ids) => {
   backName.value = data;
@@ -331,15 +327,15 @@ $height: 40px;
   width: 97%;
   height: auto;
   border-bottom: 1px solid #a3ade0;
-  margin: 0px auto;
-  position: relative;
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .closeX {
-  font-size: 30px;
-  position: absolute;
-  top: 20px;
-  right: 0px;
+  font-size: 24px;
+  color: #7484ab;
   cursor: pointer;
 }
 
@@ -373,21 +369,29 @@ $height: 40px;
 .scdCheck {
   width: 97.5%;
   height: calc(100vh - 205px);
-  margin-left: 20px;
-  margin-top: 5px;
+  margin: 0 33px;
   // border: 1px solid red;
 }
 
 .treeBtn {
-  width: 35%;
+  width: 32%;
+  // margin-right: 16px;
   height: calc(100vh - 205px);
   // border: 1px solid rebeccapurple;
 }
 
 .scdMap {
-  width: 65%;
+  width: 67%;
   height: calc(100vh - 205px);
   // border: 1px solid teal;
   background-color: #f6f8fa;
 }
+//scd一致性校验
+.scd-title {
+  display: inline-block;
+  margin-right: 2px;
+  font-size: 16px;
+  color: #1a2447;
+  padding-bottom: 12px;
+}
 </style>