|
@@ -1,273 +1,248 @@
|
|
|
-import { defineComponent, reactive } from 'vue';
|
|
|
+import { computed, defineComponent, reactive } from 'vue';
|
|
|
import styles from './index.module.less';
|
|
|
-import bannerPerson from './images/bannerPerson.png';
|
|
|
-import { NIcon, NImage, NDataTable, NButton, NModal } from 'naive-ui';
|
|
|
-import leftDot from './images/leftDot.png';
|
|
|
-import rightDot from './images/rightDot.png';
|
|
|
-import lineIcon from './images/lineIcon.png';
|
|
|
-import musicIcon from './images/musicIcon.png';
|
|
|
-import Study from './components/study';
|
|
|
-import Pagination from '@/components/pagination';
|
|
|
+import {
|
|
|
+ NImage,
|
|
|
+ NButton,
|
|
|
+ NAvatarGroup,
|
|
|
+ NForm,
|
|
|
+ NFormItem,
|
|
|
+ NSelect,
|
|
|
+ NSpace,
|
|
|
+ NModal
|
|
|
+} from 'naive-ui';
|
|
|
import headerD from './images/headerD.png';
|
|
|
import defultHeade from '@/components/layout/images/teacherIcon.png';
|
|
|
-import cloundIcon from './images/cloundIcon.png';
|
|
|
-import goClass from './images/goClass.png';
|
|
|
-import boxIcon from './images/boxIcon.png';
|
|
|
import TeachList from './components/teachList';
|
|
|
-import ChioseModal from './modals/chioseModal';
|
|
|
-import blueArrow from './images/blueArrow.png';
|
|
|
-import soureIcon from './images/soureIcon.png';
|
|
|
+import blackBoardBg from './images/blackboard_bg.png';
|
|
|
+import teacherMan from './images/teacher_man.png';
|
|
|
+import teacherWoman from './images/teacher_woman.png';
|
|
|
+import iconLession from './images/icon-lession.png';
|
|
|
+import iconBook from './images/icon-book.png';
|
|
|
+import iconDetail from './images/icon-detail.png';
|
|
|
+import iconSubject from './images/icon-subject.png';
|
|
|
+import iconTo from './images/icon-to.png';
|
|
|
+import t1 from './images/t1.png';
|
|
|
+import t2 from './images/t2.png';
|
|
|
+import t3 from './images/t3.png';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
+import { useUserStore } from '/src/store/modules/users';
|
|
|
+import SelectClass from './modals/selectClass';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import { weekToCN } from '/src/utils/contants';
|
|
|
+import { getCLassStudent } from '../classList/api';
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
name: 'home-page',
|
|
|
setup() {
|
|
|
const router = useRouter();
|
|
|
- const state = reactive({
|
|
|
- loading: false,
|
|
|
- pagination: {
|
|
|
- page: 1,
|
|
|
- rows: 10,
|
|
|
- pageTotal: 4
|
|
|
- },
|
|
|
- tableList: [
|
|
|
- {
|
|
|
- teacherName: '孙忆枫',
|
|
|
- createTime: '2023-06-27',
|
|
|
- endTime: '2023-06-30',
|
|
|
- status: 'ing',
|
|
|
- studentNum: 100,
|
|
|
- submitNum: 100,
|
|
|
- quantityNum: 60,
|
|
|
- submitRate: 100,
|
|
|
- quantityRate: 60
|
|
|
- },
|
|
|
- {
|
|
|
- teacherName: '孙忆枫',
|
|
|
- createTime: '2023-06-27',
|
|
|
- endTime: '2023-06-30',
|
|
|
- status: 'ing',
|
|
|
- studentNum: 100,
|
|
|
- submitNum: 100,
|
|
|
- quantityNum: 60,
|
|
|
- submitRate: 100,
|
|
|
- quantityRate: 60
|
|
|
- },
|
|
|
- {
|
|
|
- teacherName: '孙忆枫',
|
|
|
- createTime: '2023-06-27',
|
|
|
- endTime: '2023-06-30',
|
|
|
- status: 'ing',
|
|
|
- studentNum: 100,
|
|
|
- submitNum: 100,
|
|
|
- quantityNum: 60,
|
|
|
- submitRate: 100,
|
|
|
- quantityRate: 60
|
|
|
- },
|
|
|
- {
|
|
|
- teacherName: '孙忆枫',
|
|
|
- createTime: '2023-06-25',
|
|
|
- endTime: '2023-06-26',
|
|
|
- status: 'end',
|
|
|
- studentNum: 100,
|
|
|
- submitNum: 100,
|
|
|
- quantityNum: 60,
|
|
|
- submitRate: 100,
|
|
|
- quantityRate: 60
|
|
|
- }
|
|
|
- ] as any,
|
|
|
- goCourseVisiable: false
|
|
|
+ const userStore = useUserStore();
|
|
|
+ const forms = reactive({
|
|
|
+ applyClass: null as any,
|
|
|
+ applyClassItem: {} as any, // 选择的内容
|
|
|
+ applyStatus: false,
|
|
|
+ studentList: [] as any
|
|
|
});
|
|
|
- const columns = () => {
|
|
|
- return [
|
|
|
- {
|
|
|
- title: '布置老师',
|
|
|
- key: 'teacherName'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '布置时间',
|
|
|
- key: 'createTime'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '截止时间',
|
|
|
- key: 'endTime'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '训练状态',
|
|
|
- key: 'status',
|
|
|
- render(row: any) {
|
|
|
- return row.status == 'ing' ? (
|
|
|
- <div class={styles.indDot}>
|
|
|
- {' '}
|
|
|
- <span></span> 进行中
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- <div class={styles.endDot}>
|
|
|
- <span></span>已结束
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '布置人数',
|
|
|
- key: 'studentNum'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '提交人数',
|
|
|
- key: 'submitNum'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '合格人数',
|
|
|
- key: 'quantityNum'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '提交率',
|
|
|
- key: 'submitRate',
|
|
|
- render(row: any) {
|
|
|
- return <span>{row.submitRate}%</span>;
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '合格率',
|
|
|
- key: 'quantityRate',
|
|
|
- render(row: any) {
|
|
|
- return <span>{row.quantityRate}%</span>;
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- key: 'id',
|
|
|
- render(row: any) {
|
|
|
- return (
|
|
|
- <NButton text type="primary">
|
|
|
- 详情
|
|
|
- </NButton>
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- ];
|
|
|
- };
|
|
|
- const getList = () => {
|
|
|
- console.log('1');
|
|
|
+
|
|
|
+ // 显示选择的内容
|
|
|
+ const bookInfo = computed(() => {
|
|
|
+ return '';
|
|
|
+ });
|
|
|
+
|
|
|
+ // 学生列表
|
|
|
+ // getStdentList
|
|
|
+ // 应用选择年级班级
|
|
|
+ const onApplyConfirm = async (item: any) => {
|
|
|
+ try {
|
|
|
+ //
|
|
|
+ const { data } = await getCLassStudent({
|
|
|
+ page: 1,
|
|
|
+ rows: 999,
|
|
|
+ classGroupId: item.classGroupId
|
|
|
+ });
|
|
|
+
|
|
|
+ const temps = data.rows || [];
|
|
|
+ temps.forEach((row: any) => {
|
|
|
+ forms.studentList.push({
|
|
|
+ name: row.nickname,
|
|
|
+ src: row.avatar
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log(item, data);
|
|
|
+ forms.applyClass = item.currentGradeLabel + item.className;
|
|
|
+ forms.applyClassItem = item;
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
};
|
|
|
return () => (
|
|
|
<div class={styles.homeWrap}>
|
|
|
<div class={styles.homeInfoLeft}>
|
|
|
<div class={styles.homeBanner}>
|
|
|
- <img class={styles.bannerPerson} src={bannerPerson}></img>
|
|
|
- <div class={styles.bannerInfo}>
|
|
|
- <h3>Hi,张老师 下午好!</h3>
|
|
|
- <p class={styles.bannerMsg}>
|
|
|
- 您有 <span class={styles.bannerRed}> 4 </span>
|
|
|
- <span class={styles.bannerRrey}> 条消息未读,</span>
|
|
|
- <span class={styles.bannerRed}> 3 </span>
|
|
|
- 门课程未布置作业,请及时处理哦!
|
|
|
- </p>
|
|
|
- <div class={styles.bannerBtn}>
|
|
|
- 立即处理{' '}
|
|
|
- <NIcon class={styles.rotueRight}>
|
|
|
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
|
- <path
|
|
|
- d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L9.15 2.98c-.49-.49-1.28-.49-1.77 0s-.49 1.28 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76z"
|
|
|
- fill="currentColor"></path>
|
|
|
- </svg>
|
|
|
- </NIcon>
|
|
|
+ <div class={styles.welcomeInfo}>
|
|
|
+ <div class={styles.userInfo}>
|
|
|
+ <div class={styles.userName}>
|
|
|
+ Hi,{userStore.getUserInfo?.nickname} 下午好~
|
|
|
+ </div>
|
|
|
+ <div class={styles.userTime}>
|
|
|
+ {dayjs().format('MM月DD日')},{weekToCN[dayjs().day()]}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class={styles.userTips}>
|
|
|
+ <span>欢迎您使用酷乐秀课堂乐器数字化教学平台!</span>
|
|
|
+ <NButton color="#40A1FF" round class={styles.guide_btn}>
|
|
|
+ 功能引导
|
|
|
+ <i></i>
|
|
|
+ </NButton>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.applyInfo}>
|
|
|
+ {userStore.getUserInfo.gender === 1 ? (
|
|
|
+ <img src={teacherMan} class={styles.teacherMan} />
|
|
|
+ ) : (
|
|
|
+ <img src={teacherWoman} class={styles.teacherWoman} />
|
|
|
+ )}
|
|
|
+
|
|
|
+ <div class={styles.blackborad}>
|
|
|
+ <img src={blackBoardBg} class={styles.blackBoardBg} />
|
|
|
+ </div>
|
|
|
+ <div class={styles.applyContainer}>
|
|
|
+ <div class={styles.applyTitle}>
|
|
|
+ <span
|
|
|
+ class={styles.className}
|
|
|
+ onClick={() => (forms.applyStatus = true)}>
|
|
|
+ {forms.applyClass || '请选择班级'}
|
|
|
+ </span>
|
|
|
+ <NAvatarGroup options={forms.studentList} max={5} />
|
|
|
+ </div>
|
|
|
+ <div class={styles.informations}>{bookInfo.value}</div>
|
|
|
+
|
|
|
+ <NForm showLabel={false}>
|
|
|
+ <NFormItem>
|
|
|
+ <div class={styles.selectContainer}>
|
|
|
+ <img src={iconLession} />
|
|
|
+ <NSelect placeholder="请选择教材版本" />
|
|
|
+ </div>
|
|
|
+ </NFormItem>
|
|
|
+ <NFormItem>
|
|
|
+ <div class={styles.selectContainer}>
|
|
|
+ <img src={iconBook} />
|
|
|
+ <NSelect placeholder="请选择册别" />
|
|
|
+ </div>
|
|
|
+ </NFormItem>
|
|
|
+ <NFormItem>
|
|
|
+ <div class={styles.selectContainer}>
|
|
|
+ <img src={iconDetail} />
|
|
|
+ <NSelect placeholder="请选择章节" />
|
|
|
+ </div>
|
|
|
+ </NFormItem>
|
|
|
+ <NFormItem>
|
|
|
+ <div class={styles.selectContainer}>
|
|
|
+ <img src={iconSubject} />
|
|
|
+ <NSelect placeholder="请选择声部" />
|
|
|
+ </div>
|
|
|
+ </NFormItem>
|
|
|
+ <NSpace class={styles.btnGroup} justify="center">
|
|
|
+ <NButton
|
|
|
+ round
|
|
|
+ block
|
|
|
+ class={styles.startClass}
|
|
|
+ color="#FF6E4C">
|
|
|
+ 开始上课
|
|
|
+ </NButton>
|
|
|
+ <NButton
|
|
|
+ round
|
|
|
+ block
|
|
|
+ class={styles.beforClass}
|
|
|
+ color="#5B64D1"
|
|
|
+ onClick={() => router.push('/prepare-lessons')}>
|
|
|
+ 去备课
|
|
|
+ </NButton>
|
|
|
+ </NSpace>
|
|
|
+ </NForm>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <NImage
|
|
|
- class={styles.leftDot}
|
|
|
- src={leftDot}
|
|
|
- previewDisabled></NImage>
|
|
|
- <NImage
|
|
|
- class={styles.rightDot}
|
|
|
- src={rightDot}
|
|
|
- previewDisabled></NImage>
|
|
|
- <NImage
|
|
|
- class={styles.lineIcon}
|
|
|
- src={lineIcon}
|
|
|
- previewDisabled></NImage>
|
|
|
- <NImage
|
|
|
- class={styles.musicIcon}
|
|
|
- src={musicIcon}
|
|
|
- previewDisabled></NImage>
|
|
|
</div>
|
|
|
- <div class={styles.leftBottomWrap}>
|
|
|
- <Study></Study>
|
|
|
+
|
|
|
+ <div class={styles.toolContainer}>
|
|
|
+ <div class={styles.toolTips}>
|
|
|
+ <div class={styles.toolTitle}>工具箱</div>
|
|
|
+ <div class={styles.toolContent}>
|
|
|
+ 这里是常用的教学辅助工具,可帮助学生集中注意力、提高演奏效率,使演奏更完整平稳。让您在课堂上完成更好的教学。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img src={iconTo} class={styles.iconTo} />
|
|
|
+ <div class={styles.toolFunction}>
|
|
|
+ <div class={[styles.toolItem, styles.item1]}>
|
|
|
+ <img src={t1} />
|
|
|
+ <p class={styles.toolMemo}>提升效率,练习好节奏</p>
|
|
|
+ <NButton class={styles.btn1}>节拍器</NButton>
|
|
|
+ </div>
|
|
|
+ <div class={[styles.toolItem, styles.item2]}>
|
|
|
+ <img src={t2} />
|
|
|
+ <p class={styles.toolMemo}>精准调音,一劳永逸</p>
|
|
|
+ <NButton class={styles.btn2}>调音器</NButton>
|
|
|
+ </div>
|
|
|
+ <div class={[styles.toolItem, styles.item3]}>
|
|
|
+ <img src={t3} />
|
|
|
+ <p class={styles.toolMemo}>创造时间,集中注意力</p>
|
|
|
+ <NButton class={styles.btn3}>计时器</NButton>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class={styles.homeInfoRight}>
|
|
|
- <div class={styles.homeInfoRightTop}>
|
|
|
- <div class={styles.HeaderWrap}>
|
|
|
- <NImage
|
|
|
- previewDisabled
|
|
|
- class={styles.headerD}
|
|
|
- src={headerD}></NImage>
|
|
|
- <NImage
|
|
|
- previewDisabled
|
|
|
- class={styles.defultHeade}
|
|
|
- src={defultHeade}></NImage>
|
|
|
+ <div class={styles.rightTeachingWrap}>
|
|
|
+ <div class={styles.headerContainer}>
|
|
|
+ <div class={styles.HeaderWrap}>
|
|
|
+ <NImage
|
|
|
+ previewDisabled
|
|
|
+ class={styles.headerD}
|
|
|
+ src={headerD}></NImage>
|
|
|
+ <NImage
|
|
|
+ previewDisabled
|
|
|
+ class={styles.defultHeade}
|
|
|
+ src={defultHeade}></NImage>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class={styles.headerInfo}>
|
|
|
<p class={styles.headerTitle}>张晚意</p>
|
|
|
<p class={styles.headerSubTitle}>武汉小学 | 音乐老师</p>
|
|
|
</div>
|
|
|
- <div class={styles.quickEnter}>
|
|
|
- <h3 class={styles.rightTitle}>
|
|
|
- <div class={styles.titleDot}></div>快捷入口
|
|
|
- </h3>
|
|
|
- <div class={styles.quickList}>
|
|
|
- <div
|
|
|
- class={styles.quickItem}
|
|
|
- onClick={() => (state.goCourseVisiable = true)}>
|
|
|
- <NImage
|
|
|
- previewDisabled
|
|
|
- class={styles.quickItemImg}
|
|
|
- src={goClass}></NImage>
|
|
|
- <p>开始上课</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class={styles.quickItem}>
|
|
|
- <NImage
|
|
|
- previewDisabled
|
|
|
- class={styles.quickItemImg}
|
|
|
- src={soureIcon}></NImage>
|
|
|
- <p>布置作业</p>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class={styles.quickItem}
|
|
|
- onClick={() => router.push('/natural-resources')}>
|
|
|
- <NImage
|
|
|
- previewDisabled
|
|
|
- class={styles.quickItemImg}
|
|
|
- src={cloundIcon}></NImage>
|
|
|
- <p>我的资源</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class={styles.rightTeachingWrap}>
|
|
|
<div class={styles.rightTeachingWrapTitle}>
|
|
|
<h3 class={styles.rightTitle}>
|
|
|
- <div class={styles.titleDot}></div>教学进度
|
|
|
+ <div class={styles.titleDot}></div>使用记录
|
|
|
</h3>
|
|
|
<div class={styles.lookMore}>
|
|
|
- 查看全部{' '}
|
|
|
- <NImage
|
|
|
- src={blueArrow}
|
|
|
- class={styles.lookMoreArrow}
|
|
|
- previewDisabled></NImage>
|
|
|
+ 三年级2班
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
|
+ <path
|
|
|
+ d="M6 9l6 6l6-6"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="2"
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"></path>
|
|
|
+ </svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
<TeachList></TeachList>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ {/* 添加自定义教材 */}
|
|
|
<NModal
|
|
|
- v-model:show={state.goCourseVisiable}
|
|
|
+ v-model:show={forms.applyStatus}
|
|
|
preset="card"
|
|
|
- class={styles.chioseModel}
|
|
|
- title={'选择课件'}>
|
|
|
- <ChioseModal
|
|
|
- onClose={() => (state.goCourseVisiable = false)}></ChioseModal>
|
|
|
+ showIcon={false}
|
|
|
+ class={['modalTitle background', styles.assignHomework]}
|
|
|
+ title={'选择年级'}
|
|
|
+ blockScroll={false}>
|
|
|
+ <SelectClass
|
|
|
+ onConfirm={(item: any) => onApplyConfirm(item)}
|
|
|
+ onClose={() => (forms.applyStatus = false)}
|
|
|
+ />
|
|
|
</NModal>
|
|
|
</div>
|
|
|
);
|