no message

pages/studentRanked/components/chart.js

@@ -14,18 +14,40 @@ export function chartBar(data) {
 		'rgba(155,90,201)',
 
 	]
-	let yLabel = []
-	let value = []
-	data.forEach(item => {
-		yLabel.push(item.student.student_name)
-		value.push(Math.abs(item.score_total))
+	// let yLabel = []
+	let seriesData = []
+	let areaStyleColor = []
+    let axisLabelRich = {
+        text: {
+        	width: 40,
+            fontSize : 16,
+        	marginLeft: '40px'
+        }
+    };
+	data.forEach((item, index) => {
+		// yLabel.push(item.student.student_name)
+		seriesData.push(Math.abs(item.score_total))
+        
+        axisLabelRich[index] = {
+            height: 40, // 图片高度
+            width: 40, // 图片宽度 
+            backgroundColor: {
+                image: item.student.student_cartoon_photo, // 图片路径  
+            }
+        }
+        
+        if (item.score_total < 0) {
+            areaStyleColor.push('rgba(231,79,176,0.2)')
+        } else {
+            areaStyleColor.push('rgba(0,0,0,0)')
+        }
 	})
 
 	return {
 		grid: {
 			top: 0,
 			bottom: 0,
-			left: '20%',
+			left: 140,
 			right: '10%'
 		},
 		xAxis: {
@@ -38,7 +60,7 @@ export function chartBar(data) {
 				show: true,
 				interval: 0,
 				areaStyle: {
-					color: []
+					color: areaStyleColor
 				},
 			},
 			inverse: true,
@@ -47,27 +69,28 @@ export function chartBar(data) {
 			axisLabel: {
 				show: true,
 				formatter: function(value, index) {
-
 					// 根据你的需求调整 formatter 函数  
 					// 这里只是一个简单的示例，假设你想在所有 Y 轴 label 前都添加一个图片  
 					return `{${index}|   }     {text|${data[index].student.student_name} }   `;
 				},
-				rich: {
-					img1: {
-						height: 20, // 图片高度  
-						width: 20, // 图片宽度 
+                rich : axisLabelRich
+				// rich: {
+				// 	// img1: {
+				// 	// 	height: 30, // 图片高度  
+				// 	// 	width: 30, // 图片宽度 
 
-						backgroundColor: {
-							image: '', // 图片路径  
-							// 如果你使用的是模块化的方式（如 Vue），你可能需要使用 require 或 import 来引入图片  
-							// 例如：image: require('@/assets/image.png')  
-						}
-					},
-					text: {
-						width: 30,
-						marginLeft: '40px'
-					}
-				}
+				// 	// 	backgroundColor: {
+				// 	// 		image: '', // 图片路径  
+				// 	// 		// 如果你使用的是模块化的方式（如 Vue），你可能需要使用 require 或 import 来引入图片  
+				// 	// 		// 例如：image: require('@/assets/image.png')  
+				// 	// 	}
+				// 	// },
+				// 	text: {
+				// 		width: 40,
+    //                     fontSize : 16,
+				// 		marginLeft: '40px'
+				// 	}
+				// }
 			}
 		},
 		series: [{
@@ -83,7 +106,7 @@ export function chartBar(data) {
 			},
 	
 			type: 'bar',
-			data: value,
+			data: seriesData,
 			label: {
 				show: true,
 				position: 'right',

pages/studentRanked/components/mark-score-list.vue

@@ -41,7 +41,7 @@
             },
             stuList: {
                 type: Array,
-                default: []
+                default: () => []
             },
         },
         data() {

pages/studentRanked/components/random-roll-call.vue

@@ -3,16 +3,17 @@
         style="background-color: #00142f63;backdrop-filter: blur(4px);" width="640px">
 
         <view style="min-height: 250px;" class="ui-flex-center ui-flex-row">
-            <view class="text-center user-item" v-for="(item, index) in viewList" :key="item.id">
+            <view class="text-center user-item" v-for="(item, index) in viewList" :key="item.id" @click="toCheck(item)">
+                <text v-if="!item.isEmpty" class="user-check" :class="[checkList.includes(item.id) ? 'el-icon-success' : 'el-icon-circle-check']"></text>
                 <el-avatar :size="70" :src="item.student_cartoon_photo"></el-avatar>
                 <view class="f34 text-center txt-white">{{item.title}}</view>
             </view>
         </view>
 
         <view class="text-center ui-mt40">
-            <el-input-number v-model="num" :min="1" label="确认人数"></el-input-number>
+            <el-input-number v-model="num" :min="1" @change="numChange" label="确认人数"></el-input-number>
             <el-button class="ui-ml20" type="" @click="makeRandom">确认人数</el-button>
-            <el-button class="ui-ml20" type="primary" @click="$emit('comment', checkList)">批量点评</el-button>
+            <el-button class="ui-ml20" type="primary" @click="$emit('comment', stuList)">批量点评</el-button>
         </view>
     </el-dialog>
 </template>
@@ -26,17 +27,19 @@
             return {
                 show: false,
                 num: 3,
-                checkList: []
+                stuList: [],
+                checkList : [],
             }
         },
         computed: {
             viewList() {
                 let list = [];
                 for (var i = 0; i < this.num; i++) {
-                    if (this.checkList[i]) {
-                        list.push(this.checkList[i])
+                    if (this.stuList[i]) {
+                        list.push(this.stuList[i])
                     } else {
                         list.push({
+                            isEmpty : true,
                             id: i,
                             student_cartoon_photo: 'https://zhxy.obs.cn-hz1.ctyun.cn/static/student_icon/B6.png',
                             title: '匿名'
@@ -50,13 +53,26 @@
             open() {
                 this.show = true;
             },
+            numChange(e){
+                this.stuList = [];
+                this.checkList = [];
+            },
+            toCheck(item){
+                let index = this.checkList.indexOf(item.id)
+                if (index >= 0) {
+                    this.checkList.splice(index, 1);
+                } else {
+                    this.checkList.push(item.id);
+                }
+            },
             makeRandom() {
                 let max = this.list.length - 1;
                 let numList = this.generateUniqueRandomNumbers(this.num, 0, max);
-                this.checkList = [];
+                this.stuList = [];
                 this.viewList.forEach((item, index) => {
                     setTimeout(() => {
-                        this.checkList.push(this.list[numList[index]])
+                        this.stuList.push(this.list[numList[index]])
+                        this.checkList.push(this.list[numList[index]].id);
                     }, 40 * index);
                 })
             },
@@ -100,9 +116,27 @@
     /deep/ .el-dialog__body {
         background-color: rgba(255, 255, 255, .12);
     }
-
+    
+    .user-check{
+        position: absolute;
+        right: -10px;
+        top: -10px;
+        font-size: 30px;
+        color: red;
+        background-color: #fff;
+        border-radius: 100px;
+        overflow: hidden;
+    }
+    .el-icon-success{
+        color: #e61010;
+    }
+    .el-icon-circle-check{
+        color: #d1d1d1;
+    }
     .user-item {
         /* float: left; */
+        position: relative;
         margin: 20px;
+        cursor: pointer;
     }
 </style>

pages/studentRanked/components/rank-list.vue

@@ -1,88 +1,68 @@
 <template>
-	<el-drawer size='50%' title="排行榜" :visible.sync="show" direction="rtl">
-		<view id="chart-bar" style="width: 100%;height: 100%;" class="">
+    <el-drawer size='480px' title="排行榜" :visible.sync="show" direction="rtl">
+        <view id="chart-bar" :style="{height:height}" class="">
 
-		</view>
-	</el-drawer>
+        </view>
+    </el-drawer>
 </template>
 
 <script>
-	import * as echarts from "echarts";
-	import {
-		chartBar
-	} from './chart.js'
-	export default {
-		data() {
-			return {
-				show: false,
+    import * as echarts from "echarts";
+    import {
+        chartBar
+    } from './chart.js'
+    export default {
+        data() {
+            return {
+                show: false,
+                height : 0,
+            }
+        },
+        props: {
+            chooseClassId: {
+                type: Number | String,
+                default: ""
+            },
+        },
+        computed: {},
+        methods: {
+            open() {
+                this.show = true;
 
-			}
-		},
-		props: {
-			chooseClassId: {
-				type: Number | String,
-				default: ""
-			},
-		},
-		computed: {},
-		methods: {
-			open() {
-				this.show = true;
-
-				this.$api.sendRequest({
-					url: '/mobile/studentTab/getStudentMonthRank',
-					method: "post",
-					data: {
-						class_id: this.chooseClassId,
-					},
-					success: res => {
-						let dom = document.getElementById('chart-bar')
-						dom.style.height = `${res.data.length * 40}px`
-						this.chart = echarts.init(dom);
-						const myChart = this.chart;
-						myChart.clear();
-						let option = chartBar(res.data)
-						res.data.forEach((item, index) => {
-							option.yAxis.axisLabel.rich[index] = {
-								height: 20, // 图片高度
-								width: 20, // 图片宽度 
-								backgroundColor: {
-									image: item.student.student_cartoon_photo, // 图片路径  
-									// 如果你使用的是模块化的方式（如 Vue），你可能需要使用 require 或 import 来引入图片  
-									// 例如：image: require('@/assets/image.png')  
-								}
-							}
-							if (item.score_total < 0) {
-								option.yAxis.splitArea.areaStyle.color.push('rgba(231,79,176,0.2)')
-								
-							} else {
-								option.yAxis.splitArea.areaStyle.color.push('rgba(0,0,0,0)')
-							}
-						
-							
-						
-						})
-					
-
-
-
-						myChart.setOption(option);
-						// setTimeout(() => {
-						// 	myChart.setOption({
-						// 	  series: [
-						// 	    {
-						// 	      type: 'bar',
-						// 	      data:[5000,6000,1000,4000,58000,8000]
-						// 	    }
-						// 	  ]
-						// 	});
-						// },2000)
-						
-					}
-				})
-			}
-		}
-	}
+                this.$api.sendRequest({
+                    url: '/mobile/studentTab/getStudentMonthRank',
+                    method: "post",
+                    data: {
+                        class_id: this.chooseClassId,
+                    },
+                    success: res => {
+                        let dom = document.getElementById('chart-bar')
+                        this.height = `${res.data.length * 60}px`
+                        this.$nextTick(() => {
+                            this.chart = echarts.init(dom);
+                            const myChart = this.chart;
+                            myChart.clear();
+                            // res.data.forEach((item, index) => {
+                            //     // option.yAxis.axisLabel.rich[index] = {
+                            //     //     height: 40, // 图片高度
+                            //     //     width: 40, // 图片宽度 
+                            //     //     backgroundColor: {
+                            //     //         image: item.student.student_cartoon_photo, // 图片路径  
+                            //     //     }
+                            //     // }
+                            //     if (item.score_total < 0) {
+                            //         option.yAxis.splitArea.areaStyle.color.push('rgba(231,79,176,0.2)')
+                            //     } else {
+                            //         option.yAxis.splitArea.areaStyle.color.push('rgba(0,0,0,0)')
+                            //     }
+                            // })
+                            myChart.setOption(chartBar(res.data));
+                        })
+                    }
+                })
+            }
+        }
+    }
 </script>
 
 <style>

pages/studentRanked/studentRanked.vue

@@ -37,19 +37,20 @@
                         'ui-mr10' : index2 == 1,
                         'ui-ml10' : index2 == 2
                     }">
-                    <view @click="Comment(item1)" v-for="(item1,index1) in list[index2+index-1].nodes" :key="item1.id"
+                    <view @click="Comment(stuItem)" v-for="stuItem in list[index2+index-1].nodes" :key="stuItem.id"
                         class="ui-flex-column ranked-item-tr ui-flex-align-center"
-                        :class="{active : activeList.includes(item1.id)}">
-                        <image style="width: 100rpx;height: 100rpx;" :src="item1.student_cartoon_photo" mode=""></image>
+                        :class="{active : activeList.includes(stuItem.id)}">
+                        <image :src="getLevelIcon(stuItem)" mode="widthFix" style="width: 130rpx;height: 48rpx;"></image>
+                        <image style="width: 100rpx;height: 100rpx;margin-top: -20rpx;" :src="stuItem.student_cartoon_photo" mode=""></image>
                         <view class="stu-tag text-center ui-flex-row ui-mt10">
-                            <view class="stu-tag-add ui-flex-1">{{item1.plus_score_total}}</view>
-                            <view class="stu-tag-sub ui-flex-1">{{item1.minus_score_total}}</view>
+                            <view class="stu-tag-add ui-flex-1">{{stuItem.plus_score_total}}</view>
+                            <view class="stu-tag-sub ui-flex-1">{{stuItem.minus_score_total}}</view>
                         </view>
                         <view class="txt-white f28 ui-pt10">
-                            {{item1.title}}
+                            {{stuItem.title}}
                         </view>
                         <u-badge absolute style="left: 10px;top: 10px;"
-                            :value="activeList.indexOf(item1.id) + 1"></u-badge>
+                            :value="activeList.indexOf(stuItem.id) + 1"></u-badge>
                     </view>
                 </view>
             </view>
@@ -68,7 +69,8 @@
         <markScore @change='change' @close='onScoreClose' :stuList='activeList' ref="markScore"></markScore>
 
         <!-- 点评记录 -->
-        <markScoreList ref="markScoreList" :chooseClassId="chooseClassId" :stuList="activeList"></markScoreList>
+        <!--  :stuList="activeList" -->
+        <markScoreList ref="markScoreList" :chooseClassId="chooseClassId"></markScoreList>
         
         <!-- 随机点名 -->
         <randomRollCall ref="randomRollCall" :list="studentList" @comment="randomRollComment"></randomRollCall>
@@ -84,12 +86,7 @@
             <view class="ui-flex-1 ui-flex-row">
                 <!--   -->
                 <el-dropdown trigger="click" @command="doChooseClass">
-                    <view class="ui-flex-column text-center ui-p bottom-btn-item">
-                        <image src="../../static/jyicon/shubao.png" style="width: 40px;height: 40px;" mode=""></image>
-                        <view style="line-height: 1;">
-                            <text class="txt-white f24">选择班级</text>
-                        </view>
-                    </view>
+                    <view-btn-item title="选择班级" src="../../static/jyicon/shubao.png"></view-btn-item>
                     <el-dropdown-menu slot="dropdown">
                         <el-dropdown-item v-for="(item) in classesList" :key="item.id" :command="item">
                             <text class="ui-mr10">{{item.class_name}}</text>
@@ -110,7 +107,7 @@
 
             <view class="ui-flex-row">
                 <view-btn-item title="排行榜" src="../../static/jyicon/jiangpai.png" @click="$refs.rankList.open()"></view-btn-item>
-                <view-btn-item title="切换老师" src="../../static/jyicon/jiangpai.png" @click="debug"></view-btn-item>
+                <!-- <view-btn-item title="切换老师" src="../../static/jyicon/jiangpai.png" @click="debug"></view-btn-item> -->
                 <view-btn-item title="退出登录" src="../../static/jyicon/xiaoxi.png" @click="loginOut()"></view-btn-item>
             </view>
         </view>
@@ -170,6 +167,12 @@
             debug(){
                 console.log(this)
             },
+            getLevelIcon(item){
+                let val = ~~((item.score_total)/10);
+                val = (val <= 0 ? 1 : val);
+                val = (val >= 16 ? 16 : val);
+                return '../../static/level_icon/'+ val +'.png';
+            },
             // change(e) {
             //     this.type = e == 0 ? 1 : 2
             //     this.getTabs()
@@ -225,10 +228,12 @@
             },
             // 随机点名后批量评价
             randomRollComment(checkList){
-                this.activeList = checkList.map(item => {
-                    return item.id
-                });
-                this.commentMulti();
+                if(checkList.length){
+                    this.activeList = checkList.map(item => {
+                        return item.id
+                    });
+                    this.commentMulti();
+                }
             },
             // 多选学生点评
             commentMulti() {
@@ -417,7 +422,9 @@
     }
 
     .stu-tag {
-        width: 90px;
+        width: 160rpx;
+        margin-left: 10rpx;
+        margin-right: 10rpx;
         border-radius: 15px;
         overflow: hidden;
     }