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{