From ddb32b4fb4abc5d8200a5a33401b0441e5aa2d4a Mon Sep 17 00:00:00 2001
From: lushangqing <lushangqing@honggroup.com.cn>
Date: Tue, 12 Apr 2022 17:04:08 +0800
Subject: [PATCH] 分页表格更多功能，水球样式调整
---
report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-custom-liquid-Fill-chart.js | 2 +-
report-ui/src/views/report/bigscreen/designer/widget/monitor/customBarLineChart.vue | 2 +-
report-ui/src/views/report/bigscreen/designer/widget/monitor/customLineTrend.vue | 2 +-
report-ui/src/views/report/bigscreen/designer/widget/monitor/customLiquidFillChart.vue | 32 ++++++++++++++++++++------------
report-ui/src/views/report/bigscreen/designer/widget/monitor/tablePage.vue | 98 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------
report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape1.vue | 148 ----------------------------------------------------------------------------------------------------------------------------------------------------
6 files changed, 92 insertions(+), 192 deletions(-)
delete mode 100644 report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape1.vue
diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-custom-liquid-Fill-chart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-custom-liquid-Fill-chart.js
index 5b1fe2b..1a11a88 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-custom-liquid-Fill-chart.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-custom-liquid-Fill-chart.js
@@ -358,7 +358,7 @@ export const monitorCustomLiquidFillChart = {
required: false,
placeholder: '',
relactiveDom: 'dataType',
- chartType: 'widget-piechart',
+ chartType: 'widget-table',
dictKey: 'TEXT_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/monitor/customBarLineChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customBarLineChart.vue
index 1f4c537..4c12329 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/customBarLineChart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customBarLineChart.vue
@@ -142,7 +142,7 @@ export default {
if(this.optionsData.dataType=="dynamicData"){
//改变参数值-月季度年，重新加载动态数据--待测
this.optionsData.dynamicData.contextData.time=val;
- this.editorOptions();
+ // this.editorOptions();
}
}
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLineTrend.vue b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLineTrend.vue
index 18c3954..052b541 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLineTrend.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLineTrend.vue
@@ -98,7 +98,7 @@ export default {
if(this.optionsData.dataType=="dynamicData"){
//改变参数值-月季度年，重新加载动态数据--待测
this.optionsData.dynamicData.contextData.dataScope=val;
- this.editorOptions();
+ // this.editorOptions();
}
}
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLiquidFillChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLiquidFillChart.vue
index b9580c5..303494f 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLiquidFillChart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLiquidFillChart.vue
@@ -37,9 +37,9 @@ export default {
return {
// topStyle:'',//水波纹的大小
fillData:[],//数据
- topNum:0,//水波纹的大小
- nums:0,
- options: {
+ // topNum:0,//水波纹的大小
+ // nums:0,
+ /* options: {
title: {
text: '{nums|' + per + '}{percent|%}',
x: 'center',
@@ -113,7 +113,7 @@ export default {
}
}
],
- },
+ },*/
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
@@ -254,13 +254,13 @@ export default {
);
},
staticDataFn(val) {
- const title = this.options.title;
- const num = val[0]['num'];
+ // const title = this.options.title;
+ // const num = val[0]['num'];
if(val && val.length>0) {
this.fillData=val;
}
- this.nums = num ;
- this.topNum=100-num;
+ // this.nums = num ;
+ // this.topNum=100-num;
},
topStyle(val){
@@ -283,12 +283,20 @@ export default {
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
+ if(res && res.object) {
+ if(typeof res.object=='object'){
+ let arr=[];
+ for(let key in res.object){
+ arr.push({num:res.object})
+ }
+ this.fillData=arr;
+
+ }else{
+ this.fillData=[res.object];
- this.nums = res[0].value ;
- if(res && res.length>0){
- this.fillData=res;
+ }
}
- this.topNum=100-this.nums;
+
});
},
}
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/monitor/tablePage.vue b/report-ui/src/views/report/bigscreen/designer/widget/monitor/tablePage.vue
index ad3fc2b..f05355b 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/tablePage.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/tablePage.vue
@@ -75,7 +75,7 @@
</div>
</div>
<!--数据-->
- <div class="bd" v-loading="loadingAll">
+ <div class="bd1" v-loading="loadingAll">
<ul class="infoList">
<li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" >
<div
@@ -102,14 +102,14 @@
<!-- 分页 -->
<div class="pageClass" v-if="optionsSetUp.isPage && !optionsSetUp.isRoll" 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"
+ v-if="currentPageAll"
+ @size-change="handleSizeChangeMore"
+ @prev-click="prePageMore"
+ @next-click="nextPageMore"
+ @current-change="handleCurrentChangeMore"
+ :current-page="currentPageAll"
:page-sizes="pageSizes"
- :page-size="pageSize"
+ :page-size="pageSizeAll"
:total="totalAll">
</el-pagination>
</div>
@@ -144,6 +144,8 @@ export default {
currentPage:1,
pageSize:10,
pageSizes:[10,50,100, 200, 300, 400],
+ currentPageAll:1,
+ pageSizeAll:10,
total:0,
totalAll:0,
hackReset: true,
@@ -269,8 +271,12 @@ export default {
},
visConfig() {
this.options.vis = this.optionsSetUp.vis;
- this.pageSize = this.options.vis;
- this.handleTableData();
+ if(this.optionsData.dynamicData && this.optionsData.dynamicData.contextData.isMore==true){
+ this.pageSizeAll=30;
+ }else{
+ this.pageSize = this.options.vis;
+ this.handleTableData();
+ }
},
handlerRollFn() {
@@ -298,6 +304,7 @@ export default {
this.list = data;
this.listAll=data;
this.loading = false;
+ this.loadingAll = false;
},
handlerDynamicData(data, refreshTime) {
if (!data) return;
@@ -313,22 +320,23 @@ export default {
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
- // if(this.optionsData.dynamicData.contextData.isMore){
- // console.log("all")
- // this.listAll=res;
- // this.loadingAll = false;
- // this.loading = false;
- // if (this.listAll && this.listAll.length > 0) {
- // this.totalAll = this.listAll[0].lineCount;
- // }
- // }else{
+ console.log("&&&&&&&",this.optionsData.dynamicData.contextData.isMore)
+ if(this.optionsData.dynamicData.contextData.isMore==true){
+ console.log("all")
+ this.listAll=res;
+ this.loadingAll = false;
+ this.loading = false;
+ if (this.listAll && this.listAll.length > 0) {
+ this.totalAll = this.listAll[0].lineCount;
+ }
+ }else{
this.list = res;
this.loading = false;
this.loadingAll = false;
if (this.list && this.list.length > 0) {
this.total = this.list[0].lineCount;
}
- // }
+ }
this.hackResetFun();
@@ -459,27 +467,59 @@ export default {
window.parent.postMessage(param, '*')
}
},
+ // 每页展示多少条
+ handleSizeChangeMore(val) {
+ // 切换页码重置初始页
+ this.currentPageAll = 1
+ //props.pageSize = val;
+ this.pageSizeAll = val;
+ this.handlerDetailDataMore();
+ },
+
+ // 切换页码
+ handleCurrentChangeMore(val) {
+ this.currentPageAll = val;
+ this.handlerDetailDataMore();
+ },
+ // 切换页码
+ prePageMore(val) {
+ this.currentPageAll = val;
+ this.handlerDetailDataMore();
+ },
+
+ // 切换页码
+ nextPageMore(val) {
+ this.currentPageAll = val;
+ this.handlerDetailDataMore();
+ },
//更多
handlerDetailDataNoPage(){
this.widthStyle='';
this.tableVisible=true;
let optionsData = this.optionsData;
if (this.optionsData.dataType == "dynamicData" ) {
- this.loadingAll= true;
- let limit = 30;
- let page = parseInt(this.currentPage - 1) * limit;
- //改变参数值-月季度年，重新加载动态数据--待测
- this.optionsData.dynamicData.contextData.page = page;
- this.optionsData.dynamicData.contextData.limit = 30;
- this.optionsData.dynamicData.contextData.isMore = true;
- // this.handlerData();
+ this.currentPageAll=1;
+ this.handlerDetailDataMore();
}
},
+ handlerDetailDataMore(){
+ this.loadingAll= true;
+ let limit = 30;
+ let page = parseInt(this.currentPageAll - 1) * limit;
+ //改变参数值-月季度年，重新加载动态数据--待测
+ this.optionsData.dynamicData.contextData.page = page;
+ this.optionsData.dynamicData.contextData.limit = 30;
+ this.optionsData.dynamicData.contextData.isMore = true;
+ },
//更多弹框关闭确定
hideDialogTable(){
this.tableVisible=false;
- this.loading=false;
+ // this.loading=false;
this.loadingAll=false;
+ this.currentPageAll=1;
+ /* if (this.optionsData.dataType == "dynamicData" ) {
+ this.optionsData.dynamicData.contextData.isMore = false;
+ }*/
},
okFuncTable(){
this.tableVisible=false;
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape1.vue b/report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape1.vue
deleted file mode 100644
index 666562b..0000000
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape1.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
- <div :style="styleObj" class="treeContainer">
- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="optionsSetup.isType">
- <el-tab-pane label="业务" name="first"></el-tab-pane>
- <el-tab-pane label="资源" name="second"></el-tab-pane>
- </el-tabs>
- <el-tree :style="textStyle" class="tree-div" ref="roleTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
- node-key="id" :default-checked-keys="checkedKeys"
- />
- </div>
-</template>
-
-<script>
-var per = 60;
-export default {
- name: "progressInformation",
- components: {},
- props: {
- value: Object,
- ispreview: Boolean
- },
- data() {
- return {
- activeName:'first',
- defaultProps : {
- children: 'children',
- label: 'label',
- },
- treeData: [], // 所有的树结点
- checkedKeys: [], // 当前选中的keys
-
- optionsStyle: {}, // 样式
- optionsData: {}, // 数据
- optionsCollapse: {}, // 图标属性
- optionsSetup: {}
- };
- },
- computed: {
- styleObj() {
- return {
- position: this.ispreview ? "absolute" : "static",
- width: this.optionsStyle.width + "px",
- height: this.optionsStyle.height + "px",
- left: this.optionsStyle.left + "px",
- top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background,
- 'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none',
- 'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none'
- };
- },
- //文字样式设置
- textStyle(){
- return{
- 'text-align':this.optionsSetup.textAlign,
- 'font-size':this.optionsSetup.titleFontSize+'px',
- color: this.optionsSetup.titleColor,
- 'font-weight': this.optionsSetup.titleFontWeight
- }
- }
- },
- watch: {
- value: {
- handler(val) {
- this.optionsStyle = val.position;
- this.optionsData = val.data;
- this.optionsCollapse = val.collapse;
- this.optionsSetup = val.setup;
- this.editorOptions();
- },
- deep: true
- }
- },
- created() {
- this.optionsStyle = this.value.position;
- this.optionsData = this.value.data;
- this.optionsCollapse = this.value.collapse;
- this.optionsSetup = this.value.setup;
- this.editorOptions();
- },
- mounted() {
-
- },
- methods: {
- handleClick(tab,event){
- this.handleTableData();
- },
- handleNodeClick(data){
- console.log(data);
- this.$store.commit('CHANGE_TREE',data)
- },
- editorOptions() {
- this.setOptionsData();
- },
- //切换类型获取树结构数据
- handleTableData() {
- if (this.optionsData.dataType == "dynamicData" && this.optionsSetUp.isType) {
- //改变参数值-类型
- this.optionsData.dynamicData.contextData.type = this.activeName;
- }
- },
- // 数据解析
- setOptionsData() {
- const optionsData = this.optionsData; // 数据类型 静态 or 动态
- optionsData.dataType == "staticData"
- ? this.staticDataFn(optionsData.staticData)
- : this.dynamicDataFn(
- optionsData.dynamicData,
- optionsData.refreshTime
- );
- },
- staticDataFn(val) {
- if(val && val.length>0) {
- this.treeData=val;
- }
-
- },
- dynamicDataFn(val, refreshTime) {
- if (!val) return;
- if (this.ispreview) {
- this.getEchartData(val);
- this.flagInter = setInterval(() => {
- this.getEchartData(val);
- }, refreshTime);
- } else {
- this.getEchartData(val);
- }
- },
- getEchartData(val) {
- const data = this.queryEchartsData(val);
- data.then(res => {
- if(res && res.length>0){
- this.treeData=res;
- }
- });
- },
- }
-};
-</script>
-
-<style scoped lang="scss">
-.treeContainer{
- padding:10px;
-}
-.tree-div{
- height:100%;
- width:100%;
-}
-</style>
--
libgit2 0.24.0