[mod]超融合-选科统计切换

init
wangxi 4 years ago
parent 28ba461c68
commit 7b721d46f7

@ -30,62 +30,25 @@
<span>校本课程类别<span class="textColor">{{type_count}}</span></span> <span>校本课程类别<span class="textColor">{{type_count}}</span></span>
</div> </div>
</div> </div>
<ul class="bottom"> <div class="bottom">
<li class="width3"> <div style="height:100%;width: 2rem;float:left;position: relative">
<div class="up"> <img src="./image/u12928.svg" style="cursor:pointer;transform: rotate(180deg);position: absolute;top:50%;margin-top: -2rem" @click="leftClick"/>
<img src="./image/blueBook.svg" class="img2"/>
<span>科技</span>
</div> </div>
<div class="down"> <div style="float:left;padding:0;width:calc(100% - 4rem);">
45 <div v-if="listFlag" class="width3" v-for="(item,_index) in subjectList[num]" :key="_index">
</div>
</li>
<li class="width3">
<div class="up"> <div class="up">
<img src="./image/blueBook.svg" class="img2"/> <img src="./image/blueBook.svg" class="img2"/>
<span>体育</span> <div class="text" :title="item.name"> {{item.name}}</div>
</div> </div>
<div class="down"> <div class="down">
15 {{item.count}}
</div> </div>
</li>
<li class="width3">
<div class="up">
<img src="./image/blueBook.svg" class="img2"/>
<span>艺术</span>
</div>
<div class="down">
25
</div> </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> </div>
</li> <div style="height:100%;width: 2rem;float:left;position: relative">
<li class="width3"> <img src="./image/u12928.svg" style="cursor:pointer;position: absolute;top:50%;margin-top: -2rem" @click="rightClick"/>
<div class="up">
<img src="./image/blueBook.svg" class="img2"/>
<span>体育</span>
</div> </div>
<div class="down">
40
</div> </div>
</li>
</ul>
</div> </div>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
@ -106,12 +69,14 @@
data() { data() {
return { return {
bar_flag:false, bar_flag:false,
listFlag:false,
courseStatisticsBig: { courseStatisticsBig: {
xAxisData:[], xAxisData:[],
style: { style: {
height: '' height: ''
}, },
list:[], list:[],
isType:"manyBar", isType:"manyBar",
legendData:[], legendData:[],
seriesData:[], seriesData:[],
@ -119,7 +84,9 @@
yAxisName:"课程总数" yAxisName:"课程总数"
}, },
course_count:"", course_count:"",
type_count:"" type_count:"",
subjectList:[],
num:0,
} }
}, },
created() { created() {
@ -130,6 +97,18 @@
this.getCourseStatistics(); this.getCourseStatistics();
}, },
methods: { methods: {
rightClick(){
if(this.num+1<this.subjectList.length){
this.num++;
}
},
leftClick(){
if(this.num<=0){
this.num=0
}else{
this.num--
}
},
callback(key) { callback(key) {
this.StageId=key; this.StageId=key;
this.bar_flag=false; this.bar_flag=false;
@ -179,23 +158,32 @@
let groupIndex=[]; let groupIndex=[];
let series=[]; let series=[];
let dom=[]; let dom=[];
let totalList=[];
if(data.list.length!==0){ if(data.list.length!==0){
data.list[0].list.forEach((item)=>{ data.list[0].list.forEach((item)=>{
dom.push(item.xaxis); dom.push(item.xaxis);
}); });
data.list.forEach((itemIn)=>{ data.list.forEach((itemIn)=>{
let count=[]; let count=[];
let _total=0;
groupIndex.push(itemIn.group_index); groupIndex.push(itemIn.group_index);
itemIn.list.forEach((Item,)=>{ 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 }) 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.xAxisData=dom;
this.courseStatisticsBig.legendData=groupIndex; this.courseStatisticsBig.legendData=groupIndex;
this.courseStatisticsBig.seriesData=series; this.courseStatisticsBig.seriesData=series;
} }
}) })
}, },
@ -263,11 +251,24 @@
} }
.bottom { .bottom {
height: 19rem; height: 19rem;
.img2 { .text{
width: 30px;
height:30px; height:30px;
margin-right: 1rem; 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: 25px;
height: 25px;
margin: 0 5px;
display: inline-block;
} }
.width3 { .width3 {
list-style: none; list-style: none;

Loading…
Cancel
Save