SCL文件校核版块完成，除了点击行号没写

src/pages/netStructPicture/components/ScdNow.vue

@@ -198,13 +198,13 @@ watch(
         (item) => item.diff_object_type == "scd.version"
       );
       scdVer.value =
-        scdv && scdv[0].diff_desc ? JSON.parse(scdv[0].diff_desc) : null;
+        scdv.length && scdv[0].diff_desc ? JSON.parse(scdv[0].diff_desc) : null;
       // CRC版本数据
       const crcV = detailData.value.filter(
         (item) => item.diff_object_type == "scd.crc"
       );
       crcVer.value =
-        crcV && crcV[0].diff_desc ? JSON.parse(crcV[0].diff_desc) : null;
+        crcV.length && crcV[0].diff_desc ? JSON.parse(crcV[0].diff_desc) : null;
       //IED版本数据，diff_opt中u是修改，i是新增，d是删除
       const iedV = detailData.value.filter(
         (item) => item.diff_object_type == "scd.ied"

src/pages/netStructPicture/components/netWork.vue

@@ -21,12 +21,17 @@
                   </div>
                   <!-- 小竖线 -->
                   <div class="lineWrap" v-if="current == index">
-                    <div class="line" v-for="(item, index) in lineList"
-                      :class="{ lineback: flog && item.name !== clickLine }" :style="{
+                    <div
+                      class="line"
+                      v-for="(item, index) in lineList"
+                      :class="{ lineback: flog && item.name !== clickLine }"
+                      :style="{
                         background: item.bgcolor,
                         left: 45 + index * 13 + '%',
                         height: 16 * index + 35 + 'px',
-                      }" :key="index"></div>
+                      }"
+                      :key="index"
+                    ></div>
                   </div>
                 </div>
               </div>
@@ -34,14 +39,30 @@
             <!-- 子网络列表 -->
             <section class="layout">
               <div class="subNetwork">
-                <div class="subNetworkItem" v-for="(item, index) in showAllAp" :key="index">
+                <div
+                  class="subNetworkItem"
+                  v-for="(item, index) in showAllAp"
+                  :key="index"
+                >
                   <!-- 竖线和每个ap短的横线 -->
-                  <span v-for="(itemShort, indexShort) in lineList" :key="indexShort">
-                    <span class="subNetworkLine" v-if="!flog && item['show' + itemShort.name]"
-                      :style="item['inlineStyle' + itemShort.name]"></span>
-                    <span v-else-if="flog && itemShort.name == clickLine" class="subNetworkLine2"
-                      :style="item['inlineStyle' + itemShort.name]"></span>
-                    <span v-if="item.cover && !item.repeatCover" class="subNetworkMask"></span>
+                  <span
+                    v-for="(itemShort, indexShort) in lineList"
+                    :key="indexShort"
+                  >
+                    <span
+                      class="subNetworkLine"
+                      v-if="!flog && item['show' + itemShort.name]"
+                      :style="item['inlineStyle' + itemShort.name]"
+                    ></span>
+                    <span
+                      v-else-if="flog && itemShort.name == clickLine"
+                      class="subNetworkLine2"
+                      :style="item['inlineStyle' + itemShort.name]"
+                    ></span>
+                    <span
+                      v-if="item.cover && !item.repeatCover"
+                      class="subNetworkMask"
+                    ></span>
                   </span>
                   <div
                     class="subNetworkInfo"
@@ -69,12 +90,24 @@
             </section>
             <!-- 横线长线条 -->
             <div class="networkLine">
-              <div class="mainLine" v-for="(item, index) in lineList" :key="index">
-                <span :class="{ lineback: flog && item.name !== clickLine }" class="lineTag"
-                  :style="{ background: item.bgcolor, color: item.txtcolor }" @click="() => onChangeline(item.name)">{{
-                    item.name }}</span>
-                <p :class="{ lineback: flog && item.name !== clickLine }" class="line"
-                  :style="{ background: item.bgcolor }" @click="() => onChangeline(item.name)"></p>
+              <div
+                class="mainLine"
+                v-for="(item, index) in lineList"
+                :key="index"
+              >
+                <span
+                  :class="{ lineback: flog && item.name !== clickLine }"
+                  class="lineTag"
+                  :style="{ background: item.bgcolor, color: item.txtcolor }"
+                  @click="() => onChangeline(item.name)"
+                  >{{ item.name }}</span
+                >
+                <p
+                  :class="{ lineback: flog && item.name !== clickLine }"
+                  class="line"
+                  :style="{ background: item.bgcolor }"
+                  @click="() => onChangeline(item.name)"
+                ></p>
               </div>
             </div>
           </div>
@@ -96,7 +129,7 @@
     
   
 <script setup>
-import { computed, nextTick, onMounted, provide, reactive, ref} from "vue";
+import { computed, nextTick, onMounted, provide, reactive, ref } from "vue";
 import { nodeList, iedNetaddr, scdIedRelation } from "@/api/iedNetwork";
 import { useRoute } from "vue-router";
 import dialogIndex from "./dialogIndex.vue";
@@ -294,12 +327,22 @@ const getlist = () => {
         fontColor = color[item.attr_ap_name];
       });
       //设置 线条颜色等
-      lineList.value.push({
-        name: item.attr_ap_name,
-        bgcolor: colorObj,
-        txtcolor: fontColor,
-        position: 70 + index * 10,
-      });
+      if (!colorObj) {
+        lineList.value.push({
+          name: item.attr_ap_name,
+          bgcolor: "#000",
+          txtcolor: "#fff",
+          position: 70 + index * 10,
+        });
+      } else {
+        lineList.value.push({
+          name: item.attr_ap_name,
+          bgcolor: colorObj,
+          txtcolor: fontColor,
+          position: 70 + index * 10,
+        });
+      }
+
       index++;
     }
   });
@@ -468,7 +511,11 @@ const onChangeline = (val) => {
         item[typeItem]["borderStyle"] = "solid";
         item[typeItem]["borderTop"] = "none";
         item[typeItem]["borderRight"] = "none";
-        item[typeItem]["borderColor"] = backColorList.value[0][val];
+        if(!backColorList.value[0][val]){
+          item[typeItem]["borderColor"] = '#000'
+        }else{
+          item[typeItem]["borderColor"] = backColorList.value[0][val];
+        }
       }
       //如果不做这个判断，几条线指向统一类型的子类会被半遮盖
       if (publicRepeat.value.value != null) {
@@ -506,7 +553,7 @@ const iedRelation = async () => {
   iedRelationData.value = iedRes.data;
 };
 //弹窗=============
-provide('scdId',scdIdValue)
+provide("scdId", scdIdValue);
 </script>
   
 <style scoped lang="scss">
@@ -520,7 +567,7 @@ provide('scdId',scdIdValue)
   align-items: center;
   margin-top: 150px;
 
-  &>img {
+  & > img {
     width: 220px;
     height: 220px;
   }

src/pages/netStructPicture/index.vue

@@ -301,6 +301,64 @@ 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">

src/pages/netStructPicture/newTitle/SlcCheck.vue

@@ -10,16 +10,62 @@
           :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 }">
-            <span class="custom-tree-node">
-              <img :src="FolderOpentop" alt="" />
-              <span class="label">{{ node.label }}</span>
+          <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>
           </template>
         </el-tree>
       </div>
-      <div class="tableBox">
+      <div
+        class="tableBox"
+        v-loading="tableLoading"
+        element-loading-text="正在查询校验信息中"
+      >
         <div class="allMis">
           <div class="result">
             <div @click="excelPort" class="anniu">
@@ -32,18 +78,20 @@
             </div>
           </div>
           <div class="statistics">
-            <span>全部：{{ errorNum + warningNum + hintNum }}</span>
-            <span
+            <span @click="clickStatistics"
+              >全部：{{ errorNum + warningNum + hintNum }}</span
+            >
+            <span @click="clickStatistics('error')"
               >错误：<em style="color: #e82c2d">{{
                 errorNum ? errorNum : 0
               }}</em></span
             >
-            <span
+            <span @click="clickStatistics('waring')"
               >告警：<em style="color: #ff7808">{{
                 warningNum ? warningNum : 0
               }}</em></span
             >
-            <span
+            <span @click="clickStatistics('hint')"
               >提示：<em style="color: #3064e8">{{
                 hintNum ? hintNum : 0
               }}</em></span
@@ -56,8 +104,12 @@
             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'}"
+            :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">
@@ -83,7 +135,9 @@
             </el-table-column>
             <el-table-column prop="line_no" label="行号" width="80">
               <template #default="scope">
-                <span style="color: #255ce7">{{ scope.row.line_no }}</span>
+                <span style="color: #255ce7; cursor: pointer">{{
+                  scope.row.line_no
+                }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="parse_result" label="描述" />
@@ -118,6 +172,27 @@
         </div>
       </div>
     </div>
+    <!-- 导出所有结果 -->
+    <el-dialog
+      v-model="exportModal"
+      width="25vw"
+      style="height: 200px"
+      append-to-body
+      draggable
+    >
+      <template #header>
+        <div class="my-header">
+          <div class="title">数据导出</div>
+        </div>
+      </template>
+      <div v-if="!exportLink" class="export-ink">正在导出数据中...</div>
+      <div v-else class="export-ink">
+        数据文件已生成完成,
+        <el-link :href="exportLink" type="primary" class="load"
+          >点击立即下载</el-link
+        >
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -136,6 +211,9 @@ 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 { scdExpTableData } from "@/api/scdCheck/scdCheck2";
 const props = defineProps({
   nowScdId: {
     type: String,
@@ -147,9 +225,10 @@ let scdName = ref(""); //scd名称
 let flashName = ref(""); //变电站名称
 let router = useRouter();
 let treeData = ref([]); //tree数据
-let defaultProps ={
+let defaultProps = {
   label: "title",
-  id: "id"
+  id: "id",
+  children: "children",
 };
 let errorNum = ref(0);
 let warningNum = ref(0);
@@ -165,6 +244,7 @@ watch(
 );
 let indexs = 0;
 const emit = defineEmits(["sclBack"]);
+const tableLoading = ref(false);
 const closeX = () => {
   emit("sclBack", 2);
   // router.push("/home/netStructPicture")
@@ -179,78 +259,96 @@ const reload = () => {
   });
   Promise.all([
     scd.getScdById({ scd_id: scdid.value }), //获取SCL详情信息详细信息sclInfo
-    slc.getAllMission({ scd_id: scdid.value }), //sumResult
-    slc.getErrorByLevel({ scd_id: scdid.value - 0 }), //获取错误，告警，提示统计数据levelData
+    // slc.getAllMission({ scd_id: scdid.value }), //sumResult
+    slc.getErrorByLevel({ scd_id: scdid.value }), //获取错误，告警，提示统计数据levelData
     slc.getScdByIdFromMission({
       pageno: 1,
       pagesize: 20,
       scd_id: scdid.value,
     }), //获取表格的全部数据resultList
-    slc.getScdByIdTree({ scd_id: scdid.value }), //获取侧边栏树的数据treeList
+    slc.getScdByIdTree({ scd_id: 1380000372 }), //获取侧边栏树的数据treeList
     // systemRow.getChildren({ code: "voltage_level" }),
-  ]).then(([sclInfo, sumResult, levelData, resultList, treeList]) => {
-    errorNum.value = 0;
-    hintNum.value = 0;
-    warningNum.value = 0;
+  ]).then(([sclInfo, levelData, resultList, treeList]) => {
+    treeData.value = [];
     if (sclInfo.data != null) {
       scdName.value = sclInfo.data.scd_name;
       flashName.value = sclInfo.data.station_name;
     }
-    if (levelData.data) {
-      levelData.data.forEach((item) => {
-        item.cnt = parseInt(item.cnt);
-        switch (item.alert_level) {
-          case "error":
-            errorNum.value = item.cnt;
-            break;
-          case "hint":
-            hintNum.value = item.cnt;
-            break;
-          case "waring":
-            warningNum.value = item.cnt;
-            break;
-        }
-      });
-    }
-    tableData.value = resultList;//右侧表格数据
+    levelStatic(levelData.data);
+    tableData.value = resultList; //右侧表格数据
     // 左侧树
-    treeData.value = treeList.data
-    // treeData.value[3].children = resultList.data.slice(0, 3).map((item) => {
-    //   return {
-    //     label: item.title,
-    //     id: item.id,
-    //     pids: item.pid,
-    //   };
-    // });
-    // let a = slc4.data.map(item => {
-    //     return flash.data.find(param => item.voltage_level - 0 === param.id - 0);
-    // })
-    // a = a.filter((item, index, arr) => item !== undefined && arr.indexOf(item) === index);
-    // a.forEach(item => {
-    //     // 判断 treeData.value[3].children 是否已经存在相同的元素
-    //     const existingItem = treeData.value[3].children.find(child => child.id === item.id);
-    //     if (!existingItem) {
-    //         // 如果不存在相同元素，则将当前项插入到 children 中
-    //         treeData.value[3].children.splice(indexs, 0, {
-    //             label: item.name,
-    //             id: item.id,
-    //         });
-    //         indexs++; // 插入位置后移
-    //     }
-    // });
+    treeData.value = buildTree(treeList.data, 0);
+    console.log(" treeData.value", treeData.value);
     loading.close();
   });
 };
+//处理统计的数据
+const levelStatic = (val) => {
+  errorNum.value = 0;
+  hintNum.value = 0;
+  warningNum.value = 0;
+  if (val) {
+    val.forEach((item) => {
+      item.cnt = parseInt(item.cnt);
+      switch (item.alert_level) {
+        case "error":
+          errorNum.value = item.cnt;
+          break;
+        case "hint":
+          hintNum.value = item.cnt;
+          break;
+        case "waring":
+          warningNum.value = item.cnt;
+          break;
+      }
+    });
+  }
+};
+//处理左侧树的数据
+const buildTree = (data, parentId) => {
+  let result = [];
+  if (!data) return;
+  for (let i = 0; i < data.length; i++) {
+    if (data[i].pid === parentId) {
+      let node = { ...data[i] };
+      let children = buildTree(data, data[i].id);
+      if (children.length > 0) {
+        node.children = children;
+      }
+      result.push(node);
+    }
+  }
+  return result;
+};
+//点击右侧分页
 const handleCurrentChange = async (val) => {
   tableData.value = null;
   pageindex.value = val;
+  tableLoading.value = true;
+  const nodeName = clickTreeData.value ? clickTreeData.value.datatype : "";
+  const nodeId = clickTreeData.value ? clickTreeData.value.id : "";
+  const levels = levelClick.value ? levelClick.value : "";
   const res = await slc.getScdByIdFromMission({
-    pageno: val,
+    pageno: pageindex.value,
     pagesize: 20,
-    scd_id: scdid.value,
+    scd_id: 1380000372,
+    node_name: nodeName,
+    node_id: nodeId,
+    level: levels,
   });
+  if (res.code == 0) {
+    tableLoading.value = false;
+  }
   tableData.value = res;
 };
+//点击全部、错误等
+const levelClick = ref("");
+const clickStatistics = (level) => {
+  tableLoading.value = true;
+  levelClick.value = level;
+  ErrorByLevel();
+  handleCurrentChange(1);
+};
 const getBeforeComma = (data) => {
   // 提取顿号之前的内容
   if (data && data.includes("、")) {
@@ -263,15 +361,60 @@ const getBeforeComma = (data) => {
 const getAfterComma = (data) => {
   // 提取顿号之后的内容
   if (data && data.includes("、")) {
-    console.log("data", data);
     const commaIndex = data.indexOf("、");
     return data.slice(commaIndex + 1);
   } else {
     return "";
   }
 };
-const handleNodeClick = (e) => {
-  console.log(e, "hand");
+const clickTreeData = ref(null);
+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,
+    node_name: nodeName,
+    node_id: nodeId,
+  });
+  pageindex.value = 1;
+  levelStatic(levelRes.data); //处理统计数据 展示
+};
+//树节点点击事件
+const handleNodeClick = async (clickTree) => {
+  clickTreeData.value = clickTree;
+  tableLoading.value = true;
+  ErrorByLevel();
+  handleCurrentChange(1);
+};
+//导出所有结果
+const exportModal = ref(false);
+const exportLink = ref("");
+const excelPort = () => {
+  exportLink.value = "";
+  const nodeName = clickTreeData.value ? clickTreeData.value.datatype : "";
+  const nodeId = clickTreeData.value ? clickTreeData.value.id : "";
+  exportModal.value = true;
+  //导出excel
+  scdExpTableData({
+    code: "scl-check-result",
+    caption: "SCL校验结果",
+    expcols:
+      "line_no,CREATED_TIME,attr_name,attr_desc,alert_level,parse_result,apply_standard,apply_standard_no",
+    expcolnames:
+      "行号,日期,装置名称,装置描述,等级,校验结果内容,应用标准,标准条款",
+    scd_id: 1380000372,
+    node_name: nodeName,
+    node_id: nodeId,
+  }).then((res) => {
+    if (res.data) {
+      exportLink.value = window.ApiServer + "/" + res.data;
+    } else {
+      ElMessage({
+        message: res.msg,
+        type: "info",
+      });
+    }
+  });
 };
 onMounted(() => {
   reload();
@@ -297,7 +440,7 @@ em {
   height: auto;
   padding: 12px 0 20px 0;
   border-bottom: 1px solid #a3ade0;
-  color: #1A2447;
+  color: #1a2447;
 }
 
 .main {
@@ -336,6 +479,7 @@ em {
   margin: 16px;
   .statistics,
   .result {
+    cursor: pointer;
     display: flex;
     font-size: 16px;
     & > span {
@@ -372,10 +516,9 @@ em {
 }
 :deep(.el-tree) {
   --el-fill-color-blank: #f7f8fb;
-
 }
-:deep(.el-table__inner-wrapper){
-height:100% !important;
+:deep(.el-table__inner-wrapper) {
+  height: 100% !important;
 }
 .waring,
 .error,
@@ -406,7 +549,7 @@ height:100% !important;
   cursor: pointer;
 }
 .custom-tree-node {
-  img {
+  & > img:first-child {
     width: 18px;
     height: 18px;
     vertical-align: middle;
@@ -416,94 +559,161 @@ height:100% !important;
     vertical-align: middle;
   }
 }
-::v-deep(.tree) {
-  & > .el-tree-node:after {
-    border-top: none;
-  }
+// ::v-deep(.tree) {
+//   & > .el-tree-node:after {
+//     border-top: none;
+//   }
 
-  .el-tree-node {
-    position: relative;
-    padding-left: 16px;
-  }
+//   .el-tree-node {
+//     position: relative;
+//     padding-left: 16px;
+//   }
 
-  .el-tree-node__children {
-    padding-left: 16px;
-  }
+//   .el-tree-node__children {
+//     padding-left: 16px;
+//   }
 
-  //  去掉根节点垂直线
-  & > .el-tree-node:before {
-    border-left: none !important;
-  }
+//   //  去掉根节点垂直线
+//   & > .el-tree-node:before {
+//     border-left: none !important;
+//   }
 
-  //  去掉根节点水平线
-  & > .el-tree-node:after {
-    border-top: none !important;
-  }
+//   //  去掉根节点水平线
+//   & > .el-tree-node:after {
+//     border-top: none !important;
+//   }
 
-  //  垂直线
-  .el-tree-node:before {
-    content: "";
-    left: -2px;
-    position: absolute;
-    border-left: 1px dashed #bbbfc2;
-    bottom: 0px;
-    height: 100%;
-    width: 1px;
-  }
+//   //  垂直线
+//   .el-tree-node:before {
+//     content: "";
+//     left: -2px;
+//     position: absolute;
+//     border-left: 1px dashed #bbbfc2;
+//     bottom: 0px;
+//     height: 100%;
+//     width: 1px;
+//   }
 
-  //  同级最后一个节点垂直线高度
-  .el-tree-node :last-child:before {
-    height: 8px;
-    top: 2px;
-  }
+//   //  同级最后一个节点垂直线高度
+//   .el-tree-node :last-child:before {
+//     height: 8px;
+//     top: 2px;
+//   }
 
-  //  水平线
-  .el-tree-node:after {
-    content: "";
-    left: -2px;
-    position: absolute;
-    border-top: 1px dashed #bbbfc2;
-    height: 20px;
-    top: 12px;
-    width: 24px;
-  }
+//   //  水平线
+//   .el-tree-node:after {
+//     content: "";
+//     left: -2px;
+//     position: absolute;
+//     border-top: 1px dashed #bbbfc2;
+//     height: 20px;
+//     top: 12px;
+//     width: 24px;
+//   }
 
-  //  旋转展示时图标
-  .el-tree-node__expand-icon.expanded {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
+//   //  旋转展示时图标
+//   // .el-tree-node__expand-icon.expanded {
+//   //   -webkit-transform: rotate(0deg);
+//   //   transform: rotate(0deg);
+//   // }
 
-  //  展示时图标
-  .el-icon-caret-right:before {
-    content: "\e783";
-    font-size: 18px;
-    color: #8ea3b8;
-  }
+//   // //  展示时图标
+//   // .el-icon-caret-right:before {
+//   //   content: "\e783";
+//   //   font-size: 18px;
+//   //   color: #8ea3b8;
+//   // }
 
-  //  折叠时图标
-  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
-    content: "\e781";
-    font-size: 18px;
-    color: #8ea3b8;
-  }
+//   //  折叠时图标
+//   // .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+//   //   content: "\e781";
+//   //   font-size: 18px;
+//   //   color: #8ea3b8;
+//   // }
 
-  //  叶子节点图标
-  .el-tree-node__expand-icon.is-leaf:before {
-    content: "";
-  }
+//   //  叶子节点图标
+//   // .el-tree-node__expand-icon.is-leaf:before {
+//   //   content: "";
+//   // }
+
+//   .el-tree-node__content > .el-tree-node__expand-icon {
+//     padding: 2px;
+//   }
+
+//   .el-tree-node__content {
+//     padding-left: 10px !important;
+//   }
+// }
+.page {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
+//自定义节点图标
+.custom-trees {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+}
+.el-tree .el-tree-node__expand-icon.expanded {
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
 
-  .el-tree-node__content > .el-tree-node__expand-icon {
-    padding: 2px;
+/* //有子节点 且未展开 */
+:deep(.el-tree .el-tree-node.is-focusable .el-tree-node__expand-icon:before),
+:deep(.el-tree .is-expanded .el-tree-node__expand-icon.expanded:before) {
+  content: "";
+  display: block;
+  width: 18px;
+  height: 24px;
+  font-size: 16px;
+  background: url("~@/assets/image/sclFile/merge.png") no-repeat 0 3px;
+  background-size: 18px;
+  padding-right: 18px;
+}
+
+/* //有子节点 且已展开 */
+
+:deep(.el-tree .is-expanded .el-tree-node__expand-icon.expanded:before) {
+  background: url("~@/assets/image/sclFile/expand.png") no-repeat 0 3px;
+  background-size: 18px;
+  transform: rotate(90deg);
+}
+.el-tree-node__expand-icon.is-leaf {
+  display: none;
+}
+.alert-level {
+  width: 16px;
+  height: 16px;
+  background-size: 16px;
+  margin-right: 10px;
+}
+.custom-tree-node {
+  .label {
+    color: "#1A2447";
+    font-size: 14px;
+    margin-left: 3px;
   }
+}
 
-  .el-tree-node__content {
-    padding-left: 10px !important;
+.my-header {
+  border-bottom: 1px solid #a3ade0;
+  font-size: 16px;
+  color: #1a2447;
+
+  .title {
+    padding-bottom: 15px;
   }
 }
-.page {
+.export-ink {
   display: flex;
+  text-align: center;
   justify-content: center;
-  margin-top: 10px;
+  .load {
+    margin-left: 10px;
+    border-bottom: 1px solid #409eff;
+  }
 }
 </style>