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