monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 5f15663d8cd92a814c4093186d4eb8749d5216a3 2 parents a603e488 fe64ddc5

Merge branch 'master-v32-lushangqing' into 'master' 

故障 应用检测表格数据默认选中



See merge request !251
Inline Side-by-side
Showing 8 changed files with 196 additions and 121 deletions
<div >
<!-- 表格-->
<el-table :border="showBorder" v-loading="loading" :size="size" @selection-change="handleSelectionChange" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
<el-table :border="showBorder" v-loading="loading" :size="size" ref="multipleTable" @selection-change="handleSelectionChange" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
style="width: 100%;margin: 0px 0px;">
<el-table-column v-if="showSelection && columns.length > 0" type="selection" width="55" />
<el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/>
... ...
... ... @@ -81,14 +81,19 @@ export default {
type: String,
default: 'small'
},
multipleSelection:{
type:Array,
default:[]
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let currentPage = Vue.ref(1);
let pageSize = Vue.ref(props.pageSize);
let multipleSelection=Vue.ref([]);
// let multipleSelection=Vue.ref([]);
/**
... ... @@ -172,21 +177,48 @@ export default {
// Vue.watch(() => filterText.value, (newValue, oldVlaue) => {
// proxy.$refs.tree.filter(newValue)
// });
//全选事件
let handleSelectionChange=(val)=>{
multipleSelection.value = val
emit('selectionChange', multipleSelection.value)
// multipleSelection.value = val
emit('selectionChange', val)
}
//设置默认选中
let toggleSelection=(rows)=> {
console.log("rows",rows)
proxy.$nextTick(function () {
console.log("set",props.dataList,props.multipleSelection)
if (rows) {
rows.forEach(row => {
//设置该表格选框选中
proxy.$refs.multipleTable.toggleRowSelection(row);
});
} else {
proxy.$refs.multipleTable.clearSelection();
}
})
}
// 挂载完
Vue.onMounted(() => {
//callback();
})
Vue.watch(()=>props.dataList,(newValue, oldValue)=>{
setTimeout(function (){
if(props.showSelection){
toggleSelection(props.multipleSelection)
}
},100)
})
return {
toggleSelection,
handleSelectionChange,
multipleSelection,
// multipleSelection,
currentPage,
pageSize,
handleSizeChange,
... ...
... ... @@ -91,7 +91,7 @@ export default {
}
// 点击按钮搜索
let onBtnSearch = () => {
proxy.loadTableDataList();
proxy.getNodeList();
}
//获取接收到的传值 bizid
let setBizId=()=>{
... ... @@ -192,7 +192,14 @@ export default {
proxy.getResData();
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
proxy.page=page;
proxy.pageSize=limit;
proxy.getNodeList()
}
return {
loadTableDataList,
saveAllData,
page,
pageSize,
... ... @@ -231,13 +238,7 @@ export default {
saveList(){
this.APMVisible=false;
},
//重新加载表格数据
loadTableDataList(val){
console.log("page",val)
this.page=val.page;
this.pageSize=val.limit;
this.getNodeList()
},
//获取apm配置列表数据
getNodeList(){
let that=this;
... ...
<cm-dialog :title="titleName" width="90%" :showDialogVisible="applicationMonitorVisible" @hidedialog="closeDialog" >
<template v-slot>
<el-row>
<el-col :span="24">
<el-dialog v-model="applicationMonitorVisible" :title="titleName" width="90%" @close="closeDialog" top="3vh">
<el-row>
<el-col :span="24">
<div class="set-add-div">
<el-row>
<el-col :span="24">
<div class="flex-div-start margin-top-bottom-10">
<div class="set-add-div">
<el-row>
<el-col :span="24">
<div class="flex-div-start margin-top-bottom-10">
<!-- <el-select class="margin-right-10" v-model="busTypeArr" filterable clearable collapse-tags placeholder="请选择业务">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
</el-select>
-->
<!-- <el-dropdown class="margin-right-10">
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>
<!-- <el-select class="margin-right-10" v-model="busTypeArr" filterable clearable collapse-tags placeholder="请选择业务">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
</el-select>
-->
<!-- <el-dropdown class="margin-right-10">
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>
<el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标">
<el-option
v-for="item in kpiList"
:label="item.kpiName" :value="item.kpiId"></el-option>
</el-select>-->
<el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标">
<el-option
v-for="item in kpiList"
:label="item.kpiName" :value="item.kpiId"></el-option>
</el-select>-->
<el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
<el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
<div class="flex-div-start">
<el-button type="primary" @click="onReset()">重置</el-button>
<el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
<el-button type="primary" :disabled="isLoading" @click="saveAll()" style="margin-left: 10px">添加选中</el-button>
<el-button type="primary" :disabled="isLoading" @click="saveAlldata()" style="margin-left: 10px">全部添加</el-button>
</div>
<div class="flex-div-start">
<el-button type="primary" @click="onReset()">重置</el-button>
<el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
<el-button type="primary" :disabled="isLoading" @click="saveAll()" style="margin-left: 10px">批量添加</el-button>
<el-button type="primary" :disabled="isLoading" @click="saveAlldata()" style="margin-left: 10px">全部添加</el-button>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24" class="table-height">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange"
:showBorder="true" :loading="false" :pageSize="pageSize"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #default="{row,prop,column}">
<div v-if="prop == 'url'" class="text-overflow" :title="row.url">
<span class="">{{row.url }}</span>
</div>
</template>
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
<i class="el-icon-plus"/> 添加
</el-button>
</template>
</cm-table-page>
</el-col>
</div>
</el-col>
</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"
:showIndex="true" :total="count" :showSelection="true" @selectionChange="selectionChange"
:showBorder="true" :loading="false" :pageSize="pageSize"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #default="{row,prop,column}">
<div v-if="prop == 'url'" class="text-overflow" :title="row.url">
<span class="">{{row.url }}</span>
</el-row>
</div>
</template>
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
<i class="el-icon-plus"/> 添加
</el-button>
</template>
</cm-table-page>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-col>
</el-row>
<div class="margin-top flex-center position-bottom">
<el-button @click="cancleList">取消</el-button>
<!-- <el-button @click="saveList" type="primary">保存</el-button>-->
</div>
</template>
</cm-dialog>
<!--<el-dialog v-model="applicationMonitorVisible" :title="titleName" width="90%" @close="closeDialog" top="3vh">
</el-dialog>-->
</el-row>
<div class="margin-top flex-center position-bottom">
<el-button @click="cancleList">取消</el-button>
<!-- <el-button @click="saveList" type="primary">保存</el-button>-->
</div>
</el-dialog>
... ...
... ... @@ -2,11 +2,11 @@ export default {
name: 'applicationMoni',
template: '',
components: {},
props:['propsData'],
props:['propsData','applicationMonitorList'],
data () {
return {
titleName:'添加内容',
applicationMonitorVisible: true,
titleName:'应用配置',
// applicationMonitorVisible: true,
columns:[
/*{
prop: 'busTypeName',
... ... @@ -57,6 +57,9 @@ 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 init = () =>{
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
if (res && res.data) {
... ... @@ -78,7 +81,7 @@ export default {
}
// 点击按钮搜索
let onBtnSearch = () => {
proxy.loadTableDataList();
proxy.getNodeList();
}
//获取接收到的传值 bizid
let setBizId=()=>{
... ... @@ -86,8 +89,8 @@ export default {
proxy.bizId=props.propsData.bizId;
proxy.targetId=props.propsData.targetId;
proxy.busTypeArr=[props.propsData.bizId];
proxy.faultConfId=props.faultConfId;
proxy.bizName=props.bizName;
proxy.faultConfId=props.propsData.faultConfId;
proxy.bizName=props.propsData.bizName;
proxy.modleId=props.propsData.modleId;
}
console.log("*",props.propsData,proxy.bizId,proxy.busTypeArr)
... ... @@ -181,8 +184,66 @@ export default {
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
proxy.page=page;
proxy.pageSize=limit;
proxy.getNodeList()
}
//显示已添加过的应用列表数据
let applicationMonitorListChecked=Vue.ref([]);
let setListData=()=>{
if(props.applicationMonitorList){
props.applicationMonitorList.map((item,index)=>{
proxy.tableDataList.map(v=>{
if(item.streamId==v.streamId){
proxy.applicationMonitorListChecked.push(v)
}
})
})
}
}
//获取应用监测配置列表数据
let getNodeList=()=>{
let that=this;
proxy.$http.get(`/api-web/fault/conf/npmBase/list`, proxy.getParams(), function (res) {
if (res && res.success) {
proxy.count = res.count;
tableDataList.value = res.data;
proxy.setListData();
}
});
}
//关闭弹框
let closeDialog=()=>{
proxy.restData();
let obj={
targetId:proxy.targetId,
faultConfId:proxy.faultConfId,
}
proxy.$emit('callbackApp',obj);
}
//清除数据
let restData=()=>{
proxy.tableDataList='';
}
return {
closeDialog,
restData,
getNodeList,
faultConfId,
bizName,
applicationMonitorVisible,
applicationMonitorListChecked,
setListData,
loadTableDataList,
modleId,
saveAlldata,
page,
... ... @@ -213,31 +274,17 @@ export default {
},
methods: {
//取消节点列表配置
//取消应用列表配置
cancleList(){
this.applicationMonitorVisible=false;
},
//保存节点添加配置
//保存应用添加配置
saveList(){
this.applicationMonitorVisible=false;
},
//重新加载表格数据
loadTableDataList(val){
this.page=val.page;
this.pageSize=val.limit;
this.getNodeList()
},
//获取应用监测配置列表数据
getNodeList(){
let that=this;
this.$http.get(`/api-web/fault/conf/npmBase/list`, this.getParams(), function (res) {
if (res && res.success) {
that.count = res.count;
that.tableDataList = res.data;
}
});
},
//配置参数
getParams(){
return {
... ... @@ -251,10 +298,7 @@ export default {
pageSize: this.pageSize
}
},
//关闭弹框
closeDialog(){
this.$emit('callbackApp', this.targetId);
},
//保存模块
saveModel(){
let that=this;
... ... @@ -290,15 +334,9 @@ export default {
},
watch:{
applicationMonitorVisible(newValue, oldValue) {
console.log("applicationMonitorVisible",newValue)
}
},
mounted () {
// this.init();
this.setBizId();
this.getNodeList();
},
... ...
... ... @@ -178,7 +178,7 @@
</el-row>
</div>
<!--应用监测-->
<!--应用检测-->
<div class="application-monitor margin-30" v-if="applicationMonitorHide">
<el-row>
<el-col :span="6">
... ... @@ -204,7 +204,8 @@
<div>
<el-button :disabled="faultApplicationRadio==0" class="multiple-choice-button" type="primary">{{item.streamName}}</el-button>
<!-- <img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon cursorClass">-->
<img :id="item.id" @click="deleteApp(item)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon cursorClass">
<img :id="item.id" v-if="faultApplicationRadio==1" @click="deleteApp(item)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon cursorClass">
<img src="" v-else style="width:12px;height:12px;" class="multiple-choice-icon" alt="">
</div>
</div>
... ... @@ -409,8 +410,8 @@
<div class="network-monitor-popup popup-bg">
<!--网络检测弹窗-->
<DiagnosisNet v-if="networkMonitorVisible" :propsData="propsData" @callback="getNetworkMonitorList" ></DiagnosisNet>
<!--应用监测弹框-->
<ApplicationMoni v-if="applicationMonitorVisible" :propsData="propsData" @callbackApp="getApplicationMoniList"></ApplicationMoni>
<!--应用检测弹框-->
<ApplicationMoni v-if="applicationMonitorVisible" :applicationMonitorList="applicationMonitorList" :propsData="propsData" @callbackApp="getApplicationMoniList"></ApplicationMoni>
<!--APM弹框-->
<APM v-if="APMVisible" :propsData="propsData" @callbackAPM="getAPMList"></APM>
<!--日志监测弹框-->
... ...
... ... @@ -125,7 +125,7 @@ export default {
// nodeData:[{name:'',img:''}]
//所属业务列表数据
busTypeList:'',
applicationMonitorVisible:false,//应用检测弹框
// applicationMonitorVisible:false,//应用检测弹框
APMVisible:false,//APM弹框
logMonitionVisible:false,//日志监测弹框
subscriptionReportVisible:false,//订阅人员弹框
... ... @@ -134,6 +134,7 @@ export default {
}
},
setup(props){
let applicationMonitorVisible=Vue.ref(false);
//btn加载中
let isLoading=Vue.ref(false);
//所属业务id
... ... @@ -207,6 +208,7 @@ export default {
//模块id
let modleId=Vue.ref();
return{
applicationMonitorVisible,
modleId,
ruleId,
ruleName,
... ... @@ -485,7 +487,7 @@ export default {
}else{
that.getTargetId(typeVal)
}
this.getBizName(this.busTypeArr);
this.propsData={
bizId:this.busTypeArr,
docId:this.docId,
... ... @@ -579,7 +581,11 @@ export default {
//关闭应用监测添加弹框
getApplicationMoniList(itemData){
this.applicationMonitorVisible=false;
this.setTargetId(itemData);
if(itemData.faultConfId){
this.faultConfId=itemData.faultConfId;
}
this.setTargetId(itemData.targetId);
// this.targetId=itemData;
// this.applicationMonitorList=itemData;
this.getAppList();
... ...
... ... @@ -138,7 +138,7 @@ export default {
}
// 点击按钮搜索
let onBtnSearch = () => {
proxy.loadTableDataList();
proxy.getNodeList();
}
//获取链路信息列表
... ... @@ -220,12 +220,14 @@ export default {
}else{
console.log("2*2")
bNetNodeList.nodeName=proxy.nodeName;
bNetNodeList.type='dot';
bNetNodeList.type='point';
bNetNodeList.nodeType='point';
proxy.backLink(bNetNodeList,index);
}
}else{
bNetNodeList.type='line';
bNetNodeList.nodeType='line';
proxy.backLink(bNetNodeList,index);
}
... ... @@ -421,7 +423,7 @@ export default {
this.addSetLIstVisible=false;
}
this.titleName='添加内容';
this.titleName='网络配置';
this.init();
this.getNodeList();
},
... ...