Authored by 鲁尚清

故障联调 应用配置及网络配置模块风格统一,保存配置时保存模块

<el-dialog v-model="applicationMonitorVisible" :title="titleName" width="90%" @close="closeDialog" top="3vh">
<cm-dialog :title="titleName" width="90%" :showDialogVisible="applicationMonitorVisible" @hidedialog="closeDialog" :showFooter="false">
<template v-slot>
<el-row>
<el-col :span="24">
... ... @@ -37,7 +38,7 @@
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24" class="table-height">
<cm-table-page v-if="tableDataList" :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" :multipleSelection="applicationMonitorListChecked"
<cm-table-page v-show="tableDataList" :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" :multipleSelection="applicationMonitorListChecked"
:showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange"
:showBorder="true" :loading="false" :pageSize="pageSize"
:showPage="true" :showTools="true" :height="(height - 500)">
... ... @@ -69,4 +70,7 @@
<el-button @click="cancleList">取消</el-button>
<!-- <el-button @click="saveList" type="primary">保存</el-button>-->
</div>
</el-dialog>
</template>
</cm-dialog>
... ...
... ... @@ -2,7 +2,7 @@ export default {
name: 'applicationMoni',
template: '',
components: {},
props:['propsData','applicationMonitorList'],
props:['propsData','applicationMonitorList','isDisplay'],
data () {
return {
titleName:'应用配置',
... ... @@ -36,7 +36,6 @@ export default {
],
}
},
computed: {},
setup(props){
const {proxy} = Vue.getCurrentInstance();
let id = proxy.$global.getQueryVariable('configId') ;
... ... @@ -57,9 +56,21 @@ export default {
let page=Vue.ref(1);//当前页
let pageSize=Vue.ref(5);//每页显示条数
let modleId=Vue.ref();//模块id
let applicationMonitorVisible=Vue.ref(true);
let faultConfId=Vue.ref();
let bizName=Vue.ref();
let name=Vue.ref();
let applicationMonitorVisible=Vue.ref(false);
Vue.watch(()=>props.isDisplay,(newValue, oldValue)=>{
console.log("010101",newValue)
proxy.applicationMonitorVisible=newValue;
if(newValue){
proxy.setBizId();
proxy.getNodeList();
}
})
let init = () =>{
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
if (res && res.data) {
... ... @@ -92,6 +103,7 @@ export default {
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)
... ... @@ -138,7 +150,6 @@ export default {
}
//表格全选事件
let selectionChange=(val)=>{
console.log("selectionChange",val,val.length)
let selectData=val;
if(selectData.length>0){
selectData.map((item,index)=>{
... ... @@ -158,7 +169,6 @@ export default {
//添加选中的
let saveAll=()=>{
console.log("alldata",proxy.tableDataList);
let npmListSelectData=[];
proxy.tableDataList.map(item=>{
if(item.checked){
... ... @@ -234,12 +244,14 @@ export default {
proxy.tableDataList='';
}
return {
closeDialog,
restData,
getNodeList,
faultConfId,
bizName,
name,
applicationMonitorVisible,
applicationMonitorListChecked,
setListData,
... ... @@ -337,8 +349,8 @@ export default {
mounted () {
// this.init();
this.setBizId();
this.getNodeList();
/* this.setBizId();
this.getNodeList();*/
},
unmounted () {}
... ...
... ... @@ -409,9 +409,9 @@
<div class="network-monitor-popup popup-bg">
<!--网络检测弹窗-->
<DiagnosisNet v-if="networkMonitorVisible" :propsData="propsData" @callback="getNetworkMonitorList" ></DiagnosisNet>
<DiagnosisNet v-show="networkMonitorVisible" :isDisplay="networkMonitorVisible" :propsData="propsData" @callback="getNetworkMonitorList" ></DiagnosisNet>
<!--应用检测弹框-->
<ApplicationMoni v-if="applicationMonitorVisible" :applicationMonitorList="applicationMonitorList" :propsData="propsData" @callbackApp="getApplicationMoniList"></ApplicationMoni>
<ApplicationMoni v-show="applicationMonitorVisible" :isDisplay="applicationMonitorVisible" :applicationMonitorList="applicationMonitorList" :propsData="propsData" @callbackApp="getApplicationMoniList"></ApplicationMoni>
<!--APM弹框-->
<APM v-if="APMVisible" :propsData="propsData" @callbackAPM="getAPMList"></APM>
<!--日志监测弹框-->
... ...
... ... @@ -435,10 +435,12 @@ export default {
break;
case "npm":
//应用检测
console.log("add",this.applicationMonitorVisible);
this.configData.map((item,index)=>{
if(item.type==typeVal){
item.state='1';
}
})
this.applicationMonitorVisible=true;
console.log("add1",this.applicationMonitorVisible);
break;
case "base":
//基础环境
... ... @@ -535,6 +537,7 @@ export default {
if(this.busTypeArr){
this.switchModelDialog(typeVal,index)
this.setDetailConfig(typeVal);
// this.getTargetId(typeVal)
}else{
... ... @@ -553,6 +556,9 @@ export default {
console.log("itemdata",itemData)
this.networkMonitorVisible=false;
this.networkMonitorList=itemData.networkMonitorList;
if(itemData.faultConfId){
this.faultConfId=itemData.faultConfId;
}
this.setTargetId(itemData.targetId);
// this.targetId=itemData.targetId;
},
... ...
<el-dialog v-model="networkMonitorVisible" :title="titleName" width="90%" @close="closeDialog" top="3vh">
<cm-dialog :title="titleName" width="90%" :showDialogVisible="networkMonitorVisible" @hidedialog="closeDialog" :showFooter="false">
<template v-slot>
<el-row v-if="!tableVisible" class="height-600">
<el-col :span="6">
<div class="grid-content bg-purple network-monitor-popup-left">
... ... @@ -57,13 +58,13 @@
<li>添加节点</li>
</ul>
</template>
<div @click="addTableList(true)" :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)" v-if="itemNode.length<=1 && itemNode[0].nodeName" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>-->
<!-- <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>
<el-tooltip
class="item"
... ... @@ -78,7 +79,7 @@
<li><span>标识名称:</span>{{itemNode[1].name}}</li>
</ul>
</template>
<span @click="addTableList(false)" v-if="index+1<nodeData.length" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>
<span @click="addTableList(false,itemNode)" 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">
... ... @@ -96,7 +97,7 @@
</el-row>
<el-row v-if="addSetLIstVisible">
<div class="flex-div">
<img class="cursorClass" style="max-width: 100%;" @click="addTableList(true)" src="/vue3/src/assets/images/faultDiagnosis/icon-add-node.png" alt="">
<img class="cursorClass" style="max-width: 100%;" @click="addTableList(true,-1)" src="/vue3/src/assets/images/faultDiagnosis/icon-add-node.png" alt="">
</div>
</el-row>
... ... @@ -140,7 +141,7 @@
:label="item.kpiName" :value="item.kpiId"></el-option>
</el-select>
<!-- <el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />-->
<!-- <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>
... ... @@ -179,6 +180,8 @@
</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>-->
<!-- <el-button @click="saveList" type="primary">保存</el-button>-->
</div>
</el-dialog>
</template>
</cm-dialog>
... ...
... ... @@ -2,7 +2,7 @@ export default {
name: 'diagnosisNet',
template: '',
components: {},
props:['propsData'],
props:['propsData','isDisplay'],
data () {
return {
titleName:'故障新增内容',
... ... @@ -10,7 +10,7 @@ export default {
apiUrl2:'/api-web/fault/conf/netLink/getNetLinkList',//根据targetId获取链路信息列表
tableVisible:false,//添加配置列表是否显示
flag:true,//是否是点进入true 还是线进入false
networkMonitorVisible: true,
// networkMonitorVisible: true,
isClickNet:-1,//配置链接选择
//网络检测配置链路列表
networkMonitorList: [
... ... @@ -96,6 +96,21 @@ export default {
let iconArr=Vue.ref([]);
let page=Vue.ref(1);//当前页
let pageSize=Vue.ref(5);//每页显示条数
let networkMonitorVisible=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.networkMonitorVisible=newValue;
if(newValue){
proxy.setBizId();
proxy.getNetLinkList();
}
})
let init = () =>{
//根据业务id获取资源列表
let paramsRes={
... ... @@ -108,11 +123,11 @@ export default {
})
proxy.getResData();
proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
if (res && res.data) {
proxy.busTypeList = res.data;
}
})
// proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
// if (res && res.data) {
// proxy.busTypeList = res.data;
// }
// })
}
let getResData=()=>{
... ... @@ -167,7 +182,10 @@ export default {
let bNetNodeList=proxy.nodeData.flat(2);
console.log('aarr--',bNetNodeList)
// bNetNodeList.nodeName=proxy.nodeName;
if(bNetNodeList[bNetNodeList.length-1].isAdd){
bNetNodeList.splice(bNetNodeList.length-1,1);
}
console.log('&&',bNetNodeList)
bNetNodeList.map((item,index)=>{
item.sort=index;
... ... @@ -192,6 +210,8 @@ export default {
if(res.object){
proxy.targetId=res.object.targetId
proxy.saveModel();
}
proxy.getNetLinkList();
... ... @@ -247,20 +267,24 @@ export default {
console.log("isadd",row.isAdd)
// if(row.isAdd){
//isAdd为true代表是添加
proxy.nodeData.splice(length-1,0,[row]);
// proxy.nodeData.splice(length-1,0,[row]);
proxy.nodeData.splice(length-1,1,[row]);
// }else{
//isAdd为false代表是修改
// proxy.nodeData.splice(index,1,[row]);
// }
}else{
//插入的是线
proxy.nodeData[length-2].push(row);
// proxy.nodeData[length-2].push(row);
proxy.nodeData[length-1].push(row);
proxy.nodeData.push([{nodeName:'',id:'',isAdd:true}])
}
}else{
proxy.nodeData.push([row]);
proxy.nodeData.push([{nodeName:'',id:'',isAdd:true}])
// proxy.nodeData.push([{nodeName:'',id:'',isAdd:true}])
}
console.log(" proxy.nodeData", proxy.nodeData,proxy.nodeData.length)
... ... @@ -274,12 +298,22 @@ 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)
}
return {
faultConfId,
bizName,
modleId,
name,
networkMonitorVisible,
page,
pageSize,
addRes,
... ... @@ -397,10 +431,12 @@ export default {
let length=that.nodeData.length;
if(that.nodeData.length>0){
that.addSetLIstVisible=false;
// if(that.nodeData[length-1].length>1){
let length1=that.nodeData[length-1].length;
console.log("length1",length1)
if(length1>1){
that.nodeData.push([{nodeName:'',id:'',isAdd:true}])
// }
}
}else{
that.addSetLIstVisible=true;
... ... @@ -416,7 +452,12 @@ export default {
},
//点击进入添加节点页面
addTableList(flag){
addTableList(flag,itemNode){
console.log("itemNode",itemNode)
// if(itemNode==-1 || itemNode.length>0){
// if(itemNode.length==1){
// if(itemNode[0])
// }
this.flag=flag;
this.tableVisible=true;
if(flag){
... ... @@ -426,6 +467,8 @@ export default {
this.titleName='网络配置';
this.init();
this.getNodeList();
// }
},
//取消节点列表配置
cancleList(){
... ... @@ -471,7 +514,8 @@ export default {
closeDialog(){
let obj={
networkMonitorList:this.networkMonitorList,
targetId:this.targetId
targetId:this.targetId,
faultConfId:this.faultConfId,
}
this.$emit('callback', obj);
},
... ... @@ -490,13 +534,44 @@ export default {
}
});
},
//保存模块
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.$global.showMsg('保存成功','success')
that.networkMonitorVisible=false;
}else{
that.$global.showMsg('模块保存失败','warning')
}
})
}
},
mounted () {
// this.getAllIcon();
this.setBizId();
this.getNetLinkList();
/* this.setBizId();
this.getNetLinkList();*/
// this.getNodeData();
},
unmounted () {}
... ...