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