|
@@ -10,18 +10,27 @@ |
|
@@ -10,18 +10,27 @@ |
|
10
|
<superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
|
10
|
<superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
|
|
11
|
<!--表头-->
|
11
|
<!--表头-->
|
|
12
|
<div class="title">
|
12
|
<div class="title">
|
|
|
|
13
|
+ <div :style="[headerTableStlye,tableRowHeight(),serialNumber]">序号</div>
|
|
13
|
<div
|
14
|
<div
|
|
14
|
v-for="(item, index) in header"
|
15
|
v-for="(item, index) in header"
|
|
15
|
:style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
|
16
|
:style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
|
|
16
|
:key="index"
|
17
|
:key="index"
|
|
|
|
18
|
+ :class="{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}"
|
|
17
|
>
|
19
|
>
|
|
18
|
{{ item.name }}
|
20
|
{{ item.name }}
|
|
|
|
21
|
+<!-- <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>-->
|
|
|
|
22
|
+ <span v-if="tableFiledSort(index)" class="caret-wrapper">
|
|
|
|
23
|
+ <i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
|
|
|
|
24
|
+ <i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
|
|
|
|
25
|
+ </span>
|
|
19
|
</div>
|
26
|
</div>
|
|
20
|
</div>
|
27
|
</div>
|
|
21
|
<!--数据-->
|
28
|
<!--数据-->
|
|
22
|
<div class="bd">
|
29
|
<div class="bd">
|
|
23
|
<ul class="infoList">
|
30
|
<ul class="infoList">
|
|
24
|
<li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
|
31
|
<li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
|
|
|
|
32
|
+ <div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]">
|
|
|
|
33
|
+ {{ index+1 }}</div>
|
|
25
|
<div class="infoList-flex"
|
34
|
<div class="infoList-flex"
|
|
26
|
v-for="(itemChild, idx) in header"
|
35
|
v-for="(itemChild, idx) in header"
|
|
27
|
:key="idx"
|
36
|
:key="idx"
|
|
@@ -40,7 +49,7 @@ |
|
@@ -40,7 +49,7 @@ |
|
40
|
<customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
|
49
|
<customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
|
|
41
|
:detailMenubox="calcDetailMenubox"
|
50
|
:detailMenubox="calcDetailMenubox"
|
|
42
|
:tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
|
51
|
:tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
|
|
43
|
- :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="tableStyle.tableName"
|
52
|
+ :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
|
|
44
|
|
53
|
|
|
45
|
></customMenuBox>
|
54
|
></customMenuBox>
|
|
46
|
<!-- <div class="info-ul" style="width:140px;" >
|
55
|
<!-- <div class="info-ul" style="width:140px;" >
|
|
@@ -63,18 +72,27 @@ |
|
@@ -63,18 +72,27 @@ |
|
63
|
<div v-if="hackReset" class="txtScroll-top" >
|
72
|
<div v-if="hackReset" class="txtScroll-top" >
|
|
64
|
<!--表头-->
|
73
|
<!--表头-->
|
|
65
|
<div class="title" :style="borderStyle">
|
74
|
<div class="title" :style="borderStyle">
|
|
|
|
75
|
+ <div :style="[headerTableStlye,tableRowHeight(),serialNumber]">序号</div>
|
|
66
|
<div
|
76
|
<div
|
|
67
|
v-for="(item, index) in headerAll"
|
77
|
v-for="(item, index) in headerAll"
|
|
68
|
:style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
|
78
|
:style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
|
|
69
|
:key="index"
|
79
|
:key="index"
|
|
|
|
80
|
+ :class="{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}"
|
|
70
|
>
|
81
|
>
|
|
71
|
{{ item.name }}
|
82
|
{{ item.name }}
|
|
|
|
83
|
+<!-- <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':sortVal=='bottom','el-icon-caret-top':sortVal=='top'}]" @click="changeSort(item)"></i>-->
|
|
|
|
84
|
+ <span v-if="tableFiledSort(index)" class="caret-wrapper">
|
|
|
|
85
|
+ <i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
|
|
|
|
86
|
+ <i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
|
|
|
|
87
|
+ </span>
|
|
72
|
</div>
|
88
|
</div>
|
|
73
|
</div>
|
89
|
</div>
|
|
74
|
<!--数据-->
|
90
|
<!--数据-->
|
|
75
|
<div class="bd">
|
91
|
<div class="bd">
|
|
76
|
<ul class="infoList" :style="borderStyle">
|
92
|
<ul class="infoList" :style="borderStyle">
|
|
77
|
<li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
|
93
|
<li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
|
|
|
|
94
|
+ <div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]">
|
|
|
|
95
|
+ {{ index+1 }}</div>
|
|
78
|
<div class="infoList-flex"
|
96
|
<div class="infoList-flex"
|
|
79
|
v-for="(itemChild, idx) in headerAll"
|
97
|
v-for="(itemChild, idx) in headerAll"
|
|
80
|
:key="idx"
|
98
|
:key="idx"
|
|
@@ -87,32 +105,32 @@ |
|
@@ -87,32 +105,32 @@ |
|
87
|
<customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
|
105
|
<customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
|
|
88
|
:detailMenubox="calcDetailMenubox"
|
106
|
:detailMenubox="calcDetailMenubox"
|
|
89
|
:tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
|
107
|
:tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
|
|
90
|
- :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="tableStyle.tableName"
|
108
|
+ :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
|
|
91
|
|
109
|
|
|
92
|
></customMenuBox>
|
110
|
></customMenuBox>
|
|
93
|
-<!-- <div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)">
|
|
|
|
94
|
- <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">
|
|
|
|
95
|
- <template #reference>
|
|
|
|
96
|
- <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">
|
|
|
|
97
|
- </template>
|
|
|
|
98
|
-
|
|
|
|
99
|
- <div class="info-ul" style="width:140px;" >
|
|
|
|
100
|
- <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'dialog')" v-for="itemMenu in calcDetailMenubox">
|
|
|
|
101
|
- <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
|
|
|
|
102
|
- </div>
|
|
|
|
103
|
- </div>
|
|
|
|
104
|
- </el-popover>
|
|
|
|
105
|
-
|
|
|
|
106
|
- </div>-->
|
|
|
|
107
|
</div>
|
111
|
</div>
|
|
108
|
</li>
|
112
|
</li>
|
|
109
|
</ul>
|
113
|
</ul>
|
|
110
|
</div>
|
114
|
</div>
|
|
|
|
115
|
+ <!-- 分页 -->
|
|
|
|
116
|
+ <div class="pageClass" style='text-align: left;background-color: white'>
|
|
|
|
117
|
+ <el-pagination
|
|
|
|
118
|
+ v-if="currentPage"
|
|
|
|
119
|
+ @size-change="handleSizeChange"
|
|
|
|
120
|
+ @prev-click="prePage"
|
|
|
|
121
|
+ @next-click="nextPage"
|
|
|
|
122
|
+ @current-change="handleCurrentChange"
|
|
|
|
123
|
+ :current-page="currentPage"
|
|
|
|
124
|
+ :page-sizes="pageSizes"
|
|
|
|
125
|
+ :page-size="pageSize"
|
|
|
|
126
|
+ :total="total">
|
|
|
|
127
|
+ </el-pagination>
|
|
|
|
128
|
+ </div>
|
|
111
|
</div>
|
129
|
</div>
|
|
112
|
</template>
|
130
|
</template>
|
|
113
|
</customDialog>
|
131
|
</customDialog>
|
|
114
|
<!-- 直接点击表格数据展示 性能趋势弹框-->
|
132
|
<!-- 直接点击表格数据展示 性能趋势弹框-->
|
|
115
|
- <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableStyle.tableName"
|
133
|
+ <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="dialogName"
|
|
116
|
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
|
134
|
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
|
|
117
|
>
|
135
|
>
|
|
118
|
<template v-slot>
|
136
|
<template v-slot>
|
|
@@ -174,6 +192,10 @@ export default { |
|
@@ -174,6 +192,10 @@ export default { |
|
174
|
},
|
192
|
},
|
|
175
|
data() {
|
193
|
data() {
|
|
176
|
return {
|
194
|
return {
|
|
|
|
195
|
+ currentPage:1,
|
|
|
|
196
|
+ pageSize:10,
|
|
|
|
197
|
+ pageSizes:[10,50,100, 200, 300, 400],
|
|
|
|
198
|
+ total:0,
|
|
177
|
trendVisible:false,//性能趋势弹框
|
199
|
trendVisible:false,//性能趋势弹框
|
|
178
|
headerAll:[],
|
200
|
headerAll:[],
|
|
179
|
listAll:[],
|
201
|
listAll:[],
|
|
@@ -236,7 +258,9 @@ export default { |
|
@@ -236,7 +258,9 @@ export default { |
|
236
|
marginStyle:'',//弹框距离顶部距离
|
258
|
marginStyle:'',//弹框距离顶部距离
|
|
237
|
heightStyle:'',//弹框遮罩层高度
|
259
|
heightStyle:'',//弹框遮罩层高度
|
|
238
|
widthStyle:';',//弹框宽度样式
|
260
|
widthStyle:';',//弹框宽度样式
|
|
239
|
-
|
261
|
+ sortVal:'bottom',//排序方式
|
|
|
|
262
|
+ sortBy:'',//排序参数
|
|
|
|
263
|
+ sortCaret:'',//正序倒序
|
|
240
|
};
|
264
|
};
|
|
241
|
},
|
265
|
},
|
|
242
|
computed: {
|
266
|
computed: {
|
|
@@ -281,6 +305,13 @@ export default { |
|
@@ -281,6 +305,13 @@ export default { |
|
281
|
"border-bottom":'none',
|
305
|
"border-bottom":'none',
|
|
282
|
};
|
306
|
};
|
|
283
|
},
|
307
|
},
|
|
|
|
308
|
+ serialNumber(){
|
|
|
|
309
|
+ const headStyle = this.optionsSetUp;
|
|
|
|
310
|
+ return{
|
|
|
|
311
|
+ width:'30%',
|
|
|
|
312
|
+ display:headStyle.isSerialNumber?"block":"none",
|
|
|
|
313
|
+ }
|
|
|
|
314
|
+ },
|
|
284
|
borderStyle(){
|
315
|
borderStyle(){
|
|
285
|
const bodyStyle = this.optionsSetUp;
|
316
|
const bodyStyle = this.optionsSetUp;
|
|
286
|
return{
|
317
|
return{
|
|
@@ -485,8 +516,9 @@ export default { |
|
@@ -485,8 +516,9 @@ export default { |
|
485
|
this.list=datas;
|
516
|
this.list=datas;
|
|
486
|
this.header=colArr;
|
517
|
this.header=colArr;
|
|
487
|
}
|
518
|
}
|
|
|
|
519
|
+ this.tableFiledColumnSort();
|
|
488
|
},
|
520
|
},
|
|
489
|
- handlerDetailData(valData){
|
521
|
+ handlerDetailData(valData,sortBy){
|
|
490
|
let kpiArr=[]
|
522
|
let kpiArr=[]
|
|
491
|
let kpiIdStr='';
|
523
|
let kpiIdStr='';
|
|
492
|
if(this.header && this.header.length>0){
|
524
|
if(this.header && this.header.length>0){
|
|
@@ -504,6 +536,10 @@ export default { |
|
@@ -504,6 +536,10 @@ export default { |
|
504
|
let param={
|
536
|
let param={
|
|
505
|
kpiId:kpiIdStr
|
537
|
kpiId:kpiIdStr
|
|
506
|
}
|
538
|
}
|
|
|
|
539
|
+ let sort=sortBy;
|
|
|
|
540
|
+ if(sort){
|
|
|
|
541
|
+ param.sort=sort;
|
|
|
|
542
|
+ }
|
|
507
|
let headTable = valData;
|
543
|
let headTable = valData;
|
|
508
|
if(kpiIdStr){
|
544
|
if(kpiIdStr){
|
|
509
|
//根据kpiId集合获取表格数据
|
545
|
//根据kpiId集合获取表格数据
|
|
@@ -522,19 +558,13 @@ export default { |
|
@@ -522,19 +558,13 @@ export default { |
|
522
|
// this.setDialog('table');
|
558
|
// this.setDialog('table');
|
|
523
|
this.tableVisible=true;
|
559
|
this.tableVisible=true;
|
|
524
|
},
|
560
|
},
|
|
525
|
- //打开弹框
|
561
|
+ /*//打开弹框
|
|
526
|
setDialog(name,flg){
|
562
|
setDialog(name,flg){
|
|
527
|
- /* if(flg=='dialog'){
|
|
|
|
528
|
- this.tableVisible=true;
|
|
|
|
529
|
-
|
|
|
|
530
|
- }else{
|
|
|
|
531
|
-
|
|
|
|
532
|
|
563
|
|
|
533
|
- }*/
|
|
|
|
534
|
this.dialogVisible=true;
|
564
|
this.dialogVisible=true;
|
|
535
|
|
565
|
|
|
536
|
this.dialogName=name;
|
566
|
this.dialogName=name;
|
|
537
|
- },
|
567
|
+ },*/
|
|
538
|
//点击表格内容名称事件
|
568
|
//点击表格内容名称事件
|
|
539
|
clickListName(obj){
|
569
|
clickListName(obj){
|
|
540
|
if(obj.kpiIdent==1 || obj.isWarning==1){
|
570
|
if(obj.kpiIdent==1 || obj.isWarning==1){
|
|
@@ -544,6 +574,8 @@ export default { |
|
@@ -544,6 +574,8 @@ export default { |
|
544
|
this.widthStyle='';
|
574
|
this.widthStyle='';
|
|
545
|
// this.setDialog('performance_trends')
|
575
|
// this.setDialog('performance_trends')
|
|
546
|
this.pressingValue=obj.kpiValue;
|
576
|
this.pressingValue=obj.kpiValue;
|
|
|
|
577
|
+ this.dialogNameStyle(obj)
|
|
|
|
578
|
+
|
|
547
|
this.trendVisible=true;
|
579
|
this.trendVisible=true;
|
|
548
|
}
|
580
|
}
|
|
549
|
|
581
|
|
|
@@ -616,11 +648,48 @@ export default { |
|
@@ -616,11 +648,48 @@ export default { |
|
616
|
tableFiledWidth(index){
|
648
|
tableFiledWidth(index){
|
|
617
|
var styleJson = {};
|
649
|
var styleJson = {};
|
|
618
|
if(this.optionsSetUp.dynamicAddTable[index] && this.optionsSetUp.dynamicAddTable[index].width ){
|
650
|
if(this.optionsSetUp.dynamicAddTable[index] && this.optionsSetUp.dynamicAddTable[index].width ){
|
|
619
|
- styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width
|
651
|
+ styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width;
|
|
620
|
}
|
652
|
}
|
|
621
|
return styleJson
|
653
|
return styleJson
|
|
622
|
},
|
654
|
},
|
|
623
|
- //表格下探
|
655
|
+ //列是否排序
|
|
|
|
656
|
+ tableFiledSort(index){
|
|
|
|
657
|
+ let isSort=false;
|
|
|
|
658
|
+ if(this.optionsSetUp.dynamicAddTable[index] && this.optionsSetUp.dynamicAddTable[index].sort ){
|
|
|
|
659
|
+ isSort = this.optionsSetUp.dynamicAddTable[index].sort;
|
|
|
|
660
|
+ }
|
|
|
|
661
|
+ return isSort;
|
|
|
|
662
|
+ },
|
|
|
|
663
|
+ //列展示的排序位置
|
|
|
|
664
|
+ tableFiledColumnSort(){
|
|
|
|
665
|
+ let headerSet=this.optionsSetUp.dynamicAddTable;
|
|
|
|
666
|
+ headerSet.map(item=>{
|
|
|
|
667
|
+ this.header.map(v=>{
|
|
|
|
668
|
+ if(item.key==v.key){
|
|
|
|
669
|
+ v.columnSort=item.columnSort;
|
|
|
|
670
|
+ }
|
|
|
|
671
|
+ })
|
|
|
|
672
|
+ if(this.headerAll && this.headerAll.length>0){
|
|
|
|
673
|
+ this.headerAll.map(v=>{
|
|
|
|
674
|
+ if(item.key==v.key){
|
|
|
|
675
|
+ v.columnSort=item.columnSort;
|
|
|
|
676
|
+ }
|
|
|
|
677
|
+ })
|
|
|
|
678
|
+ }
|
|
|
|
679
|
+
|
|
|
|
680
|
+ })
|
|
|
|
681
|
+ this.header.sort(this.compare('columnSort'))
|
|
|
|
682
|
+ this.headerAll.sort(this.compare('columnSort'))
|
|
|
|
683
|
+ console.log("&&&",this.header)
|
|
|
|
684
|
+ },
|
|
|
|
685
|
+ compare(property){
|
|
|
|
686
|
+ return function(a,b){
|
|
|
|
687
|
+ let value1 = a[property];
|
|
|
|
688
|
+ let value2 = b[property];
|
|
|
|
689
|
+ return value1 - value2;
|
|
|
|
690
|
+ }
|
|
|
|
691
|
+ },
|
|
|
|
692
|
+ /* //表格下探
|
|
624
|
pressingDialog(itemMenu,value,flg){
|
693
|
pressingDialog(itemMenu,value,flg){
|
|
625
|
this.pressingValue=value;
|
694
|
this.pressingValue=value;
|
|
626
|
let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
|
695
|
let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
|
|
@@ -654,7 +723,7 @@ export default { |
|
@@ -654,7 +723,7 @@ export default { |
|
654
|
}
|
723
|
}
|
|
655
|
// this.$refs.popoverMenu.showPopper = false;
|
724
|
// this.$refs.popoverMenu.showPopper = false;
|
|
656
|
|
725
|
|
|
657
|
- },
|
726
|
+ },*/
|
|
658
|
pressingTimes(index,idx){
|
727
|
pressingTimes(index,idx){
|
|
659
|
this.pressingVisible=index+'-'+idx;
|
728
|
this.pressingVisible=index+'-'+idx;
|
|
660
|
},
|
729
|
},
|
|
@@ -675,12 +744,76 @@ export default { |
|
@@ -675,12 +744,76 @@ export default { |
|
675
|
okFuncTable(){
|
744
|
okFuncTable(){
|
|
676
|
this.tableVisible=false;
|
745
|
this.tableVisible=false;
|
|
677
|
|
746
|
|
|
|
|
747
|
+ },
|
|
|
|
748
|
+ //排序
|
|
|
|
749
|
+ changeSort(item,flg){
|
|
|
|
750
|
+ if(this.sortCaret==flg){
|
|
|
|
751
|
+ this.sortCaret='';
|
|
|
|
752
|
+ this.sortBy='';
|
|
|
|
753
|
+ }else{
|
|
|
|
754
|
+ this.sortCaret=flg;
|
|
|
|
755
|
+ this.sortBy=item.key;
|
|
|
|
756
|
+ }
|
|
|
|
757
|
+ if(this.sortCaret=='ascending'){
|
|
|
|
758
|
+ //正序
|
|
|
|
759
|
+ }else if(this.sortCaret=='ascending'){
|
|
|
|
760
|
+ //倒序
|
|
|
|
761
|
+ }else{
|
|
|
|
762
|
+ //不排序
|
|
678
|
}
|
763
|
}
|
|
|
|
764
|
+ console.log('sort',item.key)
|
|
|
|
765
|
+ // this.handlerDetailData('',item.key)
|
|
|
|
766
|
+ // this.handlerDetailDataNoPage();
|
|
|
|
767
|
+ },
|
|
|
|
768
|
+ // 每页展示多少条
|
|
|
|
769
|
+ handleSizeChange(val){
|
|
|
|
770
|
+ // 切换页码重置初始页
|
|
|
|
771
|
+ this.currentPage = 1
|
|
|
|
772
|
+ // console.log(`每页 ${val} 条`)
|
|
|
|
773
|
+ //props.pageSize = val;
|
|
|
|
774
|
+ this.pageSize = val;
|
|
|
|
775
|
+ this.handlerDetailDataNoPage();
|
|
|
|
776
|
+ },
|
|
|
|
777
|
+
|
|
|
|
778
|
+ // 切换页码
|
|
|
|
779
|
+ handleCurrentChange(val){
|
|
|
|
780
|
+ // console.log(`当前页: ${val}`)
|
|
|
|
781
|
+ //props.currentPage = val;
|
|
|
|
782
|
+ this.currentPage = val;
|
|
|
|
783
|
+ this.handlerDetailDataNoPage();
|
|
|
|
784
|
+ },
|
|
|
|
785
|
+ // 切换页码
|
|
|
|
786
|
+ prePage(val) {
|
|
|
|
787
|
+ // console.log(`当前页: ${val}`)
|
|
|
|
788
|
+ // props.currentPage = val - 1;
|
|
|
|
789
|
+ this.currentPage = val-1;
|
|
|
|
790
|
+ this.handlerDetailDataNoPage();
|
|
|
|
791
|
+ },
|
|
|
|
792
|
+
|
|
|
|
793
|
+ // 切换页码
|
|
|
|
794
|
+ nextPage(val){
|
|
|
|
795
|
+ // console.log(`当前页: ${val}`)
|
|
|
|
796
|
+ // props.currentPage = val + 1;
|
|
|
|
797
|
+ this.currentPage = val+1;
|
|
|
|
798
|
+ this.handlerDetailDataNoPage();
|
|
|
|
799
|
+ },
|
|
|
|
800
|
+ //计算弹框名称
|
|
|
|
801
|
+ dialogNameStyle(obj){
|
|
|
|
802
|
+ const tableStyleSetup=this.optionsSetUp;
|
|
|
|
803
|
+ let kpiName=obj.kpiName?'+'+obj.kpiName:'';
|
|
|
|
804
|
+ let dialogName=tableStyleSetup.tableName+kpiName;
|
|
|
|
805
|
+ this.dialogName=dialogName;
|
|
|
|
806
|
+ return dialogName;
|
|
|
|
807
|
+
|
|
|
|
808
|
+ },
|
|
679
|
}
|
809
|
}
|
|
680
|
};
|
810
|
};
|
|
681
|
</script>
|
811
|
</script>
|
|
682
|
<style lang="scss" scoped>
|
812
|
<style lang="scss" scoped>
|
|
683
|
/* 本例子css */
|
813
|
/* 本例子css */
|
|
|
|
814
|
+.cursorClass{
|
|
|
|
815
|
+ cursor: pointer;
|
|
|
|
816
|
+}
|
|
684
|
.txtScroll-top {
|
817
|
.txtScroll-top {
|
|
685
|
overflow: hidden;
|
818
|
overflow: hidden;
|
|
686
|
position: relative;
|
819
|
position: relative;
|
|
@@ -797,6 +930,11 @@ export default { |
|
@@ -797,6 +930,11 @@ export default { |
|
797
|
color:#0d82e9;
|
930
|
color:#0d82e9;
|
|
798
|
text-decoration: underline;
|
931
|
text-decoration: underline;
|
|
799
|
}
|
932
|
}
|
|
|
|
933
|
+.pageClass{
|
|
|
|
934
|
+ position: absolute;
|
|
|
|
935
|
+ bottom:30px;
|
|
|
|
936
|
+
|
|
|
|
937
|
+}
|
|
800
|
/*.dialog-div{
|
938
|
/*.dialog-div{
|
|
801
|
background: rgba(0, 0, 0, 0.35);
|
939
|
background: rgba(0, 0, 0, 0.35);
|
|
802
|
position: fixed;
|
940
|
position: fixed;
|
|
@@ -854,4 +992,36 @@ export default { |
|
@@ -854,4 +992,36 @@ export default { |
|
854
|
text-align: right;
|
992
|
text-align: right;
|
|
855
|
}
|
993
|
}
|
|
856
|
}*/
|
994
|
}*/
|
|
|
|
995
|
+.title .caret-wrapper {
|
|
|
|
996
|
+ display: inline-flex;
|
|
|
|
997
|
+ flex-direction: column;
|
|
|
|
998
|
+ align-items: center;
|
|
|
|
999
|
+ height: 14px;
|
|
|
|
1000
|
+ width: 24px;
|
|
|
|
1001
|
+ vertical-align: middle;
|
|
|
|
1002
|
+ cursor: pointer;
|
|
|
|
1003
|
+ overflow: initial;
|
|
|
|
1004
|
+ position: relative;
|
|
|
|
1005
|
+}
|
|
|
|
1006
|
+.title .sort-caret {
|
|
|
|
1007
|
+ width: 0;
|
|
|
|
1008
|
+ height: 0;
|
|
|
|
1009
|
+ border: solid 5px transparent;
|
|
|
|
1010
|
+ position: absolute;
|
|
|
|
1011
|
+ left: 7px;
|
|
|
|
1012
|
+}
|
|
|
|
1013
|
+.title .sort-caret.ascending {
|
|
|
|
1014
|
+ border-bottom-color: #c0c4cc;
|
|
|
|
1015
|
+ top: -5px;
|
|
|
|
1016
|
+}
|
|
|
|
1017
|
+.title .sort-caret.descending {
|
|
|
|
1018
|
+ border-top-color: #c0c4cc;
|
|
|
|
1019
|
+ bottom: -3px;
|
|
|
|
1020
|
+}
|
|
|
|
1021
|
+.title .ascending .sort-caret.ascending {
|
|
|
|
1022
|
+ border-bottom-color: #409eff;
|
|
|
|
1023
|
+}
|
|
|
|
1024
|
+.title .descending .sort-caret.descending {
|
|
|
|
1025
|
+ border-top-color: #409eff;
|
|
|
|
1026
|
+}
|
|
857
|
</style> |
1027
|
</style> |
