|
...
|
...
|
@@ -10,18 +10,27 @@ |
|
|
|
<superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
|
|
|
|
<!--表头-->
|
|
|
|
<div class="title">
|
|
|
|
<div :style="[headerTableStlye,tableRowHeight(),serialNumber]">序号</div>
|
|
|
|
<div
|
|
|
|
v-for="(item, index) in header"
|
|
|
|
:style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
|
|
|
|
:key="index"
|
|
|
|
:class="{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}"
|
|
|
|
>
|
|
|
|
{{ item.name }}
|
|
|
|
<!-- <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':(sortBy==item.key && sortVal=='bottom'),'el-icon-caret-top':(sortBy==item.key && sortVal=='top')}]" @click="changeSort(item)"></i>-->
|
|
|
|
<span v-if="tableFiledSort(index)" class="caret-wrapper">
|
|
|
|
<i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
|
|
|
|
<i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--数据-->
|
|
|
|
<div class="bd">
|
|
|
|
<ul class="infoList">
|
|
|
|
<li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
|
|
|
|
<div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]">
|
|
|
|
{{ index+1 }}</div>
|
|
|
|
<div class="infoList-flex"
|
|
|
|
v-for="(itemChild, idx) in header"
|
|
|
|
:key="idx"
|
|
...
|
...
|
@@ -40,7 +49,7 @@ |
|
|
|
<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"
|
|
|
|
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
|
|
|
|
|
|
|
|
></customMenuBox>
|
|
|
|
<!-- <div class="info-ul" style="width:140px;" >
|
|
...
|
...
|
@@ -63,18 +72,27 @@ |
|
|
|
<div v-if="hackReset" class="txtScroll-top" >
|
|
|
|
<!--表头-->
|
|
|
|
<div class="title" :style="borderStyle">
|
|
|
|
<div :style="[headerTableStlye,tableRowHeight(),serialNumber]">序号</div>
|
|
|
|
<div
|
|
|
|
v-for="(item, index) in headerAll"
|
|
|
|
:style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
|
|
|
|
:key="index"
|
|
|
|
:class="{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}"
|
|
|
|
>
|
|
|
|
{{ item.name }}
|
|
|
|
<!-- <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':sortVal=='bottom','el-icon-caret-top':sortVal=='top'}]" @click="changeSort(item)"></i>-->
|
|
|
|
<span v-if="tableFiledSort(index)" class="caret-wrapper">
|
|
|
|
<i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
|
|
|
|
<i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
|
|
|
|
</span>
|
|
|
|
</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" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]">
|
|
|
|
{{ index+1 }}</div>
|
|
|
|
<div class="infoList-flex"
|
|
|
|
v-for="(itemChild, idx) in headerAll"
|
|
|
|
:key="idx"
|
|
...
|
...
|
@@ -87,32 +105,32 @@ |
|
|
|
<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"
|
|
|
|
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
|
|
|
|
|
|
|
|
></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" style="width:140px;" >
|
|
|
|
<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>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
|
|
<div class="pageClass" style='text-align: left;background-color: white'>
|
|
|
|
<el-pagination
|
|
|
|
v-if="currentPage"
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
@prev-click="prePage"
|
|
|
|
@next-click="nextPage"
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
:current-page="currentPage"
|
|
|
|
:page-sizes="pageSizes"
|
|
|
|
:page-size="pageSize"
|
|
|
|
:total="total">
|
|
|
|
</el-pagination>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</customDialog>
|
|
|
|
<!-- 直接点击表格数据展示 性能趋势弹框-->
|
|
|
|
<customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableStyle.tableName"
|
|
|
|
<customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="dialogName"
|
|
|
|
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
|
|
|
|
>
|
|
|
|
<template v-slot>
|
|
...
|
...
|
@@ -174,6 +192,10 @@ export default { |
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
currentPage:1,
|
|
|
|
pageSize:10,
|
|
|
|
pageSizes:[10,50,100, 200, 300, 400],
|
|
|
|
total:0,
|
|
|
|
trendVisible:false,//性能趋势弹框
|
|
|
|
headerAll:[],
|
|
|
|
listAll:[],
|
|
...
|
...
|
@@ -236,7 +258,9 @@ export default { |
|
|
|
marginStyle:'',//弹框距离顶部距离
|
|
|
|
heightStyle:'',//弹框遮罩层高度
|
|
|
|
widthStyle:';',//弹框宽度样式
|
|
|
|
|
|
|
|
sortVal:'bottom',//排序方式
|
|
|
|
sortBy:'',//排序参数
|
|
|
|
sortCaret:'',//正序倒序
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
...
|
...
|
@@ -281,6 +305,13 @@ export default { |
|
|
|
"border-bottom":'none',
|
|
|
|
};
|
|
|
|
},
|
|
|
|
serialNumber(){
|
|
|
|
const headStyle = this.optionsSetUp;
|
|
|
|
return{
|
|
|
|
width:'30%',
|
|
|
|
display:headStyle.isSerialNumber?"block":"none",
|
|
|
|
}
|
|
|
|
},
|
|
|
|
borderStyle(){
|
|
|
|
const bodyStyle = this.optionsSetUp;
|
|
|
|
return{
|
|
...
|
...
|
@@ -485,8 +516,9 @@ export default { |
|
|
|
this.list=datas;
|
|
|
|
this.header=colArr;
|
|
|
|
}
|
|
|
|
this.tableFiledColumnSort();
|
|
|
|
},
|
|
|
|
handlerDetailData(valData){
|
|
|
|
handlerDetailData(valData,sortBy){
|
|
|
|
let kpiArr=[]
|
|
|
|
let kpiIdStr='';
|
|
|
|
if(this.header && this.header.length>0){
|
|
...
|
...
|
@@ -504,6 +536,10 @@ export default { |
|
|
|
let param={
|
|
|
|
kpiId:kpiIdStr
|
|
|
|
}
|
|
|
|
let sort=sortBy;
|
|
|
|
if(sort){
|
|
|
|
param.sort=sort;
|
|
|
|
}
|
|
|
|
let headTable = valData;
|
|
|
|
if(kpiIdStr){
|
|
|
|
//根据kpiId集合获取表格数据
|
|
...
|
...
|
@@ -522,19 +558,13 @@ export default { |
|
|
|
// this.setDialog('table');
|
|
|
|
this.tableVisible=true;
|
|
|
|
},
|
|
|
|
//打开弹框
|
|
|
|
/*//打开弹框
|
|
|
|
setDialog(name,flg){
|
|
|
|
/* if(flg=='dialog'){
|
|
|
|
this.tableVisible=true;
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
|
|
|
|
}*/
|
|
|
|
this.dialogVisible=true;
|
|
|
|
|
|
|
|
this.dialogName=name;
|
|
|
|
},
|
|
|
|
},*/
|
|
|
|
//点击表格内容名称事件
|
|
|
|
clickListName(obj){
|
|
|
|
if(obj.kpiIdent==1 || obj.isWarning==1){
|
|
...
|
...
|
@@ -544,6 +574,8 @@ export default { |
|
|
|
this.widthStyle='';
|
|
|
|
// this.setDialog('performance_trends')
|
|
|
|
this.pressingValue=obj.kpiValue;
|
|
|
|
this.dialogNameStyle(obj)
|
|
|
|
|
|
|
|
this.trendVisible=true;
|
|
|
|
}
|
|
|
|
|
|
...
|
...
|
@@ -616,11 +648,48 @@ export default { |
|
|
|
tableFiledWidth(index){
|
|
|
|
var styleJson = {};
|
|
|
|
if(this.optionsSetUp.dynamicAddTable[index] && this.optionsSetUp.dynamicAddTable[index].width ){
|
|
|
|
styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width
|
|
|
|
styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width;
|
|
|
|
}
|
|
|
|
return styleJson
|
|
|
|
},
|
|
|
|
//表格下探
|
|
|
|
//列是否排序
|
|
|
|
tableFiledSort(index){
|
|
|
|
let isSort=false;
|
|
|
|
if(this.optionsSetUp.dynamicAddTable[index] && this.optionsSetUp.dynamicAddTable[index].sort ){
|
|
|
|
isSort = this.optionsSetUp.dynamicAddTable[index].sort;
|
|
|
|
}
|
|
|
|
return isSort;
|
|
|
|
},
|
|
|
|
//列展示的排序位置
|
|
|
|
tableFiledColumnSort(){
|
|
|
|
let headerSet=this.optionsSetUp.dynamicAddTable;
|
|
|
|
headerSet.map(item=>{
|
|
|
|
this.header.map(v=>{
|
|
|
|
if(item.key==v.key){
|
|
|
|
v.columnSort=item.columnSort;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
if(this.headerAll && this.headerAll.length>0){
|
|
|
|
this.headerAll.map(v=>{
|
|
|
|
if(item.key==v.key){
|
|
|
|
v.columnSort=item.columnSort;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
this.header.sort(this.compare('columnSort'))
|
|
|
|
this.headerAll.sort(this.compare('columnSort'))
|
|
|
|
console.log("&&&",this.header)
|
|
|
|
},
|
|
|
|
compare(property){
|
|
|
|
return function(a,b){
|
|
|
|
let value1 = a[property];
|
|
|
|
let value2 = b[property];
|
|
|
|
return value1 - value2;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/* //表格下探
|
|
|
|
pressingDialog(itemMenu,value,flg){
|
|
|
|
this.pressingValue=value;
|
|
|
|
let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
|
|
...
|
...
|
@@ -654,7 +723,7 @@ export default { |
|
|
|
}
|
|
|
|
// this.$refs.popoverMenu.showPopper = false;
|
|
|
|
|
|
|
|
},
|
|
|
|
},*/
|
|
|
|
pressingTimes(index,idx){
|
|
|
|
this.pressingVisible=index+'-'+idx;
|
|
|
|
},
|
|
...
|
...
|
@@ -675,12 +744,76 @@ export default { |
|
|
|
okFuncTable(){
|
|
|
|
this.tableVisible=false;
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//排序
|
|
|
|
changeSort(item,flg){
|
|
|
|
if(this.sortCaret==flg){
|
|
|
|
this.sortCaret='';
|
|
|
|
this.sortBy='';
|
|
|
|
}else{
|
|
|
|
this.sortCaret=flg;
|
|
|
|
this.sortBy=item.key;
|
|
|
|
}
|
|
|
|
if(this.sortCaret=='ascending'){
|
|
|
|
//正序
|
|
|
|
}else if(this.sortCaret=='ascending'){
|
|
|
|
//倒序
|
|
|
|
}else{
|
|
|
|
//不排序
|
|
|
|
}
|
|
|
|
console.log('sort',item.key)
|
|
|
|
// this.handlerDetailData('',item.key)
|
|
|
|
// this.handlerDetailDataNoPage();
|
|
|
|
},
|
|
|
|
// 每页展示多少条
|
|
|
|
handleSizeChange(val){
|
|
|
|
// 切换页码重置初始页
|
|
|
|
this.currentPage = 1
|
|
|
|
// console.log(`每页 ${val} 条`)
|
|
|
|
//props.pageSize = val;
|
|
|
|
this.pageSize = val;
|
|
|
|
this.handlerDetailDataNoPage();
|
|
|
|
},
|
|
|
|
|
|
|
|
// 切换页码
|
|
|
|
handleCurrentChange(val){
|
|
|
|
// console.log(`当前页: ${val}`)
|
|
|
|
//props.currentPage = val;
|
|
|
|
this.currentPage = val;
|
|
|
|
this.handlerDetailDataNoPage();
|
|
|
|
},
|
|
|
|
// 切换页码
|
|
|
|
prePage(val) {
|
|
|
|
// console.log(`当前页: ${val}`)
|
|
|
|
// props.currentPage = val - 1;
|
|
|
|
this.currentPage = val-1;
|
|
|
|
this.handlerDetailDataNoPage();
|
|
|
|
},
|
|
|
|
|
|
|
|
// 切换页码
|
|
|
|
nextPage(val){
|
|
|
|
// console.log(`当前页: ${val}`)
|
|
|
|
// props.currentPage = val + 1;
|
|
|
|
this.currentPage = val+1;
|
|
|
|
this.handlerDetailDataNoPage();
|
|
|
|
},
|
|
|
|
//计算弹框名称
|
|
|
|
dialogNameStyle(obj){
|
|
|
|
const tableStyleSetup=this.optionsSetUp;
|
|
|
|
let kpiName=obj.kpiName?'+'+obj.kpiName:'';
|
|
|
|
let dialogName=tableStyleSetup.tableName+kpiName;
|
|
|
|
this.dialogName=dialogName;
|
|
|
|
return dialogName;
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
/* 本例子css */
|
|
|
|
.cursorClass{
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.txtScroll-top {
|
|
|
|
overflow: hidden;
|
|
|
|
position: relative;
|
|
...
|
...
|
@@ -797,6 +930,11 @@ export default { |
|
|
|
color:#0d82e9;
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
.pageClass{
|
|
|
|
position: absolute;
|
|
|
|
bottom:30px;
|
|
|
|
|
|
|
|
}
|
|
|
|
/*.dialog-div{
|
|
|
|
background: rgba(0, 0, 0, 0.35);
|
|
|
|
position: fixed;
|
|
...
|
...
|
@@ -854,4 +992,36 @@ export default { |
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
}*/
|
|
|
|
.title .caret-wrapper {
|
|
|
|
display: inline-flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
height: 14px;
|
|
|
|
width: 24px;
|
|
|
|
vertical-align: middle;
|
|
|
|
cursor: pointer;
|
|
|
|
overflow: initial;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.title .sort-caret {
|
|
|
|
width: 0;
|
|
|
|
height: 0;
|
|
|
|
border: solid 5px transparent;
|
|
|
|
position: absolute;
|
|
|
|
left: 7px;
|
|
|
|
}
|
|
|
|
.title .sort-caret.ascending {
|
|
|
|
border-bottom-color: #c0c4cc;
|
|
|
|
top: -5px;
|
|
|
|
}
|
|
|
|
.title .sort-caret.descending {
|
|
|
|
border-top-color: #c0c4cc;
|
|
|
|
bottom: -3px;
|
|
|
|
}
|
|
|
|
.title .ascending .sort-caret.ascending {
|
|
|
|
border-bottom-color: #409eff;
|
|
|
|
}
|
|
|
|
.title .descending .sort-caret.descending {
|
|
|
|
border-top-color: #409eff;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
