monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 9a9d0101aba61401b5e7331304124f64859933af 2 parents c4f14127 c383f214

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-v32-xwx

Inline Side-by-side
Showing 50 changed files with 1604 additions and 219 deletions
@@ -35,6 +35,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm @@ -35,6 +35,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
35 35
36 //绑定检索事件 36 //绑定检索事件
37 bindSearchEvent(); 37 bindSearchEvent();
  38 + var collProtocols = "";
38 39
39 form.render(null, 'biz-reslist-form'); 40 form.render(null, 'biz-reslist-form');
40 41
@@ -123,7 +124,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm @@ -123,7 +124,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
123 linkState: $("#biz_reslist_link_state").val(), 124 linkState: $("#biz_reslist_link_state").val(),
124 state: $("#biz_reslist_state").val(), 125 state: $("#biz_reslist_state").val(),
125 // hostState: $("#biz_reslist_host_state").val(), 126 // hostState: $("#biz_reslist_host_state").val(),
126 - powerState: $("#biz_reslist_power_state").val() 127 + powerState: $("#biz_reslist_power_state").val(),
  128 + collProtocols: collProtocols
127 129
128 } 130 }
129 , height: 'full-165' 131 , height: 'full-165'
@@ -168,6 +170,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm @@ -168,6 +170,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
168 170
169 } 171 }
170 172
  173 +
171 //树表格 174 //树表格
172 function renderTreeTable(bizId, resType, reloadFlag) { 175 function renderTreeTable(bizId, resType, reloadFlag) {
173 176
@@ -175,7 +178,10 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm @@ -175,7 +178,10 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
175 $(".biz_reslist_treetable_search").show(); 178 $(".biz_reslist_treetable_search").show();
176 $("#bizResListTableContent").hide(); 179 $("#bizResListTableContent").hide();
177 $("#bizResTreeTableContent").show(); 180 $("#bizResTreeTableContent").show();
178 - 181 + if (collProtocols) {
  182 + xmSelect.get('#collProtocolSelect', true).setValue([]);
  183 + collProtocols = '';
  184 + }
179 // 如果是虚拟机或者物理主机，展示电源状态查询条件 185 // 如果是虚拟机或者物理主机，展示电源状态查询条件
180 if ((resType === 'VIRTUALIZATION_VMWARE_VHOST' || resType === 'VIRTUALIZATION_VMWARE_PHYSICSHOST') && !reloadFlag) { 186 if ((resType === 'VIRTUALIZATION_VMWARE_VHOST' || resType === 'VIRTUALIZATION_VMWARE_PHYSICSHOST') && !reloadFlag) {
181 $('#biz_reslist_treetable_power_state').val('poweredOn'); 187 $('#biz_reslist_treetable_power_state').val('poweredOn');
@@ -222,7 +228,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm @@ -222,7 +228,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
222 state: $("#biz_reslist_treetable_state").val(), 228 state: $("#biz_reslist_treetable_state").val(),
223 linkState: $('#biz_reslist_treetable_link_state').val(), 229 linkState: $('#biz_reslist_treetable_link_state').val(),
224 powerState: $("#biz_reslist_treetable_power_state").val(), 230 powerState: $("#biz_reslist_treetable_power_state").val(),
225 - serverState: $("#biz_reslist_server_state").val() 231 + serverState: $("#biz_reslist_server_state").val(),
  232 + collProtocols: collProtocols
226 } 233 }
227 , done: function (res) { 234 , done: function (res) {
228 if (res.code == 0) { 235 if (res.code == 0) {
@@ -380,6 +387,10 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm @@ -380,6 +387,10 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
380 form.on('select(biz_reslist_res_colony)', function (data) { 387 form.on('select(biz_reslist_res_colony)', function (data) {
381 reloadTable(); 388 reloadTable();
382 }); 389 });
  390 + //资源池选择事件
  391 + form.on('select(aliyun_plantform)', function (data) {
  392 + reloadTable();
  393 + });
383 394
384 //资源连接状态选择事件 395 //资源连接状态选择事件
385 form.on('select(biz_reslist_platform)', function (data) { 396 form.on('select(biz_reslist_platform)', function (data) {
@@ -409,11 +420,23 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm @@ -409,11 +420,23 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
409 $('#biz_reslist_resStatus').val(''); 420 $('#biz_reslist_resStatus').val('');
410 $('#biz_reslist_res_colony').val(''); 421 $('#biz_reslist_res_colony').val('');
411 $('#biz_reslist_res_cluster').val(''); 422 $('#biz_reslist_res_cluster').val('');
  423 + $("#aliyun_plantform").val('');
  424 + if (collProtocols) {
  425 + xmSelect.get('#collProtocolSelect', true).setValue([]);
  426 + collProtocols = '';
  427 + }
412 form.render('select'); 428 form.render('select');
413 429
414 var targetId = ''; 430 var targetId = '';
415 var searchType = ""; 431 var searchType = "";
416 var optons = ""; 432 var optons = "";
  433 + //阿里云显示平台
  434 + if(/ALI_CLOUD/.test(resType)){
  435 + $("#aliyun_plantform").parent().parent().removeClass("hide");
  436 + form.render("select");
  437 + }else{
  438 + $("#aliyun_plantform").parent().parent().addClass("hide");
  439 + }
417 //华为云物理机，加载华为云集群查询条件 440 //华为云物理机，加载华为云集群查询条件
418 if (resType == 'HUAWEI_CLOUD_PHYSICSHOST') { 441 if (resType == 'HUAWEI_CLOUD_PHYSICSHOST') {
419 optons = "<option value=''>=所属集群=</option>" 442 optons = "<option value=''>=所属集群=</option>"
@@ -428,6 +451,54 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm @@ -428,6 +451,54 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
428 } else { 451 } else {
429 $("#biz_reslist_res_cluster_id").hide(); 452 $("#biz_reslist_res_cluster_id").hide();
430 } 453 }
  454 + if(/HUAWEI_CLOUD_VIRTUALHOST/.test(resType) || /ALI_CLOUD_ECS/.test(resType) || /VIRTUALIZATION_VMWARE_VHOST/.test(resType)) {
  455 + //绑定采集协议
  456 + admin.req({
  457 + url: common.domainName + '/api-web/manage/protocol/page',
  458 + data: {
  459 + access_token: accessToken,
  460 + startTime: '',
  461 + endTime: '',
  462 + keyword: '',
  463 + hasParam: '',
  464 + limit: -1
  465 + }
  466 + }).done(function (res) {
  467 + xmSelect.render({
  468 + el: '#collProtocolSelect'
  469 + , filterable: true
  470 + , tips: '=采集协议='
  471 + , name: 'collProtocols'
  472 + , prop: {
  473 + name: 'protocolName',
  474 + value: 'protocolCode',
  475 + }
  476 + , model: {
  477 + label: {
  478 + type: 'block',
  479 + block: {
  480 + //最大显示数量, 0:不限制
  481 + showCount: 1,
  482 + //是否显示删除图标
  483 + showIcon: true,
  484 + }
  485 + }
  486 + }
  487 + , data: res.data
  488 + , hide: function () {
  489 + var selectValue = xmSelect.get('#collProtocolSelect', true).getValue('value');
  490 + collProtocols = selectValue.join(',');
  491 + form.render()
  492 + reloadTable();
  493 + if (collProtocols) {
  494 + xmSelect.get('#collProtocolSelect', true).setValue([]);
  495 + collProtocols = '';
  496 + form.render();
  497 + }
  498 + }
  499 + })
  500 + })
  501 + }
431 502
432 //华为云的集群、虚拟化物理机，查询条件绑定资源池 503 //华为云的集群、虚拟化物理机，查询条件绑定资源池
433 if (resType == 'HUAWEI_CLOUD_CLUSTER' || resType == 'VIRTUALIZATION_VMWARE_PHYSICSHOST') { 504 if (resType == 'HUAWEI_CLOUD_CLUSTER' || resType == 'VIRTUALIZATION_VMWARE_PHYSICSHOST') {
@@ -506,7 +577,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm @@ -506,7 +577,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
506 platform: platform, 577 platform: platform,
507 subResType: $("#biz_reslist_sub_restype").val(), 578 subResType: $("#biz_reslist_sub_restype").val(),
508 powerState: $("#biz_reslist_power_state").val(), 579 powerState: $("#biz_reslist_power_state").val(),
509 - serverState: $("#biz_reslist_server_state").val() 580 + serverState: $("#biz_reslist_server_state").val(),
  581 + collProtocols: collProtocols,
  582 + platform: $("#aliyun_plantform").val()
510 } 583 }
511 }) 584 })
512 } 585 }
@@ -376,7 +376,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin', @@ -376,7 +376,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
376 {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'}, 376 {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
377 {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'}, 377 {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
378 {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}, 378 {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
379 - {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true} 379 + // 2021-11-22 徐毫杰 连接状态无数据改成展示主机状态
  380 + {field: 'hostState', title: '主机状态', align: 'center', minWidth: x_110, templet: '#hostStateTpl', sort: true}
380 ], 381 ],
381 "HUAWEI_CLOUD_VIRTUALHOST": [ 382 "HUAWEI_CLOUD_VIRTUALHOST": [
382 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'}, 383 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -419,8 +420,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin', @@ -419,8 +420,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
419 templet: '#resindex_resName' 420 templet: '#resindex_resName'
420 }, 421 },
421 {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true}, 422 {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
422 - {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},  
423 - {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true}, 423 + // {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
  424 + // {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
424 {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'}, 425 {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
425 {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true}, 426 {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
426 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true}, 427 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
@@ -436,8 +437,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin', @@ -436,8 +437,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
436 templet: '#resindex_resName' 437 templet: '#resindex_resName'
437 }, 438 },
438 {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true}, 439 {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
439 - {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},  
440 - {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true}, 440 + // {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
  441 + // {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
441 {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'}, 442 {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
442 {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true}, 443 {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
443 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true}, 444 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
@@ -197,7 +197,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func @@ -197,7 +197,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func
197 series: [ 197 series: [
198 { 198 {
199 type: 'bar', 199 type: 'bar',
200 - barWidth: '60%', 200 + barWidth: '40%',
201 data: line, 201 data: line,
202 itemStyle: { 202 itemStyle: {
203 normal: { 203 normal: {
@@ -84,11 +84,11 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect' @@ -84,11 +84,11 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
84 return '测试通知' 84 return '测试通知'
85 break; 85 break;
86 default: 86 default:
87 - return '告警通知' 87 + return '系统通知'
88 break; 88 break;
89 } 89 }
90 }else { 90 }else {
91 - return '告警通知' 91 + return '系统通知'
92 } 92 }
93 }} 93 }}
94 , {field: 'way', title: '通知方式', align: 'center', sort: true, width:120, 94 , {field: 'way', title: '通知方式', align: 'center', sort: true, width:120,
@@ -39,9 +39,57 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'upload', 'admin', 'form', @@ -39,9 +39,57 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'upload', 'admin', 'form',
39 if(bizId!=''){ 39 if(bizId!=''){
40 bizId.substring(0,bizId.length-1); 40 bizId.substring(0,bizId.length-1);
41 } 41 }
  42 +
42 reloadTable(); 43 reloadTable();
43 } 44 }
44 }); 45 });
  46 + var collProtocols = '';
  47 + initProtocolSelect()
  48 + //获取全部协议
  49 + function initProtocolSelect() {
  50 + admin.req({
  51 + url: domainName + '/api-web/manage/protocol/page',
  52 + data: {
  53 + access_token: accessToken,
  54 + startTime: '',
  55 + endTime: '',
  56 + keyword: '',
  57 + hasParam: '',
  58 + limit: -1
  59 + }
  60 + }).done(function (res) {
  61 + xmSelect.render({
  62 + el: '#collProtocolSelect'
  63 + , filterable: true
  64 + , tips: '=采集协议='
  65 + , name: 'collProtocols'
  66 + , prop: {
  67 + name: 'protocolName',
  68 + value: 'protocolCode',
  69 + }
  70 + , model: {
  71 + label: {
  72 + type: 'block',
  73 + block: {
  74 + //最大显示数量, 0:不限制
  75 + showCount: 1,
  76 + //是否显示删除图标
  77 + showIcon: true,
  78 + }
  79 + }
  80 + }
  81 + , data: res.data
  82 + ,hide: function () {
  83 + var selectValue = xmSelect.get('#collProtocolSelect', true).getValue('value');
  84 + collProtocols = selectValue.join(',');
  85 + form.render()
  86 + reloadTable();
  87 +
  88 + }
  89 + })
  90 + })
  91 + }
  92 +
45 function autoHeight(el) { 93 function autoHeight(el) {
46 // var height = el.parents('.layui-card').height(); 94 // var height = el.parents('.layui-card').height();
47 // el.css('min-height', height - 75); 95 // el.css('min-height', height - 75);
@@ -794,6 +842,7 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'upload', 'admin', 'form', @@ -794,6 +842,7 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'upload', 'admin', 'form',
794 , id: 'resManageTable' 842 , id: 'resManageTable'
795 , url: common.domainName + '/api-web/home/res-list/' + resType 843 , url: common.domainName + '/api-web/home/res-list/' + resType
796 , where: { 844 , where: {
  845 +
797 access_token: accessToken, 846 access_token: accessToken,
798 editMode: 'true', 847 editMode: 'true',
799 resName: $("#resManageIndexForm").find("input[name='resName']").val() ? $("#resManageIndexForm").find("input[name='resName']").val() : searchId, 848 resName: $("#resManageIndexForm").find("input[name='resName']").val() ? $("#resManageIndexForm").find("input[name='resName']").val() : searchId,
@@ -803,7 +852,8 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'upload', 'admin', 'form', @@ -803,7 +852,8 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'upload', 'admin', 'form',
803 busId: $("#resManageIndexForm").find("input[name='busId']").val(), 852 busId: $("#resManageIndexForm").find("input[name='busId']").val(),
804 state: $("#resManageIndexForm").find("select[name='state']").val(), 853 state: $("#resManageIndexForm").find("select[name='state']").val(),
805 parentId: $("#resManageIndexForm").find("select[name='parentId']").val(), 854 parentId: $("#resManageIndexForm").find("select[name='parentId']").val(),
806 - collectionState: $("#resManageIndexForm").find("select[name='collectionState']").val() 855 + collectionState: $("#resManageIndexForm").find("select[name='collectionState']").val(),
  856 + collProtocols: collProtocols
807 } 857 }
808 , height: 'full-200' 858 , height: 'full-200'
809 , cellMinWidth: 80 859 , cellMinWidth: 80
@@ -33,7 +33,7 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -33,7 +33,7 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
33 var bizId=''; 33 var bizId='';
34 var busIdSelect; 34 var busIdSelect;
35 var busTypeList = []; 35 var busTypeList = [];
36 - 36 + var collProtocols = '';
37 37
38 var editFlag = false; 38 var editFlag = false;
39 if (data.choose == '1') { 39 if (data.choose == '1') {
@@ -68,7 +68,49 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -68,7 +68,49 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
68 $('#resindex-leftree-shrink').hide(); 68 $('#resindex-leftree-shrink').hide();
69 }); 69 });
70 }); 70 });
71 - 71 + //获取全部协议
  72 + function initProtocolSelect() {
  73 + admin.req({
  74 + url: common.domainName + '/api-web/manage/protocol/page',
  75 + data: {
  76 + access_token: accessToken,
  77 + startTime: '',
  78 + endTime: '',
  79 + keyword: '',
  80 + hasParam: '',
  81 + limit: -1
  82 + }
  83 + }).done(function (res) {
  84 + xmSelect.render({
  85 + el: '#collProtocolSelect'
  86 + , filterable: true
  87 + , tips: '=采集协议='
  88 + , name: 'collProtocols'
  89 + , prop: {
  90 + name: 'protocolName',
  91 + value: 'protocolCode',
  92 + }
  93 + , model: {
  94 + label: {
  95 + type: 'block',
  96 + block: {
  97 + //最大显示数量, 0:不限制
  98 + showCount: 1,
  99 + //是否显示删除图标
  100 + showIcon: true,
  101 + }
  102 + }
  103 + }
  104 + , data: res.data
  105 + ,hide: function () {
  106 + var selectValue = xmSelect.get('#collProtocolSelect', true).getValue('value');
  107 + collProtocols = selectValue.join(',');
  108 + form.render()
  109 + reloadTable();
  110 + }
  111 + })
  112 + })
  113 + }
72 //树展开事件 114 //树展开事件
73 $("#resindex-leftree_btn").on("click",function () { 115 $("#resindex-leftree_btn").on("click",function () {
74 $("#resindex-leftree_btn").hide(); 116 $("#resindex-leftree_btn").hide();
@@ -312,6 +354,52 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -312,6 +354,52 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
312 // form.render("select"); 354 // form.render("select");
313 // }); 355 // });
314 //$('#treetableBizTypes').val(''); 356 //$('#treetableBizTypes').val('');
  357 + //绑定采集协议
  358 + admin.req({
  359 + url: domainName + '/api-web/manage/protocol/page',
  360 + data: {
  361 + access_token: accessToken,
  362 + startTime: '',
  363 + endTime: '',
  364 + keyword: '',
  365 + hasParam: '',
  366 + limit: -1
  367 + }
  368 + }).done(function (res) {
  369 + xmSelect.render({
  370 + el: '#collProtocolSelect'
  371 + , filterable: true
  372 + , tips: '=采集协议='
  373 + , name: 'collProtocols'
  374 + , prop: {
  375 + name: 'protocolName',
  376 + value: 'protocolCode',
  377 + }
  378 + , model: {
  379 + label: {
  380 + type: 'block',
  381 + block: {
  382 + //最大显示数量, 0:不限制
  383 + showCount: 1,
  384 + //是否显示删除图标
  385 + showIcon: true,
  386 + }
  387 + }
  388 + }
  389 + , data: res.data
  390 + ,hide: function () {
  391 + var selectValue = xmSelect.get('#collProtocolSelect', true).getValue('value');
  392 + collProtocols = selectValue.join(',');
  393 + form.render()
  394 + reloadTable();
  395 + if (collProtocols) {
  396 + xmSelect.get('#collProtocolSelect', true).setValue([]);
  397 + collProtocols='';
  398 + form.render();
  399 + }
  400 + }
  401 + })
  402 + })
315 //绑定业务下拉选择数据 403 //绑定业务下拉选择数据
316 admin.req({ 404 admin.req({
317 url: domainName + '/api-web/home/business/findAllBusType', 405 url: domainName + '/api-web/home/business/findAllBusType',
@@ -566,6 +654,11 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -566,6 +654,11 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
566 // renderList(currentResType); 654 // renderList(currentResType);
567 reloadTable(); 655 reloadTable();
568 }); 656 });
  657 + //阿里云平台选择事件
  658 + form.on('select(aliyun_plantform)', function (data) {
  659 + // renderList(currentResType);
  660 + reloadTable();
  661 + });
569 //厂商选择事件 662 //厂商选择事件
570 form.on('select(res_vendor)', function (data) { 663 form.on('select(res_vendor)', function (data) {
571 // renderList(currentResType); 664 // renderList(currentResType);
@@ -645,7 +738,9 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -645,7 +738,9 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
645 keyWords: $("#treetable_keyword").val(), 738 keyWords: $("#treetable_keyword").val(),
646 health: $("#treetable_resStatus").val(), 739 health: $("#treetable_resStatus").val(),
647 state: $("#treetable_res_state").val(), 740 state: $("#treetable_res_state").val(),
648 - resCategory: 'resources' 741 + resCategory: 'resources',
  742 + collProtocols : collProtocols
  743 +
649 } 744 }
650 , done: function (res) { 745 , done: function (res) {
651 layer.close(index); 746 layer.close(index);
@@ -1123,11 +1218,12 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -1123,11 +1218,12 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
1123 if(xmSelect.get("#resListBizTypes") && xmSelect.get("#resListBizTypes")[0]){ 1218 if(xmSelect.get("#resListBizTypes") && xmSelect.get("#resListBizTypes")[0]){
1124 xmSelect.get("#resListBizTypes")[0].setValue([]); 1219 xmSelect.get("#resListBizTypes")[0].setValue([]);
1125 } 1220 }
1126 - 1221 + $("#aliyun_plantform").val('');
1127 $('#res_colony').val(''); 1222 $('#res_colony').val('');
1128 $('#res_cluster').val(''); 1223 $('#res_cluster').val('');
1129 $('#state').val(''); 1224 $('#state').val('');
1130 $('#link_state').val(''); 1225 $('#link_state').val('');
  1226 +
1131 //虚拟化查询条件清空 1227 //虚拟化查询条件清空
1132 $("#virtual_platForm_select").val(''); 1228 $("#virtual_platForm_select").val('');
1133 $("#treetable_resStatus").val(''); 1229 $("#treetable_resStatus").val('');
@@ -1135,6 +1231,9 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -1135,6 +1231,9 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
1135 if(xmSelect.get("#treetableBizTypes") && xmSelect.get("#treetableBizTypes")[0]){ 1231 if(xmSelect.get("#treetableBizTypes") && xmSelect.get("#treetableBizTypes")[0]){
1136 xmSelect.get("#treetableBizTypes")[0].setValue([]); 1232 xmSelect.get("#treetableBizTypes")[0].setValue([]);
1137 } 1233 }
  1234 + // if(xmSelect.get("#collProtocolSelect") && xmSelect.get("#collProtocolSelect")[0]){
  1235 + // xmSelect.get("#collProtocolSelect")[0].setValue([]);
  1236 + // }
1138 1237
1139 $("#treetable_keyword").val(''); 1238 $("#treetable_keyword").val('');
1140 $("#treetable_state").val(''); 1239 $("#treetable_state").val('');
@@ -1152,6 +1251,13 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -1152,6 +1251,13 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
1152 var targetId = ''; 1251 var targetId = '';
1153 var searchType = ""; 1252 var searchType = "";
1154 var optons = ""; 1253 var optons = "";
  1254 + //阿里云显示平台
  1255 + if(/ALI_CLOUD/.test(resType)){
  1256 + $("#aliyun_plantform").parent().parent().removeClass("hide");
  1257 + form.render("select");
  1258 + }else{
  1259 + $("#aliyun_plantform").parent().parent().addClass("hide");
  1260 + }
1155 //华为云物理机，加载华为云集群查询条件 1261 //华为云物理机，加载华为云集群查询条件
1156 if (resType == 'HUAWEI_CLOUD_PHYSICSHOST') { 1262 if (resType == 'HUAWEI_CLOUD_PHYSICSHOST') {
1157 optons = "<option value=''>=所属集群=</option>" 1263 optons = "<option value=''>=所属集群=</option>"
@@ -1218,7 +1324,54 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -1218,7 +1324,54 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
1218 } else { 1324 } else {
1219 $("#res_vendor").parent().parent().addClass("hide"); 1325 $("#res_vendor").parent().parent().addClass("hide");
1220 } 1326 }
1221 - 1327 + if(/HUAWEI_CLOUD_VIRTUALHOST/.test(resType) || /ALI_CLOUD_ECS/.test(resType) || /VIRTUALIZATION_VMWARE_VHOST/.test(resType)){
  1328 + //绑定采集协议
  1329 + admin.req({
  1330 + url: domainName + '/api-web/manage/protocol/page',
  1331 + data: {
  1332 + access_token: accessToken,
  1333 + startTime: '',
  1334 + endTime: '',
  1335 + keyword: '',
  1336 + hasParam: '',
  1337 + limit: -1
  1338 + }
  1339 + }).done(function (res) {
  1340 + xmSelect.render({
  1341 + el: '#collProtocolSelect'
  1342 + , filterable: true
  1343 + , tips: '=采集协议='
  1344 + , name: 'collProtocols'
  1345 + , prop: {
  1346 + name: 'protocolName',
  1347 + value: 'protocolCode',
  1348 + }
  1349 + , model: {
  1350 + label: {
  1351 + type: 'block',
  1352 + block: {
  1353 + //最大显示数量, 0:不限制
  1354 + showCount: 1,
  1355 + //是否显示删除图标
  1356 + showIcon: true,
  1357 + }
  1358 + }
  1359 + }
  1360 + , data: res.data
  1361 + , hide: function () {
  1362 + var selectValue = xmSelect.get('#collProtocolSelect', true).getValue('value');
  1363 + collProtocols = selectValue.join(',');
  1364 + form.render()
  1365 + reloadTable();
  1366 + if (collProtocols) {
  1367 + xmSelect.get('#collProtocolSelect', true).setValue([]);
  1368 + collProtocols = '';
  1369 + form.render();
  1370 + }
  1371 + }
  1372 + })
  1373 + })
  1374 + }
1222 if (resType === 'HOST_MINICOMPUTER_PARTITION') { 1375 if (resType === 'HOST_MINICOMPUTER_PARTITION') {
1223 $("#res_minicomputer").parent().parent().removeClass("hide"); 1376 $("#res_minicomputer").parent().parent().removeClass("hide");
1224 var minicomputerStr = ''; 1377 var minicomputerStr = '';
@@ -1260,9 +1413,11 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -1260,9 +1413,11 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
1260 form.render("select"); 1413 form.render("select");
1261 }) 1414 })
1262 } 1415 }
  1416 +
1263 if(subflag && !resTypeSelectExclude.includes(resType)){ 1417 if(subflag && !resTypeSelectExclude.includes(resType)){
1264 if(/ALI_CLOUD_/.test(resType) || /HUAWEI_CLOUD_/.test(resType)) { 1418 if(/ALI_CLOUD_/.test(resType) || /HUAWEI_CLOUD_/.test(resType)) {
1265 - return 1419 +
  1420 + return;
1266 } 1421 }
1267 $("#res_sub_restype").parent().parent().removeClass("hide"); 1422 $("#res_sub_restype").parent().parent().removeClass("hide");
1268 $(".top-head-info").removeClass("hide"); 1423 $(".top-head-info").removeClass("hide");
@@ -1380,7 +1535,9 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -1380,7 +1535,9 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
1380 ptId: $("#res_platform").val(), 1535 ptId: $("#res_platform").val(),
1381 subResType:$("#res_sub_restype").val(), 1536 subResType:$("#res_sub_restype").val(),
1382 provider: $("#res_vendor").val(), 1537 provider: $("#res_vendor").val(),
1383 - resCategory: 'resources' 1538 + resCategory: 'resources',
  1539 + collProtocols:collProtocols,
  1540 + platform: $("#aliyun_plantform").val(),
1384 } 1541 }
1385 }) 1542 })
1386 } 1543 }
@@ -52,6 +52,12 @@ @@ -52,6 +52,12 @@
52 </div> 52 </div>
53 </div> 53 </div>
54 <div class="layui-inline"> 54 <div class="layui-inline">
  55 + <div class="layui-input-inline layui-input-inline--long" style="width: 180px;">
  56 + <div id="collProtocolSelect" class="xm-select">
  57 + </div>
  58 + </div>
  59 + </div>
  60 + <div class="layui-inline">
55 <div class="layui-input-inline"> 61 <div class="layui-input-inline">
56 <select name="parentId" id="slt_res_manage_superior" lay-filter="slt_res_manage_superior"> 62 <select name="parentId" id="slt_res_manage_superior" lay-filter="slt_res_manage_superior">
57 63
@@ -94,6 +94,7 @@ @@ -94,6 +94,7 @@
94 </select> 94 </select>
95 </div> 95 </div>
96 </div> 96 </div>
  97 +
97 <div class="layui-inline"> 98 <div class="layui-inline">
98 <div class="layui-input-inline"> 99 <div class="layui-input-inline">
99 <select name="label" id="biz_reslist_state" lay-filter="biz_reslist_state"> 100 <select name="label" id="biz_reslist_state" lay-filter="biz_reslist_state">
@@ -105,6 +106,20 @@ @@ -105,6 +106,20 @@
105 </select> 106 </select>
106 </div> 107 </div>
107 </div> 108 </div>
  109 + <div class="layui-inline">
  110 + <div class="layui-input-inline layui-input-inline--long" style="width: 180px;">
  111 + <div id="collProtocolSelect" class="xm-select">
  112 + </div>
  113 + </div>
  114 + </div>
  115 + <div class="layui-inline hide">
  116 + <div class="layui-input-inline">
  117 + <select name="platform" id="aliyun_plantform" lay-filter="aliyun_plantform">
  118 + <option value="">=阿里回迁云平台=</option>
  119 + <option value="阿里云">=阿里云平台=</option>
  120 + </select>
  121 + </div>
  122 + </div>
108 </div> 123 </div>
109 124
110 <!--树表格的检索条件--> 125 <!--树表格的检索条件-->
@@ -9,7 +9,11 @@ @@ -9,7 +9,11 @@
9 var arr = []; 9 var arr = [];
10 window.location.hash.split('/').forEach(function (v, i) { 10 window.location.hash.split('/').forEach(function (v, i) {
11 if (v.indexOf('=') != -1 && v.indexOf('reportCode') != -1) { 11 if (v.indexOf('=') != -1 && v.indexOf('reportCode') != -1) {
  12 + try {
12 viewURL = viewURL.replaceAll('reportCode',v.split('=')[1]) 13 viewURL = viewURL.replaceAll('reportCode',v.split('=')[1])
  14 + } catch (e) {
  15 + viewURL = viewURL.replace('reportCode',v.split('=')[1])
  16 + }
13 } 17 }
14 }); 18 });
15 19
@@ -153,6 +153,12 @@ @@ -153,6 +153,12 @@
153 </select> 153 </select>
154 </div> 154 </div>
155 </div> 155 </div>
  156 + <div class="layui-inline">
  157 + <div class="layui-input-inline layui-input-inline--long" style="width: 180px;">
  158 + <div id="collProtocolSelect" class="xm-select">
  159 + </div>
  160 + </div>
  161 + </div>
156 <div class="layui-inline hide" > 162 <div class="layui-inline hide" >
157 <div class="layui-input-inline"> 163 <div class="layui-input-inline">
158 <select name="label" id="res_sub_restype" lay-filter="sub_restype"> 164 <select name="label" id="res_sub_restype" lay-filter="sub_restype">
@@ -174,6 +180,14 @@ @@ -174,6 +180,14 @@
174 </select> 180 </select>
175 </div> 181 </div>
176 </div> 182 </div>
  183 + <div class="layui-inline hide">
  184 + <div class="layui-input-inline">
  185 + <select name="platform" id="aliyun_plantform" lay-filter="aliyun_plantform">
  186 + <option value="">=阿里回迁云平台=</option>
  187 + <option value="阿里云">=阿里云平台=</option>
  188 + </select>
  189 + </div>
  190 + </div>
177 </div> 191 </div>
178 </form> 192 </form>
179 </div> 193 </div>
@@ -228,15 +242,11 @@ @@ -228,15 +242,11 @@
228 </div> 242 </div>
229 </div> 243 </div>
230 <div class="layui-inline"> 244 <div class="layui-inline">
231 -<!-- <div class="layui-input-inline">-->  
232 -<!-- <select name="label" id="treetableBizTypes" lay-filter="treetableBizTypes">-->  
233 -<!-- <option value="">=所属业务=</option>-->  
234 -<!-- </select>-->  
235 -<!-- </div>-->  
236 <div class="layui-input-inline layui-input-inline--long"> 245 <div class="layui-input-inline layui-input-inline--long">
237 <div id="treetableBizTypes" class="xm-select-demo"></div> 246 <div id="treetableBizTypes" class="xm-select-demo"></div>
238 </div> 247 </div>
239 </div> 248 </div>
  249 +
240 <div class="layui-inline" id="virtual_platform_div_id"> 250 <div class="layui-inline" id="virtual_platform_div_id">
241 <div class="layui-input-inline"> 251 <div class="layui-input-inline">
242 <select name="label" id="virtual_platForm_select" lay-filter="virtual_platForm_select"> 252 <select name="label" id="virtual_platForm_select" lay-filter="virtual_platForm_select">
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <div class="layui-tab layui-tab-card" lay-filter="detail-tab"> 4 <div class="layui-tab layui-tab-card" lay-filter="detail-tab">
5 <ul class="layui-tab-title"> 5 <ul class="layui-tab-title">
6 <li class="layui-this">数据库信息</li> 6 <li class="layui-this">数据库信息</li>
7 - <li>RAC信息</li> 7 + <!--<li>RAC信息</li>-->
8 </ul> 8 </ul>
9 <div class="layui-tab-content"> 9 <div class="layui-tab-content">
10 <div class="layui-tab-item layui-show"> 10 <div class="layui-tab-item layui-show">
@@ -55,6 +55,18 @@ @@ -55,6 +55,18 @@
55 <ul class="icon_lists dib-box"> 55 <ul class="icon_lists dib-box">
56 56
57 <li class="dib"> 57 <li class="dib">
  58 + <span class="icon iconfont">&#xe940;</span>
  59 + <div class="name">数据库,数据</div>
  60 + <div class="code-name">&amp;#xe940;</div>
  61 + </li>
  62 +
  63 + <li class="dib">
  64 + <span class="icon iconfont">&#xe620;</span>
  65 + <div class="name">OPC跳板机权限申请</div>
  66 + <div class="code-name">&amp;#xe620;</div>
  67 + </li>
  68 +
  69 + <li class="dib">
58 <span class="icon iconfont">&#xe615;</span> 70 <span class="icon iconfont">&#xe615;</span>
59 <div class="name">资产</div> 71 <div class="name">资产</div>
60 <div class="code-name">&amp;#xe615;</div> 72 <div class="code-name">&amp;#xe615;</div>
@@ -588,9 +600,9 @@ @@ -588,9 +600,9 @@
588 <pre><code class="language-css" 600 <pre><code class="language-css"
589 >@font-face { 601 >@font-face {
590 font-family: 'iconfont'; 602 font-family: 'iconfont';
591 - src: url('iconfont.woff2?t=1636448687987') format('woff2'),  
592 - url('iconfont.woff?t=1636448687987') format('woff'),  
593 - url('iconfont.ttf?t=1636448687987') format('truetype'); 603 + src: url('iconfont.woff2?t=1637581076852') format('woff2'),
  604 + url('iconfont.woff?t=1637581076852') format('woff'),
  605 + url('iconfont.ttf?t=1637581076852') format('truetype');
594 } 606 }
595 </code></pre> 607 </code></pre>
596 <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> 608 <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -617,6 +629,24 @@ @@ -617,6 +629,24 @@
617 <ul class="icon_lists dib-box"> 629 <ul class="icon_lists dib-box">
618 630
619 <li class="dib"> 631 <li class="dib">
  632 + <span class="icon iconfont icon-database"></span>
  633 + <div class="name">
  634 + 数据库,数据
  635 + </div>
  636 + <div class="code-name">.icon-database
  637 + </div>
  638 + </li>
  639 +
  640 + <li class="dib">
  641 + <span class="icon iconfont icon-OPCtiaobanjiquanxianshenqing"></span>
  642 + <div class="name">
  643 + OPC跳板机权限申请
  644 + </div>
  645 + <div class="code-name">.icon-OPCtiaobanjiquanxianshenqing
  646 + </div>
  647 + </li>
  648 +
  649 + <li class="dib">
620 <span class="icon iconfont icon-assets"></span> 650 <span class="icon iconfont icon-assets"></span>
621 <div class="name"> 651 <div class="name">
622 资产 652 资产
@@ -1419,6 +1449,22 @@ @@ -1419,6 +1449,22 @@
1419 1449
1420 <li class="dib"> 1450 <li class="dib">
1421 <svg class="icon svg-icon" aria-hidden="true"> 1451 <svg class="icon svg-icon" aria-hidden="true">
  1452 + <use xlink:href="#icon-database"></use>
  1453 + </svg>
  1454 + <div class="name">数据库,数据</div>
  1455 + <div class="code-name">#icon-database</div>
  1456 + </li>
  1457 +
  1458 + <li class="dib">
  1459 + <svg class="icon svg-icon" aria-hidden="true">
  1460 + <use xlink:href="#icon-OPCtiaobanjiquanxianshenqing"></use>
  1461 + </svg>
  1462 + <div class="name">OPC跳板机权限申请</div>
  1463 + <div class="code-name">#icon-OPCtiaobanjiquanxianshenqing</div>
  1464 + </li>
  1465 +
  1466 + <li class="dib">
  1467 + <svg class="icon svg-icon" aria-hidden="true">
1422 <use xlink:href="#icon-assets"></use> 1468 <use xlink:href="#icon-assets"></use>
1423 </svg> 1469 </svg>
1424 <div class="name">资产</div> 1470 <div class="name">资产</div>
1 @font-face { 1 @font-face {
2 font-family: "iconfont"; /* Project id 2843738 */ 2 font-family: "iconfont"; /* Project id 2843738 */
3 - src: url('iconfont.woff2?t=1636448687987') format('woff2'),  
4 - url('iconfont.woff?t=1636448687987') format('woff'),  
5 - url('iconfont.ttf?t=1636448687987') format('truetype'); 3 + src: url('iconfont.woff2?t=1637581076852') format('woff2'),
  4 + url('iconfont.woff?t=1637581076852') format('woff'),
  5 + url('iconfont.ttf?t=1637581076852') format('truetype');
6 } 6 }
7 7
8 .iconfont { 8 .iconfont {
@@ -13,6 +13,14 @@ @@ -13,6 +13,14 @@
13 -moz-osx-font-smoothing: grayscale; 13 -moz-osx-font-smoothing: grayscale;
14 } 14 }
15 15
  16 +.icon-database:before {
  17 + content: "\e940";
  18 +}
  19 +
  20 +.icon-OPCtiaobanjiquanxianshenqing:before {
  21 + content: "\e620";
  22 +}
  23 +
16 .icon-assets:before { 24 .icon-assets:before {
17 content: "\e615"; 25 content: "\e615";
18 } 26 }
@@ -6,6 +6,20 @@ @@ -6,6 +6,20 @@
6 "description": "", 6 "description": "",
7 "glyphs": [ 7 "glyphs": [
8 { 8 {
  9 + "icon_id": "18169761",
  10 + "name": "数据库,数据",
  11 + "font_class": "database",
  12 + "unicode": "e940",
  13 + "unicode_decimal": 59712
  14 + },
  15 + {
  16 + "icon_id": "25651056",
  17 + "name": "OPC跳板机权限申请",
  18 + "font_class": "OPCtiaobanjiquanxianshenqing",
  19 + "unicode": "e620",
  20 + "unicode_decimal": 58912
  21 + },
  22 + {
9 "icon_id": "1369418", 23 "icon_id": "1369418",
10 "name": "资产", 24 "name": "资产",
11 "font_class": "assets", 25 "font_class": "assets",
@@ -810,6 +810,10 @@ @@ -810,6 +810,10 @@
810 <button type="button" class="layui-btn layui-bg-red layui-btn-radius layui-btn-xs p-0-15 cant-click"> 810 <button type="button" class="layui-btn layui-bg-red layui-btn-radius layui-btn-xs p-0-15 cant-click">
811 断开连接 811 断开连接
812 </button> 812 </button>
  813 + {{# }else if(d.hostState != null && d.hostState == '正常'){ }}
  814 + <button type="button" class="layui-btn layui-bg-green layui-btn-radius layui-btn-xs p-0-15 cant-click">
  815 + 正常
  816 + </button>
813 {{# }else{ }} 817 {{# }else{ }}
814 <button type="button" 818 <button type="button"
815 class="layui-btn layui-btn-radius layui-bg-gray layui-btn-xs p-0-15 cant-click">{{ 819 class="layui-btn layui-btn-radius layui-bg-gray layui-btn-xs p-0-15 cant-click">{{
@@ -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";
@@ -124,7 +124,7 @@ @@ -124,7 +124,7 @@
124 position: absolute; 124 position: absolute;
125 -webkit-box-sizing: border-box; 125 -webkit-box-sizing: border-box;
126 box-sizing: border-box; 126 box-sizing: border-box;
127 - margin-top: 8px; 127 + margin-top: 10px;
128 color: #3d96de; 128 color: #3d96de;
129 padding-top: 6px; 129 padding-top: 6px;
130 130
@@ -138,34 +138,48 @@ @@ -138,34 +138,48 @@
138 .yxqk .items li.list-2{ 138 .yxqk .items li.list-2{
139 background-image: url('/vue3/src/assets/images/zjdp/bg-li-r-3.png'); 139 background-image: url('/vue3/src/assets/images/zjdp/bg-li-r-3.png');
140 } 140 }
  141 +.yxqk .items li.list-3{
  142 + background-image: url('/vue3/src/assets/images/zjdp/bg-li-r-4.png');
  143 +}
141 .yxqk .items li.list-4{ 144 .yxqk .items li.list-4{
142 - background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-2.png'); 145 + background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-1.png');
143 } 146 }
144 .yxqk .items li.list-5{ 147 .yxqk .items li.list-5{
  148 + background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-2.png');
  149 +}
  150 +.yxqk .items li.list-6{
145 background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-3.png'); 151 background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-3.png');
146 } 152 }
147 -.yxqk .items li.list-0,.yxqk .items li.list-1,.yxqk .items li.list-2{ 153 +.yxqk .items li.list-7{
  154 + background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-4.png');
  155 +}
  156 +.yxqk .items li.list-0,.yxqk .items li.list-1,.yxqk .items li.list-2,.yxqk .items li.list-3{
148 right:0; 157 right:0;
149 } 158 }
150 -.yxqk .items li.list-3,.yxqk .items li.list-4,.yxqk .items li.list-5{ 159 +.yxqk .items li.list-4,.yxqk .items li.list-5,.yxqk .items li.list-6,.yxqk .items li.list-7{
151 left:0; 160 left:0;
152 } 161 }
153 -.yxqk .items li.list-0,.yxqk .items li.list-3{  
154 - top:15px; 162 +.yxqk .items li.list-0,.yxqk .items li.list-4{
  163 + top:12px;
  164 + width:37%;
  165 +}
  166 +.yxqk .items li.list-1,.yxqk .items li.list-5{
  167 + top:63px;
155 } 168 }
156 -.yxqk .items li.list-1,.yxqk .items li.list-4{  
157 - top:70px; 169 +.yxqk .items li.list-2,.yxqk .items li.list-6{
  170 + top:113px;
158 } 171 }
159 -.yxqk .items li.list-2,.yxqk .items li.list-5{  
160 - top:126px; 172 +.yxqk .items li.list-3,.yxqk .items li.list-7{
  173 + top:164px;
  174 + width: 37%;
161 } 175 }
162 -.yxqk .items li.list-0 img,.yxqk .items li.list-1 img,.yxqk .items li.list-2 img{ 176 +.yxqk .items li.list-0 img,.yxqk .items li.list-1 img,.yxqk .items li.list-2 img,.yxqk .items li.list-3 img{
163 left:20px; 177 left:20px;
164 } 178 }
165 -.yxqk .items li.list-0 p,.yxqk .items li.list-1 p,.yxqk .items li.list-2 p{ 179 +.yxqk .items li.list-0 p,.yxqk .items li.list-1 p,.yxqk .items li.list-2 p,.yxqk .items li.list-3 p{
166 left:49px; 180 left:49px;
167 } 181 }
168 -.yxqk .items li.list-3 .listNum,.yxqk .items li.list-4 .listNum,.yxqk .items li.list-5 .listNum{ 182 +.yxqk .items li.list-4 .listNum,.yxqk .items li.list-5 .listNum,.yxqk .items li.list-6 .listNum,.yxqk .items li.list-7 .listNum{
169 right:20px; 183 right:20px;
170 } 184 }
171 .yxqk .items li p{ 185 .yxqk .items li p{
  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-all-30{
  15 + margin:30px
  16 +}
  17 +.margin-top{
  18 + margin-top:30px;
  19 +}
1 .fault-book-input{ 20 .fault-book-input{
2 width: 75%; 21 width: 75%;
3 text-align: center; 22 text-align: center;
4 padding: 1.5%; 23 padding: 1.5%;
5 } 24 }
6 - 25 +.context-radio{
  26 + margin-bottom: 15px;
  27 +}
7 .fault-book-input-text{ 28 .fault-book-input-text{
8 - width: 25%;  
9 - text-align: center;  
10 - margin-right: 3%; 29 + /* width: 25%;
  30 + text-align: center;*/
  31 + margin-right: 27px;
  32 +}
  33 +.fault-card{
  34 + background: #fff;
  35 + /*margin: 0 30px;*/
11 } 36 }
  37 +.fault-card .el-card{
  38 + border:none;
12 39
  40 +}
  41 +.fault-card .el-card.is-hover-shadow:focus, .fault-card .el-card.is-hover-shadow:hover{
  42 + box-shadow: none;
  43 +}
13 .fault-book-title-card{ 44 .fault-book-title-card{
14 - margin: 1%;  
15 - padding-left: 2%; 45 + margin: 1% 0;
  46 + padding: 0 1%;
  47 +
  48 +}
  49 +.fault-book-title-card-text {
  50 + position: relative;
  51 +}
  52 +.fault-book-title-card-text:after{
  53 + border-right:2px solid #3a92fc;
  54 + content: "";
  55 + display: block;
  56 + height:20px;
  57 + position: absolute;
  58 + top:16px;
  59 + right:0;
  60 +}
  61 +.fault-book-title-card-text .el-card__body{
  62 + padding:15px;
16 } 63 }
17 64
  65 +
  66 +.fault-book-title-card-text.isActive .el-card__body{
  67 + border-bottom: 2px solid #3a92fc;
  68 + display:inline-block;
  69 +}
18 .fault-book-title-card-text{ 70 .fault-book-title-card-text{
19 color: #3A92FC; 71 color: #3A92FC;
  72 + cursor: pointer;
  73 + border: none;
  74 + border-radius: 0;
20 } 75 }
21 76
22 #faultDiagnosisIndex{ 77 #faultDiagnosisIndex{
@@ -33,84 +88,99 @@ @@ -33,84 +88,99 @@
33 } 88 }
34 89
35 .title-img{ 90 .title-img{
36 - position: absolute;  
37 - left: 5%;  
38 - width: 0.8%;  
39 - top: 19.5%; 91 +
  92 + margin-right: 10px;
40 } 93 }
41 94
42 .title-text{ 95 .title-text{
43 - position: absolute;  
44 - left: 7%;  
45 - font-size: 18px;  
46 - top: 19%; 96 + display: flex;
  97 + align-items: center;
  98 + justify-content: flex-start;
  99 + margin: 10px 0;
  100 +}
  101 +.flex-div{
  102 + display: flex;
  103 + align-items: center;
  104 +}
  105 +.flex-div-start{
  106 + display: flex;
  107 + align-items: center;
  108 + justify-content: flex-start;
47 } 109 }
48 -  
49 .fault-definition .fault-definition-radio{ 110 .fault-definition .fault-definition-radio{
50 - position: absolute;  
51 - left: 7%;  
52 - top: 22%;  
53 - width: 5%; 111 + margin-left: 30px;
  112 + margin-bottom: 15px;
54 } 113 }
55 114
56 .fault-definition .fault-definition-select-up{ 115 .fault-definition .fault-definition-select-up{
57 - position: absolute;  
58 - top: 22%;  
59 - left: 20%; 116 + display: flex;
  117 + align-items: center;
  118 + color: #666;
  119 + margin-bottom: 15px;
  120 +}
  121 +.fault-definition .el-select{
  122 + margin:0 10px;
  123 +}
  124 +.margin-right-10{
  125 + margin-right:10px;
60 } 126 }
61 -  
62 .fault-definition .fault-definition-select-down{ 127 .fault-definition .fault-definition-select-down{
63 - position: absolute;  
64 - top: 27%;  
65 - left: 20%; 128 + display: flex;
  129 + align-items: center;
  130 + color: #666;
66 } 131 }
67 132
68 .network-monitor .context-radio{ 133 .network-monitor .context-radio{
69 - position: absolute; 134 + /* position: absolute;
70 left: 2.7%; 135 left: 2.7%;
71 top: 22%; 136 top: 22%;
72 - width: 20%; 137 + width: 20%;*/
  138 + display: flex;
  139 + align-items: center;
  140 + justify-content: flex-start;
  141 + margin-bottom: 15px;
73 } 142 }
74 143
75 .application-monitor .context-radio{ 144 .application-monitor .context-radio{
76 - position: absolute; 145 + /* position: absolute;
77 left: 2.7%; 146 left: 2.7%;
78 top: 22%; 147 top: 22%;
79 - width: 20%; 148 + width: 20%;*/
  149 + margin-bottom: 15px;
80 } 150 }
81 151
82 .apm-monitor .context-radio{ 152 .apm-monitor .context-radio{
83 - position: absolute; 153 + /*position: absolute;
84 left: 2.7%; 154 left: 2.7%;
85 top: 22%; 155 top: 22%;
86 - width: 20%; 156 + width: 20%;*/
87 } 157 }
88 158
89 .log-detection .context-radio{ 159 .log-detection .context-radio{
90 - position: absolute; 160 + /* position: absolute;
91 left: 2.7%; 161 left: 2.7%;
92 top: 22%; 162 top: 22%;
93 - width: 20%; 163 + width: 20%;*/
94 } 164 }
95 165
96 .basic-environment .context-radio{ 166 .basic-environment .context-radio{
97 - position: absolute; 167 + /*position: absolute;
98 left: 2.7%; 168 left: 2.7%;
99 top: 22%; 169 top: 22%;
100 - width: 20%; 170 + width: 20%;*/
101 } 171 }
102 172
103 .basic-environment .context-select{ 173 .basic-environment .context-select{
104 - position: absolute; 174 + /*position: absolute;
105 width: 40%; 175 width: 40%;
106 top: 28%; 176 top: 28%;
107 - left: 0.8%; 177 + left: 0.8%;*/
108 } 178 }
109 179
110 .context-multiple-choice{ 180 .context-multiple-choice{
111 - position: absolute; 181 + /* position: absolute;
112 left: 7%; 182 left: 7%;
113 - top: 27%; 183 + top: 27%;*/
114 } 184 }
115 185
116 .multiple-choice-icon{ 186 .multiple-choice-icon{
@@ -118,7 +188,9 @@ @@ -118,7 +188,9 @@
118 top: 28.5%; 188 top: 28.5%;
119 right: 18px; 189 right: 18px;
120 } 190 }
121 - 191 +.color-999{
  192 + color:#999;
  193 +}
122 .multiple-choice-button{ 194 .multiple-choice-button{
123 min-width: 140px; 195 min-width: 140px;
124 } 196 }
@@ -136,6 +208,7 @@ @@ -136,6 +208,7 @@
136 .network-monitor-popup-left{ 208 .network-monitor-popup-left{
137 background-color: #3B92FC; 209 background-color: #3B92FC;
138 padding-bottom: 3%; 210 padding-bottom: 3%;
  211 + min-height: 500px;
139 } 212 }
140 213
141 .network-monitor-popup{ 214 .network-monitor-popup{
@@ -153,12 +226,10 @@ @@ -153,12 +226,10 @@
153 } 226 }
154 227
155 .network-monitor-popup .multiple-choice-button{ 228 .network-monitor-popup .multiple-choice-button{
156 - width: 100%; 229 +
157 color: #C7DBFE; 230 color: #C7DBFE;
158 font-size: 18px; 231 font-size: 18px;
159 - margin-top: 15px;  
160 - padding-top: 10px;  
161 - height: 10%; 232 +
162 } 233 }
163 234
164 .network-monitor-popup-right .context-head{ 235 .network-monitor-popup-right .context-head{
@@ -166,4 +237,146 @@ @@ -166,4 +237,146 @@
166 font-size: 18px; 237 font-size: 18px;
167 text-align: left; 238 text-align: left;
168 margin-left: 4%; 239 margin-left: 4%;
  240 + display: flex;
  241 + justify-content: space-between;
  242 + align-items: center;
  243 +}
  244 +.environment-table th{
  245 + color:#3B91FF;
  246 +}
  247 +.list-data{
  248 + display: flex;
  249 + align-items: center;
  250 +}
  251 +.img-delete{
  252 + width:12px;
  253 + height:12px;
  254 + margin-left: 6px;
  255 +}
  256 +.environment-table table{
  257 + /*border-color: #666666;*/
  258 +}
  259 +
  260 +.environment-table th:nth-child(2) ,.environment-table td:nth-child(2){
  261 + padding-left: 30px;
  262 +}
  263 +.environment-table th,.environment-table td,.environment-table th.el-table__cell,.environment-table table tbody td{
  264 + background-color:#F4F5FA;
  265 + /*border-color: #666666;*/
  266 +}
  267 +.environment-table .el-table td.el-table__cell, .environment-table .el-table th.el-table__cell.is-leaf{
  268 + /*border-bottom-color: #666;*/
  269 + /*border-right-color: #666;*/
  270 +
  271 +}
  272 +.list-step{
  273 + flex-flow: column;
  274 + align-items: flex-start;
  275 +}
  276 +.list-step-name{
  277 + margin-left: 10px;
  278 + margin-top: 10px;
  279 + color:#999999;
  280 +}
  281 +.list-step-name.isActive{
  282 + color:#3B91FF;
  283 +
  284 +}
  285 +.step-img{
  286 + background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-add.png");
  287 + width: 50px;
  288 + height:50px;
  289 + background-size: contain;
  290 + background-position: center;
  291 + background-repeat: no-repeat;
  292 + cursor: pointer;
  293 +}
  294 +.step-img.isActive{
  295 + background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-circle.png");
  296 +
  297 +}
  298 +.list-line{
  299 + display: inline-block;
  300 + width: 84px;
  301 + border-top:5px solid #cccccc;
  302 +}
  303 +.list-line.isActive{
  304 + border-top-color:#3B91FF;
  305 +}
  306 +.context-body{
  307 +
  308 + margin: 15% 0 5% 4%;
  309 +}
  310 +.popup-bg .el-dialog__header{
  311 + background-color: #3B91FF;
  312 +}
  313 +.popup-bg .el-dialog__title{
  314 + color:#FFFFFF;
  315 +
  316 +}
  317 +.popup-bg .el-dialog__headerbtn .el-dialog__close{
  318 + color:#ffffff;
  319 +}
  320 +.popup-bg .el-dialog__body{
  321 + padding:10px;
  322 +}
  323 +.popup-bg .el-dialog{
  324 + min-height: 600px;
  325 +}
  326 +.flex-div-center{
  327 + display: flex;
  328 + align-items: center;
  329 + justify-content: center;
  330 +}
  331 +.list-net{
  332 + padding:20px 10px 20px 0;
  333 + margin:10px 0 10px 10px;
  334 + cursor: pointer;
  335 +
  336 +}
  337 +.list-net.isActive{
  338 + background-color: #FFFFFF;
  339 +}
  340 +.network-monitor-popup .list-net.isActive .multiple-choice-button{
  341 + color:#3B91FF;
  342 +
  343 +}
  344 +.margin-left-30{
  345 + margin-left:30px;
  346 +}
  347 +
  348 +.faultAddIndex{
  349 + background-color: #F4F5FA;
  350 + height:100%;
  351 + padding-top: 20px;
  352 +}
  353 +.faultAddIndex-img{
  354 + width: 40%;
  355 + margin: 20px auto;
  356 + border: 1px dashed #3B91FF;
  357 + padding:30px;
  358 +}
  359 +.faultAddIndex-img span{
  360 + color:#3B91FF;
  361 + margin-top:30px;
  362 +}
  363 +.flex-clum{
  364 + display: flex;
  365 + flex-flow: column;
  366 + align-items: center;
  367 + justify-content: center;
  368 +}
  369 +.search-text{
  370 + color:#FFFFFF;
  371 + background-color: #3B91FF;
  372 + width:90px;
  373 + padding:9px 5px;
  374 +}
  375 +.doc-name{
  376 + color:#666666;
  377 + margin-top:10px;
  378 + font-size: 12px;
  379 +}
  380 +.doc-list,.doc-list-add{
  381 + cursor: pointer;
169 } 382 }
  1 +.faultForm{
  2 + background-color: #F4F5FA;
  3 + height: 100%;
  4 + padding:30px 20px;
  5 +}
  6 +.btn-search{
  7 + margin-left: 20px;
  8 +}
  9 +.faultForm-table .el-table th.el-table__cell{
  10 + background-color: #d3f1fc;
  11 + color:#3B91FF;
  12 +}
  13 +.handleBtn{
  14 + color:#6667ff;
  15 + cursor: pointer;
  16 +}
  17 +.dialog-fault .el-form-item__label{
  18 + color:#3B91FF;
  19 +}
  20 +.div-fault .el-form-item__content{
  21 + text-align: left;
  22 +}
  23 +.diagnosisDoc-content{
  24 + margin:30px 40px;
  25 + position: relative;
  26 +}
  27 +.diagnosisBtn{
  28 + color:#ff7979;
  29 + cursor: pointer;
  30 +}
  31 +.step-img-dia{
  32 + width: 50px;
  33 + height:50px;
  34 + border-radius: 50%;
  35 + background-color:#1bdf71;
  36 +}
  37 +.list-line-dia{
  38 + width: 84px;
  39 + border-top:5px solid #1bdf71;
  40 +}
  41 +.step-img-yellow{
  42 + background-color:#fea500;
  43 +
  44 +}
  45 +.list-line-dia-yellow{
  46 + border-top-color: #fea500;
  47 +}
  48 +.step-img-red{
  49 + background-color:#fe0000;
  50 +}
  51 +.list-line-dia-red{
  52 + border-top-color: #fe0000;
  53 +}
  54 +
  55 +.diagnosisDoc-content .list-stet-net:last-child .list-line-dia{
  56 + display: none;
  57 +}
  58 +.progress-con{
  59 + width:80%;
  60 + margin:0 20px;
  61 +}
  62 +.program-text{
  63 + color:#666666;
  64 + margin-bottom: 15px;
  65 +}
  66 +.color-yellow{
  67 + color:#fea500;
  68 +}
  69 +.color-green{
  70 + color:#1bdf71;
  71 +}
  72 +.progress-div .el-progress-bar__outer{
  73 + background-color: #fea500;
  74 +}
  75 +.margin-left{
  76 + margin-left:10px;
  77 +}
  78 +.program-table{
  79 + border:1px solid #ccc;
  80 + margin-top:20px;
  81 +}
  82 +.width-20{
  83 + width:20%;
  84 +}
  85 +.text-color{
  86 + color:#3B91FF;
  87 +}
  88 +.program-td{
  89 + border-right: 1px solid #ccc;
  90 + border-bottom: 1px solid #ccc;
  91 +}
  92 +.program-padding{
  93 + padding:16px 20px;
  94 +
  95 +}
  96 +.flex-1-width{
  97 + flex:1;
  98 +}
  99 +.program-td-text{
  100 + padding: 15px 30px;
  101 + color: #fff;
  102 + margin-right:3px;
  103 + background: #1bdf71;
  104 +
  105 +}
  106 +.program-td-text-green{
  107 + background: #1bdf71;
  108 +
  109 +}
  110 +.program-td-text-yellow{
  111 + background: #fea500;
  112 +
  113 +}
  114 +.program-td-text-red{
  115 + background: #fe0000;
  116 +}
  117 +.program-tr:last-child .program-td{
  118 + border-bottom:none;
  119 +}
  120 +.program-tr .program-td:last-child{
  121 + border-right:none;
  122 +}
  123 +.margin-left-30{
  124 + margin-left: 30px;
  125 +}
  126 +.program-div{
  127 + border:1px solid #ccc;
  128 + padding:15px ;
  129 + flex:1;
  130 +}
  131 +.margin-top-bottom-30{
  132 + margin:30px 0;
  133 +}
  134 +.margin-top-bottom-10{
  135 + margin:10px 0;
  136 +
  137 +}
  138 +.export-div{
  139 + position: absolute;
  140 + right:0;
  141 + top:0;
  142 +}
@@ -15,9 +15,11 @@ @@ -15,9 +15,11 @@
15 </div> 15 </div>
16 </el-col> 16 </el-col>
17 <el-col :span="20" style="text-align: right;padding-right: 10px"> 17 <el-col :span="20" style="text-align: right;padding-right: 10px">
  18 + <div style="display: flex;padding-left: calc(100% - 430px);">
18 <slot name="timeRange"></slot> 19 <slot name="timeRange"></slot>
19 <slot name="frequency"></slot> 20 <slot name="frequency"></slot>
20 <slot name="tools"></slot> 21 <slot name="tools"></slot>
  22 + </div>
21 </el-col> 23 </el-col>
22 </el-row> 24 </el-row>
23 25
@@ -193,8 +193,7 @@ @@ -193,8 +193,7 @@
193 <el-row :gutter="5" > 193 <el-row :gutter="5" >
194 <el-col :span="8" v-for="item in btnType.data"> 194 <el-col :span="8" v-for="item in btnType.data">
195 <el-form-item :label="item.name" :prop="item.name" class="form-class"> 195 <el-form-item :label="item.name" :prop="item.name" class="form-class">
196 - <el-input v-if="item.extend && item.extend.dict == undefined" v-model="item.value"></el-input>  
197 - 196 + <el-input v-if="item.extend == null || item.extend.dict == undefined" v-model="item.value"></el-input>
198 <el-select v-else v-model="item.value" :placeholder="`请选择${item.name}`"> 197 <el-select v-else v-model="item.value" :placeholder="`请选择${item.name}`">
199 <el-option 198 <el-option
200 v-for="item in item.extend.dict" 199 v-for="item in item.extend.dict"
@@ -12,13 +12,16 @@ const assets = (props, {attrs, slots, emit}) => { @@ -12,13 +12,16 @@ const assets = (props, {attrs, slots, emit}) => {
12 12
13 //查询资产类型列表 13 //查询资产类型列表
14 let getAssetType = () => { 14 let getAssetType = () => {
  15 + if(Object.keys(icon.value).length > 0){
  16 + return;
  17 + }
15 proxy.$http.post(`/api-web/manage/ddic/findSucDdics/OPS_SECOND_PROPERTY`, {}, function (res) { 18 proxy.$http.post(`/api-web/manage/ddic/findSucDdics/OPS_SECOND_PROPERTY`, {}, function (res) {
16 if (res && res.data.length > 0) { 19 if (res && res.data.length > 0) {
17 icon.value = {}; 20 icon.value = {};
18 res.data.forEach(function(item, index, arr){ 21 res.data.forEach(function(item, index, arr){
19 let code = item.ddicCode; 22 let code = item.ddicCode;
20 let obj = {}; 23 let obj = {};
21 - code = code.substring(code.lastIndexOf("_") + 1, code.length).toLowerCase(); 24 + // code = code.substring(code.lastIndexOf("_") + 1, code.length).toLowerCase();
22 obj.name=item.ddicName; 25 obj.name=item.ddicName;
23 obj.icon=item.ddicDesc; 26 obj.icon=item.ddicDesc;
24 icon.value[code] =obj; 27 icon.value[code] =obj;
@@ -117,13 +117,29 @@ const routes = [{ @@ -117,13 +117,29 @@ const routes = [{
117 }, 117 },
118 { 118 {
119 path: '/analysis/view', 119 path: '/analysis/view',
120 - name: 'view', 120 + name: 'analysisView',
121 component: () => myImport('views/analysis/view/index') 121 component: () => myImport('views/analysis/view/index')
122 }, 122 },
123 { 123 {
124 path: '/fault/index', 124 path: '/fault/index',
125 - name: 'view',  
126 - component: () => myImport('views/faultDiagnosis/index') 125 + name: 'faultIndex',
  126 + // component: () => myImport('views/faultDiagnosis/index')
  127 + component: () => myImport('views/faultDiagnosis/components/faultForm/index')
  128 + },
  129 + {
  130 + path: '/fault/faultForm',
  131 + name: 'faultForm',
  132 + component: () => myImport('views/faultDiagnosis/components/faultForm/index')
  133 + },
  134 + {
  135 + path: '/fault/faultAddIndex',
  136 + name: 'faultAddIndex',
  137 + component: () => myImport('views/faultDiagnosis/components/faultAddIndex/index')
  138 + },
  139 + {
  140 + path: '/fault/diagnosisDoc',
  141 + name: 'diagnosisDoc',
  142 + component: () => myImport('views/faultDiagnosis/components/diagnosisDoc/index')
127 } 143 }
128 ]; 144 ];
129 145
@@ -273,7 +273,12 @@ export default { @@ -273,7 +273,12 @@ export default {
273 273
274 let getChartData = () => { 274 let getChartData = () => {
275 275
276 - let timeScope = form.value.scene.timeScope.replaceAll("time_scope_", "") 276 + let timeScope = '';
  277 + try {
  278 + timeScope = form.value.scene.timeScope.replaceAll("time_scope_", "")
  279 + }catch (e) {
  280 + timeScope = form.value.scene.timeScope.replace("time_scope_", "")
  281 + }
277 if (timeScope == '') { 282 if (timeScope == '') {
278 proxy.$global.showMsg("请选择时间范围！", "warning"); 283 proxy.$global.showMsg("请选择时间范围！", "warning");
279 return; 284 return;
@@ -7,7 +7,6 @@ @@ -7,7 +7,6 @@
7 <div class="analysis-index-container" style="display: grid;"> 7 <div class="analysis-index-container" style="display: grid;">
8 <img src="/vue3/src/assets/images/analysis/icon-add.png" style="margin-left: 20px;"></img> 8 <img src="/vue3/src/assets/images/analysis/icon-add.png" style="margin-left: 20px;"></img>
9 <span style="text-align: center;line-height: 50px;color: #0C4493">点击添加对比分析</span> 9 <span style="text-align: center;line-height: 50px;color: #0C4493">点击添加对比分析</span>
10 -  
11 </div> 10 </div>
12 </router-link> 11 </router-link>
13 12
@@ -10,14 +10,18 @@ @@ -10,14 +10,18 @@
10 </template> 10 </template>
11 11
12 <template #timeRange="scope"> 12 <template #timeRange="scope">
  13 + <div style="margin-left: 10px">
13 {{ item.node.timeScope }} 14 {{ item.node.timeScope }}
  15 + </div>
14 </template> 16 </template>
15 <template #frequency="scope"> 17 <template #frequency="scope">
  18 + <div style="margin-left: 10px">
16 {{ item.node.frequency }} 19 {{ item.node.frequency }}
  20 + </div>
17 </template> 21 </template>
18 22
19 <template #tools="scope"> 23 <template #tools="scope">
20 - <router-link :to="'/analysis/add?configId=' + item.node.id " class="analysis link-type"> 24 + <router-link :to="'/analysis/add?configId=' + item.node.id " class="analysis link-type" style="margin-left: 10px">
21 编辑 25 编辑
22 </router-link> 26 </router-link>
23 </template> 27 </template>
  1 +<div class="faultAddIndex diagnosisDoc">
  2 + <el-row>
  3 + <el-col :span="6">
  4 + <div class="search-input margin-30 flex-div-start">
  5 + <el-input v-model="input" placeholder="故障诊断" />
  6 + <span class="search-text">搜索</span>
  7 + </div>
  8 +
  9 + </el-col>
  10 + </el-row>
  11 + <el-row class="margin-all-30">
  12 + <el-col :span="3" v-for="item in 2">
  13 + <div class="doc-list flex-clum">
  14 + <img src="./src/assets/images/faultDiagnosis/icon-doc.png" alt="">
  15 + <span class="doc-name">电子税务局可用性诊断</span>
  16 + </div>
  17 + </el-col>
  18 + <el-col :span="3">
  19 + <div class="doc-list-add" @click="addDiagnosisDoc">
  20 + <img src="./src/assets/images/faultDiagnosis/icon-add.png" alt="">
  21 + </div>
  22 + </el-col>
  23 + </el-row>
  24 +</div>
  1 +export default {
  2 + name: 'diagnosisDoc',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 +
  8 + }
  9 + },
  10 + setup(){
  11 + const {proxy} = Vue.getCurrentInstance();
  12 +
  13 + },
  14 + computed: {},
  15 + methods: {
  16 + //添加
  17 + addDiagnosisDoc(){}
  18 + },
  19 + mounted () {
  20 +
  21 + },
  22 + unmounted () {}
  23 +
  24 +}
  1 +<div class="faultAddIndex">
  2 + <div class="faultAddIndex-img flex-clum" @click="addFault">
  3 + <img src="./src/assets/images/faultDiagnosis/icon-add.png" alt="">
  4 + <span>点击添加故障诊断配置</span>
  5 + </div>
  6 +</div>
  1 +export default {
  2 + name: 'faultAddIndex',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 +
  8 + }
  9 + },
  10 + setup(){
  11 + const {proxy} = Vue.getCurrentInstance();
  12 +
  13 + },
  14 + computed: {},
  15 + methods: {
  16 + //添加
  17 + addFault(){}
  18 + },
  19 + mounted () {
  20 +
  21 + },
  22 + unmounted () {}
  23 +
  24 +}
  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-col :span="24">
  26 + <div class="faultForm-table margin-top flex-div-start margin-30">
  27 + <el-table :data="faultFormTableData" border height="250" style="width: 100%">
  28 + <el-table-column align="center" type="index" prop="index" label="序号" width="80" />
  29 + <el-table-column align="center" prop="categories" label="故障分类" 个 />
  30 + <el-table-column align="center" prop="faultBody" label="故障主体" 个 >
  31 + <template #default="scope">
  32 + <div class="diagnosisBtn">
  33 + <span @click="handleDiagnosis(scope.row)" class="list-data-text">{{ scope.row.faultBody}}</span>
  34 + </div>
  35 + </template>
  36 + </el-table-column>
  37 + <el-table-column align="center" prop="startTime" label="发生时间" 个 />
  38 + <el-table-column align="center" prop="state" label="故障状态" 个 />
  39 + <el-table-column align="center" prop="mode" label="处理方式" 个 />
  40 + <el-table-column align="center" prop="handleTime" label="处理时间" 个 />
  41 + <el-table-column align="center" prop="handlePeople" label="处理人" 个 />
  42 + <el-table-column align="center" prop="duration" label="持续时长" 个 />
  43 + <el-table-column align="center" prop="range" label="影响范围" 个 />
  44 + <el-table-column align="center" prop="categories" label="操作" 个 >
  45 + <template #default="scope">
  46 + <div class="handleBtn">
  47 + <span @click="handleFault(scope.row)" class="list-data-text">处理{{ scope.row.categories }}</span>
  48 + </div>
  49 + </template>
  50 + </el-table-column>
  51 + </el-table>
  52 + </div>
  53 + </el-col>
  54 + </el-row>
  55 + <!--处理故障弹框-->
  56 + <div class="dialog-fault popup-bg">
  57 + <el-dialog v-model="faultDiagnosisVisible" title="故障处理内容" width="60%">
  58 + <el-form ref="faultHandleForm" :model="faultHandleForm" label-width="120px">
  59 + <el-row>
  60 + <el-col :span="12">
  61 + <el-form-item label="故障分类">
  62 + <el-input v-model="faultHandleForm.categories"></el-input>
  63 + </el-form-item>
  64 + <el-form-item label="当前状态">
  65 + <el-input v-model="faultHandleForm.state"></el-input>
  66 + </el-form-item>
  67 + <el-form-item label="故障主体">
  68 + <el-input v-model="faultHandleForm.faultBody"></el-input>
  69 + </el-form-item>
  70 + <el-form-item class="flex-div-start div-fault " label="处理结果">
  71 + <el-radio-group v-model="faultHandleForm.state">
  72 + <el-radio label="未解决"></el-radio>
  73 + <el-radio label="已解决"></el-radio>
  74 + </el-radio-group>
  75 + </el-form-item>
  76 + </el-col>
  77 + <el-col :span="12">
  78 + <el-form-item label="发生时间">
  79 + <el-input v-model="faultHandleForm.startTime"></el-input>
  80 + </el-form-item>
  81 + <el-form-item label="持续时长">
  82 + <el-input v-model="faultHandleForm.duration"></el-input>
  83 + </el-form-item>
  84 + <el-form-item label="影响范围">
  85 + <el-input v-model="faultHandleForm.range"></el-input>
  86 + </el-form-item>
  87 + <el-form-item label="处理时间">
  88 + <el-input v-model="faultHandleForm.handleTime"></el-input>
  89 + </el-form-item>
  90 + </el-col>
  91 + </el-row>
  92 + <el-row>
  93 + <el-col :span="24">
  94 + <el-form-item label="原因分析">
  95 + <el-input :rows="4" v-model="faultHandleForm.desc" type="textarea"></el-input>
  96 + </el-form-item>
  97 + </el-col>
  98 +
  99 + </el-row>
  100 + <el-row>
  101 + <el-col :span="24">
  102 + <el-form-item label="处理方案">
  103 + <el-input :rows="4" v-model="faultHandleForm.programme" type="textarea"></el-input>
  104 + </el-form-item>
  105 + </el-col>
  106 + </el-row>
  107 + <el-row>
  108 + <el-col :span="24">
  109 + <div class="btn-faultDiagnosis">
  110 + <el-button>取消</el-button>
  111 + <el-button type="primary" @click="onSubmit">保存</el-button>
  112 + </div>
  113 + </el-col>
  114 + </el-row>
  115 + </el-form>
  116 +
  117 + </el-dialog>
  118 + <el-dialog v-model="faultDiagnosisDocVisible" title="电子税务局业务诊断报告" width="60%">
  119 + <div class="diagnosisDoc-content">
  120 + <div class="export-div" @click="exportDoc"><img src="./src/assets/images/faultDiagnosis/icon-export.png" alt=""></div>
  121 + <el-row>
  122 + <el-col :span="6">
  123 + <div class="title-text">
  124 + <img src="./src/assets/images/faultDiagnosis/icon-green.png" class="title-img">
  125 + <span>网络检测</span>
  126 + </div>
  127 + </el-col>
  128 + </el-row>
  129 + <el-row>
  130 + <el-col :span="3" class="list-stet-net" v-for="(item,index) in 4">
  131 + <div class="list-step flex-div-start">
  132 + <div class="list-step-top flex-div margin-30">
  133 + <div :class="['step-img-dia',{'step-img-yellow':index==0,'step-img-red':index==2}]">
  134 + <i class="icon-step"></i>
  135 + </div>
  136 + <span :class="['list-line-dia',{'list-line-dia-yellow':index==0,'list-line-dia-red':index==2}]"></span>
  137 + </div>
  138 +
  139 + </div>
  140 + </el-col>
  141 + </el-row>
  142 + <el-row>
  143 + <el-col :span="6">
  144 + <div class="title-text">
  145 + <img src="./src/assets/images/faultDiagnosis/icon-yellow.png" class="title-img">
  146 + <span>应用检测</span>
  147 + </div>
  148 + </el-col>
  149 + </el-row>
  150 + <el-row>
  151 + <div class="program-text margin-30 flex-div-start">
  152 + <div>检测量：<span>5节点</span></div>
  153 + <span class="margin-left">20项指标</span><span class="margin-left">18项正常</span><span class="margin-left">2项异常</span>
  154 + </div>
  155 + </el-row>
  156 + <el-row>
  157 + <el-col :span="24">
  158 + <div class="progress-div margin-30 flex-div-start">
  159 + <div class="color-green">正常</div>
  160 + <div class="progress-con">
  161 + <el-progress stroke-width="12" :percentage="percentage" :color="customColor" :show-text="false" />
  162 + </div>
  163 + <div class="color-yellow">异常</div>
  164 + </div>
  165 + </el-col>
  166 + </el-row>
  167 + <el-row>
  168 + <el-col :span="24">
  169 + <div class="program-table margin-30">
  170 + <div class="program-tr flex-div-start" v-for="item in 4">
  171 + <div class="program-td program-padding flex-div-center width-20 text-color">节点{{item}}</div>
  172 + <div class="program-td flex-1-width flex-div-start">
  173 + <span :class="['program-td-text',{'program-td-text-yellow':item==1,'program-td-text-red':item==2}]">交易量响应时间</span>
  174 + <span class="program-td-text">响应时间</span>
  175 + </div>
  176 + </div>
  177 + </div>
  178 + </el-col>
  179 + </el-row>
  180 +
  181 + <el-row>
  182 + <el-col :span="6">
  183 + <div class="title-text">
  184 + <img src="./src/assets/images/faultDiagnosis/icon-yellow.png" class="title-img">
  185 + <span>基础环境</span>
  186 + </div>
  187 + </el-col>
  188 + </el-row>
  189 + <el-row>
  190 + <div class="program-text margin-30 flex-div-start">
  191 + <div>检测量：<span>50节点</span></div>
  192 + <span class="margin-left">20项指标</span><span class="margin-left">18项正常</span><span class="margin-left">2项异常</span>
  193 + </div>
  194 + </el-row>
  195 + <el-row>
  196 + <el-col :span="24">
  197 + <div class="progress-div margin-30 flex-div-start">
  198 + <div class="color-green">正常</div>
  199 + <div class="progress-con">
  200 + <el-progress stroke-width="12" :percentage="percentage" :color="customColor" :show-text="false" />
  201 + </div>
  202 + <div class="color-yellow">异常</div>
  203 + </div>
  204 + </el-col>
  205 + </el-row>
  206 + <el-row>
  207 + <el-col :span="24">
  208 + <div class="program-table margin-30">
  209 + <div class="program-tr flex-div-start" v-for="item in 4">
  210 + <div class="program-td program-padding flex-div-center width-20 text-color">服务器{{item}}</div>
  211 + <div class="program-td flex-1-width flex-div-start">
  212 + <span :class="['program-td-text',{'program-td-text-yellow':item==1,'program-td-text-red':item==2}]">cpu</span>
  213 + <span class="program-td-text">PNG状态</span>
  214 + </div>
  215 + </div>
  216 + </div>
  217 + </el-col>
  218 + </el-row>
  219 +
  220 + <el-row>
  221 + <el-col :span="6">
  222 + <div class="title-text margin-left-30">
  223 + <span>APM</span>
  224 + </div>
  225 + </el-col>
  226 + </el-row>
  227 +
  228 + <el-row>
  229 + <el-col :span="24">
  230 + <div class="program-table margin-30">
  231 + <div class="program-tr flex-div-start" v-for="item in 4">
  232 + <div class="program-td program-padding flex-div-center width-20 text-color">arms{{item}}</div>
  233 + <div class="program-td flex-1-width flex-div-start">
  234 +
  235 + <span class="program-td-text">服务</span>
  236 + </div>
  237 + </div>
  238 + </div>
  239 + </el-col>
  240 + </el-row>
  241 +
  242 + <el-row>
  243 + <el-col :span="6">
  244 + <div class="title-text margin-left-30">
  245 + <span>推荐解决方案</span>
  246 + </div>
  247 + </el-col>
  248 + </el-row>
  249 + <el-row v-for="item in 2">
  250 + <el-col :span="24" class="margin-top-bottom-10">
  251 + <div class="flex-div-start margin-30 ">
  252 + <div class="text-color">
  253 + 解决方案{{item}}：
  254 + </div>
  255 + <div class="program-div">
  256 + 可通过人工调整的方式解决
  257 + </div>
  258 + </div>
  259 + </el-col>
  260 +
  261 +
  262 + </el-row>
  263 + <el-row >
  264 + <el-col :span="24">
  265 + <div class="btn-faultDiagnosis margin-top-bottom-30">
  266 + <el-button type="primary" @click="onSubmit">保存</el-button>
  267 + </div>
  268 + </el-col>
  269 + </el-row>
  270 + </div>
  271 +
  272 + </el-dialog>
  273 + </div>
  274 +
  275 +</div>
  1 +export default {
  2 + name: 'faultForm',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 + options:[{value:120,label:'name'}],
  8 + faultFormTableData: [
  9 + {
  10 + categories: '业务指标故障',
  11 + faultBody: '电子税务局可用性下降到90%',
  12 + startTime:'2021-10-12 10:00:00',
  13 + state:'已解决',
  14 + mode:'人工处理',
  15 + handleTime:'2021-11-11 11:11:11',
  16 + handlePeople:'张三',
  17 + duration:'1小时',
  18 + range:'电子税务局系统',
  19 + },
  20 +
  21 + ],
  22 + faultDiagnosisVisible:false,//处理故障弹框
  23 + faultDiagnosisDocVisible:false,//电子税务局诊断报告弹框
  24 + faultHandleForm:'',//处理故障数据
  25 + percentage: 80,
  26 + customColor: '#1bdf71',
  27 + }
  28 + },
  29 + setup(){
  30 + const {proxy} = Vue.getCurrentInstance();
  31 + const faultHandleForm=Vue.ref({});
  32 + return{
  33 + faultHandleForm
  34 + }
  35 + },
  36 + computed: {},
  37 + methods: {
  38 + //处理
  39 + handleFault(item){
  40 + console.log("333",item)
  41 + this.faultHandleForm=item;
  42 + this.faultDiagnosisVisible=true;
  43 +
  44 + },
  45 + //诊断书
  46 + handleDiagnosis(item){
  47 + this.faultDiagnosisDocVisible=true;
  48 + },
  49 + //下载
  50 + exportDoc(){
  51 +
  52 + }
  53 + },
  54 + mounted () {
  55 +
  56 + },
  57 + unmounted () {}
  58 +
  59 +}
1 <div id="faultDiagnosisIndex"> 1 <div id="faultDiagnosisIndex">
2 <!--搜索输入框部分--> 2 <!--搜索输入框部分-->
  3 + <div class="margin-30">
3 <el-row> 4 <el-row>
4 <el-col :span="6"> 5 <el-col :span="6">
5 <div class="grid-content bg-purple"> 6 <div class="grid-content bg-purple">
@@ -14,47 +15,58 @@ @@ -14,47 +15,58 @@
14 </div> 15 </div>
15 </el-col> 16 </el-col>
16 </el-row> 17 </el-row>
  18 + </div>
  19 +
17 20
18 <!--卡片分页排头--> 21 <!--卡片分页排头-->
  22 + <div class="fault-card margin-30">
19 <el-row :gutter="12" class="fault-book-title-card"> 23 <el-row :gutter="12" class="fault-book-title-card">
20 <el-col :span="3"> 24 <el-col :span="3">
21 - <el-card class="fault-book-title-card-text" @click="clickDaultDefinitionFunc()" shadow="hover">故障定义</el-card> 25 + <el-card class="fault-book-title-card-text isActive" @click="clickDaultDefinitionFunc()" shadow="hover"><span class="card-name">故障定义</span></el-card>
22 </el-col> 26 </el-col>
23 <el-col :span="3"> 27 <el-col :span="3">
24 - <el-card class="fault-book-title-card-text" @click="clickNetworkMonitorFunc()" shadow="hover">网络监测</el-card> 28 + <el-card class="fault-book-title-card-text" @click="clickNetworkMonitorFunc()" shadow="hover"><span class="card-name">网络监测</span></el-card>
25 </el-col> 29 </el-col>
26 <el-col :span="3"> 30 <el-col :span="3">
27 - <el-card class="fault-book-title-card-text" @click="applicationMonitorFunc()" shadow="hover">应用检测</el-card> 31 + <el-card class="fault-book-title-card-text" @click="applicationMonitorFunc()" shadow="hover"><span class="card-name">应用检测</span></el-card>
28 </el-col> 32 </el-col>
29 <el-col :span="3"> 33 <el-col :span="3">
30 - <el-card class="fault-book-title-card-text" @click="basicEnvironmentFunc()" shadow="hover">基础环境</el-card> 34 + <el-card class="fault-book-title-card-text" @click="basicEnvironmentFunc()" shadow="hover"><span class="card-name">基础环境</span></el-card>
31 </el-col> 35 </el-col>
32 <el-col :span="3"> 36 <el-col :span="3">
33 - <el-card class="fault-book-title-card-text" @click="apmMonitorFunc()" shadow="hover">APM</el-card> 37 + <el-card class="fault-book-title-card-text" @click="apmMonitorFunc()" shadow="hover"><span class="card-name">APM</span></el-card>
34 </el-col> 38 </el-col>
35 <el-col :span="3"> 39 <el-col :span="3">
36 - <el-card class="fault-book-title-card-text" @click="logDetectionFunc()" shadow="hover">日志检测</el-card> 40 + <el-card class="fault-book-title-card-text" @click="logDetectionFunc()" shadow="hover"><span class="card-name">日志检测</span></el-card>
37 </el-col> 41 </el-col>
38 <el-col :span="3"> 42 <el-col :span="3">
39 - <el-card class="fault-book-title-card-text" @click="subscriptionReportFunc()" shadow="hover">报告订阅</el-card> 43 + <el-card class="fault-book-title-card-text" @click="subscriptionReportFunc()" shadow="hover"><span class="card-name">报告订阅</span></el-card>
40 </el-col> 44 </el-col>
41 </el-row> 45 </el-row>
  46 + </div>
  47 +
42 48
43 <!---主体卡片部分--> 49 <!---主体卡片部分-->
44 <!--故障定义--> 50 <!--故障定义-->
45 - <div class="fault-definition" v-if="faultDefinitionHide">  
46 - <div>  
47 - <span> 51 + <div class="fault-definition margin-30" v-if="faultDefinitionHide">
  52 + <el-row>
  53 + <el-col :span="6">
  54 + <div class="title-text">
  55 +
48 <img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img"> 56 <img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img">
49 - <span class="title-text">故障定义</span>  
50 - </span> 57 + <span>故障定义</span>
  58 +
51 </div> 59 </div>
52 - <div>  
53 - <span class="fault-definition-radio"> 60 + </el-col>
  61 + </el-row>
  62 + <el-row>
  63 + <el-col :span="3" class="flex-div">
  64 + <div class="fault-definition-radio flex-div-start">
54 <el-radio v-model="faultDefinitionRadio" label="1">产生告警时触发</el-radio> 65 <el-radio v-model="faultDefinitionRadio" label="1">产生告警时触发</el-radio>
55 - <el-radio v-model="faultDefinitionRadio" label="2">自定义规则</el-radio>  
56 - </span>  
57 - <span class="fault-definition-select-up"> 66 + </div>
  67 + </el-col>
  68 + <el-col :span="21" class="flex-div">
  69 + <div class="fault-definition-select-up">
58 当 70 当
59 <el-select v-model="value" placeholder="Select"> 71 <el-select v-model="value" placeholder="Select">
60 <el-option 72 <el-option
@@ -76,8 +88,18 @@ @@ -76,8 +88,18 @@
76 </el-option> 88 </el-option>
77 </el-select> 89 </el-select>
78 时触发 90 时触发
79 - </span>  
80 - <span class="fault-definition-select-down"> 91 + </div>
  92 + </el-col>
  93 + </el-row>
  94 + <el-row>
  95 + <el-col :span="3">
  96 + <div class="fault-definition-radio flex-div-start">
  97 + <el-radio v-model="faultDefinitionRadio" label="2">自定义规则</el-radio>
  98 + </div>
  99 +
  100 + </el-col>
  101 + <el-col :span="21">
  102 + <div class="fault-definition-select-down">
81 当 103 当
82 <el-select v-model="value" placeholder="Select"> 104 <el-select v-model="value" placeholder="Select">
83 <el-option 105 <el-option
@@ -99,81 +121,109 @@ @@ -99,81 +121,109 @@
99 </el-option> 121 </el-option>
100 </el-select> 122 </el-select>
101 时触发 123 时触发
102 - </span>  
103 -  
104 </div> 124 </div>
  125 + </el-col>
  126 + </el-row>
105 </div> 127 </div>
106 128
107 <!--网络检测--> 129 <!--网络检测-->
108 - <div class="network-monitor" v-if="networkMonitorHide">  
109 - <div>  
110 - <span> 130 + <div class="network-monitor margin-30" v-if="networkMonitorHide">
  131 + <el-row>
  132 + <el-col :span="6">
  133 + <div class="title-text">
111 <img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img"> 134 <img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img">
112 - <span class="title-text">网络检测</span>  
113 - </span> 135 + <span>网络检测</span>
114 </div> 136 </div>
115 - <div class="context-radio"> 137 + </el-col>
  138 + </el-row>
  139 + <el-row>
  140 + <el-col :span="24">
  141 + <div class="context-radio flex-div-start margin-30">
116 <span class="fault-book-input-text">状态选择</span> 142 <span class="fault-book-input-text">状态选择</span>
117 - <el-radio v-model="radio1" label="1">启用</el-radio>  
118 - <el-radio v-model="radio1" label="2">不启用</el-radio> 143 + <el-radio v-model="faultStateRadio" label="1">启用</el-radio>
  144 + <el-radio v-model="faultStateRadio" label="2">不启用</el-radio>
119 </div> 145 </div>
120 - <div class="context-multiple-choice">  
121 - <span v-for="(item, index) in networkMonitorList" :key="index">  
122 - <span> 146 + </el-col>
  147 + </el-row>
  148 + <el-row>
  149 + <el-col :span="24">
  150 + <div class="context-multiple-choice flex-div-start margin-30">
  151 + <div v-for="(item, index) in networkMonitorList" :key="index">
  152 + <div>
123 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button> 153 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
124 <img :id="item.id" @click="deleteItem(item.id, networkMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon"> 154 <img :id="item.id" @click="deleteItem(item.id, networkMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
125 - </span>  
126 - </span>  
127 - <span>  
128 - <el-button class="multiple-choice-button" @click="networkMonitorVisible = true">添加网络检测</el-button> 155 + </div>
  156 + </div>
  157 + <div class=" flex-div">
  158 + <el-button class="multiple-choice-button color-999" @click="networkMonitorVisible = true">添加网络检测</el-button>
129 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 159 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
130 - </span>  
131 </div> 160 </div>
132 </div> 161 </div>
  162 + </el-col>
  163 + </el-row>
  164 + </div>
133 165
134 <!--应用监测--> 166 <!--应用监测-->
135 - <div class="application-monitor" v-if="applicationMonitorHide">  
136 - <div>  
137 - <span> 167 + <div class="application-monitor margin-30" v-if="applicationMonitorHide">
  168 + <el-row>
  169 + <el-col :span="6">
  170 + <div class="title-text">
138 <img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img"> 171 <img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img">
139 - <span class="title-text">应用检测</span>  
140 - </span> 172 + <span>应用检测</span>
141 </div> 173 </div>
142 - <div class="context-radio"> 174 + </el-col>
  175 + </el-row>
  176 + <el-row>
  177 + <el-col :span="24">
  178 + <div class="context-radio flex-div-start margin-30">
143 <span class="fault-book-input-text">状态选择</span> 179 <span class="fault-book-input-text">状态选择</span>
144 - <el-radio v-model="radio1" label="1">启用</el-radio>  
145 - <el-radio v-model="radio1" label="2">不启用</el-radio> 180 + <el-radio v-model="faultApplicationRadio" label="1">启用</el-radio>
  181 + <el-radio v-model="faultApplicationRadio" label="2">不启用</el-radio>
146 </div> 182 </div>
147 - <div class="context-multiple-choice">  
148 - <span v-for="(item, index) in applicationMonitorList" :key="index">  
149 - <span> 183 + </el-col>
  184 + </el-row>
  185 + <el-row>
  186 + <el-col :span="24">
  187 + <div class="context-multiple-choice flex-div-start margin-30">
  188 + <div v-for="(item, index) in applicationMonitorList" :key="index">
  189 + <div>
150 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button> 190 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
151 <img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon"> 191 <img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
152 - </span>  
153 - </span>  
154 - <span>  
155 - <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加应用检测</el-button> 192 + </div>
  193 + </div>
  194 + <div class=" flex-div">
  195 + <el-button class="multiple-choice-button color-999" @click="addNetworkMonitorItem()">添加应用检测</el-button>
156 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 196 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
157 - </span>  
158 </div> 197 </div>
159 </div> 198 </div>
  199 + </el-col>
  200 + </el-row>
  201 + </div>
160 202
161 <!--基础环境 Basic environment--> 203 <!--基础环境 Basic environment-->
162 - <div class="basic-environment" v-if="basicEnvironmentHide">  
163 - <div>  
164 - <span> 204 + <div class="basic-environment margin-30" v-if="basicEnvironmentHide">
  205 + <el-row>
  206 + <el-col :span="6">
  207 + <div class="title-text">
165 <img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img"> 208 <img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img">
166 - <span class="title-text">基础环境</span>  
167 - </span> 209 + <span>基础环境</span>
168 </div> 210 </div>
169 - <div class="context-radio"> 211 + </el-col>
  212 + </el-row>
  213 + <el-row>
  214 + <el-col :span="24">
  215 + <div class="context-radio flex-div-start margin-30">
170 <span class="fault-book-input-text">状态选择</span> 216 <span class="fault-book-input-text">状态选择</span>
171 - <el-radio v-model="radio1" label="1">启用</el-radio>  
172 - <el-radio v-model="radio1" label="2">不启用</el-radio> 217 + <el-radio v-model="faultEnvironmentRadio" label="1">启用</el-radio>
  218 + <el-radio v-model="faultEnvironmentRadio" label="2">不启用</el-radio>
173 </div> 219 </div>
174 - <div class="context-select"> 220 + </el-col>
  221 + </el-row>
  222 + <el-row>
  223 + <el-col :span="24">
  224 + <div class="context-select flex-div-start margin-30">
175 <span class="fault-book-input-text context-select-text">选择类型</span> 225 <span class="fault-book-input-text context-select-text">选择类型</span>
176 - <el-select v-model="value" placeholder="从业务选择"> 226 + <el-select v-model="value" placeholder="从业务选择" class="margin-right-10">
177 <el-option 227 <el-option
178 v-for="item in options" 228 v-for="item in options"
179 :key="item.value" 229 :key="item.value"
@@ -192,116 +242,199 @@ @@ -192,116 +242,199 @@
192 </el-option> 242 </el-option>
193 </el-select> 243 </el-select>
194 </div> 244 </div>
  245 + </el-col>
  246 + </el-row>
  247 + <el-row>
  248 + <el-col :span="24">
  249 + <div class="environment-table margin-top flex-div-start margin-30">
  250 + <el-table :data="environmentTableData" border height="250" style="width: 100%">
  251 + <el-table-column align="center" prop="name" label="Name" width="180" />
  252 + <el-table-column prop="address" label="Address" class="margin-30" >
  253 + <template #default="scope">
  254 + <div class="list-data">
  255 + <span class="list-data-text">住址: {{ scope.row.address }}</span>
  256 + <img :id="scope.row.index" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="img-delete">
  257 +
  258 + </div>
  259 +
  260 + </template>
  261 + </el-table-column>
  262 + </el-table>
  263 + </div>
  264 +
  265 + </el-col>
  266 +
  267 + </el-row>
  268 +
  269 +
  270 +
195 </div> 271 </div>
196 272
197 <!--APM--> 273 <!--APM-->
198 - <div class="apm-monitor" v-if="apmMonitorHide">  
199 - <div>  
200 - <span> 274 + <div class="apm-monitor margin-30" v-if="apmMonitorHide">
  275 + <el-row>
  276 + <el-rol :span="6">
  277 + <div class="title-text">
201 <img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img"> 278 <img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img">
202 - <span class="title-text">APM</span>  
203 - </span> 279 + <span>APM</span>
204 </div> 280 </div>
205 - <div class="context-radio"> 281 + </el-rol>
  282 + </el-row>
  283 + <el-row>
  284 + <el-col :span="24">
  285 + <div class="context-radio flex-div-start margin-30">
206 <span class="fault-book-input-text">状态选择</span> 286 <span class="fault-book-input-text">状态选择</span>
207 - <el-radio v-model="radio1" label="1">启用</el-radio>  
208 - <el-radio v-model="radio1" label="2">不启用</el-radio> 287 + <el-radio v-model="faultAPMRadio" label="1">启用</el-radio>
  288 + <el-radio v-model="faultAPMRadio" label="2">不启用</el-radio>
209 </div> 289 </div>
210 - <div class="context-multiple-choice">  
211 - <span v-for="(item, index) in apmMonitorList" :key="index">  
212 - <span> 290 + </el-col>
  291 + </el-row>
  292 + <el-row>
  293 + <el-col :span="24">
  294 + <div class="context-multiple-choice flex-div-start margin-30">
  295 + <div v-for="(item, index) in apmMonitorList" :key="index">
  296 + <div>
213 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button> 297 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
214 <img :id="item.id" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon"> 298 <img :id="item.id" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
215 - </span>  
216 - </span>  
217 - <span> 299 + </div>
  300 + </div>
  301 + <div>
218 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button> 302 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button>
219 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 303 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
220 - </span>  
221 </div> 304 </div>
222 </div> 305 </div>
  306 + </el-col>
  307 + </el-row>
  308 +
  309 +
  310 + </div>
223 311
224 <!--日志检测--> 312 <!--日志检测-->
225 - <div class="log-detection" v-if="logDetectionHide">  
226 - <div>  
227 - <span> 313 + <div class="log-detection margin-30" v-if="logDetectionHide">
  314 + <el-row>
  315 + <el-col :span="6">
  316 + <div class="title-text">
228 <img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img"> 317 <img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img">
229 - <span class="title-text">日志检测</span>  
230 - </span> 318 + <span>日志检测</span>
231 </div> 319 </div>
232 - <div class="context-radio"> 320 + </el-col>
  321 + </el-row>
  322 + <el-row>
  323 + <el-col :span="24">
  324 + <div class="context-radio flex-div-start margin-30">
233 <span class="fault-book-input-text">状态选择</span> 325 <span class="fault-book-input-text">状态选择</span>
234 - <el-radio v-model="radio1" label="1">启用</el-radio>  
235 - <el-radio v-model="radio1" label="2">不启用</el-radio> 326 + <el-radio v-model="faultLogRadio" label="1">启用</el-radio>
  327 + <el-radio v-model="faultLogRadio" label="2">不启用</el-radio>
236 </div> 328 </div>
237 - <div class="context-multiple-choice">  
238 - <span v-for="(item, index) in logDetectionList" :key="index">  
239 - <span> 329 + </el-col>
  330 + </el-row>
  331 + <el-row>
  332 + <el-col :span="24">
  333 + <div class="context-multiple-choice flex-div-start margin-30">
  334 + <div v-for="(item, index) in logDetectionList" :key="index">
  335 + <div>
240 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button> 336 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
241 <img :id="item.id" @click="deleteItem(item.id, logDetectionList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon"> 337 <img :id="item.id" @click="deleteItem(item.id, logDetectionList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
242 - </span>  
243 - </span>  
244 - <span> 338 + </div>
  339 + </div>
  340 + <div>
245 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button> 341 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button>
246 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 342 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
247 - </span>  
248 </div> 343 </div>
249 </div> 344 </div>
  345 + </el-col>
  346 + </el-row>
  347 + </div>
250 348
251 <!--订阅报告--> 349 <!--订阅报告-->
252 - <div class="subscription-report" v-if="subscriptionReportHide">  
253 - <div>  
254 - <span> 350 + <div class="subscription-report margin-30" v-if="subscriptionReportHide">
  351 + <el-row>
  352 + <el-col :span="6">
  353 + <div class="title-text">
255 <img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img"> 354 <img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img">
256 - <span class="title-text">报告订阅</span>  
257 - </span> 355 + <span>报告订阅</span>
258 </div> 356 </div>
259 - <div class="context-multiple-choice">  
260 - <span v-for="(item, index) in subscriptionReportList" :key="index">  
261 - <span> 357 + </el-col>
  358 + </el-row>
  359 + <el-row>
  360 + <el-col :span="24">
  361 + <div class="context-multiple-choice flex-div-start margin-30">
  362 + <div v-for="(item, index) in subscriptionReportList" :key="index">
  363 + <div>
262 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button> 364 <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
263 <img :id="item.id" @click="deleteItem(item.id, subscriptionReportList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon"> 365 <img :id="item.id" @click="deleteItem(item.id, subscriptionReportList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
264 - </span>  
265 - </span>  
266 - <span> 366 + </div>
  367 + </div>
  368 + <div>
267 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button> 369 <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button>
268 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 370 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
269 - </span>  
270 </div> 371 </div>
271 </div> 372 </div>
  373 + </el-col>
  374 + </el-row>
  375 + </div>
  376 +
  377 + <!--取消和保存-->
  378 + <div class="btn-faultDiagnosis">
  379 + <el-button>取消</el-button>
  380 + <el-button type="primary">保存</el-button>
  381 +
  382 + </div>
272 383
273 <!--网络检测弹窗--> 384 <!--网络检测弹窗-->
274 - <div class="network-monitor-popup">  
275 - <el-dialog v-model="networkMonitorVisible" title="故障新增内容"> 385 + <div class="network-monitor-popup popup-bg">
  386 + <el-dialog v-model="networkMonitorVisible" title="故障新增内容" width="60%">
276 <el-row> 387 <el-row>
277 <el-col :span="6"> 388 <el-col :span="6">
278 <div class="grid-content bg-purple network-monitor-popup-left"> 389 <div class="grid-content bg-purple network-monitor-popup-left">
279 - <span> 390 + <div>
280 <div class="context-head"> 391 <div class="context-head">
281 已配置链路 392 已配置链路
282 </div> 393 </div>
283 - </span>  
284 - <span v-for="(item, index) in networkMonitorList" :key="index">  
285 - <span> 394 + </div>
  395 + <div @click="clickList(index)" :class="['list-net',{'isActive':index==isClickNet}]" v-for="(item, index) in networkMonitorList" :key="index">
  396 + <div class="flex-div-center ">
286 <div class="multiple-choice-button">{{item.title}}</div> 397 <div class="multiple-choice-button">{{item.title}}</div>
287 - <!--img-->  
288 - </span>  
289 - </span>  
290 - <span> 398 + <img v-show="index==isClickNet" class="img-delete" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" alt="">
  399 + </div>
  400 + </div>
  401 + <div class="list-net">
291 <div class="multiple-choice-button"> 402 <div class="multiple-choice-button">
292 <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png"> 403 <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">
293 </div> 404 </div>
294 - </span> 405 + </div>
295 406
296 </div> 407 </div>
297 </el-col> 408 </el-col>
298 <el-col :span="18"> 409 <el-col :span="18">
299 <div class="grid-content bg-purple-light network-monitor-popup-right"> 410 <div class="grid-content bg-purple-light network-monitor-popup-right">
300 <div class="context-head"> 411 <div class="context-head">
301 - <span>电子税务局网络链路配置</span>  
302 - <span > 412 + <div>电子税务局网络链路配置</div>
  413 + <div >
303 <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png"> 414 <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">
304 - </span> 415 + </div>
  416 + </div>
  417 + <div class="context-body">
  418 + <el-row>
  419 + <el-col :span="4" v-for="(item,index) in 6">
  420 + <div class="list-step flex-div-start">
  421 + <div class="list-step-top flex-div">
  422 + <div :class="['step-img',{'isActive':index<2}]">
  423 + <i class="icon-step"></i>
  424 + </div>
  425 + <span :class="['list-line',{'isActive':index<1}]"></span>
  426 + </div>
  427 + <div v-show="index<2" class="list-step-name">
  428 + 名称
  429 + </div>
  430 + <div v-show="index>=2" class="list-step-name">
  431 + 点击添加
  432 + </div>
  433 +
  434 + </div>
  435 + </el-col>
  436 + </el-row>
  437 +
305 </div> 438 </div>
306 </div> 439 </div>
307 </el-col> 440 </el-col>
@@ -13,6 +13,44 @@ export default { @@ -13,6 +13,44 @@ 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 +
  53 + ],//基础环境表格数据
16 //网络检测选中项集合 54 //网络检测选中项集合
17 networkMonitorList: [ 55 networkMonitorList: [
18 { 56 {
@@ -45,6 +83,11 @@ export default { @@ -45,6 +83,11 @@ export default {
45 title: "arms", 83 title: "arms",
46 type: "apmMonitor", 84 type: "apmMonitor",
47 id: " apmMonitor1" 85 id: " apmMonitor1"
  86 + },
  87 + {
  88 + title: "arms2",
  89 + type: "apmMonitor",
  90 + id: " apmMonitor2"
48 } 91 }
49 ], 92 ],
50 //日志检测 93 //日志检测
@@ -172,8 +215,13 @@ export default { @@ -172,8 +215,13 @@ export default {
172 //点击添加网络检测item 215 //点击添加网络检测item
173 addNetworkMonitorItem(){ 216 addNetworkMonitorItem(){
174 217
  218 + },
  219 + //点击已配置链路
  220 + clickList(index){
  221 + this.isClickNet=index;
175 } 222 }
176 223
  224 +
177 }, 225 },
178 mounted () {}, 226 mounted () {},
179 unmounted () {} 227 unmounted () {}
@@ -39,7 +39,7 @@ @@ -39,7 +39,7 @@
39 <div id="yxqk__banner"> 39 <div id="yxqk__banner">
40 <ul id="yxjk_resource_type_count_id"> 40 <ul id="yxjk_resource_type_count_id">
41 <div id="yxjk_resource_type_count_id_tmpl"> 41 <div id="yxjk_resource_type_count_id_tmpl">
42 - <li :class="'list-'+index" v-for="(item,index) in assetOverviewData"> 42 + <li :class="'list-'+index" v-for="(item,index) in assetOverviewDataAll">
43 <img :src="'src/assets/images/zjdp/'+item.code+'.png'"> 43 <img :src="'src/assets/images/zjdp/'+item.code+'.png'">
44 <div style="margin-left: .02rem;"> 44 <div style="margin-left: .02rem;">
45 <p>{{item.name}}</p> 45 <p>{{item.name}}</p>
@@ -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 })