monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 136ced3d3c1e09aef860fd3f83296aab4794e5b0 1 parent e0e18f4c

故障诊断入口页更改，网络监测组件更改

Inline Side-by-side
Showing 14 changed files with 1215 additions and 690 deletions
1 <title>故障管理</title> 1 <title>故障管理</title>
2 -<iframe src="/vue3/index.html#/fault/faultForm" class="layadmin-iframe" style="height: 99.5%!important;"/> 2 +<!--<iframe src="/vue3/index.html#/fault/faultForm" class="layadmin-iframe" style="height: 99.5%!important;"/>-->
  3 +<iframe src="/vue3/index.html#/fault/index" class="layadmin-iframe" style="height: 99.5%!important;"/>
@@ -290,6 +290,7 @@ @@ -290,6 +290,7 @@
290 background-position: center; 290 background-position: center;
291 background-repeat: no-repeat; 291 background-repeat: no-repeat;
292 cursor: pointer; 292 cursor: pointer;
  293 + position: relative;
293 } 294 }
294 .step-img.isActive{ 295 .step-img.isActive{
295 background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-circle.png"); 296 background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-circle.png");
@@ -380,3 +381,26 @@ @@ -380,3 +381,26 @@
380 .doc-list,.doc-list-add{ 381 .doc-list,.doc-list-add{
381 cursor: pointer; 382 cursor: pointer;
382 } 383 }
  384 +.icon-delete-right{
  385 + width:14px;
  386 + height:14px;
  387 + background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-delete-right.png");
  388 + background-repeat: no-repeat;
  389 + background-position: center;
  390 + background-size: 100%;
  391 + position: absolute;
  392 + right:0;
  393 + top:0;
  394 +}
  395 +.position-bottom{
  396 + position: absolute;
  397 + bottom:20px;
  398 + left: 0;
  399 + right: 0;
  400 +}
  401 +.align-center{
  402 + align-items: center;
  403 +}
  404 +.margin-bottom-50{
  405 + margin-bottom:50px;
  406 +}
@@ -129,7 +129,7 @@ const routes = [{ @@ -129,7 +129,7 @@ const routes = [{
129 path: '/fault/faultForm', 129 path: '/fault/faultForm',
130 name: 'faultForm', 130 name: 'faultForm',
131 component: () => myImport('views/faultDiagnosis/components/faultForm/index') 131 component: () => myImport('views/faultDiagnosis/components/faultForm/index')
132 - }, 132 + }/*,
133 { 133 {
134 path: '/fault/faultAddIndex', 134 path: '/fault/faultAddIndex',
135 name: 'faultAddIndex', 135 name: 'faultAddIndex',
@@ -139,7 +139,7 @@ const routes = [{ @@ -139,7 +139,7 @@ const routes = [{
139 path: '/fault/diagnosisDoc', 139 path: '/fault/diagnosisDoc',
140 name: 'diagnosisDoc', 140 name: 'diagnosisDoc',
141 component: () => myImport('views/faultDiagnosis/components/diagnosisDoc/index') 141 component: () => myImport('views/faultDiagnosis/components/diagnosisDoc/index')
142 - } 142 + }*/
143 ]; 143 ];
144 144
145 // hash模式： createWebHashHistory 145 // hash模式： createWebHashHistory
  1 +<div id="faultDiagnosisIndex">
  2 + <!--搜索输入框部分-->
  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 + <el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
  10 + <el-option
  11 + v-for="item in busTypeList"
  12 + :label="item.busTypeName" :value="item.busId"></el-option>
  13 + </el-select>
  14 + </div>
  15 + </el-col>
  16 + <el-col :span="6">
  17 + <div class="grid-content bg-purple">
  18 + <span class="fault-book-input-text">名称</span>
  19 + <el-input v-model="input" placeholder="Please input 2" class="fault-book-input"/>
  20 + </div>
  21 + </el-col>
  22 + </el-row>
  23 + </div>
  24 +
  25 +
  26 + <!--卡片分页排头-->
  27 + <div class="fault-card margin-30">
  28 + <el-row :gutter="12" class="fault-book-title-card">
  29 + <el-col :span="3">
  30 + <el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==1}]" @click="clickDaultDefinitionFunc(1)" shadow="hover"><span class="card-name">故障定义</span></el-card>
  31 + </el-col>
  32 + <el-col :span="3">
  33 + <el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==2}]" @click="clickNetworkMonitorFunc(2)" shadow="hover"><span class="card-name">网络监测</span></el-card>
  34 + </el-col>
  35 + <el-col :span="3">
  36 + <el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==3}]" @click="applicationMonitorFunc(3)" shadow="hover"><span class="card-name">应用检测</span></el-card>
  37 + </el-col>
  38 + <el-col :span="3">
  39 + <el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==4}]" @click="basicEnvironmentFunc(4)" shadow="hover"><span class="card-name">基础环境</span></el-card>
  40 + </el-col>
  41 + <el-col :span="3">
  42 + <el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==5}]" @click="apmMonitorFunc(5)" shadow="hover"><span class="card-name">APM</span></el-card>
  43 + </el-col>
  44 + <el-col :span="3">
  45 + <el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==6}]" @click="logDetectionFunc(6)" shadow="hover"><span class="card-name">日志检测</span></el-card>
  46 + </el-col>
  47 + <el-col :span="3">
  48 + <el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==7}]" @click="subscriptionReportFunc(7)" shadow="hover"><span class="card-name">报告订阅</span></el-card>
  49 + </el-col>
  50 + </el-row>
  51 + </div>
  52 +
  53 +
  54 + <!---主体卡片部分-->
  55 + <!--故障定义-->
  56 + <div class="fault-definition margin-30" v-if="faultDefinitionHide">
  57 + <el-row>
  58 + <el-col :span="6">
  59 + <div class="title-text">
  60 +
  61 + <img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img">
  62 + <span>故障定义</span>
  63 +
  64 + </div>
  65 + </el-col>
  66 + </el-row>
  67 + <el-row>
  68 + <el-col :span="3" class="flex-div">
  69 + <div class="fault-definition-radio flex-div-start">
  70 + <el-radio v-model="faultDefinitionRadio" label="1">产生告警时触发</el-radio>
  71 + </div>
  72 + </el-col>
  73 + <el-col :span="21" class="flex-div">
  74 + <div class="fault-definition-select-up">
  75 + 当
  76 + <el-select v-model="value" placeholder="Select">
  77 + <el-option
  78 + v-for="item in options"
  79 + :key="item.value"
  80 + :label="item.label"
  81 + :value="item.value"
  82 + >
  83 + </el-option>
  84 + </el-select>
  85 + 的警告级别为
  86 + <el-select v-model="value" placeholder="Select">
  87 + <el-option
  88 + v-for="item in options"
  89 + :key="item.value"
  90 + :label="item.label"
  91 + :value="item.value"
  92 + >
  93 + </el-option>
  94 + </el-select>
  95 + 时触发
  96 + </div>
  97 + </el-col>
  98 + </el-row>
  99 + <el-row>
  100 + <el-col :span="3">
  101 + <div class="fault-definition-radio flex-div-start">
  102 + <el-radio v-model="faultDefinitionRadio" label="2">自定义规则</el-radio>
  103 + </div>
  104 +
  105 + </el-col>
  106 + <el-col :span="21">
  107 + <div class="fault-definition-select-down">
  108 + 当
  109 + <el-select v-model="value" placeholder="Select">
  110 + <el-option
  111 + v-for="item in options"
  112 + :key="item.value"
  113 + :label="item.label"
  114 + :value="item.value"
  115 + >
  116 + </el-option>
  117 + </el-select>
  118 + 的警告级别为
  119 + <el-select v-model="value" placeholder="Select">
  120 + <el-option
  121 + v-for="item in options"
  122 + :key="item.value"
  123 + :label="item.label"
  124 + :value="item.value"
  125 + >
  126 + </el-option>
  127 + </el-select>
  128 + 时触发
  129 + </div>
  130 + </el-col>
  131 + </el-row>
  132 + </div>
  133 +
  134 + <!--网络检测-->
  135 + <div class="network-monitor margin-30" v-if="networkMonitorHide">
  136 + <el-row>
  137 + <el-col :span="6">
  138 + <div class="title-text">
  139 + <img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img">
  140 + <span>网络检测</span>
  141 + </div>
  142 + </el-col>
  143 + </el-row>
  144 + <el-row>
  145 + <el-col :span="24">
  146 + <div class="context-radio flex-div-start margin-30">
  147 + <span class="fault-book-input-text">状态选择</span>
  148 + <el-radio v-model="faultStateRadio" label="1">启用</el-radio>
  149 + <el-radio v-model="faultStateRadio" label="2">不启用</el-radio>
  150 + </div>
  151 + </el-col>
  152 + </el-row>
  153 + <el-row>
  154 + <el-col :span="24">
  155 + <div class="context-multiple-choice flex-div-start margin-30">
  156 + <div v-for="(item, index) in networkMonitorList" :key="index">
  157 + <div>
  158 + <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
  159 + <img :id="item.id" @click="deleteItem(item.id, networkMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
  160 + </div>
  161 + </div>
  162 + <div class=" flex-div">
  163 + <el-button class="multiple-choice-button color-999" @click="addNetNode">添加网络检测</el-button>
  164 + <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
  165 + </div>
  166 + </div>
  167 + </el-col>
  168 + </el-row>
  169 + </div>
  170 +
  171 + <!--应用监测-->
  172 + <div class="application-monitor margin-30" v-if="applicationMonitorHide">
  173 + <el-row>
  174 + <el-col :span="6">
  175 + <div class="title-text">
  176 + <img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img">
  177 + <span>应用检测</span>
  178 + </div>
  179 + </el-col>
  180 + </el-row>
  181 + <el-row>
  182 + <el-col :span="24">
  183 + <div class="context-radio flex-div-start margin-30">
  184 + <span class="fault-book-input-text">状态选择</span>
  185 + <el-radio v-model="faultApplicationRadio" label="1">启用</el-radio>
  186 + <el-radio v-model="faultApplicationRadio" label="2">不启用</el-radio>
  187 + </div>
  188 + </el-col>
  189 + </el-row>
  190 + <el-row>
  191 + <el-col :span="24">
  192 + <div class="context-multiple-choice flex-div-start margin-30">
  193 + <div v-for="(item, index) in applicationMonitorList" :key="index">
  194 + <div>
  195 + <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
  196 + <img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
  197 + </div>
  198 + </div>
  199 + <div class=" flex-div">
  200 + <el-button class="multiple-choice-button color-999" @click="addNetworkMonitorItem()">添加应用检测</el-button>
  201 + <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
  202 + </div>
  203 + </div>
  204 + </el-col>
  205 + </el-row>
  206 + </div>
  207 +
  208 + <!--基础环境 Basic environment-->
  209 + <div class="basic-environment margin-30" v-if="basicEnvironmentHide">
  210 + <el-row>
  211 + <el-col :span="6">
  212 + <div class="title-text">
  213 + <img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img">
  214 + <span>基础环境</span>
  215 + </div>
  216 + </el-col>
  217 + </el-row>
  218 + <el-row>
  219 + <el-col :span="24">
  220 + <div class="context-radio flex-div-start margin-30">
  221 + <span class="fault-book-input-text">状态选择</span>
  222 + <el-radio v-model="faultEnvironmentRadio" label="1">启用</el-radio>
  223 + <el-radio v-model="faultEnvironmentRadio" label="2">不启用</el-radio>
  224 + </div>
  225 + </el-col>
  226 + </el-row>
  227 + <el-row>
  228 + <el-col :span="24">
  229 + <div class="context-select flex-div-start margin-30">
  230 + <span class="fault-book-input-text context-select-text">选择类型</span>
  231 + <el-select v-model="value" placeholder="从业务选择" class="margin-right-10">
  232 + <el-option
  233 + v-for="item in options"
  234 + :key="item.value"
  235 + :label="item.label"
  236 + :value="item.value"
  237 + >
  238 + </el-option>
  239 + </el-select>
  240 + <el-select v-model="value" placeholder="从资源选择">
  241 + <el-option
  242 + v-for="item in options"
  243 + :key="item.value"
  244 + :label="item.label"
  245 + :value="item.value"
  246 + >
  247 + </el-option>
  248 + </el-select>
  249 + </div>
  250 + </el-col>
  251 + </el-row>
  252 + <el-row>
  253 + <el-col :span="24">
  254 + <div class="environment-table margin-top flex-div-start margin-30">
  255 + <el-table :data="environmentTableData" border height="250" style="width: 100%">
  256 + <el-table-column align="center" prop="name" label="资源类型" width="180" />
  257 + <el-table-column prop="address" label="指标" class="margin-30" >
  258 + <template #default="scope">
  259 + <div class="list-data">
  260 + <span class="list-data-text">指标: {{ scope.row.address }}</span>
  261 + <img :id="scope.row.index" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="img-delete">
  262 +
  263 + </div>
  264 +
  265 + </template>
  266 + </el-table-column>
  267 + </el-table>
  268 + </div>
  269 +
  270 + </el-col>
  271 +
  272 + </el-row>
  273 +
  274 +
  275 +
  276 + </div>
  277 +
  278 + <!--APM-->
  279 + <div class="apm-monitor margin-30" v-if="apmMonitorHide">
  280 + <el-row>
  281 + <el-rol :span="6">
  282 + <div class="title-text">
  283 + <img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img">
  284 + <span>APM</span>
  285 + </div>
  286 + </el-rol>
  287 + </el-row>
  288 + <el-row>
  289 + <el-col :span="24">
  290 + <div class="context-radio flex-div-start margin-30">
  291 + <span class="fault-book-input-text">状态选择</span>
  292 + <el-radio v-model="faultAPMRadio" label="1">启用</el-radio>
  293 + <el-radio v-model="faultAPMRadio" label="2">不启用</el-radio>
  294 + </div>
  295 + </el-col>
  296 + </el-row>
  297 + <el-row>
  298 + <el-col :span="24">
  299 + <div class="context-multiple-choice flex-div-start margin-30">
  300 + <div v-for="(item, index) in apmMonitorList" :key="index">
  301 + <div>
  302 + <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
  303 + <img :id="item.id" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
  304 + </div>
  305 + </div>
  306 + <div>
  307 + <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button>
  308 + <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
  309 + </div>
  310 + </div>
  311 + </el-col>
  312 + </el-row>
  313 +
  314 +
  315 + </div>
  316 +
  317 + <!--日志检测-->
  318 + <div class="log-detection margin-30" v-if="logDetectionHide">
  319 + <el-row>
  320 + <el-col :span="6">
  321 + <div class="title-text">
  322 + <img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img">
  323 + <span>日志检测</span>
  324 + </div>
  325 + </el-col>
  326 + </el-row>
  327 + <el-row>
  328 + <el-col :span="24">
  329 + <div class="context-radio flex-div-start margin-30">
  330 + <span class="fault-book-input-text">状态选择</span>
  331 + <el-radio v-model="faultLogRadio" label="1">启用</el-radio>
  332 + <el-radio v-model="faultLogRadio" label="2">不启用</el-radio>
  333 + </div>
  334 + </el-col>
  335 + </el-row>
  336 + <el-row>
  337 + <el-col :span="24">
  338 + <div class="context-multiple-choice flex-div-start margin-30">
  339 + <div v-for="(item, index) in logDetectionList" :key="index">
  340 + <div>
  341 + <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
  342 + <img :id="item.id" @click="deleteItem(item.id, logDetectionList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
  343 + </div>
  344 + </div>
  345 + <div>
  346 + <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button>
  347 + <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
  348 + </div>
  349 + </div>
  350 + </el-col>
  351 + </el-row>
  352 + </div>
  353 +
  354 + <!--订阅报告-->
  355 + <div class="subscription-report margin-30" v-if="subscriptionReportHide">
  356 + <el-row>
  357 + <el-col :span="6">
  358 + <div class="title-text">
  359 + <img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img">
  360 + <span>报告订阅</span>
  361 + </div>
  362 + </el-col>
  363 + </el-row>
  364 + <el-row>
  365 + <el-col :span="24">
  366 + <div class="context-multiple-choice flex-div-start margin-30">
  367 + <div v-for="(item, index) in subscriptionReportList" :key="index">
  368 + <div>
  369 + <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
  370 + <img :id="item.id" @click="deleteItem(item.id, subscriptionReportList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
  371 + </div>
  372 + </div>
  373 + <div>
  374 + <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button>
  375 + <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
  376 + </div>
  377 + </div>
  378 + </el-col>
  379 + </el-row>
  380 + </div>
  381 +
  382 + <!--取消和保存-->
  383 + <div class="btn-faultDiagnosis">
  384 + <el-button>取消</el-button>
  385 + <el-button type="primary">保存</el-button>
  386 +
  387 + </div>
  388 +
  389 + <!--网络检测弹窗-->
  390 + <div class="network-monitor-popup popup-bg">
  391 +
  392 + <DiagnosisNet v-if="networkMonitorVisible" @callback="getNetworkMonitorList" ></DiagnosisNet>
  393 +<!-- <div class="network-monitor-popup-left">-->
  394 +<!-- <span>-->
  395 +<!-- <div class="context-head">-->
  396 +<!-- 已配置链路-->
  397 +<!-- </div>-->
  398 +<!-- </span>-->
  399 +<!-- <span v-for="(item, index) in networkMonitorList" :key="index">-->
  400 +<!-- <span>-->
  401 +<!-- <div class="multiple-choice-button">{{item.title}}</div>-->
  402 +<!-- &lt;!&ndash;img&ndash;&gt;-->
  403 +<!-- </span>-->
  404 +<!-- </span>-->
  405 +<!-- <span>-->
  406 +<!-- <div class="multiple-choice-button">-->
  407 +<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">-->
  408 +<!-- </div>-->
  409 +<!-- </span>-->
  410 +<!-- </div>-->
  411 +<!-- <div class="network-monitor-popup-right">-->
  412 +<!-- <div class="context-head">-->
  413 +<!-- <span>电子税务局网络链路配置</span>-->
  414 +<!-- <span>-->
  415 +<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">-->
  416 +<!-- </span>-->
  417 +<!-- </div>-->
  418 +<!-- </div>-->
  419 + </div>
  420 +
  421 +</div>
  1 +export default {
  2 + name: 'faultDiagnosis',
  3 + template: '',
  4 + components: {
  5 + 'DiagnosisNet': Vue.defineAsyncComponent(
  6 + () => myImport('views/faultDiagnosis/components/diagnosisNet/index')
  7 + ),//网络监测组件
  8 + },
  9 + props:['detailData'],
  10 + data () {
  11 + return {
  12 + isActiveIndex:1,
  13 + multiple_choice_button_id_Tmpl: '',
  14 + multiple_choice_button_id: '',
  15 + faultDefinitionHide: true,
  16 + networkMonitorHide: false,
  17 + applicationMonitorHide: false,
  18 + basicEnvironmentHide: false,
  19 + apmMonitorHide: false,
  20 + logDetectionHide: false,
  21 + subscriptionReportHide: false,
  22 + faultDefinitionRadio:'1',//故障定义
  23 + faultStateRadio:'1',//状态启用不启用
  24 + faultApplicationRadio:'1',//应用检测
  25 + faultEnvironmentRadio:'1',//基础环境
  26 + faultAPMRadio:'1',//APM
  27 + faultLogRadio:'1',//日志
  28 + // isClickNet:0,//配置链接选择
  29 + environmentTableData: [
  30 + {
  31 + name: '服务器',
  32 + address: 'CPU使用率，内存使用率，文件系统使用率',
  33 + },
  34 + {
  35 + name: '服务器',
  36 + address: 'CPU使用率，内存使用率，文件系统使用率',
  37 + },
  38 + {
  39 + name: '服务器',
  40 + address: 'CPU使用率，内存使用率，文件系统使用率',
  41 + },
  42 + {
  43 + name: '服务器',
  44 + address: 'CPU使用率，内存使用率，文件系统使用率',
  45 + },
  46 + {
  47 + name: '服务器',
  48 + address: 'CPU使用率，内存使用率，文件系统使用率',
  49 + },
  50 + {
  51 + name: '服务器',
  52 + address: 'CPU使用率，内存使用率，文件系统使用率',
  53 + },
  54 + {
  55 + name: '服务器',
  56 + address: 'CPU使用率，内存使用率，文件系统使用率',
  57 + },
  58 +
  59 + ],//基础环境表格数据
  60 + //网络检测选中项集合
  61 + networkMonitorList: [
  62 + {
  63 + title: "电子税务局外用链路1",
  64 + type: "networkMonitor",
  65 + id: "networkMonitor1"
  66 + },
  67 + {
  68 + title: "电子税务局外用链路2",
  69 + type: "networkMonitor",
  70 + id: "networkMonitor2"
  71 + },
  72 + {
  73 + title: "电子税务局外用链路3",
  74 + type: "networkMonitor",
  75 + id: "networkMonitor3"
  76 + }
  77 + ],
  78 + //应用检测选中项集合
  79 + applicationMonitorList: [
  80 + {
  81 + title: "从对接过来的NPM中选择",
  82 + type: "applicationMonitor",
  83 + id: "applicationMonitor1"
  84 + }
  85 + ],
  86 + //APM
  87 + apmMonitorList: [
  88 + {
  89 + title: "arms",
  90 + type: "apmMonitor",
  91 + id: " apmMonitor1"
  92 + },
  93 + {
  94 + title: "arms2",
  95 + type: "apmMonitor",
  96 + id: " apmMonitor2"
  97 + }
  98 + ],
  99 + //日志检测
  100 + logDetectionList: [
  101 + {
  102 + title: "日志检测1",
  103 + type: "logDetection",
  104 + id: " logDetection1"
  105 + }
  106 + ],
  107 + //订阅人员
  108 + //订阅人员
  109 + subscriptionReportList: [
  110 + {
  111 + title: "张三",
  112 + type: "subscriptionReport",
  113 + id: " subscriptionReport1"
  114 + },
  115 + {
  116 + title: "李四",
  117 + type: "subscriptionReport",
  118 + id: " subscriptionReport2"
  119 + },
  120 + {
  121 + title: "王五",
  122 + type: "subscriptionReport",
  123 + id: " subscriptionReport3"
  124 + }
  125 +
  126 + ],
  127 + networkMonitorVisible: false,
  128 + //网络监测配置链路节点数据
  129 + // nodeData:[{name:'',img:''}]
  130 + //所属业务列表数据
  131 + busTypeList:'',
  132 + }
  133 + },
  134 + setup(props){
  135 + let busTypeArr = props.detailData?[props.detailData.bizId]:Vue.ref();
  136 + return{
  137 + busTypeArr
  138 + }
  139 + },
  140 + computed: {},
  141 + methods: {
  142 + init(){
  143 + let that=this;
  144 + this.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
  145 + if (res && res.data) {
  146 + that.busTypeList = res.data;
  147 + }
  148 + })
  149 + },
  150 + hiddenAll(){
  151 + this.faultDefinitionHide = false;
  152 + this.networkMonitorHide = false;
  153 + this.applicationMonitorHide = false;
  154 + this.basicEnvironmentHide = false;
  155 + this.apmMonitorHide = false;
  156 + this.logDetectionHide = false;
  157 + this.subscriptionReportHide = false;
  158 + },
  159 + // 打开故障定义卡片
  160 + clickDaultDefinitionFunc(index){
  161 + this.hiddenAll();
  162 + this.faultDefinitionHide = true;
  163 + this.isActiveIndex=index;
  164 + },
  165 + //打开网络监测卡片
  166 + clickNetworkMonitorFunc(index){
  167 + this.hiddenAll();
  168 + this.networkMonitorHide = true;
  169 + this.isActiveIndex=index;
  170 + },
  171 + //打开应用监测卡片
  172 + applicationMonitorFunc(index){
  173 + this.hiddenAll();
  174 + this.applicationMonitorHide = true;
  175 + this.isActiveIndex=index;
  176 + },
  177 + //打开基础环境卡片
  178 + basicEnvironmentFunc(index){
  179 + this.hiddenAll();
  180 + this.basicEnvironmentHide = true;
  181 + this.isActiveIndex=index;
  182 + },
  183 + //APM
  184 + apmMonitorFunc(index){
  185 + this.hiddenAll();
  186 + this.apmMonitorHide = true;
  187 + this.isActiveIndex=index;
  188 + },
  189 + //日志检测
  190 + logDetectionFunc(index){
  191 + this.hiddenAll();
  192 + this.logDetectionHide = true;
  193 + this.isActiveIndex=index;
  194 + },
  195 + //报告订阅
  196 + subscriptionReportFunc(index){
  197 + this.hiddenAll();
  198 + this.subscriptionReportHide = true;
  199 + this.isActiveIndex=index;
  200 + },
  201 + //遍历集合，动态增加集合内item
  202 + showItemList(){
  203 + },
  204 + deleteItem(id, list){
  205 + var newList = [];
  206 + var type = '';
  207 + $.each(list,function (index, value) {
  208 + var valueId = value.id;
  209 + type = value.type;
  210 + if(valueId === id){
  211 + console.log("点击删除id为:" + valueId + "的值")
  212 + } else {
  213 + newList.push(value)
  214 + }
  215 + });
  216 + switch (type) {
  217 + case "networkMonitor":
  218 + //网络检测
  219 + this.networkMonitorList = newList;
  220 + break;
  221 + case "applicationMonitor":
  222 + //网络检测
  223 + this.applicationMonitorList = newList;
  224 + break;
  225 + case "apmMonitor":
  226 + //APM
  227 + this.apmMonitorList = newList;
  228 + break;
  229 + case "logDetection":
  230 + //日志检测
  231 + this.logDetectionList = newList;
  232 + break;
  233 + case "subscriptionReport":
  234 + //订阅人员
  235 + this.subscriptionReportList = newList;
  236 + break;
  237 + case "networkMonitor5":
  238 + //网络检测
  239 + break;
  240 + case "networkMonitor6":
  241 + //网络检测
  242 + break;
  243 +
  244 + }
  245 + },
  246 + //点击添加网络检测item
  247 + addNetworkMonitorItem(){
  248 +
  249 + },
  250 + //点击添加网络监测
  251 + addNetNode(){
  252 + this.networkMonitorVisible = true;
  253 + },
  254 + //关闭网络测试添加配置节点弹框
  255 + getNetworkMonitorList(itemData){
  256 + console.log("itemdata",itemData)
  257 + this.networkMonitorVisible=false;
  258 + // this.networkMonitorList=itemData;
  259 + }
  260 + /* //点击已配置链路
  261 + clickList(item,index){
  262 + this.isClickNet=index;
  263 + this.nodeData=[
  264 + {
  265 + name:'节点1',
  266 + img:'123'
  267 + },
  268 + {
  269 + name:'节点2',
  270 + img:'123'
  271 + }
  272 + ]
  273 + this.nodeData.push({name:'',img:''})
  274 + },
  275 +
  276 + //新增配置链路节点
  277 + addSet(){
  278 + this.nodeData=[{name:'',img:''}]
  279 +
  280 + },
  281 + //删除配置节点
  282 + deletNode(item){
  283 +
  284 + },
  285 + //获取配置链接节点数据
  286 + getNodeData(){
  287 + this.nodeData=[
  288 + {
  289 + name:'节点1',
  290 + img:'123'
  291 + },
  292 + {
  293 + name:'节点2',
  294 + img:'123'
  295 + }
  296 + ]
  297 + this.nodeData.push({name:'',img:''})
  298 + }*/
  299 +
  300 +
  301 + },
  302 + mounted () {
  303 + this.init()
  304 + },
  305 + unmounted () {}
  306 +
  307 +}
@@ -9,10 +9,10 @@ @@ -9,10 +9,10 @@
9 </el-col> 9 </el-col>
10 </el-row> 10 </el-row>
11 <el-row class="margin-all-30"> 11 <el-row class="margin-all-30">
12 - <el-col :span="3" v-for="item in 2">  
13 - <div class="doc-list flex-clum"> 12 + <el-col :span="3" v-for="(item,index) in diagnosisData">
  13 + <div class="doc-list flex-clum" @click="detailDiagnosisDoc(item)">
14 <img src="./src/assets/images/faultDiagnosis/icon-doc.png" alt=""> 14 <img src="./src/assets/images/faultDiagnosis/icon-doc.png" alt="">
15 - <span class="doc-name">电子税务局可用性诊断</span> 15 + <span class="doc-name">{{item.name}}</span>
16 </div> 16 </div>
17 </el-col> 17 </el-col>
18 <el-col :span="3"> 18 <el-col :span="3">
@@ -2,6 +2,7 @@ export default { @@ -2,6 +2,7 @@ export default {
2 name: 'diagnosisDoc', 2 name: 'diagnosisDoc',
3 template: '', 3 template: '',
4 components: {}, 4 components: {},
  5 + props:['diagnosisData'],
5 data () { 6 data () {
6 return { 7 return {
7 8
@@ -14,7 +15,17 @@ export default { @@ -14,7 +15,17 @@ export default {
14 computed: {}, 15 computed: {},
15 methods: { 16 methods: {
16 //添加 17 //添加
17 - addDiagnosisDoc(){} 18 + addDiagnosisDoc(){
  19 + this.$emit('getItem','Diagnosis')
  20 + },
  21 + //详情
  22 + detailDiagnosisDoc(item){
  23 + let params={
  24 + item:item,
  25 + componentName:'Diagnosis'
  26 + }
  27 + this.$emit('getItemDetail',params)
  28 + }
18 }, 29 },
19 mounted () { 30 mounted () {
20 31
  1 +<el-dialog v-model="networkMonitorVisible" :title="titleName" width="60%" @close="closeDialog">
  2 + <el-row v-if="!tableVisible">
  3 + <el-col :span="6">
  4 + <div class="grid-content bg-purple network-monitor-popup-left">
  5 + <div>
  6 + <div class="context-head">
  7 + 已配置链路
  8 + </div>
  9 + </div>
  10 + <div @click="clickList(item,index)" :class="['list-net',{'isActive':index==isClickNet}]" v-for="(item, index) in networkMonitorList" :key="index">
  11 + <div class="flex-div-center ">
  12 + <div class="multiple-choice-button">{{item.title}}</div>
  13 + <img v-show="index==isClickNet" class="img-delete" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" alt="">
  14 + </div>
  15 + </div>
  16 + <div class="list-net">
  17 + <div class="multiple-choice-button">
  18 + <img @click="addSet" src="./src/assets/images/faultDiagnosis/icon-popup-add.png">
  19 + </div>
  20 + </div>
  21 +
  22 + </div>
  23 + </el-col>
  24 + <el-col :span="18">
  25 + <div class="grid-content bg-purple-light network-monitor-popup-right">
  26 + <div class="set-div">
  27 + <div class="context-head">
  28 + <div>电子税务局网络链路配置</div>
  29 + <div >
  30 + <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">
  31 + </div>
  32 + </div>
  33 + <div class="context-body">
  34 + <el-row v-if="!addSetLIstVisible">
  35 + <el-col :span="4" v-for="(item,index) in nodeData">
  36 + <div class="list-step flex-div-start">
  37 + <div class="list-step-top flex-div">
  38 + <div @click="addTableList" :class="['step-img',{'isActive':item.name}]">
  39 + <i v-if="item.name" class="icon-delete-right" @click.stop="deleteNode(item,index)"></i>
  40 + <i class="icon-step"></i>
  41 + </div>
  42 + <span :class="['list-line',{'isActive':item.name && index<nodeData.length}]"></span>
  43 + </div>
  44 + <div v-show="item.name" class="list-step-name">
  45 + {{item.name}}
  46 + </div>
  47 + <div v-show="!item.name" class="list-step-name">
  48 + 点击添加
  49 + </div>
  50 +
  51 + </div>
  52 +
  53 + </el-col>
  54 + </el-row>
  55 + <el-row>
  56 + <div class="flex-div" v-if="addSetLIstVisible">
  57 + <img class="cursorClass" @click="addTableList" src="/vue3/src/assets/images/faultDiagnosis/icon-add-node.png" alt="">
  58 + </div>
  59 + </el-row>
  60 +
  61 + </div>
  62 + </div>
  63 + </div>
  64 + </el-col>
  65 + </el-row>
  66 + <el-row v-if="tableVisible">
  67 + <el-col :span="24">
  68 +
  69 + <div class="set-add-div">
  70 + <el-row>
  71 + <el-col :span="24">
  72 + <div class="flex-div-start margin-top-bottom-10">
  73 +
  74 + <el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
  75 + <el-option
  76 + v-for="item in busTypeList"
  77 + :label="item.busTypeName" :value="item.busId"></el-option>
  78 + </el-select>
  79 +
  80 + <el-dropdown class="margin-right-10">
  81 + <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
  82 + </el-dropdown>
  83 +
  84 +
  85 + <el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标">
  86 + <el-option
  87 + v-for="item in kpiList"
  88 + :label="item.kpiName" :value="item.kpiId"></el-option>
  89 + </el-select>
  90 +
  91 + <el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
  92 +
  93 + <div class="flex-div-start">
  94 + <el-button type="primary" @click="onReset()">重置</el-button>
  95 + <el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
  96 + </div>
  97 + </div>
  98 + </el-col>
  99 + </el-row>
  100 + <el-row class="margin-bottom-50">
  101 + <el-col :span="24">
  102 + <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
  103 + :showIndex="true" :total="count"
  104 + :showBorder="true" :loading="false"
  105 + :showPage="true" :showTools="true" :height="(height - 500)">
  106 + <template #tools="{scope}">
  107 + <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
  108 + <i class="el-icon-plus"/> 添加
  109 + </el-button>
  110 + </template>
  111 + </cm-table-page>
  112 + </el-col>
  113 +
  114 + </el-row>
  115 +
  116 +
  117 + </div>
  118 +
  119 +
  120 + </el-col>
  121 +
  122 +
  123 + </el-row>
  124 + <div v-if="tableVisible" class="margin-top flex-center position-bottom">
  125 + <el-button @click="cancleList">取消</el-button>
  126 + <el-button @click="saveList" type="primary">保存</el-button>
  127 + </div>
  128 +</el-dialog>
  1 +export default {
  2 + name: 'faultDiagnosis',
  3 + template: '',
  4 + components: {},
  5 + // props:['networkMonitorList'],
  6 + data () {
  7 + return {
  8 + titleName:'故障新增内容',
  9 + tableVisible:false,//添加配置列表是否显示
  10 + networkMonitorVisible: true,
  11 + isClickNet:-1,//配置链接选择
  12 + //网络检测配置链路列表
  13 + networkMonitorList: [
  14 + {
  15 + title: "电子税务局外用链路1",
  16 + type: "networkMonitor",
  17 + id: "networkMonitor1"
  18 + },
  19 + {
  20 + title: "电子税务局外用链路2",
  21 + type: "networkMonitor",
  22 + id: "networkMonitor2"
  23 + },
  24 + {
  25 + title: "电子税务局外用链路3",
  26 + type: "networkMonitor",
  27 + id: "networkMonitor3"
  28 + }
  29 + ],
  30 + //网络监测配置链路节点数据
  31 + nodeData:[{name:'',img:''}],
  32 + columns:[
  33 + {
  34 + prop: 'busTypeName',
  35 + label: '业务系统',
  36 + sortable: true,
  37 + align: 'center',
  38 + },
  39 + {
  40 + prop: 'resTypeName',
  41 + label: '资源类型',
  42 + sortable: true,
  43 + align: 'center',
  44 + },
  45 + {
  46 + prop: 'resName',
  47 + label: '资源名称',
  48 + sortable: true,
  49 + align: 'center',
  50 + },
  51 + {
  52 + prop: 'ip',
  53 + label: 'ip地址',
  54 + sortable: true,
  55 + align: 'center',
  56 + },
  57 + {
  58 + prop: 'kpiName',
  59 + label: '指标名称',
  60 + sortable: true,
  61 + align: 'center',
  62 + },
  63 + {
  64 + prop: 'flag',
  65 + label: '指标标识',
  66 + sortable: true,
  67 + align: 'center',
  68 + }
  69 + ],
  70 + // tabSecondList:[],//节点配置列表数据
  71 + addSetLIstVisible:true,//无节点配置列表是的添加配置
  72 + }
  73 + },
  74 + computed: {},
  75 + setup(){
  76 + const {proxy} = Vue.getCurrentInstance();
  77 + let id = proxy.$global.getQueryVariable('configId') ;
  78 + let config = Vue.ref(id == false ? null : id);
  79 + let count=Vue.ref(0);
  80 + let tableDataList = Vue.ref([]);
  81 + let resTypeArr = Vue.ref([]);
  82 + let kpiTypeArr = Vue.ref([]);
  83 + let busTypeArr = Vue.ref([]);
  84 + let keyWords= Vue.ref('');
  85 + let resTypeList = Vue.ref([]);
  86 + let kpiList = Vue.ref([]);
  87 + let busTypeList = Vue.ref([]);
  88 + let init = () =>{
  89 + proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
  90 + if (res && res.data) {
  91 + proxy.kpiList = res.data;
  92 + }
  93 + })
  94 +
  95 + proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
  96 + if (res && res.data) {
  97 + proxy.busTypeList = res.data;
  98 + }
  99 + })
  100 + }
  101 + let onReset = () => {
  102 + proxy.keyWords = '';
  103 + proxy.resTypeArr = [];
  104 + proxy.kpiTypeArr = [];
  105 + proxy.busTypeArr = [];
  106 + }
  107 + // 点击按钮搜索
  108 + let onBtnSearch = () => {
  109 + proxy.loadTableDataList();
  110 + }
  111 + return {
  112 + config,
  113 + count,
  114 + tableDataList,
  115 + keyWords,
  116 + resTypeArr,
  117 + kpiTypeArr,
  118 + busTypeArr,
  119 + resTypeList,
  120 + init,
  121 + onReset,
  122 + onBtnSearch
  123 + }
  124 +
  125 + },
  126 + methods: {
  127 +
  128 + //点击已配置链路
  129 + clickList(item,index){
  130 + this.isClickNet=index;
  131 + this.addSetLIstVisible=false;
  132 + this.nodeData=[
  133 + {
  134 + name:'节点1',
  135 + img:'123'
  136 + },
  137 + {
  138 + name:'节点2',
  139 + img:'123'
  140 + }
  141 + ]
  142 + this.nodeData.push({name:'',img:''})
  143 + },
  144 +
  145 + //新增配置链路节点
  146 + addSet(){
  147 + // this.tableVisible=false;
  148 + this.addSetLIstVisible=true;
  149 + this.nodeData=[];
  150 + this.isClickNet=-1;
  151 +
  152 + },
  153 + //删除配置节点
  154 + deleteNode(item,index){
  155 + let that=this;
  156 + this.$global.confirm("确认删除节点吗？", function () {
  157 + that.$global.showMsg("删除成功！")
  158 + that.nodeData.splice(index, 1);
  159 + if(that.nodeData.length==1){
  160 + this.addSetLIstVisible=true;
  161 + }
  162 +
  163 + // that.getNodeData();
  164 + })
  165 + },
  166 + //获取配置链接节点数据
  167 + getNodeData(){
  168 + this.nodeData=[
  169 + {
  170 + name:'节点1',
  171 + img:'123'
  172 + },
  173 + {
  174 + name:'节点2',
  175 + img:'123'
  176 + }
  177 + ]
  178 + if(this.nodeData.length>1){
  179 + this.addSetLIstVisible=false;
  180 + this.isClickNet=0;
  181 + }
  182 + this.nodeData.push({name:'',img:''})
  183 + },
  184 + //点击添加节点
  185 + addTableList(){
  186 + this.tableVisible=true;
  187 + this.titleName='添加内容';
  188 + this.init();
  189 + this.getNodeList();
  190 + },
  191 + //取消节点列表配置
  192 + cancleList(){
  193 + this.tableVisible=false;
  194 + this.titleName='故障新增内容';
  195 +
  196 + },
  197 + //保存节点添加配置
  198 + saveList(){
  199 + this.tableVisible=false;
  200 + this.titleName='故障新增内容';
  201 + },
  202 + //重新加载表格数据
  203 + loadTableDataList(){
  204 + this.getNodeList()
  205 + },
  206 + //获取配置节点列表数据
  207 + getNodeList(){
  208 + let that=this;
  209 + this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
  210 + if (res && res.success) {
  211 + that.count = res.count;
  212 + that.tableDataList = res.data;
  213 + }
  214 + });
  215 + },
  216 + //配置参数
  217 + getParams(){
  218 + return {
  219 + keyWords: this.keyWords,
  220 + resType: this.resTypeArr.join(','),
  221 + kpiId: this.kpiTypeArr.join(','),
  222 + busId: this.busTypeArr.join(','),
  223 + configId: this.config,
  224 + page: 1,
  225 + limit: 5
  226 + }
  227 + },
  228 + //关闭弹框
  229 + closeDialog(){
  230 + this.$emit('callback', '111');
  231 + }
  232 +
  233 +
  234 + },
  235 + mounted () {
  236 + this.getNodeData();
  237 + },
  238 + unmounted () {}
  239 +
  240 +}
@@ -2,6 +2,7 @@ export default { @@ -2,6 +2,7 @@ export default {
2 name: 'faultAddIndex', 2 name: 'faultAddIndex',
3 template: '', 3 template: '',
4 components: {}, 4 components: {},
  5 + props:['diagnosisData'],
5 data () { 6 data () {
6 return { 7 return {
7 8
1 -<div id="faultDiagnosisIndex">  
2 - <!--搜索输入框部分-->  
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 -  
20 -  
21 - <!--卡片分页排头-->  
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 -  
48 -  
49 - <!---主体卡片部分-->  
50 - <!--故障定义-->  
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>  
99 -  
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>  
127 - </div>  
128 -  
129 - <!--网络检测-->  
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>  
164 - </div>  
165 -  
166 - <!--应用监测-->  
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>  
201 - </div>  
202 -  
203 - <!--基础环境 Basic environment-->  
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="资源类型" width="180" />  
252 - <el-table-column prop="address" label="指标" 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 -  
271 - </div>  
272 -  
273 - <!--APM-->  
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 -  
310 - </div>  
311 -  
312 - <!--日志检测-->  
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>  
347 - </div>  
348 -  
349 - <!--订阅报告-->  
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 -  
382 - </div>  
383 -  
384 - <!--网络检测弹窗-->  
385 - <div class="network-monitor-popup popup-bg">  
386 - <el-dialog v-model="networkMonitorVisible" title="故障新增内容" width="60%">  
387 - <el-row>  
388 - <el-col :span="6">  
389 - <div class="grid-content bg-purple network-monitor-popup-left">  
390 - <div>  
391 - <div class="context-head">  
392 - 已配置链路  
393 - </div>  
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 ">  
397 - <div class="multiple-choice-button">{{item.title}}</div>  
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">  
402 - <div class="multiple-choice-button">  
403 - <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">  
404 - </div>  
405 - </div>  
406 -  
407 - </div>  
408 - </el-col>  
409 - <el-col :span="18">  
410 - <div class="grid-content bg-purple-light network-monitor-popup-right">  
411 - <div class="context-head">  
412 - <div>电子税务局网络链路配置</div>  
413 - <div >  
414 - <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">  
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 -  
438 - </div>  
439 - </div>  
440 - </el-col>  
441 - </el-row>  
442 -<!-- <div class="network-monitor-popup-left">-->  
443 -<!-- <span>-->  
444 -<!-- <div class="context-head">-->  
445 -<!-- 已配置链路-->  
446 -<!-- </div>-->  
447 -<!-- </span>-->  
448 -<!-- <span v-for="(item, index) in networkMonitorList" :key="index">-->  
449 -<!-- <span>-->  
450 -<!-- <div class="multiple-choice-button">{{item.title}}</div>-->  
451 -<!-- &lt;!&ndash;img&ndash;&gt;-->  
452 -<!-- </span>-->  
453 -<!-- </span>-->  
454 -<!-- <span>-->  
455 -<!-- <div class="multiple-choice-button">-->  
456 -<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">-->  
457 -<!-- </div>-->  
458 -<!-- </span>-->  
459 -<!-- </div>-->  
460 -<!-- <div class="network-monitor-popup-right">-->  
461 -<!-- <div class="context-head">-->  
462 -<!-- <span>电子税务局网络链路配置</span>-->  
463 -<!-- <span>-->  
464 -<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">-->  
465 -<!-- </span>-->  
466 -<!-- </div>-->  
467 -<!-- </div>-->  
468 - </el-dialog>  
469 - </div>  
470 -  
471 -</div>  
  1 +<component :is="componentItem" :diagnosisData="diagnosisData" @getItem="getItem" @getItemDetail="getItemDetail" :detailData="detailData" />
  2 +<!--<FaultAddIndex></FaultAddIndex>-->
1 export default { 1 export default {
2 - name: 'faultDiagnosis', 2 + name: 'zjdaping',
3 template: '', 3 template: '',
4 - components: {},  
5 - data () {  
6 - return {  
7 - multiple_choice_button_id_Tmpl: '',  
8 - multiple_choice_button_id: '',  
9 - faultDefinitionHide: false,  
10 - networkMonitorHide: false,  
11 - applicationMonitorHide: false,  
12 - basicEnvironmentHide: false,  
13 - apmMonitorHide: false,  
14 - logDetectionHide: 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: '服务器',  
26 - address: 'CPU使用率，内存使用率，文件系统使用率',  
27 - },  
28 - {  
29 - name: '服务器',  
30 - address: 'CPU使用率，内存使用率，文件系统使用率',  
31 - },  
32 - {  
33 - name: '服务器',  
34 - address: 'CPU使用率，内存使用率，文件系统使用率',  
35 - },  
36 - {  
37 - name: '服务器',  
38 - address: 'CPU使用率，内存使用率，文件系统使用率',  
39 - },  
40 - {  
41 - name: '服务器',  
42 - address: 'CPU使用率，内存使用率，文件系统使用率',  
43 - },  
44 - {  
45 - name: '服务器',  
46 - address: 'CPU使用率，内存使用率，文件系统使用率',  
47 - },  
48 - {  
49 - name: '服务器',  
50 - address: 'CPU使用率，内存使用率，文件系统使用率',  
51 - }, 4 + components: {
  5 + 'FaultForm': Vue.defineAsyncComponent(
  6 + () => myImport('views/faultDiagnosis/components/faultForm/index')
  7 + ),//故障表格
  8 + 'FaultAddIndex': Vue.defineAsyncComponent(
  9 + () => myImport('views/faultDiagnosis/components/faultAddIndex/index')
  10 + ),//配置添加组件
  11 + 'DiagnosisDoc': Vue.defineAsyncComponent(
  12 + () => myImport('views/faultDiagnosis/components/diagnosisDoc/index')
  13 + ),//故障诊断文档组件
  14 + 'Diagnosis': Vue.defineAsyncComponent(
  15 + () => myImport('views/faultDiagnosis/components/diagnosis/index')
  16 + ),//故障诊断书
  17 +
52 18
53 - ],//基础环境表格数据  
54 - //网络检测选中项集合  
55 - networkMonitorList: [  
56 - {  
57 - title: "电子税务局外用链路1",  
58 - type: "networkMonitor",  
59 - id: "networkMonitor1"  
60 - },  
61 - {  
62 - title: "电子税务局外用链路2",  
63 - type: "networkMonitor",  
64 - id: "networkMonitor2"  
65 - },  
66 - {  
67 - title: "电子税务局外用链路3",  
68 - type: "networkMonitor",  
69 - id: "networkMonitor3"  
70 - }  
71 - ],  
72 - //应用检测选中项集合  
73 - applicationMonitorList: [  
74 - {  
75 - title: "从对接过来的NPM中选择",  
76 - type: "applicationMonitor",  
77 - id: "applicationMonitor1"  
78 - }  
79 - ],  
80 - //APM  
81 - apmMonitorList: [  
82 - {  
83 - title: "arms",  
84 - type: "apmMonitor",  
85 - id: " apmMonitor1"  
86 }, 19 },
87 - {  
88 - title: "arms2",  
89 - type: "apmMonitor",  
90 - id: " apmMonitor2"  
91 - }  
92 - ],  
93 - //日志检测  
94 - logDetectionList: [  
95 - {  
96 - title: "日志检测1",  
97 - type: "logDetection",  
98 - id: " logDetection1" 20 + data() {
  21 + return {
  22 +
99 } 23 }
100 - ],  
101 - //订阅人员  
102 - //订阅人员  
103 - subscriptionReportList: [  
104 - {  
105 - title: "张三",  
106 - type: "subscriptionReport",  
107 - id: " subscriptionReport1"  
108 }, 24 },
109 - {  
110 - title: "李四",  
111 - type: "subscriptionReport",  
112 - id: " subscriptionReport2"  
113 - },  
114 - {  
115 - title: "王五",  
116 - type: "subscriptionReport",  
117 - id: " subscriptionReport3" 25 + setup(props, {attrs, slots, emit}) {
  26 + const {proxy} = Vue.getCurrentInstance();
  27 + //允许的所有组件
  28 + const allComponent=Vue.ref(['FaultAddIndex','FaultForm','DiagnosisDoc']);
  29 + //允许展示的组件
  30 + const componentItem=Vue.ref('FaultAddIndex');
  31 + //配置列表总数
  32 + let count=Vue.ref(0);
  33 + //列表数据
  34 + let diagnosisData=Vue.ref();
  35 + //选择的文档列表详情数据
  36 + let detailData=Vue.ref();
  37 +
  38 +
  39 + // 挂载完
  40 + Vue.onMounted(() => {
  41 +
  42 + proxy.getListData()
  43 +
  44 + })
  45 +
  46 + const getListData=()=>{
  47 + let params={
  48 + page:1,
  49 + pageSize:10
  50 +
118 } 51 }
  52 + proxy.$http.get('/api-web/fault/conf/page',params,function (res){
  53 + if(res && res.data){
  54 + proxy.diagnosisData=res.data;
  55 + proxy.count=res.count;
  56 + if(proxy.count>0){
  57 + proxy.componentItem='DiagnosisDoc';
  58 + // proxy.componentItem='Diagnosis';
119 59
120 - ],  
121 - networkMonitorVisible: false,  
122 } 60 }
123 - },  
124 - computed: {},  
125 - methods: {  
126 - hiddenAll(){  
127 - this.faultDefinitionHide = false;  
128 - this.networkMonitorHide = false;  
129 - this.applicationMonitorHide = false;  
130 - this.basicEnvironmentHide = false;  
131 - this.apmMonitorHide = false;  
132 - this.logDetectionHide = false;  
133 - this.subscriptionReportHide = false;  
134 - },  
135 - // 打开故障定义卡片  
136 - clickDaultDefinitionFunc(){  
137 - this.hiddenAll();  
138 - this.faultDefinitionHide = true;  
139 - },  
140 - //打开网络监测卡片  
141 - clickNetworkMonitorFunc(){  
142 - this.hiddenAll();  
143 - this.networkMonitorHide = true;  
144 - },  
145 - //打开应用监测卡片  
146 - applicationMonitorFunc(){  
147 - this.hiddenAll();  
148 - this.applicationMonitorHide = true;  
149 - },  
150 - //打开基础环境卡片  
151 - basicEnvironmentFunc(){  
152 - this.hiddenAll();  
153 - this.basicEnvironmentHide = true;  
154 - },  
155 - //APM  
156 - apmMonitorFunc(){  
157 - this.hiddenAll();  
158 - this.apmMonitorHide = true;  
159 - },  
160 - //日志检测  
161 - logDetectionFunc(){  
162 - this.hiddenAll();  
163 - this.logDetectionHide = true;  
164 - },  
165 - //报告订阅  
166 - subscriptionReportFunc(){  
167 - this.hiddenAll();  
168 - this.subscriptionReportHide = true;  
169 - },  
170 - //遍历集合，动态增加集合内item  
171 - showItemList(){  
172 - },  
173 - deleteItem(id, list){  
174 - var newList = [];  
175 - var type = '';  
176 - $.each(list,function (index, value) {  
177 - var valueId = value.id;  
178 - type = value.type;  
179 - if(valueId === id){  
180 - console.log("点击删除id为:" + valueId + "的值")  
181 - } else {  
182 - newList.push(value)  
183 } 61 }
184 - });  
185 - switch (type) {  
186 - case "networkMonitor":  
187 - //网络检测  
188 - this.networkMonitorList = newList;  
189 - break;  
190 - case "applicationMonitor":  
191 - //网络检测  
192 - this.applicationMonitorList = newList;  
193 - break;  
194 - case "apmMonitor":  
195 - //APM  
196 - this.apmMonitorList = newList;  
197 - break;  
198 - case "logDetection":  
199 - //日志检测  
200 - this.logDetectionList = newList;  
201 - break;  
202 - case "subscriptionReport":  
203 - //订阅人员  
204 - this.subscriptionReportList = newList;  
205 - break;  
206 - case "networkMonitor5":  
207 - //网络检测  
208 - break;  
209 - case "networkMonitor6":  
210 - //网络检测  
211 - break;  
212 62
  63 + })
213 } 64 }
214 - },  
215 - //点击添加网络检测item  
216 - addNetworkMonitorItem(){  
217 -  
218 - },  
219 - //点击已配置链路  
220 - clickList(index){  
221 - this.isClickNet=index; 65 + //新增故障
  66 + const getItem=(content)=>{
  67 + console.log("111",content)
  68 + proxy.componentItem=content;
  69 + }
  70 + //修改故障
  71 + const getItemDetail=(obj)=>{
  72 + console.log("222",obj)
  73 + proxy.componentItem=obj.componentName;
  74 + proxy.detailData=obj.item;
222 } 75 }
223 76
224 77
225 - },  
226 - mounted () {},  
227 - unmounted () {} 78 + return {
  79 + allComponent,
  80 + componentItem,
  81 + count,
  82 + getListData,
  83 + diagnosisData,
  84 + getItem,
  85 + getItemDetail,
  86 + detailData
228 87
  88 + }
  89 + }
229 } 90 }