monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 822e83a680c63d4911865cbbdfe62483bc392d1a 1 parent 708f0aaf

详情表格组件更多弹框中的表格下探

Inline Side-by-side
Showing 2 changed files with 157 additions and 79 deletions
@@ -116,7 +116,7 @@ export const monitorDetailTable = { @@ -116,7 +116,7 @@ export const monitorDetailTable = {
116 name: 'isLine', 116 name: 'isLine',
117 required: false, 117 required: false,
118 placeholder: '', 118 placeholder: '',
119 - value: false 119 + value: true
120 }, 120 },
121 { 121 {
122 type: 'el-input-number', 122 type: 'el-input-number',
@@ -132,7 +132,7 @@ export const monitorDetailTable = { @@ -132,7 +132,7 @@ export const monitorDetailTable = {
132 name: 'borderColor', 132 name: 'borderColor',
133 required: false, 133 required: false,
134 placeholder: '', 134 placeholder: '',
135 - value: '#fff' 135 + value: '#e6e6e6'
136 }, 136 },
137 [ 137 [
138 { 138 {
@@ -298,7 +298,7 @@ export const monitorDetailTable = { @@ -298,7 +298,7 @@ export const monitorDetailTable = {
298 name: 'width', 298 name: 'width',
299 required: false, 299 required: false,
300 placeholder: '该容器在1920px大屏中的宽度', 300 placeholder: '该容器在1920px大屏中的宽度',
301 - value: 600, 301 + value: 1000,
302 }, 302 },
303 { 303 {
304 type: 'el-input-number', 304 type: 'el-input-number',
@@ -306,7 +306,7 @@ export const monitorDetailTable = { @@ -306,7 +306,7 @@ export const monitorDetailTable = {
306 name: 'height', 306 name: 'height',
307 required: false, 307 required: false,
308 placeholder: '该容器在1080px大屏中的高度', 308 placeholder: '该容器在1080px大屏中的高度',
309 - value: 300, 309 + value: 340,
310 }, 310 },
311 ] 311 ]
312 } 312 }
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 <span class="title-link">下载</span> 7 <span class="title-link">下载</span>
8 </div> 8 </div>
9 </div> 9 </div>
10 - <superslide v-if="hackReset" :options="options" class="txtScroll-top"> 10 + <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
11 <!--表头--> 11 <!--表头-->
12 <div class="title"> 12 <div class="title">
13 <div 13 <div
@@ -27,8 +27,9 @@ @@ -27,8 +27,9 @@
27 :key="idx" 27 :key="idx"
28 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]" 28 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
29 > 29 >
30 - <span @click="clickListName(item[itemChild.key])" :class="['listName',{'listName-link':item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1}]">  
31 - {{ item[itemChild.key].kpiValue }}</span> 30 + <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
  31 + :class="['listName',{'listName-link':item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1}]">
  32 + {{ item[itemChild.key].kpiValue}} </span>
32 <div class="basic-img" v-if="item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1"> 33 <div class="basic-img" v-if="item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1">
33 <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200"> 34 <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">
34 <template #reference> 35 <template #reference>
@@ -36,23 +37,11 @@ @@ -36,23 +37,11 @@
36 </template> 37 </template>
37 <!-- <div class="info-ul" v-if="pressingVisible==index+'-'+idx">--> 38 <!-- <div class="info-ul" v-if="pressingVisible==index+'-'+idx">-->
38 <div class="info-ul" style="width:140px;" > 39 <div class="info-ul" style="width:140px;" >
39 - <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue)" v-for="itemMenu in detailMenubox"> 40 + <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'')" v-for="itemMenu in detailMenubox">
40 <i class="el-icon-link icon-div"></i>{{itemMenu.name}} 41 <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
41 </div> 42 </div>
42 </div> 43 </div>
43 </el-popover> 44 </el-popover>
44 -<!-- <el-tooltip placement="top" effect="dark" >  
45 - <template #content>  
46 - <div class="info-ul" style="width:140px;" >  
47 - <div class="basic-pressing-times" @click="pressingDialog" v-for="item in detailMenubox">  
48 - <i class="el-icon-link icon-div"></i>{{item.name}}  
49 - </div>  
50 - </div>  
51 - </template>  
52 - <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">  
53 - </el-tooltip>-->  
54 -  
55 -  
56 </div> 45 </div>
57 </div> 46 </div>
58 </li> 47 </li>
@@ -60,49 +49,67 @@ @@ -60,49 +49,67 @@
60 </div> 49 </div>
61 </superslide> 50 </superslide>
62 <!-- <el-dialog :visible.sync="tableVisible" :title="tableStyle.tableName" width="80%" center>--> 51 <!-- <el-dialog :visible.sync="tableVisible" :title="tableStyle.tableName" width="80%" center>-->
63 - <div class="dialog-div" v-if="tableVisible" :style="marginStyle">  
64 - <div class="dialog-div-content" >  
65 - <div class="dialog-div-title title-flex-between">{{tableStyle.tableName}} <span class="dialog-close" @click="tableVisible = false">X</span></div>  
66 - <superslide v-if="dialogName=='table' && hackReset" :options="options" class="txtScroll-top">  
67 - <!--表头-->  
68 - <div class="title">  
69 - <div  
70 - v-for="(item, index) in headerAll"  
71 - :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"  
72 - :key="index"  
73 - >  
74 - {{ item.name }}  
75 - </div> 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
  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>
  67 + <div v-if="hackReset" class="txtScroll-top" >
  68 + <!--表头-->
  69 + <div class="title" :style="borderStyle">
  70 + <div
  71 + v-for="(item, index) in headerAll"
  72 + :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
  73 + :key="index"
  74 + >
  75 + {{ item.name }}
76 </div> 76 </div>
77 - <!--数据-->  
78 - <div class="bd">  
79 - <ul class="infoList">  
80 - <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >  
81 - <div class="infoList-flex"  
82 - v-for="(itemChild, idx) in headerAll"  
83 - :key="idx"  
84 - :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"  
85 - >  
86 - <span :class="['listName',{'listName-link':item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1}]">{{ item[itemChild.key].kpiValue }}</span>  
87 - <div class="basic-img" v-if="item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1">  
88 - <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">  
89 - <template #reference>  
90 - <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">  
91 - </template>  
92 - <!-- <div class="info-ul" v-if="pressingVisible==index+'-'+idx">-->  
93 - <div class="info-ul" style="width:140px;" >  
94 - <div class="basic-pressing-times" @click="pressingDialog(index,idx)" v-for="item in detailMenubox">  
95 - <i class="el-icon-link icon-div"></i>{{item.name}}  
96 - </div> 77 + </div>
  78 + <!--数据-->
  79 + <div class="bd">
  80 + <ul class="infoList" :style="borderStyle">
  81 + <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
  82 + <div class="infoList-flex"
  83 + v-for="(itemChild, idx) in headerAll"
  84 + :key="idx"
  85 + :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
  86 + >
  87 + <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)" :class="['listName',{'listName-link':item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1}]">
  88 + {{ item[itemChild.key].kpiValue }}</span>
  89 + <div class="basic-img" v-if="item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1">
  90 + <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">
  91 + <template #reference>
  92 + <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">
  93 + </template>
  94 + <!-- <div class="info-ul" v-if="pressingVisible==index+'-'+idx">-->
  95 + <div class="info-ul" style="width:140px;" >
  96 + <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'dialog')" v-for="itemMenu in detailMenubox">
  97 + <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
97 </div> 98 </div>
98 - </el-popover> 99 + </div>
  100 + </el-popover>
99 101
100 - </div>  
101 </div> 102 </div>
102 - </li>  
103 - </ul>  
104 - </div>  
105 - </superslide> 103 + </div>
  104 + </li>
  105 + </ul>
  106 + </div>
  107 + </div>
  108 + </div>
  109 + </div>
  110 + <div class="dialog-div" v-if="dialogVisible" :style="heightStyle">
  111 + <div class="dialog-div-content" :style="marginStyle+widthStyle" >
  112 + <div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="dialogVisible = false">X</span></div>
106 <div v-if="dialogName=='alarm_setting'" class="txtScroll-top"> 113 <div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
107 告警设置{{pressingValue}} 114 告警设置{{pressingValue}}
108 </div> 115 </div>
@@ -115,7 +122,6 @@ @@ -115,7 +122,6 @@
115 <div v-if="dialogName=='performance_trends'" class="txtScroll-top"> 122 <div v-if="dialogName=='performance_trends'" class="txtScroll-top">
116 性能趋势{{pressingValue}} 123 性能趋势{{pressingValue}}
117 <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/> 124 <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
118 -  
119 </div> 125 </div>
120 <div v-if="dialogName=='pressing_times'" class="txtScroll-top"> 126 <div v-if="dialogName=='pressing_times'" class="txtScroll-top">
121 压制次数{{pressingValue}} 127 压制次数{{pressingValue}}
@@ -123,9 +129,9 @@ @@ -123,9 +129,9 @@
123 <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top"> 129 <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
124 纳入容量预测{{pressingValue}} 130 纳入容量预测{{pressingValue}}
125 </div> 131 </div>
126 - <div class="dialog-footer">  
127 - <el-button @click="tableVisible = false">取消</el-button>  
128 - <el-button type="primary" @click="tableVisible = false" 132 + <div class="dialog-footer" v-if="dialogName!='table' && dialogName!='performance_trends'">
  133 + <el-button @click="dialogVisible = false">取消</el-button>
  134 + <el-button type="primary" @click="dialogVisible = false"
129 >确定</el-button 135 >确定</el-button
130 > 136 >
131 </div> 137 </div>
@@ -159,6 +165,7 @@ export default { @@ -159,6 +165,7 @@ export default {
159 headerAll:[], 165 headerAll:[],
160 listAll:[], 166 listAll:[],
161 tableVisible:false,//更多表格弹框 167 tableVisible:false,//更多表格弹框
  168 + dialogVisible:false,//表格下探后的弹框
162 popoverVisible:false,//下探弹框 169 popoverVisible:false,//下探弹框
163 hackReset: true, 170 hackReset: true,
164 options: { 171 options: {
@@ -208,6 +215,8 @@ export default { @@ -208,6 +215,8 @@ export default {
208 pressingValue:'',//表格下探值 215 pressingValue:'',//表格下探值
209 trendSrc:'',//性能走势图地址 216 trendSrc:'',//性能走势图地址
210 marginStyle:'',//弹框距离顶部距离 217 marginStyle:'',//弹框距离顶部距离
  218 + heightStyle:'',//弹框遮罩层高度
  219 + widthStyle:';',//弹框宽度样式
211 220
212 }; 221 };
213 }, 222 },
@@ -234,7 +243,9 @@ export default { @@ -234,7 +243,9 @@ export default {
234 "border-color": headStyle.borderColor, 243 "border-color": headStyle.borderColor,
235 display: headStyle.isHeader ? "block" : "none", 244 display: headStyle.isHeader ? "block" : "none",
236 color: headStyle.headColor, 245 color: headStyle.headColor,
237 - "background-color": headStyle.headBackColor 246 + "background-color": headStyle.headBackColor,
  247 + "border-right":'none',
  248 + "border-bottom":'none'
238 }; 249 };
239 }, 250 },
240 bodyTableStyle() { 251 bodyTableStyle() {
@@ -246,9 +257,19 @@ export default { @@ -246,9 +257,19 @@ export default {
246 "border-width": bodyStyle.borderWidth + "px", 257 "border-width": bodyStyle.borderWidth + "px",
247 "border-color": bodyStyle.borderColor, 258 "border-color": bodyStyle.borderColor,
248 color: bodyStyle.bodyColor, 259 color: bodyStyle.bodyColor,
249 - "background-color": bodyStyle.tableBgColor 260 + "background-color": bodyStyle.tableBgColor,
  261 + "border-right":'none',
  262 + "border-bottom":'none',
250 }; 263 };
251 }, 264 },
  265 + borderStyle(){
  266 + const bodyStyle = this.optionsSetUp;
  267 + return{
  268 + "border-right":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none',
  269 + "border-bottom":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none'
  270 +
  271 + }
  272 + },
252 tableStyle(){ 273 tableStyle(){
253 const tableStyleSetup=this.optionsSetUp; 274 const tableStyleSetup=this.optionsSetUp;
254 return{ 275 return{
@@ -297,6 +318,27 @@ export default { @@ -297,6 +318,27 @@ export default {
297 this.hackResetFun(); 318 this.hackResetFun();
298 }, 319 },
299 // Start LSQ 2022/1/20 10:23 TODO 320 // Start LSQ 2022/1/20 10:23 TODO
  321 + //值区间 不同颜色 0-80 正常 80-85一般 85-95重要 95-100严重
  322 + colorStyle (val) {
  323 + let textColor='';
  324 + if(val){
  325 + let value=val.split("%")
  326 + if(value && value.length>1){
  327 + if(value[0]>0 && value[0]<80){
  328 + textColor='#0d82e9'
  329 + }else if(value[0]>=80 && value[0]<85){
  330 + textColor='#7BE00D'
  331 + }else if(value[0]>=85 && value[0]<95){
  332 + textColor='#F5A623'
  333 + }else if(value[0]>=95 && value[0]<=100){
  334 + textColor='#D81E06'
  335 + }
  336 + }
  337 + }
  338 + return{
  339 + color:textColor
  340 + }
  341 + },
300 handleScroll(e){ 342 handleScroll(e){
301 let serviceTop = 44; 343 let serviceTop = 44;
302 344
@@ -316,15 +358,11 @@ export default { @@ -316,15 +358,11 @@ export default {
316 let scroll=window.pageYOffset; 358 let scroll=window.pageYOffset;
317 let documentHeight=document.documentElement.clientHeight; 359 let documentHeight=document.documentElement.clientHeight;
318 console.log("123",documentHeight,scroll) 360 console.log("123",documentHeight,scroll)
319 - this.marginStyle="height:"+documentHeight+scroll+'px;'  
320 - this.marginStyle="margin-top:"+scroll+'px;' 361 + this.heightStyle="height:"+(documentHeight+scroll)+'px;';
  362 + this.marginStyle+="margin-top:"+(scroll+30)+'px;';
321 363
322 }, 364 },
323 - setDialogMargin(){  
324 - let topVal=this.$refs.detailTable.getBoundingClientRect().top;  
325 - this.marginStyle="margin-top:"+topVal+'px;'  
326 - console.log("top",topVal,this.$refs.detailTable.scrollTop)  
327 - }, 365 +
328 handleHeadContent(headTable,flg){ 366 handleHeadContent(headTable,flg){
329 let data = headTable.data[0]; 367 let data = headTable.data[0];
330 let head = data.header; 368 let head = data.header;
@@ -353,6 +391,7 @@ export default { @@ -353,6 +391,7 @@ export default {
353 }) 391 })
354 datas.push(kpi); 392 datas.push(kpi);
355 }) 393 })
  394 + console.log("col",colArr)
356 if(flg=='all'){ 395 if(flg=='all'){
357 this.headerAll=colArr; 396 this.headerAll=colArr;
358 this.listAll=datas; 397 this.listAll=datas;
@@ -360,6 +399,7 @@ export default { @@ -360,6 +399,7 @@ export default {
360 this.list=datas; 399 this.list=datas;
361 this.header=colArr; 400 this.header=colArr;
362 } 401 }
  402 + console.log("datas",datas)
363 403
364 }, 404 },
365 handlerDetailData(){ 405 handlerDetailData(){
@@ -370,12 +410,23 @@ export default { @@ -370,12 +410,23 @@ export default {
370 //打开更多表格 410 //打开更多表格
371 handlerDetailDataNoPage(){ 411 handlerDetailDataNoPage(){
372 let headTable =getDetailTableDataNoPage(); 412 let headTable =getDetailTableDataNoPage();
373 - this.handleHeadContent(headTable,'all')  
374 - this.setDialog('table'); 413 + this.handleHeadContent(headTable,'all');
  414 + this.widthStyle='';
  415 + // this.setDialog('table');
  416 + this.tableVisible=true;
375 }, 417 },
376 //打开弹框 418 //打开弹框
377 - setDialog(name){  
378 - this.tableVisible=true; 419 + setDialog(name,flg){
  420 + console.log("123",name,flg)
  421 + /* if(flg=='dialog'){
  422 + this.tableVisible=true;
  423 +
  424 + }else{
  425 +
  426 +
  427 + }*/
  428 + this.dialogVisible=true;
  429 +
379 this.dialogName=name; 430 this.dialogName=name;
380 }, 431 },
381 //点击表格内容名称事件 432 //点击表格内容名称事件
@@ -384,6 +435,7 @@ export default { @@ -384,6 +435,7 @@ export default {
384 let trendsParams=obj; 435 let trendsParams=obj;
385 // 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' 436 // 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'
386 this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F'; 437 this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F';
  438 + this.widthStyle='';
387 this.setDialog('performance_trends') 439 this.setDialog('performance_trends')
388 }, 440 },
389 //End LSQ 2022/1/20 10:23 TODO 441 //End LSQ 2022/1/20 10:23 TODO
@@ -454,9 +506,31 @@ export default { @@ -454,9 +506,31 @@ export default {
454 return styleJson 506 return styleJson
455 }, 507 },
456 //表格下探 508 //表格下探
457 - pressingDialog(itemMenu,value){ 509 + pressingDialog(itemMenu,value,flg){
458 this.pressingValue=value; 510 this.pressingValue=value;
459 - this.setDialog(itemMenu.type); 511 + let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
  512 + if(itemMenu.type=='alarm_setting'){
  513 + this.widthStyle='width:70%;';
  514 +
  515 + }else if(itemMenu.type=='filter_sheet_indicator'){
  516 + this.widthStyle=styleStr;
  517 +
  518 + }else if(itemMenu.type=='filter_multiple_indicators'){
  519 + this.widthStyle=styleStr;
  520 +
  521 + }else if(itemMenu.type=='performance_trends'){
  522 + this.widthStyle='';
  523 +
  524 + }else if(itemMenu.type=='pressing_times'){
  525 + this.widthStyle=styleStr;
  526 +
  527 + }else if(itemMenu.type=='include_capacity_forecast'){
  528 + this.widthStyle=styleStr;
  529 +
  530 + }
  531 +
  532 + this.setDialog(itemMenu.type,flg);
  533 +
460 let key=this.$refs.popoverMenu; 534 let key=this.$refs.popoverMenu;
461 if(key && key.length>0){ 535 if(key && key.length>0){
462 key.map(item=>{ 536 key.map(item=>{
@@ -614,6 +688,9 @@ export default { @@ -614,6 +688,9 @@ export default {
614 background: #FFFFFF; 688 background: #FFFFFF;
615 position: relative; 689 position: relative;
616 margin: 30px auto; 690 margin: 30px auto;
  691 + .dialog-div-width{
  692 + width: 100%;
  693 + }
617 .txtScroll-top{ 694 .txtScroll-top{
618 width:100%; 695 width:100%;
619 padding: 10px; 696 padding: 10px;
@@ -641,9 +718,10 @@ export default { @@ -641,9 +718,10 @@ export default {
641 } 718 }
642 .dialog-footer{ 719 .dialog-footer{
643 width: 100%; 720 width: 100%;
644 - padding: 15px 0; 721 + padding: 15px;
645 position: absolute; 722 position: absolute;
646 bottom: 0; 723 bottom: 0;
  724 + text-align: right;
647 } 725 }
648 } 726 }
649 </style> 727 </style>