components/mehaotian-numled/README.md

@@ -0,0 +1,79 @@
+### 数字LED时间屏显
+
+> 组件说明：组件目前只有四个模式，我把基础的内容做好了，可以自由扩展其他
+
+### 属性说明
+
+1. `mode [number]` 显示模式 ： 1. 时间模式 ： 正常模式 : 显示十、分、秒 2. 时间模式 ： 不显示秒 3. 时间记录模式 4. 自定义模式 ，随意输入
+ 
+2. `close [boolean]` 时间模式中，是否开启间隔符号
+ 
+3. `twinkle [boolean]` 间隔符号开启状态下，间隔符号是否闪烁
+ 
+4. `valArr [Array]` 自定义模式下，输入的数组
+
+### 事件说明
+
+暂无事件 ，目前只是显示组件，不涉及到事件回调
+
+
+### 注意事项
+1. 在自定义模式下 ，数据格式要严格按照我规定的来。  
+数组中每个索引中 只能是数字0-9或者符号‘：’ 。其他一概不识别。 
+
+```javascipt
+this.valArr = [1 ,2 ,':' ,0 ,1 ,':' ,0 ,0]
+// 以上格式 输出 12:01:00 
+
+this.valArr = [1 ,2 ,3 ,4]
+// 以上格式 输出1234
+
+```
+
+2. 如果需要做倒计时，可以自己写业务逻辑 ，直接按照数据格式 ，直接传值给组件即可
+
+
+
+### 调用方式
+
+```javascipt
+<template>
+	<view class="content">
+		<!-- <calendar :selected="selected" @getdate="getdate" /> -->
+		1. 时间显示模式：正常显示时间
+		<led :mode="1"></led>
+		2. 时间显示模式：不显示秒
+		<led :mode="2"></led>
+		3. 计时器模式
+		<led :mode="3"></led>
+		4. 自定义模式
+		<led :mode="4" :val-arr="arr"></led>
+	</view>
+</template>
+
+<script>
+import led from '../../components/mehaotian-numled/mehaotian-numled.vue';
+export default {
+	components: {
+		led
+	},
+	data() {
+		return {
+			arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
+		};
+	},
+	onLoad() {
+		setTimeout(() => {
+			this.arr = [0, 9, 8, 7, 6, 5, 4, 3, 2, 1];
+		}, 2000);
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+	padding: 50upx;
+}
+</style>
+
+```

components/mehaotian-numled/mehaotian-numled.scss

@@ -0,0 +1,19 @@
+/* 横图片 */
+$imgtTansverse : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAZCAMAAADwgHt5AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABvUExURUdwTP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TJrUUAAAAkdFJOUwCMubcl9vjydIu49cIjGxJ3urwX+o6/toog9wwVwBj+/CIeDzI/BTEAAACVSURBVEjHtdZbFoIgGEVhTJJKK7vfs3LPf4z9E8AVxtkT+NaBB3Au0ozkTt6lNcKA0usNWHi9AZOl3rAtb71hWy56AzYfvQHbld6A41NvwOOuN6DpB4yWTDW3qLEmW2UU2Z27TEYYupP5S2+YstcbplR6w5Sr3jBlqjf+VMKv78mh1hvOFbXeGH1iIe23UlR6w7ZkNL65+NpO4hsFUwAAAABJRU5ErkJggg==';
+/* 竖着图片 */
+$imgVertical:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAABkCAMAAABEi2tOAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABvUExURUdwTP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TJrUUAAAAkdFJOUwCMubcl9vjydIu49cIjGxJ3urwX+o6/toog9wwVwBj+/CIeDzI/BTEAAACeSURBVEjH7dbJFoIwEETRAEFsxHkecaj//0aPihKSyoqlXdu7yapfjNH13XIakx1mHKQGhhSuACVZAZRkAFCSA0BJcoDSugMOJSOAkgTQUJIDlNrn+oTYVFRUVP5QighsTYQyaziV9n2wQ0ptc+R9Kse/MHQpvTkxcWm+7wSopcXdi9aXNpMgdB86X0gcX1SdaFALVI9IhLOjflF67wnq1dpOv3Y7lAAAAABJRU5ErkJggg==';
+/* 宽度 */
+$border-width: 24%;
+/* 处理图片显示 */
+@mixin diffstyle ($img){
+	// border: 1px blue solid;
+	position: absolute;
+	box-sizing: border-box;
+	background: url($img) no-repeat;
+	background-size: 100% 100%;
+	opacity: 0.05;
+	&.active {
+		opacity: 1;
+	}
+}
+

components/mehaotian-numled/mehaotian-numled.vue

@@ -0,0 +1,333 @@
+<template>
+    <view class="wrap">
+        <view class="box" :class="{'circle':item === ':','clear':item === ':'&&!close,'active':item === ':'&&twinkle}"
+            v-for="(item,index) in list" :key="index">
+            <block v-if="item === ':'">
+                <view v-if="close" class="circle-box "></view>
+                <view v-if="close" class="circle-box "></view>
+            </block>
+            <block v-else>
+                <view :class="{'box-top':idx === 0 , 'box-bottom':idx === 1 }" v-for="(num , idx) in 2" :key="idx">
+                    <view v-if="idx === 0" class="box-top-top" :class="{'active':timeList[item][0]}"></view>
+                    <view class="box-top-right" :class="{'active':timeList[item][idx===0 ?1:4]}"></view>
+                    <view class="box-top-bottom" :class="{'active':timeList[item][idx===0 ?2:5]}"></view>
+                    <view class="box-top-left " :class="{'active':timeList[item][idx===0 ?3:6]}"></view>
+                </view>
+            </block>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        props: {
+            /**
+             * 模式
+             * 1. 时间模式 ： 正常模式 : 显示十、分、秒
+             * 2. 时间模式 ： 不显示秒
+             * 3. 时间记录模式
+             * 4. 自定义模式 ，随意输入数字数组
+             */
+            mode: {
+                type: Number,
+                default: 1
+            },
+            /**
+             * 是否开启间隔符号
+             */
+            close: {
+                type: Boolean,
+                default: true
+            },
+            /**
+             * 间隔符号是否闪烁
+             */
+            twinkle: {
+                type: Boolean,
+                default: false
+            },
+            valArr: {
+                type: Array,
+                default: () => {
+                    return []
+                }
+            },
+
+        },
+        data() {
+            return {
+                // 定义时间显示规律
+                timeList: {
+                    '1': [false, true, false, false, true, false, false],
+                    '2': [true, true, true, false, false, true, true],
+                    '3': [true, true, true, false, true, true, false],
+                    '4': [false, true, true, true, true, false, false],
+                    '5': [true, false, true, true, true, true, false],
+                    '6': [true, false, true, true, true, true, true],
+                    '7': [true, true, false, false, true, false, false],
+                    '8': [true, true, true, true, true, true, true],
+                    '9': [true, true, true, true, true, true, false],
+                    '0': [true, true, false, true, true, true, true]
+                },
+                list: [], // 显示时间
+                timer: null,
+                state: 0, //0停止 1启动
+            };
+        },
+        created() {
+            // 显示模式1 初始化
+            // if (this.mode < 3) {
+            // 	clearInterval(this.timer);
+            // 	this.list = this.strToArr(this.Format(new Date()), this.mode);
+            // 	this.timer = setInterval(() => {
+            // 		this.list = this.strToArr(this.Format(new Date()), this.mode);
+            // 	}, 1000);
+            // }
+            if (this.mode === 3) {
+                this.list = [0, 0, ':', 0, 0];
+                this.state && this.restart();
+            }
+            if (this.mode === 4) {
+                this.list = this.valArr
+            }
+        },
+        watch: {
+            valArr(newVal, oldVal) {
+                this.list = newVal
+            }
+        },
+        beforeDestroy() {
+            clearInterval(this.timer);
+        },
+        methods: {
+            recover(){
+                this.state = 1;
+            },
+            pause() {
+                this.state = 0;
+            },
+            /**
+             * 计时器
+             */
+            restart() {
+                this.list = [0, 0, ':', 0, 0];
+                let num = 0;
+                this.state = 1;
+                clearInterval(this.timer);
+                this.timer = setInterval(() => {
+                    if (this.state == 0) {
+                        return;
+                    }
+                    num++;
+                    // 倒计时
+                    if (num > 9) {
+                        this.$set(this.list, 4, 0);
+                        num = this.list[3];
+                        num++;
+                        this.$set(this.list, 3, num);
+                        if (num > 5) {
+                            this.$set(this.list, 3, 0);
+                            num = this.list[1];
+                            num++;
+                            this.$set(this.list, 1, num);
+                            if (num > 9) {
+                                this.$set(this.list, 1, 0);
+                                num = this.list[0];
+                                num++;
+                                this.$set(this.list, 0, num);
+                                if (num > 5) {
+                                    this.$set(this.list, 0, 0);
+                                    // num = this.list[1];
+                                    // num++;
+                                    // this.$set(this.list, 1, num);
+                                    // if (num > 9) {
+                                    // 	this.$set(this.list, 1, 0);
+                                    // 	num = this.list[0];
+                                    // 	num++;
+                                    // 	this.$set(this.list, 0, num);
+                                    // 	if (num > 5) {
+                                    // 		this.$set(this.list, 0, 0);
+                                    // 		// 如果时间到底，不循环就打开这段代码
+                                    // 		// clearInterval(this.timer);
+                                    // 	}
+                                    // }
+                                }
+                            }
+                        }
+                        num = 0;
+                    }
+                    this.$set(this.list, 4, num);
+                }, 1000);
+            },
+
+            /**
+             * 时间格式化
+             */
+            Format(fmt) {
+                let date = new Date(fmt);
+                var o = {
+                    h: date.getHours(), //小时
+                    m: date.getMinutes(), //分
+                    s: date.getSeconds() //秒
+                };
+                // console.log(o.h, o.m, o.s);
+                return (
+                    (o.h < 10 ? '0' + o.h : o.h) +
+                    ':' +
+                    (o.m < 10 ? '0' + o.m : o.m) +
+                    ':' +
+                    (o.s < 10 ? '0' + o.s : o.s)
+                );
+            },
+            /**
+             * 字符串转数组
+             */
+            strToArr(str, num) {
+                if (num === 1) {
+                    return str.split('');
+                }
+                if (num === 2) {
+                    return [
+                        str.split('')[0],
+                        str.split('')[1],
+                        str.split('')[2],
+                        str.split('')[3],
+                        str.split('')[4]
+                    ];
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    @import './mehaotian-numled.scss';
+
+    .wrap {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        box-sizing: border-box;
+
+        .content-box {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .box {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            margin: 2%;
+            box-sizing: border-box;
+
+            &.circle {
+                width: 20%;
+
+                .circle-box {
+                    width: 100%;
+                    height: 0;
+                    padding-top: 100%;
+                    background: #FFF;
+
+                    &:last-child {
+                        margin-top: 200%;
+                    }
+                }
+
+                &.active {
+                    opacity: 0.05;
+                    animation: twinkle 1s infinite;
+                }
+
+                @keyframes twinkle {
+
+                    0%,
+                    100% {
+                        opacity: 0;
+                    }
+
+                    50% {
+                        opacity: 1;
+                    }
+                }
+            }
+
+            &.clear {
+                display: none;
+            }
+
+            .box-top,
+            .box-bottom {
+                position: relative;
+                width: 100%;
+                height: 0;
+                padding-top: 100%;
+
+                &.box-top {
+                    .box-top-top {
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: $border-width;
+                        @include diffstyle($imgtTansverse);
+                    }
+
+                    .box-top-right {
+                        top: 0;
+                        right: 0;
+                        width: $border-width;
+                        height: 100%;
+                        @include diffstyle($imgVertical);
+                    }
+
+                    .box-top-bottom {
+                        bottom: 0;
+                        height: $border-width;
+                        width: 100%;
+                        @include diffstyle($imgtTansverse);
+                    }
+
+                    .box-top-left {
+                        top: 0;
+                        left: 0;
+                        width: $border-width;
+                        height: 100%;
+                        @include diffstyle($imgVertical);
+                    }
+                }
+
+                &.box-bottom {
+                    margin-top: -$border-width;
+
+                    .box-top-right {
+                        top: 0;
+                        right: 0;
+                        width: $border-width;
+                        height: 100%;
+                        @include diffstyle($imgVertical);
+                    }
+
+                    .box-top-bottom {
+                        bottom: 0;
+                        height: $border-width;
+                        width: 100%;
+                        @include diffstyle($imgtTansverse);
+                    }
+
+                    .box-top-left {
+                        top: 0;
+                        left: 0;
+                        width: $border-width;
+                        height: 100%;
+                        @include diffstyle($imgVertical);
+                    }
+                }
+            }
+        }
+    }
+</style>

pages/studentRanked/components/mark-score.vue

@@ -22,19 +22,20 @@
 				<view class="ui-flex-1"></view>
 			</view>
 			<view style="background: #0000003b;">
-				<u-tabs :list="list1" :scrollable="false" :activeStyle="{
+				<u-tabs :list="courseList" :activeStyle="{
                     color: '#fff',
                     fontWeight: 'bold',
                     transform: 'scale(1.2)'
                 }" :inactiveStyle="{
                     color: '#959595',
                     transform: 'scale(1)'
-                }"></u-tabs>
+                }" @change="changeCourse"></u-tabs>
 			</view>
 
 			<scroll-view scroll-y style="height: 400px;" show-scrollbar>
 				<u-grid :col="6" :border="false">
 					<u-grid-item @click="toActive(index,item)" v-for="(item, index) in list" :key="index" class="ui-p"
+                        v-if="course_id ?  item.course_id == course_id : true"
 						:class="{'no-select' : activeId >= 0 && activeId != index}">
 						<u--image :src="item.img" width="46px" height="46px"></u--image>
 						<view class="ui-pt10">
@@ -90,27 +91,10 @@
 				type: 0,
 				score: 0, //加扣分分数
 				activeId: -1, //选中项
+                course_id : 0,
 				itemTab: '',
 				showType: false,
-				list1: [{
-					name: '全部',
-				}, {
-					name: '语文',
-				}, {
-					name: '数学'
-				}, {
-					name: '科技'
-				}, {
-					name: '音乐'
-				}, {
-					name: '美术'
-				}, {
-					name: '体育'
-				}, {
-					name: '思想'
-				}, {
-					name: '劳动'
-				}],
+				courseList: [],
 			}
 		},
 		watch: {
@@ -127,6 +111,10 @@
 				this.curIndex = e
                 this.getTipList();
 			},
+            changeCourse(item){
+                this.course_id = item.id;
+                // this.getTipList();
+            },
             getTipList() {
                 if(tabList[this.curIndex]){
                     this.list = tabList[this.curIndex];
@@ -162,6 +150,28 @@
                 this.title = title;
 				this.show = true;
                 this.getTipList();
+                
+                if(this.courseList.length == 0){
+                    this.$api.sendRequest({
+                    	url: '/mobile/systemBaseData/getAllCourse',
+                    	method: "post",
+                    	success: res => {
+                    		console.log(res);
+                            this.courseList = [
+                                {
+                                    id : 0,
+                                    name : '全部'
+                                },
+                                ...res.data.map(item => {
+                                    return {
+                                        name : item.course_name,
+                                        id : item.id
+                                    }
+                                })
+                            ]
+                    	}
+                    })
+                }
 			},
 			toActive(index, item) {
 				// 是否旧的选中项

pages/studentRanked/components/rank-list.vue

@@ -0,0 +1,45 @@
+<template>
+    <el-drawer title="排行榜" :visible.sync="show" direction="rtl">
+        <view style="text-align: center;" class="">
+            开发中....!
+        </view>
+    </el-drawer>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                show: false,
+                
+            }
+        },
+        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 => {
+                        
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style>
+    
+</style>

pages/studentRanked/components/timer-clock.vue

@@ -1,82 +1,75 @@
 <template>
-    <el-dialog :visible.sync="show" title="计时器" custom-class="content" center :close-on-click-modal="false"
+    <el-dialog :visible.sync="show" title="计时器" custom-class="content" center :close-on-click-modal="false" destroy-on-close
         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">
-                <el-avatar :size="70" :src="item.student_cartoon_photo"></el-avatar>
-                <view class="f34 text-center txt-white">{{item.title}}</view>
+        <!-- <u-subsection :list="['秒表','倒计时']" @change="tabChange" :current="current"></u-subsection> -->
+        
+        <view style="padding: 30px 30px 0 30px;">
+        
+            <view v-show="current == 0" style="min-height: 250px;">
+                <led ref="led" v-if="show && start" :mode="3" :twinkle="start && !pause"></led>
+                <view v-else>
+                    <led :mode="4" :val-arr="[0,0,':',0,0]"></led>
+                </view>
             </view>
+            <view v-show="current == 1" style="min-height: 250px;">
+                <!-- <led :mode="4" :val-arr="arr"></led> -->
+            </view>
+        
         </view>
 
         <view class="text-center ui-mt40">
-            <el-input-number v-model="num" :min="1" 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 type="primary" round @click="setStart">{{ start ? '重新开始' : '开始计时'}}</el-button>
+            <el-button round @click="setPause" v-if="start">{{ pause ? '恢复' : '暂停' }}</el-button>
         </view>
     </el-dialog>
 </template>
 
 <script>
+    import led from '@/components/mehaotian-numled/mehaotian-numled.vue';
+
     export default {
-        props: {
-            list: {},
+        components: {
+            led
         },
         data() {
             return {
                 show: false,
-                num: 3,
-                checkList: []
-            }
-        },
-        computed: {
-            viewList() {
-                let list = [];
-                for (var i = 0; i < this.num; i++) {
-                    if (this.checkList[i]) {
-                        list.push(this.checkList[i])
-                    } else {
-                        list.push({
-                            id: i,
-                            student_cartoon_photo: 'https://zhxy.obs.cn-hz1.ctyun.cn/static/student_icon/B6.png',
-                            title: '匿名'
-                        })
-                    }
-                }
-                return list;
+                current : 0,
+                arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
+                start : false,
+                pause : false,
             }
         },
+        computed: {},
         methods: {
             open() {
                 this.show = true;
+                setTimeout(() => {
+                    this.arr = [0, 9, ':', 8, 1];
+                }, 2000);
             },
-            makeRandom() {
-                let max = this.list.length - 1;
-                let numList = this.generateUniqueRandomNumbers(this.num, 0, max);
-                this.checkList = [];
-                this.viewList.forEach((item, index) => {
-                    setTimeout(() => {
-                        this.checkList.push(this.list[numList[index]])
-                    }, 40 * index);
-                })
+            tabChange(index){
+                this.current = index;
             },
-            // 生成随机数
-            makeRandomNum(max) {
-                let min = 1;
-                return Math.floor(Math.random() * (max - min + 1)) + min;
+            setStart(){
+                this.start = true;
+                this.pause = false;
+                this.$nextTick(() => {
+                    this.$refs.led.restart();
+                })
             },
-            // 生成不同数值的随机数
-            generateUniqueRandomNumbers(count, min, max) {
-                let result = [];
-                while (result.length < count) {
-                    let randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
-                    if (result.indexOf(randomNum) === -1) {
-                        result.push(randomNum);
-                    }
+            setPause(){
+                if(this.pause){
+                    this.pause = false;
+                    this.$refs.led.recover();
+                }else{
+                    this.pause = true;
+                    this.$nextTick(() => {
+                        this.$refs.led.pause();
+                    })
                 }
-                return result;
-            },
-            
+            }
         }
     }
 </script>
@@ -98,11 +91,6 @@
     }
 
     /deep/ .el-dialog__body {
-        background-color: rgba(255, 255, 255, .12);
-    }
-
-    .user-item {
-        /* float: left; */
-        margin: 20px;
+        /* background-color: rgba(255, 255, 255, 1); */
     }
 </style>

pages/studentRanked/components/view-button-item.vue

@@ -0,0 +1,38 @@
+<template>
+    <view class="ui-flex-column text-center ui-p bottom-btn-item" @click="onClick">
+        <image :src="src" style="width: 40px;height: 40px;" mode=""></image>
+        <view style="line-height: 1;">
+            <text class="txt-white f24">{{title}}</text>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        props : {
+            src : '',
+            title : ''
+        },
+        methods : {
+            onClick(e){
+                this.$emit('click')
+            }
+        }
+    }
+</script>
+
+<style>
+    .bottom-btn-item,
+    .bottom-btn-item-disabled{
+        position: relative;
+    }
+    .bottom-btn-item-disabled{
+        opacity: 0.5;
+    }
+    
+    .bottom-btn-item:hover {
+        cursor: pointer;
+        background-color: #ffffff3b;
+        border-radius: 8px;
+    }
+</style>

pages/studentRanked/studentRanked.vue

@@ -68,19 +68,16 @@
         <markScore @change='change' @close='onScoreClose' :stuList='activeList' ref="markScore"></markScore>
 
         <!-- 点评记录 -->
-        <markScoreList ref="markScoreList"></markScoreList>
+        <markScoreList ref="markScoreList" :chooseClassId="chooseClassId"></markScoreList>
         
         <!-- 随机点名 -->
         <randomRollCall ref="randomRollCall" :list="studentList" @comment="randomRollComment"></randomRollCall>
 
         <!-- 计时器 -->
         <timerClock ref="timerClock"></timerClock>
-
-        <el-drawer title="排行榜" :visible.sync="showRankList" direction="rtl">
-            <view style="text-align: center;" class="">
-                开发中....!
-            </view>
-        </el-drawer>
+        
+        <!-- 排行榜 -->
+        <rankList ref="rankList" :chooseClassId="chooseClassId"></rankList>
 
         <view class="ui-pull-bottom ui-flex-row ui-p"
             style="background-color: #0000006b;backdrop-filter: blur(4px);border-top: 1px solid #616161;">
@@ -100,69 +97,21 @@
                         </el-dropdown-item>
                     </el-dropdown-menu>
                 </el-dropdown>
-                    
-                <view class="ui-flex-column text-center ui-p bottom-btn-item" @click="$refs.markScoreList.open()">
-                    <image src="../../static/jyicon/kedan.png" style="width: 40px;height: 40px;" mode=""></image>
-                    <view style="line-height: 1;">
-                        <text class="txt-white f24">点评记录</text>
-                    </view>
-                </view>
-                <view class="ui-flex-column text-center ui-p bottom-btn-item" @click="$pageTo('./studentRankedChange')">
-                    <image src="../../static/jyicon/xuewei.png" style="width: 40px;height: 40px;" mode=""></image>
-                    <view style="line-height: 1;">
-                        <text class="txt-white f24">座位调整</text>
-                    </view>
-                </view>
-                <view class="ui-flex-column text-center ui-p bottom-btn-item" @click="setMulti">
-                    <image src="../../static/jyicon/gerenzhongxin.png" style="width: 40px;height: 40px;" mode=""></image>
-                    <view style="line-height: 1;">
-                        <text class="txt-white f24" v-if="multiSelect">取消多选</text>
-                        <text class="txt-white f24" v-else>学生多选</text>
-                    </view>
-                </view>
-
-                <view class="ui-flex-column text-center ui-p bottom-btn-item" @click="$refs.randomRollCall.open()">
-                    <image src="../../static/jyicon/fangfa.png" style="width: 40px;height: 40px;" mode=""></image>
-                    <view style="line-height: 1;">
-                        <text class="txt-white f24">随机点名</text>
-                    </view>
-                </view>
-
-                <view class="ui-flex-column text-center ui-p bottom-btn-item" @click="$refs.timerClock.open()">
-                    <image src="../../static/jyicon/shalou.png" style="width: 40px;height: 40px;" mode=""></image>
-                    <view style="line-height: 1;">
-                        <text class="txt-white f24">计时器</text>
-                    </view>
-                </view>
-
-                <view class="ui-flex-column text-center ui-p" :class="[lastTipBatchId ? 'bottom-btn-item' : 'bottom-btn-item-disabled']" @click="repealScore()">
-                    <image src="../../static/jyicon/naozhong.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/kedan.png" @click="$refs.markScoreList.open()"></view-btn-item>
+                <view-btn-item title="座位调整" src="../../static/jyicon/xuewei.png" @click="$pageTo('./studentRankedChange')"></view-btn-item>
+                <view-btn-item :title="multiSelect ? '取消多选' : '学生多选'" src="../../static/jyicon/gerenzhongxin.png" @click="setMulti"></view-btn-item>
+                <view-btn-item title="随机点名" src="../../static/jyicon/fangfa.png" @click="$refs.randomRollCall.open()"></view-btn-item>
+                <view-btn-item title="计时器" src="../../static/jyicon/shalou.png" @click="$refs.timerClock.open()"></view-btn-item>
+                <view-btn-item title="撤销点评" src="../../static/jyicon/dingyue.png"
+                    :class="[lastTipBatchId ? 'bottom-btn-item' : 'bottom-btn-item-disabled']"
+                    @click="repealScore()"></view-btn-item>
             </view>
 
             <view class="ui-flex-row">
-                <view class="ui-flex-column text-center ui-p bottom-btn-item" @click="showRankList = true">
-                    <image src="../../static/jyicon/jiangpai.png" style="width: 40px;height: 40px;" mode=""></image>
-                    <view style="line-height: 1;">
-                        <text class="txt-white f24">排行榜</text>
-                    </view>
-                </view>
-                <!-- <view class="ui-flex-column text-center ui-p bottom-btn-item">
-                    <image src="../../static/uni.png" style="width: 40px;height: 40px;" mode=""></image>
-                    <view style="line-height: 1;">
-                        <text class="txt-white f24">切换老师</text>
-                    </view>
-                </view> -->
-                <view class="ui-flex-column text-center ui-p bottom-btn-item" @click="loginOut()">
-                    <image src="../../static/jyicon/xiaoxi.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/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/xiaoxi.png" @click="loginOut()"></view-btn-item>
             </view>
         </view>
     </view>
@@ -173,6 +122,8 @@
     import markScoreList from './components/mark-score-list.vue'
     import randomRollCall from './components/random-roll-call.vue'
     import timerClock from './components/timer-clock.vue'
+    import rankList from './components/rank-list.vue'
+    import viewBtnItem from './components/view-button-item.vue'
     import {
         getStuSchoolIdByStuClassId
     } from "@/common/api/stu.js"
@@ -182,6 +133,8 @@
             markScoreList,
             randomRollCall,
             timerClock,
+            rankList,
+            viewBtnItem,
         },
         data() {
             return {
@@ -193,12 +146,7 @@
                 chooseClassId: '',
                 activeList: [],
                 multiSelect: false,
-                // 排行榜
-                showRankList: false,
-                // tabList: [],
-                // studentTab: [],
-                // type: 1,
-                lastTipBatchId : ''
+                lastTipBatchId : '' // 最后点评的uuid，用于撤销
             }
         },
         computed : {
@@ -215,11 +163,13 @@
             }
         },
         mounted() {
-            console.log(this.$store.state.teacherInfo)
             this.id = this.$store.state.teacherInfo.selfclass.id
             this.getClassroomList();
         },
         methods: {
+            debug(){
+                console.log(this)
+            },
             // change(e) {
             //     this.type = e == 0 ? 1 : 2
             //     this.getTabs()
@@ -485,17 +435,5 @@
         border-left: 0;
     }
 
-    .bottom-btn-item,
-    .bottom-btn-item-disabled{
-        position: relative;
-    }
-    .bottom-btn-item-disabled{
-        opacity: 0.5;
-    }
-
-    .bottom-btn-item:hover {
-        cursor: pointer;
-        background-color: #ffffff3b;
-        border-radius: 8px;
-    }
+    
 </style>