monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit d0ffcc00f30137253956dba294e9229fdeb6526b 1 parent c25be13b

故障联调 apm和基础环境风格统一及页码切换，表格数据默认选中

Inline Side-by-side
Showing 8 changed files with 215 additions and 132 deletions
<el-dialog v-model="APMVisible" :title="titleName" width="90%" @close="closeDialog" top="3vh">
<cm-dialog :title="titleName" width="90%" :showDialogVisible="APMVisible" @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-select class="margin-right-10" v-model="resTypeArr" @change="changeRes" filterable clearable collapse-tags placeholder="请选择资源">
<el-option
v-for="item in resTypeList"
:label="item.resName" :value="item.resId"></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" 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>
<el-button type="primary" @click="saveAll()" style="margin-left: 10px">批量添加</el-button>
<el-button type="primary" @click="saveAllData()" style="margin-left: 10px">全部添加</el-button>
</div>
<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-select class="margin-right-10" v-model="resTypeArr" @change="changeRes" filterable clearable collapse-tags placeholder="请选择资源">
<el-option
v-for="item in resTypeList"
:label="item.resName" :value="item.resId"></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" 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>
<el-button type="primary" @click="saveAll()" style="margin-left: 10px">添加选中</el-button>
<el-button type="primary" @click="saveAllData()" style="margin-left: 10px">全部添加</el-button>
</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="apmMonitorListChecked"
:showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange"
:showBorder="true" :loading="false" :pageSize="pageSize"
: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>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24" class="table-height">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange"
:showBorder="true" :loading="false" :pageSize="pageSize"
: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>
</el-row>
</div>
</div>
</el-col>
</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>
</el-row>
<div class="margin-top flex-center position-bottom">
<el-button @click="cancleList">取消</el-button>
<!-- <el-button @click="saveList" type="primary">保存</el-button>-->
</div>
</el-dialog>
... ...
... ... @@ -2,12 +2,12 @@ export default {
name: 'APM',
template: '',
components: {},
props:['propsData'],
props:['propsData','apmMonitorList','isDisplay'],
data () {
return {
titleName:'添加内容',
titleName:'APM配置',
tableVisible:false,//添加配置列表是否显示
APMVisible: true,
// APMVisible: true,
columns:[
{
prop: 'busTypeName',
... ... @@ -61,6 +61,22 @@ export default {
let targetId=Vue.ref();//所属模块id
let page=Vue.ref(1);//当前页
let pageSize=Vue.ref(5);//每页显示条数
let APMVisible=Vue.ref(false);
let modleId=Vue.ref();//模块id
let faultConfId=Vue.ref();
let bizName=Vue.ref();
let name=Vue.ref();
Vue.watch(()=>props.isDisplay,(newValue, oldValue)=>{
proxy.APMVisible=newValue;
if(newValue){
proxy.setBizId();
proxy.init();
proxy.getResData();
proxy.getNodeList();
}
})
let init = () =>{
let params1={
... ... @@ -99,6 +115,10 @@ export default {
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;
}
console.log("*",props.propsData,proxy.bizId,proxy.busTypeArr)
... ... @@ -121,7 +141,8 @@ export default {
if(res && res.object){
proxy.$global.showMsg('添加成功','success');
proxy.targetId=res.src;
proxy.APMVisible=false;
proxy.saveModel();
// proxy.APMVisible=false;
}
})
... ... @@ -139,7 +160,8 @@ export default {
if(res && res.success){
proxy.$global.showMsg('添加成功','success');
proxy.targetId=res.src;
proxy.APMVisible=false;
proxy.saveModel();
// proxy.APMVisible=false;
}
})
... ... @@ -182,7 +204,8 @@ export default {
if(res && res.object){
proxy.$global.showMsg('添加成功','success');
proxy.targetId=res.src;
proxy.APMVisible=false;
proxy.saveModel();
// proxy.APMVisible=false;
}
})
... ... @@ -198,7 +221,30 @@ export default {
proxy.pageSize=limit;
proxy.getNodeList()
}
//显示已添加过的应用列表数据
let apmMonitorListChecked=Vue.ref([]);
let setListData=()=>{
if(props.apmMonitorList){
props.apmMonitorList.map((item,index)=>{
proxy.tableDataList.map(v=>{
if(item.streamId==v.streamId){
proxy.apmMonitorListChecked.push(v)
}
})
})
}
}
return {
faultConfId,
bizName,
name,
modleId,
apmMonitorListChecked,
setListData,
APMVisible,
loadTableDataList,
saveAllData,
page,
... ... @@ -254,22 +300,58 @@ export default {
if (res && res.success) {
that.count = res.count;
that.tableDataList = res.data;
that.setListData();
}
});
},
//关闭弹框
closeDialog(){
this.$emit('callbackAPM', this.targetId);
let obj={
targetId:this.targetId,
faultConfId:this.faultConfId,
}
this.$emit('callbackAPM', obj);
},
//保存模块
saveModel(){
let that=this;
let params={
type:'npm',
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.faultConfId;
that.APMVisible=false;
}else{
that.$global.showMsg('模块保存失败','warning')
}
})
}
},
mounted () {
this.setBizId();
/* this.setBizId();
this.init();
this.getResData();
this.getNodeList();
this.getNodeList();*/
},
unmounted () {}
... ...
... ... @@ -66,7 +66,7 @@
</el-row>
<div class="margin-top flex-center position-bottom">
<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>
... ...
... ... @@ -36,7 +36,7 @@
<el-col :span="24">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count"
:showBorder="true" :loading="false"
:showBorder="true" :loading="false" :pageSize="pageSize"
:showPage="true" :showTools="isDetail" :height="(height - 500)">
<!-- <template #default="{row,prop,column}">
<div v-if="prop == 'kpiName'" class="list-data">
... ...
... ... @@ -7,10 +7,11 @@ export default {
return {
columns:[
{
prop: 'busTypeName',
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
width:'120'
},
{
prop: 'resName',
... ... @@ -23,6 +24,7 @@ export default {
label: 'ip地址',
sortable: true,
align: 'center',
width:'150'
},
{
... ... @@ -30,12 +32,14 @@ export default {
label: '指标名称',
sortable: true,
align: 'center',
width:'180'
},
{
prop: 'flag',
label: '指标标识',
sortable: true,
align: 'center',
width:'150'
}
],
environmentTableData: [
... ... @@ -87,6 +91,8 @@ export default {
let busTypeList = Vue.ref([]);
let bizId=Vue.ref();//所属业务id
let targetId=Vue.ref();//所属模块id
let page=Vue.ref(1);//当前页
let pageSize=Vue.ref(8);//每页显示条数
//是否是详情页面
let isDetail=Vue.ref(false);
... ... @@ -114,10 +120,11 @@ export default {
}
// 点击按钮搜索
let onBtnSearch = () => {
proxy.loadTableDataList();
proxy.getEnvironmentData();
}
//获取接收到的传值 bizid
let setBizId=()=>{
console.log("props.propsData",props.propsData)
if(props.propsData){
proxy.bizId=props.propsData.bizId;
proxy.targetId=props.propsData.targetId;
... ... @@ -128,9 +135,9 @@ export default {
}
// 监听编辑状态
Vue.watch(() => props.propsData.bizId, (newValue, oldVlaue) => {
console.log("bizidnew",newValue)
proxy.bizId=newValue;
proxy.resTypeArr='';
proxy.setBizId();
proxy.init();
proxy.getEnvironmentData();
... ... @@ -141,7 +148,16 @@ export default {
proxy.getEnvironmentData();
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
proxy.page=page;
proxy.pageSize=limit;
proxy.getEnvironmentData()
}
return {
loadTableDataList,
page,
pageSize,
isDetail,
changeRes,
setBizId,
... ... @@ -174,35 +190,11 @@ export default {
saveList(){
this.APMVisible=false;
},
//重新加载表格数据
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,
kpiId: this.kpiTypeArr.join(','),
busId: this.busTypeArr.join(','),
configId: this.config,
page: 1,
limit: 5
}
},
//关闭弹框
closeDialog(){
this.$emit('callbackLog', 'log');
this.$emit('callbackLog', 'base');
},
//删除表格指标
deleteItem(item){
... ... @@ -229,8 +221,8 @@ export default {
let params={
busId:this.bizId,
resId:this.resTypeArr,
page:1,
pageSize:5
page:this.page,
pageSize:this.pageSize
}
console.log("*/*/*",this.targetId)
... ...
... ... @@ -413,7 +413,7 @@
<!--应用检测弹框-->
<ApplicationMoni v-show="applicationMonitorVisible" :isDisplay="applicationMonitorVisible" :applicationMonitorList="applicationMonitorList" :propsData="propsData" @callbackApp="getApplicationMoniList"></ApplicationMoni>
<!--APM弹框-->
<APM v-if="APMVisible" :propsData="propsData" @callbackAPM="getAPMList"></APM>
<APM v-show="APMVisible" :isDisplay="APMVisible" :apmMonitorList="apmMonitorList" :propsData="propsData" @callbackAPM="getAPMList"></APM>
<!--日志监测弹框-->
<LogMonition v-if="logMonitionVisible" :propsData="propsData" @callbackLog="getLogMonitionList"></LogMonition>
<!--订阅人员弹框-->
... ...
... ... @@ -59,16 +59,6 @@ export default {
title: "电子税务局外用链路1",
type: "networkMonitor",
id: "networkMonitor1"
},
{
title: "电子税务局外用链路2",
type: "networkMonitor",
id: "networkMonitor2"
},
{
title: "电子税务局外用链路3",
type: "networkMonitor",
id: "networkMonitor3"
}
],
//应用检测选中项集合
... ... @@ -268,11 +258,14 @@ export default {
if(!this.isSaveModel()){
return;
}
this.configData.map(item=>{
if(item.type=='netlink'){
this.modleId=item.id;
}
})
if(this.configData){
this.configData.map(item=>{
if(item.type=='netlink'){
this.modleId=item.id;
}
})
}
this.hiddenAll();
this.networkMonitorHide = true;
this.isActiveIndex=index;
... ... @@ -288,11 +281,14 @@ export default {
if(!this.isSaveModel()){
return;
}
this.configData.map(item=>{
if(item.type=='npm'){
this.modleId=item.id;
}
})
if(this.configData){
this.configData.map(item=>{
if(item.type=='npm'){
this.modleId=item.id;
}
})
}
this.hiddenAll();
this.applicationMonitorHide = true;
this.isActiveIndex=index;
... ... @@ -307,11 +303,14 @@ export default {
if(!this.isSaveModel()){
return;
}
this.configData.map(item=>{
if(item.type=='base'){
this.modleId=item.id;
}
})
if(this.configData){
this.configData.map(item=>{
if(item.type=='base'){
this.modleId=item.id;
}
})
}
this.postPropsData('base',index);
/*if(this.busTypeArr){
this.hiddenAll();
... ... @@ -471,6 +470,7 @@ export default {
let that=this;
if(this.configData && this.configData.length>0){
console.log("configData",this.configData,typeVal)
console.log("that.docid",that.docId)
this.configData.map((item,index)=>{
if(item.type==typeVal){
// that.targetId=item.targetId;
... ... @@ -490,6 +490,10 @@ export default {
that.getTargetId(typeVal)
}
this.getBizName(this.busTypeArr);
if(typeVal=='base'){
this.getTargetId(typeVal);
}
console.log("lll",this.targetId)
this.propsData={
bizId:this.busTypeArr,
docId:this.docId,
... ... @@ -624,7 +628,10 @@ export default {
getAPMList(itemData){
this.APMVisible=false;
// this.apmMonitorList=itemData;
this.setTargetId(itemData);
if(itemData.faultConfId){
this.faultConfId=itemData.faultConfId;
}
this.setTargetId(itemData.targetId);
// this.targetId=itemData;
this.getApmListInfo();
},
... ...
... ... @@ -58,13 +58,13 @@
<li>添加节点</li>
</ul>
</template>
<div @click="addTableList(true,itemNode)" :class="['step-img','flex-div-center',{'isActive':itemNode[0].nodeName}]">
<div @click="addTableList(true,itemNode)" :class="['step-img','flex-div-center',{'isActive':itemNode[0].nodeName}]">
<i v-if="itemNode[0].nodeName" class="icon-delete-right" @click.stop="deleteNode(item,index)"></i>
<i class="icon-step flex-div-center"><img :src="'/src/style/img/restypeimg/'+itemNode[0].resType+'.png'" alt=""></i>
</div>
</el-tooltip>
<!-- <span @click="addTableList(false)" v-if="index+1<nodeData.length && itemNode.length<=1" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>-->
<span @click="addTableList(false,itemNode)" v-if="itemNode.length<=1 && itemNode[0].nodeName" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>
<span @click="addTableList(false,itemNode)" v-if="itemNode.length<=1 && itemNode[0].nodeName" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>
<el-tooltip
class="item"
... ... @@ -79,7 +79,7 @@
<li><span>标识名称：</span>{{itemNode[1].name}}</li>
</ul>
</template>
<span @click="addTableList(false,itemNode)" v-if="index+1<nodeData.length" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>
<span v-if="index+1<nodeData.length" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>
</el-tooltip>
</div>
<div v-show="itemNode[0].nodeName" class="list-step-name flex-div-start">
... ... @@ -178,7 +178,7 @@
</el-row>
<div v-if="tableVisible" class="margin-top flex-center position-bottom">
<div v-if="tableVisible" class="margin-top btn-faultDiagnosis flex-center position-bottom">
<el-button @click="cancleList">取消</el-button>
<!-- <el-button @click="saveList" type="primary">保存</el-button>-->
</div>
... ...