From 2ee366ffb2cf28e4faebdd7dc9a57c0e23108151 Mon Sep 17 00:00:00 2001
From: 鲁尚清 <lushangqing@honggroup.com.cn>
Date: Tue, 25 Jan 2022 20:42:58 +0800
Subject: [PATCH] 详情表格组件中弹框组件封装，下探指标操作组件封装
---
report-ui/src/views/report/bigscreen/designer/designerComponents/customDialog.vue | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
report-ui/src/views/report/bigscreen/designer/designerComponents/customMenuBox.vue | 238 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-detail-table.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue | 261 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------
4 files changed, 559 insertions(+), 120 deletions(-)
create mode 100644 report-ui/src/views/report/bigscreen/designer/designerComponents/customMenuBox.vue
diff --git a/report-ui/src/views/report/bigscreen/designer/designerComponents/customDialog.vue b/report-ui/src/views/report/bigscreen/designer/designerComponents/customDialog.vue
index 7b8c825..5017482 100644
--- a/report-ui/src/views/report/bigscreen/designer/designerComponents/customDialog.vue
+++ b/report-ui/src/views/report/bigscreen/designer/designerComponents/customDialog.vue
@@ -1,29 +1,12 @@
<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>
diff --git a/report-ui/src/views/report/bigscreen/designer/designerComponents/customMenuBox.vue b/report-ui/src/views/report/bigscreen/designer/designerComponents/customMenuBox.vue
new file mode 100644
index 0000000..6635d1d
--- /dev/null
+++ b/report-ui/src/views/report/bigscreen/designer/designerComponents/customMenuBox.vue
@@ -0,0 +1,238 @@
+<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>
diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-detail-table.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-detail-table.js
index 722f40b..3be670d 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-detail-table.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-detail-table.js
@@ -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: '状态范围设置',
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue b/report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
index e0ee470..2b180df 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
@@ -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)">
- <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="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,'')" 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,85 +79,102 @@
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>
- </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 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"
- >确定</el-button
- >
- </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>
- </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>
-<!-- <template #footer>
- <span class="dialog-footer">
- <el-button @click="tableVisible = false">取消</el-button>
- <el-button type="primary" @click="tableVisible = false"
- >确定</el-button
- >
- </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>
+ <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>
</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){
- 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')
+ 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.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>
--
libgit2 0.24.0