monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 0c52b2aa9f09e6c1d2b617600afbe18167f91d5d 2 parents 52be0b51 9dc1a335

Merge branch 'master-ajreport-lushangqing' into 'master' 

详细表格组件修改



See merge request !5
Inline Side-by-side
Showing 2 changed files with 118 additions and 27 deletions
... ... @@ -201,10 +201,12 @@ export const monitorDetailTable = {
required: false,
placeholder: '',
value: [
{name: '日期', key: 'date', width: '50%'},
{name: '姓名', key: 'name', width: '50%'},
{name: '地址', key: 'address', width: '200%',
}]
{name: '文件系统挂载', key: 'fileAddress', width: '50%',kpiIdent:0,isWarning:0},
{name: '文件系统使用率', key: 'fileUseRate', width: '50%',isWarning:1,kpiIdent:0},
{name: '文件系统总大小', key: 'fileSize', width: '50%',kpiIdent:1,isWarning:0},
{name: '文件系统已使用大小', key: 'fileSizeUsed', width: '50%',kpiIdent:1,isWarning:0},
{name: '卷名称', key: 'fileAddressName', width: '50%',kpiIdent:0,isWarning:0},
]
}
],
data: [
... ... @@ -244,13 +246,12 @@ export const monitorDetailTable = {
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0001'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0002'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0003'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0004'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0005'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0006'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0007'},
{fileAddress: '/', fileUseRate: '99%', fileSize: '196.74',fileSizeUsed:'184',fileAddressName:'/dev/vda1'},
{fileAddress: '/dev', fileUseRate: '0%', fileSize: '15.74',fileSizeUsed:'0.00',fileAddressName:'devtmpfs'},
{fileAddress: '/run', fileUseRate: '1%', fileSize: '15.32',fileSizeUsed:'0.14',fileAddressName:'tmpfs'},
{fileAddress: '/run/user/0', fileUseRate: '0%', fileSize: '3.74',fileSizeUsed:'10',fileAddressName:'tmpfs'},
{fileAddress: '/run/user/0001', fileUseRate: '2', fileSize: '3.69',fileSizeUsed:'1.23',fileAddressName:'tmpfs'},
],
},
{
... ...
<template>
<div :style="styleObj">
<div :style="styleObj" @click="closePressingDialog">
<superslide v-if="hackReset" :options="options" class="txtScroll-top">
<!--表头-->
<div class="title">
... ... @@ -20,14 +20,30 @@
:key="idx"
:style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
>
{{ item[itemChild.key] }}
<div class="basic-img">
<img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes">
<div class="info-ul" v-if="pressingVisible">
<div class="basic-pressing-times" @click="pressingDialog" v-for="i in 4">
<i class="el-icon-link"></i>压制次数
<span :class="['listName',{'listName-link':itemChild.kpiIdent==1 || itemChild.isWarning==1}]">{{ item[itemChild.key] }}</span>
<div class="basic-img" v-if="itemChild.kpiIdent==1 || itemChild.isWarning==1">
<el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">
<template #reference>
<img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">
</template>
<!-- <div class="info-ul" v-if="pressingVisible==index+'-'+idx">-->
<div class="info-ul" style="width:140px;" >
<div class="basic-pressing-times" @click="pressingDialog(index,idx)" v-for="item in detailMenubox">
<i class="el-icon-link icon-div"></i>{{item.name}}
</div>
</div>
</el-popover>
<!-- <el-tooltip placement="top" effect="dark" >
<template #content>
<div class="info-ul" style="width:140px;" >
<div class="basic-pressing-times" @click="pressingDialog" v-for="item in detailMenubox">
<i class="el-icon-link icon-div"></i>{{item.name}}
</div>
</div>
</template>
<img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">
</el-tooltip>-->
</div>
</div>
... ... @@ -49,6 +65,7 @@ export default {
},
data() {
return {
popoverVisible:false,
hackReset: true,
options: {
titCell: ".hd ul",
... ... @@ -65,8 +82,34 @@ export default {
optionsSetUp: {},
optionsPosition: {},
optionsData: {},
pressingVisible:false,
pressingVisible:'',
isHover:false,
detailMenubox:[
{
name:'告警设置',
type:'alarm_setting'
},
{
name:'过滤单指标',
type:'filter_sheet_indicator'
},
{
name:'过滤多指标',
type:'filter_multiple_indicators'
},
{
name:'性能趋势',
type:'performance_trends'
},
{
name:'压制次数',
type:'pressing_times'
},
{
name:'纳入容量预测',
type:'include_capacity_forecast'
}
]
};
},
computed: {
... ... @@ -213,11 +256,24 @@ export default {
return styleJson
},
//表格下探
pressingDialog(){
pressingDialog(index,idx){
let key=this.$refs.popoverMenu;
if(key && key.length>0){
key.map(item=>{
item.showPopper=false
})
}
console.log("&&&",)
// this.$refs.popoverMenu.showPopper = false;
},
pressingTimes(){
this.pressingVisible=true;
pressingTimes(index,idx){
console.log("albc",index,idx)
this.pressingVisible=index+'-'+idx;
},
closePressingDialog(){
this.pressingVisible=false;
}
}
};
</script>
... ... @@ -266,28 +322,62 @@ export default {
display: flex;
align-items: center;
justify-content: center;
&:hover{
.basic-img{
display:flex ;
}
}
}
.basic-img{
/*display: flex;*/
display: none;
cursor: pointer;
.info-img{
width: 16px;
height: 16px;
display: flex;
cursor: pointer;
img{
width:100%;
}
}
}
.info-ul{
position: absolute;
/*position: absolute;*/
border:1px solid #d2d2d2;
padding: 16px 20px;
z-index: 1;
/*padding: 16px 20px;*/
padding-bottom: 5px;
z-index: 999999;
background: #ffffff;
color:#666666;
.basic-pressing-times{
line-height: 35px;
height: 35px;
cursor: pointer;
border-bottom: 1px solid #d2d2d2;
padding: 5px 16px;
text-align: center;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: flex-start;
&:last-child{
border-bottom: none;
}
&:hover{
background: #0d82e9;
color:#f6f6f6;
}
.icon-div{
width: 14px;
}
}
}
.listName-link{
cursor: pointer;
color:#0d82e9;
text-decoration: underline;
}
</style>
... ...