monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit a5200c46adb99f5cff9c5018abb7d7f0bf70770e 1 parent b34bae25

故障诊断 网络监测接口联调

Inline Side-by-side
Showing 15 changed files with 1396 additions and 150 deletions
1 <title>故障管理</title> 1 <title>故障管理</title>
2 -<!--<iframe src="/vue3/index.html#/fault/faultForm" class="layadmin-iframe" style="height: 99.5%!important;"/>-->  
3 -<iframe src="/vue3/index.html#/fault/index" class="layadmin-iframe" style="height: 99.5%!important;"/> 2 +<iframe src="/vue3/index.html#/fault/faultForm" class="layadmin-iframe" style="height: 99.5%!important;"/>
  3 +<!--<iframe src="/vue3/index.html#/fault/index" class="layadmin-iframe" style="height: 99.5%!important;"/>-->
  1 +<el-dialog v-model="APMVisible" :title="titleName" width="60%" @close="closeDialog">
  2 +
  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" multiple 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>
  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 + </div>
  34 + </div>
  35 + </el-col>
  36 + </el-row>
  37 + <el-row class="margin-bottom-50">
  38 + <el-col :span="24">
  39 + <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
  40 + :showIndex="true" :total="count"
  41 + :showBorder="true" :loading="false"
  42 + :showPage="true" :showTools="true" :height="(height - 500)">
  43 + <template #tools="{scope}">
  44 + <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
  45 + <i class="el-icon-plus"/> 添加
  46 + </el-button>
  47 + </template>
  48 + </cm-table-page>
  49 + </el-col>
  50 +
  51 + </el-row>
  52 +
  53 +
  54 + </div>
  55 +
  56 +
  57 + </el-col>
  58 +
  59 +
  60 + </el-row>
  61 + <div class="margin-top flex-center position-bottom">
  62 + <el-button @click="cancleList">取消</el-button>
  63 + <el-button @click="saveList" type="primary">保存</el-button>
  64 + </div>
  65 +</el-dialog>
  1 +export default {
  2 + name: 'APM',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 + titleName:'添加内容',
  8 + tableVisible:false,//添加配置列表是否显示
  9 + APMVisible: true,
  10 + columns:[
  11 + {
  12 + prop: 'busTypeName',
  13 + label: '业务系统',
  14 + sortable: true,
  15 + align: 'center',
  16 + },
  17 + {
  18 + prop: 'resName',
  19 + label: '资源名称',
  20 + sortable: true,
  21 + align: 'center',
  22 + },
  23 + {
  24 + prop: 'ip',
  25 + label: 'ip地址',
  26 + sortable: true,
  27 + align: 'center',
  28 + },
  29 + {
  30 + prop: 'kpiName',
  31 + label: '指标名称',
  32 + sortable: true,
  33 + align: 'center',
  34 + },
  35 + {
  36 + prop: 'flag',
  37 + label: '指标标识',
  38 + sortable: true,
  39 + align: 'center',
  40 + }
  41 + ],
  42 + // tabSecondList:[],//节点配置列表数据
  43 + }
  44 + },
  45 + computed: {},
  46 + setup(){
  47 + const {proxy} = Vue.getCurrentInstance();
  48 + let id = proxy.$global.getQueryVariable('configId') ;
  49 + let config = Vue.ref(id == false ? null : id);
  50 + let count=Vue.ref(0);
  51 + let tableDataList = Vue.ref([]);
  52 + let resTypeArr = Vue.ref([]);
  53 + let kpiTypeArr = Vue.ref([]);
  54 + let busTypeArr = Vue.ref([]);
  55 + let keyWords= Vue.ref('');
  56 + let resTypeList = Vue.ref([]);
  57 + let kpiList = Vue.ref([]);
  58 + let busTypeList = Vue.ref([]);
  59 + let init = () =>{
  60 + proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
  61 + if (res && res.data) {
  62 + proxy.kpiList = res.data;
  63 + }
  64 + })
  65 +
  66 + proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
  67 + if (res && res.data) {
  68 + proxy.busTypeList = res.data;
  69 + }
  70 + })
  71 + }
  72 + let onReset = () => {
  73 + proxy.keyWords = '';
  74 + proxy.resTypeArr = [];
  75 + proxy.kpiTypeArr = [];
  76 + proxy.busTypeArr = [];
  77 + }
  78 + // 点击按钮搜索
  79 + let onBtnSearch = () => {
  80 + proxy.loadTableDataList();
  81 + }
  82 + return {
  83 + config,
  84 + count,
  85 + tableDataList,
  86 + kpiList,
  87 + busTypeList,
  88 + keyWords,
  89 + resTypeArr,
  90 + kpiTypeArr,
  91 + busTypeArr,
  92 + resTypeList,
  93 + init,
  94 + onReset,
  95 + onBtnSearch
  96 + }
  97 +
  98 + },
  99 + methods: {
  100 +
  101 + //取消节点列表配置
  102 + cancleList(){
  103 + this.APMVisible=false;
  104 +
  105 + },
  106 + //保存节点添加配置
  107 + saveList(){
  108 + this.APMVisible=false;
  109 + },
  110 + //重新加载表格数据
  111 + loadTableDataList(){
  112 + this.getNodeList()
  113 + },
  114 + //获取配置节点列表数据
  115 + getNodeList(){
  116 + let that=this;
  117 + this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
  118 + if (res && res.success) {
  119 + that.count = res.count;
  120 + that.tableDataList = res.data;
  121 + }
  122 + });
  123 + },
  124 + //配置参数
  125 + getParams(){
  126 + return {
  127 + keyWords: this.keyWords,
  128 + resType: this.resTypeArr.join(','),
  129 + kpiId: this.kpiTypeArr.join(','),
  130 + busId: this.busTypeArr.join(','),
  131 + configId: this.config,
  132 + page: 1,
  133 + limit: 5
  134 + }
  135 + },
  136 + //关闭弹框
  137 + closeDialog(){
  138 + this.$emit('callbackAPM', 'log');
  139 + }
  140 +
  141 +
  142 + },
  143 + mounted () {
  144 + this.init();
  145 + this.getNodeList();
  146 + },
  147 + unmounted () {}
  148 +
  149 +}
  1 +<el-dialog v-model="applicationMonitorVisible" :title="titleName" width="60%" @close="closeDialog">
  2 +
  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" multiple 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>-->
  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 + </div>
  34 + </div>
  35 + </el-col>
  36 + </el-row>
  37 + <el-row class="margin-bottom-50">
  38 + <el-col :span="24">
  39 + <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
  40 + :showIndex="true" :total="count"
  41 + :showBorder="true" :loading="false"
  42 + :showPage="true" :showTools="true" :height="(height - 500)">
  43 + <template #tools="{scope}">
  44 + <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
  45 + <i class="el-icon-plus"/> 添加
  46 + </el-button>
  47 + </template>
  48 + </cm-table-page>
  49 + </el-col>
  50 +
  51 + </el-row>
  52 +
  53 +
  54 + </div>
  55 +
  56 +
  57 + </el-col>
  58 +
  59 +
  60 + </el-row>
  61 + <div class="margin-top flex-center position-bottom">
  62 + <el-button @click="cancleList">取消</el-button>
  63 + <el-button @click="saveList" type="primary">保存</el-button>
  64 + </div>
  65 +</el-dialog>
  1 +export default {
  2 + name: 'applicationMoni',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 + titleName:'添加内容',
  8 + applicationMonitorVisible: true,
  9 + columns:[
  10 + {
  11 + prop: 'busTypeName',
  12 + label: '业务系统',
  13 + sortable: true,
  14 + align: 'center',
  15 + },
  16 + {
  17 + prop: 'resTypeName',
  18 + label: '链路id',
  19 + sortable: true,
  20 + align: 'center',
  21 + },
  22 + {
  23 + prop: 'resName',
  24 + label: '链路名称',
  25 + sortable: true,
  26 + align: 'center',
  27 + }
  28 + ],
  29 + }
  30 + },
  31 + computed: {},
  32 + setup(){
  33 + const {proxy} = Vue.getCurrentInstance();
  34 + let id = proxy.$global.getQueryVariable('configId') ;
  35 + let config = Vue.ref(id == false ? null : id);
  36 + let count=Vue.ref(0);
  37 + let tableDataList = Vue.ref([]);
  38 + let resTypeArr = Vue.ref([]);
  39 + let kpiTypeArr = Vue.ref([]);
  40 + let busTypeArr = Vue.ref([]);
  41 + let keyWords= Vue.ref('');
  42 + let resTypeList = Vue.ref([]);
  43 + let kpiList = Vue.ref([]);
  44 + let busTypeList = Vue.ref([]);
  45 + let init = () =>{
  46 + proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
  47 + if (res && res.data) {
  48 + proxy.kpiList = res.data;
  49 + }
  50 + })
  51 +
  52 + proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
  53 + if (res && res.data) {
  54 + proxy.busTypeList = res.data;
  55 + }
  56 + })
  57 + }
  58 + let onReset = () => {
  59 + proxy.keyWords = '';
  60 + proxy.resTypeArr = [];
  61 + proxy.kpiTypeArr = [];
  62 + proxy.busTypeArr = [];
  63 + }
  64 + // 点击按钮搜索
  65 + let onBtnSearch = () => {
  66 + proxy.loadTableDataList();
  67 + }
  68 + return {
  69 + config,
  70 + count,
  71 + tableDataList,
  72 + kpiList,
  73 + busTypeList,
  74 + keyWords,
  75 + resTypeArr,
  76 + kpiTypeArr,
  77 + busTypeArr,
  78 + resTypeList,
  79 + init,
  80 + onReset,
  81 + onBtnSearch
  82 + }
  83 +
  84 + },
  85 + methods: {
  86 +
  87 + //取消节点列表配置
  88 + cancleList(){
  89 + this.applicationMonitorVisible=false;
  90 +
  91 + },
  92 + //保存节点添加配置
  93 + saveList(){
  94 + this.applicationMonitorVisible=false;
  95 + },
  96 + //重新加载表格数据
  97 + loadTableDataList(){
  98 + this.getNodeList()
  99 + },
  100 + //获取配置节点列表数据
  101 + getNodeList(){
  102 + let that=this;
  103 + this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
  104 + if (res && res.success) {
  105 + that.count = res.count;
  106 + that.tableDataList = res.data;
  107 + }
  108 + });
  109 + },
  110 + //配置参数
  111 + getParams(){
  112 + return {
  113 + keyWords: this.keyWords,
  114 + resType: this.resTypeArr.join(','),
  115 + kpiId: this.kpiTypeArr.join(','),
  116 + busId: this.busTypeArr.join(','),
  117 + configId: this.config,
  118 + page: 1,
  119 + limit: 5
  120 + }
  121 + },
  122 + //关闭弹框
  123 + closeDialog(){
  124 + this.$emit('callbackApp', '1应用');
  125 + }
  126 +
  127 +
  128 + },
  129 + mounted () {
  130 + this.init();
  131 + this.getNodeList();
  132 + },
  133 + unmounted () {}
  134 +
  135 +}
  1 +<el-row>
  2 + <el-col :span="24">
  3 +
  4 + <div class="set-add-div margin-30">
  5 + <el-row>
  6 + <el-col :span="24">
  7 + <div class="flex-div-start margin-top-bottom-10">
  8 + <span class="fault-book-input-text context-select-text">选择类型</span>
  9 + <el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="从业务选择">
  10 + <el-option
  11 + v-for="item in busTypeList"
  12 + :label="item.busTypeName" :value="item.busId"></el-option>
  13 + </el-select>
  14 +<!--
  15 + <el-dropdown class="margin-right-10">
  16 + <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
  17 + </el-dropdown>-->
  18 +
  19 +
  20 + <el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="从资源选择">
  21 + <el-option
  22 + v-for="item in kpiList"
  23 + :label="item.kpiName" :value="item.kpiId"></el-option>
  24 + </el-select>
  25 +
  26 + <!--<el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
  27 +
  28 + <div class="flex-div-start">
  29 + <el-button type="primary" @click="onReset()">重置</el-button>
  30 + <el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
  31 + </div>-->
  32 + </div>
  33 + </el-col>
  34 + </el-row>
  35 + <el-row class="margin-bottom-50">
  36 + <el-col :span="24">
  37 + <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
  38 + :showIndex="false" :total="count"
  39 + :showBorder="true" :loading="false"
  40 + :showPage="true" :showTools="false" :height="(height - 500)">
  41 + <template #default="{row,prop,column}">
  42 + <div v-if="prop == 'kpiName'" class="list-data">
  43 + <span class="list-data-text">指标: {{row.kpiName }}</span>
  44 + <img :id="row.index" @click="deleteItem(row.id, row)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="img-delete cursorClass">
  45 +
  46 + </div>
  47 + </template>
  48 + </cm-table-page>
  49 + </el-col>
  50 +
  51 + </el-row>
  52 +
  53 +
  54 + </div>
  55 +
  56 +
  57 + </el-col>
  58 +
  59 +
  60 +</el-row>
  61 + <!--<div class="margin-top flex-center position-bottom">
  62 + <el-button @click="cancleList">取消</el-button>
  63 + <el-button @click="saveList" type="primary">保存</el-button>
  64 + </div>-->
  1 +export default {
  2 + name: 'basicEnvironment',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 + columns:[
  8 +
  9 + {
  10 + prop: 'resTypeName',
  11 + label: '资源类型',
  12 + sortable: true,
  13 + align: 'center',
  14 + },
  15 +
  16 + {
  17 + prop: 'kpiName',
  18 + label: '指标名称',
  19 + sortable: true,
  20 + align: 'center',
  21 + }
  22 + ],
  23 + environmentTableData: [
  24 + {
  25 + name: '服务器',
  26 + address: 'CPU使用率，内存使用率，文件系统使用率',
  27 + },
  28 + {
  29 + name: '服务器',
  30 + address: 'CPU使用率，内存使用率，文件系统使用率',
  31 + },
  32 + {
  33 + name: '服务器',
  34 + address: 'CPU使用率，内存使用率，文件系统使用率',
  35 + },
  36 + {
  37 + name: '服务器',
  38 + address: 'CPU使用率，内存使用率，文件系统使用率',
  39 + },
  40 + {
  41 + name: '服务器',
  42 + address: 'CPU使用率，内存使用率，文件系统使用率',
  43 + },
  44 + {
  45 + name: '服务器',
  46 + address: 'CPU使用率，内存使用率，文件系统使用率',
  47 + },
  48 + {
  49 + name: '服务器',
  50 + address: 'CPU使用率，内存使用率，文件系统使用率',
  51 + },
  52 +
  53 + ],//基础环境表格数据
  54 + }
  55 + },
  56 + computed: {},
  57 + setup(){
  58 + const {proxy} = Vue.getCurrentInstance();
  59 + let id = proxy.$global.getQueryVariable('configId') ;
  60 + let config = Vue.ref(id == false ? null : id);
  61 + let count=Vue.ref(0);
  62 + let tableDataList = Vue.ref([]);
  63 + let resTypeArr = Vue.ref([]);
  64 + let kpiTypeArr = Vue.ref([]);
  65 + let busTypeArr = Vue.ref([]);
  66 + let keyWords= Vue.ref('');
  67 + let resTypeList = Vue.ref([]);
  68 + let kpiList = Vue.ref([]);
  69 + let busTypeList = Vue.ref([]);
  70 + let init = () =>{
  71 + proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
  72 + if (res && res.data) {
  73 + proxy.kpiList = res.data;
  74 + }
  75 + })
  76 +
  77 + proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
  78 + if (res && res.data) {
  79 + proxy.busTypeList = res.data;
  80 + }
  81 + })
  82 + }
  83 + let onReset = () => {
  84 + proxy.keyWords = '';
  85 + proxy.resTypeArr = [];
  86 + proxy.kpiTypeArr = [];
  87 + proxy.busTypeArr = [];
  88 + }
  89 + // 点击按钮搜索
  90 + let onBtnSearch = () => {
  91 + proxy.loadTableDataList();
  92 + }
  93 + return {
  94 + config,
  95 + count,
  96 + tableDataList,
  97 + kpiList,
  98 + busTypeList,
  99 + keyWords,
  100 + resTypeArr,
  101 + kpiTypeArr,
  102 + busTypeArr,
  103 + resTypeList,
  104 + init,
  105 + onReset,
  106 + onBtnSearch
  107 + }
  108 +
  109 + },
  110 + methods: {
  111 +
  112 + //取消节点列表配置
  113 + cancleList(){
  114 + this.APMVisible=false;
  115 +
  116 + },
  117 + //保存节点添加配置
  118 + saveList(){
  119 + this.APMVisible=false;
  120 + },
  121 + //重新加载表格数据
  122 + loadTableDataList(){
  123 + this.getNodeList()
  124 + },
  125 + //获取配置节点列表数据
  126 + getNodeList(){
  127 + let that=this;
  128 + this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
  129 + if (res && res.success) {
  130 + that.count = res.count;
  131 + that.tableDataList = res.data;
  132 + }
  133 + });
  134 + },
  135 + //配置参数
  136 + getParams(){
  137 + return {
  138 + keyWords: this.keyWords,
  139 + resType: this.resTypeArr.join(','),
  140 + kpiId: this.kpiTypeArr.join(','),
  141 + busId: this.busTypeArr.join(','),
  142 + configId: this.config,
  143 + page: 1,
  144 + limit: 5
  145 + }
  146 + },
  147 + //关闭弹框
  148 + closeDialog(){
  149 + this.$emit('callbackLog', 'log');
  150 + },
  151 + //删除表格指标
  152 + deleteItem(id, list){
  153 + let params={
  154 + id:id,
  155 + list:list
  156 + }
  157 + this.$emit('callbackDelete',params)
  158 + }
  159 +
  160 +
  161 + },
  162 + mounted () {
  163 + this.init();
  164 + this.getNodeList();
  165 + },
  166 + unmounted () {}
  167 +
  168 +}
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <div class="grid-content bg-purple"> 6 <div class="grid-content bg-purple">
7 <span class="fault-book-input-text">所属业务</span> 7 <span class="fault-book-input-text">所属业务</span>
8 <!-- <el-input v-model="input" placeholder="Please input 1" class="fault-book-input"/>--> 8 <!-- <el-input v-model="input" placeholder="Please input 1" class="fault-book-input"/>-->
9 - <el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务"> 9 + <el-select class="margin-right-10" v-model="busTypeArr" filterable clearable collapse-tags placeholder="请选择业务">
10 <el-option 10 <el-option
11 v-for="item in busTypeList" 11 v-for="item in busTypeList"
12 :label="item.busTypeName" :value="item.busId"></el-option> 12 :label="item.busTypeName" :value="item.busId"></el-option>
@@ -197,7 +197,7 @@ @@ -197,7 +197,7 @@
197 </div> 197 </div>
198 </div> 198 </div>
199 <div class=" flex-div"> 199 <div class=" flex-div">
200 - <el-button class="multiple-choice-button color-999" @click="addNetworkMonitorItem()">添加应用检测</el-button> 200 + <el-button class="multiple-choice-button color-999" @click="addApplicationMonitor()">添加应用检测</el-button>
201 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 201 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
202 </div> 202 </div>
203 </div> 203 </div>
@@ -224,7 +224,9 @@ @@ -224,7 +224,9 @@
224 </div> 224 </div>
225 </el-col> 225 </el-col>
226 </el-row> 226 </el-row>
227 - <el-row> 227 + <BasicEnvironment @callbackDelete="deleteEnvironment"></BasicEnvironment>
  228 +
  229 + <!-- <el-row>
228 <el-col :span="24"> 230 <el-col :span="24">
229 <div class="context-select flex-div-start margin-30"> 231 <div class="context-select flex-div-start margin-30">
230 <span class="fault-book-input-text context-select-text">选择类型</span> 232 <span class="fault-book-input-text context-select-text">选择类型</span>
@@ -248,10 +250,15 @@ @@ -248,10 +250,15 @@
248 </el-select> 250 </el-select>
249 </div> 251 </div>
250 </el-col> 252 </el-col>
251 - </el-row>  
252 - <el-row> 253 + </el-row>-->
  254 + <!--<el-row>
253 <el-col :span="24"> 255 <el-col :span="24">
254 - <div class="environment-table margin-top flex-div-start margin-30"> 256 + <div class="environment-table margin-top flex-div-start margin-30">-->
  257 + <!-- <cm-table-page :columns="columnsEnvironment" :dataList="environmentTableData" @loaddata="loadTableDataList"
  258 + :showIndex="true" :total="count"
  259 + :showBorder="true" :loading="false"
  260 + :showPage="true" :showTools="false" :height="(height - 500)">
  261 + </cm-table-page>
255 <el-table :data="environmentTableData" border height="250" style="width: 100%"> 262 <el-table :data="environmentTableData" border height="250" style="width: 100%">
256 <el-table-column align="center" prop="name" label="资源类型" width="180" /> 263 <el-table-column align="center" prop="name" label="资源类型" width="180" />
257 <el-table-column prop="address" label="指标" class="margin-30" > 264 <el-table-column prop="address" label="指标" class="margin-30" >
@@ -265,11 +272,11 @@ @@ -265,11 +272,11 @@
265 </template> 272 </template>
266 </el-table-column> 273 </el-table-column>
267 </el-table> 274 </el-table>
268 - </div> 275 + </div>-->
269 276
270 - </el-col> 277 + <!-- </el-col>
271 278
272 - </el-row> 279 + </el-row>-->
273 280
274 281
275 282
@@ -304,7 +311,7 @@ @@ -304,7 +311,7 @@
304 </div> 311 </div>
305 </div> 312 </div>
306 <div> 313 <div>
307 - <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button> 314 + <el-button class="multiple-choice-button" @click="addAPM()">添加 APM</el-button>
308 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 315 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
309 </div> 316 </div>
310 </div> 317 </div>
@@ -343,7 +350,7 @@ @@ -343,7 +350,7 @@
343 </div> 350 </div>
344 </div> 351 </div>
345 <div> 352 <div>
346 - <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button> 353 + <el-button class="multiple-choice-button" @click="addLogMonitor()">添加日志检测</el-button>
347 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 354 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
348 </div> 355 </div>
349 </div> 356 </div>
@@ -371,7 +378,7 @@ @@ -371,7 +378,7 @@
371 </div> 378 </div>
372 </div> 379 </div>
373 <div> 380 <div>
374 - <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button> 381 + <el-button class="multiple-choice-button" @click="addSubscriptionReport()">添加订阅人员</el-button>
375 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon"> 382 <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
376 </div> 383 </div>
377 </div> 384 </div>
@@ -386,36 +393,19 @@ @@ -386,36 +393,19 @@
386 393
387 </div> 394 </div>
388 395
389 - <!--网络检测弹窗-->  
390 <div class="network-monitor-popup popup-bg"> 396 <div class="network-monitor-popup popup-bg">
391 -  
392 - <DiagnosisNet v-if="networkMonitorVisible" @callback="getNetworkMonitorList" ></DiagnosisNet>  
393 -<!-- <div class="network-monitor-popup-left">-->  
394 -<!-- <span>-->  
395 -<!-- <div class="context-head">-->  
396 -<!-- 已配置链路-->  
397 -<!-- </div>-->  
398 -<!-- </span>-->  
399 -<!-- <span v-for="(item, index) in networkMonitorList" :key="index">-->  
400 -<!-- <span>-->  
401 -<!-- <div class="multiple-choice-button">{{item.title}}</div>-->  
402 -<!-- &lt;!&ndash;img&ndash;&gt;-->  
403 -<!-- </span>-->  
404 -<!-- </span>-->  
405 -<!-- <span>-->  
406 -<!-- <div class="multiple-choice-button">-->  
407 -<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">-->  
408 -<!-- </div>-->  
409 -<!-- </span>-->  
410 -<!-- </div>-->  
411 -<!-- <div class="network-monitor-popup-right">-->  
412 -<!-- <div class="context-head">-->  
413 -<!-- <span>电子税务局网络链路配置</span>-->  
414 -<!-- <span>-->  
415 -<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">-->  
416 -<!-- </span>-->  
417 -<!-- </div>-->  
418 -<!-- </div>--> 397 + <!--网络检测弹窗-->
  398 + <DiagnosisNet v-if="networkMonitorVisible" :propsData="propsData" @callback="getNetworkMonitorList" ></DiagnosisNet>
  399 + <!--应用监测弹框-->
  400 + <ApplicationMoni v-if="applicationMonitorVisible" @callbackApp="getApplicationMoniList"></ApplicationMoni>
  401 + <!--APM弹框-->
  402 + <APM v-if="APMVisible" @callbackAPM="getAPMList"></APM>
  403 + <!--日志监测弹框-->
  404 + <LogMonition v-if="logMonitionVisible" @callbackLog="getLogMonitionList"></LogMonition>
  405 + <!--订阅人员弹框-->
  406 + <SubscriptionReport v-if="subscriptionReportVisible" @callbackSub="getSubscriptionReportList"></SubscriptionReport>
419 </div> 407 </div>
420 408
  409 +
  410 +
421 </div> 411 </div>
1 export default { 1 export default {
2 - name: 'faultDiagnosis', 2 + name: 'diagnosis',
3 template: '', 3 template: '',
4 components: { 4 components: {
5 'DiagnosisNet': Vue.defineAsyncComponent( 5 'DiagnosisNet': Vue.defineAsyncComponent(
6 () => myImport('views/faultDiagnosis/components/diagnosisNet/index') 6 () => myImport('views/faultDiagnosis/components/diagnosisNet/index')
7 ),//网络监测组件 7 ),//网络监测组件
  8 + 'ApplicationMoni': Vue.defineAsyncComponent(
  9 + () => myImport('views/faultDiagnosis/components/applicationMoni/index')
  10 + ),//应用监测组件
  11 + 'APM': Vue.defineAsyncComponent(
  12 + () => myImport('views/faultDiagnosis/components/APM/index')
  13 + ),//APM组件
  14 + 'LogMonition': Vue.defineAsyncComponent(
  15 + () => myImport('views/faultDiagnosis/components/logMonition/index')
  16 + ),//日志监测组件
  17 + 'SubscriptionReport': Vue.defineAsyncComponent(
  18 + () => myImport('views/faultDiagnosis/components/subscriptionReport/index')
  19 + ),//日志监测组件
  20 + 'BasicEnvironment': Vue.defineAsyncComponent(
  21 + () => myImport('views/faultDiagnosis/components/basicEnvironment/index')
  22 + ),//基础环境表格组件
8 }, 23 },
9 props:['detailData'], 24 props:['detailData'],
10 data () { 25 data () {
@@ -26,37 +41,23 @@ export default { @@ -26,37 +41,23 @@ export default {
26 faultAPMRadio:'1',//APM 41 faultAPMRadio:'1',//APM
27 faultLogRadio:'1',//日志 42 faultLogRadio:'1',//日志
28 // isClickNet:0,//配置链接选择 43 // isClickNet:0,//配置链接选择
29 - environmentTableData: [  
30 - {  
31 - name: '服务器',  
32 - address: 'CPU使用率，内存使用率，文件系统使用率',  
33 - },  
34 - {  
35 - name: '服务器',  
36 - address: 'CPU使用率，内存使用率，文件系统使用率',  
37 - },  
38 - {  
39 - name: '服务器',  
40 - address: 'CPU使用率，内存使用率，文件系统使用率',  
41 - },  
42 - {  
43 - name: '服务器',  
44 - address: 'CPU使用率，内存使用率，文件系统使用率',  
45 - },  
46 - {  
47 - name: '服务器',  
48 - address: 'CPU使用率，内存使用率，文件系统使用率',  
49 - }, 44 + columnsEnvironment:[
  45 + //基础环境表格字段
  46 +
50 { 47 {
51 - name: '服务器',  
52 - address: 'CPU使用率，内存使用率，文件系统使用率', 48 + prop: 'resTypeName',
  49 + label: '资源类型',
  50 + sortable: true,
  51 + align: 'center',
53 }, 52 },
54 { 53 {
55 - name: '服务器',  
56 - address: 'CPU使用率，内存使用率，文件系统使用率',  
57 - }, 54 + prop: 'flag',
  55 + label: '指标标识',
  56 + sortable: true,
  57 + align: 'center',
  58 + }
  59 + ],
58 60
59 - ],//基础环境表格数据  
60 //网络检测选中项集合 61 //网络检测选中项集合
61 networkMonitorList: [ 62 networkMonitorList: [
62 { 63 {
@@ -129,12 +130,28 @@ export default { @@ -129,12 +130,28 @@ export default {
129 // nodeData:[{name:'',img:''}] 130 // nodeData:[{name:'',img:''}]
130 //所属业务列表数据 131 //所属业务列表数据
131 busTypeList:'', 132 busTypeList:'',
  133 + applicationMonitorVisible:false,//应用检测弹框
  134 + APMVisible:false,//APM弹框
  135 + logMonitionVisible:false,//日志监测弹框
  136 + subscriptionReportVisible:false,//订阅人员弹框
132 } 137 }
133 }, 138 },
134 setup(props){ 139 setup(props){
135 - let busTypeArr = props.detailData?[props.detailData.bizId]:Vue.ref(); 140 + //所属业务id
  141 + let busTypeArr = props.detailData?props.detailData.bizId:Vue.ref();
  142 + //诊断文档id
  143 + let docId= props.detailData?props.detailData.id:Vue.ref();
  144 + //模块id--网络监测，应用监测...
  145 + let targetId=Vue.ref();
  146 + let propsData=Vue.ref();//向子组件传值所属业务id
  147 + //配置详情数据
  148 + let configData=Vue.ref();
136 return{ 149 return{
137 - busTypeArr 150 + busTypeArr,
  151 + propsData,
  152 + docId,
  153 + targetId,
  154 + configData
138 } 155 }
139 }, 156 },
140 computed: {}, 157 computed: {},
@@ -243,64 +260,101 @@ export default { @@ -243,64 +260,101 @@ export default {
243 260
244 } 261 }
245 }, 262 },
246 - //点击添加网络检测item  
247 - addNetworkMonitorItem(){  
248 263
249 - },  
250 - //点击添加网络监测 264 + //点击添加网络监测,type==npm
251 addNetNode(){ 265 addNetNode(){
  266 + let that=this;
  267 + if(this.busTypeArr){
252 this.networkMonitorVisible = true; 268 this.networkMonitorVisible = true;
  269 + console.log("this.busTypeArr",this.busTypeArr,this.configData)
  270 + if(this.configData){
  271 + this.configData.map((item,index)=>{
  272 + if(item.type=='npm'){
  273 + that.targetId=item.targetId;
  274 + }
  275 + })
  276 + }
  277 +
  278 + this.propsData={
  279 + bizId:this.busTypeArr,
  280 + docId:this.docId,
  281 + targetId:this.targetId
  282 + }
  283 + }else{
  284 + this.$global.showMsg('请选择所属业务','warning')
  285 + }
  286 +
253 }, 287 },
254 //关闭网络测试添加配置节点弹框 288 //关闭网络测试添加配置节点弹框
255 getNetworkMonitorList(itemData){ 289 getNetworkMonitorList(itemData){
256 console.log("itemdata",itemData) 290 console.log("itemdata",itemData)
257 this.networkMonitorVisible=false; 291 this.networkMonitorVisible=false;
258 // this.networkMonitorList=itemData; 292 // this.networkMonitorList=itemData;
259 - }  
260 - /* //点击已配置链路  
261 - clickList(item,index){  
262 - this.isClickNet=index;  
263 - this.nodeData=[  
264 - {  
265 - name:'节点1',  
266 - img:'123'  
267 - },  
268 - {  
269 - name:'节点2',  
270 - img:'123'  
271 - }  
272 - ]  
273 - this.nodeData.push({name:'',img:''})  
274 }, 293 },
  294 + //点击添加应用检测
  295 + addApplicationMonitor(){
  296 + this.applicationMonitorVisible=true;
275 297
276 - //新增配置链路节点  
277 - addSet(){  
278 - this.nodeData=[{name:'',img:''}]  
279 298
280 }, 299 },
281 - //删除配置节点  
282 - deletNode(item){  
283 - 300 + //关闭应用监测添加弹框
  301 + getApplicationMoniList(itemData){
  302 + this.applicationMonitorVisible=false;
  303 + // this.applicationMonitorList=itemData;
284 }, 304 },
285 - //获取配置链接节点数据  
286 - getNodeData(){  
287 - this.nodeData=[  
288 - {  
289 - name:'节点1',  
290 - img:'123' 305 + //点击添加APM弹框
  306 + addAPM(){
  307 + this.APMVisible=true;
291 }, 308 },
292 - {  
293 - name:'节点2',  
294 - img:'123' 309 + //关闭APM弹框
  310 + getAPMList(itemData){
  311 + this.APMVisible=false;
  312 + // this.apmMonitorList=itemData;
  313 + },
  314 + //点击添加日志监测弹框
  315 + addLogMonitor(){
  316 + this.logMonitionVisible=true;
  317 + },
  318 + //关闭日志监测弹框
  319 + getLogMonitionList(itemData){
  320 + this.logMonitionVisible=false;
  321 + // this.logDetectionList=itemData;
  322 + },
  323 + //点击添加订阅人员报告弹框
  324 + addSubscriptionReport(){
  325 + this.subscriptionReportVisible=true;
  326 + },
  327 + //关闭订阅人员报告弹框
  328 + getSubscriptionReportList(itemData){
  329 + this.subscriptionReportVisible=false;
  330 + // this.subscriptionReportList=itemData;
  331 + },
  332 + //基础环境指标删除回调函数
  333 + deleteEnvironment(obj){
  334 + this.deleteItem(obj.id,obj.list)
  335 + },
  336 + //根据诊断文档id获取配置详情
  337 + getDetailByid(){
  338 + let that=this;
  339 + if(this.docId){
  340 + let params={}
  341 + this.$http.get('/api-web/fault/conf/detail/'+this.docId,params,function (res){
  342 + if(res){
  343 + that.configData=res.data;
  344 + // that.targetId=
295 } 345 }
296 - ]  
297 - this.nodeData.push({name:'',img:''})  
298 - }*/ 346 +
  347 + })
  348 + }
  349 +
  350 + }
  351 +
299 352
300 353
301 }, 354 },
302 mounted () { 355 mounted () {
303 this.init() 356 this.init()
  357 + this.getDetailByid();
304 }, 358 },
305 unmounted () {} 359 unmounted () {}
306 360
@@ -9,7 +9,7 @@ @@ -9,7 +9,7 @@
9 </div> 9 </div>
10 <div @click="clickList(item,index)" :class="['list-net',{'isActive':index==isClickNet}]" v-for="(item, index) in networkMonitorList" :key="index"> 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 "> 11 <div class="flex-div-center ">
12 - <div class="multiple-choice-button">{{item.title}}</div> 12 + <div class="multiple-choice-button">{{item.linkName}}</div>
13 <img v-show="index==isClickNet" class="img-delete" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" alt=""> 13 <img v-show="index==isClickNet" class="img-delete" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" alt="">
14 </div> 14 </div>
15 </div> 15 </div>
@@ -39,7 +39,8 @@ @@ -39,7 +39,8 @@
39 <i v-if="item.name" class="icon-delete-right" @click.stop="deleteNode(item,index)"></i> 39 <i v-if="item.name" class="icon-delete-right" @click.stop="deleteNode(item,index)"></i>
40 <i class="icon-step"></i> 40 <i class="icon-step"></i>
41 </div> 41 </div>
42 - <span :class="['list-line',{'isActive':item.name && index<nodeData.length}]"></span> 42 +<!-- <span :class="['list-line',{'isActive':item.name && index<nodeData.length}]"></span>-->
  43 + <span :class="['list-line',{'isActive':index<nodeData.length}]"></span>
43 </div> 44 </div>
44 <div v-show="item.name" class="list-step-name"> 45 <div v-show="item.name" class="list-step-name">
45 {{item.name}} 46 {{item.name}}
@@ -71,24 +72,29 @@ @@ -71,24 +72,29 @@
71 <el-col :span="24"> 72 <el-col :span="24">
72 <div class="flex-div-start margin-top-bottom-10"> 73 <div class="flex-div-start margin-top-bottom-10">
73 74
74 - <el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务"> 75 + <!--<el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
75 <el-option 76 <el-option
76 v-for="item in busTypeList" 77 v-for="item in busTypeList"
77 :label="item.busTypeName" :value="item.busId"></el-option> 78 :label="item.busTypeName" :value="item.busId"></el-option>
  79 + </el-select>-->
  80 + <el-select class="margin-right-10" v-model="resTypeArr" @change="changeRes" filterable clearable collapse-tags placeholder="请选择资源">
  81 + <el-option
  82 + v-for="item in resTypeList"
  83 + :label="item.resName" :value="item.resId"></el-option>
78 </el-select> 84 </el-select>
79 85
80 - <el-dropdown class="margin-right-10"> 86 + <!-- <el-dropdown class="margin-right-10">
81 <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/> 87 <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
82 - </el-dropdown> 88 + </el-dropdown>-->
83 89
84 90
85 - <el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标"> 91 + <el-select class="margin-right-10" v-model="kpiTypeArr" filterable clearable collapse-tags placeholder="请选择指标">
86 <el-option 92 <el-option
87 v-for="item in kpiList" 93 v-for="item in kpiList"
88 :label="item.kpiName" :value="item.kpiId"></el-option> 94 :label="item.kpiName" :value="item.kpiId"></el-option>
89 </el-select> 95 </el-select>
90 96
91 - <el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" /> 97 +<!-- <el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />-->
92 98
93 <div class="flex-div-start"> 99 <div class="flex-div-start">
94 <el-button type="primary" @click="onReset()">重置</el-button> 100 <el-button type="primary" @click="onReset()">重置</el-button>
@@ -97,6 +103,10 @@ @@ -97,6 +103,10 @@
97 </div> 103 </div>
98 </el-col> 104 </el-col>
99 </el-row> 105 </el-row>
  106 + <el-row class="flex-div-start" style="margin-bottom: 10px;margin-top: 10px;padding-top:10px;border-top:1px solid #ebeef5" >
  107 + <span>配置链路名称</span>
  108 + <el-input style="flex:1;margin-left:10px;" class="margin-right-10" v-model="linkName" placeholder="输入链路名称" />
  109 + </el-row>
100 <el-row class="margin-bottom-50"> 110 <el-row class="margin-bottom-50">
101 <el-col :span="24"> 111 <el-col :span="24">
102 <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" 112 <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
1 export default { 1 export default {
2 - name: 'faultDiagnosis', 2 + name: 'diagnosisNet',
3 template: '', 3 template: '',
4 components: {}, 4 components: {},
5 - // props:['networkMonitorList'], 5 + props:['propsData'],
6 data () { 6 data () {
7 return { 7 return {
8 titleName:'故障新增内容', 8 titleName:'故障新增内容',
  9 + apiUrl1:'/api-web/fault/conf/netLink/saveLinkAndNodeInfo',//保存网络链路信息一节链路节点
  10 + apiUrl2:'/api-web/fault/conf/netLink/getNetLinkList',//根据targetId获取链路信息列表
9 tableVisible:false,//添加配置列表是否显示 11 tableVisible:false,//添加配置列表是否显示
10 networkMonitorVisible: true, 12 networkMonitorVisible: true,
11 isClickNet:-1,//配置链接选择 13 isClickNet:-1,//配置链接选择
@@ -36,12 +38,7 @@ export default { @@ -36,12 +38,7 @@ export default {
36 sortable: true, 38 sortable: true,
37 align: 'center', 39 align: 'center',
38 }, 40 },
39 - {  
40 - prop: 'resTypeName',  
41 - label: '资源类型',  
42 - sortable: true,  
43 - align: 'center',  
44 - }, 41 +
45 { 42 {
46 prop: 'resName', 43 prop: 'resName',
47 label: '资源名称', 44 label: '资源名称',
@@ -49,12 +46,6 @@ export default { @@ -49,12 +46,6 @@ export default {
49 align: 'center', 46 align: 'center',
50 }, 47 },
51 { 48 {
52 - prop: 'ip',  
53 - label: 'ip地址',  
54 - sortable: true,  
55 - align: 'center',  
56 - },  
57 - {  
58 prop: 'kpiName', 49 prop: 'kpiName',
59 label: '指标名称', 50 label: '指标名称',
60 sortable: true, 51 sortable: true,
@@ -65,53 +56,157 @@ export default { @@ -65,53 +56,157 @@ export default {
65 label: '指标标识', 56 label: '指标标识',
66 sortable: true, 57 sortable: true,
67 align: 'center', 58 align: 'center',
68 - } 59 + },
  60 + {
  61 + prop: 'name',
  62 + label: '标识名称',
  63 + sortable: true,
  64 + align: 'center',
  65 + },
69 ], 66 ],
70 // tabSecondList:[],//节点配置列表数据 67 // tabSecondList:[],//节点配置列表数据
71 addSetLIstVisible:true,//无节点配置列表是的添加配置 68 addSetLIstVisible:true,//无节点配置列表是的添加配置
72 } 69 }
73 }, 70 },
74 computed: {}, 71 computed: {},
75 - setup(){ 72 + setup(props){
76 const {proxy} = Vue.getCurrentInstance(); 73 const {proxy} = Vue.getCurrentInstance();
77 let id = proxy.$global.getQueryVariable('configId') ; 74 let id = proxy.$global.getQueryVariable('configId') ;
78 let config = Vue.ref(id == false ? null : id); 75 let config = Vue.ref(id == false ? null : id);
79 let count=Vue.ref(0); 76 let count=Vue.ref(0);
80 let tableDataList = Vue.ref([]); 77 let tableDataList = Vue.ref([]);
81 - let resTypeArr = Vue.ref([]); 78 + let resTypeArr = Vue.ref();
82 let kpiTypeArr = Vue.ref([]); 79 let kpiTypeArr = Vue.ref([]);
  80 + // let busTypeArr = Vue.ref([]);
  81 + let targetId=Vue.ref();//所属模块id
  82 + let bizId=Vue.ref();//所属业务id
83 let busTypeArr = Vue.ref([]); 83 let busTypeArr = Vue.ref([]);
84 let keyWords= Vue.ref(''); 84 let keyWords= Vue.ref('');
85 let resTypeList = Vue.ref([]); 85 let resTypeList = Vue.ref([]);
86 let kpiList = Vue.ref([]); 86 let kpiList = Vue.ref([]);
87 let busTypeList = Vue.ref([]); 87 let busTypeList = Vue.ref([]);
  88 + //配置链路名称
  89 + let linkName=Vue.ref();
88 let init = () =>{ 90 let init = () =>{
89 - proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) { 91 + //根据业务id获取资源列表
  92 + let paramsRes={
  93 + busId:proxy.bizId
  94 + }
  95 + proxy.$http.get("/api-web/fault/conf/resource/getResourceByBusId", paramsRes, function(res) {
90 if (res && res.data) { 96 if (res && res.data) {
91 - proxy.kpiList = res.data; 97 + proxy.resTypeList = res.data;
92 } 98 }
93 }) 99 })
  100 + proxy.getResData();
94 101
95 proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) { 102 proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
96 if (res && res.data) { 103 if (res && res.data) {
97 proxy.busTypeList = res.data; 104 proxy.busTypeList = res.data;
98 } 105 }
99 }) 106 })
  107 +
  108 + }
  109 + let getResData=()=>{
  110 + //根据业务id获取指标列表
  111 + let paramsKpi={
  112 + resId:proxy.resTypeArr
  113 + }
  114 + proxy.$http.get("/api-web/fault/conf/kpi/getKpiByResId", paramsKpi, function(res) {
  115 + if (res && res.data) {
  116 + proxy.kpiList = res.data;
  117 + }
  118 + })
  119 + }
  120 + let changeRes=(val)=>{
  121 + proxy.getResData();
  122 +
100 } 123 }
101 let onReset = () => { 124 let onReset = () => {
102 proxy.keyWords = ''; 125 proxy.keyWords = '';
103 - proxy.resTypeArr = [];  
104 - proxy.kpiTypeArr = []; 126 + proxy.resTypeArr = '';
  127 + proxy.kpiTypeArr = '';
105 proxy.busTypeArr = []; 128 proxy.busTypeArr = [];
106 } 129 }
107 // 点击按钮搜索 130 // 点击按钮搜索
108 let onBtnSearch = () => { 131 let onBtnSearch = () => {
109 proxy.loadTableDataList(); 132 proxy.loadTableDataList();
110 } 133 }
  134 +
  135 + //获取链路信息列表
  136 + let getNetLinkList=()=>{
  137 + console.log("333",proxy.targetId)
  138 + let params={
  139 + targetId:proxy.targetId
  140 +
  141 + }
  142 + proxy.$http.get(proxy.apiUrl2,params,function (res){
  143 + if(res){
  144 + proxy.networkMonitorList=res.data;
  145 + proxy.getNodeData();
  146 +
  147 + }
  148 + })
  149 + }
  150 + //保存网络链路信息及链路节点
  151 + let saveLinkAndNodeInfo=(row)=>{
  152 + let params={
  153 + bNetLink:{
  154 + linkName:proxy.linkName,
  155 + bizId:proxy.bizId,
  156 + targetId:proxy.targetId,
  157 + },
  158 + bNetNodeList:[
  159 + row
  160 + ]
  161 +
  162 + }
  163 + proxy.$http.post(proxy.apiUrl1,params,function (res){
  164 + if(res){
  165 + proxy.$global.showMsg("添加成功", "success")
  166 + proxy.tableVisible=false;
  167 + proxy.targetId=res.object.targetId
  168 +
  169 + proxy.getNetLinkList();
  170 + }
  171 + })
  172 + }
  173 + //添加节点
  174 + let addRes=(row,index)=>{
  175 + console.log("row",!proxy.linkName)
  176 + if(!proxy.linkName){
  177 + console.log("1*1")
  178 + proxy.$global.showMsg('请填写配置链路名称','warning')
  179 +
  180 + }else{
  181 + console.log("2*2")
  182 + proxy.saveLinkAndNodeInfo(row);
  183 +
  184 +
  185 + }
  186 +
  187 + }
  188 + let setBizId=()=>{
  189 + if(props.propsData){
  190 + proxy.bizId=props.propsData.bizId;
  191 + proxy.targetId=props.propsData.targetId;
  192 + proxy.busTypeArr=[props.propsData.bizId];
  193 + }
  194 + console.log("*",props.propsData,proxy.bizId,proxy.busTypeArr)
  195 +
  196 + }
  197 +
111 return { 198 return {
  199 + addRes,
  200 + setBizId,
  201 + saveLinkAndNodeInfo,
  202 + getNetLinkList,
  203 + bizId,
  204 + targetId,
112 config, 205 config,
113 count, 206 count,
114 tableDataList, 207 tableDataList,
  208 + kpiList,
  209 + busTypeList,
115 keyWords, 210 keyWords,
116 resTypeArr, 211 resTypeArr,
117 kpiTypeArr, 212 kpiTypeArr,
@@ -119,7 +214,10 @@ export default { @@ -119,7 +214,10 @@ export default {
119 resTypeList, 214 resTypeList,
120 init, 215 init,
121 onReset, 216 onReset,
122 - onBtnSearch 217 + onBtnSearch,
  218 + getResData,
  219 + changeRes,
  220 + linkName
123 } 221 }
124 222
125 }, 223 },
@@ -165,7 +263,9 @@ export default { @@ -165,7 +263,9 @@ export default {
165 }, 263 },
166 //获取配置链接节点数据 264 //获取配置链接节点数据
167 getNodeData(){ 265 getNodeData(){
168 - this.nodeData=[ 266 + if(this.networkMonitorList.length==0){
  267 + this.addSetLIstVisible=true;
  268 + /*this.nodeData=[
169 { 269 {
170 name:'节点1', 270 name:'节点1',
171 img:'123' 271 img:'123'
@@ -174,7 +274,9 @@ export default { @@ -174,7 +274,9 @@ export default {
174 name:'节点2', 274 name:'节点2',
175 img:'123' 275 img:'123'
176 } 276 }
177 - ] 277 + ]*/
  278 + }
  279 +
178 if(this.nodeData.length>1){ 280 if(this.nodeData.length>1){
179 this.addSetLIstVisible=false; 281 this.addSetLIstVisible=false;
180 this.isClickNet=0; 282 this.isClickNet=0;
@@ -198,6 +300,7 @@ export default { @@ -198,6 +300,7 @@ export default {
198 saveList(){ 300 saveList(){
199 this.tableVisible=false; 301 this.tableVisible=false;
200 this.titleName='故障新增内容'; 302 this.titleName='故障新增内容';
  303 +
201 }, 304 },
202 //重新加载表格数据 305 //重新加载表格数据
203 loadTableDataList(){ 306 loadTableDataList(){
@@ -206,8 +309,10 @@ export default { @@ -206,8 +309,10 @@ export default {
206 //获取配置节点列表数据 309 //获取配置节点列表数据
207 getNodeList(){ 310 getNodeList(){
208 let that=this; 311 let that=this;
209 - this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {  
210 - if (res && res.success) { 312 +
  313 + // this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
  314 + this.$http.get(`/api-web/fault/conf/netLink/queryLinkDataByBusId`, this.getParams(), function (res) {
  315 + if (res && res.data) {
211 that.count = res.count; 316 that.count = res.count;
212 that.tableDataList = res.data; 317 that.tableDataList = res.data;
213 } 318 }
@@ -216,24 +321,25 @@ export default { @@ -216,24 +321,25 @@ export default {
216 //配置参数 321 //配置参数
217 getParams(){ 322 getParams(){
218 return { 323 return {
219 - keyWords: this.keyWords,  
220 - resType: this.resTypeArr.join(','),  
221 - kpiId: this.kpiTypeArr.join(','), 324 + resId: this.resTypeArr,
  325 + kpiId: this.kpiTypeArr,
222 busId: this.busTypeArr.join(','), 326 busId: this.busTypeArr.join(','),
223 - configId: this.config,  
224 page: 1, 327 page: 1,
225 - limit: 5 328 + pageSize: 5
226 } 329 }
227 }, 330 },
228 //关闭弹框 331 //关闭弹框
229 closeDialog(){ 332 closeDialog(){
230 this.$emit('callback', '111'); 333 this.$emit('callback', '111');
231 - } 334 + },
  335 +
232 336
233 337
234 }, 338 },
235 mounted () { 339 mounted () {
236 - this.getNodeData(); 340 + this.setBizId();
  341 + this.getNetLinkList();
  342 + // this.getNodeData();
237 }, 343 },
238 unmounted () {} 344 unmounted () {}
239 345
  1 +<el-dialog v-model="logMonitionVisible" :title="titleName" width="60%" @close="closeDialog">
  2 +
  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" multiple 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>-->
  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 + </div>
  34 + </div>
  35 + </el-col>
  36 + </el-row>
  37 + <el-row class="margin-bottom-50">
  38 + <el-col :span="24">
  39 + <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
  40 + :showIndex="true" :total="count"
  41 + :showBorder="true" :loading="false"
  42 + :showPage="true" :showTools="true" :height="(height - 500)">
  43 + <template #tools="{scope}">
  44 + <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
  45 + <i class="el-icon-plus"/> 添加
  46 + </el-button>
  47 + </template>
  48 + </cm-table-page>
  49 + </el-col>
  50 +
  51 + </el-row>
  52 +
  53 +
  54 + </div>
  55 +
  56 +
  57 + </el-col>
  58 +
  59 +
  60 + </el-row>
  61 + <div class="margin-top flex-center position-bottom">
  62 + <el-button @click="cancleList">取消</el-button>
  63 + <el-button @click="saveList" type="primary">保存</el-button>
  64 + </div>
  65 +</el-dialog>
  1 +export default {
  2 + name: 'logMonition',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 + titleName:'添加内容',
  8 + tableVisible:false,//添加配置列表是否显示
  9 + logMonitionVisible: true,
  10 + columns:[
  11 + {
  12 + prop: 'busTypeName',
  13 + label: '业务系统',
  14 + sortable: true,
  15 + align: 'center',
  16 + },
  17 + {
  18 + prop: 'resTypeName',
  19 + label: '资源类型',
  20 + sortable: true,
  21 + align: 'center',
  22 + },
  23 + {
  24 + prop: 'resName',
  25 + label: '资源名称',
  26 + sortable: true,
  27 + align: 'center',
  28 + },
  29 + {
  30 + prop: 'ip',
  31 + label: 'ip地址',
  32 + sortable: true,
  33 + align: 'center',
  34 + },
  35 + {
  36 + prop: 'kpiName',
  37 + label: '指标名称',
  38 + sortable: true,
  39 + align: 'center',
  40 + },
  41 + {
  42 + prop: 'flag',
  43 + label: '指标标识',
  44 + sortable: true,
  45 + align: 'center',
  46 + }
  47 + ],
  48 + // tabSecondList:[],//节点配置列表数据
  49 + }
  50 + },
  51 + computed: {},
  52 + setup(){
  53 + const {proxy} = Vue.getCurrentInstance();
  54 + let id = proxy.$global.getQueryVariable('configId') ;
  55 + let config = Vue.ref(id == false ? null : id);
  56 + let count=Vue.ref(0);
  57 + let tableDataList = Vue.ref([]);
  58 + let resTypeArr = Vue.ref([]);
  59 + let kpiTypeArr = Vue.ref([]);
  60 + let busTypeArr = Vue.ref([]);
  61 + let keyWords= Vue.ref('');
  62 + let resTypeList = Vue.ref([]);
  63 + let kpiList = Vue.ref([]);
  64 + let busTypeList = Vue.ref([]);
  65 + let init = () =>{
  66 + proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
  67 + if (res && res.data) {
  68 + proxy.kpiList = res.data;
  69 + }
  70 + })
  71 +
  72 + proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
  73 + if (res && res.data) {
  74 + proxy.busTypeList = res.data;
  75 + }
  76 + })
  77 + }
  78 + let onReset = () => {
  79 + proxy.keyWords = '';
  80 + proxy.resTypeArr = [];
  81 + proxy.kpiTypeArr = [];
  82 + proxy.busTypeArr = [];
  83 + }
  84 + // 点击按钮搜索
  85 + let onBtnSearch = () => {
  86 + proxy.loadTableDataList();
  87 + }
  88 + return {
  89 + config,
  90 + count,
  91 + tableDataList,
  92 + kpiList,
  93 + busTypeList,
  94 + keyWords,
  95 + resTypeArr,
  96 + kpiTypeArr,
  97 + busTypeArr,
  98 + resTypeList,
  99 + init,
  100 + onReset,
  101 + onBtnSearch
  102 + }
  103 +
  104 + },
  105 + methods: {
  106 +
  107 + //取消节点列表配置
  108 + cancleList(){
  109 + this.logMonitionVisible=false;
  110 +
  111 + },
  112 + //保存节点添加配置
  113 + saveList(){
  114 + this.logMonitionVisible=false;
  115 + },
  116 + //重新加载表格数据
  117 + loadTableDataList(){
  118 + this.getNodeList()
  119 + },
  120 + //获取配置节点列表数据
  121 + getNodeList(){
  122 + let that=this;
  123 + this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
  124 + if (res && res.success) {
  125 + that.count = res.count;
  126 + that.tableDataList = res.data;
  127 + }
  128 + });
  129 + },
  130 + //配置参数
  131 + getParams(){
  132 + return {
  133 + keyWords: this.keyWords,
  134 + resType: this.resTypeArr.join(','),
  135 + kpiId: this.kpiTypeArr.join(','),
  136 + busId: this.busTypeArr.join(','),
  137 + configId: this.config,
  138 + page: 1,
  139 + limit: 5
  140 + }
  141 + },
  142 + //关闭弹框
  143 + closeDialog(){
  144 + this.$emit('callbackAPM', 'APM');
  145 + }
  146 +
  147 +
  148 + },
  149 + mounted () {
  150 + this.init();
  151 + this.getNodeList();
  152 + },
  153 + unmounted () {}
  154 +
  155 +}
  1 +<el-dialog v-model="subscriptionReportVisible" :title="titleName" width="60%" @close="closeDialog">
  2 +
  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" multiple 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>-->
  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 + </div>
  34 + </div>
  35 + </el-col>
  36 + </el-row>
  37 + <el-row class="margin-bottom-50">
  38 + <el-col :span="24">
  39 + <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
  40 + :showIndex="true" :total="count"
  41 + :showBorder="true" :loading="false"
  42 + :showPage="true" :showTools="true" :height="(height - 500)">
  43 + <template #tools="{scope}">
  44 + <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
  45 + <i class="el-icon-plus"/> 添加
  46 + </el-button>
  47 + </template>
  48 + </cm-table-page>
  49 + </el-col>
  50 +
  51 + </el-row>
  52 +
  53 +
  54 + </div>
  55 +
  56 +
  57 + </el-col>
  58 +
  59 +
  60 + </el-row>
  61 + <div class="margin-top flex-center position-bottom">
  62 + <el-button @click="cancleList">取消</el-button>
  63 + <el-button @click="saveList" type="primary">保存</el-button>
  64 + </div>
  65 +</el-dialog>
  1 +export default {
  2 + name: 'subscriptionReport',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 + titleName:'添加内容',
  8 + tableVisible:false,//添加配置列表是否显示
  9 + subscriptionReportVisible: true,
  10 + columns:[
  11 + {
  12 + prop: 'busTypeName',
  13 + label: '业务系统',
  14 + sortable: true,
  15 + align: 'center',
  16 + },
  17 + {
  18 + prop: 'resTypeName',
  19 + label: '资源类型',
  20 + sortable: true,
  21 + align: 'center',
  22 + },
  23 + {
  24 + prop: 'resName',
  25 + label: '资源名称',
  26 + sortable: true,
  27 + align: 'center',
  28 + },
  29 + {
  30 + prop: 'ip',
  31 + label: 'ip地址',
  32 + sortable: true,
  33 + align: 'center',
  34 + },
  35 + {
  36 + prop: 'kpiName',
  37 + label: '指标名称',
  38 + sortable: true,
  39 + align: 'center',
  40 + },
  41 + {
  42 + prop: 'flag',
  43 + label: '指标标识',
  44 + sortable: true,
  45 + align: 'center',
  46 + }
  47 + ],
  48 + // tabSecondList:[],//节点配置列表数据
  49 + }
  50 + },
  51 + computed: {},
  52 + setup(){
  53 + const {proxy} = Vue.getCurrentInstance();
  54 + let id = proxy.$global.getQueryVariable('configId') ;
  55 + let config = Vue.ref(id == false ? null : id);
  56 + let count=Vue.ref(0);
  57 + let tableDataList = Vue.ref([]);
  58 + let resTypeArr = Vue.ref([]);
  59 + let kpiTypeArr = Vue.ref([]);
  60 + let busTypeArr = Vue.ref([]);
  61 + let keyWords= Vue.ref('');
  62 + let resTypeList = Vue.ref([]);
  63 + let kpiList = Vue.ref([]);
  64 + let busTypeList = Vue.ref([]);
  65 + let init = () =>{
  66 + proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
  67 + if (res && res.data) {
  68 + proxy.kpiList = res.data;
  69 + }
  70 + })
  71 +
  72 + proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
  73 + if (res && res.data) {
  74 + proxy.busTypeList = res.data;
  75 + }
  76 + })
  77 + }
  78 + let onReset = () => {
  79 + proxy.keyWords = '';
  80 + proxy.resTypeArr = [];
  81 + proxy.kpiTypeArr = [];
  82 + proxy.busTypeArr = [];
  83 + }
  84 + // 点击按钮搜索
  85 + let onBtnSearch = () => {
  86 + proxy.loadTableDataList();
  87 + }
  88 + return {
  89 + config,
  90 + count,
  91 + tableDataList,
  92 + kpiList,
  93 + busTypeList,
  94 + keyWords,
  95 + resTypeArr,
  96 + kpiTypeArr,
  97 + busTypeArr,
  98 + resTypeList,
  99 + init,
  100 + onReset,
  101 + onBtnSearch
  102 + }
  103 +
  104 + },
  105 + methods: {
  106 +
  107 + //取消节点列表配置
  108 + cancleList(){
  109 + this.subscriptionReportVisible=false;
  110 +
  111 + },
  112 + //保存节点添加配置
  113 + saveList(){
  114 + this.subscriptionReportVisible=false;
  115 + },
  116 + //重新加载表格数据
  117 + loadTableDataList(){
  118 + this.getNodeList()
  119 + },
  120 + //获取配置节点列表数据
  121 + getNodeList(){
  122 + let that=this;
  123 + this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
  124 + if (res && res.success) {
  125 + that.count = res.count;
  126 + that.tableDataList = res.data;
  127 + }
  128 + });
  129 + },
  130 + //配置参数
  131 + getParams(){
  132 + return {
  133 + keyWords: this.keyWords,
  134 + resType: this.resTypeArr.join(','),
  135 + kpiId: this.kpiTypeArr.join(','),
  136 + busId: this.busTypeArr.join(','),
  137 + configId: this.config,
  138 + page: 1,
  139 + limit: 5
  140 + }
  141 + },
  142 + //关闭弹框
  143 + closeDialog(){
  144 + this.$emit('callbackSub', 'sub');
  145 + }
  146 +
  147 +
  148 + },
  149 + mounted () {
  150 + this.init();
  151 + this.getNodeList();
  152 + },
  153 + unmounted () {}
  154 +
  155 +}