monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by ‘superliu’
Commit 62c70b01cf1015b7236067291bcc2700d3aeab0e 1 parent 49c68c52

拨测功能前端开发

Inline Side-by-side
Showing 5 changed files with 582 additions and 11 deletions
... ... @@ -41,6 +41,9 @@
<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="dialtestMonitorFunc(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==6}]" @click="logDetectionFunc(6)" shadow="hover"><span class="card-name">日志检测</span></el-card>-->
<!-- </el-col>-->
... ... @@ -342,6 +345,46 @@
</div>
<!--拨测分析-->
<div class="application-monitor margin-30" v-if="dialtestMonitorHide">
<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="faultDialtestRadio" label="1">启用</el-radio>
<el-radio v-model="faultDialtestRadio" label="0">不启用</el-radio>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-multiple-choice flex-div-start margin-30 flex-div-wrap overflow-scroll-y">
<div class="btn-el-btn margin-bottom-10" v-for="(item, index) in dialtestMonitorList" :key="index">
<div>
<el-button :disabled="faultDialtestRadio==0" class="multiple-choice-button" type="primary">{{item.taskName}}</el-button>
<!-- <img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon cursorClass">-->
<img :id="item.id" v-if="faultDialtestRadio==1" @click="deleteDialtest(item)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon cursorClass">
<img src="" v-else style="width:12px;height:12px;" class="multiple-choice-icon" alt="">
</div>
</div>
<div class="flex-div btn-el-btn margin-bottom-10" v-if="faultDialtestRadio==1">
<el-button class="multiple-choice-button color-999" @click="addDialtestMonitor()">添加拨测分析</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>
... ... @@ -423,12 +466,11 @@
<BasicEnvironmentAdd v-show="baseVisible" :isDisplay="baseVisible" :baseList="baseList" :baseCount="count" :propsData="propsData" @callbackBase="getBasicEnvironmentList"></BasicEnvironmentAdd>
<!--APM弹框-->
<APM v-show="APMVisible" :isDisplay="APMVisible" :apmMonitorList="apmMonitorList" :propsData="propsData" @callbackAPM="getAPMList"></APM>
<!--拨测分析弹框-->
<DialTest v-show="dialtestMonitorVisible" :isDisplay="dialtestMonitorVisible" :dialtestMonitorList="dialtestMonitorList" :propsData="propsData" @callbackApp="getDialtestMoniList"></DialTest>
<!--日志监测弹框-->
<LogMonition v-if="logMonitionVisible" :propsData="propsData" @callbackLog="getLogMonitionList"></LogMonition>
<!--订阅人员弹框-->
<SubscriptionReport v-if="subscriptionReportVisible" :propsData="propsData" @callbackSub="getSubscriptionReportList"></SubscriptionReport>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -14,6 +14,9 @@ export default {
'APM': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/APM/index')
),//APM组件
'DialTest': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/dialTest/index')
),//拨测分析组件
'LogMonition': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/logMonition/index')
),//日志监测组件
... ... @@ -35,6 +38,7 @@ export default {
applicationMonitorHide: false,
basicEnvironmentHide: false,
apmMonitorHide: false,
dialtestMonitorHide: false,
logDetectionHide: false,
subscriptionReportHide: false,
... ... @@ -62,6 +66,8 @@ export default {
applicationMonitorList: [],
//APM
apmMonitorList: [],
//拨测分析选中项集合
dialtestMonitorList: [],
//日志检测
logDetectionList: [
{
... ... @@ -128,6 +134,7 @@ export default {
let faultStateRadio=Vue.ref('0');//状态启用不启用
let faultApplicationRadio=Vue.ref('0');//应用检测
let faultEnvironmentRadio=Vue.ref('0');//基础环境
let faultDialtestRadio=Vue.ref('0');//拨测分析
let faultAPMRadio=Vue.ref('0');//APM
let faultLogRadio=Vue.ref('0');//日志
//故障名称
... ... @@ -170,6 +177,7 @@ export default {
{type:'npm',targetId:''},
{type:'base',targetId:''},
{type:'apm',targetId:''},
{type:'dialtest',targetId:''},
{type:'log',targetId:''},
{type:'report',targetId:''},
]
... ... @@ -214,6 +222,7 @@ export default {
faultApplicationRadio,
faultEnvironmentRadio,
faultAPMRadio,
faultDialtestRadio,
faultLogRadio,
addAlarmList,
alarmDataList,
... ... @@ -248,6 +257,7 @@ export default {
this.applicationMonitorHide = false;
this.basicEnvironmentHide = false;
this.apmMonitorHide = false;
this.dialtestMonitorHide = false;
this.logDetectionHide = false;
this.subscriptionReportHide = false;
},
... ... @@ -350,6 +360,29 @@ export default {
this.setDetailConfig(this.type)
this.getApmListInfo();
},
//拨测分析
dialtestMonitorFunc(index){
if(!this.isSaveModel()){
return;
}
if(this.configData){
this.configData.map(item=>{
if(item.type=='dialtest'){
this.modleId=item.id;
}
})
}
this.hiddenAll();
this.dialtestMonitorHide = true;
this.isActiveIndex=index;
this.type='dialtest';
this.state=this.faultDialtestRadio;
this.setDetailConfig(this.type)
this.getDialtestList();
},
//日志检测
logDetectionFunc(index){
if(!this.isSaveModel()){
... ... @@ -420,6 +453,10 @@ export default {
//APM
this.apmMonitorList = newList;
break;
case "dialtestMonitor":
//拨测分析
this.dialtestMonitorList = newList;
break;
case "logDetection":
//日志检测
this.logDetectionList = newList;
... ... @@ -480,6 +517,18 @@ export default {
}
this.APMVisible=true;
break;
case "dialtest":
//拨测分析
if(this.configData){
this.configData.map((item,index)=>{
if(item.type==typeVal){
item.state='1';
}
})
}
this.dialtestMonitorVisible=true;
break;
case "log":
//日志检测
this.logMonitionVisible=true;
... ... @@ -548,6 +597,10 @@ export default {
//APM
this.faultAPMRadio=state;
break;
case "dialtest":
//拨测分析
this.faultDialtestRadio=state;
break;
case "log":
//日志检测
this.faultLogRadio=state;
... ... @@ -563,8 +616,6 @@ export default {
postPropsData(typeVal,index){
if(this.busTypeArr){
this.switchModelDialog(typeVal,index)
this.setDetailConfig(typeVal);
// this.getTargetId(typeVal)
}else{
... ... @@ -698,6 +749,38 @@ export default {
}
})
},
//点击添加拨测分析
addDialtestMonitor(){
this.postPropsData('dialtest')
},
//关闭拨测分析弹框
getDialtestMoniList(itemData){
this.applicationMonitorVisible=false;
if(itemData.faultConfId){
this.faultConfId=itemData.faultConfId;
}
this.setTargetId(itemData.targetId);
// this.targetId=itemData;
// this.applicationMonitorList=itemData;
this.getDialtestList();
},
//获取拨测分析列表数据
getDialtestList(){
let that=this;
this.getTargetId('dialtest')
let params={
targetId:this.targetId,
bizId:this.busTypeArr
}
this.$http.get('/api-web/fault/conf/dialtest/dialtestList',params,function (res){
if(res && res.data){
that.dialtestMonitorList=res.data;
}
})
},
//点击添加日志监测弹框
addLogMonitor(){
this.postPropsData('log')
... ... @@ -800,13 +883,16 @@ export default {
break;
case "base":
//基础环境
this.state=this.faultEnvironmentRadio;
break;
case "apm":
//APM
this.state=this.faultAPMRadio;
break;
case "dialtest":
//拨测分析
this.state=this.faultDialtestRadio;
break;
case "log":
//日志检测
this.state=this.faultLogRadio;
... ... @@ -889,6 +975,10 @@ export default {
//APM
this.getApmListInfo();
break;
case "dialtest":
//应用检测
this.getDialtestList();
break;
case "log":
//日志检测
break;
... ... @@ -926,12 +1016,8 @@ export default {
that.kpiId=that.alarmList[0].kpiId;
}
}
})
},
//通过bizId查找bizName
getBizName(bizId){
... ... @@ -1068,6 +1154,19 @@ export default {
}
})
},
//删除拨测分析
deleteDialtest(item){
let that=this;
let params={
id:item.id
}
this.$http.get('/api-web/fault/conf/dialtest/deleteById',params,function (res){
if(res){
that.$global.showMsg('删除成功');
that.getDialtestList();
}
})
},
//更改业务选择
changeBUsType(val){
if(val){
... ... @@ -1115,6 +1214,9 @@ export default {
if(that.type=='npm'){
that.getAppList();
}
if(that.type=='dialtest'){
that.getDialtestList();
}
})
},
//返回首页
... ...
<cm-dialog :title="titleName" width="90%" :showDialogVisible="dialtestMonitorVisible" @hidedialog="closeDialog" :showFooter="false">
<template v-slot>
<el-row>
<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-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>
<el-button type="primary" :disabled="isLoading" @click="saveAll()" style="margin-left: 10px">批量添加</el-button>
<el-button type="primary" :disabled="isLoading" @click="saveAlldata()" style="margin-left: 10px">全部添加</el-button>
</div>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24" class="table-height">
<cm-table-page v-show="tableDataList" :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" :multipleSelection="dialtestMonitorListChecked"
:showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange"
:showBorder="true" :loading="false" :pageSize="pageSize"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #default="{row,prop,column}">
<div v-if="prop == 'url'" class="text-overflow" :title="row.url">
<span class="">{{row.url }}</span>
</div>
</template>
<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 class="margin-top btn-faultDiagnosis flex-center position-bottom">
<el-button @click="cancleList">取消</el-button>
<!-- <el-button @click="saveList" type="primary">保存</el-button>-->
</div>
</template>
</cm-dialog>
... ...
export default {
name: 'dialTest',
template: '',
components: {},
props:['propsData','dialtestMonitorList','isDisplay'],
data () {
return {
titleName:'拨测分析配置',
// applicationMonitorVisible: true,
columns:[
{
prop: 'taskName',
label: '链路名称',
sortable: true,
width:'260',
align: 'center',
},
{
prop: 'url',
label: 'url',
sortable: true,
align: 'center',
},
],
}
},
setup(props){
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 bizId=Vue.ref();//所属业务id
let targetId=Vue.ref();//所属模块id
let keyWords= Vue.ref('');
let resTypeList = Vue.ref([]);
let kpiList = Vue.ref([]);
let busTypeList = Vue.ref([]);
let networkMonitorList=Vue.ref([]);
let isLoading=Vue.ref(false);//按钮加载中
let page=Vue.ref(1);//当前页
let pageSize=Vue.ref(10);//每页显示条数
let modleId=Vue.ref();//模块id
let faultConfId=Vue.ref();
let bizName=Vue.ref();
let name=Vue.ref();
let dialtestMonitorVisible=Vue.ref(false);
Vue.watch(()=>props.isDisplay,(newValue, oldValue)=>{
proxy.dialtestMonitorVisible=newValue;
if(newValue){
proxy.setBizId();
proxy.getNodeList();
}
})
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.getNodeList();
}
//获取接收到的传值 bizid
let setBizId=()=>{
if(props.propsData){
proxy.bizId=props.propsData.bizId;
proxy.targetId=props.propsData.targetId;
proxy.busTypeArr=[props.propsData.bizId];
proxy.faultConfId=props.propsData.faultConfId;
proxy.bizName=props.propsData.bizName;
proxy.modleId=props.propsData.modleId;
proxy.name=props.propsData.name;
}
}
//添加拨测分析
let addRes=(row,index)=>{
// row.targetId=proxy.targetId;
let dialtestList=row;
dialtestList.dataScope=120;
let params={
targetId:proxy.targetId,
dialtestList:[dialtestList]
}
proxy.$http.post('/api-web/fault/conf/dialtest/batchAddDialtest',params,function (res){
if(res && res.success){
proxy.$global.showMsg('添加成功','success');
proxy.targetId=res.str;
proxy.saveModel();
// proxy.applicationMonitorVisible=false;
}else{
proxy.$global.showMsg('添加失败','warning');
}
})
}
//全部添加
let saveAlldata=()=>{
if(proxy.count==0){
proxy.$global.showMsg('暂无配置','warning');
}else{
proxy.isLoading=true;
let params={
busId:proxy.bizId,
targetId:proxy.targetId,
}
proxy.$http.post('/api-web/fault/conf/dialtest/AddAllDialtest',params,function (res){
if(res && res.success){
if(res.count==0){
proxy.$global.showMsg(res.msg,'warning');
}else{
proxy.$global.showMsg('添加成功','success');
proxy.targetId=res.str;
proxy.saveModel();
// proxy.applicationMonitorVisible=false;
}
}else{
proxy.$global.showMsg('添加失败','warning');
}
proxy.isLoading=false;
},function (err){
proxy.isLoading=false;
})
}
}
//表格全选事件
let selectionChange=(val)=>{
proxy.tableDataList.map((v,i)=>{
v.checked=false;
})
let selectData=val;
if(selectData.length>0){
selectData.map((item,index)=>{
proxy.tableDataList.map((v,i)=>{
if(item.id==v.id){
v.checked=true;
}
})
})
}else{
proxy.tableDataList.map((v,i)=>{
v.checked=false;
})
}
}
//添加选中的
let saveAll=()=>{
let dialtestListSelectData=[];
proxy.tableDataList.map(item=>{
if(item.checked){
dialtestListSelectData.push(item)
}
})
if(dialtestListSelectData.length==0){
proxy.$global.showMsg('请选择配置','warning');
}else{
proxy.isLoading=true;
let params={
targetId:proxy.targetId,
dialtestList:dialtestListSelectData
}
proxy.$http.post('/api-web/fault/conf/dialtest/batchAddDialtest',params,function (res){
if(res && res.success){
proxy.$global.showMsg('添加成功','success');
proxy.targetId=res.str;
proxy.saveModel();
// proxy.applicationMonitorVisible=false;
}else{
proxy.$global.showMsg('添加失败','warning');
}
proxy.isLoading=false;
})
}
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
proxy.page=page;
proxy.pageSize=limit;
proxy.getNodeList()
}
//显示已添加过的应用列表数据
let dialtestMonitorListChecked=Vue.ref([]);
let setListData=()=>{
if(props.dialtestMonitorList){
props.dialtestMonitorList.map((item,index)=>{
proxy.tableDataList.map(v=>{
if(item.id==v.id){
proxy.dialtestMonitorListChecked.push(v)
}
})
})
}
}
//获取拨测分析配置列表数据
let getNodeList=()=>{
proxy.$http.get(`/api-web/fault/conf/dialtestBase/list`, proxy.getParams(), function (res) {
if (res && res.success) {
proxy.count = res.count;
tableDataList.value = res.data;
proxy.setListData();
}
});
}
//关闭弹框
let closeDialog=()=>{
proxy.restData();
let obj={
targetId:proxy.targetId,
faultConfId:proxy.faultConfId,
}
proxy.$emit('callbackApp',obj);
}
//清除数据
let restData=()=>{
proxy.tableDataList='';
}
return {
closeDialog,
restData,
getNodeList,
faultConfId,
bizName,
name,
dialtestMonitorVisible,
dialtestMonitorListChecked,
setListData,
loadTableDataList,
modleId,
saveAlldata,
page,
pageSize,
selectionChange,
isLoading,
saveAll,
networkMonitorList,
setBizId,
addRes,
config,
count,
tableDataList,
kpiList,
busTypeList,
keyWords,
resTypeArr,
kpiTypeArr,
busTypeArr,
resTypeList,
bizId,
targetId,
init,
onReset,
onBtnSearch
}
},
methods: {
//取消拨测列表配置
cancleList(){
this.dialtestMonitorVisible=false;
},
//保存拨测添加配置
saveList(){
this.dialtestMonitorVisible=false;
},
//配置参数
getParams(){
return {
keyWords: this.keyWords,
// resType: this.resTypeArr.join(','),
// kpiId: this.kpiTypeArr.join(','),
// busId: this.busTypeArr.join(','),
bizId: this.bizId,
// configId: this.config,
page: this.page,
pageSize: this.pageSize
}
},
//保存模块
saveModel(){
let that=this;
let params={
type:'dialtest',
targetId:this.targetId,
state:'1',
id:this.modleId,
faultConfig:{
id:this.faultConfId,
name:this.name,
bizId: this.bizId,
bizName:this.bizName,
createBy:localStorage.getItem("lgn")
}
}
this.$http.post('/api-web/fault/conf/detail/saveConfigDetail',params,function (res){
if(res && res.success){
that.targetId=res.map.configDetail.targetId;
that.faultConfId=res.map.configDetail.faultConfig.id;
// that.$global.showMsg('保存成功','success')
// that.switchModel();
that.dialtestMonitorVisible=false;
}else{
that.$global.showMsg('模块保存失败','warning')
}
})
}
},
mounted () {
// this.init();
/* this.setBizId();
this.getNodeList();*/
},
unmounted () {}
}
\ No newline at end of file
... ...
... ... @@ -48,7 +48,7 @@ export default {
const getListData=()=>{
let params={
page:1,
pageSize:10,
pageSize:50,
name:proxy.name
}
... ...