monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit ddb32b4fb4abc5d8200a5a33401b0441e5aa2d4a 1 parent ccc5bb9b

分页表格更多功能，水球样式调整

Inline Side-by-side
Showing 6 changed files with 92 additions and 192 deletions
@@ -358,7 +358,7 @@ export const monitorCustomLiquidFillChart = { @@ -358,7 +358,7 @@ export const monitorCustomLiquidFillChart = {
358 required: false, 358 required: false,
359 placeholder: '', 359 placeholder: '',
360 relactiveDom: 'dataType', 360 relactiveDom: 'dataType',
361 - chartType: 'widget-piechart', 361 + chartType: 'widget-table',
362 dictKey: 'TEXT_PROPERTIES', 362 dictKey: 'TEXT_PROPERTIES',
363 relactiveDomValue: 'dynamicData', 363 relactiveDomValue: 'dynamicData',
364 value: '', 364 value: '',
@@ -142,7 +142,7 @@ export default { @@ -142,7 +142,7 @@ export default {
142 if(this.optionsData.dataType=="dynamicData"){ 142 if(this.optionsData.dataType=="dynamicData"){
143 //改变参数值-月季度年，重新加载动态数据--待测 143 //改变参数值-月季度年，重新加载动态数据--待测
144 this.optionsData.dynamicData.contextData.time=val; 144 this.optionsData.dynamicData.contextData.time=val;
145 - this.editorOptions(); 145 + // this.editorOptions();
146 } 146 }
147 } 147 }
148 148
@@ -98,7 +98,7 @@ export default { @@ -98,7 +98,7 @@ export default {
98 if(this.optionsData.dataType=="dynamicData"){ 98 if(this.optionsData.dataType=="dynamicData"){
99 //改变参数值-月季度年，重新加载动态数据--待测 99 //改变参数值-月季度年，重新加载动态数据--待测
100 this.optionsData.dynamicData.contextData.dataScope=val; 100 this.optionsData.dynamicData.contextData.dataScope=val;
101 - this.editorOptions(); 101 + // this.editorOptions();
102 } 102 }
103 } 103 }
104 104
@@ -37,9 +37,9 @@ export default { @@ -37,9 +37,9 @@ export default {
37 return { 37 return {
38 // topStyle:'',//水波纹的大小 38 // topStyle:'',//水波纹的大小
39 fillData:[],//数据 39 fillData:[],//数据
40 - topNum:0,//水波纹的大小  
41 - nums:0,  
42 - options: { 40 + // topNum:0,//水波纹的大小
  41 + // nums:0,
  42 + /* options: {
43 title: { 43 title: {
44 text: '{nums|' + per + '}{percent|%}', 44 text: '{nums|' + per + '}{percent|%}',
45 x: 'center', 45 x: 'center',
@@ -113,7 +113,7 @@ export default { @@ -113,7 +113,7 @@ export default {
113 } 113 }
114 } 114 }
115 ], 115 ],
116 - }, 116 + },*/
117 optionsStyle: {}, // 样式 117 optionsStyle: {}, // 样式
118 optionsData: {}, // 数据 118 optionsData: {}, // 数据
119 optionsCollapse: {}, // 图标属性 119 optionsCollapse: {}, // 图标属性
@@ -254,13 +254,13 @@ export default { @@ -254,13 +254,13 @@ export default {
254 ); 254 );
255 }, 255 },
256 staticDataFn(val) { 256 staticDataFn(val) {
257 - const title = this.options.title;  
258 - const num = val[0]['num']; 257 + // const title = this.options.title;
  258 + // const num = val[0]['num'];
259 if(val && val.length>0) { 259 if(val && val.length>0) {
260 this.fillData=val; 260 this.fillData=val;
261 } 261 }
262 - this.nums = num ;  
263 - this.topNum=100-num; 262 + // this.nums = num ;
  263 + // this.topNum=100-num;
264 264
265 }, 265 },
266 topStyle(val){ 266 topStyle(val){
@@ -283,12 +283,20 @@ export default { @@ -283,12 +283,20 @@ export default {
283 getEchartData(val) { 283 getEchartData(val) {
284 const data = this.queryEchartsData(val); 284 const data = this.queryEchartsData(val);
285 data.then(res => { 285 data.then(res => {
  286 + if(res && res.object) {
  287 + if(typeof res.object=='object'){
  288 + let arr=[];
  289 + for(let key in res.object){
  290 + arr.push({num:res.object})
  291 + }
  292 + this.fillData=arr;
  293 +
  294 + }else{
  295 + this.fillData=[res.object];
286 296
287 - this.nums = res[0].value ;  
288 - if(res && res.length>0){  
289 - this.fillData=res; 297 + }
290 } 298 }
291 - this.topNum=100-this.nums; 299 +
292 }); 300 });
293 }, 301 },
294 } 302 }
@@ -75,7 +75,7 @@ @@ -75,7 +75,7 @@
75 </div> 75 </div>
76 </div> 76 </div>
77 <!--数据--> 77 <!--数据-->
78 - <div class="bd" v-loading="loadingAll"> 78 + <div class="bd1" v-loading="loadingAll">
79 <ul class="infoList"> 79 <ul class="infoList">
80 <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" > 80 <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" >
81 <div 81 <div
@@ -102,14 +102,14 @@ @@ -102,14 +102,14 @@
102 <!-- 分页 --> 102 <!-- 分页 -->
103 <div class="pageClass" v-if="optionsSetUp.isPage && !optionsSetUp.isRoll" style='text-align: left;background-color: white'> 103 <div class="pageClass" v-if="optionsSetUp.isPage && !optionsSetUp.isRoll" style='text-align: left;background-color: white'>
104 <el-pagination 104 <el-pagination
105 - v-if="currentPage"  
106 - @size-change="handleSizeChange"  
107 - @prev-click="prePage"  
108 - @next-click="nextPage"  
109 - @current-change="handleCurrentChange"  
110 - :current-page="currentPage" 105 + v-if="currentPageAll"
  106 + @size-change="handleSizeChangeMore"
  107 + @prev-click="prePageMore"
  108 + @next-click="nextPageMore"
  109 + @current-change="handleCurrentChangeMore"
  110 + :current-page="currentPageAll"
111 :page-sizes="pageSizes" 111 :page-sizes="pageSizes"
112 - :page-size="pageSize" 112 + :page-size="pageSizeAll"
113 :total="totalAll"> 113 :total="totalAll">
114 </el-pagination> 114 </el-pagination>
115 </div> 115 </div>
@@ -144,6 +144,8 @@ export default { @@ -144,6 +144,8 @@ export default {
144 currentPage:1, 144 currentPage:1,
145 pageSize:10, 145 pageSize:10,
146 pageSizes:[10,50,100, 200, 300, 400], 146 pageSizes:[10,50,100, 200, 300, 400],
  147 + currentPageAll:1,
  148 + pageSizeAll:10,
147 total:0, 149 total:0,
148 totalAll:0, 150 totalAll:0,
149 hackReset: true, 151 hackReset: true,
@@ -269,8 +271,12 @@ export default { @@ -269,8 +271,12 @@ export default {
269 }, 271 },
270 visConfig() { 272 visConfig() {
271 this.options.vis = this.optionsSetUp.vis; 273 this.options.vis = this.optionsSetUp.vis;
272 - this.pageSize = this.options.vis;  
273 - this.handleTableData(); 274 + if(this.optionsData.dynamicData && this.optionsData.dynamicData.contextData.isMore==true){
  275 + this.pageSizeAll=30;
  276 + }else{
  277 + this.pageSize = this.options.vis;
  278 + this.handleTableData();
  279 + }
274 280
275 }, 281 },
276 handlerRollFn() { 282 handlerRollFn() {
@@ -298,6 +304,7 @@ export default { @@ -298,6 +304,7 @@ export default {
298 this.list = data; 304 this.list = data;
299 this.listAll=data; 305 this.listAll=data;
300 this.loading = false; 306 this.loading = false;
  307 + this.loadingAll = false;
301 }, 308 },
302 handlerDynamicData(data, refreshTime) { 309 handlerDynamicData(data, refreshTime) {
303 if (!data) return; 310 if (!data) return;
@@ -313,22 +320,23 @@ export default { @@ -313,22 +320,23 @@ export default {
313 getEchartData(val) { 320 getEchartData(val) {
314 const data = this.queryEchartsData(val); 321 const data = this.queryEchartsData(val);
315 data.then(res => { 322 data.then(res => {
316 - // if(this.optionsData.dynamicData.contextData.isMore){  
317 - // console.log("all")  
318 - // this.listAll=res;  
319 - // this.loadingAll = false;  
320 - // this.loading = false;  
321 - // if (this.listAll && this.listAll.length > 0) {  
322 - // this.totalAll = this.listAll[0].lineCount;  
323 - // }  
324 - // }else{ 323 + console.log("&&&&&&&",this.optionsData.dynamicData.contextData.isMore)
  324 + if(this.optionsData.dynamicData.contextData.isMore==true){
  325 + console.log("all")
  326 + this.listAll=res;
  327 + this.loadingAll = false;
  328 + this.loading = false;
  329 + if (this.listAll && this.listAll.length > 0) {
  330 + this.totalAll = this.listAll[0].lineCount;
  331 + }
  332 + }else{
325 this.list = res; 333 this.list = res;
326 this.loading = false; 334 this.loading = false;
327 this.loadingAll = false; 335 this.loadingAll = false;
328 if (this.list && this.list.length > 0) { 336 if (this.list && this.list.length > 0) {
329 this.total = this.list[0].lineCount; 337 this.total = this.list[0].lineCount;
330 } 338 }
331 - // } 339 + }
332 340
333 341
334 this.hackResetFun(); 342 this.hackResetFun();
@@ -459,27 +467,59 @@ export default { @@ -459,27 +467,59 @@ export default {
459 window.parent.postMessage(param, '*') 467 window.parent.postMessage(param, '*')
460 } 468 }
461 }, 469 },
  470 + // 每页展示多少条
  471 + handleSizeChangeMore(val) {
  472 + // 切换页码重置初始页
  473 + this.currentPageAll = 1
  474 + //props.pageSize = val;
  475 + this.pageSizeAll = val;
  476 + this.handlerDetailDataMore();
  477 + },
  478 +
  479 + // 切换页码
  480 + handleCurrentChangeMore(val) {
  481 + this.currentPageAll = val;
  482 + this.handlerDetailDataMore();
  483 + },
  484 + // 切换页码
  485 + prePageMore(val) {
  486 + this.currentPageAll = val;
  487 + this.handlerDetailDataMore();
  488 + },
  489 +
  490 + // 切换页码
  491 + nextPageMore(val) {
  492 + this.currentPageAll = val;
  493 + this.handlerDetailDataMore();
  494 + },
462 //更多 495 //更多
463 handlerDetailDataNoPage(){ 496 handlerDetailDataNoPage(){
464 this.widthStyle=''; 497 this.widthStyle='';
465 this.tableVisible=true; 498 this.tableVisible=true;
466 let optionsData = this.optionsData; 499 let optionsData = this.optionsData;
467 if (this.optionsData.dataType == "dynamicData" ) { 500 if (this.optionsData.dataType == "dynamicData" ) {
468 - this.loadingAll= true;  
469 - let limit = 30;  
470 - let page = parseInt(this.currentPage - 1) * limit;  
471 - //改变参数值-月季度年，重新加载动态数据--待测  
472 - this.optionsData.dynamicData.contextData.page = page;  
473 - this.optionsData.dynamicData.contextData.limit = 30;  
474 - this.optionsData.dynamicData.contextData.isMore = true;  
475 - // this.handlerData(); 501 + this.currentPageAll=1;
  502 + this.handlerDetailDataMore();
476 } 503 }
477 }, 504 },
  505 + handlerDetailDataMore(){
  506 + this.loadingAll= true;
  507 + let limit = 30;
  508 + let page = parseInt(this.currentPageAll - 1) * limit;
  509 + //改变参数值-月季度年，重新加载动态数据--待测
  510 + this.optionsData.dynamicData.contextData.page = page;
  511 + this.optionsData.dynamicData.contextData.limit = 30;
  512 + this.optionsData.dynamicData.contextData.isMore = true;
  513 + },
478 //更多弹框关闭确定 514 //更多弹框关闭确定
479 hideDialogTable(){ 515 hideDialogTable(){
480 this.tableVisible=false; 516 this.tableVisible=false;
481 - this.loading=false; 517 + // this.loading=false;
482 this.loadingAll=false; 518 this.loadingAll=false;
  519 + this.currentPageAll=1;
  520 + /* if (this.optionsData.dataType == "dynamicData" ) {
  521 + this.optionsData.dynamicData.contextData.isMore = false;
  522 + }*/
483 }, 523 },
484 okFuncTable(){ 524 okFuncTable(){
485 this.tableVisible=false; 525 this.tableVisible=false;
1 -<template>  
2 - <div :style="styleObj" class="treeContainer">  
3 - <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="optionsSetup.isType">  
4 - <el-tab-pane label="业务" name="first"></el-tab-pane>  
5 - <el-tab-pane label="资源" name="second"></el-tab-pane>  
6 - </el-tabs>  
7 - <el-tree :style="textStyle" class="tree-div" ref="roleTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"  
8 - node-key="id" :default-checked-keys="checkedKeys"  
9 - />  
10 - </div>  
11 -</template>  
12 -  
13 -<script>  
14 -var per = 60;  
15 -export default {  
16 - name: "progressInformation",  
17 - components: {},  
18 - props: {  
19 - value: Object,  
20 - ispreview: Boolean  
21 - },  
22 - data() {  
23 - return {  
24 - activeName:'first',  
25 - defaultProps : {  
26 - children: 'children',  
27 - label: 'label',  
28 - },  
29 - treeData: [], // 所有的树结点  
30 - checkedKeys: [], // 当前选中的keys  
31 -  
32 - optionsStyle: {}, // 样式  
33 - optionsData: {}, // 数据  
34 - optionsCollapse: {}, // 图标属性  
35 - optionsSetup: {}  
36 - };  
37 - },  
38 - computed: {  
39 - styleObj() {  
40 - return {  
41 - position: this.ispreview ? "absolute" : "static",  
42 - width: this.optionsStyle.width + "px",  
43 - height: this.optionsStyle.height + "px",  
44 - left: this.optionsStyle.left + "px",  
45 - top: this.optionsStyle.top + "px",  
46 - background: this.optionsSetup.background,  
47 - 'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none',  
48 - 'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none'  
49 - };  
50 - },  
51 - //文字样式设置  
52 - textStyle(){  
53 - return{  
54 - 'text-align':this.optionsSetup.textAlign,  
55 - 'font-size':this.optionsSetup.titleFontSize+'px',  
56 - color: this.optionsSetup.titleColor,  
57 - 'font-weight': this.optionsSetup.titleFontWeight  
58 - }  
59 - }  
60 - },  
61 - watch: {  
62 - value: {  
63 - handler(val) {  
64 - this.optionsStyle = val.position;  
65 - this.optionsData = val.data;  
66 - this.optionsCollapse = val.collapse;  
67 - this.optionsSetup = val.setup;  
68 - this.editorOptions();  
69 - },  
70 - deep: true  
71 - }  
72 - },  
73 - created() {  
74 - this.optionsStyle = this.value.position;  
75 - this.optionsData = this.value.data;  
76 - this.optionsCollapse = this.value.collapse;  
77 - this.optionsSetup = this.value.setup;  
78 - this.editorOptions();  
79 - },  
80 - mounted() {  
81 -  
82 - },  
83 - methods: {  
84 - handleClick(tab,event){  
85 - this.handleTableData();  
86 - },  
87 - handleNodeClick(data){  
88 - console.log(data);  
89 - this.$store.commit('CHANGE_TREE',data)  
90 - },  
91 - editorOptions() {  
92 - this.setOptionsData();  
93 - },  
94 - //切换类型获取树结构数据  
95 - handleTableData() {  
96 - if (this.optionsData.dataType == "dynamicData" && this.optionsSetUp.isType) {  
97 - //改变参数值-类型  
98 - this.optionsData.dynamicData.contextData.type = this.activeName;  
99 - }  
100 - },  
101 - // 数据解析  
102 - setOptionsData() {  
103 - const optionsData = this.optionsData; // 数据类型 静态 or 动态  
104 - optionsData.dataType == "staticData"  
105 - ? this.staticDataFn(optionsData.staticData)  
106 - : this.dynamicDataFn(  
107 - optionsData.dynamicData,  
108 - optionsData.refreshTime  
109 - );  
110 - },  
111 - staticDataFn(val) {  
112 - if(val && val.length>0) {  
113 - this.treeData=val;  
114 - }  
115 -  
116 - },  
117 - dynamicDataFn(val, refreshTime) {  
118 - if (!val) return;  
119 - if (this.ispreview) {  
120 - this.getEchartData(val);  
121 - this.flagInter = setInterval(() => {  
122 - this.getEchartData(val);  
123 - }, refreshTime);  
124 - } else {  
125 - this.getEchartData(val);  
126 - }  
127 - },  
128 - getEchartData(val) {  
129 - const data = this.queryEchartsData(val);  
130 - data.then(res => {  
131 - if(res && res.length>0){  
132 - this.treeData=res;  
133 - }  
134 - });  
135 - },  
136 - }  
137 -};  
138 -</script>  
139 -  
140 -<style scoped lang="scss">  
141 -.treeContainer{  
142 - padding:10px;  
143 -}  
144 -.tree-div{  
145 - height:100%;  
146 - width:100%;  
147 -}  
148 -</style>