zhihuixiaoyuan2-ui/mine/pages/release/count.vue

<template>
    <view>
        <view class="count">
            <view class="left">
                <scroll-view :scroll-y="true" :scroll-with-animation="true"  :style="{ height: '100vh' }">
                    <view v-for="(item, index) in list" :key="index">
                        <view :class="['title', { act: item.val === currentNum }]" :id="index" @click="setId(item.val)">{{item.tit }}</view>
                    </view>
                </scroll-view>
            </view>
            <view class="right">
                <!-- 总分排名 -->
				<view class="flex0 pd">
					<view class="search mb15" v-if="currentNum==0||currentNum==1">
						<image :src="searimg"></image>
						<input placeholder="请输入学生姓名进行搜索" v-model="scoreDataName"/>
						<view class="btn" @click="getSearch">搜索</view>
					</view>
					<view class="mind_s flexc">
						
						<!-- 只有自己班级和全部班级 -->
						<!-- <picker range-key="dictLabel" :range="xlhealthrange"  :value="mindidx"  @change="bindDateChangea">
							<view class="flexc mind_sa">
								<view class="alldatain f15 cofe f500" >{{mind||'选择班级'}}</view>
								<image :src="upimg"></image>
							</view>
						</picker> -->
						<block v-if='currentNum==1'>
							<image :src="secm" class="mind_sl"></image>
							<picker range-key="dictLabel" :range="subjectlist"  :value="subidx"  @change="bindDateChanged">
								<view class="flexc mind_sa">
									<view class="alldatain f15 cofe f500" >{{xueke||'选择科目'}}</view>
									<image :src="upimg"></image>
								</view>
							</picker>
						</block>
						
						<view class="flex1"></view>
						<view class="ser_toa" v-if="currentNum==3">总分平均分：<text>{{avg}}</text>分</view>
					</view>
					
				</view>
				<!-- 列表 -->
				<view class="flex1 tab" v-if="currentNum==0">
					<view class="tab_top flexc">
						<view class="a topt w20">排名</view>
						<view class="a topt w30">姓名</view>
						<view class="a topt w25">总分</view>
						<view class="a topt w25">年级排名</view>
					</view>
					<view class="flex1 overa" v-if="gradeRank.length">
						<block v-for="(ite ,idx) in gradeRank" :key="idx">
							<view class="tab_tr" v-if="idx<3">
								<image :src="onebgimg" class="bgimg" v-if="idx==0"></image>
								<image :src="twobgimg" class="bgimg" v-if="idx==1"></image>
								<image :src="threebgimg" class="bgimg" v-if="idx==2"></image>
								<view class="a idx w20">
									<image :src="oneimg" v-if="idx==0"></image>
									<image :src="twoimg" v-if="idx==1"></image>
									<image :src="threeimg" v-if="idx==2"></image>
								</view>
								<view class="a tit w30" >{{ite.scoreDataName}}</view>
								<view class="a num w25">{{ite.zongfen}}</view>
								<view class="a num w25">{{ite.scoreSortGrade}}</view>
							</view>
							<view class="tab_tr bg1" v-if="idx>2">
								<view class="a idx w20">{{idx+1}}</view>
								<view class="a tit w30">{{ite.scoreDataName}}</view>
								<view class="a num w25">{{ite.zongfen}}</view>
								<view class="a num w25">{{ite.scoreSortGrade}}</view>
							</view>
						</block>
					</view>
					<view class="flex1 overa" v-else>
						<no-data></no-data>
					</view>
				</view>
				<!-- 科目排名 -->
				<view class="flex1 tab" v-if="currentNum==1">
					<view class="tab_top flexc">
						<view class="a topt w20">排名</view>
						<view class="a topt w50">姓名</view>
						<view class="a topt w30">{{xueke}}</view>
					</view>
					<view class="flex1 overa" v-if="xuekeRank.length">
						<block v-for="(ite ,idx) in xuekeRank" :key="idx">
							<view class="tab_tr" v-if="idx<3">
								<image :src="onebgimg" class="bgimg" v-if="idx==0"></image>
								<image :src="twobgimg" class="bgimg" v-if="idx==1"></image>
								<image :src="threebgimg" class="bgimg" v-if="idx==2"></image>
								<view class="a idx w20">
									<image :src="oneimg" v-if="idx==0"></image>
									<image :src="twoimg" v-if="idx==1"></image>
									<image :src="threeimg" v-if="idx==2"></image>
								</view>
								<view class="a tit w50" >{{ite.scoreDataName}}</view>
								<view class="a num w30">{{ite.score}}</view>
							</view>
							<view class="tab_tr bg1" v-if="idx>2">
								<view class="a idx w20">{{idx+1}}</view>
								<view class="a tit w50">{{ite.scoreDataName}}</view>
								<view class="a num w30">{{ite.score}}</view>
							</view>
						</block>
						
					</view>
					<view class="flex1 overa" v-else>
						<no-data></no-data>
					</view>
				</view>
				<!-- 班级排名 -->
				<view class="flex1 tab" v-if="currentNum==2">
					<view class="tab_top flexc">
						<view class="a topt w30">排名</view>
						<view class="a topt w70">班级</view>
					</view>
					<view class="flex1 overa" v-if="classRank.length">
						<block v-for="(ite ,idx) in classRank" :key="idx">
							<view class="tab_tr" v-if="idx<3">
								<image :src="onebgimg" class="bgimg" v-if="idx==0"></image>
								<image :src="twobgimg" class="bgimg" v-if="idx==1"></image>
								<image :src="threebgimg" class="bgimg" v-if="idx==2"></image>
								<view class="a idx w30">
									<image :src="oneimg" v-if="idx==0"></image>
									<image :src="twoimg" v-if="idx==1"></image>
									<image :src="threeimg" v-if="idx==2"></image>
								</view>
								<view class="a tit w70" >{{ite.scoreClassName}}</view>
							</view>
							<view class="tab_tr bg1" v-if="idx>2">
								<view class="a idx w30">{{idx+1}}</view>
								<view class="a tit w70">{{ite.scoreClassName}}</view>
							</view>
						</block>
					</view>
					<view class="flex1 overa" v-else>
						<no-data></no-data>
					</view>
				</view>
				<!-- 平均分统计 -->
				<!-- 图标表 -->
				<view class="flex1 tabchart" v-if="currentNum==3">
					<view style="width: 100%;height: 600rpx;">
						<qiun-data-charts type="column" :chartData="chartDatab" :opts='optsb' :ontouch="true"></qiun-data-charts>
					</view>
					<image :src="line" class="lineimg"></image>
					<view  class="flex1 tab" >
							<view class="tab_top flexc">
								<view class="a topt w20">排名</view>
								<view class="a topt w30">班级</view>
								<view class="a topt w25">均分以上</view>
								<view class="a topt w25">均分以下</view>
							</view>
							
							<view class="flex1 overa" v-if="avgRank.length">
								<block v-for="(ite ,idx) in avgRank" :key="idx">
								<view class="tab_tr" v-if="idx<3">
									<image :src="onebgimg" class="bgimg" v-if="idx==0"></image>
									<image :src="twobgimg" class="bgimg" v-if="idx==1"></image>
									<image :src="threebgimg" class="bgimg" v-if="idx==2"></image>
									<view class="a idx w20">
										<image :src="oneimg" v-if="idx==0"></image>
										<image :src="twoimg" v-if="idx==1"></image>
										<image :src="threeimg" v-if="idx==2"></image>
									</view>
									<view class="a tit w30" style="font-size: 28rpx;">{{ite.scoreClassName}}</view>
									<view class="a tit w25" >{{ite.up}}</view>
									<view class="a tit w25" >{{ite.down}}</view>
								</view>
								<view class="tab_tr bg1" v-if="idx>2">
									<view class="a idx w20" >{{idx+1}}</view>
									<view class="a tit w30" style="font-size: 28rpx;">{{ite.scoreClassName}}</view>
									<view class="a tit w25" >{{ite.up}}</view>
									<view class="a tit w25" >{{ite.down}}</view>
								</view>
								</block>
								
							</view>
							<view class="flex1 overa" v-else>
								<no-data></no-data>
							</view>
					</view>
				</view>
				
				
				<!-- 分数段统计 -->
				<view class="flex1 tabchart" v-if="currentNum==4">
					<view style="width: 100%;height: 600rpx;">
						<qiun-data-charts type="ring" :chartData="chartDataa" :opts='optsa'></qiun-data-charts>
					</view>
					<image :src="line" class="lineimg"></image>
					<view class="flex1 tab" >
						<!-- <block v-for="(ite ,idx) in avgRank" :key="idx"></block> -->
						<view class="tab_top flexc">
							<view class="a topt w40">分数段</view>
							<view class="a topt w30">人数</view>
							<view class="a topt w30">占比</view>
						</view>
						<view class="flex1 overa">
							<view class="tab_tr bg1" v-for="(ite,idx) in fsRank" :key="idx">
								<view class="a idx w40">{{ite.tit}}</view>
								<view class="a tit w30" >{{ite.num}}</view>
								<view class="a tit w30" >{{ite.mix}}</view>
							</view>
						</view>
					</view>
					<!-- v-if="bingTuRank.length" -->
					<!-- <view class="flex1 tab" v-else>
						<no-data></no-data>
					</view> -->
				</view>
				
            </view>
        </view>
    </view>
</template>
<script>
	import {getDictionaryFn} from '@/api/mine/register.js'
	import {getscoregradeRank,getscorexuekeRank,getscoreclassRank,getscoreavgRank,getscoreavgRankZheXian,getscorebingTuRank} from "@/api/mine/score.js"
	import noData from "@/components/nodata/nodata.vue"
	import qiunDataCharts from "@/mine/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
export default {
	components:{
		noData,qiunDataCharts
	},
    data() {
        return {
            list: [{tit: '总分排名',val:'0'},{tit: '科目排名',val:'1'},{tit: '班级排名',val:'2'},{tit: '平均分统计',val:'3'},{tit: '分数段统计',val:'4'}],
            clickId: '',
            clickToId: '',
            currentNum: '0',
			searimg:require("@/mine/static/score/search.png"),
			oneimg:require("@/mine/static/score/one.png"),
			twoimg:require("@/mine/static/score/two.png"),
			threeimg:require("@/mine/static/score/three.png"),
			onebgimg:require("@/mine/static/score/onebg.png"),
			twobgimg:require("@/mine/static/score/twobg.png"),
			threebgimg:require("@/mine/static/score/threebg.png"),
			secm:require("@/mine/static/score/secm.png"),
			upimg:require("@/mine/static/score/up.png"),
			line:require("@/mine/static/score/line.png"),
			xlhealthrange:[{dictLabel:'一年级一班'}],
			mindidx:0,
			mind:'',
			avg:'',//总分平均分
			optsa: {
				color: ["#4775EA","#3BA272","#FAC858","#EE6666","#73C0DE","#91CC75","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding:[0,0,0,0],
				title: {
					name: "",
				},
				legend:{
					// show: false,
					position: "bottom",
					padding: 0,
					margin: 0,
				},
				// 副标题
				subtitle: {name: "分数段统计",fontSize: 13,color: "#666666"},
				extra: {
					ring:{border: false,ringWidth: 20,},
				}
			},
			chartDataa:{
				"categories": [],
				series: [
				   //  {
				   //   data: [{name: '700-800', labelShow: false, value: 0},
							// {name: '0-100', labelShow: false, value: 1},]
				   //  }
				],
				"enableScroll":false
			},
			optsb:{
				color: ["#4775EA","#99C827","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [15,15,0,5],
				enableScroll:true,
				legend: {},
				xAxis: {
				  disableGrid: true,
				  ecrollShow:true,
				  itemCount:3,
				},
				yAxis: {
				  data: [
				    {
				      min: 0
				    }
				  ]
				},
				extra: {
				  column: {
				    type: "group",
				    width: 30,
				    activeBgColor: "#000000",
				    activeBgOpacity: 0.08,
					categoryGap:10,
				  }
				}
			},
			chartDatab:{
				// categories: ["2018","2019","2020","2021","2022","2023"],
				// series: [
				//   {
				//     name: "成交量A",
				//     data: [20,20,25,25,30,30]
				//   },
				//   {
				//     name: "成交量b",
				//     data: [10,30,21,5,3,10]
				//   },
				// ]
			},
			countobj:{},//数据格式
			gradeRank:[],//总分排名
			xuekeRank:[],//学科统计
			classRank:[],//班级总分平均分排名统计
			avgRank:[],//班级总分平均分人数统计
			avgRankZheXian:[],//分平均分人数统计折线图
			bingTuRank:[],//年级分数段统计
			// 分数段固定
			fsRank:[{tit:'700-800',type:8},{tit:'600-700',type:7},{tit:'500-600',type:6},{tit:'400-500',type:5},
			{tit:'300-400',type:4},{tit:'200-300',type:3},{tit:'100-200',type:2},{tit:'0-100',type:1},],
			subjectlist:[],//学科
			xueke:'',
			subidx:0,
			scoreDataName:'',//名称
        };	
    },
	onLoad() {
	    let that = this;
		// 判断角色 老师 看自己班级，家长不用选班级
		var data = JSON.parse(uni.getStorageSync('scorecount'))//取出缓存数据
		this.countobj=data;
		this.init()
	},
    methods: {
        setId(val) {
            this.currentNum=val;
			if(val==0){
				if(this.gradeRank&&this.gradeRank.length<1){
					this.getscoregradeRank()
				}
			}else if(val==1){
				if(this.xuekeRank&&this.xuekeRank.length<1){
					this.getscorexuekeRank()
				}
			}else if(val==2){
				if(this.classRank&&this.classRank.length<1){
					this.getscoreclassRank()
				}
			}else if(val==3){
				if(this.avgRank&&this.avgRank.length<1){
					this.getscoreavgRank()
					this.getscoreavgRankZheXian()
				}
			}else if(val==4){
				this.getscorebingTuRank()
			}
        },
		bindDateChangea(e){
		 	var idx=e.detail.value
		 	this.mind=this.xlhealthrange[idx].dictLabel
		},
		bindDateChanged(e){
		 	var idx=e.detail.value
		 	this.xueke=this.subjectlist[idx].dictLabel;
			this.getscorexuekeRank()
		},
		init(){
			getDictionaryFn('chjbxk').then(res=>{
				if(res.code==200){
					if(res.data&&res.data.length){
						this.subjectlist = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue:v.dictValue,
							}
						})
						this.xueke=res.data[0].dictLabel;
						// this.getscorexuekeRank()
					}
				}
			})
			this.getscoregradeRank()
			// this.getscoregradeRank()
			// this.getscoreclassRank()
			// this.getscoreavgRank()
		},
		getSearch(){
			// 搜索暂时有问题
			var val=this.currentNum
			if(val==0){
				this.getscoregradeRank()
			}else if(val==1){
				this.getscorexuekeRank()
			}
		},
		// 总分统计
		getscoregradeRank(){
			var params={
				scoreTime:this.countobj.scoreTime,
				scoreClassName:this.countobj.scoreClassName,
				scoreType:this.countobj.scoreType,
			}
			if(this.scoreDataName){
				params.scoreDataName=this.scoreDataName
			}
			getscoregradeRank(params).then(res=>{
				if(res.code==200){
					this.gradeRank=res.rows;
				}else{
					this.$toast(res.msg)
				}
			})
		},
		// 成绩学科统计
		getscorexuekeRank(){
			var params={
				scoreTime:this.countobj.scoreTime,
				xueke:this.xueke,
				scoreClassName:this.countobj.scoreClassName,
				scoreType:this.countobj.scoreType,
			}
			if(this.scoreDataName){
				params.scoreDataName=this.scoreDataName
			}
			getscorexuekeRank(params).then(res=>{
				if(res.code==200){
					this.xuekeRank=res.rows;
				}else{
					this.$toast(res.msg)
				}
			})
		},
		// 班级总分平均分排名统计
		getscoreclassRank(){
			var params={
				scoreTime:this.countobj.scoreTime,
				scoreClassName:this.countobj.scoreClassName,
				scoreType:this.countobj.scoreType,
				// scoreId:this.countobj.scoreId,
			}
			getscoreclassRank(params).then(res=>{
				if(res.code==200){
					this.classRank=res.rows;
				}else{
					this.$toast(res.msg)
				}
			})
		},
		//平均人数
		getscoreavgRank(){
			var params={
				scoreTime:this.countobj.scoreTime,
				scoreType:this.countobj.scoreType,
				scoreClassName:this.countobj.scoreClassName,
			}
			getscoreavgRank(params).then(res=>{
				if(res.code==200){
					this.avgRank=res.rows;
				}else{
					this.$toast(res.msg)
				}
			})
		},
		//班级总分平均分人数统计折线图
		getscoreavgRankZheXian(){
			var params={
				scoreClassName:this.countobj.scoreClassName,
				scoreTime:this.countobj.scoreTime,
				scoreType:this.countobj.scoreType,
			}
			
			getscoreavgRankZheXian(params).then(res=>{
				if(res.code==200){
					var x=res.data.x;
					var avg=res.data.avg;
					this.avg=Number(avg).toFixed(2);
					let nobj = {
						categories: x,
						series: [
							{
								name: "均分以下",
								data: res.data.y2
							},
							{
								name: "均分以上",
								data: res.data.y1
							},
						],
					};
					if(x.length>3){
						nobj.enableScroll=true;//是否滚动
					}else{
						nobj.enableScroll=false;//是否滚动
					}
					this.chartDatab = JSON.parse(JSON.stringify(nobj));
					// this.avgRankZheXian=res.rows;
				}else{
					this.$toast(res.msg)
				}
			})
		},
		//年级分数段统计
		getscorebingTuRank(){
			var params={
				scoreClassName:this.countobj.scoreClassName,
				scoreTime:this.countobj.scoreTime,
				scoreType:this.countobj.scoreType,
			}
			getscorebingTuRank(params).then(res=>{
				if(res.code==200){
					// 数据处理
					var fsRank=this.fsRank;
					var chartarr=[];
					var data=res.data;
					fsRank.forEach(ite=>{
						var obj={};
						obj.name=ite.tit;
						obj.labelShow=false;
						if(ite.type=='8'){
							obj.value=data.Eig;
							ite.num=data.Eig;
							ite.mix=data.EigZ;
						}else if(ite.type=='7'){
							obj.value=data.Sev;
							ite.num=data.Sev;
							ite.mix=data.SevZ;
						}else if(ite.type=='6'){
							obj.value=data.Six;
							ite.num=data.Six;
							ite.mix=data.SixZ;
						}else if(ite.type=='5'){
							obj.value=data.Fiv;
							ite.num=data.Fiv;
							ite.mix=data.FivZ;
						}else if(ite.type=='4'){
							obj.value=data.For;
							ite.num=data.For;
							ite.mix=data.ForZ;
						}else if(ite.type=='3'){
							obj.value=data.Thr;
							ite.num=data.Thr;
							ite.mix=data.ThrZ;
						}else if(ite.type=='2'){
							obj.value=data.Tow;
							ite.num=data.Tow;
							ite.mix=data.TowZ;
						}else if(ite.type=='1'){
							obj.value=data.One;
							ite.num=data.One;
							ite.mix=data.OneZ;
						}	
						chartarr.push(obj)
					})
					var cobj={
						data:JSON.parse(JSON.stringify(chartarr))
					}
					var series=[];
					series.push(cobj)
					this.chartDataa.series = JSON.parse(JSON.stringify(series));
					this.fsRank=JSON.parse(JSON.stringify(fsRank));
					// var newArr=res.data;
					// this.bingTuRank=res.rows;
				}else{
					this.$toast(res.msg)
				}
			})
		},
    },
    
};
</script>
<style lang="less">
.count {
    display: flex;min-height: 100vh;background-color: #ffffff;
    .left {
        width: 210rpx;
        .title {
			background: #F6F6F8;margin-bottom: 6rpx;
            text-align: center;
            height: 120rpx;
            line-height: 120rpx;
            color: #161616;font-weight: 500;
        }
        .act {
            background: #FFFFFF;font-weight: bold;color: #4775EA;
        }
    }
	.pd{padding:0rpx 20rpx 0 32rpx;}
    .right {
        flex: 1;overflow: hidden;height: 100vh;padding-top:26rpx;flex-direction: column;display: flex;
        .search{width: 100%;height: 60rpx;border: 2rpx solid #C1C1C1;border-radius: 10rpx; box-sizing: border-box;display: flex;padding-left: 24rpx;align-items: center;
			image{width: 26rpx;height: 26rpx;flex: 0 0 auto;margin-right: 20rpx;}
			input{font-size: 28rpx;color: #161616;line-height: 56rpx;}
			.btn{padding: 0 24rpx 0 20rpx;flex: 0 0 auto;font-size: 28rpx;font-weight: bold;color: #4775EA;height: 100%;line-height: 56rpx;}
		}
		.ser_toa{font-size: 28rpx;color: #161616;font-weight: bold;
			text{color: #4775EA;}
		}
		.mind_s{margin-bottom: 20rpx;
			.mind_sl{width: 30rpx;height: 28rpx;margin-right: 16rpx;}
			.mind_sa{padding-right:40rpx ;
				image{width: 22rpx;height: 12rpx;margin-left: 16rpx;}
			}
		}
		// 列表
		.tabchart{display: flex;flex-direction: column;overflow: auto;}
		.tab{display: flex;flex-direction: column;overflow: hidden;padding:0rpx 20rpx 0 32rpx;box-sizing: border-box;min-height: 600rpx;}
		.tab_top{flex: 0 0 auto;margin-bottom: 4rpx;}
		.a{width: 25%;flex: 0 0 auto;display: flex;align-items: center;justify-content: center;z-index: 1;padding:8rpx 0;
			image{width: 32rpx;height: 40rpx;}
			&.w20{width: 20%;}
			&.w25{width: 25%;}
			&.w30{width: 30%;}
			&.w40{width: 40%;}
			&.w50{width: 50%;}
			&.w70{width: 70%;}
		}
		.topt{font-size: 28rpx;font-weight: 500;color: #666666;}
		.idx{font-size: 30rpx;font-weight: 500;color: #8C93AD;}
		.tit{font-size: 30rpx;font-weight: 500;color: #161616;}
		.num{font-size: 30rpx;font-weight: bold;color: #161616;}
		.tab_tr{position: relative;width: 100%;min-height: 70rpx;flex: 1;margin-bottom: 24rpx;display: flex;
			.bgimg{width: 100%;height: 100%;position: absolute;left: 0;}
			&.bg1{background: #F2F6FF;min-height: 70rpx;height: auto;}
		}
		.lineimg{width: 162rpx;height: 10rpx;margin: 28rpx auto;}
    }
}
</style>