From 3e4e9f5329916c9966246450b475cc7fa005e8c6 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Thu, 30 May 2024 13:33:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=9B=E4=BA=8B=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/match/details/index.vue   |   30 +-
 src/pages/match/list/index.vue      |    8 +-
 src/pages/record/show/index.vue     |   16 +-
 src/pages/station/preview/index.vue | 1132 +++++++++++++--------------
 4 files changed, 564 insertions(+), 622 deletions(-)

diff --git a/src/pages/match/details/index.vue b/src/pages/match/details/index.vue
index e225141..836c5f0 100644
--- a/src/pages/match/details/index.vue
+++ b/src/pages/match/details/index.vue
@@ -76,7 +76,7 @@
                 </template>
 
                 <template v-if="form.completeCompetitionSetup.competitionType">
-                  <p>每个团队参赛人数限制：{{ rule.customNumber || '不限制' }}</p>
+                  <p>每个团队参赛人数限制：{{ rule.teamNumLimit ? rule.customNumber : '不限制' }}</p>
                   <p>团队成绩计算方式：{{ teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod) &&
                     teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod).name }}</p>
                 </template>
@@ -272,7 +272,8 @@
                         <th width="110">参赛人数限制</th>
                         <th>
                           允许参赛人员
-                          <el-tooltip v-if="stageTip" effect="dark" :content="stageTip" placement="bottom">
+                          <el-tooltip v-if="stageTip" effect="dark" content="阶段参赛人员异常，请尽快按照阶段赛规则调整，否则可能影响比赛成绩！"
+                            placement="bottom">
                             <i class="info el-icon-warning" style="margin-right: 10px;color: #ff1650;"></i>
                           </el-tooltip>
                         </th>
@@ -285,7 +286,7 @@
                         <td>{{ i + 1 }}</td>
                         <td>{{ item.stageName || form.name }}</td>
                         <template v-if="form.completeCompetitionSetup.competitionType">
-                          <td>{{ item.customNumber || '不限制' }}</td>
+                          <td>{{ item.teamNumLimit ? item.customNumber : '不限制' }}</td>
                           <td>
                             <template v-if="item.participants">
                               <el-tag v-for="tag in item.participants" :key="tag.name" class="m-r-5 m-b-5"
@@ -296,7 +297,7 @@
                             <span v-else class="m-r-5">无</span>
                             <i v-if="info.team.captain === 0 && status < 4" class="el-icon-edit icon"
                               @click="selectPar(item)"></i>
-                            <el-tooltip v-if="stageTips.length && stageTips[i]" effect="dark" :content="stageTips[i]"
+                            <el-tooltip v-if="stageTip.length && stageTip[i]" effect="dark" :content="stageTip[i]"
                               placement="bottom">
                               <el-tag type="danger" class="m-l-5">异常</el-tag>
                             </el-tooltip>
@@ -651,8 +652,7 @@ export default {
       now: '',
       allocated: 0,
       teamErrors: [],
-      stageTip: '',
-      stageTips: [],
+      stageTip: null,
       showButton: false,
       assignRecord: {},
       allocating: false,
@@ -911,9 +911,8 @@ export default {
         teamId: this.info.teamId
       })
       this.teamErrors = res.teamTip.split(';').filter(e => e)
-      if (res.stageTip) {
+      if (Object.keys(res.stageTip)) {
         this.stageTip = res.stageTip
-        this.stageTips = res.stageTip.split(';').filter(e => e)
       }
     },
     // 编辑保存
@@ -1211,8 +1210,8 @@ export default {
     chooseSubmit () {
       const accountIds = this.checkedMembers
       if (!accountIds.length) return Util.errorMsg('请选择参赛成员！')
-      const limit = this.curRow.teamNumLimit // 参赛人数限制
-      if (limit && accountIds.length > limit) return Util.errorMsg(`请选择${this.curRow.customNumber}个以下参赛成员！`) // 选择的参赛人员个数不能大于参赛人数限制
+      const { customNumber, teamNumLimit } = this.curRow // 参赛人数限制
+      if (teamNumLimit && accountIds.length > customNumber) return Util.errorMsg(`请选择${this.curRow.customNumber}个以下参赛成员！`) // 选择的参赛人员个数不能大于参赛人数限制
       this.$post(this.api.stageSelectParticipants, {
         accountIds,
         competitionId: this.id,
@@ -1324,10 +1323,10 @@ export default {
     afterCreateTeam () {
       // 赛事自动分配状态为开启，则直接提示；否则弹框询问是否要启用团队自动分配
       if (this.allocated) {
-        Util.successMsg('团队创建成功，系统将自动帮您分配阶段参赛成员，您也可以到参数信息进行指定')
+        Util.successMsg('团队创建成功，系统将在报名结束后自动帮您分配阶段参赛成员，您也可以到参数信息进行指定')
       } else {
         // 未分配
-        this.$confirm('是否要启用自动分配成员参加阶段赛项', '提示', {
+        this.$confirm('报名成功！是否要启用自动分配成员参加阶段赛项？启用后，将在报名结束后给团队成员自动分配阶段参赛人员。', '提示', {
           cancelButtonText: '否',
           confirmButtonText: '是',
           type: 'success',
@@ -1348,7 +1347,12 @@ export default {
     // 自动分配
     automaticAllocationMember () {
       const whether = this.assignRecord.assignOrNot && this.status < 3
-      this.$confirm(`确定${whether ? '取消' : ''}自动分配阶段成员`, '提示', {
+      const tips = this.status < 3 ?
+        whether ?
+          '确定取消自动分配阶段成员？' :
+          '是否要启用自动分配成员参加阶段赛项？启用后，将在报名结束后给团队成员自动分配阶段参赛人员。'
+        : '确定立即自动分配阶段成员？'
+      this.$confirm(tips, '提示', {
         cancelButtonText: '否',
         confirmButtonText: '是',
         type: 'success',
diff --git a/src/pages/match/list/index.vue b/src/pages/match/list/index.vue
index 1c2f762..a1390ec 100644
--- a/src/pages/match/list/index.vue
+++ b/src/pages/match/list/index.vue
@@ -52,7 +52,7 @@
                 <dt>筛选排序：</dt>
                 <dd v-for="(item, i) in sorts" :key="i" :class="{ active: form.sequence == item.id }"
                   @click="changeSort(item.id)">{{
-                  item.name }}</dd>
+                    item.name }}</dd>
               </dl>
             </div>
           </div>
@@ -112,7 +112,7 @@
                       <el-dropdown-menu slot="dropdown">
                         <el-dropdown-item v-for="(stage, i) in item.playingStages" :key="i" :command="stage">进入{{
                           stage.stageName
-                          }}</el-dropdown-item>
+                        }}</el-dropdown-item>
                       </el-dropdown-menu>
                     </el-dropdown>
                     <p class="status" v-else-if="item.status != 4 || (item.status == 4 && item.curStage)"
@@ -661,10 +661,10 @@ export default {
       const res = await this.$post(`${this.api.viewEventAllocationInformation}?competitionId=${this.teamForm.competitionId}`)
       // 赛事自动分配状态为开启，则直接提示；否则弹框询问是否要启用团队自动分配
       if (res.data && res.data.assignOrNot) {
-        Util.successMsg('团队创建成功，系统将自动帮您分配阶段参赛成员，您也可以到参数信息进行指定')
+        Util.successMsg('团队创建成功，系统将在报名结束后自动帮您分配阶段参赛成员，您也可以到参数信息进行指定')
       } else {
         // 未分配
-        this.$confirm('是否要启用自动分配成员参加阶段赛项', '提示', {
+        this.$confirm('报名成功！是否要启用自动分配成员参加阶段赛项？启用后，将在报名结束后给团队成员自动分配阶段参赛人员。', '提示', {
           cancelButtonText: '否',
           confirmButtonText: '是',
           type: 'success',
diff --git a/src/pages/record/show/index.vue b/src/pages/record/show/index.vue
index b9a9526..a433cd4 100644
--- a/src/pages/record/show/index.vue
+++ b/src/pages/record/show/index.vue
@@ -263,16 +263,19 @@ export default {
           let index = 1
           e.lcRuleRecords.map((n, i) => {
             n.index = index
+            // 下面几行是导出的时候后端需要的字段
+            e.assessmentPoint += `${index}.${n.name};${n.ruleOperation === '或' ? '\n或\n' : ''}`
+            e.referenceAnswer += `${index}.${n.ruleAnswer};${n.ruleOperation === '或' ? '\n或\n' : ''}`
+            if (!n.userAnswer) n.userAnswer = '未填写'
 
             if (n.ruleOperation === '或') {
               index = 1
             } else {
               index++
             }
-            e.assessmentPoint += `${i + 1}.${n.name}`
-            e.referenceAnswer += `${i + 1}.${n.ruleAnswer}`
-            if (!n.userAnswer) n.userAnswer = '未填写'
-            e.answer += `${i + 1}.${n.userAnswer}`
+          })
+          e.lcStudentAnswer.map((n, i) => {
+            e.answer += `${i + 1}.${n.userAnswer};`
           })
         })
       } else { // python系统显示图片（从userScores里取）
@@ -301,10 +304,9 @@ export default {
         e.id = i + 1
         if (e.referenceAnswer && typeof e.referenceAnswer === 'string') e.referenceAnswer = e.referenceAnswer.replace(/<[^>]+>/g, '').replace(/(&nbsp;|&amp;|%s)/g, '').replace(/>/g, '&gt;').replace(/</g, '&lt;')
         if (e.answer && typeof e.answer === 'string') e.answer = e.answer.replace(/<[^>]+>/g, '').replace(/(&nbsp;|&amp;|%s)/g, '').replace(/>/g, '&gt;').replace(/</g, '&lt;')
+        delete e.lcRuleRecords
+        delete e.lcStudentAnswer
       })
-      // for (const i in form) {
-      //   if (form[i] && typeof form[i] === 'string') form[i] = form[i].replace(/<[^>]+>/g, '')
-      // }
       form.purpose = form.purpose.replace(/<[^>]+>/g, '')
       this.$post(this.isLc ? this.api.exportBankExperimentReport : this.api.exportLabReport, {
         ...form,
diff --git a/src/pages/station/preview/index.vue b/src/pages/station/preview/index.vue
index a60990a..2ad7b80 100644
--- a/src/pages/station/preview/index.vue
+++ b/src/pages/station/preview/index.vue
@@ -2,157 +2,92 @@
   <div class="wrap">
     <breadcrumb :routes.sync="routes" />
     <div class="flex">
-      <div class="cover"
-           :class="{'is-word': showMask1}">
+      <div class="cover" :class="{ 'is-word': showMask1 }">
         <!--实验台不显示课程封面-->
-        <img v-if="coverUrl"
-             :src="coverUrl"
-             alt=""
-             width="100%"
-             height="100%">
+        <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
         <template v-else-if="iframeSrc">
-          <iframe class="inner fileIframe"
-                  id="fileIframe"
-                  :src="iframeSrc"
-                  frameborder="0"></iframe>
+          <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
           <template v-if="showMask">
-            <div class="mask"
-                 style="top: 0;width:100%;height: 48px;"></div>
-            <div class="mask"
-                 style="top: 53px;width:100%;height: 30px;"></div>
-            <div class="mask"
-                 style="bottom: 0;right: 0;width:280px;height: 22px;background-color: #444;"></div>
+            <div class="mask" style="top: 0;width:100%;height: 48px;"></div>
+            <div class="mask" style="top: 53px;width:100%;height: 30px;"></div>
+            <div class="mask" style="bottom: 0;right: 0;width:280px;height: 22px;background-color: #444;"></div>
           </template>
           <template v-if="showMask1">
-            <div class="word-mask"
-                 style="height: 40px;"></div>
-            <div class="word-mask2"
-                 style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
+            <div class="word-mask" style="height: 40px;"></div>
+            <div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
           </template>
           <template v-if="showMask2">
-            <div class="excel-mask1"
-                 style="height: 48px;"></div>
+            <div class="excel-mask1" style="height: 48px;"></div>
           </template>
         </template>
-        <div class="pdf"
-             v-else-if="pdfSrc">
-          <img class="full"
-               src="@/assets/img/screen/full.png"
-               alt=""
-               @click="fullScreen">
+        <div class="pdf" v-else-if="pdfSrc">
+          <img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen">
           <p class="arrow">
-            <span @click="changePdfPage(0)"
-                  class="turn el-icon-arrow-left"
-                  :class="{grey: currentPage==1}"></span>
+            <span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{ grey: currentPage == 1 }"></span>
             {{ currentPage }} / {{ pageCount }}
-            <span @click="changePdfPage(1)"
-                  class="turn el-icon-arrow-right"
-                  :class="{grey: currentPage==pageCount}"></span>
+            <span @click="changePdfPage(1)" class="turn el-icon-arrow-right"
+              :class="{ grey: currentPage == pageCount }"></span>
           </p>
           <div style='color:#393A3D;height: 30px;background: #393A3D;'></div>
-          <pdf class="pdf-wrap"
-               :src="pdfSrc"
-               :page="currentPage"
-               @num-pages="pageCount=$event"
-               @page-loaded="currentPage=$event"
-               @loaded="loadPdfHandler">
+          <pdf class="pdf-wrap" :src="pdfSrc" :page="currentPage" @num-pages="pageCount = $event"
+            @page-loaded="currentPage = $event" @loaded="loadPdfHandler">
           </pdf>
         </div>
-        <div class="inner"
-             v-else-if="playAuth">
-          <div class="video_wid"
-               id="player"></div>
+        <div class="inner" v-else-if="playAuth">
+          <div class="video_wid" id="player"></div>
         </div>
-        <div class="inner"
-             v-else-if="videoSrc">
-          <video class="video"
-                 :key="videoSrc"
-                 width="100%"
-                 height="100%"
-                 autoplay
-                 controls>
-            <source :src="videoSrc"
-                    type="video/mp4">
+        <div class="inner" v-else-if="videoSrc">
+          <video class="video" :key="videoSrc" width="100%" height="100%" autoplay controls>
+            <source :src="videoSrc" type="video/mp4">
             您的浏览器不支持 video 标签。
           </video>
         </div>
       </div>
       <div class="catalog">
-        <el-button v-if="!overdue"
-                   class="renew"
-                   type="primary"
-                   size="small"
-                   @click="showBuy">续费</el-button>
-        <a v-else
-           class="entry"
-           @click="entry">进入实验</a>
+        <el-button v-if="!overdue" class="renew" type="primary" size="small" @click="showBuy">续费</el-button>
+        <a v-else class="entry" @click="entry">进入实验</a>
         <div class="list">
           <h4 class="title">{{ curriculumName || courseName }}</h4>
           <div>
             <h6 class="pro-title">我的学习进度</h6>
-            <el-progress :stroke-width="12"
-                         :percentage="schedule"
-                         :format="percentFormat"
-                         :text-color="'#fff'"></el-progress>
+            <el-progress :stroke-width="12" :percentage="schedule" :format="percentFormat"
+              :text-color="'#fff'"></el-progress>
           </div>
           <div class="types">
-            <div :class="['item', { active: type === 1 }]"
-                 @click="typeChange(1)">
+            <div :class="['item', { active: type === 1 }]" @click="typeChange(1)">
               <i class="icon el-icon-notebook-2"></i> 目录
             </div>
-            <div :class="['item', { active: type === 2 }]"
-                 @click="typeChange(2)">
+            <div :class="['item', { active: type === 2 }]" @click="typeChange(2)">
               <i class="icon el-icon-timer"></i> 学习进度
             </div>
           </div>
           <div class="chapters">
             <template v-if="type === 1">
               <template v-if="chapterList.length">
-                <div class="chapter"
-                     v-for="(item,index) in chapterList"
-                     :key="index">
+                <div class="chapter" v-for="(item, i) in chapterList" :key="i">
                   <div class="chapterName">{{ item.name }}</div>
-                  <div class="section"
-                       v-if="item.subsectionList.length">
-                    <p class="sectionName"
-                       :class="{active: curLink === `${item.name}${section.name}`}"
-                       v-for="(section,i) in item.subsectionList"
-                       :key="i"
-                       @click="preview(section, item.name)">
-                      <img v-if="section.fileType === 'pptx'"
-                           src="@/assets/img/exts/ppt.png"
-                           alt="">
-                      <img v-else-if="section.fileType === 'mp4'"
-                           src="@/assets/img/exts/video.png"
-                           alt="">
+                  <div class="section" v-if="item.subsectionList.length">
+                    <p class="sectionName" :class="{ active: curLink === `${item.name}${section.name}` }"
+                      v-for="(section, i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
+                      <img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
+                      <img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt="">
                       <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
-                           src="@/assets/img/exts/word.png"
-                           alt="">
-                      <img v-else-if="section.fileType === 'txt'"
-                           src="@/assets/img/exts/txt.png"
-                           alt="">
-                      <img v-else-if="section.fileType === 'pdf'"
-                           src="@/assets/img/exts/pdf.png"
-                           alt="">
-                      <img v-else
-                           src="@/assets/img/exts/pic.png"
-                           alt="">
+                        src="@/assets/img/exts/word.png" alt="">
+                      <img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt="">
+                      <img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
+                      <img v-else src="@/assets/img/exts/pic.png" alt="">
                       {{ section.name }}
                     </p>
                   </div>
                 </div>
               </template>
             </template>
-            <div v-else
-                 class="section">
-              <p class="sectionName"
-                 v-for="(item, i) in progressList"
-                 :key="i"
-                 :title="item.projectName">
+            <div v-else class="section">
+              <p class="sectionName" v-for="(item, i) in progressList" :key="i" :title="item.projectName">
                 {{ i + 1 }}.
                 {{ item.projectName }}
                 <i :class="['icon', item.whetherToStudyOrNot ? 'el-icon-success' : 'circle']"
-                   @click.stop="studySection(item)"></i>
+                  @click.stop="studySection(item)"></i>
               </p>
             </div>
           </div>
@@ -161,45 +96,30 @@
     </div>
 
     <div class="tabs">
-      <a class="item"
-         v-for="(item, i) in tabs"
-         :key="i"
-         :class="{active: item.id == active}"
-         @click="tabChange(item)">{{ item.name }}</a>
+      <a class="item" v-for="(item, i) in tabs" :key="i" :class="{ active: item.id == active }"
+        @click="tabChange(item)">{{
+          item.name }}</a>
     </div>
     <div class="flex">
       <div class="tab-content">
-        <div v-if="active === 1"
-             class="page">
-          <div class="des"
-               v-html="briefIntroduction"></div>
+        <div v-if="active === 1" class="page">
+          <div class="des" v-html="briefIntroduction"></div>
         </div>
-        <div v-if="active === 2"
-             class="page">
+        <div v-if="active === 2" class="page">
           <template v-if="showNoteAdd || !notes.length">
-            <el-form class="form"
-                     ref="form"
-                     label-width="120px"
-                     center>
-              <el-form-item class="required"
-                            label="笔记标题">
-                <el-input placeholder="请输入笔记标题"
-                          v-model="noteForm.noteName"
-                          maxlength="30"
-                          style="width: 400px"></el-input>
+            <el-form class="form" ref="form" label-width="120px" center>
+              <el-form-item class="required" label="笔记标题">
+                <el-input placeholder="请输入笔记标题" v-model="noteForm.noteName" maxlength="30"
+                  style="width: 400px"></el-input>
               </el-form-item>
-              <el-form-item class="required"
-                            label="笔记内容">
-                <Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
-                        v-model="noteForm.noteContent"
-                        :init="editorConfig" />
+              <el-form-item class="required" label="笔记内容">
+                <Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="noteForm.noteContent"
+                  :init="editorConfig" />
               </el-form-item>
             </el-form>
             <div class="text-right">
-              <el-button v-if="notes.length"
-                         @click="showNoteAdd = false">取消</el-button>
-              <el-button type="primary"
-                         @click="submitNote">保存</el-button>
+              <el-button v-if="notes.length" @click="showNoteAdd = false">取消</el-button>
+              <el-button type="primary" @click="submitNote">保存</el-button>
             </div>
           </template>
           <template v-else>
@@ -207,71 +127,49 @@
               <ul class="filter">
                 <li>
                   <label>搜索：</label>
-                  <el-input placeholder="请输入标题"
-                            v-model="noteKeyword"
-                            clearable></el-input>
+                  <el-input placeholder="请输入标题" v-model="noteKeyword" clearable></el-input>
                 </li>
               </ul>
               <div>
-                <el-button type="primary"
-                           @click="addNote">新增笔记</el-button>
+                <el-button type="primary" @click="addNote">新增笔记</el-button>
               </div>
             </div>
             <el-timeline class="timeline">
-              <el-timeline-item placement="top"
-                                v-for="(item, i) in notes"
-                                :key="i">
+              <el-timeline-item placement="top" v-for="(item, i) in notes" :key="i">
                 <p class="sign">{{ item.createTime }}</p>
                 <div class="ver">
                   {{ item.noteName }}
                   <span class="action">
-                    <i class="el-icon-edit-outline"
-                       @click="editNote(item)"></i>
-                    <i class="el-icon-delete"
-                       @click="delNote(item)"></i>
+                    <i class="el-icon-edit-outline" @click="editNote(item)"></i>
+                    <i class="el-icon-delete" @click="delNote(item)"></i>
                   </span>
                 </div>
-                <div class="des"
-                     v-html="item.noteContent"></div>
+                <div class="des" v-html="item.noteContent"></div>
               </el-timeline-item>
             </el-timeline>
           </template>
         </div>
-        <div v-if="active === 4"
-             class="page">
-          <quill ref="quill"
-                 :border="true"
-                 v-model="comment"
-                 :height="150"
-                 :toTop="false" />
+        <div v-if="active === 4" class="page">
+          <quill ref="quill" :border="true" v-model="comment" :height="150" :toTop="false" />
           <div class="m-t-10 text-right">
-            <el-button type="primary"
-                       size="mini"
-                       @click="submitComment(0)">提交</el-button>
+            <el-button type="primary" size="mini" @click="submitComment(0)">提交</el-button>
           </div>
           <ul class="msg">
-            <li v-for="(item, i) in comments"
-                :key="i"
-                :id="'comment' + item.commentId">
+            <li v-for="(item, i) in comments" :key="i" :id="'comment' + item.commentId">
               <div class="li-wrap">
-                <img :src="item.createUserAvatars"
-                     alt=""
-                     class="avatar">
+                <img :src="item.createUserAvatars" alt="" class="avatar">
                 <div class="texts">
                   <h6>
                     <span class="name">{{ item.createUsername }}</span>
                     发表于 {{ item.createTime }}
                   </h6>
-                  <div class="m-t-8"
-                       v-html="item.content"></div>
+                  <div class="m-t-8" v-html="item.content"></div>
                 </div>
                 <div class="action">
-                  <i class="icon el-icon-chat-dot-square"
-                     @click="showReplay(item)"></i>
+                  <i class="icon el-icon-chat-dot-square" @click="showReplay(item)"></i>
                   <!-- 当前用户是管理员 || 当前用户的account==该条评论的创建人accountId -->
                   <i v-if="(item.currentRoleName && item.currentRoleName.includes('管理员')) || item.currentAccountId == item.createAccountId"
-                     class="icon el-icon-delete"
-                     @click="delComment(item)"></i>
+                    class="icon el-icon-delete" @click="delComment(item)"></i>
                   <!-- <div class="like-wrap"
                        @click="like($event, item)">
                     <img v-if="item.isLike"
@@ -286,46 +184,32 @@
                   </div> -->
                 </div>
               </div>
-              <div class="reply"
-                   v-if="item.showReply">
-                <quill :border="true"
-                       v-model="item.replyContent"
-                       :toTop="false"
-                       :height="150" />
+              <div class="reply" v-if="item.showReply">
+                <quill :border="true" v-model="item.replyContent" :toTop="false" :height="150" />
                 <div class="m-t-10 text-right">
-                  <el-button type="primary"
-                             size="mini"
-                             @click="submitComment(item)">提交</el-button>
+                  <el-button type="primary" size="mini" @click="submitComment(item)">提交</el-button>
                 </div>
               </div>
-              <ul class="msg children"
-                  v-if="item.showChildren">
-                <li v-for="(reply,i) in item.children"
-                    :key="i"
-                    :id="'comment' + reply.commentId">
+              <ul class="msg children" v-if="item.showChildren">
+                <li v-for="(reply, i) in item.children" :key="i" :id="'comment' + reply.commentId">
                   <div class="li-wrap">
-                    <img class="avatar"
-                         :src="reply.createUserAvatars"
-                         alt="">
+                    <img class="avatar" :src="reply.createUserAvatars" alt="">
                     <div class="texts">
-                      <div class="name">{{reply.createUsername}}</div>
+                      <div class="name">{{ reply.createUsername }}</div>
                       <div class="flex m-v-8">
                         <template v-if="reply.level !== 2">
                           回复
                           <span class="reply-name">@{{ reply.replyUsername }}：</span>
                         </template>
-                        <div class="des"
-                             v-html="reply.content"></div>
+                        <div class="des" v-html="reply.content"></div>
                       </div>
-                      <div class="date">{{reply.createTime}}</div>
+                      <div class="date">{{ reply.createTime }}</div>
                     </div>
                     <div class="action">
-                      <i class="icon el-icon-chat-dot-square"
-                         @click="showReplay(reply)"></i>
+                      <i class="icon el-icon-chat-dot-square" @click="showReplay(reply)"></i>
                       <!-- 当前用户是管理员 || 当前用户的account==该条评论的创建人accountId -->
                       <i v-if="(reply.currentRoleName && reply.currentRoleName.includes('管理员')) || reply.currentAccountId == reply.createAccountId"
-                         class="icon el-icon-delete"
-                         @click="delComment(reply)"></i>
+                        class="icon el-icon-delete" @click="delComment(reply)"></i>
                       <!-- <div class="like-wrap"
                            @click="like($event, item, reply)">
                         <img v-if="reply.isLike"
@@ -340,97 +224,64 @@
                       </div> -->
                     </div>
                   </div>
-                  <div class="reply"
-                       v-if="reply.showReply">
-                    <quill :border="true"
-                           v-model="reply.replyContent"
-                           :toTop="false"
-                           :height="150" />
+                  <div class="reply" v-if="reply.showReply">
+                    <quill :border="true" v-model="reply.replyContent" :toTop="false" :height="150" />
                     <div class="m-t-10 text-right">
-                      <el-button type="primary"
-                                 size="mini"
-                                 @click="submitComment(item, reply)">提交</el-button>
+                      <el-button type="primary" size="mini" @click="submitComment(item, reply)">提交</el-button>
                     </div>
                   </div>
                 </li>
               </ul>
-              <div v-if="item.children"
-                   class="toggle"><span @click="item.showChildren = !item.showChildren">{{item.showChildren ? '收起所有回复' : `查看所有${item.children.length}条回复`}} <i class="el-icon-arrow-down"></i></span></div>
+              <div v-if="item.children" class="toggle"><span @click="item.showChildren = !item.showChildren">{{
+                item.showChildren ? '收起所有回复' :
+                  `查看所有${item.children.length}条回复`}} <i class="el-icon-arrow-down"></i></span></div>
             </li>
           </ul>
         </div>
       </div>
       <div class="rank">
         <h6 class="title">练习成绩排行</h6>
-        <el-select style="width: 100%"
-                   v-model="archProject"
-                   placeholder="请选择"
-                   @change="getMaximumScore">
-          <el-option v-for="(item, i) in progressList"
-                     :key="i"
-                     :label="item.projectName"
-                     :value="item.projectId"></el-option>
+        <el-select style="width: 100%" v-model="archProject" placeholder="请选择" @change="getMaximumScore">
+          <el-option v-for="(item, i) in progressList" :key="i" :label="item.projectName"
+            :value="item.projectId"></el-option>
         </el-select>
-        <div v-if="maximumScores.length"
-             class="arches">
-          <div v-for="(item, i) in maximumScores"
-               :key="i"
-               class="line">
+        <div v-if="maximumScores.length" class="arches">
+          <div v-for="(item, i) in maximumScores" :key="i" class="line">
             <div>
-              <img :src="item.userAvatars"
-                   alt=""
-                   class="avatar">
+              <img :src="item.userAvatars" alt="" class="avatar">
               <span class="name">{{ item.userName }}</span>
             </div>
             <span class="point">{{ item.highestScore }}分</span>
           </div>
         </div>
-        <p v-else
-           class="none">暂无数据</p>
+        <p v-else class="none">暂无数据</p>
       </div>
     </div>
 
-    <el-dialog title="请选择项目"
-               v-loading="loading"
-               :visible.sync="projectVisible"
-               width="828px"
-               custom-class="project-dia"
-               :close-on-click-modal="false">
+    <el-dialog title="请选择项目" v-loading="loading" :visible.sync="projectVisible" width="828px" custom-class="project-dia"
+      :close-on-click-modal="false">
       <ul class="projects">
-        <li v-for="(item, i) in projects"
-            :key="i"
-            :class="{active: curProject == item.projectId}"
-            @click="selectProject(item)">
-          <img src="@/assets/img/project.png"
-               alt="">
+        <li v-for="(item, i) in projects" :key="i" :class="{ active: curProject == item.projectId }"
+          @click="selectProject(item)">
+          <img src="@/assets/img/project.png" alt="">
           <span>{{ i + 1 }}. {{ item.projectName }}</span>
         </li>
       </ul>
 
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button size="small"
-                   @click="projectVisible = false">取 消</el-button>
-        <el-button size="small"
-                   type="primary"
-                   @click="toSub">确 定</el-button>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="projectVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="toSub">确 定</el-button>
       </span>
     </el-dialog>
 
     <!-- 购买弹框 -->
-    <el-dialog title="温馨提示"
-               :visible.sync="buyVisible"
-               width="420px"
-               center
-               :close-on-click-modal="false">
+    <el-dialog title="温馨提示" :visible.sync="buyVisible" width="420px" center :close-on-click-modal="false">
       <div class="buy">
         <p class="tips">该课程订阅期限已到期，请联系院校管理员续费</p>
       </div>
     </el-dialog>
 
-    <pdfDia :key="pdfVisible"
-            :visible.sync="pdfVisible"
-            :src.sync="pdfSrc" />
+    <pdfDia :key="pdfVisible" :visible.sync="pdfVisible" :src.sync="pdfSrc" />
   </div>
 </template>
 
@@ -1036,428 +887,513 @@ export default {
 <style lang="scss" scoped>
 @import '../../../styles/page/station.scss';
 $height: 700px;
+
 .video_wid,
 .cover {
-    position: relative;
-    width: 76%;
-    height: $height !important;
-    border: 0;
+  position: relative;
+  width: 76%;
+  height: $height !important;
+  border: 0;
 }
+
 .page {
-    /deep/.des {
-        overflow: auto;
-        div,
-        p,
-        span {
-            font-family: PingFangSC-Regular !important;
-        }
+  /deep/.des {
+    overflow: auto;
+
+    div,
+    p,
+    span {
+      font-family: PingFangSC-Regular !important;
     }
+  }
 }
+
 .l-title {
-    font-size: 17px;
+  font-size: 17px;
 }
+
 .cover {
-    flex: 1;
-    background-color: #252528;
-    img {
-        border-radius: 8px;
-    }
-    &.is-word {
-        overflow: hidden;
-    }
+  flex: 1;
+  background-color: #252528;
+
+  img {
+    border-radius: 8px;
+  }
+
+  &.is-word {
+    overflow: hidden;
+  }
 }
+
 .fileIframe {
-    height: $height !important;
+  height: $height !important;
 }
+
 .video_wid,
 .inner {
-    width: 100%;
-    height: 100% !important;
-    border: 0;
-    overflow: auto;
+  width: 100%;
+  height: 100% !important;
+  border: 0;
+  overflow: auto;
 }
+
 .cover.is-word {
-    .inner {
-        height: calc(100% + 38px) !important;
-        margin-top: -38px;
-    }
+  .inner {
+    height: calc(100% + 38px) !important;
+    margin-top: -38px;
+  }
 }
+
 .video_wid:focus {
-    outline: none;
+  outline: none;
 }
+
 .catalog {
-    width: 296px;
-    padding: 16px;
-    margin-left: 12px;
-    background-color: #252528;
-    .renew {
-        width: 100%;
-        margin-bottom: 16px;
-        font-size: 17px;
+  width: 296px;
+  padding: 16px;
+  margin-left: 12px;
+  background-color: #252528;
+
+  .renew {
+    width: 100%;
+    margin-bottom: 16px;
+    font-size: 17px;
+  }
+
+  .entry {
+    display: block;
+    width: 100%;
+    height: 34px;
+    margin-bottom: 16px;
+    font-size: 17px;
+    color: #fff;
+    text-align: center;
+    line-height: 34px;
+    background: url(../../../assets/img/entry.png) 0 0/100% 100% no-repeat;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.9;
     }
-    .entry {
-        display: block;
-        width: 100%;
-        height: 34px;
-        margin-bottom: 16px;
-        font-size: 17px;
-        color: #fff;
-        text-align: center;
-        line-height: 34px;
-        background: url(../../../assets/img/entry.png) 0 0/100% 100% no-repeat;
-        cursor: pointer;
-        &:hover {
-            opacity: 0.9;
-        }
+  }
+
+  .types {
+    display: flex;
+    margin: 15px 0;
+
+    .item {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 120px;
+      height: 40px;
+      color: #fff;
+      background-color: #4e4e4e;
+      border-radius: 4px;
+      cursor: pointer;
+
+      &:first-child {
+        margin-right: 10px;
+      }
+
+      &:hover {
+        background-color: #377be3;
+      }
+
+      &.active {
+        background-color: $main-color;
+      }
     }
-    .types {
-        display: flex;
-        margin: 15px 0;
-        .item {
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            width: 120px;
-            height: 40px;
-            color: #fff;
-            background-color: #4e4e4e;
-            border-radius: 4px;
-            cursor: pointer;
-            &:first-child {
-                margin-right: 10px;
-            }
-            &:hover {
-                background-color: #377be3;
-            }
-            &.active {
-                background-color: $main-color;
-            }
-        }
-        .icon {
-            margin-right: 5px;
-            font-size: 18px;
-        }
+
+    .icon {
+      margin-right: 5px;
+      font-size: 18px;
     }
+  }
 }
+
 .list {
-    height: calc(700px - 82px);
-    overflow-y: auto;
-    .title {
-        margin-bottom: 11px;
-        color: #fff;
-        font-size: 16px;
-    }
-    .pro-title {
-        margin-bottom: 5px;
-        color: #fff;
-        font-size: 12px;
-    }
-    /deep/.el-progress-bar {
-        width: 92%;
-    }
-    /deep/.el-progress__text {
-        color: #fff;
+  height: calc(700px - 82px);
+  overflow-y: auto;
+
+  .title {
+    margin-bottom: 11px;
+    color: #fff;
+    font-size: 16px;
+  }
+
+  .pro-title {
+    margin-bottom: 5px;
+    color: #fff;
+    font-size: 12px;
+  }
+
+  /deep/.el-progress-bar {
+    width: 92%;
+  }
+
+  /deep/.el-progress__text {
+    color: #fff;
+  }
+
+  .desc-wrap {
+    position: relative;
+
+    .desc {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.65);
+      line-height: 22px;
+      @include mul-ellipsis(2);
+
+      &.active {
+        display: block;
+        overflow: visible;
+      }
     }
-    .desc-wrap {
-        position: relative;
-        .desc {
-            font-size: 12px;
-            color: rgba(0, 0, 0, 0.65);
-            line-height: 22px;
-            @include mul-ellipsis(2);
-            &.active {
-                display: block;
-                overflow: visible;
-            }
+
+    .arrow {
+      position: absolute;
+      bottom: 2px;
+      right: 0;
+      display: flex;
+      justify-content: space-between;
+      width: 46px;
+      background-color: #fff;
+
+      span {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+      }
+
+      img {
+        width: 16px;
+        cursor: pointer;
+      }
+
+      &.active {
+        span {
+          opacity: 0;
         }
-        .arrow {
-            position: absolute;
-            bottom: 2px;
-            right: 0;
-            display: flex;
-            justify-content: space-between;
-            width: 46px;
-            background-color: #fff;
-            span {
-                font-size: 14px;
-                color: rgba(0, 0, 0, 0.65);
-            }
-            img {
-                width: 16px;
-                cursor: pointer;
-            }
-            &.active {
-                span {
-                    opacity: 0;
-                }
-                img {
-                    transform: rotate(180deg);
-                }
-            }
+
+        img {
+          transform: rotate(180deg);
         }
+      }
     }
-    .chapters {
-        margin-top: 16px;
-        max-height: calc(100% - 53px);
-        overflow: auto;
-    }
-    .chapter {
-        margin-bottom: 20px;
+  }
+
+  .chapters {
+    margin-top: 16px;
+    max-height: calc(100% - 53px);
+    overflow: auto;
+  }
+
+  .chapter {
+    margin-bottom: 20px;
+  }
+
+  .chapterName {
+    color: #fff;
+    font-size: 14px;
+  }
+
+  .section {
+    padding: 5px 15px;
+    margin-top: 12px;
+    background-color: #121214;
+  }
+
+  .sectionName {
+    position: relative;
+    padding-right: 15px;
+    margin: 12px 0;
+    font-size: 12px;
+    color: #999;
+    cursor: pointer;
+    @include ellipsis;
+
+    img {
+      margin-right: 8px;
     }
-    .chapterName {
-        color: #fff;
-        font-size: 14px;
+
+    .icon {
+      position: absolute;
+      right: 0;
+      font-size: 14px;
+      color: #00c935;
     }
-    .section {
-        padding: 5px 15px;
-        margin-top: 12px;
-        background-color: #121214;
+
+    .circle {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      border: 1px solid #ccc;
     }
-    .sectionName {
-        position: relative;
-        padding-right: 15px;
-        margin: 12px 0;
-        font-size: 12px;
-        color: #999;
-        cursor: pointer;
-        @include ellipsis;
-        img {
-            margin-right: 8px;
-        }
-        .icon {
-            position: absolute;
-            right: 0;
-            font-size: 14px;
-            color: #00c935;
-        }
-        .circle {
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            border: 1px solid #ccc;
-        }
-        &.active {
-            color: #fff;
-        }
+
+    &.active {
+      color: #fff;
     }
+  }
 }
+
 .buy {
-    text-align: center;
-    .tips {
-        margin-bottom: 10px;
-        font-size: 14px;
-    }
-    img {
-        width: 85%;
-    }
+  text-align: center;
+
+  .tips {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+
+  img {
+    width: 85%;
+  }
 }
+
 .el-image-viewer__wrapper {
-    transform: translateY(-10px);
-    transition: transform 0.5s;
+  transform: translateY(-10px);
+  transition: transform 0.5s;
 
-    &.active {
-        transform: translateY(0);
-    }
+  &.active {
+    transform: translateY(0);
+  }
 }
+
 .el-image-viewer__close {
-    z-index: 2000;
-    top: 15px;
-    right: 15px;
-    &.doc-close {
-        i {
-            color: #000 !important;
-        }
+  z-index: 2000;
+  top: 15px;
+  right: 15px;
+
+  &.doc-close {
+    i {
+      color: #000 !important;
     }
+  }
 }
+
 .list::-webkit-scrollbar {
-    width: 4px;
+  width: 4px;
 }
+
 .list::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: rgba(0, 0, 0, 0.06);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.06);
 }
 
 .mask {
-    z-index: 9;
-    position: absolute;
-    background-color: rgb(57, 58, 61);
+  z-index: 9;
+  position: absolute;
+  background-color: rgb(57, 58, 61);
 }
+
 .word-mask {
-    z-index: 9;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    background-color: rgb(243, 242, 241);
+  z-index: 9;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  background-color: rgb(243, 242, 241);
 }
+
 .word-mask1 {
-    z-index: 9;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    background-color: #185abd;
+  z-index: 9;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  background-color: #185abd;
 }
+
 .word-mask2 {
-    z-index: 9;
-    position: absolute;
-    background-color: transparent;
+  z-index: 9;
+  position: absolute;
+  background-color: transparent;
 }
+
 .excel-mask1 {
-    z-index: 9;
-    position: absolute;
-    top: 0;
-    left: 20%;
-    width: 60%;
-    background-color: #107c41;
+  z-index: 9;
+  position: absolute;
+  top: 0;
+  left: 20%;
+  width: 60%;
+  background-color: #107c41;
 }
+
 /deep/.pdf-dia {
-    border-radius: 0 !important;
-    .el-dialog__header {
-        display: none;
-    }
-    .el-dialog__body {
-        padding: 0;
-    }
-    .el-dialog__headerbtn {
-        top: 10px;
-        .el-dialog__close {
-            color: #fff;
-            font-size: 16px;
-        }
+  border-radius: 0 !important;
+
+  .el-dialog__header {
+    display: none;
+  }
+
+  .el-dialog__body {
+    padding: 0;
+  }
+
+  .el-dialog__headerbtn {
+    top: 10px;
+
+    .el-dialog__close {
+      color: #fff;
+      font-size: 16px;
     }
+  }
 }
+
 .pdf {
-    position: relative;
-    .full {
-        position: absolute;
-        top: 7px;
-        right: 10px;
-        cursor: pointer;
-    }
-    .arrow {
-        padding: 10px 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 16px;
-        color: #fff;
-        background-color: #333;
-        .turn {
-            margin: 0 10px;
-            font-size: 18px;
-            cursor: pointer;
-        }
-    }
-    .pdf-wrap {
-        width: 80%;
-        margin: 0 auto;
+  position: relative;
+
+  .full {
+    position: absolute;
+    top: 7px;
+    right: 10px;
+    cursor: pointer;
+  }
+
+  .arrow {
+    padding: 10px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    color: #fff;
+    background-color: #333;
+
+    .turn {
+      margin: 0 10px;
+      font-size: 18px;
+      cursor: pointer;
     }
+  }
+
+  .pdf-wrap {
+    width: 80%;
+    margin: 0 auto;
+  }
 }
+
 /deep/.project-dia {
-    .el-dialog__body {
-        padding: 28px 32px;
-    }
+  .el-dialog__body {
+    padding: 28px 32px;
+  }
 }
+
 .projects {
-    display: flex;
-    flex-wrap: wrap;
-    max-height: 400px;
-    overflow: auto;
-    li {
-        display: inline-flex;
-        align-items: center;
-        width: 238px;
-        padding: 16px;
-        margin: 0 20px 20px 0;
-        background-color: #f6f8fa;
-        border-radius: 16px;
-        cursor: pointer;
-        &:hover {
-            span {
-                color: #007eff;
-            }
-        }
-        &:nth-child(3n) {
-            margin-right: 0;
-        }
-        &.active {
-            background-color: #f2f7ff;
-            span {
-                color: #3988ff;
-            }
-        }
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 400px;
+  overflow: auto;
+
+  li {
+    display: inline-flex;
+    align-items: center;
+    width: 238px;
+    padding: 16px;
+    margin: 0 20px 20px 0;
+    background-color: #f6f8fa;
+    border-radius: 16px;
+    cursor: pointer;
+
+    &:hover {
+      span {
+        color: #007eff;
+      }
     }
-    span {
-        max-width: 140px;
-        margin-left: 14px;
-        font-size: 14px;
-        color: #333;
+
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+
+    &.active {
+      background-color: #f2f7ff;
+
+      span {
+        color: #3988ff;
+      }
     }
+  }
+
+  span {
+    max-width: 140px;
+    margin-left: 14px;
+    font-size: 14px;
+    color: #333;
+  }
 }
+
 .tabs {
-    display: flex;
-    align-items: center;
-    margin: 10px 0;
-    .item {
-        padding: 0 10px;
-        margin-right: 16px;
-        font-size: 16px;
-        text-align: center;
-        color: #333;
-        line-height: 50px;
-        border-bottom: 3px solid transparent;
-        cursor: pointer;
-        &.active {
-            color: #007eff;
-            border-color: #007eff;
-        }
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+
+  .item {
+    padding: 0 10px;
+    margin-right: 16px;
+    font-size: 16px;
+    text-align: center;
+    color: #333;
+    line-height: 50px;
+    border-bottom: 3px solid transparent;
+    cursor: pointer;
+
+    &.active {
+      color: #007eff;
+      border-color: #007eff;
     }
+  }
 }
+
 .tab-content {
-    width: calc(100% - 308px);
+  width: calc(100% - 308px);
 }
+
 .rank {
-    width: 296px;
-    padding: 20px;
-    margin-left: 12px;
-    background-color: #fff;
-    .title {
-        margin-bottom: 10px;
-        font-size: 15px;
-        font-weight: 400;
-    }
-    .arches {
-        max-height: 223px;
-        padding-right: 10px;
-        margin-top: 20px;
-        overflow: auto;
-    }
-    .line {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
-    }
-    .avatar {
-        width: 35px;
-        height: 35px;
-        margin-right: 10px;
-    }
-    .point {
-        font-weight: 600;
-        color: #007eff;
-    }
-    .none {
-        margin-top: 10px;
-        text-align: center;
-        font-size: 12px;
-        color: #727272;
-    }
+  width: 296px;
+  padding: 20px;
+  margin-left: 12px;
+  background-color: #fff;
+
+  .title {
+    margin-bottom: 10px;
+    font-size: 15px;
+    font-weight: 400;
+  }
+
+  .arches {
+    max-height: 223px;
+    padding-right: 10px;
+    margin-top: 20px;
+    overflow: auto;
+  }
+
+  .line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .avatar {
+    width: 35px;
+    height: 35px;
+    margin-right: 10px;
+  }
+
+  .point {
+    font-weight: 600;
+    color: #007eff;
+  }
+
+  .none {
+    margin-top: 10px;
+    text-align: center;
+    font-size: 12px;
+    color: #727272;
+  }
 }
+
 @media (max-width: 1700px) {
-    .wrap {
-        padding: 12px 5% 20px;
-    }
+  .wrap {
+    padding: 12px 5% 20px;
+  }
 }
 </style>
\ No newline at end of file