统计展开更多

src/pages/stat/list/index.vue

@@ -93,7 +93,7 @@
                     <div class="m-b-20 text-right">
                         <el-button type="primary" size="small" @click="exportDatabaseByMonth" v-auth="'/stat/list:月份统计导出'">导出数据</el-button>
                     </div>
-
+                    <div :class="['chart', 'chart' + i]" :id="'chart' + i" v-for="i in yearLen" :key="i"></div>
                     <el-table :data="monthData" class="table" stripe header-align="center" row-key="id" :span-method="objectSpanMethod" @selection-change="handleSelectionChange1">
                         <el-table-column type="selection" width="80" align="center"></el-table-column>
                         <el-table-column prop="year" width="80" label="年份" align="center"></el-table-column>
@@ -115,7 +115,12 @@
                         <el-table-column prop="11" label="11月" align="center"></el-table-column>
                         <el-table-column prop="12" label="12月" align="center"></el-table-column>
                     </el-table>
-                    <div class="chart" :id="'chart' + i" v-for="i in yearLen" :key="i"></div>
+                    <div class="fold" v-if="monthDataOri.length > 9">
+                        <span :class="{active: showCharts}" @click="toggleCharts">
+                            展开更多
+                            <i class="el-icon-arrow-down"></i>
+                        </span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -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;
@@ -570,9 +599,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{