|
|
|
<template>
|
|
|
|
<div :style="styleObj" @click="closePressingDialog">
|
|
|
|
<div class="detail-table-title title-flex-between">
|
|
|
|
<div class="title-left">{{tableStyle.tableName}}</div>
|
|
|
|
<div class="title-right">
|
|
|
|
<span class="title-link" @click="handlerDetailDataNoPage()">更多</span>
|
|
|
|
<span class="title-link">下载</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<superslide v-if="hackReset" :options="options" class="txtScroll-top">
|
|
|
|
<!--表头-->
|
|
|
|
<div class="title">
|
|
...
|
...
|
@@ -20,16 +27,16 @@ |
|
|
|
:key="idx"
|
|
|
|
:style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
|
|
|
|
>
|
|
|
|
<span :class="['listName',{'listName-link':itemChild.kpiIdent==1 || itemChild.isWarning==1}]">{{ item[itemChild.key] }}</span>
|
|
|
|
<div class="basic-img" v-if="itemChild.kpiIdent==1 || itemChild.isWarning==1">
|
|
|
|
<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 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>
|
|
...
|
...
|
@@ -51,12 +58,93 @@ |
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</superslide>
|
|
|
|
<!-- <el-dialog :visible.sync="tableVisible" :title="tableStyle.tableName" width="80%" center>-->
|
|
|
|
<div class="dialog-div" v-if="tableVisible">
|
|
|
|
<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>
|
|
|
|
</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>
|
|
|
|
</el-popover>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</superslide>
|
|
|
|
<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}}
|
|
|
|
</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">
|
|
|
|
<el-button @click="tableVisible = false">取消</el-button>
|
|
|
|
<el-button type="primary" @click="tableVisible = 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>-->
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import vue from "vue";
|
|
|
|
import VueSuperSlide from "vue-superslide";
|
|
|
|
|
|
|
|
import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform";
|
|
|
|
vue.use(VueSuperSlide);
|
|
|
|
export default {
|
|
|
|
props: {
|
|
...
|
...
|
@@ -65,7 +153,10 @@ export default { |
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
popoverVisible:false,
|
|
|
|
headerAll:[],
|
|
|
|
listAll:[],
|
|
|
|
tableVisible:false,//更多表格弹框
|
|
|
|
popoverVisible:false,//下探弹框
|
|
|
|
hackReset: true,
|
|
|
|
options: {
|
|
|
|
titCell: ".hd ul",
|
|
...
|
...
|
@@ -109,7 +200,10 @@ export default { |
|
|
|
name:'纳入容量预测',
|
|
|
|
type:'include_capacity_forecast'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
],
|
|
|
|
dialogName:'',//表格名称
|
|
|
|
pressingValue:'',//表格下探值
|
|
|
|
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
...
|
...
|
@@ -149,6 +243,12 @@ export default { |
|
|
|
color: bodyStyle.bodyColor,
|
|
|
|
"background-color": bodyStyle.tableBgColor
|
|
|
|
};
|
|
|
|
},
|
|
|
|
tableStyle(){
|
|
|
|
const tableStyleSetup=this.optionsSetUp;
|
|
|
|
return{
|
|
|
|
tableName:tableStyleSetup.tableName
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
...
|
...
|
@@ -174,6 +274,7 @@ export default { |
|
|
|
this.handlerHead();
|
|
|
|
this.handlerData();
|
|
|
|
this.visConfig();
|
|
|
|
this.handlerDetailData();
|
|
|
|
},
|
|
|
|
visConfig(){
|
|
|
|
this.options.vis = this.optionsSetUp.vis;
|
|
...
|
...
|
@@ -189,6 +290,105 @@ export default { |
|
|
|
this.options = options;
|
|
|
|
this.hackResetFun();
|
|
|
|
},
|
|
|
|
handleHeadContent(headTable,flg){
|
|
|
|
let data = headTable.data[0];
|
|
|
|
let head = data.header;
|
|
|
|
let content = data.content;
|
|
|
|
let colArr = [];
|
|
|
|
let fisttd = "";
|
|
|
|
let datas=[];
|
|
|
|
|
|
|
|
head.map((v) => {
|
|
|
|
fisttd = v.id;
|
|
|
|
let columnObj = {
|
|
|
|
name: v.name, key: v.id, width: '50%', unit: v.unit
|
|
|
|
}
|
|
|
|
colArr.push(columnObj)
|
|
|
|
})
|
|
|
|
|
|
|
|
content.map((cv) => {
|
|
|
|
let kpi = {};
|
|
|
|
cv.map((ccv) => {
|
|
|
|
if (ccv.kpiValue || ccv.kpiValue === 0) {
|
|
|
|
kpi[ccv.kpiId] = ccv;
|
|
|
|
} else {
|
|
|
|
kpi[ccv.kpiId] = {};
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
datas.push(kpi);
|
|
|
|
})
|
|
|
|
if(flg=='all'){
|
|
|
|
this.headerAll=colArr;
|
|
|
|
this.listAll=datas;
|
|
|
|
}else{
|
|
|
|
this.list=datas;
|
|
|
|
this.header=colArr;
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
// Start LSQ 2022/1/20 10:23 TODO
|
|
|
|
handlerDetailData(){
|
|
|
|
let headTable = getDetailTableData();
|
|
|
|
this.handleHeadContent(headTable)
|
|
|
|
|
|
|
|
},
|
|
|
|
handlerDetailDataNoPage(){
|
|
|
|
let headTable =getDetailTableDataNoPage();
|
|
|
|
this.handleHeadContent(headTable,'all')
|
|
|
|
this.setDialog('table');
|
|
|
|
},
|
|
|
|
setDialog(name){
|
|
|
|
this.tableVisible=true;
|
|
|
|
this.dialogName=name;
|
|
|
|
},
|
|
|
|
/* handlerDetailData(){
|
|
|
|
let headTable=getDetailTableData();
|
|
|
|
let data = headTable.data[0];
|
|
|
|
let head = data.header;
|
|
|
|
let content = data.content;
|
|
|
|
let colArr=[];
|
|
|
|
let fisttd = "";
|
|
|
|
let contentArr=[];
|
|
|
|
|
|
|
|
$.each(head, function (i, v) {
|
|
|
|
fisttd=v.id;
|
|
|
|
let columnObj={
|
|
|
|
name:v.name,key:v.id,width:'50%',unit:v.unit
|
|
|
|
}
|
|
|
|
colArr.push(columnObj)
|
|
|
|
let obj={}
|
|
|
|
let arr=[]
|
|
|
|
console.log("AA1")
|
|
|
|
$.each(content,function(ci,cv){
|
|
|
|
console.log("a11")
|
|
|
|
$.each(cv,function (cci,ccv){
|
|
|
|
if(ccv.kpiId==v.id){
|
|
|
|
console.log("b22")
|
|
|
|
columnObj.isWarning=ccv.isWarning;
|
|
|
|
columnObj.kpiIdent=ccv.kpiIdent;
|
|
|
|
// contentArr[fisttd]=ccv.isWarning;
|
|
|
|
obj[fisttd]=ccv.kpiValue
|
|
|
|
|
|
|
|
}
|
|
|
|
})
|
|
|
|
console.log('obj',obj)
|
|
|
|
|
|
|
|
arr.push(obj)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
console.log('arr',arr)
|
|
|
|
// debugger
|
|
|
|
contentArr.push(obj)
|
|
|
|
})
|
|
|
|
|
|
|
|
console.log('111',colArr)
|
|
|
|
console.log('222',contentArr)
|
|
|
|
|
|
|
|
},*/
|
|
|
|
//End LSQ 2022/1/20 10:23 TODO
|
|
|
|
handlerHead() {
|
|
|
|
const head = this.optionsSetUp.dynamicAddTable;
|
|
|
|
this.header = head;
|
|
...
|
...
|
@@ -250,13 +450,15 @@ export default { |
|
|
|
},
|
|
|
|
tableFiledWidth(index){
|
|
|
|
var styleJson = {};
|
|
|
|
if(this.optionsSetUp.dynamicAddTable[index].width ){
|
|
|
|
if(this.optionsSetUp.dynamicAddTable[index] && this.optionsSetUp.dynamicAddTable[index].width ){
|
|
|
|
styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width
|
|
|
|
}
|
|
|
|
return styleJson
|
|
|
|
},
|
|
|
|
//表格下探
|
|
|
|
pressingDialog(index,idx){
|
|
|
|
pressingDialog(itemMenu,value){
|
|
|
|
this.pressingValue=value;
|
|
|
|
this.setDialog(itemMenu.type);
|
|
|
|
let key=this.$refs.popoverMenu;
|
|
|
|
if(key && key.length>0){
|
|
|
|
key.map(item=>{
|
|
...
|
...
|
@@ -318,6 +520,21 @@ export default { |
|
|
|
.txtScroll-top .infoList li:nth-child(2n) {
|
|
|
|
background: rgb(10, 39, 50);
|
|
|
|
}*/
|
|
|
|
.title-flex-between{
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
}
|
|
|
|
.detail-table-title{
|
|
|
|
font-size: 16px;
|
|
|
|
color:#1E9FFF;
|
|
|
|
padding:10px;
|
|
|
|
.title-link{
|
|
|
|
margin-left: 10px;
|
|
|
|
cursor: pointer;
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.infoList-flex{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
...
|
...
|
@@ -380,4 +597,46 @@ export default { |
|
|
|
color:#0d82e9;
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
.dialog-div{
|
|
|
|
background: rgba(0, 0, 0, 0.35);
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
.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;
|
|
|
|
.txtScroll-top{
|
|
|
|
width:100%;
|
|
|
|
padding: 10px;
|
|
|
|
margin-bottom:50px;
|
|
|
|
}
|
|
|
|
.dialog-div-title{
|
|
|
|
width: 100%;
|
|
|
|
background: #f8f8f8;
|
|
|
|
padding:10px;
|
|
|
|
text-align: left;
|
|
|
|
.dialog-close{
|
|
|
|
cursor: pointer;
|
|
|
|
color:#666666;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.dialog-footer{
|
|
|
|
width: 100%;
|
|
|
|
padding: 15px 0;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
