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 1750 additions and 365 deletions
... ... @@ -35,6 +35,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
//绑定检索事件
bindSearchEvent();
var collProtocols = "";
form.render(null, 'biz-reslist-form');
... ... @@ -123,7 +124,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
linkState: $("#biz_reslist_link_state").val(),
state: $("#biz_reslist_state").val(),
// hostState: $("#biz_reslist_host_state").val(),
powerState: $("#biz_reslist_power_state").val()
powerState: $("#biz_reslist_power_state").val(),
collProtocols: collProtocols
}
, height: 'full-165'
... ... @@ -168,6 +170,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
}
//树表格
function renderTreeTable(bizId, resType, reloadFlag) {
... ... @@ -175,7 +178,10 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
$(".biz_reslist_treetable_search").show();
$("#bizResListTableContent").hide();
$("#bizResTreeTableContent").show();
if (collProtocols) {
xmSelect.get('#collProtocolSelect', true).setValue([]);
collProtocols = '';
}
// 如果是虚拟机或者物理主机，展示电源状态查询条件
if ((resType === 'VIRTUALIZATION_VMWARE_VHOST' || resType === 'VIRTUALIZATION_VMWARE_PHYSICSHOST') && !reloadFlag) {
$('#biz_reslist_treetable_power_state').val('poweredOn');
... ... @@ -222,7 +228,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
state: $("#biz_reslist_treetable_state").val(),
linkState: $('#biz_reslist_treetable_link_state').val(),
powerState: $("#biz_reslist_treetable_power_state").val(),
serverState: $("#biz_reslist_server_state").val()
serverState: $("#biz_reslist_server_state").val(),
collProtocols: collProtocols
}
, done: function (res) {
if (res.code == 0) {
... ... @@ -380,6 +387,10 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
form.on('select(biz_reslist_res_colony)', function (data) {
reloadTable();
});
//资源池选择事件
form.on('select(aliyun_plantform)', function (data) {
reloadTable();
});
//资源连接状态选择事件
form.on('select(biz_reslist_platform)', function (data) {
... ... @@ -409,11 +420,23 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
$('#biz_reslist_resStatus').val('');
$('#biz_reslist_res_colony').val('');
$('#biz_reslist_res_cluster').val('');
$("#aliyun_plantform").val('');
if (collProtocols) {
xmSelect.get('#collProtocolSelect', true).setValue([]);
collProtocols = '';
}
form.render('select');
var targetId = '';
var searchType = "";
var optons = "";
//阿里云显示平台
if(/ALI_CLOUD/.test(resType)){
$("#aliyun_plantform").parent().parent().removeClass("hide");
form.render("select");
}else{
$("#aliyun_plantform").parent().parent().addClass("hide");
}
//华为云物理机，加载华为云集群查询条件
if (resType == 'HUAWEI_CLOUD_PHYSICSHOST') {
optons = "<option value=''>=所属集群=</option>"
... ... @@ -428,6 +451,54 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
} else {
$("#biz_reslist_res_cluster_id").hide();
}
if(/HUAWEI_CLOUD_VIRTUALHOST/.test(resType) || /ALI_CLOUD_ECS/.test(resType) || /VIRTUALIZATION_VMWARE_VHOST/.test(resType)) {
//绑定采集协议
admin.req({
url: common.domainName + '/api-web/manage/protocol/page',
data: {
access_token: accessToken,
startTime: '',
endTime: '',
keyword: '',
hasParam: '',
limit: -1
}
}).done(function (res) {
xmSelect.render({
el: '#collProtocolSelect'
, filterable: true
, tips: '=采集协议='
, name: 'collProtocols'
, prop: {
name: 'protocolName',
value: 'protocolCode',
}
, model: {
label: {
type: 'block',
block: {
//最大显示数量, 0:不限制
showCount: 1,
//是否显示删除图标
showIcon: true,
}
}
}
, data: res.data
, hide: function () {
var selectValue = xmSelect.get('#collProtocolSelect', true).getValue('value');
collProtocols = selectValue.join(',');
form.render()
reloadTable();
if (collProtocols) {
xmSelect.get('#collProtocolSelect', true).setValue([]);
collProtocols = '';
form.render();
}
}
})
})
}
//华为云的集群、虚拟化物理机，查询条件绑定资源池
if (resType == 'HUAWEI_CLOUD_CLUSTER' || resType == 'VIRTUALIZATION_VMWARE_PHYSICSHOST') {
... ... @@ -506,7 +577,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'soulTable', 'sessions', 'comm
platform: platform,
subResType: $("#biz_reslist_sub_restype").val(),
powerState: $("#biz_reslist_power_state").val(),
serverState: $("#biz_reslist_server_state").val()
serverState: $("#biz_reslist_server_state").val(),
collProtocols: collProtocols,
platform: $("#aliyun_plantform").val()
}
})
}
... ...
... ... @@ -376,7 +376,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
{field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
{field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
{field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
{field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
// 2021-11-22 徐毫杰 连接状态无数据改成展示主机状态
{field: 'hostState', title: '主机状态', align: 'center', minWidth: x_110, templet: '#hostStateTpl', sort: true}
],
"HUAWEI_CLOUD_VIRTUALHOST": [
//{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
... ... @@ -419,8 +420,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
templet: '#resindex_resName'
},
{field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
{field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
{field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
// {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
// {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
{field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
{field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
{field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
... ... @@ -436,8 +437,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
templet: '#resindex_resName'
},
{field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
{field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
{field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
// {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
// {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
{field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
{field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
{field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
... ...
... ... @@ -197,7 +197,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func
series: [
{
type: 'bar',
barWidth: '60%',
barWidth: '40%',
data: line,
itemStyle: {
normal: {
... ...
... ... @@ -84,11 +84,11 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
return '测试通知'
break;
default:
return '告警通知'
return '系统通知'
break;
}
}else {
return '告警通知'
return '系统通知'
}
}}
, {field: 'way', title: '通知方式', align: 'center', sort: true, width:120,
... ...
... ... @@ -39,9 +39,57 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'upload', 'admin', 'form',
if(bizId!=''){
bizId.substring(0,bizId.length-1);
}
reloadTable();
}
});
var collProtocols = '';
initProtocolSelect()
//获取全部协议
function initProtocolSelect() {
admin.req({
url: domainName + '/api-web/manage/protocol/page',
data: {
access_token: accessToken,
startTime: '',
endTime: '',
keyword: '',
hasParam: '',
limit: -1
}
}).done(function (res) {
xmSelect.render({
el: '#collProtocolSelect'
, filterable: true
, tips: '=采集协议='
, name: 'collProtocols'
, prop: {
name: 'protocolName',
value: 'protocolCode',
}
, model: {
label: {
type: 'block',
block: {
//最大显示数量, 0:不限制
showCount: 1,
//是否显示删除图标
showIcon: true,
}
}
}
, data: res.data
,hide: function () {
var selectValue = xmSelect.get('#collProtocolSelect', true).getValue('value');
collProtocols = selectValue.join(',');
form.render()
reloadTable();
}
})
})
}
function autoHeight(el) {
// var height = el.parents('.layui-card').height();
// el.css('min-height', height - 75);
... ... @@ -794,6 +842,7 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'upload', 'admin', 'form',
, id: 'resManageTable'
, url: common.domainName + '/api-web/home/res-list/' + resType
, where: {
access_token: accessToken,
editMode: 'true',
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',
busId: $("#resManageIndexForm").find("input[name='busId']").val(),
state: $("#resManageIndexForm").find("select[name='state']").val(),
parentId: $("#resManageIndexForm").find("select[name='parentId']").val(),
collectionState: $("#resManageIndexForm").find("select[name='collectionState']").val()
collectionState: $("#resManageIndexForm").find("select[name='collectionState']").val(),
collProtocols: collProtocols
}
, height: 'full-200'
, cellMinWidth: 80
... ...
... ... @@ -33,7 +33,7 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
var bizId='';
var busIdSelect;
var busTypeList = [];
var collProtocols = '';
var editFlag = false;
if (data.choose == '1') {
... ... @@ -68,7 +68,49 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
$('#resindex-leftree-shrink').hide();
});
});
//获取全部协议
function initProtocolSelect() {
admin.req({
url: common.domainName + '/api-web/manage/protocol/page',
data: {
access_token: accessToken,
startTime: '',
endTime: '',
keyword: '',
hasParam: '',
limit: -1
}
}).done(function (res) {
xmSelect.render({
el: '#collProtocolSelect'
, filterable: true
, tips: '=采集协议='
, name: 'collProtocols'
, prop: {
name: 'protocolName',
value: 'protocolCode',
}
, model: {
label: {
type: 'block',
block: {
//最大显示数量, 0:不限制
showCount: 1,
//是否显示删除图标
showIcon: true,
}
}
}
, data: res.data
,hide: function () {
var selectValue = xmSelect.get('#collProtocolSelect', true).getValue('value');
collProtocols = selectValue.join(',');
form.render()
reloadTable();
}
})
})
}
//树展开事件
$("#resindex-leftree_btn").on("click",function () {
$("#resindex-leftree_btn").hide();
... ... @@ -312,6 +354,52 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
// form.render("select");
// });
//$('#treetableBizTypes').val('');
//绑定采集协议
admin.req({
url: domainName + '/api-web/manage/protocol/page',
data: {
access_token: accessToken,
startTime: '',
endTime: '',
keyword: '',
hasParam: '',
limit: -1
}
}).done(function (res) {
xmSelect.render({
el: '#collProtocolSelect'
, filterable: true
, tips: '=采集协议='
, name: 'collProtocols'
, prop: {
name: 'protocolName',
value: 'protocolCode',
}
, model: {
label: {
type: 'block',
block: {
//最大显示数量, 0:不限制
showCount: 1,
//是否显示删除图标
showIcon: true,
}
}
}
, data: res.data
,hide: function () {
var selectValue = xmSelect.get('#collProtocolSelect', true).getValue('value');
collProtocols = selectValue.join(',');
form.render()
reloadTable();
if (collProtocols) {
xmSelect.get('#collProtocolSelect', true).setValue([]);
collProtocols='';
form.render();
}
}
})
})
//绑定业务下拉选择数据
admin.req({
url: domainName + '/api-web/home/business/findAllBusType',
... ... @@ -566,6 +654,11 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
// renderList(currentResType);
reloadTable();
});
//阿里云平台选择事件
form.on('select(aliyun_plantform)', function (data) {
// renderList(currentResType);
reloadTable();
});
//厂商选择事件
form.on('select(res_vendor)', function (data) {
// renderList(currentResType);
... ... @@ -645,7 +738,9 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
keyWords: $("#treetable_keyword").val(),
health: $("#treetable_resStatus").val(),
state: $("#treetable_res_state").val(),
resCategory: 'resources'
resCategory: 'resources',
collProtocols : collProtocols
}
, done: function (res) {
layer.close(index);
... ... @@ -1123,11 +1218,12 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
if(xmSelect.get("#resListBizTypes") && xmSelect.get("#resListBizTypes")[0]){
xmSelect.get("#resListBizTypes")[0].setValue([]);
}
$("#aliyun_plantform").val('');
$('#res_colony').val('');
$('#res_cluster').val('');
$('#state').val('');
$('#link_state').val('');
//虚拟化查询条件清空
$("#virtual_platForm_select").val('');
$("#treetable_resStatus").val('');
... ... @@ -1135,6 +1231,9 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
if(xmSelect.get("#treetableBizTypes") && xmSelect.get("#treetableBizTypes")[0]){
xmSelect.get("#treetableBizTypes")[0].setValue([]);
}
// if(xmSelect.get("#collProtocolSelect") && xmSelect.get("#collProtocolSelect")[0]){
// xmSelect.get("#collProtocolSelect")[0].setValue([]);
// }
$("#treetable_keyword").val('');
$("#treetable_state").val('');
... ... @@ -1152,6 +1251,13 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
var targetId = '';
var searchType = "";
var optons = "";
//阿里云显示平台
if(/ALI_CLOUD/.test(resType)){
$("#aliyun_plantform").parent().parent().removeClass("hide");
form.render("select");
}else{
$("#aliyun_plantform").parent().parent().addClass("hide");
}
//华为云物理机，加载华为云集群查询条件
if (resType == 'HUAWEI_CLOUD_PHYSICSHOST') {
optons = "<option value=''>=所属集群=</option>"
... ... @@ -1218,7 +1324,54 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
} else {
$("#res_vendor").parent().parent().addClass("hide");
}
if(/HUAWEI_CLOUD_VIRTUALHOST/.test(resType) || /ALI_CLOUD_ECS/.test(resType) || /VIRTUALIZATION_VMWARE_VHOST/.test(resType)){
//绑定采集协议
admin.req({
url: domainName + '/api-web/manage/protocol/page',
data: {
access_token: accessToken,
startTime: '',
endTime: '',
keyword: '',
hasParam: '',
limit: -1
}
}).done(function (res) {
xmSelect.render({
el: '#collProtocolSelect'
, filterable: true
, tips: '=采集协议='
, name: 'collProtocols'
, prop: {
name: 'protocolName',
value: 'protocolCode',
}
, model: {
label: {
type: 'block',
block: {
//最大显示数量, 0:不限制
showCount: 1,
//是否显示删除图标
showIcon: true,
}
}
}
, data: res.data
, hide: function () {
var selectValue = xmSelect.get('#collProtocolSelect', true).getValue('value');
collProtocols = selectValue.join(',');
form.render()
reloadTable();
if (collProtocols) {
xmSelect.get('#collProtocolSelect', true).setValue([]);
collProtocols = '';
form.render();
}
}
})
})
}
if (resType === 'HOST_MINICOMPUTER_PARTITION') {
$("#res_minicomputer").parent().parent().removeClass("hide");
var minicomputerStr = '';
... ... @@ -1260,9 +1413,11 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
form.render("select");
})
}
if(subflag && !resTypeSelectExclude.includes(resType)){
if(/ALI_CLOUD_/.test(resType) || /HUAWEI_CLOUD_/.test(resType)) {
return
return;
}
$("#res_sub_restype").parent().parent().removeClass("hide");
$(".top-head-info").removeClass("hide");
... ... @@ -1380,7 +1535,9 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
ptId: $("#res_platform").val(),
subResType:$("#res_sub_restype").val(),
provider: $("#res_vendor").val(),
resCategory: 'resources'
resCategory: 'resources',
collProtocols:collProtocols,
platform: $("#aliyun_plantform").val(),
}
})
}
... ...
... ... @@ -52,6 +52,12 @@
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long" style="width: 180px;">
<div id="collProtocolSelect" class="xm-select">
</div>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<select name="parentId" id="slt_res_manage_superior" lay-filter="slt_res_manage_superior">
... ...
... ... @@ -94,6 +94,7 @@
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<select name="label" id="biz_reslist_state" lay-filter="biz_reslist_state">
... ... @@ -105,6 +106,20 @@
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long" style="width: 180px;">
<div id="collProtocolSelect" class="xm-select">
</div>
</div>
</div>
<div class="layui-inline hide">
<div class="layui-input-inline">
<select name="platform" id="aliyun_plantform" lay-filter="aliyun_plantform">
<option value="">=阿里回迁云平台=</option>
<option value="阿里云">=阿里云平台=</option>
</select>
</div>
</div>
</div>
<!--树表格的检索条件-->
... ...
... ... @@ -9,7 +9,11 @@
var arr = [];
window.location.hash.split('/').forEach(function (v, i) {
if (v.indexOf('=') != -1 && v.indexOf('reportCode') != -1) {
viewURL = viewURL.replaceAll('reportCode',v.split('=')[1])
try {
viewURL = viewURL.replaceAll('reportCode',v.split('=')[1])
} catch (e) {
viewURL = viewURL.replace('reportCode',v.split('=')[1])
}
}
});
... ...
... ... @@ -153,6 +153,12 @@
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long" style="width: 180px;">
<div id="collProtocolSelect" class="xm-select">
</div>
</div>
</div>
<div class="layui-inline hide" >
<div class="layui-input-inline">
<select name="label" id="res_sub_restype" lay-filter="sub_restype">
... ... @@ -174,6 +180,14 @@
</select>
</div>
</div>
<div class="layui-inline hide">
<div class="layui-input-inline">
<select name="platform" id="aliyun_plantform" lay-filter="aliyun_plantform">
<option value="">=阿里回迁云平台=</option>
<option value="阿里云">=阿里云平台=</option>
</select>
</div>
</div>
</div>
</form>
</div>
... ... @@ -228,15 +242,11 @@
</div>
</div>
<div class="layui-inline">
<!-- <div class="layui-input-inline">-->
<!-- <select name="label" id="treetableBizTypes" lay-filter="treetableBizTypes">-->
<!-- <option value="">=所属业务=</option>-->
<!-- </select>-->
<!-- </div>-->
<div class="layui-input-inline layui-input-inline--long">
<div id="treetableBizTypes" class="xm-select-demo"></div>
</div>
</div>
<div class="layui-inline" id="virtual_platform_div_id">
<div class="layui-input-inline">
<select name="label" id="virtual_platForm_select" lay-filter="virtual_platForm_select">
... ...
... ... @@ -4,7 +4,7 @@
<div class="layui-tab layui-tab-card" lay-filter="detail-tab">
<ul class="layui-tab-title">
<li class="layui-this">数据库信息</li>
<li>RAC信息</li>
<!--<li>RAC信息</li>-->
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
... ...
... ... @@ -55,6 +55,18 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe940;</span>
<div class="name">数据库,数据</div>
<div class="code-name">&amp;#xe940;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe620;</span>
<div class="name">OPC跳板机权限申请</div>
<div class="code-name">&amp;#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe615;</span>
<div class="name">资产</div>
<div class="code-name">&amp;#xe615;</div>
... ... @@ -588,9 +600,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1636448687987') format('woff2'),
url('iconfont.woff?t=1636448687987') format('woff'),
url('iconfont.ttf?t=1636448687987') format('truetype');
src: url('iconfont.woff2?t=1637581076852') format('woff2'),
url('iconfont.woff?t=1637581076852') format('woff'),
url('iconfont.ttf?t=1637581076852') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
... ... @@ -617,6 +629,24 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-database"></span>
<div class="name">
数据库,数据
</div>
<div class="code-name">.icon-database
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-OPCtiaobanjiquanxianshenqing"></span>
<div class="name">
OPC跳板机权限申请
</div>
<div class="code-name">.icon-OPCtiaobanjiquanxianshenqing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-assets"></span>
<div class="name">
资产
... ... @@ -1419,6 +1449,22 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-database"></use>
</svg>
<div class="name">数据库,数据</div>
<div class="code-name">#icon-database</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-OPCtiaobanjiquanxianshenqing"></use>
</svg>
<div class="name">OPC跳板机权限申请</div>
<div class="code-name">#icon-OPCtiaobanjiquanxianshenqing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-assets"></use>
</svg>
<div class="name">资产</div>
... ...
@font-face {
font-family: "iconfont"; /* Project id 2843738 */
src: url('iconfont.woff2?t=1636448687987') format('woff2'),
url('iconfont.woff?t=1636448687987') format('woff'),
url('iconfont.ttf?t=1636448687987') format('truetype');
src: url('iconfont.woff2?t=1637581076852') format('woff2'),
url('iconfont.woff?t=1637581076852') format('woff'),
url('iconfont.ttf?t=1637581076852') format('truetype');
}
.iconfont {
... ... @@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-database:before {
content: "\e940";
}
.icon-OPCtiaobanjiquanxianshenqing:before {
content: "\e620";
}
.icon-assets:before {
content: "\e615";
}
... ...
... ... @@ -6,6 +6,20 @@
"description": "",
"glyphs": [
{
"icon_id": "18169761",
"name": "数据库,数据",
"font_class": "database",
"unicode": "e940",
"unicode_decimal": 59712
},
{
"icon_id": "25651056",
"name": "OPC跳板机权限申请",
"font_class": "OPCtiaobanjiquanxianshenqing",
"unicode": "e620",
"unicode_decimal": 58912
},
{
"icon_id": "1369418",
"name": "资产",
"font_class": "assets",
... ...
... ... @@ -810,6 +810,10 @@
<button type="button" class="layui-btn layui-bg-red layui-btn-radius layui-btn-xs p-0-15 cant-click">
断开连接
</button>
{{# }else if(d.hostState != null && d.hostState == '正常'){ }}
<button type="button" class="layui-btn layui-bg-green layui-btn-radius layui-btn-xs p-0-15 cant-click">
正常
</button>
{{# }else{ }}
<button type="button"
class="layui-btn layui-btn-radius layui-bg-gray layui-btn-xs p-0-15 cant-click">{{
... ...
... ... @@ -40,7 +40,12 @@
@import "../css/navTabs.css";
/*故障诊断书*/
@import "../css/faultDiagnosis.css";
@import "../css/faultForm.css";
/*对比分析*/
@import "../css/analysis.css";
... ...
... ... @@ -124,7 +124,7 @@
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 8px;
margin-top: 10px;
color: #3d96de;
padding-top: 6px;
... ... @@ -138,34 +138,48 @@
.yxqk .items li.list-2{
background-image: url('/vue3/src/assets/images/zjdp/bg-li-r-3.png');
}
.yxqk .items li.list-3{
background-image: url('/vue3/src/assets/images/zjdp/bg-li-r-4.png');
}
.yxqk .items li.list-4{
background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-2.png');
background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-1.png');
}
.yxqk .items li.list-5{
background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-2.png');
}
.yxqk .items li.list-6{
background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-3.png');
}
.yxqk .items li.list-0,.yxqk .items li.list-1,.yxqk .items li.list-2{
.yxqk .items li.list-7{
background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-4.png');
}
.yxqk .items li.list-0,.yxqk .items li.list-1,.yxqk .items li.list-2,.yxqk .items li.list-3{
right:0;
}
.yxqk .items li.list-3,.yxqk .items li.list-4,.yxqk .items li.list-5{
.yxqk .items li.list-4,.yxqk .items li.list-5,.yxqk .items li.list-6,.yxqk .items li.list-7{
left:0;
}
.yxqk .items li.list-0,.yxqk .items li.list-3{
top:15px;
.yxqk .items li.list-0,.yxqk .items li.list-4{
top:12px;
width:37%;
}
.yxqk .items li.list-1,.yxqk .items li.list-5{
top:63px;
}
.yxqk .items li.list-1,.yxqk .items li.list-4{
top:70px;
.yxqk .items li.list-2,.yxqk .items li.list-6{
top:113px;
}
.yxqk .items li.list-2,.yxqk .items li.list-5{
top:126px;
.yxqk .items li.list-3,.yxqk .items li.list-7{
top:164px;
width: 37%;
}
.yxqk .items li.list-0 img,.yxqk .items li.list-1 img,.yxqk .items li.list-2 img{
.yxqk .items li.list-0 img,.yxqk .items li.list-1 img,.yxqk .items li.list-2 img,.yxqk .items li.list-3 img{
left:20px;
}
.yxqk .items li.list-0 p,.yxqk .items li.list-1 p,.yxqk .items li.list-2 p{
.yxqk .items li.list-0 p,.yxqk .items li.list-1 p,.yxqk .items li.list-2 p,.yxqk .items li.list-3 p{
left:49px;
}
.yxqk .items li.list-3 .listNum,.yxqk .items li.list-4 .listNum,.yxqk .items li.list-5 .listNum{
.yxqk .items li.list-4 .listNum,.yxqk .items li.list-5 .listNum,.yxqk .items li.list-6 .listNum,.yxqk .items li.list-7 .listNum{
right:20px;
}
.yxqk .items li p{
... ...
#faultDiagnosisIndex{
color:#666
}
#faultDiagnosisIndex .el-button{
border-style: dashed;
}
#faultDiagnosisIndex .btn-faultDiagnosis .el-button{
border-style: solid;
}
.margin-30{
margin:0 30px;
}
.margin-all-30{
margin:30px
}
.margin-top{
margin-top:30px;
}
.fault-book-input{
width: 75%;
text-align: center;
padding: 1.5%;
}
.context-radio{
margin-bottom: 15px;
}
.fault-book-input-text{
width: 25%;
text-align: center;
margin-right: 3%;
/* width: 25%;
text-align: center;*/
margin-right: 27px;
}
.fault-card{
background: #fff;
/*margin: 0 30px;*/
}
.fault-card .el-card{
border:none;
}
.fault-card .el-card.is-hover-shadow:focus, .fault-card .el-card.is-hover-shadow:hover{
box-shadow: none;
}
.fault-book-title-card{
margin: 1%;
padding-left: 2%;
margin: 1% 0;
padding: 0 1%;
}
.fault-book-title-card-text {
position: relative;
}
.fault-book-title-card-text:after{
border-right:2px solid #3a92fc;
content: "";
display: block;
height:20px;
position: absolute;
top:16px;
right:0;
}
.fault-book-title-card-text .el-card__body{
padding:15px;
}
.fault-book-title-card-text.isActive .el-card__body{
border-bottom: 2px solid #3a92fc;
display:inline-block;
}
.fault-book-title-card-text{
color: #3A92FC;
cursor: pointer;
border: none;
border-radius: 0;
}
#faultDiagnosisIndex{
... ... @@ -33,84 +88,99 @@
}
.title-img{
position: absolute;
left: 5%;
width: 0.8%;
top: 19.5%;
margin-right: 10px;
}
.title-text{
position: absolute;
left: 7%;
font-size: 18px;
top: 19%;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 10px 0;
}
.flex-div{
display: flex;
align-items: center;
}
.flex-div-start{
display: flex;
align-items: center;
justify-content: flex-start;
}
.fault-definition .fault-definition-radio{
position: absolute;
left: 7%;
top: 22%;
width: 5%;
margin-left: 30px;
margin-bottom: 15px;
}
.fault-definition .fault-definition-select-up{
position: absolute;
top: 22%;
left: 20%;
display: flex;
align-items: center;
color: #666;
margin-bottom: 15px;
}
.fault-definition .el-select{
margin:0 10px;
}
.margin-right-10{
margin-right:10px;
}
.fault-definition .fault-definition-select-down{
position: absolute;
top: 27%;
left: 20%;
display: flex;
align-items: center;
color: #666;
}
.network-monitor .context-radio{
position: absolute;
/* position: absolute;
left: 2.7%;
top: 22%;
width: 20%;
width: 20%;*/
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 15px;
}
.application-monitor .context-radio{
position: absolute;
/* position: absolute;
left: 2.7%;
top: 22%;
width: 20%;
width: 20%;*/
margin-bottom: 15px;
}
.apm-monitor .context-radio{
position: absolute;
/*position: absolute;
left: 2.7%;
top: 22%;
width: 20%;
width: 20%;*/
}
.log-detection .context-radio{
position: absolute;
/* position: absolute;
left: 2.7%;
top: 22%;
width: 20%;
width: 20%;*/
}
.basic-environment .context-radio{
position: absolute;
/*position: absolute;
left: 2.7%;
top: 22%;
width: 20%;
width: 20%;*/
}
.basic-environment .context-select{
position: absolute;
/*position: absolute;
width: 40%;
top: 28%;
left: 0.8%;
left: 0.8%;*/
}
.context-multiple-choice{
position: absolute;
/* position: absolute;
left: 7%;
top: 27%;
top: 27%;*/
}
.multiple-choice-icon{
... ... @@ -118,7 +188,9 @@
top: 28.5%;
right: 18px;
}
.color-999{
color:#999;
}
.multiple-choice-button{
min-width: 140px;
}
... ... @@ -136,6 +208,7 @@
.network-monitor-popup-left{
background-color: #3B92FC;
padding-bottom: 3%;
min-height: 500px;
}
.network-monitor-popup{
... ... @@ -153,12 +226,10 @@
}
.network-monitor-popup .multiple-choice-button{
width: 100%;
color: #C7DBFE;
font-size: 18px;
margin-top: 15px;
padding-top: 10px;
height: 10%;
}
.network-monitor-popup-right .context-head{
... ... @@ -166,4 +237,146 @@
font-size: 18px;
text-align: left;
margin-left: 4%;
display: flex;
justify-content: space-between;
align-items: center;
}
.environment-table th{
color:#3B91FF;
}
.list-data{
display: flex;
align-items: center;
}
.img-delete{
width:12px;
height:12px;
margin-left: 6px;
}
.environment-table table{
/*border-color: #666666;*/
}
.environment-table th:nth-child(2) ,.environment-table td:nth-child(2){
padding-left: 30px;
}
.environment-table th,.environment-table td,.environment-table th.el-table__cell,.environment-table table tbody td{
background-color:#F4F5FA;
/*border-color: #666666;*/
}
.environment-table .el-table td.el-table__cell, .environment-table .el-table th.el-table__cell.is-leaf{
/*border-bottom-color: #666;*/
/*border-right-color: #666;*/
}
.list-step{
flex-flow: column;
align-items: flex-start;
}
.list-step-name{
margin-left: 10px;
margin-top: 10px;
color:#999999;
}
.list-step-name.isActive{
color:#3B91FF;
}
.step-img{
background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-add.png");
width: 50px;
height:50px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.step-img.isActive{
background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-circle.png");
}
.list-line{
display: inline-block;
width: 84px;
border-top:5px solid #cccccc;
}
.list-line.isActive{
border-top-color:#3B91FF;
}
.context-body{
margin: 15% 0 5% 4%;
}
.popup-bg .el-dialog__header{
background-color: #3B91FF;
}
.popup-bg .el-dialog__title{
color:#FFFFFF;
}
.popup-bg .el-dialog__headerbtn .el-dialog__close{
color:#ffffff;
}
.popup-bg .el-dialog__body{
padding:10px;
}
.popup-bg .el-dialog{
min-height: 600px;
}
.flex-div-center{
display: flex;
align-items: center;
justify-content: center;
}
.list-net{
padding:20px 10px 20px 0;
margin:10px 0 10px 10px;
cursor: pointer;
}
.list-net.isActive{
background-color: #FFFFFF;
}
.network-monitor-popup .list-net.isActive .multiple-choice-button{
color:#3B91FF;
}
.margin-left-30{
margin-left:30px;
}
.faultAddIndex{
background-color: #F4F5FA;
height:100%;
padding-top: 20px;
}
.faultAddIndex-img{
width: 40%;
margin: 20px auto;
border: 1px dashed #3B91FF;
padding:30px;
}
.faultAddIndex-img span{
color:#3B91FF;
margin-top:30px;
}
.flex-clum{
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.search-text{
color:#FFFFFF;
background-color: #3B91FF;
width:90px;
padding:9px 5px;
}
.doc-name{
color:#666666;
margin-top:10px;
font-size: 12px;
}
.doc-list,.doc-list-add{
cursor: pointer;
}
\ No newline at end of file
... ...
.faultForm{
background-color: #F4F5FA;
height: 100%;
padding:30px 20px;
}
.btn-search{
margin-left: 20px;
}
.faultForm-table .el-table th.el-table__cell{
background-color: #d3f1fc;
color:#3B91FF;
}
.handleBtn{
color:#6667ff;
cursor: pointer;
}
.dialog-fault .el-form-item__label{
color:#3B91FF;
}
.div-fault .el-form-item__content{
text-align: left;
}
.diagnosisDoc-content{
margin:30px 40px;
position: relative;
}
.diagnosisBtn{
color:#ff7979;
cursor: pointer;
}
.step-img-dia{
width: 50px;
height:50px;
border-radius: 50%;
background-color:#1bdf71;
}
.list-line-dia{
width: 84px;
border-top:5px solid #1bdf71;
}
.step-img-yellow{
background-color:#fea500;
}
.list-line-dia-yellow{
border-top-color: #fea500;
}
.step-img-red{
background-color:#fe0000;
}
.list-line-dia-red{
border-top-color: #fe0000;
}
.diagnosisDoc-content .list-stet-net:last-child .list-line-dia{
display: none;
}
.progress-con{
width:80%;
margin:0 20px;
}
.program-text{
color:#666666;
margin-bottom: 15px;
}
.color-yellow{
color:#fea500;
}
.color-green{
color:#1bdf71;
}
.progress-div .el-progress-bar__outer{
background-color: #fea500;
}
.margin-left{
margin-left:10px;
}
.program-table{
border:1px solid #ccc;
margin-top:20px;
}
.width-20{
width:20%;
}
.text-color{
color:#3B91FF;
}
.program-td{
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.program-padding{
padding:16px 20px;
}
.flex-1-width{
flex:1;
}
.program-td-text{
padding: 15px 30px;
color: #fff;
margin-right:3px;
background: #1bdf71;
}
.program-td-text-green{
background: #1bdf71;
}
.program-td-text-yellow{
background: #fea500;
}
.program-td-text-red{
background: #fe0000;
}
.program-tr:last-child .program-td{
border-bottom:none;
}
.program-tr .program-td:last-child{
border-right:none;
}
.margin-left-30{
margin-left: 30px;
}
.program-div{
border:1px solid #ccc;
padding:15px ;
flex:1;
}
.margin-top-bottom-30{
margin:30px 0;
}
.margin-top-bottom-10{
margin:10px 0;
}
.export-div{
position: absolute;
right:0;
top:0;
}
\ No newline at end of file
... ...
... ... @@ -15,9 +15,11 @@
</div>
</el-col>
<el-col :span="20" style="text-align: right;padding-right: 10px">
<slot name="timeRange"></slot>
<slot name="frequency"></slot>
<slot name="tools"></slot>
<div style="display: flex;padding-left: calc(100% - 430px);">
<slot name="timeRange"></slot>
<slot name="frequency"></slot>
<slot name="tools"></slot>
</div>
</el-col>
</el-row>
... ...
... ... @@ -193,8 +193,7 @@
<el-row :gutter="5" >
<el-col :span="8" v-for="item in btnType.data">
<el-form-item :label="item.name" :prop="item.name" class="form-class">
<el-input v-if="item.extend && item.extend.dict == undefined" v-model="item.value"></el-input>
<el-input v-if="item.extend == null || item.extend.dict == undefined" v-model="item.value"></el-input>
<el-select v-else v-model="item.value" :placeholder="`请选择${item.name}`">
<el-option
v-for="item in item.extend.dict"
... ...
... ... @@ -12,13 +12,16 @@ const assets = (props, {attrs, slots, emit}) => {
//查询资产类型列表
let getAssetType = () => {
if(Object.keys(icon.value).length > 0){
return;
}
proxy.$http.post(`/api-web/manage/ddic/findSucDdics/OPS_SECOND_PROPERTY`, {}, function (res) {
if (res && res.data.length > 0) {
icon.value = {};
res.data.forEach(function(item, index, arr){
let code = item.ddicCode;
let obj = {};
code = code.substring(code.lastIndexOf("_") + 1, code.length).toLowerCase();
// code = code.substring(code.lastIndexOf("_") + 1, code.length).toLowerCase();
obj.name=item.ddicName;
obj.icon=item.ddicDesc;
icon.value[code] =obj;
... ...
... ... @@ -117,13 +117,29 @@ const routes = [{
},
{
path: '/analysis/view',
name: 'view',
name: 'analysisView',
component: () => myImport('views/analysis/view/index')
},
{
path: '/fault/index',
name: 'view',
component: () => myImport('views/faultDiagnosis/index')
name: 'faultIndex',
// component: () => myImport('views/faultDiagnosis/index')
component: () => myImport('views/faultDiagnosis/components/faultForm/index')
},
{
path: '/fault/faultForm',
name: 'faultForm',
component: () => myImport('views/faultDiagnosis/components/faultForm/index')
},
{
path: '/fault/faultAddIndex',
name: 'faultAddIndex',
component: () => myImport('views/faultDiagnosis/components/faultAddIndex/index')
},
{
path: '/fault/diagnosisDoc',
name: 'diagnosisDoc',
component: () => myImport('views/faultDiagnosis/components/diagnosisDoc/index')
}
];
... ...
... ... @@ -273,7 +273,12 @@ export default {
let getChartData = () => {
let timeScope = form.value.scene.timeScope.replaceAll("time_scope_", "")
let timeScope = '';
try {
timeScope = form.value.scene.timeScope.replaceAll("time_scope_", "")
}catch (e) {
timeScope = form.value.scene.timeScope.replace("time_scope_", "")
}
if (timeScope == '') {
proxy.$global.showMsg("请选择时间范围！", "warning");
return;
... ...
... ... @@ -7,9 +7,8 @@
<div class="analysis-index-container" style="display: grid;">
<img src="/vue3/src/assets/images/analysis/icon-add.png" style="margin-left: 20px;"></img>
<span style="text-align: center;line-height: 50px;color: #0C4493">点击添加对比分析</span>
</div>
</router-link>
</div>
</div>
\ No newline at end of file
</div>
... ...
... ... @@ -10,14 +10,18 @@
</template>
<template #timeRange="scope">
{{ item.node.timeScope }}
<div style="margin-left: 10px">
{{ item.node.timeScope }}
</div>
</template>
<template #frequency="scope">
{{ item.node.frequency }}
<div style="margin-left: 10px">
{{ item.node.frequency }}
</div>
</template>
<template #tools="scope">
<router-link :to="'/analysis/add?configId=' + item.node.id " class="analysis link-type">
<router-link :to="'/analysis/add?configId=' + item.node.id " class="analysis link-type" style="margin-left: 10px">
编辑
</router-link>
</template>
... ...
<div class="faultAddIndex diagnosisDoc">
<el-row>
<el-col :span="6">
<div class="search-input margin-30 flex-div-start">
<el-input v-model="input" placeholder="故障诊断" />
<span class="search-text">搜索</span>
</div>
</el-col>
</el-row>
<el-row class="margin-all-30">
<el-col :span="3" v-for="item in 2">
<div class="doc-list flex-clum">
<img src="./src/assets/images/faultDiagnosis/icon-doc.png" alt="">
<span class="doc-name">电子税务局可用性诊断</span>
</div>
</el-col>
<el-col :span="3">
<div class="doc-list-add" @click="addDiagnosisDoc">
<img src="./src/assets/images/faultDiagnosis/icon-add.png" alt="">
</div>
</el-col>
</el-row>
</div>
\ No newline at end of file
... ...
export default {
name: 'diagnosisDoc',
template: '',
components: {},
data () {
return {
}
},
setup(){
const {proxy} = Vue.getCurrentInstance();
},
computed: {},
methods: {
//添加
addDiagnosisDoc(){}
},
mounted () {
},
unmounted () {}
}
\ No newline at end of file
... ...
<div class="faultAddIndex">
<div class="faultAddIndex-img flex-clum" @click="addFault">
<img src="./src/assets/images/faultDiagnosis/icon-add.png" alt="">
<span>点击添加故障诊断配置</span>
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'faultAddIndex',
template: '',
components: {},
data () {
return {
}
},
setup(){
const {proxy} = Vue.getCurrentInstance();
},
computed: {},
methods: {
//添加
addFault(){}
},
mounted () {
},
unmounted () {}
}
\ No newline at end of file
... ...
<div class="faultForm">
<el-row>
<el-col :span="12" class="flex-div">
<div class="grid-content bg-purple">
<el-input v-model="input" placeholder="输入关键字" class="fault-book-input"/>
</div>
<div class="grid-content bg-purple">
<el-select v-model="value" placeholder="故障分类">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="grid-content bg-purple btn-search">
<el-button class="" type="primary">搜索</el-button>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="faultForm-table margin-top flex-div-start margin-30">
<el-table :data="faultFormTableData" border height="250" style="width: 100%">
<el-table-column align="center" type="index" prop="index" label="序号" width="80" />
<el-table-column align="center" prop="categories" label="故障分类" 个 />
<el-table-column align="center" prop="faultBody" label="故障主体" 个 >
<template #default="scope">
<div class="diagnosisBtn">
<span @click="handleDiagnosis(scope.row)" class="list-data-text">{{ scope.row.faultBody}}</span>
</div>
</template>
</el-table-column>
<el-table-column align="center" prop="startTime" label="发生时间" 个 />
<el-table-column align="center" prop="state" label="故障状态" 个 />
<el-table-column align="center" prop="mode" label="处理方式" 个 />
<el-table-column align="center" prop="handleTime" label="处理时间" 个 />
<el-table-column align="center" prop="handlePeople" label="处理人" 个 />
<el-table-column align="center" prop="duration" label="持续时长" 个 />
<el-table-column align="center" prop="range" label="影响范围" 个 />
<el-table-column align="center" prop="categories" label="操作" 个 >
<template #default="scope">
<div class="handleBtn">
<span @click="handleFault(scope.row)" class="list-data-text">处理{{ scope.row.categories }}</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
<!--处理故障弹框-->
<div class="dialog-fault popup-bg">
<el-dialog v-model="faultDiagnosisVisible" title="故障处理内容" width="60%">
<el-form ref="faultHandleForm" :model="faultHandleForm" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="故障分类">
<el-input v-model="faultHandleForm.categories"></el-input>
</el-form-item>
<el-form-item label="当前状态">
<el-input v-model="faultHandleForm.state"></el-input>
</el-form-item>
<el-form-item label="故障主体">
<el-input v-model="faultHandleForm.faultBody"></el-input>
</el-form-item>
<el-form-item class="flex-div-start div-fault " label="处理结果">
<el-radio-group v-model="faultHandleForm.state">
<el-radio label="未解决"></el-radio>
<el-radio label="已解决"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发生时间">
<el-input v-model="faultHandleForm.startTime"></el-input>
</el-form-item>
<el-form-item label="持续时长">
<el-input v-model="faultHandleForm.duration"></el-input>
</el-form-item>
<el-form-item label="影响范围">
<el-input v-model="faultHandleForm.range"></el-input>
</el-form-item>
<el-form-item label="处理时间">
<el-input v-model="faultHandleForm.handleTime"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="原因分析">
<el-input :rows="4" v-model="faultHandleForm.desc" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="处理方案">
<el-input :rows="4" v-model="faultHandleForm.programme" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="btn-faultDiagnosis">
<el-button>取消</el-button>
<el-button type="primary" @click="onSubmit">保存</el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-dialog>
<el-dialog v-model="faultDiagnosisDocVisible" title="电子税务局业务诊断报告" width="60%">
<div class="diagnosisDoc-content">
<div class="export-div" @click="exportDoc"><img src="./src/assets/images/faultDiagnosis/icon-export.png" alt=""></div>
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-green.png" class="title-img">
<span>网络检测</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="3" class="list-stet-net" v-for="(item,index) in 4">
<div class="list-step flex-div-start">
<div class="list-step-top flex-div margin-30">
<div :class="['step-img-dia',{'step-img-yellow':index==0,'step-img-red':index==2}]">
<i class="icon-step"></i>
</div>
<span :class="['list-line-dia',{'list-line-dia-yellow':index==0,'list-line-dia-red':index==2}]"></span>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-yellow.png" class="title-img">
<span>应用检测</span>
</div>
</el-col>
</el-row>
<el-row>
<div class="program-text margin-30 flex-div-start">
<div>检测量：<span>5节点</span></div>
<span class="margin-left">20项指标</span><span class="margin-left">18项正常</span><span class="margin-left">2项异常</span>
</div>
</el-row>
<el-row>
<el-col :span="24">
<div class="progress-div margin-30 flex-div-start">
<div class="color-green">正常</div>
<div class="progress-con">
<el-progress stroke-width="12" :percentage="percentage" :color="customColor" :show-text="false" />
</div>
<div class="color-yellow">异常</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="program-table margin-30">
<div class="program-tr flex-div-start" v-for="item in 4">
<div class="program-td program-padding flex-div-center width-20 text-color">节点{{item}}</div>
<div class="program-td flex-1-width flex-div-start">
<span :class="['program-td-text',{'program-td-text-yellow':item==1,'program-td-text-red':item==2}]">交易量响应时间</span>
<span class="program-td-text">响应时间</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-yellow.png" class="title-img">
<span>基础环境</span>
</div>
</el-col>
</el-row>
<el-row>
<div class="program-text margin-30 flex-div-start">
<div>检测量：<span>50节点</span></div>
<span class="margin-left">20项指标</span><span class="margin-left">18项正常</span><span class="margin-left">2项异常</span>
</div>
</el-row>
<el-row>
<el-col :span="24">
<div class="progress-div margin-30 flex-div-start">
<div class="color-green">正常</div>
<div class="progress-con">
<el-progress stroke-width="12" :percentage="percentage" :color="customColor" :show-text="false" />
</div>
<div class="color-yellow">异常</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="program-table margin-30">
<div class="program-tr flex-div-start" v-for="item in 4">
<div class="program-td program-padding flex-div-center width-20 text-color">服务器{{item}}</div>
<div class="program-td flex-1-width flex-div-start">
<span :class="['program-td-text',{'program-td-text-yellow':item==1,'program-td-text-red':item==2}]">cpu</span>
<span class="program-td-text">PNG状态</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="title-text margin-left-30">
<span>APM</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="program-table margin-30">
<div class="program-tr flex-div-start" v-for="item in 4">
<div class="program-td program-padding flex-div-center width-20 text-color">arms{{item}}</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">服务</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="title-text margin-left-30">
<span>推荐解决方案</span>
</div>
</el-col>
</el-row>
<el-row v-for="item in 2">
<el-col :span="24" class="margin-top-bottom-10">
<div class="flex-div-start margin-30 ">
<div class="text-color">
解决方案{{item}}：
</div>
<div class="program-div">
可通过人工调整的方式解决
</div>
</div>
</el-col>
</el-row>
<el-row >
<el-col :span="24">
<div class="btn-faultDiagnosis margin-top-bottom-30">
<el-button type="primary" @click="onSubmit">保存</el-button>
</div>
</el-col>
</el-row>
</div>
</el-dialog>
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'faultForm',
template: '',
components: {},
data () {
return {
options:[{value:120,label:'name'}],
faultFormTableData: [
{
categories: '业务指标故障',
faultBody: '电子税务局可用性下降到90%',
startTime:'2021-10-12 10:00:00',
state:'已解决',
mode:'人工处理',
handleTime:'2021-11-11 11:11:11',
handlePeople:'张三',
duration:'1小时',
range:'电子税务局系统',
},
],
faultDiagnosisVisible:false,//处理故障弹框
faultDiagnosisDocVisible:false,//电子税务局诊断报告弹框
faultHandleForm:'',//处理故障数据
percentage: 80,
customColor: '#1bdf71',
}
},
setup(){
const {proxy} = Vue.getCurrentInstance();
const faultHandleForm=Vue.ref({});
return{
faultHandleForm
}
},
computed: {},
methods: {
//处理
handleFault(item){
console.log("333",item)
this.faultHandleForm=item;
this.faultDiagnosisVisible=true;
},
//诊断书
handleDiagnosis(item){
this.faultDiagnosisDocVisible=true;
},
//下载
exportDoc(){
}
},
mounted () {
},
unmounted () {}
}
\ No newline at end of file
... ...
<div id="faultDiagnosisIndex">
<!--搜索输入框部分-->
<el-row>
<el-col :span="6">
<div class="grid-content bg-purple">
<span class="fault-book-input-text">所属业务</span>
<el-input v-model="input" placeholder="Please input 1" class="fault-book-input"/>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<span class="fault-book-input-text">名称</span>
<el-input v-model="input" placeholder="Please input 2" class="fault-book-input"/>
</div>
</el-col>
</el-row>
<div class="margin-30">
<el-row>
<el-col :span="6">
<div class="grid-content bg-purple">
<span class="fault-book-input-text">所属业务</span>
<el-input v-model="input" placeholder="Please input 1" class="fault-book-input"/>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<span class="fault-book-input-text">名称</span>
<el-input v-model="input" placeholder="Please input 2" class="fault-book-input"/>
</div>
</el-col>
</el-row>
</div>
<!--卡片分页排头-->
<el-row :gutter="12" class="fault-book-title-card">
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="clickDaultDefinitionFunc()" shadow="hover">故障定义</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="clickNetworkMonitorFunc()" shadow="hover">网络监测</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="applicationMonitorFunc()" shadow="hover">应用检测</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="basicEnvironmentFunc()" shadow="hover">基础环境</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="apmMonitorFunc()" shadow="hover">APM</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="logDetectionFunc()" shadow="hover">日志检测</el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="subscriptionReportFunc()" shadow="hover">报告订阅</el-card>
</el-col>
</el-row>
<div class="fault-card margin-30">
<el-row :gutter="12" class="fault-book-title-card">
<el-col :span="3">
<el-card class="fault-book-title-card-text isActive" @click="clickDaultDefinitionFunc()" shadow="hover"><span class="card-name">故障定义</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="clickNetworkMonitorFunc()" shadow="hover"><span class="card-name">网络监测</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="applicationMonitorFunc()" shadow="hover"><span class="card-name">应用检测</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="basicEnvironmentFunc()" shadow="hover"><span class="card-name">基础环境</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="apmMonitorFunc()" shadow="hover"><span class="card-name">APM</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="logDetectionFunc()" shadow="hover"><span class="card-name">日志检测</span></el-card>
</el-col>
<el-col :span="3">
<el-card class="fault-book-title-card-text" @click="subscriptionReportFunc()" shadow="hover"><span class="card-name">报告订阅</span></el-card>
</el-col>
</el-row>
</div>
<!---主体卡片部分-->
<!--故障定义-->
<div class="fault-definition" v-if="faultDefinitionHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img">
<span class="title-text">故障定义</span>
</span>
</div>
<div>
<span class="fault-definition-radio">
<el-radio v-model="faultDefinitionRadio" label="1">产生告警时触发</el-radio>
<el-radio v-model="faultDefinitionRadio" label="2">自定义规则</el-radio>
</span>
<span class="fault-definition-select-up">
当
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
的警告级别为
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
时触发
</span>
<span class="fault-definition-select-down">
当
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
的警告级别为
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
时触发
</span>
<div class="fault-definition margin-30" v-if="faultDefinitionHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img">
<span>故障定义</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="3" class="flex-div">
<div class="fault-definition-radio flex-div-start">
<el-radio v-model="faultDefinitionRadio" label="1">产生告警时触发</el-radio>
</div>
</el-col>
<el-col :span="21" class="flex-div">
<div class="fault-definition-select-up">
当
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
的警告级别为
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
时触发
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<div class="fault-definition-radio flex-div-start">
<el-radio v-model="faultDefinitionRadio" label="2">自定义规则</el-radio>
</div>
</div>
</el-col>
<el-col :span="21">
<div class="fault-definition-select-down">
当
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
的警告级别为
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
时触发
</div>
</el-col>
</el-row>
</div>
<!--网络检测-->
<div class="network-monitor" v-if="networkMonitorHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img">
<span class="title-text">网络检测</span>
</span>
</div>
<div class="context-radio">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="radio1" label="1">启用</el-radio>
<el-radio v-model="radio1" label="2">不启用</el-radio>
</div>
<div class="context-multiple-choice">
<span v-for="(item, index) in networkMonitorList" :key="index">
<span>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, networkMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</span>
</span>
<span>
<el-button class="multiple-choice-button" @click="networkMonitorVisible = true">添加网络检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</span>
</div>
<div class="network-monitor margin-30" v-if="networkMonitorHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img">
<span>网络检测</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-radio flex-div-start margin-30">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="faultStateRadio" label="1">启用</el-radio>
<el-radio v-model="faultStateRadio" label="2">不启用</el-radio>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-multiple-choice flex-div-start margin-30">
<div v-for="(item, index) in networkMonitorList" :key="index">
<div>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, networkMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</div>
</div>
<div class=" flex-div">
<el-button class="multiple-choice-button color-999" @click="networkMonitorVisible = true">添加网络检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
</el-col>
</el-row>
</div>
<!--应用监测-->
<div class="application-monitor" v-if="applicationMonitorHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img">
<span class="title-text">应用检测</span>
</span>
</div>
<div class="context-radio">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="radio1" label="1">启用</el-radio>
<el-radio v-model="radio1" label="2">不启用</el-radio>
</div>
<div class="context-multiple-choice">
<span v-for="(item, index) in applicationMonitorList" :key="index">
<span>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</span>
</span>
<span>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加应用检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</span>
</div>
<div class="application-monitor margin-30" v-if="applicationMonitorHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img">
<span>应用检测</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-radio flex-div-start margin-30">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="faultApplicationRadio" label="1">启用</el-radio>
<el-radio v-model="faultApplicationRadio" label="2">不启用</el-radio>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-multiple-choice flex-div-start margin-30">
<div v-for="(item, index) in applicationMonitorList" :key="index">
<div>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</div>
</div>
<div class=" flex-div">
<el-button class="multiple-choice-button color-999" @click="addNetworkMonitorItem()">添加应用检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
</el-col>
</el-row>
</div>
<!--基础环境 Basic environment-->
<div class="basic-environment" v-if="basicEnvironmentHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img">
<span class="title-text">基础环境</span>
</span>
</div>
<div class="context-radio">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="radio1" label="1">启用</el-radio>
<el-radio v-model="radio1" label="2">不启用</el-radio>
</div>
<div class="context-select">
<span class="fault-book-input-text context-select-text">选择类型</span>
<el-select v-model="value" placeholder="从业务选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model="value" placeholder="从资源选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="basic-environment margin-30" v-if="basicEnvironmentHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img">
<span>基础环境</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-radio flex-div-start margin-30">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="faultEnvironmentRadio" label="1">启用</el-radio>
<el-radio v-model="faultEnvironmentRadio" label="2">不启用</el-radio>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-select flex-div-start margin-30">
<span class="fault-book-input-text context-select-text">选择类型</span>
<el-select v-model="value" placeholder="从业务选择" class="margin-right-10">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model="value" placeholder="从资源选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="environment-table margin-top flex-div-start margin-30">
<el-table :data="environmentTableData" border height="250" style="width: 100%">
<el-table-column align="center" prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" class="margin-30" >
<template #default="scope">
<div class="list-data">
<span class="list-data-text">住址: {{ scope.row.address }}</span>
<img :id="scope.row.index" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="img-delete">
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</div>
<!--APM-->
<div class="apm-monitor" v-if="apmMonitorHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img">
<span class="title-text">APM</span>
</span>
</div>
<div class="context-radio">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="radio1" label="1">启用</el-radio>
<el-radio v-model="radio1" label="2">不启用</el-radio>
</div>
<div class="context-multiple-choice">
<span v-for="(item, index) in apmMonitorList" :key="index">
<span>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</span>
</span>
<span>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</span>
</div>
<div class="apm-monitor margin-30" v-if="apmMonitorHide">
<el-row>
<el-rol :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img">
<span>APM</span>
</div>
</el-rol>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-radio flex-div-start margin-30">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="faultAPMRadio" label="1">启用</el-radio>
<el-radio v-model="faultAPMRadio" label="2">不启用</el-radio>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-multiple-choice flex-div-start margin-30">
<div v-for="(item, index) in apmMonitorList" :key="index">
<div>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</div>
</div>
<div>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
</el-col>
</el-row>
</div>
<!--日志检测-->
<div class="log-detection" v-if="logDetectionHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img">
<span class="title-text">日志检测</span>
</span>
</div>
<div class="context-radio">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="radio1" label="1">启用</el-radio>
<el-radio v-model="radio1" label="2">不启用</el-radio>
</div>
<div class="context-multiple-choice">
<span v-for="(item, index) in logDetectionList" :key="index">
<span>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, logDetectionList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</span>
</span>
<span>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</span>
</div>
<div class="log-detection margin-30" v-if="logDetectionHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img">
<span>日志检测</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-radio flex-div-start margin-30">
<span class="fault-book-input-text">状态选择</span>
<el-radio v-model="faultLogRadio" label="1">启用</el-radio>
<el-radio v-model="faultLogRadio" label="2">不启用</el-radio>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-multiple-choice flex-div-start margin-30">
<div v-for="(item, index) in logDetectionList" :key="index">
<div>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, logDetectionList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</div>
</div>
<div>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
</el-col>
</el-row>
</div>
<!--订阅报告-->
<div class="subscription-report" v-if="subscriptionReportHide">
<div>
<span>
<img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img">
<span class="title-text">报告订阅</span>
</span>
</div>
<div class="context-multiple-choice">
<span v-for="(item, index) in subscriptionReportList" :key="index">
<span>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, subscriptionReportList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</span>
</span>
<span>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</span>
</div>
<div class="subscription-report margin-30" v-if="subscriptionReportHide">
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img">
<span>报告订阅</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-multiple-choice flex-div-start margin-30">
<div v-for="(item, index) in subscriptionReportList" :key="index">
<div>
<el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
<img :id="item.id" @click="deleteItem(item.id, subscriptionReportList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
</div>
</div>
<div>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
</el-col>
</el-row>
</div>
<!--取消和保存-->
<div class="btn-faultDiagnosis">
<el-button>取消</el-button>
<el-button type="primary">保存</el-button>
</div>
<!--网络检测弹窗-->
<div class="network-monitor-popup">
<el-dialog v-model="networkMonitorVisible" title="故障新增内容">
<div class="network-monitor-popup popup-bg">
<el-dialog v-model="networkMonitorVisible" title="故障新增内容" width="60%">
<el-row>
<el-col :span="6">
<div class="grid-content bg-purple network-monitor-popup-left">
<span>
<div>
<div class="context-head">
已配置链路
</div>
</span>
<span v-for="(item, index) in networkMonitorList" :key="index">
<span>
</div>
<div @click="clickList(index)" :class="['list-net',{'isActive':index==isClickNet}]" v-for="(item, index) in networkMonitorList" :key="index">
<div class="flex-div-center ">
<div class="multiple-choice-button">{{item.title}}</div>
<!--img-->
</span>
</span>
<span>
<img v-show="index==isClickNet" class="img-delete" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" alt="">
</div>
</div>
<div class="list-net">
<div class="multiple-choice-button">
<img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">
</div>
</span>
</div>
</div>
</el-col>
<el-col :span="18">
<div class="grid-content bg-purple-light network-monitor-popup-right">
<div class="context-head">
<span>电子税务局网络链路配置</span>
<span >
<div>电子税务局网络链路配置</div>
<div >
<img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">
</span>
</div>
</div>
<div class="context-body">
<el-row>
<el-col :span="4" v-for="(item,index) in 6">
<div class="list-step flex-div-start">
<div class="list-step-top flex-div">
<div :class="['step-img',{'isActive':index<2}]">
<i class="icon-step"></i>
</div>
<span :class="['list-line',{'isActive':index<1}]"></span>
</div>
<div v-show="index<2" class="list-step-name">
名称
</div>
<div v-show="index>=2" class="list-step-name">
点击添加
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
... ...
... ... @@ -13,6 +13,44 @@ export default {
apmMonitorHide: false,
logDetectionHide: false,
subscriptionReportHide: false,
faultDefinitionRadio:'1',//故障定义
faultStateRadio:'1',//状态启用不启用
faultApplicationRadio:'1',//应用检测
faultEnvironmentRadio:'1',//基础环境
faultAPMRadio:'1',//APM
faultLogRadio:'1',//日志
isClickNet:0,//配置链接选择
environmentTableData: [
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
],//基础环境表格数据
//网络检测选中项集合
networkMonitorList: [
{
... ... @@ -45,6 +83,11 @@ export default {
title: "arms",
type: "apmMonitor",
id: " apmMonitor1"
},
{
title: "arms2",
type: "apmMonitor",
id: " apmMonitor2"
}
],
//日志检测
... ... @@ -172,8 +215,13 @@ export default {
//点击添加网络检测item
addNetworkMonitorItem(){
},
//点击已配置链路
clickList(index){
this.isClickNet=index;
}
},
mounted () {},
unmounted () {}
... ...
... ... @@ -39,7 +39,7 @@
<div id="yxqk__banner">
<ul id="yxjk_resource_type_count_id">
<div id="yxjk_resource_type_count_id_tmpl">
<li :class="'list-'+index" v-for="(item,index) in assetOverviewData">
<li :class="'list-'+index" v-for="(item,index) in assetOverviewDataAll">
<img :src="'src/assets/images/zjdp/'+item.code+'.png'">
<div style="margin-left: .02rem;">
<p>{{item.name}}</p>
... ...
... ... @@ -32,6 +32,8 @@ export default {
}
toOrderNum(numm.value)
/*不能删除这个console*/
console.log("numDiff",proxy.numDiff)
Vue.watch(numm, (newVal) => {
toOrderNum(newVal)
})
... ...