monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by zhangtianqi
Commit 1078cd5d6bd7f875870e86e8e9d032f9a95bd7b7 1 parent ecdb8c61

禅道:漏洞处理页面 样式优化

Inline Side-by-side
Showing 3 changed files with 88 additions and 79 deletions
... ... @@ -112,14 +112,7 @@ layui.define(['common', 'swiper', 'admin', 'commonDetail', 'mxClient', 'sessions
<label class="layui-form-label">漏洞详情:</label>
<div class="layui-input-block">${d.remark}</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">影响范围:</label>
<div class="layui-input-block">${d.impactSite}</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">修复建议:</label>
<div class="layui-input-block">${d.repairSuggestions}</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span>接收状态:</label>
<div class="layui-input-inline">
... ...
... ... @@ -40,7 +40,22 @@
:total="queryParams.count"
@loaddata="loaddata">
<template #default="{row,prop,column}">
<el-popover placement="right" :width="700" trigger="click" :offset="prop=='remark'?-600:0">
<template #reference>
<div v-if="prop=='remark' || prop == 'name'" style="
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
">{{row[prop]}}</div>
</template>
<template #default>
<div style="max-height: 400px;overflow: auto;">
{{row[prop]}}
</div>
</template>
</el-popover>
</template>
<template #tools="{scope}">
<div class="list-handle">
... ... @@ -152,75 +167,76 @@
</template>
</cm-dialog>
<el-drawer
v-model="viewDrawer"
direction="rtl"
size="95%"
<cm-dialog
:showDialogVisible="viewDrawer"
:showFooter="false"
size="90%"
title="查看详情"
@hidedialog="viewDrawer = false"
>
<template #header="{ close, titleId, titleClass }">
<span style="text-align: left;" :id="titleId" :class="titleClass">查看详情</span>
</template>
<div style="text-align: left;">
<ul>
<li style="margin-bottom: 15px;display: flex;">
<div style="width: 80px;">漏洞名称：</div>
<div style="flex: 1;">{{detail.name}}</div>
</li>
<!--<li style="margin-bottom: 15px;display: flex;">-->
<!-- <div style="width: 80px;">漏洞级别：</div>-->
<!-- <div style="flex: 1;">{{detail.level}}</div>-->
<!--</li>-->
<li style="margin-bottom: 15px;display: flex;">
<div style="width: 80px;">漏洞详情：</div>
<div style="flex: 1;">{{detail.remark}}</div>
</li>
<!--<li style="margin-bottom: 15px;display: flex;">-->
<!-- <div style="width: 80px;">影响范围：</div>-->
<!-- <div style="flex: 1;">{{detail.impactSite}}</div>-->
<!--</li>-->
<!--<li style="margin-bottom: 15px;display: flex;">-->
<!-- <div style="width: 80px;">修复建议：</div>-->
<!-- <div style="flex: 1;">{{detail.repairSuggestions}}</div>-->
<!--</li>-->
<li style="margin-bottom: 15px;display: flex;">
<div style="width: 80px;">录入人：</div>
<div style="flex: 1;">{{detail.createUserName}}</div>
</li>
<li style="margin-bottom: 15px;display: flex;">
<div style="width: 80px;">录入时间：</div>
<div style="flex: 1;">{{detail.createTime}}</div>
</li>
</ul>
<template v-slot>
<div style="text-align: left;">
<ul>
<li style="margin-bottom: 15px;display: flex;">
<div style="width: 80px;">漏洞名称：</div>
<div style="flex: 1;max-height: 200px;overflow: auto;">{{detail.name}}</div>
</li>
<!--<li style="margin-bottom: 15px;display: flex;">-->
<!-- <div style="width: 80px;">漏洞级别：</div>-->
<!-- <div style="flex: 1;">{{detail.level}}</div>-->
<!--</li>-->
<li style="margin-bottom: 15px;display: flex;">
<div style="width: 80px;">漏洞详情：</div>
<div style="flex: 1;max-height: 200px;overflow: auto;">{{detail.remark}}</div>
</li>
<!--<li style="margin-bottom: 15px;display: flex;">-->
<!-- <div style="width: 80px;">影响范围：</div>-->
<!-- <div style="flex: 1;">{{detail.impactSite}}</div>-->
<!--</li>-->
<!--<li style="margin-bottom: 15px;display: flex;">-->
<!-- <div style="width: 80px;">修复建议：</div>-->
<!-- <div style="flex: 1;">{{detail.repairSuggestions}}</div>-->
<!--</li>-->
<li style="margin-bottom: 15px;display: flex;">
<div style="width: 80px;">录入人：</div>
<div style="flex: 1;">{{detail.createUserName}}</div>
</li>
<li style="margin-bottom: 15px;display: flex;">
<div style="width: 80px;">录入时间：</div>
<div style="flex: 1;">{{detail.createTime}}</div>
</li>
</ul>
<el-table :data="detail.resolutions" v-if="detail.resolutions.length > 0">
<el-table-column align="center" prop="manufacturerName" label="处理厂商" width="150" show-overflow-tooltip/>
<el-table-column align="center" prop="isRead" label="接收状态" width="100" >
<template #default="scope">
<!--<span v-if="scope.row.isRead == '0'">未读</span>-->
<span v-if="scope.row.isRead == '1'">已读</span>
<span v-else>未读</span>
</template>
</el-table-column>
<el-table-column align="center" prop="isRelated" label="自查结果" width="100" >
<template #default="scope">
<span v-if="scope.row.isRelated == '1'">涉及</span>
<span v-if="scope.row.isRelated == '0'">不涉及</span>
</template>
</el-table-column>
<el-table-column align="center" prop="impactSite" label="影响范围" width="200" show-overflow-tooltip/>
<el-table-column align="center" prop="solveResult" label="处理状态" width="150" >
<template #default="scope">
<span v-if="scope.row.solveResult == '0'">未处理</span>
<span v-if="scope.row.solveResult == '1'">已处理且处理成功</span>
<span v-if="scope.row.solveResult == '2'">已处理且未处理成功</span>
</template>
</el-table-column>
<el-table-column align="center" prop="solveUserName" label="处理人" width="120" />
<el-table-column align="center" prop="solveTime" label="处理时间" width="100" />
<el-table-column align="center" prop="solveRemark" label="处理说明" />
<el-table :data="detail.resolutions" v-if="detail.resolutions.length > 0">
<el-table-column align="center" prop="manufacturerName" label="处理厂商" width="150" show-overflow-tooltip/>
<el-table-column align="center" prop="isRead" label="接收状态" width="100" >
<template #default="scope">
<!--<span v-if="scope.row.isRead == '0'">未读</span>-->
<el-tag type="success" v-if="scope.row.isRead == '1'">已读</el-tag>
<el-tag type="danger" v-else>未读</el-tag>
</template>
</el-table-column>
<el-table-column align="center" prop="isRelated" label="自查结果" width="100" >
<template #default="scope">
<el-tag v-if="scope.row.isRelated == '1'">涉及</el-tag>
<el-tag type="info" v-if="scope.row.isRelated == '0'">不涉及</el-tag>
</template>
</el-table-column>
<el-table-column align="center" prop="impactSite" label="影响范围" width="200" show-overflow-tooltip/>
<el-table-column align="center" prop="solveResult" label="处理状态" width="150" >
<template #default="scope">
<span v-if="scope.row.solveResult == '0'">未处理</span>
<span v-if="scope.row.solveResult == '1'">已处理且处理成功</span>
<span v-if="scope.row.solveResult == '2'">已处理且未处理成功</span>
</template>
</el-table-column>
<el-table-column align="center" prop="solveUserName" label="处理人" width="120" />
<el-table-column align="center" prop="solveTime" label="处理时间" width="100" />
<el-table-column align="center" prop="solveRemark" label="处理说明" show-overflow-tooltip/>
</el-table>
</div>
</el-drawer>
</el-table>
</div>
</template>
</cm-dialog>
</div>
... ...
... ... @@ -17,13 +17,13 @@ export default {
{
prop: 'name',
label: '漏洞名称',
align: 'center',
align: 'left',
width: '200',
},
{
prop: 'remark',
label: '漏洞详情',
align: 'center'
align: 'left'
},
{
prop: 'createTime',
... ... @@ -115,10 +115,10 @@ export default {
// 查看详细
const handleDetail = (obj) =>{
viewDrawer.value = true;
proxy.$http.get('/api-web/vulnerabilities/detail', {id:obj.id}, function (res) {
if (res.object) {
detail.value = res.object;
viewDrawer.value = true;
}
})
}
... ...