monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 425c860b974424eafda13381185db28d1f5889e5 1 parent fe64ddc5

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

Inline Side-by-side
Showing 6 changed files with 310 additions and 210 deletions
1 -<el-dialog v-model="applicationMonitorVisible" :title="titleName" width="90%" @close="closeDialog" top="3vh">  
2 - <el-row>  
3 - <el-col :span="24">  
4 -  
5 - <div class="set-add-div">  
6 - <el-row>  
7 - <el-col :span="24">  
8 - <div class="flex-div-start margin-top-bottom-10">  
9 -  
10 - <!-- <el-select class="margin-right-10" v-model="busTypeArr" filterable clearable collapse-tags placeholder="请选择业务">  
11 - <el-option  
12 - v-for="item in busTypeList"  
13 - :label="item.busTypeName" :value="item.busId"></el-option>  
14 - </el-select>  
15 - -->  
16 - <!-- <el-dropdown class="margin-right-10">  
17 - <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>  
18 - </el-dropdown>  
19 -  
20 -  
21 - <el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标">  
22 - <el-option  
23 - v-for="item in kpiList"  
24 - :label="item.kpiName" :value="item.kpiId"></el-option>  
25 - </el-select>-->  
26 -  
27 - <el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />  
28 -  
29 - <div class="flex-div-start">  
30 - <el-button type="primary" @click="onReset()">重置</el-button>  
31 - <el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>  
32 - <el-button type="primary" :disabled="isLoading" @click="saveAll()" style="margin-left: 10px">批量添加</el-button>  
33 - <el-button type="primary" :disabled="isLoading" @click="saveAlldata()" style="margin-left: 10px">全部添加</el-button>  
34 - </div>  
35 - </div>  
36 - </el-col>  
37 - </el-row>  
38 - <el-row class="margin-bottom-50">  
39 - <el-col :span="24" class="table-height">  
40 - <cm-table-page v-if="tableDataList" :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" :multipleSelection="applicationMonitorListChecked"  
41 - :showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange"  
42 - :showBorder="true" :loading="false" :pageSize="pageSize"  
43 - :showPage="true" :showTools="true" :height="(height - 500)">  
44 - <template #default="{row,prop,column}">  
45 - <div v-if="prop == 'url'" class="text-overflow" :title="row.url">  
46 - <span class="">{{row.url }}</span> 1 +<cm-dialog :title="titleName" width="90%" :showDialogVisible="applicationMonitorVisible" @hidedialog="closeDialog" :showFooter="false">
  2 + <template v-slot>
  3 + <el-row>
  4 + <el-col :span="24">
  5 +
  6 + <div class="set-add-div">
  7 + <el-row>
  8 + <el-col :span="24">
  9 + <div class="flex-div-start margin-top-bottom-10">
  10 +
  11 + <!-- <el-select class="margin-right-10" v-model="busTypeArr" filterable clearable collapse-tags placeholder="请选择业务">
  12 + <el-option
  13 + v-for="item in busTypeList"
  14 + :label="item.busTypeName" :value="item.busId"></el-option>
  15 + </el-select>
  16 + -->
  17 + <!-- <el-dropdown class="margin-right-10">
  18 + <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
  19 + </el-dropdown>
  20 +
  21 +
  22 + <el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标">
  23 + <el-option
  24 + v-for="item in kpiList"
  25 + :label="item.kpiName" :value="item.kpiId"></el-option>
  26 + </el-select>-->
47 27
  28 + <el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
  29 +
  30 + <div class="flex-div-start">
  31 + <el-button type="primary" @click="onReset()">重置</el-button>
  32 + <el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
  33 + <el-button type="primary" :disabled="isLoading" @click="saveAll()" style="margin-left: 10px">批量添加</el-button>
  34 + <el-button type="primary" :disabled="isLoading" @click="saveAlldata()" style="margin-left: 10px">全部添加</el-button>
48 </div> 35 </div>
49 - </template>  
50 - <template #tools="{scope}">  
51 - <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">  
52 - <i class="el-icon-plus"/> 添加  
53 - </el-button>  
54 - </template>  
55 - </cm-table-page>  
56 - </el-col> 36 + </div>
  37 + </el-col>
  38 + </el-row>
  39 + <el-row class="margin-bottom-50">
  40 + <el-col :span="24" class="table-height">
  41 + <cm-table-page v-show="tableDataList" :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" :multipleSelection="applicationMonitorListChecked"
  42 + :showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange"
  43 + :showBorder="true" :loading="false" :pageSize="pageSize"
  44 + :showPage="true" :showTools="true" :height="(height - 500)">
  45 + <template #default="{row,prop,column}">
  46 + <div v-if="prop == 'url'" class="text-overflow" :title="row.url">
  47 + <span class="">{{row.url }}</span>
  48 +
  49 + </div>
  50 + </template>
  51 + <template #tools="{scope}">
  52 + <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
  53 + <i class="el-icon-plus"/> 添加
  54 + </el-button>
  55 + </template>
  56 + </cm-table-page>
  57 + </el-col>
  58 +
  59 + </el-row>
  60 +
57 61
58 - </el-row> 62 + </div>
59 63
60 64
61 - </div> 65 + </el-col>
62 66
63 67
64 - </el-col> 68 + </el-row>
  69 + <div class="margin-top flex-center position-bottom">
  70 + <el-button @click="cancleList">取消</el-button>
  71 + <!-- <el-button @click="saveList" type="primary">保存</el-button>-->
  72 + </div>
  73 + </template>
  74 +</cm-dialog>
65 75
66 76
67 - </el-row>  
68 - <div class="margin-top flex-center position-bottom">  
69 - <el-button @click="cancleList">取消</el-button>  
70 - <!-- <el-button @click="saveList" type="primary">保存</el-button>-->  
71 - </div>  
72 -</el-dialog>  
@@ -2,7 +2,7 @@ export default { @@ -2,7 +2,7 @@ export default {
2 name: 'applicationMoni', 2 name: 'applicationMoni',
3 template: '', 3 template: '',
4 components: {}, 4 components: {},
5 - props:['propsData','applicationMonitorList'], 5 + props:['propsData','applicationMonitorList','isDisplay'],
6 data () { 6 data () {
7 return { 7 return {
8 titleName:'应用配置', 8 titleName:'应用配置',
@@ -36,7 +36,6 @@ export default { @@ -36,7 +36,6 @@ export default {
36 ], 36 ],
37 } 37 }
38 }, 38 },
39 - computed: {},  
40 setup(props){ 39 setup(props){
41 const {proxy} = Vue.getCurrentInstance(); 40 const {proxy} = Vue.getCurrentInstance();
42 let id = proxy.$global.getQueryVariable('configId') ; 41 let id = proxy.$global.getQueryVariable('configId') ;
@@ -57,9 +56,21 @@ export default { @@ -57,9 +56,21 @@ export default {
57 let page=Vue.ref(1);//当前页 56 let page=Vue.ref(1);//当前页
58 let pageSize=Vue.ref(5);//每页显示条数 57 let pageSize=Vue.ref(5);//每页显示条数
59 let modleId=Vue.ref();//模块id 58 let modleId=Vue.ref();//模块id
60 - let applicationMonitorVisible=Vue.ref(true);  
61 let faultConfId=Vue.ref(); 59 let faultConfId=Vue.ref();
62 let bizName=Vue.ref(); 60 let bizName=Vue.ref();
  61 + let name=Vue.ref();
  62 + let applicationMonitorVisible=Vue.ref(false);
  63 +
  64 + Vue.watch(()=>props.isDisplay,(newValue, oldValue)=>{
  65 + console.log("010101",newValue)
  66 + proxy.applicationMonitorVisible=newValue;
  67 + if(newValue){
  68 + proxy.setBizId();
  69 + proxy.getNodeList();
  70 + }
  71 +
  72 + })
  73 +
63 let init = () =>{ 74 let init = () =>{
64 proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) { 75 proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
65 if (res && res.data) { 76 if (res && res.data) {
@@ -92,6 +103,7 @@ export default { @@ -92,6 +103,7 @@ export default {
92 proxy.faultConfId=props.propsData.faultConfId; 103 proxy.faultConfId=props.propsData.faultConfId;
93 proxy.bizName=props.propsData.bizName; 104 proxy.bizName=props.propsData.bizName;
94 proxy.modleId=props.propsData.modleId; 105 proxy.modleId=props.propsData.modleId;
  106 + proxy.name=props.propsData.name;
95 } 107 }
96 console.log("*",props.propsData,proxy.bizId,proxy.busTypeArr) 108 console.log("*",props.propsData,proxy.bizId,proxy.busTypeArr)
97 109
@@ -138,7 +150,6 @@ export default { @@ -138,7 +150,6 @@ export default {
138 } 150 }
139 //表格全选事件 151 //表格全选事件
140 let selectionChange=(val)=>{ 152 let selectionChange=(val)=>{
141 - console.log("selectionChange",val,val.length)  
142 let selectData=val; 153 let selectData=val;
143 if(selectData.length>0){ 154 if(selectData.length>0){
144 selectData.map((item,index)=>{ 155 selectData.map((item,index)=>{
@@ -158,7 +169,6 @@ export default { @@ -158,7 +169,6 @@ export default {
158 169
159 //添加选中的 170 //添加选中的
160 let saveAll=()=>{ 171 let saveAll=()=>{
161 - console.log("alldata",proxy.tableDataList);  
162 let npmListSelectData=[]; 172 let npmListSelectData=[];
163 proxy.tableDataList.map(item=>{ 173 proxy.tableDataList.map(item=>{
164 if(item.checked){ 174 if(item.checked){
@@ -234,12 +244,14 @@ export default { @@ -234,12 +244,14 @@ export default {
234 proxy.tableDataList=''; 244 proxy.tableDataList='';
235 } 245 }
236 246
  247 +
237 return { 248 return {
238 closeDialog, 249 closeDialog,
239 restData, 250 restData,
240 getNodeList, 251 getNodeList,
241 faultConfId, 252 faultConfId,
242 bizName, 253 bizName,
  254 + name,
243 applicationMonitorVisible, 255 applicationMonitorVisible,
244 applicationMonitorListChecked, 256 applicationMonitorListChecked,
245 setListData, 257 setListData,
@@ -337,8 +349,8 @@ export default { @@ -337,8 +349,8 @@ export default {
337 mounted () { 349 mounted () {
338 // this.init(); 350 // this.init();
339 351
340 - this.setBizId();  
341 - this.getNodeList(); 352 + /* this.setBizId();
  353 + this.getNodeList();*/
342 }, 354 },
343 unmounted () {} 355 unmounted () {}
344 356
@@ -409,9 +409,9 @@ @@ -409,9 +409,9 @@
409 409
410 <div class="network-monitor-popup popup-bg"> 410 <div class="network-monitor-popup popup-bg">
411 <!--网络检测弹窗--> 411 <!--网络检测弹窗-->
412 - <DiagnosisNet v-if="networkMonitorVisible" :propsData="propsData" @callback="getNetworkMonitorList" ></DiagnosisNet> 412 + <DiagnosisNet v-show="networkMonitorVisible" :isDisplay="networkMonitorVisible" :propsData="propsData" @callback="getNetworkMonitorList" ></DiagnosisNet>
413 <!--应用检测弹框--> 413 <!--应用检测弹框-->
414 - <ApplicationMoni v-if="applicationMonitorVisible" :applicationMonitorList="applicationMonitorList" :propsData="propsData" @callbackApp="getApplicationMoniList"></ApplicationMoni> 414 + <ApplicationMoni v-show="applicationMonitorVisible" :isDisplay="applicationMonitorVisible" :applicationMonitorList="applicationMonitorList" :propsData="propsData" @callbackApp="getApplicationMoniList"></ApplicationMoni>
415 <!--APM弹框--> 415 <!--APM弹框-->
416 <APM v-if="APMVisible" :propsData="propsData" @callbackAPM="getAPMList"></APM> 416 <APM v-if="APMVisible" :propsData="propsData" @callbackAPM="getAPMList"></APM>
417 <!--日志监测弹框--> 417 <!--日志监测弹框-->
@@ -207,7 +207,7 @@ export default { @@ -207,7 +207,7 @@ export default {
207 let ruleId=Vue.ref(); 207 let ruleId=Vue.ref();
208 //模块id 208 //模块id
209 let modleId=Vue.ref(); 209 let modleId=Vue.ref();
210 - return{ 210 + return{
211 applicationMonitorVisible, 211 applicationMonitorVisible,
212 modleId, 212 modleId,
213 ruleId, 213 ruleId,
@@ -435,10 +435,12 @@ export default { @@ -435,10 +435,12 @@ export default {
435 break; 435 break;
436 case "npm": 436 case "npm":
437 //应用检测 437 //应用检测
438 - console.log("add",this.applicationMonitorVisible); 438 + this.configData.map((item,index)=>{
  439 + if(item.type==typeVal){
  440 + item.state='1';
  441 + }
  442 + })
439 this.applicationMonitorVisible=true; 443 this.applicationMonitorVisible=true;
440 - console.log("add1",this.applicationMonitorVisible);  
441 -  
442 break; 444 break;
443 case "base": 445 case "base":
444 //基础环境 446 //基础环境
@@ -535,6 +537,7 @@ export default { @@ -535,6 +537,7 @@ export default {
535 if(this.busTypeArr){ 537 if(this.busTypeArr){
536 this.switchModelDialog(typeVal,index) 538 this.switchModelDialog(typeVal,index)
537 539
  540 +
538 this.setDetailConfig(typeVal); 541 this.setDetailConfig(typeVal);
539 // this.getTargetId(typeVal) 542 // this.getTargetId(typeVal)
540 }else{ 543 }else{
@@ -553,6 +556,9 @@ export default { @@ -553,6 +556,9 @@ export default {
553 console.log("itemdata",itemData) 556 console.log("itemdata",itemData)
554 this.networkMonitorVisible=false; 557 this.networkMonitorVisible=false;
555 this.networkMonitorList=itemData.networkMonitorList; 558 this.networkMonitorList=itemData.networkMonitorList;
  559 + if(itemData.faultConfId){
  560 + this.faultConfId=itemData.faultConfId;
  561 + }
556 this.setTargetId(itemData.targetId); 562 this.setTargetId(itemData.targetId);
557 // this.targetId=itemData.targetId; 563 // this.targetId=itemData.targetId;
558 }, 564 },
1 -<el-dialog v-model="networkMonitorVisible" :title="titleName" width="90%" @close="closeDialog" top="3vh">  
2 - <el-row v-if="!tableVisible" class="height-600">  
3 - <el-col :span="6">  
4 - <div class="grid-content bg-purple network-monitor-popup-left">  
5 - <div>  
6 - <div class="context-head">  
7 - 已配置链路 1 +<cm-dialog :title="titleName" width="90%" :showDialogVisible="networkMonitorVisible" @hidedialog="closeDialog" :showFooter="false">
  2 + <template v-slot>
  3 + <el-row v-if="!tableVisible" class="height-600">
  4 + <el-col :span="6">
  5 + <div class="grid-content bg-purple network-monitor-popup-left">
  6 + <div>
  7 + <div class="context-head">
  8 + 已配置链路
  9 + </div>
8 </div> 10 </div>
9 - </div>  
10 - <div @click="clickList(item,index)" :class="['list-net',{'isActive':index==isClickNet}]" v-for="(item, index) in networkMonitorList" :key="index">  
11 - <div class="flex-div-center ">  
12 - <div class="multiple-choice-button text-overflow" :title="item.linkName">{{item.linkName}}</div>  
13 - <img v-show="index==isClickNet" @click="deleteNetLink(item,index)" class="img-delete" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" alt=""> 11 + <div @click="clickList(item,index)" :class="['list-net',{'isActive':index==isClickNet}]" v-for="(item, index) in networkMonitorList" :key="index">
  12 + <div class="flex-div-center ">
  13 + <div class="multiple-choice-button text-overflow" :title="item.linkName">{{item.linkName}}</div>
  14 + <img v-show="index==isClickNet" @click="deleteNetLink(item,index)" class="img-delete" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" alt="">
  15 + </div>
14 </div> 16 </div>
15 - </div>  
16 - <div class="list-net">  
17 - <div class="multiple-choice-button">  
18 - <img @click="addSet" src="./src/assets/images/faultDiagnosis/icon-popup-add.png"> 17 + <div class="list-net">
  18 + <div class="multiple-choice-button">
  19 + <img @click="addSet" src="./src/assets/images/faultDiagnosis/icon-popup-add.png">
  20 + </div>
19 </div> 21 </div>
20 - </div>  
21 22
22 - </div>  
23 - </el-col>  
24 - <el-col :span="18">  
25 - <div class="grid-content bg-purple-light network-monitor-popup-right">  
26 - <div class="set-div">  
27 - <div class="context-head">  
28 - <div>电子税务局网络链路配置</div>  
29 - <div >  
30 - <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png"> 23 + </div>
  24 + </el-col>
  25 + <el-col :span="18">
  26 + <div class="grid-content bg-purple-light network-monitor-popup-right">
  27 + <div class="set-div">
  28 + <div class="context-head">
  29 + <div>电子税务局网络链路配置</div>
  30 + <div >
  31 + <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">
  32 + </div>
31 </div> 33 </div>
32 - </div>  
33 - <el-row v-if="!addSetLIstVisible" class="flex-div-start" style="margin: 20px 0 10px 4%;" >  
34 - <span>配置链路名称</span>  
35 - <el-input style="flex:1;margin-left:10px;" class="margin-right-10" v-model="linkName" placeholder="输入链路名称" /> 34 + <el-row v-if="!addSetLIstVisible" class="flex-div-start" style="margin: 20px 0 10px 4%;" >
  35 + <span>配置链路名称</span>
  36 + <el-input style="flex:1;margin-left:10px;" class="margin-right-10" v-model="linkName" placeholder="输入链路名称" />
36 37
37 - </el-row>  
38 - <div class="context-body">  
39 -  
40 - <el-row v-if="!addSetLIstVisible">  
41 - <el-col :span="3" v-for="(itemNode,index) in nodeData">  
42 - <div class="list-step flex-div-start">  
43 - <div class="list-step-top flex-div">  
44 - <el-tooltip  
45 - class="item"  
46 - effect="dark"  
47 -  
48 - placement="bottom"  
49 - >  
50 - <template #content >  
51 - <ul v-if="itemNode[0].nodeName">  
52 - <li><span>资源名称：</span>{{itemNode[0].resName}}</li>  
53 - <li><span>指标名称：</span>{{itemNode[0].kpiName}}</li>  
54 - <li><span>标识名称：</span>{{itemNode[0].name}}</li>  
55 - </ul>  
56 - <ul v-if="!itemNode[0].nodeName">  
57 - <li>添加节点</li>  
58 - </ul>  
59 - </template>  
60 - <div @click="addTableList(true)" :class="['step-img','flex-div-center',{'isActive':itemNode[0].nodeName}]">  
61 - <i v-if="itemNode[0].nodeName" class="icon-delete-right" @click.stop="deleteNode(item,index)"></i>  
62 - <i class="icon-step flex-div-center"><img :src="'/src/style/img/restypeimg/'+itemNode[0].resType+'.png'" alt=""></i>  
63 - </div>  
64 - </el-tooltip>  
65 - <span @click="addTableList(false)" v-if="index+1<nodeData.length && itemNode.length<=1" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>  
66 -<!-- <span @click="addTableList(false)" v-if="itemNode.length<=1 && itemNode[0].nodeName" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>-->  
67 -  
68 - <el-tooltip  
69 - class="item"  
70 - effect="dark"  
71 - placement="bottom"  
72 - v-if="itemNode.length>1"  
73 - >  
74 - <template #content>  
75 - <ul >  
76 - <li><span>资源名称：</span>{{itemNode[1].resName}}</li>  
77 - <li><span>指标名称：</span>{{itemNode[1].kpiName}}</li>  
78 - <li><span>标识名称：</span>{{itemNode[1].name}}</li>  
79 - </ul>  
80 - </template>  
81 - <span @click="addTableList(false)" v-if="index+1<nodeData.length" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>  
82 - </el-tooltip>  
83 - </div>  
84 - <div v-show="itemNode[0].nodeName" class="list-step-name flex-div-start"> 38 + </el-row>
  39 + <div class="context-body">
  40 +
  41 + <el-row v-if="!addSetLIstVisible">
  42 + <el-col :span="3" v-for="(itemNode,index) in nodeData">
  43 + <div class="list-step flex-div-start">
  44 + <div class="list-step-top flex-div">
  45 + <el-tooltip
  46 + class="item"
  47 + effect="dark"
  48 +
  49 + placement="bottom"
  50 + >
  51 + <template #content >
  52 + <ul v-if="itemNode[0].nodeName">
  53 + <li><span>资源名称：</span>{{itemNode[0].resName}}</li>
  54 + <li><span>指标名称：</span>{{itemNode[0].kpiName}}</li>
  55 + <li><span>标识名称：</span>{{itemNode[0].name}}</li>
  56 + </ul>
  57 + <ul v-if="!itemNode[0].nodeName">
  58 + <li>添加节点</li>
  59 + </ul>
  60 + </template>
  61 + <div @click="addTableList(true,itemNode)" :class="['step-img','flex-div-center',{'isActive':itemNode[0].nodeName}]">
  62 + <i v-if="itemNode[0].nodeName" class="icon-delete-right" @click.stop="deleteNode(item,index)"></i>
  63 + <i class="icon-step flex-div-center"><img :src="'/src/style/img/restypeimg/'+itemNode[0].resType+'.png'" alt=""></i>
  64 + </div>
  65 + </el-tooltip>
  66 + <!-- <span @click="addTableList(false)" v-if="index+1<nodeData.length && itemNode.length<=1" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>-->
  67 + <span @click="addTableList(false,itemNode)" v-if="itemNode.length<=1 && itemNode[0].nodeName" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>
  68 +
  69 + <el-tooltip
  70 + class="item"
  71 + effect="dark"
  72 + placement="bottom"
  73 + v-if="itemNode.length>1"
  74 + >
  75 + <template #content>
  76 + <ul >
  77 + <li><span>资源名称：</span>{{itemNode[1].resName}}</li>
  78 + <li><span>指标名称：</span>{{itemNode[1].kpiName}}</li>
  79 + <li><span>标识名称：</span>{{itemNode[1].name}}</li>
  80 + </ul>
  81 + </template>
  82 + <span @click="addTableList(false,itemNode)" v-if="index+1<nodeData.length" :class="['list-line','cursorClass',{'isActive':itemNode.length>1}]"></span>
  83 + </el-tooltip>
  84 + </div>
  85 + <div v-show="itemNode[0].nodeName" class="list-step-name flex-div-start">
85 <span class="text-overflow width-100" :title="itemNode[0].nodeName"> 86 <span class="text-overflow width-100" :title="itemNode[0].nodeName">
86 {{itemNode[0].nodeName}} 87 {{itemNode[0].nodeName}}
87 </span> 88 </span>
88 - <span class="list-line-none"></span>  
89 - </div>  
90 - <div v-show="!itemNode[0].nodeName" class="list-step-name flex-div-start">  
91 - <span class="width-100">点击添加</span>  
92 - <span class="list-line-none"></span> 89 + <span class="list-line-none"></span>
  90 + </div>
  91 + <div v-show="!itemNode[0].nodeName" class="list-step-name flex-div-start">
  92 + <span class="width-100">点击添加</span>
  93 + <span class="list-line-none"></span>
  94 + </div>
93 </div> 95 </div>
  96 + </el-col>
  97 + </el-row>
  98 + <el-row v-if="addSetLIstVisible">
  99 + <div class="flex-div">
  100 + <img class="cursorClass" style="max-width: 100%;" @click="addTableList(true,-1)" src="/vue3/src/assets/images/faultDiagnosis/icon-add-node.png" alt="">
94 </div> 101 </div>
95 - </el-col>  
96 - </el-row>  
97 - <el-row v-if="addSetLIstVisible">  
98 - <div class="flex-div">  
99 - <img class="cursorClass" style="max-width: 100%;" @click="addTableList(true)" src="/vue3/src/assets/images/faultDiagnosis/icon-add-node.png" alt=""> 102 + </el-row>
  103 +
  104 + <div v-if="!addSetLIstVisible" class="margin-top flex-center position-bottom">
  105 + <el-button @click="saveLinkAndNodeInfo" type="primary">保存</el-button>
100 </div> 106 </div>
101 - </el-row>  
102 107
103 - <div v-if="!addSetLIstVisible" class="margin-top flex-center position-bottom">  
104 - <el-button @click="saveLinkAndNodeInfo" type="primary">保存</el-button>  
105 </div> 108 </div>
106 -  
107 </div> 109 </div>
108 - </div>  
109 110
110 - </div>  
111 - </el-col>  
112 - </el-row>  
113 - <el-row v-if="tableVisible">  
114 - <el-col :span="24"> 111 + </div>
  112 + </el-col>
  113 + </el-row>
  114 + <el-row v-if="tableVisible">
  115 + <el-col :span="24">
115 116
116 <div class="set-add-div"> 117 <div class="set-add-div">
117 <el-row> 118 <el-row>
@@ -129,9 +130,9 @@ @@ -129,9 +130,9 @@
129 :label="item.resName" :value="item.resId"></el-option> 130 :label="item.resName" :value="item.resId"></el-option>
130 </el-select> 131 </el-select>
131 132
132 - <!-- <el-dropdown class="margin-right-10">  
133 - <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>  
134 - </el-dropdown>--> 133 + <!-- <el-dropdown class="margin-right-10">
  134 + <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
  135 + </el-dropdown>-->
135 136
136 137
137 <el-select class="margin-right-10" v-model="kpiTypeArr" filterable clearable collapse-tags placeholder="请选择指标"> 138 <el-select class="margin-right-10" v-model="kpiTypeArr" filterable clearable collapse-tags placeholder="请选择指标">
@@ -140,7 +141,7 @@ @@ -140,7 +141,7 @@
140 :label="item.kpiName" :value="item.kpiId"></el-option> 141 :label="item.kpiName" :value="item.kpiId"></el-option>
141 </el-select> 142 </el-select>
142 143
143 -<!-- <el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />--> 144 + <!-- <el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />-->
144 145
145 <div class="flex-div-start"> 146 <div class="flex-div-start">
146 <el-button type="primary" @click="onReset()">重置</el-button> 147 <el-button type="primary" @click="onReset()">重置</el-button>
@@ -173,12 +174,14 @@ @@ -173,12 +174,14 @@
173 </div> 174 </div>
174 175
175 176
176 - </el-col> 177 + </el-col>
  178 +
177 179
  180 + </el-row>
  181 + <div v-if="tableVisible" class="margin-top flex-center position-bottom">
  182 + <el-button @click="cancleList">取消</el-button>
  183 + <!-- <el-button @click="saveList" type="primary">保存</el-button>-->
  184 + </div>
  185 + </template>
  186 +</cm-dialog>
178 187
179 - </el-row>  
180 - <div v-if="tableVisible" class="margin-top flex-center position-bottom">  
181 - <el-button @click="cancleList">取消</el-button>  
182 -<!-- <el-button @click="saveList" type="primary">保存</el-button>-->  
183 - </div>  
184 -</el-dialog>  
@@ -2,7 +2,7 @@ export default { @@ -2,7 +2,7 @@ export default {
2 name: 'diagnosisNet', 2 name: 'diagnosisNet',
3 template: '', 3 template: '',
4 components: {}, 4 components: {},
5 - props:['propsData'], 5 + props:['propsData','isDisplay'],
6 data () { 6 data () {
7 return { 7 return {
8 titleName:'故障新增内容', 8 titleName:'故障新增内容',
@@ -10,7 +10,7 @@ export default { @@ -10,7 +10,7 @@ export default {
10 apiUrl2:'/api-web/fault/conf/netLink/getNetLinkList',//根据targetId获取链路信息列表 10 apiUrl2:'/api-web/fault/conf/netLink/getNetLinkList',//根据targetId获取链路信息列表
11 tableVisible:false,//添加配置列表是否显示 11 tableVisible:false,//添加配置列表是否显示
12 flag:true,//是否是点进入true 还是线进入false 12 flag:true,//是否是点进入true 还是线进入false
13 - networkMonitorVisible: true, 13 + // networkMonitorVisible: true,
14 isClickNet:-1,//配置链接选择 14 isClickNet:-1,//配置链接选择
15 //网络检测配置链路列表 15 //网络检测配置链路列表
16 networkMonitorList: [ 16 networkMonitorList: [
@@ -96,6 +96,21 @@ export default { @@ -96,6 +96,21 @@ export default {
96 let iconArr=Vue.ref([]); 96 let iconArr=Vue.ref([]);
97 let page=Vue.ref(1);//当前页 97 let page=Vue.ref(1);//当前页
98 let pageSize=Vue.ref(5);//每页显示条数 98 let pageSize=Vue.ref(5);//每页显示条数
  99 + let networkMonitorVisible=Vue.ref(false);
  100 + let modleId=Vue.ref();//模块id
  101 + let faultConfId=Vue.ref();
  102 + let bizName=Vue.ref();
  103 + let name=Vue.ref();
  104 +
  105 + Vue.watch(()=>props.isDisplay,(newValue, oldValue)=>{
  106 +
  107 + proxy.networkMonitorVisible=newValue;
  108 + if(newValue){
  109 + proxy.setBizId();
  110 + proxy.getNetLinkList();
  111 + }
  112 +
  113 + })
99 let init = () =>{ 114 let init = () =>{
100 //根据业务id获取资源列表 115 //根据业务id获取资源列表
101 let paramsRes={ 116 let paramsRes={
@@ -108,11 +123,11 @@ export default { @@ -108,11 +123,11 @@ export default {
108 }) 123 })
109 proxy.getResData(); 124 proxy.getResData();
110 125
111 - proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {  
112 - if (res && res.data) {  
113 - proxy.busTypeList = res.data;  
114 - }  
115 - }) 126 + // proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
  127 + // if (res && res.data) {
  128 + // proxy.busTypeList = res.data;
  129 + // }
  130 + // })
116 131
117 } 132 }
118 let getResData=()=>{ 133 let getResData=()=>{
@@ -167,7 +182,10 @@ export default { @@ -167,7 +182,10 @@ export default {
167 let bNetNodeList=proxy.nodeData.flat(2); 182 let bNetNodeList=proxy.nodeData.flat(2);
168 console.log('aarr--',bNetNodeList) 183 console.log('aarr--',bNetNodeList)
169 // bNetNodeList.nodeName=proxy.nodeName; 184 // bNetNodeList.nodeName=proxy.nodeName;
170 - bNetNodeList.splice(bNetNodeList.length-1,1); 185 + if(bNetNodeList[bNetNodeList.length-1].isAdd){
  186 + bNetNodeList.splice(bNetNodeList.length-1,1);
  187 +
  188 + }
171 console.log('&&',bNetNodeList) 189 console.log('&&',bNetNodeList)
172 bNetNodeList.map((item,index)=>{ 190 bNetNodeList.map((item,index)=>{
173 item.sort=index; 191 item.sort=index;
@@ -192,6 +210,8 @@ export default { @@ -192,6 +210,8 @@ export default {
192 if(res.object){ 210 if(res.object){
193 proxy.targetId=res.object.targetId 211 proxy.targetId=res.object.targetId
194 212
  213 + proxy.saveModel();
  214 +
195 } 215 }
196 216
197 proxy.getNetLinkList(); 217 proxy.getNetLinkList();
@@ -247,20 +267,24 @@ export default { @@ -247,20 +267,24 @@ export default {
247 console.log("isadd",row.isAdd) 267 console.log("isadd",row.isAdd)
248 // if(row.isAdd){ 268 // if(row.isAdd){
249 //isAdd为true代表是添加 269 //isAdd为true代表是添加
250 - proxy.nodeData.splice(length-1,0,[row]); 270 + // proxy.nodeData.splice(length-1,0,[row]);
  271 + proxy.nodeData.splice(length-1,1,[row]);
251 // }else{ 272 // }else{
252 //isAdd为false代表是修改 273 //isAdd为false代表是修改
253 // proxy.nodeData.splice(index,1,[row]); 274 // proxy.nodeData.splice(index,1,[row]);
254 // } 275 // }
255 }else{ 276 }else{
256 //插入的是线 277 //插入的是线
257 - proxy.nodeData[length-2].push(row); 278 + // proxy.nodeData[length-2].push(row);
  279 + proxy.nodeData[length-1].push(row);
  280 + proxy.nodeData.push([{nodeName:'',id:'',isAdd:true}])
  281 +
258 } 282 }
259 283
260 284
261 }else{ 285 }else{
262 proxy.nodeData.push([row]); 286 proxy.nodeData.push([row]);
263 - proxy.nodeData.push([{nodeName:'',id:'',isAdd:true}]) 287 + // proxy.nodeData.push([{nodeName:'',id:'',isAdd:true}])
264 288
265 } 289 }
266 console.log(" proxy.nodeData", proxy.nodeData,proxy.nodeData.length) 290 console.log(" proxy.nodeData", proxy.nodeData,proxy.nodeData.length)
@@ -274,12 +298,22 @@ export default { @@ -274,12 +298,22 @@ export default {
274 proxy.bizId=props.propsData.bizId; 298 proxy.bizId=props.propsData.bizId;
275 proxy.targetId=props.propsData.targetId; 299 proxy.targetId=props.propsData.targetId;
276 proxy.busTypeArr=[props.propsData.bizId]; 300 proxy.busTypeArr=[props.propsData.bizId];
  301 + proxy.faultConfId=props.propsData.faultConfId;
  302 + proxy.bizName=props.propsData.bizName;
  303 + proxy.modleId=props.propsData.modleId;
  304 + proxy.name=props.propsData.name;
277 } 305 }
278 console.log("*",props.propsData,proxy.bizId,proxy.busTypeArr) 306 console.log("*",props.propsData,proxy.bizId,proxy.busTypeArr)
279 307
280 } 308 }
281 309
  310 +
282 return { 311 return {
  312 + faultConfId,
  313 + bizName,
  314 + modleId,
  315 + name,
  316 + networkMonitorVisible,
283 page, 317 page,
284 pageSize, 318 pageSize,
285 addRes, 319 addRes,
@@ -397,10 +431,12 @@ export default { @@ -397,10 +431,12 @@ export default {
397 let length=that.nodeData.length; 431 let length=that.nodeData.length;
398 if(that.nodeData.length>0){ 432 if(that.nodeData.length>0){
399 that.addSetLIstVisible=false; 433 that.addSetLIstVisible=false;
400 - // if(that.nodeData[length-1].length>1){ 434 + let length1=that.nodeData[length-1].length;
  435 + console.log("length1",length1)
  436 + if(length1>1){
401 that.nodeData.push([{nodeName:'',id:'',isAdd:true}]) 437 that.nodeData.push([{nodeName:'',id:'',isAdd:true}])
402 438
403 - // } 439 + }
404 440
405 }else{ 441 }else{
406 that.addSetLIstVisible=true; 442 that.addSetLIstVisible=true;
@@ -416,16 +452,23 @@ export default { @@ -416,16 +452,23 @@ export default {
416 452
417 }, 453 },
418 //点击进入添加节点页面 454 //点击进入添加节点页面
419 - addTableList(flag){  
420 - this.flag=flag;  
421 - this.tableVisible=true;  
422 - if(flag){  
423 - this.addSetLIstVisible=false; 455 + addTableList(flag,itemNode){
  456 + console.log("itemNode",itemNode)
  457 + // if(itemNode==-1 || itemNode.length>0){
  458 + // if(itemNode.length==1){
  459 + // if(itemNode[0])
  460 + // }
  461 + this.flag=flag;
  462 + this.tableVisible=true;
  463 + if(flag){
  464 + this.addSetLIstVisible=false;
  465 +
  466 + }
  467 + this.titleName='网络配置';
  468 + this.init();
  469 + this.getNodeList();
  470 + // }
424 471
425 - }  
426 - this.titleName='网络配置';  
427 - this.init();  
428 - this.getNodeList();  
429 }, 472 },
430 //取消节点列表配置 473 //取消节点列表配置
431 cancleList(){ 474 cancleList(){
@@ -471,7 +514,8 @@ export default { @@ -471,7 +514,8 @@ export default {
471 closeDialog(){ 514 closeDialog(){
472 let obj={ 515 let obj={
473 networkMonitorList:this.networkMonitorList, 516 networkMonitorList:this.networkMonitorList,
474 - targetId:this.targetId 517 + targetId:this.targetId,
  518 + faultConfId:this.faultConfId,
475 } 519 }
476 this.$emit('callback', obj); 520 this.$emit('callback', obj);
477 }, 521 },
@@ -490,13 +534,44 @@ export default { @@ -490,13 +534,44 @@ export default {
490 534
491 } 535 }
492 }); 536 });
  537 + },
  538 + //保存模块
  539 + saveModel(){
  540 + let that=this;
  541 + let params={
  542 + type:'npm',
  543 + targetId:this.targetId,
  544 + state:'1',
  545 + id:this.modleId,
  546 + faultConfig:{
  547 + id:this.faultConfId,
  548 + name:this.name,
  549 + bizId: this.bizId,
  550 + bizName:this.bizName,
  551 + createBy:localStorage.getItem("lgn")
  552 + }
  553 + }
  554 + this.$http.post('/api-web/fault/conf/detail/saveConfigDetail',params,function (res){
  555 + if(res && res.success){
  556 + that.targetId=res.map.configDetail.targetId;
  557 + that.faultConfId=res.map.configDetail.faultConfId;
  558 +
  559 + // that.$global.showMsg('保存成功','success')
  560 + that.networkMonitorVisible=false;
  561 +
  562 + }else{
  563 + that.$global.showMsg('模块保存失败','warning')
  564 +
  565 + }
  566 +
  567 + })
493 } 568 }
494 569
495 }, 570 },
496 mounted () { 571 mounted () {
497 // this.getAllIcon(); 572 // this.getAllIcon();
498 - this.setBizId();  
499 - this.getNetLinkList(); 573 + /* this.setBizId();
  574 + this.getNetLinkList();*/
500 // this.getNodeData(); 575 // this.getNodeData();
501 }, 576 },
502 unmounted () {} 577 unmounted () {}