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 813da60..f5a22a5 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
@@ -116,7 +116,7 @@ export const monitorDetailTable = {
name: 'isLine',
required: false,
placeholder: '',
- value: false
+ value: true
},
{
type: 'el-input-number',
@@ -132,7 +132,7 @@ export const monitorDetailTable = {
name: 'borderColor',
required: false,
placeholder: '',
- value: '#fff'
+ value: '#e6e6e6'
},
[
{
@@ -298,7 +298,7 @@ export const monitorDetailTable = {
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
- value: 600,
+ value: 1000,
},
{
type: 'el-input-number',
@@ -306,7 +306,7 @@ export const monitorDetailTable = {
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
- value: 300,
+ value: 340,
},
]
}
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 83dd9fc..7935bf8 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
@@ -7,7 +7,7 @@
<span class="title-link">下载</span>
</div>
</div>
- <superslide v-if="hackReset" :options="options" class="txtScroll-top">
+ <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
<!--表头-->
<div class="title">
<div
@@ -27,8 +27,9 @@
:key="idx"
:style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
>
- <span @click="clickListName(item[itemChild.key])" :class="['listName',{'listName-link':item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1}]">
- {{ item[itemChild.key].kpiValue }}</span>
+ <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}]">
+ {{ item[itemChild.key].kpiValue}} </span>
<div class="basic-img" v-if="item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1">
<el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">
<template #reference>
@@ -36,23 +37,11 @@
</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">
+ <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'')" v-for="itemMenu in detailMenubox">
<i class="el-icon-link icon-div"></i>{{itemMenu.name}}
</div>
</div>
</el-popover>
-<!-- <el-tooltip placement="top" effect="dark" >
- <template #content>
- <div class="info-ul" style="width:140px;" >
- <div class="basic-pressing-times" @click="pressingDialog" v-for="item in detailMenubox">
- <i class="el-icon-link icon-div"></i>{{item.name}}
- </div>
- </div>
- </template>
- <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">
- </el-tooltip>-->
-
-
</div>
</div>
</li>
@@ -60,49 +49,67 @@
</div>
</superslide>
<!-- <el-dialog :visible.sync="tableVisible" :title="tableStyle.tableName" width="80%" center>-->
- <div class="dialog-div" v-if="tableVisible" :style="marginStyle">
- <div class="dialog-div-content" >
- <div class="dialog-div-title title-flex-between">{{tableStyle.tableName}} <span class="dialog-close" @click="tableVisible = false">X</span></div>
- <superslide v-if="dialogName=='table' && hackReset" :options="options" class="txtScroll-top">
- <!--表头-->
- <div class="title">
- <div
- v-for="(item, index) in headerAll"
- :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
- :key="index"
- >
- {{ item.name }}
- </div>
+
+<!-- <el-popover
+ ref="popoverRef"
+ v-model:visible="tableVisible"
+ placement="left"
+ trigger="click"
+ :title="tableStyle.tableName"
+ virtual-triggering
+ persistent
+ >
+
+ </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>
+ <div v-if="hackReset" class="txtScroll-top" >
+ <!--表头-->
+ <div class="title" :style="borderStyle">
+ <div
+ v-for="(item, index) in headerAll"
+ :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
+ :key="index"
+ >
+ {{ item.name }}
</div>
- <!--数据-->
- <div class="bd">
- <ul class="infoList">
- <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
- <div class="infoList-flex"
- v-for="(itemChild, idx) in headerAll"
- :key="idx"
- :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
- >
- <span :class="['listName',{'listName-link':item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1}]">{{ item[itemChild.key].kpiValue }}</span>
- <div class="basic-img" v-if="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(index,idx)" v-for="item in detailMenubox">
- <i class="el-icon-link icon-div"></i>{{item.name}}
- </div>
+ </div>
+ <!--数据-->
+ <div class="bd">
+ <ul class="infoList" :style="borderStyle">
+ <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
+ <div class="infoList-flex"
+ v-for="(itemChild, idx) in headerAll"
+ :key="idx"
+ :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
+ >
+ <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}]">
+ {{ item[itemChild.key].kpiValue }}</span>
+ <div class="basic-img" v-if="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">
+ <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
</div>
- </el-popover>
+ </div>
+ </el-popover>
- </div>
</div>
- </li>
- </ul>
- </div>
- </superslide>
+ </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>
@@ -115,7 +122,6 @@
<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}}
@@ -123,9 +129,9 @@
<div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
纳入容量预测{{pressingValue}}
</div>
- <div class="dialog-footer">
- <el-button @click="tableVisible = false">取消</el-button>
- <el-button type="primary" @click="tableVisible = false"
+ <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>
@@ -159,6 +165,7 @@ export default {
headerAll:[],
listAll:[],
tableVisible:false,//更多表格弹框
+ dialogVisible:false,//表格下探后的弹框
popoverVisible:false,//下探弹框
hackReset: true,
options: {
@@ -208,6 +215,8 @@ export default {
pressingValue:'',//表格下探值
trendSrc:'',//性能走势图地址
marginStyle:'',//弹框距离顶部距离
+ heightStyle:'',//弹框遮罩层高度
+ widthStyle:';',//弹框宽度样式
};
},
@@ -234,7 +243,9 @@ export default {
"border-color": headStyle.borderColor,
display: headStyle.isHeader ? "block" : "none",
color: headStyle.headColor,
- "background-color": headStyle.headBackColor
+ "background-color": headStyle.headBackColor,
+ "border-right":'none',
+ "border-bottom":'none'
};
},
bodyTableStyle() {
@@ -246,9 +257,19 @@ export default {
"border-width": bodyStyle.borderWidth + "px",
"border-color": bodyStyle.borderColor,
color: bodyStyle.bodyColor,
- "background-color": bodyStyle.tableBgColor
+ "background-color": bodyStyle.tableBgColor,
+ "border-right":'none',
+ "border-bottom":'none',
};
},
+ borderStyle(){
+ const bodyStyle = this.optionsSetUp;
+ return{
+ "border-right":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none',
+ "border-bottom":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none'
+
+ }
+ },
tableStyle(){
const tableStyleSetup=this.optionsSetUp;
return{
@@ -297,6 +318,27 @@ export default {
this.hackResetFun();
},
// Start LSQ 2022/1/20 10:23 TODO
+ //值区间 不同颜色 0-80 正常 80-85一般 85-95重要 95-100严重
+ colorStyle (val) {
+ let textColor='';
+ if(val){
+ let value=val.split("%")
+ if(value && value.length>1){
+ if(value[0]>0 && value[0]<80){
+ textColor='#0d82e9'
+ }else if(value[0]>=80 && value[0]<85){
+ textColor='#7BE00D'
+ }else if(value[0]>=85 && value[0]<95){
+ textColor='#F5A623'
+ }else if(value[0]>=95 && value[0]<=100){
+ textColor='#D81E06'
+ }
+ }
+ }
+ return{
+ color:textColor
+ }
+ },
handleScroll(e){
let serviceTop = 44;
@@ -316,15 +358,11 @@ export default {
let scroll=window.pageYOffset;
let documentHeight=document.documentElement.clientHeight;
console.log("123",documentHeight,scroll)
- this.marginStyle="height:"+documentHeight+scroll+'px;'
- this.marginStyle="margin-top:"+scroll+'px;'
+ this.heightStyle="height:"+(documentHeight+scroll)+'px;';
+ this.marginStyle+="margin-top:"+(scroll+30)+'px;';
},
- setDialogMargin(){
- let topVal=this.$refs.detailTable.getBoundingClientRect().top;
- this.marginStyle="margin-top:"+topVal+'px;'
- console.log("top",topVal,this.$refs.detailTable.scrollTop)
- },
+
handleHeadContent(headTable,flg){
let data = headTable.data[0];
let head = data.header;
@@ -353,6 +391,7 @@ export default {
})
datas.push(kpi);
})
+ console.log("col",colArr)
if(flg=='all'){
this.headerAll=colArr;
this.listAll=datas;
@@ -360,6 +399,7 @@ export default {
this.list=datas;
this.header=colArr;
}
+ console.log("datas",datas)
},
handlerDetailData(){
@@ -370,12 +410,23 @@ export default {
//打开更多表格
handlerDetailDataNoPage(){
let headTable =getDetailTableDataNoPage();
- this.handleHeadContent(headTable,'all')
- this.setDialog('table');
+ this.handleHeadContent(headTable,'all');
+ this.widthStyle='';
+ // this.setDialog('table');
+ this.tableVisible=true;
},
//打开弹框
- setDialog(name){
- this.tableVisible=true;
+ setDialog(name,flg){
+ console.log("123",name,flg)
+ /* if(flg=='dialog'){
+ this.tableVisible=true;
+
+ }else{
+
+
+ }*/
+ this.dialogVisible=true;
+
this.dialogName=name;
},
//点击表格内容名称事件
@@ -384,6 +435,7 @@ export default {
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')
},
//End LSQ 2022/1/20 10:23 TODO
@@ -454,9 +506,31 @@ export default {
return styleJson
},
//表格下探
- pressingDialog(itemMenu,value){
+ pressingDialog(itemMenu,value,flg){
this.pressingValue=value;
- this.setDialog(itemMenu.type);
+ 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;
if(key && key.length>0){
key.map(item=>{
@@ -614,6 +688,9 @@ export default {
background: #FFFFFF;
position: relative;
margin: 30px auto;
+ .dialog-div-width{
+ width: 100%;
+ }
.txtScroll-top{
width:100%;
padding: 10px;
@@ -641,9 +718,10 @@ export default {
}
.dialog-footer{
width: 100%;
- padding: 15px 0;
+ padding: 15px;
position: absolute;
bottom: 0;
+ text-align: right;
}
}
</style>