monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 5b8163b94c56aa783779393fe0d1fc2fa5cb61f7 1 parent e494df51

故障诊断书部分页面

Inline Side-by-side
Showing 10 changed files with 720 additions and 305 deletions
... ... @@ -40,7 +40,12 @@
@import "../css/navTabs.css";
/*故障诊断书*/
@import "../css/faultDiagnosis.css";
@import "../css/faultForm.css";
/*对比分析*/
@import "../css/analysis.css";
... ...
#faultDiagnosisIndex{
color:#666
}
#faultDiagnosisIndex .el-button{
border-style: dashed;
}
#faultDiagnosisIndex .btn-faultDiagnosis .el-button{
border-style: solid;
}
.margin-30{
margin:0 30px;
}
.margin-top{
margin-top:30px;
}
.fault-book-input{
width: 75%;
text-align: center;
padding: 1.5%;
}
.context-radio{
margin-bottom: 15px;
}
.fault-book-input-text{
width: 25%;
text-align: center;
margin-right: 3%;
/* width: 25%;
text-align: center;*/
margin-right: 27px;
}
.fault-card{
background: #fff;
/*margin: 0 30px;*/
}
.fault-card .el-card{
border:none;
}
.fault-card .el-card.is-hover-shadow:focus, .fault-card .el-card.is-hover-shadow:hover{
box-shadow: none;
}
.fault-book-title-card{
margin: 1%;
padding-left: 2%;
margin: 1% 0;
padding: 0 1%;
}
.fault-book-title-card-text {
position: relative;
}
.fault-book-title-card-text:after{
border-right:2px solid #3a92fc;
content: "";
display: block;
height:20px;
position: absolute;
top:16px;
right:0;
}
.fault-book-title-card-text .el-card__body{
padding:15px;
}
.fault-book-title-card-text.isActive .el-card__body{
border-bottom: 2px solid #3a92fc;
display:inline-block;
}
.fault-book-title-card-text{
color: #3A92FC;
cursor: pointer;
border: none;
border-radius: 0;
}
#faultDiagnosisIndex{
... ... @@ -33,84 +85,99 @@
}
.title-img{
position: absolute;
left: 5%;
width: 0.8%;
top: 19.5%;
margin-right: 10px;
}
.title-text{
position: absolute;
left: 7%;
font-size: 18px;
top: 19%;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 10px 0;
}
.flex-div{
display: flex;
align-items: center;
}
.flex-div-start{
display: flex;
align-items: center;
justify-content: flex-start;
}
.fault-definition .fault-definition-radio{
position: absolute;
left: 7%;
top: 22%;
width: 5%;
margin-left: 30px;
margin-bottom: 15px;
}
.fault-definition .fault-definition-select-up{
position: absolute;
top: 22%;
left: 20%;
display: flex;
align-items: center;
color: #666;
margin-bottom: 15px;
}
.fault-definition .el-select{
margin:0 10px;
}
.margin-right-10{
margin-right:10px;
}
.fault-definition .fault-definition-select-down{
position: absolute;
top: 27%;
left: 20%;
display: flex;
align-items: center;
color: #666;
}
.network-monitor .context-radio{
position: absolute;
/* position: absolute;
left: 2.7%;
top: 22%;
width: 20%;
width: 20%;*/
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 15px;
}
.application-monitor .context-radio{
position: absolute;
/* position: absolute;
left: 2.7%;
top: 22%;
width: 20%;
width: 20%;*/
margin-bottom: 15px;
}
.apm-monitor .context-radio{
position: absolute;
/*position: absolute;
left: 2.7%;
top: 22%;
width: 20%;
width: 20%;*/
}
.log-detection .context-radio{
position: absolute;
/* position: absolute;
left: 2.7%;
top: 22%;
width: 20%;
width: 20%;*/
}
.basic-environment .context-radio{
position: absolute;
/*position: absolute;
left: 2.7%;
top: 22%;
width: 20%;
width: 20%;*/
}
.basic-environment .context-select{
position: absolute;
/*position: absolute;
width: 40%;
top: 28%;
left: 0.8%;
left: 0.8%;*/
}
.context-multiple-choice{
position: absolute;
/* position: absolute;
left: 7%;
top: 27%;
top: 27%;*/
}
.multiple-choice-icon{
... ... @@ -118,7 +185,9 @@
top: 28.5%;
right: 18px;
}
.color-999{
color:#999;
}
.multiple-choice-button{
min-width: 140px;
}
... ... @@ -136,6 +205,7 @@
.network-monitor-popup-left{
background-color: #3B92FC;
padding-bottom: 3%;
min-height: 500px;
}
.network-monitor-popup{
... ... @@ -153,12 +223,10 @@
}
.network-monitor-popup .multiple-choice-button{
width: 100%;
color: #C7DBFE;
font-size: 18px;
margin-top: 15px;
padding-top: 10px;
height: 10%;
}
.network-monitor-popup-right .context-head{
... ... @@ -166,4 +234,107 @@
font-size: 18px;
text-align: left;
margin-left: 4%;
display: flex;
justify-content: space-between;
align-items: center;
}
.environment-table th{
color:#3B91FF;
}
.list-data{
display: flex;
align-items: center;
}
.img-delete{
width:12px;
height:12px;
margin-left: 6px;
}
.environment-table table{
/*border-color: #666666;*/
}
.environment-table th:nth-child(2) ,.environment-table td:nth-child(2){
padding-left: 30px;
}
.environment-table th,.environment-table td,.environment-table th.el-table__cell,.environment-table table tbody td{
background-color:#F4F5FA;
/*border-color: #666666;*/
}
.environment-table .el-table td.el-table__cell, .environment-table .el-table th.el-table__cell.is-leaf{
/*border-bottom-color: #666;*/
/*border-right-color: #666;*/
}
.list-step{
flex-flow: column;
align-items: flex-start;
}
.list-step-name{
margin-left: 10px;
margin-top: 10px;
color:#999999;
}
.list-step-name.isActive{
color:#3B91FF;
}
.step-img{
background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-add.png");
width: 50px;
height:50px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.step-img.isActive{
background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-circle.png");
}
.list-line{
display: inline-block;
width: 84px;
border-top:5px solid #cccccc;
}
.list-line.isActive{
border-top-color:#3B91FF;
}
.context-body{
margin: 15% 0 5% 4%;
}
.popup-bg .el-dialog__header{
background-color: #3B91FF;
}
.popup-bg .el-dialog__title{
color:#FFFFFF;
}
.popup-bg .el-dialog__headerbtn .el-dialog__close{
color:#ffffff;
}
.popup-bg .el-dialog__body{
padding:10px;
}
.popup-bg .el-dialog{
min-height: 600px;
}
.flex-div-center{
display: flex;
align-items: center;
justify-content: center;
}
.list-net{
padding:20px 10px 20px 0;
margin:10px 0 10px 10px;
cursor: pointer;
}
.list-net.isActive{
background-color: #FFFFFF;
}
.network-monitor-popup .list-net.isActive .multiple-choice-button{
color:#3B91FF;
}
\ No newline at end of file
... ...
.faultForm{
background-color: #F4F5FA;
height: 100%;
padding:30px 20px;
}
.btn-search{
margin-left: 20px;
}
\ No newline at end of file
... ...
... ... @@ -123,8 +123,15 @@ const routes = [{
{
path: '/fault/index',
name: 'view',
component: () => myImport('views/faultDiagnosis/index')
}
// component: () => myImport('views/faultDiagnosis/index')
component: () => myImport('views/faultDiagnosis/components/faultForm/index')
},
/*{
path: '/fault/faultForm',
name: 'view',
component: () => myImport('views/faultDiagnosis/components/faultForm/index')
}*/
];
// hash模式： createWebHashHistory
... ...
<div class="faultForm">
<el-row>
<el-col :span="12" class="flex-div">
<div class="grid-content bg-purple">
<el-input v-model="input" placeholder="输入关键字" class="fault-book-input"/>
</div>
<div class="grid-content bg-purple">
<el-select v-model="value" placeholder="故障分类">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="grid-content bg-purple btn-search">
<el-button class="" type="primary">搜索</el-button>
</div>
</el-col>
</el-row>
<el-row>
el
</el-row>
</div>
\ No newline at end of file
... ...
export default {
name: 'faultForm',
template: '',
components: {},
data () {
return {
options:[{value:120,label:'name'}]
}
},
computed: {},
methods: {
},
mounted () {},
unmounted () {}
}
\ No newline at end of file
... ...
<div id="faultDiagnosisIndex">
<!--搜索输入框部分-->
<el-row>
<el-col :span="6">
<div class="grid-content bg-purple">
<span class="fault-book-input-text">所属业务</span>
<el-input v-model="input" placeholder="Please input 1" class="fault-book-input"/>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<span class="fault-book-input-text">名称</span>
<el-input v-model="input" placeholder="Please input 2" class="fault-book-input"/>
</div>
</el-col>
</el-row>
<div class="margin-30">
<el-row>
<el-col :span="6">
<div class="grid-content bg-purple">
<span class="fault-book-input-text">所属业务</span>
<el-input v-model="input" placeholder="Please input 1" class="fault-book-input"/>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<span class="fault-book-input-text">名称</span>
<el-input v-model="input" placeholder="Please input 2" class="fault-book-input"/>
</div>
</el-col>
</el-row>
</div>
<!--卡片分页排头-->
<el-row :gutter="12" class="fault-book-title-card">
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="clickDaultDefinitionFunc()" shadow="hover">故障定义</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="clickNetworkMonitorFunc()" shadow="hover">网络监测</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="applicationMonitorFunc()" shadow="hover">应用检测</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="basicEnvironmentFunc()" shadow="hover">基础环境</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="apmMonitorFunc()" shadow="hover">APM</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="logDetectionFunc()" shadow="hover">日志检测</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="subscriptionReportFunc()" shadow="hover">报告订阅</el-card>
</el-col>
</el-row>
<div class="fault-card margin-30">
<el-row :gutter="12" class="fault-book-title-card">
<el-col :span="3">
<el-card class="fault-book-title-card-text isActive" @click="clickDaultDefinitionFunc()" shadow="hover"><span class="card-name">故障定义</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="clickNetworkMonitorFunc()" shadow="hover"><span class="card-name">网络监测</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="applicationMonitorFunc()" shadow="hover"><span class="card-name">应用检测</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="basicEnvironmentFunc()" shadow="hover"><span class="card-name">基础环境</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="apmMonitorFunc()" shadow="hover"><span class="card-name">APM</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="logDetectionFunc()" shadow="hover"><span class="card-name">日志检测</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="subscriptionReportFunc()" shadow="hover"><span class="card-name">报告订阅</span></el-card>
</el-col>
</el-row>
</div>
<!---主体卡片部分-->
<!--故障定义-->
<div class="fault-definition" v-if="faultDefinitionHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img">
<span class="title-text">故障定义</span>
</span>
</div>
<div>
<span class="fault-definition-radio">
<el-radio v-model="faultDefinitionRadio" label="1">产生告警时触发</el-radio>
<el-radio v-model="faultDefinitionRadio" label="2">自定义规则</el-radio>
</span>
<span class="fault-definition-select-up">
当
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
的警告级别为
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
时触发
</span>
<span class="fault-definition-select-down">
当
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
的警告级别为
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
时触发
</span>
<div class="fault-definition margin-30" v-if="faultDefinitionHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img">
<span>故障定义</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="3" class="flex-div">
<div class="fault-definition-radio flex-div-start">
<el-radio v-model="faultDefinitionRadio" label="1">产生告警时触发</el-radio>
</div>
</el-col>
<el-col :span="21" class="flex-div">
<div class="fault-definition-select-up">
当
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
的警告级别为
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
时触发
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<div class="fault-definition-radio flex-div-start">
<el-radio v-model="faultDefinitionRadio" label="2">自定义规则</el-radio>
</div>
</div>
</el-col>
<el-col :span="21">
<div class="fault-definition-select-down">
当
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
的警告级别为
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
时触发
</div>
</el-col>
</el-row>
</div>
<!--网络检测-->
<div class="network-monitor" v-if="networkMonitorHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img">
<span class="title-text">网络检测</span>
</span>
</div>
<div class="context-radio">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="radio1" label="1">启用</el-radio>
<el-radio v-model="radio1" label="2">不启用</el-radio>
</div>
<div class="context-multiple-choice">
<span v-for="(item, index) in networkMonitorList" :key="index">
<span>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, networkMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</span>
</span>
<span>
<el-button class="multiple-choice-button" @click="networkMonitorVisible = true">添加网络检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</span>
</div>
<div class="network-monitor margin-30" v-if="networkMonitorHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img">
<span>网络检测</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-radio flex-div-start margin-30">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="faultStateRadio" label="1">启用</el-radio>
<el-radio v-model="faultStateRadio" label="2">不启用</el-radio>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-multiple-choice flex-div-start margin-30">
<div v-for="(item, index) in networkMonitorList" :key="index">
<div>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, networkMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</div>
</div>
<div class=" flex-div">
<el-button class="multiple-choice-button color-999" @click="networkMonitorVisible = true">添加网络检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
</el-col>
</el-row>
</div>
<!--应用监测-->
<div class="application-monitor" v-if="applicationMonitorHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img">
<span class="title-text">应用检测</span>
</span>
</div>
<div class="context-radio">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="radio1" label="1">启用</el-radio>
<el-radio v-model="radio1" label="2">不启用</el-radio>
</div>
<div class="context-multiple-choice">
<span v-for="(item, index) in applicationMonitorList" :key="index">
<span>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</span>
</span>
<span>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加应用检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</span>
</div>
<div class="application-monitor margin-30" v-if="applicationMonitorHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img">
<span>应用检测</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-radio flex-div-start margin-30">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="faultApplicationRadio" label="1">启用</el-radio>
<el-radio v-model="faultApplicationRadio" label="2">不启用</el-radio>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-multiple-choice flex-div-start margin-30">
<div v-for="(item, index) in applicationMonitorList" :key="index">
<div>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</div>
</div>
<div class=" flex-div">
<el-button class="multiple-choice-button color-999" @click="addNetworkMonitorItem()">添加应用检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
</el-col>
</el-row>
</div>
<!--基础环境 Basic environment-->
<div class="basic-environment" v-if="basicEnvironmentHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img">
<span class="title-text">基础环境</span>
</span>
</div>
<div class="context-radio">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="radio1" label="1">启用</el-radio>
<el-radio v-model="radio1" label="2">不启用</el-radio>
</div>
<div class="context-select">
<span class="fault-book-input-text context-select-text">选择类型</span>
<el-select v-model="value" placeholder="从业务选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model="value" placeholder="从资源选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="basic-environment margin-30" v-if="basicEnvironmentHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img">
<span>基础环境</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-radio flex-div-start margin-30">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="faultEnvironmentRadio" label="1">启用</el-radio>
<el-radio v-model="faultEnvironmentRadio" label="2">不启用</el-radio>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-select flex-div-start margin-30">
<span class="fault-book-input-text context-select-text">选择类型</span>
<el-select v-model="value" placeholder="从业务选择" class="margin-right-10">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model="value" placeholder="从资源选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="environment-table margin-top flex-div-start margin-30">
<el-table :data="environmentTableData" border height="250" style="width: 100%">
<el-table-column align="center" prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" class="margin-30" >
<template #default="scope">
<div class="list-data">
<span class="list-data-text">住址: {{ scope.row.address }}</span>
<img :id="scope.row.index" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="img-delete">
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</div>
<!--APM-->
<div class="apm-monitor" v-if="apmMonitorHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img">
<span class="title-text">APM</span>
</span>
</div>
<div class="context-radio">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="radio1" label="1">启用</el-radio>
<el-radio v-model="radio1" label="2">不启用</el-radio>
</div>
<div class="context-multiple-choice">
<span v-for="(item, index) in apmMonitorList" :key="index">
<span>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</span>
</span>
<span>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</span>
</div>
<div class="apm-monitor margin-30" v-if="apmMonitorHide">
<el-row>
<el-rol :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img">
<span>APM</span>
</div>
</el-rol>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-radio flex-div-start margin-30">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="faultAPMRadio" label="1">启用</el-radio>
<el-radio v-model="faultAPMRadio" label="2">不启用</el-radio>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-multiple-choice flex-div-start margin-30">
<div v-for="(item, index) in apmMonitorList" :key="index">
<div>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</div>
</div>
<div>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
</el-col>
</el-row>
</div>
<!--日志检测-->
<div class="log-detection" v-if="logDetectionHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img">
<span class="title-text">日志检测</span>
</span>
</div>
<div class="context-radio">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="radio1" label="1">启用</el-radio>
<el-radio v-model="radio1" label="2">不启用</el-radio>
</div>
<div class="context-multiple-choice">
<span v-for="(item, index) in logDetectionList" :key="index">
<span>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, logDetectionList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</span>
</span>
<span>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</span>
</div>
<div class="log-detection margin-30" v-if="logDetectionHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img">
<span>日志检测</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-radio flex-div-start margin-30">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="faultLogRadio" label="1">启用</el-radio>
<el-radio v-model="faultLogRadio" label="2">不启用</el-radio>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-multiple-choice flex-div-start margin-30">
<div v-for="(item, index) in logDetectionList" :key="index">
<div>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, logDetectionList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</div>
</div>
<div>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
</el-col>
</el-row>
</div>
<!--订阅报告-->
<div class="subscription-report" v-if="subscriptionReportHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img">
<span class="title-text">报告订阅</span>
</span>
</div>
<div class="context-multiple-choice">
<span v-for="(item, index) in subscriptionReportList" :key="index">
<span>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, subscriptionReportList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</span>
</span>
<span>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</span>
</div>
<div class="subscription-report margin-30" v-if="subscriptionReportHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img">
<span>报告订阅</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-multiple-choice flex-div-start margin-30">
<div v-for="(item, index) in subscriptionReportList" :key="index">
<div>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, subscriptionReportList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</div>
</div>
<div>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
</el-col>
</el-row>
</div>
<!--取消和保存-->
<div class="btn-faultDiagnosis">
<el-button>取消</el-button>
<el-button type="primary">保存</el-button>
</div>
<!--网络检测弹窗-->
<div class="network-monitor-popup">
<el-dialog v-model="networkMonitorVisible" title="故障新增内容">
<div class="network-monitor-popup popup-bg">
<el-dialog v-model="networkMonitorVisible" title="故障新增内容" width="60%">
<el-row>
<el-col :span="6">
<div class="grid-content bg-purple network-monitor-popup-left">
<span>
<div>
<div class="context-head">
已配置链路
</div>
</span>
<span v-for="(item, index) in networkMonitorList" :key="index">
<span>
</div>
<div @click="clickList(index)" :class="['list-net',{'isActive':index==isClickNet}]" v-for="(item, index) in networkMonitorList" :key="index">
<div class="flex-div-center ">
<div class="multiple-choice-button">{{item.title}}</div>
<!--img-->
</span>
</span>
<span>
<img v-show="index==isClickNet" class="img-delete" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" alt="">
</div>
</div>
<div class="list-net">
<div class="multiple-choice-button">
<img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">
</div>
</span>
</div>
</div>
</el-col>
<el-col :span="18">
<div class="grid-content bg-purple-light network-monitor-popup-right">
<div class="context-head">
<span>电子税务局网络链路配置</span>
<span >
<div>电子税务局网络链路配置</div>
<div >
<img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">
</span>
</div>
</div>
<div class="context-body">
<el-row>
<el-col :span="4" v-for="(item,index) in 6">
<div class="list-step flex-div-start">
<div class="list-step-top flex-div">
<div :class="['step-img',{'isActive':index<2}]">
<i class="icon-step"></i>
</div>
<span :class="['list-line',{'isActive':index<1}]"></span>
</div>
<div v-show="index<2" class="list-step-name">
名称
</div>
<div v-show="index>=2" class="list-step-name">
点击添加
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
... ...
... ... @@ -13,6 +13,43 @@ export default {
apmMonitorHide: false,
logDetectionHide: false,
subscriptionReportHide: false,
faultDefinitionRadio:'1',//故障定义
faultStateRadio:'1',//状态启用不启用
faultApplicationRadio:'1',//应用检测
faultEnvironmentRadio:'1',//基础环境
faultAPMRadio:'1',//APM
faultLogRadio:'1',//日志
isClickNet:0,//配置链接选择
environmentTableData: [
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
],//基础环境表格数据
//网络检测选中项集合
networkMonitorList: [
{
... ... @@ -45,6 +82,11 @@ export default {
title: "arms",
type: "apmMonitor",
id: " apmMonitor1"
},
{
title: "arms2",
type: "apmMonitor",
id: " apmMonitor2"
}
],
//日志检测
... ... @@ -172,8 +214,13 @@ export default {
//点击添加网络检测item
addNetworkMonitorItem(){
},
//点击已配置链路
clickList(index){
this.isClickNet=index;
}
},
mounted () {},
unmounted () {}
... ...