monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit f135be3c5cc2dbbecf9ef180ae48d57c92860ae2 2 parents cf1ac5a8 57ee12b5

Merge branch 'master-v32-lushangqing' into 'master' 

大屏的申报数字前面的0是灰色，故障诊断书部分页面



See merge request !103
Inline Side-by-side
Showing 11 changed files with 722 additions and 305 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 - <el-row>  
4 - <el-col :span="6">  
5 - <div class="grid-content bg-purple">  
6 - <span class="fault-book-input-text">所属业务</span>  
7 - <el-input v-model="input" placeholder="Please input 1" class="fault-book-input"/>  
8 - </div>  
9 - </el-col>  
10 - <el-col :span="6">  
11 - <div class="grid-content bg-purple">  
12 - <span class="fault-book-input-text">名称</span>  
13 - <el-input v-model="input" placeholder="Please input 2" class="fault-book-input"/>  
14 - </div>  
15 - </el-col>  
16 - </el-row> 3 + <div class="margin-30">
  4 + <el-row>
  5 + <el-col :span="6">
  6 + <div class="grid-content bg-purple">
  7 + <span class="fault-book-input-text">所属业务</span>
  8 + <el-input v-model="input" placeholder="Please input 1" class="fault-book-input"/>
  9 + </div>
  10 + </el-col>
  11 + <el-col :span="6">
  12 + <div class="grid-content bg-purple">
  13 + <span class="fault-book-input-text">名称</span>
  14 + <el-input v-model="input" placeholder="Please input 2" class="fault-book-input"/>
  15 + </div>
  16 + </el-col>
  17 + </el-row>
  18 + </div>
  19 +
17 20
18 <!--卡片分页排头--> 21 <!--卡片分页排头-->
19 - <el-row :gutter="12" class="fault-book-title-card">  
20 - <el-col :span="3">  
21 - <el-card class="fault-book-title-card-text" @click="clickDaultDefinitionFunc()" shadow="hover">故障定义</el-card>  
22 - </el-col>  
23 - <el-col :span="3">  
24 - <el-card class="fault-book-title-card-text" @click="clickNetworkMonitorFunc()" shadow="hover">网络监测</el-card>  
25 - </el-col>  
26 - <el-col :span="3">  
27 - <el-card class="fault-book-title-card-text" @click="applicationMonitorFunc()" shadow="hover">应用检测</el-card>  
28 - </el-col>  
29 - <el-col :span="3">  
30 - <el-card class="fault-book-title-card-text" @click="basicEnvironmentFunc()" shadow="hover">基础环境</el-card>  
31 - </el-col>  
32 - <el-col :span="3">  
33 - <el-card class="fault-book-title-card-text" @click="apmMonitorFunc()" shadow="hover">APM</el-card>  
34 - </el-col>  
35 - <el-col :span="3">  
36 - <el-card class="fault-book-title-card-text" @click="logDetectionFunc()" shadow="hover">日志检测</el-card>  
37 - </el-col>  
38 - <el-col :span="3">  
39 - <el-card class="fault-book-title-card-text" @click="subscriptionReportFunc()" shadow="hover">报告订阅</el-card>  
40 - </el-col>  
41 - </el-row> 22 + <div class="fault-card margin-30">
  23 + <el-row :gutter="12" class="fault-book-title-card">
  24 + <el-col :span="3">
  25 + <el-card class="fault-book-title-card-text isActive" @click="clickDaultDefinitionFunc()" shadow="hover"><span class="card-name">故障定义</span></el-card>
  26 + </el-col>
  27 + <el-col :span="3">
  28 + <el-card class="fault-book-title-card-text" @click="clickNetworkMonitorFunc()" shadow="hover"><span class="card-name">网络监测</span></el-card>
  29 + </el-col>
  30 + <el-col :span="3">
  31 + <el-card class="fault-book-title-card-text" @click="applicationMonitorFunc()" shadow="hover"><span class="card-name">应用检测</span></el-card>
  32 + </el-col>
  33 + <el-col :span="3">
  34 + <el-card class="fault-book-title-card-text" @click="basicEnvironmentFunc()" shadow="hover"><span class="card-name">基础环境</span></el-card>
  35 + </el-col>
  36 + <el-col :span="3">
  37 + <el-card class="fault-book-title-card-text" @click="apmMonitorFunc()" shadow="hover"><span class="card-name">APM</span></el-card>
  38 + </el-col>
  39 + <el-col :span="3">
  40 + <el-card class="fault-book-title-card-text" @click="logDetectionFunc()" shadow="hover"><span class="card-name">日志检测</span></el-card>
  41 + </el-col>
  42 + <el-col :span="3">
  43 + <el-card class="fault-book-title-card-text" @click="subscriptionReportFunc()" shadow="hover"><span class="card-name">报告订阅</span></el-card>
  44 + </el-col>
  45 + </el-row>
  46 + </div>
  47 +
42 48
43 <!---主体卡片部分--> 49 <!---主体卡片部分-->
44 <!--故障定义--> 50 <!--故障定义-->
45 - <div class="fault-definition" v-if="faultDefinitionHide">  
46 - <div>  
47 - <span>  
48 - <img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img">  
49 - <span class="title-text">故障定义</span>  
50 - </span>  
51 - </div>  
52 - <div>  
53 - <span class="fault-definition-radio">  
54 - <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">  
58 - 当  
59 - <el-select v-model="value" placeholder="Select">  
60 - <el-option  
61 - v-for="item in options"  
62 - :key="item.value"  
63 - :label="item.label"  
64 - :value="item.value"  
65 - >  
66 - </el-option>  
67 - </el-select>  
68 - 的警告级别为  
69 - <el-select v-model="value" placeholder="Select">  
70 - <el-option  
71 - v-for="item in options"  
72 - :key="item.value"  
73 - :label="item.label"  
74 - :value="item.value"  
75 - >  
76 - </el-option>  
77 - </el-select>  
78 - 时触发  
79 - </span>  
80 - <span class="fault-definition-select-down">  
81 - 当  
82 - <el-select v-model="value" placeholder="Select">  
83 - <el-option  
84 - v-for="item in options"  
85 - :key="item.value"  
86 - :label="item.label"  
87 - :value="item.value"  
88 - >  
89 - </el-option>  
90 - </el-select>  
91 - 的警告级别为  
92 - <el-select v-model="value" placeholder="Select">  
93 - <el-option  
94 - v-for="item in options"  
95 - :key="item.value"  
96 - :label="item.label"  
97 - :value="item.value"  
98 - >  
99 - </el-option>  
100 - </el-select>  
101 - 时触发  
102 - </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 +
  56 + <img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img">
  57 + <span>故障定义</span>
  58 +
  59 + </div>
  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">
  65 + <el-radio v-model="faultDefinitionRadio" label="1">产生告警时触发</el-radio>
  66 + </div>
  67 + </el-col>
  68 + <el-col :span="21" class="flex-div">
  69 + <div class="fault-definition-select-up">
  70 + 当
  71 + <el-select v-model="value" placeholder="Select">
  72 + <el-option
  73 + v-for="item in options"
  74 + :key="item.value"
  75 + :label="item.label"
  76 + :value="item.value"
  77 + >
  78 + </el-option>
  79 + </el-select>
  80 + 的警告级别为
  81 + <el-select v-model="value" placeholder="Select">
  82 + <el-option
  83 + v-for="item in options"
  84 + :key="item.value"
  85 + :label="item.label"
  86 + :value="item.value"
  87 + >
  88 + </el-option>
  89 + </el-select>
  90 + 时触发
  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>
103 99
104 - </div> 100 + </el-col>
  101 + <el-col :span="21">
  102 + <div class="fault-definition-select-down">
  103 + 当
  104 + <el-select v-model="value" placeholder="Select">
  105 + <el-option
  106 + v-for="item in options"
  107 + :key="item.value"
  108 + :label="item.label"
  109 + :value="item.value"
  110 + >
  111 + </el-option>
  112 + </el-select>
  113 + 的警告级别为
  114 + <el-select v-model="value" placeholder="Select">
  115 + <el-option
  116 + v-for="item in options"
  117 + :key="item.value"
  118 + :label="item.label"
  119 + :value="item.value"
  120 + >
  121 + </el-option>
  122 + </el-select>
  123 + 时触发
  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>  
111 - <img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img">  
112 - <span class="title-text">网络检测</span>  
113 - </span>  
114 - </div>  
115 - <div class="context-radio">  
116 - <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>  
119 - </div>  
120 - <div class="context-multiple-choice">  
121 - <span v-for="(item, index) in networkMonitorList" :key="index">  
122 - <span>  
123 - <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">  
125 - </span>  
126 - </span>  
127 - <span>  
128 - <el-button class="multiple-choice-button" @click="networkMonitorVisible = true">添加网络检测</el-button>  
129 - <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">  
130 - </span>  
131 - </div> 130 + <div class="network-monitor margin-30" v-if="networkMonitorHide">
  131 + <el-row>
  132 + <el-col :span="6">
  133 + <div class="title-text">
  134 + <img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img">
  135 + <span>网络检测</span>
  136 + </div>
  137 + </el-col>
  138 + </el-row>
  139 + <el-row>
  140 + <el-col :span="24">
  141 + <div class="context-radio flex-div-start margin-30">
  142 + <span class="fault-book-input-text">状态选择</span>
  143 + <el-radio v-model="faultStateRadio" label="1">启用</el-radio>
  144 + <el-radio v-model="faultStateRadio" label="2">不启用</el-radio>
  145 + </div>
  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>
  153 + <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
  154 + <img :id="item.id" @click="deleteItem(item.id, networkMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
  155 + </div>
  156 + </div>
  157 + <div class=" flex-div">
  158 + <el-button class="multiple-choice-button color-999" @click="networkMonitorVisible = true">添加网络检测</el-button>
  159 + <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
  160 + </div>
  161 + </div>
  162 + </el-col>
  163 + </el-row>
132 </div> 164 </div>
133 165
134 <!--应用监测--> 166 <!--应用监测-->
135 - <div class="application-monitor" v-if="applicationMonitorHide">  
136 - <div>  
137 - <span>  
138 - <img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img">  
139 - <span class="title-text">应用检测</span>  
140 - </span>  
141 - </div>  
142 - <div class="context-radio">  
143 - <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>  
146 - </div>  
147 - <div class="context-multiple-choice">  
148 - <span v-for="(item, index) in applicationMonitorList" :key="index">  
149 - <span>  
150 - <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">  
152 - </span>  
153 - </span>  
154 - <span>  
155 - <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加应用检测</el-button>  
156 - <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">  
157 - </span>  
158 - </div> 167 + <div class="application-monitor margin-30" v-if="applicationMonitorHide">
  168 + <el-row>
  169 + <el-col :span="6">
  170 + <div class="title-text">
  171 + <img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img">
  172 + <span>应用检测</span>
  173 + </div>
  174 + </el-col>
  175 + </el-row>
  176 + <el-row>
  177 + <el-col :span="24">
  178 + <div class="context-radio flex-div-start margin-30">
  179 + <span class="fault-book-input-text">状态选择</span>
  180 + <el-radio v-model="faultApplicationRadio" label="1">启用</el-radio>
  181 + <el-radio v-model="faultApplicationRadio" label="2">不启用</el-radio>
  182 + </div>
  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>
  190 + <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
  191 + <img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
  192 + </div>
  193 + </div>
  194 + <div class=" flex-div">
  195 + <el-button class="multiple-choice-button color-999" @click="addNetworkMonitorItem()">添加应用检测</el-button>
  196 + <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
  197 + </div>
  198 + </div>
  199 + </el-col>
  200 + </el-row>
159 </div> 201 </div>
160 202
161 <!--基础环境 Basic environment--> 203 <!--基础环境 Basic environment-->
162 - <div class="basic-environment" v-if="basicEnvironmentHide">  
163 - <div>  
164 - <span>  
165 - <img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img">  
166 - <span class="title-text">基础环境</span>  
167 - </span>  
168 - </div>  
169 - <div class="context-radio">  
170 - <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>  
173 - </div>  
174 - <div class="context-select">  
175 - <span class="fault-book-input-text context-select-text">选择类型</span>  
176 - <el-select v-model="value" placeholder="从业务选择">  
177 - <el-option  
178 - v-for="item in options"  
179 - :key="item.value"  
180 - :label="item.label"  
181 - :value="item.value"  
182 - >  
183 - </el-option>  
184 - </el-select>  
185 - <el-select v-model="value" placeholder="从资源选择">  
186 - <el-option  
187 - v-for="item in options"  
188 - :key="item.value"  
189 - :label="item.label"  
190 - :value="item.value"  
191 - >  
192 - </el-option>  
193 - </el-select>  
194 - </div> 204 + <div class="basic-environment margin-30" v-if="basicEnvironmentHide">
  205 + <el-row>
  206 + <el-col :span="6">
  207 + <div class="title-text">
  208 + <img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img">
  209 + <span>基础环境</span>
  210 + </div>
  211 + </el-col>
  212 + </el-row>
  213 + <el-row>
  214 + <el-col :span="24">
  215 + <div class="context-radio flex-div-start margin-30">
  216 + <span class="fault-book-input-text">状态选择</span>
  217 + <el-radio v-model="faultEnvironmentRadio" label="1">启用</el-radio>
  218 + <el-radio v-model="faultEnvironmentRadio" label="2">不启用</el-radio>
  219 + </div>
  220 + </el-col>
  221 + </el-row>
  222 + <el-row>
  223 + <el-col :span="24">
  224 + <div class="context-select flex-div-start margin-30">
  225 + <span class="fault-book-input-text context-select-text">选择类型</span>
  226 + <el-select v-model="value" placeholder="从业务选择" class="margin-right-10">
  227 + <el-option
  228 + v-for="item in options"
  229 + :key="item.value"
  230 + :label="item.label"
  231 + :value="item.value"
  232 + >
  233 + </el-option>
  234 + </el-select>
  235 + <el-select v-model="value" placeholder="从资源选择">
  236 + <el-option
  237 + v-for="item in options"
  238 + :key="item.value"
  239 + :label="item.label"
  240 + :value="item.value"
  241 + >
  242 + </el-option>
  243 + </el-select>
  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>  
201 - <img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img">  
202 - <span class="title-text">APM</span>  
203 - </span>  
204 - </div>  
205 - <div class="context-radio">  
206 - <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>  
209 - </div>  
210 - <div class="context-multiple-choice">  
211 - <span v-for="(item, index) in apmMonitorList" :key="index">  
212 - <span>  
213 - <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">  
215 - </span>  
216 - </span>  
217 - <span>  
218 - <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">  
220 - </span>  
221 - </div> 274 + <div class="apm-monitor margin-30" v-if="apmMonitorHide">
  275 + <el-row>
  276 + <el-rol :span="6">
  277 + <div class="title-text">
  278 + <img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img">
  279 + <span>APM</span>
  280 + </div>
  281 + </el-rol>
  282 + </el-row>
  283 + <el-row>
  284 + <el-col :span="24">
  285 + <div class="context-radio flex-div-start margin-30">
  286 + <span class="fault-book-input-text">状态选择</span>
  287 + <el-radio v-model="faultAPMRadio" label="1">启用</el-radio>
  288 + <el-radio v-model="faultAPMRadio" label="2">不启用</el-radio>
  289 + </div>
  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>
  297 + <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
  298 + <img :id="item.id" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
  299 + </div>
  300 + </div>
  301 + <div>
  302 + <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button>
  303 + <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
  304 + </div>
  305 + </div>
  306 + </el-col>
  307 + </el-row>
  308 +
  309 +
222 </div> 310 </div>
223 311
224 <!--日志检测--> 312 <!--日志检测-->
225 - <div class="log-detection" v-if="logDetectionHide">  
226 - <div>  
227 - <span>  
228 - <img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img">  
229 - <span class="title-text">日志检测</span>  
230 - </span>  
231 - </div>  
232 - <div class="context-radio">  
233 - <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>  
236 - </div>  
237 - <div class="context-multiple-choice">  
238 - <span v-for="(item, index) in logDetectionList" :key="index">  
239 - <span>  
240 - <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">  
242 - </span>  
243 - </span>  
244 - <span>  
245 - <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">  
247 - </span>  
248 - </div> 313 + <div class="log-detection margin-30" v-if="logDetectionHide">
  314 + <el-row>
  315 + <el-col :span="6">
  316 + <div class="title-text">
  317 + <img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img">
  318 + <span>日志检测</span>
  319 + </div>
  320 + </el-col>
  321 + </el-row>
  322 + <el-row>
  323 + <el-col :span="24">
  324 + <div class="context-radio flex-div-start margin-30">
  325 + <span class="fault-book-input-text">状态选择</span>
  326 + <el-radio v-model="faultLogRadio" label="1">启用</el-radio>
  327 + <el-radio v-model="faultLogRadio" label="2">不启用</el-radio>
  328 + </div>
  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>
  336 + <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
  337 + <img :id="item.id" @click="deleteItem(item.id, logDetectionList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
  338 + </div>
  339 + </div>
  340 + <div>
  341 + <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button>
  342 + <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
  343 + </div>
  344 + </div>
  345 + </el-col>
  346 + </el-row>
249 </div> 347 </div>
250 348
251 <!--订阅报告--> 349 <!--订阅报告-->
252 - <div class="subscription-report" v-if="subscriptionReportHide">  
253 - <div>  
254 - <span>  
255 - <img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img">  
256 - <span class="title-text">报告订阅</span>  
257 - </span>  
258 - </div>  
259 - <div class="context-multiple-choice">  
260 - <span v-for="(item, index) in subscriptionReportList" :key="index">  
261 - <span>  
262 - <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">  
264 - </span>  
265 - </span>  
266 - <span>  
267 - <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">  
269 - </span>  
270 - </div> 350 + <div class="subscription-report margin-30" v-if="subscriptionReportHide">
  351 + <el-row>
  352 + <el-col :span="6">
  353 + <div class="title-text">
  354 + <img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img">
  355 + <span>报告订阅</span>
  356 + </div>
  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>
  364 + <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
  365 + <img :id="item.id" @click="deleteItem(item.id, subscriptionReportList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
  366 + </div>
  367 + </div>
  368 + <div>
  369 + <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button>
  370 + <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
  371 + </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 +
271 </div> 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 () {}
@@ -32,6 +32,8 @@ export default { @@ -32,6 +32,8 @@ export default {
32 32
33 } 33 }
34 toOrderNum(numm.value) 34 toOrderNum(numm.value)
  35 + /*不能删除这个console*/
  36 + console.log("numDiff",proxy.numDiff)
35 Vue.watch(numm, (newVal) => { 37 Vue.watch(numm, (newVal) => {
36 toOrderNum(newVal) 38 toOrderNum(newVal)
37 }) 39 })