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

init
wangxi 4 years ago
parent 28ba461c68
commit 7b721d46f7

@ -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;

Loading…
Cancel
Save