From 7b721d46f73e73f44398d94c47bced155279ac17 Mon Sep 17 00:00:00 2001
From: wangxi <982339955@qq.com>
Date: Thu, 2 Sep 2021 14:10:57 +0800
Subject: [PATCH] =?UTF-8?q?[mod]=E8=B6=85=E8=9E=8D=E5=90=88-=E9=80=89?=
 =?UTF-8?q?=E7=A7=91=E7=BB=9F=E8=AE=A1=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../educationalWisdom/CourseStatisticsBig.vue | 123 +++++++++---------
 1 file changed, 62 insertions(+), 61 deletions(-)

diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/educationalWisdom/CourseStatisticsBig.vue b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/educationalWisdom/CourseStatisticsBig.vue
index 88bed62..860dbd5 100644
--- a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/educationalWisdom/CourseStatisticsBig.vue
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/educationalWisdom/CourseStatisticsBig.vue
@@ -30,62 +30,25 @@
                             <span>校本课程类别：<span class="textColor">{{type_count}}</span></span>
                         </div>
                     </div>
-                    <ul class="bottom">
-                        <li class="width3">
-                            <div class="up">
-                                <img src="./image/blueBook.svg" class="img2"/>
-                                <span>科技</span>
-                            </div>
-                            <div class="down">
-                                45
-                            </div>
-                        </li>
-                        <li class="width3">
-                            <div class="up">
-                                <img src="./image/blueBook.svg" class="img2"/>
-                                <span>体育</span>
-                            </div>
-                            <div class="down">
-                                15
-                            </div>
-                        </li>
-                        <li class="width3">
-                            <div class="up">
-                                <img src="./image/blueBook.svg" class="img2"/>
-                                <span>艺术</span>
-                            </div>
-                            <div class="down">
-                                25
-                            </div>
-                        </li>
-                        <li class="width3">
-                            <div class="up">
-                                <img src="./image/blueBook.svg" class="img2"/>
-                                <span>创客</span>
-                            </div>
-                            <div class="down">
-                                45
-                            </div>
-                        </li>
-                        <li class="width3">
-                            <div class="up">
-                                <img src="./image/blueBook.svg" class="img2"/>
-                                <span>美术</span>
-                            </div>
-                            <div class="down">
-                                35
-                            </div>
-                        </li>
-                        <li class="width3">
-                            <div class="up">
-                                <img src="./image/blueBook.svg" class="img2"/>
-                                <span>体育</span>
-                            </div>
-                            <div class="down">
-                                40
+                    <div class="bottom">
+                        <div style="height:100%;width: 2rem;float:left;position: relative">
+                            <img src="./image/u12928.svg" style="cursor:pointer;transform: rotate(180deg);position: absolute;top:50%;margin-top: -2rem" @click="leftClick"/>
+                        </div>
+                        <div style="float:left;padding:0;width:calc(100% - 4rem);">
+                            <div v-if="listFlag" class="width3" v-for="(item,_index) in subjectList[num]" :key="_index">
+                                <div class="up">
+                                    <img src="./image/blueBook.svg" class="img2"/>
+                                    <div class="text" :title="item.name"> {{item.name}}</div>
+                                </div>
+                                <div class="down">
+                                    {{item.count}}
+                                </div>
                             </div>
-                        </li>
-                    </ul>
+                        </div>
+                        <div style="height:100%;width: 2rem;float:left;position: relative">
+                            <img src="./image/u12928.svg" style="cursor:pointer;position: absolute;top:50%;margin-top: -2rem" @click="rightClick"/>
+                        </div>
+                    </div>
                 </div>
             </a-tab-pane>
         </a-tabs>
@@ -106,12 +69,14 @@
         data() {
             return {
                 bar_flag:false,
+                listFlag:false,
                 courseStatisticsBig: {
                     xAxisData:[],
                     style: {
                         height: ''
                     },
                     list:[],
+
                     isType:"manyBar",
                     legendData:[],
                     seriesData:[],
@@ -119,7 +84,9 @@
                     yAxisName:"课程总数"
                 },
                 course_count:"",
-                type_count:""
+                type_count:"",
+                subjectList:[],
+                num:0,
             }
         },
         created() {
@@ -130,6 +97,18 @@
             this.getCourseStatistics();
         },
         methods: {
+            rightClick(){
+                if(this.num+1<this.subjectList.length){
+                    this.num++;
+                }
+            },
+            leftClick(){
+                if(this.num<=0){
+                    this.num=0
+                }else{
+                    this.num--
+                }
+            },
             callback(key) {
                 this.StageId=key;
                 this.bar_flag=false;
@@ -179,23 +158,32 @@
                         let groupIndex=[];
                         let series=[];
                         let dom=[];
+                        let totalList=[];
                         if(data.list.length!==0){
                             data.list[0].list.forEach((item)=>{
                                 dom.push(item.xaxis);
                             });
                             data.list.forEach((itemIn)=>{
                                 let count=[];
+                                let _total=0;
                                 groupIndex.push(itemIn.group_index);
                                 itemIn.list.forEach((Item,)=>{
-                                    count.push(Item.count)
+                                    count.push(Item.count);
+                                    _total+=parseInt(Item.count);
                                 });
+                                totalList.push({name:itemIn.group_index,count:_total});
                                 series.push({name:itemIn.group_index,type:"bar",stack:"111",barMaxWidth: '20', data:count })
-                            })
+                            });
+                            this.listFlag=true;
+                            for(var i=0,len=totalList.length;i<len;i+=6){
+                                this.subjectList.push(totalList.slice(i,i+6));
+                            }
                         }
                         this.courseStatisticsBig.xAxisData=dom;
                         this.courseStatisticsBig.legendData=groupIndex;
                         this.courseStatisticsBig.seriesData=series;
 
+
                     }
                 })
             },
@@ -263,11 +251,24 @@
             }
 
             .bottom {
+
                 height: 19rem;
+                .text{
+                    height:30px;
+                    line-height: 30px;
+                    display: inline-block;
+                    width: calc(100% - 30px - 1rem);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    vertical-align: middle;
+                    cursor: pointer;
+                }
                 .img2 {
-                    width: 30px;
-                    height: 30px;
-                    margin-right: 1rem;
+                    width: 25px;
+                    height: 25px;
+                    margin: 0 5px;
+                    display: inline-block;
                 }
                 .width3 {
                     list-style: none;