|
|
@@ -1,193 +1,509 @@
|
|
|
<template>
|
|
|
- <div class="bigBox">
|
|
|
- <div class="header">
|
|
|
- <h1>{{ flashName + '——' + scdName + '——SLC效验' }}</h1>
|
|
|
- </div>
|
|
|
- <div class="main">
|
|
|
- <div class="treeBox">
|
|
|
- <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
|
|
|
+ <div class="bigBox">
|
|
|
+ <div class="header">
|
|
|
+ <div>{{ flashName + "——" + scdName + "——SLC效验" }}</div>
|
|
|
+ <span class="closeX" @click="closeX">×</span>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="treeBox">
|
|
|
+ <el-tree
|
|
|
+ :data="treeData"
|
|
|
+ :props="defaultProps"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span class="custom-tree-node">
|
|
|
+ <img :src="FolderOpentop" alt="" />
|
|
|
+ <span class="label">{{ node.label }}</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div class="tableBox">
|
|
|
+ <div class="allMis">
|
|
|
+ <div class="result">
|
|
|
+ <div @click="excelPort" class="anniu">
|
|
|
+ <img :src="FileArrowUp" alt="" />
|
|
|
+ <span>导出所有结果</span>
|
|
|
</div>
|
|
|
- <div class="tableBox">
|
|
|
- <div class="allMis">
|
|
|
- <el-button type="primary" plain>导出所有结果</el-button>
|
|
|
- <el-button style="margin-right: 10px;" type="primary" plain>导出当前节点结果</el-button>
|
|
|
- <span style="margin-right: 10px;">全部：{{ errorNum - 0 + warningNum - 0 }}</span>
|
|
|
- <span style="margin-right: 10px;">错误：<em style="color: red;">{{ errorNum ? errorNum : 0 }}</em></span>
|
|
|
- <span style="margin-right: 10px;">告警：<em style="color: green;">{{ warningNum ? warningNum : 0 }}</em></span>
|
|
|
- </div>
|
|
|
- <div class="table">
|
|
|
-
|
|
|
- </div>
|
|
|
+ <div @click="excelPort" class="anniu current-anniu">
|
|
|
+ <img :src="FileArrowUp" alt="" />
|
|
|
+ <span>导出当前节点结果</span>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="statistics">
|
|
|
+ <span>全部：{{ errorNum + warningNum + hintNum }}</span>
|
|
|
+ <span
|
|
|
+ >错误：<em style="color: #e82c2d">{{
|
|
|
+ errorNum ? errorNum : 0
|
|
|
+ }}</em></span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ >告警：<em style="color: #ff7808">{{
|
|
|
+ warningNum ? warningNum : 0
|
|
|
+ }}</em></span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ >提示：<em style="color: #3064e8">{{
|
|
|
+ hintNum ? hintNum : 0
|
|
|
+ }}</em></span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table-data" v-if="tableData">
|
|
|
+ <el-table
|
|
|
+ :data="tableData.data"
|
|
|
+ style="width: 100%"
|
|
|
+ stripe
|
|
|
+ height="90%"
|
|
|
+ :cell-style="{ color: '#1A2447',border:'none',height:'69px' }"
|
|
|
+ :header-cell-style="{ color: '#7484AB',background:'#F7F8FB',borderBottom:'1px solid #A3ADE0'}"
|
|
|
+ >
|
|
|
+ <el-table-column prop="ied_name" label="装置名称" width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ <span v-if="scope.row.ied_name">{{ scope.row.ied_name }}</span>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="ied_desc" label="装置描述" width="200" />
|
|
|
+ <el-table-column prop="alert_level" label="等级" width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ <span v-if="scope.row.alert_level === 'waring'" class="waring"
|
|
|
+ >警告</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-else-if="scope.row.alert_level === 'error'"
|
|
|
+ class="error"
|
|
|
+ >错误</span
|
|
|
+ >
|
|
|
+ <span v-else-if="scope.row.alert_level === 'hint'" class="hint"
|
|
|
+ >提示</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="line_no" label="行号" width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ <span style="color: #255ce7">{{ scope.row.line_no }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="parse_result" label="描述" />
|
|
|
+ <el-table-column
|
|
|
+ prop="apply_standard"
|
|
|
+ label="标准及条款"
|
|
|
+ width="200"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ getBeforeComma(scope.row.apply_standard) }}</span>
|
|
|
+ <span
|
|
|
+ v-if="!getAfterComma(scope.row.apply_standard)"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ >{{ scope.row.apply_standard_no }}</span
|
|
|
+ >
|
|
|
+ <div v-else>
|
|
|
+ {{ getAfterComma(scope.row.apply_standard) }}
|
|
|
+ <span>{{ scope.row.apply_standard_no }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="page">
|
|
|
+ <el-pagination
|
|
|
+ :current-page="pageindex"
|
|
|
+ :page-size="pagesize"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="tableData.count"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
-import { ref, onMounted, toRefs, watch, reactive } from "vue"
|
|
|
+<script setup>
|
|
|
+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 slc from "@/api/slc/slc";
|
|
|
import systemRow from "@/api/systemRow";
|
|
|
import Pagnation from "../utils/Pagnation.vue";
|
|
|
import { ElMessage, ElLoading } from "element-plus";
|
|
|
-export default {
|
|
|
- props: {
|
|
|
- nowScdId: {
|
|
|
- type: String,
|
|
|
- required: true
|
|
|
- }
|
|
|
- },
|
|
|
- setup(props, { emit }) {
|
|
|
- let scdid = ref('')//scdid
|
|
|
- let scdName = ref('')//scd名称
|
|
|
- let flashName = ref("")//变电站名称
|
|
|
- let treeData = ref([
|
|
|
- // {
|
|
|
- // label: "1号主变差动",
|
|
|
- // children: [],
|
|
|
- // pids: '6871',
|
|
|
- // name: "area"
|
|
|
- // }, {
|
|
|
- // label: '一号主变本体',
|
|
|
- // children: [],
|
|
|
- // pids: "6875",
|
|
|
- // name: "area"
|
|
|
- // }, {
|
|
|
- // label: "公用",
|
|
|
- // children: [],
|
|
|
- // pids: "6890",
|
|
|
- // name: "area"
|
|
|
- // }, {
|
|
|
- // label: "SCL",
|
|
|
- // pids: "572000161",
|
|
|
- // children: [],
|
|
|
- // name: "SCL"
|
|
|
- // }
|
|
|
- ])//tree数据
|
|
|
- let defaultProps = ref({
|
|
|
- label: "title",
|
|
|
- id: "id",
|
|
|
- pids: "pid",
|
|
|
- children: "children",
|
|
|
- area: "area_id"
|
|
|
- })
|
|
|
- let errorNum = ref(0)
|
|
|
- let warningNum = ref(0)
|
|
|
- watch(() => props.nowScdId, (newVal) => {
|
|
|
- scdid.value = newVal
|
|
|
- })
|
|
|
- let indexs = 0
|
|
|
- function reload() {
|
|
|
- scdid.value = props.nowScdId
|
|
|
- let loading = ElLoading.service({
|
|
|
- text: "等待数据中",
|
|
|
- lock: true,
|
|
|
- background: "rgba(0, 0, 0, 0.7)"
|
|
|
- })
|
|
|
- Promise.all([
|
|
|
- scd.getScdById({ scd_id: scdid.value - 0 }),//获取scd详细信息scd1
|
|
|
- slc.getAllMission({ scd_id: scdid.value - 0 }),//slc1
|
|
|
- slc.getErrorByLevel({ scd_id: scdid.value - 0 }),//获取报错总数slc2
|
|
|
- slc.getScdByIdFromMission({ pageno: 1, pagesize: 20, scd_id: scdid.value - 0 }),//slc3
|
|
|
- slc.getScdByIdTree({ scd_id: scdid.value - 0 }),//获取tree数据slc4
|
|
|
- systemRow.getChildren({ code: "voltage_level" })
|
|
|
- ]).then(([scd1, slc1, slc2, slc3, slc4, flash]) => {
|
|
|
- if (scd1.data != null) {
|
|
|
- scdName.value = scd1.data.scd_name
|
|
|
- flashName.value = scd1.data.station_name
|
|
|
- }
|
|
|
- if (slc4.data != null) {
|
|
|
- treeData.value = slc4.data
|
|
|
- }
|
|
|
- if (slc2.data != null) {
|
|
|
- errorNum.value = slc2.data[0].cnt//错误
|
|
|
- warningNum.value = slc2.data[1].cnt//告警
|
|
|
- }
|
|
|
- // treeData.value[3].children = slc4.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++; // 插入位置后移
|
|
|
- // }
|
|
|
- // });
|
|
|
- loading.close()
|
|
|
- })
|
|
|
- }
|
|
|
- function handleNodeClick(e) {
|
|
|
- console.log(e, 'hand');
|
|
|
- }
|
|
|
- onMounted(() => {
|
|
|
- reload()
|
|
|
- })
|
|
|
- return {
|
|
|
- scdid,//scdid
|
|
|
- reload,//初始化组件
|
|
|
- scdName,//scd名称
|
|
|
- flashName,//变电站名称
|
|
|
- treeData,//树形数据
|
|
|
- defaultProps,//树形展示
|
|
|
- handleNodeClick,//树形每行点击
|
|
|
- errorNum,//错误数量
|
|
|
- warningNum,//告警数量
|
|
|
+import FileArrowUp from "@/assets/image/sclFile/FileArrowUp.png";
|
|
|
+import dangerError from "@/assets/image/sclFile/danger_error.png";
|
|
|
+import dangerTip from "@/assets/image/sclFile/danger_tip.png";
|
|
|
+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";
|
|
|
+const props = defineProps({
|
|
|
+ nowScdId: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+});
|
|
|
+let scdid = ref(""); //scdid
|
|
|
+let scdName = ref(""); //scd名称
|
|
|
+let flashName = ref(""); //变电站名称
|
|
|
+let router = useRouter();
|
|
|
+let treeData = ref([]); //tree数据
|
|
|
+let defaultProps = ref({
|
|
|
+ label: "name",
|
|
|
+ id: "id",
|
|
|
+ pids: "pid",
|
|
|
+ children: "children",
|
|
|
+ area: "area_id",
|
|
|
+});
|
|
|
+let errorNum = ref(0);
|
|
|
+let warningNum = ref(0);
|
|
|
+let hintNum = ref(0);
|
|
|
+const tableData = ref(null);
|
|
|
+let pageindex = ref(1);
|
|
|
+let pagesize = ref(20);
|
|
|
+watch(
|
|
|
+ () => props.nowScdId,
|
|
|
+ (newVal) => {
|
|
|
+ scdid.value = parseInt(newVal);
|
|
|
+ }
|
|
|
+);
|
|
|
+let indexs = 0;
|
|
|
+const emit = defineEmits(["sclBack"]);
|
|
|
+const closeX = () => {
|
|
|
+ emit("sclBack", 2);
|
|
|
+ // router.push("/home/netStructPicture")
|
|
|
+};
|
|
|
+const reload = () => {
|
|
|
+ // scdid.value = parseInt(props.nowScdId);
|
|
|
+ scdid.value = 1248000337;
|
|
|
+ let loading = ElLoading.service({
|
|
|
+ text: "等待数据中",
|
|
|
+ lock: true,
|
|
|
+ background: "rgba(0, 0, 0, 0.7)",
|
|
|
+ });
|
|
|
+ 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.getScdByIdFromMission({
|
|
|
+ pageno: 1,
|
|
|
+ pagesize: 20,
|
|
|
+ scd_id: scdid.value,
|
|
|
+ }), //获取表格的全部数据resultList
|
|
|
+ slc.getScdByIdTree({ scd_id: scdid.value }), //获取侧边栏树的数据treeList
|
|
|
+ // systemRow.getChildren({ code: "voltage_level" }),
|
|
|
+ ]).then(([sclInfo, sumResult, levelData, resultList, treeList]) => {
|
|
|
+ errorNum.value = 0;
|
|
|
+ hintNum.value = 0;
|
|
|
+ warningNum.value = 0;
|
|
|
+ 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;
|
|
|
}
|
|
|
- },
|
|
|
- components: {
|
|
|
- Pagnation,
|
|
|
+ });
|
|
|
}
|
|
|
-}
|
|
|
+ tableData.value = resultList;
|
|
|
+ // 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++; // 插入位置后移
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ loading.close();
|
|
|
+ });
|
|
|
+};
|
|
|
+const handleCurrentChange = async (val) => {
|
|
|
+ tableData.value = null;
|
|
|
+ pageindex.value = val;
|
|
|
+ const res = await slc.getScdByIdFromMission({
|
|
|
+ pageno: val,
|
|
|
+ pagesize: 20,
|
|
|
+ scd_id: 1248000337,
|
|
|
+ });
|
|
|
+ tableData.value = res;
|
|
|
+};
|
|
|
+const getBeforeComma = (data) => {
|
|
|
+ // 提取顿号之前的内容
|
|
|
+ if (data && data.includes("、")) {
|
|
|
+ const commaIndex = data.indexOf("、");
|
|
|
+ return data.slice(0, commaIndex) + "、";
|
|
|
+ } else {
|
|
|
+ return 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");
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ reload();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-em{
|
|
|
- font-style: normal;
|
|
|
+<style scoped lang="scss">
|
|
|
+em {
|
|
|
+ font-style: normal;
|
|
|
}
|
|
|
.bigBox {
|
|
|
- width: 97%;
|
|
|
- height: calc(100vh - 200px);
|
|
|
- margin-left: 18px;
|
|
|
+ width: 97%;
|
|
|
+ height: calc(100vh - 200px);
|
|
|
+ margin-left: 18px;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- text-align: center;
|
|
|
+ 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;
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh - 260px);
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid salmon;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 294px);
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 16px;
|
|
|
}
|
|
|
|
|
|
.treeBox {
|
|
|
- width: 20%;
|
|
|
- height: calc(100vh - 260px);
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
+ width: 20%;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ background: #f7f8fb;
|
|
|
+ box-shadow: 0px 0px 0px 1px #bed1ff;
|
|
|
+ border-radius: 3px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid #a3ade0;
|
|
|
+ margin-right: 16px;
|
|
|
}
|
|
|
|
|
|
.tableBox {
|
|
|
- width: 80%;
|
|
|
- height: calc(100vh - 260px);
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ background: #f7f8fb;
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+.allMis {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin: 16px;
|
|
|
+ .statistics,
|
|
|
+ .result {
|
|
|
+ display: flex;
|
|
|
+ font-size: 16px;
|
|
|
+ & > span {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.table-data {
|
|
|
+ height: 85%;
|
|
|
+ margin-left: 16px;
|
|
|
+}
|
|
|
+.anniu {
|
|
|
+ height: 54px;
|
|
|
+ width: 124px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: url("~@/assets/image/scdcheck/bgscd.png") no-repeat center;
|
|
|
+ background-size: 124px 49px;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #255ce7;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin: 0 4px 0 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.current-anniu {
|
|
|
+ width: 153px;
|
|
|
+ background-size: 153px 49px;
|
|
|
+}
|
|
|
+:deep(.el-tree) {
|
|
|
+ --el-fill-color-blank: #f7f8fb;
|
|
|
+
|
|
|
+}
|
|
|
+:deep(.el-table__inner-wrapper){
|
|
|
+height:100% !important;
|
|
|
+}
|
|
|
+.waring,
|
|
|
+.error,
|
|
|
+.hint {
|
|
|
+ width: 38px;
|
|
|
+ height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 2px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+.waring {
|
|
|
+ color: #ff7c03;
|
|
|
+ background: #fff6d9;
|
|
|
+}
|
|
|
+.error {
|
|
|
+ color: #e50505;
|
|
|
+ background: #f8d3d6;
|
|
|
+}
|
|
|
+.hint {
|
|
|
+ color: #255ce7;
|
|
|
+ background: #d8e1f9;
|
|
|
+}
|
|
|
+.closeX {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #7484ab;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep(.tree) {
|
|
|
+ & > .el-tree-node:after {
|
|
|
+ border-top: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__children {
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 去掉根节点垂直线
|
|
|
+ & > .el-tree-node:before {
|
|
|
+ border-left: 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 :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__expand-icon.expanded {
|
|
|
+ -webkit-transform: rotate(0deg);
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 展示时图标
|
|
|
+ .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.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;
|
|
|
}
|
|
|
</style>
|
“yueshang”
