diff --git a/src/pages/stat/list/index.vue b/src/pages/stat/list/index.vue index 66053d8..7961775 100644 --- a/src/pages/stat/list/index.vue +++ b/src/pages/stat/list/index.vue @@ -93,7 +93,7 @@
导出数据
- +
@@ -115,7 +115,12 @@ -
+
+ + 展开更多 + + +
@@ -149,7 +154,11 @@ export default { initShowLen: 5, // 按数据库统计使用概况默认展示的数据条数 multipleSelection: [], yearLen: 0, + showCharts: false, + monthDataOri: [], // 总的月份数据,用于展开更多切换 monthData: [], + chartList: {}, + chartListOri: {}, multipleSelection1: [], active: false } @@ -227,10 +236,13 @@ export default { result.push(item) } } - this.yearLen = len - this.monthData = result + this.yearLen = len > 3 ? 3 : len // 默认最多显示3条,通过展开更多来切换,展开的时候再去改变这个值 + this.monthData = result.slice(0, 9) + this.monthDataOri = result + this.chartList = list + this.chartListOri = list this.$nextTick(() => { - this.initChart(list) + this.initChart() }) }).catch(res => {}) // 查询本校累计用户数量 @@ -244,7 +256,8 @@ export default { this.getDatabase() }, // 按月份统计数据库使用概况图表 - initChart(list){ + initChart(){ + const list = this.chartList const seriesList = [] // 生成series for (let i in list) { @@ -332,8 +345,8 @@ export default { show: false }, grid: { - left: '3%', - right: '4%', + left: '2%', + right: '-4%', bottom: '3%', containLabel: true }, @@ -429,6 +442,21 @@ export default { }).then((res) => { util.downloadFileDirect(`按月份统计数据库使用概况.xls`,new Blob([res.data])) }).catch(res => {}) + }, + // 按月份统计数据库使用概况展开更多 + toggleCharts() { + if (this.showCharts) { + this.monthData = this.monthDataOri.slice(0, 9) + this.yearLen = 3 + } else { + this.monthData = JSON.parse(JSON.stringify(this.monthDataOri)) + this.yearLen = this.monthDataOri.length / 3 + this.chartList = JSON.parse(JSON.stringify(this.chartListOri)) + this.$nextTick(() => { + this.initChart() + }) + } + this.showCharts = !this.showCharts } } }; @@ -506,6 +534,7 @@ export default { max-width: calc(100% - 250px); } .page{ + position: relative; margin-bottom: 20px; .arrow{ cursor: pointer; @@ -572,9 +601,39 @@ export default { } } .chart{ - width: calc(100% - 180px); + z-index: 2; + position: absolute !important; + top: 154px; + width: calc(100% - 272px); height: 132px; - margin: -132px 0 0 240px; + margin-left: 240px; + } + .chart2{ + top: 286px; + } + .chart3{ + top: 416px; + } + .chart4{ + top: 546px; + } + .chart5{ + top: 676px; + } + .fold{ + margin-top: 20px; + text-align: center; + font-size: 12px; + color: #006EFF; + span{ + cursor: pointer; + i{ + transition: .5s; + } + &.active i{ + transform: rotate(180deg); + } + } } } .fold{