monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 136ced3d3c1e09aef860fd3f83296aab4794e5b0 1 parent e0e18f4c

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

Inline Side-by-side
Showing 14 changed files with 1219 additions and 694 deletions
<title>故障管理</title>
<iframe src="/vue3/index.html#/fault/faultForm" class="layadmin-iframe" style="height: 99.5%!important;"/>
<!--<iframe src="/vue3/index.html#/fault/faultForm" class="layadmin-iframe" style="height: 99.5%!important;"/>-->
<iframe src="/vue3/index.html#/fault/index" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
... ... @@ -290,6 +290,7 @@
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
position: relative;
}
.step-img.isActive{
background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-circle.png");
... ... @@ -379,4 +380,27 @@
}
.doc-list,.doc-list-add{
cursor: pointer;
}
.icon-delete-right{
width:14px;
height:14px;
background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-delete-right.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
position: absolute;
right:0;
top:0;
}
.position-bottom{
position: absolute;
bottom:20px;
left: 0;
right: 0;
}
.align-center{
align-items: center;
}
.margin-bottom-50{
margin-bottom:50px;
}
\ No newline at end of file
... ...
... ... @@ -129,7 +129,7 @@ const routes = [{
path: '/fault/faultForm',
name: 'faultForm',
component: () => myImport('views/faultDiagnosis/components/faultForm/index')
},
}/*,
{
path: '/fault/faultAddIndex',
name: 'faultAddIndex',
... ... @@ -139,7 +139,7 @@ const routes = [{
path: '/fault/diagnosisDoc',
name: 'diagnosisDoc',
component: () => myImport('views/faultDiagnosis/components/diagnosisDoc/index')
}
}*/
];
// hash模式： createWebHashHistory
... ...
<div id="faultDiagnosisIndex">
<!--搜索输入框部分-->
<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"/>-->
<el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
</el-select>
</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>
<!--卡片分页排头-->
<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':isActiveIndex==1}]" @click="clickDaultDefinitionFunc(1)" shadow="hover"><span class="card-name">故障定义</span></el-card>
</el-col>
<el-col :span="3">
<el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==2}]" @click="clickNetworkMonitorFunc(2)" shadow="hover"><span class="card-name">网络监测</span></el-card>
</el-col>
<el-col :span="3">
<el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==3}]" @click="applicationMonitorFunc(3)" shadow="hover"><span class="card-name">应用检测</span></el-card>
</el-col>
<el-col :span="3">
<el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==4}]" @click="basicEnvironmentFunc(4)" shadow="hover"><span class="card-name">基础环境</span></el-card>
</el-col>
<el-col :span="3">
<el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==5}]" @click="apmMonitorFunc(5)" shadow="hover"><span class="card-name">APM</span></el-card>
</el-col>
<el-col :span="3">
<el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==6}]" @click="logDetectionFunc(6)" shadow="hover"><span class="card-name">日志检测</span></el-card>
</el-col>
<el-col :span="3">
<el-card :class="['fault-book-title-card-text',{'isActive':isActiveIndex==7}]" @click="subscriptionReportFunc(7)" shadow="hover"><span class="card-name">报告订阅</span></el-card>
</el-col>
</el-row>
</div>
<!---主体卡片部分-->
<!--故障定义-->
<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>
</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 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="addNetNode">添加网络检测</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 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 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="资源类型" width="180" />
<el-table-column prop="address" label="指标" 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 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 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 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 popup-bg">
<DiagnosisNet v-if="networkMonitorVisible" @callback="getNetworkMonitorList" ></DiagnosisNet>
<!-- <div class="network-monitor-popup-left">-->
<!-- <span>-->
<!-- <div class="context-head">-->
<!-- 已配置链路-->
<!-- </div>-->
<!-- </span>-->
<!-- <span v-for="(item, index) in networkMonitorList" :key="index">-->
<!-- <span>-->
<!-- <div class="multiple-choice-button">{{item.title}}</div>-->
<!-- &lt;!&ndash;img&ndash;&gt;-->
<!-- </span>-->
<!-- </span>-->
<!-- <span>-->
<!-- <div class="multiple-choice-button">-->
<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">-->
<!-- </div>-->
<!-- </span>-->
<!-- </div>-->
<!-- <div class="network-monitor-popup-right">-->
<!-- <div class="context-head">-->
<!-- <span>电子税务局网络链路配置</span>-->
<!-- <span>-->
<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">-->
<!-- </span>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'faultDiagnosis',
template: '',
components: {
'DiagnosisNet': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/diagnosisNet/index')
),//网络监测组件
},
props:['detailData'],
data () {
return {
isActiveIndex:1,
multiple_choice_button_id_Tmpl: '',
multiple_choice_button_id: '',
faultDefinitionHide: true,
networkMonitorHide: false,
applicationMonitorHide: false,
basicEnvironmentHide: false,
apmMonitorHide: false,
logDetectionHide: false,
subscriptionReportHide: false,
faultDefinitionRadio:'1',//故障定义
faultStateRadio:'1',//状态启用不启用
faultApplicationRadio:'1',//应用检测
faultEnvironmentRadio:'1',//基础环境
faultAPMRadio:'1',//APM
faultLogRadio:'1',//日志
// isClickNet:0,//配置链接选择
environmentTableData: [
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
],//基础环境表格数据
//网络检测选中项集合
networkMonitorList: [
{
title: "电子税务局外用链路1",
type: "networkMonitor",
id: "networkMonitor1"
},
{
title: "电子税务局外用链路2",
type: "networkMonitor",
id: "networkMonitor2"
},
{
title: "电子税务局外用链路3",
type: "networkMonitor",
id: "networkMonitor3"
}
],
//应用检测选中项集合
applicationMonitorList: [
{
title: "从对接过来的NPM中选择",
type: "applicationMonitor",
id: "applicationMonitor1"
}
],
//APM
apmMonitorList: [
{
title: "arms",
type: "apmMonitor",
id: " apmMonitor1"
},
{
title: "arms2",
type: "apmMonitor",
id: " apmMonitor2"
}
],
//日志检测
logDetectionList: [
{
title: "日志检测1",
type: "logDetection",
id: " logDetection1"
}
],
//订阅人员
//订阅人员
subscriptionReportList: [
{
title: "张三",
type: "subscriptionReport",
id: " subscriptionReport1"
},
{
title: "李四",
type: "subscriptionReport",
id: " subscriptionReport2"
},
{
title: "王五",
type: "subscriptionReport",
id: " subscriptionReport3"
}
],
networkMonitorVisible: false,
//网络监测配置链路节点数据
// nodeData:[{name:'',img:''}]
//所属业务列表数据
busTypeList:'',
}
},
setup(props){
let busTypeArr = props.detailData?[props.detailData.bizId]:Vue.ref();
return{
busTypeArr
}
},
computed: {},
methods: {
init(){
let that=this;
this.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
if (res && res.data) {
that.busTypeList = res.data;
}
})
},
hiddenAll(){
this.faultDefinitionHide = false;
this.networkMonitorHide = false;
this.applicationMonitorHide = false;
this.basicEnvironmentHide = false;
this.apmMonitorHide = false;
this.logDetectionHide = false;
this.subscriptionReportHide = false;
},
// 打开故障定义卡片
clickDaultDefinitionFunc(index){
this.hiddenAll();
this.faultDefinitionHide = true;
this.isActiveIndex=index;
},
//打开网络监测卡片
clickNetworkMonitorFunc(index){
this.hiddenAll();
this.networkMonitorHide = true;
this.isActiveIndex=index;
},
//打开应用监测卡片
applicationMonitorFunc(index){
this.hiddenAll();
this.applicationMonitorHide = true;
this.isActiveIndex=index;
},
//打开基础环境卡片
basicEnvironmentFunc(index){
this.hiddenAll();
this.basicEnvironmentHide = true;
this.isActiveIndex=index;
},
//APM
apmMonitorFunc(index){
this.hiddenAll();
this.apmMonitorHide = true;
this.isActiveIndex=index;
},
//日志检测
logDetectionFunc(index){
this.hiddenAll();
this.logDetectionHide = true;
this.isActiveIndex=index;
},
//报告订阅
subscriptionReportFunc(index){
this.hiddenAll();
this.subscriptionReportHide = true;
this.isActiveIndex=index;
},
//遍历集合，动态增加集合内item
showItemList(){
},
deleteItem(id, list){
var newList = [];
var type = '';
$.each(list,function (index, value) {
var valueId = value.id;
type = value.type;
if(valueId === id){
console.log("点击删除id为:" + valueId + "的值")
} else {
newList.push(value)
}
});
switch (type) {
case "networkMonitor":
//网络检测
this.networkMonitorList = newList;
break;
case "applicationMonitor":
//网络检测
this.applicationMonitorList = newList;
break;
case "apmMonitor":
//APM
this.apmMonitorList = newList;
break;
case "logDetection":
//日志检测
this.logDetectionList = newList;
break;
case "subscriptionReport":
//订阅人员
this.subscriptionReportList = newList;
break;
case "networkMonitor5":
//网络检测
break;
case "networkMonitor6":
//网络检测
break;
}
},
//点击添加网络检测item
addNetworkMonitorItem(){
},
//点击添加网络监测
addNetNode(){
this.networkMonitorVisible = true;
},
//关闭网络测试添加配置节点弹框
getNetworkMonitorList(itemData){
console.log("itemdata",itemData)
this.networkMonitorVisible=false;
// this.networkMonitorList=itemData;
}
/* //点击已配置链路
clickList(item,index){
this.isClickNet=index;
this.nodeData=[
{
name:'节点1',
img:'123'
},
{
name:'节点2',
img:'123'
}
]
this.nodeData.push({name:'',img:''})
},
//新增配置链路节点
addSet(){
this.nodeData=[{name:'',img:''}]
},
//删除配置节点
deletNode(item){
},
//获取配置链接节点数据
getNodeData(){
this.nodeData=[
{
name:'节点1',
img:'123'
},
{
name:'节点2',
img:'123'
}
]
this.nodeData.push({name:'',img:''})
}*/
},
mounted () {
this.init()
},
unmounted () {}
}
\ No newline at end of file
... ...
... ... @@ -9,10 +9,10 @@
</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">
<el-col :span="3" v-for="(item,index) in diagnosisData">
<div class="doc-list flex-clum" @click="detailDiagnosisDoc(item)">
<img src="./src/assets/images/faultDiagnosis/icon-doc.png" alt="">
<span class="doc-name">电子税务局可用性诊断</span>
<span class="doc-name">{{item.name}}</span>
</div>
</el-col>
<el-col :span="3">
... ...
... ... @@ -2,6 +2,7 @@ export default {
name: 'diagnosisDoc',
template: '',
components: {},
props:['diagnosisData'],
data () {
return {
... ... @@ -14,7 +15,17 @@ export default {
computed: {},
methods: {
//添加
addDiagnosisDoc(){}
addDiagnosisDoc(){
this.$emit('getItem','Diagnosis')
},
//详情
detailDiagnosisDoc(item){
let params={
item:item,
componentName:'Diagnosis'
}
this.$emit('getItemDetail',params)
}
},
mounted () {
... ...
<el-dialog v-model="networkMonitorVisible" :title="titleName" width="60%" @close="closeDialog">
<el-row v-if="!tableVisible">
<el-col :span="6">
<div class="grid-content bg-purple network-monitor-popup-left">
<div>
<div class="context-head">
已配置链路
</div>
</div>
<div @click="clickList(item,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 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 @click="addSet" src="./src/assets/images/faultDiagnosis/icon-popup-add.png">
</div>
</div>
</div>
</el-col>
<el-col :span="18">
<div class="grid-content bg-purple-light network-monitor-popup-right">
<div class="set-div">
<div class="context-head">
<div>电子税务局网络链路配置</div>
<div >
<img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">
</div>
</div>
<div class="context-body">
<el-row v-if="!addSetLIstVisible">
<el-col :span="4" v-for="(item,index) in nodeData">
<div class="list-step flex-div-start">
<div class="list-step-top flex-div">
<div @click="addTableList" :class="['step-img',{'isActive':item.name}]">
<i v-if="item.name" class="icon-delete-right" @click.stop="deleteNode(item,index)"></i>
<i class="icon-step"></i>
</div>
<span :class="['list-line',{'isActive':item.name && index<nodeData.length}]"></span>
</div>
<div v-show="item.name" class="list-step-name">
{{item.name}}
</div>
<div v-show="!item.name" class="list-step-name">
点击添加
</div>
</div>
</el-col>
</el-row>
<el-row>
<div class="flex-div" v-if="addSetLIstVisible">
<img class="cursorClass" @click="addTableList" src="/vue3/src/assets/images/faultDiagnosis/icon-add-node.png" alt="">
</div>
</el-row>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row v-if="tableVisible">
<el-col :span="24">
<div class="set-add-div">
<el-row>
<el-col :span="24">
<div class="flex-div-start margin-top-bottom-10">
<el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
</el-select>
<el-dropdown class="margin-right-10">
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>
<el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标">
<el-option
v-for="item in kpiList"
:label="item.kpiName" :value="item.kpiId"></el-option>
</el-select>
<el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
<div class="flex-div-start">
<el-button type="primary" @click="onReset()">重置</el-button>
<el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
</div>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count"
:showBorder="true" :loading="false"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
<i class="el-icon-plus"/> 添加
</el-button>
</template>
</cm-table-page>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<div v-if="tableVisible" class="margin-top flex-center position-bottom">
<el-button @click="cancleList">取消</el-button>
<el-button @click="saveList" type="primary">保存</el-button>
</div>
</el-dialog>
... ...
export default {
name: 'faultDiagnosis',
template: '',
components: {},
// props:['networkMonitorList'],
data () {
return {
titleName:'故障新增内容',
tableVisible:false,//添加配置列表是否显示
networkMonitorVisible: true,
isClickNet:-1,//配置链接选择
//网络检测配置链路列表
networkMonitorList: [
{
title: "电子税务局外用链路1",
type: "networkMonitor",
id: "networkMonitor1"
},
{
title: "电子税务局外用链路2",
type: "networkMonitor",
id: "networkMonitor2"
},
{
title: "电子税务局外用链路3",
type: "networkMonitor",
id: "networkMonitor3"
}
],
//网络监测配置链路节点数据
nodeData:[{name:'',img:''}],
columns:[
{
prop: 'busTypeName',
label: '业务系统',
sortable: true,
align: 'center',
},
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
},
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center',
},
{
prop: 'ip',
label: 'ip地址',
sortable: true,
align: 'center',
},
{
prop: 'kpiName',
label: '指标名称',
sortable: true,
align: 'center',
},
{
prop: 'flag',
label: '指标标识',
sortable: true,
align: 'center',
}
],
// tabSecondList:[],//节点配置列表数据
addSetLIstVisible:true,//无节点配置列表是的添加配置
}
},
computed: {},
setup(){
const {proxy} = Vue.getCurrentInstance();
let id = proxy.$global.getQueryVariable('configId') ;
let config = Vue.ref(id == false ? null : id);
let count=Vue.ref(0);
let tableDataList = Vue.ref([]);
let resTypeArr = Vue.ref([]);
let kpiTypeArr = Vue.ref([]);
let busTypeArr = Vue.ref([]);
let keyWords= Vue.ref('');
let resTypeList = Vue.ref([]);
let kpiList = Vue.ref([]);
let busTypeList = Vue.ref([]);
let init = () =>{
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
if (res && res.data) {
proxy.kpiList = res.data;
}
})
proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
if (res && res.data) {
proxy.busTypeList = res.data;
}
})
}
let onReset = () => {
proxy.keyWords = '';
proxy.resTypeArr = [];
proxy.kpiTypeArr = [];
proxy.busTypeArr = [];
}
// 点击按钮搜索
let onBtnSearch = () => {
proxy.loadTableDataList();
}
return {
config,
count,
tableDataList,
keyWords,
resTypeArr,
kpiTypeArr,
busTypeArr,
resTypeList,
init,
onReset,
onBtnSearch
}
},
methods: {
//点击已配置链路
clickList(item,index){
this.isClickNet=index;
this.addSetLIstVisible=false;
this.nodeData=[
{
name:'节点1',
img:'123'
},
{
name:'节点2',
img:'123'
}
]
this.nodeData.push({name:'',img:''})
},
//新增配置链路节点
addSet(){
// this.tableVisible=false;
this.addSetLIstVisible=true;
this.nodeData=[];
this.isClickNet=-1;
},
//删除配置节点
deleteNode(item,index){
let that=this;
this.$global.confirm("确认删除节点吗？", function () {
that.$global.showMsg("删除成功！")
that.nodeData.splice(index, 1);
if(that.nodeData.length==1){
this.addSetLIstVisible=true;
}
// that.getNodeData();
})
},
//获取配置链接节点数据
getNodeData(){
this.nodeData=[
{
name:'节点1',
img:'123'
},
{
name:'节点2',
img:'123'
}
]
if(this.nodeData.length>1){
this.addSetLIstVisible=false;
this.isClickNet=0;
}
this.nodeData.push({name:'',img:''})
},
//点击添加节点
addTableList(){
this.tableVisible=true;
this.titleName='添加内容';
this.init();
this.getNodeList();
},
//取消节点列表配置
cancleList(){
this.tableVisible=false;
this.titleName='故障新增内容';
},
//保存节点添加配置
saveList(){
this.tableVisible=false;
this.titleName='故障新增内容';
},
//重新加载表格数据
loadTableDataList(){
this.getNodeList()
},
//获取配置节点列表数据
getNodeList(){
let that=this;
this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
if (res && res.success) {
that.count = res.count;
that.tableDataList = res.data;
}
});
},
//配置参数
getParams(){
return {
keyWords: this.keyWords,
resType: this.resTypeArr.join(','),
kpiId: this.kpiTypeArr.join(','),
busId: this.busTypeArr.join(','),
configId: this.config,
page: 1,
limit: 5
}
},
//关闭弹框
closeDialog(){
this.$emit('callback', '111');
}
},
mounted () {
this.getNodeData();
},
unmounted () {}
}
\ No newline at end of file
... ...
... ... @@ -2,6 +2,7 @@ export default {
name: 'faultAddIndex',
template: '',
components: {},
props:['diagnosisData'],
data () {
return {
... ...
<div id="faultDiagnosisIndex">
<!--搜索输入框部分-->
<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>
<!--卡片分页排头-->
<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 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>
</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 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 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 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="资源类型" width="180" />
<el-table-column prop="address" label="指标" 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 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 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 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 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">
<div>
<div class="context-head">
已配置链路
</div>
</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 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>
</div>
</div>
</el-col>
<el-col :span="18">
<div class="grid-content bg-purple-light network-monitor-popup-right">
<div class="context-head">
<div>电子税务局网络链路配置</div>
<div >
<img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">
</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>
</el-row>
<!-- <div class="network-monitor-popup-left">-->
<!-- <span>-->
<!-- <div class="context-head">-->
<!-- 已配置链路-->
<!-- </div>-->
<!-- </span>-->
<!-- <span v-for="(item, index) in networkMonitorList" :key="index">-->
<!-- <span>-->
<!-- <div class="multiple-choice-button">{{item.title}}</div>-->
<!-- &lt;!&ndash;img&ndash;&gt;-->
<!-- </span>-->
<!-- </span>-->
<!-- <span>-->
<!-- <div class="multiple-choice-button">-->
<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">-->
<!-- </div>-->
<!-- </span>-->
<!-- </div>-->
<!-- <div class="network-monitor-popup-right">-->
<!-- <div class="context-head">-->
<!-- <span>电子税务局网络链路配置</span>-->
<!-- <span>-->
<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">-->
<!-- </span>-->
<!-- </div>-->
<!-- </div>-->
</el-dialog>
</div>
</div>
\ No newline at end of file
<component :is="componentItem" :diagnosisData="diagnosisData" @getItem="getItem" @getItemDetail="getItemDetail" :detailData="detailData" />
<!--<FaultAddIndex></FaultAddIndex>-->
\ No newline at end of file
... ...
export default {
name: 'faultDiagnosis',
name: 'zjdaping',
template: '',
components: {},
data () {
return {
multiple_choice_button_id_Tmpl: '',
multiple_choice_button_id: '',
faultDefinitionHide: false,
networkMonitorHide: false,
applicationMonitorHide: false,
basicEnvironmentHide: false,
apmMonitorHide: false,
logDetectionHide: false,
subscriptionReportHide: false,
faultDefinitionRadio:'1',//故障定义
faultStateRadio:'1',//状态启用不启用
faultApplicationRadio:'1',//应用检测
faultEnvironmentRadio:'1',//基础环境
faultAPMRadio:'1',//APM
faultLogRadio:'1',//日志
isClickNet:0,//配置链接选择
environmentTableData: [
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
components: {
'FaultForm': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/faultForm/index')
),//故障表格
'FaultAddIndex': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/faultAddIndex/index')
),//配置添加组件
'DiagnosisDoc': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/diagnosisDoc/index')
),//故障诊断文档组件
'Diagnosis': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/diagnosis/index')
),//故障诊断书
],//基础环境表格数据
//网络检测选中项集合
networkMonitorList: [
{
title: "电子税务局外用链路1",
type: "networkMonitor",
id: "networkMonitor1"
},
{
title: "电子税务局外用链路2",
type: "networkMonitor",
id: "networkMonitor2"
},
{
title: "电子税务局外用链路3",
type: "networkMonitor",
id: "networkMonitor3"
}
],
//应用检测选中项集合
applicationMonitorList: [
{
title: "从对接过来的NPM中选择",
type: "applicationMonitor",
id: "applicationMonitor1"
}
],
//APM
apmMonitorList: [
{
title: "arms",
type: "apmMonitor",
id: " apmMonitor1"
},
{
title: "arms2",
type: "apmMonitor",
id: " apmMonitor2"
}
],
//日志检测
logDetectionList: [
{
title: "日志检测1",
type: "logDetection",
id: " logDetection1"
}
],
//订阅人员
//订阅人员
subscriptionReportList: [
{
title: "张三",
type: "subscriptionReport",
id: " subscriptionReport1"
},
{
title: "李四",
type: "subscriptionReport",
id: " subscriptionReport2"
},
{
title: "王五",
type: "subscriptionReport",
id: " subscriptionReport3"
}
],
networkMonitorVisible: false,
},
data() {
return {
}
},
computed: {},
methods: {
hiddenAll(){
this.faultDefinitionHide = false;
this.networkMonitorHide = false;
this.applicationMonitorHide = false;
this.basicEnvironmentHide = false;
this.apmMonitorHide = false;
this.logDetectionHide = false;
this.subscriptionReportHide = false;
},
// 打开故障定义卡片
clickDaultDefinitionFunc(){
this.hiddenAll();
this.faultDefinitionHide = true;
},
//打开网络监测卡片
clickNetworkMonitorFunc(){
this.hiddenAll();
this.networkMonitorHide = true;
},
//打开应用监测卡片
applicationMonitorFunc(){
this.hiddenAll();
this.applicationMonitorHide = true;
},
//打开基础环境卡片
basicEnvironmentFunc(){
this.hiddenAll();
this.basicEnvironmentHide = true;
},
//APM
apmMonitorFunc(){
this.hiddenAll();
this.apmMonitorHide = true;
},
//日志检测
logDetectionFunc(){
this.hiddenAll();
this.logDetectionHide = true;
},
//报告订阅
subscriptionReportFunc(){
this.hiddenAll();
this.subscriptionReportHide = true;
},
//遍历集合，动态增加集合内item
showItemList(){
},
deleteItem(id, list){
var newList = [];
var type = '';
$.each(list,function (index, value) {
var valueId = value.id;
type = value.type;
if(valueId === id){
console.log("点击删除id为:" + valueId + "的值")
} else {
newList.push(value)
}
});
switch (type) {
case "networkMonitor":
//网络检测
this.networkMonitorList = newList;
break;
case "applicationMonitor":
//网络检测
this.applicationMonitorList = newList;
break;
case "apmMonitor":
//APM
this.apmMonitorList = newList;
break;
case "logDetection":
//日志检测
this.logDetectionList = newList;
break;
case "subscriptionReport":
//订阅人员
this.subscriptionReportList = newList;
break;
case "networkMonitor5":
//网络检测
break;
case "networkMonitor6":
//网络检测
break;
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
//允许的所有组件
const allComponent=Vue.ref(['FaultAddIndex','FaultForm','DiagnosisDoc']);
//允许展示的组件
const componentItem=Vue.ref('FaultAddIndex');
//配置列表总数
let count=Vue.ref(0);
//列表数据
let diagnosisData=Vue.ref();
//选择的文档列表详情数据
let detailData=Vue.ref();
// 挂载完
Vue.onMounted(() => {
proxy.getListData()
})
const getListData=()=>{
let params={
page:1,
pageSize:10
}
},
//点击添加网络检测item
addNetworkMonitorItem(){
proxy.$http.get('/api-web/fault/conf/page',params,function (res){
if(res && res.data){
proxy.diagnosisData=res.data;
proxy.count=res.count;
if(proxy.count>0){
proxy.componentItem='DiagnosisDoc';
// proxy.componentItem='Diagnosis';
}
}
},
//点击已配置链路
clickList(index){
this.isClickNet=index;
})
}
//新增故障
const getItem=(content)=>{
console.log("111",content)
proxy.componentItem=content;
}
//修改故障
const getItemDetail=(obj)=>{
console.log("222",obj)
proxy.componentItem=obj.componentName;
proxy.detailData=obj.item;
}
},
mounted () {},
unmounted () {}
return {
allComponent,
componentItem,
count,
getListData,
diagnosisData,
getItem,
getItemDetail,
detailData
}
\ No newline at end of file
}
}
}
... ...