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 581 additions and 166 deletions
@@ -40,7 +40,12 @@ @@ -40,7 +40,12 @@
40 40
41 @import "../css/navTabs.css"; 41 @import "../css/navTabs.css";
42 42
  43 +/*故障诊断书*/
43 @import "../css/faultDiagnosis.css"; 44 @import "../css/faultDiagnosis.css";
44 45
  46 +@import "../css/faultForm.css";
  47 +
  48 +
  49 +
45 /*对比分析*/ 50 /*对比分析*/
46 @import "../css/analysis.css"; 51 @import "../css/analysis.css";
  1 +#faultDiagnosisIndex{
  2 + color:#666
  3 +}
  4 +#faultDiagnosisIndex .el-button{
  5 + border-style: dashed;
  6 +}
  7 +#faultDiagnosisIndex .btn-faultDiagnosis .el-button{
  8 + border-style: solid;
  9 +
  10 +}
  11 +.margin-30{
  12 + margin:0 30px;
  13 +}
  14 +.margin-top{
  15 + margin-top:30px;
  16 +}
1 .fault-book-input{ 17 .fault-book-input{
2 width: 75%; 18 width: 75%;
3 text-align: center; 19 text-align: center;
4 padding: 1.5%; 20 padding: 1.5%;
5 } 21 }
6 - 22 +.context-radio{
  23 + margin-bottom: 15px;
  24 +}
7 .fault-book-input-text{ 25 .fault-book-input-text{
8 - width: 25%;  
9 - text-align: center;  
10 - margin-right: 3%; 26 + /* width: 25%;
  27 + text-align: center;*/
  28 + margin-right: 27px;
  29 +}
  30 +.fault-card{
  31 + background: #fff;
  32 + /*margin: 0 30px;*/
11 } 33 }
  34 +.fault-card .el-card{
  35 + border:none;
12 36
  37 +}
  38 +.fault-card .el-card.is-hover-shadow:focus, .fault-card .el-card.is-hover-shadow:hover{
  39 + box-shadow: none;
  40 +}
13 .fault-book-title-card{ 41 .fault-book-title-card{
14 - margin: 1%;  
15 - padding-left: 2%; 42 + margin: 1% 0;
  43 + padding: 0 1%;
  44 +
  45 +}
  46 +.fault-book-title-card-text {
  47 + position: relative;
  48 +}
  49 +.fault-book-title-card-text:after{
  50 + border-right:2px solid #3a92fc;
  51 + content: "";
  52 + display: block;
  53 + height:20px;
  54 + position: absolute;
  55 + top:16px;
  56 + right:0;
  57 +}
  58 +.fault-book-title-card-text .el-card__body{
  59 + padding:15px;
16 } 60 }
17 61
  62 +
  63 +.fault-book-title-card-text.isActive .el-card__body{
  64 + border-bottom: 2px solid #3a92fc;
  65 + display:inline-block;
  66 +}
18 .fault-book-title-card-text{ 67 .fault-book-title-card-text{
19 color: #3A92FC; 68 color: #3A92FC;
  69 + cursor: pointer;
  70 + border: none;
  71 + border-radius: 0;
20 } 72 }
21 73
22 #faultDiagnosisIndex{ 74 #faultDiagnosisIndex{
@@ -33,84 +85,99 @@ @@ -33,84 +85,99 @@
33 } 85 }
34 86
35 .title-img{ 87 .title-img{
36 - position: absolute;  
37 - left: 5%;  
38 - width: 0.8%;  
39 - top: 19.5%; 88 +
  89 + margin-right: 10px;
40 } 90 }
41 91
42 .title-text{ 92 .title-text{
43 - position: absolute;  
44 - left: 7%;  
45 - font-size: 18px;  
46 - top: 19%; 93 + display: flex;
  94 + align-items: center;
  95 + justify-content: flex-start;
  96 + margin: 10px 0;
  97 +}
  98 +.flex-div{
  99 + display: flex;
  100 + align-items: center;
  101 +}
  102 +.flex-div-start{
  103 + display: flex;
  104 + align-items: center;
  105 + justify-content: flex-start;
47 } 106 }
48 -  
49 .fault-definition .fault-definition-radio{ 107 .fault-definition .fault-definition-radio{
50 - position: absolute;  
51 - left: 7%;  
52 - top: 22%;  
53 - width: 5%; 108 + margin-left: 30px;
  109 + margin-bottom: 15px;
54 } 110 }
55 111
56 .fault-definition .fault-definition-select-up{ 112 .fault-definition .fault-definition-select-up{
57 - position: absolute;  
58 - top: 22%;  
59 - left: 20%; 113 + display: flex;
  114 + align-items: center;
  115 + color: #666;
  116 + margin-bottom: 15px;
  117 +}
  118 +.fault-definition .el-select{
  119 + margin:0 10px;
  120 +}
  121 +.margin-right-10{
  122 + margin-right:10px;
60 } 123 }
61 -  
62 .fault-definition .fault-definition-select-down{ 124 .fault-definition .fault-definition-select-down{
63 - position: absolute;  
64 - top: 27%;  
65 - left: 20%; 125 + display: flex;
  126 + align-items: center;
  127 + color: #666;
66 } 128 }
67 129
68 .network-monitor .context-radio{ 130 .network-monitor .context-radio{
69 - position: absolute; 131 + /* position: absolute;
70 left: 2.7%; 132 left: 2.7%;
71 top: 22%; 133 top: 22%;
72 - width: 20%; 134 + width: 20%;*/
  135 + display: flex;
  136 + align-items: center;
  137 + justify-content: flex-start;
  138 + margin-bottom: 15px;
73 } 139 }
74 140
75 .application-monitor .context-radio{ 141 .application-monitor .context-radio{
76 - position: absolute; 142 + /* position: absolute;
77 left: 2.7%; 143 left: 2.7%;
78 top: 22%; 144 top: 22%;
79 - width: 20%; 145 + width: 20%;*/
  146 + margin-bottom: 15px;
80 } 147 }
81 148
82 .apm-monitor .context-radio{ 149 .apm-monitor .context-radio{
83 - position: absolute; 150 + /*position: absolute;
84 left: 2.7%; 151 left: 2.7%;
85 top: 22%; 152 top: 22%;
86 - width: 20%; 153 + width: 20%;*/
87 } 154 }
88 155
89 .log-detection .context-radio{ 156 .log-detection .context-radio{
90 - position: absolute; 157 + /* position: absolute;
91 left: 2.7%; 158 left: 2.7%;
92 top: 22%; 159 top: 22%;
93 - width: 20%; 160 + width: 20%;*/
94 } 161 }
95 162
96 .basic-environment .context-radio{ 163 .basic-environment .context-radio{
97 - position: absolute; 164 + /*position: absolute;
98 left: 2.7%; 165 left: 2.7%;
99 top: 22%; 166 top: 22%;
100 - width: 20%; 167 + width: 20%;*/
101 } 168 }
102 169
103 .basic-environment .context-select{ 170 .basic-environment .context-select{
104 - position: absolute; 171 + /*position: absolute;
105 width: 40%; 172 width: 40%;
106 top: 28%; 173 top: 28%;
107 - left: 0.8%; 174 + left: 0.8%;*/
108 } 175 }
109 176
110 .context-multiple-choice{ 177 .context-multiple-choice{
111 - position: absolute; 178 + /* position: absolute;
112 left: 7%; 179 left: 7%;
113 - top: 27%; 180 + top: 27%;*/
114 } 181 }
115 182
116 .multiple-choice-icon{ 183 .multiple-choice-icon{
@@ -118,7 +185,9 @@ @@ -118,7 +185,9 @@
118 top: 28.5%; 185 top: 28.5%;
119 right: 18px; 186 right: 18px;
120 } 187 }
121 - 188 +.color-999{
  189 + color:#999;
  190 +}
122 .multiple-choice-button{ 191 .multiple-choice-button{
123 min-width: 140px; 192 min-width: 140px;
124 } 193 }
@@ -136,6 +205,7 @@ @@ -136,6 +205,7 @@
136 .network-monitor-popup-left{ 205 .network-monitor-popup-left{
137 background-color: #3B92FC; 206 background-color: #3B92FC;
138 padding-bottom: 3%; 207 padding-bottom: 3%;
  208 + min-height: 500px;
139 } 209 }
140 210
141 .network-monitor-popup{ 211 .network-monitor-popup{
@@ -153,12 +223,10 @@ @@ -153,12 +223,10 @@
153 } 223 }
154 224
155 .network-monitor-popup .multiple-choice-button{ 225 .network-monitor-popup .multiple-choice-button{
156 - width: 100%; 226 +
157 color: #C7DBFE; 227 color: #C7DBFE;
158 font-size: 18px; 228 font-size: 18px;
159 - margin-top: 15px;  
160 - padding-top: 10px;  
161 - height: 10%; 229 +
162 } 230 }
163 231
164 .network-monitor-popup-right .context-head{ 232 .network-monitor-popup-right .context-head{
@@ -166,4 +234,107 @@ @@ -166,4 +234,107 @@
166 font-size: 18px; 234 font-size: 18px;
167 text-align: left; 235 text-align: left;
168 margin-left: 4%; 236 margin-left: 4%;
  237 + display: flex;
  238 + justify-content: space-between;
  239 + align-items: center;
  240 +}
  241 +.environment-table th{
  242 + color:#3B91FF;
  243 +}
  244 +.list-data{
  245 + display: flex;
  246 + align-items: center;
  247 +}
  248 +.img-delete{
  249 + width:12px;
  250 + height:12px;
  251 + margin-left: 6px;
  252 +}
  253 +.environment-table table{
  254 + /*border-color: #666666;*/
  255 +}
  256 +
  257 +.environment-table th:nth-child(2) ,.environment-table td:nth-child(2){
  258 + padding-left: 30px;
  259 +}
  260 +.environment-table th,.environment-table td,.environment-table th.el-table__cell,.environment-table table tbody td{
  261 + background-color:#F4F5FA;
  262 + /*border-color: #666666;*/
  263 +}
  264 +.environment-table .el-table td.el-table__cell, .environment-table .el-table th.el-table__cell.is-leaf{
  265 + /*border-bottom-color: #666;*/
  266 + /*border-right-color: #666;*/
  267 +
  268 +}
  269 +.list-step{
  270 + flex-flow: column;
  271 + align-items: flex-start;
  272 +}
  273 +.list-step-name{
  274 + margin-left: 10px;
  275 + margin-top: 10px;
  276 + color:#999999;
  277 +}
  278 +.list-step-name.isActive{
  279 + color:#3B91FF;
  280 +
  281 +}
  282 +.step-img{
  283 + background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-add.png");
  284 + width: 50px;
  285 + height:50px;
  286 + background-size: contain;
  287 + background-position: center;
  288 + background-repeat: no-repeat;
  289 + cursor: pointer;
  290 +}
  291 +.step-img.isActive{
  292 + background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-circle.png");
  293 +
  294 +}
  295 +.list-line{
  296 + display: inline-block;
  297 + width: 84px;
  298 + border-top:5px solid #cccccc;
  299 +}
  300 +.list-line.isActive{
  301 + border-top-color:#3B91FF;
  302 +}
  303 +.context-body{
  304 +
  305 + margin: 15% 0 5% 4%;
  306 +}
  307 +.popup-bg .el-dialog__header{
  308 + background-color: #3B91FF;
  309 +}
  310 +.popup-bg .el-dialog__title{
  311 + color:#FFFFFF;
  312 +
  313 +}
  314 +.popup-bg .el-dialog__headerbtn .el-dialog__close{
  315 + color:#ffffff;
  316 +}
  317 +.popup-bg .el-dialog__body{
  318 + padding:10px;
  319 +}
  320 +.popup-bg .el-dialog{
  321 + min-height: 600px;
  322 +}
  323 +.flex-div-center{
  324 + display: flex;
  325 + align-items: center;
  326 + justify-content: center;
  327 +}
  328 +.list-net{
  329 + padding:20px 10px 20px 0;
  330 + margin:10px 0 10px 10px;
  331 + cursor: pointer;
  332 +
  333 +}
  334 +.list-net.isActive{
  335 + background-color: #FFFFFF;
  336 +}
  337 +.network-monitor-popup .list-net.isActive .multiple-choice-button{
  338 + color:#3B91FF;
  339 +
169 } 340 }
  1 +.faultForm{
  2 + background-color: #F4F5FA;
  3 + height: 100%;
  4 + padding:30px 20px;
  5 +}
  6 +.btn-search{
  7 + margin-left: 20px;
  8 +}
@@ -123,8 +123,15 @@ const routes = [{ @@ -123,8 +123,15 @@ const routes = [{
123 { 123 {
124 path: '/fault/index', 124 path: '/fault/index',
125 name: 'view', 125 name: 'view',
126 - component: () => myImport('views/faultDiagnosis/index')  
127 - } 126 + // component: () => myImport('views/faultDiagnosis/index')
  127 + component: () => myImport('views/faultDiagnosis/components/faultForm/index')
  128 +
  129 + },
  130 + /*{
  131 + path: '/fault/faultForm',
  132 + name: 'view',
  133 + component: () => myImport('views/faultDiagnosis/components/faultForm/index')
  134 + }*/
128 ]; 135 ];
129 136
130 // hash模式： createWebHashHistory 137 // hash模式： createWebHashHistory
  1 +<div class="faultForm">
  2 + <el-row>
  3 + <el-col :span="12" class="flex-div">
  4 + <div class="grid-content bg-purple">
  5 + <el-input v-model="input" placeholder="输入关键字" class="fault-book-input"/>
  6 + </div>
  7 + <div class="grid-content bg-purple">
  8 + <el-select v-model="value" placeholder="故障分类">
  9 + <el-option
  10 + v-for="item in options"
  11 + :key="item.value"
  12 + :label="item.label"
  13 + :value="item.value"
  14 + >
  15 + </el-option>
  16 + </el-select>
  17 + </div>
  18 + <div class="grid-content bg-purple btn-search">
  19 + <el-button class="" type="primary">搜索</el-button>
  20 + </div>
  21 +
  22 + </el-col>
  23 + </el-row>
  24 + <el-row>
  25 + el
  26 + </el-row>
  27 +</div>
  1 +export default {
  2 + name: 'faultForm',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 + options:[{value:120,label:'name'}]
  8 + }
  9 + },
  10 + computed: {},
  11 + methods: {
  12 +
  13 + },
  14 + mounted () {},
  15 + unmounted () {}
  16 +
  17 +}
1 <div id="faultDiagnosisIndex"> 1 <div id="faultDiagnosisIndex">
2 <!--搜索输入框部分--> 2 <!--搜索输入框部分-->
  3 + <div class="margin-30">
3 <el-row> 4 <el-row>
4 <el-col :span="6"> 5 <el-col :span="6">
5 <div class="grid-content bg-purple"> 6 <div class="grid-content bg-purple">
@@ -14,47 +15,58 @@ @@ -14,47 +15,58 @@
14 </div> 15 </div>
15 </el-col> 16 </el-col>
16 </el-row> 17 </el-row>
  18 + </div>
  19 +
17 20
18 <!--卡片分页排头--> 21 <!--卡片分页排头-->
  22 + <div class="fault-card margin-30">
19 <el-row :gutter="12" class="fault-book-title-card"> 23 <el-row :gutter="12" class="fault-book-title-card">
20 <el-col :span="3"> 24 <el-col :span="3">
21 - <el-card class="fault-book-title-card-text" @click="clickDaultDefinitionFunc()" shadow="hover">故障定义</el-card> 25 + <el-card class="fault-book-title-card-text isActive" @click="clickDaultDefinitionFunc()" shadow="hover"><span class="card-name">故障定义</span></el-card>
22 </el-col> 26 </el-col>
23 <el-col :span="3"> 27 <el-col :span="3">
24 - <el-card class="fault-book-title-card-text" @click="clickNetworkMonitorFunc()" shadow="hover">网络监测</el-card> 28 + <el-card class="fault-book-title-card-text" @click="clickNetworkMonitorFunc()" shadow="hover"><span class="card-name">网络监测</span></el-card>
25 </el-col> 29 </el-col>
26 <el-col :span="3"> 30 <el-col :span="3">
27 - <el-card class="fault-book-title-card-text" @click="applicationMonitorFunc()" shadow="hover">应用检测</el-card> 31 + <el-card class="fault-book-title-card-text" @click="applicationMonitorFunc()" shadow="hover"><span class="card-name">应用检测</span></el-card>
28 </el-col> 32 </el-col>
29 <el-col :span="3"> 33 <el-col :span="3">
30 - <el-card class="fault-book-title-card-text" @click="basicEnvironmentFunc()" shadow="hover">基础环境</el-card> 34 + <el-card class="fault-book-title-card-text" @click="basicEnvironmentFunc()" shadow="hover"><span class="card-name">基础环境</span></el-card>
31 </el-col> 35 </el-col>
32 <el-col :span="3"> 36 <el-col :span="3">
33 - <el-card class="fault-book-title-card-text" @click="apmMonitorFunc()" shadow="hover">APM</el-card> 37 + <el-card class="fault-book-title-card-text" @click="apmMonitorFunc()" shadow="hover"><span class="card-name">APM</span></el-card>
34 </el-col> 38 </el-col>
35 <el-col :span="3"> 39 <el-col :span="3">
36 - <el-card class="fault-book-title-card-text" @click="logDetectionFunc()" shadow="hover">日志检测</el-card> 40 + <el-card class="fault-book-title-card-text" @click="logDetectionFunc()" shadow="hover"><span class="card-name">日志检测</span></el-card>
37 </el-col> 41 </el-col>
38 <el-col :span="3"> 42 <el-col :span="3">
39 - <el-card class="fault-book-title-card-text" @click="subscriptionReportFunc()" shadow="hover">报告订阅</el-card> 43 + <el-card class="fault-book-title-card-text" @click="subscriptionReportFunc()" shadow="hover"><span class="card-name">报告订阅</span></el-card>
40 </el-col> 44 </el-col>
41 </el-row> 45 </el-row>
  46 + </div>
  47 +
42 48
43 <!---主体卡片部分--> 49 <!---主体卡片部分-->
44 <!--故障定义--> 50 <!--故障定义-->
45 - <div class="fault-definition" v-if="faultDefinitionHide">  
46 - <div>  
47 - <span> 51 + <div class="fault-definition margin-30" v-if="faultDefinitionHide">
  52 + <el-row>
  53 + <el-col :span="6">
  54 + <div class="title-text">
  55 +
48 <img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img"> 56 <img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img">
49 - <span class="title-text">故障定义</span>  
50 - </span> 57 + <span>故障定义</span>
  58 +
51 </div> 59 </div>
52 - <div>  
53 - <span class="fault-definition-radio"> 60 + </el-col>
  61 + </el-row>
  62 + <el-row>
  63 + <el-col :span="3" class="flex-div">
  64 + <div class="fault-definition-radio flex-div-start">
54 <el-radio v-model="faultDefinitionRadio" label="1">产生告警时触发</el-radio> 65 <el-radio v-model="faultDefinitionRadio" label="1">产生告警时触发</el-radio>
55 - <el-radio v-model="faultDefinitionRadio" label="2">自定义规则</el-radio>  
56 - </span>  
57 - <span class="fault-definition-select-up"> 66 + </div>
  67 + </el-col>
  68 + <el-col :span="21" class="flex-div">
  69 + <div class="fault-definition-select-up">
58 当 70 当
59 <el-select v-model="value" placeholder="Select"> 71 <el-select v-model="value" placeholder="Select">
60 <el-option 72 <el-option
@@ -76,8 +88,18 @@ @@ -76,8 +88,18 @@
76 </el-option> 88 </el-option>
77 </el-select> 89 </el-select>
78 时触发 90 时触发
79 - </span>  
80 - <span class="fault-definition-select-down"> 91 + </div>
  92 + </el-col>
  93 + </el-row>
  94 + <el-row>
  95 + <el-col :span="3">
  96 + <div class="fault-definition-radio flex-div-start">
  97 + <el-radio v-model="faultDefinitionRadio" label="2">自定义规则</el-radio>
  98 + </div>
  99 +
  100 + </el-col>
  101 + <el-col :span="21">
  102 + <div class="fault-definition-select-down">
81 当 103 当
82 <el-select v-model="value" placeholder="Select"> 104 <el-select v-model="value" placeholder="Select">
83 <el-option 105 <el-option
@@ -99,81 +121,109 @@ @@ -99,81 +121,109 @@
99 </el-option> 121 </el-option>
100 </el-select> 122 </el-select>
101 时触发 123 时触发
102 - </span>  
103 -  
104 </div> 124 </div>
  125 + </el-col>
  126 + </el-row>
105 </div> 127 </div>
106 128
107 <!--网络检测--> 129 <!--网络检测-->
108 - <div class="network-monitor" v-if="networkMonitorHide">  
109 - <div>  
110 - <span> 130 + <div class="network-monitor margin-30" v-if="networkMonitorHide">
  131 + <el-row>
  132 + <el-col :span="6">
  133 + <div class="title-text">
111 <img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img"> 134 <img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img">
112 - <span class="title-text">网络检测</span>  
113 - </span> 135 + <span>网络检测</span>
114 </div> 136 </div>
115 - <div class="context-radio"> 137 + </el-col>
  138 + </el-row>
  139 + <el-row>
  140 + <el-col :span="24">
  141 + <div class="context-radio flex-div-start margin-30">
116 <span class="fault-book-input-text">状态选择</span> 142 <span class="fault-book-input-text">状态选择</span>
117 - <el-radio v-model="radio1" label="1">启用</el-radio>  
118 - <el-radio v-model="radio1" label="2">不启用</el-radio> 143 + <el-radio v-model="faultStateRadio" label="1">启用</el-radio>
  144 + <el-radio v-model="faultStateRadio" label="2">不启用</el-radio>
119 </div> 145 </div>
120 - <div class="context-multiple-choice">  
121 - <span v-for="(item, index) in networkMonitorList" :key="index">  
122 - <span> 146 + </el-col>
  147 + </el-row>
  148 + <el-row>
  149 + <el-col :span="24">
  150 + <div class="context-multiple-choice flex-div-start margin-30">
  151 + <div v-for="(item, index) in networkMonitorList" :key="index">
  152 + <div>
123 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button> 153 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
124 <img :id="item.id" @click="deleteItem(item.id, networkMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon"> 154 <img :id="item.id" @click="deleteItem(item.id, networkMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
125 - </span>  
126 - </span>  
127 - <span>  
128 - <el-button class="multiple-choice-button" @click="networkMonitorVisible = true">添加网络检测</el-button> 155 + </div>
  156 + </div>
  157 + <div class=" flex-div">
  158 + <el-button class="multiple-choice-button color-999" @click="networkMonitorVisible = true">添加网络检测</el-button>
129 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 159 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
130 - </span>  
131 </div> 160 </div>
132 </div> 161 </div>
  162 + </el-col>
  163 + </el-row>
  164 + </div>
133 165
134 <!--应用监测--> 166 <!--应用监测-->
135 - <div class="application-monitor" v-if="applicationMonitorHide">  
136 - <div>  
137 - <span> 167 + <div class="application-monitor margin-30" v-if="applicationMonitorHide">
  168 + <el-row>
  169 + <el-col :span="6">
  170 + <div class="title-text">
138 <img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img"> 171 <img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img">
139 - <span class="title-text">应用检测</span>  
140 - </span> 172 + <span>应用检测</span>
141 </div> 173 </div>
142 - <div class="context-radio"> 174 + </el-col>
  175 + </el-row>
  176 + <el-row>
  177 + <el-col :span="24">
  178 + <div class="context-radio flex-div-start margin-30">
143 <span class="fault-book-input-text">状态选择</span> 179 <span class="fault-book-input-text">状态选择</span>
144 - <el-radio v-model="radio1" label="1">启用</el-radio>  
145 - <el-radio v-model="radio1" label="2">不启用</el-radio> 180 + <el-radio v-model="faultApplicationRadio" label="1">启用</el-radio>
  181 + <el-radio v-model="faultApplicationRadio" label="2">不启用</el-radio>
146 </div> 182 </div>
147 - <div class="context-multiple-choice">  
148 - <span v-for="(item, index) in applicationMonitorList" :key="index">  
149 - <span> 183 + </el-col>
  184 + </el-row>
  185 + <el-row>
  186 + <el-col :span="24">
  187 + <div class="context-multiple-choice flex-div-start margin-30">
  188 + <div v-for="(item, index) in applicationMonitorList" :key="index">
  189 + <div>
150 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button> 190 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
151 <img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon"> 191 <img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
152 - </span>  
153 - </span>  
154 - <span>  
155 - <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加应用检测</el-button> 192 + </div>
  193 + </div>
  194 + <div class=" flex-div">
  195 + <el-button class="multiple-choice-button color-999" @click="addNetworkMonitorItem()">添加应用检测</el-button>
156 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 196 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
157 - </span>  
158 </div> 197 </div>
159 </div> 198 </div>
  199 + </el-col>
  200 + </el-row>
  201 + </div>
160 202
161 <!--基础环境 Basic environment--> 203 <!--基础环境 Basic environment-->
162 - <div class="basic-environment" v-if="basicEnvironmentHide">  
163 - <div>  
164 - <span> 204 + <div class="basic-environment margin-30" v-if="basicEnvironmentHide">
  205 + <el-row>
  206 + <el-col :span="6">
  207 + <div class="title-text">
165 <img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img"> 208 <img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img">
166 - <span class="title-text">基础环境</span>  
167 - </span> 209 + <span>基础环境</span>
168 </div> 210 </div>
169 - <div class="context-radio"> 211 + </el-col>
  212 + </el-row>
  213 + <el-row>
  214 + <el-col :span="24">
  215 + <div class="context-radio flex-div-start margin-30">
170 <span class="fault-book-input-text">状态选择</span> 216 <span class="fault-book-input-text">状态选择</span>
171 - <el-radio v-model="radio1" label="1">启用</el-radio>  
172 - <el-radio v-model="radio1" label="2">不启用</el-radio> 217 + <el-radio v-model="faultEnvironmentRadio" label="1">启用</el-radio>
  218 + <el-radio v-model="faultEnvironmentRadio" label="2">不启用</el-radio>
173 </div> 219 </div>
174 - <div class="context-select"> 220 + </el-col>
  221 + </el-row>
  222 + <el-row>
  223 + <el-col :span="24">
  224 + <div class="context-select flex-div-start margin-30">
175 <span class="fault-book-input-text context-select-text">选择类型</span> 225 <span class="fault-book-input-text context-select-text">选择类型</span>
176 - <el-select v-model="value" placeholder="从业务选择"> 226 + <el-select v-model="value" placeholder="从业务选择" class="margin-right-10">
177 <el-option 227 <el-option
178 v-for="item in options" 228 v-for="item in options"
179 :key="item.value" 229 :key="item.value"
@@ -192,116 +242,199 @@ @@ -192,116 +242,199 @@
192 </el-option> 242 </el-option>
193 </el-select> 243 </el-select>
194 </div> 244 </div>
  245 + </el-col>
  246 + </el-row>
  247 + <el-row>
  248 + <el-col :span="24">
  249 + <div class="environment-table margin-top flex-div-start margin-30">
  250 + <el-table :data="environmentTableData" border height="250" style="width: 100%">
  251 + <el-table-column align="center" prop="name" label="Name" width="180" />
  252 + <el-table-column prop="address" label="Address" class="margin-30" >
  253 + <template #default="scope">
  254 + <div class="list-data">
  255 + <span class="list-data-text">住址: {{ scope.row.address }}</span>
  256 + <img :id="scope.row.index" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="img-delete">
  257 +
  258 + </div>
  259 +
  260 + </template>
  261 + </el-table-column>
  262 + </el-table>
  263 + </div>
  264 +
  265 + </el-col>
  266 +
  267 + </el-row>
  268 +
  269 +
  270 +
195 </div> 271 </div>
196 272
197 <!--APM--> 273 <!--APM-->
198 - <div class="apm-monitor" v-if="apmMonitorHide">  
199 - <div>  
200 - <span> 274 + <div class="apm-monitor margin-30" v-if="apmMonitorHide">
  275 + <el-row>
  276 + <el-rol :span="6">
  277 + <div class="title-text">
201 <img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img"> 278 <img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img">
202 - <span class="title-text">APM</span>  
203 - </span> 279 + <span>APM</span>
204 </div> 280 </div>
205 - <div class="context-radio"> 281 + </el-rol>
  282 + </el-row>
  283 + <el-row>
  284 + <el-col :span="24">
  285 + <div class="context-radio flex-div-start margin-30">
206 <span class="fault-book-input-text">状态选择</span> 286 <span class="fault-book-input-text">状态选择</span>
207 - <el-radio v-model="radio1" label="1">启用</el-radio>  
208 - <el-radio v-model="radio1" label="2">不启用</el-radio> 287 + <el-radio v-model="faultAPMRadio" label="1">启用</el-radio>
  288 + <el-radio v-model="faultAPMRadio" label="2">不启用</el-radio>
209 </div> 289 </div>
210 - <div class="context-multiple-choice">  
211 - <span v-for="(item, index) in apmMonitorList" :key="index">  
212 - <span> 290 + </el-col>
  291 + </el-row>
  292 + <el-row>
  293 + <el-col :span="24">
  294 + <div class="context-multiple-choice flex-div-start margin-30">
  295 + <div v-for="(item, index) in apmMonitorList" :key="index">
  296 + <div>
213 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button> 297 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
214 <img :id="item.id" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon"> 298 <img :id="item.id" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
215 - </span>  
216 - </span>  
217 - <span> 299 + </div>
  300 + </div>
  301 + <div>
218 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button> 302 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button>
219 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 303 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
220 - </span>  
221 </div> 304 </div>
222 </div> 305 </div>
  306 + </el-col>
  307 + </el-row>
  308 +
  309 +
  310 + </div>
223 311
224 <!--日志检测--> 312 <!--日志检测-->
225 - <div class="log-detection" v-if="logDetectionHide">  
226 - <div>  
227 - <span> 313 + <div class="log-detection margin-30" v-if="logDetectionHide">
  314 + <el-row>
  315 + <el-col :span="6">
  316 + <div class="title-text">
228 <img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img"> 317 <img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img">
229 - <span class="title-text">日志检测</span>  
230 - </span> 318 + <span>日志检测</span>
231 </div> 319 </div>
232 - <div class="context-radio"> 320 + </el-col>
  321 + </el-row>
  322 + <el-row>
  323 + <el-col :span="24">
  324 + <div class="context-radio flex-div-start margin-30">
233 <span class="fault-book-input-text">状态选择</span> 325 <span class="fault-book-input-text">状态选择</span>
234 - <el-radio v-model="radio1" label="1">启用</el-radio>  
235 - <el-radio v-model="radio1" label="2">不启用</el-radio> 326 + <el-radio v-model="faultLogRadio" label="1">启用</el-radio>
  327 + <el-radio v-model="faultLogRadio" label="2">不启用</el-radio>
236 </div> 328 </div>
237 - <div class="context-multiple-choice">  
238 - <span v-for="(item, index) in logDetectionList" :key="index">  
239 - <span> 329 + </el-col>
  330 + </el-row>
  331 + <el-row>
  332 + <el-col :span="24">
  333 + <div class="context-multiple-choice flex-div-start margin-30">
  334 + <div v-for="(item, index) in logDetectionList" :key="index">
  335 + <div>
240 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button> 336 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
241 <img :id="item.id" @click="deleteItem(item.id, logDetectionList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon"> 337 <img :id="item.id" @click="deleteItem(item.id, logDetectionList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
242 - </span>  
243 - </span>  
244 - <span> 338 + </div>
  339 + </div>
  340 + <div>
245 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button> 341 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button>
246 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 342 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
247 - </span>  
248 </div> 343 </div>
249 </div> 344 </div>
  345 + </el-col>
  346 + </el-row>
  347 + </div>
250 348
251 <!--订阅报告--> 349 <!--订阅报告-->
252 - <div class="subscription-report" v-if="subscriptionReportHide">  
253 - <div>  
254 - <span> 350 + <div class="subscription-report margin-30" v-if="subscriptionReportHide">
  351 + <el-row>
  352 + <el-col :span="6">
  353 + <div class="title-text">
255 <img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img"> 354 <img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img">
256 - <span class="title-text">报告订阅</span>  
257 - </span> 355 + <span>报告订阅</span>
258 </div> 356 </div>
259 - <div class="context-multiple-choice">  
260 - <span v-for="(item, index) in subscriptionReportList" :key="index">  
261 - <span> 357 + </el-col>
  358 + </el-row>
  359 + <el-row>
  360 + <el-col :span="24">
  361 + <div class="context-multiple-choice flex-div-start margin-30">
  362 + <div v-for="(item, index) in subscriptionReportList" :key="index">
  363 + <div>
262 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button> 364 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
263 <img :id="item.id" @click="deleteItem(item.id, subscriptionReportList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon"> 365 <img :id="item.id" @click="deleteItem(item.id, subscriptionReportList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
264 - </span>  
265 - </span>  
266 - <span> 366 + </div>
  367 + </div>
  368 + <div>
267 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button> 369 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button>
268 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 370 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
269 - </span>  
270 </div> 371 </div>
271 </div> 372 </div>
  373 + </el-col>
  374 + </el-row>
  375 + </div>
  376 +
  377 + <!--取消和保存-->
  378 + <div class="btn-faultDiagnosis">
  379 + <el-button>取消</el-button>
  380 + <el-button type="primary">保存</el-button>
  381 +
  382 + </div>
272 383
273 <!--网络检测弹窗--> 384 <!--网络检测弹窗-->
274 - <div class="network-monitor-popup">  
275 - <el-dialog v-model="networkMonitorVisible" title="故障新增内容"> 385 + <div class="network-monitor-popup popup-bg">
  386 + <el-dialog v-model="networkMonitorVisible" title="故障新增内容" width="60%">
276 <el-row> 387 <el-row>
277 <el-col :span="6"> 388 <el-col :span="6">
278 <div class="grid-content bg-purple network-monitor-popup-left"> 389 <div class="grid-content bg-purple network-monitor-popup-left">
279 - <span> 390 + <div>
280 <div class="context-head"> 391 <div class="context-head">
281 已配置链路 392 已配置链路
282 </div> 393 </div>
283 - </span>  
284 - <span v-for="(item, index) in networkMonitorList" :key="index">  
285 - <span> 394 + </div>
  395 + <div @click="clickList(index)" :class="['list-net',{'isActive':index==isClickNet}]" v-for="(item, index) in networkMonitorList" :key="index">
  396 + <div class="flex-div-center ">
286 <div class="multiple-choice-button">{{item.title}}</div> 397 <div class="multiple-choice-button">{{item.title}}</div>
287 - <!--img-->  
288 - </span>  
289 - </span>  
290 - <span> 398 + <img v-show="index==isClickNet" class="img-delete" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" alt="">
  399 + </div>
  400 + </div>
  401 + <div class="list-net">
291 <div class="multiple-choice-button"> 402 <div class="multiple-choice-button">
292 <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png"> 403 <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">
293 </div> 404 </div>
294 - </span> 405 + </div>
295 406
296 </div> 407 </div>
297 </el-col> 408 </el-col>
298 <el-col :span="18"> 409 <el-col :span="18">
299 <div class="grid-content bg-purple-light network-monitor-popup-right"> 410 <div class="grid-content bg-purple-light network-monitor-popup-right">
300 <div class="context-head"> 411 <div class="context-head">
301 - <span>电子税务局网络链路配置</span>  
302 - <span > 412 + <div>电子税务局网络链路配置</div>
  413 + <div >
303 <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png"> 414 <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">
304 - </span> 415 + </div>
  416 + </div>
  417 + <div class="context-body">
  418 + <el-row>
  419 + <el-col :span="4" v-for="(item,index) in 6">
  420 + <div class="list-step flex-div-start">
  421 + <div class="list-step-top flex-div">
  422 + <div :class="['step-img',{'isActive':index<2}]">
  423 + <i class="icon-step"></i>
  424 + </div>
  425 + <span :class="['list-line',{'isActive':index<1}]"></span>
  426 + </div>
  427 + <div v-show="index<2" class="list-step-name">
  428 + 名称
  429 + </div>
  430 + <div v-show="index>=2" class="list-step-name">
  431 + 点击添加
  432 + </div>
  433 +
  434 + </div>
  435 + </el-col>
  436 + </el-row>
  437 +
305 </div> 438 </div>
306 </div> 439 </div>
307 </el-col> 440 </el-col>
@@ -13,6 +13,43 @@ export default { @@ -13,6 +13,43 @@ export default {
13 apmMonitorHide: false, 13 apmMonitorHide: false,
14 logDetectionHide: false, 14 logDetectionHide: false,
15 subscriptionReportHide: false, 15 subscriptionReportHide: false,
  16 + faultDefinitionRadio:'1',//故障定义
  17 + faultStateRadio:'1',//状态启用不启用
  18 + faultApplicationRadio:'1',//应用检测
  19 + faultEnvironmentRadio:'1',//基础环境
  20 + faultAPMRadio:'1',//APM
  21 + faultLogRadio:'1',//日志
  22 + isClickNet:0,//配置链接选择
  23 + environmentTableData: [
  24 + {
  25 + name: 'Tom',
  26 + address: 'No. 189, Grove St, Los Angeles',
  27 + },
  28 + {
  29 + name: 'Tom',
  30 + address: 'No. 189, Grove St, Los Angeles',
  31 + },
  32 + {
  33 + name: 'Tom',
  34 + address: 'No. 189, Grove St, Los Angeles',
  35 + },
  36 + {
  37 + name: 'Tom',
  38 + address: 'No. 189, Grove St, Los Angeles',
  39 + },
  40 + {
  41 + name: 'Tom',
  42 + address: 'No. 189, Grove St, Los Angeles',
  43 + },
  44 + {
  45 + name: 'Tom',
  46 + address: 'No. 189, Grove St, Los Angeles',
  47 + },
  48 + {
  49 + name: 'Tom',
  50 + address: 'No. 189, Grove St, Los Angeles',
  51 + },
  52 + ],//基础环境表格数据
16 //网络检测选中项集合 53 //网络检测选中项集合
17 networkMonitorList: [ 54 networkMonitorList: [
18 { 55 {
@@ -45,6 +82,11 @@ export default { @@ -45,6 +82,11 @@ export default {
45 title: "arms", 82 title: "arms",
46 type: "apmMonitor", 83 type: "apmMonitor",
47 id: " apmMonitor1" 84 id: " apmMonitor1"
  85 + },
  86 + {
  87 + title: "arms2",
  88 + type: "apmMonitor",
  89 + id: " apmMonitor2"
48 } 90 }
49 ], 91 ],
50 //日志检测 92 //日志检测
@@ -172,8 +214,13 @@ export default { @@ -172,8 +214,13 @@ export default {
172 //点击添加网络检测item 214 //点击添加网络检测item
173 addNetworkMonitorItem(){ 215 addNetworkMonitorItem(){
174 216
  217 + },
  218 + //点击已配置链路
  219 + clickList(index){
  220 + this.isClickNet=index;
175 } 221 }
176 222
  223 +
177 }, 224 },
178 mounted () {}, 225 mounted () {},
179 unmounted () {} 226 unmounted () {}