monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by zhangtianqi
Commit cfffe38088170a97de650ce4213d6fc009400910 1 parent 4afeff7a

禅道:漏洞处理页面

Inline Side-by-side
Showing 8 changed files with 526 additions and 0 deletions
@@ -48,6 +48,114 @@ layui.define(['common', 'swiper', 'admin', 'commonDetail', 'mxClient', 'sessions @@ -48,6 +48,114 @@ layui.define(['common', 'swiper', 'admin', 'commonDetail', 'mxClient', 'sessions
48 }); 48 });
49 } 49 }
50 50
  51 + let list = [
  52 + {
  53 + title:'这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称',
  54 + level:'高',
  55 + time:'2023-12-20 18:00:00',
  56 + },
  57 + {
  58 + title:'这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称',
  59 + level:'高',
  60 + time:'2023-12-20 18:00:00',
  61 + },
  62 + ]
  63 + vulnerabilityDialog();
  64 + //漏洞处理弹窗
  65 + function vulnerabilityDialog(){
  66 + let dom = `
  67 + <ul style="padding: 10px 15px;">
  68 + ${
  69 + list.map(item=>{
  70 + return `<li style="padding: 20px 0px;border-bottom: 2px solid #ccc;">
  71 + <span style="color: #C41011;border-bottom: 1px solid;cursor: pointer;overflow: hidden;
  72 + text-overflow: ellipsis;white-space: nowrap;max-width: 100%;display: inline-block;"
  73 + class="vulnerability-name">${item.title}</span>
  74 + <div style="margin-top: 20px;">
  75 + <span style="margin-right: 30px;">漏洞级别:<span style="padding: 4px 10px;color: white;background-color: #C41011;border-radius: 4px;">${item.level}</span></span>
  76 + <span>披露时间:${item.time}</span>
  77 + </div>
  78 + </li>`
  79 + }).join('')
  80 + }
  81 + </ul>
  82 + `
  83 + if (list.length>0){
  84 + layer.open({
  85 + title: ['漏洞咨询', 'font-size:20px;background-color: #d0ddec;display:flex;align-items: center; justify-content: flex-start;'],
  86 + type: 1,
  87 + area: ['40%', '60%'],
  88 + closeBtn:0,
  89 + id: 1,
  90 + content:dom,
  91 + btn: false,
  92 + move: false,
  93 + success:()=>{
  94 +
  95 + },
  96 + })
  97 + }
  98 + }
  99 +
  100 +
  101 + $('.vulnerability-name').unbind("click").click(()=>{
  102 +
  103 + let detail = `
  104 + <form class="layui-form" style="margin-top: 15px;" lay-filter="vulnerabilityForm">
  105 + <div class="layui-form-item">
  106 + <label class="layui-form-label">漏洞名称:</label>
  107 + <div class="layui-input-block">这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称</div>
  108 + </div>
  109 + <div class="layui-form-item">
  110 + <label class="layui-form-label">漏洞详情:</label>
  111 + <div class="layui-input-block">这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称</div>
  112 + </div>
  113 + <div class="layui-form-item">
  114 + <label class="layui-form-label">影响范围:</label>
  115 + <div class="layui-input-block">这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称</div>
  116 + </div>
  117 + <div class="layui-form-item">
  118 + <label class="layui-form-label">修复建议:</label>
  119 + <div class="layui-input-block">这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称</div>
  120 + </div>
  121 + <div class="layui-form-item">
  122 + <label class="layui-form-label"><span style="color: red;">*</span>阅读状态:</label>
  123 + <div class="layui-input-inline">
  124 + <input type="radio" name="readStatus" value="已读" title="已读" lay-filter="readStatus">
  125 + <input type="radio" name="readStatus" value="未读" title="未读" lay-filter="readStatus" checked>
  126 + </div>
  127 + </div>
  128 + <div class="layui-form-item">
  129 + <label class="layui-form-label"><span style="color: red;">*</span>是否涉及:</label>
  130 + <div class="layui-input-inline">
  131 + <input type="radio" name="whether" value="是" title="是" lay-filter="whether">
  132 + <input type="radio" name="whether" value="否" title="否" lay-filter="whether" checked>
  133 + </div>
  134 + </div>
  135 + </form>
  136 + `
  137 + //漏洞处理抽屉
  138 + layer.open({
  139 + title: ['漏洞咨询', 'font-size:20px;background-color: #d0ddec;display:flex;align-items: center; justify-content: flex-start;'],
  140 + type: 1,
  141 + offset: 'rb',
  142 + area: ['30%', '100%'],
  143 + closeBtn:0,
  144 + anim:3,
  145 + content:detail,
  146 + btn: ['确定'],
  147 + move: false,
  148 + success:()=>{
  149 + form.render();
  150 + },
  151 + yes:(index)=>{
  152 + list.splice(0,1);
  153 + layer.close(index);
  154 + vulnerabilityDialog();
  155 + }
  156 + })
  157 + })
  158 +
51 function checkPassword(pattern, oldPwd) { 159 function checkPassword(pattern, oldPwd) {
52 var msg = "密码安全等级过低，请修改密码"; 160 var msg = "密码安全等级过低，请修改密码";
53 var password = localStorage.getItem("password"); 161 var password = localStorage.getItem("password");
1 <article class="page-container nxIndex index topo topo-index--view"> 1 <article class="page-container nxIndex index topo topo-index--view">
2 <div class="layui-card" id="layui-card-id"> 2 <div class="layui-card" id="layui-card-id">
  3 +<!-- <iframe src="/vue3/index.html#/vulnerability/list" frameborder="0"></iframe>-->
3 <!--卡片--> 4 <!--卡片-->
4 <div class="index-top" id="biz_card_area" style="padding: 2px;"> 5 <div class="index-top" id="biz_card_area" style="padding: 2px;">
5 <div class="index-banner"> 6 <div class="index-banner">
  1 +<title>漏洞管理</title>
  2 +<iframe class="layadmin-iframe" src="/vue3/index.html#/vulnerability" style="height: 99.5%!important;"/>
@@ -44,6 +44,16 @@ const routes = [{ @@ -44,6 +44,16 @@ const routes = [{
44 component: () => myImport('views/documentationManagement/index') 44 component: () => myImport('views/documentationManagement/index')
45 }, { 45 }, {
46 46
  47 + path: '/vulnerability',
  48 + name: 'vulnerability',
  49 + component: () => myImport('views/documentationManagement/vulnerability')
  50 + }, {
  51 +
  52 + path: '/vulnerability/list',
  53 + name: 'vulnerability',
  54 + component: () => myImport('views/documentationManagement/vulnerabilityList')
  55 + }, {
  56 +
47 path: '/documentRecycle', 57 path: '/documentRecycle',
48 name: 'documentRecycle', 58 name: 'documentRecycle',
49 component: () => myImport('views/documentationManagement/documentRecycle') 59 component: () => myImport('views/documentationManagement/documentRecycle')
  1 +<div class="container">
  2 + <div class="cm-card">
  3 + <div class="search">
  4 + <div class="condition esData-conditon" style="justify-content: space-between;width: 100%;">
  5 + <el-form :inline="true">
  6 + <el-form-item>
  7 + <el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyWord" placeholder="关键字搜索" />
  8 + </el-form-item>
  9 + <el-form-item>
  10 + <el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.type" placeholder="漏洞类型">
  11 + <el-option :value="1">是</el-option>
  12 + <el-option :value="0">否</el-option>
  13 + </el-select>
  14 + </el-form-item>
  15 + <el-form-item>
  16 + <el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.enabled" placeholder="是否涉及">
  17 + <el-option :value="1">是</el-option>
  18 + <el-option :value="0">否</el-option>
  19 + </el-select>
  20 + </el-form-item>
  21 + <el-form-item>
  22 + <el-button @click="handleQuery" :size="$global.elementConfig.size.button" type="primary">查询</el-button>
  23 + </el-form-item>
  24 + </el-form>
  25 + </div>
  26 + </div>
  27 +
  28 + <el-row :gutter="20" style="padding: 3px 10px;">
  29 + <el-col :span="1">
  30 + <el-button @click="handleAdd" type="primary" >新增</el-button>
  31 + </el-col>
  32 + </el-row>
  33 +
  34 + <div class="search-table">
  35 + <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
  36 + :height="height - 550"
  37 + :loading="false"
  38 + :pageSize="queryParams.pageSize"
  39 + :showBorder="true"
  40 + :showIndex="true"
  41 + :showPage="true"
  42 + :showSelection="false"
  43 + :showTools="true"
  44 + :total="queryParams.count"
  45 + @loaddata="loaddata">
  46 + <template #default="{row,prop,column}">
  47 +
  48 + </template>
  49 + <template #tools="{scope}">
  50 + <div class="list-handle">
  51 + <span class="icon-bg" @click="handleFun(scope.row)">
  52 + <i class="el-icon-document" title="处理"></i>
  53 + </span>
  54 + <span class="icon-bg" @click="handleDetail(scope.row)">
  55 + <i class="el-icon-document" title="详情"></i>
  56 + </span>
  57 + <span class="icon-bg"@click="handleDel(scope.row)">
  58 + <i class="el-icon-delete"></i>
  59 + </span>
  60 + <span class="icon-bg"@click="handleDownload(scope.row)">
  61 + <i class="el-icon-delete" title="下载"></i>
  62 + </span>
  63 + </div>
  64 + </template>
  65 + </cm-table-page>
  66 + </div>
  67 + </div>
  68 +
  69 +
  70 + <cm-dialog :showDialogVisible="addDialogVisible" :showFooter="false" :title="addDialogTitle" @hidedialog="showFolder"
  71 + width="600px">
  72 + <template v-slot>
  73 + <el-form
  74 + :model="docForm"
  75 + :rules="docRulesForm"
  76 + label-position="right"
  77 + label-width="100px"
  78 + ref="ruleForm">
  79 +
  80 + <el-form-item label="漏洞名称" prop="name">
  81 + <el-input :size="$global.elementConfig.size.input" clearable v-model="docForm.name"></el-input>
  82 + </el-form-item>
  83 + <el-form-item label="漏洞级别" prop="level">
  84 + <el-select v-model="docForm.level" style="width: 100%;">
  85 + <el-option :value="3">高</el-option>
  86 + <el-option :value="2">中</el-option>
  87 + <el-option :value="1">低</el-option>
  88 + </el-select>
  89 + </el-form-item>
  90 + <el-form-item label="漏洞详情" prop="detail">
  91 + <el-input type="textarea" v-model="docForm.detail"></el-input>
  92 + </el-form-item>
  93 + <el-form-item label="影响范围" prop="reach">
  94 + <el-input type="textarea" v-model="docForm.reach"></el-input>
  95 + </el-form-item>
  96 + <el-form-item label="修复建议" prop="response">
  97 + <el-input type="textarea" v-model="docForm.response"></el-input>
  98 + </el-form-item>
  99 + <el-form-item label="录入人" prop="createUser">
  100 + <el-input v-model="docForm.createUser"></el-input>
  101 + </el-form-item>
  102 +
  103 + <el-form-item>
  104 + <el-button :size="$global.elementConfig.size.button" @click="addFolder('ruleForm')" type="primary">
  105 + 保存
  106 + </el-button>
  107 + <el-button :size="$global.elementConfig.size.button" @click="showFolder(false)">取消</el-button>
  108 + </el-form-item>
  109 + </el-form>
  110 + </template>
  111 + </cm-dialog>
  112 +
  113 + <cm-dialog :showDialogVisible="handleVisible" :showFooter="false" title="处理" @hidedialog="showHandleFolder"
  114 + width="600px">
  115 + <template v-slot>
  116 + <el-form
  117 + :model="handleForm"
  118 + :rules="handleRulesForm"
  119 + label-position="right"
  120 + label-width="100px"
  121 + ref="handleRefForm">
  122 +
  123 + <el-form-item label="厂商" prop="manufacturer">
  124 + <el-input :size="$global.elementConfig.size.input" clearable v-model="handleForm.manufacturer"></el-input>
  125 + </el-form-item>
  126 + <el-form-item label="处理人" prop="user">
  127 + <el-select v-model="handleForm.user" style="width: 100%;">
  128 + <el-option :value="3">高</el-option>
  129 + <el-option :value="2">中</el-option>
  130 + <el-option :value="1">低</el-option>
  131 + </el-select>
  132 + </el-form-item>
  133 + <el-form-item label="处理时间" prop="time">
  134 + <el-date-picker v-model="handleForm.time"></el-date-picker>
  135 + </el-form-item>
  136 + <el-form-item label="处理情况" prop="state">
  137 + <el-select v-model="handleForm.state" style="width: 100%;">
  138 + <el-option :value="3">高</el-option>
  139 + <el-option :value="2">中</el-option>
  140 + <el-option :value="1">低</el-option>
  141 + </el-select>
  142 + </el-form-item>
  143 + <el-form-item label="备注" prop="remark">
  144 + <el-input type="textarea" v-model="handleForm.remark"></el-input>
  145 + </el-form-item>
  146 +
  147 + <el-form-item>
  148 + <el-button :size="$global.elementConfig.size.button" @click="addHandelFolder('ruleForm')" type="primary">
  149 + 保存
  150 + </el-button>
  151 + <el-button :size="$global.elementConfig.size.button" @click="showHandleFolder(false)">取消</el-button>
  152 + </el-form-item>
  153 + </el-form>
  154 + </template>
  155 + </cm-dialog>
  156 +
  157 +</div>
  1 +export default {
  2 + name: 'vulnerability',
  3 + template: '',
  4 + setup(props, {attrs, slots, emit}) {
  5 + const {proxy} = Vue.getCurrentInstance()
  6 + let height = Vue.ref(window.innerHeight);
  7 + let queryParams = Vue.ref({
  8 + keyWord:'',
  9 + type:'',
  10 + enabled:'',
  11 + pageNum: 1,
  12 + pageSize: 10,
  13 + count:0,
  14 + })
  15 +
  16 + let tableData = Vue.ref({
  17 + count: 0,
  18 + dataList: [
  19 + {
  20 + name:'测试',
  21 + level:'高',
  22 + time:'',
  23 + admin:'',
  24 + busTypeName:'',
  25 + }
  26 + ],
  27 + columns: [
  28 + {
  29 + prop: 'name',
  30 + label: '名称',
  31 + sortable: true,
  32 + align: 'center',
  33 + width: '200',
  34 + },
  35 + {
  36 + prop: 'level',
  37 + label: '漏洞级别',
  38 + sortable: true,
  39 + align: 'center'
  40 + },
  41 + {
  42 + prop: 'time',
  43 + label: '披露时间',
  44 + sortable: true,
  45 + align: 'center',
  46 + width: '130'
  47 + }, {
  48 + prop: 'admin',
  49 + label: '阅读情况',
  50 + sortable: true,
  51 + align: 'center',
  52 + width: '130'
  53 + }, {
  54 + prop: 'busTypeName',
  55 + label: '处理情况',
  56 + sortable: true,
  57 + align: 'center',
  58 + width: '270'
  59 + },
  60 + ]
  61 + })
  62 +
  63 + let addDialogVisible = Vue.ref(false)
  64 + let addDialogTitle = Vue.ref('')
  65 +
  66 + // 新增按钮
  67 + const handleAdd = ()=>{
  68 + addDialogVisible.value = true;
  69 + addDialogTitle.value = '新增';
  70 + }
  71 +
  72 + const loaddata = ()=>{
  73 +
  74 + }
  75 +
  76 + const showFolder = ()=>{
  77 + addDialogVisible.value = false;
  78 + docForm.value = {
  79 + name:'',
  80 + level:'',
  81 + detail:'',
  82 + reach:'',
  83 + response:'',
  84 + createUser:'',
  85 + }
  86 + }
  87 + const addFolder = ()=>{
  88 + ruleForm.value.validate((validate)=>{
  89 + if (validate){
  90 +
  91 + }
  92 + })
  93 + }
  94 +
  95 + let docForm = Vue.ref({
  96 + name:'',
  97 + level:'',
  98 + detail:'',
  99 + reach:'',
  100 + response:'',
  101 + createUser:'',
  102 + })
  103 + let docRulesForm = Vue.ref({
  104 + name:[
  105 + { required: true, message: '请输入漏洞名称', trigger: 'blur' },
  106 + ],
  107 + level:[
  108 + { required: true, message: '请选择漏洞级别', trigger: 'blur' },
  109 + ],
  110 + detail:[
  111 + { required: true, message: '请输入漏洞详情', trigger: 'blur' },
  112 + ],
  113 + reach:[
  114 + { required: true, message: '请输入影响范围', trigger: 'blur' },
  115 + ],
  116 + response:[
  117 + { required: true, message: '请输入修复建议', trigger: 'blur' },
  118 + ],
  119 + createUser:[
  120 + { required: true, message: '请输入录入人', trigger: 'blur' },
  121 + ]
  122 + })
  123 + let ruleForm = Vue.ref();
  124 +
  125 +
  126 + // 处理按钮
  127 + let handleFun = ()=>{
  128 + handleVisible.value = true;
  129 + }
  130 + let handleVisible = Vue.ref(false);
  131 + const showHandleFolder = ()=>{
  132 + handleVisible.value = false;
  133 + }
  134 + let handleForm = Vue.ref({
  135 + manufacturer:'',
  136 + user:'',
  137 + time:'',
  138 + state:'',
  139 + remark:'',
  140 + })
  141 + let handleRulesForm = Vue.ref({
  142 + manufacturer:[{
  143 + required: true, message: '请输入厂商名称', trigger: 'blur'
  144 + }],
  145 + user:[{
  146 + required: true, message: '请输入处理人', trigger: 'blur'
  147 + }],
  148 + time:[{
  149 + required: true, message: '请输入处理时间', trigger: 'blur'
  150 + }],
  151 + state:[{
  152 + required: true, message: '请输入处理情况', trigger: 'blur'
  153 + }]
  154 + })
  155 + let handleRefForm = Vue.ref();
  156 + const addHandelFolder = ()=>{
  157 + handleRefForm.value.validate((validate)=>{
  158 + if (validate){
  159 +
  160 + }
  161 + })
  162 + }
  163 +
  164 + Vue.onMounted(() => {
  165 +
  166 + })
  167 +
  168 + return {
  169 + height,
  170 + queryParams,
  171 + handleAdd,
  172 + tableData,
  173 + addDialogVisible,
  174 + showFolder,
  175 + addDialogTitle,
  176 + docForm,
  177 + docRulesForm,
  178 + ruleForm,
  179 + addFolder,
  180 + handleFun,
  181 + showHandleFolder,
  182 + handleVisible,
  183 + addHandelFolder,
  184 + handleRefForm,
  185 + handleRulesForm,
  186 + handleForm,
  187 + };
  188 + },
  189 +}
  1 +<div class="cm-card" style="text-align: left;padding: 10px 15px;">
  2 + <ul>
  3 + <li v-for="(item,index) in list" :key="index" style="padding: 20px 0px;border-bottom: 2px solid #ccc;">
  4 + <span style="color: red;border-bottom: 1px solid;cursor: pointer" @click="handleDetail">{{item.title}}</span>
  5 + <div style="margin-top: 20px;">
  6 + <span style="margin-right: 20px;">漏洞级别:<span style="padding: 2px 4px;color: white;background-color: red;">{{item.level}}</span></span>
  7 + <span>披露时间:{{item.time}}</span>
  8 + </div>
  9 + </li>
  10 + </ul>
  11 +</div>
  12 +
  13 +<cm-dialog :showDialogVisible="addDialogVisible" :showFooter="false" :title="addDialogTitle" @hidedialog="showFolder"
  14 + width="600px">
  15 +
  16 +</cm-dialog>
  17 +
  18 +<el-drawer
  19 + v-model="drawer"
  20 + title="I am the title"
  21 + direction="rtl"
  22 + >
  23 + <span>Hi, there!</span>
  24 +</el-drawer>
  1 +export default {
  2 + name: 'vulnerableilityList',
  3 + template: '',
  4 + setup(props, {attrs, slots, emit}) {
  5 + const {proxy} = Vue.getCurrentInstance()
  6 +
  7 + let list = Vue.ref([
  8 + {
  9 + title:'这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称',
  10 + level:'高',
  11 + time:'2023-12-20 18:00:00',
  12 + },
  13 + {
  14 + title:'这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称这是漏洞名称',
  15 + level:'高',
  16 + time:'2023-12-20 18:00:00',
  17 + },
  18 + ])
  19 +
  20 + let drawer = Vue.ref(false);
  21 + const handleDetail = ()=>{
  22 + drawer.value = true;
  23 + }
  24 +
  25 + Vue.onMounted(() => {
  26 +
  27 + })
  28 +
  29 + return {
  30 + list,
  31 + handleDetail,
  32 + drawer,
  33 + };
  34 + },
  35 +}