monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 2cbb124173973393228360e7c910902a5d2abeb3 2 parents d9c49d34 9eccc5f6

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

详情表格组件中弹框组件封装，下探指标操作组件封装



See merge request !11
Inline Side-by-side
Showing 4 changed files with 533 additions and 94 deletions
<template>
<div class="dialog-div" v-if="dialogVisible" :style="heightStyle">
<div class="dialog-div-content" :style="marginStyle+widthStyle" >
<div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="dialogVisible = false">X</span></div>
<div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
告警设置{{pressingValue}}
</div>
<div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
过滤单指标{{pressingValue}}
</div>
<div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
过滤多指标{{pressingValue}}
</div>
<div v-if="dialogName=='performance_trends'" class="txtScroll-top">
性能趋势{{pressingValue}}
<iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
</div>
<div v-if="dialogName=='pressing_times'" class="txtScroll-top">
压制次数{{pressingValue}}
</div>
<div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
纳入容量预测{{pressingValue}}
</div>
<div class="dialog-footer" v-if="dialogName!='table' && dialogName!='performance_trends'">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false"
<div class="dialog-div-title title-flex-between"><span>{{titleName}}</span> <span class="dialog-close" @click="hideDialog">X</span></div>
<slot>弹框内容</slot>
<div class="dialog-footer" v-if="showFooter">
<el-button v-if="showCancelBtn" @click="hideDialog">取消</el-button>
<el-button v-if="showOkBtn" type="primary" @click="okFunc"
>确定</el-button
>
</div>
... ... @@ -35,20 +18,38 @@
export default {
name: "customDialog",
props: {
dialogVisible: Boolean,
dialogVisible: {
type: Boolean,
default: false
},
heightStyle: String,
marginStyle: String,
widthStyle: String,
dialogName: String,
tableStyle: Object
titleName: {
type: String,
default: ''
},//弹框标题
showFooter: {
type: Boolean,
default: false
},//是否需要footer
showCancelBtn: {
type: Boolean,
default: false
},//是否需要取消按钮
showOkBtn: {
type: Boolean,
default: false
},//是否需要确定按钮
},
data() {
return {}
},
watch: {
value: {
tableStyle(val) {
dialogVisible: {
handler(val) {
console.log("dialogVisible",val)
},
deep: true
}
... ... @@ -56,10 +57,81 @@ export default {
mounted() {
},
methods: {}
methods: {
hideDialog(){
// this.dialogVisible = false;
this.$emit('hideDialog',false);
},
okFunc(){
// this.dialogVisible = false;
this.$emit('okfunc');
}
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.title-flex-between{
display: flex;
justify-content: space-between;
}
.dialog-div{
background: rgba(0, 0, 0, 0.35);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.dialog-div-content{
/* display: flex;
align-items: center;
margin: 30px auto 0;
flex-flow: column;*/
width:80%;
min-height: 700px;
/*max-height: 800px;*/
overflow: auto;
background: #FFFFFF;
position: relative;
margin: 30px auto;
.dialog-div-width{
width: 100%;
}
.txtScroll-top{
width:100%;
padding: 10px;
margin-bottom:50px;
min-height: 500px;
max-height: 700px;
overflow: auto;
iframe{
border:none;
min-height: 600px;
html{
background: #FFFFFF;
}
}
}
.dialog-div-title{
width: 100%;
background: #f8f8f8;
padding:10px;
text-align: left;
line-height: 24px;
.dialog-close{
cursor: pointer;
color:#666666;
}
}
.dialog-footer{
width: 100%;
padding: 15px;
position: absolute;
bottom: 0;
text-align: right;
}
}
</style>
... ...
<template>
<div>
<div class="basic-img">
<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()">
</template>
<div class="info-ul" style="width:140px;" >
<div class="basic-pressing-times" @click="pressingDialog(itemMenu,tableDataValue,flg)" v-for="itemMenu in detailMenubox">
<i class="el-icon-link icon-div"></i>{{itemMenu.name}}
</div>
</div>
</el-popover>
</div>
<customDialog :dialogVisible="dialogVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableName"
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
>
<template v-slot>
<div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
告警设置{{pressingValue}}
</div>
<div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
过滤单指标{{pressingValue}}
</div>
<div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
过滤多指标{{pressingValue}}
</div>
<div v-if="dialogName=='performance_trends'" class="txtScroll-top">
<div>性能趋势{{pressingValue}}</div>
<iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
</div>
<div v-if="dialogName=='pressing_times'" class="txtScroll-top">
压制次数{{pressingValue}}
</div>
<div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
纳入容量预测{{pressingValue}}
</div>
</template>
</customDialog>
</div>
</template>
<script>
import customDialog from "./customDialog";
export default {
name: "customMenuBox",
components:{
customDialog,
},
props: {
heightStyle: String,
marginStyle: String,
trendSrc:{
type:String,
default:'',
},
tableName:{
type:String,
default:'',
},//弹框名称
detailMenubox: {
type: Array,
default: [
{
name:'告警设置',
type:'alarm_setting',
isDisplay:true
},
{
name:'过滤单指标',
type:'filter_sheet_indicator',
isDisplay:true
},
{
name:'过滤多指标',
type:'filter_multiple_indicators',
isDisplay:true
},
{
name:'性能趋势',
type:'performance_trends',
isDisplay:true
},
{
name:'压制次数',
type:'pressing_times',
isDisplay:true
},
{
name:'纳入容量预测',
type:'include_capacity_forecast',
isDisplay:true
}
]
},//表格下探数据
tableDataValue: {
type: String,
default: ''
},//单元格内容
flg: {
type: String,
default: ''
},//标志
},
data() {
return {
dialogVisible:false,//表格下探后的弹框
widthStyle:';',//弹框宽度样式
dialogName: '',
// trendSrc:'',//性能走势图地址
// pressingVisible:'',
pressingValue:'',
}
},
watch: {
trendSrc: {
handler(val) {
console.log("trendSrc",val)
},
deep: true
}
},
mounted() {
},
methods: {
//表格下探关闭
pressingTimes(index,idx){
// this.pressingVisible=index+'-'+idx;
},
//弹框关闭确定
hideDialog(){
this.dialogVisible=false;
},
okFunc(){
this.dialogVisible=false;
},
//表格下探
pressingDialog(itemMenu,value,flg){
this.pressingValue=value;
let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
if(itemMenu.type=='alarm_setting'){
this.widthStyle='width:70%;';
}else if(itemMenu.type=='filter_sheet_indicator'){
this.widthStyle=styleStr;
}else if(itemMenu.type=='filter_multiple_indicators'){
this.widthStyle=styleStr;
}else if(itemMenu.type=='performance_trends'){
this.widthStyle='';
}else if(itemMenu.type=='pressing_times'){
this.widthStyle=styleStr;
}else if(itemMenu.type=='include_capacity_forecast'){
this.widthStyle=styleStr;
}
this.setDialog(itemMenu.type,flg);
let key=this.$refs.popoverMenu;
console.log("key",key)
if(key && key.length>0){
key.map(item=>{
item.showPopper=false
})
}else{
key.showPopper=false
}
this.$emit("closeProbeDown",'')
// this.$refs.popoverMenu.showPopper = false;
},
//打开弹框
setDialog(name,flg){
this.dialogVisible=true;
this.dialogName=name;
},
}
}
</script>
<style lang="scss" scoped>
.basic-img{
display: flex;
cursor: pointer;
.info-img{
width: 16px;
height: 16px;
img{
width:100%;
}
}
}
.info-ul{
border:1px solid #d2d2d2;
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;
}
}
}
</style>
... ...
... ... @@ -134,6 +134,54 @@ export const monitorDetailTable = {
placeholder: '',
value: '#e6e6e6'
},
{
type: 'el-switch',
label: '告警设置',
name: 'alarm_setting',
required: false,
placeholder: '',
value: true
},
{
type: 'el-switch',
label: '过滤单指标',
name: 'filter_sheet_indicator',
required: false,
placeholder: '',
value: true
},
{
type: 'el-switch',
label: '过滤多指标',
name: 'filter_multiple_indicators',
required: false,
placeholder: '',
value: true
},
{
type: 'el-switch',
label: '性能趋势',
name: 'performance_trends',
required: false,
placeholder: '',
value: true
},
{
type: 'el-switch',
label: '压制次数',
name: 'pressing_times',
required: false,
placeholder: '',
value: true
},
{
type: 'el-switch',
label: '纳入容量预测',
name: 'include_capacity_forecast',
required: false,
placeholder: '',
value: true
},
[
{
name: '状态范围设置',
... ...
... ... @@ -26,44 +26,40 @@
v-for="(itemChild, idx) in header"
:key="idx"
:style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
@mouseenter="pressingTimes(index,idx)"
>
<span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
:class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
{{ item[itemChild.key].kpiValue}} </span>
<div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)">
<!-- <div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].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>
</template>-->
<!-- <div class="info-ul" v-if="pressingVisible==index+'-'+idx">-->
<div class="info-ul" style="width:140px;" >
<div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'')" v-for="itemMenu in detailMenubox">
<customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
:detailMenubox="calcDetailMenubox"
:tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="tableStyle.tableName"
></customMenuBox>
<!-- <div class="info-ul" style="width:140px;" >
<div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'')" v-for="itemMenu in calcDetailMenubox">
<i class="el-icon-link icon-div"></i>{{itemMenu.name}}
</div>
</div>
</el-popover>
</div>
</div>-->
<!-- </el-popover>
</div>-->
</div>
</li>
</ul>
</div>
</superslide>
<!-- <el-dialog :visible.sync="tableVisible" :title="tableStyle.tableName" width="80%" center>-->
<!-- <el-popover
ref="popoverRef"
v-model:visible="tableVisible"
placement="left"
trigger="click"
:title="tableStyle.tableName"
virtual-triggering
persistent
<!-- 更多弹框-->
<customDialog :dialogVisible="tableVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :title-name="tableStyle.tableName"
@hideDialog="hideDialogTable" @okFunc="okFuncTable"
>
</el-popover>-->
<div class="dialog-div" v-if="tableVisible" :style="heightStyle">
<div class="dialog-div-content" :style="marginStyle" >
<div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="tableVisible = false">X</span></div>
<template v-slot>
<div v-if="hackReset" class="txtScroll-top" >
<!--表头-->
<div class="title" :style="borderStyle">
... ... @@ -83,34 +79,59 @@
v-for="(itemChild, idx) in headerAll"
:key="idx"
:style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
@mouseenter="pressingTimes(index,idx)"
>
<span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
:class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
{{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>
<div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)">
<customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
:detailMenubox="calcDetailMenubox"
:tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="tableStyle.tableName"
></customMenuBox>
<!-- <div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].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(itemMenu,item[itemChild.key].kpiValue,'dialog')" v-for="itemMenu in detailMenubox">
<div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'dialog')" v-for="itemMenu in calcDetailMenubox">
<i class="el-icon-link icon-div"></i>{{itemMenu.name}}
</div>
</div>
</el-popover>
</div>
</div>-->
</div>
</li>
</ul>
</div>
</div>
</template>
</customDialog>
<!-- 直接点击表格数据展示 性能趋势弹框-->
<customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableStyle.tableName"
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
>
<template v-slot>
<div class="txtScroll-top">
性能趋势{{pressingValue}}
<iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
</div>
</template>
</customDialog>
<!-- <div class="dialog-div" v-if="tableVisible" :style="heightStyle">
<div class="dialog-div-content" :style="marginStyle" >
<div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="tableVisible = false">X</span></div>
</div>
<div class="dialog-div" v-if="dialogVisible" :style="heightStyle">
<div class="dialog-div-content" :style="marginStyle+widthStyle" >
<div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="dialogVisible = false">X</span></div>
</div>-->
<!-- <customDialog :dialogVisible="dialogVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableStyle.tableName"
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
>
<template v-slot>
<div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
告警设置{{pressingValue}}
</div>
... ... @@ -130,38 +151,30 @@
<div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
纳入容量预测{{pressingValue}}
</div>
<div class="dialog-footer" v-if="dialogName!='table' && dialogName!='performance_trends'">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确定</el-button
>
</div>
</div>
</div>
<!-- <template #footer>
<span class="dialog-footer">
<el-button @click="tableVisible = false">取消</el-button>
<el-button type="primary" @click="tableVisible = false"
>确定</el-button
>
</span>
</template>
</el-dialog>-->
</customDialog>-->
</div>
</template>
<script>
import vue from "vue";
import VueSuperSlide from "vue-superslide";
import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform";
import customDialog from "../../designerComponents/customDialog";
import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
vue.use(VueSuperSlide);
export default {
props: {
value: Object,
ispreview: Boolean
},
components:{
customDialog,customMenuBox
},
data() {
return {
trendVisible:false,//性能趋势弹框
headerAll:[],
listAll:[],
tableVisible:false,//更多表格弹框
... ... @@ -185,32 +198,38 @@ export default {
optionsData: {},
pressingVisible:'',
isHover:false,
detailMenubox:[
/*detailMenubox:[
{
name:'告警设置',
type:'alarm_setting'
type:'alarm_setting',
isDisplay:true
},
{
name:'过滤单指标',
type:'filter_sheet_indicator'
type:'filter_sheet_indicator',
isDisplay:true
},
{
name:'过滤多指标',
type:'filter_multiple_indicators'
type:'filter_multiple_indicators',
isDisplay:true
},
{
name:'性能趋势',
type:'performance_trends'
type:'performance_trends',
isDisplay:true
},
{
name:'压制次数',
type:'pressing_times'
type:'pressing_times',
isDisplay:true
},
{
name:'纳入容量预测',
type:'include_capacity_forecast'
type:'include_capacity_forecast',
isDisplay:true
}
],
],*/
dialogName:'',//表格名称
pressingValue:'',//表格下探值
trendSrc:'',//性能走势图地址
... ... @@ -275,6 +294,48 @@ export default {
return{
tableName:tableStyleSetup.tableName
}
},
//表格下探列表
calcDetailMenubox(){
const menubox = this.optionsSetUp;
let detailMenuBox=[];
if(menubox.alarm_setting){
detailMenuBox.push({
name:'告警设置',
type:'alarm_setting'
})
}
if(menubox.filter_sheet_indicator){
detailMenuBox.push({
name:'过滤单指标',
type:'filter_sheet_indicator'
})
}
if(menubox.filter_multiple_indicators){
detailMenuBox.push({
name:'过滤多指标',
type:'filter_multiple_indicators'
})
}
if(menubox.performance_trends){
detailMenuBox.push({
name:'性能趋势',
type:'performance_trends'
})
}
if(menubox.pressing_times){
detailMenuBox.push({
name:'压制次数',
type:'pressing_times'
})
}
if(menubox.include_capacity_forecast){
detailMenuBox.push({
name:'纳入容量预测',
type:'include_capacity_forecast'
})
}
return detailMenuBox;
}
},
watch: {
... ... @@ -476,11 +537,16 @@ export default {
},
//点击表格内容名称事件
clickListName(obj){
if(obj.kpiIdent==1 || obj.isWarning==1){
let trendsParams=obj;
// this.trendSrc='http://127.0.0.1:8088/vue3/index.html#/vue3/pieDetailLine?resId=08586dba3a5b4a01ad88e8878eed6d53&kpiId=KPI7054BC34&flag=cpu&ident=1&trend=1&name=CPU%E4%BD%BF%E7%94%A8%E7%8E%87x&access_token=6e14ca48-4d05-42cf-b232-97981035824f'
this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F';
this.widthStyle='';
this.setDialog('performance_trends')
// this.setDialog('performance_trends')
this.pressingValue=obj.kpiValue;
this.trendVisible=true;
}
},
//End LSQ 2022/1/20 10:23 TODO
handlerHead() {
... ... @@ -594,6 +660,21 @@ export default {
},
closePressingDialog(){
this.pressingVisible=false;
},
//弹框关闭确定
hideDialog(){
this.trendVisible=false;
},
okFunc(){
this.trendVisible=false;
},
//更多弹框关闭确定
hideDialogTable(){
this.tableVisible=false;
},
okFuncTable(){
this.tableVisible=false;
}
}
};
... ... @@ -664,8 +745,8 @@ export default {
}
}
}
.basic-img{
/*display: flex;*/
/*.basic-img{
!*display: flex;*!
display: none;
cursor: pointer;
.info-img{
... ... @@ -679,9 +760,9 @@ export default {
}
.info-ul{
/*position: absolute;*/
!*position: absolute;*!
border:1px solid #d2d2d2;
/*padding: 16px 20px;*/
!*padding: 16px 20px;*!
padding-bottom: 5px;
z-index: 999999;
background: #ffffff;
... ... @@ -710,13 +791,13 @@ export default {
}
}
}
}*/
.listName-link{
cursor: pointer;
color:#0d82e9;
text-decoration: underline;
}
.dialog-div{
/*.dialog-div{
background: rgba(0, 0, 0, 0.35);
position: fixed;
top: 0;
... ... @@ -726,10 +807,10 @@ export default {
z-index: 1;
}
.dialog-div-content{
/* display: flex;
!* display: flex;
align-items: center;
margin: 30px auto 0;
flex-flow: column;*/
flex-flow: column;*!
width:80%;
min-height: 700px;
max-height: 800px;
... ... @@ -772,5 +853,5 @@ export default {
bottom: 0;
text-align: right;
}
}
}*/
</style>
... ...