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 559 additions and 120 deletions
1 <template> 1 <template>
2 <div class="dialog-div" v-if="dialogVisible" :style="heightStyle"> 2 <div class="dialog-div" v-if="dialogVisible" :style="heightStyle">
3 <div class="dialog-div-content" :style="marginStyle+widthStyle" > 3 <div class="dialog-div-content" :style="marginStyle+widthStyle" >
4 - <div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="dialogVisible = false">X</span></div>  
5 - <div v-if="dialogName=='alarm_setting'" class="txtScroll-top">  
6 - 告警设置{{pressingValue}}  
7 - </div>  
8 - <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">  
9 - 过滤单指标{{pressingValue}}  
10 - </div>  
11 - <div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">  
12 - 过滤多指标{{pressingValue}}  
13 - </div>  
14 - <div v-if="dialogName=='performance_trends'" class="txtScroll-top">  
15 - 性能趋势{{pressingValue}}  
16 - <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>  
17 - </div>  
18 - <div v-if="dialogName=='pressing_times'" class="txtScroll-top">  
19 - 压制次数{{pressingValue}}  
20 - </div>  
21 - <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">  
22 - 纳入容量预测{{pressingValue}}  
23 - </div>  
24 - <div class="dialog-footer" v-if="dialogName!='table' && dialogName!='performance_trends'">  
25 - <el-button @click="dialogVisible = false">取消</el-button>  
26 - <el-button type="primary" @click="dialogVisible = false" 4 + <div class="dialog-div-title title-flex-between"><span>{{titleName}}</span> <span class="dialog-close" @click="hideDialog">X</span></div>
  5 + <slot>弹框内容</slot>
  6 +
  7 + <div class="dialog-footer" v-if="showFooter">
  8 + <el-button v-if="showCancelBtn" @click="hideDialog">取消</el-button>
  9 + <el-button v-if="showOkBtn" type="primary" @click="okFunc"
27 >确定</el-button 10 >确定</el-button
28 > 11 >
29 </div> 12 </div>
@@ -35,20 +18,38 @@ @@ -35,20 +18,38 @@
35 export default { 18 export default {
36 name: "customDialog", 19 name: "customDialog",
37 props: { 20 props: {
38 - dialogVisible: Boolean, 21 + dialogVisible: {
  22 + type: Boolean,
  23 + default: false
  24 + },
39 heightStyle: String, 25 heightStyle: String,
40 marginStyle: String, 26 marginStyle: String,
41 widthStyle: String, 27 widthStyle: String,
42 dialogName: String, 28 dialogName: String,
43 - tableStyle: Object 29 + titleName: {
  30 + type: String,
  31 + default: ''
  32 + },//弹框标题
  33 + showFooter: {
  34 + type: Boolean,
  35 + default: false
  36 + },//是否需要footer
  37 + showCancelBtn: {
  38 + type: Boolean,
  39 + default: false
  40 + },//是否需要取消按钮
  41 + showOkBtn: {
  42 + type: Boolean,
  43 + default: false
  44 + },//是否需要确定按钮
44 }, 45 },
45 data() { 46 data() {
46 return {} 47 return {}
47 }, 48 },
48 watch: { 49 watch: {
49 - value: {  
50 - tableStyle(val) {  
51 - 50 + dialogVisible: {
  51 + handler(val) {
  52 + console.log("dialogVisible",val)
52 }, 53 },
53 deep: true 54 deep: true
54 } 55 }
@@ -56,10 +57,81 @@ export default { @@ -56,10 +57,81 @@ export default {
56 mounted() { 57 mounted() {
57 58
58 }, 59 },
59 - methods: {} 60 + methods: {
  61 + hideDialog(){
  62 + // this.dialogVisible = false;
  63 + this.$emit('hideDialog',false);
  64 + },
  65 + okFunc(){
  66 + // this.dialogVisible = false;
  67 + this.$emit('okfunc');
  68 + }
  69 + }
60 } 70 }
61 </script> 71 </script>
62 72
63 -<style scoped> 73 +<style lang="scss" scoped>
  74 +.title-flex-between{
  75 + display: flex;
  76 + justify-content: space-between;
64 77
  78 +}
  79 +.dialog-div{
  80 + background: rgba(0, 0, 0, 0.35);
  81 + position: fixed;
  82 + top: 0;
  83 + left: 0;
  84 + right: 0;
  85 + bottom: 0;
  86 + z-index: 1;
  87 +}
  88 +.dialog-div-content{
  89 + /* display: flex;
  90 + align-items: center;
  91 + margin: 30px auto 0;
  92 + flex-flow: column;*/
  93 + width:80%;
  94 + min-height: 700px;
  95 + /*max-height: 800px;*/
  96 + overflow: auto;
  97 + background: #FFFFFF;
  98 + position: relative;
  99 + margin: 30px auto;
  100 + .dialog-div-width{
  101 + width: 100%;
  102 + }
  103 + .txtScroll-top{
  104 + width:100%;
  105 + padding: 10px;
  106 + margin-bottom:50px;
  107 + min-height: 500px;
  108 + max-height: 700px;
  109 + overflow: auto;
  110 + iframe{
  111 + border:none;
  112 + min-height: 600px;
  113 + html{
  114 + background: #FFFFFF;
  115 + }
  116 + }
  117 + }
  118 +.dialog-div-title{
  119 + width: 100%;
  120 + background: #f8f8f8;
  121 + padding:10px;
  122 + text-align: left;
  123 + line-height: 24px;
  124 +.dialog-close{
  125 + cursor: pointer;
  126 + color:#666666;
  127 +}
  128 +}
  129 +.dialog-footer{
  130 + width: 100%;
  131 + padding: 15px;
  132 + position: absolute;
  133 + bottom: 0;
  134 + text-align: right;
  135 +}
  136 +}
65 </style> 137 </style>
  1 +<template>
  2 + <div>
  3 + <div class="basic-img">
  4 + <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">
  5 + <template #reference>
  6 + <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()">
  7 + </template>
  8 + <div class="info-ul" style="width:140px;" >
  9 + <div class="basic-pressing-times" @click="pressingDialog(itemMenu,tableDataValue,flg)" v-for="itemMenu in detailMenubox">
  10 + <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
  11 + </div>
  12 + </div>
  13 + </el-popover>
  14 + </div>
  15 + <customDialog :dialogVisible="dialogVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableName"
  16 + :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
  17 + >
  18 + <template v-slot>
  19 + <div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
  20 + 告警设置{{pressingValue}}
  21 + </div>
  22 + <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
  23 + 过滤单指标{{pressingValue}}
  24 + </div>
  25 + <div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
  26 + 过滤多指标{{pressingValue}}
  27 + </div>
  28 + <div v-if="dialogName=='performance_trends'" class="txtScroll-top">
  29 + <div>性能趋势{{pressingValue}}</div>
  30 + <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
  31 + </div>
  32 + <div v-if="dialogName=='pressing_times'" class="txtScroll-top">
  33 + 压制次数{{pressingValue}}
  34 + </div>
  35 + <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
  36 + 纳入容量预测{{pressingValue}}
  37 + </div>
  38 + </template>
  39 + </customDialog>
  40 + </div>
  41 +
  42 +</template>
  43 +
  44 +<script>
  45 +import customDialog from "./customDialog";
  46 +
  47 +export default {
  48 + name: "customMenuBox",
  49 + components:{
  50 + customDialog,
  51 + },
  52 + props: {
  53 + heightStyle: String,
  54 + marginStyle: String,
  55 + trendSrc:{
  56 + type:String,
  57 + default:'',
  58 + },
  59 + tableName:{
  60 + type:String,
  61 + default:'',
  62 + },//弹框名称
  63 + detailMenubox: {
  64 + type: Array,
  65 + default: [
  66 + {
  67 + name:'告警设置',
  68 + type:'alarm_setting',
  69 + isDisplay:true
  70 + },
  71 + {
  72 + name:'过滤单指标',
  73 + type:'filter_sheet_indicator',
  74 + isDisplay:true
  75 + },
  76 + {
  77 + name:'过滤多指标',
  78 + type:'filter_multiple_indicators',
  79 + isDisplay:true
  80 + },
  81 + {
  82 + name:'性能趋势',
  83 + type:'performance_trends',
  84 + isDisplay:true
  85 + },
  86 + {
  87 + name:'压制次数',
  88 + type:'pressing_times',
  89 + isDisplay:true
  90 + },
  91 + {
  92 + name:'纳入容量预测',
  93 + type:'include_capacity_forecast',
  94 + isDisplay:true
  95 + }
  96 + ]
  97 + },//表格下探数据
  98 + tableDataValue: {
  99 + type: String,
  100 + default: ''
  101 + },//单元格内容
  102 + flg: {
  103 + type: String,
  104 + default: ''
  105 + },//标志
  106 + },
  107 + data() {
  108 + return {
  109 + dialogVisible:false,//表格下探后的弹框
  110 + widthStyle:';',//弹框宽度样式
  111 + dialogName: '',
  112 + // trendSrc:'',//性能走势图地址
  113 + // pressingVisible:'',
  114 + pressingValue:'',
  115 +
  116 + }
  117 + },
  118 + watch: {
  119 + trendSrc: {
  120 + handler(val) {
  121 + console.log("trendSrc",val)
  122 +
  123 + },
  124 + deep: true
  125 + }
  126 + },
  127 + mounted() {
  128 +
  129 + },
  130 + methods: {
  131 + //表格下探关闭
  132 + pressingTimes(index,idx){
  133 + // this.pressingVisible=index+'-'+idx;
  134 + },
  135 + //弹框关闭确定
  136 + hideDialog(){
  137 + this.dialogVisible=false;
  138 + },
  139 + okFunc(){
  140 + this.dialogVisible=false;
  141 + },
  142 + //表格下探
  143 + pressingDialog(itemMenu,value,flg){
  144 + this.pressingValue=value;
  145 + let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
  146 + if(itemMenu.type=='alarm_setting'){
  147 + this.widthStyle='width:70%;';
  148 +
  149 + }else if(itemMenu.type=='filter_sheet_indicator'){
  150 + this.widthStyle=styleStr;
  151 +
  152 + }else if(itemMenu.type=='filter_multiple_indicators'){
  153 + this.widthStyle=styleStr;
  154 +
  155 + }else if(itemMenu.type=='performance_trends'){
  156 + this.widthStyle='';
  157 +
  158 + }else if(itemMenu.type=='pressing_times'){
  159 + this.widthStyle=styleStr;
  160 +
  161 + }else if(itemMenu.type=='include_capacity_forecast'){
  162 + this.widthStyle=styleStr;
  163 +
  164 + }
  165 +
  166 + this.setDialog(itemMenu.type,flg);
  167 +
  168 + let key=this.$refs.popoverMenu;
  169 + console.log("key",key)
  170 + if(key && key.length>0){
  171 + key.map(item=>{
  172 + item.showPopper=false
  173 + })
  174 + }else{
  175 + key.showPopper=false
  176 +
  177 + }
  178 +
  179 + this.$emit("closeProbeDown",'')
  180 + // this.$refs.popoverMenu.showPopper = false;
  181 +
  182 + },
  183 + //打开弹框
  184 + setDialog(name,flg){
  185 + this.dialogVisible=true;
  186 +
  187 + this.dialogName=name;
  188 + },
  189 + }
  190 +}
  191 +</script>
  192 +
  193 +<style lang="scss" scoped>
  194 +.basic-img{
  195 + display: flex;
  196 + cursor: pointer;
  197 + .info-img{
  198 + width: 16px;
  199 + height: 16px;
  200 +
  201 + img{
  202 + width:100%;
  203 + }
  204 + }
  205 +
  206 +}
  207 +.info-ul{
  208 + border:1px solid #d2d2d2;
  209 + padding-bottom: 5px;
  210 + z-index: 999999;
  211 + background: #ffffff;
  212 + color:#666666;
  213 + .basic-pressing-times{
  214 + line-height: 35px;
  215 + height: 35px;
  216 + cursor: pointer;
  217 + border-bottom: 1px solid #d2d2d2;
  218 + padding: 5px 16px;
  219 + text-align: center;
  220 + font-size: 14px;
  221 + font-weight: 500;
  222 + display: flex;
  223 + align-items: center;
  224 + justify-content: flex-start;
  225 + &:last-child{
  226 + border-bottom: none;
  227 + }
  228 + &:hover{
  229 + background: #0d82e9;
  230 + color:#f6f6f6;
  231 + }
  232 + .icon-div{
  233 + width: 14px;
  234 + }
  235 + }
  236 +
  237 +}
  238 +</style>
@@ -134,6 +134,54 @@ export const monitorDetailTable = { @@ -134,6 +134,54 @@ export const monitorDetailTable = {
134 placeholder: '', 134 placeholder: '',
135 value: '#e6e6e6' 135 value: '#e6e6e6'
136 }, 136 },
  137 + {
  138 + type: 'el-switch',
  139 + label: '告警设置',
  140 + name: 'alarm_setting',
  141 + required: false,
  142 + placeholder: '',
  143 + value: true
  144 + },
  145 + {
  146 + type: 'el-switch',
  147 + label: '过滤单指标',
  148 + name: 'filter_sheet_indicator',
  149 + required: false,
  150 + placeholder: '',
  151 + value: true
  152 + },
  153 + {
  154 + type: 'el-switch',
  155 + label: '过滤多指标',
  156 + name: 'filter_multiple_indicators',
  157 + required: false,
  158 + placeholder: '',
  159 + value: true
  160 + },
  161 + {
  162 + type: 'el-switch',
  163 + label: '性能趋势',
  164 + name: 'performance_trends',
  165 + required: false,
  166 + placeholder: '',
  167 + value: true
  168 + },
  169 + {
  170 + type: 'el-switch',
  171 + label: '压制次数',
  172 + name: 'pressing_times',
  173 + required: false,
  174 + placeholder: '',
  175 + value: true
  176 + },
  177 + {
  178 + type: 'el-switch',
  179 + label: '纳入容量预测',
  180 + name: 'include_capacity_forecast',
  181 + required: false,
  182 + placeholder: '',
  183 + value: true
  184 + },
137 [ 185 [
138 { 186 {
139 name: '状态范围设置', 187 name: '状态范围设置',
@@ -26,44 +26,40 @@ @@ -26,44 +26,40 @@
26 v-for="(itemChild, idx) in header" 26 v-for="(itemChild, idx) in header"
27 :key="idx" 27 :key="idx"
28 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]" 28 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
  29 + @mouseenter="pressingTimes(index,idx)"
29 > 30 >
30 <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)" 31 <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
31 :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]"> 32 :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
32 {{ item[itemChild.key].kpiValue}} </span> 33 {{ item[itemChild.key].kpiValue}} </span>
33 - <div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)">  
34 - <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">  
35 - <template #reference>  
36 - <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">  
37 - </template> 34 + <!-- <div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)">
  35 + <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">
  36 + <template #reference>
  37 + <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">
  38 + </template>-->
38 <!-- <div class="info-ul" v-if="pressingVisible==index+'-'+idx">--> 39 <!-- <div class="info-ul" v-if="pressingVisible==index+'-'+idx">-->
39 - <div class="info-ul" style="width:140px;" >  
40 - <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'')" v-for="itemMenu in detailMenubox"> 40 + <customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
  41 + :detailMenubox="calcDetailMenubox"
  42 + :tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
  43 + :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="tableStyle.tableName"
  44 +
  45 + ></customMenuBox>
  46 +<!-- <div class="info-ul" style="width:140px;" >
  47 + <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'')" v-for="itemMenu in calcDetailMenubox">
41 <i class="el-icon-link icon-div"></i>{{itemMenu.name}} 48 <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
42 </div> 49 </div>
43 - </div>  
44 - </el-popover>  
45 - </div> 50 + </div>-->
  51 +<!-- </el-popover>
  52 + </div>-->
46 </div> 53 </div>
47 </li> 54 </li>
48 </ul> 55 </ul>
49 </div> 56 </div>
50 </superslide> 57 </superslide>
51 -<!-- <el-dialog :visible.sync="tableVisible" :title="tableStyle.tableName" width="80%" center>-->  
52 -  
53 -<!-- <el-popover  
54 - ref="popoverRef"  
55 - v-model:visible="tableVisible"  
56 - placement="left"  
57 - trigger="click"  
58 - :title="tableStyle.tableName"  
59 - virtual-triggering  
60 - persistent 58 +<!-- 更多弹框-->
  59 + <customDialog :dialogVisible="tableVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :title-name="tableStyle.tableName"
  60 + @hideDialog="hideDialogTable" @okFunc="okFuncTable"
61 > 61 >
62 -  
63 - </el-popover>-->  
64 - <div class="dialog-div" v-if="tableVisible" :style="heightStyle">  
65 - <div class="dialog-div-content" :style="marginStyle" >  
66 - <div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="tableVisible = false">X</span></div> 62 + <template v-slot>
67 <div v-if="hackReset" class="txtScroll-top" > 63 <div v-if="hackReset" class="txtScroll-top" >
68 <!--表头--> 64 <!--表头-->
69 <div class="title" :style="borderStyle"> 65 <div class="title" :style="borderStyle">
@@ -83,85 +79,102 @@ @@ -83,85 +79,102 @@
83 v-for="(itemChild, idx) in headerAll" 79 v-for="(itemChild, idx) in headerAll"
84 :key="idx" 80 :key="idx"
85 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]" 81 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
  82 + @mouseenter="pressingTimes(index,idx)"
86 > 83 >
87 <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)" 84 <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
88 :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]"> 85 :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
89 {{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span> 86 {{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>
90 - <div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"> 87 + <customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
  88 + :detailMenubox="calcDetailMenubox"
  89 + :tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
  90 + :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="tableStyle.tableName"
  91 +
  92 + ></customMenuBox>
  93 +<!-- <div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)">
91 <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200"> 94 <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">
92 <template #reference> 95 <template #reference>
93 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)"> 96 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">
94 </template> 97 </template>
95 - <!-- <div class="info-ul" v-if="pressingVisible==index+'-'+idx">--> 98 +
96 <div class="info-ul" style="width:140px;" > 99 <div class="info-ul" style="width:140px;" >
97 - <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'dialog')" v-for="itemMenu in detailMenubox"> 100 + <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'dialog')" v-for="itemMenu in calcDetailMenubox">
98 <i class="el-icon-link icon-div"></i>{{itemMenu.name}} 101 <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
99 </div> 102 </div>
100 </div> 103 </div>
101 </el-popover> 104 </el-popover>
102 105
103 - </div> 106 + </div>-->
104 </div> 107 </div>
105 </li> 108 </li>
106 </ul> 109 </ul>
107 </div> 110 </div>
108 </div> 111 </div>
109 - </div>  
110 - </div>  
111 - <div class="dialog-div" v-if="dialogVisible" :style="heightStyle">  
112 - <div class="dialog-div-content" :style="marginStyle+widthStyle" >  
113 - <div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="dialogVisible = false">X</span></div>  
114 - <div v-if="dialogName=='alarm_setting'" class="txtScroll-top">  
115 - 告警设置{{pressingValue}}  
116 - </div>  
117 - <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">  
118 - 过滤单指标{{pressingValue}}  
119 - </div>  
120 - <div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">  
121 - 过滤多指标{{pressingValue}}  
122 - </div>  
123 - <div v-if="dialogName=='performance_trends'" class="txtScroll-top">  
124 - 性能趋势{{pressingValue}}  
125 - <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>  
126 - </div>  
127 - <div v-if="dialogName=='pressing_times'" class="txtScroll-top">  
128 - 压制次数{{pressingValue}}  
129 - </div>  
130 - <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">  
131 - 纳入容量预测{{pressingValue}}  
132 - </div>  
133 - <div class="dialog-footer" v-if="dialogName!='table' && dialogName!='performance_trends'">  
134 - <el-button @click="dialogVisible = false">取消</el-button>  
135 - <el-button type="primary" @click="dialogVisible = false"  
136 - >确定</el-button  
137 - >  
138 - </div> 112 + </template>
  113 + </customDialog>
  114 +<!-- 直接点击表格数据展示 性能趋势弹框-->
  115 + <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableStyle.tableName"
  116 + :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
  117 + >
  118 + <template v-slot>
  119 + <div class="txtScroll-top">
  120 + 性能趋势{{pressingValue}}
  121 + <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
139 </div> 122 </div>
140 - </div> 123 + </template>
  124 + </customDialog>
  125 +<!-- <div class="dialog-div" v-if="tableVisible" :style="heightStyle">
  126 + <div class="dialog-div-content" :style="marginStyle" >
  127 + <div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="tableVisible = false">X</span></div>
141 128
142 -<!-- <template #footer>  
143 - <span class="dialog-footer">  
144 - <el-button @click="tableVisible = false">取消</el-button>  
145 - <el-button type="primary" @click="tableVisible = false"  
146 - >确定</el-button  
147 - >  
148 - </span> 129 + </div>
  130 + </div>-->
  131 +<!-- <customDialog :dialogVisible="dialogVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableStyle.tableName"
  132 + :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
  133 + >
  134 + <template v-slot>
  135 + <div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
  136 + 告警设置{{pressingValue}}
  137 + </div>
  138 + <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
  139 + 过滤单指标{{pressingValue}}
  140 + </div>
  141 + <div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
  142 + 过滤多指标{{pressingValue}}
  143 + </div>
  144 + <div v-if="dialogName=='performance_trends'" class="txtScroll-top">
  145 + 性能趋势{{pressingValue}}
  146 + <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
  147 + </div>
  148 + <div v-if="dialogName=='pressing_times'" class="txtScroll-top">
  149 + 压制次数{{pressingValue}}
  150 + </div>
  151 + <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
  152 + 纳入容量预测{{pressingValue}}
  153 + </div>
149 </template> 154 </template>
150 - </el-dialog>--> 155 + </customDialog>-->
  156 +
151 </div> 157 </div>
152 </template> 158 </template>
153 <script> 159 <script>
154 import vue from "vue"; 160 import vue from "vue";
155 import VueSuperSlide from "vue-superslide"; 161 import VueSuperSlide from "vue-superslide";
156 import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform"; 162 import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform";
  163 +import customDialog from "../../designerComponents/customDialog";
  164 +import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
  165 +
157 vue.use(VueSuperSlide); 166 vue.use(VueSuperSlide);
158 export default { 167 export default {
159 props: { 168 props: {
160 value: Object, 169 value: Object,
161 ispreview: Boolean 170 ispreview: Boolean
162 }, 171 },
  172 + components:{
  173 + customDialog,customMenuBox
  174 + },
163 data() { 175 data() {
164 return { 176 return {
  177 + trendVisible:false,//性能趋势弹框
165 headerAll:[], 178 headerAll:[],
166 listAll:[], 179 listAll:[],
167 tableVisible:false,//更多表格弹框 180 tableVisible:false,//更多表格弹框
@@ -185,32 +198,38 @@ export default { @@ -185,32 +198,38 @@ export default {
185 optionsData: {}, 198 optionsData: {},
186 pressingVisible:'', 199 pressingVisible:'',
187 isHover:false, 200 isHover:false,
188 - detailMenubox:[ 201 + /*detailMenubox:[
189 { 202 {
190 name:'告警设置', 203 name:'告警设置',
191 - type:'alarm_setting' 204 + type:'alarm_setting',
  205 + isDisplay:true
192 }, 206 },
193 { 207 {
194 name:'过滤单指标', 208 name:'过滤单指标',
195 - type:'filter_sheet_indicator' 209 + type:'filter_sheet_indicator',
  210 + isDisplay:true
196 }, 211 },
197 { 212 {
198 name:'过滤多指标', 213 name:'过滤多指标',
199 - type:'filter_multiple_indicators' 214 + type:'filter_multiple_indicators',
  215 + isDisplay:true
200 }, 216 },
201 { 217 {
202 name:'性能趋势', 218 name:'性能趋势',
203 - type:'performance_trends' 219 + type:'performance_trends',
  220 + isDisplay:true
204 }, 221 },
205 { 222 {
206 name:'压制次数', 223 name:'压制次数',
207 - type:'pressing_times' 224 + type:'pressing_times',
  225 + isDisplay:true
208 }, 226 },
209 { 227 {
210 name:'纳入容量预测', 228 name:'纳入容量预测',
211 - type:'include_capacity_forecast' 229 + type:'include_capacity_forecast',
  230 + isDisplay:true
212 } 231 }
213 - ], 232 + ],*/
214 dialogName:'',//表格名称 233 dialogName:'',//表格名称
215 pressingValue:'',//表格下探值 234 pressingValue:'',//表格下探值
216 trendSrc:'',//性能走势图地址 235 trendSrc:'',//性能走势图地址
@@ -275,6 +294,48 @@ export default { @@ -275,6 +294,48 @@ export default {
275 return{ 294 return{
276 tableName:tableStyleSetup.tableName 295 tableName:tableStyleSetup.tableName
277 } 296 }
  297 + },
  298 + //表格下探列表
  299 + calcDetailMenubox(){
  300 + const menubox = this.optionsSetUp;
  301 + let detailMenuBox=[];
  302 + if(menubox.alarm_setting){
  303 + detailMenuBox.push({
  304 + name:'告警设置',
  305 + type:'alarm_setting'
  306 + })
  307 + }
  308 + if(menubox.filter_sheet_indicator){
  309 + detailMenuBox.push({
  310 + name:'过滤单指标',
  311 + type:'filter_sheet_indicator'
  312 + })
  313 + }
  314 + if(menubox.filter_multiple_indicators){
  315 + detailMenuBox.push({
  316 + name:'过滤多指标',
  317 + type:'filter_multiple_indicators'
  318 + })
  319 + }
  320 + if(menubox.performance_trends){
  321 + detailMenuBox.push({
  322 + name:'性能趋势',
  323 + type:'performance_trends'
  324 + })
  325 + }
  326 + if(menubox.pressing_times){
  327 + detailMenuBox.push({
  328 + name:'压制次数',
  329 + type:'pressing_times'
  330 + })
  331 + }
  332 + if(menubox.include_capacity_forecast){
  333 + detailMenuBox.push({
  334 + name:'纳入容量预测',
  335 + type:'include_capacity_forecast'
  336 + })
  337 + }
  338 + return detailMenuBox;
278 } 339 }
279 }, 340 },
280 watch: { 341 watch: {
@@ -476,11 +537,16 @@ export default { @@ -476,11 +537,16 @@ export default {
476 }, 537 },
477 //点击表格内容名称事件 538 //点击表格内容名称事件
478 clickListName(obj){ 539 clickListName(obj){
479 - let trendsParams=obj;  
480 - // 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'  
481 - this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F';  
482 - this.widthStyle='';  
483 - this.setDialog('performance_trends') 540 + if(obj.kpiIdent==1 || obj.isWarning==1){
  541 + let trendsParams=obj;
  542 + // 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'
  543 + this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F';
  544 + this.widthStyle='';
  545 + // this.setDialog('performance_trends')
  546 + this.pressingValue=obj.kpiValue;
  547 + this.trendVisible=true;
  548 + }
  549 +
484 }, 550 },
485 //End LSQ 2022/1/20 10:23 TODO 551 //End LSQ 2022/1/20 10:23 TODO
486 handlerHead() { 552 handlerHead() {
@@ -594,6 +660,21 @@ export default { @@ -594,6 +660,21 @@ export default {
594 }, 660 },
595 closePressingDialog(){ 661 closePressingDialog(){
596 this.pressingVisible=false; 662 this.pressingVisible=false;
  663 + },
  664 + //弹框关闭确定
  665 + hideDialog(){
  666 + this.trendVisible=false;
  667 + },
  668 + okFunc(){
  669 + this.trendVisible=false;
  670 + },
  671 + //更多弹框关闭确定
  672 + hideDialogTable(){
  673 + this.tableVisible=false;
  674 + },
  675 + okFuncTable(){
  676 + this.tableVisible=false;
  677 +
597 } 678 }
598 } 679 }
599 }; 680 };
@@ -664,8 +745,8 @@ export default { @@ -664,8 +745,8 @@ export default {
664 } 745 }
665 } 746 }
666 } 747 }
667 -.basic-img{  
668 - /*display: flex;*/ 748 +/*.basic-img{
  749 + !*display: flex;*!
669 display: none; 750 display: none;
670 cursor: pointer; 751 cursor: pointer;
671 .info-img{ 752 .info-img{
@@ -679,9 +760,9 @@ export default { @@ -679,9 +760,9 @@ export default {
679 760
680 } 761 }
681 .info-ul{ 762 .info-ul{
682 - /*position: absolute;*/ 763 + !*position: absolute;*!
683 border:1px solid #d2d2d2; 764 border:1px solid #d2d2d2;
684 - /*padding: 16px 20px;*/ 765 + !*padding: 16px 20px;*!
685 padding-bottom: 5px; 766 padding-bottom: 5px;
686 z-index: 999999; 767 z-index: 999999;
687 background: #ffffff; 768 background: #ffffff;
@@ -710,13 +791,13 @@ export default { @@ -710,13 +791,13 @@ export default {
710 } 791 }
711 } 792 }
712 793
713 -} 794 +}*/
714 .listName-link{ 795 .listName-link{
715 cursor: pointer; 796 cursor: pointer;
716 color:#0d82e9; 797 color:#0d82e9;
717 text-decoration: underline; 798 text-decoration: underline;
718 } 799 }
719 -.dialog-div{ 800 +/*.dialog-div{
720 background: rgba(0, 0, 0, 0.35); 801 background: rgba(0, 0, 0, 0.35);
721 position: fixed; 802 position: fixed;
722 top: 0; 803 top: 0;
@@ -726,10 +807,10 @@ export default { @@ -726,10 +807,10 @@ export default {
726 z-index: 1; 807 z-index: 1;
727 } 808 }
728 .dialog-div-content{ 809 .dialog-div-content{
729 - /* display: flex; 810 + !* display: flex;
730 align-items: center; 811 align-items: center;
731 margin: 30px auto 0; 812 margin: 30px auto 0;
732 - flex-flow: column;*/ 813 + flex-flow: column;*!
733 width:80%; 814 width:80%;
734 min-height: 700px; 815 min-height: 700px;
735 max-height: 800px; 816 max-height: 800px;
@@ -772,5 +853,5 @@ export default { @@ -772,5 +853,5 @@ export default {
772 bottom: 0; 853 bottom: 0;
773 text-align: right; 854 text-align: right;
774 } 855 }
775 -} 856 +}*/
776 </style> 857 </style>